gouki/vps-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
gouki
2026-08-08 22:00:30 +00:00
parent a33a2b71de
commit 1c93ac00eb
3 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/modals.js
+9 -8
View File
@@ -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，回退显示原值
function platformName(slug) {
const p = store.providers.find(x => x.slug === slug);
return p ? p.name : slug;
// 账号候选显示：说明优先，其次平台名（platform 存的是 slug，回退原值）
function accountLabel(a) {
if (a.remark) return a.remark + ' · ' + a.name;
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
+2 -2
View File
@@ -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>