From 655673eb991c251d0a9f7f5bedbc6d97d301aed9 Mon Sep 17 00:00:00 2001
From: zizi <ChocoBunrpd@catlover.com>
Date: Tue, 16 Jun 2026 15:55:35 +0000
Subject: [PATCH] =?UTF-8?q?feat(studio-ds):=20P3=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=BA=93=E2=80=94=E2=80=94AppButton=20=E4=BB=A4=E7=89=8C?=
 =?UTF-8?q?=E5=8C=96(grad-primary/on-accent/focus=E7=8E=AF)=20+=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=20Icon(SVG)/Field/AppearanceSwitch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

P3 of HJ-FE-DS-001 金样板。通用品牌组件,P4 接入 Feed/Create/Profile。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 game-studio/src/components/AppButton.vue      |  13 +-
 .../src/components/AppearanceSwitch.vue       | 104 ++++++++++++++++
 game-studio/src/components/Field.vue          | 113 ++++++++++++++++++
 game-studio/src/components/Icon.vue           |  55 +++++++++
 4 files changed, 281 insertions(+), 4 deletions(-)
 create mode 100644 game-studio/src/components/AppearanceSwitch.vue
 create mode 100644 game-studio/src/components/Field.vue
 create mode 100644 game-studio/src/components/Icon.vue

diff --git a/game-studio/src/components/AppButton.vue b/game-studio/src/components/AppButton.vue
index 63882c57..d2c62488 100644
--- a/game-studio/src/components/AppButton.vue
+++ b/game-studio/src/components/AppButton.vue
@@ -77,6 +77,11 @@ function onClick(ev: MouseEvent) {
 .app-btn:active {
   transform: scale(0.98);
 }
+/* —— 键盘聚焦环（无障碍；鼠标点击不触发，仅 :focus-visible）—— */
+.app-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
 
 /* —— 尺寸 —— */
 .app-btn--normal {
@@ -105,9 +110,9 @@ function onClick(ev: MouseEvent) {
    背景 135° cyan→green 渐变 + 重字重 820 + 深色高对比字（#061014）；
    仅 primary 用此渐变与字重，ghost/danger/plain 不受影响。 */
 .app-btn--primary {
-  background: linear-gradient(135deg, var(--cyan), var(--green));
-  color: #061014;
-  font-weight: 820;
+  background: var(--grad-primary);
+  color: var(--on-accent);
+  font-weight: var(--fw-cta);
 }
 /* ghost 透明描边青 */
 .app-btn--ghost {
@@ -118,7 +123,7 @@ function onClick(ev: MouseEvent) {
 /* danger 危险 */
 .app-btn--danger {
   background: var(--danger);
-  color: #2a0608;
+  color: var(--on-danger);
 }
 /* plain 次要面板 */
 .app-btn--plain {
diff --git a/game-studio/src/components/AppearanceSwitch.vue b/game-studio/src/components/AppearanceSwitch.vue
new file mode 100644
index 00000000..ad015967
--- /dev/null
+++ b/game-studio/src/components/AppearanceSwitch.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+/**
+ * AppearanceSwitch —— 外观设置：主题（暗/浅/柔）+ 语言（中/英）分段切换。
+ * 用于「我的/设置」入口。即时持久化 + 全局生效（useAppearance 单例 + i18n）。
+ */
+import { useI18n } from 'vue-i18n'
+import { useAppearance, type ThemeMode, type LangCode } from '../composables/useAppearance'
+import Icon from './Icon.vue'
+
+const { t } = useI18n()
+const { theme, lang, setTheme, setLang } = useAppearance()
+
+// 主题三档（labelKey 走 i18n）
+const themes: { val: ThemeMode; labelKey: string }[] = [
+  { val: 'dark', labelKey: 'appearance.themeDark' },
+  { val: 'light', labelKey: 'appearance.themeLight' },
+  { val: 'dim', labelKey: 'appearance.themeDim' },
+]
+// 语言两档
+const langs: { val: LangCode; labelKey: string }[] = [
+  { val: 'zh-CN', labelKey: 'appearance.langZh' },
+  { val: 'en-US', labelKey: 'appearance.langEn' },
+]
+</script>
+
+<template>
+  <div class="appearance">
+    <div class="appearance__row">
+      <span class="appearance__title"><Icon name="settings" :size="16" /> {{ t('appearance.theme') }}</span>
+      <div class="seg" role="group" :aria-label="t('appearance.theme')">
+        <button
+          v-for="it in themes"
+          :key="it.val"
+          class="seg__btn"
+          :class="{ 'seg__btn--on': theme === it.val }"
+          type="button"
+          @click="setTheme(it.val)"
+        >
+          {{ t(it.labelKey) }}
+        </button>
+      </div>
+    </div>
+    <div class="appearance__row">
+      <span class="appearance__title"><Icon name="globe" :size="16" /> {{ t('appearance.language') }}</span>
+      <div class="seg" role="group" :aria-label="t('appearance.language')">
+        <button
+          v-for="it in langs"
+          :key="it.val"
+          class="seg__btn"
+          :class="{ 'seg__btn--on': lang === it.val }"
+          type="button"
+          @click="setLang(it.val)"
+        >
+          {{ t(it.labelKey) }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.appearance {
+  display: grid;
+  gap: var(--sp-3);
+}
+.appearance__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-3);
+  flex-wrap: wrap;
+}
+.appearance__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-body);
+  color: var(--ink);
+  font-weight: var(--fw-label);
+}
+.seg {
+  display: inline-flex;
+  border: 1px solid var(--border-2);
+  border-radius: var(--radius-md);
+  padding: 3px;
+  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
+}
+.seg__btn {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-weight: var(--fw-label);
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: 0.18s ease;
+}
+.seg__btn--on {
+  background: var(--grad-primary);
+  color: var(--on-accent);
+}
+</style>
diff --git a/game-studio/src/components/Field.vue b/game-studio/src/components/Field.vue
new file mode 100644
index 00000000..8f0112a1
--- /dev/null
+++ b/game-studio/src/components/Field.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+/**
+ * Field —— 通用表单字段（label + input/textarea + 错误/帮助文案 + 聚焦环）。
+ * 统一替代散落 3 份手搓 .field 块（Detail/BizCreate/BizLeadDetail）。v-model 双向绑定。
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** 绑定值（v-model） */
+    modelValue?: string
+    /** 字段标签 */
+    label?: string
+    /** 控件类型 */
+    type?: 'text' | 'textarea' | 'tel' | 'number'
+    /** 占位符 */
+    placeholder?: string
+    /** 错误文案（非空时进入错误态，红框 + 红字） */
+    error?: string
+    /** 常驻帮助文案（无错误时显示） */
+    helper?: string
+    /** 必填标记 */
+    required?: boolean
+    /** textarea 行数 */
+    rows?: number
+  }>(),
+  { modelValue: '', type: 'text', rows: 4 },
+)
+
+const emit = defineEmits<{ (e: 'update:modelValue', v: string): void }>()
+
+const isTextarea = computed(() => props.type === 'textarea')
+
+function onInput(e: Event): void {
+  emit('update:modelValue', (e.target as HTMLInputElement | HTMLTextAreaElement).value)
+}
+</script>
+
+<template>
+  <div class="field" :class="{ 'field--error': !!error }">
+    <label v-if="label" class="field__label">
+      {{ label }}<span v-if="required" class="field__req" aria-hidden="true">*</span>
+    </label>
+    <textarea
+      v-if="isTextarea"
+      class="field__ctrl"
+      :rows="rows"
+      :value="modelValue"
+      :placeholder="placeholder"
+      @input="onInput"
+    ></textarea>
+    <input
+      v-else
+      class="field__ctrl"
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      @input="onInput"
+    />
+    <span v-if="error" class="field__msg field__msg--error">{{ error }}</span>
+    <span v-else-if="helper" class="field__msg">{{ helper }}</span>
+  </div>
+</template>
+
+<style scoped>
+.field {
+  display: grid;
+  gap: 6px;
+}
+.field__label {
+  font-size: 13px;
+  color: var(--muted);
+  font-weight: var(--fw-medium);
+}
+.field__req {
+  color: var(--danger);
+  margin-left: 3px;
+}
+.field__ctrl {
+  width: 100%;
+  color: var(--ink);
+  font: inherit;
+  background: color-mix(in srgb, var(--bg) 72%, transparent);
+  border: 1px solid var(--border-2);
+  border-radius: var(--radius-md);
+  padding: 11px 12px;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease;
+}
+.field__ctrl::placeholder {
+  color: color-mix(in srgb, var(--muted) 75%, transparent);
+}
+.field__ctrl:focus {
+  outline: none;
+  border-color: color-mix(in srgb, var(--accent) 76%, transparent);
+  box-shadow: var(--focus-ring);
+}
+textarea.field__ctrl {
+  min-height: 96px;
+  line-height: 1.55;
+  resize: vertical;
+}
+.field--error .field__ctrl {
+  border-color: var(--danger);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent);
+}
+.field__msg {
+  font-size: var(--fs-caption);
+  color: var(--muted);
+}
+.field__msg--error {
+  color: var(--danger);
+}
+</style>
diff --git a/game-studio/src/components/Icon.vue b/game-studio/src/components/Icon.vue
new file mode 100644
index 00000000..9eeb3b10
--- /dev/null
+++ b/game-studio/src/components/Icon.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+/**
+ * Icon —— 统一 SVG 图标（lucide 取向，1.75 描边，currentColor 跟随文字色）。
+ * 替代散落的 emoji / Unicode 字形（满足设计体系 no-emoji-icons 红线）。
+ * 用法：<Icon name="play" :size="20" />。新增图标在 PATHS 注册即可。
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{ name: string; size?: number }>(), { size: 20 })
+
+// 图标内容（viewBox 0 0 24 24，stroke=currentColor）。值为内联 SVG 子元素片段。
+const PATHS: Record<string, string> = {
+  feed: '<rect x="3" y="3" width="18" height="18" rx="3"/><path d="M3 9h18M9 9v12"/>',
+  create: '<path d="M12 5v14M5 12h14"/>',
+  message: '<path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"/>',
+  me: '<circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/>',
+  heart: '<path d="M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 0 0-7.1 7.1L12 21l8.8-8.3a5 5 0 0 0 0-7.1z"/>',
+  star: '<path d="m12 3 2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 18l-5.8 3.4 1.1-6.5L2.6 9.8l6.5-.9z"/>',
+  share: '<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/>',
+  play: '<path d="M7 4v16l13-8z"/>',
+  back: '<path d="M15 18l-6-6 6-6"/>',
+  chevron: '<path d="M9 6l6 6-6 6"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  spark: '<path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M18 6l-2.5 2.5M8.5 15.5 6 18"/>',
+  settings: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>',
+  globe: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z"/>',
+}
+
+// 找不到的图标渲染空 svg（不报错）
+const inner = computed(() => PATHS[props.name] ?? '')
+</script>
+
+<template>
+  <!-- v-html 注入路径片段（现代 webview 对 svg innerHTML 在 SVG 命名空间解析） -->
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    v-html="inner"
+  ></svg>
+</template>
+
+<style scoped>
+.icon {
+  display: block;
+  flex: none;
+}
+</style>