fix(admin-ui): restore legacy settings and auth surfaces

Author: QLHazyCoder

web/admin/src/layouts/AdminLayout.vue

@@ -38,6 +38,10 @@ const activeAccount = computed(() =>
   accountsQuery.data.value?.accounts.find((account) => account.isActive),
 )
 
+const zhLanguageOptionLabel = computed(() =>
+  locale.value === "zh" ? "\u7b80\u4f53\u4e2d\u6587" : "Simplified Chinese",
+)
+
 function formatAccountType(accountType: AccountType): string {
   if (accountType === "business") {
     return t("accounts.accountTypeBusiness")
@@ -144,7 +148,7 @@ async function handleLogout(): Promise<void> {
             @change="preferencesStore.setLocale(($event.target as HTMLSelectElement).value as 'zh' | 'en')"
           >
             <option value="en">English</option>
-            <option value="zh">简体中文</option>
+            <option value="zh">{{ zhLanguageOptionLabel }}</option>
           </select>
         </div>
 

web/admin/src/pages/LoginPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from "vue"
+import { computed, onBeforeUnmount, onMounted, ref } from "vue"
 import { useI18n } from "vue-i18n"
 import { useRoute, useRouter } from "vue-router"
 
@@ -13,11 +13,34 @@ const { locale, t } = useI18n()
 const noticeStore = useNoticeStore()
 const sessionStore = useSessionStore()
 
+const LOGIN_PAGE_TEXT = {
+  en: {
+    badge: "Admin Access",
+    description:
+      "Enter the management secret to access the copilot-api admin dashboard.",
+    title: "Admin Console Login",
+  },
+  zh: {
+    badge: "\u7ba1\u7406\u8bbf\u95ee",
+    description:
+      "\u8f93\u5165\u7ba1\u7406\u5bc6\u94a5\u4ee5\u8bbf\u95ee copilot-api \u7684\u540e\u53f0\u7ba1\u7406\u9762\u677f\u3002",
+    title: "\u7ba1\u7406\u63a7\u5236\u53f0\u767b\u5f55",
+  },
+} as const
+
 const secret = ref("")
 const secretInput = ref<HTMLInputElement | null>(null)
 const loading = ref(false)
 const errorMessage = ref("")
 
+const zhLanguageOptionLabel = computed(() =>
+  locale.value === "zh" ? "\u7b80\u4f53\u4e2d\u6587" : "Simplified Chinese",
+)
+
+const loginPageText = computed(() =>
+  locale.value === "zh" ? LOGIN_PAGE_TEXT.zh : LOGIN_PAGE_TEXT.en,
+)
+
 onMounted(() => {
   document.body.classList.add("auth-body")
   secretInput.value?.focus()
@@ -30,12 +53,14 @@ onBeforeUnmount(() => {
 async function submit(): Promise<void> {
   errorMessage.value = ""
   const normalizedSecret = secret.value.trim()
+
   if (!normalizedSecret) {
     errorMessage.value = t("auth.invalidSecret")
     return
   }
 
   loading.value = true
+
   try {
     await sessionStore.login(normalizedSecret)
     noticeStore.success(t("auth.loginSuccess"))
@@ -57,17 +82,17 @@ async function submit(): Promise<void> {
     <main class="panel">
       <section class="panel-header">
         <div class="header-top">
-          <span class="eyebrow">{{ t("auth.loginBadge") }}</span>
+          <span class="eyebrow">{{ loginPageText.badge }}</span>
           <div class="language-box">
             <label for="loginLanguageSelect">{{ t("common.language") }}</label>
             <select id="loginLanguageSelect" v-model="locale">
               <option value="en">English</option>
-              <option value="zh">简体中文</option>
+              <option value="zh">{{ zhLanguageOptionLabel }}</option>
             </select>
           </div>
         </div>
-        <h1>{{ t("auth.loginTitle") }}</h1>
-        <p>{{ t("auth.loginCopy") }}</p>
+        <h1>{{ loginPageText.title }}</h1>
+        <p>{{ loginPageText.description }}</p>
       </section>
 
       <section class="panel-body">
@@ -84,8 +109,8 @@ async function submit(): Promise<void> {
               v-model="secret"
               type="password"
               autocomplete="current-password"
-          >
-        </label>
+            >
+          </label>
 
           <button type="submit" :disabled="loading">
             {{ loading ? t("common.loading") : t("auth.submitLogin") }}

web/admin/src/pages/ManualPage.vue

@@ -2,7 +2,7 @@
 import { computed } from "vue"
 import { useI18n } from "vue-i18n"
 
-const { locale, t } = useI18n()
+const { locale } = useI18n()
 
 const manualZhHtml = `<section class="manual-section">
   <div class="manual-section-title">1. 每个端点可用模型</div>
@@ -81,15 +81,25 @@ const manualEnHtml = `<section class="manual-section">
 const manualHtml = computed(() =>
   locale.value === "zh" ? manualZhHtml : manualEnHtml,
 )
+
+const manualTitle = computed(() =>
+  locale.value === "zh" ? "\u4f7f\u7528\u624b\u518c" : "User Manual",
+)
+
+const manualSubtitle = computed(() =>
+  locale.value === "zh" ?
+      "\u7aef\u70b9\u6620\u5c04 + \u8de8\u9879\u76ee\u63a5\u5165"
+    : "Endpoint mapping + cross-project integration",
+)
 </script>
 
 <template>
   <div id="tab-manual" class="tab-content active">
     <div class="card">
       <div class="card-header">
         <div class="settings-header-main">
-          <span class="card-title">{{ t("manual.title") }}</span>
-          <p class="settings-subtitle">{{ t("manual.subtitle") }}</p>
+          <span class="card-title">{{ manualTitle }}</span>
+          <p class="settings-subtitle">{{ manualSubtitle }}</p>
         </div>
       </div>
       <article class="manual-doc" v-html="manualHtml" />

web/admin/src/pages/ModelMappingsPage.vue

@@ -3,7 +3,11 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query"
 import { computed, ref } from "vue"
 import { useI18n } from "vue-i18n"
 
-import { fetchModelMappings, saveModelMapping, deleteModelMapping } from "@/api/mappings"
+import {
+  deleteModelMapping,
+  fetchModelMappings,
+  saveModelMapping,
+} from "@/api/mappings"
 import { fetchAdminModels, fetchPremiumConfig } from "@/api/models"
 import { fetchAdminSettings } from "@/api/settings"
 import { adminQueryKeys } from "@/query/keys"
@@ -18,14 +22,17 @@ const mappingsQuery = useQuery({
   queryKey: adminQueryKeys.mappings,
   queryFn: fetchModelMappings,
 })
+
 const modelsQuery = useQuery({
   queryKey: adminQueryKeys.models,
   queryFn: fetchAdminModels,
 })
+
 const premiumQuery = useQuery({
   queryKey: adminQueryKeys.premiumConfig,
   queryFn: fetchPremiumConfig,
 })
+
 const settingsQuery = useQuery({
   queryKey: adminQueryKeys.settings,
   queryFn: fetchAdminSettings,
@@ -37,7 +44,8 @@ const targetModel = ref("")
 
 const availableModels = computed(() => {
   const hiddenModels = new Set(premiumQuery.data.value?.hiddenModels ?? [])
-  const disableHiddenModels = settingsQuery.data.value?.disableHiddenModels ?? false
+  const disableHiddenModels =
+    settingsQuery.data.value?.disableHiddenModels ?? false
 
   return (modelsQuery.data.value?.data ?? []).filter((model) => {
     if (!disableHiddenModels) {
@@ -48,6 +56,18 @@ const availableModels = computed(() => {
   })
 })
 
+const targetModelSelectDisabled = computed(() =>
+  modelsQuery.isLoading.value
+  || premiumQuery.isLoading.value
+  || settingsQuery.isLoading.value,
+)
+
+const targetModelOptionText = computed(() =>
+  targetModelSelectDisabled.value ?
+      t("mappings.loadingModels")
+    : t("mappings.selectTarget"),
+)
+
 const saveMutation = useMutation({
   mutationFn: async () =>
     saveModelMapping(fromAlias.value.trim(), targetModel.value.trim()),
@@ -113,12 +133,12 @@ function openMappingForm(): void {
 
 <template>
   <div id="tab-model-mappings" class="tab-content active">
-      <div class="card">
-        <div class="card-header">
-          <span class="card-title">{{ t("mappings.title") }}</span>
-          <button type="button" class="btn btn-primary btn-sm" @click="openMappingForm">
-            {{ t("mappings.add") }}
-          </button>
+    <div class="card">
+      <div class="card-header">
+        <span class="card-title">{{ t("mappings.title") }}</span>
+        <button type="button" class="btn btn-primary btn-sm" @click="openMappingForm">
+          {{ t("mappings.add") }}
+        </button>
       </div>
 
       <div class="mapping-form" :class="{ active: formOpen }">
@@ -128,9 +148,13 @@ function openMappingForm(): void {
             class="select mapping-input-inline"
             :placeholder="t('mappings.fromPlaceholder')"
           >
-          <span class="mapping-arrow">→</span>
-          <select v-model="targetModel" class="select mapping-input-inline">
-            <option value="">{{ t("mappings.selectTarget") }}</option>
+          <span class="mapping-arrow" aria-hidden="true">&rarr;</span>
+          <select
+            v-model="targetModel"
+            class="select mapping-input-inline"
+            :disabled="targetModelSelectDisabled"
+          >
+            <option value="">{{ targetModelOptionText }}</option>
             <option v-for="model in availableModels" :key="model.id" :value="model.id">
               {{ model.id }}
             </option>
@@ -186,7 +210,11 @@ function openMappingForm(): void {
                   <button type="button" class="btn btn-sm" @click="copyMapping(from, to)">
                     {{ t("mappings.copy") }}
                   </button>
-                  <button type="button" class="btn btn-danger btn-sm" @click="removeMapping(from)">
+                  <button
+                    type="button"
+                    class="btn btn-danger btn-sm"
+                    @click="removeMapping(from)"
+                  >
                     {{ t("common.delete") }}
                   </button>
                 </div>