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>