From 1569ddc0946246a295855dceed1ffe618a8aaf45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E6=A2=A6?= <limeng@apemoon.com>
Date: Sun, 3 May 2026 13:57:54 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icon/shengy.svg          |   8 +
 src/assets/icon/shengyN.svg         |   8 +
 src/assets/icon/zhanghao.svg        |   5 +
 src/assets/icon/zhanghaoN.svg       |   5 +
 src/components/layout/AppHeader.vue |  10 +-
 src/router/index.ts                 |   6 +
 src/views/settings/index.vue        | 677 ++++++++++++++++++++++++++++
 7 files changed, 717 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/icon/shengy.svg
 create mode 100644 src/assets/icon/shengyN.svg
 create mode 100644 src/assets/icon/zhanghao.svg
 create mode 100644 src/assets/icon/zhanghaoN.svg
 create mode 100644 src/views/settings/index.vue

diff --git a/src/assets/icon/shengy.svg b/src/assets/icon/shengy.svg
new file mode 100644
index 0000000..7b55b15
--- /dev/null
+++ b/src/assets/icon/shengy.svg
@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_218_98479" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.002 27.1322C18.002 27.9309 17.1118 28.4073 16.4473 27.9642L6.25388 21.1687C6.08961 21.0591 5.8966 21.0007 5.69918 21.0007H2.00195C1.44967 21.0007 1.00195 20.553 1.00195 20.0007V10.0007C1.00195 9.44842 1.44967 9.0007 2.00195 9.0007H5.7316C5.90866 9.0007 6.08254 8.9537 6.23548 8.86448L16.4981 2.87796C17.1647 2.48908 18.002 2.96995 18.002 3.74174V27.1322Z"/>
+</mask>
+<path d="M6.25388 21.1687L4.77283 23.3902L6.25388 21.1687ZM16.4473 27.9642L14.9662 30.1858V30.1858L16.4473 27.9642ZM16.4473 27.9642L17.9283 25.7427L7.73493 18.9471L6.25388 21.1687L4.77283 23.3902L14.9662 30.1858L16.4473 27.9642ZM5.69918 21.0007V18.3307H2.00195V21.0007V23.6707H5.69918V21.0007ZM1.00195 20.0007H3.67195V10.0007H1.00195H-1.66805V20.0007H1.00195ZM2.00195 9.0007V11.6707H5.7316V9.0007V6.3307H2.00195V9.0007ZM6.23548 8.86448L7.58081 11.1708L17.8434 5.18425L16.4981 2.87796L15.1527 0.571672L4.89014 6.55819L6.23548 8.86448ZM18.002 3.74174H15.332V27.1322H18.002H20.672V3.74174H18.002ZM16.4981 2.87796L17.8434 5.18425C16.7301 5.83369 15.332 5.03063 15.332 3.74174H18.002H20.672C20.672 0.909273 17.5994 -0.855531 15.1527 0.571672L16.4981 2.87796ZM5.7316 9.0007V11.6707C6.38139 11.6707 7.01954 11.4982 7.58081 11.1708L6.23548 8.86448L4.89014 6.55819C5.14554 6.40921 5.43592 6.3307 5.7316 6.3307V9.0007ZM1.00195 10.0007H3.67195C3.67195 10.923 2.92427 11.6707 2.00195 11.6707V9.0007V6.3307C-0.0249311 6.3307 -1.66805 7.97382 -1.66805 10.0007H1.00195ZM2.00195 21.0007V18.3307C2.92427 18.3307 3.67195 19.0784 3.67195 20.0007H1.00195H-1.66805C-1.66805 22.0276 -0.0249323 23.6707 2.00195 23.6707V21.0007ZM6.25388 21.1687L7.73493 18.9471C7.13207 18.5452 6.42373 18.3307 5.69918 18.3307V21.0007V23.6707C5.36948 23.6707 5.04715 23.5731 4.77283 23.3902L6.25388 21.1687ZM16.4473 27.9642L14.9662 30.1858C17.4051 31.8118 20.672 30.0634 20.672 27.1322H18.002H15.332C15.332 25.7984 16.8185 25.0028 17.9283 25.7427L16.4473 27.9642Z" fill="black" mask="url(#path-1-inside-1_218_98479)"/>
+<path d="M20 11C22.1238 11.5771 23.6857 13.5189 23.6857 15.8255C23.6857 18.1321 22.1238 20.0738 20 20.6509" stroke="#2D6FE0" stroke-width="2.67"/>
+<path d="M23 8C26.4574 8.95675 29 12.176 29 16C29 19.824 26.4574 23.0433 23 24" stroke="black" stroke-width="2.67"/>
+</svg>
diff --git a/src/assets/icon/shengyN.svg b/src/assets/icon/shengyN.svg
new file mode 100644
index 0000000..ac0e717
--- /dev/null
+++ b/src/assets/icon/shengyN.svg
@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_218_98261" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.002 27.1322C18.002 27.9309 17.1118 28.4073 16.4473 27.9642L6.00224 21.0009C6.00206 21.0008 6.00195 21.0006 6.00195 21.0003C6.00195 21 6.00167 20.9997 6.00132 20.9997H2.00195C1.44967 20.9997 1.00195 20.552 1.00195 19.9997V9.99971C1.00195 9.44742 1.44967 8.99971 2.00195 8.99971H5.73355C5.91061 8.99971 6.08449 8.9527 6.23743 8.86348L16.4981 2.87797C17.1647 2.48907 18.002 2.96994 18.002 3.74174V27.1322Z"/>
+</mask>
+<path d="M16.4981 2.87797L15.1527 0.571691L16.4981 2.87797ZM6.00224 21.0009L4.52119 23.2224L6.00224 21.0009ZM16.4473 27.9642L14.9662 30.1858L16.4473 27.9642ZM16.4473 27.9642L17.9283 25.7426L7.48329 18.7793L6.00224 21.0009L4.52119 23.2224L14.9662 30.1858L16.4473 27.9642ZM6.00132 20.9997V18.3297H2.00195V20.9997V23.6697H6.00132V20.9997ZM1.00195 19.9997H3.67195V9.99971H1.00195H-1.66805V19.9997H1.00195ZM2.00195 8.99971V11.6697H5.73355V8.99971V6.32971H2.00195V8.99971ZM6.23743 8.86348L7.58279 11.1698L17.8434 5.18424L16.4981 2.87797L15.1527 0.571691L4.89207 6.5572L6.23743 8.86348ZM18.002 3.74174H15.332V27.1322H18.002H20.672V3.74174H18.002ZM16.4981 2.87797L17.8434 5.18424C16.7301 5.83369 15.332 5.03064 15.332 3.74174H18.002H20.672C20.672 0.909245 17.5993 -0.85554 15.1527 0.571691L16.4981 2.87797ZM5.73355 8.99971V11.6697C6.38335 11.6697 7.02151 11.4972 7.58279 11.1698L6.23743 8.86348L4.89207 6.5572C5.14748 6.40821 5.43787 6.32971 5.73355 6.32971V8.99971ZM1.00195 9.99971H3.67195C3.67195 10.922 2.92427 11.6697 2.00195 11.6697V8.99971V6.32971C-0.0249311 6.32971 -1.66805 7.97282 -1.66805 9.99971H1.00195ZM2.00195 20.9997V18.3297C2.92427 18.3297 3.67195 19.0774 3.67195 19.9997H1.00195H-1.66805C-1.66805 22.0266 -0.0249323 23.6697 2.00195 23.6697V20.9997ZM6.00195 21.0003H8.67195C8.67195 19.5254 7.47627 18.3297 6.00132 18.3297V20.9997V23.6697C4.52707 23.6697 3.33195 22.4746 3.33195 21.0003H6.00195ZM6.00224 21.0009L7.48329 18.7793C8.22601 19.2744 8.67195 20.108 8.67195 21.0003H6.00195H3.33195C3.33195 21.8931 3.77811 22.7271 4.52119 23.2224L6.00224 21.0009ZM16.4473 27.9642L14.9662 30.1858C17.4051 31.8117 20.672 30.0634 20.672 27.1322H18.002H15.332C15.332 25.7983 16.8185 25.0028 17.9283 25.7426L16.4473 27.9642Z" fill="#999999" mask="url(#path-1-inside-1_218_98261)"/>
+<path d="M20 11C22.1238 11.5771 23.6857 13.5189 23.6857 15.8255C23.6857 18.1321 22.1238 20.0738 20 20.6509" stroke="#999999" stroke-width="2.67"/>
+<path d="M23 8C26.4574 8.95675 29 12.176 29 16C29 19.824 26.4574 23.0433 23 24" stroke="#999999" stroke-width="2.67"/>
+</svg>
diff --git a/src/assets/icon/zhanghao.svg b/src/assets/icon/zhanghao.svg
new file mode 100644
index 0000000..5e262d6
--- /dev/null
+++ b/src/assets/icon/zhanghao.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9.00297" y="2.70805" width="13.9967" height="13.9967" rx="6.99833" stroke="black" stroke-width="2.67"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3681 28.0105H27.6105C27.8309 28.0105 28.0101 27.8167 28.0101 27.5764V22.6733C28.0101 22.5193 27.9344 22.3746 27.8096 22.2976C23.7934 19.7724 19.821 18.4434 15.9985 18.3411C12.1747 18.4434 8.20365 19.7724 4.18609 22.2976C4.06133 22.3746 3.98568 22.5193 3.98568 22.6733V27.5764C3.98568 27.8167 4.16618 28.0105 4.3865 28.0105H15.3681ZM2.66537 30.6663C1.92899 30.6663 1.33203 30.0694 1.33203 29.333V22.6738C1.33203 21.5984 1.87089 20.6173 2.77474 20.049C7.06173 17.3565 11.3447 15.8961 15.5202 15.7023V15.6797L16.4772 15.7023C20.6527 15.8961 24.9357 17.3565 29.2227 20.049C30.1265 20.6173 30.6654 21.5984 30.6654 22.6738V29.333C30.6654 30.0694 30.0684 30.6663 29.332 30.6663H2.66537Z" fill="black"/>
+<rect x="18" y="23" width="8" height="3" fill="#2D6FE0"/>
+</svg>
diff --git a/src/assets/icon/zhanghaoN.svg b/src/assets/icon/zhanghaoN.svg
new file mode 100644
index 0000000..3e8affc
--- /dev/null
+++ b/src/assets/icon/zhanghaoN.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9.00297" y="2.70805" width="13.9967" height="13.9967" rx="6.99833" stroke="#999999" stroke-width="2.67"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3681 28.0105H27.6105C27.8309 28.0105 28.0101 27.8167 28.0101 27.5764V22.6733C28.0101 22.5193 27.9344 22.3746 27.8096 22.2976C23.7934 19.7724 19.821 18.4434 15.9985 18.3411C12.1747 18.4434 8.20365 19.7724 4.18609 22.2976C4.06133 22.3746 3.98568 22.5193 3.98568 22.6733V27.5764C3.98568 27.8167 4.16618 28.0105 4.3865 28.0105H15.3681ZM2.66537 30.6663C1.92899 30.6663 1.33203 30.0694 1.33203 29.333V22.6738C1.33203 21.5984 1.87089 20.6173 2.77474 20.049C7.06173 17.3565 11.3447 15.8961 15.5202 15.7023V15.6797L16.4772 15.7023C20.6527 15.8961 24.9357 17.3565 29.2227 20.049C30.1265 20.6173 30.6654 21.5984 30.6654 22.6738V29.333C30.6654 30.0694 30.0684 30.6663 29.332 30.6663H2.66537Z" fill="#999999"/>
+<rect x="18" y="23" width="8" height="3" fill="#999999"/>
+</svg>
diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue
index 7ea341c..037aefc 100644
--- a/src/components/layout/AppHeader.vue
+++ b/src/components/layout/AppHeader.vue
@@ -18,7 +18,13 @@
       </button>
       <div class="divider" />
       <div class="action-list">
-        <button v-for="item in actions" :key="item.label" class="action-item" type="button">
+        <button
+          v-for="item in actions"
+          :key="item.label"
+          class="action-item"
+          type="button"
+          @click="item.routeName && router.push({ name: item.routeName })"
+        >
           <span class="action-icon">
             <img
               v-if="item.iconSrc"
@@ -50,7 +56,7 @@ const actions = [
   { label: '作业', icon: '□', iconSrc: xinxiangIcon, badge: 1 },
   { label: '信箱', icon: '✉', iconSrc: xinxiangIcon, badge: 1 },
   { label: '活动', icon: '▣', iconSrc: huodongIcon, badge: 1 },
-  { label: '设置', icon: '⚙', iconSrc: setupIcon, badge: 0 },
+  { label: '设置', icon: '⚙', iconSrc: setupIcon, badge: 0, routeName: 'settings' },
 ]
 
 const goToProfile = () => {
diff --git a/src/router/index.ts b/src/router/index.ts
index b2495fa..580ffe0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -15,6 +15,12 @@ const router = createRouter({
       component: () => import('@/views/Profile.vue'),
       meta: { hideLayout: true },
     },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: () => import('@/views/settings/index.vue'),
+      meta: { hideLayout: true },
+    },
     {
       path: '/subjects/student-management',
       name: 'student-management',
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
new file mode 100644
index 0000000..6501983
--- /dev/null
+++ b/src/views/settings/index.vue
@@ -0,0 +1,677 @@
+ <template>
+  <div class="settings-page">
+    <header class="settings-header">
+      <button class="back-btn" type="button" aria-label="返回" @click="router.back()">
+        <svg class="back-icon" viewBox="0 0 28 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M21 4L6 23L21 42"
+            stroke="#111827"
+            stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+      <span class="page-title">设置</span>
+    </header>
+
+    <PageFrame section-class="settings-frame">
+      <section class="settings-card">
+        <aside class="settings-tabs">
+          <button
+            v-for="tab in tabs"
+            :key="tab.value"
+            class="tab-btn"
+            :class="{ active: activeTab === tab.value }"
+            type="button"
+            @click="activeTab = tab.value"
+          >
+            <span class="tab-mark"></span>
+            <img
+              class="tab-icon"
+              :src="activeTab === tab.value ? tab.activeIcon : tab.inactiveIcon"
+              :alt="tab.label"
+            />
+            <span>{{ tab.label }}</span>
+          </button>
+        </aside>
+
+        <main class="settings-main">
+          <template v-if="activeTab === 'account'">
+            <section class="settings-panel account-panel">
+              <h2>账号</h2>
+              <div class="account-line">
+                <span>账号：123453147358</span>
+                <button class="change-password" type="button" @click="showPasswordDialog = true">
+                  <svg viewBox="0 0 24 24" fill="none">
+                    <path
+                      d="M4.8 16.7 16.6 4.9a2 2 0 0 1 2.8 0l.2.2a2 2 0 0 1 0 2.8L7.8 19.7l-3.7.7.7-3.7Z"
+                      stroke="currentColor"
+                      stroke-width="1.7"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                  修改密码
+                </button>
+              </div>
+            </section>
+
+            <section class="settings-panel switch-panel">
+              <h2>切换账号</h2>
+              <div class="avatar-list">
+                <button
+                  v-for="account in accounts"
+                  :key="account.id"
+                  class="avatar-btn"
+                  :class="{ active: currentAccount === account.id }"
+                  type="button"
+                  :aria-label="`切换到账号${account.id}`"
+                  @click="currentAccount = account.id"
+                >
+                  <span class="avatar-face">
+                    <span class="hair hair-left"></span>
+                    <span class="hair hair-right"></span>
+                    <span class="face"></span>
+                    <span class="bangs"></span>
+                    <span class="eye eye-left"></span>
+                    <span class="eye eye-right"></span>
+                    <span class="mouth"></span>
+                    <span class="body"></span>
+                  </span>
+                </button>
+                <button class="add-account" type="button" aria-label="添加账号">+</button>
+              </div>
+            </section>
+
+            <button class="logout-btn" type="button">
+              <svg viewBox="0 0 24 24" fill="none">
+                <path
+                  d="M10 6H6.8A1.8 1.8 0 0 0 5 7.8v8.4A1.8 1.8 0 0 0 6.8 18H10"
+                  stroke="currentColor"
+                  stroke-width="1.8"
+                  stroke-linecap="round"
+                />
+                <path
+                  d="M13.5 8.2 17.3 12l-3.8 3.8M8.8 12h8.1"
+                  stroke="currentColor"
+                  stroke-width="1.8"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              退出登录
+            </button>
+          </template>
+
+          <section v-else class="settings-panel speed-panel">
+            <h2>播放速率</h2>
+            <div class="speed-options">
+              <button
+                v-for="speed in speeds"
+                :key="speed"
+                class="speed-btn"
+                :class="{ active: selectedSpeed === speed }"
+                type="button"
+                @click="selectedSpeed = speed"
+              >
+                {{ speed }}
+              </button>
+            </div>
+          </section>
+        </main>
+      </section>
+    </PageFrame>
+
+    <div v-if="showPasswordDialog" class="dialog-mask">
+      <section class="password-dialog" role="dialog" aria-modal="true" aria-labelledby="password-title">
+        <h2 id="password-title">修改密码</h2>
+
+        <label v-for="field in passwordFields" :key="field.key" class="password-row">
+          <span>{{ field.label }}：</span>
+          <input
+            v-model="passwordForm[field.key]"
+            :type="visiblePasswords[field.key] ? 'text' : 'password'"
+            :placeholder="field.placeholder"
+          />
+          <button
+            class="visible-btn"
+            type="button"
+            :aria-label="visiblePasswords[field.key] ? '隐藏密码' : '显示密码'"
+            @click="visiblePasswords[field.key] = !visiblePasswords[field.key]"
+          >
+            <svg v-if="visiblePasswords[field.key]" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M2.8 12s3.2-5.4 9.2-5.4S21.2 12 21.2 12 18 17.4 12 17.4 2.8 12 2.8 12Z"
+                stroke="currentColor"
+                stroke-width="1.7"
+              />
+              <circle cx="12" cy="12" r="2.6" stroke="currentColor" stroke-width="1.7" />
+            </svg>
+            <svg v-else viewBox="0 0 24 24" fill="none">
+              <path
+                d="M3.2 3.6 20.8 20.4M9.7 5.2a10.5 10.5 0 0 1 2.3-.26c6 0 9.2 5.4 9.2 5.4a15 15 0 0 1-3.1 3.55M6.2 7.1A15 15 0 0 0 2.8 12s3.2 5.4 9.2 5.4c1.4 0 2.65-.3 3.73-.76"
+                stroke="currentColor"
+                stroke-width="1.7"
+                stroke-linecap="round"
+              />
+              <path
+                d="M10.2 10.5a2.6 2.6 0 0 0 3.3 3.3"
+                stroke="currentColor"
+                stroke-width="1.7"
+                stroke-linecap="round"
+              />
+            </svg>
+          </button>
+        </label>
+
+        <div class="dialog-actions">
+          <button class="cancel-btn" type="button" @click="showPasswordDialog = false">取消</button>
+          <button class="confirm-btn" type="button" @click="showPasswordDialog = false">确认</button>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import PageFrame from '@/components/layout/PageFrame.vue'
+import shengyIcon from '@/assets/icon/shengy.svg'
+import shengyNIcon from '@/assets/icon/shengyN.svg'
+import zhanghaoIcon from '@/assets/icon/zhanghao.svg'
+import zhanghaoNIcon from '@/assets/icon/zhanghaoN.svg'
+
+type TabValue = 'account' | 'sound'
+type PasswordKey = 'oldPassword' | 'newPassword' | 'confirmPassword'
+
+const router = useRouter()
+const activeTab = ref<TabValue>('account')
+const currentAccount = ref(1)
+const selectedSpeed = ref('1')
+const showPasswordDialog = ref(false)
+
+const tabs: Array<{ label: string; value: TabValue; activeIcon: string; inactiveIcon: string }> = [
+  { label: '账号', value: 'account', activeIcon: zhanghaoIcon, inactiveIcon: zhanghaoNIcon },
+  { label: '声音', value: 'sound', activeIcon: shengyIcon, inactiveIcon: shengyNIcon },
+]
+
+const accounts = [{ id: 1 }, { id: 2 }]
+const speeds = ['0.5', '0.75', '1']
+
+const passwordFields: Array<{ key: PasswordKey; label: string; placeholder: string }> = [
+  { key: 'oldPassword', label: '旧密码', placeholder: '请输入' },
+  { key: 'newPassword', label: '新密码', placeholder: '请输入' },
+  { key: 'confirmPassword', label: '确认密码', placeholder: '请输入' },
+]
+
+const passwordForm = reactive<Record<PasswordKey, string>>({
+  oldPassword: '123456',
+  newPassword: '123456',
+  confirmPassword: '',
+})
+
+const visiblePasswords = reactive<Record<PasswordKey, boolean>>({
+  oldPassword: true,
+  newPassword: false,
+  confirmPassword: true,
+})
+</script>
+
+<style scoped lang="scss">
+.settings-page {
+  display: flex;
+  min-height: 100%;
+  flex: 1;
+  flex-direction: column;
+  background: #d9e3f8;
+}
+
+.settings-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-height: 82px;
+  padding: 18px 64px 6px;
+}
+
+.back-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 44px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+}
+
+.back-icon {
+  width: 22px;
+  height: 36px;
+}
+
+.page-title {
+  color: #15171c;
+  font-size: 24px;
+  font-weight: 500;
+}
+
+:deep(.settings-frame) {
+  height: calc(100vh - 124px);
+  overflow: hidden;
+  border-color: rgba(255, 255, 255, 0.76);
+  border-radius: 28px;
+  // background: #F2F6FA;
+  padding: 28px 34px 32px;
+}
+
+.settings-card {
+  position: relative;
+  display: grid;
+  height: 100%;
+  min-height: 0;
+  grid-template-columns: 220px minmax(0, 1fr);
+  border-radius: 14px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.settings-tabs {
+  width: 220px;
+  height: 100%;
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  background: #f4f7fc;
+  border-radius: 14px;
+  border: 3px solid #fff;
+  padding-top: 64px;
+}
+
+.tab-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  // height: 90px;
+  border: none;
+  background: transparent;
+  color: #9a9ea7;
+  cursor: pointer;
+  font-size: 28px;
+  justify-content: center;
+  padding: 32px 0;
+}
+
+.tab-btn.active {
+  background: #fff;
+  color: #171a1f;
+}
+
+.tab-mark {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 6px;
+  height: 64px;
+  border-radius: 0 4px 4px 0;
+  background: transparent;
+}
+
+.tab-btn.active .tab-mark {
+  background: #2f80ed;
+}
+
+.tab-icon {
+  width: 32px;
+  height: 32px;
+  flex: 0 0 auto;
+  object-fit: contain;
+}
+
+.settings-main {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  padding: 32px;
+}
+
+.settings-panel {
+  border: 1px solid #edf0f6;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 0 8px rgba(35, 48, 75, 0.04);
+
+}
+
+.settings-panel h2 {
+  color: #0f1115;
+  font-size: 32px;
+  font-weight: 700;
+}
+
+.account-panel {
+  min-height: 122px;
+  padding: 32px;
+}
+
+.account-line {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  margin-top: 16px;
+  color: #15171c;
+  font-size: 28px;
+}
+
+.change-password {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 60px;
+  border: 1px solid #e0e4ec;
+  border-radius: 999px;
+  background: #fff;
+  color: #15171c;
+  cursor: pointer;
+  font-size: 24px;
+  padding: 12px 24px;
+}
+
+.change-password svg {
+  width: 17px;
+  height: 17px;
+}
+
+.switch-panel {
+  min-height: 130px;
+  margin-top: 32px;
+  padding: 32px;
+}
+
+.avatar-list {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  margin-top: 22px;
+}
+
+.avatar-btn,
+.add-account {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 120px;
+  border-radius: 999px;
+  cursor: pointer;
+  font-size: 32px;
+}
+
+.avatar-btn {
+  border: 5px solid #ebf2ff;
+  background: #fff;
+  padding: 4px;
+}
+
+.avatar-btn.active {
+  border-color: #2d76ee;
+}
+
+.add-account {
+  border: 1px dashed #e0e3ea;
+  background: #fbfcff;
+  color: #777f8d;
+  font-size: 24px;
+}
+
+.logout-btn {
+  position: absolute;
+  left: 50%;
+  bottom: 18px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 40px;
+  justify-content: center;
+  border: 1px solid #d9dde5;
+  border-radius: 999px;
+  background: #fff;
+  color: #2d3138;
+  cursor: pointer;
+  font-size: 32px;
+  transform: translateX(-50%);
+}
+
+.logout-btn svg {
+  width: 32px;
+  height: 32px;
+}
+
+.speed-panel {
+  min-height: 122px;
+  padding: 23px 26px;
+}
+
+.speed-options {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  margin-top: 16px;
+}
+
+.speed-btn {
+  min-width: 76px;
+  height: 34px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: #f4f7fb;
+  color: #404854;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.speed-btn.active {
+  border-color: #a9c7e8;
+  background: #edf4ff;
+  box-shadow: inset 0 0 0 1px rgba(47, 128, 237, 0.14);
+  color: #2a689b;
+}
+
+.avatar-face {
+  position: relative;
+  width: 52px;
+  height: 52px;
+  overflow: hidden;
+  border-radius: 50%;
+  background: #9ddff0;
+}
+
+.face {
+  position: absolute;
+  left: 11px;
+  top: 14px;
+  width: 30px;
+  height: 28px;
+  border-radius: 44% 44% 50% 50%;
+  background: #ffd6cf;
+}
+
+.hair {
+  position: absolute;
+  z-index: 2;
+  top: 8px;
+  width: 21px;
+  height: 29px;
+  background: #151113;
+}
+
+.hair-left {
+  left: 8px;
+  border-radius: 15px 6px 11px 12px;
+}
+
+.hair-right {
+  right: 8px;
+  border-radius: 6px 15px 12px 11px;
+}
+
+.bangs {
+  position: absolute;
+  z-index: 3;
+  left: 11px;
+  top: 10px;
+  width: 30px;
+  height: 14px;
+  border-radius: 11px 11px 5px 5px;
+  background: #151113;
+}
+
+.eye,
+.mouth {
+  position: absolute;
+  z-index: 4;
+}
+
+.eye {
+  top: 27px;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: #201819;
+}
+
+.eye-left {
+  left: 20px;
+}
+
+.eye-right {
+  right: 20px;
+}
+
+.mouth {
+  left: 23px;
+  top: 35px;
+  width: 6px;
+  height: 3px;
+  border-bottom: 1px solid #d45d67;
+  border-radius: 0 0 8px 8px;
+}
+
+.body {
+  position: absolute;
+  z-index: 3;
+  left: 15px;
+  bottom: -2px;
+  width: 22px;
+  height: 15px;
+  border-radius: 12px 12px 0 0;
+  background: #21a8bd;
+}
+
+.dialog-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.56);
+}
+
+.password-dialog {
+  width: 480px;
+  border-radius: 14px;
+  background: #fff;
+  padding: 34px 30px 30px;
+}
+
+.password-dialog h2 {
+  margin-bottom: 30px;
+  color: #0f1115;
+  font-size: 22px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.password-row {
+  display: flex;
+  align-items: center;
+  height: 48px;
+  margin-top: 16px;
+  background: #f6f6f6;
+  color: #15171c;
+  font-size: 16px;
+  padding: 0 12px 0 14px;
+}
+
+.password-row span {
+  flex: 0 0 auto;
+}
+
+.password-row input {
+  min-width: 0;
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #15171c;
+  font: inherit;
+}
+
+.password-row input::placeholder {
+  color: #b8bdc6;
+}
+
+.visible-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: #747b86;
+  cursor: pointer;
+  padding: 0;
+}
+
+.visible-btn svg {
+  width: 22px;
+  height: 22px;
+}
+
+.dialog-actions {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  margin-top: 30px;
+}
+
+.cancel-btn,
+.confirm-btn {
+  width: 104px;
+  height: 42px;
+  border-radius: 999px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.cancel-btn {
+  border: 1px solid #e1e4ec;
+  background: #fff;
+  color: #2f3137;
+}
+
+.confirm-btn {
+  border: none;
+  background: #347af0;
+  color: #fff;
+}
+</style>