Skip to content

X
xyw_asset_console
Commit af4adb03 by DaiJiezhang
Options

refactor: 列表页去掉重复的标题栏，菜单文案对齐页面标题 

三个列表页顶部的「资产列表 共 N 条」整块去掉，与设备资产管理页保持一致。
总条数底部分页器已经在报，重复一遍只是白占一行高度。

侧边栏「企微资料」改为「企业微信资产」，与页面标题、新增按钮、弹窗标题统一。
其余菜单项已逐个核对与各页 h2 标题一致，只有这一处不对齐。

手机号码管理页支持从地址栏读取 phoneNumber 预筛选，供企业微信资产页的注册
手机号链接跳转使用。

本次提交同时包含手机号码管理页文案由「手机号资产」改为「手机号码管理」的
部分改动——该页的文案替换与上述结构调整改在同一批代码行上，无法干净拆分。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
parent 83ab85f1
Showing with 44 additions and 18 deletions
frontend/src/App.js
......@@ -30,5 +30,5 @@ export default {
return { authState, logout, canVisit, isAdministrator, retryConnection };
},
template: `<main v-if="authState.connectionError" class="auth-network-error" role="alert"><section class="auth-network-error__panel"><h1>网络连接异常</h1><p>暂时无法确认登录状态，请检查网络后重试。</p><button type="button" @click="retryConnection">重新连接</button></section></main><main v-else-if="!authState.ready" class="auth-loading" role="status" aria-live="polite">正在验证登录状态…</main><RouterView v-else-if="$route.path === '/login'" /><div v-else class="app-shell"><aside class="sidebar"><h1>学有为资产后台</h1><nav aria-label="主导航"><RouterLink v-if="canVisit('overview')" to="/overview">总览</RouterLink><RouterLink v-if="canVisit('domain')" to="/domain">域名资料</RouterLink><RouterLink v-if="canVisit('company-profile')" to="/company-profiles">公司档案</RouterLink><RouterLink v-if="canVisit('reference-wecom')" to="/reference/wecom">企微资料</RouterLink><RouterLink v-if="canVisit('phone-assets')" to="/phone-assets">手机号资产</RouterLink><RouterLink v-if="isAdministrator()" to="/device-assets">设备资产管理</RouterLink><RouterLink v-if="canVisit('alerts')" to="/alerts">提醒中心</RouterLink><RouterLink v-if="isAdministrator()" class="settings-link" to="/settings/users-permissions"><span aria-hidden="true">⚙</span> 账号与权限</RouterLink></nav><button class="logout-button" @click="logout">退出登录</button></aside><main class="content"><RouterView /></main></div>`
template: `<main v-if="authState.connectionError" class="auth-network-error" role="alert"><section class="auth-network-error__panel"><h1>网络连接异常</h1><p>暂时无法确认登录状态，请检查网络后重试。</p><button type="button" @click="retryConnection">重新连接</button></section></main><main v-else-if="!authState.ready" class="auth-loading" role="status" aria-live="polite">正在验证登录状态…</main><RouterView v-else-if="$route.path === '/login'" /><div v-else class="app-shell"><aside class="sidebar"><h1>学有为资产后台</h1><nav aria-label="主导航"><RouterLink v-if="canVisit('overview')" to="/overview">总览</RouterLink><RouterLink v-if="canVisit('domain')" to="/domain">域名资料</RouterLink><RouterLink v-if="canVisit('company-profile')" to="/company-profiles">公司档案</RouterLink><RouterLink v-if="canVisit('reference-wecom')" to="/reference/wecom">企业微信资产</RouterLink><RouterLink v-if="canVisit('phone-assets')" to="/phone-assets">手机号码管理</RouterLink><RouterLink v-if="isAdministrator()" to="/device-assets">设备资产管理</RouterLink><RouterLink v-if="canVisit('alerts')" to="/alerts">提醒中心</RouterLink><RouterLink v-if="isAdministrator()" class="settings-link" to="/settings/users-permissions"><span aria-hidden="true">⚙</span> 账号与权限</RouterLink></nav><button class="logout-button" @click="logout">退出登录</button></aside><main class="content"><RouterView /></main></div>`
};
frontend/src/modules/company-profile/CompanyProfileView.js
......@@ -156,7 +156,7 @@ export default {
<section class="phone-asset-list-page company-profile-page">
<header class="phone-asset-list-page__header"><div><h2>公司档案</h2></div><el-button v-if="canEdit" class="phone-asset-list-page__add" type="primary" @click="openCreate">新增公司档案</el-button></header>
<section class="phone-asset-list-page__panel phone-asset-list-page__search"><el-form class="phone-asset-list-page__filters" @submit.prevent="submitSearch"><el-input v-model="filters.keyword" placeholder="公司名称、简称、信用代码、地址、联系人或联系方式" clearable @input="scheduleSearch" @clear="scheduleSearch" @keydown.enter.prevent="submitSearch" /><el-button @click="resetSearch">重置</el-button></el-form></section>
<section class="phone-asset-list-page__panel phone-asset-list-page__table"><header class="phone-asset-list-page__table-header"><h3>公司档案列表</h3><span>共 {{ total }} 条</span></header><div class="phone-asset-list-page__grid-wrap"><el-table v-loading="loading" :data="records" empty-text="暂无匹配数据" class="phone-asset-list-page__grid company-profile-page__grid"><el-table-column label="公司名称" min-width="200"><template #default="{ row }">{{ formatValue(row.companyName) }}</template></el-table-column><el-table-column label="公司简称" min-width="150"><template #default="{ row }">{{ formatValue(row.shortName) }}</template></el-table-column><el-table-column label="统一社会信用代码" min-width="210"><template #default="{ row }">{{ formatValue(row.unifiedSocialCreditCode) }}</template></el-table-column><el-table-column label="地址" min-width="220" show-overflow-tooltip><template #default="{ row }">{{ formatValue(row.address) }}</template></el-table-column><el-table-column label="联系人" min-width="130"><template #default="{ row }">{{ formatValue(row.contactName) }}</template></el-table-column><el-table-column label="联系方式" min-width="170"><template #default="{ row }">{{ formatValue(row.contactValue) }}</template></el-table-column><el-table-column label="创建时间" min-width="180"><template #default="{ row }">{{ formatValue(row.createTime) }}</template></el-table-column><el-table-column label="更新时间" min-width="180"><template #default="{ row }">{{ formatValue(row.updateTime) }}</template></el-table-column></el-table></div><app-pagination :total="total" :page="filters.page" :size="filters.size" @update:page="changePage" @update:size="changePageSize" /></section>
<section class="phone-asset-list-page__panel phone-asset-list-page__table"><div class="phone-asset-list-page__grid-wrap"><el-table v-loading="loading" :data="records" empty-text="暂无匹配数据" class="phone-asset-list-page__grid company-profile-page__grid"><el-table-column label="公司名称" min-width="200"><template #default="{ row }">{{ formatValue(row.companyName) }}</template></el-table-column><el-table-column label="公司简称" min-width="150"><template #default="{ row }">{{ formatValue(row.shortName) }}</template></el-table-column><el-table-column label="统一社会信用代码" min-width="210"><template #default="{ row }">{{ formatValue(row.unifiedSocialCreditCode) }}</template></el-table-column><el-table-column label="地址" min-width="220" show-overflow-tooltip><template #default="{ row }">{{ formatValue(row.address) }}</template></el-table-column><el-table-column label="联系人" min-width="130"><template #default="{ row }">{{ formatValue(row.contactName) }}</template></el-table-column><el-table-column label="联系方式" min-width="170"><template #default="{ row }">{{ formatValue(row.contactValue) }}</template></el-table-column><el-table-column label="创建时间" min-width="180"><template #default="{ row }">{{ formatValue(row.createTime) }}</template></el-table-column><el-table-column label="更新时间" min-width="180"><template #default="{ row }">{{ formatValue(row.updateTime) }}</template></el-table-column></el-table></div><app-pagination :total="total" :page="filters.page" :size="filters.size" @update:page="changePage" @update:size="changePageSize" /></section>
<el-dialog v-model="dialogVisible" class="phone-asset-modal" modal-class="phone-asset-modal-mask" title="新增公司档案" width="560px">
<el-form class="phone-asset-modal__form" label-width="112px" @submit.prevent="submitCreate">
<el-form-item class="phone-asset-modal__form-row" label="公司名称" required><el-input v-model="form.companyName" maxlength="100" autocomplete="off" placeholder="请输入公司名称" /></el-form-item>
......
frontend/src/modules/phone/PhoneAssetView.js
......@@ -5,7 +5,7 @@ import { authState } from '../auth/auth-store.js';
import { createPhoneAsset, deletePhoneAsset, listPhoneAssets, searchLinkableDevices, updatePhoneAsset } from './phone-api-client.js';
/**
* 代码作用（白话）：显示手机号资产列表，并管理新增、编辑、保存和删除弹窗状态。
* 代码作用（白话）：显示手机号码管理列表，并管理新增、编辑、保存和删除弹窗状态。
* 关联文件：phone-api-client.js、PhoneAssetController.java、app.css。
* 关联逻辑（调用链/数据流）：路由进入 -> 页面方法 -> 前端接口客户端 -> 后端接口 -> 列表或弹窗更新。
*/
......@@ -25,9 +25,11 @@ export default {
const editingId = ref(null);
/** 关联设备下拉的候选项；编辑时先塞入当前行的设备，保证未搜索前也能显示名称而不是空白。 */
const deviceOptions = ref([]);
/** 代码作用（白话）：把当前手机号资产权限转换为是否展示写操作；关联文件：auth-store.js、PhoneAssetController.java。关联逻辑（调用链/数据流）：/api/auth/me -> EDIT 判断 -> 新增/编辑/删除控件 -> 后端二次校验。 */
/** 代码作用（白话）：把当前手机号码管理权限转换为是否展示写操作；关联文件：auth-store.js、PhoneAssetController.java。关联逻辑（调用链/数据流）：/api/auth/me -> EDIT 判断 -> 新增/编辑/删除控件 -> 后端二次校验。 */
const canEdit = computed(() => authState.user?.pagePermissions?.['phone-assets'] === 'EDIT');
const filters = reactive({ page: 1, size: 20, phoneNumber: '', iccid: '', realNameOwner: '', disposalStatus: 'ALL' });
/** 代码作用（白话）：读取地址里带过来的号码，让企业微信资产页的「关联方式」链接跳过来时能直接定位到那一条。关联文件：WecomAccountView.js。关联逻辑（调用链/数据流）：Hash 查询参数 -> 初始筛选值 -> 首次 loadPage。 */
const routedPhoneNumber = new URLSearchParams(window.location.hash.split('?')[1] || '').get('phoneNumber') || '';
const filters = reactive({ page: 1, size: 20, phoneNumber: routedPhoneNumber, iccid: '', realNameOwner: '', disposalStatus: 'ALL' });
let searchTimer = null;
let latestRequest = 0;
const form = reactive({
......@@ -41,7 +43,7 @@ export default {
});
/**
* 代码作用（白话）：加载当前筛选条件下的一页手机号资产。
* 代码作用（白话）：加载当前筛选条件下的一页手机号码管理。
* 关联文件：phone-api-client.js、PhoneAssetController.java。
* 关联逻辑（调用链/数据流）：查询/分页/保存成功 -> listPhoneAssets -> GET 接口 -> records 与 total。
*/
......@@ -136,7 +138,7 @@ export default {
}
/**
* 代码作用（白话）：把表单恢复成新增手机号资产时原有的默认值。
* 代码作用（白话）：把表单恢复成新增手机号码管理时原有的默认值。
* 关联文件：PhoneAssetView.js、PhoneAssetSaveRequest.java。
* 关联逻辑（调用链/数据流）：新增按钮 -> resetForm -> form -> 弹窗；保存成功后的下一次新增同样复用。
*/
......@@ -164,7 +166,7 @@ export default {
}
/**
* 代码作用（白话）：打开空白的新增手机号资产弹窗。
* 代码作用（白话）：打开空白的新增手机号码管理弹窗。
* 关联文件：PhoneAssetView.js、phone-api-client.js。
* 关联逻辑（调用链/数据流）：点击新增 -> resetForm -> dialogVisible=true -> Element Plus 弹窗显示。
*/
......@@ -236,7 +238,7 @@ export default {
}
/**
* 代码作用（白话）：要求用户确认后删除一条手机号资产，并按原逻辑刷新列表。
* 代码作用（白话）：要求用户确认后删除一条手机号码管理，并按原逻辑刷新列表。
* 关联文件：phone-api-client.js、PhoneAssetController.java。
* 关联逻辑（调用链/数据流）：删除按钮 -> 确认框 -> DELETE -> 成功提示 -> loadPage。
*/
......@@ -270,7 +272,7 @@ export default {
function changePageSize(size) { filters.size = size; filters.page = 1; loadPage(); }
/**
* 代码作用（白话）：页面首次显示时请求手机号资产列表。
* 代码作用（白话）：页面首次显示时请求手机号码管理列表。
* 关联文件：PhoneAssetView.js、phone-api-client.js。
* 关联逻辑（调用链/数据流）：组件挂载 -> onMounted 回调 -> loadPage -> 列表渲染。
*/
......@@ -319,10 +321,10 @@ export default {
},
template: `
<el-config-provider :locale="elementLocale"><section class="phone-asset-page phone-asset-list-page">
<header class="phone-asset-list-page__header"><h2>手机号资产</h2><el-button v-if="canEdit" class="phone-asset-list-page__add" type="primary" @click="openCreate">新增手机号资产</el-button></header>
<section class="phone-asset-list-page__panel phone-asset-list-page__search" aria-label="筛选手机号资产"><el-form class="phone-asset-list-page__filters" @submit.prevent="submitSearch"><el-input v-model="filters.phoneNumber" maxlength="11" inputmode="numeric" placeholder="手机号前3位、后4位或完整号码" @input="limitSearchPhone" @keydown.enter.prevent="submitSearch" /><el-input v-model="filters.iccid" maxlength="20" placeholder="请输入 ICCID" @input="scheduleSearch" @keydown.enter.prevent="submitSearch" /><el-input v-model="filters.realNameOwner" placeholder="请输入实名人" @input="scheduleSearch" @keydown.enter.prevent="submitSearch" /><el-select v-model="filters.disposalStatus" placeholder="使用状态：" clearable @change="changeStatus" @clear="restoreAllDisposalStatuses"><template #prefix>使用状态：</template><el-option label="全部" value="ALL" /><el-option label="正常" value="正常使用" /><el-option label="闲置" value="闲置" /><el-option label="停机" value="停机" /><el-option label="注销" value="已注销" /></el-select><el-button @click="resetSearch">重置</el-button></el-form></section>
<section class="phone-asset-list-page__panel phone-asset-list-page__table"><header class="phone-asset-list-page__table-header"><h3>资产列表</h3><span>共 {{ total }} 条</span></header><div class="phone-asset-list-page__grid-wrap"><el-table v-loading="loading" :data="records" empty-text="暂无匹配数据" class="phone-asset-list-page__grid"><el-table-column label="手机号" min-width="180"><template #default="{ row }"><span class="phone-asset-list-page__phone"><span class="phone-asset-list-page__phone-text">{{ row.phoneNumber }}</span><el-popover v-if="row.iccid" placement="right" trigger="click" :width="250" popper-class="phone-asset-list-page__iccid-popper"><template #reference><button type="button" class="phone-asset-list-page__iccid-btn" title="查看 ICCID" aria-label="查看 ICCID"><svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><rect x="2" y="3.2" width="12" height="9.6" rx="1.6" /><path d="M5 6.4h6M5 9.2h3.5" /></svg></button></template><div class="phone-asset-list-page__iccid-pop"><span class="phone-asset-list-page__iccid-pop-label">ICCID</span><span class="phone-asset-list-page__iccid-pop-value">{{ row.iccid }}</span></div></el-popover></span></template></el-table-column><el-table-column prop="realNameOwner" label="实名人" min-width="150" show-overflow-tooltip /><el-table-column prop="cardType" label="运营商" min-width="110" show-overflow-tooltip /><el-table-column label="号码类型" min-width="120"><template #default="{ row }"><a v-if="row.numberType === 'EXTERNAL' && row.sourceAssetType === 'WECOM'" class="phone-asset-list-page__external-link" :href="'#/reference/wecom?phoneAssetId=' + row.id">外部号码</a><span v-else>{{ row.numberType === 'EXTERNAL' ? '外部号码' : '自有号码' }}</span></template></el-table-column><el-table-column prop="managementType" label="管理模式" min-width="120" show-overflow-tooltip /><el-table-column label="使用状态" min-width="130"><template #default="{ row }"><span class="phone-asset-list-page__status"><i :class="['phone-asset-list-page__status-dot', row.disposalStatus]"></i>{{ formatDisposalStatus(row.disposalStatus) }}</span></template></el-table-column><el-table-column label="关联设备" min-width="150" show-overflow-tooltip><template #default="{ row }">{{ row.deviceName || '-' }}</template></el-table-column><el-table-column v-if="canEdit" label="操作" width="120"><template #default="{ row }"><span class="phone-asset-list-page__actions"><el-button link @click="openEdit(row)">编辑</el-button><el-button link type="danger" @click="confirmDelete(row)">删除</el-button></span></template></el-table-column></el-table></div><app-pagination :total="total" :page="filters.page" :size="filters.size" @update:page="changePage" @update:size="changePageSize" /></section>
<el-dialog v-model="dialogVisible" class="phone-asset-modal" modal-class="phone-asset-modal-mask" :title="editingId === null ? '新增手机号资产' : '编辑手机号资产'" width="560px" @opened="resetDialogScroll">
<header class="phone-asset-list-page__header"><h2>手机号码管理</h2><el-button v-if="canEdit" class="phone-asset-list-page__add" type="primary" @click="openCreate">新增手机号码管理</el-button></header>
<section class="phone-asset-list-page__panel phone-asset-list-page__search" aria-label="筛选手机号码管理"><el-form class="phone-asset-list-page__filters" @submit.prevent="submitSearch"><el-input v-model="filters.phoneNumber" maxlength="11" inputmode="numeric" placeholder="手机号前3位、后4位或完整号码" @input="limitSearchPhone" @keydown.enter.prevent="submitSearch" /><el-input v-model="filters.iccid" maxlength="20" placeholder="请输入 ICCID" @input="scheduleSearch" @keydown.enter.prevent="submitSearch" /><el-input v-model="filters.realNameOwner" placeholder="请输入实名人" @input="scheduleSearch" @keydown.enter.prevent="submitSearch" /><el-select v-model="filters.disposalStatus" placeholder="使用状态：" clearable @change="changeStatus" @clear="restoreAllDisposalStatuses"><template #prefix>使用状态：</template><el-option label="全部" value="ALL" /><el-option label="正常" value="正常使用" /><el-option label="闲置" value="闲置" /><el-option label="停机" value="停机" /><el-option label="注销" value="已注销" /></el-select><el-button @click="resetSearch">重置</el-button></el-form></section>
<section class="phone-asset-list-page__panel phone-asset-list-page__table"><div class="phone-asset-list-page__grid-wrap"><el-table v-loading="loading" :data="records" empty-text="暂无匹配数据" class="phone-asset-list-page__grid"><el-table-column label="手机号" min-width="180"><template #default="{ row }"><span class="phone-asset-list-page__phone"><span class="phone-asset-list-page__phone-text">{{ row.phoneNumber }}</span><el-popover v-if="row.iccid" placement="right" trigger="click" :width="250" popper-class="phone-asset-list-page__iccid-popper"><template #reference><button type="button" class="phone-asset-list-page__iccid-btn" title="查看 ICCID" aria-label="查看 ICCID"><svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><rect x="2" y="3.2" width="12" height="9.6" rx="1.6" /><path d="M5 6.4h6M5 9.2h3.5" /></svg></button></template><div class="phone-asset-list-page__iccid-pop"><span class="phone-asset-list-page__iccid-pop-label">ICCID</span><span class="phone-asset-list-page__iccid-pop-value">{{ row.iccid }}</span></div></el-popover></span></template></el-table-column><el-table-column prop="realNameOwner" label="实名人" min-width="150" show-overflow-tooltip /><el-table-column prop="cardType" label="运营商" min-width="110" show-overflow-tooltip /><el-table-column label="号码类型" min-width="120"><template #default="{ row }"><a v-if="row.numberType === 'EXTERNAL' && row.sourceAssetType === 'WECOM'" class="phone-asset-list-page__external-link" :href="'#/reference/wecom?phoneAssetId=' + row.id">外部号码</a><span v-else>{{ row.numberType === 'EXTERNAL' ? '外部号码' : '自有号码' }}</span></template></el-table-column><el-table-column prop="managementType" label="管理模式" min-width="120" show-overflow-tooltip /><el-table-column label="使用状态" min-width="130"><template #default="{ row }"><span class="phone-asset-list-page__status"><i :class="['phone-asset-list-page__status-dot', row.disposalStatus]"></i>{{ formatDisposalStatus(row.disposalStatus) }}</span></template></el-table-column><el-table-column label="关联设备" min-width="150" show-overflow-tooltip><template #default="{ row }">{{ row.deviceName || '-' }}</template></el-table-column><el-table-column v-if="canEdit" label="操作" width="120"><template #default="{ row }"><span class="phone-asset-list-page__actions"><el-button link @click="openEdit(row)">编辑</el-button><el-button link type="danger" @click="confirmDelete(row)">删除</el-button></span></template></el-table-column></el-table></div><app-pagination :total="total" :page="filters.page" :size="filters.size" @update:page="changePage" @update:size="changePageSize" /></section>
<el-dialog v-model="dialogVisible" class="phone-asset-modal" modal-class="phone-asset-modal-mask" :title="editingId === null ? '新增手机号码管理' : '编辑手机号码管理'" width="560px" @opened="resetDialogScroll">
<el-form class="phone-asset-modal__form" label-width="96px">
<el-form-item class="phone-asset-modal__form-row" label="手机号" required>
<el-input :model-value="form.phoneNumber" class="phone-asset-modal__count-input" maxlength="11" inputmode="numeric" autocomplete="off" placeholder="请输入手机号" @update:model-value="limitPhoneNumber" @paste="handlePhonePaste">
......
frontend/src/styles/app.css
......@@ -38,7 +38,7 @@ body { margin: 0; }
.reference-card { padding: 24px; border: 1px solid #e2e8f0; border-radius: 14px; background: white; box-shadow: 0 8px 28px rgba(15, 23, 42, .05); }
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
@media (max-width: 760px) { .app-shell { grid-template-columns: 1fr; } .sidebar nav { grid-template-columns: repeat(2, 1fr); } .page-header { display: grid; } .content { padding: 24px; } }
/* 手机号资产弹窗：所有规则均以该弹窗类名开头，避免影响项目中的其他 Element Plus 弹窗。 */
/* 手机号码管理弹窗：所有规则均以该弹窗类名开头，避免影响项目中的其他 Element Plus 弹窗。 */
.phone-asset-modal-mask {
background: rgba(15, 23, 42, 0.34);
}
......@@ -281,7 +281,7 @@ body { margin: 0; }
font-weight: 550;
background: #f4f4f5;
}
/* 手机号资产列表：参考 mobile-number-asset-management-v4.html，仅作用于当前列表页。 */
/* 手机号码管理列表：参考 mobile-number-asset-management-v4.html，仅作用于当前列表页。 */
.phone-asset-list-page { width:100%; max-width:1680px; margin:0 auto; padding:34px 4px 56px; }
.phone-asset-list-page__header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.phone-asset-list-page__header h2 { margin:0; color:#111113; font-size:29px; font-weight:700; line-height:1.25; letter-spacing:-.035em; }
......@@ -311,7 +311,8 @@ body { margin: 0; }
.phone-asset-list-page__iccid-pop-label{color:#8b8b93;font-size:12px;letter-spacing:.02em}
/* ICCID 是长串数字，等宽字体便于逐位核对；allow-select 让用户能直接框选复制。 */
.phone-asset-list-page__iccid-pop-value{color:#18181b;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;word-break:break-all;user-select:text}
.phone-asset-list-page__table { overflow:hidden; }.phone-asset-list-page__table-header{display:flex;align-items:center;gap:9px;min-height:62px;padding:0 22px;border-bottom:1px solid #e5e5e8}.phone-asset-list-page__table-header h3{margin:0;color:#18181b;font-size:15px;font-weight:650}.phone-asset-list-page__table-header span{color:#8b8b93;font-size:13px}
/* 列表卡片不再有"资产列表 共 N 条"标题栏：总条数底部分页器已经在报，重复一遍只是占掉一行高度。 */
.phone-asset-list-page__table { overflow:hidden; }
.phone-asset-list-page__grid .el-table__header th.el-table__cell{height:46px;background:#fafafa;color:#71717a;font-size:13px;font-weight:600}.phone-asset-list-page__grid .el-table__cell{height:56px;color:#3f3f46;font-size:14px}.phone-asset-list-page__grid .el-table__row:hover>td.el-table__cell{background:#fafafa}.phone-asset-list-page__status{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.phone-asset-list-page__status-dot{width:7px;height:7px;border-radius:50%;background:#a1a1aa;box-shadow:0 0 0 3px rgba(161,161,170,.12)}.phone-asset-list-page__status-dot.正常使用{background:#2f9e68;box-shadow:0 0 0 3px rgba(47,158,104,.1)}.phone-asset-list-page__status-dot.闲置,.phone-asset-list-page__status-dot.停机{background:#d28b24;box-shadow:0 0 0 3px rgba(210,139,36,.11)}.phone-asset-list-page__actions{display:inline-flex;gap:14px}.phone-asset-list-page__actions .el-button{padding:0;color:#3f3f46;font-size:13px}.phone-asset-list-page__actions .el-button--danger{color:#e5484d}
/* 列表页统一分页器（AppPagination.js）：容器高度恒定，空数据时按钮灰化但不塌陷，四个列表页共用。 */
.app-pagination{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px;padding:12px 22px;border-top:1px solid #e5e5e8;color:#71717a;font-size:13px}
......@@ -338,6 +339,29 @@ body { margin: 0; }
@media(max-width:900px){.phone-asset-list-page{padding:26px 0 40px}.app-pagination{align-items:flex-start;flex-direction:column;gap:10px}.app-pagination .el-pagination{width:100%;justify-content:space-between}}
@media(max-width:640px){.phone-asset-list-page{padding:20px 0 32px}.phone-asset-list-page__header{align-items:stretch;flex-direction:column;margin-bottom:18px}.phone-asset-list-page__add.el-button{width:100%}.phone-asset-list-page__header h2{font-size:25px}.phone-asset-list-page__search{padding:18px}.phone-asset-list-page__filters,.phone-asset-list-page__filters .el-input,.phone-asset-list-page__filters .el-select,.phone-asset-list-page__filters .el-button{width:100%!important}.phone-asset-list-page__table-header,.app-pagination{padding-left:18px;padding-right:18px}.app-pagination .el-pagination__jump{display:none}}
.wecom-account-page{min-width:0;max-width:100%;overflow-x:hidden}.wecom-account-page .phone-asset-list-page__table,.wecom-account-page__grid{min-width:0;max-width:100%}.wecom-account-page__grid .el-scrollbar__wrap{overflow-x:auto!important}.phone-asset-list-page__external-link{color:#409eff;text-decoration:none}.phone-asset-list-page__external-link:hover{color:#337ecc;text-decoration:none}
/* 企微名称格：别名是名称的补充说明而不是并列字段，压到第二行做浅灰小字，省下一整列宽度给真正要横向对比的信息。 */
.wecom-account-page__name{display:flex;flex-direction:column;gap:2px;min-width:0}
.wecom-account-page__name-main{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wecom-account-page__name-alias{overflow:hidden;color:#a1a1aa;font-size:12px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
/* 性别收成名称右侧的图标：一个字的信息不值得占一整列，图标扫一眼就能分辨，具体文案留在 title 里。 */
.wecom-account-page__name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 男蓝女粉。蓝直接复用全站链接色，只为女性新增一个粉，把新引入的色值压到一个。
同一行右侧还有绿红状态点，所以这两个色只上在 14px 的图标描边上，不铺底色，避免和状态点抢眼。 */
.wecom-account-page__gender{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:14px;height:14px}
.wecom-account-page__gender svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wecom-account-page__gender.is-male{color:#409eff}
.wecom-account-page__gender.is-female{color:#ec4899}
/* 实名状态收成实名人右上角的圆点：只有"正常/异常"两态，颜色就够表达，写成文字反而占一列。
align-items:flex-start 加负的 margin-top 把圆点顶到文字上沿，形成上标而不是并排。 */
.wecom-account-page__owner{display:inline-flex;align-items:flex-start;gap:3px;min-width:0}
.wecom-account-page__owner-main{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wecom-account-page__owner-dot{flex:0 0 auto;width:6px;height:6px;margin-top:1px;border-radius:50%;background:#2f9e68;box-shadow:0 0 0 2.5px rgba(47,158,104,.12)}
.wecom-account-page__owner-dot.is-left{background:#e5484d;box-shadow:0 0 0 2.5px rgba(229,72,77,.12)}
/* 关联方式收成手机号右上角的一字角标：「已」复用链接蓝表示沿用已有资产，「新」用绿表示这条号码是系统新建的。 */
.wecom-account-page__phone{display:inline-flex;align-items:flex-start;gap:4px;min-width:0}
.wecom-account-page__phone-tag{flex:0 0 auto;margin-top:-1px;padding:0 4px;border-radius:4px;font-size:10px;font-weight:600;line-height:15px}
.wecom-account-page__phone-tag.is-existing{color:#3f6ea8;background:#eaf1fb}
.wecom-account-page__phone-tag.is-created{color:#2f7a56;background:#e6f4ec}
/* 登录页视觉微调：输入本体保持透明，玻璃质感由外层承载，避免影响其他业务表单。 */
.login-page {
......@@ -576,7 +600,7 @@ body { margin: 0; }
}
/* 列表页固定高度骨架：宽屏下页面高度锁死在一屏，数据变多只在表格内部滚动；≤640px 回到整页滚动，避免小屏可视行数过少。 */
@media (min-width: 641px) {
/* 手机号资产、企微资料、公司档案三页共用同一套骨架：标题与筛选保持原高度，列表面板吃掉剩余空间。
/* 手机号码管理、企微资料、公司档案三页共用同一套骨架：标题与筛选保持原高度，列表面板吃掉剩余空间。
用 min-height 而不是 height：正常情况刚好一屏、内容区不出滚动条；窗口矮到表格触及最小高度时页面被撑高，改由内容区整页滚动，避免表格被压成一两行。 */
.phone-asset-list-page { display: flex; flex-direction: column; min-height: 100%; padding-bottom: 28px; }
.phone-asset-list-page__header,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment