feat(ui): 账号列表以说明为主标题(适配代管场景),账号标识为副;弹窗表单说明字段前置

VERSION

@@ -1 +1 @@
-0.3.0
+0.3.1

static/js/modals.js

@@ -43,7 +43,7 @@ const AssetModal = {
           <label class="block"><span class="text-xs text-slate-500">所属账号</span>
             <input v-model="f.account" list="account-options" placeholder="在「平台」页管理账号" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm">
             <datalist id="account-options">
-              <option v-for="a in store.accounts" :key="a.id" :value="a.name">{{ a.platform ? a.name + '（' + platformName(a.platform) + '）' : a.name }}</option>
+              <option v-for="a in store.accounts" :key="a.id" :value="a.name">{{ accountLabel(a) }}</option>
             </datalist></label>
           <div class="col-span-2 flex gap-5 text-sm text-slate-600 dark:text-slate-300">
             <label class="flex items-center gap-2"><input type="checkbox" v-model="f.auto_renew"> 自动续费</label>
@@ -131,12 +131,13 @@ const AssetModal = {
       const p = store.providers.find(x => x.id === f.value.provider_id);
       if (p) f.value.provider = p.slug;
     }
-    // 账号候选显示平台名：platform 存的是 slug，回退显示原值
+    // 账号候选显示：说明优先，其次平台名（platform 存的是 slug，回退原值）
-    function platformName(slug) {
+    function accountLabel(a) {
-      const p = store.providers.find(x => x.slug === slug);
+      if (a.remark) return a.remark + ' · ' + a.name;
-      return p ? p.name : slug;
+      const p = store.providers.find(x => x.slug === a.platform);
+      return p ? a.name + '（' + p.name + '）' : a.name;
     }
-    return { store, Fmt, f, providersForType, onProviderChange, platformName, save: saveAsset };
+    return { store, Fmt, f, providersForType, onProviderChange, accountLabel, save: saveAsset };
   },
 };
 
@@ -224,6 +225,8 @@ const AccountModal = {
         <button @click="store.accountModal.show=false" class="text-slate-400 hover:text-slate-600">✕</button>
       </div>
       <form @submit.prevent="save" class="px-5 py-4 space-y-3" v-if="f">
+        <label class="block"><span class="text-xs text-slate-500">账号说明（这个账号是干嘛的）</span>
+          <input v-model="f.remark" placeholder="如：XX公司代管账号" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
         <label class="block"><span class="text-xs text-slate-500">账号标识 *（邮箱/用户名）</span>
           <input v-model="f.name" required placeholder="如 you@example.com" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
         <label class="block"><span class="text-xs text-slate-500">所属平台</span>
@@ -231,8 +234,6 @@ const AccountModal = {
             <option value="">未指定</option>
             <option v-for="p in store.providers" :key="p.id" :value="p.slug">{{ p.name }}</option>
           </select></label>
-        <label class="block"><span class="text-xs text-slate-500">备注</span>
-          <textarea v-model="f.remark" rows="2" placeholder="如：主账号/公司账号" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></textarea></label>
         <p v-if="store.accountModal.editing" class="text-xs text-slate-400">修改账号标识后，引用该账号的资产会自动同步更新。</p>
         <div class="flex justify-end gap-2">
           <button type="button" @click="store.accountModal.show=false" class="px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-700 text-sm text-slate-600 dark:text-slate-300">取消</button>

static/js/views/providers.js

@@ -22,10 +22,10 @@ const ProvidersView = {
       <div v-else class="divide-y divide-slate-100 dark:divide-slate-800">
         <div v-for="a in store.accounts" :key="a.id" class="py-2 flex items-center gap-2">
           <div class="flex-1 min-w-0">
-            <div class="text-sm truncate">{{ a.name }}
+            <div class="text-sm truncate">{{ a.remark || a.name }}
               <span v-if="a.platform" class="text-xs text-slate-400">@ {{ platformName(a.platform) }}</span>
             </div>
-            <div class="text-xs text-slate-400">关联 {{ a.asset_count }} 个资产<span v-if="a.remark"> · {{ a.remark }}</span></div>
+            <div class="text-xs text-slate-400 truncate"><span v-if="a.remark">{{ a.name }} · </span>关联 {{ a.asset_count }} 个资产</div>
           </div>
           <button @click="editAccount(a)" class="text-xs text-blue-600 dark:text-blue-400">编辑</button>
           <button @click="delAccount(a)" class="text-xs text-red-600 dark:text-red-400">删除</button>