Refine phone list workspace

app-v2.js

@@ -75,7 +75,6 @@
       channelOperator: '中国移动',
       numberStatus: true,
       linkedWecom: '张三企业微信',
-      numberRetentionStatus: true,
       updateTime: '2024-03-12 10:25',
       note: '用于客户联系'
     }
@@ -529,7 +528,7 @@ function renderExternalRuntime(moduleKey) {
       phoneText: {
         add: '新增号卡',
         reset: '重置',
-        searchPlaceholder: '搜索手机号、实名人或城市',
+        searchPlaceholder: '搜索手机号、实名人或域名',
         deleteConfirm: '确认删除这条手机号记录吗？',
         deleteFailed: '删除失败，请稍后重试',
         loadFailed: '加载手机号列表失败，请确认本地后端已启动'
@@ -708,3 +707,4 @@ function initPage() {
 window.updateActiveNav = updateActiveNav;
 window.renderModule = renderModule;
 document.addEventListener('DOMContentLoaded', initPage);
+

src/modules/phone/phone-add-dialog.js

@@ -107,31 +107,31 @@
       /**
        * 代码作用（白话）：把外层传入的手机号记录回填到表单里，兼容列表记录和详情记录两种字段名，并把两张旧图按一个图片区域回显；关联文件：F:/Project/xyw_console/app-v2.js、F:/Project/xyw_console/src/modules/phone/phone-detail-drawer.js、F:/Project/xyw_console/src/modules/shared/record-adapters.js；关联逻辑（调用链/消息链/数据流）：编辑按钮/详情抽屉编辑 -> PhoneAddDialogAPI.open('edit', record) -> populateFormData() -> 表单与图片预览回填。
        */
+      /**
+       * ???????????????????????????????? `card_status` / `mobile_status` / `channel_operator`?????????????????????F:/Project/xyw_console/src/modules/phone/phone-add-dialog.js?F:/Project/xyw_console/src/modules/shared/record-adapters.js?????????/???/???????/???? -> populateFormData() -> formData -> ?????
+       */
       function populateFormData(record) {
         formData.id = record.id || null;
         formData.phoneNumber = record.phoneNumber || record.phone || '';
         formData.realPerson = record.realPerson || '';
         formData.iccid = record.iccid || '';
         formData.city = record.city || '';
-        formData.cardStatus = record.cardStatus || record.status || '正常';
-        formData.cardUsageLocation = record.cardUsageLocation || record.usageLocation || '';
+        formData.cardStatus = record.cardStatus || record.card_status || record.status || '正常';
+        formData.cardUsageLocation = record.cardUsageLocation || record.card_usage_location || record.usageLocation || '';
         formData.wecom = record.wecom === true;
         formData.wechat = record.wechat === true;
-        formData.outboundCall = record.outboundCall === true || record.outbound === '可外呼';
+        formData.outboundCall = record.outboundCall === true || record.outbound_call === true || record.outbound === '可外呼';
         formData.douyinAccount = record.douyinAccount || '';
         formData.miniProgramFiling = record.miniProgramFiling === true;
         formData.packageChange5yuan = record.packageChange5yuan === true;
-        formData.channelOperator = record.channelOperator || record.carrier || '';
-        formData.numberStatus = record.numberStatus !== false;
-        formData.linkedWecom = record.linkedWecom || '';
+        formData.channelOperator = record.channelOperator || record.channel_operator || record.carrier || '';
+        formData.numberStatus = record.numberStatus ?? record.mobile_status ?? record.number_status ?? true;
+        formData.linkedWecom = record.linkedWecom || record.linked_wecom || '';
 
         imageItems.value = buildImageItemsFromRecord(record);
         syncImagesToFormData();
       }
 
-      /**
-       * 代码作用（白话）：按新增或编辑模式打开手机号弹窗，并决定是重置表单还是回填旧记录；关联文件：F:/Project/xyw_console/app-v2.js、F:/Project/xyw_console/src/modules/phone/phone-add-dialog.js；关联逻辑（调用链/消息链/数据流）：新增/编辑按钮 -> PhoneAddDialogAPI.open() -> open() -> visible/formData/imageItems 更新。
-       */
       function open(mode = 'add', record = null) {
         visible.value = true;
         isEdit.value = mode === 'edit';

src/modules/phone/phone-detail-drawer.js

-(function initPhoneDetailDrawer() {
+(function initPhoneDetailDrawer() {
   const { createApp, ref, reactive } = window.Vue;
   const ElementPlus = window.ElementPlus;
 
@@ -85,10 +85,6 @@
                   <span style="font-size: 15px; font-weight: 500; color: #111827;">{{ recordData.realPerson || '—' }}</span>
                 </div>
                 <div style="display: flex; flex-direction: column; gap: 6px;">
-                  <span style="font-size: 13px; color: #6b7280;">ICCID</span>
-                  <span style="font-size: 15px; font-weight: 500; color: #111827; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;">{{ recordData.iccid || '—' }}</span>
-                </div>
-                <div style="display: flex; flex-direction: column; gap: 6px;">
                   <span style="font-size: 13px; color: #6b7280;">归属地</span>
                   <span style="font-size: 15px; font-weight: 500; color: #111827;">{{ recordData.city || '—' }}</span>
                 </div>
@@ -122,10 +118,6 @@
                   <span style="font-size: 13px; color: #6b7280;">绑定企微号</span>
                   <span style="font-size: 15px; font-weight: 400; color: #374151;">{{ recordData.linkedWecom || '—' }}</span>
                 </div>
-                <div style="display: flex; flex-direction: column; gap: 6px;">
-                  <span style="font-size: 13px; color: #6b7280;">抖音账号</span>
-                  <span style="font-size: 15px; font-weight: 400; color: #374151;">{{ recordData.douyinAccount || '—' }}</span>
-                </div>
                 
               </div>
             </section>

src/modules/phone/phone-list-runtime.js

-(function attachPhoneListRuntime() {
+(function attachPhoneListRuntime() {
   /**
    * 代码作用（白话）：把各种日期输入统一转成可比较的时间戳，方便手机号卡页面按更新时间筛选；关联文件：F:/Project/xyw_console/app-v2.js、F:/Project/xyw_console/src/modules/phone/phone-add-dialog.js；关联逻辑（调用链/消息链/数据流）：表格记录.updatedAt -> toTimestamp() -> matchesDateRange() -> filteredRecords。
    */
@@ -74,6 +74,11 @@
       const filterStatus = ref('all');
       const filterCarrier = ref('all');
       const filterOutbound = ref('all');
+      const phonePrefix = ref('');
+      const phoneLogic = ref('and');
+      const phoneSuffix = ref('');
+      const showBasicFilter = ref(false);
+      const showPhoneSearch = ref(false);
       const allRecordsCache = ref([]);
       const loading = ref(false);
       const multipleSelection = ref([]);
@@ -123,11 +128,17 @@
       /**
        * 代码作用（白话）：按状态、运营商、外呼能力、日期和关键词筛出当前应显示的手机号记录；关联文件：F:/Project/xyw_console/app-v2.js；关联逻辑（调用链/消息链/数据流）：筛选控件 -> getFilteredRecords() -> totalFiltered()/visibleRows() -> 表格。
        */
+      /**
+       * ????????????????????????????????????????????????????????? `card_status` ??????????F:/Project/xyw_console/src/modules/phone/phone-list-runtime.js?F:/Project/xyw_console/src/modules/shared/record-adapters.js?????????/???/????????? -> getFilteredRecords() -> visibleRows -> ?????
+       */
       function getFilteredRecords() {
         let result = allRecordsCache.value.slice();
 
         if (filterStatus.value !== 'all') {
-          result = result.filter((record) => record.status === filterStatus.value);
+          result = result.filter((record) => {
+            const cardStatus = record.cardStatus || record.card_status || record.status;
+            return cardStatus === filterStatus.value;
+          });
         }
 
         if (filterCarrier.value !== 'all') {
@@ -140,6 +151,25 @@
 
         result = result.filter((record) => matchesDateRange(record, filterDate.value));
 
+        const prefix = phonePrefix.value.trim();
+        const suffix = phoneSuffix.value.trim();
+        if (prefix || suffix) {
+          result = result.filter((record) => {
+            const phone = String(record.phone || '');
+            const matchPrefix = prefix ? phone.startsWith(prefix) : false;
+            const matchSuffix = suffix ? phone.endsWith(suffix) : false;
+            if (prefix && suffix) {
+              return phoneLogic.value === 'and'
+                ? (matchPrefix && matchSuffix)
+                : (matchPrefix || matchSuffix);
+            }
+            if (prefix) {
+              return matchPrefix;
+            }
+            return matchSuffix;
+          });
+        }
+
         const query = searchQuery.value.trim().toLowerCase();
         if (!query) {
           return result;
@@ -197,7 +227,21 @@
         syncMountState();
       }
 
-      window.Vue.watch([filterStatus, filterCarrier, filterOutbound, filterDate, searchQuery], handleFilterStateChange);
+      window.Vue.watch([filterStatus, filterCarrier, filterOutbound, filterDate, searchQuery, phonePrefix, phoneSuffix, phoneLogic], handleFilterStateChange);
+
+      window.Vue.watch(phonePrefix, (value) => {
+        const cleaned = String(value).replace(/[^0-9]/g, '').slice(0, 3);
+        if (cleaned !== value) {
+          phonePrefix.value = cleaned;
+        }
+      });
+
+      window.Vue.watch(phoneSuffix, (value) => {
+        const cleaned = String(value).replace(/[^0-9]/g, '').slice(0, 4);
+        if (cleaned !== value) {
+          phoneSuffix.value = cleaned;
+        }
+      });
 
       /**
        * 代码作用（白话）：把当前页码、分页大小和批量勾选状态存回壳层 mountState，保证切走再切回来还能恢复现场；关联文件：F:/Project/xyw_console/app-v2.js；关联逻辑（调用链/消息链/数据流）：列表交互 -> syncMountState() -> moduleMountState.phone -> renderExternalRuntime('phone') 恢复。
@@ -218,8 +262,11 @@
       /**
        * 代码作用（白话）：把不同状态映射成状态点颜色，让正常、异常、外呼能力等字段在列表里更直观；关联文件：F:/Project/xyw_console/app-v2.js；关联逻辑（调用链/消息链/数据流）：status/wechatStatus/outbound -> getStatusClass() -> props.getPhoneStatusDotClass() -> status-dot class。
        */
-      function getStatusClass(status) {
-        return props.getPhoneStatusDotClass(status);
+      /**
+       * ?????????????????????????? `card_status` ??????????????????F:/Project/xyw_console/app-v2.js?F:/Project/xyw_console/src/modules/phone/phone-list-runtime.js?????????/???/?????cardStatus -> getStatusClass() -> props.getPhoneStatusDotClass() -> status-dot class?
+       */
+      function getStatusClass(cardStatus) {
+        return props.getPhoneStatusDotClass(cardStatus);
       }
 
       /**
@@ -233,12 +280,15 @@
        * 代码作用（白话）：把手机号状态和号码保留状态统一翻译成业务文案，方便列表按库表字段直观看；关联文件：F:/Project/xyw_console/src/modules/shared/record-adapters.js；关联逻辑（调用链/消息链/数据流）：normalizePhoneRecord() -> formatStatusText()/formatRetentionText() -> 状态列渲染。
        */
       function formatStatusText(value) {
+        if (value === false || value === 0 || value === '0' || value === 'false' || value === 'disabled' || value === '异常') {
+          return '异常';
+        }
+        if (value === true || value === 1 || value === '1' || value === 'true' || value === 'enabled' || value === '正常') {
+          return '正常';
+        }
         return value ? '正常' : '异常';
       }
 
-      /**
-       * 代码作用（白话）：把号码保留布尔值翻译成“保留/注销”，避免业务同学自己推断 0 和 1；关联文件：F:/Project/xyw_console/src/modules/shared/record-adapters.js；关联逻辑（调用链/消息链/数据流）：normalizePhoneRecord() -> formatRetentionText() -> 号码保留状态列。
-       */
       function formatRetentionText(value) {
         return value ? '保留' : '注销';
       }
@@ -282,6 +332,11 @@
         filterStatus.value = 'all';
         filterCarrier.value = 'all';
         filterOutbound.value = 'all';
+        phonePrefix.value = '';
+        phoneSuffix.value = '';
+        phoneLogic.value = 'and';
+        showBasicFilter.value = false;
+        showPhoneSearch.value = false;
         currentPage.value = 1;
         syncMountState();
       }
@@ -356,6 +411,7 @@
       syncMountState();
 
       return {
+        formatCellText,
         carrierOptions,
         outboundOptions,
         currentPage,
@@ -377,6 +433,11 @@
         filterStatus,
         filterCarrier,
         filterOutbound,
+        phonePrefix,
+        phoneLogic,
+        phoneSuffix,
+        showBasicFilter,
+        showPhoneSearch,
         totalFiltered,
         totalPages,
         loading,
@@ -390,50 +451,71 @@
     },
     template: `
       <div class="table-area table-area-refined">
-        <div class="table-toolbar table-toolbar-refined">
+        <div class="table-toolbar table-toolbar-refined phone-toolbar-main">
           <div class="toolbar-left">
             <div class="toolbar-title-wrap">
               <div class="toolbar-title">全部号卡 ({{ totalFiltered.toLocaleString('zh-CN') }})</div>
             </div>
-            <div class="filter-selects filter-selects-refined" style="display: flex; align-items: center; gap: 8px;">
-              <el-select v-model="filterStatus" class="custom-fselect" style="width: 120px; height: 32px;">
+          </div>
+          <div class="toolbar-right phone-toolbar-actions">
+            <button type="button" class="filter-toggle-btn" :class="{ 'is-active': showBasicFilter }" @click="showBasicFilter = !showBasicFilter">基础筛选</button>
+            <button type="button" class="filter-toggle-btn" :class="{ 'is-active': showPhoneSearch }" @click="showPhoneSearch = !showPhoneSearch">号码搜索</button>
+            <el-input
+              v-model="searchQuery"
+              :placeholder="phoneText.searchPlaceholder"
+              clearable
+              class="phone-search-input"
+              style="width: 220px; height: 32px;"
+            >
+              <template #prefix>
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+              </template>
+            </el-input>
+            <button class="btn btn-primary" type="button" @click="handleAdd" style="height: 32px; padding: 0 16px;">{{ phoneText.add }}</button>
+            <button class="btn-reset btn-reset-refined" type="button" @click="resetTableState">{{ phoneText.reset }}</button>
+          </div>
+        </div>
+        <div v-if="showBasicFilter" class="phone-filter-row">
+          <el-select v-model="filterStatus" class="custom-fselect" style="width: 120px;">
             <el-option label="状态：全部" value="all"></el-option>
             <el-option v-for="label in phoneTableFilterLabels.filter((item) => item !== '全部')" :key="label" :label="label" :value="label"></el-option>
           </el-select>
-              <el-select v-model="filterCarrier" class="custom-fselect" style="width: 140px; height: 32px;">
+          <el-select v-model="filterCarrier" class="custom-fselect" style="width: 140px;">
             <el-option label="运营商：全部" value="all"></el-option>
             <el-option v-for="carrier in carrierOptions" :key="carrier" :label="carrier" :value="carrier"></el-option>
           </el-select>
-              <el-select v-model="filterOutbound" class="custom-fselect" style="width: 150px; height: 32px;">
+          <el-select v-model="filterOutbound" class="custom-fselect" style="width: 150px;">
             <el-option label="外呼：全部" value="all"></el-option>
             <el-option v-for="outbound in outboundOptions" :key="outbound" :label="outbound" :value="outbound"></el-option>
           </el-select>
           <el-date-picker
             v-model="filterDate"
             type="daterange"
-                range-separator="至"
+            range-separator="-"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
-                style="width: 240px; height: 32px;"
+            class="phone-date-range"
           ></el-date-picker>
+        </div>
+        <div v-if="showPhoneSearch" class="phone-filter-row">
           <el-input
-                v-model="searchQuery"
-                :placeholder="phoneText.searchPlaceholder"
+            v-model="phonePrefix"
+            placeholder="前3位"
+            maxlength="3"
             clearable
-                style="width: 260px; height: 32px;"
-              >
-                <template #prefix>
-                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
-                </template>
-              </el-input>
-            </div>
-          </div>
-          <div class="toolbar-right">
-            <div class="toolbar-primary-actions">
-              <button class="btn btn-primary" type="button" @click="handleAdd" style="height: 32px; padding: 0 16px;">{{ phoneText.add }}</button>
-            </div>
-            <button class="btn-reset btn-reset-refined" type="button" @click="resetTableState">{{ phoneText.reset }}</button>
-          </div>
+            style="width: 90px;"
+          ></el-input>
+          <el-select v-model="phoneLogic" style="width: 72px;">
+            <el-option label="与" value="and"></el-option>
+            <el-option label="或" value="or"></el-option>
+          </el-select>
+          <el-input
+            v-model="phoneSuffix"
+            placeholder="后4位"
+            maxlength="4"
+            clearable
+            style="width: 100px;"
+          ></el-input>
         </div>
         <div class="table-wrap table-wrap-refined" v-loading="loading">
           <el-table
@@ -443,8 +525,8 @@
             style="width: 100%"
             class="domain-table domain-table-refined"
             @selection-change="handleSelectionChange"
-            :header-cell-style="{ background: '#fafafa', color: '#4b5563', fontWeight: 500, padding: '12px 20px', borderBottom: '1px solid #f3f4f6' }"
-            :cell-style="{ padding: '12px 20px', borderBottom: '1px solid #f3f4f6', color: '#111827', whiteSpace: 'nowrap' }"
+            :header-cell-style="{ background: 'linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%)', color: '#374151', fontWeight: 600, padding: '14px 20px', borderBottom: '1px solid #e5e7eb' }"
+            :cell-style="{ padding: '14px 20px', borderBottom: '1px solid #f3f4f6', color: '#111827', whiteSpace: 'nowrap' }"
           >
             <el-table-column type="selection" width="50" fixed="left" />
             <el-table-column label="图片" min-width="160">
@@ -456,7 +538,7 @@
                       <div style="display: none; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 11px; color: #94a3b8; background: #f8fafc;">占位图</div>
                     </div>
                   </template>
-                  <div v-else style="width: 52px; height: 52px; border-radius: 10px; border: 1px dashed #cbd5e1; background: #f8fafc; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #94a3b8; flex: 0 0 auto;">占位图</div>
+                  <div v-else style="width: 52px; height: 52px; border-radius: 10px; border: 1px dashed #cbd5e1; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); display: flex; align-items: center; justify-content: center; font-size: 11px; color: #94a3b8; flex: 0 0 auto;">占位图</div>
                 </div>
               </template>
             </el-table-column>
@@ -465,11 +547,12 @@
                 <a href="#" class="domain-link" @click.prevent="focusRow(scope.row.id)">{{ scope.row.phone || '-' }}</a>
               </template>
             </el-table-column>
-            <el-table-column label="真实联系人" min-width="150">
+            <el-table-column label="实名人" min-width="150">
               <template #default="scope">
                 <span :title="scope.row.realPerson || '-'" style="display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ formatCellText(scope.row.realPerson) }}</span>
               </template>
             </el-table-column>
+
             <el-table-column label="ICCID" min-width="220">
               <template #default="scope">
                 <span :title="scope.row.iccid || '-'" style="display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ formatCellText(scope.row.iccid) }}</span>
@@ -483,8 +566,8 @@
             <el-table-column label="号卡状态" min-width="120">
               <template #default="scope">
                 <span class="status-chip-wrap">
-                  <span class="status-dot" :class="getStatusClass(scope.row.status)"></span>
-                  <span>{{ scope.row.status }}</span>
+                  <span class="status-dot" :class="getStatusClass(scope.row.cardStatus || scope.row.card_status || scope.row.status)"></span>
+                  <span>{{ scope.row.cardStatus || scope.row.card_status || scope.row.status }}</span>
                 </span>
               </template>
             </el-table-column>            <el-table-column label="企业微信" min-width="110">
@@ -510,8 +593,8 @@
                 <span :title="scope.row.channelOperator || '-'" style="display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ formatCellText(scope.row.channelOperator) }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="手机号状态" min-width="120">
-              <template #default="scope">{{ formatStatusText(scope.row.numberStatus) }}</template>
+            <el-table-column label="号码状态" min-width="120">
+              <template #default="scope">{{ formatStatusText(scope.row.numberStatus ?? scope.row.mobile_status ?? scope.row.number_status) }}</template>
             </el-table-column>
             <el-table-column label="绑定企业微信" min-width="180">
               <template #default="scope">
@@ -520,7 +603,7 @@
             </el-table-column>            <el-table-column label="操作" width="100" fixed="right">
               <template #default="scope">
                 <div class="action-cluster" style="display: flex; flex-direction: column; align-items: flex-start; gap: 8px;">
-                  <button class="action-pill action-pill-primary" type="button" @click.stop="handleRowAction('view', scope.row.id)" style="border: none; background: transparent; color: #2563eb; cursor: pointer; padding: 0; font-weight: 600; line-height: 1;">查看</button>
+                  <button class="action-pill action-pill-primary" type="button" @click.stop="handleRowAction('view', scope.row.id)" style="border: none; background: transparent; background-image: linear-gradient(90deg, #2563eb, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; cursor: pointer; padding: 0; font-weight: 600; line-height: 1;">查看</button>
                   <button class="action-pill" type="button" @click.stop="handleRowAction('edit', scope.row.id)" style="border: none; background: transparent; color: #4b5563; cursor: pointer; padding: 0; font-weight: 500; line-height: 1;">编辑</button>
                   <button class="action-pill" type="button" @click.stop="handleRowAction('delete', scope.row.id)" style="border: none; background: transparent; color: #ef4444; cursor: pointer; padding: 0; font-weight: 500; line-height: 1;">删除</button>
                 </div>

src/modules/shared/record-adapters.js

@@ -83,11 +83,16 @@
   /**
    * 代码作用（白话）：把手机号原始记录整理成列表、详情抽屉、编辑弹窗共用的统一字段，避免每个组件自己猜字段名；关联文件：F:/Project/xyw_console/app-v2.js、F:/Project/xyw_console/src/modules/phone/phone-list-runtime.js、F:/Project/xyw_console/src/modules/phone/phone-detail-drawer.js、F:/Project/xyw_console/src/modules/phone/phone-add-dialog.js；关联逻辑（调用链/消息链/数据流）：PhoneApiClient/DATA_SOURCES.phone -> normalizePhoneRecord() -> app-v2.js 注入 -> 手机号列表/详情/编辑弹窗。
    */
+  /**
+   * ????????????????????????????????????????????? status ??????????????F:/Project/xyw_console/src/modules/shared/record-adapters.js?F:/Project/xyw_console/src/modules/phone/phone-list-runtime.js?F:/Project/xyw_console/src/modules/phone/phone-add-dialog.js?????????/???/????????? -> normalizePhoneRecord() -> ??/??/?????
+   */
   function normalizePhoneRecord(row) {
     const source = row || {};
     const images = buildPhoneImages(source);
     const cardStatusRaw = source.cardStatus ?? source.card_status ?? source.status;
-    const cardStatus = cardStatusRaw === 0 || cardStatusRaw === '0' || cardStatusRaw === '异常' ? '异常停机' : (cardStatusRaw || '正常');
+    const cardStatus = cardStatusRaw === 0 || cardStatusRaw === '0' || cardStatusRaw === '异常'
+      ? '异常停机'
+      : (cardStatusRaw || '正常');
     const phoneNumber = source.phoneNumber || source.phone_number || source.phone || '';
     const realPerson = source.realPerson || source.real_person || '';
     const channelOperator = source.channelOperator || source.channel_operator || source.carrier || '';
@@ -148,6 +153,7 @@
       packageChange5yuan: packageChangeEnabled,
       package_change_5yuan: packageChangeEnabled,
       numberStatus,
+      mobileStatus: numberStatus,
       mobile_status: numberStatus,
       linkedWecom,
       linked_wecom: linkedWecom,

styles-v2.css

@@ -1150,3 +1150,82 @@
     align-items: center;
     gap: 8px;
 }
+
+/* Phone card filter toggle buttons and collapsible filter rows */
+.phone-toolbar-main {
+    flex-wrap: nowrap;
+}
+
+.phone-toolbar-main .toolbar-left {
+    flex: 0 0 auto;
+    min-width: 0;
+}
+
+.phone-toolbar-actions {
+    flex: 1 1 auto;
+    justify-content: flex-end;
+    gap: 8px;
+    flex-wrap: nowrap;
+}
+
+.filter-toggle-btn {
+    flex: 0 0 auto;
+    height: 32px;
+    padding: 0 14px;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    background: #fff;
+    color: #4b5563;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
+}
+
+.filter-toggle-btn:hover {
+    border-color: #93c5fd;
+    color: #2563eb;
+}
+
+.filter-toggle-btn.is-active {
+    background: #eff6ff;
+    border-color: #3b82f6;
+    color: #2563eb;
+    font-weight: 600;
+}
+
+.phone-search-input {
+    flex: 0 0 220px;
+}
+
+.phone-filter-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    padding: 12px 20px;
+    border-bottom: 1px solid #f3f4f6;
+    background: #fafbfc;
+}
+
+.phone-filter-row .el-select,
+.phone-filter-row .el-date-editor,
+.phone-filter-row .el-input {
+    margin: 0;
+}
+
+.phone-date-range.el-date-editor.el-input__wrapper,
+.phone-date-range {
+    width: 190px !important;
+    flex: 0 0 190px;
+}
+
+.phone-date-range .el-range-input {
+    min-width: 0 !important;
+    width: 68px !important;
+}
+
+.phone-date-range .el-range-separator {
+    padding: 0 2px !important;
+}