refactor(ui): 账号改为平台→账号→资产三层交互(平台卡片入口+展开看名下资产,移除平铺账号区)

2026-08-08 22:16:14 +00:00
parent 1c93ac00eb
commit fcb3153c50
5 changed files with 101 additions and 29 deletions
@@ -247,3 +247,90 @@ const AccountModal = {
    return { store, f, save: saveAccount };
  },
 };
+
+/* 账号查看弹窗：平台 → 账号 → 资产 三层结构，展开账号看名下资产 */
+const AccountsViewModal = {
+  template: `
+  <div v-if="store.accountsModal.show" class="fixed inset-0 bg-black/40 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
+    <div class="bg-white dark:bg-slate-900 w-full md:max-w-lg md:rounded-xl rounded-t-xl max-h-[92vh] overflow-y-auto">
+      <div class="px-5 py-3 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center sticky top-0 bg-white dark:bg-slate-900">
+        <h3 class="font-semibold text-sm">👤 {{ title }}（{{ accountList.length }}）</h3>
+        <div class="flex items-center gap-3">
+          <button @click="add" class="text-xs text-blue-600 dark:text-blue-400">+ 新增账号</button>
+          <button @click="store.accountsModal.show=false" class="text-slate-400 hover:text-slate-600">✕</button>
+        </div>
+      </div>
+      <div class="px-5 py-4">
+        <p v-if="!accountList.length" class="text-xs text-slate-400">暂无账号。一个平台可有多个账号（如代管/公司账号），添加后可在资产表单「所属账号」中选择。</p>
+        <div v-else class="space-y-4">
+          <div v-for="g in groups" :key="g.platform">
+            <div v-if="!singleProvider" class="text-xs font-medium text-slate-400 mb-1">{{ g.platform ? platformName(g.platform) : '未指定平台' }}</div>
+            <div class="divide-y divide-slate-100 dark:divide-slate-800 border border-slate-100 dark:border-slate-800 rounded-lg">
+              <div v-for="a in g.accounts" :key="a.id">
+                <div class="px-3 py-2 flex items-center gap-2">
+                  <button @click="toggle(a.id)" class="text-slate-400 text-xs w-4">{{ expanded[a.id] ? '▾' : '▸' }}</button>
+                  <div class="flex-1 min-w-0">
+                    <div class="text-sm truncate">{{ a.remark || a.name }}</div>
+                    <div class="text-xs text-slate-400 truncate"><span v-if="a.remark">{{ a.name }} · </span>关联 {{ assetsOf(a).length }} 个资产</div>
+                  </div>
+                  <button @click="edit(a)" class="text-xs text-blue-600 dark:text-blue-400">编辑</button>
+                  <button @click="del(a)" class="text-xs text-red-600 dark:text-red-400">删除</button>
+                </div>
+                <div v-if="expanded[a.id]" class="px-3 pb-2 pl-9 space-y-1">
+                  <p v-if="!assetsOf(a).length" class="text-xs text-slate-400">该账号下暂无资产（编辑资产时在「所属账号」选择 {{ a.name }} 即可关联）</p>
+                  <div v-for="asset in assetsOf(a)" :key="asset.id" class="text-xs flex items-center gap-2">
+                    <span class="px-1.5 py-0.5 rounded-full shrink-0" :class="Fmt.typeBadge(asset.asset_type)">{{ Fmt.TYPE_LABELS[asset.asset_type] }}</span>
+                    <span class="truncate">{{ asset.name }}</span>
+                    <span v-if="asset.expiry_date" class="text-slate-400 shrink-0">{{ asset.expiry_date }} 到期</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>`,
+  setup() {
+    const expanded = Vue.reactive({});
+    const singleProvider = Vue.computed(() => !!store.accountsModal.providerSlug);
+    const title = Vue.computed(() => {
+      const slug = store.accountsModal.providerSlug;
+      if (!slug) return '全部账号';
+      const p = store.providers.find(x => x.slug === slug);
+      return (p ? p.name : slug) + ' 的账号';
+    });
+    const accountList = Vue.computed(() => {
+      const slug = store.accountsModal.providerSlug;
+      return slug ? store.accounts.filter(a => a.platform === slug) : store.accounts;
+    });
+    // 全部模式下按平台分组，保持 平台→账号→资产 层级
+    const groups = Vue.computed(() => {
+      const m = new Map();
+      for (const a of accountList.value) {
+        const key = a.platform || '';
+        if (!m.has(key)) m.set(key, []);
+        m.get(key).push(a);
+      }
+      return [...m.entries()].map(([platform, accounts]) => ({ platform, accounts }));
+    });
+    function platformName(slug) {
+      const p = store.providers.find(x => x.slug === slug);
+      return p ? p.name : slug;
+    }
+    function assetsOf(a) {
+      return store.assets.filter(x => x.account === a.name);
+    }
+    function toggle(id) { expanded[id] = !expanded[id]; }
+    // 每次打开重置展开状态
+    Vue.watch(() => store.accountsModal.show, (show) => {
+      if (show) for (const k of Object.keys(expanded)) delete expanded[k];
+    });
+    return {
+      store, Fmt, expanded, singleProvider, title, accountList, groups,
+      platformName, assetsOf, toggle,
+      add: () => openAccountCreate(store.accountsModal.providerSlug || ''),
+      edit: openAccountEdit, del: deleteAccount,
+    };
+  },
+};