zsjz-ai/ai-electron/frontend/src/case/views/dm/portrait.vue

<template>
  <div :class="prefixCls" class="case-portrait-page qj-portrait-page">
    <div class="qj-page">
      <aside class="qj-sidebar">
        <div class="qj-side-head">
          <div class="qj-side-title"
            >画像对象 <span class="qj-count">{{ filteredPersonList.length }}</span></div
          >
        </div>
        <div class="qj-side-search">
          <Input v-model:value="personKeyword" placeholder="搜索姓名 / 证件号" allow-clear>
            <template #prefix>
              <SearchOutlined class="qj-search-icon" />
            </template>
          </Input>
        </div>
        <Button type="primary" block class="qj-add-btn" @click="openCreateModal">
          <PlusOutlined />
          新增对象
        </Button>
        <div class="qj-person-list">
          <template v-if="filteredPersonList.length">
            <div
              v-for="item in filteredPersonList"
              :key="item.person.personCertNo || item.person.personName || item.index"
              class="qj-person"
              :class="{ active: selectedPersonId === item.index }"
              :title="toPersonName(item.person)"
              @click="selectPerson(item.index)"
            >
              <Popover placement="rightTop" trigger="hover" overlayClassName="person-card-popover">
                <template #content>
                  <div class="avatar-pop-content">
                    <div class="edit-item" @click.stop="openEditModal(item.person)">编辑</div>
                    <div class="edit-item delete" @click.stop="handleDelete(item.person)">删除</div>
                  </div>
                </template>
                <div class="qj-person-trigger">
                  <PersonAvatar
                    class="qj-person-avatar"
                    :src="getPersonPhoto(item.person)"
                    :alt="toPersonName(item.person)"
                    :size="34"
                  />
                  <div class="qj-person-info">
                    <div class="qj-person-name" :title="toPersonName(item.person)">{{ toPersonName(item.person) }}</div>
                    <div v-if="item.person.personCertNo" class="qj-person-sub">{{ item.person.personCertNo }}</div>
                  </div>
                </div>
              </Popover>
            </div>
          </template>
          <div v-else class="qj-side-empty">
            <EmptyState
              :title="personList.length ? '未找到匹配对象' : '暂无对象'"
              :description="personList.length ? '试试更换搜索关键词' : '可点击上方“新增对象”创建画像主体'"
              variant="compact"
              :min-height="150"
            />
          </div>
        </div>
        <div class="qj-side-foot">
          <Button class="qj-group-btn" @click="openGroupModal">
            <FolderOpenOutlined />
            对象分组
          </Button>
        </div>
      </aside>

      <div ref="rightPanelRef" class="qj-right">
        <div class="qj-scroll">
          <section id="section-basic" class="qj-hero">
            <div class="qj-hero-top">
              <PersonAvatar class="qj-hero-avatar" :src="basicPhoto" :alt="basicName" :size="72" />
              <div class="qj-hero-id">
                <div class="qj-hero-name-row">
                  <h1 class="qj-hero-name">{{ basicName }}</h1>
                  <span class="qj-badge qj-badge-primary"><UserOutlined />画像主体</span>
                  <span class="qj-badge">对象分组：{{ objectGroupText }}</span>
                </div>
              </div>
              <div class="qj-hero-actions">
                <Button class="qj-hero-edit-btn" @click="handleEditBasicInfo">
                  <EditOutlined />
                  编辑资料
                </Button>
              </div>
            </div>
            <div class="qj-hero-meta">
              <div v-for="item in displayBasicInfo" :key="item.label" class="qj-hero-meta__item">
                <span class="qj-hero-meta__label">{{ item.label }}：</span>
                <span class="qj-hero-meta__value" :class="{ muted: item.value === '-' }" :title="item.value">{{
                  item.value
                }}</span>
              </div>
            </div>
          </section>

          <nav class="qj-anchors" aria-label="页面章节">
            <button
              v-for="nav in navItems"
              :key="nav.id"
              type="button"
              class="qj-anchor"
              :class="{ active: activeNavId === nav.id }"
              @click="scrollToSection(nav.id)"
            >
              <component :is="nav.icon" />
              {{ nav.label }}
            </button>
            <span class="qj-anchors-tip">滚动页面时自动定位</span>
          </nav>

          <section id="section-relation" class="qj-card qj-relation-card">
            <IntimacyPanel :selected-person="selectedPerson" @jump-to-analysis="handleJumpToAnalysis" />
          </section>

          <section id="section-comm" class="qj-card">
            <div class="qj-card-head">
              <div class="qj-card-title">通讯信息</div>
              <div class="qj-head-actions">
                <Button type="link" class="qj-link" @click="openCallSummaryModal">
                  <FileTextOutlined />
                  通信汇总
                </Button>
              </div>
            </div>
            <div class="qj-card-body qj-comm-metrics">
              <div class="qj-metrics two">
                <div class="qj-metric">
                  <span class="qj-metric-icon"><PhoneOutlined /></span>
                  <div class="qj-metric-main">
                    <div class="qj-metric-label">电话号码</div>
                    <div class="qj-metric-value">{{ commSummary.phoneSummary }}</div>
                    <div class="qj-metric-chips">
                      <button
                        v-for="carrier in carrierTags"
                        :key="carrier.carrierName"
                        type="button"
                        class="qj-chip"
                        @click="openCallOperPhoneModal(carrier)"
                      >
                        {{ carrier.label }}
                      </button>
                      <span v-if="!carrierTags.length" class="qj-chip neutral">-</span>
                    </div>
                  </div>
                </div>
                <div class="qj-metric">
                  <span class="qj-metric-icon"><CalendarOutlined /></span>
                  <div class="qj-metric-main">
                    <div class="qj-metric-label">通讯记录时间段</div>
                    <div class="qj-metric-value">{{ commSummary.timeRange }}</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="qj-split">
              <div class="qj-pane">
                <div class="qj-pane-head">
                  <div class="qj-pane-title">通信类型占比</div>
                </div>
                <div v-if="hasRenderableCommTypeRatioData" class="qj-donut-wrap">
                  <div ref="commTypeChartRef" class="qj-donut-chart"></div>
                  <div class="qj-legend">
                    <div v-for="item in commTypeLegend" :key="item.name" class="qj-legend-row">
                      <span class="qj-legend-dot" :style="{ backgroundColor: item.color }"></span>
                      <div>
                        <div class="qj-legend-label">
                          {{ item.name }}
                          <span class="qj-legend-pct">{{ item.rate }}%</span>
                        </div>
                        <div class="qj-legend-value">{{ item.count }} <small>次</small></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else class="qj-chart-empty">
                  <EmptyState description="通信占比数据接入后将在此展示" />
                </div>
              </div>

              <div class="qj-pane">
                <div class="qj-pane-head">
                  <div class="qj-pane-title">常联系对象 TOP10</div>
                  <div class="qj-pane-tools">
                    <span class="qj-mini-field">
                      <CalendarOutlined />
                      <DatePicker.RangePicker
                        v-model:value="commTopQuery.dateRange"
                        class="qj-range-picker"
                        value-format="YYYY-MM-DD"
                        :placeholder="['开始日期', '结束日期']"
                      />
                    </span>
                    <Button type="link" size="small" class="qj-link" @click="openCallSummaryFromTopContacts">
                      查看更多
                    </Button>
                  </div>
                </div>
                <div v-if="hasRenderableTopContacts" class="qj-rank-list">
                  <button
                    v-for="(row, index) in commTopRankRows"
                    :key="`${row.name}-${index}`"
                    type="button"
                    class="qj-rank-row"
                    @click="handleCommTopRowClick(row)"
                  >
                    <span class="qj-rank-no">{{ index + 1 }}</span>
                    <span class="qj-rank-name" :title="row.name">{{ row.name }}</span>
                    <span class="qj-rank-track">
                      <span class="qj-rank-bar" :style="{ width: `${row.rate}%` }"></span>
                    </span>
                    <span class="qj-rank-val">{{ row.count }}</span>
                  </button>
                </div>
                <div v-else class="qj-chart-empty">
                  <EmptyState description="筛选联系人后可查看 TOP10 统计结果" />
                </div>
              </div>
            </div>

            <div class="qj-stations">
              <span class="qj-stations-label"><EnvironmentOutlined />常通话基站</span>
              <template v-if="stations.length">
                <span v-for="station in stations" :key="station" class="qj-station">{{ station }}</span>
              </template>
              <span v-else class="qj-station-empty">-</span>
              <Button type="link" class="qj-link qj-stations-map" @click="viewStationMap">查看地图</Button>
            </div>
          </section>

          <section id="section-trade" class="qj-card">
            <div class="qj-card-head">
              <div class="qj-card-title">交易信息</div>
              <div class="qj-head-actions">
                <Button type="link" class="qj-link" @click="openTransSummaryModal">
                  <FileTextOutlined />
                  交易汇总
                </Button>
              </div>
            </div>
            <div class="qj-card-body">
              <div class="qj-metrics four">
                <div class="qj-metric">
                  <span class="qj-metric-icon"><CreditCardOutlined /></span>
                  <div class="qj-metric-main">
                    <div class="qj-metric-label">银行卡</div>
                    <div class="qj-metric-value">{{ tradeSummary.cardSummary }}</div>
                    <div class="qj-metric-chips">
                      <button
                        v-for="tag in tradeBankTags"
                        :key="tag.bankName"
                        type="button"
                        class="qj-chip"
                        @click="openTransBankCardModal(tag)"
                      >
                        {{ tag.label }}
                      </button>
                      <span v-if="!tradeBankTags.length" class="qj-chip neutral">-</span>
                    </div>
                  </div>
                </div>
                <div class="qj-metric">
                  <span class="qj-metric-icon green"><ArrowDownOutlined /></span>
                  <div class="qj-metric-main">
                    <div class="qj-metric-label">总收入 · {{ tradeSummary.incomeRate }}</div>
                    <div class="qj-metric-value green">{{ tradeSummary.incomeAmount }}</div>
                  </div>
                </div>
                <div class="qj-metric">
                  <span class="qj-metric-icon"><ArrowUpOutlined /></span>
                  <div class="qj-metric-main">
                    <div class="qj-metric-label">总支出 · {{ tradeSummary.expendRate }}</div>
                    <div class="qj-metric-value blue">{{ tradeSummary.expendAmount }}</div>
                  </div>
                </div>
                <div class="qj-metric">
                  <span class="qj-metric-icon red"><MoneyCollectOutlined /></span>
                  <div class="qj-metric-main">
                    <div class="qj-metric-label">单笔最高支出</div>
                    <div class="qj-metric-value red">{{ tradeSummary.maxExpend }}</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="qj-split">
              <div class="qj-pane">
                <div class="qj-pane-head">
                  <div class="qj-pane-title">借贷类型占比</div>
                </div>
                <template v-if="hasTradeRatioData">
                  <div class="qj-donut-wrap">
                    <div class="qj-donut-visual">
                      <div ref="tradeRatioChartRef" class="qj-donut-chart"></div>
                      <div class="qj-donut-center">
                        <strong>{{ transStatData?.cardCount ?? 0 }}</strong>
                        <span>银行卡</span>
                      </div>
                    </div>
                    <div class="qj-legend">
                      <button
                        type="button"
                        class="qj-legend-row qj-legend-click"
                        @click="handleDrillByDebitCredit('收入')"
                      >
                        <span class="qj-legend-dot" style="background: #12b76a"></span>
                        <div>
                          <div class="qj-legend-label">
                            总收入
                            <span class="qj-legend-pct">{{ tradeSummary.incomeRate }}</span>
                          </div>
                          <div class="qj-legend-value">{{ tradeSummary.incomeAmount }}</div>
                        </div>
                      </button>
                      <button
                        type="button"
                        class="qj-legend-row qj-legend-click"
                        @click="handleDrillByDebitCredit('支出')"
                      >
                        <span class="qj-legend-dot" style="background: #2a50ec"></span>
                        <div>
                          <div class="qj-legend-label">
                            总支出
                            <span class="qj-legend-pct">{{ tradeSummary.expendRate }}</span>
                          </div>
                          <div class="qj-legend-value">{{ tradeSummary.expendAmount }}</div>
                        </div>
                      </button>
                    </div>
                  </div>
                  <div class="qj-kpis">
                    <div class="qj-kpi">
                      <div class="qj-kpi-label">单笔最高支出</div>
                      <div class="qj-kpi-value">{{ tradeSummary.maxExpend }}</div>
                    </div>
                    <div class="qj-kpi">
                      <div class="qj-kpi-label">单笔最高收入</div>
                      <div class="qj-kpi-value" :class="tradeSummary.maxIncome === '-' ? 'muted' : 'green'">{{
                        tradeSummary.maxIncome
                      }}</div>
                    </div>
                  </div>
                </template>
                <div v-else class="qj-chart-empty">
                  <EmptyState description="借贷类型汇总完成后将在此展示" />
                </div>
              </div>

              <div class="qj-pane">
                <div class="qj-pane-head">
                  <div class="qj-pane-title">常交易对象 TOP10</div>
                  <div class="qj-pane-tools">
                    <span class="qj-mini-field">
                      统计指标：
                      <Select
                        v-model:value="tradeTopQuery.indicator"
                        class="qj-inline-select"
                        :options="tradeMetricOptions"
                      />
                    </span>
                    <span class="qj-mini-field">
                      <CalendarOutlined />
                      <DatePicker.RangePicker
                        v-model:value="tradeTopQuery.dateRange"
                        class="qj-range-picker"
                        value-format="YYYY-MM-DD"
                        :placeholder="['开始日期', '结束日期']"
                      />
                    </span>
                    <Radio.Group v-model:value="tradeTopQuery.dimension" class="qj-seg">
                      <Radio value="交易金额">交易金额</Radio>
                      <Radio value="交易次数">交易次数</Radio>
                    </Radio.Group>
                    <Button type="link" size="small" class="qj-link" @click="openTransSummaryModal">查看更多</Button>
                  </div>
                </div>
                <div v-if="tradeTop.length" class="qj-rank-list">
                  <button
                    v-for="(row, index) in tradeTopRankRows"
                    :key="`${row.name}-${index}`"
                    type="button"
                    class="qj-rank-row qj-rank-wide"
                    @click="handleDrillByTradeTop(row)"
                  >
                    <span class="qj-rank-no">{{ index + 1 }}</span>
                    <span class="qj-rank-name" :title="row.name">{{ row.name }}</span>
                    <span class="qj-rank-track">
                      <span class="qj-rank-bar" :style="{ width: `${row.rate}%` }"></span>
                    </span>
                    <span class="qj-rank-amount">{{ formatTradeRankValue(row.value) }}</span>
                  </button>
                </div>
                <div v-else class="qj-chart-empty">
                  <EmptyState description="调整日期或统计指标后可查看 TOP10 结果" />
                </div>
              </div>
            </div>

            <div class="qj-trend">
              <div class="qj-trend-head">
                <div class="qj-trend-title">交易趋势</div>
                <div class="qj-trend-desc">按时间维度观察收入与支出走势，可结合对方名称与日期范围进行筛选</div>
                <div class="qj-trend-tools">
                  <span class="qj-field">
                    对方名称
                    <Select
                      v-model:value="tradeTrendQuery.otherName"
                      class="qj-trend-select"
                      placeholder="请选择对方名称"
                      allow-clear
                      show-search
                      :filter-option="false"
                      :options="tradeTrendOtherNameOptions"
                      :loading="tradeTrendOtherNameLoading"
                      :not-found-content="tradeTrendOtherNameLoading ? '加载中...' : '暂无数据'"
                      @search="handleTradeTrendOtherNameSearch"
                      @popupScroll="handleTradeTrendOtherNamePopupScroll"
                      @dropdownVisibleChange="handleTradeTrendOtherNameDropdownVisibleChange"
                    />
                  </span>
                  <span class="qj-field">
                    交易日期
                    <DatePicker.RangePicker
                      v-model:value="tradeTrendQuery.dateRange"
                      class="qj-range-picker qj-trend-range"
                      value-format="YYYY-MM-DD"
                      :placeholder="['开始日期', '结束日期']"
                    />
                  </span>
                  <span class="qj-field">
                    时间维度
                    <span class="qj-seg">
                      <span
                        class="qj-seg-item"
                        :class="{ on: tradeTrendQuery.timeDimension === 'MONTH' }"
                        @click="changeTradeTrendDimension('MONTH')"
                        >月</span
                      >
                      <span
                        class="qj-seg-item"
                        :class="{ on: tradeTrendQuery.timeDimension === 'YEAR' }"
                        @click="changeTradeTrendDimension('YEAR')"
                        >年</span
                      >
                    </span>
                  </span>
                  <span class="qj-trend-legend">
                    <button
                      v-for="(item, index) in trendLegendArr"
                      :key="item.name"
                      type="button"
                      class="qj-trend-legend-item"
                      :class="{ off: !item.isShow }"
                      @click="changeLegend(item.name, index)"
                    >
                      <i :style="{ backgroundColor: item.color }"></i>
                      {{ item.name }}
                    </button>
                  </span>
                </div>
              </div>
              <div v-if="trendPoints.length && trendLabels.length" class="qj-trend-chart-box">
                <div ref="tradeTrendScrollRef" class="qj-trend-scroll">
                  <div class="qj-trend-chart" :style="trendChartStyle">
                    <div ref="tradeTrendChartRef" class="qj-trend-echart"></div>
                  </div>
                </div>
              </div>
              <div v-else class="qj-chart-empty qj-trend-empty">
                <EmptyState description="设置查询条件后可查看收入与支出趋势" />
              </div>
              <div class="qj-footnote">统计口径：按交易日期归集，收入与支出分列展示</div>
            </div>
          </section>
        </div>
      </div>
    </div>
    <Modal
      v-model:open="personModalVisible"
      @ok="handleSubmit"
      @cancel="closePersonModal"
      :confirmLoading="saving"
      :width="1040"
      :centered="true"
      :okText="isEditMode ? '保存修改' : '创建对象'"
      cancelText="取消"
      wrapClassName="person-edit-modal"
      destroyOnClose
    >
      <template #title>
        <div class="portrait-modal-title-block">
          <div class="portrait-modal-title">{{ isEditMode ? '编辑对象' : '新增对象' }}</div>
          <div class="portrait-modal-subtitle">维护画像主体的基础信息、联系方式与银行卡资料</div>
        </div>
      </template>

      <Form layout="vertical" class="person-form">
        <div class="person-form-section">
          <div class="form-section-head">
            <div>
              <div class="form-section-title">主要信息</div>
              <div class="form-section-desc">基础身份信息、籍贯住址与对象标签归类</div>
            </div>
          </div>
          <div class="person-form-grid">
            <Form.Item label="姓名" required :validateStatus="personNameError ? 'error' : ''" :help="personNameError">
              <Input v-model:value="personForm.personName" placeholder="请输入姓名" @blur="validatePersonName" />
            </Form.Item>
            <Form.Item label="证件号">
              <Input v-model:value="personForm.personCertNo" placeholder="请输入证件号" />
            </Form.Item>
            <Form.Item label="性别">
              <Select
                v-model:value="personForm.personGender"
                placeholder="请选择"
                :getPopupContainer="getModalPopupContainer"
              >
                <Select.Option value="男">男</Select.Option>
                <Select.Option value="女">女</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="婚姻状态">
              <Select v-model:value="personForm.marry" placeholder="请选择" :getPopupContainer="getModalPopupContainer">
                <Select.Option :value="0">未知</Select.Option>
                <Select.Option :value="1">已婚</Select.Option>
                <Select.Option :value="2">未婚</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="出生日期">
              <Input v-model:value="personForm.personBirth" placeholder="请输入 YYYY-MM-DD" />
            </Form.Item>
            <Form.Item label="年龄">
              <Input v-model:value="personForm.personAge" placeholder="请输入年龄" />
            </Form.Item>
            <Form.Item label="标签">
              <Select
                v-model:value="personForm.personTag"
                placeholder="请选择标签"
                :getPopupContainer="getModalPopupContainer"
              >
                <Select.Option value="MAIN">主体</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="民族">
              <Input v-model:value="personForm.nation" placeholder="请输入民族" />
            </Form.Item>
            <Form.Item label="籍贯">
              <Input v-model:value="personForm.nativePlace" placeholder="请输入籍贯" />
            </Form.Item>
            <Form.Item label="户籍地">
              <Input v-model:value="personForm.householdRegistered" placeholder="请输入户籍地" />
            </Form.Item>
            <Form.Item label="地址">
              <Input v-model:value="personForm.personAddress" placeholder="请输入地址" />
            </Form.Item>
            <Form.Item label="上传头像" class="form-item-span-2 person-avatar-form-item">
              <div class="person-avatar-upload">
                <input
                  ref="avatarInputRef"
                  type="file"
                  accept="image/*"
                  hidden
                  aria-hidden="true"
                  class="person-avatar-upload__input"
                  @change="handleAvatarFileChange"
                />
                <button type="button" class="person-avatar-upload__preview" @click="openAvatarFileDialog">
                  <PersonAvatar :src="personAvatarPreviewSrc" :size="92" alt="人物头像" />
                </button>
                <div class="person-avatar-upload__tips">
                  <div class="person-avatar-upload__title">支持上传人物头像</div>
                  <div class="person-avatar-upload__desc">点击头像或按钮选择图片，保存时直接写入本地图片地址。</div>
                  <div class="person-avatar-upload__actions">
                    <Button @click="openAvatarFileDialog">上传头像</Button>
                    <Button v-if="personForm.photograph" @click="clearAvatarSelection">清空头像</Button>
                  </div>
                </div>
              </div>
            </Form.Item>
          </div>
        </div>

        <div class="person-form-section">
          <div class="form-section-head">
            <div>
              <div class="form-section-title">扩展信息</div>
              <div class="form-section-desc">联系方式与银行卡信息补充</div>
            </div>
          </div>
          <div class="person-form-grid">
            <Form.Item label="联系电话" class="form-item-span-2">
              <div class="dynamic-input-list">
                <div v-for="(phone, index) in personForm.phoneList" :key="index" class="dynamic-input-item">
                  <Form.Item
                    :validateStatus="phoneListErrors[index] ? 'error' : ''"
                    :help="phoneListErrors[index]"
                    :style="{ marginBottom: '8px' }"
                  >
                    <Input
                      v-model:value="personForm.phoneList[index]"
                      placeholder="请输入手机号"
                      @blur="validatePhone(index)"
                    />
                  </Form.Item>
                  <Button v-if="personForm.phoneList.length > 1" class="remove-btn" @click="removePhone(index)">
                    <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
                      <path d="M19 13H5v-2h14v2z" />
                    </svg>
                  </Button>
                  <Button class="add-btn" @click="addPhone">
                    <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
                      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
                    </svg>
                  </Button>
                </div>
              </div>
            </Form.Item>
            <Form.Item label="银行卡" class="form-item-span-2">
              <div class="dynamic-input-list">
                <div v-for="(card, index) in personForm.cardList" :key="index" class="dynamic-input-item">
                  <Form.Item
                    :validateStatus="cardListErrors[index] ? 'error' : ''"
                    :help="cardListErrors[index]"
                    :style="{ marginBottom: '8px' }"
                  >
                    <Input
                      v-model:value="personForm.cardList[index]"
                      placeholder="请输入银行卡号"
                      @blur="validateCard(index)"
                    />
                  </Form.Item>
                  <Button v-if="personForm.cardList.length > 1" class="remove-btn" @click="removeCard(index)">
                    <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
                      <path d="M19 13H5v-2h14v2z" />
                    </svg>
                  </Button>
                  <Button class="add-btn" @click="addCard">
                    <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
                      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
                    </svg>
                  </Button>
                </div>
              </div>
            </Form.Item>
          </div>
        </div>
      </Form>
    </Modal>

    <QueryTableModal
      v-model:open="callSummaryModalVisible"
      title="通信汇总"
      :z-index="callSummaryModalZIndex"
      :loading="callSummaryLoading"
      :filters="callSummaryQuery"
      :filter-schema="callSummaryFilterSchema"
      :columns="callSummaryColumns"
      :data-source="callSummaryRows"
      :pagination="callSummaryPagination"
      :total-pages="callSummaryTotalPages"
      :page-size-options="pageSizeOptions"
      :show-table-setting="false"
      :table-setting="{ size: true, setting: true, redo: false, fullScreen: false }"
      :can-fullscreen="true"
      @search="handleSearchCallSummary"
      @reset="handleResetCallSummary"
      @prev-page="handleCallSummaryPrevPage"
      @next-page="handleCallSummaryNextPage"
      @page-size-change="handleCallSummaryPageSizeChange"
      @page-change="handleCallSummaryPageChange"
      @sort-change="handleSortCallSummary"
    />

    <QueryTableModal
      v-model:open="callOperPhoneModalVisible"
      :title="callOperPhoneModalTitle"
      wrap-class-name="call-oper-phone-modal"
      :loading="callOperPhoneLoading"
      :filters="callOperPhoneQuery"
      :filter-schema="callOperPhoneFilterSchema"
      :columns="callOperPhoneColumns"
      :data-source="callOperPhoneRows"
      :pagination="callOperPhonePagination"
      :total-pages="callOperPhoneTotalPages"
      :page-size-options="pageSizeOptions"
      :show-table-setting="true"
      :table-setting="{ size: true, setting: true, redo: false, fullScreen: false }"
      :can-fullscreen="true"
      @search="handleSearchCallOperPhone"
      @reset="handleResetCallOperPhone"
      @prev-page="handleCallOperPhonePrevPage"
      @next-page="handleCallOperPhoneNextPage"
      @page-size-change="handleCallOperPhonePageSizeChange"
      @page-change="handleCallOperPhonePageChange"
      @sort-change="handleSortCallOperPhone"
    />

    <CallRecordModal
      v-model:open="callRecordModalVisible"
      title="通信记录"
      :z-index="callRecordModalZIndex"
      :base-query="callRecordBaseQuery"
      :hide-technical-id-columns="true"
      @jump="handleCallRecordJump"
    />

    <QueryTableModal
      v-model:open="transSummaryModalVisible"
      title="交易汇总"
      :z-index="transSummaryModalZIndex"
      :loading="transSummaryLoading"
      :filters="transSummaryQuery"
      :filter-schema="transSummaryFilterSchema"
      :columns="transSummaryColumns"
      :data-source="transSummaryRows"
      :pagination="transSummaryPagination"
      :total-pages="transSummaryTotalPages"
      :page-size-options="pageSizeOptions"
      :show-table-setting="false"
      :table-setting="{ size: true, setting: true, redo: false, fullScreen: false }"
      :can-fullscreen="true"
      @search="handleSearchTransSummary"
      @reset="handleResetTransSummary"
      @prev-page="handleTransSummaryPrevPage"
      @next-page="handleTransSummaryNextPage"
      @page-size-change="handleTransSummaryPageSizeChange"
      @page-change="handleTransSummaryPageChange"
      @sort-change="handleSortTransSummary"
    />

    <QueryTableModal
      v-model:open="transBankCardModalVisible"
      :title="transBankCardModalTitle"
      :loading="transBankCardLoading"
      :filters="transBankCardQuery"
      :filter-schema="transBankCardFilterSchema"
      :columns="transBankCardColumns"
      :data-source="transBankCardRows"
      :pagination="transBankCardPagination"
      :total-pages="transBankCardTotalPages"
      :page-size-options="pageSizeOptions"
      :show-table-setting="true"
      :table-setting="{ size: true, setting: true, redo: false, fullScreen: false }"
      :can-fullscreen="true"
      @search="handleSearchTransBankCard"
      @reset="handleResetTransBankCard"
      @prev-page="handleTransBankCardPrevPage"
      @next-page="handleTransBankCardNextPage"
      @page-size-change="handleTransBankCardPageSizeChange"
      @page-change="handleTransBankCardPageChange"
      @sort-change="handleSortTransBankCard"
    />

    <TransRecordModal
      v-model:open="transRecordModalVisible"
      :z-index="transRecordModalZIndex"
      :base-query="transRecordBaseQuery"
      :hide-technical-id-columns="true"
      @jump="handleTransRecordJump"
    />

    <StationMapModal v-model:open="stationMapModalVisible" :stations="stationMapPoints" :title="stationMapModalTitle" />

    <PersonGroupManageModal ref="groupManageModalRef" v-model:open="groupModalVisible" />
  </div>
</template>

<script lang="ts" setup name="ViewsDmPortrait">
  import {
    computed,
    ref,
    onMounted,
    onActivated,
    onDeactivated,
    reactive,
    watch,
    nextTick,
    onBeforeUnmount,
    h,
  } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { Button, DatePicker, Input, Select, Modal, Form, Popover, Radio } from 'ant-design-vue';
  import {
    SearchOutlined,
    PlusOutlined,
    EditOutlined,
    FolderOpenOutlined,
    IdcardOutlined,
    TeamOutlined,
    PhoneOutlined,
    WalletOutlined,
    CalendarOutlined,
    CreditCardOutlined,
    ArrowUpOutlined,
    ArrowDownOutlined,
    MoneyCollectOutlined,
    EnvironmentOutlined,
    FileTextOutlined,
    UserOutlined,
  } from '@ant-design/icons-vue';
  import componentSetting from '@/core/settings/componentSetting';
  import { useDesign } from '@/core/hooks/web/useDesign';
  import { useGlobSetting } from '@/core/hooks/setting';
  import { useMessage } from '@/core/hooks/web/useMessage';
  import { getModalPopupContainer as resolveModalPopupContainer } from '@/core/utils';
  import { normalizeAvatarSrc } from '@/core/utils/avatar';
  import {
    COMPARE_OPERATOR_OPTIONS,
    DEFAULT_COMPARE_OPERATOR,
    normalizeCompareOperator,
  } from '@/core/utils/compareOperator';
  import { EmptyState } from '@/core/components/EmptyState';
  import { PersonAvatar } from '@/core/components/PersonAvatar';
  import PersonGroupManageModal from '@/person/components/PersonGroupManageModal.vue';
  import QueryTableModal from './components/QueryTableModal.vue';
  import IntimacyPanel from './components/IntimacyPanel.vue';
  import StationMapModal from './components/StationMapModal.vue';
  import CallRecordModal from '../../../call/views/components/CallRecordModal.vue';
  import TransRecordModal from '../../../trans/views/components/TransRecordModal.vue';
  import * as echarts from 'echarts';
  import type { CallRecordQuery } from '../../../call/api/types/query';
  import type { TransRecordQuery } from '../../../trans/api/types/query';
  import {
    getPersons,
    createPersonBasicInfo,
    updatePersonBasicInfo,
    deletePersonBasicInfo,
  } from '../../../person/api/personApi';
  import type {
    PersonBasicInfo,
    PersonBasicInfoDTO,
    CallDataProfileStatDTO,
    CallOftenTop10DTO,
    CallOpenInfo,
    CallStatStationDTO,
    TransBankCardInfoDTO,
    TransDataProfileStatDTO,
    TransOftenTop10DTO,
    TransTrendDTO,
    TransRecordSummaryDTO,
  } from '../../../person/api/types/dto';
  import {
    callStat,
    callOftenTop10,
    getCallOperPhoneInfo,
    callStatStation,
    getTransOtherName,
    transStat,
    transOfPersons,
    transAmountTrendYM,
    transAmountTrendY,
    getTransBankCardInfo,
    getTransRecordSummary,
    getCallRecordSummary,
  } from '../../../person/api/dpApi';
  import { getCallRecord } from '../../../call/api/callApi';
  import {
    CallOperPhoneInfoQuery,
    TransBankCardInfoQuery,
    TransRecordSummaryQuery,
  } from '../../../person/api/types/query';

  const { prefixCls } = useDesign('case-portrait');
  const { ctxAdminPath } = useGlobSetting();
  const { createMessage, createConfirm } = useMessage();
  const route = useRoute();
  const router = useRouter();
  const getModalPopupContainer = (triggerNode?: HTMLElement) => resolveModalPopupContainer(triggerNode);

  type PortraitPerson = PersonBasicInfo & {
    personNation?: string;
    personEducation?: string;
    personMarriage?: string;
    personHeight?: string | number;
    personResidence?: string;
    personWorkUnit?: string;
    personGroup?: string;
  };

  const personList = ref<PortraitPerson[]>([]);
  const selectedPersonId = ref<number | null>(null);
  const personModalVisible = ref(false);
  const callSummaryModalVisible = ref(false);
  const callSummaryModalZIndex = 1200;
  const callOperPhoneModalVisible = ref(false);
  const callRecordModalVisible = ref(false);
  const callRecordModalZIndex = 1210;
  const transSummaryModalVisible = ref(false);
  const transSummaryModalZIndex = 1200;
  const transBankCardModalVisible = ref(false);
  const transRecordModalVisible = ref(false);
  const transRecordModalZIndex = 1210;
  const stationMapModalVisible = ref(false);
  const groupModalVisible = ref(false);
  const groupManageModalRef = ref<InstanceType<typeof PersonGroupManageModal> | null>(null);
  const isEditMode = ref(false);
  const saving = ref(false);
  const editingPerson = ref<PersonBasicInfo | null>(null);
  const loadingProfile = ref(false);
  const stationMapPoints = computed<CallStatStationDTO[]>(() =>
    stationData.value.filter((item): item is CallStatStationDTO => {
      if (!item || typeof item !== 'object') return false;
      const longitude = Number(String(item.personStationLongitude || '').trim());
      const latitude = Number(String(item.personStationLatitude || '').trim());
      return Number.isFinite(longitude) && Number.isFinite(latitude);
    }),
  );
  const canViewStationMap = computed(() => stationMapPoints.value.length > 0);
  const stationMapModalTitle = computed(() => {
    const personName = selectedPerson.value?.personName?.trim();
    const suffix = stationMapPoints.value.length ? `（${stationMapPoints.value.length}个节点）` : '';
    return personName ? `${personName} - 通信基站${suffix}` : `通信基站${suffix}`;
  });

  const callStatData = ref<CallDataProfileStatDTO | null>(null);
  const transStatData = ref<TransDataProfileStatDTO | null>(null);
  const callOperPhoneModalTitle = ref('运营商手机号信息');
  const transBankCardModalTitle = ref('银行卡交易信息');
  const commTypeRatioData = ref<{ value: number; name: string; itemStyle?: { color: string } }[]>([]);
  const commTop10Data = ref<CallOftenTop10DTO[]>([]);
  const stationData = ref<CallStatStationDTO[]>([]);
  const stationDisplayLimit = 3;
  const tradeTop10Data = ref<TransOftenTop10DTO[]>([]);
  const tradeTrendData = ref<TransTrendDTO[]>([]);
  const tradeTrendChartRef = ref<HTMLElement | null>(null);
  const tradeTrendScrollRef = ref<HTMLElement | null>(null);
  const tradeRatioChartRef = ref<HTMLElement | null>(null);
  const tradeTopChartRef = ref<HTMLElement | null>(null);
  const commTypeChartRef = ref<HTMLElement | null>(null);
  const commTopChartRef = ref<HTMLElement | null>(null);
  let tradeTrendChart: echarts.ECharts | null = null;
  let tradeRatioChart: echarts.ECharts | null = null;
  let tradeTopChart: echarts.ECharts | null = null;
  let commTypeChart: echarts.ECharts | null = null;
  let commTopChart: echarts.ECharts | null = null;
  let chartResizeObserver: ResizeObserver | null = null;
  let chartResizeFrame: number | null = null;
  const observedChartElements = new Set<Element>();
  let tradeTrendSearchTimer: number | null = null;
  const trendLegendArr = ref([
    { isShow: true, name: '收入', color: '#12b76a' },
    { isShow: true, name: '支出', color: '#2a50ec' },
  ]);
  const commTopQuery = reactive({
    dateRange: undefined as [string, string] | undefined,
  });
  type TradeTopDimension = '交易金额' | '交易次数';
  const tradeTopQuery = reactive({
    indicator: 'personName',
    dateRange: undefined as [string, string] | undefined,
    dimension: '交易金额' as TradeTopDimension,
  });
  const tradeTrendQuery = reactive({
    otherName: '',
    dateRange: undefined as [string, string] | undefined,
    timeDimension: 'YEAR' as 'MONTH' | 'YEAR',
  });
  const tradeTrendOtherNameOptions = ref<{ label: string; value: string }[]>([]);
  const tradeTrendOtherNameLoading = ref(false);
  const tradeTrendOtherNameSearch = ref('');
  const tradeTrendOtherNamePage = ref(1);
  const tradeTrendOtherNameHasMore = ref(true);
  const tradeTrendOtherNameLoadedPerson = ref('');
  const avatarInputRef = ref<HTMLInputElement | null>(null);
  const avatarPreviewObjectUrl = ref('');
  let tradeTrendOtherNameSearchTimer: number | null = null;
  let tradeTrendOtherNameRequestId = 0;

  const personForm = reactive({
    personName: '',
    personCertNo: '',
    personBirth: '',
    personGender: '',
    personAge: '',
    personAddress: '',
    photograph: '',
    marry: 0,
    nation: '',
    nativePlace: '',
    householdRegistered: '',
    personTag: '',
    phoneList: [''],
    cardList: [''],
  });

  const phoneListErrors = ref<string[]>([]);
  const cardListErrors = ref<string[]>([]);
  const personNameError = ref('');

  const createCallSummaryQuery = () => ({
    keyword: '',
    otherName: '',
    otherPhone: '',
    callDirection: '',
    callType: '',
    startDate: '',
    endDate: '',
    orderKey: '',
    sort: 'DESC' as 'ASC' | 'DESC',
  });
  type CallSummaryQueryState = ReturnType<typeof createCallSummaryQuery>;
  const callSummaryLoading = ref(false);
  const callSummaryQuery = reactive<CallSummaryQueryState>(createCallSummaryQuery());
  const callSummaryBaseQuery = ref<CallSummaryQueryState>(createCallSummaryQuery());
  const callSummaryRows = ref<any[]>([]);
  const callSummaryPagination = reactive({
    page: 1,
    limit: componentSetting.table.defaultPageSize,
    total: 0,
  });
  const callSummaryTotalPages = computed(() => {
    if (!callSummaryPagination.total) return 1;
    return Math.max(1, Math.ceil(callSummaryPagination.total / callSummaryPagination.limit));
  });

  const createCallOperPhoneQuery = () => ({
    personName: '',
    operatorName: '',
    phoneNumber: '',
    orderKey: '',
    sort: 'DESC' as 'ASC' | 'DESC',
    phoneList: [] as string[],
    operatorId: '',
  });
  type CallOperPhoneQueryState = ReturnType<typeof createCallOperPhoneQuery>;
  const callOperPhoneLoading = ref(false);
  const callOperPhoneQuery = reactive<CallOperPhoneQueryState>(createCallOperPhoneQuery());
  const callOperPhoneBaseQuery = ref<CallOperPhoneQueryState>(createCallOperPhoneQuery());
  const callOperPhoneAllRows = ref<any[]>([]);
  const callOperPhoneRows = ref<any[]>([]);
  const callOperPhonePagination = reactive({
    page: 1,
    limit: componentSetting.table.defaultPageSize,
    total: 0,
  });
  const callOperPhoneTotalPages = computed(() => {
    if (!callOperPhonePagination.total) return 1;
    return Math.max(1, Math.ceil(callOperPhonePagination.total / callOperPhonePagination.limit));
  });

  const createTransBankCardQuery = () => ({
    keyword: '',
    orderKey: '',
    sort: 'DESC' as 'ASC' | 'DESC',
    bankName: '',
    cardNoList: [] as string[],
  });
  type TransBankCardQueryState = ReturnType<typeof createTransBankCardQuery>;
  const transBankCardLoading = ref(false);
  const transBankCardQuery = reactive<TransBankCardQueryState>(createTransBankCardQuery());
  const transBankCardBaseQuery = ref<TransBankCardQueryState>(createTransBankCardQuery());
  const transBankCardRows = ref<any[]>([]);
  const transBankCardPagination = reactive({
    page: 1,
    limit: componentSetting.table.defaultPageSize,
    total: 0,
  });
  const transBankCardTotalPages = computed(() => {
    if (!transBankCardPagination.total) return 1;
    return Math.max(1, Math.ceil(transBankCardPagination.total / transBankCardPagination.limit));
  });

  const createTransSummaryQuery = () => ({
    personCardNo: '',
    otherName: '',
    transAmount: '',
    transAmountSymbol: DEFAULT_COMPARE_OPERATOR,
    transCount: '',
    transCountSymbol: DEFAULT_COMPARE_OPERATOR,
    orderKey: '',
    sort: 'DESC' as 'ASC' | 'DESC',
  });
  type TransSummaryQueryState = ReturnType<typeof createTransSummaryQuery>;
  const transSummaryLoading = ref(false);
  const transSummaryQuery = reactive<TransSummaryQueryState>(createTransSummaryQuery());
  const transSummaryBaseQuery = ref<TransSummaryQueryState>(createTransSummaryQuery());
  type TransRecordDrilldownQuery = Partial<TransRecordQuery> & Record<string, any>;

  const transSummaryRows = ref<any[]>([]);
  const callRecordBaseQuery = ref<Partial<CallRecordQuery>>({});
  const transRecordBaseQuery = ref<TransRecordDrilldownQuery>({});
  const transSummaryPagination = reactive({
    page: 1,
    limit: componentSetting.table.defaultPageSize,
    total: 0,
  });
  const transSummaryTotalPages = computed(() => {
    if (!transSummaryPagination.total) return 1;
    return Math.max(1, Math.ceil(transSummaryPagination.total / transSummaryPagination.limit));
  });

  const pageSizeOptions = componentSetting.table.pageSizeOptions.map((value) => ({ label: value, value }));
  const compareOperatorOptions = COMPARE_OPERATOR_OPTIONS;

  const callSummaryFilterSchema = [
    { field: 'otherPhone', label: '对方号码', type: 'input' as const, placeholder: '请输入对方号码', width: 260 },
    { field: 'otherName', label: '对方姓名', type: 'input' as const, placeholder: '请输入对方姓名', width: 260 },
  ];

  const callSummaryColumns = [
    { title: '本方姓名', dataIndex: 'personName', key: 'personName', width: 160, sorter: true },
    { title: '本方号码', dataIndex: 'personPhone', key: 'personPhone', width: 180, sorter: true },
    { title: '对方姓名', dataIndex: 'otherName', key: 'otherName', width: 160, sorter: true },
    { title: '对方号码', dataIndex: 'otherPhone', key: 'otherPhone', width: 200, sorter: true },
    { title: '通话次数', dataIndex: 'callCount', key: 'callCount', width: 120, sorter: true },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 120,
      fixed: 'right' as const,
      align: 'center' as const,
      customRender: ({ record }: any) =>
        h(
          Button,
          {
            type: 'link',
            size: 'small',
            onClick: () => handleViewCallSummaryDetail(record),
          },
          { default: () => '查看详情' },
        ),
    },
  ];

  const callOperPhoneFilterSchema = [
    { field: 'phoneNumber', label: '手机号码', type: 'input' as const, placeholder: '请输入手机号码', width: 220 },
  ];

  const callOperPhoneColumns = [
    { title: '本方姓名', dataIndex: 'personName', key: 'personName', width: 180, sorter: true },
    { title: '手机号码', dataIndex: 'personPhone', key: 'personPhone', width: 180, sorter: true },
    { title: '号码类型', dataIndex: 'phoneType', key: 'phoneType', width: 140, sorter: true },
    { title: '运营商标识', dataIndex: 'operatorId', key: 'operatorId', width: 180, sorter: true },
    { title: '用户类型', dataIndex: 'personType', key: 'personType', width: 140, sorter: true },
    { title: '使用人证件号码', dataIndex: 'personCertNo', key: 'personCertNo', width: 220, sorter: true },
    { title: '使用人证件地址', dataIndex: 'personCertAddress', key: 'personCertAddress', width: 260 },
    { title: '通信地址', dataIndex: 'mailingAddress', key: 'mailingAddress', width: 260 },
    { title: '号码归属省', dataIndex: 'province', key: 'province', width: 140, sorter: true },
    { title: '号码归属市', dataIndex: 'city', key: 'city', width: 140, sorter: true },
    { title: '号码状态', dataIndex: 'phoneStatus', key: 'phoneStatus', width: 140, sorter: true },
    { title: '入网时间', dataIndex: 'activationDateTime', key: 'activationDateTime', width: 200, sorter: true },
    { title: '销户时间', dataIndex: 'closingDateTime', key: 'closingDateTime', width: 200, sorter: true },
    { title: '首次通话时间', dataIndex: 'firstCallDateTime', key: 'firstCallDateTime', width: 200, sorter: true },
    {
      title: '最后停机时间',
      dataIndex: 'lastSuspensionDateTime',
      key: 'lastSuspensionDateTime',
      width: 200,
      sorter: true,
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 120,
      fixed: 'right' as const,
      align: 'center' as const,
      customRender: ({ record }: any) =>
        h(
          Button,
          {
            type: 'link',
            size: 'small',
            onClick: () => handleViewCallOperPhoneDetail(record),
          },
          { default: () => '查看详情' },
        ),
    },
  ];

  const transBankCardFilterSchema = [
    { field: 'keyword', label: '卡号', type: 'input' as const, placeholder: '请输入卡号' },
  ];

  const transBankCardColumns = [
    { title: '本方卡号', dataIndex: 'personCardNo', key: 'personCardNo', width: 200, sorter: true },
    { title: '本方姓名', dataIndex: 'personName', key: 'personName', width: 140 },
    { title: '所属银行', dataIndex: 'bankName', key: 'bankName', width: 180, sorter: true },
    { title: '收入总金额', dataIndex: 'incomeTotalAmount', key: 'incomeTotalAmount', width: 140, sorter: true },
    { title: '支出总金额', dataIndex: 'expenseTotalAmount', key: 'expenseTotalAmount', width: 140, sorter: true },
    { title: '净额', dataIndex: 'netAmount', key: 'netAmount', width: 140, sorter: true },
    { title: '交易总金额', dataIndex: 'transTotalAmount', key: 'transTotalAmount', width: 140, sorter: true },
    { title: '交易笔数', dataIndex: 'transCount', key: 'transCount', width: 100, sorter: true },
    { title: '账户余额', dataIndex: 'totalBalance', key: 'totalBalance', width: 140, sorter: true },
    { title: '账户状态', dataIndex: 'accountStatus', key: 'accountStatus', width: 100, sorter: true },
    { title: '开户日期', dataIndex: 'openingDate', key: 'openingDate', width: 140, sorter: true },
    { title: '销户日期', dataIndex: 'closeAccountDate', key: 'closeAccountDate', width: 140, sorter: true },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 120,
      fixed: 'right' as const,
      align: 'center' as const,
      customRender: ({ record }: any) =>
        h(
          Button,
          {
            type: 'link',
            size: 'small',
            onClick: () => handleViewTransBankCardDetail(record),
          },
          { default: () => '查看详情' },
        ),
    },
  ];

  const transSummaryFilterSchema = [
    {
      field: 'personCardNo',
      label: '银行卡(账号)',
      type: 'input' as const,
      placeholder: '请输入银行卡(账号)',
      width: 260,
    },
    {
      field: 'otherName',
      label: '对方名称',
      type: 'input' as const,
      placeholder: '请输入对方名称',
      width: 260,
    },
    {
      field: 'transAmount',
      label: '交易总金额',
      type: 'compare-input' as const,
      operatorField: 'transAmountSymbol',
      options: compareOperatorOptions,
      operatorWidth: 72,
      inputWidth: 180,
      inputMaxWidth: 180,
      placeholder: '请输入交易总金额',
    },
    {
      field: 'transCount',
      label: '交易次数',
      type: 'compare-input' as const,
      operatorField: 'transCountSymbol',
      options: compareOperatorOptions,
      operatorWidth: 72,
      inputWidth: 180,
      inputMaxWidth: 180,
      placeholder: '请输入交易次数',
    },
  ];

  const transSummaryColumns = [
    { title: '本方卡号', dataIndex: 'personCardNo', key: 'personCardNo', width: 180, sorter: true },
    { title: '本方姓名', dataIndex: 'personName', key: 'personName', width: 160, sorter: true },
    { title: '对方卡号', dataIndex: 'otherCardNo', key: 'otherCardNo', width: 180, sorter: true },
    { title: '对方名称', dataIndex: 'otherName', key: 'otherName', width: 160, sorter: true },
    { title: '所属银行', dataIndex: 'bankName', key: 'bankName', width: 180, sorter: true },
    { title: '交易次数', dataIndex: 'transCount', key: 'transCount', width: 120, sorter: true },
    { title: '交易总金额', dataIndex: 'transTotalAmount', key: 'transTotalAmount', width: 140, sorter: true },
    { title: '收入总金额', dataIndex: 'incomeTotalAmount', key: 'incomeTotalAmount', width: 180, sorter: true },
    { title: '支出总金额', dataIndex: 'expenseTotalAmount', key: 'expenseTotalAmount', width: 180, sorter: true },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 120,
      fixed: 'right' as const,
      align: 'center' as const,
      customRender: ({ record }: any) =>
        h(
          Button,
          {
            type: 'link',
            size: 'small',
            onClick: () => handleViewTransSummaryDetail(record),
          },
          { default: () => '查看详情' },
        ),
    },
  ];

  const toPersonName = (person: PersonBasicInfo) => person.personName ?? '-';

  const getSelectedPersonPhones = (person = selectedPerson.value) => {
    const phones = (person?.phoneList || []).map((item) => String(item.personNo || '').trim()).filter(Boolean);
    return phones.length ? Array.from(new Set(phones)) : undefined;
  };

  const toLibNoList = (text: string, libType: 2 | 3) => {
    return text
      .split(',')
      .map((item) => item.trim())
      .filter(Boolean)
      .map((personNo) => ({ personNo, libType }));
  };

  const normalizePersonIdCard = (value?: string | null) =>
    String(value ?? '')
      .trim()
      .replace(/\s/g, '')
      .toUpperCase();

  const isLeapYear = (year: number) => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;

  const isValidDateParts = (year: number, month: number, day: number) => {
    if (!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day)) return false;
    if (month < 1 || month > 12 || day < 1) return false;
    const dayList = [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    return day <= dayList[month - 1];
  };

  const getPersonIdCardCheckCode = (body: string) => {
    const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
    const codes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
    const total = body.split('').reduce((sum, char, index) => sum + Number(char) * weights[index], 0);
    return codes[total % 11];
  };

  const parsePersonProfileFromIdCard = (value?: string | null) => {
    const certNo = normalizePersonIdCard(value);
    if (!certNo) return null;

    let birthText = '';
    let gender = '';

    if (/^\d{15}$/u.test(certNo)) {
      const year = Number(`19${certNo.slice(6, 8)}`);
      const month = Number(certNo.slice(8, 10));
      const day = Number(certNo.slice(10, 12));
      if (!isValidDateParts(year, month, day)) return null;
      birthText = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
      gender = Number(certNo[14]) % 2 === 1 ? '男' : '女';
    } else if (/^\d{17}[\dX]$/u.test(certNo)) {
      const year = Number(certNo.slice(6, 10));
      const month = Number(certNo.slice(10, 12));
      const day = Number(certNo.slice(12, 14));
      if (!isValidDateParts(year, month, day)) return null;
      if (getPersonIdCardCheckCode(certNo.slice(0, 17)) !== certNo[17]) return null;
      birthText = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
      gender = Number(certNo[16]) % 2 === 1 ? '男' : '女';
    } else {
      return null;
    }

    const [yearText, monthText, dayText] = birthText.split('-');
    const birthDate = new Date(Number(yearText), Number(monthText) - 1, Number(dayText));
    if (Number.isNaN(birthDate.getTime())) return null;

    const now = new Date();
    let age = now.getFullYear() - birthDate.getFullYear();
    const currentMonthDay = `${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
    if (`${monthText}-${dayText}` > currentMonthDay) {
      age -= 1;
    }
    age = Math.max(0, age);

    return {
      personBirth: birthText,
      personGender: gender,
      personAge: String(age),
    };
  };

  const autofillPersonProfileByIdCard = (certNo?: string | null) => {
    const parsed = parsePersonProfileFromIdCard(certNo);
    if (!parsed) return;
    personForm.personBirth = parsed.personBirth;
    personForm.personGender = parsed.personGender;
    personForm.personAge = parsed.personAge;
  };

  const resetPersonForm = () => {
    revokeAvatarPreviewObjectUrl();
    personForm.personName = '';
    personForm.personCertNo = '';
    personForm.personBirth = '';
    personForm.personGender = '';
    personForm.personAge = '';
    personForm.personAddress = '';
    updatePersonPhotograph('');
    personForm.marry = 0;
    personForm.nation = '';
    personForm.nativePlace = '';
    personForm.householdRegistered = '';
    personForm.personTag = '';
    personForm.phoneList = [''];
    personForm.cardList = [''];
    phoneListErrors.value = [];
    cardListErrors.value = [];
    personNameError.value = '';
  };

  const fillPersonForm = (person: PersonBasicInfo) => {
    revokeAvatarPreviewObjectUrl();
    personForm.personName = person.personName ?? '';
    personForm.personCertNo = person.personCertNo ?? '';
    personForm.personBirth = person.personBirth ?? '';
    personForm.personGender = person.personGender ?? '';
    personForm.personAge = person.personAge !== undefined && person.personAge !== null ? String(person.personAge) : '';
    personForm.personAddress = person.personAddress ?? '';
    updatePersonPhotograph(person.photograph);
    personForm.marry = person.marry ?? 0;
    personForm.nation = person.nation ?? '';
    personForm.nativePlace = person.nativePlace ?? '';
    personForm.householdRegistered = person.householdRegistered ?? '';
    personForm.personTag = person.personTag ?? '';
    const phoneArr = (person.phoneList || []).map((item) => item.personNo ?? '').filter(Boolean);
    personForm.phoneList = phoneArr.length > 0 ? phoneArr : [''];
    const cardArr = (person.cardList || []).map((item) => item.personNo ?? '').filter(Boolean);
    personForm.cardList = cardArr.length > 0 ? cardArr : [''];
    if (personForm.personCertNo && (!personForm.personBirth || !personForm.personGender || !personForm.personAge)) {
      autofillPersonProfileByIdCard(personForm.personCertNo);
    }
    phoneListErrors.value = [];
    cardListErrors.value = [];
    personNameError.value = '';
  };

  watch(
    () => personForm.personCertNo,
    (value) => {
      const certNo = normalizePersonIdCard(value);
      if (!certNo) return;
      autofillPersonProfileByIdCard(certNo);
    },
  );

  const resetRightPanelData = () => {
    callStatData.value = null;
    transStatData.value = null;
    commTypeRatioData.value = [];
    commTop10Data.value = [];
    stationData.value = [];
    tradeTop10Data.value = [];
    tradeTrendData.value = [];
  };

  const normalizeObjectList = <T extends Record<string, any>>(source: unknown): T[] => {
    if (!Array.isArray(source)) return [];
    return source.filter((item): item is T => !!item && typeof item === 'object');
  };

  const normalizeTrendRows = (resp: any): TransTrendDTO[] => {
    if (Array.isArray(resp)) return normalizeObjectList<TransTrendDTO>(resp);
    if (Array.isArray(resp?.records)) return normalizeObjectList<TransTrendDTO>(resp.records);
    if (Array.isArray(resp?.data)) return normalizeObjectList<TransTrendDTO>(resp.data);
    return [];
  };

  const loadTradeTrendData = async (personName: string) => {
    const startDate = tradeTrendQuery.dateRange?.[0];
    const endDate = tradeTrendQuery.dateRange?.[1];
    const otherName = String(tradeTrendQuery.otherName || '').trim();

    const payload = {
      personName,
      otherName: otherName || undefined,
      startDate: startDate || undefined,
      endDate: endDate || undefined,
    } as any;

    const resp =
      tradeTrendQuery.timeDimension === 'YEAR' ? await transAmountTrendY(payload) : await transAmountTrendYM(payload);
    return normalizeTrendRows(resp);
  };

  const normalizeStringList = (resp: any) => {
    const candidates = [resp, resp?.records, resp?.list, resp?.data, resp?.data?.records, resp?.data?.list];
    for (const item of candidates) {
      if (Array.isArray(item)) {
        return item.map((value) => String(value || '').trim()).filter(Boolean);
      }
    }
    return [] as string[];
  };

  const setTradeTrendOtherNameOptions = (names: string[], replace = false) => {
    const optionMap = new Map<string, { label: string; value: string }>();
    const appendOption = (value: string) => {
      const normalized = String(value || '').trim();
      if (!normalized) return;
      optionMap.set(normalized, { label: normalized, value: normalized });
    };

    if (!replace) {
      tradeTrendOtherNameOptions.value.forEach((item) => appendOption(item.value));
    }
    names.forEach((item) => appendOption(item));

    const currentValue = String(tradeTrendQuery.otherName || '').trim();
    if (currentValue) {
      appendOption(currentValue);
    }

    tradeTrendOtherNameOptions.value = Array.from(optionMap.values());
  };

  const resetTradeTrendOtherNameState = () => {
    tradeTrendOtherNameRequestId += 1;
    if (tradeTrendOtherNameSearchTimer !== null) {
      window.clearTimeout(tradeTrendOtherNameSearchTimer);
      tradeTrendOtherNameSearchTimer = null;
    }
    tradeTrendOtherNameOptions.value = [];
    tradeTrendOtherNameSearch.value = '';
    tradeTrendOtherNamePage.value = 1;
    tradeTrendOtherNameHasMore.value = true;
    tradeTrendOtherNameLoadedPerson.value = '';
    tradeTrendOtherNameLoading.value = false;
  };

  const resetProfilePanelQueries = () => {
    commTopQuery.dateRange = undefined;
    tradeTopQuery.indicator = 'personName';
    tradeTopQuery.dateRange = undefined;
    tradeTopQuery.dimension = '交易金额';
    tradeTrendQuery.otherName = '';
    tradeTrendQuery.dateRange = undefined;
    tradeTrendQuery.timeDimension = 'YEAR';
    trendLegendArr.value = [
      { isShow: true, name: '收入', color: '#12b76a' },
      { isShow: true, name: '支出', color: '#2a50ec' },
    ];
    resetTradeTrendOtherNameState();
  };

  const loadTradeTrendOtherNameOptions = async (options?: { reset?: boolean; search?: string }) => {
    const { reset = false, search = tradeTrendOtherNameSearch.value } = options || {};
    const personName = selectedPerson.value?.personName?.trim();
    if (!personName) {
      resetTradeTrendOtherNameState();
      return;
    }
    if (tradeTrendOtherNameLoading.value) return;
    if (!reset && !tradeTrendOtherNameHasMore.value) return;

    const page = reset ? 1 : tradeTrendOtherNamePage.value;
    const currentRequestId = ++tradeTrendOtherNameRequestId;
    tradeTrendOtherNameLoading.value = true;

    try {
      const resp = await getTransOtherName({
        personName,
        search: search || undefined,
        page,
        limit: 20,
      } as any);
      if (currentRequestId !== tradeTrendOtherNameRequestId) return;

      const list = normalizeStringList(resp);
      const total = Number((resp as any)?.total ?? (resp as any)?.data?.total ?? 0);
      const prevSize = reset ? 0 : tradeTrendOtherNameOptions.value.length;
      setTradeTrendOtherNameOptions(list, reset);
      tradeTrendOtherNamePage.value = page + 1;
      tradeTrendOtherNameHasMore.value =
        Number.isFinite(total) && total > 0 ? tradeTrendOtherNameOptions.value.length < total : list.length >= 20;
      if (!reset && tradeTrendOtherNameOptions.value.length <= prevSize) {
        tradeTrendOtherNameHasMore.value = false;
      }
      tradeTrendOtherNameLoadedPerson.value = personName;
    } catch (error) {
      if (currentRequestId !== tradeTrendOtherNameRequestId) return;
      console.error('获取交易趋势对方名称失败', error);
      if (reset) {
        setTradeTrendOtherNameOptions([], true);
      }
      tradeTrendOtherNameHasMore.value = false;
    } finally {
      if (currentRequestId === tradeTrendOtherNameRequestId) {
        tradeTrendOtherNameLoading.value = false;
      }
    }
  };

  const normalizeCallTopRows = (resp: any): CallOftenTop10DTO[] => {
    if (Array.isArray(resp)) return normalizeObjectList<CallOftenTop10DTO>(resp).slice(0, 10);
    if (Array.isArray(resp?.records)) return normalizeObjectList<CallOftenTop10DTO>(resp.records).slice(0, 10);
    if (Array.isArray(resp?.data)) return normalizeObjectList<CallOftenTop10DTO>(resp.data).slice(0, 10);
    return [];
  };

  const buildCallTopRowsFromRecords = (records: any[]): CallOftenTop10DTO[] => {
    const counter = new Map<string, { otherName?: string; otherPhone?: string; callCount: number }>();
    records.forEach((item) => {
      const otherPhone = item?.otherPhone || '';
      const otherName = item?.otherName || '';
      const key = `${otherPhone}__${otherName}`;
      const current = counter.get(key) || {
        otherName,
        otherPhone,
        callCount: 0,
      };
      current.callCount += 1;
      counter.set(key, current);
    });

    return Array.from(counter.values())
      .sort((a, b) => b.callCount - a.callCount)
      .slice(0, 10)
      .map((item) => ({
        otherName: item.otherName,
        otherPhone: item.otherPhone,
        callCount: item.callCount,
      }));
  };

  const loadCommTopData = async (personName: string) => {
    const startDate = commTopQuery.dateRange?.[0];
    const endDate = commTopQuery.dateRange?.[1];
    if (!startDate && !endDate) {
      const resp = await callOftenTop10({ personName });
      return normalizeCallTopRows(resp);
    }

    const resp = (await getCallRecord({
      page: 1,
      limit: 50000,
      personName,
      personPhones: getSelectedPersonPhones(),
      startDate: startDate || undefined,
      endDate: endDate || undefined,
    } as any)) as any;
    const records = Array.isArray(resp?.records)
      ? resp.records
      : Array.isArray(resp?.data)
        ? resp.data
        : Array.isArray(resp)
          ? resp
          : [];
    return buildCallTopRowsFromRecords(records);
  };

  const normalizeTradeTopRows = (resp: any): TransOftenTop10DTO[] => {
    if (Array.isArray(resp)) return normalizeObjectList<TransOftenTop10DTO>(resp);
    if (Array.isArray(resp?.records)) return normalizeObjectList<TransOftenTop10DTO>(resp.records);
    if (Array.isArray(resp?.data)) return normalizeObjectList<TransOftenTop10DTO>(resp.data);
    return [];
  };

  const loadTradeTopData = async (personName: string) => {
    const startDate = tradeTopQuery.dateRange?.[0];
    const endDate = tradeTopQuery.dateRange?.[1];

    const resp = await transOfPersons({
      personName,
      dimension: tradeTopQuery.dimension,
      indicator: tradeTopQuery.indicator,
      startDate: startDate || undefined,
      endDate: endDate || undefined,
      page: 1,
      limit: 10,
    });

    return normalizeTradeTopRows(resp);
  };

  const buildCommTypeRatioData = (callStatInfo?: CallDataProfileStatDTO | null) => {
    const callTypeColorMap: Record<string, string> = {
      主叫: '#2a50ec',
      被叫: '#2ec8d9',
      其他: '#f6b659',
    };
    const callTypeOrder = ['被叫', '主叫', '其他'];
    const ratioEntries = Object.entries(callStatInfo?.callRatioMap || {}).sort(([nameA], [nameB]) => {
      const indexA = callTypeOrder.indexOf(nameA);
      const indexB = callTypeOrder.indexOf(nameB);
      return (indexA === -1 ? 99 : indexA) - (indexB === -1 ? 99 : indexB);
    });

    if (ratioEntries.length) {
      const normalizedRatioEntries = ratioEntries
        .map(([name, value]) => {
          const rawValue = typeof value === 'string' ? value.replace('%', '') : value;
          const ratioValue = Number(rawValue || 0);
          return {
            name,
            value: Number.isFinite(ratioValue) ? ratioValue : 0,
            itemStyle: {
              color: callTypeColorMap[name] || '#5b8ff9',
            },
          };
        })
        .filter((item) => String(item.name || '').trim() && item.value > 0);

      if (normalizedRatioEntries.length) {
        return normalizedRatioEntries;
      }
    }

    const countEntries = [
      { name: '被叫', count: Number(callStatInfo?.inCount || 0) },
      { name: '主叫', count: Number(callStatInfo?.outCount || 0) },
      { name: '其他', count: Number(callStatInfo?.otherCount || 0) },
    ];
    const total = countEntries.reduce((sum, item) => sum + (Number.isFinite(item.count) ? item.count : 0), 0);
    if (!total) return [];

    return countEntries.map(({ name, count }) => ({
      name,
      value: Number((((Number.isFinite(count) ? count : 0) / total) * 100).toFixed(2)),
      itemStyle: {
        color: callTypeColorMap[name] || '#5b8ff9',
      },
    }));
  };
  const normalizeStationList = (resp: any): CallStatStationDTO[] => {
    if (Array.isArray(resp)) return normalizeObjectList<CallStatStationDTO>(resp);
    if (Array.isArray(resp?.data)) return normalizeObjectList<CallStatStationDTO>(resp.data);
    if (Array.isArray(resp?.list)) return normalizeObjectList<CallStatStationDTO>(resp.list);
    if (Array.isArray(resp?.records)) return normalizeObjectList<CallStatStationDTO>(resp.records);
    if (Array.isArray(resp?.data?.list)) return normalizeObjectList<CallStatStationDTO>(resp.data.list);
    if (Array.isArray(resp?.data?.records)) return normalizeObjectList<CallStatStationDTO>(resp.data.records);
    return [];
  };

  const fetchProfileData = async () => {
    const personName = selectedPerson.value?.personName;
    if (!personName) {
      resetRightPanelData();
      return;
    }

    loadingProfile.value = true;
    try {
      const [callStatResp, transStatResp, callTop10Resp, callStationResp, transTop10Resp, transTrendResp] =
        await Promise.all([
          callStat(personName),
          transStat(personName),
          loadCommTopData(personName),
          callStatStation({ personName }),
          loadTradeTopData(personName),
          loadTradeTrendData(personName),
        ]);

      callStatData.value = callStatResp || null;
      transStatData.value = transStatResp || null;
      commTypeRatioData.value = buildCommTypeRatioData(callStatResp);

      commTop10Data.value = normalizeCallTopRows(callTop10Resp);
      stationData.value = normalizeStationList(callStationResp);
      tradeTop10Data.value = normalizeTradeTopRows(transTop10Resp);
      tradeTrendData.value = normalizeTrendRows(transTrendResp);
    } catch (error) {
      console.error('获取数据画像右侧数据失败', error);
      resetRightPanelData();
    } finally {
      loadingProfile.value = false;
    }
  };

  function selectPerson(id: number) {
    if (selectedPersonId.value === id) return;
    resetProfilePanelQueries();
    selectedPersonId.value = id;
    fetchProfileData();
  }

  const findPortraitPersonIndex = () => {
    const routePersonName = String(route.query.personName || '').trim();
    const routePersonCertNo = String(route.query.personCertNo || '').trim();
    if (!routePersonName && !routePersonCertNo) return -1;

    return personList.value.findIndex((person) => {
      const currentName = String(person.personName || '').trim();
      const currentCertNo = String(person.personCertNo || '').trim();
      if (routePersonCertNo && currentCertNo && currentCertNo === routePersonCertNo) return true;
      if (routePersonName && currentName && currentName === routePersonName) return true;
      return false;
    });
  };

  const syncSelectedPersonFromRoute = async () => {
    const targetIndex = findPortraitPersonIndex();
    if (targetIndex < 0) return false;
    if (selectedPersonId.value === targetIndex) return true;

    resetProfilePanelQueries();
    selectedPersonId.value = targetIndex;
    await fetchProfileData();
    return true;
  };

  const fetchPersons = async () => {
    try {
      const data = await getPersons();
      personList.value = Array.isArray(data) ? data : [];
      if (!personList.value.length) {
        selectedPersonId.value = null;
        return;
      }

      if (await syncSelectedPersonFromRoute()) {
        return;
      }

      if (selectedPersonId.value === null) {
        resetProfilePanelQueries();
        selectedPersonId.value = 0;
        await fetchProfileData();
      }
    } catch (error) {
      console.error('获取人员信息失败', error);
      personList.value = [];
    }
  };

  const openCreateModal = () => {
    isEditMode.value = false;
    editingPerson.value = null;
    resetPersonForm();
    personModalVisible.value = true;
  };

  const revokeAvatarPreviewObjectUrl = () => {
    if (!avatarPreviewObjectUrl.value) return;
    URL.revokeObjectURL(avatarPreviewObjectUrl.value);
    avatarPreviewObjectUrl.value = '';
  };

  const updatePersonPhotograph = (source?: string | null) => {
    personForm.photograph = String(source || '').trim();
  };

  const personAvatarPreviewSrc = computed(
    () => avatarPreviewObjectUrl.value || String(personForm.photograph || '').trim(),
  );

  const stripLocalFileProtocol = (value: string) => {
    const source = String(value || '').trim();
    if (!/^file:\/\//i.test(source)) return source;

    const decoded = decodeURI(source.replace(/^file:\/\//i, ''));
    if (/^\/[a-zA-Z]:/.test(decoded)) {
      return decoded.slice(1);
    }
    return decoded;
  };

  const resolveLocalAvatarPath = (file: File) => {
    const electronApi = window.electron;
    const localPath =
      electronApi?.getPathForFile?.(file) || String((file as File & { path?: string }).path || '').trim();

    if (localPath) {
      return stripLocalFileProtocol(localPath);
    }
    return '';
  };

  const updateAvatarPreviewFromFile = (file: File) => {
    revokeAvatarPreviewObjectUrl();
    avatarPreviewObjectUrl.value = URL.createObjectURL(file);
  };

  const openAvatarFileDialog = () => {
    avatarInputRef.value?.click();
  };

  const clearAvatarSelection = () => {
    revokeAvatarPreviewObjectUrl();
    updatePersonPhotograph('');
    if (avatarInputRef.value) {
      avatarInputRef.value.value = '';
    }
  };

  const handleAvatarFileChange = (event: Event) => {
    const input = event.target as HTMLInputElement | null;
    const file = input?.files?.[0];
    if (!file) return;

    if (file.type && !file.type.startsWith('image/')) {
      createMessage.warning('请选择图片文件');
      input.value = '';
      return;
    }

    updateAvatarPreviewFromFile(file);
    updatePersonPhotograph(resolveLocalAvatarPath(file) || avatarPreviewObjectUrl.value);
    input.value = '';
  };

  const openEditModal = (person: PersonBasicInfo) => {
    isEditMode.value = true;
    editingPerson.value = person;
    fillPersonForm(person);
    personModalVisible.value = true;
  };

  const handleEditBasicInfo = () => {
    if (!selectedPerson.value) {
      createMessage.warning('请先选择对象');
      return;
    }
    openEditModal(selectedPerson.value);
  };

  interface JumpToAnalysisPayload {
    personName: string;
    otherName: string;
    behaviorType: string;
    detailRecord: Record<string, unknown>;
    path: string;
    query?: Record<string, string>;
  }

  const handleJumpToAnalysis = async (payload: JumpToAnalysisPayload) => {
    if (!payload.path) {
      createMessage.warning('当前行为暂未配置分析页跳转。');
      return;
    }

    const query: Record<string, string> = {
      ...(payload.query || {}),
    };
    const personName = String(payload.personName || '').trim();
    const otherName = String(payload.otherName || '').trim();

    if (personName) {
      query.personName = personName;
      if (!query.personNames) {
        query.personNames = personName;
      }
    }
    if (otherName) {
      query.otherName = otherName;
    }
    query.jumpAt = String(Date.now());

    createMessage.info(`正在跳转至${payload.behaviorType}分析页面...`);
    await router.push({
      path: payload.path,
      query,
    });
  };

  const closePersonModal = () => {
    personModalVisible.value = false;
  };

  const openGroupModal = () => {
    groupModalVisible.value = true;
  };

  const openGroupModalFromRoute = async () => {
    if (route.query.openGroupModal !== '1') return;
    groupModalVisible.value = true;
    if (route.query.openCreateGroupModal === '1') {
      await nextTick();
      groupManageModalRef.value?.startCreateGroup();
    }
    const { openGroupModal: _openGroupModal, openCreateGroupModal: _openCreateGroupModal, ...query } = route.query;
    await router.replace({ path: route.path, query });
  };

  watch(
    () => [route.query.openGroupModal, route.query.openCreateGroupModal],
    () => {
      void openGroupModalFromRoute();
    },
  );

  const resolvePageTotal = (resp: any, records: unknown[] = []) => {
    const total = Number(resp?.total ?? resp?.count ?? resp?.page?.total ?? resp?.page?.count);
    if (Number.isFinite(total) && total >= 0) {
      return total;
    }
    return records.length;
  };

  const loadCallSummary = async () => {
    const person = selectedPerson.value;
    if (!person?.personName) {
      callSummaryRows.value = [];
      callSummaryPagination.total = 0;
      return;
    }

    const personPhones = getSelectedPersonPhones(person);
    callSummaryLoading.value = true;
    try {
      const resp = await getCallRecordSummary(
        Object.assign(callSummaryQuery, {
          page: callSummaryPagination.page,
          limit: callSummaryPagination.limit,
          personName: person.personName,
          personPhones,
          keyword: callSummaryQuery.keyword || undefined,
          otherName: callSummaryQuery.otherName || undefined,
          otherPhones: callSummaryQuery.otherPhone ? [callSummaryQuery.otherPhone] : undefined,
          callDirection: callSummaryQuery.callDirection || undefined,
          callType: callSummaryQuery.callType || undefined,
          startDate: callSummaryQuery.startDate || undefined,
          endDate: callSummaryQuery.endDate || undefined,
          orderKey: callSummaryQuery.orderKey || undefined,
          sort: callSummaryQuery.sort || undefined,
        }) as any,
      );

      const records = Array.isArray(resp?.records) ? resp.records : Array.isArray(resp) ? resp : [];
      callSummaryRows.value = records.map((item: any, index: number) => ({
        rowKey: `${item.personName || ''}-${item.personPhone || ''}-${item.otherPhone || ''}-${index}`,
        personName: fallbackValue(item.personName || person.personName),
        personPhone: fallbackValue(item.personPhone),
        otherName: fallbackValue(item.otherName),
        otherPhone: fallbackValue(item.otherPhone),
        callCount: fallbackValue(item.callCount),
      }));
      callSummaryPagination.total = resolvePageTotal(resp, records);
    } catch (error) {
      console.error('查询通话记录列表失败', error);
      callSummaryRows.value = [];
      callSummaryPagination.total = 0;
    } finally {
      callSummaryLoading.value = false;
    }
  };

  const loadCallOperPhoneInfo = async () => {
    const person = selectedPerson.value;
    if (!person?.personName || !callOperPhoneQuery.phoneList.length) {
      callOperPhoneAllRows.value = [];
      callOperPhoneRows.value = [];
      callOperPhonePagination.total = 0;
      return;
    }

    callOperPhoneLoading.value = true;
    try {
      const resp = await getCallOperPhoneInfo({
        personName: person.personName,
        phoneList: callOperPhoneQuery.phoneList.length ? callOperPhoneQuery.phoneList : undefined,
        operatorId: callOperPhoneQuery.operatorId || undefined,
      } as CallOperPhoneInfoQuery);

      const rawRecords = Array.isArray((resp as any)?.records)
        ? (resp as any).records
        : Array.isArray(resp)
          ? resp
          : [];

      callOperPhoneAllRows.value = rawRecords.map((item: CallOpenInfo, index: number) => ({
        rowKey: `${item.personName || person.personName || ''}-${item.operatorId || ''}-${item.personPhone || ''}-${index}`,
        personName: item.personName || person.personName || '-',
        personPhone: fallbackValue(item.personPhone),
        phoneNumber: fallbackValue(item.personPhone),
        phoneType: fallbackValue(item.phoneType),
        operatorId: fallbackValue(item.operatorId),
        operatorName: fallbackValue(item.operatorId),
        personType: fallbackValue(item.personType),
        personCertNo: fallbackValue(item.personCertNo),
        personCertAddress: fallbackValue(item.personCertAddress),
        mailingAddress: fallbackValue(item.mailingAddress),
        province: fallbackValue(item.province),
        city: fallbackValue(item.city),
        phoneStatus: fallbackValue(item.phoneStatus),
        activationDateTime: fallbackValue(item.activationDateTime),
        closingDateTime: fallbackValue(item.closingDateTime),
        firstCallDateTime: fallbackValue(item.firstCallDateTime),
        lastSuspensionDateTime: fallbackValue(item.lastSuspensionDateTime),
      }));
      applyCallOperPhoneRows();
    } catch (error) {
      console.error('查询运营商手机号信息失败', error);
      callOperPhoneAllRows.value = [];
      callOperPhoneRows.value = [];
      callOperPhonePagination.total = 0;
    } finally {
      callOperPhoneLoading.value = false;
    }
  };

  const applyCallOperPhoneRows = () => {
    const personNameKeyword = callOperPhoneQuery.personName.trim().toLocaleLowerCase();
    const operatorNameKeyword = callOperPhoneQuery.operatorName.trim().toLocaleLowerCase();
    const phoneNumberKeyword = callOperPhoneQuery.phoneNumber.trim().toLocaleLowerCase();

    const filteredRows = callOperPhoneAllRows.value.filter((item) => {
      const matchPersonName =
        !personNameKeyword ||
        String(item.personName || '')
          .toLocaleLowerCase()
          .includes(personNameKeyword);
      const matchOperatorName =
        !operatorNameKeyword ||
        String(item.operatorName || '')
          .toLocaleLowerCase()
          .includes(operatorNameKeyword);
      const matchPhoneNumber =
        !phoneNumberKeyword ||
        String(item.phoneNumber || '')
          .toLocaleLowerCase()
          .includes(phoneNumberKeyword);
      return matchPersonName && matchOperatorName && matchPhoneNumber;
    });

    const sortedRows = [...filteredRows];
    if (callOperPhoneQuery.orderKey) {
      const sortFactor = callOperPhoneQuery.sort === 'ASC' ? 1 : -1;
      sortedRows.sort((left, right) => {
        const leftValue = String(left?.[callOperPhoneQuery.orderKey as keyof typeof left] || '');
        const rightValue = String(right?.[callOperPhoneQuery.orderKey as keyof typeof right] || '');
        return leftValue.localeCompare(rightValue, 'zh-CN', { numeric: true }) * sortFactor;
      });
    }

    callOperPhonePagination.total = sortedRows.length;
    const start = (callOperPhonePagination.page - 1) * callOperPhonePagination.limit;
    const end = start + callOperPhonePagination.limit;
    callOperPhoneRows.value = sortedRows.slice(start, end);
  };

  const loadTransBankCardInfo = async () => {
    if (!transBankCardQuery.bankName || !transBankCardQuery.cardNoList.length) {
      transBankCardRows.value = [];
      transBankCardPagination.total = 0;
      return;
    }

    transBankCardLoading.value = true;
    try {
      const resp = await getTransBankCardInfo({
        page: transBankCardPagination.page,
        limit: transBankCardPagination.limit,
        keyword: transBankCardQuery.keyword || undefined,
        orderKey: transBankCardQuery.orderKey || undefined,
        sort: transBankCardQuery.sort || undefined,
        bankName: transBankCardQuery.bankName || undefined,
        cardNoList: transBankCardQuery.cardNoList.length ? transBankCardQuery.cardNoList : undefined,
      } as TransBankCardInfoQuery);

      const rawRecords = Array.isArray((resp as any)?.records)
        ? (resp as any).records
        : Array.isArray(resp)
          ? resp
          : [];
      const records = Array.isArray((resp as any)?.records)
        ? rawRecords
        : rawRecords.slice(
            (transBankCardPagination.page - 1) * transBankCardPagination.limit,
            transBankCardPagination.page * transBankCardPagination.limit,
          );

      transBankCardRows.value = records.map((item: TransBankCardInfoDTO, index: number) => ({
        rowKey: `${item.personCardNo || ''}-${index}`,
        personCardNo: fallbackValue(item.personCardNo),
        personName: fallbackValue(item.personName),
        bankName: fallbackValue(item.bankName),
        transIncome: fallbackValue(item.transIncome),
        transExpend: fallbackValue(item.transExpend),
        transBalance: fallbackValue(item.transBalance),
        transCount: fallbackValue(item.transCount),
        accountLeftMoney: fallbackValue(item.accountLeftMoney),
        totalBalance: fallbackValue(item.totalBalance),
        accountStatus: fallbackValue(item.accountStatus),
        openAccountDate: fallbackValue(item.openAccountDate || item.openingDate),
        openingDate: fallbackValue(item.openingDate || item.openAccountDate),
        closeAccountDate: fallbackValue(item.closeAccountDate),
        incomeTotalAmount: fallbackValue(item.incomeTotalAmount),
        expenseTotalAmount: fallbackValue(item.expenseTotalAmount),
        netAmount: fallbackValue(item.netAmount),
        transTotalAmount: fallbackValue(item.transTotalAmount),
      }));
      transBankCardPagination.total = Number((resp as any)?.count || (resp as any)?.total || rawRecords.length || 0);
    } catch (error) {
      console.error('查询银行卡交易信息失败', error);
      transBankCardRows.value = [];
      transBankCardPagination.total = 0;
    } finally {
      transBankCardLoading.value = false;
    }
  };

  const applyCallSummaryQuery = (query: Partial<CallSummaryQueryState> = {}) => {
    Object.assign(callSummaryQuery, createCallSummaryQuery(), query);
  };

  const applyCallOperPhoneQuery = (query: Partial<CallOperPhoneQueryState> = {}) => {
    Object.assign(callOperPhoneQuery, createCallOperPhoneQuery(), query);
  };

  const applyTransBankCardQuery = (query: Partial<TransBankCardQueryState> = {}) => {
    Object.assign(transBankCardQuery, createTransBankCardQuery(), query);
  };

  const setCallSummaryBaseQuery = (query: Partial<CallSummaryQueryState> = {}) => {
    callSummaryBaseQuery.value = {
      ...createCallSummaryQuery(),
      ...query,
    };
  };

  const setCallOperPhoneBaseQuery = (query: Partial<CallOperPhoneQueryState> = {}) => {
    callOperPhoneBaseQuery.value = {
      ...createCallOperPhoneQuery(),
      ...query,
    };
  };

  const setTransBankCardBaseQuery = (query: Partial<TransBankCardQueryState> = {}) => {
    transBankCardBaseQuery.value = {
      ...createTransBankCardQuery(),
      ...query,
    };
  };

  const resetCallSummaryFilters = () => {
    applyCallSummaryQuery(callSummaryBaseQuery.value);
  };

  const resetCallOperPhoneFilters = () => {
    applyCallOperPhoneQuery(callOperPhoneBaseQuery.value);
  };

  const resetTransBankCardFilters = () => {
    applyTransBankCardQuery(transBankCardBaseQuery.value);
  };

  const getCommTopDateRangeQuery = (): Partial<CallSummaryQueryState> => {
    return {
      startDate: commTopQuery.dateRange?.[0] || '',
      endDate: commTopQuery.dateRange?.[1] || '',
    };
  };

  const openCallSummaryWithFilters = async (
    overrides: Partial<CallSummaryQueryState> = {},
    options?: { useCommTopDateRange?: boolean },
  ) => {
    const nextBaseQuery: Partial<CallSummaryQueryState> = options?.useCommTopDateRange
      ? getCommTopDateRangeQuery()
      : {};
    Object.assign(nextBaseQuery, overrides);
    setCallSummaryBaseQuery(nextBaseQuery);
    resetCallSummaryFilters();
    callSummaryModalVisible.value = true;
    callSummaryPagination.page = 1;
    await loadCallSummary();
  };

  const openCallOperPhoneModal = async (carrierInfo = carrierTags.value[0]) => {
    const person = selectedPerson.value;
    if (!person?.personName || !carrierInfo.carrierName || !carrierInfo.phoneList.length) {
      createMessage.warning('暂无运营商手机号数据');
      return;
    }

    callOperPhoneModalTitle.value = `${carrierInfo.carrierName}手机号信息`;
    setCallOperPhoneBaseQuery({
      phoneList: carrierInfo.phoneList,
      operatorId: carrierInfo.operatorId || '',
    });
    resetCallOperPhoneFilters();
    callOperPhoneModalVisible.value = true;
    callOperPhonePagination.page = 1;
    await loadCallOperPhoneInfo();
  };

  const openTransBankCardModal = async (tag: { bankName: string; cardNoList: string[] }) => {
    if (!tag.bankName || !tag.cardNoList.length) {
      createMessage.warning('暂无银行卡数据');
      return;
    }

    transBankCardModalTitle.value = '银行卡交易信息';
    setTransBankCardBaseQuery({
      bankName: tag.bankName,
      cardNoList: tag.cardNoList,
    });
    resetTransBankCardFilters();
    transBankCardModalVisible.value = true;
    transBankCardPagination.page = 1;
    await loadTransBankCardInfo();
  };

  const openCallRecordWithFilters = (
    overrides: Partial<CallRecordQuery> = {},
    options?: { useCommTopDateRange?: boolean; omitPersonPhones?: boolean },
  ) => {
    const person = selectedPerson.value;
    if (!person?.personName) return;

    callRecordBaseQuery.value = {
      personName: person.personName,
      ...(!options?.omitPersonPhones ? { personPhones: getSelectedPersonPhones(person) } : {}),
      ...(options?.useCommTopDateRange ? getCommTopDateRangeQuery() : {}),
      ...overrides,
    };
    callRecordModalVisible.value = true;
  };

  const toSummaryQueryText = (value?: string) => {
    const text = String(value || '').trim();
    return text && text !== '-' ? text : '';
  };

  const toSummaryNumericText = (value?: string | number) => {
    const text = String(value ?? '')
      .replace(/,/g, '')
      .trim();
    if (!text) return '';
    const num = Number(text);
    return Number.isFinite(num) ? text : '';
  };

  const handleViewCallSummaryDetail = (record: any) => {
    const person = selectedPerson.value;
    if (!person?.personName) {
      createMessage.warning('请先选择对象');
      return;
    }

    const personPhone = toSummaryQueryText(record?.personPhone);
    const otherName = toSummaryQueryText(record?.otherName);
    const otherPhone = toSummaryQueryText(record?.otherPhone);

    openCallRecordWithFilters({
      personPhones: personPhone ? [personPhone] : getSelectedPersonPhones(person),
      otherName: otherName || undefined,
      otherPhones: otherPhone ? [otherPhone] : undefined,
      callDirection: callSummaryQuery.callDirection || undefined,
      callType: callSummaryQuery.callType || undefined,
      startDate: callSummaryQuery.startDate || undefined,
      endDate: callSummaryQuery.endDate || undefined,
    });
  };

  const handleViewCallOperPhoneDetail = (record: any) => {
    const person = selectedPerson.value;
    if (!person?.personName) {
      createMessage.warning('请先选择对象');
      return;
    }

    const personPhone = toSummaryQueryText(record?.personPhone || record?.phoneNumber);
    if (!personPhone) {
      createMessage.warning('当前手机号信息缺失，无法查看详情');
      return;
    }

    const operatorId = toSummaryQueryText(record?.operatorId);
    openCallRecordWithFilters({
      personPhones: [personPhone],
      operatorId: operatorId || undefined,
    });
  };

  const handleViewTransSummaryDetail = (record: any) => {
    const personName = selectedPerson.value?.personName;
    if (!personName) {
      createMessage.warning('请先选择对象');
      return;
    }

    openTransRecordDrilldown({
      personCardNo: toSummaryQueryText(record?.personCardNo) || undefined,
      otherName: toSummaryQueryText(record?.otherName) || undefined,
      otherCardNo: toSummaryQueryText(record?.otherCardNo) || undefined,
      bankName: toSummaryQueryText(record?.bankName) || undefined,
    });
  };

  const handleViewTransBankCardDetail = (record: any) => {
    const personCardNo = toSummaryQueryText(record?.personCardNo);
    if (!personCardNo) {
      createMessage.warning('当前卡号信息缺失，无法查看详情');
      return;
    }

    openTransRecordDrilldown({
      personCardNo,
      bankName: toSummaryQueryText(transBankCardQuery.bankName) || undefined,
    });
  };

  const openCallSummaryModal = async () => {
    await openCallSummaryWithFilters();
  };

  const loadTransSummary = async () => {
    const person = selectedPerson.value;
    if (!person?.personName) {
      transSummaryRows.value = [];
      transSummaryPagination.total = 0;
      return;
    }

    transSummaryLoading.value = true;
    try {
      const transAmount = toSummaryNumericText(transSummaryQuery.transAmount);
      const transCountText = toSummaryNumericText(transSummaryQuery.transCount);
      const query: TransRecordSummaryQuery = {
        page: transSummaryPagination.page,
        limit: transSummaryPagination.limit,
        personNames: person.personName ? [person.personName] : undefined,
        personCardNo: toSummaryQueryText(transSummaryQuery.personCardNo) || undefined,
        otherName: toSummaryQueryText(transSummaryQuery.otherName) || undefined,
        transAmount: transAmount || undefined,
        transCount: transCountText ? Number(transCountText) : undefined,
        transAmountSymbol: transAmount
          ? normalizeCompareOperator(transSummaryQuery.transAmountSymbol, DEFAULT_COMPARE_OPERATOR)
          : undefined,
        transCountSymbol: transCountText
          ? normalizeCompareOperator(transSummaryQuery.transCountSymbol, DEFAULT_COMPARE_OPERATOR)
          : undefined,
        orderKey: transSummaryQuery.orderKey || undefined,
        sort: transSummaryQuery.sort || undefined,
      };
      const resp = await getTransRecordSummary(query);

      const records = Array.isArray(resp?.records) ? resp.records : Array.isArray(resp) ? resp : [];
      transSummaryRows.value = records.map((item: TransRecordSummaryDTO, index: number) => ({
        rowKey: `${item.personName || ''}-${item.otherCardNo || ''}-${index}`,
        personCardNo: fallbackValue(item.personCardNo),
        personName: fallbackValue(item.personName || person.personName),
        otherCardNo: fallbackValue(item.otherCardNo),
        otherName: fallbackValue(item.otherName),
        bankName: fallbackValue(item.bankName),
        transCount: fallbackValue(item.transCount),
        transTotalAmount: fallbackValue(item.transTotalAmount),
        incomeTotalAmount: fallbackValue(item.incomeTotalAmount),
        expenseTotalAmount: fallbackValue(item.expenseTotalAmount),
        cashKey: Array.isArray(item.cashKey) && item.cashKey.length ? item.cashKey.join('、') : '-',
      }));
      transSummaryPagination.total = resolvePageTotal(resp, records);
    } catch (error) {
      console.error('查询交易汇总失败', error);
      transSummaryRows.value = [];
      transSummaryPagination.total = 0;
    } finally {
      transSummaryLoading.value = false;
    }
  };

  const applyTransSummaryQuery = (query: Partial<TransSummaryQueryState> = {}) => {
    Object.assign(transSummaryQuery, createTransSummaryQuery(), {
      ...query,
      transAmountSymbol: normalizeCompareOperator(query.transAmountSymbol, DEFAULT_COMPARE_OPERATOR),
      transCountSymbol: normalizeCompareOperator(query.transCountSymbol, DEFAULT_COMPARE_OPERATOR),
    });
  };

  const setTransSummaryBaseQuery = (query: Partial<TransSummaryQueryState> = {}) => {
    transSummaryBaseQuery.value = {
      ...createTransSummaryQuery(),
      ...query,
      transAmountSymbol: normalizeCompareOperator(query.transAmountSymbol, DEFAULT_COMPARE_OPERATOR),
      transCountSymbol: normalizeCompareOperator(query.transCountSymbol, DEFAULT_COMPARE_OPERATOR),
    };
  };

  const resetTransSummaryFilters = () => {
    applyTransSummaryQuery(transSummaryBaseQuery.value);
  };

  const openTransSummaryWithFilters = async (overrides: Partial<TransSummaryQueryState> = {}) => {
    setTransSummaryBaseQuery(overrides);
    resetTransSummaryFilters();
    transSummaryModalVisible.value = true;
    transSummaryPagination.page = 1;
    await loadTransSummary();
  };

  const openTransSummaryModal = async () => {
    await openTransSummaryWithFilters();
  };

  const handleSearchCallSummary = async () => {
    callSummaryPagination.page = 1;
    await loadCallSummary();
  };

  const handleSearchCallOperPhone = async () => {
    callOperPhonePagination.page = 1;
    applyCallOperPhoneRows();
  };

  const handleSearchTransBankCard = async () => {
    transBankCardPagination.page = 1;
    await loadTransBankCardInfo();
  };

  const handleSearchTransSummary = async () => {
    transSummaryPagination.page = 1;
    await loadTransSummary();
  };

  const handleResetCallSummary = async () => {
    resetCallSummaryFilters();
    callSummaryPagination.page = 1;
    await loadCallSummary();
  };

  const handleResetCallOperPhone = async () => {
    resetCallOperPhoneFilters();
    callOperPhonePagination.page = 1;
    applyCallOperPhoneRows();
  };

  const handleResetTransBankCard = async () => {
    resetTransBankCardFilters();
    transBankCardPagination.page = 1;
    await loadTransBankCardInfo();
  };

  const handleResetTransSummary = async () => {
    resetTransSummaryFilters();
    transSummaryPagination.page = 1;
    await loadTransSummary();
  };

  const handleCallSummaryPrevPage = async () => {
    if (callSummaryPagination.page <= 1) return;
    callSummaryPagination.page -= 1;
    await loadCallSummary();
  };

  const handleCallSummaryNextPage = async () => {
    if (callSummaryPagination.page >= callSummaryTotalPages.value) return;
    callSummaryPagination.page += 1;
    await loadCallSummary();
  };

  const handleCallSummaryPageChange = async (page: number, pageSize: number) => {
    if (callSummaryLoading.value) return;
    if (pageSize !== callSummaryPagination.limit) {
      await handleCallSummaryPageSizeChange(pageSize);
      return;
    }
    if (page === callSummaryPagination.page - 1) {
      await handleCallSummaryPrevPage();
      return;
    }
    if (page === callSummaryPagination.page + 1) {
      await handleCallSummaryNextPage();
      return;
    }
    if (page === callSummaryPagination.page) return;
    callSummaryPagination.page = page;
    await loadCallSummary();
  };

  const handleCallOperPhonePrevPage = async () => {
    if (callOperPhonePagination.page <= 1) return;
    callOperPhonePagination.page -= 1;
    applyCallOperPhoneRows();
  };

  const handleCallOperPhoneNextPage = async () => {
    if (callOperPhonePagination.page >= callOperPhoneTotalPages.value) return;
    callOperPhonePagination.page += 1;
    applyCallOperPhoneRows();
  };

  const handleCallOperPhonePageChange = async (page: number, pageSize: number) => {
    if (callOperPhoneLoading.value) return;
    if (pageSize !== callOperPhonePagination.limit) {
      await handleCallOperPhonePageSizeChange(pageSize);
      return;
    }
    if (page === callOperPhonePagination.page - 1) {
      await handleCallOperPhonePrevPage();
      return;
    }
    if (page === callOperPhonePagination.page + 1) {
      await handleCallOperPhoneNextPage();
      return;
    }
    if (page === callOperPhonePagination.page) return;
    callOperPhonePagination.page = page;
    applyCallOperPhoneRows();
  };

  const handleTransBankCardPrevPage = async () => {
    if (transBankCardPagination.page <= 1) return;
    transBankCardPagination.page -= 1;
    await loadTransBankCardInfo();
  };

  const handleTransBankCardNextPage = async () => {
    if (transBankCardPagination.page >= transBankCardTotalPages.value) return;
    transBankCardPagination.page += 1;
    await loadTransBankCardInfo();
  };

  const handleTransBankCardPageChange = async (page: number, pageSize: number) => {
    if (transBankCardLoading.value) return;
    if (pageSize !== transBankCardPagination.limit) {
      await handleTransBankCardPageSizeChange(pageSize);
      return;
    }
    if (page === transBankCardPagination.page - 1) {
      await handleTransBankCardPrevPage();
      return;
    }
    if (page === transBankCardPagination.page + 1) {
      await handleTransBankCardNextPage();
      return;
    }
    if (page === transBankCardPagination.page) return;
    transBankCardPagination.page = page;
    await loadTransBankCardInfo();
  };

  const handleCallSummaryPageSizeChange = async (value: number) => {
    callSummaryPagination.limit = Number(value);
    callSummaryPagination.page = 1;
    await loadCallSummary();
  };

  const handleCallOperPhonePageSizeChange = async (value: number) => {
    callOperPhonePagination.limit = Number(value);
    callOperPhonePagination.page = 1;
    applyCallOperPhoneRows();
  };

  const handleTransBankCardPageSizeChange = async (value: number) => {
    transBankCardPagination.limit = Number(value);
    transBankCardPagination.page = 1;
    await loadTransBankCardInfo();
  };

  const handleSortCallSummary = async ({ orderKey, sort }: { orderKey: string; sort: 'ASC' | 'DESC' }) => {
    callSummaryQuery.orderKey = orderKey;
    callSummaryQuery.sort = sort;
    callSummaryPagination.page = 1;
    await loadCallSummary();
  };

  const handleSortCallOperPhone = async ({ orderKey, sort }: { orderKey: string; sort: 'ASC' | 'DESC' }) => {
    callOperPhoneQuery.orderKey = orderKey;
    callOperPhoneQuery.sort = sort;
    callOperPhonePagination.page = 1;
    applyCallOperPhoneRows();
  };

  const handleSortTransBankCard = async ({ orderKey, sort }: { orderKey: string; sort: 'ASC' | 'DESC' }) => {
    transBankCardQuery.orderKey = orderKey;
    transBankCardQuery.sort = sort;
    transBankCardPagination.page = 1;
    await loadTransBankCardInfo();
  };

  const handleTransSummaryPrevPage = async () => {
    if (transSummaryPagination.page <= 1) return;
    transSummaryPagination.page -= 1;
    await loadTransSummary();
  };

  const handleTransSummaryNextPage = async () => {
    if (transSummaryPagination.page >= transSummaryTotalPages.value) return;
    transSummaryPagination.page += 1;
    await loadTransSummary();
  };

  const handleTransSummaryPageChange = async (page: number, pageSize: number) => {
    if (transSummaryLoading.value) return;
    if (pageSize !== transSummaryPagination.limit) {
      await handleTransSummaryPageSizeChange(pageSize);
      return;
    }
    if (page === transSummaryPagination.page - 1) {
      await handleTransSummaryPrevPage();
      return;
    }
    if (page === transSummaryPagination.page + 1) {
      await handleTransSummaryNextPage();
      return;
    }
    if (page === transSummaryPagination.page) return;
    transSummaryPagination.page = page;
    await loadTransSummary();
  };

  const handleTransSummaryPageSizeChange = async (value: number) => {
    transSummaryPagination.limit = Number(value);
    transSummaryPagination.page = 1;
    await loadTransSummary();
  };

  const handleSortTransSummary = async ({ orderKey, sort }: { orderKey: string; sort: 'ASC' | 'DESC' }) => {
    transSummaryQuery.orderKey = orderKey;
    transSummaryQuery.sort = sort;
    transSummaryPagination.page = 1;
    await loadTransSummary();
  };

  const openTransRecordDrilldown = (baseQuery: TransRecordDrilldownQuery) => {
    const personName = selectedPerson.value?.personName;
    if (!personName) {
      createMessage.warning('请先选择对象');
      return;
    }

    transRecordBaseQuery.value = {
      personName,
      ...baseQuery,
    };
    transRecordModalVisible.value = true;
  };

  const handleTransRecordJump = () => {
    transRecordModalVisible.value = false;
    transBankCardModalVisible.value = false;
    transSummaryModalVisible.value = false;
  };

  const handleCallRecordJump = () => {
    callRecordModalVisible.value = false;
    callOperPhoneModalVisible.value = false;
    callSummaryModalVisible.value = false;
  };

  const handleDrillByDebitCredit = (flag: '收入' | '支出') => {
    openTransRecordDrilldown({
      debitCreditFlag: flag,
    });
  };

  const handleDrillByTradeTop = (item: { name: string; filterValue?: string }) => {
    const filterValue = String(item?.filterValue || item?.name || '').trim();
    const baseQuery: Partial<TransRecordQuery> = {
      indicator: tradeTopQuery.indicator,
    };
    const startDate = tradeTopQuery.dateRange?.[0];
    const endDate = tradeTopQuery.dateRange?.[1];

    if (startDate && endDate) {
      baseQuery.startDate = startDate;
      baseQuery.endDate = endDate;
    }

    if (filterValue) {
      if (tradeTopQuery.indicator === 'otherCardNo') {
        baseQuery.otherCardNo = filterValue;
      } else if (tradeTopQuery.indicator === 'personName') {
        baseQuery.otherName = filterValue;
      } else if (tradeTopQuery.indicator === 'branchName') {
        baseQuery.branchName = filterValue;
      } else if (tradeTopQuery.indicator === 'personIpAddress') {
        baseQuery.personIpAddress = filterValue;
      } else if (tradeTopQuery.indicator === 'personMacAddress') {
        baseQuery.personMacAddress = filterValue;
      }
    }

    openTransRecordDrilldown(baseQuery);
  };

  const handleCommTopRowClick = (row: { otherName?: string; otherPhone?: string }) => {
    if (!row) return;
    const baseQuery: Partial<CallRecordQuery> = row.otherPhone
      ? { otherPhones: [row.otherPhone] }
      : row.otherName
        ? { otherName: row.otherName }
        : {};
    openCallRecordWithFilters(baseQuery, { useCommTopDateRange: true, omitPersonPhones: true });
  };

  const handleSearchTradeTrend = async () => {
    const personName = selectedPerson.value?.personName;
    if (!personName) {
      tradeTrendData.value = [];
      return;
    }

    loadingProfile.value = true;
    try {
      tradeTrendData.value = await loadTradeTrendData(personName);
      tradeTrendChart?.resize();
    } catch (error) {
      console.error('查询交易趋势失败', error);
      tradeTrendData.value = [];
    } finally {
      loadingProfile.value = false;
    }
  };

  const handleTradeTrendOtherNameSearch = (value: string) => {
    tradeTrendOtherNameSearch.value = String(value || '').trim();
    if (tradeTrendOtherNameSearchTimer !== null) {
      window.clearTimeout(tradeTrendOtherNameSearchTimer);
    }
    tradeTrendOtherNameSearchTimer = window.setTimeout(() => {
      tradeTrendOtherNameSearchTimer = null;
      void loadTradeTrendOtherNameOptions({
        reset: true,
        search: tradeTrendOtherNameSearch.value,
      });
    }, 240);
  };

  const handleTradeTrendOtherNamePopupScroll = (event: UIEvent) => {
    const target = event.target as HTMLElement | null;
    if (!target || tradeTrendOtherNameLoading.value || !tradeTrendOtherNameHasMore.value) return;
    if (target.scrollTop + target.clientHeight >= target.scrollHeight - 24) {
      void loadTradeTrendOtherNameOptions();
    }
  };

  const handleTradeTrendOtherNameDropdownVisibleChange = (open: boolean) => {
    if (!open) return;
    const personName = selectedPerson.value?.personName?.trim();
    if (!personName) return;
    if (tradeTrendOtherNameLoadedPerson.value !== personName || !tradeTrendOtherNameOptions.value.length) {
      tradeTrendOtherNameSearch.value = '';
      void loadTradeTrendOtherNameOptions({ reset: true, search: '' });
    }
  };

  const scheduleTradeTrendSearch = (delay = 240) => {
    if (tradeTrendSearchTimer !== null) {
      window.clearTimeout(tradeTrendSearchTimer);
    }
    tradeTrendSearchTimer = window.setTimeout(() => {
      tradeTrendSearchTimer = null;
      void handleSearchTradeTrend();
    }, delay);
  };

  const viewStationMap = () => {
    if (!canViewStationMap.value) {
      createMessage.warning('当前基站暂无可展示的坐标信息');
      return;
    }
    stationMapModalVisible.value = true;
  };

  const changeTradeTrendDimension = (dimension: 'MONTH' | 'YEAR') => {
    if (tradeTrendQuery.timeDimension === dimension) return;
    trendLegendArr.value = [
      { isShow: true, name: '收入', color: '#12b76a' },
      { isShow: true, name: '支出', color: '#2a50ec' },
    ];
    tradeTrendQuery.timeDimension = dimension;
  };

  const handleTrendChartResize = () => {
    tradeTrendChart?.resize();
    tradeRatioChart?.resize();
    tradeTopChart?.resize();
    commTopChart?.resize();
    if (commTypeChartRef.value && commTypeRatioData.value.length) {
      commTypeChart?.resize();
      initCommTypeChart();
    }
  };

  const handleSubmit = async () => {
    console.error('[portrait] handleSubmit clicked');
    (window as any).__portraitSaveDebug = {
      stage: 'clicked',
      form: { ...personForm },
      at: new Date().toISOString(),
    };
    console.error('[portrait] form snapshot before validation:', { ...personForm });
    // 校验姓名
    if (!personForm.personName.trim()) {
      console.error('[portrait] save blocked: empty personName');
      personNameError.value = '请输入姓名';
      createMessage.warning('请输入姓名');
      return;
    }
    // const nameRegex = /^[\u4e00-\u9fa5a-zA-Z\s·]+$/;
    // if (!nameRegex.test(personForm.personName.trim())) {
    //   console.error('[portrait] save blocked: invalid personName');
    //   personNameError.value = '姓名只能包含中文、字母或空格';
    //   createMessage.warning('姓名格式不正确');
    //   return;
    // }
    // if (personForm.personName.trim().length < 2) {
    //   console.error('[portrait] save blocked: short personName');
    //   personNameError.value = '姓名至少2个字符';
    //   createMessage.warning('姓名至少2个字符');
    //   return;
    // }
    personNameError.value = '';

    // 校验手机号
    const phoneErrors: string[] = [];
    personForm.phoneList.forEach((phone, index) => {
      if (phone.trim()) {
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(phone.trim())) {
          phoneErrors[index] = '手机号格式不正确';
        }
      }
    });
    phoneListErrors.value = phoneErrors;

    // 校验银行卡
    const cardErrors: string[] = [];
    personForm.cardList.forEach((card, index) => {
      if (card.trim()) {
        if (card.trim().length < 16 || card.trim().length > 19) {
          cardErrors[index] = '银行卡号长度应为16-19位';
        }
      }
    });
    cardListErrors.value = cardErrors;

    if (phoneErrors.some(Boolean) || cardErrors.some(Boolean)) {
      console.error('[portrait] save blocked: phone/card validation failed', { phoneErrors, cardErrors });
      createMessage.warning('请检查输入格式');
      return;
    }

    saving.value = true;
    try {
      const uploadedPhotograph = String(personForm.photograph || '').trim();
      updatePersonPhotograph(uploadedPhotograph);
      const payload: PersonBasicInfoDTO = {
        personName: personForm.personName,
        personCertNo: personForm.personCertNo,
        personBirth: personForm.personBirth,
        personGender: personForm.personGender,
        personAge: personForm.personAge ? Number(personForm.personAge) : 0,
        personAddress: personForm.personAddress,
        photograph: uploadedPhotograph,
        marry: personForm.marry,
        nation: personForm.nation,
        nativePlace: personForm.nativePlace,
        householdRegistered: personForm.householdRegistered,
        personTag: personForm.personTag === '' ? null : personForm.personTag,
        phoneList: toLibNoList(personForm.phoneList.filter((p) => p.trim()).join(','), 2),
        cardList: toLibNoList(personForm.cardList.filter((c) => c.trim()).join(','), 3),
      };
      (window as any).__portraitSaveDebug = {
        stage: 'payload-ready',
        payload: JSON.parse(JSON.stringify(payload)),
        at: new Date().toISOString(),
      };
      console.error('[portrait] save person payload:', JSON.parse(JSON.stringify(payload)));
      if (isEditMode.value) {
        await updatePersonBasicInfo(payload);
        createMessage.success('更新成功');
      } else {
        await createPersonBasicInfo(payload);
        createMessage.success('新增成功');
      }
      personModalVisible.value = false;
      await fetchPersons();
    } catch (error: any) {
      console.error('[portrait] avatar upload/save error detail:', error?.response?.data || error?.message || error);
      console.error('[portrait] save debug snapshot:', (window as any).__portraitSaveDebug);
      console.error('保存人员失败', error);
      createMessage.error(isEditMode.value ? '更新失败' : '新增失败');
    } finally {
      saving.value = false;
    }
  };

  // 姓名校验方法
  const validatePersonName = () => {
    if (!personForm.personName.trim()) {
      personNameError.value = '请输入姓名';
      return;
    }
    const nameRegex = /^[\u4e00-\u9fa5a-zA-Z\s·]+$/;
    if (!nameRegex.test(personForm.personName.trim())) {
      personNameError.value = '姓名只能包含中文、字母或空格';
      return;
    }
    if (personForm.personName.trim().length < 2) {
      personNameError.value = '姓名至少2个字符';
      return;
    }
    personNameError.value = '';
  };

  // 手机号操作方法
  const addPhone = () => {
    personForm.phoneList.push('');
    phoneListErrors.value.push('');
  };

  const removePhone = (index: number) => {
    if (personForm.phoneList.length > 1) {
      personForm.phoneList.splice(index, 1);
      phoneListErrors.value.splice(index, 1);
    }
  };

  const validatePhone = (index: number) => {
    const phone = personForm.phoneList[index];
    if (phone.trim()) {
      const phoneRegex = /^1[3-9]\d{9}$/;
      phoneListErrors.value[index] = phoneRegex.test(phone.trim()) ? '' : '手机号格式不正确';
    } else {
      phoneListErrors.value[index] = '';
    }
  };

  // 银行卡操作方法
  const addCard = () => {
    personForm.cardList.push('');
    cardListErrors.value.push('');
  };

  const removeCard = (index: number) => {
    if (personForm.cardList.length > 1) {
      personForm.cardList.splice(index, 1);
      cardListErrors.value.splice(index, 1);
    }
  };

  const validateCard = (index: number) => {
    const card = personForm.cardList[index];
    if (card.trim()) {
      const len = card.trim().length;
      cardListErrors.value[index] = len >= 16 && len <= 19 ? '' : '银行卡号长度应为16-19位';
    } else {
      cardListErrors.value[index] = '';
    }
  };

  const handleDelete = (person: PersonBasicInfo) => {
    const name = person.personName;
    if (!name) {
      createMessage.warning('缺少人员姓名');
      return;
    }

    createConfirm({
      iconType: 'warning',
      centered: true,
      title: '确认删除对象',
      content: `确定要删除对象“${name}”吗？删除后无法恢复。`,
      okButtonProps: { type: 'primary' },
      autoFocusButton: 'ok',
      async onOk() {
        try {
          await deletePersonBasicInfo(name);
          createMessage.success('删除成功');
          await fetchPersons();
        } catch (error) {
          console.error('删除人员失败', error);
          createMessage.error('删除失败');
        }
      },
    });
  };

  // ==================== Quick Nav 滚动联动 ====================
  const rightPanelRef = ref<HTMLElement | null>(null);
  const activeNavId = ref('section-basic');

  const scheduleChartResize = () => {
    if (chartResizeFrame !== null) {
      window.cancelAnimationFrame(chartResizeFrame);
    }
    chartResizeFrame = window.requestAnimationFrame(() => {
      chartResizeFrame = null;
      handleTrendChartResize();

      if (tradeRatioChartRef.value && hasTradeRatioData.value && !tradeRatioChart) {
        initTradeRatioChart();
      }
      if (tradeTopChartRef.value && tradeTop.value.length && !tradeTopChart) {
        initTradeTopChart();
      }
      if (commTypeChartRef.value && hasRenderableCommTypeRatioData.value && !commTypeChart) {
        initCommTypeChart();
      }
      if (commTopChartRef.value && hasRenderableTopContacts.value && !commTopChart) {
        initCommTopChart();
      }
      if (tradeTrendChartRef.value && trendLabels.value.length && !tradeTrendChart) {
        initTradeTrendChart();
      }
    });
  };

  const observeChartElement = (element: Element | null) => {
    if (!chartResizeObserver || !element || observedChartElements.has(element)) return;
    chartResizeObserver.observe(element);
    observedChartElements.add(element);
  };

  const setupChartResizeObserver = () => {
    if (typeof ResizeObserver === 'undefined') return;
    if (!chartResizeObserver) {
      chartResizeObserver = new ResizeObserver(() => {
        scheduleChartResize();
      });
    }
    [
      rightPanelRef.value,
      tradeTrendChartRef.value,
      tradeRatioChartRef.value,
      tradeTopChartRef.value,
      commTypeChartRef.value,
      commTopChartRef.value,
    ].forEach(observeChartElement);
    scheduleChartResize();
  };

  const navItems = [
    { id: 'section-basic', label: '基本信息', icon: IdcardOutlined },
    { id: 'section-relation', label: '亲密关系人', icon: TeamOutlined },
    { id: 'section-comm', label: '通讯信息', icon: PhoneOutlined },
    { id: 'section-trade', label: '交易信息', icon: WalletOutlined },
  ];

  const scrollToSection = (id: string) => {
    const container = rightPanelRef.value;
    if (!container) return;
    const el = container.querySelector(`#${id}`) as HTMLElement | null;
    if (!el) return;
    // 吸顶分段导航自身占据高度，滚动目标需要避开它，避免标题被遮住
    const anchorBar = container.querySelector('.qj-anchors') as HTMLElement | null;
    const targetOffset = (anchorBar?.offsetHeight || 0) + 12;
    container.scrollTo({
      top: Math.max(0, el.offsetTop - container.offsetTop - targetOffset),
      behavior: 'smooth',
    });
    activeNavId.value = id;
  };

  let navScrollHandler: (() => void) | null = null;
  let navScrollFrame: number | null = null;

  const updateActiveNav = () => {
    const container = rightPanelRef.value;
    if (!container) return;
    const threshold = container.getBoundingClientRect().top + 80;
    let current = navItems[0].id;
    navItems.forEach((nav) => {
      const el = container.querySelector(`#${nav.id}`) as HTMLElement | null;
      if (el && el.getBoundingClientRect().top <= threshold) {
        current = nav.id;
      }
    });
    // 滚动到底部时最后一段可能无法贴顶，强制高亮最后一项
    if (container.scrollHeight - container.scrollTop - container.clientHeight <= 8) {
      current = navItems[navItems.length - 1].id;
    }
    activeNavId.value = current;
  };

  const initNavObserver = () => {
    const container = rightPanelRef.value;
    if (!container) return;
    if (navScrollHandler) {
      container.removeEventListener('scroll', navScrollHandler);
    }
    navScrollHandler = () => {
      if (navScrollFrame !== null) return;
      navScrollFrame = window.requestAnimationFrame(() => {
        navScrollFrame = null;
        updateActiveNav();
      });
    };
    container.addEventListener('scroll', navScrollHandler, { passive: true });
    updateActiveNav();
  };

  onMounted(() => {
    // 弹窗会被 teleport 到 body：用 body 标记把「弹窗按钮 32px」限定在本页
    document.body.classList.add('case-portrait-active');
    fetchPersons();
    resetRightPanelData();
    void openGroupModalFromRoute();
    window.addEventListener('resize', handleTrendChartResize);
    nextTick(() => {
      initNavObserver();
      setupChartResizeObserver();
    });
  });

  onActivated(() => {
    document.body.classList.add('case-portrait-active');
  });

  onDeactivated(() => {
    document.body.classList.remove('case-portrait-active');
  });

  onBeforeUnmount(() => {
    document.body.classList.remove('case-portrait-active');
    revokeAvatarPreviewObjectUrl();
    if (navScrollHandler && rightPanelRef.value) {
      rightPanelRef.value.removeEventListener('scroll', navScrollHandler);
    }
    navScrollHandler = null;
    if (navScrollFrame !== null) {
      window.cancelAnimationFrame(navScrollFrame);
      navScrollFrame = null;
    }
    if (tradeTrendSearchTimer !== null) {
      window.clearTimeout(tradeTrendSearchTimer);
      tradeTrendSearchTimer = null;
    }
    if (tradeTrendOtherNameSearchTimer !== null) {
      window.clearTimeout(tradeTrendOtherNameSearchTimer);
      tradeTrendOtherNameSearchTimer = null;
    }
    window.removeEventListener('resize', handleTrendChartResize);
    chartResizeObserver?.disconnect();
    chartResizeObserver = null;
    observedChartElements.clear();
    if (chartResizeFrame !== null) {
      window.cancelAnimationFrame(chartResizeFrame);
      chartResizeFrame = null;
    }
    if ((window as any)._handleTrendDetail) {
      delete (window as any)._handleTrendDetail;
    }
    if (tradeTrendChart) {
      tradeTrendChart.dispose();
      tradeTrendChart = null;
    }
    if (tradeRatioChart) {
      tradeRatioChart.dispose();
      tradeRatioChart = null;
    }
    if (tradeTopChart) {
      tradeTopChart.dispose();
      tradeTopChart = null;
    }
    if (commTypeChart) {
      commTypeChart.dispose();
      commTypeChart = null;
    }
    if (commTopChart) {
      commTopChart.dispose();
      commTopChart = null;
    }
  });

  const fallbackValue = (value: string | number | null | undefined) => {
    if (value === 0) return '0';
    if (value === null || value === undefined || value === '') return '-';
    return String(value);
  };

  const normalizePhotoSrc = (value?: string | null) => normalizeAvatarSrc(value);

  const getPersonPhoto = (person?: Partial<PersonBasicInfo> | null) => String(person?.photograph || '').trim();

  const selectedPerson = computed(() => {
    if (selectedPersonId.value === null) return null;
    return personList.value[selectedPersonId.value] ?? null;
  });

  const personKeyword = ref('');

  const filteredPersonList = computed(() => {
    const keyword = personKeyword.value.trim();
    const source = personList.value.map((person, index) => ({ person, index }));
    if (!keyword) return source;
    return source.filter(({ person }) => {
      const personName = String(person.personName || '');
      const certNo = String(person.personCertNo || '');
      return personName.includes(keyword) || certNo.includes(keyword);
    });
  });

  const basicInfo = computed(() => {
    const person = selectedPerson.value;
    if (!person) {
      return [
        { label: '身份证', value: '-' },
        { label: '性别', value: '-' },
        { label: '民族', value: '-' },
        { label: '年龄', value: '-' },
        { label: '出生日期', value: '-' },
        { label: '文化程度', value: '-' },
        { label: '婚姻状况', value: '-' },
        { label: '身高', value: '-' },
        { label: '户籍地', value: '-' },
        { label: '现住址', value: '-' },
        { label: '工作单位', value: '-' },
        { label: '对象分组', value: '-' },
      ];
    }

    return [
      { label: '身份证', value: fallbackValue(person.personCertNo) },
      { label: '性别', value: fallbackValue(person.personGender) },
      { label: '民族', value: fallbackValue(person.personNation) },
      { label: '年龄', value: fallbackValue(person.personAge) },
      { label: '出生日期', value: fallbackValue(person.personBirth) },
      { label: '文化程度', value: fallbackValue(person.personEducation) },
      { label: '婚姻状况', value: fallbackValue(person.personMarriage) },
      { label: '身高', value: fallbackValue(person.personHeight) },
      { label: '户籍地', value: fallbackValue(person.personResidence) },
      { label: '现住址', value: fallbackValue(person.personAddress) },
      { label: '工作单位', value: fallbackValue(person.personWorkUnit) },
      { label: '对象分组', value: fallbackValue(person.personGroup) },
    ];
  });

  const displayBasicInfo = computed(() =>
    basicInfo.value.filter((item) => item.label !== '身高' && item.label !== '文化程度' && item.label !== '对象分组'),
  );

  const objectGroupText = computed(() => {
    const value = basicInfo.value.find((item) => item.label === '对象分组')?.value;
    return value && value !== '-' ? value : '未分组';
  });

  const basicPhoto = computed(() => getPersonPhoto(selectedPerson.value));

  const basicName = computed(() => {
    return selectedPerson.value?.personName ?? '-';
  });

  const topContacts = computed(() => {
    if (!commTop10Data.value.length) return [];
    const max = Math.max(...commTop10Data.value.map((item) => Number(item.callCount || 0)), 1);

    return commTop10Data.value
      .slice(0, 10)
      .map((item, index) => {
        const count = Number(item.callCount || 0);
        return {
          name: item.otherName || item.otherPhone || `联系人${index + 1}`,
          otherName: item.otherName || '',
          otherPhone: item.otherPhone || '',
          count,
          rate: Math.round((count / max) * 100),
        };
      })
      .filter((item) => String(item.name || '').trim() && Number.isFinite(item.count) && item.count > 0)
      .sort((a, b) => b.count - a.count);
  });

  const commTopRankRows = computed(() => topContacts.value);

  const hasRenderableCommTypeRatioData = computed(() =>
    commTypeRatioData.value.some((item) => String(item.name || '').trim() && Number(item.value || 0) > 0),
  );

  const commTypeLegend = computed(() => {
    const total = Number(callStatData.value?.callCount || 0);
    const colorMap: Record<string, string> = {
      主叫: '#2a50ec',
      被叫: '#2ec8d9',
      其他: '#f6b659',
    };
    const order = ['主叫', '被叫', '其他'];
    return commTypeRatioData.value
      .filter((item) => String(item.name || '').trim() && Number(item.value || 0) > 0)
      .map((item) => {
        const rate = Number(item.value || 0);
        return {
          name: item.name,
          rate: rate.toFixed(2),
          count: total ? Math.round((rate / 100) * total) : 0,
          color: colorMap[item.name] || '#f6b659',
        };
      })
      .sort((a, b) => {
        const indexA = order.indexOf(a.name);
        const indexB = order.indexOf(b.name);
        return (indexA === -1 ? 99 : indexA) - (indexB === -1 ? 99 : indexB);
      });
  });

  const hasRenderableTopContacts = computed(() =>
    topContacts.value.some((item) => String(item.name || '').trim() && Number(item.count || 0) > 0),
  );

  const tradeMetricOptions = ref([
    { label: '交易对方卡（账）号', value: 'otherCardNo' },
    { label: '交易对方', value: 'personName' },
    { label: 'ip地址', value: 'personIpAddress' },
    { label: 'mac地址', value: 'personMacAddress' },
    { label: '交易网点名称', value: 'branchName' },
  ]);

  const getTradeTopNumericValue = (item: TransOftenTop10DTO) => {
    return tradeTopQuery.dimension === '交易金额'
      ? parseMoneyValue(item.transTotalAmount)
      : Number(item.transCount || 0);
  };

  const tradeTop = computed(() => {
    if (!tradeTop10Data.value.length) return [];
    const max = Math.max(...tradeTop10Data.value.map((item) => getTradeTopNumericValue(item)), 1);

    return tradeTop10Data.value
      .map((item, index) => {
        const value = getTradeTopNumericValue(item);
        return {
          name: item.indicator || item.dimension || `对象${index + 1}`,
          filterValue: item.indicator || item.dimension || '',
          value,
          rate: Math.round((value / max) * 100),
          raw: item,
        };
      })
      .sort((a, b) => b.value - a.value);
  });

  const tradeTopRankRows = computed(() => tradeTop.value);

  const carrierTags = computed(() => {
    const operCountMap = callStatData.value?.operCountMap ?? {};
    return Object.entries(operCountMap)
      .map(([carrierName, phones]) => {
        const phoneList = Array.isArray(phones) ? phones.map((item) => String(item || '').trim()).filter(Boolean) : [];
        const name = String(carrierName || '').trim();
        return {
          carrierName: name,
          phoneList,
          carrierCount: phoneList.length,
          operatorId: name,
          label: `${name}（${phoneList.length}）`,
        };
      })
      .filter((item) => item.carrierName);
  });

  const tradeBankTags = computed(() => {
    const bankCountMap = transStatData.value?.bankCountMap ?? {};
    return Object.entries(bankCountMap).map(([bankName, cards]) => {
      const cardNoList = Array.isArray(cards) ? cards.map((item) => String(item || '').trim()).filter(Boolean) : [];
      return {
        bankName,
        cardNoList,
        label: `${bankName}（${cardNoList.length}）`,
      };
    });
  });

  const commSummary = computed(() => {
    const callStatInfo = callStatData.value;
    const phoneTotal = callStatInfo?.phoneCount ?? 0;
    const callCount = callStatInfo?.callCount;
    const otherCount = callStatInfo?.otherCount;
    const timeRange = callStatInfo?.callDateBnd
      ? String(callStatInfo.callDateBnd).replace(',', '至')
      : callStatInfo?.callDateStart
        ? `${callStatInfo.callDateStart} 至 ${callStatInfo.callDateEnd ?? '-'}`
        : '-';

    return {
      phoneSummary: phoneTotal ? `共计 ${phoneTotal} 个号码` : '-',
      totalCount: callCount ? `${callCount} 次` : '-',
      contactCount: otherCount ? `${otherCount} 个` : '-',
      timeRange,
    };
  });

  const parseMoneyValue = (value: unknown) => {
    if (value === null || value === undefined || value === '') return 0;
    if (typeof value === 'number') return Number.isFinite(value) ? value : 0;
    const num = Number(
      String(value)
        .replace(/[,%¥元\s]/g, '')
        .trim(),
    );
    return Number.isFinite(num) ? num : 0;
  };

  const parsePercentValue = (value: unknown) => {
    if (value === null || value === undefined || value === '') return null;
    const num = Number(
      String(value)
        .replace(/[,%\s]/g, '')
        .trim(),
    );
    return Number.isFinite(num) ? num : null;
  };

  const formatAmountValue = (value: number) => {
    return value.toLocaleString('zh-CN', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
  };

  const formatMoneyText = (value: unknown) => {
    const amount = parseMoneyValue(value);
    return `${formatAmountValue(amount)}元`;
  };

  const formatMoneyHighlightText = (value: unknown) => {
    const amount = parseMoneyValue(value);
    if (amount <= 0) return '-';
    return `¥${formatAmountValue(amount)}`;
  };

  const formatPercentText = (value: unknown, fallback: number) => {
    const raw = value === null || value === undefined ? '' : String(value).trim();
    if (raw) {
      return raw.includes('%') ? raw : `${raw}%`;
    }
    return `${fallback.toFixed(4)}%`;
  };

  const tradeSummary = computed(() => {
    const transStatInfo = transStatData.value;
    const cardCount = transStatInfo?.cardCount ?? 0;
    const balance = transStatInfo?.totalBalance ?? 0;
    const bankCountMap = transStatInfo?.bankCountMap ?? {};
    const banks = Object.entries(bankCountMap).map(
      ([name, cards]) => `${name}（${Array.isArray(cards) ? cards.length : 0}）`,
    );
    const infoStat = transStatInfo?.transInfoStat;
    const totalIncome = parseMoneyValue(infoStat?.totalIncome ?? infoStat?.incomeTotalAmount);
    const totalExpend = parseMoneyValue(infoStat?.totalExpend ?? infoStat?.expenseTotalAmount);
    const totalAmount = totalIncome + totalExpend;
    const incomeRate = totalAmount ? Number(((totalIncome / totalAmount) * 100).toFixed(4)) : 0;
    const expendRate = totalAmount ? Number(((totalExpend / totalAmount) * 100).toFixed(4)) : 0;
    const incomeRatio = parsePercentValue(infoStat?.incomeRatio) ?? incomeRate;
    const expendRatio = parsePercentValue(infoStat?.expenseRatio) ?? expendRate;
    const maxExpend = parseMoneyValue(infoStat?.maxExpend ?? infoStat?.maxSingleExpense);
    const maxIncome = parseMoneyValue(infoStat?.maxIncome ?? infoStat?.maxSingleIncome);

    return {
      cardSummary: cardCount ? `共计 ${cardCount} 张卡 总余额约 ${balance} 万` : '-',
      bankTags: banks,
      incomeRate: totalAmount ? formatPercentText(infoStat?.incomeRatio, incomeRate) : '-',
      incomeAmount: formatMoneyText(totalIncome),
      expendRate: totalAmount ? formatPercentText(infoStat?.expenseRatio, expendRate) : '-',
      expendAmount: formatMoneyText(totalExpend),
      maxExpend: formatMoneyHighlightText(maxExpend),
      maxIncome: formatMoneyHighlightText(maxIncome),
      incomeRatio,
      expendRatio,
      incomeValue: totalIncome,
      expendValue: totalExpend,
    };
  });

  const hasTradeSummary = computed(() => {
    const cardCount = Number(transStatData.value?.cardCount ?? 0);
    return cardCount > 0 || tradeBankTags.value.length > 0;
  });

  const hasTradeRatioData = computed(() => {
    return Number(tradeSummary.value.incomeValue || 0) > 0 || Number(tradeSummary.value.expendValue || 0) > 0;
  });

  const parseTrendAmount = (value: unknown) => {
    if (value === null || value === undefined) return 0;
    if (typeof value === 'number') return Number.isFinite(value) ? value : 0;
    const num = Number(String(value).replace(/,/g, '').trim());
    return Number.isFinite(num) ? num : 0;
  };

  const trendSummaryByDate = computed(() => {
    const map = new Map<string, { income: number; expend: number }>();
    tradeTrendData.value.forEach((item: any) => {
      const date = item?.transDate || '-';
      const flag = String(item?.debitCreditFlag || '').trim();
      const amount = parseTrendAmount(item?.transTotalAmount);
      const current = map.get(date) || { income: 0, expend: 0 };

      if (flag === '收入') {
        current.income += amount;
      } else if (flag === '支出') {
        current.expend += amount;
      }
      map.set(date, current);
    });

    return Array.from(map.entries())
      .map(([date, value]) => ({ date, ...value }))
      .sort((a, b) => a.date.localeCompare(b.date));
  });

  const trendLabels = computed(() => trendSummaryByDate.value.map((item) => item.date));

  const trendIncomePoints = computed(() => trendSummaryByDate.value.map((item) => item.income));

  const trendExpendPoints = computed(() => trendSummaryByDate.value.map((item) => item.expend));

  const trendPoints = computed(() => {
    const income = trendIncomePoints.value;
    const expend = trendExpendPoints.value;
    return income.map((v, i) => Math.max(Number(v || 0), Number(expend[i] || 0)));
  });

  const trendChartStyle = computed(() => {
    const widthN = Math.max(1, Math.floor(trendLabels.value.length / 15));
    const basePercent = (widthN + 1) * 100 - 100;
    const widthPercent = tradeTrendQuery.timeDimension === 'YEAR' ? Math.max(220, basePercent) : basePercent;
    const widthPx = tradeTrendQuery.timeDimension === 'YEAR' ? Math.max(1200, trendLabels.value.length * 420) : 0;

    return {
      height: '220px',
      width: tradeTrendQuery.timeDimension === 'YEAR' ? `${widthPx}px` : `${widthPercent}%`,
      minWidth: '100%',
      paddingRight: tradeTrendQuery.timeDimension === 'YEAR' ? '24px' : '0',
    };
  });

  const formatAmount = (value: number | string | null | undefined) => {
    const num = Number(value || 0);
    return num.toLocaleString('zh-CN');
  };

  const buildTooltipCard = ({
    title,
    value,
    color,
    suffix = '',
    subText,
  }: {
    title: string;
    value: string;
    color: string;
    suffix?: string;
    subText?: string;
  }) => {
    const sub = subText
      ? `<div style="font-size:11px; line-height:17px; color:#98a2b3; margin-top:5px;">${subText}</div>`
      : '';
    return [
      '<div style="padding:11px 13px; min-width:128px; background:#ffffff; border:1px solid #e7ebf3; border-radius:10px; box-shadow:0 8px 24px rgba(16,24,40,0.12);">',
      `<div style="font-size:12px; line-height:18px; color:#5b6577; margin-bottom:6px;">${title}</div>`,
      '<div style="display:flex; align-items:center; gap:7px;">',
      `<span style="width:7px; height:7px; border-radius:50%; background:${color}; display:inline-block;"></span>`,
      `<span style="font-size:13px; line-height:19px; color:#111827; font-weight:600;">${value}${suffix}</span>`,
      '</div>',
      sub,
      '</div>',
    ].join('');
  };

  const getConfinedTooltipPosition = (
    point: number[],
    _params: unknown,
    dom: HTMLElement,
    _rect: unknown,
    size: { viewSize: number[] },
  ) => {
    const [pointX, pointY] = point;
    const [viewWidth, viewHeight] = size.viewSize;
    const cardWidth = dom.offsetWidth || 160;
    const cardHeight = dom.offsetHeight || 96;
    const gap = 10;

    const left = Math.min(Math.max(pointX - cardWidth / 2, gap), Math.max(gap, viewWidth - cardWidth - gap));
    const top = Math.min(Math.max(pointY - cardHeight - 18, gap), Math.max(gap, viewHeight - cardHeight - gap));

    return [left, top];
  };

  const formatTrendAxisValue = (value: number) => {
    const numericValue = Number(value || 0);
    const absValue = Math.abs(numericValue);
    if (absValue >= 100000000) {
      return `${(numericValue / 100000000).toFixed(absValue % 100000000 === 0 ? 0 : 1)}亿`;
    }
    if (absValue >= 10000) {
      return `${(numericValue / 10000).toFixed(absValue % 10000 === 0 ? 0 : 1)}万`;
    }
    return numericValue.toLocaleString('zh-CN');
  };

  const buildTrendTooltipCard = (time: string, params: any[]) => {
    const rowHtml = params
      .filter((item) => item && item.seriesName)
      .map((item) => {
        const color = String(item?.color || (item?.seriesName === '收入' ? '#12b76a' : '#2a50ec'));
        return [
          '<div style="display:flex; align-items:center; justify-content:space-between; gap:18px;">',
          '<span style="display:flex; align-items:center; gap:7px; font-size:12px; line-height:18px; color:#5b6577;">',
          `<span style="width:7px; height:7px; border-radius:50%; background:${color}; display:inline-block;"></span>`,
          `${item.seriesName}`,
          '</span>',
          `<span style="font-size:12px; line-height:18px; color:#111827; font-weight:600;">${formatAmount(item?.value)}元</span>`,
          '</div>',
        ].join('');
      })
      .join('<div style="height:6px;"></div>');

    if (!rowHtml) return '';

    return [
      '<div style="padding:11px 13px; min-width:178px; background:#ffffff; border:1px solid #e7ebf3; border-radius:10px; box-shadow:0 8px 24px rgba(16,24,40,0.12);">',
      '<div style="display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px;">',
      `<span style="font-size:12px; line-height:18px; color:#111827; font-weight:600;">${time}</span>`,
      `<span style="font-size:11px; line-height:16px; color:#2a50ec; cursor:pointer;" onclick='window._handleTrendDetail(${JSON.stringify(time)})'>查看详情</span>`,
      '</div>',
      rowHtml,
      '</div>',
    ].join('');
  };

  const wrapAxisLabel = (value: string, maxCharsPerLine = 5) => {
    const chars = Array.from(value || '');
    if (chars.length <= maxCharsPerLine) return value;
    const lines: string[] = [];
    for (let index = 0; index < chars.length; index += maxCharsPerLine) {
      lines.push(chars.slice(index, index + maxCharsPerLine).join(''));
    }
    return lines.join('\n');
  };

  const resolveAxisLabelCharsPerLine = (container: HTMLElement | null | undefined, itemCount: number, fallback = 5) => {
    const width = container?.clientWidth || 0;
    if (!width || itemCount <= 0) return fallback;

    const usableWidth = Math.max(width - 72, 0);
    const slotWidth = usableWidth / Math.max(itemCount, 1);
    const approximateCharWidth = 7.5;
    const charsPerLine = Math.floor(slotWidth / approximateCharWidth);

    return Math.max(4, Math.min(24, charsPerLine || fallback));
  };

  const formatTradeTopAxisLabel = (value: string, maxCharsPerLine = 5, maxLines = 2) => {
    const chars = Array.from(value || '');
    if (!chars.length) return '';

    const normalizedCharsPerLine = Math.max(4, maxCharsPerLine);
    const normalizedMaxLines = Math.max(1, maxLines);
    const maxChars = normalizedCharsPerLine * normalizedMaxLines;

    if (chars.length <= maxChars) {
      return wrapAxisLabel(value, normalizedCharsPerLine);
    }

    const visibleChars = chars.slice(0, Math.max(maxChars - 1, 1));
    const truncatedValue = `${visibleChars.join('')}…`;
    return wrapAxisLabel(truncatedValue, normalizedCharsPerLine);
  };

  const getTradeTopAxisMax = (maxValue: number) => {
    if (maxValue <= 0) return 1;
    const magnitude = 10 ** Math.floor(Math.log10(maxValue));
    return Math.ceil((maxValue * 1.15) / magnitude) * magnitude;
  };

  const getNiceAxisInterval = (maxValue: number, targetSplitCount = 5) => {
    if (maxValue <= 0) return 1;
    const safeSplitCount = Math.max(1, targetSplitCount);
    const roughInterval = maxValue / safeSplitCount;
    const magnitude = 10 ** Math.floor(Math.log10(roughInterval));
    const normalized = roughInterval / magnitude;

    if (normalized <= 1) return magnitude;
    if (normalized <= 2) return 2 * magnitude;
    if (normalized <= 2.5) return 2.5 * magnitude;
    if (normalized <= 5) return 5 * magnitude;
    return 10 * magnitude;
  };

  const getCommTopAxisInterval = (maxValue: number) => {
    return Math.max(1, Math.ceil(getNiceAxisInterval(maxValue, 5)));
  };

  const getCommTopAxisMax = (maxValue: number) => {
    const interval = getCommTopAxisInterval(maxValue);
    return Math.max(interval, Math.ceil(maxValue / interval) * interval);
  };

  const formatTradeTopValue = (value: number) => {
    if (tradeTopQuery.dimension === '交易金额') {
      return `${value.toLocaleString('zh-CN', { maximumFractionDigits: 2 })} 元`;
    }
    return `${value.toLocaleString('zh-CN')} 次`;
  };

  const formatTradeRankValue = (value: number) => {
    if (tradeTopQuery.dimension === '交易金额') {
      return `¥${formatAmountValue(value)}`;
    }
    return `${Number(value || 0).toLocaleString('zh-CN')} 次`;
  };

  const changeLegend = (title: string, index: number) => {
    trendLegendArr.value[index].isShow = !trendLegendArr.value[index].isShow;
    tradeTrendChart?.dispatchAction({
      type: 'legendToggleSelect',
      name: title,
    });
  };

  const handleTrendDetail = async (name: string) => {
    const baseQuery: Partial<TransRecordQuery> = {};

    if (tradeTrendQuery.timeDimension === 'YEAR') {
      baseQuery.startDate = `${name}-01-01`;
      baseQuery.endDate = `${name}-12-31`;
    } else {
      baseQuery.startDate = `${name}-01`;
      const [yearStr, monthStr] = name.split('-');
      const year = Number(yearStr || 0);
      const month = Number(monthStr || 1);
      const lastDay = new Date(year, month, 0).getDate();
      baseQuery.endDate = `${name}-${String(lastDay).padStart(2, '0')}`;
    }

    const startDate = tradeTrendQuery.dateRange?.[0];
    const endDate = tradeTrendQuery.dateRange?.[1];
    if (startDate && endDate) {
      baseQuery.startDate = startDate;
      baseQuery.endDate = endDate;
    }

    const otherName = String(tradeTrendQuery.otherName || '').trim();
    if (otherName) {
      baseQuery.otherName = otherName;
    }

    openTransRecordDrilldown(baseQuery);
  };

  const openCallSummaryFromTopContacts = async () => {
    await openCallSummaryWithFilters({}, { useCommTopDateRange: true });
  };

  const initCommTypeChart = () => {
    if (!commTypeChartRef.value || !hasRenderableCommTypeRatioData.value) return;
    if (commTypeChart && commTypeChart.getDom() !== commTypeChartRef.value) {
      commTypeChart.dispose();
      commTypeChart = null;
    }
    if (!commTypeChart) commTypeChart = echarts.init(commTypeChartRef.value);

    const pieData = commTypeRatioData.value.map((item) => ({
      ...item,
      rawName: item.name,
      itemStyle: {
        // 图表统一使用纯色，主叫取项目主蓝
        color: item.name === '主叫' ? '#2a50ec' : item.name === '被叫' ? '#2ec8d9' : '#f6b659',
      },
    }));

    const option: echarts.EChartsOption = {
      backgroundColor: 'transparent',
      title: {
        text: String(Number(callStatData.value?.callCount || 0)),
        subtext: '通话总数',
        left: 'center',
        top: 'center',
        textStyle: {
          color: '#111827',
          fontSize: 26,
          fontWeight: 600,
          lineHeight: 30,
        },
        subtextStyle: {
          color: '#98a2b3',
          fontSize: 11,
          lineHeight: 16,
        },
        itemGap: 2,
      },
      tooltip: {
        trigger: 'item',
        confine: true,
        backgroundColor: 'transparent',
        borderWidth: 0,
        padding: 0,
        extraCssText: 'box-shadow:none;background:transparent;',
        position: getConfinedTooltipPosition,
        formatter: (params: any) => {
          const rawName = String(params?.data?.rawName || params?.name || '');
          const value = Number(params?.value || 0).toFixed(2);
          return buildTooltipCard({
            title: rawName,
            value,
            color: String(params?.color || '#2a50ec'),
            suffix: '%',
          });
        },
      },
      legend: {
        show: false,
      },
      series: [
        {
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['58%', '80%'],
          avoidLabelOverlap: false,
          emphasis: {
            scale: false,
          },
          itemStyle: {
            borderWidth: 3,
            borderColor: '#ffffff',
          },
          labelLine: { show: false },
          label: { show: false },
          data: pieData,
        },
      ],
    };
    commTypeChart.setOption(option, true);
    commTypeChart.off('click');
    commTypeChart.on('click', (params: any) => {
      void (async () => {
        const rawName = String(params?.data?.rawName || '');
        const n = rawName || String(params?.data?.name || '');
        const callDirection = n.includes('主叫') ? '主叫' : n.includes('被叫') ? '被叫' : '';
        openCallRecordWithFilters(callDirection ? { callDirection } : {}, { omitPersonPhones: true });
      })();
    });
  };

  const initCommTopChart = () => {
    if (!commTopChartRef.value || !hasRenderableTopContacts.value) return;
    if (commTopChart && commTopChart.getDom() !== commTopChartRef.value) {
      commTopChart.dispose();
      commTopChart = null;
    }
    if (!commTopChart) commTopChart = echarts.init(commTopChartRef.value);

    const xData = topContacts.value.map((v) => v.name);
    const yData = topContacts.value.map((v) => Number(v.count || 0));
    const maxValue = Math.max(...yData, 0);
    const axisInterval = getCommTopAxisInterval(maxValue);
    const axisMax = getCommTopAxisMax(maxValue);
    const labelCharsPerLine = resolveAxisLabelCharsPerLine(commTopChartRef.value, xData.length, 5);

    const option: echarts.EChartsOption = {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'item',
        confine: true,
        backgroundColor: 'transparent',
        borderWidth: 0,
        padding: 0,
        extraCssText: 'box-shadow:none;background:transparent;',
        position: getConfinedTooltipPosition,
        formatter: (params: any) => {
          const name = String(params?.name || '');
          const value = Number(params?.value || 0);
          return buildTooltipCard({
            title: name,
            value: value.toLocaleString('zh-CN'),
            color: '#2a50ec',
            subText: '联系次数',
          });
        },
      },
      grid: { top: 42, left: 18, right: 24, bottom: 8, outerBoundsMode: 'same', outerBoundsContain: 'axisLabel' },
      xAxis: [
        {
          type: 'category',
          data: xData,
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#8d95a3',
            },
          },
          axisLine: { lineStyle: { color: '#8d95a3' } },
          axisLabel: {
            interval: 0,
            color: '#6b7280',
            fontSize: 12,
            lineHeight: 16,
            margin: 10,
            formatter: (value: string) => wrapAxisLabel(value, labelCharsPerLine),
          },
        },
      ],
      yAxis: [
        {
          name: '次数',
          type: 'value',
          min: 0,
          max: axisMax,
          minInterval: 1,
          interval: axisInterval,
          splitNumber: Math.min(6, Math.max(1, Math.round(axisMax / axisInterval))),
          nameLocation: 'end',
          nameRotate: 0,
          nameGap: 14,
          nameTextStyle: {
            color: '#6b7280',
            fontSize: 12,
            align: 'left',
            padding: [0, 0, 0, -8],
          },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: '#6b7280',
            formatter: (value: number) => value.toLocaleString('zh-CN'),
          },
          splitLine: {
            lineStyle: {
              color: '#dde5f2',
            },
          },
        },
      ],
      series: [
        {
          type: 'bar',
          barWidth: 34,
          data: yData,
          itemStyle: {
            borderRadius: [6, 6, 0, 0],
            // 纯色柱：不使用任何渐变
            color: '#2a50ec',
          },
          emphasis: {
            itemStyle: {
              color: '#0958d9',
            },
          },
        },
      ],
    };
    commTopChart.setOption(option, true);
    commTopChart.getZr().off('click');
    commTopChart.getZr().on('click', (params: any) => {
      void (async () => {
        const pointInPixel = [params.offsetX, params.offsetY];
        const pointInGrid = commTopChart!.convertFromPixel({ seriesIndex: 0 }, pointInPixel) as number[];
        const dataIndex = pointInGrid?.[0];
        const row = topContacts.value[dataIndex];
        if (!row) return;
        const baseQuery: Partial<CallRecordQuery> = row.otherPhone
          ? {
              otherPhones: [row.otherPhone],
            }
          : row.otherName
            ? {
                otherName: row.otherName,
              }
            : {};
        openCallRecordWithFilters(baseQuery, { useCommTopDateRange: true, omitPersonPhones: true });
      })();
    });
    requestAnimationFrame(() => {
      commTopChart?.resize();
    });
  };

  const initTradeRatioChart = () => {
    if (!tradeRatioChartRef.value || !hasTradeRatioData.value) return;
    if (tradeRatioChart && tradeRatioChart.getDom() !== tradeRatioChartRef.value) {
      tradeRatioChart.dispose();
      tradeRatioChart = null;
    }
    if (!tradeRatioChart) tradeRatioChart = echarts.init(tradeRatioChartRef.value);

    const income = Number(tradeSummary.value.incomeValue || 0);
    const expend = Number(tradeSummary.value.expendValue || 0);

    const option: echarts.EChartsOption = {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'item',
        confine: true,
        backgroundColor: 'transparent',
        borderWidth: 0,
        padding: 0,
        extraCssText: 'box-shadow:none;background:transparent;',
        position: getConfinedTooltipPosition,
        formatter: (params: any) => {
          const name = String(params?.name || '');
          const value = Number(params?.value || 0);
          const ratio = Number(params?.percent || 0);
          return buildTooltipCard({
            title: name,
            value: `${formatAmountValue(value)}元`,
            color: String(params?.color || '#12b76a'),
            subText: `占比 ${ratio.toFixed(4)}%`,
          });
        },
      },
      legend: { show: false },
      series: [
        {
          type: 'pie',
          radius: ['56%', '82%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          emphasis: {
            scale: false,
          },
          itemStyle: {
            borderWidth: 3,
            borderColor: '#ffffff',
          },
          label: { show: false },
          labelLine: { show: false },
          data: [
            { value: income, name: '收入', itemStyle: { color: '#12b76a' } },
            { value: expend, name: '支出', itemStyle: { color: '#2a50ec' } },
          ].filter((item) => item.value > 0),
        },
      ],
    };

    tradeRatioChart.setOption(option, true);
    tradeRatioChart.off('click');
    tradeRatioChart.on('click', (params: any) => {
      const name = String(params?.name || '');
      if (name === '收入' || name === '支出') {
        void handleDrillByDebitCredit(name as '收入' | '支出');
      }
    });
    requestAnimationFrame(() => {
      tradeRatioChart?.resize();
    });
  };

  const initTradeTopChart = () => {
    if (!tradeTopChartRef.value || !tradeTop.value.length) return;
    if (tradeTopChart && tradeTopChart.getDom() !== tradeTopChartRef.value) {
      tradeTopChart.dispose();
      tradeTopChart = null;
    }
    if (!tradeTopChart) tradeTopChart = echarts.init(tradeTopChartRef.value);

    const xData = tradeTop.value.map((v) => v.name);
    const yData = tradeTop.value.map((v) => Number(v.value || 0));
    const maxValue = Math.max(...yData, 0);
    const labelCharsPerLine = resolveAxisLabelCharsPerLine(tradeTopChartRef.value, xData.length, 5);

    const option: echarts.EChartsOption = {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'item',
        backgroundColor: 'transparent',
        borderWidth: 0,
        padding: 0,
        extraCssText: 'box-shadow:none;background:transparent;',
        formatter: (params: any) => {
          const name = String(params?.name || '');
          const value = Number(params?.value || 0);
          return buildTooltipCard({
            title: name,
            value: formatTradeTopValue(value),
            color: '#2a50ec',
            subText: tradeTopQuery.dimension,
          });
        },
      },
      grid: { top: 48, left: 20, right: 24, bottom: 64, outerBoundsMode: 'same', outerBoundsContain: 'axisLabel' },
      xAxis: [
        {
          type: 'category',
          data: xData,
          axisTick: { alignWithLabel: true },
          axisLine: { lineStyle: { color: '#8d95a3' } },
          axisLabel: {
            interval: 0,
            color: '#6b7280',
            fontSize: 12,
            lineHeight: 16,
            margin: 10,
            formatter: (value: string) => formatTradeTopAxisLabel(value, labelCharsPerLine, 2),
          },
        },
      ],
      yAxis: [
        {
          name: tradeTopQuery.dimension === '交易金额' ? '金额' : '次数',
          type: 'value',
          min: 0,
          max: getTradeTopAxisMax(maxValue),
          splitNumber: 5,
          nameLocation: 'end',
          nameRotate: 0,
          nameGap: 18,
          nameTextStyle: {
            color: '#6b7280',
            fontSize: 12,
            align: 'left',
            padding: [0, 0, 0, -8],
          },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: '#6b7280',
            formatter: (value: number) => value.toLocaleString('zh-CN'),
          },
          splitLine: {
            lineStyle: {
              color: '#dde5f2',
            },
          },
        },
      ],
      series: [
        {
          type: 'bar',
          barWidth: 36,
          data: yData,
          itemStyle: {
            borderRadius: [6, 6, 0, 0],
            // 纯色柱：常交易对象 TOP10 使用项目主蓝，禁止渐变
            color: '#2a50ec',
          },
          emphasis: {
            itemStyle: {
              color: '#0958d9',
            },
          },
        },
      ],
    };

    tradeTopChart.setOption(option, true);
    tradeTopChart.getZr().off('click');
    tradeTopChart.getZr().on('click', (params: any) => {
      void (async () => {
        if (!tradeTop10Data.value.length) return;
        const pointInPixel = [params.offsetX, params.offsetY];
        const pointInGrid = tradeTopChart!.convertFromPixel({ seriesIndex: 0 }, pointInPixel) as number[];
        const dataIndex = pointInGrid?.[0];
        const row = tradeTop.value[dataIndex];
        if (!row) return;
        handleDrillByTradeTop(row);
      })();
    });
    requestAnimationFrame(() => {
      tradeTopChart?.resize();
    });
  };

  const initTradeTrendChart = () => {
    if (!tradeTrendChartRef.value) return;

    if (tradeTrendChart) {
      tradeTrendChart.dispose();
      tradeTrendChart = null;
    }

    tradeTrendChart = echarts.init(tradeTrendChartRef.value);

    const option: echarts.EChartsOption = {
      backgroundColor: 'transparent',
      tooltip: {
        backgroundColor: 'transparent',
        borderWidth: 0,
        padding: 0,
        extraCssText: 'box-shadow:none;background:transparent;',
        position: (pt: number[], _params: any, _dom: any, _rect: any, size: any) => {
          const [width] = size?.contentSize || [0];
          return [pt[0] - width / 2, pt[1] + 10];
        },
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            // 指示线跟随项目主蓝，替代原来的暖橙色
            color: 'rgba(42, 80, 236, 0.35)',
            width: 1.5,
            type: 'dashed',
          },
        },
        showContent: true,
        alwaysShowContent: false,
        showDelay: 0,
        hideDelay: 1000,
        enterable: true,
        confine: false,
        transitionDuration: 0.4,
        formatter: (params: any) => {
          const list = Array.isArray(params) ? params : [params];
          const time = list[0]?.axisValueLabel || list[0]?.name || '-';
          return buildTrendTooltipCard(time, list);
        },
      },
      legend: {
        show: false,
        data: ['收入', '支出'],
        selected: {
          收入: trendLegendArr.value[0]?.isShow ?? true,
          支出: trendLegendArr.value[1]?.isShow ?? true,
        },
      },
      grid: {
        left: 44,
        right: 24,
        bottom: 30,
        top: 18,
        outerBoundsMode: 'same',
        outerBoundsContain: 'axisLabel',
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: trendLabels.value,
        axisLine: {
          lineStyle: {
            color: '#e5e7eb',
          },
        },
        axisTick: { show: false },
        axisLabel: {
          interval: 0,
          color: '#6b7280',
          fontSize: 12,
          margin: 16,
          formatter: (value: string) => {
            const maxLength = tradeTrendQuery.timeDimension === 'YEAR' ? 4 : 7;
            const val = String(value ?? '');
            const rowN = Math.ceil(val.length / maxLength);
            if (rowN <= 1) return val;
            let ret = '';
            for (let i = 0; i < rowN; i++) {
              ret += val.substring(i * maxLength, (i + 1) * maxLength) + '\n';
            }
            return ret;
          },
        },
      },
      yAxis: {
        type: 'value',
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          color: '#6b7280',
          fontSize: 12,
          formatter: (value: number) => formatTrendAxisValue(value),
        },
        splitNumber: 5,
        splitLine: {
          lineStyle: {
            color: '#eef2f7',
            type: 'dashed',
          },
        },
      },
      series: [
        {
          name: '收入',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          showSymbol: false,
          itemStyle: {
            color: '#12b76a',
            borderColor: '#ffffff',
            borderWidth: 2,
          },
          lineStyle: { width: 2.5, color: '#12b76a' },
          areaStyle: {
            // 纯色低透明度填充（禁止渐变）
            color: 'rgba(18, 183, 106, 0.10)',
          },
          emphasis: {
            focus: 'series',
          },
          data: trendIncomePoints.value,
        },
        {
          name: '支出',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          showSymbol: false,
          itemStyle: {
            color: '#2a50ec',
            borderColor: '#ffffff',
            borderWidth: 2,
          },
          lineStyle: { width: 2.5, color: '#2a50ec' },
          areaStyle: {
            // 纯色低透明度填充（禁止渐变）
            color: 'rgba(42, 80, 236, 0.10)',
          },
          emphasis: {
            focus: 'series',
          },
          data: trendExpendPoints.value,
        },
      ],
    };

    tradeTrendChart.setOption(option, true);
    (window as any)._handleTrendDetail = handleTrendDetail;
  };

  watch(
    () => [trendLabels.value, trendIncomePoints.value, trendExpendPoints.value],
    async () => {
      if (!trendLabels.value.length) return;
      await nextTick();
      setupChartResizeObserver();
      if (!tradeTrendChartRef.value) return;
      initTradeTrendChart();
      requestAnimationFrame(() => {
        tradeTrendChart?.resize();
      });
      if (tradeTrendScrollRef.value) {
        tradeTrendScrollRef.value.scrollLeft = 0;
      }
    },
    { deep: true },
  );

  watch(
    () => [
      String(tradeTrendQuery.otherName || '').trim(),
      tradeTrendQuery.dateRange?.[0],
      tradeTrendQuery.dateRange?.[1],
      tradeTrendQuery.timeDimension,
    ],
    () => {
      const personName = selectedPerson.value?.personName;
      if (!personName) {
        tradeTrendData.value = [];
        return;
      }
      scheduleTradeTrendSearch(tradeTrendQuery.timeDimension === 'YEAR' ? 0 : 240);
    },
  );

  watch(
    () => selectedPerson.value?.personName || '',
    (personName) => {
      resetTradeTrendOtherNameState();
      if (!personName) return;
      const currentValue = String(tradeTrendQuery.otherName || '').trim();
      if (currentValue) {
        setTradeTrendOtherNameOptions([currentValue], true);
      }
      void loadTradeTrendOtherNameOptions({ reset: true, search: '' });
    },
  );

  watch(
    () => tradeTrendChartRef.value,
    async (el) => {
      if (!el || !trendLabels.value.length) return;
      await nextTick();
      setupChartResizeObserver();
      initTradeTrendChart();
      requestAnimationFrame(() => {
        tradeTrendChart?.resize();
      });
    },
  );

  watch(
    () => [tradeSummary.value.incomeValue, tradeSummary.value.expendValue, tradeRatioChartRef.value],
    async () => {
      if (!hasTradeRatioData.value || !tradeRatioChartRef.value) {
        if (tradeRatioChart) {
          tradeRatioChart.dispose();
          tradeRatioChart = null;
        }
        return;
      }
      await nextTick();
      setupChartResizeObserver();
      initTradeRatioChart();
    },
  );

  watch(
    () => tradeTop.value,
    async () => {
      await nextTick();
      setupChartResizeObserver();
      if (!tradeTop.value.length || !tradeTopChartRef.value) return;
      initTradeTopChart();
    },
    { deep: true },
  );

  watch(
    () => [
      tradeTopQuery.indicator,
      tradeTopQuery.dimension,
      tradeTopQuery.dateRange?.[0],
      tradeTopQuery.dateRange?.[1],
    ],
    async () => {
      const personName = selectedPerson.value?.personName;
      if (!personName) {
        tradeTop10Data.value = [];
        return;
      }

      try {
        tradeTop10Data.value = await loadTradeTopData(personName);
      } catch (error) {
        console.error('获取常交易对象TOP10失败', error);
        tradeTop10Data.value = [];
      }
    },
  );

  watch(
    () => [hasRenderableCommTypeRatioData.value, commTypeRatioData.value, commTypeChartRef.value],
    async () => {
      if (!hasRenderableCommTypeRatioData.value || !commTypeChartRef.value) {
        if (commTypeChart) {
          commTypeChart.dispose();
          commTypeChart = null;
        }
        return;
      }
      await nextTick();
      setupChartResizeObserver();
      initCommTypeChart();
      requestAnimationFrame(() => {
        commTypeChart?.resize();
      });
    },
    { deep: true },
  );

  watch(
    () => [hasRenderableTopContacts.value, topContacts.value, commTopChartRef.value],
    async () => {
      if (!hasRenderableTopContacts.value || !commTopChartRef.value) {
        if (commTopChart) {
          commTopChart.dispose();
          commTopChart = null;
        }
        return;
      }
      await nextTick();
      setupChartResizeObserver();
      initCommTopChart();
    },
    { deep: true },
  );

  watch(
    () => [commTopQuery.dateRange?.[0], commTopQuery.dateRange?.[1]],
    async () => {
      const personName = selectedPerson.value?.personName;
      if (!personName) {
        commTop10Data.value = [];
        return;
      }

      try {
        commTop10Data.value = await loadCommTopData(personName);
      } catch (error) {
        console.error('获取常联系对象TOP10失败', error);
        commTop10Data.value = [];
      }
    },
  );

  const stations = computed(() => {
    if (!stationData.value.length) return [];
    return stationData.value
      .filter((item): item is CallStatStationDTO => !!item && typeof item === 'object')
      .map((item) => {
        if (item.personStationName) return item.personStationName;
        const regionId = item.personRegionId || '';
        const cellId = item.personCellId || '';
        if (regionId && cellId) return `${regionId}-${cellId}`;
        return regionId || cellId || '-';
      })
      .filter(Boolean)
      .slice(0, stationDisplayLimit);
  });
</script>

<style lang="less">
  @prefix-cls: ~'jeesite-case-portrait';

  .@{prefix-cls}.case-portrait-page {
    padding: 0;
    background: #f5f6f8;
    height: 100%;
    width: calc(100% + 24px);
    margin: 0 -12px;
    box-sizing: border-box;
    overflow: hidden;

    .page-main {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
      height: 100%;
      padding: 16px 0;
      box-sizing: border-box;
      overflow: hidden;
    }

    .page-layout {
      display: grid;
      grid-template-columns: 196px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
      flex: 1 1 auto;
      min-height: 0;
    }

    .left-panel {
      position: sticky;
      top: 0;
      align-self: start;
      height: calc(100vh - 100px);
      max-height: calc(100vh - 100px);

      .panel-card {
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, #fcfdff 0%, #f4f8ff 100%);
        border: 1px solid #dfe9fb;
        border-radius: 22px;
        padding: 16px 14px 18px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
        height: 100%;
        box-sizing: border-box;

        &::before {
          content: '';
          position: absolute;
          left: -12px;
          top: -24px;
          width: 180px;
          height: 140px;
          background: radial-gradient(circle, rgba(96, 165, 250, 0.18) 0%, rgba(96, 165, 250, 0) 74%);
          pointer-events: none;
        }
      }

      .search-box {
        position: relative;
        z-index: 1;

        .ant-input,
        .ant-input-affix-wrapper {
          height: 40px;
          border-radius: 999px;
          border-color: #d8e4fb;
          background: rgba(255, 255, 255, 0.92);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
          padding-inline: 14px;
        }

        .ant-input-affix-wrapper {
          display: flex;
          align-items: center;
          overflow: hidden;
          box-sizing: border-box;
        }

        .ant-input-affix-wrapper > .ant-input {
          height: 100%;
          padding: 0;
          border: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
        }

        .ant-input-affix-wrapper .ant-input-suffix,
        .ant-input-affix-wrapper .ant-input-clear-icon {
          display: inline-flex;
          align-items: center;
        }

        .ant-input:focus,
        .ant-input-focused,
        .ant-input-affix-wrapper-focused {
          border-color: #8ab4ff;
          box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
        }
      }

      .left-actions {
        display: flex;
        position: relative;
        z-index: 1;

        .ant-btn {
          height: 40px;
          border: 0;
          border-radius: 999px;
          font-weight: 600;
          letter-spacing: 0.04em;
          background: linear-gradient(135deg, #2f7df6 0%, #56b1ff 100%);
          box-shadow: 0 12px 22px rgba(59, 130, 246, 0.24);
        }
      }

      .person-list {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
        padding: 4px 2px 0 0;

        &::before {
          display: none;
        }

        &::-webkit-scrollbar {
          width: 4px;
        }
        &::-webkit-scrollbar-thumb {
          background: #ccc;
          border-radius: 2px;
        }

        .empty-tip {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 10px;
          position: relative;
          z-index: 1;
          width: 100%;
          min-height: 148px;
          padding: 24px 14px;
          box-sizing: border-box;
          border-radius: 24px;
          border: 1px dashed rgba(183, 202, 234, 0.72);
          background:
            radial-gradient(circle at top right, rgba(119, 177, 255, 0.12), transparent 32%),
            linear-gradient(180deg, rgba(251, 253, 255, 0.96) 0%, rgba(243, 247, 255, 0.92) 100%);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);

          &::before {
            content: '';
            flex: 0 0 52px;
            width: 52px;
            height: 52px;
            border-radius: 18px;
            border: 1px solid rgba(187, 208, 247, 0.82);
            background:
              radial-gradient(circle at 50% 16px, #5b8ff9 0 5px, transparent 6px),
              linear-gradient(#d5e3ff 0 0) center 34px / 26px 3px no-repeat,
              linear-gradient(180deg, #76a9ff 0%, #4f7cff 100%) 17px 30px / 6px 11px no-repeat,
              linear-gradient(180deg, #8fc6ff 0%, #60a5fa 100%) 25px 26px / 6px 15px no-repeat,
              linear-gradient(180deg, #c4b5fd 0%, #93c5fd 100%) 33px 23px / 6px 18px no-repeat,
              linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(237, 245, 255, 0.92) 100%);
            background-repeat: no-repeat;
            box-shadow:
              inset 0 1px 0 rgba(255, 255, 255, 0.92),
              0 14px 24px rgba(59, 130, 246, 0.1);
          }
        }
      }

      .person-card {
        width: 100%;
        max-width: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        min-height: 60px;
        padding: 10px 12px;
        border-radius: 12px;
        background: #fafafa;
        border: 1px solid #e7edf5;
        cursor: pointer;
        transition:
          border-color 0.22s ease,
          box-shadow 0.22s ease,
          background 0.22s ease;
        position: relative;
        overflow: visible;
        z-index: 1;

        &::before {
          display: none;
        }

        &::after {
          display: none;
        }

        &:hover {
          background: #fff;
          border-color: #d7e4f6;
          box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);

          .person-avatar .jeesite-person-avatar__media {
            background: linear-gradient(135deg, #4d92ff 0%, #73c0ff 100%);
            box-shadow: 0 8px 14px rgba(59, 130, 246, 0.18);
          }

          .person-name {
            color: #0f172a;
          }
        }

        &.active {
          background: #ffffff;
          border-color: #9ec5fe;
          box-shadow:
            inset 0 0 0 1px rgba(47, 125, 246, 0.12),
            0 8px 18px rgba(59, 130, 246, 0.08);

          .person-avatar .jeesite-person-avatar__media {
            background: linear-gradient(135deg, #2f7df6 0%, #57b3ff 100%);
            box-shadow: 0 8px 14px rgba(59, 130, 246, 0.2);
          }

          .person-name {
            color: #0f172a;
            font-weight: 600;
          }
        }
      }

      .person-avatar-wrap {
        position: relative;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: none;

        &::before {
          display: none;
        }
      }

      .person-avatar {
        display: flex;
        position: relative;
        z-index: 1;
        transition: all 0.22s ease;
      }

      .person-name {
        position: relative;
        z-index: 1;
        flex: 1;
        min-width: 0;
        max-width: none;
        min-height: auto;
        font-size: 13px;
        line-height: 1.5;
        color: #5b6472;
        font-weight: 500;
        text-align: left;
        word-break: break-word;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        transition:
          color 0.22s ease,
          font-weight 0.22s ease;
      }

      .group-btn-wrap {
        margin-top: auto;
        padding-top: 14px;
        border-top: 1px solid rgba(209, 223, 246, 0.88);
        position: relative;
        z-index: 1;

        .group-btn {
          width: 100%;
          height: 40px;
          border-radius: 999px;
          border-color: #d6e4ff;
          color: #205ecf;
          background: rgba(255, 255, 255, 0.88);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
        }
      }
    }

    .right-panel {
      display: flex;
      flex-direction: column;
      align-self: stretch;
      flex: 1 1 auto;
      gap: 16px;
      min-width: 0;
      min-height: 0;
      overflow-y: auto;
      padding-right: 8px;

      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
      }
    }

    .section-card {
      background: #fff;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }

    .quick-nav-shell {
      display: none;
    }

    .comm-section {
      padding: 14px 18px 18px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border: 1px solid #e6eefc;
      box-shadow: 0 12px 28px rgba(37, 74, 151, 0.06);
    }

    .comm-info {
      display: flex;
      flex-direction: column;
      gap: 10px;
      font-size: 12px;
      color: #475569;
    }

    .comm-row {
      display: flex;
      align-items: center;
      gap: 12px;

      .label {
        font-weight: 600;
        color: #1f2937;
      }

      .value {
        font-weight: 600;
      }

      .carrier {
        color: #2563eb;
      }
    }

    .comm-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 24px;

      .grid-item {
        display: flex;
        gap: 6px;
        color: #475569;
      }

      .label {
        color: #6b7280;
      }

      .value {
        font-weight: 600;
        color: #1f2937;
      }
    }

    .comm-divider {
      border-top: 1px dashed #e2e8f0;
      margin: 12px 0;
    }

    .comm-chart-row {
      display: grid;
      grid-template-columns: 380px 1fr;
      gap: 18px;
      align-items: stretch;
    }

    .comm-chart-header,
    .trade-chart-header,
    .comm-top-header,
    .trade-top-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      min-height: 36px;
    }

    .trade-section {
      padding: 14px 18px 18px;
      background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
      border: 1px solid #eef0f5;
      box-shadow: 0 12px 28px rgba(59, 78, 122, 0.06);
    }

    .trade-summary {
      font-size: 12px;
      color: #475569;
    }

    .trade-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      align-items: center;

      .label {
        font-weight: 600;
        color: #1f2937;
      }

      .value {
        font-weight: 600;
      }
    }

    .trade-tag {
      background: #eef2ff;
      color: #2563eb;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 12px;
    }

    .trade-chart-row {
      display: grid;
      grid-template-columns: 380px 1fr;
      gap: 18px;
      align-items: stretch;
    }

    .trade-chart {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
      height: 100%;
    }

    .trade-kpi {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px 24px;
      font-size: 14px;
      color: #374151;

      .trade-kpi-item {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .trade-kpi-label {
        color: #374151;
      }

      .trade-kpi-value {
        font-weight: 600;
      }

      .down {
        color: #ff8a66;
      }

      .up {
        color: #2ac8a0;
      }
    }

    .legend-sub {
      margin-left: 18px;
      color: #64748b;
      font-size: 12px;
    }

    .bar.clickable {
      cursor: pointer;
    }

    .trade-top-echart {
      width: 100%;
      height: 320px;
    }

    .trade-section .chart-tools,
    .trade-section .trend-tools {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 12px;
      color: #64748b;

      .select-input {
        width: 120px;
      }

      .search-input {
        width: 300px;
        max-width: 100%;
      }

      .range-date-input {
        width: 260px;
      }
    }

    .trade-top-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
    }

    .trade-top-tools {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 14px;
      color: #1f2937;

      .tool-label {
        color: #1f2937;
        white-space: nowrap;
        font-weight: 500;
      }

      .metric-select {
        width: 118px;
      }

      .trade-top-range {
        width: 264px;
      }

      .metric-select,
      .trade-top-range {
        .ant-select-selector,
        &.ant-picker {
          border-radius: 12px;
          border-color: rgba(137, 153, 204, 0.22);
          background: rgba(255, 255, 255, 0.72);
          backdrop-filter: blur(12px);
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.82),
            0 10px 24px rgba(76, 88, 128, 0.08);
        }
      }
    }

    .comm-top-header {
      flex-wrap: wrap;

      .chart-title {
        font-size: 15px;
      }
    }

    .comm-top-tools {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 1;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 14px;
      color: #1f2937;

      .tool-label {
        color: #1f2937;
        white-space: nowrap;
        font-weight: 500;
      }

      .comm-top-range {
        width: 420px;
        max-width: 100%;

        &.ant-picker {
          border-radius: 12px;
          border-color: rgba(137, 153, 204, 0.22);
          background: rgba(255, 255, 255, 0.72);
          backdrop-filter: blur(12px);
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.82),
            0 10px 24px rgba(76, 88, 128, 0.08);
        }
      }
    }

    .trade-top-dimension {
      display: inline-flex;
      align-items: center;
      gap: 18px;

      .ant-radio-wrapper {
        margin-inline-end: 0;
        color: #3f4756;
      }
    }

    .visual-chart-surface {
      position: relative;
      display: flex;
      flex: 1;
      flex-direction: column;
      margin-top: 12px;
      border: 1px solid rgba(137, 153, 204, 0.18);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(14px);
      box-sizing: border-box;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 18px 36px rgba(42, 66, 118, 0.1);
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          radial-gradient(circle at top right, rgba(255, 255, 255, 0.76), transparent 32%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 24%);
      }

      &::after {
        content: '';
        position: absolute;
        width: 180px;
        height: 180px;
        top: -88px;
        right: -78px;
        border-radius: 50%;
        filter: blur(4px);
        opacity: 0.6;
        pointer-events: none;
      }
    }

    .visual-chart-surface > * {
      position: relative;
      z-index: 1;
    }

    .visual-chart-surface--comm {
      background: linear-gradient(
        145deg,
        rgba(241, 247, 255, 0.92) 0%,
        rgba(234, 246, 255, 0.8) 45%,
        rgba(255, 255, 255, 0.78) 100%
      );
      border-color: rgba(124, 165, 255, 0.2);

      &::after {
        background: radial-gradient(circle, rgba(102, 199, 255, 0.18) 0%, rgba(102, 199, 255, 0) 70%);
      }
    }

    .visual-chart-surface--trade {
      background: linear-gradient(
        145deg,
        rgba(255, 248, 242, 0.94) 0%,
        rgba(248, 244, 255, 0.82) 44%,
        rgba(255, 255, 255, 0.8) 100%
      );
      border-color: rgba(255, 181, 134, 0.2);

      &::after {
        background: radial-gradient(circle, rgba(255, 153, 102, 0.18) 0%, rgba(255, 153, 102, 0) 70%);
      }
    }

    .visual-chart-surface--ratio {
      min-height: 356px;
    }

    .visual-chart-surface--bar {
      min-height: 356px;
    }

    .visual-chart-surface--trend {
      min-height: 446px;
      padding: 18px 18px 16px;
    }

    .radio {
      padding: 2px 8px;
      border-radius: 999px;
      background: #f1f5f9;
      color: #64748b;
      cursor: pointer;

      &.active {
        background: #e0e7ff;
        color: #1d4ed8;
        font-weight: 600;
      }
    }

    .trade-trend {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .trade-trend-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px 20px;
      flex-wrap: wrap;
    }

    .trade-trend-heading {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }

    .trade-trend-subtitle {
      font-size: 13px;
      line-height: 1.6;
      color: #7b8797;
    }

    .trade-trend-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px 18px;
      padding: 16px 18px;
      border: 1px solid rgba(255, 198, 170, 0.58);
      border-radius: 20px;
      background:
        radial-gradient(circle at right top, rgba(255, 189, 143, 0.18), transparent 28%),
        linear-gradient(145deg, rgba(255, 251, 247, 0.96) 0%, rgba(255, 244, 238, 0.92) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 14px 28px rgba(255, 147, 106, 0.08);
    }

    .trade-trend-filters {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
      flex-wrap: wrap;
      gap: 10px;

      .tool-label {
        font-size: 13px;
        color: #374151;
        white-space: nowrap;
        font-weight: 500;
      }

      .trend-search-input {
        width: 220px;
      }

      .trend-range-input {
        width: 286px;
        max-width: 100%;
      }

      .trend-search-input {
        :deep(.ant-select-selector) {
          border-radius: 12px;
          border-color: rgba(174, 157, 196, 0.24);
          background: rgba(255, 255, 255, 0.82);
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            0 10px 24px rgba(132, 110, 144, 0.08);
        }
      }

      .trend-range-input {
        border-radius: 12px;
        border-color: rgba(174, 157, 196, 0.24);
        background: rgba(255, 255, 255, 0.82);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.9),
          0 10px 24px rgba(132, 110, 144, 0.08);
      }
    }

    .trade-trend-dimension {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.76);
      border: 1px solid rgba(255, 208, 184, 0.78);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);

      .radio {
        min-width: 38px;
        padding: 5px 12px;
        text-align: center;
        background: transparent;
      }
    }

    .trade-trend-chart-box {
      margin-top: 0;
    }

    .trade-top-chart-box {
      padding: 16px;
      height: 100%;
      box-sizing: border-box;
    }

    .comm-top-chart-box {
      padding: 16px;
      height: 100%;
      box-sizing: border-box;
    }

    .chart-more-link {
      margin-left: auto;
      height: 30px;
      padding: 0 12px;
      border: 1px solid rgba(133, 153, 197, 0.18);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.56);
      backdrop-filter: blur(12px);
      box-shadow: 0 8px 20px rgba(76, 88, 128, 0.08);
      font-size: 13px;
      color: #2a5fd6;
    }

    .chart-more-link.ant-btn-link {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      text-decoration: none;
    }

    .comm-top-echart {
      width: 100%;
      height: 300px;
    }

    .trend-chart-scroll {
      flex: 1;
      min-height: 0;
      width: 100%;
      overflow-x: auto;
      box-sizing: border-box;
      padding: 16px 4px 0;
    }

    .trend-chart {
      position: relative;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
    }

    .trend-echart {
      width: 100%;
      height: 100%;
      min-height: 340px;
    }

    .comm-chart-box {
      padding: 18px 16px;
      height: 100%;
      justify-content: center;
      box-sizing: border-box;
    }

    .comm-echart {
      width: 100%;
      height: 300px;
    }

    .chart-more-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 2;
    }

    .comm-chart {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
      height: 100%;
    }

    .chart-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      color: #1e293b;
      letter-spacing: 0.01em;

      .flag {
        width: 3px;
        height: 12px;
        background: linear-gradient(180deg, #64a8ff 0%, #2866ff 100%);
        border-radius: 999px;
        box-shadow: 0 0 0 3px rgba(100, 168, 255, 0.1);
      }
    }

    .trade-section {
      .chart-title {
        .flag {
          background: linear-gradient(180deg, #ffb069 0%, #ff7f50 100%);
          box-shadow: 0 0 0 3px rgba(255, 176, 105, 0.1);
        }
      }
    }

    .trend-title-row {
      .trend-legend-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: 0;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid rgba(255, 201, 177, 0.58);
        background: rgba(255, 255, 255, 0.72);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.9),
          0 10px 22px rgba(255, 150, 112, 0.08);
        cursor: pointer;
        font-weight: 500;
        transition:
          transform 0.2s ease,
          border-color 0.2s ease,
          box-shadow 0.2s ease,
          opacity 0.2s ease;

        &:hover {
          transform: translateY(-1px);
          border-color: rgba(255, 167, 128, 0.66);
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.92),
            0 12px 24px rgba(255, 146, 108, 0.12);
        }

        &.is-muted {
          opacity: 0.62;
          box-shadow: none;
        }
      }

      .circles {
        width: 10px;
        height: 10px;
        flex: 0 0 10px;
        border-radius: 50%;
        display: inline-block;
      }

      .circles-text {
        color: #3f4756;
        font-size: 13px;
      }
    }

    .chart-tools {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #64748b;

      .date-input {
        width: 120px;
      }
    }

    .donut-wrap {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .donut-legend {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
      gap: 18px;
      font-size: 14px;
      color: #1f2937;

      .legend-main {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
        line-height: 1.2;
      }

      .legend-title {
        color: #374151;
      }

      .legend-rate {
        font-weight: 500;
        color: #374151;
      }

      .legend-amount {
        padding-left: 24px;
        line-height: 1.3;
        color: #4b5563;
        word-break: break-all;
      }

      .dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        display: inline-block;
        flex: 0 0 16px;

        &.success {
          background: #2ac8a0;
        }

        &.warning {
          background: #ff8a66;
        }
      }
    }

    .trade-ratio-panel {
      padding: 18px 20px 16px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      height: 100%;
      justify-content: space-between;
      box-sizing: border-box;
    }

    .legend-click {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px 14px;
      border: 1px solid rgba(160, 171, 207, 0.18);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.44);
      backdrop-filter: blur(12px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 10px 20px rgba(74, 86, 120, 0.06);
      cursor: pointer;
      transition:
        opacity 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;

      &:hover {
        opacity: 0.92;
        border-color: rgba(120, 145, 215, 0.3);
        transform: translateY(-1px);
      }
    }

    .empty-state__title {
      font-size: 15px;
      line-height: 1.3;
      font-weight: 700;
      color: #526072;
      letter-spacing: 0.01em;
    }

    .empty-state__desc {
      display: none;
    }

    .chart-empty,
    .group-left .group-list .ant-list-empty-text,
    .member-list .ant-list-empty-text {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 24px 18px;
      box-sizing: border-box;
      text-align: center;
      font-size: 14px;
      line-height: 1.6;
      color: #8ea0b2;
      border: 1px dashed rgba(183, 202, 234, 0.72);
      border-radius: 20px;
      background:
        radial-gradient(circle at top right, rgba(119, 177, 255, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(251, 253, 255, 0.96) 0%, rgba(243, 247, 255, 0.92) 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
      overflow: hidden;

      &::before {
        content: '';
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
        border-radius: 18px;
        border: 1px solid rgba(187, 208, 247, 0.82);
        background:
          radial-gradient(circle at 50% 16px, #5b8ff9 0 5px, transparent 6px),
          linear-gradient(#d5e3ff 0 0) center 35px / 28px 3px no-repeat,
          linear-gradient(180deg, #76a9ff 0%, #4f7cff 100%) 18px 31px / 6px 12px no-repeat,
          linear-gradient(180deg, #8fc6ff 0%, #60a5fa 100%) 27px 26px / 6px 17px no-repeat,
          linear-gradient(180deg, #c4b5fd 0%, #93c5fd 100%) 36px 22px / 6px 21px no-repeat,
          linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(237, 245, 255, 0.92) 100%);
        background-repeat: no-repeat;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.92),
          0 14px 24px rgba(59, 130, 246, 0.1);
      }
    }

    .chart-empty {
      min-height: 156px;
      margin-top: 8px;
    }

    .trade-trend-empty {
      min-height: 446px;
      margin-top: 0;
      border-radius: 22px;
      border-color: rgba(255, 198, 170, 0.58);
      background:
        radial-gradient(circle at right top, rgba(255, 188, 143, 0.18), transparent 28%),
        linear-gradient(145deg, rgba(255, 251, 247, 0.96) 0%, rgba(255, 245, 240, 0.92) 100%);
      color: #94a3b8;

      &::before {
        border-color: rgba(255, 205, 177, 0.9);
        background:
          radial-gradient(circle at 50% 16px, #ff9a66 0 5px, transparent 6px),
          linear-gradient(#ffe2d1 0 0) center 35px / 28px 3px no-repeat,
          linear-gradient(180deg, #ffba74 0%, #ff8b66 100%) 18px 31px / 6px 12px no-repeat,
          linear-gradient(180deg, #ffd28f 0%, #ffba74 100%) 27px 26px / 6px 17px no-repeat,
          linear-gradient(180deg, #fdc7d7 0%, #ffbe86 100%) 36px 22px / 6px 21px no-repeat,
          linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 247, 240, 0.92) 100%);
        background-repeat: no-repeat;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.92),
          0 14px 24px rgba(255, 153, 102, 0.12);
      }
    }

    .station-list {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .station-item {
      background: #f8fafc;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 12px;
      color: #475569;
    }

    .trade-ratio-echart {
      width: 180px;
      height: 180px;
      flex: 0 0 180px;
    }

    .donut.trade {
      background: conic-gradient(#22c55e 0 9.7591%, #f97316 9.7591% 100%);
    }

    .station-row {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 12px;
      color: #1f2937;
      margin-bottom: 8px;
    }

    .section-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px 18px;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(221, 230, 244, 0.92);
    }

    .section-title {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.2;
      color: #0f172a;
      letter-spacing: 0.02em;

      &::before {
        content: '';
        width: 4px;
        height: 16px;
        border-radius: 999px;
        background: linear-gradient(180deg, #68abff 0%, #2f7df6 100%);
        box-shadow: 0 0 0 3px rgba(104, 171, 255, 0.12);
      }
    }

    .section-tools {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 12px;
      margin-left: auto;
    }

    .section-action {
      padding: 0 14px;
      color: #2563eb;
      font-weight: 600;
    }

    .section-action.ant-btn-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      border: 1px solid rgba(191, 203, 228, 0.74);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.82);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 22px rgba(76, 88, 128, 0.06);
      text-decoration: none;

      &:hover {
        border-color: rgba(147, 197, 253, 0.92);
        background: #eff6ff;
        color: #1d4ed8;
      }
    }

    .basic-content {
      display: grid;
      grid-template-columns: 108px minmax(0, 1fr);
      gap: 10px;
    }

    .basic-profile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 8px 6px;
      border: 1px solid #eef2f7;
      border-radius: 10px;
      background: #fafafa;
    }

    .profile-avatar {
      display: flex;
    }

    .profile-name {
      font-size: 13px;
      font-weight: 600;
      color: #1f2937;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
    }

    .info-item {
      font-size: 13px;
      color: #334155;
      display: flex;
      align-items: flex-start;
      gap: 2px;
      min-width: 0;
      min-height: 40px;
      padding: 6px 8px;
      border: 1px solid #eef2f7;
      border-radius: 10px;
      background: #fafafa;
      flex-direction: column;
    }

    .info-label {
      color: #64748b;
      font-size: 12px;
      line-height: 16px;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .info-value {
      min-width: 0;
      white-space: normal;
      word-break: break-all;
      overflow-wrap: anywhere;
      line-height: 16px;
    }

    .relation-search {
      width: 220px;
      border-radius: 8px;
    }

    .relation-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 16px;
    }

    .relation-card {
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
    }

    .relation-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #e0e7ff;
      color: #1d4ed8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    }

    .relation-main {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .relation-name {
      font-weight: 600;
      color: #1f2937;
    }

    .relation-score {
      font-size: 13px;
      color: #64748b;

      span {
        color: #1d4ed8;
        font-weight: 600;
      }
    }

    .relation-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .tag {
      padding: 2px 6px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #475569;
      font-size: 12px;
    }

    .relation-action {
      padding: 0;
      align-self: flex-end;
      color: #3b82f6;
    }
  }

  .quick-nav {
    position: absolute;
    top: 66px;
    right: 0;
    width: 84px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    z-index: 20;

    .nav-item {
      font-size: 12px;
      color: #475569;
      padding: 6px 12px;
      text-align: center;
      cursor: pointer;

      &.active {
        color: #2563eb;
        font-weight: 600;
      }
    }
  }

  .portrait-modal-title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .portrait-modal-title {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: #111827;
  }

  .portrait-modal-subtitle {
    font-size: 12px;
    line-height: 1.6;
    color: #6b7280;
  }

  :deep(.object-group-modal .ant-modal) {
    width: 960px !important;
    max-width: calc(100vw - 40px);
  }

  :deep(.object-group-modal .ant-modal-content) {
    max-height: 640px;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
  }

  :deep(.object-group-modal .ant-modal-header) {
    flex: 0 0 auto;
    padding: 16px 18px;
    border-bottom: 1px solid #e5e7eb;
    background: @modal-header-bg-color;
  }

  :deep(.object-group-modal .ant-modal-title) {
    color: inherit;
  }

  :deep(.object-group-modal .ant-modal-close) {
    top: 16px;
    right: 18px;
    color: #64748b;
  }

  :deep(.object-group-modal .ant-modal-close-x) {
    width: 36px;
    height: 36px;
  }

  :deep(.object-group-modal .ant-modal-body) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px 18px;
    background: #fff;
  }

  :deep(.object-group-modal .ant-modal-body::-webkit-scrollbar) {
    width: 6px;
  }

  :deep(.object-group-modal .ant-modal-body::-webkit-scrollbar-thumb) {
    background: #cbd5e1;
    border-radius: 999px;
  }

  .group-modal-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

  .group-modal-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fafafa;
  }

  .group-modal-actions__info {
    margin-right: auto;
    font-size: 12px;
    line-height: 1.6;
    color: #6b7280;
  }

  .group-modal-actions__buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .group-modal-actions .head-btn {
    min-width: 112px;
    height: 40px;
    border-radius: 12px;
    padding: 0 22px;
    border: 1px solid #d6deea;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;

    > span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
  }

  .group-modal-actions .head-btn:hover,
  .group-modal-actions .head-btn:focus {
    border-color: #c4cfdd;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
    color: #111827;
  }

  .group-modal-actions .head-btn--primary,
  .group-modal-actions .head-btn--accent {
    color: #1f2937;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-color: #d6deea;
  }

  .group-modal-actions .head-btn--danger {
    color: #1f2937;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-color: #d6deea;
  }

  .group-modal-main {
    display: grid;
    grid-template-columns: 308px minmax(0, 1fr);
    gap: 14px;
    height: min(500px, calc(100vh - 240px));
    min-height: 400px;
  }

  .group-left,
  .group-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe6ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
  }

  .group-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #eef2f7;
  }

  .group-panel-head--right {
    padding-bottom: 10px;
  }

  .group-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
  }

  .group-panel-title-wrap {
    min-width: 0;
  }

  .group-panel-subtitle {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
  }

  .group-panel-badge {
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
  }

  .group-left {
    padding: 0;
  }

  .group-left .group-list .ant-list-item {
    padding: 0;
    border: 0;
  }

  .group-left .group-list .ant-list-item + .ant-list-item {
    margin-top: 8px;
  }

  .group-left .group-list {
    flex: 1;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
  }

  .group-left .group-list .ant-list-empty-text {
    min-height: 164px;
  }

  .group-select-btn {
    min-height: 44px;
    height: 44px;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 42px;
    box-shadow: none;
  }

  .group-select-btn > span {
    display: block;
    width: 100%;
    height: 42px;
    line-height: 42px;
  }

  .group-select-btn__name {
    display: block;
    width: 100%;
    height: 42px;
    line-height: 42px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-weight: 600;
  }

  .group-select-btn.ant-btn-default {
    border-color: #d7dee8;
    color: #111827;
    background: #fff;
  }

  .group-select-btn.ant-btn-default:hover {
    border-color: #c7d1dd;
    color: #1f2937;
    background: #fafafa;
  }

  .group-select-btn.ant-btn-primary {
    border-color: #4665eb;
    background: linear-gradient(180deg, #4b68f3 0%, #3f5de6 100%);
    color: #fff;
    box-shadow: 0 8px 18px rgba(63, 93, 230, 0.18);
  }

  .group-right {
    padding: 0 14px 14px;
  }

  .member-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-top: 12px;
    padding-right: 4px;
  }

  .member-list .ant-list-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .member-list .ant-list-item {
    padding: 14px 16px;
    border: 1px solid #edf1f5;
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .member-list .ant-list-empty-text {
    min-height: 188px;
  }

  .member-list .ant-list-item-meta {
    align-items: center;
  }

  .member-list .ant-list-item-meta-title {
    margin-bottom: 2px;
  }

  .member-list .ant-list-item-action {
    margin-left: 18px;
  }

  .member-list .ant-list-item-action > li {
    padding: 0 0 0 10px;
  }

  .member-avatar-icon {
    background: #b7b7b7;
    color: #fff;
    box-shadow: none;
  }

  .member-avatar-icon svg {
    width: 18px;
    height: 18px;
  }

  .member-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .member-name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
  }

  .member-main-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
  }

  .member-desc {
    font-size: 12px;
    color: #6b7280;
  }

  .member-main-btn,
  .member-remove-btn {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
    text-decoration: none;
  }

  .member-main-btn {
    color: #2563eb;

    &:hover {
      color: #1d4ed8;
      background: transparent;
      border-color: transparent;
    }

    &.ant-btn-link:disabled,
    &.ant-btn-link.ant-btn-disabled,
    &.ant-btn-link[disabled] {
      color: #9ca3af;
      cursor: not-allowed;
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }
  }

  .member-remove-btn {
    color: #2563eb;

    &:hover {
      color: #1d4ed8;
      background: transparent;
      border-color: transparent;
    }
  }

  @media (max-width: 960px) {
    :deep(.object-group-modal .ant-modal) {
      max-width: calc(100vw - 24px);
    }

    :deep(.object-group-modal .ant-modal-body) {
      padding: 20px;
    }

    .group-modal-actions {
      align-items: flex-start;
    }

    .group-modal-actions__info {
      margin-right: 0;
    }

    .group-modal-actions__buttons {
      width: 100%;
    }

    .group-modal-main {
      grid-template-columns: minmax(0, 1fr);
    }

    .group-left .group-list {
      max-height: 220px;
    }

    .member-list .ant-list-item {
      flex-wrap: wrap;
      gap: 12px;
    }

    .member-list .ant-list-item-action {
      margin-left: 0;
    }

    .member-list .ant-list-item-action > li {
      padding-left: 0;
    }

    .create-group-modal {
      .ant-modal {
        max-width: calc(100vw - 24px);
      }

      .ant-modal-body {
        padding: 20px;
      }

      .create-group-section {
        padding: 16px 16px 4px;
      }
    }
  }

  .dynamic-input-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .dynamic-input-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    .ant-form-item {
      flex: 1;
      min-width: 0;
      margin-bottom: 0;
    }

    .remove-btn,
    .add-btn {
      width: 36px;
      height: 36px;
      min-width: 36px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      border: 1px solid #dbe5f5;
      background: rgba(255, 255, 255, 0.86);
      color: #64748b;
      margin-top: 2px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 8px 18px rgba(95, 108, 143, 0.08);

      &:hover {
        color: #3b82f6;
        background: #eff6ff;
        border-color: #bfdbfe;
      }
    }

    .remove-btn:hover {
      color: #ef4444;
      background: #fef2f2;
      border-color: #fecaca;
    }
  }

  .person-card-popover {
    .ant-popover-inner {
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
      padding: 0;
    }

    .ant-popover-inner-content {
      padding: 6px 0;
    }

    .avatar-pop-content {
      min-width: 86px;
    }

    .edit-item {
      padding: 8px 14px;
      font-size: 14px;
      line-height: 1;
      color: #334155;
      cursor: pointer;
      transition: all 0.2s ease;
      user-select: none;

      &:hover {
        background: #f1f5f9;
        color: #1d4ed8;
      }

      &.delete {
        color: #ef4444;

        &:hover {
          background: #fff1f2;
          color: #dc2626;
        }
      }
    }
  }

  .create-group-modal {
    .ant-modal-content {
      max-height: 720px;
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
      border-radius: 14px;
      background: linear-gradient(180deg, #f8fbff 0%, #ffffff 78%);
      box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
    }

    .ant-modal-header {
      flex: 0 0 auto;
      padding: 20px;
      border-bottom: 1px solid #e5e7eb;
      background: @modal-header-bg-color;
    }

    .ant-modal-title {
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      color: #111827;
    }

    .ant-modal-close {
      top: 14px;
      right: 16px;
      color: #64748b;
      border-radius: 8px;
      transition: background-color 0.2s ease;
    }

    .ant-modal-close:hover {
      background: rgba(37, 99, 235, 0.08);
    }

    .ant-modal-close-x {
      width: 36px;
      height: 36px;
    }

    .ant-modal-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 20px;
    }

    .ant-modal-body::-webkit-scrollbar {
      width: 6px;
    }

    .ant-modal-body::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 3px;
    }

    .ant-modal-footer {
      flex: 0 0 auto;
      margin: 0;
      padding: 20px;
      border-top: 1px solid #e5e7eb;
      background: #fff;
    }

    .create-group-form {
      display: flex;
      flex-direction: column;
      gap: 14px;

      .ant-form-item {
        margin-bottom: 10px;
      }

      .ant-form-item-label > label {
        color: #374151;
        font-weight: 600;
      }

      .ant-input,
      .ant-select-selector,
      .ant-input-affix-wrapper {
        height: 42px;
        border-radius: 8px;
        border-color: #dbe2ea;
        background: #fff;
        box-shadow: none;
        transition:
          border-color 0.2s ease,
          box-shadow 0.2s ease,
          background 0.2s ease;
      }

      .ant-select-single .ant-select-selector {
        display: flex;
        align-items: center;
      }

      .ant-select-single .ant-select-selector .ant-select-selection-item,
      .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
        line-height: 40px;
      }

      .ant-input-textarea textarea {
        min-height: 108px;
        border-radius: 8px;
        border-color: #dbe2ea;
        background: #fff;
        box-shadow: none;
        resize: none;
      }

      .ant-input:focus,
      .ant-input-focused,
      .ant-select-focused .ant-select-selector,
      .ant-select-open .ant-select-selector,
      .ant-input-affix-wrapper-focused,
      .ant-input-textarea textarea:focus {
        border-color: #1677ff;
        box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
        background: #fff;
      }
    }

    .create-group-section {
      padding: 16px 16px 4px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    }

    .create-group-section__head {
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eef2f7;
    }

    .create-group-section__title {
      font-size: 15px;
      line-height: 1.3;
      color: #111827;
      font-weight: 700;
    }

    .create-group-section__desc {
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.5;
      color: #64748b;
    }
  }

  .add-group-person-modal {
    .ant-modal {
      max-width: calc(100vw - 24px);
    }

    .ant-modal-content {
      max-height: min(760px, calc(100vh - 32px));
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
      border-radius: 14px;
      background: linear-gradient(180deg, #f8fbff 0%, #ffffff 78%);
      box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
    }

    .ant-modal-header {
      flex: 0 0 auto;
      padding: 20px;
      border-bottom: 1px solid #e5e7eb;
      background: @modal-header-bg-color;
    }

    .ant-modal-title {
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      color: #111827;
    }

    .ant-modal-close {
      top: 14px;
      right: 16px;
      color: #64748b;
      border-radius: 8px;
      transition: background-color 0.2s ease;
    }

    .ant-modal-close:hover {
      background: rgba(37, 99, 235, 0.08);
    }

    .ant-modal-close-x {
      width: 36px;
      height: 36px;
    }

    .ant-modal-body {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
      padding: 20px;
      overflow: hidden;
    }

    .ant-modal-footer {
      flex: 0 0 auto;
      margin: 0;
      padding: 20px;
      border-top: 1px solid #e5e7eb;
      background: #fff;
    }
  }

  .add-object-modal {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 14px;
    min-height: 0;
    overflow: hidden;
  }

  .add-object-modal__search {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);

    .ant-input,
    .ant-input-affix-wrapper {
      border-radius: 8px;
    }
  }

  .add-object-modal__search-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .add-object-modal__title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
  }

  .add-object-modal__desc,
  .add-object-modal__stats {
    font-size: 12px;
    line-height: 1.6;
    color: #64748b;
  }

  .add-object-modal__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0 2px 2px;
  }

  .add-object-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    padding-bottom: 2px;
  }

  .add-object-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;

    & + .add-object-item {
      margin-top: 10px;
    }

    &:hover {
      border-color: #cbd5e1;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    }

    &.is-selected {
      border-color: #93c5fd;
      background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
      box-shadow: 0 10px 22px rgba(59, 130, 246, 0.08);
    }

    &.is-disabled {
      cursor: not-allowed;
      opacity: 0.72;
      background: #f8fafc;
    }
  }

  .add-object-item__avatar {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #e0ecff 0%, #c7dbff 100%);
    color: #3157d5;
    font-weight: 700;
  }

  .add-object-item__body {
    flex: 1;
    min-width: 0;
  }

  .add-object-item__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .add-object-item__name {
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .add-object-item__tag {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 12px;
    line-height: 20px;
  }

  .add-object-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.7;
    color: #64748b;
  }

  .add-object-modal__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    border: 1px dashed #d7dee8;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    color: #94a3b8;
    font-size: 14px;
  }

  .person-edit-modal {
    .ant-modal-content {
      max-height: 720px;
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
      border-radius: 14px;
      background: linear-gradient(180deg, #f8fbff 0%, #ffffff 78%);
      box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
    }

    .ant-modal-header {
      flex: 0 0 auto;
      padding: 20px;
      border-bottom: 1px solid #e5e7eb;
      background: @modal-header-bg-color;
    }

    .ant-modal-title {
      color: inherit;
    }

    .ant-modal-close {
      top: 14px;
      right: 16px;
      color: #64748b;
      border-radius: 8px;
      transition: background-color 0.2s ease;
    }

    .ant-modal-close:hover {
      background: rgba(37, 99, 235, 0.08);
    }

    .ant-modal-close-x {
      width: 36px;
      height: 36px;
    }

    .ant-modal-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 20px;
    }

    .ant-modal-body::-webkit-scrollbar {
      width: 6px;
    }

    .ant-modal-body::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 3px;
    }

    .ant-modal-footer {
      flex: 0 0 auto;
      margin: 0;
      padding: 20px;
      border-top: 1px solid #e5e7eb;
      background: #fff;
    }

    .person-form {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .person-form-section {
      padding: 16px 16px 4px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    }

    .form-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eef2f7;
    }

    .form-section-title {
      font-size: 15px;
      line-height: 1.3;
      color: #111827;
      font-weight: 700;
    }

    .form-section-desc {
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.5;
      color: #6b7280;
    }

    .person-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 16px;
      row-gap: 6px;
    }

    .form-item-span-2 {
      grid-column: 1 / -1;
    }

    .person-form-grid .ant-form-item {
      margin-bottom: 10px;
    }

    .person-form-grid .ant-form-item-label > label {
      font-size: 13px;
      font-weight: 600;
      color: #374151;
    }

    .person-form-grid .ant-form-item .ant-input,
    .person-form-grid .ant-form-item .ant-input-affix-wrapper,
    .person-form-grid .ant-form-item .ant-picker {
      width: 100%;
      height: 42px;
      border-radius: 8px;
      border-color: #dbe2ea;
      background: #fff;
      box-shadow: none;
      transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
    }

    .person-form-grid .ant-form-item .ant-input:focus,
    .person-form-grid .ant-form-item .ant-input-focused,
    .person-form-grid .ant-form-item .ant-input-affix-wrapper-focused,
    .person-form-grid .ant-form-item .ant-picker-focused {
      border-color: #1677ff;
      box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
      background: #fff;
    }

    .person-form-grid .ant-form-item .ant-select {
      width: 100%;
    }

    .person-form-grid .ant-form-item .ant-select-selector {
      height: 42px;
      border-radius: 8px;
      border-color: #dbe2ea;
      background: #fff;
      box-shadow: none;
      transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
    }

    .person-form-grid .ant-form-item .ant-select-focused .ant-select-selector,
    .person-form-grid .ant-form-item .ant-select-open .ant-select-selector {
      border-color: #1677ff;
      box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
      background: #fff;
    }

    .person-form-grid .ant-form-item .ant-select-single .ant-select-selector .ant-select-selection-item,
    .person-form-grid .ant-form-item .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
      line-height: 40px;
    }

    .person-form-grid .dynamic-input-list {
      gap: 12px;
    }

    .person-avatar-form-item {
      margin-bottom: 12px;
    }

    .person-avatar-upload {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 16px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }

    .person-avatar-upload__input {
      display: none;
      width: 0;
      height: 0;
      opacity: 0;
      pointer-events: none;
    }

    .person-avatar-upload__preview {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .person-avatar-upload__preview :deep(.jeesite-person-avatar) {
      border-radius: 999px;
      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    }

    .person-avatar-upload__preview:hover :deep(.jeesite-person-avatar) {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    }

    .person-avatar-upload__tips {
      min-width: 0;
      flex: 1 1 auto;
    }

    .person-avatar-upload__title {
      font-size: 14px;
      line-height: 22px;
      font-weight: 600;
      color: #111827;
    }

    .person-avatar-upload__desc {
      margin-top: 4px;
      font-size: 12px;
      line-height: 20px;
      color: #6b7280;
    }

    .person-avatar-upload__actions {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    .person-form-grid .dynamic-input-item {
      padding: 12px 12px 10px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background: #fff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    .person-form-grid .dynamic-input-item .ant-form-item {
      margin-bottom: 0;
    }

    .person-form-grid .dynamic-input-item .ant-form-item-explain {
      margin-top: 6px;
    }

    .person-form-grid .dynamic-input-item .add-btn,
    .person-form-grid .dynamic-input-item .remove-btn {
      width: 32px;
      height: 32px;
      min-width: 32px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      border: 1px solid #dbe2ea;
      background: #fff;
      color: #475569;
      margin-top: 4px;
      box-shadow: none;
    }

    .person-form-grid .dynamic-input-item .add-btn:hover {
      color: #2563eb;
      border-color: #bfdbfe;
      background: #eff6ff;
    }

    .person-form-grid .dynamic-input-item .remove-btn:hover {
      color: #dc2626;
      border-color: #fecaca;
      background: #fff1f2;
    }
  }

  @media (max-width: 1200px) {
    .person-edit-modal {
      .ant-modal-body {
        padding: 20px;
      }

      .person-form-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .form-item-span-2 {
        grid-column: auto;
      }

      .person-avatar-upload {
        align-items: flex-start;
        flex-direction: column;
      }
    }
  }

  .call-oper-phone-modal {
    .query-table-wrap {
      gap: 14px;
    }

    .query-table-search {
      margin: 6px 6px 0;
      padding: 14px 16px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);

      .label {
        color: #475569;
        font-size: 12px;
        font-weight: 600;
      }

      .ant-input,
      .ant-input-affix-wrapper,
      .ant-picker,
      .ant-select-selector {
        border-radius: 8px !important;
      }

      .ant-btn {
        height: 32px;
        padding: 0 16px;
        border-radius: 8px;
      }
    }

    .ant-modal-body > .scroll-container,
    .ant-modal-body > .scroll-container > .scrollbar__wrap,
    .ant-modal-body > .scroll-container > .scrollbar__wrap > .scrollbar__view,
    .ant-modal-body > .scroll-container > .scrollbar__wrap > .scrollbar__view > div {
      height: 100%;
      min-height: 0;
    }

    .ant-modal-body > .scroll-container > .scrollbar__wrap {
      overflow: hidden;
    }

    .ant-modal-body > .scroll-container > .scrollbar__wrap > .scrollbar__view {
      margin: 0 !important;
    }

    .ant-modal-body > .scroll-container > .scrollbar__bar.is-vertical,
    .ant-modal-body > .scroll-container > .is-vertical {
      display: none !important;
      opacity: 0 !important;
      pointer-events: none;
    }
  }

  .@{prefix-cls}.case-portrait-page {
    background: #fff;
    // padding: 0 8px 2px;
    display: flex;
    flex-direction: column;
    min-height: 0;

    :deep(.ant-btn) {
      border-radius: 8px;
    }

    :deep(.ant-btn-primary) {
      box-shadow: none;
    }

    :deep(.ant-input),
    :deep(.ant-input-affix-wrapper),
    :deep(.ant-picker),
    :deep(.ant-select-selector) {
      border-color: #dbe2ea;
      border-radius: 8px;
      background: #fff;
      box-shadow: none;
    }

    :deep(.ant-input:hover),
    :deep(.ant-input-affix-wrapper:hover),
    :deep(.ant-picker:hover),
    :deep(.ant-select:not(.ant-select-disabled):hover .ant-select-selector) {
      border-color: #cbd5e1;
    }

    :deep(.ant-input:focus),
    :deep(.ant-input-focused),
    :deep(.ant-input-affix-wrapper-focused),
    :deep(.ant-picker-focused),
    :deep(.ant-select-focused .ant-select-selector),
    :deep(.ant-select-open .ant-select-selector) {
      border-color: #1677ff;
      box-shadow: 0 0 0 2px rgb(22 119 255 / 12%);
    }

    .page-main {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      height: auto;
      gap: 12px;
      padding: 0;
      overflow: hidden;
    }

    .page-layout {
      flex: 1 1 auto;
      min-height: 0;
      height: auto;
      align-items: stretch;
      grid-template-columns: 156px minmax(0, 1fr);
      gap: 2px;
      padding: 2px;
      background: #f3f4f6;
      overflow: hidden;
      box-sizing: border-box;
    }

    .left-panel {
      position: relative;
      top: auto;
      align-self: stretch;
      display: flex;
      height: auto;
      max-height: none;
      min-height: 0;
      overflow: hidden;
    }

    .left-panel .panel-card {
      flex: 1 1 auto;
      width: 100%;
      height: auto;
      min-height: 0;
      max-height: 100%;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px;
      gap: 8px;
      box-shadow: none;
    }

    .left-panel .panel-card::before,
    .person-list::before,
    .person-card::before,
    .person-card::after,
    .person-avatar-wrap::before {
      display: none;
    }

    .panel-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 0 4px 2px;
    }

    .panel-heading__title {
      font-size: 14px;
      font-weight: 600;
      color: #111827;
    }

    .panel-heading__badge {
      min-width: 28px;
      height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #eff6ff;
      color: #1d4ed8;
      font-size: 12px;
      font-weight: 600;
    }

    .search-box :deep(.ant-input),
    .search-box :deep(.ant-input-affix-wrapper) {
      height: 34px;
      padding-inline: 10px;
      border-radius: 8px;
      background: #fff;
    }

    .search-box :deep(.ant-input-affix-wrapper) {
      display: flex;
      align-items: center;
      overflow: hidden;
      box-sizing: border-box;
    }

    .search-box :deep(.ant-input-affix-wrapper > .ant-input) {
      height: 100%;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .search-box :deep(.ant-input-affix-wrapper .ant-input-suffix),
    .search-box :deep(.ant-input-affix-wrapper .ant-input-clear-icon) {
      display: inline-flex;
      align-items: center;
    }

    .left-panel .panel-card .side-action-btn.ant-btn {
      height: 34px;
      border-radius: 8px;
      font-weight: 600;
      letter-spacing: normal;
      box-shadow: none;
      transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
    }

    .left-panel .panel-card .side-action-btn--primary.ant-btn {
      border-color: #2a50ec;
      background: #2a50ec;
      color: #fff;

      &:hover,
      &:focus {
        border-color: #4b6bf0;
        background: #4b6bf0;
        color: #fff;
      }

      &:active {
        border-color: #1e3ed0;
        background: #1e3ed0;
        color: #fff;
      }
    }

    .person-list {
      flex: 1 1 auto;
      min-height: 0;
      align-items: stretch;
      gap: 8px;
      padding: 2px 0 0;
    }

    .person-list .empty-tip {
      width: 100%;
      min-height: 148px;
      padding: 0;
      gap: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .person-list .empty-tip::before {
      content: none;
      display: none;
    }

    .person-card {
      width: 100%;
      max-width: none;
      min-height: 0;
      padding: 8px 10px;
      border: 1px solid #eef2f7;
      border-radius: 10px;
      background: #fff;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;

      &:hover {
        transform: none;
        background: #fff;
        border-color: #91caff;
        box-shadow: none;
      }

      &.active {
        transform: none;
        background: rgba(247, 251, 255, 0.72);
        border-color: #1677ff;
        box-shadow: none;
      }
    }

    .person-card:hover .person-avatar .jeesite-person-avatar__media,
    .person-card.active .person-avatar .jeesite-person-avatar__media {
      background: #1677ff;
      border-color: #bfdbfe;
      box-shadow: none;
    }

    .person-card:hover .person-name,
    .person-card.active .person-name {
      color: #111827;
      font-weight: 600;
    }

    .person-avatar-wrap {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      transform: none;
    }

    .person-trigger {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      min-width: 0;
      cursor: pointer;
    }

    .person-avatar {
      background: transparent;
      box-shadow: none;
    }

    .person-name {
      flex: 1;
      min-width: 0;
      max-width: none;
      min-height: auto;
      font-size: 13px;
      line-height: 20px;
      text-align: left;
      color: #374151;
      letter-spacing: 0;
    }

    .left-panel .panel-card .group-btn-wrap {
      margin-top: auto;
      flex-shrink: 0;
      padding-top: 8px;
      padding-bottom: 2px;
      border-top: 1px solid #eef2f7;
      background: #fff;
      position: relative;
      z-index: 2;
    }

    .left-panel .panel-card .group-btn-wrap .group-btn.ant-btn {
      width: 100%;
      border-color: #dbe2ea;
      background: #fff;
      color: #1677ff;

      &:hover,
      &:focus {
        border-color: #bfdbfe;
        background: #f8fbff;
        color: #1d4ed8;
      }

      &:active {
        border-color: #91caff;
        background: #e6f4ff;
        color: #0958d9;
      }
    }

    .right-panel {
      min-height: 0;
      height: auto;
      gap: 2px;
      padding-right: 0;
      background: #f3f4f6;
    }

    .right-panel::-webkit-scrollbar-thumb {
      background: #d1d5db;
    }

    .section-card,
    .comm-section,
    .trade-section {
      padding: 16px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #fff;
      box-shadow: none;
    }

    .section-header {
      margin-bottom: 16px;
      padding-bottom: 12px;
      gap: 12px 16px;
      border-bottom: 1px solid #eef2f7;
    }

    .section-title {
      gap: 8px;
      font-size: 16px;
      font-weight: 600;
      color: #111827;
      letter-spacing: 0;

      &::before {
        width: 3px;
        height: 14px;
        background: #1677ff;
        box-shadow: none;
      }
    }

    .section-tools {
      gap: 8px;
    }

    .section-action {
      padding: 0 12px;
      color: #1677ff;
      font-weight: 500;
    }

    .section-action.ant-btn-link {
      height: 32px;
      border: 1px solid #dbe2ea;
      border-radius: 8px;
      background: #fff;
      box-shadow: none;

      &:hover {
        border-color: #bfdbfe;
        background: #f9fafb;
        color: #0958d9;
      }
    }

    .basic-content {
      grid-template-columns: 108px minmax(0, 1fr);
      gap: 10px;
    }

    .basic-profile {
      gap: 4px;
      padding: 8px 6px;
      border: 1px solid #eef2f7;
      border-radius: 10px;
      background: #fafafa;
      justify-content: center;
    }

    .profile-avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #1677ff;
      box-shadow: none;
      font-size: 22px;
    }

    .profile-name {
      color: #111827;
      font-size: 13px;
    }

    .info-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
    }

    .info-item {
      gap: 2px;
      min-height: 40px;
      padding: 6px 8px;
      border: 1px solid #eef2f7;
      border-radius: 10px;
      background: #fafafa;
      flex-direction: column;
    }

    .info-label {
      font-size: 12px;
      color: #6b7280;
      line-height: 16px;
    }

    .info-value {
      color: #111827;
      font-size: 13px;
      line-height: 16px;
    }

    .relation-search {
      width: 240px;
      max-width: 100%;
    }

    .relation-list {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 12px;
    }

    .relation-card {
      gap: 12px;
      padding: 14px;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      box-shadow: none;
      transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

      &:hover {
        border-color: #bfdbfe;
        box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
      }
    }

    .relation-avatar {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: #eff6ff;
      color: #1677ff;
    }

    .relation-name {
      font-size: 14px;
      color: #111827;
    }

    .relation-score {
      font-size: 12px;
      color: #6b7280;

      span {
        color: #1677ff;
      }
    }

    .relation-tags {
      gap: 8px;
    }

    .tag {
      padding: 4px 8px;
      border-radius: 999px;
      background: #f3f4f6;
      color: #4b5563;
      font-size: 12px;
    }

    .relation-action {
      align-self: flex-start;
      color: #1677ff;
      font-weight: 500;
    }

    .comm-info,
    .trade-summary {
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 13px;
      color: #4b5563;
    }

    .comm-row,
    .trade-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 12px;
      padding: 10px 12px;
      border: 1px solid #eef2f7;
      border-radius: 10px;
      background: #fafafa;
    }

    .comm-row .label,
    .trade-row .label {
      color: #374151;
      font-weight: 600;
    }

    .comm-row .value,
    .trade-row .value {
      color: #111827;
      font-weight: 600;
    }

    .comm-row .carrier {
      display: inline-flex;
      align-items: center;
      height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      background: #eff6ff;
      color: #1677ff;
      font-size: 12px;
    }

    .comm-row .carrier--link {
      border: none;
      cursor: pointer;
      transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
    }

    .comm-row .carrier--link:hover {
      background: #dbeafe;
      color: #145bdb;
      box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.12);
    }

    .trade-tag {
      display: inline-flex;
      align-items: center;
      height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      border: none;
      background: #eff6ff;
      color: #1677ff;
      font-size: 12px;
    }

    .trade-tag--link {
      cursor: pointer;
      transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
    }

    .trade-tag--link:hover {
      background: #eff6ff;
      color: #1677ff;
      box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.12);
    }

    .comm-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 12px;
    }

    .comm-summary-card {
      padding: 10px 12px;
      border: 1px solid #eef2f7;
      border-radius: 10px;
      background: #fafafa;
    }

    .comm-grid .grid-item {
      gap: 6px;
      min-width: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      flex-direction: column;
    }

    .comm-grid .label {
      font-size: 12px;
      color: #6b7280;
    }

    .comm-grid .value {
      color: #111827;
      font-weight: 600;
    }

    .comm-divider {
      margin: 16px 0;
      border-top: 1px solid #eef2f7;
    }

    .comm-chart-row,
    .trade-chart-row {
      grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1fr);
      gap: 12px;
    }

    .comm-chart,
    .trade-chart,
    .trade-trend {
      gap: 12px;
    }

    .chart-title {
      gap: 8px;
      font-size: 14px;
      color: #111827;

      .flag {
        width: 3px;
        height: 12px;
        background: #1677ff;
        box-shadow: none;
      }
    }

    .trade-section .chart-title .flag {
      background: #1677ff;
      box-shadow: none;
    }

    .comm-top-header,
    .trade-top-header,
    .trade-trend-header {
      align-items: flex-start;
      gap: 12px 16px;
    }

    .comm-top-tools,
    .trade-top-tools,
    .trade-trend-filters {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 12px;
      color: #6b7280;
    }

    .comm-top-tools,
    .trade-top-tools {
      flex: 1;
      justify-content: flex-end;
    }

    .comm-top-tools .tool-label,
    .trade-top-tools .tool-label,
    .trade-trend-filters .tool-label {
      color: #6b7280;
      font-size: 12px;
      font-weight: 400;
    }

    .comm-top-tools .comm-top-range {
      width: 320px;
      max-width: 100%;
      border-radius: 8px;
      background: #fff;
      box-shadow: none;
    }

    .trade-top-tools .metric-select {
      width: 116px;
    }

    .trade-top-tools .trade-top-range {
      width: 260px;
      max-width: 100%;
      border-radius: 8px;
      background: #fff;
      box-shadow: none;
    }

    .trade-top-tools .metric-select :deep(.ant-select-selector) {
      border-radius: 8px;
      background: #fff;
      box-shadow: none;
    }

    .trade-top-dimension {
      gap: 10px;
      padding: 6px 10px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #fafafa;
    }

    .trade-top-dimension .ant-radio-wrapper {
      color: #374151;
      font-size: 12px;
    }

    .visual-chart-surface,
    .visual-chart-surface--comm,
    .visual-chart-surface--trade {
      margin-top: 0;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      backdrop-filter: none;
      box-shadow: none;
    }

    .visual-chart-surface::before,
    .visual-chart-surface::after {
      display: none;
    }

    .visual-chart-surface--ratio,
    .visual-chart-surface--bar {
      min-height: 340px;
    }

    .visual-chart-surface--trend {
      min-height: 420px;
      padding: 0;
    }

    .comm-chart-box,
    .comm-top-chart-box,
    .trade-top-chart-box,
    .trade-ratio-panel {
      padding: 16px;
      box-sizing: border-box;
      height: 100%;
    }

    .trade-ratio-panel {
      gap: 16px;
    }

    .chart-more-link {
      height: 28px;
      padding: 0 10px;
      border: 1px solid #dbe2ea;
      border-radius: 8px;
      background: #fff;
      backdrop-filter: none;
      box-shadow: none;
      color: #1677ff;
      font-size: 12px;
    }

    .comm-echart,
    .comm-top-echart {
      height: 280px;
    }

    .trade-top-echart {
      height: 300px;
    }

    .trade-ratio-echart {
      width: 176px;
      height: 176px;
      flex: 0 0 176px;
    }

    .donut-wrap {
      align-items: center;
      gap: 16px;
    }

    .donut-legend {
      gap: 12px;
      font-size: 13px;
      color: #374151;
    }

    .donut-legend .legend-title {
      color: #374151;
    }

    .donut-legend .legend-rate,
    .donut-legend .legend-amount {
      color: #111827;
    }

    .legend-click {
      gap: 8px;
      padding: 12px;
      border: 1px solid #eef2f7;
      border-radius: 10px;
      background: #fafafa;
      backdrop-filter: none;
      box-shadow: none;

      &:hover {
        border-color: #dbe2ea;
        opacity: 1;
        transform: none;
      }
    }

    .trade-kpi {
      gap: 12px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trade-kpi .trade-kpi-item {
      padding: 12px 14px;
      border: 1px solid #eef2f7;
      border-radius: 10px;
      background: #fafafa;
      justify-content: space-between;
    }

    .trade-kpi .trade-kpi-label {
      color: #6b7280;
    }

    .trade-kpi .trade-kpi-value {
      color: #111827;
    }

    .trade-kpi .trade-kpi-value.down {
      color: #f97316;
    }

    .trade-kpi .trade-kpi-value.up {
      color: #10b981;
    }

    .trade-trend-subtitle {
      color: #6b7280;
      font-size: 12px;
    }

    .trade-trend-toolbar {
      gap: 10px 12px;
      padding: 12px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      background: #fafafa;
      box-shadow: none;
    }

    .trade-trend-filters {
      gap: 8px;
    }

    .trade-trend-filters .trend-search-input {
      width: 220px;
    }

    .trade-trend-filters .trend-range-input {
      width: 280px;
      max-width: 100%;
      border-radius: 8px;
      background: #fff;
      box-shadow: none;
    }

    .trade-trend-dimension {
      gap: 4px;
      padding: 4px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #fff;
      box-shadow: none;
    }

    .radio {
      padding: 4px 12px;
      border-radius: 6px;
      background: transparent;
      color: #6b7280;

      &.active {
        background: #e6f4ff;
        color: #1677ff;
      }
    }

    .trend-title-row .trend-legend-item {
      padding: 6px 10px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #fff;
      box-shadow: none;

      &:hover {
        border-color: #bfdbfe;
        box-shadow: none;
        transform: none;
      }

      &.is-muted {
        opacity: 0.55;
      }
    }

    .trend-title-row .circles-text {
      color: #374151;
      font-size: 12px;
    }

    .trend-chart-scroll {
      padding: 0;
    }

    .trend-chart {
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      box-shadow: none;
    }

    .trend-echart {
      min-height: 320px;
    }

    .empty-state__title {
      font-size: 14px;
      font-weight: 600;
      color: #4b5563;
    }

    .empty-state__desc {
      display: block;
      color: #9ca3af;
      font-size: 12px;
      line-height: 18px;
    }

    .chart-empty {
      min-height: 180px;
      margin-top: 0;
      padding: 0;
      gap: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: inherit;
    }

    .chart-empty::before {
      content: none;
      display: none;
    }

    .trade-trend-empty {
      min-height: 420px;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .trade-trend-chart-box {
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      padding: 0;
    }

    .station-row {
      gap: 10px;
      margin-bottom: 10px;
      color: #374151;
    }

    .station-list {
      gap: 8px;
    }

    .station-item {
      padding: 6px 10px;
      border: 1px solid #eef2f7;
      border-radius: 8px;
      background: #fafafa;
      color: #4b5563;
    }
  }

  .quick-nav {
    background: rgb(255 255 255 / 96%);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 20px rgb(15 23 42 / 8%);

    .nav-item {
      padding: 6px 10px;
      border-radius: 8px;
      color: #6b7280;
      transition:
        background 0.2s ease,
        color 0.2s ease;

      &:hover {
        background: #f9fafb;
        color: #374151;
      }

      &.active {
        background: #e6f4ff;
        color: #1677ff;
      }
    }
  }

  /* ==========================================================================
   * 数据画像界面优化：对象列表 / 基本信息排版 / 图表配色
   * 约束：全部使用纯色，不出现任何渐变；主色沿用界面现有的项目蓝 #1677ff
   * ========================================================================== */
  .@{prefix-cls}.case-portrait-page {
    // ---------------- 左侧对象列表 ----------------
    .page-layout {
      // 左右两栏间距与右侧卡片之间的上下间距保持一致（右侧卡片 gap = 2px）
      grid-template-columns: 208px minmax(0, 1fr);
      gap: 2px;
    }

    .left-panel .panel-card {
      padding: 12px 10px;
      gap: 10px;
      border-radius: 14px;
    }

    .panel-heading {
      padding: 2px 4px 0;
    }

    .panel-heading__title {
      font-size: 14px;
      font-weight: 600;
      color: #111827;
    }

    .panel-heading__badge {
      min-width: 24px;
      height: 22px;
      padding: 0 7px;
      background: #eff6ff;
      color: #1d4ed8;
      font-variant-numeric: tabular-nums;
    }

    // 对象列表搜索框：紧凑尺寸 + 小圆角，与面板内其他输入/列表项风格统一
    // 注意：本页 style 非 scoped，:deep() 不会编译，必须用普通选择器 + 更高层级覆盖旧版胶囊样式
    .left-panel .panel-card .search-box .ant-input-affix-wrapper,
    .left-panel .panel-card .search-box .ant-input {
      height: 32px;
      padding: 0 10px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #f8fafc;
      box-shadow: none;
      font-size: 13px;
      transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
    }

    .left-panel .panel-card .search-box .ant-input-affix-wrapper:hover,
    .left-panel .panel-card .search-box .ant-input:hover {
      border-color: #cbd5e1;
      background: #fff;
    }

    .left-panel .panel-card .search-box .ant-input-affix-wrapper.ant-input-affix-wrapper-focused,
    .left-panel .panel-card .search-box .ant-input:focus {
      border-color: #2a50ec;
      background: #fff;
      box-shadow: 0 0 0 2px rgb(42 80 236 / 12%);
    }

    .left-panel .panel-card .search-box .ant-input-affix-wrapper > .ant-input {
      height: 100%;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      font-size: 13px;
    }

    .left-panel .panel-card .search-box .ant-input-affix-wrapper .ant-input-prefix {
      margin-inline-end: 6px;
      color: #9ca3af;
      font-size: 13px;
    }

    .left-panel .panel-card .search-box .search-box__icon {
      color: #9ca3af;
      font-size: 13px;
    }

    .left-actions .side-action-btn--primary.ant-btn {
      height: 36px;
      border-radius: 8px;
    }

    .person-list {
      gap: 2px;
      padding: 2px 0 0;
    }

    .left-panel .person-list .person-card {
      // 列表项内填充在现有基础上缩小约 1/3（10px 12px → 6px 8px），行高同步收紧
      min-height: 52px;
      padding: 6px 8px;
    }

    .person-card {
      min-height: 52px;
      padding: 8px;
      gap: 8px;
      border: 1px solid transparent;
      border-radius: 10px;
      background: transparent;
    }

    .person-card:hover {
      border-color: #eef2f7;
      background: #f8fafc;
      box-shadow: none;
    }

    // 选中态：边框/头像/姓名统一使用项目主色（选择器需覆盖旧版 .left-panel .person-list 层级样式）
    .left-panel .person-list .person-card.active {
      border-color: #2a50ec;
      box-shadow: none;
    }

    .person-trigger {
      gap: 9px;
    }

    .person-avatar-wrap {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
    }

    .person-info {
      display: flex;
      flex: 1;
      min-width: 0;
      flex-direction: column;
      gap: 1px;
    }

    .person-name {
      display: block;
      min-width: 0;
      overflow: hidden;
      font-size: 13px;
      line-height: 18px;
      font-weight: 500;
      color: #374151;
      white-space: nowrap;
      text-overflow: ellipsis;
      -webkit-line-clamp: unset;
      word-break: normal;
    }

    .person-card:hover .person-name {
      color: #1f2937;
    }

    .left-panel .person-list .person-card.active .person-name {
      color: #2a50ec;
      font-weight: 600;
    }

    .person-sub {
      overflow: hidden;
      font-size: 11px;
      line-height: 15px;
      color: #94a3b8;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-variant-numeric: tabular-nums;
      // 身份证号取消脱敏后为 18 位，收一点字距保证窄栏内完整展示
      letter-spacing: -0.2px;
    }

    .person-card.active .person-sub {
      color: #3b82f6;
    }

    // 头像：默认浅蓝底 + 主蓝图标，悬浮/选中为主蓝实底（纯色，替换原渐变）
    .person-avatar .jeesite-person-avatar__media {
      color: #1677ff;
      background: #eff6ff;
      border-color: #dbeafe;
      box-shadow: none;
    }

    .left-panel .person-list .person-card:hover .person-avatar .jeesite-person-avatar__media,
    .left-panel .person-list .person-card.active .person-avatar .jeesite-person-avatar__media {
      color: #fff;
      background: #2a50ec;
      border-color: #2a50ec;
      box-shadow: none;
    }

    // 空态：纯色占位，去掉原来的渐变底与渐变图标
    .left-panel .person-list .empty-tip {
      border: 1px dashed #e5e7eb;
      border-radius: 12px;
      background: #fafafa;
      box-shadow: none;
    }

    .left-panel .person-list .empty-tip::before {
      content: none;
      display: none;
    }

    // ---------------- 基本信息 ----------------
    .basic-content {
      grid-template-columns: 184px minmax(0, 1fr);
      gap: 12px;
      align-items: stretch;
    }

    .basic-profile {
      justify-content: center;
      gap: 6px;
      padding: 18px 12px;
      border: 1px solid #eef2f7;
      border-radius: 12px;
      background: #f8fafc;
    }

    .profile-avatar {
      width: 72px;
      height: 72px;
    }

    .profile-info {
      display: flex;
      max-width: 100%;
      min-width: 0;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .profile-name {
      display: -webkit-box;
      max-width: 100%;
      overflow: hidden;
      font-size: 15px;
      line-height: 20px;
      font-weight: 600;
      color: #111827;
      text-align: center;
      word-break: break-all;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .profile-caption {
      font-size: 11px;
      line-height: 15px;
      color: #94a3b8;
    }

    .info-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .info-item {
      min-height: 52px;
      justify-content: center;
      gap: 3px;
      padding: 9px 12px;
      border: 1px solid #eef2f7;
      border-radius: 10px;
      background: #f8fafc;
    }

    .info-label {
      font-size: 11px;
      line-height: 15px;
      color: #94a3b8;
      letter-spacing: 0.02em;
    }

    .info-value {
      font-size: 13px;
      line-height: 18px;
      font-weight: 500;
      color: #111827;
      word-break: break-all;
      overflow-wrap: anywhere;
    }

    // ---------------- 头像 / 亲密度数字配色 ----------------
    // 基本信息主体头像、亲密关系人头像统一使用项目主色
    .profile-avatar,
    .profile-avatar .jeesite-person-avatar__media,
    .relation-avatar,
    .relation-avatar .jeesite-person-avatar__media {
      background: #2a50ec;
      border-color: #2a50ec;
    }

    // 亲密度数字：去掉底色，改为红色字体
    .intimacy-card__score-badge {
      background: transparent;
      color: #dc2626;
      box-shadow: none;
    }

    // 亲密度详情中的数值：同样是红色字体
    .intimacy-detail .value--accent,
    .intimacy-detail .detail-value--clickable {
      color: #dc2626;
    }

    // ---------------- 图表标题：纯色旗标 ----------------
    .chart-title .flag,
    .trade-section .chart-title .flag {
      background: #1677ff;
      box-shadow: none;
    }

    // ---------------- 右侧操作统一为文字按钮：无边框/无底色，主色 #2a50ec ----------------
    .section-action.ant-btn-link,
    .chart-more-link.ant-btn-link {
      height: auto;
      padding: 0 4px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: #2a50ec;
      font-weight: 500;
      line-height: 20px;

      &:hover,
      &:focus {
        border: 0;
        background: transparent;
        color: #4b6bf0;
        box-shadow: none;
      }

      &:active {
        color: #1e3ed0;
      }
    }
  }

  @media (max-width: 1440px) {
    .@{prefix-cls}.case-portrait-page {
      .comm-chart-row,
      .trade-chart-row {
        grid-template-columns: 1fr;
      }

      .basic-content {
        grid-template-columns: 160px minmax(0, 1fr);
      }

      .info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
  }

  @media (max-width: 1200px) {
    .@{prefix-cls}.case-portrait-page {
      .page-layout {
        grid-template-columns: 156px minmax(0, 1fr);
      }

      .left-panel {
        height: auto;
        min-width: 0;
      }

      .left-panel .panel-card {
        max-height: 100%;
      }

      .basic-content {
        grid-template-columns: 148px minmax(0, 1fr);
      }

      .info-grid,
      .comm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .chart-more-link {
        margin-left: auto;
      }

      .quick-nav-shell {
        display: none;
      }
    }

    .quick-nav {
      display: none;
    }
  }

  @media (max-width: 992px) {
    .@{prefix-cls}.case-portrait-page {
      padding: 12px;

      .page-layout,
      .right-panel {
        gap: 10px;
      }

      .section-card,
      .comm-section,
      .trade-section {
        padding: 14px;
      }

      .relation-search,
      .comm-top-tools .comm-top-range,
      .trade-top-tools .metric-select,
      .trade-top-tools .trade-top-range,
      .trade-trend-filters .trend-search-input,
      .trade-trend-filters .trend-range-input {
        width: 100%;
      }

      .info-grid,
      .comm-grid,
      .relation-list,
      .trade-kpi {
        grid-template-columns: 1fr;
      }

      .basic-content {
        grid-template-columns: 1fr;
      }

      .basic-profile {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px;
      }

      .profile-info {
        align-items: flex-start;
      }

      .profile-name {
        text-align: left;
      }

      .comm-top-tools,
      .trade-top-tools,
      .trade-trend-filters,
      .section-tools {
        width: 100%;
      }
    }
  }

  html[data-theme='dark'] {
    .@{prefix-cls}.case-portrait-page {
      background: #0f172a;

      .panel-card,
      .section-card {
        background: #111827;
        box-shadow: none;
      }

      .person-item {
        background: #1f2937;

        &:hover {
          background: #1e293b;
        }
      }

      .person-name,
      .section-title,
      .profile-name,
      .relation-name {
        color: #e5e7eb;
      }

      .info-item,
      .info-label,
      .relation-score,
      .tag {
        color: #9ca3af;
      }

      .relation-card {
        border-color: #1f2937;
      }

      .tag {
        background: #1f2937;
      }

      .basic-profile,
      .info-item {
        border-color: #1f2937;
        background: #1f2937;
      }

      .info-label,
      .profile-caption,
      .person-sub {
        color: #94a3b8;
      }

      .info-value,
      .person-name {
        color: #e5e7eb;
      }

      .left-panel .person-list .empty-tip {
        border-color: #1f2937;
        background: #111827;
      }

      .person-card.active {
        border-color: #2a50ec;
        background: #172554;
      }

      .person-avatar .jeesite-person-avatar__media {
        color: #60a5fa;
        background: #1e293b;
        border-color: #334155;
      }
    }
  }

  /* 数据画像页相关弹窗统一纯色：不出现任何渐变 */
  .create-group-modal .ant-modal-content,
  .add-group-person-modal .ant-modal-content,
  .person-edit-modal .ant-modal-content,
  .person-edit-modal .person-form-section,
  .person-edit-modal .person-avatar-upload,
  .add-group-person-modal .add-object-modal__search,
  .add-group-person-modal .add-object-modal__empty {
    background: #fff;
  }

  .create-group-modal .create-group-section {
    background: #f8fafc;
  }

  .add-group-person-modal .add-object-item__avatar {
    background: #e0ecff;
  }

  .add-group-person-modal .add-object-item.is-selected {
    background: #eff6ff;
  }

  .object-group-modal .group-modal-actions .head-btn {
    background: #fff;
  }

  .object-group-modal .group-modal-actions .head-btn:hover,
  .object-group-modal .group-modal-actions .head-btn:focus {
    background: #f3f6fb;
  }

  .object-group-modal .group-modal-actions .head-btn--primary,
  .object-group-modal .group-modal-actions .head-btn--accent,
  .object-group-modal .group-modal-actions .head-btn--danger {
    background: #fff;
  }

  .object-group-modal .group-select-btn.ant-btn-primary {
    background: #2a50ec;
  }

  /* 数据画像页所有弹窗：按钮高度统一 32px。
     弹窗被 teleport 到 body，用本页挂载时加的 body 标记限定作用域，避免影响其他页面弹窗。
     需要 !important：全局弹窗页脚样式（core/design/ant/index.less）把页脚按钮定成了 36px，
     选择器层级更高，普通覆盖不生效。 */
  body.case-portrait-active .ant-modal-wrap:not(.pg-manage-modal) .ant-btn {
    height: 32px !important;
  }

  /* 亲密弹框里的「刷新配置」本身是小号按钮：保持原有小尺寸（24px），不参与上面的 32px 统一 */
  body.case-portrait-active .ant-modal-wrap.intimacy-config-modal .ant-btn-sm {
    height: 24px !important;
  }

  /* 数据画像页弹窗主按钮：统一使用项目主色 #2a50ec。
     组件内部（ModalFooter / QueryTableModal 等）对主按钮有更高优先级的历史配色覆盖，
     这里用 !important 统一成本页要求的项目主色。 */
  body.case-portrait-active .ant-modal-wrap:not(.pg-manage-modal) .ant-btn-primary {
    border-color: #2a50ec !important;
    background: #2a50ec !important;
    color: #fff;
  }

  body.case-portrait-active .ant-modal-wrap:not(.pg-manage-modal) .ant-btn-primary:not(:disabled):hover,
  body.case-portrait-active .ant-modal-wrap:not(.pg-manage-modal) .ant-btn-primary:not(:disabled):focus {
    border-color: #4b6bf0 !important;
    background: #4b6bf0 !important;
    color: #fff;
  }

  body.case-portrait-active .ant-modal-wrap:not(.pg-manage-modal) .ant-btn-primary:not(:disabled):active {
    border-color: #1e3ed0 !important;
    background: #1e3ed0 !important;
    color: #fff;
  }
</style>

<style lang="less">
  /* ==========================================================================
   * 数据画像页 UI 重构（按确认稿实现）
   * 结构：左侧对象列表固定，右侧内容区独立滚动；页面内卡片间距 10px。
   * 说明：本页原有逻辑与接口保持不变，以下仅负责新版页面结构与视觉。
   * ========================================================================== */
  .case-portrait-page.qj-portrait-page {
    width: calc(100% + 24px);
    height: 100%;
    margin: 0 -12px;
    padding: 0;
    background: #f4f6fa;
    overflow: hidden;

    .qj-page {
      display: grid;
      grid-template-columns: 236px minmax(0, 1fr);
      gap: 8px;
      height: 100%;
      min-height: 0;
      padding: 8px 10px;
      box-sizing: border-box;
    }

    /* ---------------- 左侧对象列表（固定） ---------------- */
    .qj-sidebar {
      display: flex;
      flex-direction: column;
      gap: 7px;
      min-height: 0;
      height: 100%;
      padding: 10px 8px 8px;
      border: 1px solid #e7ebf3;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
      box-sizing: border-box;
      overflow: hidden;
    }

    .qj-side-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 3px;
      flex: 0 0 auto;
    }

    .qj-side-title {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      color: #111827;
    }

    .qj-count {
      min-width: 22px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      background: #eef2ff;
      color: #2a50ec;
      font-size: 11px;
      font-weight: 600;
      line-height: 20px;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .qj-side-search {
      flex: 0 0 auto;

      .ant-input-affix-wrapper,
      .ant-input {
        height: 30px;
        padding: 0 9px;
        border: 1px solid #e7ebf3;
        border-radius: 8px;
        background: #f8fafc;
        box-shadow: none;
        font-size: 12px;
        transition:
          border-color 0.2s ease,
          background-color 0.2s ease,
          box-shadow 0.2s ease;
      }

      .ant-input-affix-wrapper:hover,
      .ant-input:hover {
        border-color: #cbd5e1;
        background: #ffffff;
      }

      .ant-input-affix-wrapper-focused,
      .ant-input:focus {
        border-color: #2a50ec;
        background: #ffffff;
        box-shadow: 0 0 0 2px rgba(42, 80, 236, 0.12);
      }

      .ant-input-affix-wrapper > .ant-input {
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 12px;
      }

      .ant-input-prefix {
        margin-inline-end: 6px;
      }

      .qj-search-icon {
        color: #98a2b3;
        font-size: 13px;
      }
    }

    .qj-add-btn.ant-btn {
      flex: 0 0 auto;
      height: 32px;
      border: 1px solid #2a50ec;
      border-radius: 8px;
      background: #2a50ec;
      box-shadow: 0 2px 6px rgba(42, 80, 236, 0.18);
      font-size: 13px;
      font-weight: 500;

      .anticon {
        font-size: 13px;
      }

      &:hover,
      &:focus {
        border-color: #4b6bf0;
        background: #4b6bf0;
      }

      &:active {
        border-color: #1e3ed0;
        background: #1e3ed0;
      }
    }

    .qj-person-list {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      gap: 2px;
      min-height: 0;
      padding: 2px 2px 0 0;
      overflow-y: auto;
      overflow-x: hidden;

      &::-webkit-scrollbar {
        width: 4px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background: #d5dbe6;
      }
    }

    .qj-person {
      display: flex;
      align-items: center;
      min-height: 46px;
      padding: 6px 7px;
      border: 1px solid transparent;
      border-radius: 10px;
      cursor: pointer;
      transition:
        background-color 0.2s ease,
        border-color 0.2s ease;

      &:hover {
        border-color: #eff2f7;
        background: #f8fafc;

        .qj-person-name {
          color: #1f2937;
        }
      }

      &.active {
        border-color: #2a50ec;
        background: #f6f8ff;

        .qj-person-name {
          color: #2a50ec;
          font-weight: 600;
        }

        .qj-person-sub {
          color: #5b7cfa;
        }

        .qj-person-avatar .jeesite-person-avatar__media {
          border-color: #2a50ec;
          background: #2a50ec;
          color: #ffffff;
        }
      }
    }

    .qj-person-trigger {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      min-width: 0;
    }

    .qj-person-avatar {
      flex: 0 0 34px;

      .jeesite-person-avatar__media {
        border: 1px solid #dfe5ff;
        background: #eef2ff;
        box-shadow: none;
        color: #2a50ec;
      }
    }

    .qj-person-info {
      display: flex;
      flex: 1;
      min-width: 0;
      flex-direction: column;
      gap: 1px;
    }

    .qj-person-name {
      overflow: hidden;
      font-size: 13px;
      line-height: 18px;
      font-weight: 500;
      color: #374151;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .qj-person-sub {
      overflow: hidden;
      font-size: 11px;
      line-height: 15px;
      color: #98a2b3;
      letter-spacing: -0.15px;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-variant-numeric: tabular-nums;
    }

    .qj-side-empty {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      min-height: 0;
      padding: 10px 4px;
    }

    .qj-side-foot {
      flex: 0 0 auto;
      padding-top: 8px;
      border-top: 1px solid #eff2f7;
    }

    .qj-group-btn.ant-btn {
      width: 100%;
      height: 32px;
      border: 1px solid #e7ebf3;
      border-radius: 8px;
      background: #ffffff;
      color: #2a50ec;
      font-size: 13px;
      font-weight: 500;
      box-shadow: none;

      .anticon {
        font-size: 13px;
      }

      &:hover,
      &:focus {
        border-color: #bfcdfb;
        background: #f8faff;
        color: #4b6bf0;
      }
    }

    /* ---------------- 右侧滚动区 ---------------- */
    .qj-right {
      min-width: 0;
      min-height: 0;
      height: 100%;
      padding-right: 3px;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: #c7cfdd transparent;

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: #c7cfdd;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }
    }

    .qj-scroll {
      min-height: 100%;
      padding-bottom: 4px;
      box-sizing: border-box;
    }

    /* ---------------- 对象档案头 ---------------- */
    .qj-hero {
      flex: 0 0 auto;
      padding: 12px 14px;
      border: 1px solid #e7ebf3;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    }

    .qj-hero-top {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .qj-hero-avatar {
      flex: 0 0 72px;

      .jeesite-person-avatar__media {
        border: 1px solid #d9e3ff;
        border-radius: 18px;
        background: #f1f5ff;
        box-shadow: none;
        color: #2a50ec;
      }
    }

    .qj-hero-id {
      display: flex;
      flex: 1;
      min-width: 0;
      flex-direction: column;
      align-self: stretch;
      justify-content: center;
    }

    .qj-hero-name-row {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
    }

    .qj-hero-name {
      margin: 0;
      font-size: 22px;
      line-height: 30px;
      font-weight: 600;
      letter-spacing: 0.2px;
      color: #111827;
    }

    .qj-hero-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 5px 22px;
      margin-top: 6px;
      font-size: 12px;
      line-height: 18px;
    }

    .qj-hero-meta__item {
      display: flex;
      align-items: flex-start;
      min-width: 0;
    }

    .qj-hero-meta__label {
      flex: 0 0 auto;
      color: #98a2b3;
      white-space: nowrap;
    }

    .qj-hero-meta__value {
      min-width: 0;
      color: #111827;
      font-weight: 500;
      overflow-wrap: anywhere;

      &.muted {
        color: #98a2b3;
        font-weight: 400;
      }
    }

    .qj-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      height: 21px;
      padding: 0 8px;
      border: 1px solid #e7ebf3;
      border-radius: 5px;
      background: #f4f6fa;
      color: #5b6577;
      font-size: 11px;
      font-weight: 500;
      line-height: 19px;
      white-space: nowrap;

      .anticon {
        font-size: 11px;
      }
    }

    .qj-badge-primary {
      border-color: #dfe5ff;
      background: #eef2ff;
      color: #2a50ec;
    }

    .qj-hero-actions {
      flex: 0 0 auto;
      align-self: center;
    }

    .qj-hero-edit-btn.ant-btn {
      height: 32px;
      padding: 0 12px;
      border: 1px solid #e7ebf3;
      border-radius: 8px;
      background: #ffffff;
      color: #374151;
      font-size: 12px;
      font-weight: 500;
      box-shadow: none;

      .anticon {
        font-size: 12px;
      }

      &:hover,
      &:focus {
        border-color: #bfcdfb;
        color: #2a50ec;
      }
    }

    /* ---------------- 吸顶分段导航 ---------------- */
    .qj-anchors {
      position: sticky;
      top: 0;
      z-index: 8;
      display: flex;
      align-items: center;
      gap: 3px;
      margin: 8px 0;
      padding: 3px;
      border: 1px solid #e7ebf3;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 4px 14px rgba(16, 24, 40, 0.05);
    }

    .qj-anchor {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      height: 28px;
      padding: 0 12px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #5b6577;
      font-size: 13px;
      line-height: 28px;
      cursor: pointer;
      transition:
        background-color 0.2s ease,
        color 0.2s ease;

      .anticon {
        font-size: 14px;
      }

      &:hover {
        background: #f7f9fc;
        color: #111827;
      }

      &.active {
        background: #eef2ff;
        color: #2a50ec;
        font-weight: 600;
      }
    }

    .qj-anchors-tip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
      padding-right: 12px;
      color: #98a2b3;
      font-size: 11px;
    }

    /* ---------------- 通用卡片 ---------------- */
    .qj-card {
      margin-bottom: 8px;
      border: 1px solid #e7ebf3;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
      overflow: hidden;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .qj-card-head {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      padding: 0 14px;
      border-bottom: 1px solid #eff2f7;
    }

    .qj-card-title {
      position: relative;
      padding-left: 11px;
      color: #111827;
      font-size: 15px;
      font-weight: 600;
      line-height: 22px;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 3px;
        border-radius: 2px;
        background: #2a50ec;
      }
    }

    .qj-card-sub {
      color: #98a2b3;
      font-size: 11px;
      line-height: 16px;
    }

    .qj-head-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: auto;
    }

    .qj-link.ant-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      height: auto;
      padding: 0 2px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #2a50ec;
      font-size: 12px;
      font-weight: 500;
      line-height: 20px;
      box-shadow: none;

      .anticon {
        font-size: 12px;
      }

      &:hover,
      &:focus {
        border: 0;
        background: transparent;
        color: #4b6bf0;
      }

      &:active {
        color: #1e3ed0;
      }
    }

    .qj-card-body {
      padding: 10px 14px 12px;
    }

    /* ---------------- 通讯 / 交易：指标条 ---------------- */
    .qj-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;

      &.four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    .qj-metric {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      padding: 8px 10px;
      border: 1px solid #eff2f7;
      border-radius: 9px;
      background: #fbfcfe;
    }

    .qj-metric-icon {
      display: inline-flex;
      flex: 0 0 30px;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: #eef2ff;
      color: #2a50ec;

      .anticon {
        font-size: 15px;
      }

      &.green {
        background: #e8f8f0;
        color: #0b8a4f;
      }

      &.orange {
        background: #fff4e5;
        color: #b25c00;
      }

      &.red {
        background: #fdecec;
        color: #c02b31;
      }
    }

    .qj-metric-main {
      flex: 1;
      min-width: 0;
    }

    .qj-metric-label {
      overflow: hidden;
      color: #98a2b3;
      font-size: 11px;
      line-height: 16px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .qj-metric-value {
      margin-top: 2px;
      overflow: hidden;
      color: #1f2937;
      font-size: 13px;
      font-weight: 600;
      line-height: 19px;
      white-space: nowrap;
      text-overflow: ellipsis;

      &.green {
        color: #0b8a4f;
      }

      &.orange {
        color: #b25c00;
      }

      &.red {
        color: #c02b31;
      }

      &.blue {
        color: #2a50ec;
      }
    }

    .qj-metric-chips {
      display: flex;
      gap: 5px;
      align-items: center;
      margin-top: 3px;
      overflow: hidden;
    }

    .qj-chip {
      display: inline-flex;
      align-items: center;
      height: 19px;
      padding: 0 6px;
      border: 0;
      border-radius: 4px;
      background: #eef2ff;
      color: #2448c9;
      font-size: 10px;
      line-height: 19px;
      white-space: nowrap;
      cursor: pointer;

      &:hover {
        background: #dfe6ff;
      }

      &.neutral {
        border: 1px solid #eff2f7;
        background: #f4f6fa;
        color: #5b6577;
        cursor: default;
      }
    }

    /* ---------------- 双栏图表区 ---------------- */
    .qj-split {
      display: grid;
      grid-template-columns: 0.92fr 1.08fr;
      margin-top: 8px;
      border-top: 1px solid #eff2f7;
    }

    .qj-pane {
      min-width: 0;
      padding: 10px 14px 12px;

      & + & {
        border-left: 1px solid #eff2f7;
      }
    }

    .qj-pane-head {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      min-height: 28px;
      margin-bottom: 6px;
    }

    .qj-pane-title {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #1f2937;
      font-size: 13px;
      font-weight: 600;
      line-height: 20px;
      white-space: nowrap;

      &::before {
        content: '';
        width: 3px;
        height: 12px;
        border-radius: 2px;
        background: #2a50ec;
      }
    }

    .qj-pane-tools {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
      flex-wrap: wrap;
      margin-left: auto;

      .qj-link.ant-btn {
        font-size: 11px;
      }
    }

    .qj-mini-field {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      height: 28px;
      padding: 0 7px;
      border: 1px solid #e7ebf3;
      border-radius: 7px;
      background: #ffffff;
      color: #5b6577;
      font-size: 11px;
      line-height: 26px;
      white-space: nowrap;

      > .anticon {
        color: #98a2b3;
        font-size: 11px;
      }

      .ant-picker {
        width: 170px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;

        .ant-picker-input > input {
          font-size: 11px;
        }

        .ant-picker-suffix,
        .ant-picker-clear {
          color: #98a2b3;
          font-size: 11px;
        }
      }

      .ant-select {
        min-width: 100px;
      }

      .ant-select-selector {
        height: 24px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 11px;
      }

      .ant-select-selection-item,
      .ant-select-selection-placeholder {
        padding: 0;
        line-height: 24px !important;
        font-size: 11px;
      }

      .ant-select-arrow {
        color: #98a2b3;
        font-size: 11px;
      }

      .qj-inline-select {
        width: 96px;
        min-width: 96px;
      }
    }

    .qj-range-picker.ant-picker {
      width: 170px;
    }

    /* 纯色分段控件（Ant Radio.Group） */
    .qj-seg {
      display: inline-flex;
      align-items: center;
      height: 28px;
      padding: 2px;
      border: 1px solid #e7ebf3;
      border-radius: 7px;
      background: #ffffff;

      .ant-radio-wrapper {
        display: inline-flex;
        align-items: center;
        height: 22px;
        margin-inline-end: 0;
        padding: 0 8px;
        border-radius: 5px;
        color: #5b6577;
        font-size: 10px;
        line-height: 22px;
        transition:
          background-color 0.2s ease,
          color 0.2s ease;
      }

      .ant-radio-wrapper > .ant-radio {
        display: none;
      }

      .ant-radio-wrapper > span:last-child {
        padding: 0;
      }

      .ant-radio-wrapper-checked {
        background: #eef2ff;
        color: #2a50ec;
        font-weight: 600;
      }
    }

    /* 自定义月份 / 年份分段 */
    .qj-seg-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 30px;
      height: 22px;
      padding: 0 8px;
      border-radius: 5px;
      color: #5b6577;
      font-size: 11px;
      line-height: 22px;
      cursor: pointer;
      transition:
        background-color 0.2s ease,
        color 0.2s ease;

      &.on {
        background: #eef2ff;
        color: #2a50ec;
        font-weight: 600;
      }
    }

    /* ---------------- 环形图 ---------------- */
    .qj-donut-wrap {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 4px 2px 2px;
    }

    .qj-donut-chart {
      width: 176px;
      height: 176px;
      flex: 0 0 176px;
    }

    .qj-donut-visual {
      position: relative;
      flex: 0 0 176px;
      width: 176px;
      height: 176px;
    }

    .qj-donut-center {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      pointer-events: none;

      strong {
        color: #111827;
        font-size: 26px;
        font-weight: 600;
        line-height: 30px;
      }

      span {
        color: #98a2b3;
        font-size: 11px;
        line-height: 16px;
      }
    }

    .qj-legend {
      display: flex;
      flex: 1;
      min-width: 0;
      flex-direction: column;
      gap: 8px;
    }

    .qj-legend-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      width: 100%;
      padding: 0 0 7px;
      border: 0;
      border-bottom: 1px dashed #eff2f7;
      border-radius: 0;
      background: transparent;
      text-align: left;

      &:last-child {
        padding-bottom: 0;
        border-bottom: 0;
      }

      &.qj-legend-click {
        cursor: pointer;

        &:hover {
          .qj-legend-value {
            color: #2a50ec;
          }
        }
      }
    }

    .qj-legend-dot {
      flex: 0 0 8px;
      width: 8px;
      height: 8px;
      margin-top: 5px;
      border-radius: 50%;
    }

    .qj-legend-label {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      color: #5b6577;
      font-size: 11px;
      line-height: 16px;
    }

    .qj-legend-pct {
      color: #98a2b3;
      font-size: 10px;
    }

    .qj-legend-value {
      margin-top: 2px;
      color: #1f2937;
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      font-variant-numeric: tabular-nums;

      small {
        margin-left: 3px;
        color: #98a2b3;
        font-size: 11px;
        font-weight: 400;
      }
    }

    .qj-kpis {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin-top: 6px;
    }

    .qj-kpi {
      min-width: 0;
      padding: 7px 9px;
      border: 1px solid #eff2f7;
      border-radius: 8px;
      background: #fbfcfe;
    }

    .qj-kpi-label {
      color: #98a2b3;
      font-size: 10px;
      line-height: 15px;
      white-space: nowrap;
    }

    .qj-kpi-value {
      margin-top: 1px;
      overflow: hidden;
      color: #2a50ec;
      font-size: 13px;
      font-weight: 600;
      line-height: 19px;
      white-space: nowrap;
      text-overflow: ellipsis;

      &.green {
        color: #12b76a;
      }

      &.orange {
        color: #f79009;
      }

      &.muted {
        color: #98a2b3;
        font-weight: 500;
      }
    }

    /* ---------------- TOP10 横向排行 ---------------- */
    .qj-rank-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 2px 0 0;
    }

    .qj-rank-row {
      display: grid;
      grid-template-columns: 18px 102px minmax(40px, 1fr) 34px;
      align-items: center;
      gap: 8px;
      width: 100%;
      height: 25px;
      padding: 0 2px;
      border: 0;
      border-radius: 4px;
      background: transparent;
      font-size: 11px;
      line-height: 25px;
      text-align: left;
      cursor: pointer;
      transition: background-color 0.2s ease;

      &:hover:not(:disabled) {
        background: #f7f9fc;

        .qj-rank-name {
          color: #2a50ec;
        }
      }

      &:disabled {
        cursor: default;
      }

      &.qj-rank-wide {
        grid-template-columns: 18px 154px minmax(40px, 1fr) 92px;
      }
    }

    .qj-rank-no {
      color: #98a2b3;
      font-size: 10px;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .qj-rank-row:first-child .qj-rank-no {
      color: #2a50ec;
      font-weight: 600;
    }

    .qj-rank-name {
      overflow: hidden;
      color: #4b5563;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: color 0.2s ease;
    }

    .qj-rank-track {
      display: block;
      height: 8px;
      border-radius: 4px;
      background: #f0f3f8;
      overflow: hidden;
    }

    .qj-rank-bar {
      display: block;
      height: 100%;
      border-radius: 4px;
      background: #2a50ec;
    }

    .qj-rank-row:nth-child(n + 4) .qj-rank-bar {
      background: #7d98f8;
    }

    .qj-rank-val {
      color: #1f2937;
      font-weight: 600;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .qj-rank-amount {
      color: #1f2937;
      font-size: 11px;
      font-weight: 600;
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    /* ---------------- 基站条 ---------------- */
    .qj-stations {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 8px 14px;
      border-top: 1px solid #eff2f7;
      background: #fbfcfe;
    }

    .qj-stations-label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #374151;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;

      .anticon {
        color: #2a50ec;
        font-size: 13px;
      }
    }

    .qj-station {
      display: inline-flex;
      align-items: center;
      height: 22px;
      padding: 0 8px;
      border: 1px solid #e7ebf3;
      border-radius: 5px;
      background: #ffffff;
      color: #4b5563;
      font-family: 'SFMono-Regular', Consolas, monospace;
      font-size: 11px;
      line-height: 20px;
      letter-spacing: 0.02em;
    }

    .qj-station-empty {
      color: #98a2b3;
      font-size: 11px;
    }

    .qj-stations-map {
      margin-left: auto;
    }

    /* ---------------- 交易趋势 ---------------- */
    .qj-trend {
      padding: 10px 14px 12px;
      border-top: 1px solid #eff2f7;
    }

    .qj-trend-head {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }

    .qj-trend-title {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #1f2937;
      font-size: 13px;
      font-weight: 600;
      line-height: 20px;
      white-space: nowrap;

      &::before {
        content: '';
        width: 3px;
        height: 12px;
        border-radius: 2px;
        background: #2a50ec;
      }
    }

    .qj-trend-desc {
      padding-top: 1px;
      color: #98a2b3;
      font-size: 11px;
      line-height: 18px;
    }

    .qj-trend-tools {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-left: auto;
    }

    .qj-field {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #98a2b3;
      font-size: 11px;
      line-height: 28px;
      white-space: nowrap;
    }

    .qj-trend-select.ant-select {
      width: 160px;

      .ant-select-selector {
        height: 28px !important;
        padding: 0 9px !important;
        border: 1px solid #e7ebf3 !important;
        border-radius: 7px !important;
        background: #ffffff !important;
        box-shadow: none !important;
        font-size: 11px;
      }

      .ant-select-selection-item,
      .ant-select-selection-placeholder {
        line-height: 26px !important;
        font-size: 11px;
      }

      .ant-select-arrow {
        color: #98a2b3;
        font-size: 11px;
      }
    }

    .qj-trend-range.ant-picker {
      width: 216px;
      height: 28px;
      padding: 0 9px;
      border: 1px solid #e7ebf3;
      border-radius: 7px;
      background: #ffffff;
      box-shadow: none;

      .ant-picker-input > input {
        font-size: 11px;
      }

      .ant-picker-suffix,
      .ant-picker-clear {
        color: #98a2b3;
        font-size: 11px;
      }
    }

    .qj-trend-legend {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-left: 4px;
    }

    .qj-trend-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #5b6577;
      font-size: 11px;
      line-height: 20px;
      cursor: pointer;

      i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

      &.off {
        opacity: 0.42;
        text-decoration: line-through;
      }
    }

    .qj-trend-chart-box {
      width: 100%;
      min-width: 0;
    }

    .qj-trend-scroll {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;

      &::-webkit-scrollbar {
        height: 5px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: #cbd5e1;
      }
    }

    .qj-trend-chart {
      min-width: 100%;
    }

    .qj-trend-echart {
      width: 100%;
      height: 100%;
    }

    .qj-footnote {
      padding: 0 0 2px;
      color: #98a2b3;
      font-size: 10px;
      line-height: 16px;
      text-align: right;
    }

    .qj-chart-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 180px;
      color: #98a2b3;
      font-size: 12px;
    }

    .qj-trend-empty {
      min-height: 180px;
    }

    /* ---------------- 响应式 ---------------- */
    @media (max-width: 1440px) {
      .qj-page {
        grid-template-columns: 216px minmax(0, 1fr);
      }

      .qj-metrics.four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 1200px) {
      .qj-page {
        grid-template-columns: 200px minmax(0, 1fr);
      }

      .qj-anchors-tip {
        display: none;
      }

      .qj-split {
        grid-template-columns: 1fr;

        .qj-pane + .qj-pane {
          border-top: 1px solid #eff2f7;
          border-left: 0;
        }
      }

      .qj-hero-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 992px) {
      .qj-page {
        grid-template-columns: 176px minmax(0, 1fr);
        gap: 8px;
        padding: 10px;
      }

      .qj-sidebar {
        padding: 10px 8px;
      }

      .qj-hero {
        padding: 14px 14px 0;
      }

      .qj-hero-top {
        flex-wrap: wrap;
      }

      .qj-hero-actions {
        margin-left: 88px;
      }

      .qj-card-head {
        padding: 0 12px;
      }

      .qj-card-body {
        padding: 12px;
      }

      .qj-pane {
        padding: 12px;
      }

      .qj-metrics,
      .qj-metrics.four {
        grid-template-columns: 1fr;
      }

      .qj-hero-meta {
        grid-template-columns: 1fr;
      }

      .qj-donut-wrap {
        flex-wrap: wrap;
      }

      .qj-donut-chart,
      .qj-donut-visual {
        margin: 0 auto;
      }

      .qj-legend {
        flex-basis: 100%;
      }

      .qj-trend-head {
        gap: 8px;
      }

      .qj-trend-tools {
        width: 100%;
        margin-left: 0;
      }

      .qj-trend-select.ant-select,
      .qj-trend-range.ant-picker {
        width: 100%;
      }

      .qj-trend-scroll {
        overflow-x: auto;
      }
    }

    /* ---------------- 暗色主题 ---------------- */
    html[data-theme='dark'] & {
      background: #0f172a;

      .qj-sidebar,
      .qj-hero,
      .qj-card,
      .qj-anchors {
        border-color: #1f2937;
        background: #111827;
        box-shadow: none;
      }

      .qj-card-head,
      .qj-side-foot,
      .qj-stations,
      .qj-trend,
      .qj-split {
        border-color: #1f2937;
      }

      .qj-stations {
        background: #0f172a;
      }

      .qj-side-title,
      .qj-hero-name,
      .qj-card-title,
      .qj-pane-title,
      .qj-trend-title,
      .qj-hero-meta__value,
      .qj-metric-value,
      .qj-rank-val,
      .qj-rank-amount,
      .qj-legend-value,
      .qj-donut-center strong,
      .qj-kpi-value,
      .qj-stations-label {
        color: #e5e7eb;
      }

      .qj-hero-meta,
      .qj-hero-meta__label,
      .qj-metric-label,
      .qj-legend-label,
      .qj-trend-desc,
      .qj-field,
      .qj-rank-name,
      .qj-rank-no,
      .qj-station-empty,
      .qj-footnote {
        color: #94a3b8;
      }

      .qj-person:hover {
        background: #172033;
      }

      .qj-person.active {
        background: #172554;
      }

      .qj-metric,
      .qj-kpi,
      .qj-station {
        border-color: #1f2937;
        background: #0f172a;
      }

      .qj-metric-value.green {
        color: #34d399;
      }

      .qj-metric-value.orange {
        color: #fbbf24;
      }

      .qj-metric-value.red {
        color: #f87171;
      }

      .qj-mini-field,
      .qj-trend-select.ant-select .ant-select-selector,
      .qj-trend-range.ant-picker,
      .qj-seg {
        border-color: #1f2937 !important;
        background: #0f172a !important;
        color: #94a3b8;
      }

      .qj-range-picker.ant-picker {
        background: transparent;
      }

      .qj-anchor:hover {
        background: #172033;
        color: #e5e7eb;
      }

      .qj-anchor.active {
        background: #172554;
        color: #93b4ff;
      }
    }
  }

  /* 亲密关系卡片：压过旧版 portrait 样式的残留影响 */
  .qj-portrait-page #section-relation {
    .intimacy-panel {
      .section-header {
        align-items: center;
        flex-wrap: wrap;
        min-height: 42px;
        margin-bottom: 0;
        padding: 0 14px;
        border-bottom: 1px solid #eff2f7;
      }

      .section-title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding-left: 11px;
        font-size: 15px;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: 0;
        color: #111827;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 4px;
          bottom: 4px;
          width: 3px;
          height: auto;
          border-radius: 2px;
          background: #2a50ec;
        }
      }

      .section-tools {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
      }

      .relation-search {
        width: 208px;
      }

      .section-action.ant-btn {
        height: auto;
        padding: 0 2px;
        border: 0;
        background: transparent;
        color: #2a50ec;
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        box-shadow: none;

        .anticon {
          font-size: 12px;
        }

        &:hover,
        &:focus {
          border: 0;
          background: transparent;
          color: #4b6bf0;
        }
      }

      .relation-avatar {
        width: 38px;
        height: 38px;
        background: transparent;
      }

      .intimacy-card__score-badge {
        min-width: 0;
        height: auto;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: #e5484d;
        font-size: 20px;
        line-height: 24px;
        font-weight: 600;
        box-shadow: none;
      }

      .intimacy-detail .value--accent,
      .intimacy-detail .detail-value--clickable {
        color: #e5484d;
      }
    }
  }

  @media (max-width: 992px) {
    .qj-portrait-page #section-relation .intimacy-panel {
      .section-header {
        flex-direction: column;
        align-items: stretch;
      }

      .section-tools,
      .relation-search {
        width: 100%;
      }
    }
  }
</style>