feat(ui): 总览/监控中心顶部统计卡片支持点击筛选
- 总览页「总资产」「本年支出」「异常状态」卡片点击跳转资产页并带上对应筛选 (全部/付费资产TAB/异常状态组合筛选);「30天内到期」及「另有N项已过期」 子文案点击跳转监控中心并带上到期区间子筛选 - 监控中心顶部统计卡片(30天/7天/已过期/有到期日)支持点击筛选下方列表, 再点一次取消;SSL 证书卡片(正常/即将到期/已过期或失败)同理 - 资产页状态筛选新增「异常(已停止/已过期)」组合选项:后端 status 只认单值, 该组合作为前端本地筛选哨兵值处理,不发给 API;切到专有视图 TAB 时自动清空 - 顺带修复监控中心统计卡片数字不随类别 TAB 变化的问题(原先 stats 未按 TAB 过滤,与列表数据口径不一致)
This commit is contained in:
@@ -27,6 +27,7 @@ const AssetsView = {
|
||||
<div class="flex flex-wrap gap-2 items-center">
|
||||
<select v-model="store.filterStatus" @change="reload" class="text-sm px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900">
|
||||
<option value="">全部状态</option>
|
||||
<option value="abnormal">异常(已停止/已过期)</option>
|
||||
<option v-for="(l,k) in Fmt.STATUS_LABELS" :key="k" :value="k">{{ l }}</option>
|
||||
</select>
|
||||
<button v-if="store.assetTab===''" @click="syncAllAI" class="text-sm px-3 py-1.5 rounded-lg border border-violet-300 dark:border-violet-700 text-violet-600 dark:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-900/20">同步AI余额</button>
|
||||
@@ -114,15 +115,22 @@ const AssetsView = {
|
||||
if (t === 'ai_agent') return AIAccountsView;
|
||||
return null;
|
||||
});
|
||||
// 通用列表:全部显示所有,VPS 前端过滤类型
|
||||
// 通用列表:全部显示所有,VPS 前端过滤类型;「异常」状态是后端不支持的组合筛选,也走前端过滤
|
||||
const list = Vue.computed(() => {
|
||||
if (store.assetTab === 'vps') return store.assets.filter(a => a.asset_type === 'vps');
|
||||
return store.assets;
|
||||
let arr = store.assets;
|
||||
if (store.assetTab === 'vps') arr = arr.filter(a => a.asset_type === 'vps');
|
||||
if (store.filterStatus === 'abnormal') arr = arr.filter(a => a.status === 'stopped' || a.status === 'expired');
|
||||
return arr;
|
||||
});
|
||||
function switchTab(k) {
|
||||
store.assetTab = k;
|
||||
// 专有视图需要全量数据;若此前按类型过滤过则清空重载
|
||||
if (k !== '' && k !== 'vps' && store.filterType) { store.filterType = ''; loadAssets(); }
|
||||
// 专有视图(域名/Cloudflare/订阅/AI)有自己的筛选逻辑,通用的类型/状态筛选切过去后会失效,
|
||||
// 直接清空避免用户以为筛过了但实际看不出来
|
||||
if (k !== '' && k !== 'vps' && (store.filterType || store.filterStatus)) {
|
||||
store.filterType = '';
|
||||
store.filterStatus = '';
|
||||
loadAssets();
|
||||
}
|
||||
}
|
||||
// 平台筛选标签显示名:filterProvider 存 slug,回退显示原值
|
||||
function providerName(slug) {
|
||||
|
||||
Reference in New Issue
Block a user