修改完善这个专利部分

frontend-vue/src/pages/brand/components/BrandApiSecretSettingsButton.vue

@@ -8,33 +8,33 @@
     <el-dialog v-model="dialogVisible" width="560px" class="secret-settings-dialog" :append-to-body="true">
       <template #header>
         <div class="dialog-header">
-          <div class="dialog-title">设置</div>
-          <div class="dialog-subtitle">按当前登录用户保存在本机，可分别管理外观专利和货源查询密钥。</div>
+          <div class="dialog-title">密钥设置</div>
+          <div class="dialog-subtitle">按当前登录用户保存在本机，外观专利和货源查询共用同一个 Coze 接口密钥。</div>
         </div>
       </template>
 
       <div class="secret-settings-body">
-        <section v-for="item in moduleStates" :key="item.moduleKey" class="secret-card">
+        <section class="secret-card">
           <div class="secret-card-head">
             <div>
-              <div class="secret-card-title">{{ item.title }}</div>
-          <div class="secret-card-desc">{{ item.description }}</div>
+              <div class="secret-card-title">通用 Coze 密钥</div>
+              <div class="secret-card-desc">用于外观专利检测和货源查询。</div>
             </div>
             <button
-              v-if="item.exists"
+              v-if="secretState.exists"
               type="button"
               class="link-danger"
-              @click="clearSecret(item.moduleKey)"
+              @click="clearSecret"
             >
               清空
             </button>
           </div>
 
           <input
-            v-model="item.value"
+            v-model="secretState.value"
             class="secret-input"
             type="password"
-            :placeholder="`请输入${item.title}密钥`"
+            placeholder="请输入 Coze 接口密钥"
             autocomplete="off"
             spellcheck="false"
           />
@@ -43,14 +43,14 @@
             <div class="retention-label">保留时长</div>
             <div class="retention-options">
               <label v-for="option in retentionOptions" :key="option.value" class="retention-option">
-                <input v-model="item.retention" type="radio" :value="option.value" />
+                <input v-model="secretState.retention" type="radio" :value="option.value" />
                 <span>{{ option.label }}</span>
               </label>
             </div>
           </div>
 
           <div class="secret-meta">
-            <span v-if="item.exists">{{ formatRetentionText(item.retention, item.expiresAt) }}</span>
+            <span v-if="secretState.exists">{{ formatRetentionText(secretState.retention, secretState.expiresAt) }}</span>
             <span v-else>当前未保存</span>
           </div>
         </section>
@@ -73,14 +73,10 @@ import {
   clearStoredApiSecret,
   getStoredApiSecretSnapshot,
   saveStoredApiSecret,
-  type ApiSecretModuleKey,
   type ApiSecretRetention,
 } from '@/shared/utils/api-secret-store'
 
-type ModuleState = {
-  moduleKey: ApiSecretModuleKey
-  title: string
-  description: string
+type SecretState = {
   value: string
   retention: ApiSecretRetention
   expiresAt: number | null
@@ -90,25 +86,18 @@ type ModuleState = {
 const dialogVisible = ref(false)
 
 const retentionOptions: Array<{ value: ApiSecretRetention; label: string }> = [
-  { value: 'session', label: '仅本次打开有效' },
-  { value: '1d', label: '1天' },
-  { value: '7d', label: '7天' },
-  { value: '30d', label: '30天' },
+  { value: 'session', label: '本次打开有效' },
+  { value: '1d', label: '1 天' },
+  { value: '7d', label: '7 天' },
+  { value: '30d', label: '30 天' },
   { value: 'forever', label: '长期保留' },
 ]
 
-const moduleStates = ref<ModuleState[]>([])
+const secretState = ref<SecretState>(emptySecretState())
 
-function buildModuleState(
-  moduleKey: ApiSecretModuleKey,
-  title: string,
-  description: string,
-): ModuleState {
-  const snapshot = getStoredApiSecretSnapshot(moduleKey)
-  return {
-    moduleKey,
-    title,
-    description,
+function loadStates() {
+  const snapshot = getStoredApiSecretSnapshot()
+  secretState.value = {
     value: snapshot.value,
     retention: snapshot.retention,
     expiresAt: snapshot.expiresAt,
@@ -116,11 +105,13 @@ function buildModuleState(
   }
 }
 
-function loadStates() {
-  moduleStates.value = [
-    buildModuleState('appearance-patent', '外观专利', '用于外观专利检测的 Coze 接口密钥。'),
-    buildModuleState('similar-asin', '货源查询', '用于货源查询的 Coze 接口密钥。'),
-  ]
+function emptySecretState(): SecretState {
+  return {
+    value: '',
+    retention: 'session',
+    expiresAt: null,
+    exists: false,
+  }
 }
 
 function formatRetentionText(retention: ApiSecretRetention, expiresAt: number | null) {
@@ -136,16 +127,14 @@ function formatRetentionText(retention: ApiSecretRetention, expiresAt: number |
   return `有效期至 ${year}-${month}-${day} ${hour}:${minute}`
 }
 
-function clearSecret(moduleKey: ApiSecretModuleKey) {
-  clearStoredApiSecret(moduleKey)
+function clearSecret() {
+  clearStoredApiSecret()
   loadStates()
   ElMessage.success('已清空密钥')
 }
 
 function saveAll() {
-  for (const item of moduleStates.value) {
-    saveStoredApiSecret(item.moduleKey, item.value, item.retention)
-  }
+  saveStoredApiSecret(secretState.value.value, secretState.value.retention)
   loadStates()
   dialogVisible.value = false
   ElMessage.success('密钥设置已保存')
@@ -192,6 +181,45 @@ loadStates()
   line-height: 1;
 }
 
+:global(.secret-settings-dialog) {
+  --el-dialog-bg-color: #171b20;
+  --el-dialog-padding-primary: 20px;
+  overflow: hidden;
+  border: 1px solid #2c3540;
+  border-radius: 14px;
+  background: #171b20;
+  box-shadow: 0 24px 70px rgba(0, 0, 0, .52);
+}
+
+:global(.secret-settings-dialog .el-dialog__header) {
+  padding: 22px 22px 12px;
+  margin: 0;
+  background: #171b20;
+}
+
+:global(.secret-settings-dialog .el-dialog__body) {
+  padding: 12px 22px 16px;
+  background: #171b20;
+}
+
+:global(.secret-settings-dialog .el-dialog__footer) {
+  padding: 0 22px 22px;
+  background: #171b20;
+}
+
+:global(.secret-settings-dialog .el-dialog__headerbtn) {
+  top: 18px;
+  right: 18px;
+}
+
+:global(.secret-settings-dialog .el-dialog__close) {
+  color: #8793a0;
+}
+
+:global(.secret-settings-dialog .el-dialog__close:hover) {
+  color: #d8e3ee;
+}
+
 .dialog-header {
   display: flex;
   flex-direction: column;
@@ -217,10 +245,10 @@ loadStates()
 }
 
 .secret-card {
-  padding: 16px;
-  border: 1px solid #2f363f;
-  border-radius: 12px;
-  background: #22272d;
+  padding: 18px;
+  border: 1px solid #313b46;
+  border-radius: 10px;
+  background: #20252b;
 }
 
 .secret-card-head {
@@ -331,7 +359,11 @@ loadStates()
 }
 
 .footer-btn-primary {
-  background: #5aa2ea;
+  background: #4f8fda;
   color: #fff;
 }
+
+.footer-btn-primary:hover {
+  background: #67a6ed;
+}
 </style>