From 6881ccc3cd9414e50e83d05793a60f0e34b10e2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Wed, 14 Oct 2026 17:02:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin):=20SecretField=20=E5=AF=86=E9=92=A5?=
 =?UTF-8?q?=E5=9B=9B=E4=BB=B6=E5=A5=97=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 admin/src/views/config/center/SecretField.vue | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 admin/src/views/config/center/SecretField.vue

diff --git a/admin/src/views/config/center/SecretField.vue b/admin/src/views/config/center/SecretField.vue
new file mode 100644
index 0000000..aac5091
--- /dev/null
+++ b/admin/src/views/config/center/SecretField.vue
@@ -0,0 +1,86 @@
+<!--
+  密钥字段四件套（视觉基线 §4.2）：状态徽章（secretFieldState 四态）+
+  密码输入（show-password）+ 清除/恢复保持 + 清除警告文案。
+  提交值计算不在本组件——父层沿用 build*Payload(form, cleared ? '' : masked)
+  （mask.ts secretToSubmit 契约）。
+-->
+<template>
+  <div class="secret-field">
+    <div class="secret-row">
+      <ElInput
+        :model-value="modelValue"
+        type="password"
+        show-password
+        autocomplete="new-password"
+        :placeholder="state.placeholder"
+        class="secret-input"
+        @update:model-value="$emit('update:modelValue', $event)"
+      />
+      <ElTag :type="state.badgeType" size="small" effect="light" class="secret-badge">
+        {{ state.badgeLabel }}
+      </ElTag>
+      <ElButton
+        v-if="masked === MASKED_SENTINEL"
+        size="small"
+        :type="cleared ? 'default' : 'danger'"
+        plain
+        @click="$emit('update:cleared', !cleared)"
+      >
+        {{ cleared ? '恢复保持' : '清除' }}
+      </ElButton>
+    </div>
+    <p v-if="state.badge === 'pending-clear'" class="field-warn">
+      保存后将清除已存密钥（空槽回退平台默认）
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { MASKED_SENTINEL } from '@/api/mask'
+  import { secretFieldState } from './model'
+
+  defineOptions({ name: 'SecretField' })
+
+  const props = defineProps<{
+    /** 用户输入（空串 = 未输入） */
+    modelValue: string
+    /** GET 掩码态（'__SET__' = 库中已有值；'' = 未设置） */
+    masked: string
+    /** 清除开关（true = 提交空串显式清空） */
+    cleared: boolean
+  }>()
+
+  defineEmits<{
+    (e: 'update:modelValue', value: string): void
+    (e: 'update:cleared', value: boolean): void
+  }>()
+
+  const state = computed(() => secretFieldState(props.modelValue, props.masked, props.cleared))
+</script>
+
+<style scoped lang="scss">
+  .secret-field {
+    width: 100%;
+
+    .secret-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .secret-input {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .secret-badge {
+        flex-shrink: 0;
+      }
+    }
+
+    .field-warn {
+      margin: 4px 0 0;
+      font-size: 12px;
+      color: var(--el-color-danger);
+    }
+  }
+</style>