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/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;
+}