commit 0468339d23849b8a57dae819d894fcaaecb05f3f
Author: xuxin <15279969124@163.com>
Date:   Tue Mar 24 21:06:00 2026 +0800

    仓库初始化+岗位相关页面

diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..2ca7d83
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,2 @@
+# 开发环境 — 请求走 vite proxy，前缀 /api 会被代理到 http://127.0.0.1:8080/api
+VITE_API_BASE_URL=/api
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..e8908ba
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,2 @@
+# 生产环境 — 根据实际部署地址修改
+VITE_API_BASE_URL=/api
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..a7cea0b
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..33895ab
--- /dev/null
+++ b/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
new file mode 100644
index 0000000..8c1957b
--- /dev/null
+++ b/auto-imports.d.ts
@@ -0,0 +1,11 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const ElMessage: typeof import('element-plus/es').ElMessage
+  const ElMessageBox: typeof import('element-plus/es').ElMessageBox
+}
diff --git a/components.d.ts b/components.d.ts
new file mode 100644
index 0000000..869cfac
--- /dev/null
+++ b/components.d.ts
@@ -0,0 +1,42 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AiChat: typeof import('./src/components/AiChat.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    IndustrySelector: typeof import('./src/components/tools/IndustrySelector.vue')['default']
+    JobCategorySelector: typeof import('./src/components/tools/JobCategorySelector.vue')['default']
+    JobDislikeDialog: typeof import('./src/components/JobDislikeDialog.vue')['default']
+    JobFeedbackDialog: typeof import('./src/components/JobFeedbackDialog.vue')['default']
+    JobGoalDialog: typeof import('./src/components/JobGoalDialog.vue')['default']
+    JobPageHeader: typeof import('./src/components/JobPageHeader.vue')['default']
+    LoginDialog: typeof import('./src/components/LoginDialog.vue')['default']
+    MemberDialog: typeof import('./src/components/MemberDialog.vue')['default']
+    ProfileEditDrawer: typeof import('./src/components/ProfileEditDrawer.vue')['default']
+    ProfilePageContent: typeof import('./src/components/ProfilePageContent.vue')['default']
+    RegionSelector: typeof import('./src/components/tools/RegionSelector.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SettingsDialog: typeof import('./src/components/SettingsDialog.vue')['default']
+    SideNav: typeof import('./src/components/SideNav.vue')['default']
+  }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..954406e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>jobassistantweb</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..dfa730b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "jobassistantweb",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
+    "axios": "^1.13.6",
+    "element-plus": "^2.13.3",
+    "sass": "^1.97.3",
+    "vue": "^3.5.25",
+    "vue-router": "^4.6.4",
+    "vuex": "^4.1.0"
+  },
+  "devDependencies": {
+    "@prerenderer/renderer-puppeteer": "^1.2.4",
+    "@prerenderer/rollup-plugin": "^0.3.12",
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vue/tsconfig": "^0.8.1",
+    "puppeteer": "^24.37.5",
+    "typescript": "~5.9.3",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue-components": "^31.0.0",
+    "vite": "^7.3.1",
+    "vue-tsc": "^3.1.5"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..17c8b4c
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,3348 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@element-plus/icons-vue':
+        specifier: ^2.3.2
+        version: 2.3.2(vue@3.5.29(typescript@5.9.3))
+      axios:
+        specifier: ^1.13.6
+        version: 1.13.6
+      element-plus:
+        specifier: ^2.13.3
+        version: 2.13.3(vue@3.5.29(typescript@5.9.3))
+      sass:
+        specifier: ^1.97.3
+        version: 1.97.3
+      vue:
+        specifier: ^3.5.25
+        version: 3.5.29(typescript@5.9.3)
+      vue-router:
+        specifier: ^4.6.4
+        version: 4.6.4(vue@3.5.29(typescript@5.9.3))
+      vuex:
+        specifier: ^4.1.0
+        version: 4.1.0(vue@3.5.29(typescript@5.9.3))
+    devDependencies:
+      '@prerenderer/renderer-puppeteer':
+        specifier: ^1.2.4
+        version: 1.2.4(puppeteer@24.37.5(typescript@5.9.3))
+      '@prerenderer/rollup-plugin':
+        specifier: ^0.3.12
+        version: 0.3.12(puppeteer@24.37.5(typescript@5.9.3))(rollup@4.59.0)
+      '@types/node':
+        specifier: ^24.10.1
+        version: 24.11.0
+      '@vitejs/plugin-vue':
+        specifier: ^6.0.2
+        version: 6.0.4(vite@7.3.1(@types/node@24.11.0)(sass@1.97.3))(vue@3.5.29(typescript@5.9.3))
+      '@vue/tsconfig':
+        specifier: ^0.8.1
+        version: 0.8.1(typescript@5.9.3)(vue@3.5.29(typescript@5.9.3))
+      puppeteer:
+        specifier: ^24.37.5
+        version: 24.37.5(typescript@5.9.3)
+      typescript:
+        specifier: ~5.9.3
+        version: 5.9.3
+      unplugin-auto-import:
+        specifier: ^21.0.0
+        version: 21.0.0(@vueuse/core@10.11.1(vue@3.5.29(typescript@5.9.3)))
+      unplugin-vue-components:
+        specifier: ^31.0.0
+        version: 31.0.0(vue@3.5.29(typescript@5.9.3))
+      vite:
+        specifier: ^7.3.1
+        version: 7.3.1(@types/node@24.11.0)(sass@1.97.3)
+      vue-tsc:
+        specifier: ^3.1.5
+        version: 3.2.5(typescript@5.9.3)
+
+packages:
+
+  '@babel/code-frame@7.29.0':
+    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.0':
+    resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+    engines: {node: '>=6.9.0'}
+
+  '@ctrl/tinycolor@3.6.1':
+    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
+    engines: {node: '>=10'}
+
+  '@element-plus/icons-vue@2.3.2':
+    resolution: {integrity: sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==}
+    peerDependencies:
+      vue: ^3.2.0
+
+  '@esbuild/aix-ppc64@0.27.3':
+    resolution: {integrity: sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.27.3':
+    resolution: {integrity: sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.3':
+    resolution: {integrity: sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.3':
+    resolution: {integrity: sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.27.3':
+    resolution: {integrity: sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.3':
+    resolution: {integrity: sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.27.3':
+    resolution: {integrity: sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.3':
+    resolution: {integrity: sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.27.3':
+    resolution: {integrity: sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.3':
+    resolution: {integrity: sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.3':
+    resolution: {integrity: sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.3':
+    resolution: {integrity: sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.3':
+    resolution: {integrity: sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.3':
+    resolution: {integrity: sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.3':
+    resolution: {integrity: sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.3':
+    resolution: {integrity: sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.3':
+    resolution: {integrity: sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.27.3':
+    resolution: {integrity: sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.3':
+    resolution: {integrity: sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.27.3':
+    resolution: {integrity: sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.3':
+    resolution: {integrity: sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.27.3':
+    resolution: {integrity: sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.27.3':
+    resolution: {integrity: sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.27.3':
+    resolution: {integrity: sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.3':
+    resolution: {integrity: sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.3':
+    resolution: {integrity: sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
+
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@parcel/watcher-android-arm64@2.5.6':
+    resolution: {integrity: sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.5.6':
+    resolution: {integrity: sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@parcel/watcher-darwin-x64@2.5.6':
+    resolution: {integrity: sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@parcel/watcher-freebsd-x64@2.5.6':
+    resolution: {integrity: sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.5.6':
+    resolution: {integrity: sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm-musl@2.5.6':
+    resolution: {integrity: sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.6':
+    resolution: {integrity: sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm64-musl@2.5.6':
+    resolution: {integrity: sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@parcel/watcher-linux-x64-glibc@2.5.6':
+    resolution: {integrity: sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@parcel/watcher-linux-x64-musl@2.5.6':
+    resolution: {integrity: sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@parcel/watcher-win32-arm64@2.5.6':
+    resolution: {integrity: sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@parcel/watcher-win32-ia32@2.5.6':
+    resolution: {integrity: sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@parcel/watcher-win32-x64@2.5.6':
+    resolution: {integrity: sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher@2.5.6':
+    resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
+    engines: {node: '>= 10.0.0'}
+
+  '@prerenderer/prerenderer@1.2.5':
+    resolution: {integrity: sha512-rPNbSgupfZhtwxdhdlOxDRevEcxvRmKrPQfCrwQH+bMDeRvjPtTYZHt8ZUob7o67UmC9wjZrFGvzji9QOOe9rA==}
+    engines: {node: '>=8.0.0'}
+
+  '@prerenderer/renderer-puppeteer@1.2.4':
+    resolution: {integrity: sha512-S0LY0xYGnXLo/8DqkiT+pDLDd0X5msXSeaPzq5goqgmFfZOQEME3+A7j1T2iClrNzk4Rjgfu4KTA8o508GYXiQ==}
+    engines: {node: '>=8.0.0'}
+    peerDependencies:
+      puppeteer: '>= 2'
+
+  '@prerenderer/rollup-plugin@0.3.12':
+    resolution: {integrity: sha512-8l0GWGrZw1AZPCmGPE0u1c0tOvsUimrrHhOvjeq0ahRuH40o8OU8iivJUFNYOU9LfNvtSZbOPhfsqU0d5IuMvw==}
+    engines: {node: '>=10.13.0'}
+    peerDependencies:
+      rollup: ^3||^4
+
+  '@puppeteer/browsers@2.13.0':
+    resolution: {integrity: sha512-46BZJYJjc/WwmKjsvDFykHtXrtomsCIrwYQPOP7VfMJoZY2bsDF9oROBABR3paDjDcmkUye1Pb1BqdcdiipaWA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  '@rolldown/pluginutils@1.0.0-rc.2':
+    resolution: {integrity: sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==}
+
+  '@rollup/rollup-android-arm-eabi@4.59.0':
+    resolution: {integrity: sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.59.0':
+    resolution: {integrity: sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.59.0':
+    resolution: {integrity: sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.59.0':
+    resolution: {integrity: sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.59.0':
+    resolution: {integrity: sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.59.0':
+    resolution: {integrity: sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
+    resolution: {integrity: sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
+    resolution: {integrity: sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
+    resolution: {integrity: sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
+    resolution: {integrity: sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
+    resolution: {integrity: sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
+    resolution: {integrity: sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
+    resolution: {integrity: sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
+    resolution: {integrity: sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
+    resolution: {integrity: sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
+    resolution: {integrity: sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
+    resolution: {integrity: sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.59.0':
+    resolution: {integrity: sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-openbsd-x64@4.59.0':
+    resolution: {integrity: sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.59.0':
+    resolution: {integrity: sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
+    resolution: {integrity: sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
+    resolution: {integrity: sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
+    resolution: {integrity: sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@sxzz/popperjs-es@2.11.8':
+    resolution: {integrity: sha512-wOwESXvvED3S8xBmcPWHs2dUuzrE4XiZeFu7e1hROIJkm02a49N120pmOXxY33sBb6hArItm5W5tcg1cBtV+HQ==}
+
+  '@tootallnate/quickjs-emscripten@0.23.0':
+    resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/http-proxy@1.17.17':
+    resolution: {integrity: sha512-ED6LB+Z1AVylNTu7hdzuBqOgMnvG/ld6wGCG8wFnAzKX5uyW2K3WD52v0gnLCTK/VLpXtKckgWuyScYK6cSPaw==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/lodash-es@4.17.12':
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+
+  '@types/lodash@4.17.24':
+    resolution: {integrity: sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==}
+
+  '@types/node@24.11.0':
+    resolution: {integrity: sha512-fPxQqz4VTgPI/IQ+lj9r0h+fDR66bzoeMGHp8ASee+32OSGIkeASsoZuJixsQoVef1QJbeubcPBxKk22QVoWdw==}
+
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
+  '@types/yauzl@2.10.3':
+    resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
+
+  '@vitejs/plugin-vue@6.0.4':
+    resolution: {integrity: sha512-uM5iXipgYIn13UUQCZNdWkYk+sysBeA97d5mHsAoAt1u/wpN3+zxOmsVJWosuzX+IMGRzeYUNytztrYznboIkQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+      vue: ^3.2.25
+
+  '@volar/language-core@2.4.28':
+    resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
+
+  '@volar/source-map@2.4.28':
+    resolution: {integrity: sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==}
+
+  '@volar/typescript@2.4.28':
+    resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
+
+  '@vue/compiler-core@3.5.29':
+    resolution: {integrity: sha512-cuzPhD8fwRHk8IGfmYaR4eEe4cAyJEL66Ove/WZL7yWNL134nqLddSLwNRIsFlnnW1kK+p8Ck3viFnC0chXCXw==}
+
+  '@vue/compiler-dom@3.5.29':
+    resolution: {integrity: sha512-n0G5o7R3uBVmVxjTIYcz7ovr8sy7QObFG8OQJ3xGCDNhbG60biP/P5KnyY8NLd81OuT1WJflG7N4KWYHaeeaIg==}
+
+  '@vue/compiler-sfc@3.5.29':
+    resolution: {integrity: sha512-oJZhN5XJs35Gzr50E82jg2cYdZQ78wEwvRO6Y63TvLVTc+6xICzJHP1UIecdSPPYIbkautNBanDiWYa64QSFIA==}
+
+  '@vue/compiler-ssr@3.5.29':
+    resolution: {integrity: sha512-Y/ARJZE6fpjzL5GH/phJmsFwx3g6t2KmHKHx5q+MLl2kencADKIrhH5MLF6HHpRMmlRAYBRSvv347Mepf1zVNw==}
+
+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+
+  '@vue/language-core@3.2.5':
+    resolution: {integrity: sha512-d3OIxN/+KRedeM5wQ6H6NIpwS3P5gC9nmyaHgBk+rO6dIsjY+tOh4UlPpiZbAh3YtLdCGEX4M16RmsBqPmJV+g==}
+
+  '@vue/reactivity@3.5.29':
+    resolution: {integrity: sha512-zcrANcrRdcLtmGZETBxWqIkoQei8HaFpZWx/GHKxx79JZsiZ8j1du0VUJtu4eJjgFvU/iKL5lRXFXksVmI+5DA==}
+
+  '@vue/runtime-core@3.5.29':
+    resolution: {integrity: sha512-8DpW2QfdwIWOLqtsNcds4s+QgwSaHSJY/SUe04LptianUQ/0xi6KVsu/pYVh+HO3NTVvVJjIPL2t6GdeKbS4Lg==}
+
+  '@vue/runtime-dom@3.5.29':
+    resolution: {integrity: sha512-AHvvJEtcY9tw/uk+s/YRLSlxxQnqnAkjqvK25ZiM4CllCZWzElRAoQnCM42m9AHRLNJ6oe2kC5DCgD4AUdlvXg==}
+
+  '@vue/server-renderer@3.5.29':
+    resolution: {integrity: sha512-G/1k6WK5MusLlbxSE2YTcqAAezS+VuwHhOvLx2KnQU7G2zCH6KIb+5Wyt6UjMq7a3qPzNEjJXs1hvAxDclQH+g==}
+    peerDependencies:
+      vue: 3.5.29
+
+  '@vue/shared@3.5.29':
+    resolution: {integrity: sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==}
+
+  '@vue/tsconfig@0.8.1':
+    resolution: {integrity: sha512-aK7feIWPXFSUhsCP9PFqPyFOcz4ENkb8hZ2pneL6m2UjCkccvaOhC/5KCKluuBufvp2KzkbdA2W2pk20vLzu3g==}
+    peerDependencies:
+      typescript: 5.x
+      vue: ^3.4.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vue:
+        optional: true
+
+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
+  accepts@1.3.8:
+    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
+    engines: {node: '>= 0.6'}
+
+  acorn@8.16.0:
+    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  ajv-formats@2.1.1:
+    resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv-keywords@5.1.0:
+    resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
+    peerDependencies:
+      ajv: ^8.8.2
+
+  ajv@8.18.0:
+    resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==}
+
+  alien-signals@3.1.2:
+    resolution: {integrity: sha512-d9dYqZTS90WLiU0I5c6DHj/HcKkF8ZyGN3G5x8wSbslulz70KOxaqCT0hQCo9KOyhVqzqGojvNdJXoTumZOtcw==}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  array-flatten@1.1.1:
+    resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
+
+  ast-types@0.13.4:
+    resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
+    engines: {node: '>=4'}
+
+  async-validator@4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
+
+  async@3.2.6:
+    resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  axios@1.13.6:
+    resolution: {integrity: sha512-ChTCHMouEe2kn713WHbQGcuYrr6fXTBiu460OTwWrWob16g1bXn4vtz07Ope7ewMozJAnEquLk5lWQWtBig9DQ==}
+
+  b4a@1.8.0:
+    resolution: {integrity: sha512-qRuSmNSkGQaHwNbM7J78Wwy+ghLEYF1zNrSeMxj4Kgw6y33O3mXcQ6Ie9fRvfU/YnxWkOchPXbaLb73TkIsfdg==}
+    peerDependencies:
+      react-native-b4a: '*'
+    peerDependenciesMeta:
+      react-native-b4a:
+        optional: true
+
+  bare-events@2.8.2:
+    resolution: {integrity: sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==}
+    peerDependencies:
+      bare-abort-controller: '*'
+    peerDependenciesMeta:
+      bare-abort-controller:
+        optional: true
+
+  bare-fs@4.5.5:
+    resolution: {integrity: sha512-XvwYM6VZqKoqDll8BmSww5luA5eflDzY0uEFfBJtFKe4PAAtxBjU3YIxzIBzhyaEQBy1VXEQBto4cpN5RZJw+w==}
+    engines: {bare: '>=1.16.0'}
+    peerDependencies:
+      bare-buffer: '*'
+    peerDependenciesMeta:
+      bare-buffer:
+        optional: true
+
+  bare-os@3.7.1:
+    resolution: {integrity: sha512-ebvMaS5BgZKmJlvuWh14dg9rbUI84QeV3WlWn6Ph6lFI8jJoh7ADtVTyD2c93euwbe+zgi0DVrl4YmqXeM9aIA==}
+    engines: {bare: '>=1.14.0'}
+
+  bare-path@3.0.0:
+    resolution: {integrity: sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==}
+
+  bare-stream@2.8.0:
+    resolution: {integrity: sha512-reUN0M2sHRqCdG4lUK3Fw8w98eeUIZHL5c3H7Mbhk2yVBL+oofgaIp0ieLfD5QXwPCypBpmEEKU2WZKzbAk8GA==}
+    peerDependencies:
+      bare-buffer: '*'
+      bare-events: '*'
+    peerDependenciesMeta:
+      bare-buffer:
+        optional: true
+      bare-events:
+        optional: true
+
+  bare-url@2.3.2:
+    resolution: {integrity: sha512-ZMq4gd9ngV5aTMa5p9+UfY0b3skwhHELaDkhEHetMdX0LRkW9kzaym4oo/Eh+Ghm0CCDuMTsRIGM/ytUc1ZYmw==}
+
+  basic-ftp@5.2.0:
+    resolution: {integrity: sha512-VoMINM2rqJwJgfdHq6RiUudKt2BV+FY5ZFezP/ypmwayk68+NzzAQy4XXLlqsGD4MCzq3DrmNFD/uUmBJuGoXw==}
+    engines: {node: '>=10.0.0'}
+
+  body-parser@1.20.4:
+    resolution: {integrity: sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  buffer-crc32@0.2.13:
+    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
+
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
+  chokidar@5.0.0:
+    resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
+    engines: {node: '>= 20.19.0'}
+
+  chromium-bidi@14.0.0:
+    resolution: {integrity: sha512-9gYlLtS6tStdRWzrtXaTMnqcM4dudNegMXJxkR0I/CXObHalYeYcAMPrL19eroNZHtJ8DQmu1E+ZNOYu/IXMXw==}
+    peerDependencies:
+      devtools-protocol: '*'
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  confbox@0.2.4:
+    resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
+
+  content-disposition@0.5.4:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
+
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+
+  cookie-signature@1.0.7:
+    resolution: {integrity: sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==}
+
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
+  cosmiconfig@9.0.1:
+    resolution: {integrity: sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  data-uri-to-buffer@6.0.2:
+    resolution: {integrity: sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==}
+    engines: {node: '>= 14'}
+
+  dayjs@1.11.19:
+    resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
+
+  debug@2.6.9:
+    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  degenerator@5.0.1:
+    resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
+    engines: {node: '>= 14'}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+
+  destroy@1.2.0:
+    resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  devtools-protocol@0.0.1566079:
+    resolution: {integrity: sha512-MJfAEA1UfVhSs7fbSQOG4czavUp1ajfg6prlAN0+cmfa2zNjaIbvq8VneP7do1WAQQIvgNJWSMeP6UyI90gIlQ==}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+
+  element-plus@2.13.3:
+    resolution: {integrity: sha512-RwLVtFpeHjZ4UCtHxVi1/sGR2cr2xOL7hqWa7qJc/+gdO6QavVG8Nw1C647obCb3tIg2ztMhNbIIjZUv+6z1og==}
+    peerDependencies:
+      vue: ^3.3.0
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
+
+  end-of-stream@1.4.5:
+    resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
+
+  entities@7.0.1:
+    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
+    engines: {node: '>=0.12'}
+
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
+  error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  esbuild@0.27.3:
+    resolution: {integrity: sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+
+  eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+
+  events-universal@1.0.1:
+    resolution: {integrity: sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw==}
+
+  express@4.22.1:
+    resolution: {integrity: sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==}
+    engines: {node: '>= 0.10.0'}
+
+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+
+  extract-zip@2.0.1:
+    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
+    engines: {node: '>= 10.17.0'}
+    hasBin: true
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-fifo@1.3.2:
+    resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
+
+  fast-uri@3.1.0:
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+
+  fd-slicer@1.1.0:
+    resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  finalhandler@1.3.2:
+    resolution: {integrity: sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==}
+    engines: {node: '>= 0.8'}
+
+  follow-redirects@1.15.11:
+    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  form-data@4.0.5:
+    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+    engines: {node: '>= 6'}
+
+  forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+
+  fresh@0.5.2:
+    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
+    engines: {node: '>= 0.6'}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  get-stream@5.2.0:
+    resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
+    engines: {node: '>=8'}
+
+  get-uri@6.0.5:
+    resolution: {integrity: sha512-b1O07XYq8eRuVzBNgJLstU6FYc1tS6wnMtF1I1D9lE8LxZSOGZ7LhxN54yPP6mGw5f2CkXY2BQUL9Fx41qvcIg==}
+    engines: {node: '>= 14'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  http-errors@2.0.1:
+    resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
+    engines: {node: '>= 0.8'}
+
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
+  http-proxy-middleware@2.0.9:
+    resolution: {integrity: sha512-c1IyJYLYppU574+YI7R4QyX2ystMtVXZwIdzazUIPIJsHuWNd+mho2j+bKoHftndicGj9yh+xjd+l0yj7VeT1Q==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@types/express': ^4.17.13
+    peerDependenciesMeta:
+      '@types/express':
+        optional: true
+
+  http-proxy@1.18.1:
+    resolution: {integrity: sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==}
+    engines: {node: '>=8.0.0'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
+  immutable@5.1.5:
+    resolution: {integrity: sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  ip-address@10.1.0:
+    resolution: {integrity: sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==}
+    engines: {node: '>= 12'}
+
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-plain-obj@3.0.0:
+    resolution: {integrity: sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==}
+    engines: {node: '>=10'}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
+  js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    hasBin: true
+
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  local-pkg@1.1.2:
+    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+    engines: {node: '>=14'}
+
+  lodash-es@4.17.23:
+    resolution: {integrity: sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==}
+
+  lodash-unified@1.0.3:
+    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
+    peerDependencies:
+      '@types/lodash-es': '*'
+      lodash: '*'
+      lodash-es: '*'
+
+  lodash@4.17.23:
+    resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==}
+
+  lru-cache@7.18.3:
+    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
+    engines: {node: '>=12'}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  media-typer@0.3.0:
+    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
+    engines: {node: '>= 0.6'}
+
+  memoize-one@6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+
+  merge-descriptors@1.0.3:
+    resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
+
+  methods@1.1.2:
+    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
+    engines: {node: '>= 0.6'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
+  mlly@1.8.0:
+    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
+
+  ms@2.0.0:
+    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  negotiator@0.6.3:
+    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+    engines: {node: '>= 0.6'}
+
+  netmask@2.0.2:
+    resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==}
+    engines: {node: '>= 0.4.0'}
+
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
+  normalize-wheel-es@1.2.0:
+    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  obug@2.1.1:
+    resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
+
+  on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  pac-proxy-agent@7.2.0:
+    resolution: {integrity: sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==}
+    engines: {node: '>= 14'}
+
+  pac-resolver@7.0.1:
+    resolution: {integrity: sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==}
+    engines: {node: '>= 14'}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-to-regexp@0.1.12:
+    resolution: {integrity: sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  pend@1.2.0:
+    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  pkg-types@2.3.0:
+    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
+
+  portfinder@1.0.38:
+    resolution: {integrity: sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==}
+    engines: {node: '>= 10.12'}
+
+  postcss@8.5.8:
+    resolution: {integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  progress@2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
+
+  promise-limit@2.7.0:
+    resolution: {integrity: sha512-7nJ6v5lnJsXwGprnGXga4wx6d1POjvi5Qmf1ivTRxTjH4Z/9Czja/UCMLVmB9N93GeWOU93XaFaEt6jbuoagNw==}
+
+  proxy-addr@2.0.7:
+    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+    engines: {node: '>= 0.10'}
+
+  proxy-agent@6.5.0:
+    resolution: {integrity: sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==}
+    engines: {node: '>= 14'}
+
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
+  pump@3.0.4:
+    resolution: {integrity: sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==}
+
+  puppeteer-core@24.37.5:
+    resolution: {integrity: sha512-ybL7iE78YPN4T6J+sPLO7r0lSByp/0NN6PvfBEql219cOnttoTFzCWKiBOjstXSqi/OKpwae623DWAsL7cn2MQ==}
+    engines: {node: '>=18'}
+
+  puppeteer@24.37.5:
+    resolution: {integrity: sha512-3PAOIQLceyEmn1Fi76GkGO2EVxztv5OtdlB1m8hMUZL3f8KDHnlvXbvCXv+Ls7KzF1R0KdKBqLuT/Hhrok12hQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  qs@6.14.2:
+    resolution: {integrity: sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==}
+    engines: {node: '>=0.6'}
+
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
+  range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+
+  raw-body@2.5.3:
+    resolution: {integrity: sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==}
+    engines: {node: '>= 0.8'}
+
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
+  readdirp@5.0.0:
+    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
+    engines: {node: '>= 20.19.0'}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  requires-port@1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  rollup@4.59.0:
+    resolution: {integrity: sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  sass@1.97.3:
+    resolution: {integrity: sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  schema-utils@4.0.0:
+    resolution: {integrity: sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==}
+    engines: {node: '>= 12.13.0'}
+
+  schema-utils@4.3.3:
+    resolution: {integrity: sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==}
+    engines: {node: '>= 10.13.0'}
+
+  scule@1.3.0:
+    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
+
+  semver@7.7.4:
+    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  send@0.19.2:
+    resolution: {integrity: sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==}
+    engines: {node: '>= 0.8.0'}
+
+  serve-static@1.16.3:
+    resolution: {integrity: sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==}
+    engines: {node: '>= 0.8.0'}
+
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  smart-buffer@4.2.0:
+    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
+    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
+
+  socks-proxy-agent@8.0.5:
+    resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==}
+    engines: {node: '>= 14'}
+
+  socks@2.8.7:
+    resolution: {integrity: sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A==}
+    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  stoppable@1.1.0:
+    resolution: {integrity: sha512-KXDYZ9dszj6bzvnEMRYvxgeTHU74QBFL54XKtP3nyMuJ81CFYtABZ3bAzL2EdFUaEwJOBOgENyFj3R7oTzDyyw==}
+    engines: {node: '>=4', npm: '>=6'}
+
+  streamx@2.23.0:
+    resolution: {integrity: sha512-kn+e44esVfn2Fa/O0CPFcex27fjIL6MkVae0Mm6q+E6f0hWv578YCERbv+4m02cjxvDsPKLnmxral/rR6lBMAg==}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-literal@3.1.0:
+    resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
+
+  tar-fs@3.1.1:
+    resolution: {integrity: sha512-LZA0oaPOc2fVo82Txf3gw+AkEd38szODlptMYejQUhndHMLQ9M059uXR+AfS7DNo0NpINvSqDsvyaCrBVkptWg==}
+
+  tar-stream@3.1.8:
+    resolution: {integrity: sha512-U6QpVRyCGHva435KoNWy9PRoi2IFYCgtEhq9nmrPPpbRacPs9IH4aJ3gbrFC8dPcXvdSZ4XXfXT5Fshbp2MtlQ==}
+
+  teex@1.0.1:
+    resolution: {integrity: sha512-eYE6iEI62Ni1H8oIa7KlDU6uQBtqr4Eajni3wX7rpfXD8ysFx8z0+dri+KWEPWpBsxXfxu58x/0jvTVT1ekOSg==}
+
+  text-decoder@1.2.7:
+    resolution: {integrity: sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ==}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
+  ts-deepmerge@6.2.1:
+    resolution: {integrity: sha512-8CYSLazCyj0DJDpPIxOFzJG46r93uh6EynYjuey+bxcLltBeqZL7DMfaE5ZPzZNFlav7wx+2TDa/mBl8gkTYzw==}
+    engines: {node: '>=14.13.1'}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  type-is@1.6.18:
+    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
+    engines: {node: '>= 0.6'}
+
+  typed-query-selector@2.12.1:
+    resolution: {integrity: sha512-uzR+FzI8qrUEIu96oaeBJmd9E7CFEiQ3goA5qCVgc4s5llSubcfGHq9yUstZx/k4s9dXHVKsE35YWoFyvEqEHA==}
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  ufo@1.6.3:
+    resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}
+
+  undici-types@7.16.0:
+    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
+
+  unimport@5.7.0:
+    resolution: {integrity: sha512-njnL6sp8lEA8QQbZrt+52p/g4X0rw3bnGGmUcJnt1jeG8+iiqO779aGz0PirCtydAIVcuTBRlJ52F0u46z309Q==}
+    engines: {node: '>=18.12.0'}
+
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
+  unplugin-auto-import@21.0.0:
+    resolution: {integrity: sha512-vWuC8SwqJmxZFYwPojhOhOXDb5xFhNNcEVb9K/RFkyk/3VnfaOjzitWN7v+8DEKpMjSsY2AEGXNgt6I0yQrhRQ==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@nuxt/kit': ^4.0.0
+      '@vueuse/core': '*'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@vueuse/core':
+        optional: true
+
+  unplugin-utils@0.3.1:
+    resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
+    engines: {node: '>=20.19.0'}
+
+  unplugin-vue-components@31.0.0:
+    resolution: {integrity: sha512-4ULwfTZTLuWJ7+S9P7TrcStYLsSRkk6vy2jt/WTfgUEUb0nW9//xxmrfhyHUEVpZ2UKRRwfRb8Yy15PDbVZf+Q==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@nuxt/kit': ^3.2.2 || ^4.0.0
+      vue: ^3.0.0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+
+  unplugin@2.3.11:
+    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
+    engines: {node: '>=18.12.0'}
+
+  utils-merge@1.0.1:
+    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
+    engines: {node: '>= 0.4.0'}
+
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
+  vite@7.3.1:
+    resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
+  vue-router@4.6.4:
+    resolution: {integrity: sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  vue-tsc@3.2.5:
+    resolution: {integrity: sha512-/htfTCMluQ+P2FISGAooul8kO4JMheOTCbCy4M6dYnYYjqLe3BExZudAua6MSIKSFYQtFOYAll7XobYwcpokGA==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
+  vue@3.5.29:
+    resolution: {integrity: sha512-BZqN4Ze6mDQVNAni0IHeMJ5mwr8VAJ3MQC9FmprRhcBYENw+wOAAjRj8jfmN6FLl0j96OXbR+CjWhmAmM+QGnA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  vuex@4.1.0:
+    resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}
+    peerDependencies:
+      vue: ^3.2.0
+
+  webdriver-bidi-protocol@0.4.1:
+    resolution: {integrity: sha512-ARrjNjtWRRs2w4Tk7nqrf2gBI0QXWuOmMCx2hU+1jUt6d00MjMxURrhxhGbrsoiZKJrhTSTzbIrc554iKI10qw==}
+
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  ws@8.19.0:
+    resolution: {integrity: sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+  yauzl@2.10.0:
+    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+snapshots:
+
+  '@babel/code-frame@7.29.0':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/parser@7.29.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/types@7.29.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@ctrl/tinycolor@3.6.1': {}
+
+  '@element-plus/icons-vue@2.3.2(vue@3.5.29(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.29(typescript@5.9.3)
+
+  '@esbuild/aix-ppc64@0.27.3':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/android-arm@0.27.3':
+    optional: true
+
+  '@esbuild/android-x64@0.27.3':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.3':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.3':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.3':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.3':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.3':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.3':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.3':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.3':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.3':
+    optional: true
+
+  '@floating-ui/core@1.7.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/dom@1.7.6':
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/utils@0.2.11': {}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@parcel/watcher-android-arm64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-darwin-x64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-freebsd-x64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm-glibc@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm-musl@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-musl@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-x64-glibc@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.5.6':
+    optional: true
+
+  '@parcel/watcher-win32-arm64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-win32-ia32@2.5.6':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.5.6':
+    optional: true
+
+  '@parcel/watcher@2.5.6':
+    dependencies:
+      detect-libc: 2.1.2
+      is-glob: 4.0.3
+      node-addon-api: 7.1.1
+      picomatch: 4.0.3
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.6
+      '@parcel/watcher-darwin-arm64': 2.5.6
+      '@parcel/watcher-darwin-x64': 2.5.6
+      '@parcel/watcher-freebsd-x64': 2.5.6
+      '@parcel/watcher-linux-arm-glibc': 2.5.6
+      '@parcel/watcher-linux-arm-musl': 2.5.6
+      '@parcel/watcher-linux-arm64-glibc': 2.5.6
+      '@parcel/watcher-linux-arm64-musl': 2.5.6
+      '@parcel/watcher-linux-x64-glibc': 2.5.6
+      '@parcel/watcher-linux-x64-musl': 2.5.6
+      '@parcel/watcher-win32-arm64': 2.5.6
+      '@parcel/watcher-win32-ia32': 2.5.6
+      '@parcel/watcher-win32-x64': 2.5.6
+    optional: true
+
+  '@prerenderer/prerenderer@1.2.5':
+    dependencies:
+      express: 4.22.1
+      portfinder: 1.0.38
+      schema-utils: 4.0.0
+      stoppable: 1.1.0
+      ts-deepmerge: 6.2.1
+    optionalDependencies:
+      http-proxy-middleware: 2.0.9
+    transitivePeerDependencies:
+      - '@types/express'
+      - debug
+      - supports-color
+
+  '@prerenderer/renderer-puppeteer@1.2.4(puppeteer@24.37.5(typescript@5.9.3))':
+    dependencies:
+      promise-limit: 2.7.0
+      puppeteer: 24.37.5(typescript@5.9.3)
+      schema-utils: 4.3.3
+      ts-deepmerge: 6.2.1
+
+  '@prerenderer/rollup-plugin@0.3.12(puppeteer@24.37.5(typescript@5.9.3))(rollup@4.59.0)':
+    dependencies:
+      '@prerenderer/prerenderer': 1.2.5
+      rollup: 4.59.0
+      schema-utils: 4.3.3
+      ts-deepmerge: 6.2.1
+    optionalDependencies:
+      '@prerenderer/renderer-puppeteer': 1.2.4(puppeteer@24.37.5(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@types/express'
+      - debug
+      - puppeteer
+      - supports-color
+
+  '@puppeteer/browsers@2.13.0':
+    dependencies:
+      debug: 4.4.3
+      extract-zip: 2.0.1
+      progress: 2.0.3
+      proxy-agent: 6.5.0
+      semver: 7.7.4
+      tar-fs: 3.1.1
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - react-native-b4a
+      - supports-color
+
+  '@rolldown/pluginutils@1.0.0-rc.2': {}
+
+  '@rollup/rollup-android-arm-eabi@4.59.0':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
+    optional: true
+
+  '@sxzz/popperjs-es@2.11.8': {}
+
+  '@tootallnate/quickjs-emscripten@0.23.0': {}
+
+  '@types/estree@1.0.8': {}
+
+  '@types/http-proxy@1.17.17':
+    dependencies:
+      '@types/node': 24.11.0
+    optional: true
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/lodash-es@4.17.12':
+    dependencies:
+      '@types/lodash': 4.17.24
+
+  '@types/lodash@4.17.24': {}
+
+  '@types/node@24.11.0':
+    dependencies:
+      undici-types: 7.16.0
+
+  '@types/web-bluetooth@0.0.20': {}
+
+  '@types/yauzl@2.10.3':
+    dependencies:
+      '@types/node': 24.11.0
+    optional: true
+
+  '@vitejs/plugin-vue@6.0.4(vite@7.3.1(@types/node@24.11.0)(sass@1.97.3))(vue@3.5.29(typescript@5.9.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.0-rc.2
+      vite: 7.3.1(@types/node@24.11.0)(sass@1.97.3)
+      vue: 3.5.29(typescript@5.9.3)
+
+  '@volar/language-core@2.4.28':
+    dependencies:
+      '@volar/source-map': 2.4.28
+
+  '@volar/source-map@2.4.28': {}
+
+  '@volar/typescript@2.4.28':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
+  '@vue/compiler-core@3.5.29':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@vue/shared': 3.5.29
+      entities: 7.0.1
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-dom@3.5.29':
+    dependencies:
+      '@vue/compiler-core': 3.5.29
+      '@vue/shared': 3.5.29
+
+  '@vue/compiler-sfc@3.5.29':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@vue/compiler-core': 3.5.29
+      '@vue/compiler-dom': 3.5.29
+      '@vue/compiler-ssr': 3.5.29
+      '@vue/shared': 3.5.29
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.8
+      source-map-js: 1.2.1
+
+  '@vue/compiler-ssr@3.5.29':
+    dependencies:
+      '@vue/compiler-dom': 3.5.29
+      '@vue/shared': 3.5.29
+
+  '@vue/devtools-api@6.6.4': {}
+
+  '@vue/language-core@3.2.5':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      '@vue/compiler-dom': 3.5.29
+      '@vue/shared': 3.5.29
+      alien-signals: 3.1.2
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      picomatch: 4.0.3
+
+  '@vue/reactivity@3.5.29':
+    dependencies:
+      '@vue/shared': 3.5.29
+
+  '@vue/runtime-core@3.5.29':
+    dependencies:
+      '@vue/reactivity': 3.5.29
+      '@vue/shared': 3.5.29
+
+  '@vue/runtime-dom@3.5.29':
+    dependencies:
+      '@vue/reactivity': 3.5.29
+      '@vue/runtime-core': 3.5.29
+      '@vue/shared': 3.5.29
+      csstype: 3.2.3
+
+  '@vue/server-renderer@3.5.29(vue@3.5.29(typescript@5.9.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.29
+      '@vue/shared': 3.5.29
+      vue: 3.5.29(typescript@5.9.3)
+
+  '@vue/shared@3.5.29': {}
+
+  '@vue/tsconfig@0.8.1(typescript@5.9.3)(vue@3.5.29(typescript@5.9.3))':
+    optionalDependencies:
+      typescript: 5.9.3
+      vue: 3.5.29(typescript@5.9.3)
+
+  '@vueuse/core@10.11.1(vue@3.5.29(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.5.29(typescript@5.9.3))
+      vue-demi: 0.14.10(vue@3.5.29(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/metadata@10.11.1': {}
+
+  '@vueuse/shared@10.11.1(vue@3.5.29(typescript@5.9.3))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.29(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  accepts@1.3.8:
+    dependencies:
+      mime-types: 2.1.35
+      negotiator: 0.6.3
+
+  acorn@8.16.0: {}
+
+  agent-base@7.1.4: {}
+
+  ajv-formats@2.1.1(ajv@8.18.0):
+    optionalDependencies:
+      ajv: 8.18.0
+
+  ajv-keywords@5.1.0(ajv@8.18.0):
+    dependencies:
+      ajv: 8.18.0
+      fast-deep-equal: 3.1.3
+
+  ajv@8.18.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.0
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  alien-signals@3.1.2: {}
+
+  ansi-regex@5.0.1: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  argparse@2.0.1: {}
+
+  array-flatten@1.1.1: {}
+
+  ast-types@0.13.4:
+    dependencies:
+      tslib: 2.8.1
+
+  async-validator@4.2.5: {}
+
+  async@3.2.6: {}
+
+  asynckit@0.4.0: {}
+
+  axios@1.13.6:
+    dependencies:
+      follow-redirects: 1.15.11
+      form-data: 4.0.5
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
+  b4a@1.8.0: {}
+
+  bare-events@2.8.2: {}
+
+  bare-fs@4.5.5:
+    dependencies:
+      bare-events: 2.8.2
+      bare-path: 3.0.0
+      bare-stream: 2.8.0(bare-events@2.8.2)
+      bare-url: 2.3.2
+      fast-fifo: 1.3.2
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
+  bare-os@3.7.1: {}
+
+  bare-path@3.0.0:
+    dependencies:
+      bare-os: 3.7.1
+
+  bare-stream@2.8.0(bare-events@2.8.2):
+    dependencies:
+      streamx: 2.23.0
+      teex: 1.0.1
+    optionalDependencies:
+      bare-events: 2.8.2
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
+  bare-url@2.3.2:
+    dependencies:
+      bare-path: 3.0.0
+
+  basic-ftp@5.2.0: {}
+
+  body-parser@1.20.4:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      http-errors: 2.0.1
+      iconv-lite: 0.4.24
+      on-finished: 2.4.1
+      qs: 6.14.2
+      raw-body: 2.5.3
+      type-is: 1.6.18
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+    optional: true
+
+  buffer-crc32@0.2.13: {}
+
+  bytes@3.1.2: {}
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  callsites@3.1.0: {}
+
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
+  chokidar@5.0.0:
+    dependencies:
+      readdirp: 5.0.0
+
+  chromium-bidi@14.0.0(devtools-protocol@0.0.1566079):
+    dependencies:
+      devtools-protocol: 0.0.1566079
+      mitt: 3.0.1
+      zod: 3.25.76
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  confbox@0.1.8: {}
+
+  confbox@0.2.4: {}
+
+  content-disposition@0.5.4:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  content-type@1.0.5: {}
+
+  cookie-signature@1.0.7: {}
+
+  cookie@0.7.2: {}
+
+  cosmiconfig@9.0.1(typescript@5.9.3):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.9.3
+
+  csstype@3.2.3: {}
+
+  data-uri-to-buffer@6.0.2: {}
+
+  dayjs@1.11.19: {}
+
+  debug@2.6.9:
+    dependencies:
+      ms: 2.0.0
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  degenerator@5.0.1:
+    dependencies:
+      ast-types: 0.13.4
+      escodegen: 2.1.0
+      esprima: 4.0.1
+
+  delayed-stream@1.0.0: {}
+
+  depd@2.0.0: {}
+
+  destroy@1.2.0: {}
+
+  detect-libc@2.1.2:
+    optional: true
+
+  devtools-protocol@0.0.1566079: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  ee-first@1.1.1: {}
+
+  element-plus@2.13.3(vue@3.5.29(typescript@5.9.3)):
+    dependencies:
+      '@ctrl/tinycolor': 3.6.1
+      '@element-plus/icons-vue': 2.3.2(vue@3.5.29(typescript@5.9.3))
+      '@floating-ui/dom': 1.7.6
+      '@popperjs/core': '@sxzz/popperjs-es@2.11.8'
+      '@types/lodash': 4.17.24
+      '@types/lodash-es': 4.17.12
+      '@vueuse/core': 10.11.1(vue@3.5.29(typescript@5.9.3))
+      async-validator: 4.2.5
+      dayjs: 1.11.19
+      lodash: 4.17.23
+      lodash-es: 4.17.23
+      lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.23)(lodash@4.17.23)
+      memoize-one: 6.0.0
+      normalize-wheel-es: 1.2.0
+      vue: 3.5.29(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
+  emoji-regex@8.0.0: {}
+
+  encodeurl@2.0.0: {}
+
+  end-of-stream@1.4.5:
+    dependencies:
+      once: 1.4.0
+
+  entities@7.0.1: {}
+
+  env-paths@2.2.1: {}
+
+  error-ex@1.3.4:
+    dependencies:
+      is-arrayish: 0.2.1
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  esbuild@0.27.3:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.3
+      '@esbuild/android-arm': 0.27.3
+      '@esbuild/android-arm64': 0.27.3
+      '@esbuild/android-x64': 0.27.3
+      '@esbuild/darwin-arm64': 0.27.3
+      '@esbuild/darwin-x64': 0.27.3
+      '@esbuild/freebsd-arm64': 0.27.3
+      '@esbuild/freebsd-x64': 0.27.3
+      '@esbuild/linux-arm': 0.27.3
+      '@esbuild/linux-arm64': 0.27.3
+      '@esbuild/linux-ia32': 0.27.3
+      '@esbuild/linux-loong64': 0.27.3
+      '@esbuild/linux-mips64el': 0.27.3
+      '@esbuild/linux-ppc64': 0.27.3
+      '@esbuild/linux-riscv64': 0.27.3
+      '@esbuild/linux-s390x': 0.27.3
+      '@esbuild/linux-x64': 0.27.3
+      '@esbuild/netbsd-arm64': 0.27.3
+      '@esbuild/netbsd-x64': 0.27.3
+      '@esbuild/openbsd-arm64': 0.27.3
+      '@esbuild/openbsd-x64': 0.27.3
+      '@esbuild/openharmony-arm64': 0.27.3
+      '@esbuild/sunos-x64': 0.27.3
+      '@esbuild/win32-arm64': 0.27.3
+      '@esbuild/win32-ia32': 0.27.3
+      '@esbuild/win32-x64': 0.27.3
+
+  escalade@3.2.0: {}
+
+  escape-html@1.0.3: {}
+
+  escape-string-regexp@5.0.0: {}
+
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
+  esprima@4.0.1: {}
+
+  estraverse@5.3.0: {}
+
+  estree-walker@2.0.2: {}
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  esutils@2.0.3: {}
+
+  etag@1.8.1: {}
+
+  eventemitter3@4.0.7:
+    optional: true
+
+  events-universal@1.0.1:
+    dependencies:
+      bare-events: 2.8.2
+    transitivePeerDependencies:
+      - bare-abort-controller
+
+  express@4.22.1:
+    dependencies:
+      accepts: 1.3.8
+      array-flatten: 1.1.1
+      body-parser: 1.20.4
+      content-disposition: 0.5.4
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.0.7
+      debug: 2.6.9
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 1.3.2
+      fresh: 0.5.2
+      http-errors: 2.0.1
+      merge-descriptors: 1.0.3
+      methods: 1.1.2
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      path-to-regexp: 0.1.12
+      proxy-addr: 2.0.7
+      qs: 6.14.2
+      range-parser: 1.2.1
+      safe-buffer: 5.2.1
+      send: 0.19.2
+      serve-static: 1.16.3
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      type-is: 1.6.18
+      utils-merge: 1.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  exsolve@1.0.8: {}
+
+  extract-zip@2.0.1:
+    dependencies:
+      debug: 4.4.3
+      get-stream: 5.2.0
+      yauzl: 2.10.0
+    optionalDependencies:
+      '@types/yauzl': 2.10.3
+    transitivePeerDependencies:
+      - supports-color
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-fifo@1.3.2: {}
+
+  fast-uri@3.1.0: {}
+
+  fd-slicer@1.1.0:
+    dependencies:
+      pend: 1.2.0
+
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+    optional: true
+
+  finalhandler@1.3.2:
+    dependencies:
+      debug: 2.6.9
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  follow-redirects@1.15.11: {}
+
+  form-data@4.0.5:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
+      mime-types: 2.1.35
+
+  forwarded@0.2.0: {}
+
+  fresh@0.5.2: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  get-caller-file@2.0.5: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  get-stream@5.2.0:
+    dependencies:
+      pump: 3.0.4
+
+  get-uri@6.0.5:
+    dependencies:
+      basic-ftp: 5.2.0
+      data-uri-to-buffer: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  gopd@1.2.0: {}
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  http-errors@2.0.1:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      toidentifier: 1.0.1
+
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  http-proxy-middleware@2.0.9:
+    dependencies:
+      '@types/http-proxy': 1.17.17
+      http-proxy: 1.18.1
+      is-glob: 4.0.3
+      is-plain-obj: 3.0.0
+      micromatch: 4.0.8
+    transitivePeerDependencies:
+      - debug
+    optional: true
+
+  http-proxy@1.18.1:
+    dependencies:
+      eventemitter3: 4.0.7
+      follow-redirects: 1.15.11
+      requires-port: 1.0.0
+    transitivePeerDependencies:
+      - debug
+    optional: true
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  iconv-lite@0.4.24:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  immutable@5.1.5: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  inherits@2.0.4: {}
+
+  ip-address@10.1.0: {}
+
+  ipaddr.js@1.9.1: {}
+
+  is-arrayish@0.2.1: {}
+
+  is-extglob@2.1.1:
+    optional: true
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+    optional: true
+
+  is-number@7.0.0:
+    optional: true
+
+  is-plain-obj@3.0.0:
+    optional: true
+
+  js-tokens@4.0.0: {}
+
+  js-tokens@9.0.1: {}
+
+  js-yaml@4.1.1:
+    dependencies:
+      argparse: 2.0.1
+
+  json-parse-even-better-errors@2.3.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  lines-and-columns@1.2.4: {}
+
+  local-pkg@1.1.2:
+    dependencies:
+      mlly: 1.8.0
+      pkg-types: 2.3.0
+      quansync: 0.2.11
+
+  lodash-es@4.17.23: {}
+
+  lodash-unified@1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.23)(lodash@4.17.23):
+    dependencies:
+      '@types/lodash-es': 4.17.12
+      lodash: 4.17.23
+      lodash-es: 4.17.23
+
+  lodash@4.17.23: {}
+
+  lru-cache@7.18.3: {}
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  math-intrinsics@1.1.0: {}
+
+  media-typer@0.3.0: {}
+
+  memoize-one@6.0.0: {}
+
+  merge-descriptors@1.0.3: {}
+
+  methods@1.1.2: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+    optional: true
+
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mime@1.6.0: {}
+
+  mitt@3.0.1: {}
+
+  mlly@1.8.0:
+    dependencies:
+      acorn: 8.16.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.3
+
+  ms@2.0.0: {}
+
+  ms@2.1.3: {}
+
+  muggle-string@0.4.1: {}
+
+  nanoid@3.3.11: {}
+
+  negotiator@0.6.3: {}
+
+  netmask@2.0.2: {}
+
+  node-addon-api@7.1.1:
+    optional: true
+
+  normalize-wheel-es@1.2.0: {}
+
+  object-inspect@1.13.4: {}
+
+  obug@2.1.1: {}
+
+  on-finished@2.4.1:
+    dependencies:
+      ee-first: 1.1.1
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  pac-proxy-agent@7.2.0:
+    dependencies:
+      '@tootallnate/quickjs-emscripten': 0.23.0
+      agent-base: 7.1.4
+      debug: 4.4.3
+      get-uri: 6.0.5
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      pac-resolver: 7.0.1
+      socks-proxy-agent: 8.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  pac-resolver@7.0.1:
+    dependencies:
+      degenerator: 5.0.1
+      netmask: 2.0.2
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      error-ex: 1.3.4
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  parseurl@1.3.3: {}
+
+  path-browserify@1.0.1: {}
+
+  path-to-regexp@0.1.12: {}
+
+  pathe@2.0.3: {}
+
+  pend@1.2.0: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1:
+    optional: true
+
+  picomatch@4.0.3: {}
+
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.0
+      pathe: 2.0.3
+
+  pkg-types@2.3.0:
+    dependencies:
+      confbox: 0.2.4
+      exsolve: 1.0.8
+      pathe: 2.0.3
+
+  portfinder@1.0.38:
+    dependencies:
+      async: 3.2.6
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  postcss@8.5.8:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  progress@2.0.3: {}
+
+  promise-limit@2.7.0: {}
+
+  proxy-addr@2.0.7:
+    dependencies:
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
+
+  proxy-agent@6.5.0:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      lru-cache: 7.18.3
+      pac-proxy-agent: 7.2.0
+      proxy-from-env: 1.1.0
+      socks-proxy-agent: 8.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  proxy-from-env@1.1.0: {}
+
+  pump@3.0.4:
+    dependencies:
+      end-of-stream: 1.4.5
+      once: 1.4.0
+
+  puppeteer-core@24.37.5:
+    dependencies:
+      '@puppeteer/browsers': 2.13.0
+      chromium-bidi: 14.0.0(devtools-protocol@0.0.1566079)
+      debug: 4.4.3
+      devtools-protocol: 0.0.1566079
+      typed-query-selector: 2.12.1
+      webdriver-bidi-protocol: 0.4.1
+      ws: 8.19.0
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - bufferutil
+      - react-native-b4a
+      - supports-color
+      - utf-8-validate
+
+  puppeteer@24.37.5(typescript@5.9.3):
+    dependencies:
+      '@puppeteer/browsers': 2.13.0
+      chromium-bidi: 14.0.0(devtools-protocol@0.0.1566079)
+      cosmiconfig: 9.0.1(typescript@5.9.3)
+      devtools-protocol: 0.0.1566079
+      puppeteer-core: 24.37.5
+      typed-query-selector: 2.12.1
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - bufferutil
+      - react-native-b4a
+      - supports-color
+      - typescript
+      - utf-8-validate
+
+  qs@6.14.2:
+    dependencies:
+      side-channel: 1.1.0
+
+  quansync@0.2.11: {}
+
+  range-parser@1.2.1: {}
+
+  raw-body@2.5.3:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.1
+      iconv-lite: 0.4.24
+      unpipe: 1.0.0
+
+  readdirp@4.1.2: {}
+
+  readdirp@5.0.0: {}
+
+  require-directory@2.1.1: {}
+
+  require-from-string@2.0.2: {}
+
+  requires-port@1.0.0:
+    optional: true
+
+  resolve-from@4.0.0: {}
+
+  rollup@4.59.0:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.59.0
+      '@rollup/rollup-android-arm64': 4.59.0
+      '@rollup/rollup-darwin-arm64': 4.59.0
+      '@rollup/rollup-darwin-x64': 4.59.0
+      '@rollup/rollup-freebsd-arm64': 4.59.0
+      '@rollup/rollup-freebsd-x64': 4.59.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.59.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.59.0
+      '@rollup/rollup-linux-arm64-gnu': 4.59.0
+      '@rollup/rollup-linux-arm64-musl': 4.59.0
+      '@rollup/rollup-linux-loong64-gnu': 4.59.0
+      '@rollup/rollup-linux-loong64-musl': 4.59.0
+      '@rollup/rollup-linux-ppc64-gnu': 4.59.0
+      '@rollup/rollup-linux-ppc64-musl': 4.59.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.59.0
+      '@rollup/rollup-linux-riscv64-musl': 4.59.0
+      '@rollup/rollup-linux-s390x-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-musl': 4.59.0
+      '@rollup/rollup-openbsd-x64': 4.59.0
+      '@rollup/rollup-openharmony-arm64': 4.59.0
+      '@rollup/rollup-win32-arm64-msvc': 4.59.0
+      '@rollup/rollup-win32-ia32-msvc': 4.59.0
+      '@rollup/rollup-win32-x64-gnu': 4.59.0
+      '@rollup/rollup-win32-x64-msvc': 4.59.0
+      fsevents: 2.3.3
+
+  safe-buffer@5.2.1: {}
+
+  safer-buffer@2.1.2: {}
+
+  sass@1.97.3:
+    dependencies:
+      chokidar: 4.0.3
+      immutable: 5.1.5
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.5.6
+
+  schema-utils@4.0.0:
+    dependencies:
+      '@types/json-schema': 7.0.15
+      ajv: 8.18.0
+      ajv-formats: 2.1.1(ajv@8.18.0)
+      ajv-keywords: 5.1.0(ajv@8.18.0)
+
+  schema-utils@4.3.3:
+    dependencies:
+      '@types/json-schema': 7.0.15
+      ajv: 8.18.0
+      ajv-formats: 2.1.1(ajv@8.18.0)
+      ajv-keywords: 5.1.0(ajv@8.18.0)
+
+  scule@1.3.0: {}
+
+  semver@7.7.4: {}
+
+  send@0.19.2:
+    dependencies:
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 0.5.2
+      http-errors: 2.0.1
+      mime: 1.6.0
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  serve-static@1.16.3:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 0.19.2
+    transitivePeerDependencies:
+      - supports-color
+
+  setprototypeof@1.2.0: {}
+
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  smart-buffer@4.2.0: {}
+
+  socks-proxy-agent@8.0.5:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+      socks: 2.8.7
+    transitivePeerDependencies:
+      - supports-color
+
+  socks@2.8.7:
+    dependencies:
+      ip-address: 10.1.0
+      smart-buffer: 4.2.0
+
+  source-map-js@1.2.1: {}
+
+  source-map@0.6.1:
+    optional: true
+
+  statuses@2.0.2: {}
+
+  stoppable@1.1.0: {}
+
+  streamx@2.23.0:
+    dependencies:
+      events-universal: 1.0.1
+      fast-fifo: 1.3.2
+      text-decoder: 1.2.7
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-literal@3.1.0:
+    dependencies:
+      js-tokens: 9.0.1
+
+  tar-fs@3.1.1:
+    dependencies:
+      pump: 3.0.4
+      tar-stream: 3.1.8
+    optionalDependencies:
+      bare-fs: 4.5.5
+      bare-path: 3.0.0
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - react-native-b4a
+
+  tar-stream@3.1.8:
+    dependencies:
+      b4a: 1.8.0
+      bare-fs: 4.5.5
+      fast-fifo: 1.3.2
+      streamx: 2.23.0
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - react-native-b4a
+
+  teex@1.0.1:
+    dependencies:
+      streamx: 2.23.0
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
+  text-decoder@1.2.7:
+    dependencies:
+      b4a: 1.8.0
+    transitivePeerDependencies:
+      - react-native-b4a
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+    optional: true
+
+  toidentifier@1.0.1: {}
+
+  ts-deepmerge@6.2.1: {}
+
+  tslib@2.8.1: {}
+
+  type-is@1.6.18:
+    dependencies:
+      media-typer: 0.3.0
+      mime-types: 2.1.35
+
+  typed-query-selector@2.12.1: {}
+
+  typescript@5.9.3: {}
+
+  ufo@1.6.3: {}
+
+  undici-types@7.16.0: {}
+
+  unimport@5.7.0:
+    dependencies:
+      acorn: 8.16.0
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      pkg-types: 2.3.0
+      scule: 1.3.0
+      strip-literal: 3.1.0
+      tinyglobby: 0.2.15
+      unplugin: 2.3.11
+      unplugin-utils: 0.3.1
+
+  unpipe@1.0.0: {}
+
+  unplugin-auto-import@21.0.0(@vueuse/core@10.11.1(vue@3.5.29(typescript@5.9.3))):
+    dependencies:
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      picomatch: 4.0.3
+      unimport: 5.7.0
+      unplugin: 2.3.11
+      unplugin-utils: 0.3.1
+    optionalDependencies:
+      '@vueuse/core': 10.11.1(vue@3.5.29(typescript@5.9.3))
+
+  unplugin-utils@0.3.1:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.3
+
+  unplugin-vue-components@31.0.0(vue@3.5.29(typescript@5.9.3)):
+    dependencies:
+      chokidar: 5.0.0
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      obug: 2.1.1
+      picomatch: 4.0.3
+      tinyglobby: 0.2.15
+      unplugin: 2.3.11
+      unplugin-utils: 0.3.1
+      vue: 3.5.29(typescript@5.9.3)
+
+  unplugin@2.3.11:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.16.0
+      picomatch: 4.0.3
+      webpack-virtual-modules: 0.6.2
+
+  utils-merge@1.0.1: {}
+
+  vary@1.1.2: {}
+
+  vite@7.3.1(@types/node@24.11.0)(sass@1.97.3):
+    dependencies:
+      esbuild: 0.27.3
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.8
+      rollup: 4.59.0
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 24.11.0
+      fsevents: 2.3.3
+      sass: 1.97.3
+
+  vscode-uri@3.1.0: {}
+
+  vue-demi@0.14.10(vue@3.5.29(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.29(typescript@5.9.3)
+
+  vue-router@4.6.4(vue@3.5.29(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.29(typescript@5.9.3)
+
+  vue-tsc@3.2.5(typescript@5.9.3):
+    dependencies:
+      '@volar/typescript': 2.4.28
+      '@vue/language-core': 3.2.5
+      typescript: 5.9.3
+
+  vue@3.5.29(typescript@5.9.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.29
+      '@vue/compiler-sfc': 3.5.29
+      '@vue/runtime-dom': 3.5.29
+      '@vue/server-renderer': 3.5.29(vue@3.5.29(typescript@5.9.3))
+      '@vue/shared': 3.5.29
+    optionalDependencies:
+      typescript: 5.9.3
+
+  vuex@4.1.0(vue@3.5.29(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.29(typescript@5.9.3)
+
+  webdriver-bidi-protocol@0.4.1: {}
+
+  webpack-virtual-modules@0.6.2: {}
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrappy@1.0.2: {}
+
+  ws@8.19.0: {}
+
+  y18n@5.0.8: {}
+
+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
+  yauzl@2.10.0:
+    dependencies:
+      buffer-crc32: 0.2.13
+      fd-slicer: 1.1.0
+
+  zod@3.25.76: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..c6afab4
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,5 @@
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - esbuild
+  - puppeteer
+  - vue-demi
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..0ab3184
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-config-provider :locale="zhCn">
+    <RouterView />
+    <LoginDialog />
+  </el-config-provider>
+</template>
+
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+import LoginDialog from '@/components/LoginDialog.vue'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+</script>
+
+<style lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+</style>
\ No newline at end of file
diff --git a/src/api/auth.ts b/src/api/auth.ts
new file mode 100644
index 0000000..0891ab3
--- /dev/null
+++ b/src/api/auth.ts
@@ -0,0 +1,50 @@
+import request from '@/utils/request'
+
+/** 通用响应结构 */
+export interface ApiResult<T = any> {
+  code: string
+  msg: string
+  data?: T
+  timestamp: string
+  uuid: string
+}
+
+/** 登录成功返回的用户信息 */
+export interface LoginData {
+  userId: string
+  nick: string
+}
+
+/**
+ * 发送短信验证码
+ * POST /public/sms/sendCode?mobileNumber=xxx
+ * 返回 data: true 表示发送成功，data: false 表示发送失败
+ */
+export function sendSmsCode(mobileNumber: string) {
+  return request.post<any, ApiResult<boolean>>('/public/sms/sendCode', null, {
+    params: { mobileNumber },
+  })
+}
+
+/**
+ * 短信验证码登录
+ * POST /public/login/smsLogin
+ * Body: { mobileNumber, code, inviteCode? }
+ * 登录成功后后端会 Set-Cookie: Token=xxx
+ */
+export function smsLogin(mobileNumber: string, code: string, inviteCode?: string) {
+  return request.post<any, ApiResult<LoginData>>('/public/login/smsLogin', {
+    mobileNumber,
+    code,
+    ...(inviteCode ? { inviteCode } : {}),
+  })
+}
+
+/**
+ * 退出登录
+ * POST /public/logout
+ * 不需要参数，Cookie 会自动携带
+ */
+export function logout() {
+  return request.post<any, ApiResult>('/public/logout')
+}
diff --git a/src/api/common.ts b/src/api/common.ts
new file mode 100644
index 0000000..738e17c
--- /dev/null
+++ b/src/api/common.ts
@@ -0,0 +1,91 @@
+import request from '@/utils/request'
+import type { ApiResult } from '@/api/auth'
+
+/** 行业树节点（二级） */
+export interface IndustryChild {
+  id: string
+  name: string
+  level: number
+}
+
+/** 行业树节点（一级，含子节点） */
+export interface IndustryItem {
+  id: string
+  name: string
+  level: number
+  children: IndustryChild[]
+}
+
+/**
+ * 获取行业树分类数据
+ * GET /public/industries/tree
+ * 返回一级二级嵌套的行业分类
+ */
+export function fetchIndustryTree() {
+  return request.get<any, ApiResult<IndustryItem[]>>('/public/industries/tree')
+}
+
+// ==================== 岗位分类相关 ====================
+
+/** 岗位树节点（三级 / 末级） */
+export interface JobCategoryLeaf {
+  id: string
+  name: string
+  level: number
+}
+
+/** 岗位树节点（二级，含三级子节点） */
+export interface JobCategoryChild {
+  id: string
+  name: string
+  level: number
+  children: JobCategoryLeaf[]
+}
+
+/** 岗位树节点（一级，含二级子节点） */
+export interface JobCategoryItem {
+  id: string
+  name: string
+  level: number
+  children: JobCategoryChild[]
+}
+
+/**
+ * 获取岗位树分类数据
+ * GET /public/job-categories/tree
+ * 返回一级二级三级嵌套的岗位分类
+ */
+export function fetchJobCategoryTree() {
+  return request.get<any, ApiResult<JobCategoryItem[]>>('/public/job-categories/tree')
+}
+
+// ==================== 地区分类相关 ====================
+
+/** 地区树节点（三级 / 区县级） */
+export interface RegionLeaf {
+  code: string
+  name: string
+}
+
+/** 地区树节点（二级 / 市级，可能含三级子节点） */
+export interface RegionChild {
+  code: string
+  name: string
+  children?: RegionLeaf[]
+}
+
+/** 地区树节点（一级 / 省级，含二级子节点） */
+export interface RegionItem {
+  code: string
+  name: string
+  children: RegionChild[]
+}
+
+/**
+ * 获取地区树分类数据
+ * GET /public/regions/tree
+ * 返回省市区三级嵌套的地区分类
+ */
+export function fetchRegionTree() {
+  return request.get<any, ApiResult<RegionItem[]>>('/public/regions/tree')
+}
diff --git a/src/api/jobs.ts b/src/api/jobs.ts
new file mode 100644
index 0000000..3a7361f
--- /dev/null
+++ b/src/api/jobs.ts
@@ -0,0 +1,192 @@
+import request from '@/utils/request'
+import type { ApiResult } from '@/api/auth'
+
+// ==================== 匹配详情 ====================
+
+/** 匹配度详情 */
+export interface MatchDetail {
+  /** 行业匹配分 */
+  industryScore: number
+  /** 技能匹配分 */
+  skillScore: number
+  /** 经验匹配分 */
+  experienceScore: number
+}
+
+// ==================== 岗位列表项 ====================
+
+/** 岗位列表项（接口返回结构） */
+export interface JobListItem {
+  /** 岗位 ID */
+  id: string
+  /** 岗位标题 */
+  title: string
+  /** 公司全称 */
+  companyName: string
+  /** 公司简称 */
+  companyShortName: string
+  /** 公司类型（如"上市企业"） */
+  companyType: string
+  /** 地区名称 */
+  regionName: string
+  /** 岗位分类名称 */
+  categoryName: string
+  /** 标签列表 */
+  tags: string[]
+  /** 原始招聘链接 */
+  sourceUrl: string
+  /** 是否已收藏 */
+  isFavorite: boolean
+  /** 岗位状态：0=有效 1=已下架 2=已过期 */
+  status: number
+  /** 综合匹配分（0-100） */
+  matchScore: number
+  /** 匹配度详情 */
+  matchDetail: MatchDetail
+}
+
+// ==================== 分页结构 ====================
+
+/** 分页数据结构 */
+export interface JobPageData {
+  /** 当前页码 */
+  pageNum: string
+  /** 每页条数 */
+  pageSize: string
+  /** 总记录数 */
+  total: string
+  /** 岗位列表 */
+  list: JobListItem[]
+}
+
+// ==================== 请求参数 ====================
+
+/** 岗位列表请求参数 */
+export interface JobListParams {
+  /** 当前页码，从1开始，默认1 */
+  pageNum?: number
+  /** 每页条数，默认15 */
+  pageSize?: number
+  /** 地区编码列表 */
+  regionCodes?: string[]
+  /** 岗位类型 ID 列表 */
+  categoryIds?: number[]
+  /** 行业 ID 列表 */
+  industryIds?: number[]
+  /** 工作类型：0=全职 1=兼职 */
+  employmentType?: number
+  /** 指定岗位 ID 列表（用于收藏列表） */
+  jobIds?: number[]
+  /** 岗位状态过滤（0=有效 1=已下架 2=已过期，可多选，null或空=查所有） */
+  statusFilter?: number[]
+}
+
+// ==================== 接口方法 ====================
+
+/**
+ * 获取岗位列表
+ * POST /job/list
+ * @param params 岗位列表查询参数
+ */
+export function fetchJobList(params: JobListParams = {}) {
+  return request.post<any, ApiResult<JobPageData>>('/job/list', {
+    pageNum: params.pageNum ?? 1,
+    pageSize: params.pageSize ?? 15,
+    ...params,
+  })
+}
+
+// ==================== 岗位详情 ====================
+
+/** 匹配度详情（岗位详情用） */
+export interface JobMatchScoreDto {
+  /** 行业得分（0-100） */
+  industryScore: number
+  /** 技能得分（0-100） */
+  skillScore: number
+  /** 经验得分（0-100） */
+  experienceScore: number
+}
+
+/** 岗位详情出参 */
+export interface JobDetailData {
+  /** 岗位 ID */
+  jobId: string
+  /** 岗位标题 */
+  jobTitle: string
+  /** 薪资描述 */
+  salary: string
+  /** 工作类型 0=全职 1=兼职 */
+  employmentType: number
+  /** 学历要求 0=不限 1=大专 2=本科 3=硕士 4=博士 */
+  education: number
+  /** 最低工作年限 */
+  minExperience: number
+  /** 岗位职责 */
+  description: string
+  /** 任职要求 */
+  requirement: string
+  /** 加分项 */
+  bonus: string
+  /** 岗位标签 */
+  tags: string[]
+  /** 技能标签 */
+  skillTags: string[]
+  /** 来源链接 */
+  sourceUrl: string
+  /** 岗位类型名称 */
+  categoryName: string
+  /** 要求的行业经验名称 */
+  requiredIndustryName: string
+  /** 公司 ID */
+  companyId: string
+  /** 公司名称 */
+  companyName: string
+  /** 公司简称 */
+  companyShortName: string
+  /** 公司 Logo URL */
+  companyLogoUrl: string
+  /** 公司类型 */
+  companyType: string
+  /** 公司所属行业名称 */
+  companyIndustryName: string
+  /** 公司标签 */
+  companyTags: string[]
+  /** 公司简介 */
+  companySummary: string
+  /** 公司描述 */
+  companyDescription: string
+  /** 成立时间 */
+  companyFoundedYear: string
+  /** 公司地址 */
+  companyAddress: string
+  /** 公司规模 */
+  companyScale: string
+  /** 公司官网 */
+  companyWebsite: string
+  /** 融资状态 */
+  companyFinancingStage: string
+  /** 最新估值 */
+  companyLatestValuation: string
+  /** 公司新闻 */
+  companyNews: string[]
+  /** 地区名称 */
+  regionName: string
+  /** 匹配总分 */
+  matchScore: number
+  /** 匹配度详情 */
+  matchDetail: JobMatchScoreDto
+  /** 是否已收藏 */
+  isFavorite: boolean
+}
+
+/**
+ * 获取岗位详情
+ * GET /job/detail?jobId=xxx
+ * @param jobId 岗位 ID
+ */
+export function fetchJobDetail(jobId: string) {
+  return request.get<any, ApiResult<JobDetailData>>('/job/detail', {
+    params: { jobId },
+  })
+}
diff --git a/src/api/menu.ts b/src/api/menu.ts
new file mode 100644
index 0000000..d11a7e9
--- /dev/null
+++ b/src/api/menu.ts
@@ -0,0 +1,35 @@
+/**
+ * 获取当前用户有权限的路由列表
+ *
+ * 【mock 阶段】直接返回写死的数据，模拟后端接口
+ * 【对接真实接口时】把下面的 mock 数据替换成：
+ *   return axios.get('/api/user/menus').then(res => res.data)
+ *
+ * 返回格式约定：
+ *   path      — 路由路径
+ *   name      — 路由名称（唯一标识，也用于 removeRoute）
+ *   component — 字符串，对应前端组件映射表的 key
+ *   meta      — 可选，传给路由的 meta 信息（图标、标题等）
+ */
+export interface MenuItemRaw {
+  path: string
+  name: string
+  component: string
+  meta?: {
+    label?: string
+    icon?: string
+    badge?: string
+    /** 'footer' 表示该菜单项显示在底部区域而非主导航 */
+    position?: string
+  }
+}
+
+export async function fetchUserRoutes(): Promise<MenuItemRaw[]> {
+  // TODO: 替换为真实接口 → return axios.get('/api/user/menus').then(res => res.data)
+  return [
+    { path: '/agent',   name: 'Agent',   component: 'Agent',   meta: { label: 'AI助手', icon: 'nav-agent-icon',   badge: 'NEW' } },
+    { path: '/profile', name: 'Profile', component: 'Profile', meta: { label: '个人资料', icon: 'nav-profile-icon' } },
+    { path: '/resume',  name: 'Resume',  component: 'Resume',  meta: { label: '简历', icon: 'nav-resume-icon' } },
+    { path: '/settings', name: 'Settings', component: 'Settings', meta: { label: '设置', icon: 'nav-setting-icon', position: 'footer' } },
+  ]
+}
diff --git a/src/api/profile.ts b/src/api/profile.ts
new file mode 100644
index 0000000..aa2ee2d
--- /dev/null
+++ b/src/api/profile.ts
@@ -0,0 +1,309 @@
+import request from '@/utils/request'
+import type { ApiResult } from '@/api/auth'
+
+// ==================== 个人资料主表相关 ====================
+
+/** 保存/更新个人资料主表 — 请求参数 */
+export interface SaveProfileParams {
+  /** 真实姓名 */
+  name?: string
+  /** 邮箱 */
+  email?: string
+  /** 手机号码 */
+  mobileNumber?: string
+  /** 身份证号 */
+  idCard?: string
+  /** 所在城市编码 */
+  regionCode?: string
+  /** 微信号 */
+  wechatNumber?: string
+  /** 作品集链接 */
+  portfolioUrl?: string
+  /** 工作年限 */
+  workYears?: number
+  /** 拥有经验的行业ID列表 */
+  experienceIndustryIds?: number[]
+  /** 技能标签列表 */
+  skills?: string[]
+  /** 证书标签列表 */
+  certificates?: string[]
+}
+
+/**
+ * 保存/更新个人资料主表信息
+ * POST /user/profile
+ * Cookie 自动携带身份信息，无需额外传 userId
+ */
+export function saveProfile(data: SaveProfileParams) {
+  return request.post<any, ApiResult>('/user/profile', data)
+}
+
+/** 获取个人资料主表 — 返回数据结构 */
+export interface ProfileData {
+  /** 主键 ID */
+  id?: number
+  /** 真实姓名 */
+  name?: string
+  /** 邮箱 */
+  email?: string
+  /** 手机号码 */
+  mobileNumber?: string
+  /** 身份证号 */
+  idCard?: string
+  /** 所在城市编码 */
+  regionCode?: string
+  /** 微信号 */
+  wechatNumber?: string
+  /** 作品集链接 */
+  portfolioUrl?: string
+  /** 工作年限 */
+  workYears?: number
+  /** 拥有经验的行业ID列表 */
+  experienceIndustryIds?: number[]
+  /** 技能标签列表 */
+  skills?: string[]
+  /** 证书标签列表 */
+  certificates?: string[]
+}
+
+/**
+ * 获取个人资料主表信息
+ * GET /user/profile
+ * Cookie 自动携带身份信息，无需额外传参
+ */
+export function fetchProfile() {
+  return request.get<any, ApiResult<ProfileData>>('/user/profile')
+}
+
+// ==================== 教育经历相关 ====================
+
+/** 描述段落 */
+export interface DescriptionParagraph {
+  /** 段落标识，前端生成的短ID */
+  id?: string
+  /** 段落文本内容 */
+  text: string
+}
+
+/** 教育经历 — 查询返回数据结构 */
+export interface EducationItem {
+  /** 主键 ID */
+  id?: number
+  /** 学校名称 */
+  school?: string
+  /** 专业 */
+  major?: string
+  /** 学历 1=大专 2=本科 3=硕士 4=博士 */
+  degree?: number
+  /** 学习形式 0=全日制 1=非全日制 */
+  studyType?: number
+  /** 入学时间，格式：YYYY-MM */
+  startDate?: string
+  /** 毕业时间，格式：YYYY-MM */
+  endDate?: string
+  /** 描述段落 */
+  description?: DescriptionParagraph[]
+}
+
+/** 教育经历 — 保存请求参数（单条） */
+export interface SaveEducationItem {
+  /** 学校名称 */
+  school: string
+  /** 专业 */
+  major?: string
+  /** 学历 1=大专 2=本科 3=硕士 4=博士 */
+  degree: number
+  /** 学习形式 0=全日制 1=非全日制 */
+  studyType?: number
+  /** 入学时间，格式：YYYY-MM */
+  startDate?: string
+  /** 毕业时间，格式：YYYY-MM */
+  endDate?: string
+  /** 描述段落 */
+  description?: DescriptionParagraph[]
+}
+
+/**
+ * 获取教育经历列表
+ * GET /user/profile/education
+ * Cookie 自动携带身份信息，无需额外传参
+ */
+export function fetchEducation() {
+  return request.get<any, ApiResult<EducationItem[]>>('/user/profile/education')
+}
+
+/**
+ * 保存教育经历（全量覆盖）
+ * POST /user/profile/education
+ * Body: SaveEducationItem[]
+ */
+export function saveEducation(data: SaveEducationItem[]) {
+  return request.post<any, ApiResult>('/user/profile/education', data)
+}
+
+// ==================== 工作经历相关 ====================
+
+/** 工作经历 — 查询返回数据结构 */
+export interface WorkItem {
+  /** 主键 ID */
+  id?: number
+  /** 公司名称 */
+  companyName?: string
+  /** 职位 */
+  position?: string
+  /** 开始时间 */
+  startDate?: string
+  /** 结束时间 */
+  endDate?: string
+  /** 描述段落 */
+  description?: DescriptionParagraph[]
+}
+
+/** 工作经历 — 保存请求参数（单条） */
+export interface SaveWorkItem {
+  /** 公司名称 */
+  companyName: string
+  /** 职位 */
+  position: string
+  /** 开始时间，格式：2023.06 */
+  startDate: string
+  /** 结束时间，格式：2023.09，至今则为空 */
+  endDate?: string
+  /** 描述段落 */
+  description?: DescriptionParagraph[]
+}
+
+/**
+ * 获取工作经历列表
+ * GET /user/profile/work
+ */
+export function fetchWork() {
+  return request.get<any, ApiResult<WorkItem[]>>('/user/profile/work')
+}
+
+/**
+ * 保存工作经历（全量覆盖）
+ * POST /user/profile/work
+ * Body: SaveWorkItem[]
+ */
+export function saveWork(data: SaveWorkItem[]) {
+  return request.post<any, ApiResult>('/user/profile/work', data)
+}
+
+// ==================== 实习经历相关 ====================
+// 实习经历字段与工作经历一致，复用 WorkItem / SaveWorkItem 类型
+
+/**
+ * 获取实习经历列表
+ * GET /user/profile/internship
+ */
+export function fetchInternship() {
+  return request.get<any, ApiResult<WorkItem[]>>('/user/profile/internship')
+}
+
+/**
+ * 保存实习经历（全量覆盖）
+ * POST /user/profile/internship
+ * Body: SaveWorkItem[]
+ */
+export function saveInternship(data: SaveWorkItem[]) {
+  return request.post<any, ApiResult>('/user/profile/internship', data)
+}
+
+// ==================== 项目经历相关 ====================
+
+/** 项目经历 — 查询返回数据结构 */
+export interface ProjectItem {
+  /** 主键 ID */
+  id?: number
+  /** 所属公司 */
+  companyName?: string
+  /** 项目名称 */
+  projectName?: string
+  /** 担任角色 */
+  role?: string
+  /** 开始时间 */
+  startDate?: string
+  /** 结束时间 */
+  endDate?: string
+  /** 描述段落 */
+  description?: DescriptionParagraph[]
+}
+
+/** 项目经历 — 保存请求参数（单条） */
+export interface SaveProjectItem {
+  /** 所属公司 */
+  companyName?: string
+  /** 项目名称 */
+  projectName: string
+  /** 担任角色 */
+  role?: string
+  /** 开始时间，格式：2023.06 */
+  startDate: string
+  /** 结束时间，格式：2023.09，至今则为空 */
+  endDate?: string
+  /** 描述段落 */
+  description?: DescriptionParagraph[]
+}
+
+/**
+ * 获取项目经历列表
+ * GET /user/profile/project
+ */
+export function fetchProject() {
+  return request.get<any, ApiResult<ProjectItem[]>>('/user/profile/project')
+}
+
+/**
+ * 保存项目经历（全量覆盖）
+ * POST /user/profile/project
+ * Body: SaveProjectItem[]
+ */
+export function saveProject(data: SaveProjectItem[]) {
+  return request.post<any, ApiResult>('/user/profile/project', data)
+}
+
+// ==================== 竞赛经历相关 ====================
+
+/** 竞赛经历 — 查询返回数据结构 */
+export interface CompetitionItem {
+  /** 主键 ID */
+  id?: number
+  /** 竞赛名称 */
+  competitionName?: string
+  /** 获奖情况 */
+  award?: string
+  /** 获奖时间 */
+  awardDate?: string
+  /** 描述段落 */
+  description?: DescriptionParagraph[]
+}
+
+/** 竞赛经历 — 保存请求参数（单条） */
+export interface SaveCompetitionItem {
+  /** 竞赛名称 */
+  competitionName: string
+  /** 获奖情况，如全国二等奖 */
+  award?: string
+  /** 获奖时间，格式：2023.07 */
+  awardDate?: string
+  /** 描述段落 */
+  description?: DescriptionParagraph[]
+}
+
+/**
+ * 获取竞赛经历列表
+ * GET /user/profile/competition
+ */
+export function fetchCompetition() {
+  return request.get<any, ApiResult<CompetitionItem[]>>('/user/profile/competition')
+}
+
+/**
+ * 保存竞赛经历（全量覆盖）
+ * POST /user/profile/competition
+ * Body: SaveCompetitionItem[]
+ */
+export function saveCompetition(data: SaveCompetitionItem[]) {
+  return request.post<any, ApiResult>('/user/profile/competition', data)
+}
diff --git a/src/assets/images/.gitkeep b/src/assets/images/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/images/nav/nav-agent-icon.png b/src/assets/images/nav/nav-agent-icon.png
new file mode 100644
index 0000000..c48807a
Binary files /dev/null and b/src/assets/images/nav/nav-agent-icon.png differ
diff --git a/src/assets/images/nav/nav-feedback-icon.png b/src/assets/images/nav/nav-feedback-icon.png
new file mode 100644
index 0000000..591ea51
Binary files /dev/null and b/src/assets/images/nav/nav-feedback-icon.png differ
diff --git a/src/assets/images/nav/nav-jobs-icon.png b/src/assets/images/nav/nav-jobs-icon.png
new file mode 100644
index 0000000..06928d2
Binary files /dev/null and b/src/assets/images/nav/nav-jobs-icon.png differ
diff --git a/src/assets/images/nav/nav-message-icon.png b/src/assets/images/nav/nav-message-icon.png
new file mode 100644
index 0000000..71ee9b4
Binary files /dev/null and b/src/assets/images/nav/nav-message-icon.png differ
diff --git a/src/assets/images/nav/nav-profile-icon.png b/src/assets/images/nav/nav-profile-icon.png
new file mode 100644
index 0000000..8782eaa
Binary files /dev/null and b/src/assets/images/nav/nav-profile-icon.png differ
diff --git a/src/assets/images/nav/nav-resume-icon.png b/src/assets/images/nav/nav-resume-icon.png
new file mode 100644
index 0000000..5e15cb5
Binary files /dev/null and b/src/assets/images/nav/nav-resume-icon.png differ
diff --git a/src/assets/images/nav/nav-setting-icon.png b/src/assets/images/nav/nav-setting-icon.png
new file mode 100644
index 0000000..d501613
Binary files /dev/null and b/src/assets/images/nav/nav-setting-icon.png differ
diff --git a/src/assets/images/求职助手-准备阶段-第2步-确认目标.png b/src/assets/images/求职助手-准备阶段-第2步-确认目标.png
new file mode 100644
index 0000000..4563f35
Binary files /dev/null and b/src/assets/images/求职助手-准备阶段-第2步-确认目标.png differ
diff --git a/src/assets/images/求职助手-准备阶段-第3步-竞争力评估.png b/src/assets/images/求职助手-准备阶段-第3步-竞争力评估.png
new file mode 100644
index 0000000..3710303
Binary files /dev/null and b/src/assets/images/求职助手-准备阶段-第3步-竞争力评估.png differ
diff --git a/src/assets/images/求职助手-准备阶段-第4步-开启自动申请.png b/src/assets/images/求职助手-准备阶段-第4步-开启自动申请.png
new file mode 100644
index 0000000..c459cd4
Binary files /dev/null and b/src/assets/images/求职助手-准备阶段-第4步-开启自动申请.png differ
diff --git a/src/assets/images/求职助手-准备阶段-第5步-Agent设置.png b/src/assets/images/求职助手-准备阶段-第5步-Agent设置.png
new file mode 100644
index 0000000..9f42c43
Binary files /dev/null and b/src/assets/images/求职助手-准备阶段-第5步-Agent设置.png differ
diff --git a/src/assets/images/求职助手-确认个人资料.png b/src/assets/images/求职助手-确认个人资料.png
new file mode 100644
index 0000000..2f7f0fd
Binary files /dev/null and b/src/assets/images/求职助手-确认个人资料.png differ
diff --git a/src/assets/images/设计稿截图/个人资料-个人信息编辑.png b/src/assets/images/设计稿截图/个人资料-个人信息编辑.png
new file mode 100644
index 0000000..19fa4cc
Binary files /dev/null and b/src/assets/images/设计稿截图/个人资料-个人信息编辑.png differ
diff --git a/src/assets/images/设计稿截图/个人资料-实习经历编辑.png b/src/assets/images/设计稿截图/个人资料-实习经历编辑.png
new file mode 100644
index 0000000..605ad95
Binary files /dev/null and b/src/assets/images/设计稿截图/个人资料-实习经历编辑.png differ
diff --git a/src/assets/images/设计稿截图/个人资料-技能编辑.png b/src/assets/images/设计稿截图/个人资料-技能编辑.png
new file mode 100644
index 0000000..9dc71c7
Binary files /dev/null and b/src/assets/images/设计稿截图/个人资料-技能编辑.png differ
diff --git a/src/assets/images/设计稿截图/个人资料-教育经历编辑.png b/src/assets/images/设计稿截图/个人资料-教育经历编辑.png
new file mode 100644
index 0000000..0c48e06
Binary files /dev/null and b/src/assets/images/设计稿截图/个人资料-教育经历编辑.png differ
diff --git a/src/assets/images/设计稿截图/个人资料-竞赛经历编辑.png b/src/assets/images/设计稿截图/个人资料-竞赛经历编辑.png
new file mode 100644
index 0000000..7ecb823
Binary files /dev/null and b/src/assets/images/设计稿截图/个人资料-竞赛经历编辑.png differ
diff --git a/src/assets/images/设计稿截图/个人资料-证书编辑.png b/src/assets/images/设计稿截图/个人资料-证书编辑.png
new file mode 100644
index 0000000..786d62a
Binary files /dev/null and b/src/assets/images/设计稿截图/个人资料-证书编辑.png differ
diff --git a/src/assets/images/设计稿截图/个人资料-项目经历编辑.png b/src/assets/images/设计稿截图/个人资料-项目经历编辑.png
new file mode 100644
index 0000000..f782b4b
Binary files /dev/null and b/src/assets/images/设计稿截图/个人资料-项目经历编辑.png differ
diff --git a/src/assets/images/设计稿截图/个人资料.png b/src/assets/images/设计稿截图/个人资料.png
new file mode 100644
index 0000000..431dc01
Binary files /dev/null and b/src/assets/images/设计稿截图/个人资料.png differ
diff --git a/src/assets/images/设计稿截图/会员购买页面@2x.png b/src/assets/images/设计稿截图/会员购买页面@2x.png
new file mode 100644
index 0000000..3b16b80
Binary files /dev/null and b/src/assets/images/设计稿截图/会员购买页面@2x.png differ
diff --git a/src/assets/images/设计稿截图/反馈与帮助@2x.png b/src/assets/images/设计稿截图/反馈与帮助@2x.png
new file mode 100644
index 0000000..eaa0c09
Binary files /dev/null and b/src/assets/images/设计稿截图/反馈与帮助@2x.png differ
diff --git a/src/assets/images/设计稿截图/岗位详情@2x.png b/src/assets/images/设计稿截图/岗位详情@2x.png
new file mode 100644
index 0000000..43e7933
Binary files /dev/null and b/src/assets/images/设计稿截图/岗位详情@2x.png differ
diff --git a/src/assets/images/设计稿截图/我的简历-详情@2x.png b/src/assets/images/设计稿截图/我的简历-详情@2x.png
new file mode 100644
index 0000000..3ea4b69
Binary files /dev/null and b/src/assets/images/设计稿截图/我的简历-详情@2x.png differ
diff --git a/src/assets/images/设计稿截图/我的简历@2x.png b/src/assets/images/设计稿截图/我的简历@2x.png
new file mode 100644
index 0000000..3834e7e
Binary files /dev/null and b/src/assets/images/设计稿截图/我的简历@2x.png differ
diff --git a/src/assets/images/设计稿截图/求职目标设置弹窗组件.png b/src/assets/images/设计稿截图/求职目标设置弹窗组件.png
new file mode 100644
index 0000000..5e4b1ed
Binary files /dev/null and b/src/assets/images/设计稿截图/求职目标设置弹窗组件.png differ
diff --git a/src/assets/images/设计稿截图/职位列表@2x.png b/src/assets/images/设计稿截图/职位列表@2x.png
new file mode 100644
index 0000000..29157cc
Binary files /dev/null and b/src/assets/images/设计稿截图/职位列表@2x.png differ
diff --git a/src/assets/images/设计稿截图/职位列表不感兴趣弹窗@2x.png b/src/assets/images/设计稿截图/职位列表不感兴趣弹窗@2x.png
new file mode 100644
index 0000000..5f73d64
Binary files /dev/null and b/src/assets/images/设计稿截图/职位列表不感兴趣弹窗@2x.png differ
diff --git a/src/assets/images/设计稿截图/职位列表问题反馈弹窗@2x.png b/src/assets/images/设计稿截图/职位列表问题反馈弹窗@2x.png
new file mode 100644
index 0000000..89c0978
Binary files /dev/null and b/src/assets/images/设计稿截图/职位列表问题反馈弹窗@2x.png differ
diff --git a/src/assets/images/设计稿截图/设置-会员@2x.png b/src/assets/images/设计稿截图/设置-会员@2x.png
new file mode 100644
index 0000000..500cc9a
Binary files /dev/null and b/src/assets/images/设计稿截图/设置-会员@2x.png differ
diff --git a/src/assets/images/设计稿截图/设置-岗位更新提醒@2x.png b/src/assets/images/设计稿截图/设置-岗位更新提醒@2x.png
new file mode 100644
index 0000000..4880b9e
Binary files /dev/null and b/src/assets/images/设计稿截图/设置-岗位更新提醒@2x.png differ
diff --git a/src/assets/images/设计稿截图/设置-账号与安全@2x.png b/src/assets/images/设计稿截图/设置-账号与安全@2x.png
new file mode 100644
index 0000000..a5b5f08
Binary files /dev/null and b/src/assets/images/设计稿截图/设置-账号与安全@2x.png differ
diff --git a/src/assets/styles/auto.scss b/src/assets/styles/auto.scss
new file mode 100644
index 0000000..e1fef53
--- /dev/null
+++ b/src/assets/styles/auto.scss
@@ -0,0 +1,819 @@
+html{
+	font-size: 100px;
+}
+
+// 用 body:not(#_) 包裹，提升选择器权重到 id 级别，确保工具类优先级最高
+// :not(#_) 永远为 true，不影响匹配，只提升权重
+body:not(#_) {
+
+//组件定制样式
+.box-shadow-head{
+  box-shadow: 0px 6px 16px  rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px -3px 6px -4px rgba(0, 0, 0, 0.12);
+}
+
+
+.nav-item-show{
+  border-bottom: 0.04rem solid transparent;
+}
+.nav-item-show:hover{
+  border-bottom: 0.04rem solid #4FC2C9;
+  color: #4FC2C9 !important;
+}
+.nav-item-child{
+  height: 0;
+  overflow: hidden;
+}
+.nav-item-child-show:hover{
+  .nav-item-child{
+    height: auto;
+    overflow: auto;
+  }
+}
+
+.index-mentor-select{
+  height: auto;
+}
+.index-mentor-select-not{
+  height: 0;
+  overflow: hidden;
+  margin: 0;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//-------------------------------------------通用样式------------------------------------------------
+//文字渐变
+.title-ai-1 {
+	font-weight: bold;        
+	background-image: linear-gradient(to right, #f2f5c4, #f7cda6); /* 从左到右渐变 */
+	-webkit-background-clip: text; /* 兼容旧版浏览器 */
+	-webkit-text-fill-color: transparent; /* 兼容旧版浏览器 */
+	background-clip: text;    /* 标准属性 */
+	color: transparent;       /* 确保文字透明 */
+}
+.title-ai-2 {
+	font-weight: bold;        
+	background-image: linear-gradient(to right, #ffdead, #eb9a96); /* 从左到右渐变 */
+	-webkit-background-clip: text; /* 兼容旧版浏览器 */
+	-webkit-text-fill-color: transparent; /* 兼容旧版浏览器 */
+	background-clip: text;    /* 标准属性 */
+	color: transparent;       /* 确保文字透明 */
+}
+.title-linear-gradient-bottom-1{
+	     
+	background-image: linear-gradient(to bottom, #f2f5c4, #f7cda6); 
+	-webkit-background-clip: text; /* 兼容旧版浏览器 */
+	-webkit-text-fill-color: transparent; /* 兼容旧版浏览器 */
+	background-clip: text;    /* 标准属性 */
+	color: transparent;       /* 确保文字透明 */
+}
+.title-linear-gradient-right-1{
+	     
+	background-image: linear-gradient(to right, #f2f5c4, #f7cda6); 
+	-webkit-background-clip: text; /* 兼容旧版浏览器 */
+	-webkit-text-fill-color: transparent; /* 兼容旧版浏览器 */
+	background-clip: text;    /* 标准属性 */
+	color: transparent;       /* 确保文字透明 */
+}
+
+
+.choose-ai{
+	height: auto;
+	width: 0.19rem;
+	border: 0.01rem solid #72768C;
+	border-radius: 50%;
+	aspect-ratio: 1/1;
+}
+
+.choose-ai-active{
+	background-size: cover;
+	background-position: center;
+	background-image: url("https://jsxq-image-static.oss-cn-shenzhen.aliyuncs.com/aiJob/resume/resume-choose.png");
+}
+/*多边形，裁剪图形*/
+.triangle-ai {
+  width: 100%;         /* 高度与宽度一致 */
+  aspect-ratio: 1/1;   /* 强制宽高比为 1:1（现代浏览器支持） */
+  background: #42A8B3;
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+
+.blocks-gray-ai-s{
+	>view{
+		display: inline-block;
+		background: #4E536E;
+		border-radius: 0.03rem;
+		padding: 2px 0.05rem 0.03rem 0.05rem;
+	}
+}
+
+.popup-view-ai{
+	border-radius: 0.3rem 0.3rem 0 0;
+	background:#2E3142;
+	min-height: 3rem;
+	z-index: 999 !important;
+	padding: 0.4rem 0.25rem;
+}
+.plplaceholder-1{
+	color:#7A8099;
+	font-size: 0.13rem;
+}
+//分隔线
+.line-42444F{
+	height: 0.01rem;
+	background: #42444F;
+}
+.line-676C850-dotted{
+	height: 0.01rem;
+	border-top: 0.01rem dotted #676C85;
+}
+.line-676C850-dashed{
+	height: 0.01rem;
+	border-top: 0.01rem dashed #676C85;
+}
+.line-676C850-solid{
+	height: 0.01rem;
+	border-top: 0.01rem solid #676C85;
+}
+.line-3d4054-solid{
+	height: 0.01rem;
+	border-top: 0.01rem solid #3d4054;
+}
+
+//透明度
+.opacity-0{opacity: 0;}
+.opacity-1{opacity: 0.1;}
+.opacity-2{opacity: 0.2;}
+.opacity-3{opacity: 0.3;}
+.opacity-4{opacity: 0.4;}
+.opacity-5{opacity: 0.5;}
+.opacity-6{opacity: 0.6;}
+.opacity-7{opacity: 0.7;}
+.opacity-8{opacity: 0.8;}
+.opacity-9{opacity: 0.9;}
+.opacity-10{opacity: 1;}
+
+
+// 分享按钮
+.share-btn{
+	opacity: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+//3个点加载动效
+.dot-loading {
+  width: 0.06rem;
+  height: 0.06rem;
+  border-radius: 50%;
+  background-color: #ccc;
+  animation: whiteToRed 1.8s ease-in-out infinite;
+  margin-right: 0.05rem;
+}
+
+.dot-loading:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.dot-loading:nth-child(2) {
+  animation-delay: 0.3s;
+}
+
+.dot-loading:nth-child(3) {
+  animation-delay: 0.6s;
+}
+
+@keyframes whiteToRed {
+  0% {
+	background-color: #999;
+  }
+  100% {
+	background-color: #ccc;
+  }
+}
+//三角
+.triangle-01{
+	background: #7A8099;clip-path: polygon(100% 0,100% 100%,0 100%);
+	margin-bottom: -0.02rem;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*基础样式*/
+
+/* 浮动 */
+.fl {
+  float: left;
+}
+
+.fr {
+  float: right;
+}
+
+
+
+/* 块属性设置 */
+.dib {
+  display: inline-block;
+}
+
+.db {
+  display: block;
+}
+
+.di {
+  display: inline;
+}
+
+.df {
+  display: flex;
+}
+
+/* 文字居中 */
+.tac {
+  text-align: center;
+}
+
+.tar {
+  text-align: right;
+}
+
+.tal {
+  text-align: left;
+}
+
+.verali-m{
+	vertical-align: middle;
+}
+.verali-b{
+	vertical-align: bottom;
+}
+.verali-t{
+	vertical-align: top;
+}
+.verali-tb{
+	vertical-align: text-bottom;
+}
+.verali-ba{
+	vertical-align: baseline;
+}
+.verali-su{
+	vertical-align: super;
+}
+.verali-s{
+	vertical-align: sub;
+}
+.aliite-c{
+	align-items: center;
+}
+.aliite-s{
+	align-items: flex-start;
+}
+.aliite-e{
+	align-items: flex-end;
+}
+
+//英文字母或数字一行溢出超出，打断
+.word-bra{
+	word-break: break-all;
+}
+
+/* 定位 */
+
+.pof {
+  position: fixed;
+}
+
+.por {
+  position: relative;
+}
+
+.poa {
+  position: absolute;
+}
+
+.po-lt-cen {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.po-l-cen {
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+.po-t-cen {
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+//层级
+.zindex1{
+	z-index: 1;
+}
+.zindex3{
+	z-index: 3;
+}
+.zindex5{
+	z-index: 5;
+}
+.zindex10{
+	z-index: 10;
+}
+
+/* 快捷flex布局 */
+.dflex {
+  display: flex;
+  justify-content: space-between;
+}
+.alite-center{
+	align-items: center;
+}
+
+.flexa {
+  flex: auto;
+}
+
+.fgrow1 {
+  flex-grow: 1;
+  flex-basis: 0;
+}
+.fgrow2 {
+  flex-grow: 2;
+  flex-basis: 0;
+}
+
+.dflex-end {
+  display: flex !important;
+  justify-content: flex-end;
+}
+.dflex-start {
+  display: flex !important;
+  justify-content: flex-start;
+}
+.dflex-center {
+  display: flex !important;
+  justify-content: center;
+}
+.flex-warp{
+  flex-wrap: wrap;
+}
+
+//字体粗细
+.fw600{
+	font-weight: 600;
+}
+.fw400{
+	font-weight: 400;
+}
+
+
+
+
+
+/* 百分比宽高*/
+.wp50 {
+  width: 50%;
+}
+.wp100 {
+  width: 100%;
+}
+
+.mwp100 {
+  max-width: 100%;
+}
+
+.hp100 {
+  height: 100%;
+}
+.hauto{
+	height: auto;
+}
+.htran03s{
+	transition: height 0.3s ease;
+}
+.htran05s{
+	transition: height 0.5s ease;
+}
+.htran08s{
+	transition: height 0.8s ease;
+}
+.htran1s{
+	transition: height 1s ease;
+}
+
+
+
+
+
+
+/*颜色*/
+.color-f{
+	color: #fff;
+}
+.color-A6A6A6{
+  color: #A6A6A6;
+}
+.color-E85635{
+	color: #E85635;
+}
+.color-C86667{
+	color: #C86667;
+}
+
+.color-0{
+	color: #000;
+}
+.color-1{
+	color: #111;
+}
+.color-18181A{
+  color: #18181A;
+}
+.color-2{
+	color: #222;
+}
+.color-3{
+	color: #333;
+}
+.color-4{
+	color: #444;
+}
+.color-4FC2C9{
+    color: #4FC2C9;
+}
+
+.color-4FC2C9-ho:hover{
+  color: #4FC2C9;
+}
+.color-42A8B3{
+  color: #42A8B3;
+}
+.color-5{
+	color: #555;
+}
+.color-6{
+	color: #666;
+}
+.color-6D7499{
+  color: #6D7499;
+}
+.color-676C85{
+  color: #676C85;
+}
+.color-7{
+	color: #777;
+}
+.color-7A8099{
+  color:#7A8099;
+}
+.color-72768C{
+  color:#72768C;
+}
+.color-8{
+	color: #888;
+}
+.color-888C9E{
+  color:#888C9E;
+}
+.color-9{
+	color: #999;
+}
+.color-9598AB{
+  color:#9598AB;
+}
+.color-9B9EAB{
+  color:#9B9EAB;
+}
+
+
+/*border*/
+.border-42A8B3{
+	border: 0.01rem solid #42A8B3;
+}
+.border-4D526B{
+	border: 0.01rem solid #4D526B;
+}
+.border-4FC2C9v-2{
+  border: 0.02rem solid #4FC2C9;
+}
+.border-red1{
+	border: 0.01rem solid #C86667;
+}
+
+//圆角
+.border-ra0{border-radius: 0rem;}
+.border-ra1{border-radius: 0.01rem;}
+.border-ra2{border-radius: 0.02rem;}
+.border-ra3{border-radius: 0.03rem;}
+.border-ra4{border-radius: 0.04rem;}
+.border-ra5{border-radius: 0.05rem;}
+.border-ra6{border-radius: 0.06rem;}
+.border-ra7{border-radius: 0.07rem;}
+.border-ra8{border-radius: 0.08rem;}
+.border-ra9{border-radius: 0.09rem;}
+.border-ra10{border-radius: 0.1rem;}
+.border-ra11{border-radius: 0.11rem;}
+.border-ra12{border-radius: 0.12rem;}
+.border-ra13{border-radius: 0.13rem;}
+.border-ra14{border-radius: 0.14rem;}
+.border-ra15{border-radius: 0.15rem;}
+.border-ra16{border-radius: 0.16rem;}
+.border-ra17{border-radius: 0.17rem;}
+.border-ra18{border-radius: 0.18rem;}
+.border-ra19{border-radius: 0.19rem;}
+.border-ra20{border-radius: 0.2rem;}
+
+
+.bor-ra50p{
+	border-radius: 50%;
+}
+
+.border-n{
+	border: none;
+}
+.boxs-bor{
+	box-sizing: border-box;
+}
+
+.w-auto{width: auto;}
+.h-auto{height: auto;}
+
+//背景色
+.bg1E202B{
+  background: #1E202B;
+}
+.bg2E3142{
+	background: #2E3142;
+}
+.bg42A8B3{
+	background: #42A8B3;
+}
+.bg4D526B{
+	background: #4D526B;
+}
+.bg4FC2C9{
+  background: #4FC2C9;
+}
+.bg1E202B{
+	background: #1E202B;
+}
+.bg-none{
+	background: none;
+}
+.bg-f{
+	background: #fff;
+}
+.bgeee{
+	background: #eee;
+}
+.bgccc{
+  background: #ccc;
+}
+
+/*文字超出隐藏*/
+.text-over-h{
+	white-space: nowrap; /* 保持文本在一行内显示 */
+	overflow: hidden; /* 超出容器部分隐藏 */
+	text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
+.text-over-h-texts{
+	white-space: nowrap; /* 保持文本在一行内显示 */
+	overflow: hidden; /* 超出容器部分隐藏 */
+	text-overflow: ellipsis; /* 超出部分显示省略号 */
+	
+	text{
+		display: inline !important;
+	}
+}
+
+/*文字下、中，上划线*/
+.text-underline{
+	text-decoration: underline;
+}
+.text-throughline{
+	text-decoration: line-through;
+}
+.text-overline{
+	text-decoration: overline;
+}
+
+/*左右滑动*/
+.over-x{
+	width: 100%;
+	overflow-x: scroll;
+	overflow-y: hidden;
+	white-space: nowrap;
+}
+.over-y{
+	height: 100%;
+	overflow-x: hidden;
+	overflow-y: scroll;
+}
+.over-y01{
+	height: 100%;
+	overflow-x: hidden;
+	overflow-y: scroll;
+}
+.over-y02{
+	// height: 100%;
+	overflow-x: hidden;
+	overflow-y: scroll;
+	white-space: nowrap;
+}
+.over-h{
+	overflow: hidden;
+}
+
+.box-shadow-111{
+	    box-shadow: 0 0 0.05rem #111;
+}
+
+//自定义toast样式
+.u-toast__content{
+	background-color: #2E3142 !important;
+	opacity: 0.9;
+}
+
+.cursor-po{
+  cursor: pointer;
+}
+
+//--------------------------------------距离和大小--------------------------------------
+
+
+/* 字体大小 */
+.fs0{font-size: 0rem;}
+.fs1{font-size: 0.01rem;} .fs2{font-size: 0.02rem;} .fs3{font-size: 0.03rem;} .fs4{font-size: 0.04rem;} .fs5{font-size: 0.05rem;} .fs6{font-size: 0.06rem;} .fs7{font-size: 0.07rem;} .fs8{font-size: 0.08rem;} .fs9{font-size: 0.09rem;} .fs10{font-size: 0.1rem;} .fs11{font-size: 0.11rem;} .fs12{font-size: 0.12rem;} .fs13{font-size: 0.13rem;} .fs14{font-size: 0.14rem;} .fs15{font-size: 0.15rem;} .fs16{font-size: 0.16rem;} .fs17{font-size: 0.17rem;} .fs18{font-size: 0.18rem;} .fs19{font-size: 0.19rem;} .fs20{font-size: 0.2rem;} .fs21{font-size: 0.21rem;} .fs22{font-size: 0.22rem;} .fs23{font-size: 0.23rem;} .fs24{font-size: 0.24rem;} .fs25{font-size: 0.25rem;} .fs26{font-size: 0.26rem;} .fs27{font-size: 0.27rem;} .fs28{font-size: 0.28rem;} .fs29{font-size: 0.29rem;} .fs30{font-size: 0.3rem;} .fs31{font-size: 0.31rem;} .fs32{font-size: 0.32rem;} .fs33{font-size: 0.33rem;} .fs34{font-size: 0.34rem;} .fs35{font-size: 0.35rem;} .fs36{font-size: 0.36rem;} .fs37{font-size: 0.37rem;} .fs38{font-size: 0.38rem;} .fs39{font-size: 0.39rem;} .fs40{font-size: 0.4rem;} .fs41{font-size: 0.41rem;} .fs42{font-size: 0.42rem;} .fs43{font-size: 0.43rem;} .fs44{font-size: 0.44rem;} .fs45{font-size: 0.45rem;} .fs46{font-size: 0.46rem;} .fs47{font-size: 0.47rem;} .fs48{font-size: 0.48rem;} .fs49{font-size: 0.49rem;} .fs50{font-size: 0.5rem;} .fs51{font-size: 0.51rem;} .fs52{font-size: 0.52rem;} .fs53{font-size: 0.53rem;} .fs54{font-size: 0.54rem;} .fs55{font-size: 0.55rem;} .fs56{font-size: 0.56rem;} .fs57{font-size: 0.57rem;} .fs58{font-size: 0.58rem;} .fs59{font-size: 0.59rem;} .fs60{font-size: 0.6rem;} .fs61{font-size: 0.61rem;} .fs62{font-size: 0.62rem;} .fs63{font-size: 0.63rem;} .fs64{font-size: 0.64rem;} .fs65{font-size: 0.65rem;} .fs66{font-size: 0.66rem;} .fs67{font-size: 0.67rem;} .fs68{font-size: 0.68rem;} .fs69{font-size: 0.69rem;} .fs70{font-size: 0.7rem;} .fs71{font-size: 0.71rem;} .fs72{font-size: 0.72rem;} .fs73{font-size: 0.73rem;} .fs74{font-size: 0.74rem;} .fs75{font-size: 0.75rem;} .fs76{font-size: 0.76rem;} .fs77{font-size: 0.77rem;} .fs78{font-size: 0.78rem;} .fs79{font-size: 0.79rem;} .fs80{font-size: 0.8rem;} .fs81{font-size: 0.81rem;} .fs82{font-size: 0.82rem;} .fs83{font-size: 0.83rem;} .fs84{font-size: 0.84rem;} .fs85{font-size: 0.85rem;} .fs86{font-size: 0.86rem;} .fs87{font-size: 0.87rem;} .fs88{font-size: 0.88rem;} .fs89{font-size: 0.89rem;} .fs90{font-size: 0.9rem;} .fs91{font-size: 0.91rem;} .fs92{font-size: 0.92rem;} .fs93{font-size: 0.93rem;} .fs94{font-size: 0.94rem;} .fs95{font-size: 0.95rem;} .fs96{font-size: 0.96rem;} .fs97{font-size: 0.97rem;} .fs98{font-size: 0.98rem;} .fs99{font-size: 0.99rem;}
+.fs100{font-size: 1rem;}
+
+//上
+.t0 {top: 0rem;}
+.t1 {top: 0.01rem;} .t2 {top: 0.02rem;} .t3 {top: 0.03rem;} .t4 {top: 0.04rem;} .t5 {top: 0.05rem;} .t6 {top: 0.06rem;} .t7 {top: 0.07rem;} .t8 {top: 0.08rem;} .t9 {top: 0.09rem;} .t10 {top: 0.1rem;} .t11 {top: 0.11rem;} .t12 {top: 0.12rem;} .t13 {top: 0.13rem;} .t14 {top: 0.14rem;} .t15 {top: 0.15rem;} .t16 {top: 0.16rem;} .t17 {top: 0.17rem;} .t18 {top: 0.18rem;} .t19 {top: 0.19rem;} .t20 {top: 0.2rem;} .t21 {top: 0.21rem;} .t22 {top: 0.22rem;} .t23 {top: 0.23rem;} .t24 {top: 0.24rem;} .t25 {top: 0.25rem;} .t26 {top: 0.26rem;} .t27 {top: 0.27rem;} .t28 {top: 0.28rem;} .t29 {top: 0.29rem;} .t30 {top: 0.3rem;} .t31 {top: 0.31rem;} .t32 {top: 0.32rem;} .t33 {top: 0.33rem;} .t34 {top: 0.34rem;} .t35 {top: 0.35rem;} .t36 {top: 0.36rem;} .t37 {top: 0.37rem;} .t38 {top: 0.38rem;} .t39 {top: 0.39rem;} .t40 {top: 0.4rem;} .t41 {top: 0.41rem;} .t42 {top: 0.42rem;} .t43 {top: 0.43rem;} .t44 {top: 0.44rem;} .t45 {top: 0.45rem;} .t46 {top: 0.46rem;} .t47 {top: 0.47rem;} .t48 {top: 0.48rem;} .t49 {top: 0.49rem;} .t50 {top: 0.5rem;} .t51 {top: 0.51rem;} .t52 {top: 0.52rem;} .t53 {top: 0.53rem;} .t54 {top: 0.54rem;} .t55 {top: 0.55rem;} .t56 {top: 0.56rem;} .t57 {top: 0.57rem;} .t58 {top: 0.58rem;} .t59 {top: 0.59rem;} .t60 {top: 0.6rem;} .t61 {top: 0.61rem;} .t62 {top: 0.62rem;} .t63 {top: 0.63rem;} .t64 {top: 0.64rem;} .t65 {top: 0.65rem;} .t66 {top: 0.66rem;} .t67 {top: 0.67rem;} .t68 {top: 0.68rem;} .t69 {top: 0.69rem;} .t70 {top: 0.7rem;} .t71 {top: 0.71rem;} .t72 {top: 0.72rem;} .t73 {top: 0.73rem;} .t74 {top: 0.74rem;} .t75 {top: 0.75rem;} .t76 {top: 0.76rem;} .t77 {top: 0.77rem;} .t78 {top: 0.78rem;} .t79 {top: 0.79rem;} .t80 {top: 0.8rem;} .t81 {top: 0.81rem;} .t82 {top: 0.82rem;} .t83 {top: 0.83rem;} .t84 {top: 0.84rem;} .t85 {top: 0.85rem;} .t86 {top: 0.86rem;} .t87 {top: 0.87rem;} .t88 {top: 0.88rem;} .t89 {top: 0.89rem;} .t90 {top: 0.9rem;} .t91 {top: 0.91rem;} .t92 {top: 0.92rem;} .t93 {top: 0.93rem;} .t94 {top: 0.94rem;} .t95 {top: 0.95rem;} .t96 {top: 0.96rem;} .t97 {top: 0.97rem;} .t98 {top: 0.98rem;} .t99 {top: 0.99rem;}
+.t100 {top: 1rem;}
+
+//下
+.b0 {bottom: 0rem;}
+.b1 {bottom: 0.01rem;} .b2 {bottom: 0.02rem;} .b3 {bottom: 0.03rem;} .b4 {bottom: 0.04rem;} .b5 {bottom: 0.05rem;} .b6 {bottom: 0.06rem;} .b7 {bottom: 0.07rem;} .b8 {bottom: 0.08rem;} .b9 {bottom: 0.09rem;} .b10 {bottom: 0.1rem;} .b11 {bottom: 0.11rem;} .b12 {bottom: 0.12rem;} .b13 {bottom: 0.13rem;} .b14 {bottom: 0.14rem;} .b15 {bottom: 0.15rem;} .b16 {bottom: 0.16rem;} .b17 {bottom: 0.17rem;} .b18 {bottom: 0.18rem;} .b19 {bottom: 0.19rem;} .b20 {bottom: 0.2rem;} .b21 {bottom: 0.21rem;} .b22 {bottom: 0.22rem;} .b23 {bottom: 0.23rem;} .b24 {bottom: 0.24rem;} .b25 {bottom: 0.25rem;} .b26 {bottom: 0.26rem;} .b27 {bottom: 0.27rem;} .b28 {bottom: 0.28rem;} .b29 {bottom: 0.29rem;} .b30 {bottom: 0.3rem;} .b31 {bottom: 0.31rem;} .b32 {bottom: 0.32rem;} .b33 {bottom: 0.33rem;} .b34 {bottom: 0.34rem;} .b35 {bottom: 0.35rem;} .b36 {bottom: 0.36rem;} .b37 {bottom: 0.37rem;} .b38 {bottom: 0.38rem;} .b39 {bottom: 0.39rem;} .b40 {bottom: 0.4rem;} .b41 {bottom: 0.41rem;} .b42 {bottom: 0.42rem;} .b43 {bottom: 0.43rem;} .b44 {bottom: 0.44rem;} .b45 {bottom: 0.45rem;} .b46 {bottom: 0.46rem;} .b47 {bottom: 0.47rem;} .b48 {bottom: 0.48rem;} .b49 {bottom: 0.49rem;} .b50 {bottom: 0.5rem;} .b51 {bottom: 0.51rem;} .b52 {bottom: 0.52rem;} .b53 {bottom: 0.53rem;} .b54 {bottom: 0.54rem;} .b55 {bottom: 0.55rem;} .b56 {bottom: 0.56rem;} .b57 {bottom: 0.57rem;} .b58 {bottom: 0.58rem;} .b59 {bottom: 0.59rem;} .b60 {bottom: 0.6rem;} .b61 {bottom: 0.61rem;} .b62 {bottom: 0.62rem;} .b63 {bottom: 0.63rem;} .b64 {bottom: 0.64rem;} .b65 {bottom: 0.65rem;} .b66 {bottom: 0.66rem;} .b67 {bottom: 0.67rem;} .b68 {bottom: 0.68rem;} .b69 {bottom: 0.69rem;} .b70 {bottom: 0.7rem;} .b71 {bottom: 0.71rem;} .b72 {bottom: 0.72rem;} .b73 {bottom: 0.73rem;} .b74 {bottom: 0.74rem;} .b75 {bottom: 0.75rem;} .b76 {bottom: 0.76rem;} .b77 {bottom: 0.77rem;} .b78 {bottom: 0.78rem;} .b79 {bottom: 0.79rem;} .b80 {bottom: 0.8rem;} .b81 {bottom: 0.81rem;} .b82 {bottom: 0.82rem;} .b83 {bottom: 0.83rem;} .b84 {bottom: 0.84rem;} .b85 {bottom: 0.85rem;} .b86 {bottom: 0.86rem;} .b87 {bottom: 0.87rem;} .b88 {bottom: 0.88rem;} .b89 {bottom: 0.89rem;} .b90 {bottom: 0.9rem;} .b91 {bottom: 0.91rem;} .b92 {bottom: 0.92rem;} .b93 {bottom: 0.93rem;} .b94 {bottom: 0.94rem;} .b95 {bottom: 0.95rem;} .b96 {bottom: 0.96rem;} .b97 {bottom: 0.97rem;} .b98 {bottom: 0.98rem;} .b99 {bottom: 0.99rem;}
+.b100 {bottom: 1rem;}
+
+//左
+.l-1{left: -0.01rem;} .l-2{left: -0.02rem;} .l-3{left: -0.03rem;} .l-4{left: -0.04rem;} .l-5{left: -0.05rem;} .l-6{left: -0.06rem;} .l-7{left: -0.07rem;} .l-8{left: -0.08rem;} .l-9{left: -0.09rem;} .l-10{left: -0.1rem;} .l-11{left: -0.11rem;} .l-12{left: -0.12rem;} .l-13{left: -0.13rem;} .l-14{left: -0.14rem;} .l-15{left: -0.15rem;} .l-16{left: -0.16rem;} .l-17{left: -0.17rem;} .l-18{left: -0.18rem;} .l-19{left: -0.19rem;} .l-20{left: -0.2rem;} .l-21{left: -0.21rem;} .l-22{left: -0.22rem;} .l-23{left: -0.23rem;} .l-24{left: -0.24rem;} .l-25{left: -0.25rem;} .l-26{left: -0.26rem;} .l-27{left: -0.27rem;} .l-28{left: -0.28rem;} .l-29{left: -0.29rem;} .l-30{left: -0.3rem;} .l-31{left: -0.31rem;} .l-32{left: -0.32rem;} .l-33{left: -0.33rem;} .l-34{left: -0.34rem;} .l-35{left: -0.35rem;} .l-36{left: -0.36rem;} .l-37{left: -0.37rem;} .l-38{left: -0.38rem;} .l-39{left: -0.39rem;} .l-40{left: -0.4rem;} .l-41{left: -0.41rem;} .l-42{left: -0.42rem;} .l-43{left: -0.43rem;} .l-44{left: -0.44rem;} .l-45{left: -0.45rem;} .l-46{left: -0.46rem;} .l-47{left: -0.47rem;} .l-48{left: -0.48rem;} .l-49{left: -0.49rem;} .l-50{left: -0.5rem;} .l-51{left: -0.51rem;} .l-52{left: -0.52rem;} .l-53{left: -0.53rem;} .l-54{left: -0.54rem;} .l-55{left: -0.55rem;} .l-56{left: -0.56rem;} .l-57{left: -0.57rem;} .l-58{left: -0.58rem;} .l-59{left: -0.59rem;} .l-60{left: -0.6rem;} .l-61{left: -0.61rem;} .l-62{left: -0.62rem;} .l-63{left: -0.63rem;} .l-64{left: -0.64rem;} .l-65{left: -0.65rem;} .l-66{left: -0.66rem;} .l-67{left: -0.67rem;} .l-68{left: -0.68rem;} .l-69{left: -0.69rem;} .l-70{left: -0.7rem;} .l-71{left: -0.71rem;} .l-72{left: -0.72rem;} .l-73{left: -0.73rem;} .l-74{left: -0.74rem;} .l-75{left: -0.75rem;} .l-76{left: -0.76rem;} .l-77{left: -0.77rem;} .l-78{left: -0.78rem;} .l-79{left: -0.79rem;} .l-80{left: -0.8rem;} .l-81{left: -0.81rem;} .l-82{left: -0.82rem;} .l-83{left: -0.83rem;} .l-84{left: -0.84rem;} .l-85{left: -0.85rem;} .l-86{left: -0.86rem;} .l-87{left: -0.87rem;} .l-88{left: -0.88rem;} .l-89{left: -0.89rem;} .l-90{left: -0.9rem;} .l-91{left: -0.91rem;} .l-92{left: -0.92rem;} .l-93{left: -0.93rem;} .l-94{left: -0.94rem;} .l-95{left: -0.95rem;} .l-96{left: -0.96rem;} .l-97{left: -0.97rem;} .l-98{left: -0.98rem;} .l-99{left: -0.99rem;} .l-100{left: -1rem;}
+.l0 {left: 0rem;}
+.l1 {left: 0.01rem;} .l2 {left: 0.02rem;} .l3 {left: 0.03rem;} .l4 {left: 0.04rem;} .l5 {left: 0.05rem;} .l6 {left: 0.06rem;} .l7 {left: 0.07rem;} .l8 {left: 0.08rem;} .l9 {left: 0.09rem;} .l10 {left: 0.1rem;} .l11 {left: 0.11rem;} .l12 {left: 0.12rem;} .l13 {left: 0.13rem;} .l14 {left: 0.14rem;} .l15 {left: 0.15rem;} .l16 {left: 0.16rem;} .l17 {left: 0.17rem;} .l18 {left: 0.18rem;} .l19 {left: 0.19rem;} .l20 {left: 0.2rem;} .l21 {left: 0.21rem;} .l22 {left: 0.22rem;} .l23 {left: 0.23rem;} .l24 {left: 0.24rem;} .l25 {left: 0.25rem;} .l26 {left: 0.26rem;} .l27 {left: 0.27rem;} .l28 {left: 0.28rem;} .l29 {left: 0.29rem;} .l30 {left: 0.3rem;} .l31 {left: 0.31rem;} .l32 {left: 0.32rem;} .l33 {left: 0.33rem;} .l34 {left: 0.34rem;} .l35 {left: 0.35rem;} .l36 {left: 0.36rem;} .l37 {left: 0.37rem;} .l38 {left: 0.38rem;} .l39 {left: 0.39rem;} .l40 {left: 0.4rem;} .l41 {left: 0.41rem;} .l42 {left: 0.42rem;} .l43 {left: 0.43rem;} .l44 {left: 0.44rem;} .l45 {left: 0.45rem;} .l46 {left: 0.46rem;} .l47 {left: 0.47rem;} .l48 {left: 0.48rem;} .l49 {left: 0.49rem;} .l50 {left: 0.5rem;} .l51 {left: 0.51rem;} .l52 {left: 0.52rem;} .l53 {left: 0.53rem;} .l54 {left: 0.54rem;} .l55 {left: 0.55rem;} .l56 {left: 0.56rem;} .l57 {left: 0.57rem;} .l58 {left: 0.58rem;} .l59 {left: 0.59rem;} .l60 {left: 0.6rem;} .l61 {left: 0.61rem;} .l62 {left: 0.62rem;} .l63 {left: 0.63rem;} .l64 {left: 0.64rem;} .l65 {left: 0.65rem;} .l66 {left: 0.66rem;} .l67 {left: 0.67rem;} .l68 {left: 0.68rem;} .l69 {left: 0.69rem;} .l70 {left: 0.7rem;} .l71 {left: 0.71rem;} .l72 {left: 0.72rem;} .l73 {left: 0.73rem;} .l74 {left: 0.74rem;} .l75 {left: 0.75rem;} .l76 {left: 0.76rem;} .l77 {left: 0.77rem;} .l78 {left: 0.78rem;} .l79 {left: 0.79rem;} .l80 {left: 0.8rem;} .l81 {left: 0.81rem;} .l82 {left: 0.82rem;} .l83 {left: 0.83rem;} .l84 {left: 0.84rem;} .l85 {left: 0.85rem;} .l86 {left: 0.86rem;} .l87 {left: 0.87rem;} .l88 {left: 0.88rem;} .l89 {left: 0.89rem;} .l90 {left: 0.9rem;} .l91 {left: 0.91rem;} .l92 {left: 0.92rem;} .l93 {left: 0.93rem;} .l94 {left: 0.94rem;} .l95 {left: 0.95rem;} .l96 {left: 0.96rem;} .l97 {left: 0.97rem;} .l98 {left: 0.98rem;} .l99 {left: 0.99rem;}
+.l100 {left: 1rem;}
+
+//右
+.r0 {right: 0rem;}
+.r1 {right: 0.01rem;} .r2 {right: 0.02rem;} .r3 {right: 0.03rem;} .r4 {right: 0.04rem;} .r5 {right: 0.05rem;} .r6 {right: 0.06rem;} .r7 {right: 0.07rem;} .r8 {right: 0.08rem;} .r9 {right: 0.09rem;} .r10 {right: 0.1rem;} .r11 {right: 0.11rem;} .r12 {right: 0.12rem;} .r13 {right: 0.13rem;} .r14 {right: 0.14rem;} .r15 {right: 0.15rem;} .r16 {right: 0.16rem;} .r17 {right: 0.17rem;} .r18 {right: 0.18rem;} .r19 {right: 0.19rem;} .r20 {right: 0.2rem;} .r21 {right: 0.21rem;} .r22 {right: 0.22rem;} .r23 {right: 0.23rem;} .r24 {right: 0.24rem;} .r25 {right: 0.25rem;} .r26 {right: 0.26rem;} .r27 {right: 0.27rem;} .r28 {right: 0.28rem;} .r29 {right: 0.29rem;} .r30 {right: 0.3rem;} .r31 {right: 0.31rem;} .r32 {right: 0.32rem;} .r33 {right: 0.33rem;} .r34 {right: 0.34rem;} .r35 {right: 0.35rem;} .r36 {right: 0.36rem;} .r37 {right: 0.37rem;} .r38 {right: 0.38rem;} .r39 {right: 0.39rem;} .r40 {right: 0.4rem;} .r41 {right: 0.41rem;} .r42 {right: 0.42rem;} .r43 {right: 0.43rem;} .r44 {right: 0.44rem;} .r45 {right: 0.45rem;} .r46 {right: 0.46rem;} .r47 {right: 0.47rem;} .r48 {right: 0.48rem;} .r49 {right: 0.49rem;} .r50 {right: 0.5rem;} .r51 {right: 0.51rem;} .r52 {right: 0.52rem;} .r53 {right: 0.53rem;} .r54 {right: 0.54rem;} .r55 {right: 0.55rem;} .r56 {right: 0.56rem;} .r57 {right: 0.57rem;} .r58 {right: 0.58rem;} .r59 {right: 0.59rem;} .r60 {right: 0.6rem;} .r61 {right: 0.61rem;} .r62 {right: 0.62rem;} .r63 {right: 0.63rem;} .r64 {right: 0.64rem;} .r65 {right: 0.65rem;} .r66 {right: 0.66rem;} .r67 {right: 0.67rem;} .r68 {right: 0.68rem;} .r69 {right: 0.69rem;} .r70 {right: 0.7rem;} .r71 {right: 0.71rem;} .r72 {right: 0.72rem;} .r73 {right: 0.73rem;} .r74 {right: 0.74rem;} .r75 {right: 0.75rem;} .r76 {right: 0.76rem;} .r77 {right: 0.77rem;} .r78 {right: 0.78rem;} .r79 {right: 0.79rem;} .r80 {right: 0.8rem;} .r81 {right: 0.81rem;} .r82 {right: 0.82rem;} .r83 {right: 0.83rem;} .r84 {right: 0.84rem;} .r85 {right: 0.85rem;} .r86 {right: 0.86rem;} .r87 {right: 0.87rem;} .r88 {right: 0.88rem;} .r89 {right: 0.89rem;} .r90 {right: 0.9rem;} .r91 {right: 0.91rem;} .r92 {right: 0.92rem;} .r93 {right: 0.93rem;} .r94 {right: 0.94rem;} .r95 {right: 0.95rem;} .r96 {right: 0.96rem;} .r97 {right: 0.97rem;} .r98 {right: 0.98rem;} .r99 {right: 0.99rem;}
+.r100 {right: 1rem;}
+
+/*margin和padding */
+/* margin */
+.m0auto {
+  margin: 0 auto;
+}
+.m0 {margin: 0rem;}
+.m1 {margin: 0.01rem;} .m2 {margin: 0.02rem;} .m3 {margin: 0.03rem;} .m4 {margin: 0.04rem;} .m5 {margin: 0.05rem;} .m6 {margin: 0.06rem;} .m7 {margin: 0.07rem;} .m8 {margin: 0.08rem;} .m9 {margin: 0.09rem;} .m10 {margin: 0.1rem;} .m11 {margin: 0.11rem;} .m12 {margin: 0.12rem;} .m13 {margin: 0.13rem;} .m14 {margin: 0.14rem;} .m15 {margin: 0.15rem;} .m16 {margin: 0.16rem;} .m17 {margin: 0.17rem;} .m18 {margin: 0.18rem;} .m19 {margin: 0.19rem;} .m20 {margin: 0.2rem;} .m21 {margin: 0.21rem;} .m22 {margin: 0.22rem;} .m23 {margin: 0.23rem;} .m24 {margin: 0.24rem;} .m25 {margin: 0.25rem;} .m26 {margin: 0.26rem;} .m27 {margin: 0.27rem;} .m28 {margin: 0.28rem;} .m29 {margin: 0.29rem;} .m30 {margin: 0.3rem;} .m31 {margin: 0.31rem;} .m32 {margin: 0.32rem;} .m33 {margin: 0.33rem;} .m34 {margin: 0.34rem;} .m35 {margin: 0.35rem;} .m36 {margin: 0.36rem;} .m37 {margin: 0.37rem;} .m38 {margin: 0.38rem;} .m39 {margin: 0.39rem;} .m40 {margin: 0.4rem;} .m41 {margin: 0.41rem;} .m42 {margin: 0.42rem;} .m43 {margin: 0.43rem;} .m44 {margin: 0.44rem;} .m45 {margin: 0.45rem;} .m46 {margin: 0.46rem;} .m47 {margin: 0.47rem;} .m48 {margin: 0.48rem;} .m49 {margin: 0.49rem;} .m50 {margin: 0.5rem;} .m51 {margin: 0.51rem;} .m52 {margin: 0.52rem;} .m53 {margin: 0.53rem;} .m54 {margin: 0.54rem;} .m55 {margin: 0.55rem;} .m56 {margin: 0.56rem;} .m57 {margin: 0.57rem;} .m58 {margin: 0.58rem;} .m59 {margin: 0.59rem;} .m60 {margin: 0.6rem;} .m61 {margin: 0.61rem;} .m62 {margin: 0.62rem;} .m63 {margin: 0.63rem;} .m64 {margin: 0.64rem;} .m65 {margin: 0.65rem;} .m66 {margin: 0.66rem;} .m67 {margin: 0.67rem;} .m68 {margin: 0.68rem;} .m69 {margin: 0.69rem;} .m70 {margin: 0.7rem;} .m71 {margin: 0.71rem;} .m72 {margin: 0.72rem;} .m73 {margin: 0.73rem;} .m74 {margin: 0.74rem;} .m75 {margin: 0.75rem;} .m76 {margin: 0.76rem;} .m77 {margin: 0.77rem;} .m78 {margin: 0.78rem;} .m79 {margin: 0.79rem;} .m80 {margin: 0.8rem;} .m81 {margin: 0.81rem;} .m82 {margin: 0.82rem;} .m83 {margin: 0.83rem;} .m84 {margin: 0.84rem;} .m85 {margin: 0.85rem;} .m86 {margin: 0.86rem;} .m87 {margin: 0.87rem;} .m88 {margin: 0.88rem;} .m89 {margin: 0.89rem;} .m90 {margin: 0.9rem;} .m91 {margin: 0.91rem;} .m92 {margin: 0.92rem;} .m93 {margin: 0.93rem;} .m94 {margin: 0.94rem;} .m95 {margin: 0.95rem;} .m96 {margin: 0.96rem;} .m97 {margin: 0.97rem;} .m98 {margin: 0.98rem;} .m99 {margin: 0.99rem;}
+.m100 {margin: 1rem;}
+
+/* margin-top */
+.mt0 {margin-top: 0rem;}
+.mt1 {margin-top: 0.01rem;} .mt2 {margin-top: 0.02rem;} .mt3 {margin-top: 0.03rem;} .mt4 {margin-top: 0.04rem;} .mt5 {margin-top: 0.05rem;} .mt6 {margin-top: 0.06rem;} .mt7 {margin-top: 0.07rem;} .mt8 {margin-top: 0.08rem;} .mt9 {margin-top: 0.09rem;} .mt10 {margin-top: 0.1rem;} .mt11 {margin-top: 0.11rem;} .mt12 {margin-top: 0.12rem;} .mt13 {margin-top: 0.13rem;} .mt14 {margin-top: 0.14rem;} .mt15 {margin-top: 0.15rem;} .mt16 {margin-top: 0.16rem;} .mt17 {margin-top: 0.17rem;} .mt18 {margin-top: 0.18rem;} .mt19 {margin-top: 0.19rem;} .mt20 {margin-top: 0.2rem;} .mt21 {margin-top: 0.21rem;} .mt22 {margin-top: 0.22rem;} .mt23 {margin-top: 0.23rem;} .mt24 {margin-top: 0.24rem;} .mt25 {margin-top: 0.25rem;} .mt26 {margin-top: 0.26rem;} .mt27 {margin-top: 0.27rem;} .mt28 {margin-top: 0.28rem;} .mt29 {margin-top: 0.29rem;} .mt30 {margin-top: 0.3rem;} .mt31 {margin-top: 0.31rem;} .mt32 {margin-top: 0.32rem;} .mt33 {margin-top: 0.33rem;} .mt34 {margin-top: 0.34rem;} .mt35 {margin-top: 0.35rem;} .mt36 {margin-top: 0.36rem;} .mt37 {margin-top: 0.37rem;} .mt38 {margin-top: 0.38rem;} .mt39 {margin-top: 0.39rem;} .mt40 {margin-top: 0.4rem;} .mt41 {margin-top: 0.41rem;} .mt42 {margin-top: 0.42rem;} .mt43 {margin-top: 0.43rem;} .mt44 {margin-top: 0.44rem;} .mt45 {margin-top: 0.45rem;} .mt46 {margin-top: 0.46rem;} .mt47 {margin-top: 0.47rem;} .mt48 {margin-top: 0.48rem;} .mt49 {margin-top: 0.49rem;} .mt50 {margin-top: 0.5rem;} .mt51 {margin-top: 0.51rem;} .mt52 {margin-top: 0.52rem;} .mt53 {margin-top: 0.53rem;} .mt54 {margin-top: 0.54rem;} .mt55 {margin-top: 0.55rem;} .mt56 {margin-top: 0.56rem;} .mt57 {margin-top: 0.57rem;} .mt58 {margin-top: 0.58rem;} .mt59 {margin-top: 0.59rem;} .mt60 {margin-top: 0.6rem;} .mt61 {margin-top: 0.61rem;} .mt62 {margin-top: 0.62rem;} .mt63 {margin-top: 0.63rem;} .mt64 {margin-top: 0.64rem;} .mt65 {margin-top: 0.65rem;} .mt66 {margin-top: 0.66rem;} .mt67 {margin-top: 0.67rem;} .mt68 {margin-top: 0.68rem;} .mt69 {margin-top: 0.69rem;} .mt70 {margin-top: 0.7rem;} .mt71 {margin-top: 0.71rem;} .mt72 {margin-top: 0.72rem;} .mt73 {margin-top: 0.73rem;} .mt74 {margin-top: 0.74rem;} .mt75 {margin-top: 0.75rem;} .mt76 {margin-top: 0.76rem;} .mt77 {margin-top: 0.77rem;} .mt78 {margin-top: 0.78rem;} .mt79 {margin-top: 0.79rem;} .mt80 {margin-top: 0.8rem;} .mt81 {margin-top: 0.81rem;} .mt82 {margin-top: 0.82rem;} .mt83 {margin-top: 0.83rem;} .mt84 {margin-top: 0.84rem;} .mt85 {margin-top: 0.85rem;} .mt86 {margin-top: 0.86rem;} .mt87 {margin-top: 0.87rem;} .mt88 {margin-top: 0.88rem;} .mt89 {margin-top: 0.89rem;} .mt90 {margin-top: 0.9rem;} .mt91 {margin-top: 0.91rem;} .mt92 {margin-top: 0.92rem;} .mt93 {margin-top: 0.93rem;} .mt94 {margin-top: 0.94rem;} .mt95 {margin-top: 0.95rem;} .mt96 {margin-top: 0.96rem;} .mt97 {margin-top: 0.97rem;} .mt98 {margin-top: 0.98rem;} .mt99 {margin-top: 0.99rem;}
+.mt100 {margin-top: 1rem;}
+
+/* margin-bottom */
+.mb0 {margin-bottom: 0rem;}
+.mb1 {margin-bottom: 0.01rem;} .mb2 {margin-bottom: 0.02rem;} .mb3 {margin-bottom: 0.03rem;} .mb4 {margin-bottom: 0.04rem;} .mb5 {margin-bottom: 0.05rem;} .mb6 {margin-bottom: 0.06rem;} .mb7 {margin-bottom: 0.07rem;} .mb8 {margin-bottom: 0.08rem;} .mb9 {margin-bottom: 0.09rem;} .mb10 {margin-bottom: 0.1rem;} .mb11 {margin-bottom: 0.11rem;} .mb12 {margin-bottom: 0.12rem;} .mb13 {margin-bottom: 0.13rem;} .mb14 {margin-bottom: 0.14rem;} .mb15 {margin-bottom: 0.15rem;} .mb16 {margin-bottom: 0.16rem;} .mb17 {margin-bottom: 0.17rem;} .mb18 {margin-bottom: 0.18rem;} .mb19 {margin-bottom: 0.19rem;} .mb20 {margin-bottom: 0.2rem;} .mb21 {margin-bottom: 0.21rem;} .mb22 {margin-bottom: 0.22rem;} .mb23 {margin-bottom: 0.23rem;} .mb24 {margin-bottom: 0.24rem;} .mb25 {margin-bottom: 0.25rem;} .mb26 {margin-bottom: 0.26rem;} .mb27 {margin-bottom: 0.27rem;} .mb28 {margin-bottom: 0.28rem;} .mb29 {margin-bottom: 0.29rem;} .mb30 {margin-bottom: 0.3rem;} .mb31 {margin-bottom: 0.31rem;} .mb32 {margin-bottom: 0.32rem;} .mb33 {margin-bottom: 0.33rem;} .mb34 {margin-bottom: 0.34rem;} .mb35 {margin-bottom: 0.35rem;} .mb36 {margin-bottom: 0.36rem;} .mb37 {margin-bottom: 0.37rem;} .mb38 {margin-bottom: 0.38rem;} .mb39 {margin-bottom: 0.39rem;} .mb40 {margin-bottom: 0.4rem;} .mb41 {margin-bottom: 0.41rem;} .mb42 {margin-bottom: 0.42rem;} .mb43 {margin-bottom: 0.43rem;} .mb44 {margin-bottom: 0.44rem;} .mb45 {margin-bottom: 0.45rem;} .mb46 {margin-bottom: 0.46rem;} .mb47 {margin-bottom: 0.47rem;} .mb48 {margin-bottom: 0.48rem;} .mb49 {margin-bottom: 0.49rem;} .mb50 {margin-bottom: 0.5rem;} .mb51 {margin-bottom: 0.51rem;} .mb52 {margin-bottom: 0.52rem;} .mb53 {margin-bottom: 0.53rem;} .mb54 {margin-bottom: 0.54rem;} .mb55 {margin-bottom: 0.55rem;} .mb56 {margin-bottom: 0.56rem;} .mb57 {margin-bottom: 0.57rem;} .mb58 {margin-bottom: 0.58rem;} .mb59 {margin-bottom: 0.59rem;} .mb60 {margin-bottom: 0.6rem;} .mb61 {margin-bottom: 0.61rem;} .mb62 {margin-bottom: 0.62rem;} .mb63 {margin-bottom: 0.63rem;} .mb64 {margin-bottom: 0.64rem;} .mb65 {margin-bottom: 0.65rem;} .mb66 {margin-bottom: 0.66rem;} .mb67 {margin-bottom: 0.67rem;} .mb68 {margin-bottom: 0.68rem;} .mb69 {margin-bottom: 0.69rem;} .mb70 {margin-bottom: 0.7rem;} .mb71 {margin-bottom: 0.71rem;} .mb72 {margin-bottom: 0.72rem;} .mb73 {margin-bottom: 0.73rem;} .mb74 {margin-bottom: 0.74rem;} .mb75 {margin-bottom: 0.75rem;} .mb76 {margin-bottom: 0.76rem;} .mb77 {margin-bottom: 0.77rem;} .mb78 {margin-bottom: 0.78rem;} .mb79 {margin-bottom: 0.79rem;} .mb80 {margin-bottom: 0.8rem;} .mb81 {margin-bottom: 0.81rem;} .mb82 {margin-bottom: 0.82rem;} .mb83 {margin-bottom: 0.83rem;} .mb84 {margin-bottom: 0.84rem;} .mb85 {margin-bottom: 0.85rem;} .mb86 {margin-bottom: 0.86rem;} .mb87 {margin-bottom: 0.87rem;} .mb88 {margin-bottom: 0.88rem;} .mb89 {margin-bottom: 0.89rem;} .mb90 {margin-bottom: 0.9rem;} .mb91 {margin-bottom: 0.91rem;} .mb92 {margin-bottom: 0.92rem;} .mb93 {margin-bottom: 0.93rem;} .mb94 {margin-bottom: 0.94rem;} .mb95 {margin-bottom: 0.95rem;} .mb96 {margin-bottom: 0.96rem;} .mb97 {margin-bottom: 0.97rem;} .mb98 {margin-bottom: 0.98rem;} .mb99 {margin-bottom: 0.99rem;}
+.mb100 {margin-bottom: 1rem;}
+
+/* margin-top-bottom */
+.mtb0 {margin-top: 0rem;margin-bottom: 0rem;}
+.mtb1 {margin-top: 0.01rem;margin-bottom: 0.01rem;} .mtb2 {margin-top: 0.02rem;margin-bottom: 0.02rem;} .mtb3 {margin-top: 0.03rem;margin-bottom: 0.03rem;} .mtb4 {margin-top: 0.04rem;margin-bottom: 0.04rem;} .mtb5 {margin-top: 0.05rem;margin-bottom: 0.05rem;} .mtb6 {margin-top: 0.06rem;margin-bottom: 0.06rem;} .mtb7 {margin-top: 0.07rem;margin-bottom: 0.07rem;} .mtb8 {margin-top: 0.08rem;margin-bottom: 0.08rem;} .mtb9 {margin-top: 0.09rem;margin-bottom: 0.09rem;} .mtb10 {margin-top: 0.1rem;margin-bottom: 0.1rem;} .mtb11 {margin-top: 0.11rem;margin-bottom: 0.11rem;} .mtb12 {margin-top: 0.12rem;margin-bottom: 0.12rem;} .mtb13 {margin-top: 0.13rem;margin-bottom: 0.13rem;} .mtb14 {margin-top: 0.14rem;margin-bottom: 0.14rem;} .mtb15 {margin-top: 0.15rem;margin-bottom: 0.15rem;} .mtb16 {margin-top: 0.16rem;margin-bottom: 0.16rem;} .mtb17 {margin-top: 0.17rem;margin-bottom: 0.17rem;} .mtb18 {margin-top: 0.18rem;margin-bottom: 0.18rem;} .mtb19 {margin-top: 0.19rem;margin-bottom: 0.19rem;} .mtb20 {margin-top: 0.2rem;margin-bottom: 0.2rem;} .mtb21 {margin-top: 0.21rem;margin-bottom: 0.21rem;} .mtb22 {margin-top: 0.22rem;margin-bottom: 0.22rem;} .mtb23 {margin-top: 0.23rem;margin-bottom: 0.23rem;} .mtb24 {margin-top: 0.24rem;margin-bottom: 0.24rem;} .mtb25 {margin-top: 0.25rem;margin-bottom: 0.25rem;} .mtb26 {margin-top: 0.26rem;margin-bottom: 0.26rem;} .mtb27 {margin-top: 0.27rem;margin-bottom: 0.27rem;} .mtb28 {margin-top: 0.28rem;margin-bottom: 0.28rem;} .mtb29 {margin-top: 0.29rem;margin-bottom: 0.29rem;} .mtb30 {margin-top: 0.3rem;margin-bottom: 0.3rem;} .mtb31 {margin-top: 0.31rem;margin-bottom: 0.31rem;} .mtb32 {margin-top: 0.32rem;margin-bottom: 0.32rem;} .mtb33 {margin-top: 0.33rem;margin-bottom: 0.33rem;} .mtb34 {margin-top: 0.34rem;margin-bottom: 0.34rem;} .mtb35 {margin-top: 0.35rem;margin-bottom: 0.35rem;} .mtb36 {margin-top: 0.36rem;margin-bottom: 0.36rem;} .mtb37 {margin-top: 0.37rem;margin-bottom: 0.37rem;} .mtb38 {margin-top: 0.38rem;margin-bottom: 0.38rem;} .mtb39 {margin-top: 0.39rem;margin-bottom: 0.39rem;} .mtb40 {margin-top: 0.4rem;margin-bottom: 0.4rem;} .mtb41 {margin-top: 0.41rem;margin-bottom: 0.41rem;} .mtb42 {margin-top: 0.42rem;margin-bottom: 0.42rem;} .mtb43 {margin-top: 0.43rem;margin-bottom: 0.43rem;} .mtb44 {margin-top: 0.44rem;margin-bottom: 0.44rem;} .mtb45 {margin-top: 0.45rem;margin-bottom: 0.45rem;} .mtb46 {margin-top: 0.46rem;margin-bottom: 0.46rem;} .mtb47 {margin-top: 0.47rem;margin-bottom: 0.47rem;} .mtb48 {margin-top: 0.48rem;margin-bottom: 0.48rem;} .mtb49 {margin-top: 0.49rem;margin-bottom: 0.49rem;} .mtb50 {margin-top: 0.5rem;margin-bottom: 0.5rem;} .mtb51 {margin-top: 0.51rem;margin-bottom: 0.51rem;} .mtb52 {margin-top: 0.52rem;margin-bottom: 0.52rem;} .mtb53 {margin-top: 0.53rem;margin-bottom: 0.53rem;} .mtb54 {margin-top: 0.54rem;margin-bottom: 0.54rem;} .mtb55 {margin-top: 0.55rem;margin-bottom: 0.55rem;} .mtb56 {margin-top: 0.56rem;margin-bottom: 0.56rem;} .mtb57 {margin-top: 0.57rem;margin-bottom: 0.57rem;} .mtb58 {margin-top: 0.58rem;margin-bottom: 0.58rem;} .mtb59 {margin-top: 0.59rem;margin-bottom: 0.59rem;} .mtb60 {margin-top: 0.6rem;margin-bottom: 0.6rem;} .mtb61 {margin-top: 0.61rem;margin-bottom: 0.61rem;} .mtb62 {margin-top: 0.62rem;margin-bottom: 0.62rem;} .mtb63 {margin-top: 0.63rem;margin-bottom: 0.63rem;} .mtb64 {margin-top: 0.64rem;margin-bottom: 0.64rem;} .mtb65 {margin-top: 0.65rem;margin-bottom: 0.65rem;} .mtb66 {margin-top: 0.66rem;margin-bottom: 0.66rem;} .mtb67 {margin-top: 0.67rem;margin-bottom: 0.67rem;} .mtb68 {margin-top: 0.68rem;margin-bottom: 0.68rem;} .mtb69 {margin-top: 0.69rem;margin-bottom: 0.69rem;} .mtb70 {margin-top: 0.7rem;margin-bottom: 0.7rem;} .mtb71 {margin-top: 0.71rem;margin-bottom: 0.71rem;} .mtb72 {margin-top: 0.72rem;margin-bottom: 0.72rem;} .mtb73 {margin-top: 0.73rem;margin-bottom: 0.73rem;} .mtb74 {margin-top: 0.74rem;margin-bottom: 0.74rem;} .mtb75 {margin-top: 0.75rem;margin-bottom: 0.75rem;} .mtb76 {margin-top: 0.76rem;margin-bottom: 0.76rem;} .mtb77 {margin-top: 0.77rem;margin-bottom: 0.77rem;} .mtb78 {margin-top: 0.78rem;margin-bottom: 0.78rem;} .mtb79 {margin-top: 0.79rem;margin-bottom: 0.79rem;} .mtb80 {margin-top: 0.8rem;margin-bottom: 0.8rem;} .mtb81 {margin-top: 0.81rem;margin-bottom: 0.81rem;} .mtb82 {margin-top: 0.82rem;margin-bottom: 0.82rem;} .mtb83 {margin-top: 0.83rem;margin-bottom: 0.83rem;} .mtb84 {margin-top: 0.84rem;margin-bottom: 0.84rem;} .mtb85 {margin-top: 0.85rem;margin-bottom: 0.85rem;} .mtb86 {margin-top: 0.86rem;margin-bottom: 0.86rem;} .mtb87 {margin-top: 0.87rem;margin-bottom: 0.87rem;} .mtb88 {margin-top: 0.88rem;margin-bottom: 0.88rem;} .mtb89 {margin-top: 0.89rem;margin-bottom: 0.89rem;} .mtb90 {margin-top: 0.9rem;margin-bottom: 0.9rem;} .mtb91 {margin-top: 0.91rem;margin-bottom: 0.91rem;} .mtb92 {margin-top: 0.92rem;margin-bottom: 0.92rem;} .mtb93 {margin-top: 0.93rem;margin-bottom: 0.93rem;} .mtb94 {margin-top: 0.94rem;margin-bottom: 0.94rem;} .mtb95 {margin-top: 0.95rem;margin-bottom: 0.95rem;} .mtb96 {margin-top: 0.96rem;margin-bottom: 0.96rem;} .mtb97 {margin-top: 0.97rem;margin-bottom: 0.97rem;} .mtb98 {margin-top: 0.98rem;margin-bottom: 0.98rem;} .mtb99 {margin-top: 0.99rem;margin-bottom: 0.99rem;}
+.mtb100 {margin-top: 1rem;margin-bottom: 1rem;}
+
+/* margin-left */
+.ml0 {margin-left: 0rem;}
+.ml1 {margin-left: 0.01rem;} .ml2 {margin-left: 0.02rem;} .ml3 {margin-left: 0.03rem;} .ml4 {margin-left: 0.04rem;} .ml5 {margin-left: 0.05rem;} .ml6 {margin-left: 0.06rem;} .ml7 {margin-left: 0.07rem;} .ml8 {margin-left: 0.08rem;} .ml9 {margin-left: 0.09rem;} .ml10 {margin-left: 0.1rem;} .ml11 {margin-left: 0.11rem;} .ml12 {margin-left: 0.12rem;} .ml13 {margin-left: 0.13rem;} .ml14 {margin-left: 0.14rem;} .ml15 {margin-left: 0.15rem;} .ml16 {margin-left: 0.16rem;} .ml17 {margin-left: 0.17rem;} .ml18 {margin-left: 0.18rem;} .ml19 {margin-left: 0.19rem;} .ml20 {margin-left: 0.2rem;} .ml21 {margin-left: 0.21rem;} .ml22 {margin-left: 0.22rem;} .ml23 {margin-left: 0.23rem;} .ml24 {margin-left: 0.24rem;} .ml25 {margin-left: 0.25rem;} .ml26 {margin-left: 0.26rem;} .ml27 {margin-left: 0.27rem;} .ml28 {margin-left: 0.28rem;} .ml29 {margin-left: 0.29rem;} .ml30 {margin-left: 0.3rem;} .ml31 {margin-left: 0.31rem;} .ml32 {margin-left: 0.32rem;} .ml33 {margin-left: 0.33rem;} .ml34 {margin-left: 0.34rem;} .ml35 {margin-left: 0.35rem;} .ml36 {margin-left: 0.36rem;} .ml37 {margin-left: 0.37rem;} .ml38 {margin-left: 0.38rem;} .ml39 {margin-left: 0.39rem;} .ml40 {margin-left: 0.4rem;} .ml41 {margin-left: 0.41rem;} .ml42 {margin-left: 0.42rem;} .ml43 {margin-left: 0.43rem;} .ml44 {margin-left: 0.44rem;} .ml45 {margin-left: 0.45rem;} .ml46 {margin-left: 0.46rem;} .ml47 {margin-left: 0.47rem;} .ml48 {margin-left: 0.48rem;} .ml49 {margin-left: 0.49rem;} .ml50 {margin-left: 0.5rem;} .ml51 {margin-left: 0.51rem;} .ml52 {margin-left: 0.52rem;} .ml53 {margin-left: 0.53rem;} .ml54 {margin-left: 0.54rem;} .ml55 {margin-left: 0.55rem;} .ml56 {margin-left: 0.56rem;} .ml57 {margin-left: 0.57rem;} .ml58 {margin-left: 0.58rem;} .ml59 {margin-left: 0.59rem;} .ml60 {margin-left: 0.6rem;} .ml61 {margin-left: 0.61rem;} .ml62 {margin-left: 0.62rem;} .ml63 {margin-left: 0.63rem;} .ml64 {margin-left: 0.64rem;} .ml65 {margin-left: 0.65rem;} .ml66 {margin-left: 0.66rem;} .ml67 {margin-left: 0.67rem;} .ml68 {margin-left: 0.68rem;} .ml69 {margin-left: 0.69rem;} .ml70 {margin-left: 0.7rem;} .ml71 {margin-left: 0.71rem;} .ml72 {margin-left: 0.72rem;} .ml73 {margin-left: 0.73rem;} .ml74 {margin-left: 0.74rem;} .ml75 {margin-left: 0.75rem;} .ml76 {margin-left: 0.76rem;} .ml77 {margin-left: 0.77rem;} .ml78 {margin-left: 0.78rem;} .ml79 {margin-left: 0.79rem;} .ml80 {margin-left: 0.8rem;} .ml81 {margin-left: 0.81rem;} .ml82 {margin-left: 0.82rem;} .ml83 {margin-left: 0.83rem;} .ml84 {margin-left: 0.84rem;} .ml85 {margin-left: 0.85rem;} .ml86 {margin-left: 0.86rem;} .ml87 {margin-left: 0.87rem;} .ml88 {margin-left: 0.88rem;} .ml89 {margin-left: 0.89rem;} .ml90 {margin-left: 0.9rem;} .ml91 {margin-left: 0.91rem;} .ml92 {margin-left: 0.92rem;} .ml93 {margin-left: 0.93rem;} .ml94 {margin-left: 0.94rem;} .ml95 {margin-left: 0.95rem;} .ml96 {margin-left: 0.96rem;} .ml97 {margin-left: 0.97rem;} .ml98 {margin-left: 0.98rem;} .ml99 {margin-left: 0.99rem;}
+.ml100 {margin-left: 1rem;}
+.ml135 {margin-left: 1.35rem;}
+
+/* margin-right */
+.mr0 {margin-right: 0rem;}
+.mr1 {margin-right: 0.01rem;} .mr2 {margin-right: 0.02rem;} .mr3 {margin-right: 0.03rem;} .mr4 {margin-right: 0.04rem;} .mr5 {margin-right: 0.05rem;} .mr6 {margin-right: 0.06rem;} .mr7 {margin-right: 0.07rem;} .mr8 {margin-right: 0.08rem;} .mr9 {margin-right: 0.09rem;} .mr10 {margin-right: 0.1rem;} .mr11 {margin-right: 0.11rem;} .mr12 {margin-right: 0.12rem;} .mr13 {margin-right: 0.13rem;} .mr14 {margin-right: 0.14rem;} .mr15 {margin-right: 0.15rem;} .mr16 {margin-right: 0.16rem;} .mr17 {margin-right: 0.17rem;} .mr18 {margin-right: 0.18rem;} .mr19 {margin-right: 0.19rem;} .mr20 {margin-right: 0.2rem;} .mr21 {margin-right: 0.21rem;} .mr22 {margin-right: 0.22rem;} .mr23 {margin-right: 0.23rem;} .mr24 {margin-right: 0.24rem;} .mr25 {margin-right: 0.25rem;} .mr26 {margin-right: 0.26rem;} .mr27 {margin-right: 0.27rem;} .mr28 {margin-right: 0.28rem;} .mr29 {margin-right: 0.29rem;} .mr30 {margin-right: 0.3rem;} .mr31 {margin-right: 0.31rem;} .mr32 {margin-right: 0.32rem;} .mr33 {margin-right: 0.33rem;} .mr34 {margin-right: 0.34rem;} .mr35 {margin-right: 0.35rem;} .mr36 {margin-right: 0.36rem;} .mr37 {margin-right: 0.37rem;} .mr38 {margin-right: 0.38rem;} .mr39 {margin-right: 0.39rem;} .mr40 {margin-right: 0.4rem;} .mr41 {margin-right: 0.41rem;} .mr42 {margin-right: 0.42rem;} .mr43 {margin-right: 0.43rem;} .mr44 {margin-right: 0.44rem;} .mr45 {margin-right: 0.45rem;} .mr46 {margin-right: 0.46rem;} .mr47 {margin-right: 0.47rem;} .mr48 {margin-right: 0.48rem;} .mr49 {margin-right: 0.49rem;} .mr50 {margin-right: 0.5rem;} .mr51 {margin-right: 0.51rem;} .mr52 {margin-right: 0.52rem;} .mr53 {margin-right: 0.53rem;} .mr54 {margin-right: 0.54rem;} .mr55 {margin-right: 0.55rem;} .mr56 {margin-right: 0.56rem;} .mr57 {margin-right: 0.57rem;} .mr58 {margin-right: 0.58rem;} .mr59 {margin-right: 0.59rem;} .mr60 {margin-right: 0.6rem;} .mr61 {margin-right: 0.61rem;} .mr62 {margin-right: 0.62rem;} .mr63 {margin-right: 0.63rem;} .mr64 {margin-right: 0.64rem;} .mr65 {margin-right: 0.65rem;} .mr66 {margin-right: 0.66rem;} .mr67 {margin-right: 0.67rem;} .mr68 {margin-right: 0.68rem;} .mr69 {margin-right: 0.69rem;} .mr70 {margin-right: 0.7rem;} .mr71 {margin-right: 0.71rem;} .mr72 {margin-right: 0.72rem;} .mr73 {margin-right: 0.73rem;} .mr74 {margin-right: 0.74rem;} .mr75 {margin-right: 0.75rem;} .mr76 {margin-right: 0.76rem;} .mr77 {margin-right: 0.77rem;} .mr78 {margin-right: 0.78rem;} .mr79 {margin-right: 0.79rem;} .mr80 {margin-right: 0.8rem;} .mr81 {margin-right: 0.81rem;} .mr82 {margin-right: 0.82rem;} .mr83 {margin-right: 0.83rem;} .mr84 {margin-right: 0.84rem;} .mr85 {margin-right: 0.85rem;} .mr86 {margin-right: 0.86rem;} .mr87 {margin-right: 0.87rem;} .mr88 {margin-right: 0.88rem;} .mr89 {margin-right: 0.89rem;} .mr90 {margin-right: 0.9rem;} .mr91 {margin-right: 0.91rem;} .mr92 {margin-right: 0.92rem;} .mr93 {margin-right: 0.93rem;} .mr94 {margin-right: 0.94rem;} .mr95 {margin-right: 0.95rem;} .mr96 {margin-right: 0.96rem;} .mr97 {margin-right: 0.97rem;} .mr98 {margin-right: 0.98rem;} .mr99 {margin-right: 0.99rem;}
+.mr100 {margin-right: 1rem;}
+
+/* margin-right-left */
+.mrl0 {margin-right: 0rem;margin-left: 0rem;}
+.mrl1 {margin-right: 0.01rem;margin-left: 0.01rem;} .mrl2 {margin-right: 0.02rem;margin-left: 0.02rem;} .mrl3 {margin-right: 0.03rem;margin-left: 0.03rem;} .mrl4 {margin-right: 0.04rem;margin-left: 0.04rem;} .mrl5 {margin-right: 0.05rem;margin-left: 0.05rem;} .mrl6 {margin-right: 0.06rem;margin-left: 0.06rem;} .mrl7 {margin-right: 0.07rem;margin-left: 0.07rem;} .mrl8 {margin-right: 0.08rem;margin-left: 0.08rem;} .mrl9 {margin-right: 0.09rem;margin-left: 0.09rem;} .mrl10 {margin-right: 0.1rem;margin-left: 0.1rem;} .mrl11 {margin-right: 0.11rem;margin-left: 0.11rem;} .mrl12 {margin-right: 0.12rem;margin-left: 0.12rem;} .mrl13 {margin-right: 0.13rem;margin-left: 0.13rem;} .mrl14 {margin-right: 0.14rem;margin-left: 0.14rem;} .mrl15 {margin-right: 0.15rem;margin-left: 0.15rem;} .mrl16 {margin-right: 0.16rem;margin-left: 0.16rem;} .mrl17 {margin-right: 0.17rem;margin-left: 0.17rem;} .mrl18 {margin-right: 0.18rem;margin-left: 0.18rem;} .mrl19 {margin-right: 0.19rem;margin-left: 0.19rem;} .mrl20 {margin-right: 0.2rem;margin-left: 0.2rem;} .mrl21 {margin-right: 0.21rem;margin-left: 0.21rem;} .mrl22 {margin-right: 0.22rem;margin-left: 0.22rem;} .mrl23 {margin-right: 0.23rem;margin-left: 0.23rem;} .mrl24 {margin-right: 0.24rem;margin-left: 0.24rem;} .mrl25 {margin-right: 0.25rem;margin-left: 0.25rem;} .mrl26 {margin-right: 0.26rem;margin-left: 0.26rem;} .mrl27 {margin-right: 0.27rem;margin-left: 0.27rem;} .mrl28 {margin-right: 0.28rem;margin-left: 0.28rem;} .mrl29 {margin-right: 0.29rem;margin-left: 0.29rem;} .mrl30 {margin-right: 0.3rem;margin-left: 0.3rem;} .mrl31 {margin-right: 0.31rem;margin-left: 0.31rem;} .mrl32 {margin-right: 0.32rem;margin-left: 0.32rem;} .mrl33 {margin-right: 0.33rem;margin-left: 0.33rem;} .mrl34 {margin-right: 0.34rem;margin-left: 0.34rem;} .mrl35 {margin-right: 0.35rem;margin-left: 0.35rem;} .mrl36 {margin-right: 0.36rem;margin-left: 0.36rem;} .mrl37 {margin-right: 0.37rem;margin-left: 0.37rem;} .mrl38 {margin-right: 0.38rem;margin-left: 0.38rem;} .mrl39 {margin-right: 0.39rem;margin-left: 0.39rem;} .mrl40 {margin-right: 0.4rem;margin-left: 0.4rem;} .mrl41 {margin-right: 0.41rem;margin-left: 0.41rem;} .mrl42 {margin-right: 0.42rem;margin-left: 0.42rem;} .mrl43 {margin-right: 0.43rem;margin-left: 0.43rem;} .mrl44 {margin-right: 0.44rem;margin-left: 0.44rem;} .mrl45 {margin-right: 0.45rem;margin-left: 0.45rem;} .mrl46 {margin-right: 0.46rem;margin-left: 0.46rem;} .mrl47 {margin-right: 0.47rem;margin-left: 0.47rem;} .mrl48 {margin-right: 0.48rem;margin-left: 0.48rem;} .mrl49 {margin-right: 0.49rem;margin-left: 0.49rem;} .mrl50 {margin-right: 0.5rem;margin-left: 0.5rem;} .mrl51 {margin-right: 0.51rem;margin-left: 0.51rem;} .mrl52 {margin-right: 0.52rem;margin-left: 0.52rem;} .mrl53 {margin-right: 0.53rem;margin-left: 0.53rem;} .mrl54 {margin-right: 0.54rem;margin-left: 0.54rem;} .mrl55 {margin-right: 0.55rem;margin-left: 0.55rem;} .mrl56 {margin-right: 0.56rem;margin-left: 0.56rem;} .mrl57 {margin-right: 0.57rem;margin-left: 0.57rem;} .mrl58 {margin-right: 0.58rem;margin-left: 0.58rem;} .mrl59 {margin-right: 0.59rem;margin-left: 0.59rem;} .mrl60 {margin-right: 0.6rem;margin-left: 0.6rem;} .mrl61 {margin-right: 0.61rem;margin-left: 0.61rem;} .mrl62 {margin-right: 0.62rem;margin-left: 0.62rem;} .mrl63 {margin-right: 0.63rem;margin-left: 0.63rem;} .mrl64 {margin-right: 0.64rem;margin-left: 0.64rem;} .mrl65 {margin-right: 0.65rem;margin-left: 0.65rem;} .mrl66 {margin-right: 0.66rem;margin-left: 0.66rem;} .mrl67 {margin-right: 0.67rem;margin-left: 0.67rem;} .mrl68 {margin-right: 0.68rem;margin-left: 0.68rem;} .mrl69 {margin-right: 0.69rem;margin-left: 0.69rem;} .mrl70 {margin-right: 0.7rem;margin-left: 0.7rem;} .mrl71 {margin-right: 0.71rem;margin-left: 0.71rem;} .mrl72 {margin-right: 0.72rem;margin-left: 0.72rem;} .mrl73 {margin-right: 0.73rem;margin-left: 0.73rem;} .mrl74 {margin-right: 0.74rem;margin-left: 0.74rem;} .mrl75 {margin-right: 0.75rem;margin-left: 0.75rem;} .mrl76 {margin-right: 0.76rem;margin-left: 0.76rem;} .mrl77 {margin-right: 0.77rem;margin-left: 0.77rem;} .mrl78 {margin-right: 0.78rem;margin-left: 0.78rem;} .mrl79 {margin-right: 0.79rem;margin-left: 0.79rem;} .mrl80 {margin-right: 0.8rem;margin-left: 0.8rem;} .mrl81 {margin-right: 0.81rem;margin-left: 0.81rem;} .mrl82 {margin-right: 0.82rem;margin-left: 0.82rem;} .mrl83 {margin-right: 0.83rem;margin-left: 0.83rem;} .mrl84 {margin-right: 0.84rem;margin-left: 0.84rem;} .mrl85 {margin-right: 0.85rem;margin-left: 0.85rem;} .mrl86 {margin-right: 0.86rem;margin-left: 0.86rem;} .mrl87 {margin-right: 0.87rem;margin-left: 0.87rem;} .mrl88 {margin-right: 0.88rem;margin-left: 0.88rem;} .mrl89 {margin-right: 0.89rem;margin-left: 0.89rem;} .mrl90 {margin-right: 0.9rem;margin-left: 0.9rem;} .mrl91 {margin-right: 0.91rem;margin-left: 0.91rem;} .mrl92 {margin-right: 0.92rem;margin-left: 0.92rem;} .mrl93 {margin-right: 0.93rem;margin-left: 0.93rem;} .mrl94 {margin-right: 0.94rem;margin-left: 0.94rem;} .mrl95 {margin-right: 0.95rem;margin-left: 0.95rem;} .mrl96 {margin-right: 0.96rem;margin-left: 0.96rem;} .mrl97 {margin-right: 0.97rem;margin-left: 0.97rem;} .mrl98 {margin-right: 0.98rem;margin-left: 0.98rem;} .mrl99 {margin-right: 0.99rem;margin-left: 0.99rem;}
+.mrl100 {margin-right: 1rem;margin-left: 1rem;}
+
+
+/* padding */
+.p0 {box-sizing: border-box;padding: 0rem;}
+.p1 {box-sizing: border-box;padding: 0.01rem;} .p2 {box-sizing: border-box;padding: 0.02rem;} .p3 {box-sizing: border-box;padding: 0.03rem;} .p4 {box-sizing: border-box;padding: 0.04rem;} .p5 {box-sizing: border-box;padding: 0.05rem;} .p6 {box-sizing: border-box;padding: 0.06rem;} .p7 {box-sizing: border-box;padding: 0.07rem;} .p8 {box-sizing: border-box;padding: 0.08rem;} .p9 {box-sizing: border-box;padding: 0.09rem;} .p10 {box-sizing: border-box;padding: 0.1rem;} .p11 {box-sizing: border-box;padding: 0.11rem;} .p12 {box-sizing: border-box;padding: 0.12rem;} .p13 {box-sizing: border-box;padding: 0.13rem;} .p14 {box-sizing: border-box;padding: 0.14rem;} .p15 {box-sizing: border-box;padding: 0.15rem;} .p16 {box-sizing: border-box;padding: 0.16rem;} .p17 {box-sizing: border-box;padding: 0.17rem;} .p18 {box-sizing: border-box;padding: 0.18rem;} .p19 {box-sizing: border-box;padding: 0.19rem;} .p20 {box-sizing: border-box;padding: 0.2rem;} .p21 {box-sizing: border-box;padding: 0.21rem;} .p22 {box-sizing: border-box;padding: 0.22rem;} .p23 {box-sizing: border-box;padding: 0.23rem;} .p24 {box-sizing: border-box;padding: 0.24rem;} .p25 {box-sizing: border-box;padding: 0.25rem;} .p26 {box-sizing: border-box;padding: 0.26rem;} .p27 {box-sizing: border-box;padding: 0.27rem;} .p28 {box-sizing: border-box;padding: 0.28rem;} .p29 {box-sizing: border-box;padding: 0.29rem;} .p30 {box-sizing: border-box;padding: 0.3rem;} .p31 {box-sizing: border-box;padding: 0.31rem;} .p32 {box-sizing: border-box;padding: 0.32rem;} .p33 {box-sizing: border-box;padding: 0.33rem;} .p34 {box-sizing: border-box;padding: 0.34rem;} .p35 {box-sizing: border-box;padding: 0.35rem;} .p36 {box-sizing: border-box;padding: 0.36rem;} .p37 {box-sizing: border-box;padding: 0.37rem;} .p38 {box-sizing: border-box;padding: 0.38rem;} .p39 {box-sizing: border-box;padding: 0.39rem;} .p40 {box-sizing: border-box;padding: 0.4rem;} .p41 {box-sizing: border-box;padding: 0.41rem;} .p42 {box-sizing: border-box;padding: 0.42rem;} .p43 {box-sizing: border-box;padding: 0.43rem;} .p44 {box-sizing: border-box;padding: 0.44rem;} .p45 {box-sizing: border-box;padding: 0.45rem;} .p46 {box-sizing: border-box;padding: 0.46rem;} .p47 {box-sizing: border-box;padding: 0.47rem;} .p48 {box-sizing: border-box;padding: 0.48rem;} .p49 {box-sizing: border-box;padding: 0.49rem;} .p50 {box-sizing: border-box;padding: 0.5rem;} .p51 {box-sizing: border-box;padding: 0.51rem;} .p52 {box-sizing: border-box;padding: 0.52rem;} .p53 {box-sizing: border-box;padding: 0.53rem;} .p54 {box-sizing: border-box;padding: 0.54rem;} .p55 {box-sizing: border-box;padding: 0.55rem;} .p56 {box-sizing: border-box;padding: 0.56rem;} .p57 {box-sizing: border-box;padding: 0.57rem;} .p58 {box-sizing: border-box;padding: 0.58rem;} .p59 {box-sizing: border-box;padding: 0.59rem;} .p60 {box-sizing: border-box;padding: 0.6rem;} .p61 {box-sizing: border-box;padding: 0.61rem;} .p62 {box-sizing: border-box;padding: 0.62rem;} .p63 {box-sizing: border-box;padding: 0.63rem;} .p64 {box-sizing: border-box;padding: 0.64rem;} .p65 {box-sizing: border-box;padding: 0.65rem;} .p66 {box-sizing: border-box;padding: 0.66rem;} .p67 {box-sizing: border-box;padding: 0.67rem;} .p68 {box-sizing: border-box;padding: 0.68rem;} .p69 {box-sizing: border-box;padding: 0.69rem;} .p70 {box-sizing: border-box;padding: 0.7rem;} .p71 {box-sizing: border-box;padding: 0.71rem;} .p72 {box-sizing: border-box;padding: 0.72rem;} .p73 {box-sizing: border-box;padding: 0.73rem;} .p74 {box-sizing: border-box;padding: 0.74rem;} .p75 {box-sizing: border-box;padding: 0.75rem;} .p76 {box-sizing: border-box;padding: 0.76rem;} .p77 {box-sizing: border-box;padding: 0.77rem;} .p78 {box-sizing: border-box;padding: 0.78rem;} .p79 {box-sizing: border-box;padding: 0.79rem;} .p80 {box-sizing: border-box;padding: 0.8rem;} .p81 {box-sizing: border-box;padding: 0.81rem;} .p82 {box-sizing: border-box;padding: 0.82rem;} .p83 {box-sizing: border-box;padding: 0.83rem;} .p84 {box-sizing: border-box;padding: 0.84rem;} .p85 {box-sizing: border-box;padding: 0.85rem;} .p86 {box-sizing: border-box;padding: 0.86rem;} .p87 {box-sizing: border-box;padding: 0.87rem;} .p88 {box-sizing: border-box;padding: 0.88rem;} .p89 {box-sizing: border-box;padding: 0.89rem;} .p90 {box-sizing: border-box;padding: 0.9rem;} .p91 {box-sizing: border-box;padding: 0.91rem;} .p92 {box-sizing: border-box;padding: 0.92rem;} .p93 {box-sizing: border-box;padding: 0.93rem;} .p94 {box-sizing: border-box;padding: 0.94rem;} .p95 {box-sizing: border-box;padding: 0.95rem;} .p96 {box-sizing: border-box;padding: 0.96rem;} .p97 {box-sizing: border-box;padding: 0.97rem;} .p98 {box-sizing: border-box;padding: 0.98rem;} .p99 {box-sizing: border-box;padding: 0.99rem;}
+.p100 {box-sizing: border-box;padding: 1rem;}
+
+/* padding-top */
+.pt0 {box-sizing: border-box;padding-top: 0rem;}
+.pt1 {box-sizing: border-box;padding-top: 0.01rem;} .pt2 {box-sizing: border-box;padding-top: 0.02rem;} .pt3 {box-sizing: border-box;padding-top: 0.03rem;} .pt4 {box-sizing: border-box;padding-top: 0.04rem;} .pt5 {box-sizing: border-box;padding-top: 0.05rem;} .pt6 {box-sizing: border-box;padding-top: 0.06rem;} .pt7 {box-sizing: border-box;padding-top: 0.07rem;} .pt8 {box-sizing: border-box;padding-top: 0.08rem;} .pt9 {box-sizing: border-box;padding-top: 0.09rem;} .pt10 {box-sizing: border-box;padding-top: 0.1rem;} .pt11 {box-sizing: border-box;padding-top: 0.11rem;} .pt12 {box-sizing: border-box;padding-top: 0.12rem;} .pt13 {box-sizing: border-box;padding-top: 0.13rem;} .pt14 {box-sizing: border-box;padding-top: 0.14rem;} .pt15 {box-sizing: border-box;padding-top: 0.15rem;} .pt16 {box-sizing: border-box;padding-top: 0.16rem;} .pt17 {box-sizing: border-box;padding-top: 0.17rem;} .pt18 {box-sizing: border-box;padding-top: 0.18rem;} .pt19 {box-sizing: border-box;padding-top: 0.19rem;} .pt20 {box-sizing: border-box;padding-top: 0.2rem;} .pt21 {box-sizing: border-box;padding-top: 0.21rem;} .pt22 {box-sizing: border-box;padding-top: 0.22rem;} .pt23 {box-sizing: border-box;padding-top: 0.23rem;} .pt24 {box-sizing: border-box;padding-top: 0.24rem;} .pt25 {box-sizing: border-box;padding-top: 0.25rem;} .pt26 {box-sizing: border-box;padding-top: 0.26rem;} .pt27 {box-sizing: border-box;padding-top: 0.27rem;} .pt28 {box-sizing: border-box;padding-top: 0.28rem;} .pt29 {box-sizing: border-box;padding-top: 0.29rem;} .pt30 {box-sizing: border-box;padding-top: 0.3rem;} .pt31 {box-sizing: border-box;padding-top: 0.31rem;} .pt32 {box-sizing: border-box;padding-top: 0.32rem;} .pt33 {box-sizing: border-box;padding-top: 0.33rem;} .pt34 {box-sizing: border-box;padding-top: 0.34rem;} .pt35 {box-sizing: border-box;padding-top: 0.35rem;} .pt36 {box-sizing: border-box;padding-top: 0.36rem;} .pt37 {box-sizing: border-box;padding-top: 0.37rem;} .pt38 {box-sizing: border-box;padding-top: 0.38rem;} .pt39 {box-sizing: border-box;padding-top: 0.39rem;} .pt40 {box-sizing: border-box;padding-top: 0.4rem;} .pt41 {box-sizing: border-box;padding-top: 0.41rem;} .pt42 {box-sizing: border-box;padding-top: 0.42rem;} .pt43 {box-sizing: border-box;padding-top: 0.43rem;} .pt44 {box-sizing: border-box;padding-top: 0.44rem;} .pt45 {box-sizing: border-box;padding-top: 0.45rem;} .pt46 {box-sizing: border-box;padding-top: 0.46rem;} .pt47 {box-sizing: border-box;padding-top: 0.47rem;} .pt48 {box-sizing: border-box;padding-top: 0.48rem;} .pt49 {box-sizing: border-box;padding-top: 0.49rem;} .pt50 {box-sizing: border-box;padding-top: 0.5rem;} .pt51 {box-sizing: border-box;padding-top: 0.51rem;} .pt52 {box-sizing: border-box;padding-top: 0.52rem;} .pt53 {box-sizing: border-box;padding-top: 0.53rem;} .pt54 {box-sizing: border-box;padding-top: 0.54rem;} .pt55 {box-sizing: border-box;padding-top: 0.55rem;} .pt56 {box-sizing: border-box;padding-top: 0.56rem;} .pt57 {box-sizing: border-box;padding-top: 0.57rem;} .pt58 {box-sizing: border-box;padding-top: 0.58rem;} .pt59 {box-sizing: border-box;padding-top: 0.59rem;} .pt60 {box-sizing: border-box;padding-top: 0.6rem;} .pt61 {box-sizing: border-box;padding-top: 0.61rem;} .pt62 {box-sizing: border-box;padding-top: 0.62rem;} .pt63 {box-sizing: border-box;padding-top: 0.63rem;} .pt64 {box-sizing: border-box;padding-top: 0.64rem;} .pt65 {box-sizing: border-box;padding-top: 0.65rem;} .pt66 {box-sizing: border-box;padding-top: 0.66rem;} .pt67 {box-sizing: border-box;padding-top: 0.67rem;} .pt68 {box-sizing: border-box;padding-top: 0.68rem;} .pt69 {box-sizing: border-box;padding-top: 0.69rem;} .pt70 {box-sizing: border-box;padding-top: 0.7rem;} .pt71 {box-sizing: border-box;padding-top: 0.71rem;} .pt72 {box-sizing: border-box;padding-top: 0.72rem;} .pt73 {box-sizing: border-box;padding-top: 0.73rem;} .pt74 {box-sizing: border-box;padding-top: 0.74rem;} .pt75 {box-sizing: border-box;padding-top: 0.75rem;} .pt76 {box-sizing: border-box;padding-top: 0.76rem;} .pt77 {box-sizing: border-box;padding-top: 0.77rem;} .pt78 {box-sizing: border-box;padding-top: 0.78rem;} .pt79 {box-sizing: border-box;padding-top: 0.79rem;} .pt80 {box-sizing: border-box;padding-top: 0.8rem;} .pt81 {box-sizing: border-box;padding-top: 0.81rem;} .pt82 {box-sizing: border-box;padding-top: 0.82rem;} .pt83 {box-sizing: border-box;padding-top: 0.83rem;} .pt84 {box-sizing: border-box;padding-top: 0.84rem;} .pt85 {box-sizing: border-box;padding-top: 0.85rem;} .pt86 {box-sizing: border-box;padding-top: 0.86rem;} .pt87 {box-sizing: border-box;padding-top: 0.87rem;} .pt88 {box-sizing: border-box;padding-top: 0.88rem;} .pt89 {box-sizing: border-box;padding-top: 0.89rem;} .pt90 {box-sizing: border-box;padding-top: 0.9rem;} .pt91 {box-sizing: border-box;padding-top: 0.91rem;} .pt92 {box-sizing: border-box;padding-top: 0.92rem;} .pt93 {box-sizing: border-box;padding-top: 0.93rem;} .pt94 {box-sizing: border-box;padding-top: 0.94rem;} .pt95 {box-sizing: border-box;padding-top: 0.95rem;} .pt96 {box-sizing: border-box;padding-top: 0.96rem;} .pt97 {box-sizing: border-box;padding-top: 0.97rem;} .pt98 {box-sizing: border-box;padding-top: 0.98rem;} .pt99 {box-sizing: border-box;padding-top: 0.99rem;}
+.pt100 {box-sizing: border-box;padding-top: 1rem;}
+
+/* padding-bottom */
+.pb0 {box-sizing: border-box;padding-bottom: 0rem;}
+.pb1 {box-sizing: border-box;padding-bottom: 0.01rem;} .pb2 {box-sizing: border-box;padding-bottom: 0.02rem;} .pb3 {box-sizing: border-box;padding-bottom: 0.03rem;} .pb4 {box-sizing: border-box;padding-bottom: 0.04rem;} .pb5 {box-sizing: border-box;padding-bottom: 0.05rem;} .pb6 {box-sizing: border-box;padding-bottom: 0.06rem;} .pb7 {box-sizing: border-box;padding-bottom: 0.07rem;} .pb8 {box-sizing: border-box;padding-bottom: 0.08rem;} .pb9 {box-sizing: border-box;padding-bottom: 0.09rem;} .pb10 {box-sizing: border-box;padding-bottom: 0.1rem;} .pb11 {box-sizing: border-box;padding-bottom: 0.11rem;} .pb12 {box-sizing: border-box;padding-bottom: 0.12rem;} .pb13 {box-sizing: border-box;padding-bottom: 0.13rem;} .pb14 {box-sizing: border-box;padding-bottom: 0.14rem;} .pb15 {box-sizing: border-box;padding-bottom: 0.15rem;} .pb16 {box-sizing: border-box;padding-bottom: 0.16rem;} .pb17 {box-sizing: border-box;padding-bottom: 0.17rem;} .pb18 {box-sizing: border-box;padding-bottom: 0.18rem;} .pb19 {box-sizing: border-box;padding-bottom: 0.19rem;} .pb20 {box-sizing: border-box;padding-bottom: 0.2rem;} .pb21 {box-sizing: border-box;padding-bottom: 0.21rem;} .pb22 {box-sizing: border-box;padding-bottom: 0.22rem;} .pb23 {box-sizing: border-box;padding-bottom: 0.23rem;} .pb24 {box-sizing: border-box;padding-bottom: 0.24rem;} .pb25 {box-sizing: border-box;padding-bottom: 0.25rem;} .pb26 {box-sizing: border-box;padding-bottom: 0.26rem;} .pb27 {box-sizing: border-box;padding-bottom: 0.27rem;} .pb28 {box-sizing: border-box;padding-bottom: 0.28rem;} .pb29 {box-sizing: border-box;padding-bottom: 0.29rem;} .pb30 {box-sizing: border-box;padding-bottom: 0.3rem;} .pb31 {box-sizing: border-box;padding-bottom: 0.31rem;} .pb32 {box-sizing: border-box;padding-bottom: 0.32rem;} .pb33 {box-sizing: border-box;padding-bottom: 0.33rem;} .pb34 {box-sizing: border-box;padding-bottom: 0.34rem;} .pb35 {box-sizing: border-box;padding-bottom: 0.35rem;} .pb36 {box-sizing: border-box;padding-bottom: 0.36rem;} .pb37 {box-sizing: border-box;padding-bottom: 0.37rem;} .pb38 {box-sizing: border-box;padding-bottom: 0.38rem;} .pb39 {box-sizing: border-box;padding-bottom: 0.39rem;} .pb40 {box-sizing: border-box;padding-bottom: 0.4rem;} .pb41 {box-sizing: border-box;padding-bottom: 0.41rem;} .pb42 {box-sizing: border-box;padding-bottom: 0.42rem;} .pb43 {box-sizing: border-box;padding-bottom: 0.43rem;} .pb44 {box-sizing: border-box;padding-bottom: 0.44rem;} .pb45 {box-sizing: border-box;padding-bottom: 0.45rem;} .pb46 {box-sizing: border-box;padding-bottom: 0.46rem;} .pb47 {box-sizing: border-box;padding-bottom: 0.47rem;} .pb48 {box-sizing: border-box;padding-bottom: 0.48rem;} .pb49 {box-sizing: border-box;padding-bottom: 0.49rem;} .pb50 {box-sizing: border-box;padding-bottom: 0.5rem;} .pb51 {box-sizing: border-box;padding-bottom: 0.51rem;} .pb52 {box-sizing: border-box;padding-bottom: 0.52rem;} .pb53 {box-sizing: border-box;padding-bottom: 0.53rem;} .pb54 {box-sizing: border-box;padding-bottom: 0.54rem;} .pb55 {box-sizing: border-box;padding-bottom: 0.55rem;} .pb56 {box-sizing: border-box;padding-bottom: 0.56rem;} .pb57 {box-sizing: border-box;padding-bottom: 0.57rem;} .pb58 {box-sizing: border-box;padding-bottom: 0.58rem;} .pb59 {box-sizing: border-box;padding-bottom: 0.59rem;} .pb60 {box-sizing: border-box;padding-bottom: 0.6rem;} .pb61 {box-sizing: border-box;padding-bottom: 0.61rem;} .pb62 {box-sizing: border-box;padding-bottom: 0.62rem;} .pb63 {box-sizing: border-box;padding-bottom: 0.63rem;} .pb64 {box-sizing: border-box;padding-bottom: 0.64rem;} .pb65 {box-sizing: border-box;padding-bottom: 0.65rem;} .pb66 {box-sizing: border-box;padding-bottom: 0.66rem;} .pb67 {box-sizing: border-box;padding-bottom: 0.67rem;} .pb68 {box-sizing: border-box;padding-bottom: 0.68rem;} .pb69 {box-sizing: border-box;padding-bottom: 0.69rem;} .pb70 {box-sizing: border-box;padding-bottom: 0.7rem;} .pb71 {box-sizing: border-box;padding-bottom: 0.71rem;} .pb72 {box-sizing: border-box;padding-bottom: 0.72rem;} .pb73 {box-sizing: border-box;padding-bottom: 0.73rem;} .pb74 {box-sizing: border-box;padding-bottom: 0.74rem;} .pb75 {box-sizing: border-box;padding-bottom: 0.75rem;} .pb76 {box-sizing: border-box;padding-bottom: 0.76rem;} .pb77 {box-sizing: border-box;padding-bottom: 0.77rem;} .pb78 {box-sizing: border-box;padding-bottom: 0.78rem;} .pb79 {box-sizing: border-box;padding-bottom: 0.79rem;} .pb80 {box-sizing: border-box;padding-bottom: 0.8rem;} .pb81 {box-sizing: border-box;padding-bottom: 0.81rem;} .pb82 {box-sizing: border-box;padding-bottom: 0.82rem;} .pb83 {box-sizing: border-box;padding-bottom: 0.83rem;} .pb84 {box-sizing: border-box;padding-bottom: 0.84rem;} .pb85 {box-sizing: border-box;padding-bottom: 0.85rem;} .pb86 {box-sizing: border-box;padding-bottom: 0.86rem;} .pb87 {box-sizing: border-box;padding-bottom: 0.87rem;} .pb88 {box-sizing: border-box;padding-bottom: 0.88rem;} .pb89 {box-sizing: border-box;padding-bottom: 0.89rem;} .pb90 {box-sizing: border-box;padding-bottom: 0.9rem;} .pb91 {box-sizing: border-box;padding-bottom: 0.91rem;} .pb92 {box-sizing: border-box;padding-bottom: 0.92rem;} .pb93 {box-sizing: border-box;padding-bottom: 0.93rem;} .pb94 {box-sizing: border-box;padding-bottom: 0.94rem;} .pb95 {box-sizing: border-box;padding-bottom: 0.95rem;} .pb96 {box-sizing: border-box;padding-bottom: 0.96rem;} .pb97 {box-sizing: border-box;padding-bottom: 0.97rem;} .pb98 {box-sizing: border-box;padding-bottom: 0.98rem;} .pb99 {box-sizing: border-box;padding-bottom: 0.99rem;}
+.pb100 {box-sizing: border-box;padding-bottom: 1rem;}
+
+/* padding-top-bottom */
+.ptb0 {box-sizing: border-box;padding-top: 0rem;padding-bottom: 0rem;}
+.ptb1 {box-sizing: border-box;padding-top: 0.01rem;padding-bottom: 0.01rem;} .ptb2 {box-sizing: border-box;padding-top: 0.02rem;padding-bottom: 0.02rem;} .ptb3 {box-sizing: border-box;padding-top: 0.03rem;padding-bottom: 0.03rem;} .ptb4 {box-sizing: border-box;padding-top: 0.04rem;padding-bottom: 0.04rem;} .ptb5 {box-sizing: border-box;padding-top: 0.05rem;padding-bottom: 0.05rem;} .ptb6 {box-sizing: border-box;padding-top: 0.06rem;padding-bottom: 0.06rem;} .ptb7 {box-sizing: border-box;padding-top: 0.07rem;padding-bottom: 0.07rem;} .ptb8 {box-sizing: border-box;padding-top: 0.08rem;padding-bottom: 0.08rem;} .ptb9 {box-sizing: border-box;padding-top: 0.09rem;padding-bottom: 0.09rem;} .ptb10 {box-sizing: border-box;padding-top: 0.1rem;padding-bottom: 0.1rem;} .ptb11 {box-sizing: border-box;padding-top: 0.11rem;padding-bottom: 0.11rem;} .ptb12 {box-sizing: border-box;padding-top: 0.12rem;padding-bottom: 0.12rem;} .ptb13 {box-sizing: border-box;padding-top: 0.13rem;padding-bottom: 0.13rem;} .ptb14 {box-sizing: border-box;padding-top: 0.14rem;padding-bottom: 0.14rem;} .ptb15 {box-sizing: border-box;padding-top: 0.15rem;padding-bottom: 0.15rem;} .ptb16 {box-sizing: border-box;padding-top: 0.16rem;padding-bottom: 0.16rem;} .ptb17 {box-sizing: border-box;padding-top: 0.17rem;padding-bottom: 0.17rem;} .ptb18 {box-sizing: border-box;padding-top: 0.18rem;padding-bottom: 0.18rem;} .ptb19 {box-sizing: border-box;padding-top: 0.19rem;padding-bottom: 0.19rem;} .ptb20 {box-sizing: border-box;padding-top: 0.2rem;padding-bottom: 0.2rem;} .ptb21 {box-sizing: border-box;padding-top: 0.21rem;padding-bottom: 0.21rem;} .ptb22 {box-sizing: border-box;padding-top: 0.22rem;padding-bottom: 0.22rem;} .ptb23 {box-sizing: border-box;padding-top: 0.23rem;padding-bottom: 0.23rem;} .ptb24 {box-sizing: border-box;padding-top: 0.24rem;padding-bottom: 0.24rem;} .ptb25 {box-sizing: border-box;padding-top: 0.25rem;padding-bottom: 0.25rem;} .ptb26 {box-sizing: border-box;padding-top: 0.26rem;padding-bottom: 0.26rem;} .ptb27 {box-sizing: border-box;padding-top: 0.27rem;padding-bottom: 0.27rem;} .ptb28 {box-sizing: border-box;padding-top: 0.28rem;padding-bottom: 0.28rem;} .ptb29 {box-sizing: border-box;padding-top: 0.29rem;padding-bottom: 0.29rem;} .ptb30 {box-sizing: border-box;padding-top: 0.3rem;padding-bottom: 0.3rem;} .ptb31 {box-sizing: border-box;padding-top: 0.31rem;padding-bottom: 0.31rem;} .ptb32 {box-sizing: border-box;padding-top: 0.32rem;padding-bottom: 0.32rem;} .ptb33 {box-sizing: border-box;padding-top: 0.33rem;padding-bottom: 0.33rem;} .ptb34 {box-sizing: border-box;padding-top: 0.34rem;padding-bottom: 0.34rem;} .ptb35 {box-sizing: border-box;padding-top: 0.35rem;padding-bottom: 0.35rem;} .ptb36 {box-sizing: border-box;padding-top: 0.36rem;padding-bottom: 0.36rem;} .ptb37 {box-sizing: border-box;padding-top: 0.37rem;padding-bottom: 0.37rem;} .ptb38 {box-sizing: border-box;padding-top: 0.38rem;padding-bottom: 0.38rem;} .ptb39 {box-sizing: border-box;padding-top: 0.39rem;padding-bottom: 0.39rem;} .ptb40 {box-sizing: border-box;padding-top: 0.4rem;padding-bottom: 0.4rem;} .ptb41 {box-sizing: border-box;padding-top: 0.41rem;padding-bottom: 0.41rem;} .ptb42 {box-sizing: border-box;padding-top: 0.42rem;padding-bottom: 0.42rem;} .ptb43 {box-sizing: border-box;padding-top: 0.43rem;padding-bottom: 0.43rem;} .ptb44 {box-sizing: border-box;padding-top: 0.44rem;padding-bottom: 0.44rem;} .ptb45 {box-sizing: border-box;padding-top: 0.45rem;padding-bottom: 0.45rem;} .ptb46 {box-sizing: border-box;padding-top: 0.46rem;padding-bottom: 0.46rem;} .ptb47 {box-sizing: border-box;padding-top: 0.47rem;padding-bottom: 0.47rem;} .ptb48 {box-sizing: border-box;padding-top: 0.48rem;padding-bottom: 0.48rem;} .ptb49 {box-sizing: border-box;padding-top: 0.49rem;padding-bottom: 0.49rem;} .ptb50 {box-sizing: border-box;padding-top: 0.5rem;padding-bottom: 0.5rem;} .ptb51 {box-sizing: border-box;padding-top: 0.51rem;padding-bottom: 0.51rem;} .ptb52 {box-sizing: border-box;padding-top: 0.52rem;padding-bottom: 0.52rem;} .ptb53 {box-sizing: border-box;padding-top: 0.53rem;padding-bottom: 0.53rem;} .ptb54 {box-sizing: border-box;padding-top: 0.54rem;padding-bottom: 0.54rem;} .ptb55 {box-sizing: border-box;padding-top: 0.55rem;padding-bottom: 0.55rem;} .ptb56 {box-sizing: border-box;padding-top: 0.56rem;padding-bottom: 0.56rem;} .ptb57 {box-sizing: border-box;padding-top: 0.57rem;padding-bottom: 0.57rem;} .ptb58 {box-sizing: border-box;padding-top: 0.58rem;padding-bottom: 0.58rem;} .ptb59 {box-sizing: border-box;padding-top: 0.59rem;padding-bottom: 0.59rem;} .ptb60 {box-sizing: border-box;padding-top: 0.6rem;padding-bottom: 0.6rem;} .ptb61 {box-sizing: border-box;padding-top: 0.61rem;padding-bottom: 0.61rem;} .ptb62 {box-sizing: border-box;padding-top: 0.62rem;padding-bottom: 0.62rem;} .ptb63 {box-sizing: border-box;padding-top: 0.63rem;padding-bottom: 0.63rem;} .ptb64 {box-sizing: border-box;padding-top: 0.64rem;padding-bottom: 0.64rem;} .ptb65 {box-sizing: border-box;padding-top: 0.65rem;padding-bottom: 0.65rem;} .ptb66 {box-sizing: border-box;padding-top: 0.66rem;padding-bottom: 0.66rem;} .ptb67 {box-sizing: border-box;padding-top: 0.67rem;padding-bottom: 0.67rem;} .ptb68 {box-sizing: border-box;padding-top: 0.68rem;padding-bottom: 0.68rem;} .ptb69 {box-sizing: border-box;padding-top: 0.69rem;padding-bottom: 0.69rem;} .ptb70 {box-sizing: border-box;padding-top: 0.7rem;padding-bottom: 0.7rem;} .ptb71 {box-sizing: border-box;padding-top: 0.71rem;padding-bottom: 0.71rem;} .ptb72 {box-sizing: border-box;padding-top: 0.72rem;padding-bottom: 0.72rem;} .ptb73 {box-sizing: border-box;padding-top: 0.73rem;padding-bottom: 0.73rem;} .ptb74 {box-sizing: border-box;padding-top: 0.74rem;padding-bottom: 0.74rem;} .ptb75 {box-sizing: border-box;padding-top: 0.75rem;padding-bottom: 0.75rem;} .ptb76 {box-sizing: border-box;padding-top: 0.76rem;padding-bottom: 0.76rem;} .ptb77 {box-sizing: border-box;padding-top: 0.77rem;padding-bottom: 0.77rem;} .ptb78 {box-sizing: border-box;padding-top: 0.78rem;padding-bottom: 0.78rem;} .ptb79 {box-sizing: border-box;padding-top: 0.79rem;padding-bottom: 0.79rem;} .ptb80 {box-sizing: border-box;padding-top: 0.8rem;padding-bottom: 0.8rem;} .ptb81 {box-sizing: border-box;padding-top: 0.81rem;padding-bottom: 0.81rem;} .ptb82 {box-sizing: border-box;padding-top: 0.82rem;padding-bottom: 0.82rem;} .ptb83 {box-sizing: border-box;padding-top: 0.83rem;padding-bottom: 0.83rem;} .ptb84 {box-sizing: border-box;padding-top: 0.84rem;padding-bottom: 0.84rem;} .ptb85 {box-sizing: border-box;padding-top: 0.85rem;padding-bottom: 0.85rem;} .ptb86 {box-sizing: border-box;padding-top: 0.86rem;padding-bottom: 0.86rem;} .ptb87 {box-sizing: border-box;padding-top: 0.87rem;padding-bottom: 0.87rem;} .ptb88 {box-sizing: border-box;padding-top: 0.88rem;padding-bottom: 0.88rem;} .ptb89 {box-sizing: border-box;padding-top: 0.89rem;padding-bottom: 0.89rem;} .ptb90 {box-sizing: border-box;padding-top: 0.9rem;padding-bottom: 0.9rem;} .ptb91 {box-sizing: border-box;padding-top: 0.91rem;padding-bottom: 0.91rem;} .ptb92 {box-sizing: border-box;padding-top: 0.92rem;padding-bottom: 0.92rem;} .ptb93 {box-sizing: border-box;padding-top: 0.93rem;padding-bottom: 0.93rem;} .ptb94 {box-sizing: border-box;padding-top: 0.94rem;padding-bottom: 0.94rem;} .ptb95 {box-sizing: border-box;padding-top: 0.95rem;padding-bottom: 0.95rem;} .ptb96 {box-sizing: border-box;padding-top: 0.96rem;padding-bottom: 0.96rem;} .ptb97 {box-sizing: border-box;padding-top: 0.97rem;padding-bottom: 0.97rem;} .ptb98 {box-sizing: border-box;padding-top: 0.98rem;padding-bottom: 0.98rem;} .ptb99 {box-sizing: border-box;padding-top: 0.99rem;padding-bottom: 0.99rem;}
+.ptb100 {box-sizing: border-box;padding-top: 1rem;padding-bottom: 1rem;}
+
+/* padding-right */
+.pr0 {box-sizing: border-box;padding-right: 0rem;}
+.pr1 {box-sizing: border-box;padding-right: 0.01rem;} .pr2 {box-sizing: border-box;padding-right: 0.02rem;} .pr3 {box-sizing: border-box;padding-right: 0.03rem;} .pr4 {box-sizing: border-box;padding-right: 0.04rem;} .pr5 {box-sizing: border-box;padding-right: 0.05rem;} .pr6 {box-sizing: border-box;padding-right: 0.06rem;} .pr7 {box-sizing: border-box;padding-right: 0.07rem;} .pr8 {box-sizing: border-box;padding-right: 0.08rem;} .pr9 {box-sizing: border-box;padding-right: 0.09rem;} .pr10 {box-sizing: border-box;padding-right: 0.1rem;} .pr11 {box-sizing: border-box;padding-right: 0.11rem;} .pr12 {box-sizing: border-box;padding-right: 0.12rem;} .pr13 {box-sizing: border-box;padding-right: 0.13rem;} .pr14 {box-sizing: border-box;padding-right: 0.14rem;} .pr15 {box-sizing: border-box;padding-right: 0.15rem;} .pr16 {box-sizing: border-box;padding-right: 0.16rem;} .pr17 {box-sizing: border-box;padding-right: 0.17rem;} .pr18 {box-sizing: border-box;padding-right: 0.18rem;} .pr19 {box-sizing: border-box;padding-right: 0.19rem;} .pr20 {box-sizing: border-box;padding-right: 0.2rem;} .pr21 {box-sizing: border-box;padding-right: 0.21rem;} .pr22 {box-sizing: border-box;padding-right: 0.22rem;} .pr23 {box-sizing: border-box;padding-right: 0.23rem;} .pr24 {box-sizing: border-box;padding-right: 0.24rem;} .pr25 {box-sizing: border-box;padding-right: 0.25rem;} .pr26 {box-sizing: border-box;padding-right: 0.26rem;} .pr27 {box-sizing: border-box;padding-right: 0.27rem;} .pr28 {box-sizing: border-box;padding-right: 0.28rem;} .pr29 {box-sizing: border-box;padding-right: 0.29rem;} .pr30 {box-sizing: border-box;padding-right: 0.3rem;} .pr31 {box-sizing: border-box;padding-right: 0.31rem;} .pr32 {box-sizing: border-box;padding-right: 0.32rem;} .pr33 {box-sizing: border-box;padding-right: 0.33rem;} .pr34 {box-sizing: border-box;padding-right: 0.34rem;} .pr35 {box-sizing: border-box;padding-right: 0.35rem;} .pr36 {box-sizing: border-box;padding-right: 0.36rem;} .pr37 {box-sizing: border-box;padding-right: 0.37rem;} .pr38 {box-sizing: border-box;padding-right: 0.38rem;} .pr39 {box-sizing: border-box;padding-right: 0.39rem;} .pr40 {box-sizing: border-box;padding-right: 0.4rem;} .pr41 {box-sizing: border-box;padding-right: 0.41rem;} .pr42 {box-sizing: border-box;padding-right: 0.42rem;} .pr43 {box-sizing: border-box;padding-right: 0.43rem;} .pr44 {box-sizing: border-box;padding-right: 0.44rem;} .pr45 {box-sizing: border-box;padding-right: 0.45rem;} .pr46 {box-sizing: border-box;padding-right: 0.46rem;} .pr47 {box-sizing: border-box;padding-right: 0.47rem;} .pr48 {box-sizing: border-box;padding-right: 0.48rem;} .pr49 {box-sizing: border-box;padding-right: 0.49rem;} .pr50 {box-sizing: border-box;padding-right: 0.5rem;} .pr51 {box-sizing: border-box;padding-right: 0.51rem;} .pr52 {box-sizing: border-box;padding-right: 0.52rem;} .pr53 {box-sizing: border-box;padding-right: 0.53rem;} .pr54 {box-sizing: border-box;padding-right: 0.54rem;} .pr55 {box-sizing: border-box;padding-right: 0.55rem;} .pr56 {box-sizing: border-box;padding-right: 0.56rem;} .pr57 {box-sizing: border-box;padding-right: 0.57rem;} .pr58 {box-sizing: border-box;padding-right: 0.58rem;} .pr59 {box-sizing: border-box;padding-right: 0.59rem;} .pr60 {box-sizing: border-box;padding-right: 0.6rem;} .pr61 {box-sizing: border-box;padding-right: 0.61rem;} .pr62 {box-sizing: border-box;padding-right: 0.62rem;} .pr63 {box-sizing: border-box;padding-right: 0.63rem;} .pr64 {box-sizing: border-box;padding-right: 0.64rem;} .pr65 {box-sizing: border-box;padding-right: 0.65rem;} .pr66 {box-sizing: border-box;padding-right: 0.66rem;} .pr67 {box-sizing: border-box;padding-right: 0.67rem;} .pr68 {box-sizing: border-box;padding-right: 0.68rem;} .pr69 {box-sizing: border-box;padding-right: 0.69rem;} .pr70 {box-sizing: border-box;padding-right: 0.7rem;} .pr71 {box-sizing: border-box;padding-right: 0.71rem;} .pr72 {box-sizing: border-box;padding-right: 0.72rem;} .pr73 {box-sizing: border-box;padding-right: 0.73rem;} .pr74 {box-sizing: border-box;padding-right: 0.74rem;} .pr75 {box-sizing: border-box;padding-right: 0.75rem;} .pr76 {box-sizing: border-box;padding-right: 0.76rem;} .pr77 {box-sizing: border-box;padding-right: 0.77rem;} .pr78 {box-sizing: border-box;padding-right: 0.78rem;} .pr79 {box-sizing: border-box;padding-right: 0.79rem;} .pr80 {box-sizing: border-box;padding-right: 0.8rem;} .pr81 {box-sizing: border-box;padding-right: 0.81rem;} .pr82 {box-sizing: border-box;padding-right: 0.82rem;} .pr83 {box-sizing: border-box;padding-right: 0.83rem;} .pr84 {box-sizing: border-box;padding-right: 0.84rem;} .pr85 {box-sizing: border-box;padding-right: 0.85rem;} .pr86 {box-sizing: border-box;padding-right: 0.86rem;} .pr87 {box-sizing: border-box;padding-right: 0.87rem;} .pr88 {box-sizing: border-box;padding-right: 0.88rem;} .pr89 {box-sizing: border-box;padding-right: 0.89rem;} .pr90 {box-sizing: border-box;padding-right: 0.9rem;} .pr91 {box-sizing: border-box;padding-right: 0.91rem;} .pr92 {box-sizing: border-box;padding-right: 0.92rem;} .pr93 {box-sizing: border-box;padding-right: 0.93rem;} .pr94 {box-sizing: border-box;padding-right: 0.94rem;} .pr95 {box-sizing: border-box;padding-right: 0.95rem;} .pr96 {box-sizing: border-box;padding-right: 0.96rem;} .pr97 {box-sizing: border-box;padding-right: 0.97rem;} .pr98 {box-sizing: border-box;padding-right: 0.98rem;} .pr99 {box-sizing: border-box;padding-right: 0.99rem;}
+.pr100 {box-sizing: border-box;padding-right: 1rem;}
+
+/* padding-left */
+.pl0 {box-sizing: border-box;padding-left: 0rem;}
+.pl1 {box-sizing: border-box;padding-left: 0.01rem;} .pl2 {box-sizing: border-box;padding-left: 0.02rem;} .pl3 {box-sizing: border-box;padding-left: 0.03rem;} .pl4 {box-sizing: border-box;padding-left: 0.04rem;} .pl5 {box-sizing: border-box;padding-left: 0.05rem;} .pl6 {box-sizing: border-box;padding-left: 0.06rem;} .pl7 {box-sizing: border-box;padding-left: 0.07rem;} .pl8 {box-sizing: border-box;padding-left: 0.08rem;} .pl9 {box-sizing: border-box;padding-left: 0.09rem;} .pl10 {box-sizing: border-box;padding-left: 0.1rem;} .pl11 {box-sizing: border-box;padding-left: 0.11rem;} .pl12 {box-sizing: border-box;padding-left: 0.12rem;} .pl13 {box-sizing: border-box;padding-left: 0.13rem;} .pl14 {box-sizing: border-box;padding-left: 0.14rem;} .pl15 {box-sizing: border-box;padding-left: 0.15rem;} .pl16 {box-sizing: border-box;padding-left: 0.16rem;} .pl17 {box-sizing: border-box;padding-left: 0.17rem;} .pl18 {box-sizing: border-box;padding-left: 0.18rem;} .pl19 {box-sizing: border-box;padding-left: 0.19rem;} .pl20 {box-sizing: border-box;padding-left: 0.2rem;} .pl21 {box-sizing: border-box;padding-left: 0.21rem;} .pl22 {box-sizing: border-box;padding-left: 0.22rem;} .pl23 {box-sizing: border-box;padding-left: 0.23rem;} .pl24 {box-sizing: border-box;padding-left: 0.24rem;} .pl25 {box-sizing: border-box;padding-left: 0.25rem;} .pl26 {box-sizing: border-box;padding-left: 0.26rem;} .pl27 {box-sizing: border-box;padding-left: 0.27rem;} .pl28 {box-sizing: border-box;padding-left: 0.28rem;} .pl29 {box-sizing: border-box;padding-left: 0.29rem;} .pl30 {box-sizing: border-box;padding-left: 0.3rem;} .pl31 {box-sizing: border-box;padding-left: 0.31rem;} .pl32 {box-sizing: border-box;padding-left: 0.32rem;} .pl33 {box-sizing: border-box;padding-left: 0.33rem;} .pl34 {box-sizing: border-box;padding-left: 0.34rem;} .pl35 {box-sizing: border-box;padding-left: 0.35rem;} .pl36 {box-sizing: border-box;padding-left: 0.36rem;} .pl37 {box-sizing: border-box;padding-left: 0.37rem;} .pl38 {box-sizing: border-box;padding-left: 0.38rem;} .pl39 {box-sizing: border-box;padding-left: 0.39rem;} .pl40 {box-sizing: border-box;padding-left: 0.4rem;} .pl41 {box-sizing: border-box;padding-left: 0.41rem;} .pl42 {box-sizing: border-box;padding-left: 0.42rem;} .pl43 {box-sizing: border-box;padding-left: 0.43rem;} .pl44 {box-sizing: border-box;padding-left: 0.44rem;} .pl45 {box-sizing: border-box;padding-left: 0.45rem;} .pl46 {box-sizing: border-box;padding-left: 0.46rem;} .pl47 {box-sizing: border-box;padding-left: 0.47rem;} .pl48 {box-sizing: border-box;padding-left: 0.48rem;} .pl49 {box-sizing: border-box;padding-left: 0.49rem;} .pl50 {box-sizing: border-box;padding-left: 0.5rem;} .pl51 {box-sizing: border-box;padding-left: 0.51rem;} .pl52 {box-sizing: border-box;padding-left: 0.52rem;} .pl53 {box-sizing: border-box;padding-left: 0.53rem;} .pl54 {box-sizing: border-box;padding-left: 0.54rem;} .pl55 {box-sizing: border-box;padding-left: 0.55rem;} .pl56 {box-sizing: border-box;padding-left: 0.56rem;} .pl57 {box-sizing: border-box;padding-left: 0.57rem;} .pl58 {box-sizing: border-box;padding-left: 0.58rem;} .pl59 {box-sizing: border-box;padding-left: 0.59rem;} .pl60 {box-sizing: border-box;padding-left: 0.6rem;} .pl61 {box-sizing: border-box;padding-left: 0.61rem;} .pl62 {box-sizing: border-box;padding-left: 0.62rem;} .pl63 {box-sizing: border-box;padding-left: 0.63rem;} .pl64 {box-sizing: border-box;padding-left: 0.64rem;} .pl65 {box-sizing: border-box;padding-left: 0.65rem;} .pl66 {box-sizing: border-box;padding-left: 0.66rem;} .pl67 {box-sizing: border-box;padding-left: 0.67rem;} .pl68 {box-sizing: border-box;padding-left: 0.68rem;} .pl69 {box-sizing: border-box;padding-left: 0.69rem;} .pl70 {box-sizing: border-box;padding-left: 0.7rem;} .pl71 {box-sizing: border-box;padding-left: 0.71rem;} .pl72 {box-sizing: border-box;padding-left: 0.72rem;} .pl73 {box-sizing: border-box;padding-left: 0.73rem;} .pl74 {box-sizing: border-box;padding-left: 0.74rem;} .pl75 {box-sizing: border-box;padding-left: 0.75rem;} .pl76 {box-sizing: border-box;padding-left: 0.76rem;} .pl77 {box-sizing: border-box;padding-left: 0.77rem;} .pl78 {box-sizing: border-box;padding-left: 0.78rem;} .pl79 {box-sizing: border-box;padding-left: 0.79rem;} .pl80 {box-sizing: border-box;padding-left: 0.8rem;} .pl81 {box-sizing: border-box;padding-left: 0.81rem;} .pl82 {box-sizing: border-box;padding-left: 0.82rem;} .pl83 {box-sizing: border-box;padding-left: 0.83rem;} .pl84 {box-sizing: border-box;padding-left: 0.84rem;} .pl85 {box-sizing: border-box;padding-left: 0.85rem;} .pl86 {box-sizing: border-box;padding-left: 0.86rem;} .pl87 {box-sizing: border-box;padding-left: 0.87rem;} .pl88 {box-sizing: border-box;padding-left: 0.88rem;} .pl89 {box-sizing: border-box;padding-left: 0.89rem;} .pl90 {box-sizing: border-box;padding-left: 0.9rem;} .pl91 {box-sizing: border-box;padding-left: 0.91rem;} .pl92 {box-sizing: border-box;padding-left: 0.92rem;} .pl93 {box-sizing: border-box;padding-left: 0.93rem;} .pl94 {box-sizing: border-box;padding-left: 0.94rem;} .pl95 {box-sizing: border-box;padding-left: 0.95rem;} .pl96 {box-sizing: border-box;padding-left: 0.96rem;} .pl97 {box-sizing: border-box;padding-left: 0.97rem;} .pl98 {box-sizing: border-box;padding-left: 0.98rem;} .pl99 {box-sizing: border-box;padding-left: 0.99rem;}
+.pl100 {box-sizing: border-box;padding-left: 1rem;}
+
+/* padding-right-left */
+.prl0 {box-sizing: border-box;padding-right: 0rem;padding-left: 0rem;}
+.prl1 {box-sizing: border-box;padding-right: 0.01rem;padding-left: 0.01rem;} .prl2 {box-sizing: border-box;padding-right: 0.02rem;padding-left: 0.02rem;} .prl3 {box-sizing: border-box;padding-right: 0.03rem;padding-left: 0.03rem;} .prl4 {box-sizing: border-box;padding-right: 0.04rem;padding-left: 0.04rem;} .prl5 {box-sizing: border-box;padding-right: 0.05rem;padding-left: 0.05rem;} .prl6 {box-sizing: border-box;padding-right: 0.06rem;padding-left: 0.06rem;} .prl7 {box-sizing: border-box;padding-right: 0.07rem;padding-left: 0.07rem;} .prl8 {box-sizing: border-box;padding-right: 0.08rem;padding-left: 0.08rem;} .prl9 {box-sizing: border-box;padding-right: 0.09rem;padding-left: 0.09rem;} .prl10 {box-sizing: border-box;padding-right: 0.1rem;padding-left: 0.1rem;} .prl11 {box-sizing: border-box;padding-right: 0.11rem;padding-left: 0.11rem;} .prl12 {box-sizing: border-box;padding-right: 0.12rem;padding-left: 0.12rem;} .prl13 {box-sizing: border-box;padding-right: 0.13rem;padding-left: 0.13rem;} .prl14 {box-sizing: border-box;padding-right: 0.14rem;padding-left: 0.14rem;} .prl15 {box-sizing: border-box;padding-right: 0.15rem;padding-left: 0.15rem;} .prl16 {box-sizing: border-box;padding-right: 0.16rem;padding-left: 0.16rem;} .prl17 {box-sizing: border-box;padding-right: 0.17rem;padding-left: 0.17rem;} .prl18 {box-sizing: border-box;padding-right: 0.18rem;padding-left: 0.18rem;} .prl19 {box-sizing: border-box;padding-right: 0.19rem;padding-left: 0.19rem;} .prl20 {box-sizing: border-box;padding-right: 0.2rem;padding-left: 0.2rem;} .prl21 {box-sizing: border-box;padding-right: 0.21rem;padding-left: 0.21rem;} .prl22 {box-sizing: border-box;padding-right: 0.22rem;padding-left: 0.22rem;} .prl23 {box-sizing: border-box;padding-right: 0.23rem;padding-left: 0.23rem;} .prl24 {box-sizing: border-box;padding-right: 0.24rem;padding-left: 0.24rem;} .prl25 {box-sizing: border-box;padding-right: 0.25rem;padding-left: 0.25rem;} .prl26 {box-sizing: border-box;padding-right: 0.26rem;padding-left: 0.26rem;} .prl27 {box-sizing: border-box;padding-right: 0.27rem;padding-left: 0.27rem;} .prl28 {box-sizing: border-box;padding-right: 0.28rem;padding-left: 0.28rem;} .prl29 {box-sizing: border-box;padding-right: 0.29rem;padding-left: 0.29rem;} .prl30 {box-sizing: border-box;padding-right: 0.3rem;padding-left: 0.3rem;} .prl31 {box-sizing: border-box;padding-right: 0.31rem;padding-left: 0.31rem;} .prl32 {box-sizing: border-box;padding-right: 0.32rem;padding-left: 0.32rem;} .prl33 {box-sizing: border-box;padding-right: 0.33rem;padding-left: 0.33rem;} .prl34 {box-sizing: border-box;padding-right: 0.34rem;padding-left: 0.34rem;} .prl35 {box-sizing: border-box;padding-right: 0.35rem;padding-left: 0.35rem;} .prl36 {box-sizing: border-box;padding-right: 0.36rem;padding-left: 0.36rem;} .prl37 {box-sizing: border-box;padding-right: 0.37rem;padding-left: 0.37rem;} .prl38 {box-sizing: border-box;padding-right: 0.38rem;padding-left: 0.38rem;} .prl39 {box-sizing: border-box;padding-right: 0.39rem;padding-left: 0.39rem;} .prl40 {box-sizing: border-box;padding-right: 0.4rem;padding-left: 0.4rem;} .prl41 {box-sizing: border-box;padding-right: 0.41rem;padding-left: 0.41rem;} .prl42 {box-sizing: border-box;padding-right: 0.42rem;padding-left: 0.42rem;} .prl43 {box-sizing: border-box;padding-right: 0.43rem;padding-left: 0.43rem;} .prl44 {box-sizing: border-box;padding-right: 0.44rem;padding-left: 0.44rem;} .prl45 {box-sizing: border-box;padding-right: 0.45rem;padding-left: 0.45rem;} .prl46 {box-sizing: border-box;padding-right: 0.46rem;padding-left: 0.46rem;} .prl47 {box-sizing: border-box;padding-right: 0.47rem;padding-left: 0.47rem;} .prl48 {box-sizing: border-box;padding-right: 0.48rem;padding-left: 0.48rem;} .prl49 {box-sizing: border-box;padding-right: 0.49rem;padding-left: 0.49rem;} .prl50 {box-sizing: border-box;padding-right: 0.5rem;padding-left: 0.5rem;} .prl51 {box-sizing: border-box;padding-right: 0.51rem;padding-left: 0.51rem;} .prl52 {box-sizing: border-box;padding-right: 0.52rem;padding-left: 0.52rem;} .prl53 {box-sizing: border-box;padding-right: 0.53rem;padding-left: 0.53rem;} .prl54 {box-sizing: border-box;padding-right: 0.54rem;padding-left: 0.54rem;} .prl55 {box-sizing: border-box;padding-right: 0.55rem;padding-left: 0.55rem;} .prl56 {box-sizing: border-box;padding-right: 0.56rem;padding-left: 0.56rem;} .prl57 {box-sizing: border-box;padding-right: 0.57rem;padding-left: 0.57rem;} .prl58 {box-sizing: border-box;padding-right: 0.58rem;padding-left: 0.58rem;} .prl59 {box-sizing: border-box;padding-right: 0.59rem;padding-left: 0.59rem;} .prl60 {box-sizing: border-box;padding-right: 0.6rem;padding-left: 0.6rem;} .prl61 {box-sizing: border-box;padding-right: 0.61rem;padding-left: 0.61rem;} .prl62 {box-sizing: border-box;padding-right: 0.62rem;padding-left: 0.62rem;} .prl63 {box-sizing: border-box;padding-right: 0.63rem;padding-left: 0.63rem;} .prl64 {box-sizing: border-box;padding-right: 0.64rem;padding-left: 0.64rem;} .prl65 {box-sizing: border-box;padding-right: 0.65rem;padding-left: 0.65rem;} .prl66 {box-sizing: border-box;padding-right: 0.66rem;padding-left: 0.66rem;} .prl67 {box-sizing: border-box;padding-right: 0.67rem;padding-left: 0.67rem;} .prl68 {box-sizing: border-box;padding-right: 0.68rem;padding-left: 0.68rem;} .prl69 {box-sizing: border-box;padding-right: 0.69rem;padding-left: 0.69rem;} .prl70 {box-sizing: border-box;padding-right: 0.7rem;padding-left: 0.7rem;} .prl71 {box-sizing: border-box;padding-right: 0.71rem;padding-left: 0.71rem;} .prl72 {box-sizing: border-box;padding-right: 0.72rem;padding-left: 0.72rem;} .prl73 {box-sizing: border-box;padding-right: 0.73rem;padding-left: 0.73rem;} .prl74 {box-sizing: border-box;padding-right: 0.74rem;padding-left: 0.74rem;} .prl75 {box-sizing: border-box;padding-right: 0.75rem;padding-left: 0.75rem;} .prl76 {box-sizing: border-box;padding-right: 0.76rem;padding-left: 0.76rem;} .prl77 {box-sizing: border-box;padding-right: 0.77rem;padding-left: 0.77rem;} .prl78 {box-sizing: border-box;padding-right: 0.78rem;padding-left: 0.78rem;} .prl79 {box-sizing: border-box;padding-right: 0.79rem;padding-left: 0.79rem;} .prl80 {box-sizing: border-box;padding-right: 0.8rem;padding-left: 0.8rem;} .prl81 {box-sizing: border-box;padding-right: 0.81rem;padding-left: 0.81rem;} .prl82 {box-sizing: border-box;padding-right: 0.82rem;padding-left: 0.82rem;} .prl83 {box-sizing: border-box;padding-right: 0.83rem;padding-left: 0.83rem;} .prl84 {box-sizing: border-box;padding-right: 0.84rem;padding-left: 0.84rem;} .prl85 {box-sizing: border-box;padding-right: 0.85rem;padding-left: 0.85rem;} .prl86 {box-sizing: border-box;padding-right: 0.86rem;padding-left: 0.86rem;} .prl87 {box-sizing: border-box;padding-right: 0.87rem;padding-left: 0.87rem;} .prl88 {box-sizing: border-box;padding-right: 0.88rem;padding-left: 0.88rem;} .prl89 {box-sizing: border-box;padding-right: 0.89rem;padding-left: 0.89rem;} .prl90 {box-sizing: border-box;padding-right: 0.9rem;padding-left: 0.9rem;} .prl91 {box-sizing: border-box;padding-right: 0.91rem;padding-left: 0.91rem;} .prl92 {box-sizing: border-box;padding-right: 0.92rem;padding-left: 0.92rem;} .prl93 {box-sizing: border-box;padding-right: 0.93rem;padding-left: 0.93rem;} .prl94 {box-sizing: border-box;padding-right: 0.94rem;padding-left: 0.94rem;} .prl95 {box-sizing: border-box;padding-right: 0.95rem;padding-left: 0.95rem;} .prl96 {box-sizing: border-box;padding-right: 0.96rem;padding-left: 0.96rem;} .prl97 {box-sizing: border-box;padding-right: 0.97rem;padding-left: 0.97rem;} .prl98 {box-sizing: border-box;padding-right: 0.98rem;padding-left: 0.98rem;} .prl99 {box-sizing: border-box;padding-right: 0.99rem;padding-left: 0.99rem;}
+.prl100 {box-sizing: border-box;padding-right: 1rem;padding-left: 1rem;}
+
+//宽高
+/*width,height*/
+/*width*/
+.max-w1200{
+  max-width: 12rem;
+}
+.w0{width: 0rem;}
+.w1{width: 0.01rem;} .w2{width: 0.02rem;} .w3{width: 0.03rem;} .w4{width: 0.04rem;} .w5{width: 0.05rem;} .w6{width: 0.06rem;} .w7{width: 0.07rem;} .w8{width: 0.08rem;} .w9{width: 0.09rem;} .w10{width: 0.1rem;} .w11{width: 0.11rem;} .w12{width: 0.12rem;} .w13{width: 0.13rem;} .w14{width: 0.14rem;} .w15{width: 0.15rem;} .w16{width: 0.16rem;} .w17{width: 0.17rem;} .w18{width: 0.18rem;} .w19{width: 0.19rem;} .w20{width: 0.2rem;} .w21{width: 0.21rem;} .w22{width: 0.22rem;} .w23{width: 0.23rem;} .w24{width: 0.24rem;} .w25{width: 0.25rem;} .w26{width: 0.26rem;} .w27{width: 0.27rem;} .w28{width: 0.28rem;} .w29{width: 0.29rem;} .w30{width: 0.3rem;} .w31{width: 0.31rem;} .w32{width: 0.32rem;} .w33{width: 0.33rem;} .w34{width: 0.34rem;} .w35{width: 0.35rem;} .w36{width: 0.36rem;} .w37{width: 0.37rem;} .w38{width: 0.38rem;} .w39{width: 0.39rem;} .w40{width: 0.4rem;} .w41{width: 0.41rem;} .w42{width: 0.42rem;} .w43{width: 0.43rem;} .w44{width: 0.44rem;} .w45{width: 0.45rem;} .w46{width: 0.46rem;} .w47{width: 0.47rem;} .w48{width: 0.48rem;} .w49{width: 0.49rem;} .w50{width: 0.5rem;} .w51{width: 0.51rem;} .w52{width: 0.52rem;} .w53{width: 0.53rem;} .w54{width: 0.54rem;} .w55{width: 0.55rem;} .w56{width: 0.56rem;} .w57{width: 0.57rem;} .w58{width: 0.58rem;} .w59{width: 0.59rem;} .w60{width: 0.6rem;} .w61{width: 0.61rem;} .w62{width: 0.62rem;} .w63{width: 0.63rem;} .w64{width: 0.64rem;} .w65{width: 0.65rem;} .w66{width: 0.66rem;} .w67{width: 0.67rem;} .w68{width: 0.68rem;} .w69{width: 0.69rem;} .w70{width: 0.7rem;} .w71{width: 0.71rem;} .w72{width: 0.72rem;} .w73{width: 0.73rem;} .w74{width: 0.74rem;} .w75{width: 0.75rem;} .w76{width: 0.76rem;} .w77{width: 0.77rem;} .w78{width: 0.78rem;} .w79{width: 0.79rem;} .w80{width: 0.8rem;} .w81{width: 0.81rem;} .w82{width: 0.82rem;} .w83{width: 0.83rem;} .w84{width: 0.84rem;} .w85{width: 0.85rem;} .w86{width: 0.86rem;} .w87{width: 0.87rem;} .w88{width: 0.88rem;} .w89{width: 0.89rem;} .w90{width: 0.9rem;} .w91{width: 0.91rem;} .w92{width: 0.92rem;} .w93{width: 0.93rem;} .w94{width: 0.94rem;} .w95{width: 0.95rem;} .w96{width: 0.96rem;} .w97{width: 0.97rem;} .w98{width: 0.98rem;} .w99{width: 0.99rem;}
+.w100{width: 1rem;}
+.w110{width: 1.1rem;}
+.w120{width: 1.2rem;}
+.w128{width: 1.28rem;}
+.w130{width: 1.3rem;}
+.w140{width: 1.4rem;}
+.w150{width: 1.5rem;}
+.w152{width: 1.52rem;}
+.w153{width: 1.53rem;}
+.w155{width: 1.55rem;}
+.w160{width: 1.6rem;}
+.w165{width: 1.65rem;}
+.w170{width: 1.7rem;}
+.w180{width: 1.8rem;}
+.w190{width: 1.9rem;}
+.w192{width: 1.92rem;}
+.w200{width: 2rem;}
+.w244{width: 2.44rem;}
+.w1200{width:12rem}
+
+/*height*/
+.h0{height: 0rem;}
+.h1{height: 0.01rem;} .h2{height: 0.02rem;} .h3{height: 0.03rem;} .h4{height: 0.04rem;} .h5{height: 0.05rem;} .h6{height: 0.06rem;} .h7{height: 0.07rem;} .h8{height: 0.08rem;} .h9{height: 0.09rem;} .h10{height: 0.1rem;} .h11{height: 0.11rem;} .h12{height: 0.12rem;} .h13{height: 0.13rem;} .h14{height: 0.14rem;} .h15{height: 0.15rem;} .h16{height: 0.16rem;} .h17{height: 0.17rem;} .h18{height: 0.18rem;} .h19{height: 0.19rem;} .h20{height: 0.2rem;} .h21{height: 0.21rem;} .h22{height: 0.22rem;} .h23{height: 0.23rem;} .h24{height: 0.24rem;} .h25{height: 0.25rem;} .h26{height: 0.26rem;} .h27{height: 0.27rem;} .h28{height: 0.28rem;} .h29{height: 0.29rem;} .h30{height: 0.3rem;} .h31{height: 0.31rem;} .h32{height: 0.32rem;} .h33{height: 0.33rem;} .h34{height: 0.34rem;} .h35{height: 0.35rem;} .h36{height: 0.36rem;} .h37{height: 0.37rem;} .h38{height: 0.38rem;} .h39{height: 0.39rem;} .h40{height: 0.4rem;} .h41{height: 0.41rem;} .h42{height: 0.42rem;} .h43{height: 0.43rem;} .h44{height: 0.44rem;} .h45{height: 0.45rem;} .h46{height: 0.46rem;} .h47{height: 0.47rem;} .h48{height: 0.48rem;} .h49{height: 0.49rem;} .h50{height: 0.5rem;} .h51{height: 0.51rem;} .h52{height: 0.52rem;} .h53{height: 0.53rem;} .h54{height: 0.54rem;} .h55{height: 0.55rem;} .h56{height: 0.56rem;} .h57{height: 0.57rem;} .h58{height: 0.58rem;} .h59{height: 0.59rem;} .h60{height: 0.6rem;} .h61{height: 0.61rem;} .h62{height: 0.62rem;} .h63{height: 0.63rem;} .h64{height: 0.64rem;} .h65{height: 0.65rem;} .h66{height: 0.66rem;} .h67{height: 0.67rem;} .h68{height: 0.68rem;} .h69{height: 0.69rem;} .h70{height: 0.7rem;} .h71{height: 0.71rem;} .h72{height: 0.72rem;} .h73{height: 0.73rem;} .h74{height: 0.74rem;} .h75{height: 0.75rem;} .h76{height: 0.76rem;} .h77{height: 0.77rem;} .h78{height: 0.78rem;} .h79{height: 0.79rem;} .h80{height: 0.8rem;} .h81{height: 0.81rem;} .h82{height: 0.82rem;} .h83{height: 0.83rem;} .h84{height: 0.84rem;} .h85{height: 0.85rem;} .h86{height: 0.86rem;} .h87{height: 0.87rem;} .h88{height: 0.88rem;} .h89{height: 0.89rem;} .h90{height: 0.9rem;} .h91{height: 0.91rem;} .h92{height: 0.92rem;} .h93{height: 0.93rem;} .h94{height: 0.94rem;} .h95{height: 0.95rem;} .h96{height: 0.96rem;} .h97{height: 0.97rem;} .h98{height: 0.98rem;} .h99{height: 0.99rem;}
+.h100{height: 1rem;}
+
+//行高
+.lh0{line-height: 0rem;}
+.lh1{line-height: 0.01rem;} .lh2{line-height: 0.02rem;} .lh3{line-height: 0.03rem;} .lh4{line-height: 0.04rem;} .lh5{line-height: 0.05rem;} .lh6{line-height: 0.06rem;} .lh7{line-height: 0.07rem;} .lh8{line-height: 0.08rem;} .lh9{line-height: 0.09rem;} .lh10{line-height: 0.1rem;} .lh11{line-height: 0.11rem;} .lh12{line-height: 0.12rem;} .lh13{line-height: 0.13rem;} .lh14{line-height: 0.14rem;} .lh15{line-height: 0.15rem;} .lh16{line-height: 0.16rem;} .lh17{line-height: 0.17rem;} .lh18{line-height: 0.18rem;} .lh19{line-height: 0.19rem;} .lh20{line-height: 0.2rem;} .lh21{line-height: 0.21rem;} .lh22{line-height: 0.22rem;} .lh23{line-height: 0.23rem;} .lh24{line-height: 0.24rem;} .lh25{line-height: 0.25rem;} .lh26{line-height: 0.26rem;} .lh27{line-height: 0.27rem;} .lh28{line-height: 0.28rem;} .lh29{line-height: 0.29rem;} .lh30{line-height: 0.3rem;} .lh31{line-height: 0.31rem;} .lh32{line-height: 0.32rem;} .lh33{line-height: 0.33rem;} .lh34{line-height: 0.34rem;} .lh35{line-height: 0.35rem;} .lh36{line-height: 0.36rem;} .lh37{line-height: 0.37rem;} .lh38{line-height: 0.38rem;} .lh39{line-height: 0.39rem;} .lh40{line-height: 0.4rem;} .lh41{line-height: 0.41rem;} .lh42{line-height: 0.42rem;} .lh43{line-height: 0.43rem;} .lh44{line-height: 0.44rem;} .lh45{line-height: 0.45rem;} .lh46{line-height: 0.46rem;} .lh47{line-height: 0.47rem;} .lh48{line-height: 0.48rem;} .lh49{line-height: 0.49rem;} .lh50{line-height: 0.5rem;} .lh51{line-height: 0.51rem;} .lh52{line-height: 0.52rem;} .lh53{line-height: 0.53rem;} .lh54{line-height: 0.54rem;} .lh55{line-height: 0.55rem;} .lh56{line-height: 0.56rem;} .lh57{line-height: 0.57rem;} .lh58{line-height: 0.58rem;} .lh59{line-height: 0.59rem;} .lh60{line-height: 0.6rem;} .lh61{line-height: 0.61rem;} .lh62{line-height: 0.62rem;} .lh63{line-height: 0.63rem;} .lh64{line-height: 0.64rem;} .lh65{line-height: 0.65rem;} .lh66{line-height: 0.66rem;} .lh67{line-height: 0.67rem;} .lh68{line-height: 0.68rem;} .lh69{line-height: 0.69rem;} .lh70{line-height: 0.7rem;} .lh71{line-height: 0.71rem;} .lh72{line-height: 0.72rem;} .lh73{line-height: 0.73rem;} .lh74{line-height: 0.74rem;} .lh75{line-height: 0.75rem;} .lh76{line-height: 0.76rem;} .lh77{line-height: 0.77rem;} .lh78{line-height: 0.78rem;} .lh79{line-height: 0.79rem;} .lh80{line-height: 0.8rem;} .lh81{line-height: 0.81rem;} .lh82{line-height: 0.82rem;} .lh83{line-height: 0.83rem;} .lh84{line-height: 0.84rem;} .lh85{line-height: 0.85rem;} .lh86{line-height: 0.86rem;} .lh87{line-height: 0.87rem;} .lh88{line-height: 0.88rem;} .lh89{line-height: 0.89rem;} .lh90{line-height: 0.9rem;} .lh91{line-height: 0.91rem;} .lh92{line-height: 0.92rem;} .lh93{line-height: 0.93rem;} .lh94{line-height: 0.94rem;} .lh95{line-height: 0.95rem;} .lh96{line-height: 0.96rem;} .lh97{line-height: 0.97rem;} .lh98{line-height: 0.98rem;} .lh99{line-height: 0.99rem;}
+.lh100{line-height: 1rem;}
+
+
+
+} // end body:not(#_)
diff --git a/src/assets/styles/components/ai-chat.scss b/src/assets/styles/components/ai-chat.scss
new file mode 100644
index 0000000..eeba75c
--- /dev/null
+++ b/src/assets/styles/components/ai-chat.scss
@@ -0,0 +1,187 @@
+.ai-chat {
+  width: 3.6rem;
+  height: 100vh;
+  background: #f3f4f6;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: fixed;
+  right: 0;
+  top: 0;
+  border-left: 1px solid #e5e7eb;
+
+  &__banner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: linear-gradient(135deg, #4FC2C9 0%, #42A8B3 100%);
+    color: #fff;
+    padding: 0.1rem 0.16rem;
+    font-size: 0.13rem;
+    cursor: pointer;
+    border-radius: 0.2rem;
+    margin: 0.15rem;
+    height: 0.41rem;
+  }
+
+  &__banner-arrow {
+    font-size: 0.16rem;
+    padding-bottom: 0.05rem;
+    box-sizing: border-box;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+    padding: 0.16rem;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  &__avatar {
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 50%;
+    background: #e5e7eb;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.2rem;
+  }
+
+  &__info {
+    flex: 1;
+  }
+
+  &__name {
+    font-size: 0.16rem;
+    font-weight: 600;
+    color: #1a1a2e;
+  }
+
+  &__desc {
+    font-size: 0.12rem;
+    color: #6b7280;
+    margin-top: 0.02rem;
+  }
+
+  &__messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.16rem;
+  }
+
+  &__msg {
+    margin-bottom: 0.12rem;
+    display: flex;
+
+    &--ai {
+      justify-content: flex-start;
+    }
+
+    &--user {
+      justify-content: flex-end;
+    }
+  }
+
+  &__msg-bubble {
+    border-radius: 0.1rem;
+    padding: 0.12rem 0.14rem;
+    font-size: 0.13rem;
+    line-height: 1.6;
+    max-width: 85%;
+  }
+
+  &__msg--ai &__msg-bubble {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+  }
+
+  &__msg--user &__msg-bubble {
+    background: #f0f3f6;
+    color: #1a1a2e;
+  }
+
+  &__msg-title {
+    font-weight: 600;
+    font-size: 0.14rem;
+    margin-bottom: 0.06rem;
+    color: #1a1a2e;
+  }
+
+  &__msg-text {
+    color: #6b7280;
+    font-size: 0.12rem;
+  }
+
+  &__quick-questions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.08rem;
+    margin-top: 0.12rem;
+  }
+
+  &__quick-item {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.08rem;
+    padding: 0.1rem 0.14rem;
+    color: #6b7280;
+    font-size: 0.12rem;
+    cursor: pointer;
+    transition: background 0.2s;
+
+    &:hover {
+      background: #f9fafb;
+      color: #374151;
+    }
+  }
+
+  &__input-area {
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+    padding: 0.12rem 0.16rem;
+    border-top: 1px solid #e5e7eb;
+    background: #fff;
+  }
+
+  &__input {
+    flex: 1;
+    background: #f3f4f6;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.06rem;
+    padding: 0.1rem 0.12rem;
+    color: #1a1a2e;
+    font-size: 0.12rem;
+    outline: none;
+
+    &::placeholder {
+      color: #9ca3af;
+    }
+
+    &:focus {
+      border-color: #9ca3af;
+    }
+  }
+
+  &__send-btn {
+    width: 0.36rem;
+    height: 0.36rem;
+    border-radius: 50%;
+    background: #1a1a2e;
+    border: none;
+    color: #fff;
+    font-size: 0.16rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s;
+
+    &:hover {
+      background: #2e3142;
+    }
+  }
+}
diff --git a/src/assets/styles/components/hello-world.scss b/src/assets/styles/components/hello-world.scss
new file mode 100644
index 0000000..654d3d0
--- /dev/null
+++ b/src/assets/styles/components/hello-world.scss
@@ -0,0 +1,4 @@
+// HelloWorld 组件样式
+.hello-world {
+  // 在这里添加 HelloWorld 组件的样式
+}
diff --git a/src/assets/styles/components/industry-selector.scss b/src/assets/styles/components/industry-selector.scss
new file mode 100644
index 0000000..6eab23e
--- /dev/null
+++ b/src/assets/styles/components/industry-selector.scss
@@ -0,0 +1,307 @@
+// ========================================
+// 行业选择器组件样式（分栏联动版）
+// 全局 1rem = 100px，表单元素用固定 height 控制
+// 颜色统一使用 variables.scss 变量
+// ========================================
+@use '../variables' as *;
+
+.industry-selector {
+  position: relative;
+  display: inline-block;
+
+  // ==================== 触发按钮 ====================
+  &__trigger {
+    display: flex;
+    align-items: center;
+    gap: 0.04rem;
+    background: $bg-main;
+    border: 1px solid $border-color;
+    border-radius: 0.2rem;
+    padding: 0.05rem 0.14rem;
+    color: $text-dark;
+    font-size: 0.12rem;
+    line-height: 1;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    max-width: 2rem;
+
+    &:hover {
+      border-color: $accent;
+      color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  // 触发按钮文字（超长省略）
+  &__display {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 1.6rem;
+  }
+
+  // 下拉箭头图标
+  &__arrow {
+    width: 0.1rem;
+    height: 0.1rem;
+    color: $text-light;
+    flex-shrink: 0;
+    transition: transform 0.2s;
+
+    &--open {
+      transform: rotate(180deg);
+    }
+  }
+
+  // ==================== 下拉面板 ====================
+  &__panel {
+    position: absolute;
+    top: calc(100% + 0.06rem);
+    left: 0;
+    width: 3.6rem;
+    background: $bg-white;
+    border: 1px solid $border-color;
+    border-radius: 0.1rem;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    padding: 0.1rem;
+  }
+
+  // ==================== 选中区（已选标签） ====================
+  &__selected-area {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.06rem;
+    margin-bottom: 0.1rem;
+    max-height: 0.8rem;
+    overflow-y: auto;
+  }
+
+  // 单个已选标签
+  &__tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.03rem;
+    height: 0.22rem;
+    background: $theme-color;
+    border: 1px solid rgba(79, 194, 201, 0.3);
+    border-radius: 0.04rem;
+    padding: 0 0.08rem;
+    font-size: 0.11rem;
+    line-height: 0.22rem;
+    color: $accent-hover;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+
+  // 标签关闭按钮
+  &__tag-close {
+    width: 0.1rem;
+    height: 0.1rem;
+    cursor: pointer;
+    color: $accent;
+    flex-shrink: 0;
+    transition: color 0.15s;
+
+    &:hover {
+      color: $danger;
+    }
+  }
+
+  // ==================== 搜索框 ====================
+  &__search-wrap {
+    margin-bottom: 0.08rem;
+  }
+
+  &__search {
+    display: block;
+    width: 100%;
+    height: 0.3rem;
+    box-sizing: border-box;
+    border: 1px solid $border-color;
+    border-radius: 0.06rem;
+    padding: 0 0.1rem;
+    font-size: 0.12rem;
+    line-height: 0.3rem;
+    color: $text-dark;
+    outline: none;
+    background: $bg-main;
+    margin: 0;
+    transition: border-color 0.2s;
+
+    &::placeholder {
+      color: $text-light;
+      line-height: 0.3rem;
+    }
+
+    &:focus {
+      border-color: $accent;
+      background: $bg-white;
+    }
+  }
+
+  // ==================== 搜索结果列表 ====================
+  &__search-results {
+    max-height: 2rem;
+    overflow-y: auto;
+    border: 1px solid $border-color;
+    border-radius: 0.06rem;
+    background: $bg-white;
+  }
+
+  // 搜索结果单行
+  &__search-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 0.3rem;
+    padding: 0 0.1rem;
+    font-size: 0.12rem;
+    line-height: 0.3rem;
+    color: $text-dark;
+    cursor: pointer;
+    transition: all 0.15s;
+
+    &:hover {
+      background: $theme-color;
+      color: $accent-hover;
+    }
+
+    & + & {
+      border-top: 1px solid $border-color;
+    }
+  }
+
+  // 搜索无结果提示
+  &__search-empty {
+    padding: 0.1rem;
+    font-size: 0.12rem;
+    line-height: 1;
+    color: $text-light;
+    text-align: center;
+  }
+
+  // 选中勾图标
+  &__check {
+    width: 0.12rem;
+    height: 0.12rem;
+    color: $accent;
+    flex-shrink: 0;
+  }
+
+  // ==================== 分栏联动选择区 ====================
+  &__columns {
+    display: flex;
+    border: 1px solid $border-color;
+    border-radius: 0.06rem;
+    overflow: hidden;
+    height: 2.4rem;
+  }
+
+  // 单栏通用样式
+  &__col {
+    overflow-y: auto;
+    height: 100%;
+
+    // 左栏：一级行业列表
+    &--left {
+      width: 1.2rem;
+      flex-shrink: 0;
+      border-right: 1px solid $border-color;
+      background: $bg-main;
+    }
+
+    // 右栏：二级行业列表
+    &--right {
+      flex: 1;
+      background: $bg-white;
+    }
+  }
+
+  // 栏内每一行
+  &__col-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 0.32rem;
+    padding: 0 0.1rem;
+    font-size: 0.12rem;
+    line-height: 0.32rem;
+    color: $text-dark;
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      background: $theme-color;
+      color: $accent-hover;
+    }
+
+    // 左栏当前激活项
+    &--active {
+      background: $bg-white;
+      color: $accent;
+      font-weight: 600;
+      // 左侧加一条品牌色竖线
+      box-shadow: inset 3px 0 0 $accent;
+    }
+
+    // 右栏已选中项
+    &--selected {
+      color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  // 右栏空状态提示
+  &__col-empty {
+    padding: 0.2rem 0.1rem;
+    font-size: 0.12rem;
+    line-height: 1;
+    color: $text-light;
+    text-align: center;
+  }
+
+  // ==================== 底部操作按钮 ====================
+  &__actions {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.1rem;
+    gap: 0.1rem;
+  }
+
+  &__btn {
+    flex: 1;
+    height: 0.3rem;
+    border-radius: 0.06rem;
+    font-size: 0.12rem;
+    line-height: 0.3rem;
+    cursor: pointer;
+    border: 1px solid $border-color;
+    transition: all 0.2s;
+
+    &--reset {
+      background: $bg-main;
+      color: $text-dark;
+
+      &:hover {
+        border-color: $text-light;
+        color: $text-dark;
+      }
+    }
+
+    &--confirm {
+      background: $accent;
+      color: $bg-white;
+      border-color: $accent;
+
+      &:hover {
+        background: $accent-hover;
+        border-color: $accent-hover;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/components/job-category-selector.scss b/src/assets/styles/components/job-category-selector.scss
new file mode 100644
index 0000000..d7cd2bf
--- /dev/null
+++ b/src/assets/styles/components/job-category-selector.scss
@@ -0,0 +1,315 @@
+// ========================================
+// 岗位选择器组件样式（三栏联动版）
+// 全局 1rem = 100px，表单元素用固定 height 控制
+// 颜色统一使用 variables.scss 变量
+// 风格与行业选择器保持一致
+// ========================================
+@use '../variables' as *;
+
+.job-category-selector {
+  position: relative;
+  display: inline-block;
+
+  // ==================== 触发按钮 ====================
+  &__trigger {
+    display: flex;
+    align-items: center;
+    gap: 0.04rem;
+    background: $bg-main;
+    border: 1px solid $border-color;
+    border-radius: 0.2rem;
+    padding: 0.05rem 0.14rem;
+    color: $text-dark;
+    font-size: 0.12rem;
+    line-height: 1;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    max-width: 2rem;
+
+    &:hover {
+      border-color: $accent;
+      color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  // 触发按钮文字（超长省略）
+  &__display {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 1.6rem;
+  }
+
+  // 下拉箭头图标
+  &__arrow {
+    width: 0.1rem;
+    height: 0.1rem;
+    color: $text-light;
+    flex-shrink: 0;
+    transition: transform 0.2s;
+
+    &--open {
+      transform: rotate(180deg);
+    }
+  }
+
+  // ==================== 下拉面板 ====================
+  &__panel {
+    position: absolute;
+    top: calc(100% + 0.06rem);
+    left: 0;
+    width: 4.8rem;
+    background: $bg-white;
+    border: 1px solid $border-color;
+    border-radius: 0.1rem;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    padding: 0.1rem;
+  }
+
+  // ==================== 选中区（已选标签） ====================
+  &__selected-area {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.06rem;
+    margin-bottom: 0.1rem;
+    max-height: 0.8rem;
+    overflow-y: auto;
+  }
+
+  // 单个已选标签
+  &__tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.03rem;
+    height: 0.22rem;
+    background: $theme-color;
+    border: 1px solid rgba(79, 194, 201, 0.3);
+    border-radius: 0.04rem;
+    padding: 0 0.08rem;
+    font-size: 0.11rem;
+    line-height: 0.22rem;
+    color: $accent-hover;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+
+  // 标签关闭按钮
+  &__tag-close {
+    width: 0.1rem;
+    height: 0.1rem;
+    cursor: pointer;
+    color: $accent;
+    flex-shrink: 0;
+    transition: color 0.15s;
+
+    &:hover {
+      color: $danger;
+    }
+  }
+
+  // ==================== 搜索框 ====================
+  &__search-wrap {
+    margin-bottom: 0.08rem;
+  }
+
+  &__search {
+    display: block;
+    width: 100%;
+    height: 0.3rem;
+    box-sizing: border-box;
+    border: 1px solid $border-color;
+    border-radius: 0.06rem;
+    padding: 0 0.1rem;
+    font-size: 0.12rem;
+    line-height: 0.3rem;
+    color: $text-dark;
+    outline: none;
+    background: $bg-main;
+    margin: 0;
+    transition: border-color 0.2s;
+
+    &::placeholder {
+      color: $text-light;
+      line-height: 0.3rem;
+    }
+
+    &:focus {
+      border-color: $accent;
+      background: $bg-white;
+    }
+  }
+
+  // ==================== 搜索结果列表 ====================
+  &__search-results {
+    max-height: 2rem;
+    overflow-y: auto;
+    border: 1px solid $border-color;
+    border-radius: 0.06rem;
+    background: $bg-white;
+  }
+
+  // 搜索结果单行
+  &__search-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 0.3rem;
+    padding: 0 0.1rem;
+    font-size: 0.12rem;
+    line-height: 0.3rem;
+    color: $text-dark;
+    cursor: pointer;
+    transition: all 0.15s;
+
+    &:hover {
+      background: $theme-color;
+      color: $accent-hover;
+    }
+
+    & + & {
+      border-top: 1px solid $border-color;
+    }
+  }
+
+  // 搜索无结果提示
+  &__search-empty {
+    padding: 0.1rem;
+    font-size: 0.12rem;
+    line-height: 1;
+    color: $text-light;
+    text-align: center;
+  }
+
+  // 选中勾图标
+  &__check {
+    width: 0.12rem;
+    height: 0.12rem;
+    color: $accent;
+    flex-shrink: 0;
+  }
+
+  // ==================== 三栏联动选择区 ====================
+  &__columns {
+    display: flex;
+    border: 1px solid $border-color;
+    border-radius: 0.06rem;
+    overflow: hidden;
+    height: 2.4rem;
+  }
+
+  // 单栏通用样式
+  &__col {
+    overflow-y: auto;
+    height: 100%;
+
+    // 左栏：一级分类
+    &--left {
+      width: 1.2rem;
+      flex-shrink: 0;
+      border-right: 1px solid $border-color;
+      background: $bg-main;
+    }
+
+    // 中栏：二级分类
+    &--mid {
+      width: 1.4rem;
+      flex-shrink: 0;
+      border-right: 1px solid $border-color;
+      background: $bg-white;
+    }
+
+    // 右栏：三级分类（末级可选中）
+    &--right {
+      flex: 1;
+      background: $bg-white;
+    }
+  }
+
+  // 栏内每一行
+  &__col-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 0.32rem;
+    padding: 0 0.1rem;
+    font-size: 0.12rem;
+    line-height: 0.32rem;
+    color: $text-dark;
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      background: $theme-color;
+      color: $accent-hover;
+    }
+
+    // 左栏/中栏当前激活项
+    &--active {
+      background: $bg-white;
+      color: $accent;
+      font-weight: 600;
+      box-shadow: inset 3px 0 0 $accent;
+    }
+
+    // 右栏已选中项
+    &--selected {
+      color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  // 栏内空状态提示
+  &__col-empty {
+    padding: 0.2rem 0.1rem;
+    font-size: 0.12rem;
+    line-height: 1;
+    color: $text-light;
+    text-align: center;
+  }
+
+  // ==================== 底部操作按钮 ====================
+  &__actions {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.1rem;
+    gap: 0.1rem;
+  }
+
+  &__btn {
+    flex: 1;
+    height: 0.3rem;
+    border-radius: 0.06rem;
+    font-size: 0.12rem;
+    line-height: 0.3rem;
+    cursor: pointer;
+    border: 1px solid $border-color;
+    transition: all 0.2s;
+
+    &--reset {
+      background: $bg-main;
+      color: $text-dark;
+
+      &:hover {
+        border-color: $text-light;
+        color: $text-dark;
+      }
+    }
+
+    &--confirm {
+      background: $accent;
+      color: $bg-white;
+      border-color: $accent;
+
+      &:hover {
+        background: $accent-hover;
+        border-color: $accent-hover;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/components/job-goal-dialog.scss b/src/assets/styles/components/job-goal-dialog.scss
new file mode 100644
index 0000000..15ca4d5
--- /dev/null
+++ b/src/assets/styles/components/job-goal-dialog.scss
@@ -0,0 +1,145 @@
+@use '../variables' as *;
+
+.job-goal-dialog {
+  .el-dialog__header {
+    display: none;
+  }
+
+  .el-dialog__body {
+    padding: 0;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 0.12rem;
+    padding: 0.2rem 0.24rem 0.16rem;
+  }
+
+  &__close-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: $text-dark;
+    font-size: 0.16rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.04rem;
+    border-radius: 0.04rem;
+    transition: background 0.2s;
+
+    &:hover {
+      background: $bg-main;
+    }
+  }
+
+  &__title {
+    font-size: 0.16rem;
+    font-weight: 700;
+    color: $text-dark;
+  }
+
+  &__section {
+    padding: 0.12rem 0.24rem;
+  }
+
+  &__label {
+    font-size: 0.14rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin-bottom: 0.12rem;
+  }
+
+  &__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.08rem;
+    margin-bottom: 0.1rem;
+  }
+
+  &__tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.06rem;
+    background: $bg-main;
+    border: 1px solid $border-color;
+    border-radius: 0.16rem;
+    padding: 0.05rem 0.12rem;
+    font-size: 0.13rem;
+    color: $text-dark;
+  }
+
+  &__tag-close {
+    cursor: pointer;
+    font-size: 0.12rem;
+    color: $text-light;
+    transition: color 0.2s;
+
+    &:hover {
+      color: $danger;
+    }
+  }
+
+  &__select {
+    width: 100%;
+
+    .el-select__wrapper {
+      background: $bg-main;
+      border-radius: 0.08rem;
+      box-shadow: none;
+      border: 1px solid $border-color;
+    }
+  }
+
+  &__type-group {
+    display: flex;
+    gap: 0.12rem;
+  }
+
+  &__type-btn {
+    flex: 1;
+    padding: 0.1rem 0;
+    border: 1px solid $border-color;
+    border-radius: 0.2rem;
+    background: $bg-white;
+    color: $text-dark;
+    font-size: 0.13rem;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: $text-light;
+    }
+
+    &--active {
+      background: $text-light;
+      border-color: $text-light;
+      color: $bg-white;
+      font-weight: 500;
+    }
+  }
+
+  &__footer {
+    padding: 0.3rem 0.24rem 0.24rem;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__save-btn {
+    width: 60%;
+    padding: 0.12rem 0;
+    background: $btn-dark;
+    color: $bg-white;
+    border: none;
+    border-radius: 0.24rem;
+    font-size: 0.16rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+
+    &:hover {
+      background: $btn-dark-hover;
+    }
+  }
+}
diff --git a/src/assets/styles/components/job-page-header.scss b/src/assets/styles/components/job-page-header.scss
new file mode 100644
index 0000000..8046678
--- /dev/null
+++ b/src/assets/styles/components/job-page-header.scss
@@ -0,0 +1,77 @@
+@use '../variables' as *;
+
+.job-page-header {
+  margin-bottom: 0;
+
+  &__title {
+    font-size: 0.24rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin: 0 !important;
+    padding: 0;
+    line-height: 1.1;
+  }
+
+  &__subtitle {
+    font-size: 0.13rem;
+    color: $text-light;
+    margin: 0.02rem 0 0 0 !important;
+    padding: 0;
+  }
+
+  &__tabs {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.04rem;
+    margin: 0.1rem 0 0.16rem 0;
+    background: $bg-white;
+    border-radius: 0.22rem;
+    padding: 0.04rem;
+  }
+
+  &__goal-btn {
+    font-size: 0.18rem;
+    font-weight: 700;
+    color: $text-dark;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.04rem 0.16rem;
+    white-space: nowrap;
+    transition: color 0.2s;
+    margin-left: auto;
+
+    &:hover {
+      color: $accent-hover;
+    }
+  }
+
+  &__tab {
+    font-size: 0.13rem;
+    color: $text-light;
+    cursor: pointer;
+    padding: 0.06rem 0.22rem;
+    border-radius: 0.18rem;
+    transition: all 0.25s ease;
+    user-select: none;
+    font-weight: 500;
+
+    &:hover {
+      color: $text-dark;
+      background: $theme-color;
+    }
+
+    &--active {
+      background: $accent;
+      color: $bg-white;
+      font-weight: 600;
+      box-shadow: 0 0.02rem 0.08rem rgba(79, 194, 201, 0.3);
+
+      &:hover {
+        background: $accent-hover;
+        color: $bg-white;
+      }
+    }
+  }
+}
diff --git a/src/assets/styles/components/member-dialog.scss b/src/assets/styles/components/member-dialog.scss
new file mode 100644
index 0000000..510ff3e
--- /dev/null
+++ b/src/assets/styles/components/member-dialog.scss
@@ -0,0 +1,242 @@
+// 会员购买弹窗样式
+@use '../variables' as *;
+
+// 遮罩层
+.member-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: $overlay-bg;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.member-dialog {
+  background: $bg-white;
+  border-radius: 0.2rem;
+  width: 8.4rem;
+  max-height: 90vh;
+  overflow-y: auto;
+  padding: 0.36rem 0.4rem;
+  position: relative;
+  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.15);
+
+  // 关闭按钮
+  &__close {
+    position: absolute;
+    top: 0.16rem;
+    right: 0.2rem;
+    font-size: 0.18rem;
+    color: $text-light;
+    cursor: pointer;
+    transition: color 0.2s;
+    z-index: 1;
+
+    &:hover {
+      color: $text-dark;
+    }
+  }
+
+  // 顶部标语
+  &__slogan {
+    text-align: center;
+    font-size: 0.22rem;
+    font-weight: 700;
+    color: $btn-dark;
+    margin-bottom: 0.3rem;
+    letter-spacing: 0.01rem;
+  }
+
+  // ==================== 套餐卡片区域 ====================
+  &__plans {
+    display: flex;
+    gap: 0.2rem;
+    margin-bottom: 0.32rem;
+  }
+
+  &__plan-card {
+    flex: 1;
+    border: 1px solid $border-color;
+    border-radius: 0.14rem;
+    padding: 0.22rem 0.2rem;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    &:hover {
+      border-color: $accent;
+      box-shadow: 0 0.04rem 0.16rem rgba(79, 194, 201, 0.12);
+    }
+
+    // 选中态 — 中间卡片高亮
+    &--active {
+      border-color: $btn-dark;
+      background: $btn-dark;
+      color: $bg-white;
+      box-shadow: 0 0.06rem 0.24rem rgba(26, 26, 46, 0.2);
+
+      .member-dialog__plan-name,
+      .member-dialog__plan-original,
+      .member-dialog__plan-price-num,
+      .member-dialog__plan-price-unit {
+        color: $bg-white;
+      }
+
+      .member-dialog__plan-btn {
+        background: $accent;
+        color: $bg-white;
+        border-color: $accent;
+
+        &:hover {
+          background: $accent-hover;
+          border-color: $accent-hover;
+        }
+      }
+
+      .member-dialog__plan-discount {
+        background: rgba(255, 255, 255, 0.2);
+        color: $bg-white;
+      }
+    }
+  }
+
+  &__plan-name {
+    font-size: 0.15rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin-bottom: 0.06rem;
+  }
+
+  &__plan-original {
+    font-size: 0.11rem;
+    color: $text-light;
+    text-decoration: line-through;
+    margin-bottom: 0.08rem;
+  }
+
+  &__plan-price {
+    display: flex;
+    align-items: baseline;
+    gap: 0.02rem;
+    margin-bottom: 0.16rem;
+  }
+
+  &__plan-price-num {
+    font-size: 0.28rem;
+    font-weight: 700;
+    color: $text-dark;
+    line-height: 1;
+  }
+
+  &__plan-price-unit {
+    font-size: 0.12rem;
+    color: $text-dark;
+  }
+
+  &__plan-discount {
+    font-size: 0.1rem;
+    background: $theme-color;
+    color: $accent;
+    border-radius: 0.1rem;
+    padding: 0.02rem 0.08rem;
+    margin-left: 0.06rem;
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  &__plan-btn {
+    width: 100%;
+    padding: 0.1rem 0;
+    border-radius: 0.2rem;
+    font-size: 0.13rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: 1px solid $border-color;
+    background: $bg-main;
+    color: $text-dark;
+    text-align: center;
+
+    &:hover {
+      border-color: $accent;
+      color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  // ==================== 权益对比区域 ====================
+  &__benefits {
+    display: flex;
+    gap: 0.16rem;
+  }
+
+  &__benefit-col {
+    flex: 1;
+    border: 1px solid $border-color;
+    border-radius: 0.12rem;
+    padding: 0.2rem 0.18rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.14rem;
+
+    // 中间列特殊样式
+    &--center {
+      border-color: rgba(79, 194, 201, 0.3);
+      background: linear-gradient(180deg, $theme-color 0%, $bg-white 100%);
+    }
+  }
+
+  &__benefit-title {
+    font-size: 0.14rem;
+    font-weight: 600;
+    color: $text-dark;
+    padding-bottom: 0.1rem;
+    border-bottom: 1px solid $border-color;
+
+    // 会员权益标题强调色
+    &--accent {
+      color: $accent;
+      border-bottom-color: rgba(79, 194, 201, 0.3);
+    }
+  }
+
+  &__benefit-item {
+    font-size: 0.12rem;
+    color: #555;
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+    line-height: 1.6;
+  }
+
+  &__benefit-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 0.36rem;
+    height: 0.2rem;
+    background: $btn-dark;
+    color: $bg-white;
+    border-radius: 0.04rem;
+    font-size: 0.1rem;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+
+  &__benefit-other {
+    font-size: 0.12rem;
+    color: $text-light;
+    margin-top: auto;
+    padding-top: 0.12rem;
+    border-top: 1px solid $border-color;
+  }
+
+  &__benefit-highlight {
+    font-weight: 700;
+    color: $text-dark;
+    margin-left: 0.12rem;
+  }
+}
diff --git a/src/assets/styles/components/profile-edit-drawer.scss b/src/assets/styles/components/profile-edit-drawer.scss
new file mode 100644
index 0000000..55b7937
--- /dev/null
+++ b/src/assets/styles/components/profile-edit-drawer.scss
@@ -0,0 +1,498 @@
+@use '../variables' as *;
+@use 'sass:color';
+
+// ==================== 个人资料编辑抽屉 ====================
+
+// 遮罩层
+.profile-drawer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: $overlay-bg;
+  z-index: 2000;
+}
+
+// 抽屉主体 — 固定在右侧，占满屏幕高度
+// 重置 font-size + line-height 避免 html font-size:100px 导致行高撑大间距
+.profile-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 6.2rem;
+  height: 100vh;
+  background: $bg-white;
+  z-index: 2001;
+  box-shadow: -0.04rem 0 0.2rem rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  line-height: 1.5;
+
+  // 顶部栏
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+    padding: 0.16rem 0.2rem;
+    border-bottom: 1px solid $border-color;
+    flex-shrink: 0;
+  }
+
+  &__close-btn {
+    background: none;
+    border: none;
+    padding: 0.04rem;
+    cursor: pointer;
+    color: $text-dark;
+    display: flex;
+    align-items: center;
+    border-radius: 0.04rem;
+    transition: all 0.2s;
+
+    &:hover {
+      color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  &__close-icon {
+    width: 0.16rem;
+    height: 0.16rem;
+  }
+
+  &__title {
+    font-size: 0.16rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin: 0;
+  }
+
+  // 表单内容区 — 中间可滚动
+  &__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.2rem 0.2rem 3rem;
+
+    // 地区选择器下拉面板提升层级，避免被其他元素遮挡
+    .region-selector__panel {
+      z-index: 2100;
+    }
+  }
+
+  // 单个字段
+  &__field {
+    margin-bottom: 0.18rem;
+  }
+
+  &__label {
+    font-size: 0.13rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin-bottom: 0.06rem;
+  }
+
+  &__required {
+    color: $danger;
+    margin-right: 0.02rem;
+  }
+
+  &__input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0.1rem 0.14rem;
+    font-size: 0.13rem;
+    color: $text-dark;
+    background: $bg-main;
+    border: 1px solid transparent;
+    border-radius: 0.06rem;
+    outline: none;
+    transition: all 0.2s;
+
+    &::placeholder {
+      color: $text-light;
+    }
+
+    &:focus {
+      border-color: $accent;
+      background: $bg-white;
+    }
+  }
+
+  // 多行文本输入框（经历描述等）
+  &__textarea {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0.1rem 0.14rem;
+    font-size: 0.13rem;
+    color: $text-dark;
+    background: $bg-main;
+    border: 1px solid transparent;
+    border-radius: 0.06rem;
+    outline: none;
+    transition: all 0.2s;
+    resize: vertical;
+    font-family: inherit;
+    line-height: 1.6;
+
+    &::placeholder {
+      color: $text-light;
+    }
+
+    &:focus {
+      border-color: $accent;
+      background: $bg-white;
+    }
+
+    // 矮版 textarea — 用于分段描述，右侧留出删除按钮空间
+    &--short {
+      padding-right: 0.36rem;
+    }
+  }
+
+  // ==================== 描述段落编辑 ====================
+
+  // 单条描述段落容器 — textarea + 右侧删除按钮
+  &__desc-item {
+    position: relative;
+    margin-bottom: 0.08rem;
+  }
+
+  // 描述段落内的删除按钮（叉号）
+  &__desc-remove {
+    position: absolute;
+    right: 0.18rem;
+    top: 0.08rem;
+    background: none;
+    border: none;
+    padding: 0.02rem;
+    cursor: pointer;
+    color: $text-light;
+    display: flex;
+    align-items: center;
+    border-radius: 0.03rem;
+    transition: all 0.2s;
+
+    &:hover {
+      color: $danger;
+    }
+  }
+
+  &__desc-remove-icon {
+    width: 0.12rem;
+    height: 0.12rem;
+  }
+
+  // 小号新增按钮 — 用于"新增一段描述"
+  &__add-btn--small {
+    font-size: 0.11rem;
+    padding: 0.04rem 0.12rem;
+    margin-top: 0.04rem;
+    margin-bottom: 0;
+  }
+
+  // 空状态占位
+  &__empty {
+    text-align: center;
+    padding: 0.6rem 0;
+  }
+
+  &__empty-text {
+    font-size: 0.14rem;
+    color: $text-light;
+  }
+
+  // ==================== 教育经历模块 ====================
+
+  // 单条教育经历卡片
+  &__edu-card {
+    padding-bottom: 0.2rem;
+    margin-bottom: 0.2rem;
+    border-bottom: 1px solid $border-color;
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+  }
+
+  // 教育经历标题栏
+  &__edu-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.14rem;
+  }
+
+  // 序号标识
+  &__edu-index {
+    display: flex;
+    align-items: center;
+    gap: 0.06rem;
+    font-size: 0.14rem;
+    font-weight: 600;
+    color: $text-dark;
+  }
+
+  &__edu-index-icon {
+    width: 0.1rem;
+    height: 0.1rem;
+    color: $accent;
+  }
+
+  // 删除按钮
+  &__edu-delete {
+    background: none;
+    border: none;
+    padding: 0.04rem;
+    cursor: pointer;
+    color: $text-light;
+    display: flex;
+    align-items: center;
+    border-radius: 0.04rem;
+    transition: all 0.2s;
+
+    &:hover {
+      color: $danger;
+      background: rgba($danger, 0.06);
+    }
+  }
+
+  &__edu-delete-icon {
+    width: 0.15rem;
+    height: 0.15rem;
+  }
+
+  // 横排字段容器（学院+专业、学历+GPA、入学+毕业时间）
+  &__row {
+    display: flex;
+    gap: 0.12rem;
+  }
+
+  // 半宽字段
+  &__field--half {
+    flex: 1;
+    min-width: 0;
+  }
+
+  // 下拉选择器包裹（带箭头图标）
+  &__select-wrap {
+    position: relative;
+  }
+
+  &__select-wrap &__input {
+    padding-right: 0.3rem;
+  }
+
+  &__select-arrow {
+    position: absolute;
+    right: 0.1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0.12rem;
+    height: 0.12rem;
+    color: $text-light;
+    pointer-events: none;
+  }
+
+  // 新增教育经历按钮
+  &__add-btn {
+    text-align: center;
+    background: none;
+    border: 1px solid $border-color;
+    border-radius: 0.2rem;
+    padding: 0.06rem 0.16rem;
+    font-size: 0.12rem;
+    color: $text-dark;
+    cursor: pointer;
+    transition: all 0.2s;
+    margin-top: 0.04rem;
+
+    &:hover {
+      border-color: $accent;
+      color: $accent;
+    }
+  }
+
+  &__add-icon {
+    font-size: 0.14rem;
+    font-weight: 600;
+  }
+
+  // ==================== 日期选择器样式覆盖 ====================
+  // Element Plus 的 el-date-picker 在 html font-size:100px 下需要用 px 还原
+
+  &__date-picker {
+    width: 100% !important;
+
+    .el-input__wrapper {
+      background: $bg-main !important;
+      border: 1px solid transparent !important;
+      border-radius: 6px !important;
+      box-shadow: none !important;
+      padding: 4px 12px !important;
+      font-size: 13px !important;
+      line-height: 1.5 !important;
+      height: auto !important;
+
+      &:hover {
+        border-color: $border-color !important;
+      }
+
+      &.is-focus {
+        border-color: $accent !important;
+        background: $bg-white !important;
+      }
+    }
+
+    .el-input__inner {
+      font-size: 13px !important;
+      color: $text-dark !important;
+      height: auto !important;
+      line-height: 1.5 !important;
+
+      &::placeholder {
+        color: $text-light !important;
+      }
+    }
+
+    .el-input__prefix,
+    .el-input__suffix {
+      font-size: 14px !important;
+    }
+
+    .el-input__icon {
+      width: 14px !important;
+      height: 14px !important;
+      font-size: 14px !important;
+    }
+  }
+
+  // ==================== 技能模块 ====================
+
+  // 技能标签列表容器
+  &__skills-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.08rem;
+    margin-bottom: 0.2rem;
+    min-height: 0.4rem;
+  }
+
+  // 单个技能标签
+  &__skill-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.06rem;
+    padding: 0.06rem 0.1rem 0.06rem 0.14rem;
+    background: $bg-main;
+    border-radius: 0.16rem;
+    font-size: 0.13rem;
+    color: $text-dark;
+    transition: all 0.2s;
+
+    &:hover {
+      background: color.adjust($bg-main, $lightness: -3%);
+    }
+  }
+
+  // 技能标签文本
+  &__skill-text {
+    line-height: 1.4;
+  }
+
+  // 技能标签删除按钮
+  &__skill-remove {
+    background: none;
+    border: none;
+    padding: 0.02rem;
+    cursor: pointer;
+    color: $text-light;
+    display: flex;
+    align-items: center;
+    border-radius: 50%;
+    transition: all 0.2s;
+
+    &:hover {
+      color: $danger;
+      background: rgba($danger, 0.1);
+    }
+  }
+
+  &__skill-remove-icon {
+    width: 0.12rem;
+    height: 0.12rem;
+  }
+
+  // 底部保存按钮
+  &__footer {
+    padding: 0.16rem 0.2rem;
+    border-top: 1px solid $border-color;
+    text-align: center;
+    flex-shrink: 0;
+  }
+
+  &__save-btn {
+    width: 2.0rem;
+    padding: 0.1rem 0;
+    font-size: 0.14rem;
+    font-weight: 600;
+    color: $bg-white;
+    background: $btn-dark;
+    border: none;
+    border-radius: 0.24rem;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      background: $btn-dark-hover;
+    }
+  }
+}
+
+// ==================== 过渡动画 ====================
+
+// 日期选择器弹出面板样式覆盖（teleport 到 body，需在全局作用域）
+.profile-drawer-date-popper {
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+
+  .el-date-picker {
+    font-size: 14px !important;
+  }
+
+  .el-picker-panel__body {
+    font-size: 14px !important;
+  }
+
+  .el-date-picker__header {
+    font-size: 14px !important;
+  }
+
+  .el-month-table td .cell {
+    font-size: 13px !important;
+    padding: 8px 0 !important;
+  }
+}
+
+// 遮罩层淡入淡出
+.profile-drawer-overlay-enter-active,
+.profile-drawer-overlay-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.profile-drawer-overlay-enter-from,
+.profile-drawer-overlay-leave-to {
+  opacity: 0;
+}
+
+// 抽屉滑入滑出
+.profile-drawer-slide-enter-active,
+.profile-drawer-slide-leave-active {
+  transition: transform 0.3s ease;
+}
+
+.profile-drawer-slide-enter-from,
+.profile-drawer-slide-leave-to {
+  transform: translateX(100%);
+}
diff --git a/src/assets/styles/components/profile-page-content.scss b/src/assets/styles/components/profile-page-content.scss
new file mode 100644
index 0000000..4702637
--- /dev/null
+++ b/src/assets/styles/components/profile-page-content.scss
@@ -0,0 +1,165 @@
+@use '../variables' as *;
+
+.profile-page-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.16rem;
+  padding-bottom: 0.4rem;
+
+  // 卡片通用
+  &__card {
+    background: $bg-white;
+    border-radius: 0.12rem;
+    padding: 0.2rem 0.24rem;
+  }
+
+  &__card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.14rem;
+  }
+
+  &__card-title {
+    font-size: 0.16rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin: 0;
+  }
+
+  &__edit-btn {
+    background: none;
+    border: none;
+    color: $text-light;
+    cursor: pointer;
+    padding: 0.04rem;
+    border-radius: 0.04rem;
+    display: flex;
+    align-items: center;
+    transition: all 0.2s;
+
+    &:hover {
+      color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  &__edit-icon {
+    width: 0.15rem;
+    height: 0.15rem;
+  }
+
+  // 个人信息
+  &__info-name {
+    font-size: 0.18rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin-bottom: 0.12rem;
+  }
+
+  &__info-contacts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.16rem;
+    margin-bottom: 0.06rem;
+  }
+
+  &__contact-item {
+    font-size: 0.12rem;
+    color: #555;
+    display: flex;
+    align-items: center;
+    gap: 0.04rem;
+  }
+
+  // 通用 section item
+  &__section-item {
+    padding: 0.12rem 0;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid $border-color;
+    }
+  }
+
+  &__item-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  &__item-left {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__item-title {
+    font-size: 0.14rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin-bottom: 0.03rem;
+  }
+
+  &__item-sub {
+    font-size: 0.12rem;
+    color: #666;
+    margin-bottom: 0.02rem;
+  }
+
+  &__item-date {
+    font-size: 0.11rem;
+    color: $accent;
+    margin-bottom: 0.04rem;
+  }
+
+  &__item-period {
+    font-size: 0.11rem;
+    color: $text-light;
+    white-space: nowrap;
+    flex-shrink: 0;
+    margin-left: 0.12rem;
+  }
+
+  &__item-desc {
+    font-size: 0.12rem;
+    color: #666;
+    line-height: 1.6;
+    margin: 0.06rem 0 0 0;
+  }
+
+  &__item-list {
+    margin: 0.08rem 0 0 0;
+    padding-left: 0.16rem;
+    list-style: disc;
+
+    li {
+      font-size: 0.12rem;
+      color: #555;
+      line-height: 1.8;
+    }
+  }
+
+  // 标签（技能 / 证书）
+  &__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.08rem;
+  }
+
+  &__tag {
+    font-size: 0.12rem;
+    color: $text-dark;
+    background: $bg-main;
+    border: 1px solid $border-color;
+    border-radius: 0.16rem;
+    padding: 0.05rem 0.16rem;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: $accent;
+      color: $accent;
+      background: $theme-color;
+    }
+  }
+}
diff --git a/src/assets/styles/components/region-selector.scss b/src/assets/styles/components/region-selector.scss
new file mode 100644
index 0000000..23205c1
--- /dev/null
+++ b/src/assets/styles/components/region-selector.scss
@@ -0,0 +1,311 @@
+// ========================================
+// 地区选择器组件样式（分栏联动，支持二栏/三栏）
+// 全局 1rem = 100px，表单元素用固定 height 控制
+// 颜色统一使用 variables.scss 变量
+// 风格与行业/岗位选择器保持一致
+// ========================================
+@use '../variables' as *;
+
+.region-selector {
+  position: relative;
+  //display: inline-block;
+
+  // ==================== 触发按钮 ====================
+  &__trigger {
+    display: flex;
+    align-items: center;
+    gap: 0.04rem;
+    background: $bg-main;
+    border: 1px solid $border-color;
+    border-radius: 0.2rem;
+    padding: 0.05rem 0.14rem;
+    color: $text-dark;
+    font-size: 0.12rem;
+    line-height: 1;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    max-width: 2rem;
+
+    &:hover {
+      border-color: $accent;
+      color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  &__display {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 1.6rem;
+  }
+
+  &__arrow {
+    width: 0.1rem;
+    height: 0.1rem;
+    color: $text-light;
+    flex-shrink: 0;
+    transition: transform 0.2s;
+
+    &--open {
+      transform: rotate(180deg);
+    }
+  }
+
+  // ==================== 下拉面板 ====================
+  &__panel {
+    position: absolute;
+    top: calc(100% + 0.06rem);
+    left: 0;
+    width: 4.2rem;
+    background: $bg-white;
+    border: 1px solid $border-color;
+    border-radius: 0.1rem;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    padding: 0.1rem;
+
+    // level=2 时只有两栏，面板收窄
+    &--two-col {
+      width: 3rem;
+    }
+  }
+
+  // ==================== 选中区 ====================
+  &__selected-area {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.06rem;
+    margin-bottom: 0.1rem;
+    max-height: 0.8rem;
+    overflow-y: auto;
+  }
+
+  &__tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.03rem;
+    height: 0.22rem;
+    background: $theme-color;
+    border: 1px solid rgba(79, 194, 201, 0.3);
+    border-radius: 0.04rem;
+    padding: 0 0.08rem;
+    font-size: 0.11rem;
+    line-height: 0.22rem;
+    color: $accent-hover;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+
+  &__tag-close {
+    width: 0.1rem;
+    height: 0.1rem;
+    cursor: pointer;
+    color: $accent;
+    flex-shrink: 0;
+    transition: color 0.15s;
+
+    &:hover {
+      color: $danger;
+    }
+  }
+
+  // ==================== 搜索框 ====================
+  &__search-wrap {
+    margin-bottom: 0.08rem;
+  }
+
+  &__search {
+    display: block;
+    width: 100%;
+    height: 0.3rem;
+    box-sizing: border-box;
+    border: 1px solid $border-color;
+    border-radius: 0.06rem;
+    padding: 0 0.1rem;
+    font-size: 0.12rem;
+    line-height: 0.3rem;
+    color: $text-dark;
+    outline: none;
+    background: $bg-main;
+    margin: 0;
+    transition: border-color 0.2s;
+
+    &::placeholder {
+      color: $text-light;
+      line-height: 0.3rem;
+    }
+
+    &:focus {
+      border-color: $accent;
+      background: $bg-white;
+    }
+  }
+
+  // ==================== 搜索结果 ====================
+  &__search-results {
+    max-height: 2rem;
+    overflow-y: auto;
+    border: 1px solid $border-color;
+    border-radius: 0.06rem;
+    background: $bg-white;
+  }
+
+  &__search-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 0.3rem;
+    padding: 0 0.1rem;
+    font-size: 0.12rem;
+    line-height: 0.3rem;
+    color: $text-dark;
+    cursor: pointer;
+    transition: all 0.15s;
+
+    &:hover {
+      background: $theme-color;
+      color: $accent-hover;
+    }
+
+    & + & {
+      border-top: 1px solid $border-color;
+    }
+  }
+
+  &__search-empty {
+    padding: 0.1rem;
+    font-size: 0.12rem;
+    line-height: 1;
+    color: $text-light;
+    text-align: center;
+  }
+
+  &__check {
+    width: 0.12rem;
+    height: 0.12rem;
+    color: $accent;
+    flex-shrink: 0;
+  }
+
+  // ==================== 分栏联动选择区 ====================
+  &__columns {
+    display: flex;
+    border: 1px solid $border-color;
+    border-radius: 0.06rem;
+    overflow: hidden;
+    height: 2.4rem;
+  }
+
+  &__col {
+    overflow-y: auto;
+    height: 100%;
+
+    &--left {
+      width: 1.1rem;
+      flex-shrink: 0;
+      border-right: 1px solid $border-color;
+      background: $bg-main;
+    }
+
+    &--mid {
+      width: 1.2rem;
+      flex-shrink: 0;
+      border-right: 1px solid $border-color;
+      background: $bg-white;
+
+      // level=2 时中栏是最后一栏，撑满剩余空间且去掉右边框
+      &:last-child {
+        flex: 1;
+        border-right: none;
+      }
+    }
+
+    &--right {
+      flex: 1;
+      background: $bg-white;
+    }
+  }
+
+  &__col-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 0.32rem;
+    padding: 0 0.1rem;
+    font-size: 0.12rem;
+    line-height: 0.32rem;
+    color: $text-dark;
+    cursor: pointer;
+    transition: all 0.15s;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      background: $theme-color;
+      color: $accent-hover;
+    }
+
+    &--active {
+      background: $bg-white;
+      color: $accent;
+      font-weight: 600;
+      box-shadow: inset 3px 0 0 $accent;
+    }
+
+    &--selected {
+      color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  &__col-empty {
+    padding: 0.2rem 0.1rem;
+    font-size: 0.12rem;
+    line-height: 1;
+    color: $text-light;
+    text-align: center;
+  }
+
+  // ==================== 底部操作按钮 ====================
+  &__actions {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.1rem;
+    gap: 0.1rem;
+  }
+
+  &__btn {
+    flex: 1;
+    height: 0.3rem;
+    border-radius: 0.06rem;
+    font-size: 0.12rem;
+    line-height: 0.3rem;
+    cursor: pointer;
+    border: 1px solid $border-color;
+    transition: all 0.2s;
+
+    &--reset {
+      background: $bg-main;
+      color: $text-dark;
+
+      &:hover {
+        border-color: $text-light;
+        color: $text-dark;
+      }
+    }
+
+    &--confirm {
+      background: $accent;
+      color: $bg-white;
+      border-color: $accent;
+
+      &:hover {
+        background: $accent-hover;
+        border-color: $accent-hover;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/components/settings-dialog.scss b/src/assets/styles/components/settings-dialog.scss
new file mode 100644
index 0000000..6018828
--- /dev/null
+++ b/src/assets/styles/components/settings-dialog.scss
@@ -0,0 +1,451 @@
+@use '../variables' as *;
+
+// ==================== 设置弹窗 ====================
+.settings-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: $overlay-bg;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.settings-dialog {
+  position: relative;
+  width: 8.6rem;
+  height: 6.2rem;
+  background: $bg-white;
+  border-radius: 0.12rem;
+  display: flex;
+  overflow: hidden;
+  box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.15);
+
+  &__close {
+    position: absolute;
+    top: 0.12rem;
+    right: 0.16rem;
+    font-size: 0.16rem;
+    color: $text-light;
+    cursor: pointer;
+    z-index: 1;
+    transition: color 0.2s;
+
+    &:hover {
+      color: $text-dark;
+    }
+  }
+
+  // 左侧导航
+  &__sidebar {
+    width: 2.0rem;
+    background: $bg-main;
+    padding: 0.2rem 0;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  &__nav {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__nav-item {
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+    padding: 0.12rem 0.2rem;
+    font-size: 0.14rem;
+    color: $text-dark;
+    cursor: pointer;
+    transition: all 0.2s;
+    border-left: 0.03rem solid transparent;
+    font-weight: 500;
+
+    &:hover {
+      background: $bg-white;
+      color: $accent;
+    }
+
+    &--active {
+      background: $bg-white;
+      color: $accent;
+      border-left-color: $accent;
+      font-weight: 600;
+    }
+  }
+
+  &__nav-icon {
+    font-size: 0.16rem;
+    flex-shrink: 0;
+    width: 0.18rem;
+    text-align: center;
+  }
+
+  // 底部操作
+  &__bottom-actions {
+    margin-top: auto;
+    padding: 0.16rem 0.2rem 0.08rem;
+    border-top: 1px solid $border-color;
+  }
+
+  &__bottom-btn {
+    display: block;
+    width: 100%;
+    background: none;
+    border: none;
+    text-align: left;
+    padding: 0.1rem 0;
+    font-size: 0.13rem;
+    color: $text-dark;
+    font-weight: 600;
+    cursor: pointer;
+    transition: color 0.2s;
+
+    &:hover {
+      color: $accent;
+    }
+
+    &--active {
+      color: $accent;
+    }
+
+    &--danger:hover {
+      color: $danger;
+    }
+  }
+
+  // 右侧内容区
+  &__content {
+    flex: 1;
+    padding: 0.24rem 0.32rem;
+    min-width: 0;
+    overflow-y: auto;
+  }
+
+  &__content-title {
+    font-size: 0.22rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin: 0 0 0.24rem 0;
+  }
+
+  // ===== 账号与安全 =====
+  &__section {
+    margin-bottom: 0.28rem;
+  }
+
+  &__section-label {
+    font-size: 0.14rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin-bottom: 0.06rem;
+  }
+
+  &__section-value {
+    font-size: 0.16rem;
+    color: #555;
+    margin-bottom: 0;
+  }
+
+  &__danger-section {
+    margin-top: 0.32rem;
+  }
+
+  &__danger-title {
+    font-size: 0.15rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin-bottom: 0.06rem;
+  }
+
+  &__danger-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__danger-desc {
+    font-size: 0.13rem;
+    color: #666;
+    margin: 0;
+  }
+
+  &__danger-btn {
+    background: $bg-main;
+    border: 1px solid $border-color;
+    border-radius: 0.06rem;
+    padding: 0.07rem 0.16rem;
+    font-size: 0.13rem;
+    color: $text-dark;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: $danger;
+      color: $danger;
+    }
+  }
+
+  // ===== 会员 =====
+  &__member-card {
+    background: $bg-white;
+    border: 1px solid $border-color;
+    border-radius: 0.1rem;
+    padding: 0.2rem 0.24rem;
+    margin-bottom: 0.24rem;
+  }
+
+  &__member-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.1rem;
+  }
+
+  &__member-title-row {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+  }
+
+  &__member-name {
+    font-size: 0.16rem;
+    font-weight: 700;
+    color: $text-dark;
+  }
+
+  &__member-badge {
+    background: $accent;
+    color: $bg-white;
+    font-size: 0.11rem;
+    padding: 0.02rem 0.08rem;
+    border-radius: 0.1rem;
+  }
+
+  &__member-terms {
+    font-size: 0.12rem;
+    color: $accent;
+    cursor: pointer;
+    text-decoration: underline;
+
+    &:hover {
+      color: $accent-hover;
+    }
+  }
+
+  &__member-info-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__member-price {
+    font-size: 0.13rem;
+    color: #555;
+
+    span {
+      margin-left: 0.12rem;
+      color: $text-light;
+    }
+  }
+
+  &__member-manage-btn {
+    background: $bg-main;
+    border: 1px solid $border-color;
+    border-radius: 0.06rem;
+    padding: 0.07rem 0.16rem;
+    font-size: 0.13rem;
+    color: $text-dark;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: $accent;
+      color: $accent;
+    }
+  }
+
+  &__member-issue {
+    text-align: center;
+    padding: 0.2rem 0;
+  }
+
+  &__member-issue-title {
+    font-size: 0.15rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin-bottom: 0.1rem;
+  }
+
+  &__member-issue-desc {
+    font-size: 0.12rem;
+    color: #666;
+    line-height: 1.8;
+    margin-bottom: 0.16rem;
+    max-width: 5.0rem;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &__member-issue-actions {
+    display: flex;
+    justify-content: center;
+    gap: 0.16rem;
+  }
+
+  &__member-issue-btn {
+    background: $bg-white;
+    border: 1px solid $border-color;
+    border-radius: 0.06rem;
+    padding: 0.08rem 0.24rem;
+    font-size: 0.13rem;
+    color: $text-dark;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: $accent;
+      color: $accent;
+    }
+  }
+
+  // ===== 岗位更新提醒 =====
+  &__reminder-block {
+    margin-bottom: 0.28rem;
+  }
+
+  &__reminder-block-title {
+    font-size: 0.16rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin-bottom: 0.14rem;
+  }
+
+  &__reminder-target {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__reminder-tags {
+    display: flex;
+    gap: 0.1rem;
+    flex-wrap: wrap;
+  }
+
+  &__reminder-tag {
+    display: inline-block;
+    padding: 0.06rem 0.16rem;
+    font-size: 0.13rem;
+    color: $text-dark;
+    background: $bg-main;
+    border: 1px solid $border-color;
+    border-radius: 0.04rem;
+    font-weight: 500;
+  }
+
+  &__reminder-edit-btn {
+    background: $bg-white;
+    border: 1px solid $border-color;
+    border-radius: 0.06rem;
+    padding: 0.07rem 0.2rem;
+    font-size: 0.13rem;
+    color: $text-dark;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+
+    &:hover {
+      border-color: $accent;
+      color: $accent;
+    }
+  }
+
+  &__reminder-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.2rem;
+  }
+
+  &__reminder-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__reminder-label {
+    font-size: 0.14rem;
+    color: $text-dark;
+    font-weight: 600;
+    margin-bottom: 0.06rem;
+  }
+
+  &__reminder-desc {
+    font-size: 0.13rem;
+    color: #666;
+    line-height: 1.6;
+  }
+
+  // ===== 弹窗 =====
+  &__dialog-content {
+    font-size: 0.13rem;
+    color: #555;
+    line-height: 1.8;
+    max-height: 4.0rem;
+    overflow-y: auto;
+    padding: 0.1rem 0;
+  }
+
+  &__dialog-section {
+    margin-bottom: 0.16rem;
+
+    h4 {
+      font-size: 0.14rem;
+      color: $text-dark;
+      margin: 0 0 0.06rem 0;
+    }
+
+    p {
+      margin: 0;
+      font-size: 0.12rem;
+      color: #666;
+      line-height: 1.8;
+    }
+  }
+
+  // ===== 隐私协议 =====
+  &__privacy-content {
+    font-size: 0.13rem;
+    color: #555;
+    line-height: 1.8;
+  }
+
+  &__privacy-section {
+    margin-bottom: 0.2rem;
+
+    h4 {
+      font-size: 0.15rem;
+      font-weight: 700;
+      color: $text-dark;
+      margin: 0 0 0.1rem 0;
+    }
+
+    p {
+      margin: 0 0 0.08rem 0;
+      font-size: 0.13rem;
+      color: #555;
+      line-height: 1.8;
+      text-align: justify;
+    }
+  }
+}
diff --git a/src/assets/styles/components/side-nav.scss b/src/assets/styles/components/side-nav.scss
new file mode 100644
index 0000000..1c6bdf1
--- /dev/null
+++ b/src/assets/styles/components/side-nav.scss
@@ -0,0 +1,257 @@
+@use '../variables' as *;
+
+.side-nav {
+  display: flex;
+  flex-direction: column;
+  width: 2rem;
+  height: 100vh;
+  background: #1a1a2e;
+  color: #fff;
+  padding: 0.2rem 0.12rem;
+  box-sizing: border-box;
+  position: fixed;
+  left: 0;
+  top: 0;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+    padding: 0.1rem 0.08rem;
+    margin-bottom: 0.2rem;
+  }
+
+  &__avatar {
+    width: 0.36rem;
+    height: 0.36rem;
+    border-radius: 50%;
+    background: #2e3142;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.18rem;
+  }
+
+  &__logo-text {
+    font-size: 0.16rem;
+    font-weight: 600;
+    color: #fff;
+  }
+
+  &__menu {
+    display: flex;
+    flex-direction: column;
+    gap: 0.04rem;
+    flex: 1;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+    padding: 0.1rem 0.12rem;
+    border-radius: 0.14rem;
+    color: #9598ab;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.2s, color 0.2s;
+    font-size: 0.14rem;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.05);
+      color: #fff;
+    }
+
+    &--active {
+      background: #1F2937;
+      color: #fff;
+    }
+  }
+
+  &__item-icon {
+    width: 0.2rem;
+    height: 0.2rem;
+    object-fit: contain;
+  }
+
+  &__item-label {
+    flex: 1;
+  }
+
+  &__badge {
+    background: #e85635;
+    color: #fff;
+    font-size: 0.1rem;
+    padding: 0.02rem 0.06rem;
+    border-radius: 0.2rem;
+    font-weight: 600;
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    gap: 0.04rem;
+    border-top: 1px solid #2e3142;
+    padding-top: 0.12rem;
+  }
+}
+
+.side-nav__dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: $overlay-bg;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.side-nav__dialog {
+  background: $bg-white;
+  border-radius: 0.12rem;
+  width: 4rem;
+  max-width: 90vw;
+  box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.15);
+}
+
+.side-nav__dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.16rem 0.2rem;
+  border-bottom: 1px solid $border-color;
+  font-size: 0.16rem;
+  font-weight: 600;
+  color: $text-dark;
+}
+
+.side-nav__dialog-close {
+  cursor: pointer;
+  color: $text-light;
+  font-size: 0.16rem;
+
+  &:hover {
+    color: $text-dark;
+  }
+}
+
+.side-nav__dialog-body {
+  padding: 0.2rem;
+  font-size: 0.14rem;
+  color: $text-dark;
+}
+
+// 反馈弹窗
+.feedback-dialog {
+  padding: 0.28rem 0.24rem;
+  width: 4.83rem;
+
+  &__title {
+    font-size: 0.2rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin-bottom: 0.24rem;
+  }
+
+  &__section {
+    margin-bottom: 0.2rem;
+  }
+
+  &__label {
+    font-size: 0.14rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin-bottom: 0.12rem;
+  }
+
+  &__options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.08rem;
+  }
+
+  &__option {
+    padding: 0.08rem 0.16rem;
+    background: $bg-main;
+    border-radius: 0.08rem;
+    font-size: 0.14rem;
+    color: $text-dark;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: 1px solid transparent;
+
+    &:hover {
+      background: $theme-color;
+      border-color: $accent;
+    }
+
+    &--active {
+      background: $theme-color;
+      border-color: $accent;
+      color: $accent-hover;
+    }
+  }
+
+  &__textarea {
+    width: 100%;
+    padding: 0.12rem 0.14rem;
+    background: $bg-main;
+    border: 1px solid transparent;
+    border-radius: 0.08rem;
+    font-size: 0.13rem;
+    color: $text-dark;
+    resize: none;
+    outline: none;
+    box-sizing: border-box;
+    font-family: inherit;
+    transition: border-color 0.2s;
+
+    &::placeholder {
+      color: $text-light;
+    }
+
+    &:focus {
+      border-color: $accent;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    gap: 0.12rem;
+    margin-top: 0.24rem;
+  }
+
+  &__btn {
+    flex: 1;
+    padding: 0.12rem 0;
+    border-radius: 0.24rem;
+    font-size: 0.14rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: 1px solid $border-color;
+
+    &--cancel {
+      background: $bg-white;
+      color: $text-dark;
+
+      &:hover {
+        background: $bg-main;
+      }
+    }
+
+    &--submit {
+      background: $btn-dark;
+      color: $bg-white;
+      border-color: $btn-dark;
+
+      &:hover {
+        background: $btn-dark-hover;
+        border-color: $btn-dark-hover;
+      }
+    }
+  }
+}
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
new file mode 100644
index 0000000..0e60222
--- /dev/null
+++ b/src/assets/styles/index.scss
@@ -0,0 +1,55 @@
+// 样式统一入口文件
+
+// 页面样式
+@use './pages/home.scss';
+@use './pages/agent.scss';
+@use './pages/jobs.scss';
+@use './pages/resume.scss';
+@use './pages/resume-detail.scss';
+@use './pages/job-detail.scss';
+@use './pages/profile.scss';
+@use './pages/login.scss';
+
+// 组件样式
+@use './components/hello-world.scss';
+@use './components/side-nav.scss';
+@use './components/ai-chat.scss';
+@use './components/job-page-header.scss';
+@use './components/job-goal-dialog.scss';
+@use './components/settings-dialog.scss';
+@use './components/member-dialog.scss';
+@use './components/profile-edit-drawer.scss';
+@use './components/industry-selector.scss';
+@use './components/job-category-selector.scss';
+@use './components/region-selector.scss';
+
+// 全局样式（优先级最高）
+@use './auto.scss';
+
+// ==================== Element Plus 组件 rem 适配修正 ====================
+// 项目 html font-size: 100px，导致 Element Plus 内部 rem 单位被放大
+// 以下对常用弹出类组件强制使用 px 单位还原正常尺寸
+
+// ElMessage 提示条
+.el-message {
+  font-size: 14px !important;
+  padding: 10px 16px !important;
+  min-width: 300px !important;
+  border-radius: 8px !important;
+
+  .el-message__icon {
+    font-size: 16px !important;
+    margin-right: 8px !important;
+    width: 16px !important;
+    height: 16px !important;
+  }
+
+  .el-message__content {
+    font-size: 14px !important;
+    line-height: 1.4 !important;
+  }
+
+  .el-message__closeBtn {
+    font-size: 14px !important;
+  }
+}
diff --git a/src/assets/styles/pages/agent.scss b/src/assets/styles/pages/agent.scss
new file mode 100644
index 0000000..f866feb
--- /dev/null
+++ b/src/assets/styles/pages/agent.scss
@@ -0,0 +1,248 @@
+@use '../variables' as *;
+
+// ==================== 求职助手页面样式 ====================
+.agent-page {
+  min-height: 100vh;
+  background: $bg-main;
+
+  // 主内容区域（左侧导航栏右边的部分）
+  &__content {
+    margin-left: 2rem;
+    flex: 1;
+    padding: 0.3rem 0.4rem;
+    overflow-y: auto;
+    height: 100vh;
+    box-sizing: border-box;
+  }
+
+  // ==================== 顶部步骤导航条 ====================
+  &__steps {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.06rem;
+    margin-bottom: 0.36rem;
+  }
+
+  // 单个步骤项
+  &__step {
+    display: flex;
+    align-items: center;
+    gap: 0.06rem;
+    padding: 0.06rem 0.14rem;
+    border-radius: 0.2rem;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    user-select: none;
+
+    // 激活态 — 深色背景白色文字
+    &--active {
+      background: $text-dark;
+
+      .agent-page__step-number {
+        background: $bg-white;
+        color: $text-dark;
+      }
+
+      .agent-page__step-label {
+        color: $bg-white;
+      }
+    }
+  }
+
+  // 步骤序号圆圈
+  &__step-number {
+    width: 0.22rem;
+    height: 0.22rem;
+    border-radius: 50%;
+    background: $text-light;
+    color: $bg-white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.12rem;
+    font-weight: 600;
+    flex-shrink: 0;
+    line-height: 1;
+    transition: all 0.25s ease;
+  }
+
+  // 步骤文字标签
+  &__step-label {
+    font-size: 0.13rem;
+    color: $text-light;
+    white-space: nowrap;
+    transition: all 0.25s ease;
+  }
+
+  // 步骤间分隔箭头
+  &__step-arrow {
+    display: flex;
+    align-items: center;
+    color: $text-light;
+
+    svg {
+      width: 0.14rem;
+      height: 0.14rem;
+    }
+  }
+
+  // ==================== 主体内容区域 — 左右两栏 ====================
+  &__main {
+    display: flex;
+    gap: 0.24rem;
+    align-items: flex-start;
+  }
+
+  // 左侧说明引导区域
+  &__left {
+    width: 4.2rem;
+    flex-shrink: 0;
+  }
+
+  // 右侧个人档案区域
+  &__right {
+    flex: 1;
+    min-width: 0;
+  }
+
+  // ==================== 左侧引导卡片 ====================
+  &__intro-card {
+    background: $bg-white;
+    border-radius: 0.12rem;
+    padding: 0.3rem;
+  }
+
+  // 卡片头部：图标 + 标题
+  &__intro-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.12rem;
+    margin-bottom: 0.2rem;
+  }
+
+  // 用户图标
+  &__intro-icon {
+    width: 0.28rem;
+    height: 0.28rem;
+    flex-shrink: 0;
+    color: $text-dark;
+    margin-top: 0.02rem;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // 引导标题
+  &__intro-title {
+    font-size: 0.16rem;
+    font-weight: 700;
+    color: $text-dark;
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  // 说明描述文字
+  &__intro-desc {
+    font-size: 0.13rem;
+    color: $text-light;
+    line-height: 1.7;
+    margin-bottom: 0.28rem;
+    padding-left: 0.4rem;
+  }
+
+  // 导入个人资料行
+  &__import-row {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+    padding: 0.14rem 0.16rem;
+    background: $bg-main;
+    border-radius: 0.08rem;
+    margin-bottom: 0.28rem;
+    margin-left: 0.4rem;
+  }
+
+  // 导入图标
+  &__import-icon {
+    width: 0.18rem;
+    height: 0.18rem;
+    color: $text-dark;
+    flex-shrink: 0;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // 导入文字
+  &__import-text {
+    font-size: 0.13rem;
+    color: $text-dark;
+    font-weight: 500;
+  }
+
+  // 确认并进入按钮
+  &__confirm-btn {
+    display: block;
+    width: 2rem;
+    height: 0.42rem;
+    margin-left: 0.4rem;
+    background: $text-dark;
+    color: $bg-white;
+    border: none;
+    border-radius: 0.21rem;
+    font-size: 0.14rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.25s ease;
+    line-height: 0.42rem;
+    text-align: center;
+    padding: 0;
+
+    &:hover {
+      background: $btn-dark-hover;
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+
+  // ==================== 右侧个人档案包裹 ====================
+  &__profile-wrapper {
+    background: $bg-main;
+    border-radius: 0.12rem;
+    border: 1px solid $border-color;
+    padding: 0.24rem;
+    max-height: calc(100vh - 1.4rem);
+    overflow-y: auto;
+
+    // 自定义滚动条
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: $border-color;
+      border-radius: 2px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+  }
+
+  // 个人档案标题
+  &__profile-title {
+    font-size: 0.15rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin-bottom: 0.16rem;
+    padding-bottom: 0.12rem;
+    border-bottom: 1px solid $border-color;
+  }
+}
diff --git a/src/assets/styles/pages/agent.scss.bak b/src/assets/styles/pages/agent.scss.bak
new file mode 100644
index 0000000..e69090b
--- /dev/null
+++ b/src/assets/styles/pages/agent.scss.bak
@@ -0,0 +1,1120 @@
+@use '../variables' as *;
+
+// Agent 页面样式
+.agent-page {
+  min-height: 100vh;
+  background: $bg-main;
+
+  // 主内容区域
+  &__content {
+    margin-left: 2rem;
+    flex: 1;
+    padding: 0.4rem 0.6rem;
+  }
+
+  // ==================== 顶部步骤导航 ====================
+  &__steps {
+    display: flex;
+    align-items: center;
+    gap: 0.12rem;
+    margin-bottom: 0.4rem;
+  }
+
+  &__step {
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+    padding: 0.08rem 0.16rem;
+    border-radius: 0.2rem;
+    background: $bg-white;
+    transition: all 0.3s ease;
+    cursor: pointer;
+
+    // 激活状态
+    &--active {
+      background: $text-dark;
+
+      .agent-page__step-number {
+        background: $bg-white;
+        color: $text-dark;
+      }
+
+      .agent-page__step-label {
+        color: $bg-white;
+      }
+    }
+  }
+
+  &__step-number {
+    width: 0.24rem;
+    height: 0.24rem;
+    border-radius: 50%;
+    background: $text-light;
+    color: $bg-white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.14rem;
+    font-weight: 500;
+    transition: all 0.3s ease;
+  }
+
+  &__step-label {
+    font-size: 0.14rem;
+    color: $text-dark;
+    white-space: nowrap;
+    transition: all 0.3s ease;
+  }
+
+  // 步骤之间的箭头
+  &__step-arrow {
+    width: 0.16rem;
+    height: 0.16rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $text-light;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // ==================== 主体内容区域 ====================
+  &__main {
+    display: flex;
+    gap: 0.24rem;
+    align-items: flex-start;
+  }
+
+  // 左侧说明区域
+  &__left {
+    width: 4.6rem;
+    flex-shrink: 0;
+  }
+
+  // 右侧个人档案区域
+  &__right {
+    flex: 1;
+    min-width: 0;
+  }
+
+  // ==================== 第2步：确认目标岗位 ====================
+  &__step2 {
+    max-width: 7.5rem;
+    margin: 0 auto;
+  }
+
+  // 对话卡片
+  &__chat-card {
+    background: $bg-white;
+    border-radius: 0.16rem;
+    padding: 0.24rem;
+    margin-bottom: 0.24rem;
+    display: flex;
+    gap: 0.16rem;
+  }
+
+  &__chat-avatar {
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 50%;
+    background: $theme-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.2rem;
+    flex-shrink: 0;
+  }
+
+  &__chat-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__chat-title {
+    font-size: 0.16rem;
+    font-weight: 600;
+    color: $text-dark;
+    line-height: 1.5;
+    margin-bottom: 0.16rem;
+  }
+
+  &__chat-body {
+    background: $bg-main;
+    border-radius: 0.12rem;
+    padding: 0.2rem;
+  }
+
+  &__chat-desc {
+    font-size: 0.14rem;
+    color: $text-light;
+    line-height: 1.6;
+    margin-bottom: 0.16rem;
+  }
+
+  // 标签组
+  &__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.12rem;
+    margin-bottom: 0.2rem;
+  }
+
+  &__tag {
+    padding: 0.08rem 0.16rem;
+    background: $bg-white;
+    border: 0.01rem solid $border-color;
+    border-radius: 0.2rem;
+    font-size: 0.14rem;
+    color: $text-dark;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      border-color: $accent;
+      background: $theme-color;
+    }
+
+    &--active {
+      background: $text-light;
+      border-color: $text-light;
+      color: $bg-white;
+    }
+  }
+
+  // 对话操作按钮组
+  &__chat-actions {
+    display: flex;
+    gap: 0.12rem;
+  }
+
+  // 按钮样式
+  &__btn {
+    height: 0.4rem;
+    padding: 0 0.24rem;
+    border: none;
+    border-radius: 0.08rem;
+    font-size: 0.14rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+
+    &:active {
+      transform: scale(0.98);
+    }
+
+    // 次要按钮
+    &--secondary {
+      background: $bg-white;
+      color: $text-dark;
+      border: 0.01rem solid $border-color;
+
+      &:hover {
+        border-color: $text-dark;
+      }
+    }
+
+    // 主要按钮
+    &--primary {
+      background: $text-dark;
+      color: $bg-white;
+
+      &:hover {
+        background: $btn-dark-hover;
+      }
+    }
+
+    // 全宽按钮
+    &--full {
+      width: 100%;
+    }
+  }
+
+  // 岗位列表
+  &__job-list {
+    margin-bottom: 0.2rem;
+  }
+
+  &__job-item {
+    display: flex;
+    align-items: center;
+    gap: 0.16rem;
+    padding: 0.16rem;
+    background: $bg-white;
+    border-radius: 0.12rem;
+    margin-bottom: 0.12rem;
+    transition: all 0.3s ease;
+
+    &:hover {
+      box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  &__job-icon {
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 0.08rem;
+    background: $theme-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.2rem;
+    flex-shrink: 0;
+  }
+
+  &__job-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__job-title {
+    font-size: 0.16rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin-bottom: 0.04rem;
+  }
+
+  &__job-company {
+    font-size: 0.14rem;
+    color: $text-light;
+    margin-bottom: 0.08rem;
+  }
+
+  &__job-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.08rem;
+  }
+
+  &__job-tag {
+    padding: 0.04rem 0.08rem;
+    background: $bg-main;
+    border-radius: 0.04rem;
+    font-size: 0.12rem;
+    color: $text-light;
+  }
+
+  // 匹配度圆环
+  &__job-match {
+    flex-shrink: 0;
+  }
+
+  &__job-match-circle {
+    width: 0.5rem;
+    height: 0.5rem;
+    position: relative;
+  }
+
+  &__job-match-svg {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+  }
+
+  &__job-match-bg {
+    fill: none;
+    stroke: $bg-main;
+    stroke-width: 3;
+  }
+
+  &__job-match-progress {
+    fill: none;
+    stroke: $accent;
+    stroke-width: 3;
+    stroke-linecap: round;
+  }
+
+  &__job-match-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 0.14rem;
+    font-weight: 600;
+    color: $text-dark;
+  }
+
+  // 岗位操作按钮
+  &__job-actions {
+    display: flex;
+    gap: 0.08rem;
+    flex-shrink: 0;
+  }
+
+  &__job-action-btn {
+    width: 0.32rem;
+    height: 0.32rem;
+    border: 0.01rem solid $border-color;
+    border-radius: 0.08rem;
+    background: $bg-white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    svg {
+      width: 0.2rem;
+      height: 0.2rem;
+      stroke: $text-light;
+    }
+
+    &:hover {
+      border-color: $accent;
+      background: $theme-color;
+
+      svg {
+        stroke: $accent;
+      }
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+
+  // 输入框
+  &__chat-input {
+    margin-bottom: 0.16rem;
+  }
+
+  &__input {
+    width: 100%;
+    height: 0.4rem;
+    padding: 0 0.16rem;
+    border: 0.01rem solid $border-color;
+    border-radius: 0.08rem;
+    font-size: 0.14rem;
+    color: $text-dark;
+    background: $bg-white;
+    transition: all 0.3s ease;
+
+    &::placeholder {
+      color: $text-light;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: $accent;
+    }
+  }
+
+  // ==================== 准备阶段说明卡片 ====================
+  &__intro {
+    background: $bg-white;
+    border-radius: 0.16rem;
+    padding: 0.32rem;
+  }
+
+  &__intro-icon {
+    width: 0.48rem;
+    height: 0.48rem;
+    border-radius: 50%;
+    background: $theme-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.24rem;
+    margin-bottom: 0.24rem;
+  }
+
+  &__intro-title {
+    font-size: 0.2rem;
+    font-weight: 600;
+    color: $text-dark;
+    line-height: 1.4;
+    margin-bottom: 0.16rem;
+  }
+
+  &__intro-desc {
+    font-size: 0.14rem;
+    color: $text-light;
+    line-height: 1.6;
+    margin-bottom: 0.32rem;
+  }
+
+  &__intro-action {
+    display: flex;
+    gap: 0.16rem;
+  }
+
+  // 上传框
+  &__upload-box {
+    flex: 1;
+    height: 0.48rem;
+    border: 0.01rem dashed $border-color;
+    border-radius: 0.08rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.08rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      border-color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  &__upload-icon {
+    font-size: 0.18rem;
+  }
+
+  &__upload-text {
+    font-size: 0.14rem;
+    color: $text-dark;
+  }
+
+  // 下一步按钮
+  &__next-btn {
+    height: 0.48rem;
+    padding: 0 0.32rem;
+    background: $text-dark;
+    color: $bg-white;
+    border: none;
+    border-radius: 0.08rem;
+    font-size: 0.14rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+
+    &:hover {
+      background: $btn-dark-hover;
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+
+  // ==================== 第3步：爱好与方向 ====================
+  &__step3 {
+    display: flex;
+    gap: 0.24rem;
+  }
+
+  &__step3-left {
+    width: 4.8rem;
+    flex-shrink: 0;
+  }
+
+  &__step3-right {
+    flex: 1;
+    min-width: 0;
+  }
+
+  // 文件框
+  &__file-box {
+    display: flex;
+    align-items: center;
+    gap: 0.12rem;
+    padding: 0.12rem 0.16rem;
+    background: $bg-white;
+    border: 0.01rem solid $border-color;
+    border-radius: 0.08rem;
+    margin-bottom: 0.16rem;
+  }
+
+  &__file-icon {
+    font-size: 0.2rem;
+  }
+
+  &__file-name {
+    font-size: 0.14rem;
+    color: $text-dark;
+  }
+
+  // 技能评分区域
+  &__skill-section {
+    margin-bottom: 0.24rem;
+  }
+
+  &__skill-title {
+    font-size: 0.14rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin-bottom: 0.16rem;
+  }
+
+  &__skill-row {
+    margin-bottom: 0.16rem;
+  }
+
+  &__skill-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.08rem;
+  }
+
+  &__skill-name {
+    font-size: 0.14rem;
+    color: $text-dark;
+  }
+
+  &__skill-value {
+    font-size: 0.14rem;
+    font-weight: 600;
+    color: $text-dark;
+  }
+
+  &__skill-bar-wrapper {
+    width: 100%;
+  }
+
+  &__skill-range {
+    width: 100%;
+    height: 0.06rem;
+    -webkit-appearance: none;
+    appearance: none;
+    background: $border-color;
+    border-radius: 0.03rem;
+    outline: none;
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 0.18rem;
+      height: 0.18rem;
+      border-radius: 50%;
+      background: $accent;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+
+    &::-moz-range-thumb {
+      width: 0.18rem;
+      height: 0.18rem;
+      border-radius: 50%;
+      background: $accent;
+      cursor: pointer;
+      border: none;
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+  }
+
+  // 家庭情况
+  &__family-section {
+    margin-bottom: 0.2rem;
+  }
+
+  &__family-hint {
+    font-size: 0.13rem;
+    color: $text-light;
+    line-height: 1.6;
+    margin-bottom: 0.12rem;
+  }
+
+  &__family-radios {
+    display: flex;
+    gap: 0.12rem;
+  }
+
+  &__radio-item {
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.08rem;
+    padding: 0.12rem;
+    background: $bg-white;
+    border: 0.01rem solid $border-color;
+    border-radius: 0.08rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      border-color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  &__radio-input {
+    margin-top: 0.02rem;
+    flex-shrink: 0;
+  }
+
+  &__radio-text {
+    font-size: 0.13rem;
+    color: $text-dark;
+    line-height: 1.5;
+  }
+
+  // 竞争力报告
+  &__report {
+    background: $bg-white;
+    border-radius: 0.16rem;
+    padding: 0.32rem;
+  }
+
+  &__report-header {
+    text-align: center;
+    margin-bottom: 0.32rem;
+  }
+
+  &__report-title {
+    font-size: 0.18rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin-bottom: 0.08rem;
+  }
+
+  &__report-desc {
+    font-size: 0.13rem;
+    color: $text-light;
+  }
+
+  // 圆环进度
+  &__report-circle-wrapper {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 0.32rem;
+  }
+
+  &__report-circle {
+    width: 1.8rem;
+    height: 1.8rem;
+    position: relative;
+  }
+
+  &__circle-svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__circle-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+
+  &__circle-percent {
+    font-size: 0.36rem;
+    font-weight: 700;
+    color: $text-dark;
+    line-height: 1;
+    margin-bottom: 0.08rem;
+  }
+
+  &__circle-label {
+    font-size: 0.14rem;
+    color: $text-light;
+  }
+
+  // 报告区块
+  &__report-block {
+    margin-bottom: 0.32rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__block-title {
+    font-size: 0.15rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin-bottom: 0.16rem;
+  }
+
+  // 分析网格
+  &__analysis-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.16rem;
+  }
+
+  &__analysis-item {
+    // 每个分析项
+  }
+
+  &__analysis-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.08rem;
+  }
+
+  &__analysis-name {
+    font-size: 0.13rem;
+    color: $text-dark;
+  }
+
+  &__analysis-percent {
+    font-size: 0.13rem;
+    font-weight: 600;
+    color: $text-dark;
+
+    &--danger {
+      color: $danger;
+    }
+  }
+
+  &__analysis-bar {
+    height: 0.08rem;
+    background: $bg-main;
+    border-radius: 0.04rem;
+    overflow: hidden;
+  }
+
+  &__analysis-fill {
+    height: 100%;
+    background: $accent;
+    border-radius: 0.04rem;
+    transition: width 0.6s ease;
+
+    &--danger {
+      background: $danger;
+    }
+  }
+
+  // 建议标签
+  &__suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.08rem;
+  }
+
+  &__suggestion-tag {
+    display: flex;
+    align-items: center;
+    gap: 0.06rem;
+    padding: 0.06rem 0.12rem;
+    background: $bg-main;
+    border-radius: 0.16rem;
+    font-size: 0.13rem;
+
+    &--checked {
+      .agent-page__suggestion-icon {
+        color: $accent;
+      }
+    }
+  }
+
+  &__suggestion-icon {
+    font-size: 0.12rem;
+    color: $text-light;
+  }
+
+  &__suggestion-text {
+    color: $text-dark;
+  }
+}
+
+  // ==================== 第2步：确认目标岗位 ====================
+  &__step2 {
+    max-width: 7.5rem;
+    margin: 0 auto;
+  }
+
+  // 对话卡片
+  &__dialog-card {
+    background: $bg-white;
+    border-radius: 0.16rem;
+    padding: 0.24rem;
+    margin-bottom: 0.24rem;
+    display: flex;
+    gap: 0.16rem;
+  }
+
+  &__dialog-avatar {
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 50%;
+    background: $theme-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.2rem;
+    flex-shrink: 0;
+  }
+
+  &__dialog-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__dialog-title {
+    font-size: 0.16rem;
+    font-weight: 600;
+    color: $text-dark;
+    line-height: 1.5;
+    margin-bottom: 0.16rem;
+  }
+
+  &__dialog-body {
+    background: $bg-main;
+    border-radius: 0.12rem;
+    padding: 0.2rem;
+  }
+
+  &__dialog-hint {
+    font-size: 0.14rem;
+    color: $text-light;
+    line-height: 1.6;
+    margin-bottom: 0.16rem;
+  }
+
+  // 标签列表
+  &__tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.12rem;
+    margin-bottom: 0.2rem;
+  }
+
+  &__tag-item {
+    padding: 0.08rem 0.16rem;
+    background: $bg-white;
+    border: 0.01rem solid $border-color;
+    border-radius: 0.2rem;
+    font-size: 0.14rem;
+    color: $text-dark;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      border-color: $accent;
+      background: $theme-color;
+    }
+
+    &--active {
+      background: $text-light;
+      border-color: $text-light;
+      color: $bg-white;
+    }
+  }
+
+  // 对话操作按钮
+  &__dialog-actions {
+    display: flex;
+    gap: 0.12rem;
+  }
+
+  &__action-btn {
+    height: 0.4rem;
+    padding: 0 0.24rem;
+    border: none;
+    border-radius: 0.08rem;
+    font-size: 0.14rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+
+    &:active {
+      transform: scale(0.98);
+    }
+
+    // 次要按钮
+    &--secondary {
+      background: $bg-white;
+      color: $text-dark;
+      border: 0.01rem solid $border-color;
+
+      &:hover {
+        border-color: $text-dark;
+      }
+    }
+
+    // 主要按钮
+    &--primary {
+      background: $text-dark;
+      color: $bg-white;
+
+      &:hover {
+        background: $btn-dark-hover;
+      }
+    }
+
+    // 全宽按钮
+    &--full {
+      width: 100%;
+    }
+  }
+
+  // 岗位列表
+  &__position-list {
+    margin-bottom: 0.2rem;
+  }
+
+  &__position-item {
+    display: flex;
+    align-items: center;
+    gap: 0.16rem;
+    padding: 0.16rem;
+    background: $bg-white;
+    border-radius: 0.12rem;
+    margin-bottom: 0.12rem;
+    transition: all 0.3s ease;
+
+    &:hover {
+      box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.08);
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__position-icon {
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 0.08rem;
+    background: $theme-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.2rem;
+    flex-shrink: 0;
+  }
+
+  &__position-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__position-name {
+    font-size: 0.16rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin-bottom: 0.04rem;
+  }
+
+  &__position-company {
+    font-size: 0.14rem;
+    color: $text-light;
+    margin-bottom: 0.08rem;
+  }
+
+  &__position-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.08rem;
+  }
+
+  &__position-tag {
+    padding: 0.04rem 0.08rem;
+    background: $bg-main;
+    border-radius: 0.04rem;
+    font-size: 0.12rem;
+    color: $text-light;
+  }
+
+  // 匹配度圆环
+  &__position-match {
+    width: 0.5rem;
+    height: 0.5rem;
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  &__match-circle {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+  }
+
+  &__match-bg {
+    fill: none;
+    stroke: $bg-main;
+    stroke-width: 3;
+  }
+
+  &__match-progress {
+    fill: none;
+    stroke: $accent;
+    stroke-width: 3;
+    stroke-linecap: round;
+  }
+
+  &__match-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 0.14rem;
+    font-weight: 600;
+    color: $text-dark;
+  }
+
+  // 岗位操作按钮
+  &__position-actions {
+    display: flex;
+    gap: 0.08rem;
+    flex-shrink: 0;
+  }
+
+  &__position-btn {
+    width: 0.32rem;
+    height: 0.32rem;
+    border: 0.01rem solid $border-color;
+    border-radius: 0.08rem;
+    background: $bg-white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    padding: 0;
+
+    svg {
+      width: 0.2rem;
+      height: 0.2rem;
+      stroke: $text-light;
+    }
+
+    &:hover {
+      border-color: $accent;
+      background: $theme-color;
+
+      svg {
+        stroke: $accent;
+      }
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+
+  // 反馈输入框
+  &__feedback-input {
+    margin-bottom: 0.16rem;
+  }
+
+  &__input-field {
+    width: 100%;
+    height: 0.4rem;
+    padding: 0 0.16rem;
+    border: 0.01rem solid $border-color;
+    border-radius: 0.08rem;
+    font-size: 0.14rem;
+    color: $text-dark;
+    background: $bg-white;
+    transition: all 0.3s ease;
+
+    &::placeholder {
+      color: $text-light;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: $accent;
+    }
+  }
+}
diff --git a/src/assets/styles/pages/home.scss b/src/assets/styles/pages/home.scss
new file mode 100644
index 0000000..0e822c5
--- /dev/null
+++ b/src/assets/styles/pages/home.scss
@@ -0,0 +1,7 @@
+// Home 页面样式
+.home-page {
+  // 在这里添加 Home 页面的样式
+  h1{
+    color: blue;
+  }
+}
diff --git a/src/assets/styles/pages/job-detail.scss b/src/assets/styles/pages/job-detail.scss
new file mode 100644
index 0000000..bee2c4f
--- /dev/null
+++ b/src/assets/styles/pages/job-detail.scss
@@ -0,0 +1,632 @@
+@use '../variables' as *;
+
+// ==================== 岗位详情页 ====================
+.job-detail {
+  &__content {
+    margin-left: 2rem;
+    margin-right: 3.2rem;
+    flex: 1;
+    padding: 0.12rem 0.56rem 0.12rem 0.18rem;
+    height: 100vh;
+    box-sizing: border-box;
+    overflow: hidden;
+    background: $bg-main;
+    display: flex;
+    flex-direction: column;
+  }
+
+  // ---- 页面标题 ----
+  &__header {
+    margin-bottom: 0;
+  }
+
+  &__page-title {
+    font-size: 0.24rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin: 0;
+    line-height: 1.1;
+  }
+
+  &__page-subtitle {
+    font-size: 0.13rem;
+    color: $text-light;
+    margin: 0.02rem 0 0 0;
+  }
+
+  // ---- Tab 切换 ----
+  &__tabs {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.04rem;
+    margin: 0.1rem 0 0.16rem 0;
+    background: $bg-white;
+    border-radius: 0.22rem;
+    padding: 0.04rem;
+  }
+
+  &__tab {
+    font-size: 0.13rem;
+    color: $text-light;
+    cursor: pointer;
+    padding: 0.06rem 0.22rem;
+    border-radius: 0.18rem;
+    transition: all 0.25s ease;
+    user-select: none;
+    font-weight: 500;
+
+    &:hover {
+      color: $text-dark;
+      background: $theme-color;
+    }
+
+    &--active {
+      background: $accent;
+      color: $bg-white;
+      font-weight: 600;
+      box-shadow: 0 0.02rem 0.08rem rgba(79, 194, 201, 0.3);
+
+      &:hover {
+        background: $accent-hover;
+        color: $bg-white;
+      }
+    }
+  }
+
+  // ---- 顶部操作栏 ----
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.14rem;
+  }
+
+  &__close-btn {
+    width: 0.32rem;
+    height: 0.32rem;
+    border-radius: 50%;
+    border: 1px solid $border-color;
+    background: $bg-white;
+    color: $text-dark;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+
+    &:hover {
+      background: $theme-color;
+      border-color: $accent;
+      color: $accent;
+    }
+  }
+
+  &__close-icon {
+    width: 0.14rem;
+    height: 0.14rem;
+  }
+
+  &__toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+  }
+
+  &__tool-btn {
+    width: 0.32rem;
+    height: 0.32rem;
+    border-radius: 50%;
+    border: 1px solid $border-color;
+    background: $bg-white;
+    color: $text-light;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+
+    &:hover {
+      color: $accent;
+      border-color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  &__tool-icon {
+    width: 0.14rem;
+    height: 0.14rem;
+  }
+
+  &__apply-btn {
+    background: $btn-dark;
+    color: $bg-white;
+    border: none;
+    border-radius: 0.2rem;
+    padding: 0.07rem 0.22rem;
+    font-size: 0.13rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.2s;
+
+    &:hover {
+      background: $btn-dark-hover;
+    }
+  }
+
+  // ---- 内容区域 ----
+  &__body {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.14rem;
+    padding-bottom: 0.4rem;
+    padding-right: 0.05rem;
+  }
+
+  // ---- 导航 Tab ----
+  &__nav-tabs {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    margin-bottom: 0.04rem;
+  }
+
+  &__nav-tab {
+    font-size: 0.16rem;
+    font-weight: 600;
+    color: $text-light;
+    cursor: pointer;
+    padding-bottom: 0.06rem;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s;
+
+    &:hover {
+      color: $text-dark;
+    }
+
+    &--active {
+      color: $text-dark;
+      border-bottom-color: $text-dark;
+    }
+  }
+
+  &__nav-tab-right {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.16rem;
+    padding-right: 0.05rem;
+  }
+
+  &__link-btn {
+    font-size: 0.12rem;
+    color: $text-light;
+    cursor: pointer;
+    transition: color 0.2s;
+
+    &:hover {
+      color: $accent;
+    }
+  }
+
+  // ---- 卡片 ----
+  &__card {
+    background: $bg-white;
+    border-radius: 0.12rem;
+    padding: 0.22rem 0.24rem;
+  }
+
+  &__card-top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.3rem;
+  }
+
+  &__card-left {
+    flex: 1;
+    min-width: 0;
+  }
+
+  // ---- 公司 & 职位头部 ----
+  &__company-row {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+    margin-bottom: 0.1rem;
+  }
+
+  &__company-icon {
+    width: 0.36rem;
+    height: 0.36rem;
+    border-radius: 0.08rem;
+    background: $theme-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid $border-color;
+    flex-shrink: 0;
+  }
+
+  &__company-svg {
+    width: 0.2rem;
+    height: 0.2rem;
+    color: $accent;
+  }
+
+  &__company-name {
+    font-size: 0.15rem;
+    font-weight: 600;
+    color: $text-dark;
+  }
+
+  &__job-title {
+    font-size: 0.2rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin: 0 0 0.1rem 0;
+  }
+
+  &__job-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    flex-wrap: wrap;
+  }
+
+  &__meta-item {
+    display: flex;
+    align-items: center;
+    gap: 0.05rem;
+    font-size: 0.12rem;
+    color: $text-light;
+  }
+
+  &__meta-icon {
+    width: 0.14rem;
+    height: 0.14rem;
+    color: $text-light;
+    flex-shrink: 0;
+  }
+
+  // ---- 匹配度 ----
+  &__match-area {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  &__match-ring {
+    position: relative;
+    width: 0.72rem;
+    height: 0.72rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__ring-svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__match-score {
+    font-size: 0.18rem;
+    font-weight: 700;
+    color: $accent-hover;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__match-label {
+    font-size: 0.1rem;
+    color: $text-light;
+    margin-top: 0.04rem;
+  }
+
+  &__match-details {
+    display: flex;
+    align-items: center;
+    gap: 0.12rem;
+    margin-top: 0.12rem;
+  }
+
+  &__match-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.03rem;
+  }
+
+  &__match-mini-ring {
+    position: relative;
+    width: 0.4rem;
+    height: 0.4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__mini-ring-svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__mini-score {
+    font-size: 0.1rem;
+    font-weight: 600;
+    color: $text-dark;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__match-item-label {
+    font-size: 0.09rem;
+    color: $text-light;
+    white-space: nowrap;
+  }
+
+  // ---- 优化简历提示条 ----
+  &__optimize-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: $btn-dark;
+    color: $bg-white;
+    border-radius: 0.1rem;
+    padding: 0.14rem 0.2rem;
+    font-size: 0.13rem;
+  }
+
+  &__optimize-btn {
+    background: $bg-white;
+    color: $text-dark;
+    border: none;
+    border-radius: 0.06rem;
+    padding: 0.07rem 0.18rem;
+    font-size: 0.12rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+
+    &:hover {
+      background: $theme-color;
+      color: $accent-hover;
+    }
+  }
+
+  // ---- 描述文本 ----
+  &__desc-text {
+    font-size: 0.13rem;
+    color: $text-dark;
+    line-height: 1.8;
+    margin: 0 0 0.12rem 0;
+  }
+
+  // ---- 标签 ----
+  &__tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.08rem;
+  }
+
+  &__tag {
+    font-size: 0.12rem;
+    color: $text-dark;
+    background: $bg-main;
+    border: 1px solid $border-color;
+    border-radius: 0.04rem;
+    padding: 0.04rem 0.14rem;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: $accent;
+      color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  // ---- 区块标题 ----
+  &__section-title {
+    font-size: 0.17rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin: 0 0 0.14rem 0;
+  }
+
+  &__section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.14rem;
+
+    .job-detail__section-title {
+      margin-bottom: 0;
+    }
+  }
+
+  &__skill-hint {
+    display: flex;
+    align-items: center;
+    gap: 0.04rem;
+    font-size: 0.11rem;
+    color: $text-light;
+  }
+
+  &__hint-icon {
+    width: 0.12rem;
+    height: 0.12rem;
+    flex-shrink: 0;
+  }
+
+  // ---- 技能标签 ----
+  &__skill-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.08rem;
+    margin-bottom: 0.16rem;
+  }
+
+  &__skill-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.04rem;
+    font-size: 0.12rem;
+    color: $text-dark;
+    background: $bg-main;
+    border: 1px solid $border-color;
+    border-radius: 0.2rem;
+    padding: 0.05rem 0.14rem;
+    transition: all 0.2s;
+
+    &--matched {
+      background: $theme-color;
+      border-color: $accent;
+      color: $accent-hover;
+    }
+  }
+
+  &__skill-close {
+    width: 0.1rem;
+    height: 0.1rem;
+    color: $accent;
+    cursor: pointer;
+  }
+
+  // ---- 列表 ----
+  &__list {
+    font-size: 0.13rem;
+    color: $text-dark;
+    line-height: 2;
+    margin: 0;
+    padding-left: 0.2rem;
+
+    li {
+      padding-left: 0.04rem;
+    }
+  }
+
+  // ---- 公司信息 ----
+  &__company-info {
+    display: flex;
+    gap: 0.4rem;
+  }
+
+  &__company-info-left {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__company-header {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+    margin-bottom: 0.12rem;
+  }
+
+  &__company-logo {
+    width: 0.36rem;
+    height: 0.36rem;
+    border-radius: 50%;
+    background: $bg-main;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid $border-color;
+    flex-shrink: 0;
+  }
+
+  &__company-info-name {
+    font-size: 0.16rem;
+    font-weight: 600;
+    color: $text-dark;
+  }
+
+  &__company-desc {
+    font-size: 0.12rem;
+    color: $text-dark;
+    line-height: 1.8;
+    margin: 0;
+  }
+
+  &__company-info-right {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.08rem;
+  }
+
+  &__company-meta-item {
+    font-size: 0.12rem;
+    color: $text-dark;
+    line-height: 1.6;
+  }
+
+  &__meta-label {
+    color: $text-light;
+  }
+
+  &__company-link {
+    color: $accent;
+    text-decoration: none;
+    transition: color 0.2s;
+
+    &:hover {
+      color: $accent-hover;
+      text-decoration: underline;
+    }
+  }
+
+  // ---- 融资 ----
+  &__funding-label {
+    font-weight: 600;
+    color: $text-dark;
+  }
+
+  // ---- 最新动态 ----
+  &__news-list {
+    display: flex;
+    gap: 0.14rem;
+  }
+
+  &__news-item {
+    flex: 1;
+    background: $bg-main;
+    border: 1px solid $border-color;
+    border-radius: 0.08rem;
+    padding: 0.14rem 0.16rem;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  &__news-title {
+    font-size: 0.13rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin: 0 0 0.06rem 0;
+  }
+
+  &__news-desc {
+    font-size: 0.11rem;
+    color: $text-light;
+    line-height: 1.6;
+    margin: 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
diff --git a/src/assets/styles/pages/jobs.scss b/src/assets/styles/pages/jobs.scss
new file mode 100644
index 0000000..bd44a22
--- /dev/null
+++ b/src/assets/styles/pages/jobs.scss
@@ -0,0 +1,702 @@
+// Jobs 页面样式
+// 颜色变量已移至全局 variables.scss
+@use '../variables' as *;
+
+.jobs-page {
+  &__content {
+    margin-left: 2rem;
+    margin-right: 3.6rem;
+    flex: 1;
+    padding: 0.12rem 0.18rem;
+    height: 100vh;
+    box-sizing: border-box;
+    overflow: hidden;
+    background: $bg-main;
+    display: flex;
+    flex-direction: column;
+  }
+
+  // 页面标题
+  &__header {
+    margin-bottom: 0;
+  }
+
+  &__title {
+    font-size: 0.24rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin: 0 !important;
+    padding: 0;
+    line-height: 1.1;
+  }
+
+  &__subtitle {
+    font-size: 0.13rem;
+    color: $text-light;
+    margin: 0.02rem 0 0 0 !important;
+    padding: 0;
+  }
+
+  // Tab 切换
+  &__tabs {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.04rem;
+    margin: 0.06rem 0 0.16rem 0;
+    background: $bg-white;
+    border-radius: 0.22rem;
+    padding: 0.04rem;
+  }
+
+  &__tab {
+    font-size: 0.13rem;
+    color: $text-light;
+    cursor: pointer;
+    padding: 0.06rem 0.22rem;
+    border-radius: 0.18rem;
+    transition: all 0.25s ease;
+    user-select: none;
+    font-weight: 500;
+
+    &:hover {
+      color: $text-dark;
+      background: $theme-color;
+    }
+
+    &--active {
+      background: $accent;
+      color: $bg-white;
+      font-weight: 600;
+      box-shadow: 0 0.02rem 0.08rem rgba(79, 194, 201, 0.3);
+
+      &:hover {
+        background: $accent-hover;
+        color: $bg-white;
+      }
+    }
+  }
+
+  // 筛选条件外层白色背景条
+  &__filters-bar {
+    background: $bg-white;
+    border-radius: 0.12rem;
+    padding: 0.14rem 0.18rem;
+    margin-bottom: 0.2rem;
+  }
+
+  // 筛选条件
+  &__filters {
+    display: flex;
+    align-items: center;
+    gap: 0.12rem;
+  }
+
+  &__filter-group {
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+  }
+
+  &__filter-item {
+    display: flex;
+    align-items: center;
+    gap: 0.04rem;
+    background: $bg-main;
+    border: 1px solid #E8E8E8;
+    border-radius: 0.2rem;
+    padding: 0.05rem 0.14rem;
+    color: $text-dark;
+    font-size: 0.12rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    position: relative;
+
+    &:hover {
+      border-color: $accent;
+      color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  // 工作类型下拉菜单
+  &__filter-dropdown {
+    position: absolute;
+    top: calc(100% + 0.06rem);
+    left: 0;
+    background: $bg-white;
+    border: 1px solid #E8E8E8;
+    border-radius: 0.08rem;
+    padding: 0.04rem 0;
+    box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.08);
+    z-index: 20;
+    min-width: 100%;
+  }
+
+  // 下拉菜单选项
+  &__filter-dropdown-item {
+    padding: 0.06rem 0.16rem;
+    font-size: 0.12rem;
+    color: $text-dark;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.15s;
+
+    &:hover {
+      background: $theme-color;
+      color: $accent-hover;
+    }
+
+    // 选中态
+    &--active {
+      color: $accent;
+      font-weight: 600;
+    }
+  }
+
+  &__filter-arrow-icon {
+    width: 0.1rem;
+    height: 0.1rem;
+    color: $text-light;
+    flex-shrink: 0;
+  }
+
+  &__search-box {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    background: $bg-white;
+    border: 1px solid #E8E8E8;
+    border-radius: 0.2rem;
+    padding: 0.07rem 0.14rem;
+    min-width: 1.6rem;
+    transition: border-color 0.2s ease;
+
+    &:focus-within {
+      border-color: $accent;
+    }
+  }
+
+  &__search-svg {
+    width: 0.14rem;
+    height: 0.14rem;
+    color: $text-light;
+    margin-right: 0.08rem;
+    flex-shrink: 0;
+  }
+
+  &__search-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: $text-dark;
+    font-size: 0.12rem;
+
+    &::placeholder {
+      color: $text-light;
+    }
+  }
+
+  // 职位列表
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.12rem;
+    flex: 1;
+    overflow-y: auto;
+    padding-bottom: 0.2rem;
+  }
+
+  &__job-card {
+    background: $bg-white;
+    border-radius: 0.12rem;
+    padding: 0.16rem 0.14rem;
+    transition: all 0.25s ease;
+    border: 0.02rem solid transparent;
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.06);
+      background: #fbfbfb;
+      transform: translateY(-0.01rem);
+    }
+
+    &--selected {
+      border-color: $accent;
+      background: $selected-color;
+      box-shadow: 0 0.02rem 0.12rem rgba(79, 194, 201, 0.12);
+    }
+  }
+
+  &__job-main {
+    display: flex;
+    align-items: stretch;
+    gap: 0.2rem;
+  }
+
+  &__job-left {
+    flex: 1;
+    display: flex;
+    gap: 0.16rem;
+    min-width: 0;
+  }
+
+  &__job-icon {
+    width: 0.44rem;
+    height: 0.44rem;
+    border-radius: 0.1rem;
+    background: $theme-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border: 1px solid #E8E8E8;
+  }
+
+  &__company-svg {
+    width: 0.24rem;
+    height: 0.24rem;
+    color: $accent;
+  }
+
+  &__job-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__job-title-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__job-name {
+    font-size: 0.15rem;
+    font-weight: 600;
+    color: $text-dark;
+    line-height: 1.4;
+  }
+
+  &__job-more {
+    color: $text-light;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0.04rem;
+    border-radius: 0.04rem;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      color: $text-dark;
+      background: $bg-main;
+    }
+  }
+
+  &__more-svg {
+    width: 0.16rem;
+    height: 0.16rem;
+  }
+
+  &__job-meta {
+    font-size: 0.12rem;
+    color: $text-light;
+    margin-top: 0.04rem;
+    line-height: 1.4;
+  }
+
+  &__job-dot {
+    margin: 0 0.04rem;
+    color: #D9D9D9;
+  }
+
+  &__job-tip {
+    font-size: 0.11rem;
+    color: $accent-hover;
+    background: $theme-color;
+    border-radius: 0.04rem;
+    padding: 0.05rem 0.1rem;
+    margin-top: 0.1rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.04rem;
+    border: 1px solid rgba(79, 194, 201, 0.2);
+  }
+
+  &__tip-svg {
+    width: 0.12rem;
+    height: 0.12rem;
+    flex-shrink: 0;
+  }
+
+  &__job-tags {
+    display: flex;
+    gap: 0.08rem;
+    margin-top: 0.1rem;
+    flex-wrap: wrap;
+  }
+
+  &__job-tag {
+    font-size: 0.11rem;
+    color: #888;
+    background: $bg-main;
+    border-radius: 0.04rem;
+    padding: 0.03rem 0.1rem;
+    transition: all 0.2s;
+
+    &:hover {
+      color: $accent-hover;
+      background: $theme-color;
+    }
+  }
+
+  // 底部操作栏
+  &__job-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 0.14rem;
+    position: relative;
+  }
+
+  &__job-action-left {
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+  }
+
+  &__action-icon-btn {
+    width: 0.28rem;
+    height: 0.28rem;
+    border-radius: 50%;
+    border: none;
+    background: $bg-main;
+    color: $text-light;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+
+    &:hover {
+      background: $theme-color;
+      color: $accent;
+    }
+
+    &--liked {
+      background: #FFF0ED;
+      color: $danger;
+
+      &:hover {
+        background: #FFE4DE;
+      }
+    }
+  }
+
+  &__action-svg {
+    width: 0.14rem;
+    height: 0.14rem;
+  }
+
+  &__job-action-right {
+    display: flex;
+    align-items: center;
+    gap: 0.12rem;
+  }
+
+  &__job-helper {
+    font-size: 0.12rem;
+    color: $text-light;
+    cursor: pointer;
+    transition: color 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 0.04rem;
+    background: none;
+    border: none;
+    padding: 0.04rem 0.08rem;
+    border-radius: 0.14rem;
+
+    &:hover {
+      color: $accent;
+      background: $theme-color;
+    }
+  }
+
+  &__helper-svg {
+    width: 0.14rem;
+    height: 0.14rem;
+  }
+
+  &__job-apply-btn {
+    background: $bg-main;
+    border: 1px solid #E8E8E8;
+    border-radius: 0.2rem;
+    padding: 0.06rem 0.2rem;
+    color: $text-dark;
+    font-size: 0.12rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-weight: 500;
+
+    &:hover {
+      border-color: $accent;
+      color: $accent;
+      background: $theme-color;
+    }
+
+    &--active {
+      background: $accent;
+      border-color: $accent;
+      color: $bg-white;
+
+      &:hover {
+        background: $accent-hover;
+        border-color: $accent-hover;
+      }
+    }
+  }
+
+  // 弹出菜单
+  &__job-popup {
+    position: absolute;
+    right: 0.26rem;
+    top: -0.64rem;
+    background: $bg-white;
+    border: 1px solid #E8E8E8;
+    border-radius: 0.1rem;
+    padding: 0.06rem 0;
+    box-shadow: 0 0.06rem 0.2rem rgba(0, 0, 0, 0.1);
+    z-index: 10;
+  }
+
+  &__job-popup-item {
+    padding: 0.08rem 0.2rem;
+    font-size: 0.12rem;
+    color: $text-dark;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.15s;
+
+    &:hover {
+      background: $theme-color;
+      color: $accent-hover;
+    }
+  }
+
+  // 匹配度卡片
+  &__job-match {
+    width: 1.1rem;
+    text-align: center;
+    flex-shrink: 0;
+    border-radius: 0.12rem;
+    padding: 0.14rem 0.1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.02rem;
+    transition: all 0.25s ease;
+
+    &--high {
+      background: linear-gradient(135deg, $theme-color 0%, rgba(79, 194, 201, 0.15) 100%);
+      border: 1px solid rgba(79, 194, 201, 0.25);
+    }
+
+    &--low {
+      background: $bg-main;
+      border: 1px solid #E8E8E8;
+    }
+  }
+
+  &__match-ring {
+    position: relative;
+    width: 0.64rem;
+    height: 0.64rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__ring-svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__match-score {
+    font-size: 0.18rem;
+    font-weight: 700;
+    color: $text-dark;
+    line-height: 1;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__match-label {
+    font-size: 0.1rem;
+    color: $text-light;
+    margin-top: 0.04rem;
+  }
+
+  &__match-level {
+    font-size: 0.1rem;
+    color: $text-light;
+    margin-top: 0.01rem;
+  }
+
+  // 加载更多提示
+  &__loading-more {
+    text-align: center;
+    padding: 0.16rem 0;
+    font-size: 0.12rem;
+    color: $text-light;
+  }
+
+  // 高匹配度特殊样式
+  &__job-match--high &__match-score {
+    color: $accent-hover;
+  }
+
+  &__job-match--high &__match-level {
+    color: $accent;
+    font-weight: 500;
+  }
+}
+
+// ==================== 不感兴趣反馈弹窗 ====================
+.dislike-dialog {
+  // 弹窗圆角
+  .el-dialog {
+    border-radius: 0.16rem;
+    overflow: hidden;
+  }
+
+  // 覆盖 el-dialog 默认 body padding
+  .el-dialog__body {
+    padding: 0.12rem;
+  }
+
+  // 标题样式
+  &__title {
+    font-size: 0.16rem;
+    font-weight: 600;
+    color: $text-dark;
+    line-height: 1.6;
+    margin-bottom: 0.2rem;
+    margin-top: 0.12rem;
+
+    // 居中标题（问题反馈弹窗用）
+    &--center {
+      text-align: center;
+    }
+  }
+
+  // 选项列表容器
+  &__options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    margin-bottom: 0.16rem;
+  }
+
+  // 单个选项行
+  &__option {
+    display: flex;
+    align-items: center;
+    background: $bg-main;
+    border-radius: 0.08rem;
+    padding: 0.04rem 0.1rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: 1px solid transparent;
+
+    &:hover {
+      border-color: $accent;
+      background: $theme-color;
+    }
+
+    // 选中态
+    &--active {
+      border-color: $accent;
+      background: $theme-color;
+    }
+
+    // 覆盖 el-radio 默认样式
+    .el-radio {
+      margin-right: 0;
+      width: 100%;
+
+      .el-radio__label {
+        font-size: 0.14rem;
+        color: $text-dark;
+        font-weight: 500;
+      }
+    }
+  }
+
+  // 补充描述输入框
+  &__textarea {
+    .el-textarea__inner {
+      background: $bg-main;
+      border: 1px solid $border-color;
+      border-radius: 0.08rem;
+      font-size: 0.13rem;
+      color: $text-dark;
+      resize: none;
+
+      &::placeholder {
+        color: $text-light;
+      }
+
+      &:focus {
+        border-color: $accent;
+      }
+    }
+  }
+
+  // 底部按钮区域
+  &__footer {
+    margin-top: 0.3rem;
+    display: flex;
+    gap: 0.16rem;
+  }
+
+  // 按钮通用样式
+  &__btn {
+    flex: 1;
+    padding: 0.12rem 0;
+    border-radius: 0.08rem;
+    font-size: 0.14rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: none;
+
+    // 取消按钮
+    &--cancel {
+      background: $bg-main;
+      color: $text-light;
+      border: 1px solid $border-color;
+
+      &:hover {
+        color: $text-dark;
+        border-color: #ccc;
+      }
+    }
+
+    // 提交按钮
+    &--submit {
+      background: $btn-dark;
+      color: $bg-white;
+
+      &:hover {
+        background: $btn-dark-hover;
+      }
+    }
+  }
+}
diff --git a/src/assets/styles/pages/login.scss b/src/assets/styles/pages/login.scss
new file mode 100644
index 0000000..9c1aca6
--- /dev/null
+++ b/src/assets/styles/pages/login.scss
@@ -0,0 +1,87 @@
+.login-dialog {
+  width: 6rem;
+  .el-dialog__header {
+    padding: 0.16rem 0.16rem 0;
+    margin-right: 0;
+  }
+
+  .el-dialog__body {
+    padding: 0 0.4rem 0.4rem;
+  }
+}
+
+.login-page {
+  text-align: center;
+
+  .login-title {
+    font-size: 0.28rem;
+    font-weight: 700;
+    color: #1a1a2e;
+    margin-bottom: 0.4rem;
+  }
+
+  .login-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.16rem;
+  }
+
+  .login-input {
+    height: 0.4rem;
+    .el-input__wrapper {
+      background-color: #f5f5f7;
+      border-radius: 0.08rem;
+      box-shadow: none;
+      padding: 0.00rem 0.16rem;
+    }
+  }
+
+  .code-row {
+    display: flex;
+    align-items: center;
+    gap: 0.12rem;
+
+    .login-input {
+      flex: 1;
+    }
+
+    .send-code-btn {
+      white-space: nowrap;
+      border-radius: 0.2rem;
+      padding: 0.08rem 0.2rem;
+      font-size: 0.14rem;
+    }
+  }
+
+  .login-btn {
+    margin-top: 0.16rem;
+    width: 100%;
+    height: 0.52rem;
+    border-radius: 0.26rem;
+    font-size: 0.18rem;
+    font-weight: 600;
+    background-color: #1a1a2e;
+    border-color: #1a1a2e;
+
+    &:hover,
+    &:focus {
+      background-color: #2d2d44;
+      border-color: #2d2d44;
+    }
+  }
+
+  .register-link {
+    margin-top: 0.08rem;
+    font-size: 0.14rem;
+    color: #666;
+
+    a {
+      color: #409eff;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
diff --git a/src/assets/styles/pages/profile.scss b/src/assets/styles/pages/profile.scss
new file mode 100644
index 0000000..8540ffc
--- /dev/null
+++ b/src/assets/styles/pages/profile.scss
@@ -0,0 +1,135 @@
+@use '../variables' as *;
+
+// ==================== 个人资料页 ====================
+.profile-page {
+  &__content {
+    margin-left: 2rem;
+    flex: 1;
+    padding: 0.12rem 0.36rem;
+    height: 100vh;
+    box-sizing: border-box;
+    overflow-y: auto;
+    background: $bg-main;
+    display: flex;
+    flex-direction: column;
+  }
+
+  // 页面标题区
+  &__header {
+    margin-bottom: 0.16rem;
+  }
+
+  &__title {
+    font-size: 0.2rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.06rem;
+  }
+
+  &__title-tip {
+    font-size: 0.14rem;
+    color: $text-light;
+    cursor: help;
+  }
+
+  &__subtitle {
+    font-size: 0.12rem;
+    color: $text-light;
+    margin: 0.06rem 0 0 0;
+    line-height: 1.6;
+    max-width: 5.6rem;
+  }
+
+  // 主体区域
+  &__body {
+    display: flex;
+    gap: 0.24rem;
+    flex: 1;
+    min-height: 0;
+  }
+
+  // 右侧边栏
+  &__sidebar {
+    padding-left: 0.1rem;
+    width: 3.0rem;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.12rem;
+  }
+
+  // 提示卡片
+  &__tip-card {
+    background: $btn-dark;
+    border-radius: 0.12rem;
+    padding: 0.2rem;
+    color: $bg-white;
+  }
+
+  &__tip-text {
+    font-size: 0.13rem;
+    line-height: 1.7;
+    margin: 0 0 0.16rem 0;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  &__tip-btn {
+    display: block;
+    width: 100%;
+    background: $bg-white;
+    color: $text-dark;
+    border: none;
+    border-radius: 0.06rem;
+    padding: 0.08rem 0;
+    font-size: 0.13rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-align: center;
+
+    &:hover {
+      background: $theme-color;
+      color: $accent-hover;
+    }
+  }
+
+  // 导航入口
+  &__nav-entry {
+    background: $bg-white;
+    border-radius: 0.12rem;
+    padding: 0.14rem 0.16rem;
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.06);
+      background: $theme-color;
+    }
+  }
+
+  &__nav-entry-icon {
+    font-size: 0.16rem;
+    flex-shrink: 0;
+  }
+
+  &__nav-entry-text {
+    flex: 1;
+    font-size: 0.13rem;
+    color: $text-dark;
+    font-weight: 500;
+  }
+
+  &__nav-arrow {
+    width: 0.14rem;
+    height: 0.14rem;
+    color: $text-light;
+    flex-shrink: 0;
+  }
+}
+
diff --git a/src/assets/styles/pages/resume-detail.scss b/src/assets/styles/pages/resume-detail.scss
new file mode 100644
index 0000000..939ee73
--- /dev/null
+++ b/src/assets/styles/pages/resume-detail.scss
@@ -0,0 +1,393 @@
+@use '../variables' as *;
+
+// ==================== 简历详情页 ====================
+.resume-detail {
+  &__content {
+    margin-left: 2rem;
+    flex: 1;
+    padding: 0.12rem 0.36rem;
+    height: 100vh;
+    box-sizing: border-box;
+    overflow-y: auto;
+    background: $bg-main;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__page-title {
+    font-size: 0.24rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin: 0 0 0.16rem 0;
+  }
+
+  // ---- 顶部操作栏 ----
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.16rem;
+  }
+
+  &__toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 0.12rem;
+  }
+
+  &__back-btn {
+    width: 0.32rem;
+    height: 0.32rem;
+    border-radius: 50%;
+    border: 1px solid $border-color;
+    background: $bg-white;
+    color: $text-dark;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+
+    &:hover {
+      background: $theme-color;
+      border-color: $accent;
+      color: $accent;
+    }
+  }
+
+  &__back-icon {
+    width: 0.14rem;
+    height: 0.14rem;
+  }
+
+  &__tab-name {
+    font-size: 0.14rem;
+    font-weight: 500;
+    color: $text-dark;
+    background: $bg-white;
+    border: 1px solid $border-color;
+    border-radius: 0.16rem;
+    padding: 0.05rem 0.16rem;
+  }
+
+  &__toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+  }
+
+  &__tool-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.04rem;
+    background: none;
+    border: none;
+    color: $text-light;
+    font-size: 0.12rem;
+    cursor: pointer;
+    padding: 0.05rem 0.1rem;
+    border-radius: 0.06rem;
+    transition: all 0.2s;
+    white-space: nowrap;
+
+    &:hover {
+      color: $text-dark;
+      background: $bg-white;
+    }
+
+    &--danger:hover {
+      color: $danger;
+    }
+  }
+
+  &__tool-icon {
+    width: 0.13rem;
+    height: 0.13rem;
+    flex-shrink: 0;
+  }
+
+  // ---- 评分区域 ----
+  &__score-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: $bg-white;
+    border-radius: 0.12rem;
+    padding: 0.18rem 0.24rem;
+    margin-bottom: 0.16rem;
+  }
+
+  &__score-left {
+    display: flex;
+    align-items: center;
+    gap: 0.12rem;
+  }
+
+  &__score-avatar {
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $bg-white;
+    font-size: 0.18rem;
+    font-weight: 700;
+    flex-shrink: 0;
+  }
+
+  &__score-badge {
+    font-size: 0.11rem;
+    font-weight: 600;
+    color: $bg-white;
+    background: $accent;
+    border-radius: 0.1rem;
+    padding: 0.03rem 0.1rem;
+  }
+
+  &__score-link {
+    font-size: 0.12rem;
+    color: $text-light;
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: color 0.2s;
+
+    &:hover {
+      color: $accent;
+    }
+  }
+
+  &__score-right {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+  }
+
+  &__score-item {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.02rem;
+  }
+
+  &__score-num {
+    font-size: 0.22rem;
+    font-weight: 700;
+    color: $text-dark;
+    line-height: 1.2;
+  }
+
+  &__score-label {
+    font-size: 0.1rem;
+    color: $text-light;
+    white-space: nowrap;
+  }
+
+  &__diagnose-btn {
+    background: $btn-dark;
+    color: $bg-white;
+    border: none;
+    border-radius: 0.06rem;
+    padding: 0.08rem 0.18rem;
+    font-size: 0.13rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.2s;
+    white-space: nowrap;
+
+    &:hover {
+      background: $btn-dark-hover;
+    }
+  }
+
+  // ---- 简历主体 ----
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.16rem;
+    padding-bottom: 0.4rem;
+  }
+
+  &__card {
+    background: $bg-white;
+    border-radius: 0.12rem;
+    padding: 0.24rem;
+  }
+
+  // ---- 个人信息卡片 ----
+  &__card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 0.16rem;
+  }
+
+  &__user-name {
+    font-size: 0.2rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin: 0 0 0.04rem 0;
+  }
+
+  &__user-title {
+    font-size: 0.13rem;
+    color: $text-light;
+    margin: 0;
+  }
+
+  &__card-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+    flex-shrink: 0;
+  }
+
+  &__card-btn {
+    font-size: 0.12rem;
+    border-radius: 0.16rem;
+    padding: 0.06rem 0.16rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+    border: none;
+
+    &--outline {
+      background: $bg-main;
+      color: $text-dark;
+      border: 1px solid $border-color;
+
+      &:hover {
+        border-color: $accent;
+        color: $accent;
+        background: $theme-color;
+      }
+    }
+
+    &--dark {
+      background: $btn-dark;
+      color: $bg-white;
+
+      &:hover {
+        background: $btn-dark-hover;
+      }
+    }
+  }
+
+  // ---- 联系方式 ----
+  &__contact {
+    display: flex;
+    align-items: center;
+    gap: 0.24rem;
+    flex-wrap: wrap;
+  }
+
+  &__contact-item {
+    display: flex;
+    align-items: center;
+    gap: 0.06rem;
+    font-size: 0.12rem;
+    color: $text-dark;
+  }
+
+  &__contact-icon {
+    width: 0.14rem;
+    height: 0.14rem;
+    color: $text-light;
+    flex-shrink: 0;
+  }
+
+  // ---- 区块标题 ----
+  &__section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.16rem;
+  }
+
+  &__section-title {
+    font-size: 0.17rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin: 0 0 0.16rem 0;
+  }
+
+  &__section-header &__section-title {
+    margin-bottom: 0;
+  }
+
+  // ---- 教育背景 ----
+  &__edu-item {
+    padding: 0.1rem 0;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid $border-color;
+    }
+  }
+
+  &__edu-degree {
+    font-size: 0.14rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin-bottom: 0.04rem;
+  }
+
+  &__edu-meta {
+    font-size: 0.12rem;
+    color: $text-light;
+    line-height: 1.6;
+  }
+
+  // ---- 工作经验 ----
+  &__exp-item {
+    padding: 0.1rem 0;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid $border-color;
+    }
+  }
+
+  &__exp-title {
+    font-size: 0.14rem;
+    font-weight: 600;
+    color: $text-dark;
+    margin-bottom: 0.04rem;
+  }
+
+  &__exp-meta {
+    font-size: 0.12rem;
+    color: $text-light;
+    margin-bottom: 0.06rem;
+  }
+
+  &__exp-desc {
+    font-size: 0.12rem;
+    color: $text-dark;
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  // ---- 技能标签 ----
+  &__skills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.08rem;
+  }
+
+  &__skill-tag {
+    font-size: 0.12rem;
+    color: $text-dark;
+    background: $bg-main;
+    border: 1px solid $border-color;
+    border-radius: 0.04rem;
+    padding: 0.05rem 0.14rem;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: $accent;
+      color: $accent;
+      background: $theme-color;
+    }
+  }
+}
diff --git a/src/assets/styles/pages/resume.scss b/src/assets/styles/pages/resume.scss
new file mode 100644
index 0000000..34a7081
--- /dev/null
+++ b/src/assets/styles/pages/resume.scss
@@ -0,0 +1,190 @@
+@use '../variables' as *;
+
+// ==================== 简历列表页 ====================
+.resume-page {
+  &__content {
+    margin-left: 2rem;
+    flex: 1;
+    padding: 0.12rem 0.36rem;
+    height: 100vh;
+    box-sizing: border-box;
+    overflow: hidden;
+    background: $bg-main;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.2rem;
+  }
+
+  &__title {
+    font-size: 0.24rem;
+    font-weight: 700;
+    color: $text-dark;
+    margin: 0;
+  }
+
+  &__upload-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.06rem;
+    background: $btn-dark;
+    color: $bg-white;
+    border: none;
+    border-radius: 0.2rem;
+    padding: 0.08rem 0.2rem;
+    font-size: 0.13rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.2s;
+
+    &:hover {
+      background: $btn-dark-hover;
+    }
+  }
+
+  &__upload-icon {
+    width: 0.14rem;
+    height: 0.14rem;
+  }
+
+  // 表格容器
+  &__table-wrap {
+    background: $bg-white;
+    border-radius: 0.12rem;
+  }
+
+  &__table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  &__th {
+    text-align: left;
+    padding: 0.14rem 0.2rem;
+    font-size: 0.12rem;
+    font-weight: 600;
+    color: $text-dark;
+    border-bottom: 1px solid $border-color;
+    white-space: nowrap;
+
+    &--action {
+      width: 0.5rem;
+    }
+  }
+
+  &__row {
+    cursor: pointer;
+    transition: background 0.15s;
+
+    &:hover {
+      background: $theme-color;
+    }
+
+    &:not(:last-child) {
+      border-bottom: 1px solid $border-color;
+    }
+  }
+
+  &__td {
+    padding: 0.16rem 0.2rem;
+    font-size: 0.13rem;
+    color: $text-dark;
+    vertical-align: middle;
+
+    &--action {
+      position: relative;
+      text-align: center;
+    }
+  }
+
+  // 简历名称单元格
+  &__name-cell {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+  }
+
+  &__avatar {
+    width: 0.3rem;
+    height: 0.3rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $bg-white;
+    font-size: 0.13rem;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+
+  &__name {
+    font-weight: 500;
+  }
+
+  &__default-tag {
+    font-size: 0.1rem;
+    color: $text-light;
+    background: $bg-main;
+    border: 1px solid $border-color;
+    border-radius: 0.04rem;
+    padding: 0.02rem 0.06rem;
+    white-space: nowrap;
+  }
+
+  // 更多按钮
+  &__more-btn {
+    background: none;
+    border: none;
+    color: $text-light;
+    cursor: pointer;
+    padding: 0.04rem;
+    border-radius: 0.04rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+
+    &:hover {
+      color: $text-dark;
+      background: $bg-main;
+    }
+  }
+
+  &__more-svg {
+    width: 0.16rem;
+    height: 0.16rem;
+  }
+
+  // 弹出菜单
+  &__popup {
+    position: absolute;
+    right: 0.3rem;
+    top: 0.1rem;
+    background: $bg-white;
+    border: 1px solid $border-color;
+    border-radius: 0.1rem;
+    padding: 0.06rem 0;
+    box-shadow: 0 0.06rem 0.2rem rgba(0, 0, 0, 0.1);
+    z-index: 10;
+    min-width: 1.2rem;
+  }
+
+  &__popup-item {
+    padding: 0.08rem 0.2rem;
+    font-size: 0.12rem;
+    color: $text-dark;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.15s;
+
+    &:hover {
+      background: $theme-color;
+      color: $accent-hover;
+    }
+  }
+}
diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
new file mode 100644
index 0000000..5745706
--- /dev/null
+++ b/src/assets/styles/variables.scss
@@ -0,0 +1,42 @@
+// ========================================
+// 全局颜色规格 — 项目统一色彩体系
+// ========================================
+
+// 主题色 — 用于高亮背景、选中态等
+$theme-color: #F6FCFC;
+
+// 选中态背景色
+$selected-color: #F6FCFC;
+
+// 页面主背景色
+$bg-main: #F3F4F5;
+
+// 白色背景（卡片、输入框等）
+$bg-white: #FFFFFF;
+
+// 深色文字（标题、正文）
+$text-dark: #000000;
+
+// 浅色文字（副标题、占位符、辅助信息）
+$text-light: #BFBFBF;
+
+// 强调色 / 品牌色
+$accent: #4FC2C9;
+
+// 强调色悬停态
+$accent-hover: #42A8B3;
+
+// 危险色 / 警告色（删除、错误等）
+$danger: #E85635;
+
+// 分割线颜色
+$border-color: #E8E8E8;
+
+// 遮罩层背景
+$overlay-bg: rgba(0, 0, 0, 0.5);
+
+// 按钮深色背景（确认提交等）
+$btn-dark: #1A1A2E;
+
+// 按钮深色悬停态
+$btn-dark-hover: #2E3142;
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
new file mode 100644
index 0000000..770e9d3
--- /dev/null
+++ b/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/AiChat.vue b/src/components/AiChat.vue
new file mode 100644
index 0000000..2baaff5
--- /dev/null
+++ b/src/components/AiChat.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="ai-chat">
+    <!-- 顶部会员横幅 — 点击打开会员购买弹窗 -->
+    <div class="ai-chat__banner" @click="showMemberDialog = true">
+      <span>解锁会员，送快上岸!</span>
+      <span class="ai-chat__banner-arrow">›</span>
+    </div>
+
+    <!-- AI 头像和名称 -->
+    <div class="ai-chat__header">
+      <div class="ai-chat__avatar">👤</div>
+      <div class="ai-chat__info">
+        <div class="ai-chat__name">Nova</div>
+        <div class="ai-chat__desc">你的AI求职助手</div>
+      </div>
+    </div>
+
+    <!-- 聊天消息区域 -->
+    <div class="ai-chat__messages" ref="messagesRef">
+      <!-- AI 欢迎消息 -->
+      <div class="ai-chat__msg ai-chat__msg--ai">
+        <div class="ai-chat__msg-bubble">
+          <div class="ai-chat__msg-title">欢迎回来，李华!</div>
+          <div class="ai-chat__msg-text">很高兴再次见到你，让我们继续您通往理想工作的旅程吧。</div>
+        </div>
+      </div>
+
+      <!-- 动态消息列表 -->
+      <div
+        v-for="(msg, i) in messages"
+        :key="i"
+        class="ai-chat__msg"
+        :class="msg.role === 'ai' ? 'ai-chat__msg--ai' : 'ai-chat__msg--user'"
+      >
+        <div class="ai-chat__msg-bubble">{{ msg.content }}</div>
+      </div>
+
+      <!-- 快捷问题 -->
+      <div class="ai-chat__quick-questions">
+        <div
+          v-for="(q, i) in quickQuestions"
+          :key="i"
+          class="ai-chat__quick-item"
+          @click="sendQuickQuestion(q)"
+        >
+          {{ q }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部输入框 -->
+    <div class="ai-chat__input-area">
+      <input
+        v-model="inputText"
+        class="ai-chat__input"
+        placeholder="搜索职位、公司或关键词..."
+        @keyup.enter="sendMessage"
+      />
+      <button class="ai-chat__send-btn" @click="sendMessage">
+        <span>➤</span>
+      </button>
+    </div>
+
+    <!-- 会员购买弹窗 -->
+    <MemberDialog v-model="showMemberDialog" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import MemberDialog from '@/components/MemberDialog.vue'
+
+// ==================== 状态 ====================
+
+/** 会员购买弹窗的显示状态 */
+const showMemberDialog = ref(false)
+
+/** 输入框内容 */
+const inputText = ref('')
+
+/** 消息列表容器 DOM 引用（用于滚动控制） */
+const messagesRef = ref<HTMLElement>()
+
+// ==================== 类型定义 ====================
+
+/** 聊天消息类型 */
+interface ChatMsg {
+  role: 'ai' | 'user'
+  content: string
+}
+
+// ==================== 数据 ====================
+
+/** 聊天消息列表 */
+const messages = ref<ChatMsg[]>([])
+
+/** 快捷问题列表（点击后自动发送） */
+const quickQuestions = [
+  '你想知道关于这个岗位的什么信息？',
+  '告诉我这个工作为什么适合我？',
+  '我想修改这个岗位，怎么优化简历？',
+  '帮我针对这个岗位生成一份面试攻略',
+]
+
+// ==================== 事件处理 ====================
+
+/** 点击快捷问题，填入输入框并发送 */
+function sendQuickQuestion(question: string) {
+  inputText.value = question
+  sendMessage()
+}
+
+/** 发送消息（回车或点击发送按钮触发） */
+function sendMessage() {
+  if (!inputText.value.trim()) return
+  messages.value.push({ role: 'user', content: inputText.value.trim() })
+  // TODO: 接入AI聊天接口
+  inputText.value = ''
+}
+</script>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
new file mode 100644
index 0000000..b58e52b
--- /dev/null
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
diff --git a/src/components/JobDislikeDialog.vue b/src/components/JobDislikeDialog.vue
new file mode 100644
index 0000000..2b23ce8
--- /dev/null
+++ b/src/components/JobDislikeDialog.vue
@@ -0,0 +1,95 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :show-close="true"
+    width="4.8rem"
+    class="dislike-dialog"
+    :close-on-click-modal="true"
+  >
+    <!-- 弹窗标题 -->
+    <div class="dislike-dialog__title">为了给您推荐更适合岗位，请告诉我们不匹配的原因：</div>
+
+    <!-- 原因选项列表 — 单选 -->
+    <div class="dislike-dialog__options">
+      <label
+        v-for="option in dislikeOptions"
+        :key="option.value"
+        class="dislike-dialog__option"
+        :class="{ 'dislike-dialog__option--active': dislikeReason === option.value }"
+      >
+        <el-radio v-model="dislikeReason" :value="option.value">{{ option.label }}</el-radio>
+      </label>
+    </div>
+
+    <!-- 补充描述输入框 -->
+    <el-input
+      v-model="dislikeDetail"
+      type="textarea"
+      :rows="4"
+      placeholder="请描述您的原因"
+      class="dislike-dialog__textarea"
+    />
+
+    <!-- 底部按钮 -->
+    <div class="dislike-dialog__footer">
+      <button class="dislike-dialog__btn dislike-dialog__btn--cancel" @click="visible = false">取消</button>
+      <button class="dislike-dialog__btn dislike-dialog__btn--submit" @click="handleDislikeSubmit">提交</button>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: boolean
+  jobId: string | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val: boolean) => emit('update:modelValue', val),
+})
+
+/** 不感兴趣的原因（单选） */
+const dislikeReason = ref('')
+
+/** 不感兴趣的补充描述 */
+const dislikeDetail = ref('')
+
+/** 不感兴趣原因选项列表 */
+const dislikeOptions = [
+  { value: 'company', label: '对这家公司不感兴趣' },
+  { value: 'position', label: '对这个岗位不感兴趣' },
+  { value: 'location', label: '工作地点不合适' },
+  { value: 'other', label: '其他原因' },
+]
+
+/** 提交不感兴趣反馈 */
+function handleDislikeSubmit() {
+  if (!dislikeReason.value) {
+    ElMessage.warning('请选择一个原因')
+    return
+  }
+  // TODO: 调用接口提交反馈，参数：props.jobId, dislikeReason.value, dislikeDetail.value
+  console.log('提交不感兴趣反馈', {
+    jobId: props.jobId,
+    reason: dislikeReason.value,
+    detail: dislikeDetail.value,
+  })
+  ElMessage.success('反馈已提交，感谢您的反馈')
+  visible.value = false
+}
+
+/** 弹窗打开时重置表单 */
+function resetForm() {
+  dislikeReason.value = ''
+  dislikeDetail.value = ''
+}
+
+defineExpose({ resetForm })
+</script>
diff --git a/src/components/JobFeedbackDialog.vue b/src/components/JobFeedbackDialog.vue
new file mode 100644
index 0000000..b2b3e0d
--- /dev/null
+++ b/src/components/JobFeedbackDialog.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :show-close="true"
+    width="4.8rem"
+    class="dislike-dialog"
+    :close-on-click-modal="true"
+  >
+    <!-- 弹窗标题 -->
+    <div class="dislike-dialog__title dislike-dialog__title--center">问题反馈</div>
+
+    <!-- 反馈原因选项列表 — 单选 -->
+    <div class="dislike-dialog__options">
+      <label
+        v-for="option in feedbackOptions"
+        :key="option.value"
+        class="dislike-dialog__option"
+        :class="{ 'dislike-dialog__option--active': feedbackReason === option.value }"
+      >
+        <el-radio v-model="feedbackReason" :value="option.value">{{ option.label }}</el-radio>
+      </label>
+    </div>
+
+    <!-- 底部按钮 -->
+    <div class="dislike-dialog__footer">
+      <button class="dislike-dialog__btn dislike-dialog__btn--cancel" @click="visible = false">取消</button>
+      <button class="dislike-dialog__btn dislike-dialog__btn--submit" @click="handleFeedbackSubmit">提交</button>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: boolean
+  jobId: string | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val: boolean) => emit('update:modelValue', val),
+})
+
+/** 问题反馈的原因（单选） */
+const feedbackReason = ref('')
+
+/** 问题反馈原因选项列表 */
+const feedbackOptions = [
+  { value: 'fraud', label: '怀疑是诈骗或虚假岗位' },
+  { value: 'inaccurate', label: '公司信息或职位描述有误' },
+  { value: 'expired', label: '该职位已停止招聘/职位已失效' },
+]
+
+/** 提交问题反馈 */
+function handleFeedbackSubmit() {
+  if (!feedbackReason.value) {
+    ElMessage.warning('请选择一个反馈原因')
+    return
+  }
+  // TODO: 调用接口提交问题反馈，参数：props.jobId, feedbackReason.value
+  console.log('提交问题反馈', {
+    jobId: props.jobId,
+    reason: feedbackReason.value,
+  })
+  ElMessage.success('问题反馈已提交，感谢您的反馈')
+  visible.value = false
+}
+
+/** 弹窗打开时重置表单 */
+function resetForm() {
+  feedbackReason.value = ''
+}
+
+defineExpose({ resetForm })
+</script>
diff --git a/src/components/JobGoalDialog.vue b/src/components/JobGoalDialog.vue
new file mode 100644
index 0000000..dd3c840
--- /dev/null
+++ b/src/components/JobGoalDialog.vue
@@ -0,0 +1,268 @@
+<template>
+  <!-- 求职目标设置弹窗 -->
+  <el-dialog
+    v-model="visible"
+    width="480px"
+    :show-close="false"
+    :close-on-click-modal="false"
+    :close-on-press-escape="true"
+    :align-center="false"
+    :style="{ marginLeft: 'auto', marginRight: '0.2rem' }"
+    class="job-goal-dialog"
+    @close="handleClose"
+  >
+    <!-- 头部区域 -->
+    <div class="job-goal-dialog__header">
+      <!-- 关闭按钮 -->
+      <button class="job-goal-dialog__close-btn" @click="handleClose">
+        <el-icon><Close /></el-icon>
+      </button>
+      <!-- 弹窗标题 -->
+      <span class="job-goal-dialog__title">求职目标设置</span>
+    </div>
+
+    <!-- 岗位选择模块 -->
+    <div class="job-goal-dialog__section ">
+      <div class="job-goal-dialog__label">*岗位</div>
+      <!-- 已选岗位标签列表 -->
+      <div class="job-goal-dialog__tags">
+        <span
+          v-for="(item, index) in form.positions"
+          :key="index"
+          class="job-goal-dialog__tag"
+        >
+          {{ item }}
+          <!-- 删除岗位标签 -->
+          <el-icon class="job-goal-dialog__tag-close" @click="removePosition(index)"><Close /></el-icon>
+        </span>
+      </div>
+      <!-- 岗位下拉选择器 -->
+      <el-select
+        v-model="newPosition"
+        placeholder="新增岗位"
+        filterable
+        class="job-goal-dialog__select"
+        @change="addPosition"
+      >
+        <el-option
+          v-for="opt in positionOptions"
+          :key="opt"
+          :label="opt"
+          :value="opt"
+        />
+      </el-select>
+    </div>
+
+    <!-- 行业选择模块 -->
+    <div class="job-goal-dialog__section ">
+      <div class="job-goal-dialog__label">*行业</div>
+      <!-- 已选行业标签列表 -->
+      <div class="job-goal-dialog__tags">
+        <span
+          v-for="(item, index) in form.industries"
+          :key="index"
+          class="job-goal-dialog__tag"
+        >
+          {{ item }}
+          <!-- 删除行业标签 -->
+          <el-icon class="job-goal-dialog__tag-close" @click="removeIndustry(index)"><Close /></el-icon>
+        </span>
+      </div>
+      <!-- 行业下拉选择器 -->
+      <el-select
+        v-model="newIndustry"
+        placeholder="新增行业"
+        filterable
+        class="job-goal-dialog__select"
+        @change="addIndustry"
+      >
+        <el-option
+          v-for="opt in industryOptions"
+          :key="opt"
+          :label="opt"
+          :value="opt"
+        />
+      </el-select>
+    </div>
+
+    <!-- 城市选择模块 -->
+    <div class="job-goal-dialog__section ">
+      <div class="job-goal-dialog__label">*城市</div>
+      <!-- 已选城市标签列表 -->
+      <div class="job-goal-dialog__tags">
+        <span
+          v-for="(item, index) in form.cities"
+          :key="index"
+          class="job-goal-dialog__tag"
+        >
+          {{ item }}
+          <!-- 删除城市标签 -->
+          <el-icon class="job-goal-dialog__tag-close" @click="removeCity(index)"><Close /></el-icon>
+        </span>
+      </div>
+      <!-- 城市下拉选择器 -->
+      <el-select
+        v-model="newCity"
+        placeholder="新增城市"
+        filterable
+        class="job-goal-dialog__select"
+        @change="addCity"
+      >
+        <el-option
+          v-for="opt in cityOptions"
+          :key="opt"
+          :label="opt"
+          :value="opt"
+        />
+      </el-select>
+    </div>
+
+    <!-- 工作类型选择模块 -->
+    <div class="job-goal-dialog__section ">
+      <div class="job-goal-dialog__label">*工作类型</div>
+      <!-- 工作类型按钮组 -->
+      <div class="job-goal-dialog__type-group">
+        <button
+          v-for="t in jobTypes"
+          :key="t"
+          class="job-goal-dialog__type-btn"
+          :class="{ 'job-goal-dialog__type-btn--active': form.jobType === t }"
+          @click="form.jobType = t"
+        >
+          {{ t }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 保存按钮区域 -->
+    <div class="job-goal-dialog__footer mt10">
+      <button class="job-goal-dialog__save-btn" @click="handleSave">保存</button>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { Close } from '@element-plus/icons-vue'
+
+/** 组件属性：控制弹窗显示/隐藏 */
+const props = defineProps<{ modelValue: boolean }>()
+
+/** 组件事件：更新弹窗状态、保存表单数据 */
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void
+  (e: 'save', data: { positions: string[]; industries: string[]; cities: string[]; jobType: string }): void
+}>()
+
+/** 弹窗可见状态 */
+const visible = ref(props.modelValue)
+/** 监听外部传入的 modelValue 同步弹窗状态 */
+watch(() => props.modelValue, (v) => { visible.value = v })
+/** 监听弹窗状态变化并通知父组件 */
+watch(visible, (v) => { emit('update:modelValue', v) })
+
+/** 表单数据 */
+const form = reactive({
+  /** 已选岗位列表 */
+  positions: ['产品经理'] as string[],
+  /** 已选行业列表 */
+  industries: ['互联网'] as string[],
+  /** 已选城市列表 */
+  cities: ['北京'] as string[],
+  /** 工作类型 */
+  jobType: '全职',
+})
+
+/** 新增岗位的绑定值 */
+const newPosition = ref('')
+/** 新增行业的绑定值 */
+const newIndustry = ref('')
+/** 新增城市的绑定值 */
+const newCity = ref('')
+
+/** 岗位选项列表 */
+const positionOptions = ['产品经理', '前端工程师', '后端工程师', 'UI设计师', '数据分析师', '运营', '市场营销']
+/** 行业选项列表 */
+const industryOptions = ['互联网', '金融', '教育', '医疗健康', '电子商务', '人工智能', '游戏', '新能源', '房地产', '制造业']
+/** 城市选项列表 */
+const cityOptions = ['北京', '上海', '广州', '深圳', '杭州', '成都', '南京', '武汉']
+/** 工作类型选项列表 */
+const jobTypes = ['实习', '全职']
+
+/**
+ * 添加岗位
+ * @param val 选中的岗位名称
+ */
+function addPosition(val: string) {
+  if (val && !form.positions.includes(val)) {
+    form.positions.push(val)
+  }
+  newPosition.value = ''
+}
+
+/**
+ * 移除岗位
+ * @param index 要移除的岗位索引
+ */
+function removePosition(index: number) {
+  form.positions.splice(index, 1)
+}
+
+/**
+ * 添加行业
+ * @param val 选中的行业名称
+ */
+function addIndustry(val: string) {
+  if (val && !form.industries.includes(val)) {
+    form.industries.push(val)
+  }
+  newIndustry.value = ''
+}
+
+/**
+ * 移除行业
+ * @param index 要移除的行业索引
+ */
+function removeIndustry(index: number) {
+  form.industries.splice(index, 1)
+}
+
+/**
+ * 添加城市
+ * @param val 选中的城市名称
+ */
+function addCity(val: string) {
+  if (val && !form.cities.includes(val)) {
+    form.cities.push(val)
+  }
+  newCity.value = ''
+}
+
+/**
+ * 移除城市
+ * @param index 要移除的城市索引
+ */
+function removeCity(index: number) {
+  form.cities.splice(index, 1)
+}
+
+/**
+ * 保存表单数据并关闭弹窗
+ */
+function handleSave() {
+  emit('save', {
+    ...form,
+    positions: [...form.positions],
+    industries: [...form.industries],
+    cities: [...form.cities],
+  })
+  visible.value = false
+}
+
+/**
+ * 关闭弹窗
+ */
+function handleClose() {
+  visible.value = false
+}
+</script>
diff --git a/src/components/JobPageHeader.vue b/src/components/JobPageHeader.vue
new file mode 100644
index 0000000..01e8097
--- /dev/null
+++ b/src/components/JobPageHeader.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <div class="job-page-header">
+      <h2 class="job-page-header__title">发现理想职位</h2>
+      <p class="job-page-header__subtitle">找到最适合你的工作机会</p>
+    </div>
+    <div class="job-page-header__tabs">
+      <div
+        v-for="tab in tabs"
+        :key="tab.key"
+        class="job-page-header__tab"
+        :class="{ 'job-page-header__tab--active': activeTab === tab.key }"
+        @click="handleTabClick(tab.key)"
+      >
+        {{ tab.label }}
+      </div>
+      <button class="job-page-header__goal-btn" @click="showGoalDialog = true">
+        我的求职目标
+      </button>
+    </div>
+
+    <JobGoalDialog v-model="showGoalDialog" @save="onGoalSave" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import JobGoalDialog from './JobGoalDialog.vue'
+
+const showGoalDialog = ref(false)
+
+function onGoalSave(data: { positions: string[]; cities: string[]; jobType: string }) {
+  console.log('求职目标已保存', data)
+}
+
+// ==================== Props & Emits ====================
+
+/** activeTab: 当前激活的 Tab key，由父组件通过 v-model 传入 */
+const props = defineProps<{
+  activeTab: string
+}>()
+
+/** 双向绑定事件，在 Jobs 页面内切换 Tab 时触发 */
+const emit = defineEmits<{
+  (e: 'update:activeTab', value: string): void
+}>()
+
+// ==================== 路由相关 ====================
+
+const router = useRouter()
+const route = useRoute()
+
+// ==================== 常量数据 ====================
+
+/** Tab 选项列表 */
+const tabs = [
+  { key: 'recommend', label: '推荐' },
+  { key: 'collected', label: '收藏（1）' },
+  { key: 'applied', label: '已投递（2）' },
+]
+
+// ==================== 事件处理 ====================
+
+/**
+ * Tab 点击处理：
+ * - 在 Jobs 页面：直接切换 activeTab（通过 emit 通知父组件）
+ * - 在其他页面（如 JobDetail）：跳转到 Jobs 页面并携带 tab query 参数
+ */
+function handleTabClick(key: string) {
+  if (route.name === 'Jobs') {
+    emit('update:activeTab', key)
+  } else {
+    router.push({ name: 'Jobs', query: { tab: key } })
+  }
+}
+</script>
diff --git a/src/components/LoginDialog.vue b/src/components/LoginDialog.vue
new file mode 100644
index 0000000..772d3e3
--- /dev/null
+++ b/src/components/LoginDialog.vue
@@ -0,0 +1,148 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    width="480px"
+    :show-close="true"
+    :close-on-click-modal="false"
+    :close-on-press-escape="true"
+    class="login-dialog"
+    @close="handleClose"
+  >
+    <div class="login-page">
+      <h1 class="login-title">欢迎使用Offer派</h1>
+
+      <div class="login-form">
+        <el-input
+          v-model="phone"
+          placeholder="输入手机号"
+          size="large"
+          class="login-input mt20"
+        />
+        <div class="code-row mt12 mb12">
+          <el-input
+            v-model="code"
+            placeholder="输入验证码"
+            size="large"
+            class="login-input"
+          />
+          <el-button
+            class="send-code-btn"
+            :disabled="countdown > 0"
+            @click="sendCode"
+          >
+            {{ countdown > 0 ? countdownText : '发送验证码' }}
+          </el-button>
+        </div>
+
+        <el-button
+          type="primary"
+          size="large"
+          class="login-btn h50 border-ra20"
+          @click="handleLogin"
+        >
+          登录
+        </el-button>
+
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
+import { sendSmsCode, smsLogin } from '@/api/auth'
+
+const store = useStore()
+const router = useRouter()
+
+const phone = ref('')
+const code = ref('')
+const countdown = ref(0)
+let timer: ReturnType<typeof setInterval> | null = null
+
+/** 倒计时显示文本，格式 m:ss */
+const countdownText = computed(() => {
+  const m = Math.floor(countdown.value / 60)
+  const s = countdown.value % 60
+  return `${m}:${s.toString().padStart(2, '0')}`
+})
+
+const visible = computed({
+  get: () => store.state.showLogin,
+  set: (val: boolean) => {
+    if (!val) store.dispatch('closeLogin')
+  },
+})
+
+//发送验证码
+async function sendCode() {
+  if (!phone.value) {
+    ElMessage.warning('请输入手机号')
+    return
+  }
+  try {
+    const res = await sendSmsCode(phone.value)
+    if (res.code === '0' && res.data === true) {
+      ElMessage.success('验证码已发送')
+      countdown.value = 300
+      timer = setInterval(() => {
+        countdown.value--
+        if (countdown.value <= 0 && timer) {
+          clearInterval(timer)
+          timer = null
+        }
+      }, 1000)
+    } else {
+      ElMessage.error(res.msg || '验证码发送失败')
+    }
+  } catch {
+    // 错误已在 request 拦截器中统一处理
+  }
+}
+
+/**
+ * 登录流程：
+ * 1. 调 smsLogin 接口，后端成功会 Set-Cookie: Token=xxx
+ * 2. Cookie 自动保持登录状态，不再存 localStorage
+ * 3. 关闭弹窗，跳转到登录前想去的页面
+ */
+async function handleLogin() {
+  if (!phone.value || !code.value) {
+    ElMessage.warning('请输入手机号和验证码')
+    return
+  }
+  try {
+    const res = await smsLogin(phone.value, code.value)
+    if (res.code !== '0') {
+      ElMessage.error(res.msg || '登录失败')
+      return
+    }
+
+    // 登录成功，Cookie Token 已由后端 Set-Cookie 写入
+    ElMessage.success(`欢迎回来，${res.data?.nick || ''}`)
+
+    // 清除验证码倒计时，登录成功后解除发送限制
+    if (timer) {
+      clearInterval(timer)
+      timer = null
+    }
+    countdown.value = 0
+
+    store.commit('SET_AUTHENTICATED', true)
+
+    const redirect = store.state.loginRedirect
+    store.dispatch('closeLogin')
+    if (redirect) {
+      router.push(redirect)
+    }
+  } catch {
+    // 错误已在 request 拦截器中统一处理
+  }
+}
+
+function handleClose() {
+  store.dispatch('closeLogin')
+}
+</script>
diff --git a/src/components/MemberDialog.vue b/src/components/MemberDialog.vue
new file mode 100644
index 0000000..838861f
--- /dev/null
+++ b/src/components/MemberDialog.vue
@@ -0,0 +1,162 @@
+<template>
+  <!-- 会员购买弹窗 — 通过 Teleport 挂载到 body -->
+  <Teleport to="body">
+    <!-- 遮罩层 — 点击关闭弹窗 -->
+    <div v-if="modelValue" class="member-dialog-overlay" @click="$emit('update:modelValue', false)">
+      <!-- 弹窗主体 — 阻止点击冒泡 -->
+      <div class="member-dialog" @click.stop>
+        <!-- 右上角关闭按钮 -->
+        <span class="member-dialog__close" @click="$emit('update:modelValue', false)">✕</span>
+
+        <!-- 顶部标语 -->
+        <div class="member-dialog__slogan">每天不到一元，获得三倍面试机会！</div>
+
+        <!-- 套餐卡片区域 -->
+        <div class="member-dialog__plans">
+          <div
+            v-for="plan in plans"
+            :key="plan.key"
+            class="member-dialog__plan-card"
+            :class="{ 'member-dialog__plan-card--active': selectedPlan === plan.key }"
+            @click="selectedPlan = plan.key"
+          >
+            <!-- 套餐名称 -->
+            <div class="member-dialog__plan-name">{{ plan.name }}</div>
+            <!-- 原价（划线） -->
+            <div class="member-dialog__plan-original">{{ plan.originalPrice }}</div>
+            <!-- 现价 -->
+            <div class="member-dialog__plan-price">
+              <span class="member-dialog__plan-price-num">¥{{ plan.price }}</span>
+              <span class="member-dialog__plan-price-unit">/{{ plan.unit }}</span>
+              <!-- 省钱标签 -->
+              <span v-if="plan.discount" class="member-dialog__plan-discount">省{{ plan.discount }}</span>
+            </div>
+            <!-- 立刻升级按钮 -->
+            <button class="member-dialog__plan-btn" @click.stop="handleUpgrade(plan)">立刻升级</button>
+          </div>
+        </div>
+
+        <!-- 权益对比区域 -->
+        <div class="member-dialog__benefits">
+          <!-- 左列：面试率提升工具 -->
+          <div class="member-dialog__benefit-col">
+            <div class="member-dialog__benefit-title">面试率提升工具</div>
+            <div
+              v-for="item in toolList"
+              :key="item"
+              class="member-dialog__benefit-item"
+            >{{ item }}</div>
+            <div class="member-dialog__benefit-other">
+              其他渠道购买 <span class="member-dialog__benefit-highlight">¥210/月</span>
+            </div>
+          </div>
+
+          <!-- 中列：会员权益 -->
+          <div class="member-dialog__benefit-col member-dialog__benefit-col--center">
+            <div class="member-dialog__benefit-title member-dialog__benefit-title--accent">会员权益</div>
+            <div
+              v-for="item in memberBenefits"
+              :key="item.label"
+              class="member-dialog__benefit-item"
+            >
+              <span class="member-dialog__benefit-badge">{{ item.badge }}</span>
+              <span>{{ item.label }}</span>
+            </div>
+            <div class="member-dialog__benefit-other">
+              打包价 <span class="member-dialog__benefit-highlight">¥19.99/月</span>
+            </div>
+          </div>
+
+          <!-- 右列：免费权益（当前） -->
+          <div class="member-dialog__benefit-col">
+            <div class="member-dialog__benefit-title">免费权益（当前）</div>
+            <div
+              v-for="item in freeBenefits"
+              :key="item"
+              class="member-dialog__benefit-item"
+            >{{ item }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+/** 组件 Props — 控制弹窗显示/隐藏 */
+const props = defineProps<{ modelValue: boolean }>()
+
+/** 组件 Emits — 通知父组件更新 modelValue */
+defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
+
+// ==================== 类型定义 ====================
+
+/** 套餐项类型 */
+interface PlanItem {
+  key: string
+  name: string
+  originalPrice: string
+  price: string
+  unit: string
+  discount: string
+}
+
+// ==================== 状态 ====================
+
+/** 当前选中的套餐 */
+const selectedPlan = ref('monthly')
+
+/** 监听弹窗开关 — 打开时锁定背景滚动，关闭时恢复 */
+watch(() => props.modelValue, (val) => {
+  document.body.style.overflow = val ? 'hidden' : ''
+})
+
+// ==================== 常量数据 ====================
+
+/** 套餐列表 */
+const plans: PlanItem[] = [
+  { key: 'quarterly', name: '季度会员', originalPrice: '¥149.97 / 3个月', price: '49.99', unit: '3个月', discount: '67%' },
+  { key: 'monthly', name: '月度会员', originalPrice: '¥49.99 / 1个月', price: '19.99', unit: '月', discount: '60%' },
+  { key: 'weekly', name: '周会员', originalPrice: '¥71.96 / 1个月', price: '17.99', unit: '1周', discount: '' },
+]
+
+/** 面试率提升工具列表 */
+const toolList = [
+  'AI 求职助手',
+  'AI 针对性简历优化',
+  '1V1真人导师',
+  '一键自动填写网申信息',
+  '内推码',
+  '实时岗位更新提醒',
+]
+
+/** 会员权益列表 */
+const memberBenefits = [
+  { badge: '无限', label: '自动化网申流程' },
+  { badge: '无限', label: '简历过筛率提升' },
+  { badge: '✓', label: '找工作不孤单' },
+  { badge: '无限', label: '每一次网申节约15Min' },
+  { badge: '无限', label: '自动填写最新内推码' },
+  { badge: '无限', label: '第一时间投递高质量岗位' },
+]
+
+/** 免费权益列表 */
+const freeBenefits = [
+  '受限',
+  '2次/天',
+  '不支持',
+  '4次/天',
+  '4次/天',
+  '1次/天',
+]
+
+// ==================== 事件处理 ====================
+
+/** 点击立刻升级按钮 */
+function handleUpgrade(plan: PlanItem) {
+  // TODO: 接入支付接口
+  ElMessage.success(`正在跳转 ${plan.name} 支付页面...`)
+}
+</script>
diff --git a/src/components/ProfileEditDrawer.vue b/src/components/ProfileEditDrawer.vue
new file mode 100644
index 0000000..4529b47
--- /dev/null
+++ b/src/components/ProfileEditDrawer.vue
@@ -0,0 +1,1244 @@
+<template>
+  <!-- 个人资料编辑抽屉 — 从右侧滑入，占满屏幕高度 -->
+  <Teleport to="body">
+    <!-- 遮罩层 -->
+    <Transition name="profile-drawer-overlay">
+      <div
+        v-if="modelValue"
+        class="profile-drawer-overlay"
+        @click="handleClose"
+      />
+    </Transition>
+
+    <!-- 抽屉主体 -->
+    <Transition name="profile-drawer-slide">
+      <div v-if="modelValue" class="profile-drawer" @click.stop>
+        <!-- 顶部栏：关闭按钮 + 模块标题 -->
+        <div class="profile-drawer__header">
+          <button class="profile-drawer__close-btn" @click="handleClose" aria-label="关闭">
+            <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__close-icon">
+              <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+          </button>
+          <h3 class="profile-drawer__title">{{ moduleTitle }}</h3>
+        </div>
+
+        <!-- 表单内容区 — 根据模块名动态渲染不同字段 -->
+        <div class="profile-drawer__body">
+          <!-- ========== 基本信息模块 ========== -->
+          <template v-if="module === 'info'">
+            <div
+              v-for="field in infoFields"
+              :key="field.key"
+              class="profile-drawer__field"
+            >
+              <label class="profile-drawer__label">
+                <span v-if="field.required" class="profile-drawer__required">*</span>{{ field.label }}
+              </label>
+              <!-- 城市字段：使用地区选择组件替代普通输入框 -->
+              <RegionSelector
+                v-if="field.key === 'location'"
+                :regionCodes="locationCodes"
+                :level="2"
+                :maxSelect="1"
+                :triggerStyle="regionTriggerStyle"
+                @update:regionCodes="onLocationChange"
+              />
+              <!-- 其他字段：普通输入框 -->
+              <input
+                v-else
+                class="profile-drawer__input"
+                :type="field.type || 'text'"
+                :placeholder="field.placeholder"
+                v-model="formData[field.key]"
+              />
+            </div>
+          </template>
+
+          <!-- ========== 教育经历模块 ========== -->
+          <template v-else-if="module === 'education'">
+            <div
+              v-for="(edu, index) in educationList"
+              :key="index"
+              class="profile-drawer__edu-card"
+            >
+              <!-- 教育经历标题栏：序号 + 删除按钮 -->
+              <div class="profile-drawer__edu-header">
+                <span class="profile-drawer__edu-index">
+                  <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-index-icon">
+                    <circle cx="8" cy="8" r="3" fill="currentColor"/>
+                  </svg>
+                  教育经历{{ index + 1 }}
+                </span>
+                <button
+                  v-if="educationList.length > 1"
+                  class="profile-drawer__edu-delete"
+                  @click="removeEducation(index)"
+                  aria-label="删除"
+                >
+                  <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-delete-icon">
+                    <path d="M3 4h10M6 4V3a1 1 0 011-1h2a1 1 0 011 1v1M5 4v8a1 1 0 001 1h4a1 1 0 001-1V4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </button>
+              </div>
+
+              <!-- 学校 -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">
+                  <span class="profile-drawer__required">*</span>学校
+                </label>
+                <div class="profile-drawer__select-wrap">
+                  <input class="profile-drawer__input" placeholder="请输入学校名称" v-model="edu.school" />
+                </div>
+              </div>
+
+              <!-- 专业 -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">
+                  <span class="profile-drawer__required">*</span>专业
+                </label>
+                <div class="profile-drawer__select-wrap">
+                  <input class="profile-drawer__input" placeholder="请输入专业名称" v-model="edu.major" />
+                </div>
+              </div>
+
+              <!-- 学历类型 + 学历（横排） -->
+              <div class="profile-drawer__row">
+                <div class="profile-drawer__field profile-drawer__field--half">
+                  <label class="profile-drawer__label">
+                    <span class="profile-drawer__required">*</span>学历类型
+                  </label>
+                  <div class="profile-drawer__select-wrap">
+                    <select class="profile-drawer__input" v-model.number="edu.studyType">
+                      <option :value="0">全日制</option>
+                      <option :value="1">非全日制</option>
+                    </select>
+                    <!-- <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__select-arrow"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> -->
+                  </div>
+                </div>
+                <div class="profile-drawer__field profile-drawer__field--half">
+                  <label class="profile-drawer__label">
+                    <span class="profile-drawer__required">*</span>学历
+                  </label>
+                  <div class="profile-drawer__select-wrap">
+                    <select class="profile-drawer__input" v-model.number="edu.degree">
+                      <option :value="1">大专</option>
+                      <option :value="2">本科</option>
+                      <option :value="3">硕士</option>
+                      <option :value="4">博士</option>
+                    </select>
+                    <!-- <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__select-arrow"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> -->
+                  </div>
+                </div>
+              </div>
+
+              <!-- 入学年份 + 毕业年份（横排） -->
+              <div class="profile-drawer__row">
+                <div class="profile-drawer__field profile-drawer__field--half">
+                  <label class="profile-drawer__label">
+                    <span class="profile-drawer__required">*</span>入学年份
+                  </label>
+                  <el-date-picker
+                    v-model="edu.startDate"
+                    type="month"
+                    placeholder="请选择入学年份"
+                    format="YYYY-MM"
+                    value-format="YYYY-MM"
+                    class="profile-drawer__date-picker"
+                    :teleported="true"
+                    popper-class="profile-drawer-date-popper"
+                  />
+                </div>
+                <div class="profile-drawer__field profile-drawer__field--half">
+                  <label class="profile-drawer__label">
+                    <span class="profile-drawer__required">*</span>毕业年份
+                  </label>
+                  <el-date-picker
+                    v-model="edu.endDate"
+                    type="month"
+                    placeholder="请选择毕业年份"
+                    format="YYYY-MM"
+                    value-format="YYYY-MM"
+                    class="profile-drawer__date-picker"
+                    :teleported="true"
+                    popper-class="profile-drawer-date-popper"
+                  />
+                </div>
+              </div>
+
+              <!-- 经历描述 — 分段编辑，每段带删除按钮 -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">经历描述</label>
+                <!-- 描述段落列表 -->
+                <div
+                  v-for="(desc, dIdx) in edu.description"
+                  :key="desc.id"
+                  class="profile-drawer__desc-item"
+                >
+                  <textarea
+                    class="profile-drawer__textarea profile-drawer__textarea--short"
+                    placeholder="请输入经历描述"
+                    v-model="desc.text"
+                    rows="4"
+                  ></textarea>
+                  <!-- 段落内右侧删除按钮 -->
+                  <button
+                    v-if="edu.description.length > 1"
+                    class="profile-drawer__desc-remove"
+                    @click="removeEducationDescriptionParagraph(index, dIdx)"
+                    aria-label="删除该段描述"
+                  >
+                    <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__desc-remove-icon">
+                      <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                    </svg>
+                  </button>
+                </div>
+                <!-- 新增一段描述按钮 -->
+                <button class="profile-drawer__add-btn profile-drawer__add-btn--small" @click="addEducationDescriptionParagraph(index)">
+                  <span class="profile-drawer__add-icon">+</span> 新增一段描述
+                </button>
+              </div>
+            </div>
+
+            <!-- 新增教育经历按钮 -->
+            <button class="profile-drawer__add-btn wp100 mb20" @click="addEducation">
+              <span class="profile-drawer__add-icon">+</span> 新增教育经历
+            </button>
+          </template>
+
+          <!-- ========== 工作经历模块 ========== -->
+          <template v-else-if="module === 'work'">
+            <div
+              v-for="(work, index) in workList"
+              :key="index"
+              class="profile-drawer__edu-card"
+            >
+              <!-- 工作经历标题栏：序号 + 删除按钮 -->
+              <div class="profile-drawer__edu-header">
+                <span class="profile-drawer__edu-index">
+                  <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-index-icon">
+                    <circle cx="8" cy="8" r="3" fill="currentColor"/>
+                  </svg>
+                  工作经历{{ index + 1 }}
+                </span>
+                <button
+                  v-if="workList.length > 1"
+                  class="profile-drawer__edu-delete"
+                  @click="removeWork(index)"
+                  aria-label="删除"
+                >
+                  <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-delete-icon">
+                    <path d="M3 4h10M6 4V3a1 1 0 011-1h2a1 1 0 011 1v1M5 4v8a1 1 0 001 1h4a1 1 0 001-1V4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </button>
+              </div>
+
+              <!-- 公司名称 -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">
+                  <span class="profile-drawer__required">*</span>公司名称
+                </label>
+                <div class="profile-drawer__select-wrap">
+                  <input class="profile-drawer__input" placeholder="请输入公司名称" v-model="work.companyName" />
+                </div>
+              </div>
+
+              <!-- 职位 -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">
+                  <span class="profile-drawer__required">*</span>职位
+                </label>
+                <div class="profile-drawer__select-wrap">
+                  <input class="profile-drawer__input" placeholder="请输入职位" v-model="work.position" />
+                </div>
+              </div>
+
+              <!-- 开始时间 + 结束时间（横排） -->
+              <div class="profile-drawer__row">
+                <div class="profile-drawer__field profile-drawer__field--half">
+                  <label class="profile-drawer__label">
+                    <span class="profile-drawer__required">*</span>开始时间
+                  </label>
+                  <el-date-picker
+                    v-model="work.startDate"
+                    type="month"
+                    placeholder="请输入开始时间"
+                    format="YYYY-MM"
+                    value-format="YYYY-MM"
+                    class="profile-drawer__date-picker"
+                    :teleported="true"
+                    popper-class="profile-drawer-date-popper"
+                  />
+                </div>
+                <div class="profile-drawer__field profile-drawer__field--half">
+                  <label class="profile-drawer__label">
+                    <span class="profile-drawer__required">*</span>结束时间
+                  </label>
+                  <el-date-picker
+                    v-model="work.endDate"
+                    type="month"
+                    placeholder="请输入结束时间"
+                    format="YYYY-MM"
+                    value-format="YYYY-MM"
+                    class="profile-drawer__date-picker"
+                    :teleported="true"
+                    popper-class="profile-drawer-date-popper"
+                  />
+                </div>
+              </div>
+
+              <!-- 经历描述 — 分段编辑，每段带删除按钮 -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">
+                  <span class="profile-drawer__required">*</span>经历描述
+                </label>
+                <!-- 描述段落列表 -->
+                <div
+                  v-for="(desc, dIdx) in work.description"
+                  :key="desc.id"
+                  class="profile-drawer__desc-item"
+                >
+                  <textarea
+                    class="profile-drawer__textarea profile-drawer__textarea--short"
+                    placeholder="请输入经历描述"
+                    v-model="desc.text"
+                    rows="4"
+                  ></textarea>
+                  <!-- 段落内右侧删除按钮 -->
+                  <button
+                    v-if="work.description.length > 1"
+                    class="profile-drawer__desc-remove"
+                    @click="removeWorkDescriptionParagraph(index, dIdx)"
+                    aria-label="删除该段描述"
+                  >
+                    <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__desc-remove-icon">
+                      <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                    </svg>
+                  </button>
+                </div>
+                <!-- 新增一段描述按钮 -->
+                <button class="profile-drawer__add-btn profile-drawer__add-btn--small" @click="addWorkDescriptionParagraph(index)">
+                  <span class="profile-drawer__add-icon">+</span> 新增一段描述
+                </button>
+              </div>
+            </div>
+
+            <!-- 新增工作经历按钮 -->
+            <button class="profile-drawer__add-btn wp100 mb20" @click="addWork">
+              <span class="profile-drawer__add-icon">+</span> 新增工作经历
+            </button>
+          </template>
+
+          <!-- ========== 实习经历模块 ========== -->
+          <template v-else-if="module === 'internship'">
+            <div
+              v-for="(intern, index) in internshipList"
+              :key="index"
+              class="profile-drawer__edu-card"
+            >
+              <!-- 实习经历标题栏：序号 + 删除按钮 -->
+              <div class="profile-drawer__edu-header">
+                <span class="profile-drawer__edu-index">
+                  <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-index-icon">
+                    <circle cx="8" cy="8" r="3" fill="currentColor"/>
+                  </svg>
+                  实习经历{{ index + 1 }}
+                </span>
+                <button
+                  v-if="internshipList.length > 1"
+                  class="profile-drawer__edu-delete"
+                  @click="removeInternship(index)"
+                  aria-label="删除"
+                >
+                  <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-delete-icon">
+                    <path d="M3 4h10M6 4V3a1 1 0 011-1h2a1 1 0 011 1v1M5 4v8a1 1 0 001 1h4a1 1 0 001-1V4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </button>
+              </div>
+
+              <!-- 公司名称 -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">
+                  <span class="profile-drawer__required">*</span>公司名称
+                </label>
+                <div class="profile-drawer__select-wrap">
+                  <input class="profile-drawer__input" placeholder="请输入公司名称" v-model="intern.companyName" />
+                </div>
+              </div>
+
+              <!-- 职位 -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">
+                  <span class="profile-drawer__required">*</span>职位
+                </label>
+                <div class="profile-drawer__select-wrap">
+                  <input class="profile-drawer__input" placeholder="请输入职位" v-model="intern.position" />
+                </div>
+              </div>
+
+              <!-- 开始时间 + 结束时间（横排） -->
+              <div class="profile-drawer__row">
+                <div class="profile-drawer__field profile-drawer__field--half">
+                  <label class="profile-drawer__label">
+                    <span class="profile-drawer__required">*</span>开始时间
+                  </label>
+                  <el-date-picker
+                    v-model="intern.startDate"
+                    type="month"
+                    placeholder="请输入开始时间"
+                    format="YYYY-MM"
+                    value-format="YYYY-MM"
+                    class="profile-drawer__date-picker"
+                    :teleported="true"
+                    popper-class="profile-drawer-date-popper"
+                  />
+                </div>
+                <div class="profile-drawer__field profile-drawer__field--half">
+                  <label class="profile-drawer__label">
+                    <span class="profile-drawer__required">*</span>结束时间
+                  </label>
+                  <el-date-picker
+                    v-model="intern.endDate"
+                    type="month"
+                    placeholder="请输入结束时间"
+                    format="YYYY-MM"
+                    value-format="YYYY-MM"
+                    class="profile-drawer__date-picker"
+                    :teleported="true"
+                    popper-class="profile-drawer-date-popper"
+                  />
+                </div>
+              </div>
+
+              <!-- 经历描述 — 分段编辑，每段带删除按钮 -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">
+                  <span class="profile-drawer__required">*</span>经历描述
+                </label>
+                <!-- 描述段落列表 -->
+                <div
+                  v-for="(desc, dIdx) in intern.description"
+                  :key="desc.id"
+                  class="profile-drawer__desc-item"
+                >
+                  <textarea
+                    class="profile-drawer__textarea profile-drawer__textarea--short"
+                    placeholder="请输入经历描述"
+                    v-model="desc.text"
+                    rows="4"
+                  ></textarea>
+                  <!-- 段落内右侧删除按钮 -->
+                  <button
+                    v-if="intern.description.length > 1"
+                    class="profile-drawer__desc-remove"
+                    @click="removeInternDescriptionParagraph(index, dIdx)"
+                    aria-label="删除该段描述"
+                  >
+                    <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__desc-remove-icon">
+                      <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                    </svg>
+                  </button>
+                </div>
+                <!-- 新增一段描述按钮 -->
+                <button class="profile-drawer__add-btn profile-drawer__add-btn--small" @click="addInternDescriptionParagraph(index)">
+                  <span class="profile-drawer__add-icon">+</span> 新增一段描述
+                </button>
+              </div>
+            </div>
+
+            <!-- 新增实习经历按钮 -->
+            <button class="profile-drawer__add-btn wp100 mb20" @click="addInternship">
+              <span class="profile-drawer__add-icon">+</span> 新增实习经历
+            </button>
+          </template>
+
+          <!-- ========== 项目经历模块 ========== -->
+          <template v-else-if="module === 'project'">
+            <div
+              v-for="(proj, index) in projectList"
+              :key="index"
+              class="profile-drawer__edu-card"
+            >
+              <!-- 项目经历标题栏：序号 + 删除按钮 -->
+              <div class="profile-drawer__edu-header">
+                <span class="profile-drawer__edu-index">
+                  <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-index-icon">
+                    <circle cx="8" cy="8" r="3" fill="currentColor"/>
+                  </svg>
+                  项目经历{{ index + 1 }}
+                </span>
+                <button
+                  v-if="projectList.length > 1"
+                  class="profile-drawer__edu-delete"
+                  @click="removeProject(index)"
+                  aria-label="删除"
+                >
+                  <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-delete-icon">
+                    <path d="M3 4h10M6 4V3a1 1 0 011-1h2a1 1 0 011 1v1M5 4v8a1 1 0 001 1h4a1 1 0 001-1V4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </button>
+              </div>
+
+              <!-- 项目名称 -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">
+                  <span class="profile-drawer__required">*</span>项目名称
+                </label>
+                <div class="profile-drawer__select-wrap">
+                  <input class="profile-drawer__input" placeholder="请输入项目名称" v-model="proj.projectName" />
+                  <!-- <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__select-arrow"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> -->
+                </div>
+              </div>
+
+              <!-- 项目角色 -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">
+                  <span class="profile-drawer__required">*</span>项目角色
+                </label>
+                <div class="profile-drawer__select-wrap">
+                  <input class="profile-drawer__input" placeholder="请输入项目角色" v-model="proj.role" />
+                </div>
+              </div>
+
+              <!-- 开始时间 + 结束时间（横排） -->
+              <div class="profile-drawer__row">
+                <div class="profile-drawer__field profile-drawer__field--half">
+                  <label class="profile-drawer__label">
+                    <span class="profile-drawer__required">*</span>开始时间
+                  </label>
+                  <el-date-picker
+                    v-model="proj.startDate"
+                    type="month"
+                    placeholder="请输入开始时间"
+                    format="YYYY-MM"
+                    value-format="YYYY-MM"
+                    class="profile-drawer__date-picker"
+                    :teleported="true"
+                    popper-class="profile-drawer-date-popper"
+                  />
+                </div>
+                <div class="profile-drawer__field profile-drawer__field--half">
+                  <label class="profile-drawer__label">
+                    <span class="profile-drawer__required">*</span>结束时间
+                  </label>
+                  <el-date-picker
+                    v-model="proj.endDate"
+                    type="month"
+                    placeholder="请输入结束时间"
+                    format="YYYY-MM"
+                    value-format="YYYY-MM"
+                    class="profile-drawer__date-picker"
+                    :teleported="true"
+                    popper-class="profile-drawer-date-popper"
+                  />
+                </div>
+              </div>
+
+              <!-- 经历描述 — 分段编辑，每段带删除按钮 -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">
+                  <span class="profile-drawer__required">*</span>经历描述
+                </label>
+                <!-- 描述段落列表 -->
+                <div
+                  v-for="(desc, dIdx) in proj.description"
+                  :key="desc.id"
+                  class="profile-drawer__desc-item"
+                >
+                  <textarea
+                    class="profile-drawer__textarea profile-drawer__textarea--short"
+                    placeholder="请输入经历描述"
+                    v-model="desc.text"
+                    rows="4"
+                  ></textarea>
+                  <!-- 段落内右侧删除按钮 -->
+                  <button
+                    v-if="proj.description.length > 1"
+                    class="profile-drawer__desc-remove"
+                    @click="removeDescriptionParagraph(index, dIdx)"
+                    aria-label="删除该段描述"
+                  >
+                    <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__desc-remove-icon">
+                      <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                    </svg>
+                  </button>
+                </div>
+                <!-- 新增一段描述按钮 -->
+                <button class="profile-drawer__add-btn profile-drawer__add-btn--small" @click="addDescriptionParagraph(index)">
+                  <span class="profile-drawer__add-icon">+</span> 新增一段描述
+                </button>
+              </div>
+            </div>
+
+            <!-- 新增项目经历按钮 -->
+            <button class="profile-drawer__add-btn wp100 mb20" @click="addProject">
+              <span class="profile-drawer__add-icon">+</span> 新增项目经历
+            </button>
+          </template>
+
+          <!-- ========== 竞赛模块 ========== -->
+          <template v-else-if="module === 'competition'">
+            <div
+              v-for="(comp, index) in competitionList"
+              :key="index"
+              class="profile-drawer__edu-card"
+            >
+              <!-- 竞赛经历标题栏：序号 + 删除按钮 -->
+              <div class="profile-drawer__edu-header">
+                <span class="profile-drawer__edu-index">
+                  <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-index-icon">
+                    <circle cx="8" cy="8" r="3" fill="currentColor"/>
+                  </svg>
+                  竞赛经历{{ index + 1 }}
+                </span>
+                <button
+                  v-if="competitionList.length > 1"
+                  class="profile-drawer__edu-delete"
+                  @click="removeCompetition(index)"
+                  aria-label="删除"
+                >
+                  <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__edu-delete-icon">
+                    <path d="M3 4h10M6 4V3a1 1 0 011-1h2a1 1 0 011 1v1M5 4v8a1 1 0 001 1h4a1 1 0 001-1V4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </button>
+              </div>
+
+              <!-- 竞赛名称 -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">
+                  <span class="profile-drawer__required">*</span>竞赛名称
+                </label>
+                <div class="profile-drawer__select-wrap">
+                  <input class="profile-drawer__input" placeholder="请输入竞赛名称" v-model="comp.competitionName" />
+                  <!-- <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__select-arrow"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> -->
+                </div>
+              </div>
+
+              <!-- 获奖名次 -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">
+                  <span class="profile-drawer__required">*</span>获奖名次
+                </label>
+                <input class="profile-drawer__input" placeholder="请输入获奖名次" v-model="comp.award" />
+              </div>
+
+              <!-- 获奖时间 -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">
+                  <span class="profile-drawer__required">*</span>获奖时间
+                </label>
+                <el-date-picker
+                  v-model="comp.awardDate"
+                  type="month"
+                  placeholder="请选择获奖时间"
+                  format="YYYY-MM"
+                  value-format="YYYY-MM"
+                  class="profile-drawer__date-picker"
+                  :teleported="true"
+                  popper-class="profile-drawer-date-popper"
+                />
+              </div>
+
+              <!-- 获奖情况描述 — 单段 textarea -->
+              <div class="profile-drawer__field">
+                <label class="profile-drawer__label">获奖情况描述</label>
+                <textarea
+                  class="profile-drawer__textarea"
+                  placeholder="请输入获奖详情"
+                  v-model="comp.description[0].text"
+                  rows="5"
+                ></textarea>
+              </div>
+            </div>
+
+            <!-- 新增获奖经历按钮 -->
+            <button class="profile-drawer__add-btn mb20" @click="addCompetition">
+              <span class="profile-drawer__add-icon">+</span> 新增获奖经历
+            </button>
+          </template>
+
+          <!-- ========== 技能模块 ========== -->
+          <template v-else-if="module === 'skills'">
+            <!-- 技能标签列表 -->
+            <div class="profile-drawer__skills-list">
+              <div
+                v-for="(skill, index) in skillsList"
+                :key="index"
+                class="profile-drawer__skill-tag"
+              >
+                <span class="profile-drawer__skill-text">{{ skill }}</span>
+                <button
+                  class="profile-drawer__skill-remove"
+                  @click="removeSkill(index)"
+                  aria-label="删除技能"
+                >
+                  <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__skill-remove-icon">
+                    <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <!-- 添加技能输入框 -->
+            <div class="profile-drawer__field">
+              <label class="profile-drawer__label">添加新技能</label>
+              <input
+                class="profile-drawer__input"
+                type="text"
+                placeholder="输入技能名称后按回车或失焦自动添加"
+                v-model="newSkillInput"
+                @keydown.enter="handleAddSkill"
+                @blur="handleAddSkill"
+              />
+            </div>
+          </template>
+
+          <!-- ========== 证书模块 ========== -->
+          <template v-else-if="module === 'certificate'">
+            <!-- 证书标签列表 -->
+            <div class="profile-drawer__skills-list">
+              <div
+                v-for="(cert, index) in certificatesList"
+                :key="index"
+                class="profile-drawer__skill-tag"
+              >
+                <span class="profile-drawer__skill-text">{{ cert }}</span>
+                <button
+                  class="profile-drawer__skill-remove"
+                  @click="removeCertificate(index)"
+                  aria-label="删除证书"
+                >
+                  <svg viewBox="0 0 16 16" fill="none" class="profile-drawer__skill-remove-icon">
+                    <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <!-- 添加证书输入框 -->
+            <div class="profile-drawer__field">
+              <label class="profile-drawer__label">添加新证书</label>
+              <input
+                class="profile-drawer__input"
+                type="text"
+                placeholder="输入证书名称后按回车或失焦自动添加"
+                v-model="newCertificateInput"
+                @keydown.enter="handleAddCertificate"
+                @blur="handleAddCertificate"
+              />
+            </div>
+          </template>
+
+          <!-- ========== 其他模块占位 ========== -->
+          <template v-else>
+            <div class="profile-drawer__empty">
+              <p class="profile-drawer__empty-text">{{ moduleTitle }}编辑功能开发中…</p>
+            </div>
+          </template>
+        </div>
+
+        <!-- 底部保存按钮 -->
+        <div class="profile-drawer__footer">
+          <button class="profile-drawer__save-btn" @click="handleSave">保存</button>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useStore } from 'vuex'
+import RegionSelector from '@/components/tools/RegionSelector.vue'
+
+/** 教育经历单条数据结构 — 对应数据库 bg_user_profile_education */
+interface EducationItem {
+  /** 学校名称 */
+  school: string
+  /** 专业 */
+  major: string
+  /** 学历类型（0=全日制 1=非全日制） */
+  studyType: number
+  /** 学历（1=大专 2=本科 3=硕士 4=博士） */
+  degree: number
+  /** 入学时间（日期选择器使用字符串，格式：YYYY-MM） */
+  startDate: string
+  /** 毕业时间（日期选择器使用字符串，格式：YYYY-MM） */
+  endDate: string
+  /** 描述段落数组 */
+  description: DescriptionParagraph[]
+}
+
+/** 实习经历单条数据结构 — 对应数据库 bg_user_profile_internship */
+interface InternshipItem {
+  /** 公司名称 */
+  companyName: string
+  /** 职位 */
+  position: string
+  /** 开始时间 */
+  startDate: string
+  /** 结束时间 */
+  endDate: string
+  /** 描述段落数组 */
+  description: DescriptionParagraph[]
+}
+
+/** 工作经历单条数据结构 — 对应数据库 bg_user_profile_work */
+interface WorkItem {
+  /** 公司名称 */
+  companyName: string
+  /** 职位 */
+  position: string
+  /** 开始时间 */
+  startDate: string
+  /** 结束时间 */
+  endDate: string
+  /** 描述段落数组 */
+  description: DescriptionParagraph[]
+}
+
+/** 描述段落单条数据结构 — 对应数据库 description JSON 数组中的一项 */
+interface DescriptionParagraph {
+  /** 前端生成的短标识，用于简历优化时精确定位段落 */
+  id: string
+  /** 段落文本内容 */
+  text: string
+}
+
+/** 项目经历单条数据结构 — 对应数据库 bg_user_profile_project */
+interface ProjectItem {
+  /** 项目名称 */
+  projectName: string
+  /** 所属公司 */
+  companyName: string
+  /** 担任角色 */
+  role: string
+  /** 开始时间 */
+  startDate: string
+  /** 结束时间 */
+  endDate: string
+  /** 描述段落数组 */
+  description: DescriptionParagraph[]
+}
+
+/** 竞赛经历单条数据结构 — 对应数据库 bg_user_profile_competition */
+interface CompetitionItem {
+  /** 竞赛名称 */
+  competitionName: string
+  /** 获奖情况 */
+  award: string
+  /** 获奖时间 */
+  awardDate: string
+  /** 描述段落（仅一段），格式：[{id, text}] */
+  description: DescriptionParagraph[]
+}
+
+/** 组件 Props */
+const props = defineProps<{
+  /** 控制抽屉显示/隐藏 */
+  modelValue: boolean
+  /** 模块名称标识，如 'info' | 'education' | 'internship' 等 */
+  module: string
+  /** 初始数据 — 不同模块传入不同 JSON 结构 */
+  initialData?: Record<string, any>
+}>()
+
+/** 组件 Emits */
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'save', data: Record<string, any>): void
+}>()
+
+/** Vuex store 实例 — 用于从地区树中查找城市名称 */
+const store = useStore()
+
+/** 模块名称映射表 — 模块标识 → 中文标题 */
+const moduleTitleMap: Record<string, string> = {
+  info: '基本信息',
+  education: '教育经历',
+  work: '工作经历',
+  internship: '实习经历',
+  project: '项目经历',
+  skills: '技能',
+  competition: '竞赛',
+  certificate: '证书',
+}
+
+/** 当前模块的中文标题 */
+const moduleTitle = computed(() => moduleTitleMap[props.module] || props.module)
+
+/** 基本信息模块的字段配置 */
+const infoFields = [
+  { key: 'name', label: '姓名', placeholder: '请输入姓名', required: true },
+  { key: 'email', label: '邮箱', placeholder: '请输入邮箱', required: true, type: 'email' },
+  { key: 'phone', label: '电话', placeholder: '请输入联系电话', required: true, type: 'tel' },
+  { key: 'location', label: '所在城市', placeholder: '请输入所在城市', required: true },
+  { key: 'wechat', label: '微信', placeholder: '请输入微信号', required: false },
+]
+
+/** 表单数据 — 基本信息模块使用 */
+const formData = ref<Record<string, any>>({})
+
+/** 城市选择器当前选中的地区编码数组 */
+const locationCodes = ref<string[]>([])
+
+/** 地区选择器触发按钮的自定义样式 — 与抽屉内输入框保持一致 */
+const regionTriggerStyle: Record<string, string> = {
+  width: '100%',
+  'box-sizing': 'border-box',
+  padding: '0.1rem 0.14rem',
+  'font-size': '0.13rem',
+  color: '#1a1a2e',
+  background: '#f6f6f9',
+  border: '1px solid transparent',
+  'border-radius': '0.06rem',
+  'max-width': 'none',
+  'justify-content': 'space-between',
+  
+}
+
+/** 城市选择器确认回调 — 更新 locationCodes，同时将编码和城市名同步到 formData */
+function onLocationChange(codes: string[]) {
+  locationCodes.value = codes
+  // 取第一个编码作为 regionCode 存入 formData
+  formData.value.location = codes[0] || ''
+  // 根据编码从地区树中查找城市名称，用于页面展示
+  formData.value.locationName = resolveRegionName(codes[0] || '')
+}
+
+/** 根据城市编码从 store 地区树中查找对应的城市名称 */
+function resolveRegionName(code: string): string {
+  if (!code) return ''
+  for (const province of store.state.regions) {
+    for (const city of province.children) {
+      if (city.code === code) return city.name
+      if (city.children) {
+        for (const district of city.children) {
+          if (district.code === code) return district.name
+        }
+      }
+    }
+  }
+  return code
+}
+
+/** 教育经历列表 — 教育经历模块使用 */
+const educationList = ref<EducationItem[]>([])
+
+/** 创建一条空的教育经历数据 */
+const createEmptyEducation = (): EducationItem => ({
+  school: '',
+  major: '',
+  studyType: 0,
+  degree: 2,
+  startDate: '',
+  endDate: '',
+  description: [{ id: generateId(), text: '' }],
+})
+
+/** 新增一条教育经历 */
+const addEducation = () => {
+  educationList.value.push(createEmptyEducation())
+}
+
+/** 删除指定索引的教育经历 */
+const removeEducation = (index: number) => {
+  educationList.value.splice(index, 1)
+}
+
+/** 为指定教育经历新增一条描述段落 */
+const addEducationDescriptionParagraph = (eduIndex: number) => {
+  educationList.value[eduIndex].description.push({ id: generateId(), text: '' })
+}
+
+/** 删除指定教育经历的指定描述段落 */
+const removeEducationDescriptionParagraph = (eduIndex: number, descIndex: number) => {
+  educationList.value[eduIndex].description.splice(descIndex, 1)
+}
+
+/** 工作经历列表 — 工作经历模块使用 */
+const workList = ref<WorkItem[]>([])
+
+/** 创建一条空的工作经历数据 */
+const createEmptyWork = (): WorkItem => ({
+  companyName: '',
+  position: '',
+  startDate: '',
+  endDate: '',
+  description: [{ id: generateId(), text: '' }],
+})
+
+/** 新增一条工作经历 */
+const addWork = () => {
+  workList.value.push(createEmptyWork())
+}
+
+/** 删除指定索引的工作经历 */
+const removeWork = (index: number) => {
+  workList.value.splice(index, 1)
+}
+
+/** 为指定工作经历新增一条描述段落 */
+const addWorkDescriptionParagraph = (workIndex: number) => {
+  workList.value[workIndex].description.push({ id: generateId(), text: '' })
+}
+
+/** 删除指定工作经历的指定描述段落 */
+const removeWorkDescriptionParagraph = (workIndex: number, descIndex: number) => {
+  workList.value[workIndex].description.splice(descIndex, 1)
+}
+
+/** 实习经历列表 — 实习经历模块使用 */
+const internshipList = ref<InternshipItem[]>([])
+
+/** 创建一条空的实习经历数据 */
+const createEmptyInternship = (): InternshipItem => ({
+  companyName: '',
+  position: '',
+  startDate: '',
+  endDate: '',
+  description: [{ id: generateId(), text: '' }],
+})
+
+/** 新增一条实习经历 */
+const addInternship = () => {
+  internshipList.value.push(createEmptyInternship())
+}
+
+/** 删除指定索引的实习经历 */
+const removeInternship = (index: number) => {
+  internshipList.value.splice(index, 1)
+}
+
+/** 为指定实习经历新增一条描述段落 */
+const addInternDescriptionParagraph = (internIndex: number) => {
+  internshipList.value[internIndex].description.push({ id: generateId(), text: '' })
+}
+
+/** 删除指定实习经历的指定描述段落 */
+const removeInternDescriptionParagraph = (internIndex: number, descIndex: number) => {
+  internshipList.value[internIndex].description.splice(descIndex, 1)
+}
+
+/** 项目经历列表 — 项目经历模块使用 */
+const projectList = ref<ProjectItem[]>([])
+
+/** 创建一条空的项目经历数据 */
+const createEmptyProject = (): ProjectItem => ({
+  projectName: '',
+  companyName: '',
+  role: '',
+  startDate: '',
+  endDate: '',
+  description: [{ id: generateId(), text: '' }],
+})
+
+/** 生成短标识 ID — 用于描述段落的唯一标识 */
+const generateId = (): string => {
+  return Math.random().toString(36).substring(2, 8)
+}
+
+/** 为指定项目新增一条描述段落 */
+const addDescriptionParagraph = (projIndex: number) => {
+  projectList.value[projIndex].description.push({ id: generateId(), text: '' })
+}
+
+/** 删除指定项目的指定描述段落 */
+const removeDescriptionParagraph = (projIndex: number, descIndex: number) => {
+  projectList.value[projIndex].description.splice(descIndex, 1)
+}
+
+/** 新增一条项目经历 */
+const addProject = () => {
+  projectList.value.push(createEmptyProject())
+}
+
+/** 删除指定索引的项目经历 */
+const removeProject = (index: number) => {
+  projectList.value.splice(index, 1)
+}
+
+/** 竞赛经历列表 — 竞赛模块使用 */
+const competitionList = ref<CompetitionItem[]>([])
+
+/** 创建一条空的竞赛经历数据 */
+const createEmptyCompetition = (): CompetitionItem => ({
+  competitionName: '',
+  award: '',
+  awardDate: '',
+  description: [{ id: generateId(), text: '' }],
+})
+
+/** 新增一条竞赛经历 */
+const addCompetition = () => {
+  competitionList.value.push(createEmptyCompetition())
+}
+
+/** 删除指定索引的竞赛经历 */
+const removeCompetition = (index: number) => {
+  competitionList.value.splice(index, 1)
+}
+
+/** 技能列表 — 技能模块使用 */
+const skillsList = ref<string[]>([])
+
+/** 新技能输入框的值 */
+const newSkillInput = ref('')
+
+/** 添加新技能 — 当输入长度大于0的非空字符串时添加 */
+const handleAddSkill = () => {
+  const trimmedSkill = newSkillInput.value.trim()
+  // 只有当输入的内容去除空格后长度大于0，且不重复时才添加
+  if (trimmedSkill.length > 0 && !skillsList.value.includes(trimmedSkill)) {
+    skillsList.value.push(trimmedSkill)
+    newSkillInput.value = ''
+  } else if (trimmedSkill.length === 0) {
+    // 如果是空字符串，直接清空输入框
+    newSkillInput.value = ''
+  }
+}
+
+/** 删除指定索引的技能 */
+const removeSkill = (index: number) => {
+  skillsList.value.splice(index, 1)
+}
+
+/** 证书列表 — 证书模块使用 */
+const certificatesList = ref<string[]>([])
+
+/** 新证书输入框的值 */
+const newCertificateInput = ref('')
+
+/** 添加新证书 — 当输入长度大于0的非空字符串时添加 */
+const handleAddCertificate = () => {
+  const trimmedCertificate = newCertificateInput.value.trim()
+  // 只有当输入的内容去除空格后长度大于0，且不重复时才添加
+  if (trimmedCertificate.length > 0 && !certificatesList.value.includes(trimmedCertificate)) {
+    certificatesList.value.push(trimmedCertificate)
+    newCertificateInput.value = ''
+  } else if (trimmedCertificate.length === 0) {
+    // 如果是空字符串，直接清空输入框
+    newCertificateInput.value = ''
+  }
+}
+
+/** 删除指定索引的证书 */
+const removeCertificate = (index: number) => {
+  certificatesList.value.splice(index, 1)
+}
+
+/** 监听抽屉打开 — 初始化表单数据并锁定页面滚动 */
+watch(() => props.modelValue, (visible) => {
+  if (visible) {
+    if (props.module === 'info') {
+      // 基本信息：用初始数据填充表单
+      formData.value = props.initialData ? { ...props.initialData } : {}
+      // 将城市编码同步到 locationCodes，确保 RegionSelector 能正确回显
+      locationCodes.value = formData.value.location ? [formData.value.location] : []
+    } else if (props.module === 'education') {
+      // 教育经历：用初始数据填充列表，若无则创建一条空记录（深拷贝 description 数组）
+      if (props.initialData?.education?.length) {
+        educationList.value = props.initialData.education.map((item: any) => ({
+          ...item,
+          description: item.description.map((d: any) => ({ ...d })),
+        }))
+      } else {
+        educationList.value = [createEmptyEducation()]
+      }
+    } else if (props.module === 'work') {
+      // 工作经历：用初始数据填充列表，若无则创建一条空记录（深拷贝 description 数组）
+      if (props.initialData?.works?.length) {
+        workList.value = props.initialData.works.map((item: any) => ({
+          ...item,
+          description: item.description.map((d: any) => ({ ...d })),
+        }))
+      } else {
+        workList.value = [createEmptyWork()]
+      }
+    } else if (props.module === 'internship') {
+      // 实习经历：用初始数据填充列表，若无则创建一条空记录（深拷贝 description 数组）
+      if (props.initialData?.internships?.length) {
+        internshipList.value = props.initialData.internships.map((item: any) => ({
+          ...item,
+          description: item.description.map((d: any) => ({ ...d })),
+        }))
+      } else {
+        internshipList.value = [createEmptyInternship()]
+      }
+    } else if (props.module === 'project') {
+      // 项目经历：用初始数据填充列表，若无则创建一条空记录
+      if (props.initialData?.projects?.length) {
+        projectList.value = props.initialData.projects.map((item: any) => ({
+          ...item,
+          description: item.description.map((d: any) => ({ ...d })),
+        }))
+      } else {
+        projectList.value = [createEmptyProject()]
+      }
+    } else if (props.module === 'competition') {
+      // 竞赛经历：用初始数据填充列表，若无则创建一条空记录
+      if (props.initialData?.competitions?.length) {
+        competitionList.value = props.initialData.competitions.map((item: any) => ({
+          ...item,
+          description: item.description.map((d: any) => ({ ...d })),
+        }))
+      } else {
+        competitionList.value = [createEmptyCompetition()]
+      }
+    } else if (props.module === 'skills') {
+      // 技能：用初始数据填充列表，若无则创建空数组
+      skillsList.value = props.initialData?.skills ? [...props.initialData.skills] : []
+      newSkillInput.value = ''
+    } else if (props.module === 'certificate') {
+      // 证书：用初始数据填充列表，若无则创建空数组
+      certificatesList.value = props.initialData?.certificates ? [...props.initialData.certificates] : []
+      newCertificateInput.value = ''
+    }
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = ''
+  }
+})
+
+/** 关闭抽屉 */
+const handleClose = () => {
+  emit('update:modelValue', false)
+}
+
+/** 保存数据 — 将表单数据通过事件传递给父组件 */
+const handleSave = () => {
+  if (props.module === 'info') {
+    emit('save', { ...formData.value })
+  } else if (props.module === 'education') {
+    emit('save', { education: educationList.value.map(item => ({
+      ...item,
+      description: item.description.map(d => ({ ...d })),
+    })) })
+  } else if (props.module === 'work') {
+    emit('save', { works: workList.value.map(item => ({
+      ...item,
+      description: item.description.map(d => ({ ...d })),
+    })) })
+  } else if (props.module === 'internship') {
+    emit('save', { internships: internshipList.value.map(item => ({
+      ...item,
+      description: item.description.map(d => ({ ...d })),
+    })) })
+  } else if (props.module === 'project') {
+    emit('save', { projects: projectList.value.map(item => ({
+      ...item,
+      description: item.description.map(d => ({ ...d })),
+    })) })
+  } else if (props.module === 'competition') {
+    emit('save', { competitions: competitionList.value.map(item => ({
+      ...item,
+      description: item.description.map(d => ({ ...d })),
+    })) })
+  } else if (props.module === 'skills') {
+    emit('save', { skills: [...skillsList.value] })
+  } else if (props.module === 'certificate') {
+    emit('save', { certificates: [...certificatesList.value] })
+  }
+  emit('update:modelValue', false)
+}
+</script>
diff --git a/src/components/ProfilePageContent.vue b/src/components/ProfilePageContent.vue
new file mode 100644
index 0000000..13b3266
--- /dev/null
+++ b/src/components/ProfilePageContent.vue
@@ -0,0 +1,238 @@
+<template>
+  <div class="profile-page-content">
+        <!-- 个人信息 -->
+        <div class="profile-page-content__card">
+          <div class="profile-page-content__card-header">
+            <h3 class="profile-page-content__card-title">个人信息</h3>
+            <button class="profile-page-content__edit-btn" @click="handleEdit('info')">
+              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
+            </button>
+          </div>
+          <div class="profile-page-content__info-name">{{ profile.name }}</div>
+          <div class="profile-page-content__info-contacts">
+            <span class="profile-page-content__contact-item">📱 {{ profile.phone }}</span>
+            <span class="profile-page-content__contact-item">✉️ {{ profile.email }}</span>
+            <span class="profile-page-content__contact-item">📍 {{ resolveRegionName(profile.regionCode) }}</span>
+          </div>
+          <div class="profile-page-content__info-contacts" v-if="profile.wechat">
+            <span class="profile-page-content__contact-item">💬 {{ profile.wechat }}</span>
+          </div>
+        </div>
+
+        <!-- 教育经历 -->
+        <div class="profile-page-content__card">
+          <div class="profile-page-content__card-header">
+            <h3 class="profile-page-content__card-title">教育经历</h3>
+            <button class="profile-page-content__edit-btn" @click="handleEdit('education')">
+              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
+            </button>
+          </div>
+          <div v-for="(edu, i) in profile.education" :key="i" class="profile-page-content__section-item">
+            <div class="profile-page-content__item-row">
+              <div class="profile-page-content__item-left">
+                <div class="profile-page-content__item-title">{{ edu.school }}</div>
+                <div class="profile-page-content__item-sub">{{ getDegreeText(edu.studyType, edu.degree) }} · {{ edu.major }}</div>
+                <div class="profile-page-content__item-date">{{ edu.startDate }} - {{ edu.endDate }}</div>
+              </div>
+            </div>
+            <ul class="profile-page-content__item-list" v-if="edu.description?.length && edu.description[0]?.text">
+              <li v-for="desc in edu.description" :key="desc.id">{{ desc.text }}</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 工作经历 -->
+        <div class="profile-page-content__card">
+          <div class="profile-page-content__card-header">
+            <h3 class="profile-page-content__card-title">工作经历</h3>
+            <button class="profile-page-content__edit-btn" @click="handleEdit('work')">
+              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
+            </button>
+          </div>
+          <div v-for="(exp, i) in profile.works" :key="i" class="profile-page-content__section-item">
+            <div class="profile-page-content__item-row">
+              <div class="profile-page-content__item-left">
+                <div class="profile-page-content__item-title">{{ exp.companyName }}</div>
+                <div class="profile-page-content__item-sub">{{ exp.position }}</div>
+              </div>
+              <div class="profile-page-content__item-period">{{ exp.startDate }} - {{ exp.endDate || '至今' }}</div>
+            </div>
+            <ul class="profile-page-content__item-list">
+              <li v-for="desc in exp.description" :key="desc.id">{{ desc.text }}</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 实习经历 -->
+        <div class="profile-page-content__card">
+          <div class="profile-page-content__card-header">
+            <h3 class="profile-page-content__card-title">实习经历</h3>
+            <button class="profile-page-content__edit-btn" @click="handleEdit('internship')">
+              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
+            </button>
+          </div>
+          <div v-for="(exp, i) in profile.internships" :key="i" class="profile-page-content__section-item">
+            <div class="profile-page-content__item-row">
+              <div class="profile-page-content__item-left">
+                <div class="profile-page-content__item-title">{{ exp.companyName }}</div>
+                <div class="profile-page-content__item-sub">{{ exp.position }}</div>
+              </div>
+              <div class="profile-page-content__item-period">{{ exp.startDate }} - {{ exp.endDate }}</div>
+            </div>
+            <ul class="profile-page-content__item-list">
+              <li v-for="desc in exp.description" :key="desc.id">{{ desc.text }}</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 项目经历 -->
+        <div class="profile-page-content__card">
+          <div class="profile-page-content__card-header">
+            <h3 class="profile-page-content__card-title">项目经历</h3>
+            <button class="profile-page-content__edit-btn" @click="handleEdit('project')">
+              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
+            </button>
+          </div>
+          <div v-for="(proj, i) in profile.projects" :key="i" class="profile-page-content__section-item">
+            <div class="profile-page-content__item-row">
+              <div class="profile-page-content__item-left">
+                <div class="profile-page-content__item-title">{{ proj.projectName }}</div>
+                <div class="profile-page-content__item-sub">{{ proj.role }}</div>
+              </div>
+              <div class="profile-page-content__item-period">{{ proj.startDate }} - {{ proj.endDate }}</div>
+            </div>
+            <ul class="profile-page-content__item-list">
+              <li v-for="desc in proj.description" :key="desc.id">{{ desc.text }}</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 技能 -->
+        <div class="profile-page-content__card">
+          <div class="profile-page-content__card-header">
+            <h3 class="profile-page-content__card-title">技能</h3>
+            <button class="profile-page-content__edit-btn" @click="handleEdit('skills')">
+              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
+            </button>
+          </div>
+          <div class="profile-page-content__tags">
+            <span v-for="(skill, i) in profile.skills" :key="i" class="profile-page-content__tag">{{ skill }}</span>
+          </div>
+        </div>
+
+        <!-- 竞赛 -->
+        <div class="profile-page-content__card">
+          <div class="profile-page-content__card-header">
+            <h3 class="profile-page-content__card-title">竞赛</h3>
+            <button class="profile-page-content__edit-btn" @click="handleEdit('competition')">
+              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
+            </button>
+          </div>
+          <div v-for="(comp, i) in profile.competitions" :key="i" class="profile-page-content__section-item">
+            <div class="profile-page-content__item-row">
+              <div class="profile-page-content__item-left">
+                <div class="profile-page-content__item-title">{{ comp.competitionName }} · {{ comp.award }}</div>
+              </div>
+              <div class="profile-page-content__item-period">{{ comp.awardDate }}</div>
+            </div>
+            <ul class="profile-page-content__item-list" v-if="comp.description[0]?.text">
+              <li v-for="desc in comp.description" :key="desc.id">{{ desc.text }}</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 证书 -->
+        <div class="profile-page-content__card">
+          <div class="profile-page-content__card-header">
+            <h3 class="profile-page-content__card-title">证书</h3>
+            <button class="profile-page-content__edit-btn" @click="handleEdit('certificate')">
+              <svg viewBox="0 0 16 16" fill="none" class="profile-page-content__edit-icon"><path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
+            </button>
+          </div>
+          <div class="profile-page-content__tags">
+            <span v-for="(cert, i) in profile.certificates" :key="i" class="profile-page-content__tag">{{ cert }}</span>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { resolveRegionName } from '@/utils/region'
+
+interface ProfileData {
+  name: string
+  phone: string
+  email: string
+  idNumber: string
+  /** 所在城市编码 — 对应接口字段 regionCode */
+  regionCode: string
+  wechat?: string
+  education: Array<{
+    school: string
+    major: string
+    studyType: number
+    degree: number
+    startDate: string
+    endDate: string
+    description: Array<{ id: string; text: string }>
+  }>
+  works: Array<{
+    companyName: string
+    position: string
+    startDate: string
+    endDate: string
+    description: Array<{ id: string; text: string }>
+  }>
+  internships: Array<{
+    companyName: string
+    position: string
+    startDate: string
+    endDate: string
+    description: Array<{ id: string; text: string }>
+  }>
+  projects: Array<{
+    projectName: string
+    companyName: string
+    role: string
+    startDate: string
+    endDate: string
+    description: Array<{ id: string; text: string }>
+  }>
+  skills: string[]
+  competitions: Array<{
+    competitionName: string
+    award: string
+    awardDate: string
+    description: Array<{ id: string; text: string }>
+  }>
+  certificates: string[]
+}
+
+const props = defineProps<{
+  profile: ProfileData
+}>()
+
+const emit = defineEmits<{
+  edit: [section: string]
+}>()
+
+/** 获取学历文本 — 根据学历类型和学历代码生成显示文本 */
+function getDegreeText(studyType: number, degree: number): string {
+  const studyTypeText = studyType === 0 ? '全日制' : '非全日制'
+  const degreeMap: Record<number, string> = {
+    1: '大专',
+    2: '本科',
+    3: '硕士',
+    4: '博士',
+  }
+  return `${studyTypeText}${degreeMap[degree] || ''}`
+}
+
+function handleEdit(section: string) {
+  emit('edit', section)
+}
+</script>
+
+<style scoped lang="scss">
+@use '../assets/styles/components/profile-page-content';
+</style>
diff --git a/src/components/SettingsDialog.vue b/src/components/SettingsDialog.vue
new file mode 100644
index 0000000..bfb0579
--- /dev/null
+++ b/src/components/SettingsDialog.vue
@@ -0,0 +1,299 @@
+<template>
+  <!-- 设置弹窗 — 通过 Teleport 挂载到 body，避免被父组件样式影响 -->
+  <Teleport to="body">
+    <!-- 遮罩层 — 点击关闭弹窗 -->
+    <div v-if="modelValue" class="settings-dialog-overlay" @click="$emit('update:modelValue', false)">
+      <!-- 弹窗主体 — 阻止点击冒泡到遮罩层 -->
+      <div class="settings-dialog" @click.stop>
+        <!-- 右上角关闭按钮 -->
+        <span class="settings-dialog__close" @click="$emit('update:modelValue', false)">✕</span>
+
+        <!-- 左侧导航栏 -->
+        <div class="settings-dialog__sidebar">
+          <!-- 主导航 Tab 列表 -->
+          <div class="settings-dialog__nav">
+            <div
+              v-for="tab in tabs"
+              :key="tab.key"
+              class="settings-dialog__nav-item"
+              :class="{ 'settings-dialog__nav-item--active': activeTab === tab.key }"
+              @click="activeTab = tab.key"
+            >
+              <span class="settings-dialog__nav-icon">{{ tab.icon }}</span>
+              <span>{{ tab.label }}</span>
+            </div>
+          </div>
+
+          <!-- 底部操作区 — 隐私协议 + 退出登录 -->
+          <div class="settings-dialog__bottom-actions">
+            <!-- 用户隐私协议按钮 — 点击切换到隐私协议 tab -->
+            <button
+              class="settings-dialog__bottom-btn"
+              :class="{ 'settings-dialog__bottom-btn--active': activeTab === 'privacy' }"
+              @click="activeTab = 'privacy'"
+            >
+              用户隐私协议
+            </button>
+            <!-- 退出登录按钮 — 点击弹出确认弹窗 -->
+            <button class="settings-dialog__bottom-btn settings-dialog__bottom-btn--danger" @click="showLogout = true">
+              退出登录
+            </button>
+          </div>
+        </div>
+
+        <!-- 右侧内容区 — 根据 activeTab 切换显示 -->
+        <div class="settings-dialog__content">
+          <!-- Tab: 账号与安全 — 显示手机号、注销账号 -->
+          <template v-if="activeTab === 'account'">
+            <h2 class="settings-dialog__content-title">账号与安全</h2>
+            <div class="settings-dialog__section">
+              <div class="settings-dialog__section-label">手机号</div>
+              <p class="settings-dialog__section-value">130****2222</p>
+            </div>
+            <div class="settings-dialog__danger-section">
+              <div class="settings-dialog__danger-title">注销我的账号</div>
+              <div class="settings-dialog__danger-row">
+                <p class="settings-dialog__danger-desc">永久删除你的账号及所有相关数据</p>
+                <button class="settings-dialog__danger-btn" @click="handleDeleteAccount">注销账号</button>
+              </div>
+            </div>
+          </template>
+
+          <!-- Tab: 会员 — 显示当前会员信息、订阅管理 -->
+          <template v-if="activeTab === 'member'">
+            <h2 class="settings-dialog__content-title">会员</h2>
+            <div class="settings-dialog__section-label" style="margin-bottom: 0.12rem;">当前会员</div>
+            <div class="settings-dialog__member-card">
+              <div class="settings-dialog__member-header">
+                <div class="settings-dialog__member-title-row">
+                  <span class="settings-dialog__member-name">月度会员</span>
+                  <span class="settings-dialog__member-badge">查看详情</span>
+                </div>
+                <span class="settings-dialog__member-terms" @click="handleMemberTerms">会员条款</span>
+              </div>
+              <div class="settings-dialog__member-info-row">
+                <span class="settings-dialog__member-price">
+                  ¥19.99/月<span>将于2026年3月27日续费</span>
+                </span>
+                <button class="settings-dialog__member-manage-btn" @click="handleManageSubscription">管理我的订阅</button>
+              </div>
+            </div>
+            <div class="settings-dialog__member-issue">
+              <div class="settings-dialog__member-issue-title">订阅状态异常？</div>
+              <p class="settings-dialog__member-issue-desc">
+                如果你已经和完成了付款或更改了订阅但是没有看到最新状态，你可以尝试更新状态或联系我们获取帮助。
+              </p>
+              <div class="settings-dialog__member-issue-actions">
+                <button class="settings-dialog__member-issue-btn" @click="handleRefreshStatus">更新状态</button>
+                <button class="settings-dialog__member-issue-btn" @click="handleContactUs">联系我们</button>
+              </div>
+            </div>
+          </template>
+
+          <!-- Tab: 岗位更新提醒 — 目标岗位、即时提醒开关、提醒频率 -->
+          <template v-if="activeTab === 'reminder'">
+            <h2 class="settings-dialog__content-title">岗位更新提醒</h2>
+            <div class="settings-dialog__reminder-block">
+              <div class="settings-dialog__reminder-block-title">目标岗位</div>
+              <div class="settings-dialog__reminder-target">
+                <div class="settings-dialog__reminder-tags">
+                  <span class="settings-dialog__reminder-tag" v-for="tag in targetTags" :key="tag">{{ tag }}</span>
+                </div>
+                <button class="settings-dialog__reminder-edit-btn" @click="handleEditTarget">编辑</button>
+              </div>
+            </div>
+            <div class="settings-dialog__reminder-block">
+              <div class="settings-dialog__reminder-block-title">即时岗位提醒</div>
+              <div class="settings-dialog__reminder-row">
+                <div class="settings-dialog__reminder-info">
+                  <div class="settings-dialog__reminder-label">开启即时岗位更新提醒</div>
+                  <div class="settings-dialog__reminder-desc">
+                    抢先申请 —— 在岗位发布后一小时内，即可收到为你量身定制的最新职位提醒
+                  </div>
+                </div>
+                <el-switch v-model="reminders.instant" active-color="#4FC2C9" />
+              </div>
+            </div>
+            <div class="settings-dialog__reminder-block">
+              <div class="settings-dialog__reminder-block-title">岗位更新提醒频率</div>
+              <div class="settings-dialog__reminder-row">
+                <div class="settings-dialog__reminder-info">
+                  <div class="settings-dialog__reminder-desc">
+                    会员用户每天可接收无限次岗位更新提醒，免费用户每天最多接收 1 次。
+                  </div>
+                </div>
+                <el-select v-model="reminders.frequency" style="width: 1.2rem;">
+                  <el-option label="1次/天" value="1" />
+                  <el-option label="2次/天" value="2" />
+                  <el-option label="5次/天" value="5" />
+                  <el-option label="无限次" value="unlimited" />
+                </el-select>
+              </div>
+            </div>
+          </template>
+          <!-- Tab: 用户隐私协议 — 长文本，可滚动查看 -->
+          <template v-if="activeTab === 'privacy'">
+            <h2 class="settings-dialog__content-title">用户隐私协议</h2>
+            <div class="settings-dialog__privacy-content">
+              <div class="settings-dialog__privacy-section">
+                <h4>一、引言</h4>
+                <p>欢迎使用 Offer派（以下简称"本平台"或"我们"）。我们深知个人信息对您的重要性，并会尽全力保护您的个人信息安全。我们致力于维持您对我们的信任，恪守以下原则保护您的个人信息：权责一致原则、目的明确原则、选择同意原则、最少够用原则、确保安全原则、主体参与原则、公开透明原则等。同时，我们承诺将按照业界成熟的安全标准，采取相应的安全保护措施来保护您的个人信息。请您在使用本平台服务前，仔细阅读并了解本隐私政策。</p>
+              </div>
+              <div class="settings-dialog__privacy-section">
+                <h4>二、我们如何收集和使用您的个人信息</h4>
+                <p>个人信息是指以电子或者其他方式记录的能够单独或者与其他信息结合识别特定自然人身份或者反映特定自然人活动情况的各种信息。我们仅会出于本政策所述的以下目的，收集和使用您的个人信息：</p>
+                <p>1. 注册与登录：当您注册本平台账号时，我们会收集您的手机号码用于创建账号和身份验证。您也可以选择填写昵称、头像等个人资料来完善您的账户信息。手机号码属于敏感信息，收集此类信息是为了满足相关法律法规的网络实名制要求，如果您不提供手机号码，将无法使用本平台的服务。</p>
+                <p>2. 简历管理：当您使用简历管理功能时，我们会收集您主动填写的简历信息，包括但不限于：姓名、性别、出生日期、教育经历、工作经历、项目经验、技能特长、求职意向、期望薪资、期望工作地点等。这些信息将用于为您提供精准的岗位推荐服务。您可以随时在个人中心修改或删除这些信息。</p>
+                <p>3. 岗位推荐与搜索：当您使用岗位搜索和推荐功能时，我们会收集您的搜索关键词、浏览记录、收藏记录、投递记录等行为数据，以便为您提供更加精准和个性化的岗位推荐。我们也会根据您的求职意向和简历信息，通过算法模型为您匹配合适的职位。</p>
+                <p>4. AI 助手服务：当您使用 AI 助手功能时，我们会收集您与 AI 的对话内容，用于提供智能问答、简历优化建议、面试辅导等服务。对话内容将被加密存储，并仅用于改善服务质量。我们不会将您的对话内容用于其他商业目的。</p>
+                <p>5. 消息通知：为了及时向您推送岗位更新、申请状态变更等重要信息，我们可能会收集您的设备标识符、推送令牌等信息，用于实现消息推送功能。您可以在设置中随时关闭消息推送。</p>
+              </div>
+              <div class="settings-dialog__privacy-section">
+                <h4>三、我们如何共享、转让、公开披露您的个人信息</h4>
+                <p>1. 共享：我们不会与任何公司、组织和个人共享您的个人信息，但以下情况除外：（1）在获取明确同意的情况下共享：获得您的明确同意后，我们会与其他方共享您的个人信息。（2）我们可能会根据法律法规规定，或按政府主管部门的强制性要求，对外共享您的个人信息。（3）与授权合作伙伴共享：仅为实现本隐私政策中声明的目的，我们的某些服务将由授权合作伙伴提供。我们可能会与合作伙伴共享您的某些个人信息，以提供更好的客户服务和用户体验。我们仅会出于合法、正当、必要、特定、明确的目的共享您的个人信息，并且只会共享提供服务所必要的个人信息。</p>
+                <p>2. 转让：我们不会将您的个人信息转让给任何公司、组织和个人，但以下情况除外：（1）在获取明确同意的情况下转让：获得您的明确同意后，我们会向其他方转让您的个人信息。（2）在涉及合并、收购或破产清算时，如涉及到个人信息转让，我们会在要求新的持有您个人信息的公司、组织继续受此隐私政策的约束，否则我们将要求该公司、组织重新向您征求授权同意。</p>
+                <p>3. 公开披露：我们仅会在以下情况下，公开披露您的个人信息：（1）获得您明确同意后。（2）基于法律的披露：在法律、法律程序、诉讼或政府主管部门强制性要求的情况下，我们可能会公开披露您的个人信息。</p>
+              </div>
+              <div class="settings-dialog__privacy-section">
+                <h4>四、我们如何保护您的个人信息</h4>
+                <p>1. 我们已使用符合业界标准的安全防护措施保护您提供的个人信息，防止数据遭到未经授权的访问、公开披露、使用、修改、损坏或丢失。我们会采取一切合理可行的措施，保护您的个人信息。例如，在您的浏览器与服务之间交换数据时受 SSL 加密保护；我们同时对网站提供 HTTPS 安全浏览方式；我们会使用加密技术确保数据的保密性；我们会使用受信赖的保护机制防止数据遭到恶意攻击；我们会部署访问控制机制，确保只有授权人员才可访问个人信息；以及我们会举办安全和隐私保护培训课程，加强员工对于保护个人信息重要性的认识。</p>
+                <p>2. 我们会采取一切合理可行的措施，确保未收集无关的个人信息。我们只会在达成本政策所述目的所需的期限内保留您的个人信息，除非需要延长保留期或受到法律的允许。</p>
+                <p>3. 互联网并非绝对安全的环境，而且电子邮件、即时通讯、及与其他用户的交流方式并未加密，我们强烈建议您不要通过此类方式发送个人信息。请使用复杂密码，协助我们保证您的账号安全。</p>
+                <p>4. 互联网环境并非百分之百安全，我们将尽力确保或担保您发送给我们的任何信息的安全性。如果我们的物理、技术、或管理防护设施遭到破坏，导致信息被非授权访问、公开披露、篡改、或毁坏，导致您的合法权益受损，我们将承担相应的法律责任。</p>
+                <p>5. 在不幸发生个人信息安全事件后，我们将按照法律法规的要求，及时向您告知：安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施等。我们将及时将事件相关情况以邮件、信函、电话、推送通知等方式告知您，难以逐一告知个人信息主体时，我们会采取合理、有效的方式发布公告。</p>
+              </div>
+              <div class="settings-dialog__privacy-section">
+                <h4>五、您的权利</h4>
+                <p>按照中国相关的法律、法规、标准，以及其他国家、地区的通行做法，我们保障您对自己的个人信息行使以下权利：</p>
+                <p>1. 访问您的个人信息：您有权访问您的个人信息，法律法规规定的例外情况除外。如果您想行使数据访问权，可以通过以下方式自行访问：登录本平台，进入"个人资料"或"简历管理"页面，即可查看您的个人信息。</p>
+                <p>2. 更正您的个人信息：当您发现我们处理的关于您的个人信息有错误时，您有权要求我们做出更正。您可以通过上述访问方式提出更正申请。</p>
+                <p>3. 删除您的个人信息：在以下情形中，您可以向我们提出删除个人信息的请求：（1）如果我们处理个人信息的行为违反法律法规。（2）如果我们收集、使用您的个人信息，却未征得您的同意。（3）如果我们处理个人信息的行为违反了与您的约定。（4）如果您不再使用我们的产品或服务，或您注销了账号。（5）如果我们不再为您提供产品或服务。</p>
+                <p>4. 注销账户：您随时可注销此前注册的账户，您可以通过"设置 - 账号与安全 - 注销账号"进行操作。在注销账户之后，我们将停止为您提供产品或服务，并依据您的要求，删除您的个人信息，法律法规另有规定的除外。</p>
+                <p>5. 改变您授权同意的范围：每个业务功能需要一些基本的个人信息才能得以完成。对于额外收集的个人信息的收集和使用，您可以随时给予或收回您的授权同意。您可以通过关闭相应功能的方式来撤回授权。当您收回同意后，我们将不再处理相应的个人信息。但您收回同意的决定，不会影响此前基于您的授权而开展的个人信息处理。</p>
+              </div>
+              <div class="settings-dialog__privacy-section">
+                <h4>六、我们如何处理未成年人的个人信息</h4>
+                <p>我们的产品和服务主要面向成年人。如果没有父母或监护人的同意，未成年人不应创建自己的用户账户。如果我们发现在未事先获得可证实的父母或法定监护人同意的情况下收集了未成年人的个人信息，则会设法尽快删除相关数据。对于经父母或法定监护人同意而收集未成年人个人信息的情况，我们只会在受到法律允许、父母或监护人明确同意或者保护未成年人所必要的情况下使用或公开披露此信息。</p>
+              </div>
+              <div class="settings-dialog__privacy-section">
+                <h4>七、本隐私政策如何更新</h4>
+                <p>我们可能适时会对本隐私政策进行调整或变更，本隐私政策的任何更新将以标注更新时间的方式公布在本平台上，除法律法规或监管规定另有强制性规定外，经调整或变更的内容一经通知或公布后的7日后生效。如您在隐私政策调整或变更后继续使用我们提供的任一服务或访问我们相关网站的，我们相信这代表您已充分阅读、理解并接受修改后的隐私政策并受其约束。</p>
+              </div>
+              <div class="settings-dialog__privacy-section">
+                <h4>八、如何联系我们</h4>
+                <p>如果您对本隐私政策有任何疑问、意见或建议，可以通过以下方式与我们联系：发送邮件至 privacy@offerpai.com，或通过本平台内的"反馈"功能联系我们。一般情况下，我们将在15个工作日内回复。如果您对我们的回复不满意，特别是我们的个人信息处理行为损害了您的合法权益，您还可以向网信部门、电信主管部门、公安部门等监管部门进行投诉或举报，或通过向被告住所地有管辖权的法院提起诉讼来寻求解决方案。</p>
+                <p>本隐私政策的最终解释权归本平台所有。</p>
+                <p style="margin-top: 0.16rem; color: #999;">最后更新日期：2026年3月1日</p>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <!-- 退出登录确认弹窗 — 放在 Teleport 内部，确保层级在 overlay 之上 -->
+    <el-dialog v-model="showLogout" title="退出登录" width="3.6rem" :close-on-click-modal="true" :append-to-body="false" :z-index="2100">
+      <p style="font-size: 0.14rem; color: #555; text-align: center;">确定要退出当前账号吗？</p>
+      <template #footer>
+        <el-button @click="showLogout = false">取消</el-button>
+        <el-button type="danger" @click="handleLogout">确认退出</el-button>
+      </template>
+    </el-dialog>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { logout } from '@/api/auth'
+
+/** 组件 Props — 控制弹窗显示/隐藏 */
+const props = defineProps<{ modelValue: boolean }>()
+
+/** 组件 Emits — 通知父组件更新 modelValue */
+const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
+
+/** 路由实例 — 退出登录后跳转首页 */
+const router = useRouter()
+const store = useStore()
+
+/** 左侧导航 Tab 配置 */
+const tabs = [
+  { key: 'account', label: '账号与安全', icon: '👤' },
+  { key: 'member', label: '会员', icon: '🏅' },
+  { key: 'reminder', label: '岗位更新提醒', icon: '🔔' },
+]
+
+/** 当前选中的 Tab */
+const activeTab = ref('account')
+
+/** 退出登录确认弹窗的显示状态 */
+const showLogout = ref(false)
+
+/** 监听弹窗开关 — 打开时锁定背景页面滚动，关闭时恢复 */
+watch(() => props.modelValue, (val) => {
+  document.body.style.overflow = val ? 'hidden' : ''
+})
+
+/** 岗位更新提醒的配置项 */
+const reminders = reactive({
+  instant: true,        // 是否开启即时岗位提醒
+  frequency: 'unlimited', // 提醒频率：1/2/5/unlimited
+})
+
+/** 目标岗位标签列表 */
+const targetTags = ref(['产品经理', '全职', '北京'])
+
+/** 编辑目标岗位 */
+const handleEditTarget = () => {
+  ElMessage.info('编辑目标岗位功能开发中')
+}
+
+/** 注销账号 — 弹出二次确认 */
+const handleDeleteAccount = () => {
+  ElMessageBox.confirm('此操作将永久删除你的账号及所有数据，是否继续？', '注销账号', {
+    confirmButtonText: '确认注销',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    ElMessage.success('账号已注销')
+  }).catch(() => {})
+}
+
+/** 管理订阅 */
+const handleManageSubscription = () => {
+  ElMessage.info('管理订阅功能开发中')
+}
+
+/** 查看会员条款 */
+const handleMemberTerms = () => {
+  ElMessage.info('会员条款页面开发中')
+}
+
+/** 刷新订阅状态 */
+const handleRefreshStatus = () => {
+  ElMessage.success('状态已更新')
+}
+
+/** 联系客服 */
+const handleContactUs = () => {
+  ElMessage.info('联系客服功能开发中')
+}
+
+/** 退出登录 — 调用接口，后端会清除 Cookie，关闭弹窗，跳转 jobs 页 */
+const handleLogout = async () => {
+  try {
+    const res = await logout()
+    if (res.code === '0') {
+      ElMessage.success('已退出登录')
+    }
+  } catch {
+    // 即使接口失败也关闭弹窗
+  }
+  store.commit('SET_AUTHENTICATED', false)
+  showLogout.value = false
+  emit('update:modelValue', false)
+  router.push('/')
+}
+</script>
diff --git a/src/components/SideNav.vue b/src/components/SideNav.vue
new file mode 100644
index 0000000..3c50824
--- /dev/null
+++ b/src/components/SideNav.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="side-nav">
+    <!-- 顶部 Logo -->
+    <div class="side-nav__header">
+      <div class="side-nav__avatar">
+        <span class="side-nav__avatar-icon">👤</span>
+      </div>
+      <span class="side-nav__logo-text">Offer派</span>
+    </div>
+
+    <!-- 主导航 -->
+    <nav class="side-nav__menu">
+      <a
+        v-for="item in mainMenus"
+        :key="item.name"
+        href="javascript:void(0)"
+        class="side-nav__item"
+        :class="{ 'side-nav__item--active': isActive(item.name) }"
+        @click="handleNav(item)"
+      >
+        <img class="side-nav__item-icon" :src="item.iconImg" :alt="item.label" />
+        <span class="side-nav__item-label">{{ item.label }}</span>
+        <span v-if="item.badge" class="side-nav__badge">{{ item.badge }}</span>
+      </a>
+    </nav>
+
+    <!-- 底部菜单 -->
+    <div class="side-nav__footer">
+      <div class="side-nav__item" v-for="item in footerMenus" :key="item.label" @click="item.action?.()">
+        <img class="side-nav__item-icon" :src="item.iconImg" :alt="item.label" />
+        <span class="side-nav__item-label">{{ item.label }}</span>
+        <span v-if="item.badge" class="side-nav__badge">{{ item.badge }}</span>
+      </div>
+    </div>
+
+    <!-- 消息通知弹窗 -->
+    <Teleport to="body">
+      <div v-if="showMessageDialog" class="side-nav__dialog-overlay" @click="showMessageDialog = false">
+        <div class="side-nav__dialog" @click.stop>
+          <div class="side-nav__dialog-header">
+            <span>消息通知</span>
+            <span class="side-nav__dialog-close" @click="showMessageDialog = false">✕</span>
+          </div>
+          <div class="side-nav__dialog-body">
+            <p>暂无新消息</p>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- 反馈弹窗 -->
+    <Teleport to="body">
+      <div v-if="showFeedbackDialog" class="side-nav__dialog-overlay" @click="showFeedbackDialog = false">
+        <div class="side-nav__dialog feedback-dialog" @click.stop>
+          <div class="feedback-dialog__title">反馈与帮助</div>
+
+          <div class="feedback-dialog__section">
+            <div class="feedback-dialog__label">*你想向我们反馈什么问题？</div>
+            <div class="feedback-dialog__options">
+              <div
+                v-for="opt in feedbackOptions"
+                :key="opt"
+                class="feedback-dialog__option"
+                :class="{ 'feedback-dialog__option--active': feedbackType === opt }"
+                @click="feedbackType = opt"
+              >
+                {{ opt }}
+              </div>
+            </div>
+          </div>
+
+          <div class="feedback-dialog__section">
+            <div class="feedback-dialog__label">*能否提供更多细节？</div>
+            <textarea
+              v-model="feedbackDetail"
+              class="feedback-dialog__textarea"
+              placeholder="请描述你的使用体验或分享您的想法。描述越具体，我们越能更好地处理您的反馈。"
+              rows="5"
+            ></textarea>
+          </div>
+
+          <div class="feedback-dialog__actions">
+            <button class="feedback-dialog__btn feedback-dialog__btn--cancel" @click="showFeedbackDialog = false">取消</button>
+            <button class="feedback-dialog__btn feedback-dialog__btn--submit" @click="handleFeedbackSubmit">确认提交</button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+    <!-- 设置弹窗 -->
+    <SettingsDialog v-model="showSettingsDialog" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import SettingsDialog from '@/components/SettingsDialog.vue'
+import navJobsIcon from '@/assets/images/nav/nav-jobs-icon.png'
+import navResumeIcon from '@/assets/images/nav/nav-resume-icon.png'
+import navProfileIcon from '@/assets/images/nav/nav-profile-icon.png'
+import navAgentIcon from '@/assets/images/nav/nav-agent-icon.png'
+import navMessageIcon from '@/assets/images/nav/nav-message-icon.png'
+import navSettingIcon from '@/assets/images/nav/nav-setting-icon.png'
+import navFeedbackIcon from '@/assets/images/nav/nav-feedback-icon.png'
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+interface MenuItem {
+  name: string
+  path: string
+  iconImg: string
+  label: string
+  badge?: string
+}
+
+/**
+ * 图标映射表
+ * 后端 meta.icon 返回的是字符串 key，这里映射到实际的图片资源
+ * 【新增图标时】在这里加一条即可
+ */
+const iconMap: Record<string, string> = {
+  'nav-jobs-icon':    navJobsIcon,
+  'nav-resume-icon':  navResumeIcon,
+  'nav-profile-icon': navProfileIcon,
+  'nav-agent-icon':   navAgentIcon,
+  'nav-setting-icon': navSettingIcon,
+}
+
+/**
+ * 静态菜单 — 不需要登录就能看到的导航项（比如"职位"）
+ * 这些菜单始终显示，不依赖后端返回
+ */
+const staticMenus: MenuItem[] = [
+  { name: 'Jobs', path: '/jobs', iconImg: navJobsIcon, label: '职位' },
+]
+
+/**
+ * 动态菜单 — 从 store.state.dynamicMenus（后端返回的数据）转换而来
+ * 登录后才会有数据，登出后自动清空
+ * 过滤掉 position === 'footer' 的项（如"设置"），它们显示在底部区域
+ */
+const dynamicMenuItems = computed<MenuItem[]>(() => {
+  return store.state.dynamicMenus
+    .filter((item: any) => item.meta?.position !== 'footer')
+    .map((item: any) => ({
+      name: item.name,
+      path: item.path,
+      iconImg: iconMap[item.meta?.icon] || '',
+      label: item.meta?.label || item.name,
+      badge: item.meta?.badge,
+    }))
+})
+
+/**
+ * 最终渲染的主菜单 = 静态菜单 + 动态菜单
+ */
+const mainMenus = computed<MenuItem[]>(() => {
+  return [...staticMenus, ...dynamicMenuItems.value]
+})
+
+const showMessageDialog = ref(false)
+const showFeedbackDialog = ref(false)
+const showSettingsDialog = ref(false)
+const feedbackType = ref('')
+const feedbackDetail = ref('')
+
+const feedbackOptions = ['Bug反馈', '功能建议', '使用体验', '订阅及会员权益相关问题', '其它']
+
+function handleFeedbackSubmit() {
+  // TODO: 调用反馈提交接口
+  console.log('反馈类型:', feedbackType.value, '详情:', feedbackDetail.value)
+  feedbackType.value = ''
+  feedbackDetail.value = ''
+  showFeedbackDialog.value = false
+}
+
+/**
+ * 底部"设置"按钮 — 从动态菜单中取 position === 'footer' 的项
+ * 未登录时使用默认图标和文字
+ */
+const settingsMenu = computed(() => {
+  const item = store.state.dynamicMenus.find((m: any) => m.meta?.position === 'footer')
+  if (item) {
+    return {
+      iconImg: iconMap[item.meta?.icon] || navSettingIcon,
+      label: item.meta?.label || '设置',
+      path: item.path,
+    }
+  }
+  return { iconImg: navSettingIcon, label: '设置', path: '/settings' }
+})
+
+const footerMenus = computed(() => [
+  { iconImg: navMessageIcon, label: '消息通知', badge: 'NEW', action: () => { showMessageDialog.value = true } },
+  { iconImg: settingsMenu.value.iconImg, label: settingsMenu.value.label, action: () => { handleSettingsNav() } },
+  { iconImg: navFeedbackIcon, label: '反馈', action: () => { showFeedbackDialog.value = true } },
+])
+
+/**
+ * 设置弹窗：需要登录，没 token 则弹登录框
+ */
+function handleSettingsNav() {
+  if (store.state.isAuthenticated) {
+    showSettingsDialog.value = true
+  } else {
+    store.dispatch('openLogin')
+  }
+}
+
+/**
+ * 导航点击处理：
+ * - 静态页面（Jobs）直接跳转
+ * - 动态页面需要 token，没有则弹登录框
+ */
+const staticNames = staticMenus.map(m => m.name)
+
+function handleNav(item: MenuItem) {
+  if (staticNames.includes(item.name) || store.state.isAuthenticated) {
+    router.push(item.path)
+  } else {
+    store.dispatch('openLogin', item.path)
+  }
+}
+
+function isActive(name: string) {
+  return route.name === name
+}
+</script>
diff --git a/src/components/tools/IndustrySelector.vue b/src/components/tools/IndustrySelector.vue
new file mode 100644
index 0000000..0f1c37c
--- /dev/null
+++ b/src/components/tools/IndustrySelector.vue
@@ -0,0 +1,286 @@
+<template>
+  <!-- 行业选择器根容器 -->
+  <div class="industry-selector" ref="selectorRef">
+
+    <!-- 触发按钮：显示已选行业名称或默认文字"行业" -->
+    <div class="industry-selector__trigger" @click="toggleDropdown">
+      <span class="industry-selector__display" :title="displayText">{{ displayText }}</span>
+      <svg
+        class="industry-selector__arrow"
+        :class="{ 'industry-selector__arrow--open': visible }"
+        viewBox="0 0 12 12"
+        fill="none"
+      >
+        <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </div>
+
+    <!-- 下拉面板 -->
+    <div v-if="visible" class="industry-selector__panel" @click.stop>
+
+      <!-- 选中区：小方块标签展示已选中的行业名称 -->
+      <div class="industry-selector__selected-area" v-if="selectedItems.length">
+        <span
+          class="industry-selector__tag"
+          v-for="item in selectedItems"
+          :key="item.id"
+        >
+          {{ item.name }}
+          <!-- 点击关闭图标移除该选中项 -->
+          <svg class="industry-selector__tag-close" viewBox="0 0 12 12" @click="removeItem(item)">
+            <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+          </svg>
+        </span>
+      </div>
+
+      <!-- 搜索输入框：输入超过 2 个字符时触发模糊匹配 -->
+      <div class="industry-selector__search-wrap">
+        <input
+          v-model="searchText"
+          class="industry-selector__search"
+          placeholder="搜索行业"
+        />
+      </div>
+
+      <!-- 搜索结果列表（有匹配结果时显示） -->
+      <div v-if="searchText.length >= 2 && searchResults.length" class="industry-selector__search-results">
+        <div
+          class="industry-selector__search-item"
+          v-for="r in searchResults"
+          :key="r.child.id"
+          @click="toggleItem(r.child)"
+        >
+          <!-- 格式：一级行业名 → 二级行业名 -->
+          <span>{{ r.parentName }} → {{ r.child.name }}</span>
+          <!-- 已选中项显示勾选图标 -->
+          <svg v-if="isSelected(r.child.id)" class="industry-selector__check" viewBox="0 0 12 12">
+            <path d="M2 6L5 9L10 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+          </svg>
+        </div>
+      </div>
+
+      <!-- 搜索无结果提示 -->
+      <div v-else-if="searchText.length >= 2 && !searchResults.length" class="industry-selector__search-results">
+        <div class="industry-selector__search-empty">无匹配结果</div>
+      </div>
+
+      <!-- 分栏联动选择区（搜索关键词不足 2 字符时显示） -->
+      <div v-if="searchText.length < 2" class="industry-selector__columns">
+        <!-- 左栏：一级行业列表 -->
+        <div class="industry-selector__col industry-selector__col--left">
+          <div
+            class="industry-selector__col-item"
+            :class="{ 'industry-selector__col-item--active': activeParentId === parent.id }"
+            v-for="parent in industries"
+            :key="parent.id"
+            @click="selectParent(parent.id)"
+          >
+            {{ parent.name }}
+          </div>
+        </div>
+        <!-- 右栏：当前一级下的二级行业列表 -->
+        <div class="industry-selector__col industry-selector__col--right">
+          <template v-if="activeChildren.length">
+            <div
+              class="industry-selector__col-item"
+              :class="{ 'industry-selector__col-item--selected': isSelected(child.id) }"
+              v-for="child in activeChildren"
+              :key="child.id"
+              @click="toggleItem(child)"
+            >
+              {{ child.name }}
+              <!-- 已选中显示勾 -->
+              <svg v-if="isSelected(child.id)" class="industry-selector__check" viewBox="0 0 12 12">
+                <path d="M2 6L5 9L10 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+              </svg>
+            </div>
+          </template>
+          <div v-else class="industry-selector__col-empty">请先选择左侧行业分类</div>
+        </div>
+      </div>
+
+      <!-- 底部操作按钮 -->
+      <div class="industry-selector__actions">
+        <button class="industry-selector__btn industry-selector__btn--reset" @click="handleReset">重置</button>
+        <button class="industry-selector__btn industry-selector__btn--confirm" @click="handleConfirm">确认</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
+import { useStore } from 'vuex'
+import type { IndustryChild, IndustryItem } from '@/api/common'
+
+// ==================== 事件与属性定义 ====================
+
+/** 向父组件发送已选行业 ID 数组（integer[]） */
+const emit = defineEmits<{
+  (e: 'update:industryIds', ids: number[]): void
+}>()
+
+/** 接收父组件传入的已选行业 ID 数组 */
+const props = withDefaults(
+  defineProps<{
+    industryIds?: number[]
+    /** 最多可选数量 */
+    maxSelect?: number
+  }>(),
+  {
+    maxSelect: 3,
+  }
+)
+
+// ==================== 基础引用 ====================
+
+/** Vuex store 实例 */
+const store = useStore()
+
+/** 组件根元素引用，用于点击外部关闭判断 */
+const selectorRef = ref<HTMLElement | null>(null)
+
+// ==================== 响应式状态 ====================
+
+/** 下拉面板是否可见 */
+const visible = ref(false)
+
+/** 搜索关键词 */
+const searchText = ref('')
+
+/** 当前选中的一级行业 ID（左栏高亮项） */
+const activeParentId = ref<string>('')
+
+/** 已选中的末级（二级）行业列表（内部临时状态，点确认后才同步给父组件） */
+const selectedItems = ref<IndustryChild[]>([])
+
+// ==================== 计算属性 ====================
+
+/** 从全局 store 获取行业树分类数据 */
+const industries = computed<IndustryItem[]>(() => store.state.industries)
+
+/** 已选中行业 ID 集合，用于快速判断某项是否选中 */
+const selectedIdSet = computed(() => new Set(selectedItems.value.map(i => i.id)))
+
+/** 触发按钮显示文字：无选中显示"行业"，有选中则用逗号拼接名称 */
+const displayText = computed(() => {
+  if (!selectedItems.value.length) return '行业'
+  return selectedItems.value.map(i => i.name).join('，')
+})
+
+/** 当前左栏选中的一级行业对应的二级子项列表 */
+const activeChildren = computed<IndustryChild[]>(() => {
+  if (!activeParentId.value) return []
+  const parent = industries.value.find(p => p.id === activeParentId.value)
+  return parent ? parent.children : []
+})
+
+/** 搜索结果：对末级行业 name 做模糊匹配，返回带一级父名称的结果列表 */
+const searchResults = computed(() => {
+  if (searchText.value.length < 2) return []
+  const keyword = searchText.value.toLowerCase()
+  const results: { parentName: string; child: IndustryChild }[] = []
+  for (const parent of industries.value) {
+    for (const child of parent.children) {
+      if (child.name.toLowerCase().includes(keyword)) {
+        results.push({ parentName: parent.name, child })
+      }
+    }
+  }
+  return results
+})
+
+// ==================== 方法 ====================
+
+/** 判断指定行业 ID 是否已被选中 */
+function isSelected(id: string) {
+  return selectedIdSet.value.has(id)
+}
+
+/** 点击左栏一级行业，切换右栏显示对应二级列表 */
+function selectParent(id: string) {
+  activeParentId.value = id
+}
+
+/** 切换某个末级行业的选中/取消状态，超过上限时提示 */
+function toggleItem(child: IndustryChild) {
+  const idx = selectedItems.value.findIndex(i => i.id === child.id)
+  if (idx >= 0) {
+    selectedItems.value.splice(idx, 1)
+  } else {
+    if (selectedItems.value.length >= props.maxSelect) {
+      ElMessage.warning(`最多只能选择${props.maxSelect}个行业`)
+      return
+    }
+    selectedItems.value.push({ ...child })
+  }
+}
+
+/** 从选中区移除指定行业 */
+function removeItem(item: IndustryChild) {
+  selectedItems.value = selectedItems.value.filter(i => i.id !== item.id)
+}
+
+/** 重置：清空所有已选项 */
+function handleReset() {
+  selectedItems.value = []
+}
+
+/** 确认：将当前选中结果发送给父组件并关闭面板 */
+function handleConfirm() {
+  emitIds()
+  visible.value = false
+}
+
+/** 向父组件发送当前选中的行业 ID 数组（转为整数） */
+function emitIds() {
+  emit('update:industryIds', selectedItems.value.map(i => Number(i.id)))
+}
+
+/** 切换下拉面板的显示/隐藏，打开时清空搜索词并默认选中第一个一级行业 */
+function toggleDropdown() {
+  visible.value = !visible.value
+  if (visible.value) {
+    searchText.value = ''
+    // 默认选中第一个一级行业
+    if (industries.value.length && !activeParentId.value) {
+      activeParentId.value = industries.value[0].id
+    }
+  }
+}
+
+/** 点击组件外部时关闭下拉面板 */
+function onClickOutside(e: MouseEvent) {
+  if (selectorRef.value && !selectorRef.value.contains(e.target as Node)) {
+    visible.value = false
+  }
+}
+
+// ==================== 生命周期 ====================
+
+onMounted(() => {
+  document.addEventListener('click', onClickOutside)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onClickOutside)
+})
+
+// ==================== 监听器 ====================
+
+/** 同步外部传入的 industryIds 到内部选中状态 */
+watch(
+  () => props.industryIds,
+  (ids) => {
+    if (!ids || !industries.value.length) return
+    const allChildren: IndustryChild[] = []
+    for (const p of industries.value) {
+      allChildren.push(...p.children)
+    }
+    selectedItems.value = ids
+      .map(id => allChildren.find(c => c.id === String(id)))
+      .filter(Boolean) as IndustryChild[]
+  },
+  { immediate: true }
+)
+</script>
diff --git a/src/components/tools/JobCategorySelector.vue b/src/components/tools/JobCategorySelector.vue
new file mode 100644
index 0000000..bb68d55
--- /dev/null
+++ b/src/components/tools/JobCategorySelector.vue
@@ -0,0 +1,319 @@
+<template>
+  <!-- 岗位选择器根容器 -->
+  <div class="job-category-selector" ref="selectorRef">
+
+    <!-- 触发按钮：显示已选岗位名称或默认文字"岗位" -->
+    <div class="job-category-selector__trigger" @click="toggleDropdown">
+      <span class="job-category-selector__display" :title="displayText">{{ displayText }}</span>
+      <svg
+        class="job-category-selector__arrow"
+        :class="{ 'job-category-selector__arrow--open': visible }"
+        viewBox="0 0 12 12"
+        fill="none"
+      >
+        <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </div>
+
+    <!-- 下拉面板 -->
+    <div v-if="visible" class="job-category-selector__panel" @click.stop>
+
+      <!-- 选中区：小方块标签展示已选中的岗位名称 -->
+      <div class="job-category-selector__selected-area" v-if="selectedItems.length">
+        <span
+          class="job-category-selector__tag"
+          v-for="item in selectedItems"
+          :key="item.id"
+        >
+          {{ item.name }}
+          <!-- 点击关闭图标移除该选中项 -->
+          <svg class="job-category-selector__tag-close" viewBox="0 0 12 12" @click="removeItem(item)">
+            <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+          </svg>
+        </span>
+      </div>
+
+      <!-- 搜索输入框：输入超过 2 个字符时触发模糊匹配 -->
+      <div class="job-category-selector__search-wrap">
+        <input
+          v-model="searchText"
+          class="job-category-selector__search"
+          placeholder="搜索岗位"
+        />
+      </div>
+
+      <!-- 搜索结果列表 -->
+      <div v-if="searchText.length >= 2 && searchResults.length" class="job-category-selector__search-results">
+        <div
+          class="job-category-selector__search-item"
+          v-for="r in searchResults"
+          :key="r.leaf.id"
+          @click="toggleItem(r.leaf)"
+        >
+          <!-- 格式：一级 → 二级 → 三级 -->
+          <span>{{ r.level1Name }} → {{ r.level2Name }} → {{ r.leaf.name }}</span>
+          <svg v-if="isSelected(r.leaf.id)" class="job-category-selector__check" viewBox="0 0 12 12">
+            <path d="M2 6L5 9L10 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+          </svg>
+        </div>
+      </div>
+
+      <!-- 搜索无结果提示 -->
+      <div v-else-if="searchText.length >= 2 && !searchResults.length" class="job-category-selector__search-results">
+        <div class="job-category-selector__search-empty">无匹配结果</div>
+      </div>
+
+      <!-- 三栏联动选择区（搜索关键词不足 2 字符时显示） -->
+      <div v-if="searchText.length < 2" class="job-category-selector__columns">
+        <!-- 左栏：一级岗位分类 -->
+        <div class="job-category-selector__col job-category-selector__col--left">
+          <div
+            class="job-category-selector__col-item"
+            :class="{ 'job-category-selector__col-item--active': activeLevel1Id === item.id }"
+            v-for="item in categories"
+            :key="item.id"
+            @click="selectLevel1(item.id)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+        <!-- 中栏：二级岗位分类 -->
+        <div class="job-category-selector__col job-category-selector__col--mid">
+          <template v-if="level2List.length">
+            <div
+              class="job-category-selector__col-item"
+              :class="{ 'job-category-selector__col-item--active': activeLevel2Id === item.id }"
+              v-for="item in level2List"
+              :key="item.id"
+              @click="selectLevel2(item.id)"
+            >
+              {{ item.name }}
+            </div>
+          </template>
+          <div v-else class="job-category-selector__col-empty">请先选择左侧分类</div>
+        </div>
+        <!-- 右栏：三级岗位（末级，可选中） -->
+        <div class="job-category-selector__col job-category-selector__col--right">
+          <template v-if="level3List.length">
+            <div
+              class="job-category-selector__col-item"
+              :class="{ 'job-category-selector__col-item--selected': isSelected(item.id) }"
+              v-for="item in level3List"
+              :key="item.id"
+              @click="toggleItem(item)"
+            >
+              {{ item.name }}
+              <svg v-if="isSelected(item.id)" class="job-category-selector__check" viewBox="0 0 12 12">
+                <path d="M2 6L5 9L10 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+              </svg>
+            </div>
+          </template>
+          <div v-else class="job-category-selector__col-empty">请先选择中间分类</div>
+        </div>
+      </div>
+
+      <!-- 底部操作按钮 -->
+      <div class="job-category-selector__actions">
+        <button class="job-category-selector__btn job-category-selector__btn--reset" @click="handleReset">重置</button>
+        <button class="job-category-selector__btn job-category-selector__btn--confirm" @click="handleConfirm">确认</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
+import { useStore } from 'vuex'
+import type { JobCategoryItem, JobCategoryChild, JobCategoryLeaf } from '@/api/common'
+
+// ==================== 事件与属性定义 ====================
+
+/** 向父组件发送已选岗位 ID 数组（integer[]） */
+const emit = defineEmits<{
+  (e: 'update:categoryIds', ids: number[]): void
+}>()
+
+/** 接收父组件传入的已选岗位 ID 数组 */
+const props = withDefaults(
+  defineProps<{
+    categoryIds?: number[]
+    /** 最多可选数量 */
+    maxSelect?: number
+  }>(),
+  {
+    maxSelect: 3,
+  }
+)
+
+// ==================== 基础引用 ====================
+
+/** Vuex store 实例 */
+const store = useStore()
+
+/** 组件根元素引用，用于点击外部关闭判断 */
+const selectorRef = ref<HTMLElement | null>(null)
+
+// ==================== 响应式状态 ====================
+
+/** 下拉面板是否可见 */
+const visible = ref(false)
+
+/** 搜索关键词 */
+const searchText = ref('')
+
+/** 当前选中的一级分类 ID（左栏高亮项） */
+const activeLevel1Id = ref<string>('')
+
+/** 当前选中的二级分类 ID（中栏高亮项） */
+const activeLevel2Id = ref<string>('')
+
+/** 已选中的末级（三级）岗位列表（内部临时状态，点确认后才同步给父组件） */
+const selectedItems = ref<JobCategoryLeaf[]>([])
+
+// ==================== 计算属性 ====================
+
+/** 从全局 store 获取岗位树分类数据 */
+const categories = computed<JobCategoryItem[]>(() => store.state.jobCategories)
+
+/** 已选中岗位 ID 集合，用于快速判断某项是否选中 */
+const selectedIdSet = computed(() => new Set(selectedItems.value.map(i => i.id)))
+
+/** 触发按钮显示文字：无选中显示"岗位"，有选中则用逗号拼接名称 */
+const displayText = computed(() => {
+  if (!selectedItems.value.length) return '岗位'
+  return selectedItems.value.map(i => i.name).join('，')
+})
+
+/** 当前一级分类下的二级列表 */
+const level2List = computed<JobCategoryChild[]>(() => {
+  if (!activeLevel1Id.value) return []
+  const parent = categories.value.find(p => p.id === activeLevel1Id.value)
+  return parent ? parent.children : []
+})
+
+/** 当前二级分类下的三级列表 */
+const level3List = computed<JobCategoryLeaf[]>(() => {
+  if (!activeLevel2Id.value) return []
+  const mid = level2List.value.find(m => m.id === activeLevel2Id.value)
+  return mid ? mid.children : []
+})
+
+/** 搜索结果：对三级岗位 name 做模糊匹配，返回带一级二级名称的完整路径 */
+const searchResults = computed(() => {
+  if (searchText.value.length < 2) return []
+  const keyword = searchText.value.toLowerCase()
+  const results: { level1Name: string; level2Name: string; leaf: JobCategoryLeaf }[] = []
+  for (const l1 of categories.value) {
+    for (const l2 of l1.children) {
+      for (const l3 of l2.children) {
+        if (l3.name.toLowerCase().includes(keyword)) {
+          results.push({ level1Name: l1.name, level2Name: l2.name, leaf: l3 })
+        }
+      }
+    }
+  }
+  return results
+})
+
+// ==================== 方法 ====================
+
+/** 判断指定岗位 ID 是否已被选中 */
+function isSelected(id: string) {
+  return selectedIdSet.value.has(id)
+}
+
+/** 点击左栏一级分类，切换中栏并清空右栏 */
+function selectLevel1(id: string) {
+  activeLevel1Id.value = id
+  activeLevel2Id.value = ''
+}
+
+/** 点击中栏二级分类，切换右栏 */
+function selectLevel2(id: string) {
+  activeLevel2Id.value = id
+}
+
+/** 切换某个末级岗位的选中/取消状态，超过上限时提示 */
+function toggleItem(leaf: JobCategoryLeaf) {
+  const idx = selectedItems.value.findIndex(i => i.id === leaf.id)
+  if (idx >= 0) {
+    selectedItems.value.splice(idx, 1)
+  } else {
+    if (selectedItems.value.length >= props.maxSelect) {
+      ElMessage.warning(`最多只能选择${props.maxSelect}个岗位`)
+      return
+    }
+    selectedItems.value.push({ ...leaf })
+  }
+}
+
+/** 从选中区移除指定岗位 */
+function removeItem(item: JobCategoryLeaf) {
+  selectedItems.value = selectedItems.value.filter(i => i.id !== item.id)
+}
+
+/** 重置：清空所有已选项 */
+function handleReset() {
+  selectedItems.value = []
+}
+
+/** 确认：将当前选中结果发送给父组件并关闭面板 */
+function handleConfirm() {
+  emitIds()
+  visible.value = false
+}
+
+/** 向父组件发送当前选中的岗位 ID 数组（转为整数） */
+function emitIds() {
+  emit('update:categoryIds', selectedItems.value.map(i => Number(i.id)))
+}
+
+/** 切换下拉面板的显示/隐藏，打开时清空搜索词并默认选中第一个一级分类 */
+function toggleDropdown() {
+  visible.value = !visible.value
+  if (visible.value) {
+    searchText.value = ''
+    if (categories.value.length && !activeLevel1Id.value) {
+      activeLevel1Id.value = categories.value[0].id
+    }
+  }
+}
+
+/** 点击组件外部时关闭下拉面板 */
+function onClickOutside(e: MouseEvent) {
+  if (selectorRef.value && !selectorRef.value.contains(e.target as Node)) {
+    visible.value = false
+  }
+}
+
+// ==================== 生命周期 ====================
+
+onMounted(() => {
+  document.addEventListener('click', onClickOutside)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onClickOutside)
+})
+
+// ==================== 监听器 ====================
+
+/** 同步外部传入的 categoryIds 到内部选中状态 */
+watch(
+  () => props.categoryIds,
+  (ids) => {
+    if (!ids || !categories.value.length) return
+    // 收集所有三级叶子节点
+    const allLeaves: JobCategoryLeaf[] = []
+    for (const l1 of categories.value) {
+      for (const l2 of l1.children) {
+        allLeaves.push(...l2.children)
+      }
+    }
+    selectedItems.value = ids
+      .map(id => allLeaves.find(l => l.id === String(id)))
+      .filter(Boolean) as JobCategoryLeaf[]
+  },
+  { immediate: true }
+)
+</script>
diff --git a/src/components/tools/RegionSelector.vue b/src/components/tools/RegionSelector.vue
new file mode 100644
index 0000000..8308222
--- /dev/null
+++ b/src/components/tools/RegionSelector.vue
@@ -0,0 +1,386 @@
+<template>
+  <!-- 地区选择器根容器 -->
+  <div class="region-selector" ref="selectorRef">
+
+    <!-- 触发按钮：显示已选地区名称或默认文字"城市" -->
+    <div class="region-selector__trigger" :style="triggerStyle" @click="toggleDropdown">
+      <span class="region-selector__display" :title="displayText">{{ displayText }}</span>
+      <svg
+        class="region-selector__arrow"
+        :class="{ 'region-selector__arrow--open': visible }"
+        viewBox="0 0 12 12"
+        fill="none"
+      >
+        <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </div>
+
+    <!-- 下拉面板（level=2 时两栏较窄，level=3 时三栏较宽） -->
+    <div
+      v-if="visible"
+      class="region-selector__panel"
+      :class="{ 'region-selector__panel--two-col': level === 2 }"
+      @click.stop
+    >
+
+      <!-- 选中区：小方块标签展示已选中的地区名称 -->
+      <div class="region-selector__selected-area" v-if="selectedItems.length">
+        <span
+          class="region-selector__tag"
+          v-for="item in selectedItems"
+          :key="item.code"
+        >
+          {{ item.name }}
+          <svg class="region-selector__tag-close" viewBox="0 0 12 12" @click="removeItem(item)">
+            <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+          </svg>
+        </span>
+      </div>
+
+      <!-- 搜索输入框 -->
+      <div class="region-selector__search-wrap">
+        <input
+          v-model="searchText"
+          class="region-selector__search"
+          placeholder="搜索地区"
+        />
+      </div>
+
+      <!-- 搜索结果列表 -->
+      <div v-if="searchText.length >= 2 && searchResults.length" class="region-selector__search-results">
+        <div
+          class="region-selector__search-item"
+          v-for="r in searchResults"
+          :key="r.item.code"
+          @click="toggleItem(r.item)"
+        >
+          <span>{{ r.path }}</span>
+          <svg v-if="isSelected(r.item.code)" class="region-selector__check" viewBox="0 0 12 12">
+            <path d="M2 6L5 9L10 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+          </svg>
+        </div>
+      </div>
+      <div v-else-if="searchText.length >= 2 && !searchResults.length" class="region-selector__search-results">
+        <div class="region-selector__search-empty">无匹配结果</div>
+      </div>
+
+      <!-- 分栏联动选择区（搜索关键词不足 2 字符时显示） -->
+      <div v-if="searchText.length < 2" class="region-selector__columns">
+        <!-- 左栏：省级列表 -->
+        <div class="region-selector__col region-selector__col--left">
+          <div
+            class="region-selector__col-item"
+            :class="{ 'region-selector__col-item--active': activeProvinceCode === item.code }"
+            v-for="item in regions"
+            :key="item.code"
+            @click="selectProvince(item.code)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+        <!-- 中栏：市级列表（level=2 时为末级可选中，level=3 时为中间栏） -->
+        <div class="region-selector__col region-selector__col--mid">
+          <template v-if="cityList.length">
+            <div
+              class="region-selector__col-item"
+              :class="cityItemClass(item)"
+              v-for="item in cityList"
+              :key="item.code"
+              @click="onCityClick(item)"
+            >
+              {{ item.name }}
+              <!-- level=2 时显示选中勾 -->
+              <svg v-if="level === 2 && isSelected(item.code)" class="region-selector__check" viewBox="0 0 12 12">
+                <path d="M2 6L5 9L10 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+              </svg>
+            </div>
+          </template>
+          <div v-else class="region-selector__col-empty">请先选择左侧省份</div>
+        </div>
+        <!-- 右栏：区县级列表（仅 level=3 时显示） -->
+        <div v-if="level === 3" class="region-selector__col region-selector__col--right">
+          <template v-if="districtList.length">
+            <div
+              class="region-selector__col-item"
+              :class="{ 'region-selector__col-item--selected': isSelected(item.code) }"
+              v-for="item in districtList"
+              :key="item.code"
+              @click="toggleItem(item)"
+            >
+              {{ item.name }}
+              <svg v-if="isSelected(item.code)" class="region-selector__check" viewBox="0 0 12 12">
+                <path d="M2 6L5 9L10 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+              </svg>
+            </div>
+          </template>
+          <div v-else class="region-selector__col-empty">请先选择中间城市</div>
+        </div>
+      </div>
+
+      <!-- 底部操作按钮 -->
+      <div class="region-selector__actions">
+        <button class="region-selector__btn region-selector__btn--reset" @click="handleReset">重置</button>
+        <button class="region-selector__btn region-selector__btn--confirm" @click="handleConfirm">确认</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
+import { useStore } from 'vuex'
+import type { RegionItem, RegionChild, RegionLeaf } from '@/api/common'
+
+// ==================== 选中项的统一类型（code + name） ====================
+
+/** 选中项统一结构 */
+interface SelectedRegion {
+  code: string
+  name: string
+}
+
+// ==================== 事件与属性定义 ====================
+
+/** 向父组件发送已选地区编码数组（string[]） */
+const emit = defineEmits<{
+  (e: 'update:regionCodes', codes: string[]): void
+}>()
+
+/** 接收父组件传入的属性 */
+const props = withDefaults(
+  defineProps<{
+    /** 已选地区编码数组 */
+    regionCodes?: string[]
+    /** 选择级别：2=选到市级，3=选到区县级 */
+    level?: 2 | 3
+    /** 最多可选数量 */
+    maxSelect?: number
+    /** 父组件传入的触发按钮自定义样式，用于在不同场景下覆盖默认外观 */
+    triggerStyle?: Record<string, string>
+  }>(),
+  {
+    level: 2,
+    maxSelect: 3,
+  }
+)
+
+// ==================== 基础引用 ====================
+
+/** Vuex store 实例 */
+const store = useStore()
+
+/** 组件根元素引用，用于点击外部关闭判断 */
+const selectorRef = ref<HTMLElement | null>(null)
+
+// ==================== 响应式状态 ====================
+
+/** 下拉面板是否可见 */
+const visible = ref(false)
+
+/** 搜索关键词 */
+const searchText = ref('')
+
+/** 当前选中的省级编码（左栏高亮项） */
+const activeProvinceCode = ref<string>('')
+
+/** 当前选中的市级编码（中栏高亮项，仅 level=3 时使用） */
+const activeCityCode = ref<string>('')
+
+/** 已选中的地区列表 */
+const selectedItems = ref<SelectedRegion[]>([])
+
+// ==================== 计算属性 ====================
+
+/** 从全局 store 获取地区树分类数据 */
+const regions = computed<RegionItem[]>(() => store.state.regions)
+
+/** 已选中编码集合，用于快速判断 */
+const selectedCodeSet = computed(() => new Set(selectedItems.value.map(i => i.code)))
+
+/** 触发按钮显示文字 */
+const displayText = computed(() => {
+  if (!selectedItems.value.length) return '城市'
+  return selectedItems.value.map(i => i.name).join('，')
+})
+
+/** 当前省级下的市级列表 */
+const cityList = computed<RegionChild[]>(() => {
+  if (!activeProvinceCode.value) return []
+  const province = regions.value.find(p => p.code === activeProvinceCode.value)
+  return province ? province.children : []
+})
+
+/** 当前市级下的区县级列表（仅 level=3 时有意义） */
+const districtList = computed<RegionLeaf[]>(() => {
+  if (!activeCityCode.value) return []
+  const city = cityList.value.find(c => c.code === activeCityCode.value)
+  return city?.children || []
+})
+
+/** 搜索结果：模糊匹配目标级别的 name，返回带路径的结果 */
+const searchResults = computed(() => {
+  if (searchText.value.length < 2) return []
+  const keyword = searchText.value.toLowerCase()
+  const results: { path: string; item: SelectedRegion }[] = []
+
+  for (const province of regions.value) {
+    if (props.level === 2) {
+      // 选到市级：匹配市级 name
+      for (const city of province.children) {
+        if (city.name.toLowerCase().includes(keyword)) {
+          results.push({
+            path: `${province.name} → ${city.name}`,
+            item: { code: city.code, name: city.name },
+          })
+        }
+      }
+    } else {
+      // 选到区县级：匹配区县级 name
+      for (const city of province.children) {
+        if (city.children) {
+          for (const district of city.children) {
+            if (district.name.toLowerCase().includes(keyword)) {
+              results.push({
+                path: `${province.name} → ${city.name} → ${district.name}`,
+                item: { code: district.code, name: district.name },
+              })
+            }
+          }
+        }
+      }
+    }
+  }
+  return results
+})
+
+// ==================== 方法 ====================
+
+/** 判断指定编码是否已被选中 */
+function isSelected(code: string) {
+  return selectedCodeSet.value.has(code)
+}
+
+/** 点击左栏省级，切换中栏并清空右栏 */
+function selectProvince(code: string) {
+  activeProvinceCode.value = code
+  activeCityCode.value = ''
+}
+
+/** 点击中栏市级：level=2 时直接选中/取消，level=3 时切换右栏 */
+function onCityClick(city: RegionChild) {
+  if (props.level === 2) {
+    toggleItem({ code: city.code, name: city.name })
+  } else {
+    activeCityCode.value = city.code
+  }
+}
+
+/** 中栏行的 class：level=2 时用 selected 样式，level=3 时用 active 样式 */
+function cityItemClass(city: RegionChild) {
+  if (props.level === 2) {
+    return { 'region-selector__col-item--selected': isSelected(city.code) }
+  }
+  return { 'region-selector__col-item--active': activeCityCode.value === city.code }
+}
+
+/** 切换某个地区的选中/取消状态 */
+function toggleItem(item: SelectedRegion) {
+  const idx = selectedItems.value.findIndex(i => i.code === item.code)
+  if (idx >= 0) {
+    selectedItems.value.splice(idx, 1)
+  } else {
+    if (selectedItems.value.length >= props.maxSelect) {
+      ElMessage.warning(`最多只能选择${props.maxSelect}个地区`)
+      return
+    }
+    selectedItems.value.push({ ...item })
+  }
+}
+
+/** 从选中区移除指定地区 */
+function removeItem(item: SelectedRegion) {
+  selectedItems.value = selectedItems.value.filter(i => i.code !== item.code)
+}
+
+/** 重置：清空所有已选项并关闭面板 */
+function handleReset() {
+  selectedItems.value = []
+  emitCodes()
+  setTimeout(() => {
+    visible.value = false
+  }, 0)
+}
+
+/** 确认：将当前选中结果发送给父组件并关闭面板 */
+function handleConfirm() {
+  emitCodes()
+  // 延迟关闭面板，避免 v-if 移除面板后同一个 click 事件落到 trigger 上触发 toggleDropdown
+  setTimeout(() => {
+    visible.value = false
+  }, 0)
+}
+
+/** 向父组件发送当前选中的地区编码数组 */
+function emitCodes() {
+  emit('update:regionCodes', selectedItems.value.map(i => i.code))
+}
+
+/** 切换下拉面板的显示/隐藏 */
+function toggleDropdown() {
+  visible.value = !visible.value
+  if (visible.value) {
+    searchText.value = ''
+    if (regions.value.length && !activeProvinceCode.value) {
+      activeProvinceCode.value = regions.value[0].code
+    }
+  }
+}
+
+/** 点击组件外部时关闭下拉面板 */
+function onClickOutside(e: MouseEvent) {
+  if (selectorRef.value && !selectorRef.value.contains(e.target as Node)) {
+    visible.value = false
+  }
+}
+
+// ==================== 生命周期 ====================
+
+onMounted(() => {
+  document.addEventListener('click', onClickOutside)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onClickOutside)
+})
+
+// ==================== 监听器 ====================
+
+/** 同步外部传入的 regionCodes 到内部选中状态 */
+watch(
+  () => props.regionCodes,
+  (codes) => {
+    if (!codes || !regions.value.length) return
+    // 根据 level 收集对应级别的所有节点
+    const allNodes: SelectedRegion[] = []
+    for (const province of regions.value) {
+      if (props.level === 2) {
+        for (const city of province.children) {
+          allNodes.push({ code: city.code, name: city.name })
+        }
+      } else {
+        for (const city of province.children) {
+          if (city.children) {
+            for (const district of city.children) {
+              allNodes.push({ code: district.code, name: district.name })
+            }
+          }
+        }
+      }
+    }
+    selectedItems.value = codes
+      .map(code => allNodes.find(n => n.code === code))
+      .filter(Boolean) as SelectedRegion[]
+  },
+  { immediate: true }
+)
+</script>
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..2219ddd
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './stores'
+import '@/assets/styles/index.scss'
+
+createApp(App)
+  .use(router)
+  .use(store)
+  .mount('#app')
\ No newline at end of file
diff --git a/src/router/dynamicRoutes.ts b/src/router/dynamicRoutes.ts
new file mode 100644
index 0000000..e4e120d
--- /dev/null
+++ b/src/router/dynamicRoutes.ts
@@ -0,0 +1,41 @@
+import type { RouteRecordRaw } from 'vue-router'
+import type { MenuItemRaw } from '@/api/menu'
+
+/**
+ * 组件映射表
+ *
+ * key   = 后端返回的 component 字符串
+ * value = 对应的懒加载组件
+ *
+ * 【新增页面时】在这里加一条映射即可，后端返回对应的 key 就能自动注册路由
+ */
+const componentMap: Record<string, () => Promise<any>> = {
+  'Agent':    () => import('@/views/Agent.vue'),
+  'Profile':  () => import('@/views/Profile.vue'),
+  'Resume':   () => import('@/views/Resume.vue'),
+}
+
+/**
+ * 把后端返回的菜单数据转换成 vue-router 能识别的 RouteRecordRaw
+ *
+ * 如果后端返回了一个 component 字符串在映射表里找不到，会跳过该条路由并打印警告
+ */
+export function buildDynamicRoutes(menus: MenuItemRaw[]): RouteRecordRaw[] {
+  const routes: RouteRecordRaw[] = []
+
+  for (const item of menus) {
+    const comp = componentMap[item.component]
+    if (!comp) {
+      console.warn(`[dynamicRoutes] 组件映射表中找不到 "${item.component}"，已跳过`)
+      continue
+    }
+    routes.push({
+      path: item.path,
+      name: item.name,
+      component: comp,
+      meta: { ...item.meta },
+    })
+  }
+
+  return routes
+}
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..eac0809
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,58 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+import store from '@/stores'
+
+/**
+ * 静态路由 — 不需要权限，应用启动就注册
+ */
+const staticRoutes: RouteRecordRaw[] = [
+  { path: '/',     name: 'Home', component: () => import('@/views/Home.vue') },
+  { path: '/jobs', name: 'Jobs', component: () => import('@/views/Jobs.vue') },
+  {
+    path: '/resume/:id',
+    name: 'ResumeDetail',
+    component: () => import('@/views/ResumeDetail.vue'),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: '/jobs/:id',
+    name: 'JobDetail',
+    component: () => import('@/views/JobDetail.vue'),
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: staticRoutes,
+})
+
+/**
+ * 全局前置守卫 — 核心逻辑：
+ *
+ * 1. 动态路由未加载 → 先拉取并注册，再重新进入当前路由
+ * 2. 需要鉴权的路由没有 token → 回首页
+ * 3. 其他情况 → 直接放行
+ */
+router.beforeEach(async (to, _from, next) => {
+  // 动态路由只需加载一次，与登录状态无关
+  if (!store.state.routesLoaded) {
+    try {
+      await store.dispatch('loadDynamicRoutes', router)
+      next({ ...to, replace: true })
+    } catch (err) {
+      console.error('[router] 加载动态路由失败', err)
+      next({ name: 'Home' })
+    }
+    return
+  }
+
+  // 需要鉴权的路由，未登录则回首页
+  if (to.meta?.requiresAuth && !store.state.isAuthenticated) {
+    next({ name: 'Home' })
+    return
+  }
+
+  next()
+})
+
+export default router
diff --git a/src/stores/index.ts b/src/stores/index.ts
new file mode 100644
index 0000000..973ce9d
--- /dev/null
+++ b/src/stores/index.ts
@@ -0,0 +1,210 @@
+import { createStore } from 'vuex'
+import type { Router } from 'vue-router'
+import { fetchUserRoutes } from '@/api/menu'
+import type { MenuItemRaw } from '@/api/menu'
+import { buildDynamicRoutes } from '@/router/dynamicRoutes'
+import { fetchIndustryTree, fetchJobCategoryTree, fetchRegionTree } from '@/api/common'
+import type { IndustryItem, JobCategoryItem, RegionItem } from '@/api/common'
+
+/** 职位列表页缓存数据（从详情页返回时恢复用） */
+export interface JobListCache {
+  /** 缓存的职位列表 */
+  list: any[]
+  /** 当前已加载到的页码 */
+  pageNum: number
+  /** 总记录数 */
+  total: number
+  /** 列表滚动位置 */
+  scrollTop: number
+}
+
+export interface RootState {
+  appName: string
+  showLogin: boolean
+  loginRedirect: string
+
+  /**
+   * 登录状态 — 登录成功设为 true，退出成功设为 false
+   * 因为后端 Cookie 是 HttpOnly 的，前端 JS 无法读取，所以用内存状态管理
+   */
+  isAuthenticated: boolean
+
+  /**
+   * 后端返回的原始菜单数据，SideNav 用它来渲染导航
+   */
+  dynamicMenus: MenuItemRaw[]
+
+  /**
+   * 标记动态路由是否已经加载过，避免重复请求
+   * 每次登出时重置为 false
+   */
+  routesLoaded: boolean
+
+  /**
+   * 记录已注册的动态路由 name，登出时用来逐个 removeRoute
+   */
+  dynamicRouteNames: string[]
+
+  /**
+   * 行业树分类数据（一级二级嵌套）
+   * 由 /public/industries/tree 接口返回，进首页和 Jobs 页时刷新
+   * 其他页面/组件可直接从 store 读取
+   */
+  industries: IndustryItem[]
+
+  /**
+   * 岗位树分类数据（一级二级三级嵌套）
+   * 由 /public/job-categories/tree 接口返回，进首页和 Jobs 页时刷新
+   * 其他页面/组件可直接从 store 读取
+   */
+  jobCategories: JobCategoryItem[]
+
+  /**
+   * 地区树分类数据（省市区三级嵌套）
+   * 由 /public/regions/tree 接口返回，进首页和 Jobs 页时刷新
+   * 其他页面/组件可直接从 store 读取
+   */
+  regions: RegionItem[]
+
+  /**
+   * 职位列表页缓存 — 从详情页返回时恢复列表和滚动位置
+   * 为 null 表示没有缓存，需要重新请求
+   */
+  jobListCache: JobListCache | null
+}
+
+export default createStore<RootState>({
+  state: {
+    appName: 'JobAssistant',
+    showLogin: false,
+    loginRedirect: '',
+    isAuthenticated: sessionStorage.getItem('isAuthenticated') === 'true',
+    dynamicMenus: [],
+    routesLoaded: false,
+    dynamicRouteNames: [],
+    industries: [],
+    jobCategories: [],
+    regions: [],
+    jobListCache: null,
+  },
+  getters: {
+    getAppName: (state) => state.appName,
+  },
+  mutations: {
+    SET_APP_NAME(state, name: string) {
+      state.appName = name
+    },
+    SET_SHOW_LOGIN(state, show: boolean) {
+      state.showLogin = show
+    },
+    SET_LOGIN_REDIRECT(state, path: string) {
+      state.loginRedirect = path
+    },
+    SET_AUTHENTICATED(state, val: boolean) {
+      state.isAuthenticated = val
+      if (val) {
+        sessionStorage.setItem('isAuthenticated', 'true')
+      } else {
+        sessionStorage.removeItem('isAuthenticated')
+      }
+    },
+    SET_DYNAMIC_MENUS(state, menus: MenuItemRaw[]) {
+      state.dynamicMenus = menus
+    },
+    SET_ROUTES_LOADED(state, loaded: boolean) {
+      state.routesLoaded = loaded
+    },
+    SET_DYNAMIC_ROUTE_NAMES(state, names: string[]) {
+      state.dynamicRouteNames = names
+    },
+    SET_INDUSTRIES(state, data: IndustryItem[]) {
+      state.industries = data
+    },
+    SET_JOB_CATEGORIES(state, data: JobCategoryItem[]) {
+      state.jobCategories = data
+    },
+    SET_REGIONS(state, data: RegionItem[]) {
+      state.regions = data
+    },
+    SET_JOB_LIST_CACHE(state, cache: JobListCache | null) {
+      state.jobListCache = cache
+    },
+  },
+  actions: {
+    updateAppName({ commit }, name: string) {
+      commit('SET_APP_NAME', name)
+    },
+    openLogin({ commit }, redirect = '') {
+      commit('SET_LOGIN_REDIRECT', redirect)
+      commit('SET_SHOW_LOGIN', true)
+    },
+    closeLogin({ commit }) {
+      commit('SET_SHOW_LOGIN', false)
+      commit('SET_LOGIN_REDIRECT', '')
+    },
+
+    /**
+     * 核心 action：从后端（或 mock）拉取菜单，转成路由并注册
+     *
+     * @param router — vue-router 实例，由路由守卫调用时传入
+     *
+     * 流程：
+     *   1. 调 fetchUserRoutes 拿到后端菜单数据
+     *   2. 存到 state.dynamicMenus（给 SideNav 渲染用）
+     *   3. 用 buildDynamicRoutes 转成 RouteRecordRaw
+     *   4. 逐条 router.addRoute 注册
+     *   5. 记录已注册的路由名，标记 routesLoaded = true
+     */
+    async loadDynamicRoutes({ commit }, router: Router) {
+      const menus = await fetchUserRoutes()
+      commit('SET_DYNAMIC_MENUS', menus)
+
+      const routes = buildDynamicRoutes(menus)
+      const names: string[] = []
+
+      for (const route of routes) {
+        router.addRoute(route)
+        if (route.name) names.push(route.name as string)
+      }
+
+      commit('SET_DYNAMIC_ROUTE_NAMES', names)
+      commit('SET_ROUTES_LOADED', true)
+    },
+
+    /**
+     * 登出：重置状态（不再操作 localStorage，登录状态由 Cookie 管理）
+     * 注意：动态路由不清除，与登录状态无关
+     */
+    logout({ commit }) {
+      commit('SET_AUTHENTICATED', false)
+      commit('SET_SHOW_LOGIN', false)
+      commit('SET_LOGIN_REDIRECT', '')
+    },
+
+    /**
+     * 加载工具类公共数据（行业分类、岗位分类等）
+     * 进首页和 Jobs 页时调用，刷新全局数据
+     */
+    async loadCommonData({ commit }) {
+      try {
+        const [industryRes, jobCategoryRes, regionRes] = await Promise.all([
+          fetchIndustryTree(),
+          fetchJobCategoryTree(),
+          fetchRegionTree(),
+        ])
+        if (industryRes.code === '0' && industryRes.data) {
+          commit('SET_INDUSTRIES', industryRes.data)
+        }
+        if (jobCategoryRes.code === '0' && jobCategoryRes.data) {
+          commit('SET_JOB_CATEGORIES', jobCategoryRes.data)
+        }
+        if (regionRes.code === '0' && regionRes.data) {
+          commit('SET_REGIONS', regionRes.data)
+        }
+      } catch (err) {
+        console.error('[store] 加载公共分类数据失败', err)
+      }
+    },
+  },
+  modules: {},
+})
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..6fbc722
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,19 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#app {
+  margin: 0;
+  padding: 0;
+}
diff --git a/src/types/env.d.ts b/src/types/env.d.ts
new file mode 100644
index 0000000..8ab4f00
--- /dev/null
+++ b/src/types/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
diff --git a/src/types/images.d.ts b/src/types/images.d.ts
new file mode 100644
index 0000000..8ec27b7
--- /dev/null
+++ b/src/types/images.d.ts
@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const src: string
+  export default src
+}
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
new file mode 100644
index 0000000..33157c8
--- /dev/null
+++ b/src/types/index.d.ts
@@ -0,0 +1,5 @@
+export interface ApiResponse<T> {
+    code: number
+    message: string
+    data: T
+  }
\ No newline at end of file
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
new file mode 100644
index 0000000..37c88b7
--- /dev/null
+++ b/src/utils/auth.ts
@@ -0,0 +1,14 @@
+/**
+ * 从 document.cookie 中提取指定 name 的值
+ */
+export function getCookie(name: string): string | null {
+  const match = document.cookie.match(new RegExp(`(?:^|;\\s*)${name}=([^;]*)`))
+  return match ? decodeURIComponent(match[1]) : null
+}
+
+/**
+ * 判断是否已登录 — 通过 Cookie 中是否存在 Token 来判断
+ */
+export function isLoggedIn(): boolean {
+  return !!getCookie('Token')
+}
diff --git a/src/utils/region.ts b/src/utils/region.ts
new file mode 100644
index 0000000..90e3518
--- /dev/null
+++ b/src/utils/region.ts
@@ -0,0 +1,25 @@
+import store from '@/stores/index'
+import type { RegionItem } from '@/api/common'
+
+/**
+ * 根据城市编码从 store 地区树中查找对应的城市名称
+ * 遍历省→市→区三级，匹配到即返回名称，未匹配返回编码本身
+ * @param code 地区编码（如 '130300'）
+ * @returns 匹配到的城市名称，未匹配则返回原编码
+ */
+export function resolveRegionName(code: string): string {
+  if (!code) return ''
+  const regions: RegionItem[] = store.state.regions
+  for (const province of regions) {
+    if (province.code === code) return province.name
+    for (const city of province.children) {
+      if (city.code === code) return city.name
+      if (city.children) {
+        for (const district of city.children) {
+          if (district.code === code) return district.name
+        }
+      }
+    }
+  }
+  return code
+}
diff --git a/src/utils/request.ts b/src/utils/request.ts
new file mode 100644
index 0000000..a10954b
--- /dev/null
+++ b/src/utils/request.ts
@@ -0,0 +1,32 @@
+import axios from 'axios'
+import type { AxiosResponse } from 'axios'
+
+/**
+ * 创建 axios 实例
+ * withCredentials: true — 浏览器自动携带 Cookie（包括 HttpOnly 的 Token）
+ */
+const service = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+  timeout: 15000,
+  withCredentials: true,
+})
+
+/**
+ * 响应拦截器 — 统一处理错误
+ */
+service.interceptors.response.use(
+  (response: AxiosResponse) => {
+    return response.data
+  },
+  (error) => {
+    const status = error.response?.status
+    if (status === 401) {
+      ElMessage.error('登录已过期，请重新登录')
+    } else {
+      ElMessage.error(error.response?.data?.msg || '请求失败')
+    }
+    return Promise.reject(error)
+  },
+)
+
+export default service
diff --git a/src/views/Agent.vue b/src/views/Agent.vue
new file mode 100644
index 0000000..35988ce
--- /dev/null
+++ b/src/views/Agent.vue
@@ -0,0 +1,434 @@
+<template>
+  <!-- 求职助手页面 — 准备阶段 -->
+  <div class="agent-page dflex">
+    <!-- 左侧导航栏 -->
+    <SideNav />
+
+    <!-- 主内容区域 -->
+    <div class="agent-page__content">
+      <!-- 个人资料编辑抽屉 -->
+      <ProfileEditDrawer
+        v-model="showEditDrawer"
+        :module="editModule"
+        :initial-data="editInitialData"
+        @save="handleSaveEdit"
+      />
+
+      <!-- 顶部步骤导航条 -->
+      <div class="agent-page__steps">
+        <template v-for="(step, index) in steps" :key="index">
+          <!-- 单个步骤项 -->
+          <div
+            class="agent-page__step"
+            :class="{ 'agent-page__step--active': currentStep === index + 1 }"
+          >
+            <span class="agent-page__step-number">{{ index + 1 }}</span>
+            <span class="agent-page__step-label">{{ step }}</span>
+          </div>
+          <!-- 步骤间分隔箭头 -->
+          <span v-if="index < steps.length - 1" class="agent-page__step-arrow">
+            <svg viewBox="0 0 16 16" fill="none">
+              <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </span>
+        </template>
+      </div>
+
+      <!-- 主体内容区域 — 左右两栏布局 -->
+      <div class="agent-page__main">
+        <!-- ========== 第1步：确认个人资料 ========== -->
+        <template v-if="currentStep === 1">
+          <!-- 左侧：说明引导卡片 -->
+          <div class="agent-page__left">
+            <div class="agent-page__intro-card">
+              <!-- 图标 + 标题 -->
+              <div class="agent-page__intro-header">
+                <div class="agent-page__intro-icon">
+                  <svg viewBox="0 0 24 24" fill="none">
+                    <path d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z" fill="currentColor"/>
+                  </svg>
+                </div>
+                <h2 class="agent-page__intro-title">在开始之前请先确认你的个人资料是否无误</h2>
+              </div>
+
+              <!-- 说明文字 -->
+              <p class="agent-page__intro-desc">
+                请仔细对你的资料评估（包括个人信息、教育背景、工作履历及技能），确保资料齐全，让我能顺利为你开启求职之旅。
+              </p>
+
+              <!-- 导入个人资料入口 -->
+              <div class="agent-page__import-row">
+                <div class="agent-page__import-icon">
+                  <svg viewBox="0 0 24 24" fill="none">
+                    <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </div>
+                <span class="agent-page__import-text">李华的个人资料</span>
+              </div>
+
+              <!-- 确认并进入按钮 -->
+              <button class="agent-page__confirm-btn" @click="handleNext">
+                确认并进入
+              </button>
+            </div>
+          </div>
+
+          <!-- 右侧：个人档案预览 -->
+          <div class="agent-page__right">
+            <div class="agent-page__profile-wrapper">
+              <!-- 个人档案标题 -->
+              <div class="agent-page__profile-title">个人档案</div>
+              <!-- 引用 ProfilePageContent 组件 -->
+              <ProfilePageContent
+                :profile="profile"
+                @edit="handleEdit"
+              />
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import SideNav from '@/components/SideNav.vue'
+import ProfilePageContent from '@/components/ProfilePageContent.vue'
+import ProfileEditDrawer from '@/components/ProfileEditDrawer.vue'
+
+// ==================== 步骤导航数据 ====================
+
+/** 求职助手准备阶段的5个步骤名称 */
+const steps = [
+  '确认个人资料',
+  '确认目标',
+  '竞争力评估',
+  '开启自动申请',
+  '配置求职助手',
+]
+
+/** 当前激活的步骤序号（1-5） */
+const currentStep = ref(1)
+
+// ==================== 编辑抽屉状态 ====================
+
+/** 编辑抽屉是否显示 */
+const showEditDrawer = ref(false)
+
+/** 当前编辑的模块名称（info / education / work 等） */
+const editModule = ref('info')
+
+/** 当前编辑模块的初始数据 */
+const editInitialData = ref<Record<string, any>>({})
+
+// ==================== 个人档案数据 ====================
+
+// ==================== 模拟数据 ====================
+const profile = ref({
+  name: '李华',
+  phone: '13600008888',
+  email: '[email]',
+  idNumber: '510201420040328',
+  location: '北京',
+  wechat: '15100001232',
+  /** 教育经历 — 对应数据库 bg_user_profile_education */
+  education: [
+    {
+      /** 学校名称 */
+      school: '华南科技大学',
+      /** 专业 */
+      major: '会计学/工商管理',
+      /** 学历类型（0=全日制 1=非全日制） */
+      studyType: 0,
+      /** 学历（1=大专 2=本科 3=硕士 4=博士） */
+      degree: 2,
+      /** 入学年份 */
+      startYear: 2017,
+      /** 毕业年份 */
+      endYear: 2021,
+      /** 描述段落，格式：[{id, text}] */
+      description: [
+        { id: 'e1d1', text: 'GPA 3.8/4.0，主要课程包括金融工程、风险管理、量化投资等。' },
+      ],
+    },
+    {
+      school: '北京理工大学',
+      major: '金融学/应用经济学',
+      studyType: 0,
+      degree: 3,
+      startYear: 2021,
+      endYear: 2024,
+      description: [
+        { id: 'e2d1', text: 'GPA 3.7/4.0，研究方向为金融科技与量化交易。' },
+      ],
+    },
+  ],
+  /** 工作经历 — 对应数据库 bg_user_profile_work */
+  works: [
+    {
+      /** 公司名称 */
+      companyName: '华泰证券',
+      /** 职位 */
+      position: '投资经理',
+      /** 开始时间 */
+      startDate: '2024-07-01',
+      /** 结束时间 */
+      endDate: '',
+      /** 描述段落，格式：[{id, text}] */
+      description: [
+        { id: 'w1d1', text: '负责新能源行业投资研究，独立完成多份行业深度研究报告，为投资决策提供数据支持。' },
+        { id: 'w1d2', text: '管理投资组合，跟踪市场动态，定期输出投资策略建议和风险评估报告。' },
+      ],
+    },
+  ],
+  internships: [
+    {
+      /** 公司名称 */
+      companyName: '中信证券',
+      /** 职位 */
+      position: '投资分析师实习生',
+      /** 开始时间 */
+      startDate: '2022-06-01',
+      /** 结束时间 */
+      endDate: '2022-09-30',
+      /** 描述段落，格式：[{id, text}] */
+      description: [
+        { id: 'i1d1', text: '参与编制行业研究报告，协助产品经理进行市场分析，完成多项行业深度研究报告。' },
+        { id: 'i1d2', text: '参与公司新产品的市场调研，独立完成3份产品市场调研报告，为新产品策略提供数据支持。' },
+        { id: 'i1d3', text: '参与团队投资研究项目的数据清洗工作，运用Python进行数据分析和可视化。' },
+      ],
+    },
+    {
+      companyName: '招商证券',
+      position: '研究部实习生',
+      startDate: '2022-01-01',
+      endDate: '2022-05-31',
+      description: [
+        { id: 'i2d1', text: '协助分析师研究TMT行业趋势，参与公司研究报告撰写，深入了解行业发展动态。' },
+        { id: 'i2d2', text: '参与公司研究部门的数据整理，负责维护和更新行业数据库及金融模型数据。' },
+        { id: 'i2d3', text: '参与量化模型的搭建与优化测试，加深了对研究分析、定量分析的理解和应用能力。' },
+      ],
+    },
+  ],
+  projects: [
+    {
+      /** 项目名称 */
+      projectName: '中石化项目',
+      /** 所属公司 */
+      companyName: '中石化集团',
+      /** 担任角色 */
+      role: '数据分析师',
+      /** 开始时间 */
+      startDate: '2023-04-01',
+      /** 结束时间 */
+      endDate: '2023-09-30',
+      /** 描述段落，格式：[{id, text}] */
+      description: [
+        { id: 'p1d1', text: '参与石化行业数据分析研究，搭建行业数据监控系统，完善数据可视化展示方案。' },
+        { id: 'p1d2', text: '负责行业关键指标监测，数据驱动业务决策，协助完成3份产品研究报告。' },
+        { id: 'p1d3', text: '运用Python进行数据分析与可视化，加深了对行业研究、数据分析的理解。' },
+      ],
+    },
+    {
+      projectName: '综合运营',
+      companyName: '',
+      role: 'TMTV运营实习',
+      startDate: '2022-07-01',
+      endDate: '2022-12-31',
+      description: [
+        { id: 'p2d1', text: '分析市场数据并进行TMT行业深度分析，参与产品运营策略制定，完善运营数据分析体系。' },
+        { id: 'p2d2', text: '负责公司新媒体平台内容策划，负责维护和更新行业数据及金融模型数据。' },
+        { id: 'p2d3', text: '参与运营团队的数据分析和报告撰写，进行了深度分析，深刻认识到行业趋势的重要性。' },
+      ],
+    },
+  ],
+  skills: ['CET 6', 'Photoshop', 'Python'],
+  /** 竞赛经历 — 对应数据库 bg_user_profile_competition */
+  competitions: [
+    {
+      /** 竞赛名称 */
+      competitionName: '全国大学生创新创业大赛',
+      /** 获奖情况 */
+      award: '全国二等奖',
+      /** 获奖时间 */
+      awardDate: '2023.07.12',
+      /** 描述段落，格式：[{id, text}] */
+      description: [
+        { id: 'c1d1', text: '负责中央财经大学TMT产业研究，参与研究报告撰写，负责数据分析与模型搭建。参与公司新媒体平台内容策划，与公司媒体部门协作完成多个品牌营销方案。' },
+      ],
+    },
+    {
+      competitionName: '商业分析大赛',
+      award: '全国一等奖',
+      awardDate: '2023.07.12',
+      description: [
+        { id: 'c2d1', text: '' },
+      ],
+    },
+  ],
+  certificates: ['CFA', 'CMA'],
+})
+
+// ==================== 事件处理方法 ====================
+
+/** 打开编辑抽屉 — 根据模块名提取对应的初始数据传给抽屉 */
+function handleEdit(section: string) {
+  editModule.value = section
+
+  if (section === 'info') {
+    // 基本信息
+    editInitialData.value = {
+      name: profile.value.name,
+      email: profile.value.email,
+      phone: profile.value.phone,
+      location: profile.value.location,
+      wechat: profile.value.wechat,
+    }
+  } else if (section === 'education') {
+    // 教育经历 — 深拷贝 description 避免引用污染
+    editInitialData.value = {
+      education: profile.value.education.map(edu => ({
+        school: edu.school,
+        major: edu.major,
+        studyType: edu.studyType,
+        degree: edu.degree,
+        startYear: edu.startYear,
+        endYear: edu.endYear,
+        description: edu.description.map(d => ({ ...d })),
+      })),
+    }
+  } else if (section === 'work') {
+    // 工作经历
+    editInitialData.value = {
+      works: profile.value.works.map(exp => ({
+        companyName: exp.companyName,
+        position: exp.position,
+        startDate: exp.startDate,
+        endDate: exp.endDate,
+        description: exp.description.map(d => ({ ...d })),
+      })),
+    }
+  } else if (section === 'internship') {
+    // 实习经历
+    editInitialData.value = {
+      internships: (profile.value.internships || []).map(exp => ({
+        companyName: exp.companyName,
+        position: exp.position,
+        startDate: exp.startDate,
+        endDate: exp.endDate,
+        description: exp.description.map(d => ({ ...d })),
+      })),
+    }
+  } else if (section === 'project') {
+    // 项目经历
+    editInitialData.value = {
+      projects: (profile.value.projects || []).map(proj => ({
+        projectName: proj.projectName,
+        companyName: proj.companyName,
+        role: proj.role,
+        startDate: proj.startDate,
+        endDate: proj.endDate,
+        description: proj.description.map(d => ({ ...d })),
+      })),
+    }
+  } else if (section === 'competition') {
+    // 竞赛经历
+    editInitialData.value = {
+      competitions: profile.value.competitions.map(comp => ({
+        competitionName: comp.competitionName,
+        award: comp.award,
+        awardDate: comp.awardDate,
+        description: comp.description.map(d => ({ ...d })),
+      })),
+    }
+  } else if (section === 'skills') {
+    // 技能
+    editInitialData.value = {
+      skills: [...profile.value.skills],
+    }
+  } else if (section === 'certificate') {
+    // 证书
+    editInitialData.value = {
+      certificates: [...(profile.value.certificates || [])],
+    }
+  } else {
+    editInitialData.value = {}
+  }
+
+  showEditDrawer.value = true
+}
+
+/** 保存编辑数据 — 将抽屉返回的数据按模块回写到 profile */
+function handleSaveEdit(data: Record<string, any>) {
+  if (editModule.value === 'info') {
+    // 基本信息 — 直接合并
+    Object.assign(profile.value, data)
+  } else if (editModule.value === 'education') {
+    // 教育经历
+    profile.value.education = data.education.map((edu: any) => ({
+      school: edu.school,
+      major: edu.major,
+      studyType: edu.studyType,
+      degree: edu.degree,
+      startYear: edu.startYear,
+      endYear: edu.endYear,
+      description: edu.description.map((d: any) => ({ ...d })),
+    }))
+  } else if (editModule.value === 'work') {
+    // 工作经历
+    profile.value.works = data.works.map((work: any) => ({
+      companyName: work.companyName,
+      position: work.position,
+      startDate: work.startDate,
+      endDate: work.endDate,
+      description: work.description.map((d: any) => ({ ...d })),
+    }))
+  } else if (editModule.value === 'internship') {
+    // 实习经历
+    profile.value.internships = data.internships.map((intern: any) => ({
+      companyName: intern.companyName,
+      position: intern.position,
+      startDate: intern.startDate,
+      endDate: intern.endDate,
+      description: intern.description.map((d: any) => ({ ...d })),
+    }))
+  } else if (editModule.value === 'project') {
+    // 项目经历
+    profile.value.projects = data.projects.map((proj: any) => ({
+      projectName: proj.projectName,
+      companyName: proj.companyName,
+      role: proj.role,
+      startDate: proj.startDate,
+      endDate: proj.endDate,
+      description: proj.description.map((d: any) => ({ ...d })),
+    }))
+  } else if (editModule.value === 'competition') {
+    // 竞赛经历
+    profile.value.competitions = data.competitions.map((comp: any) => ({
+      competitionName: comp.competitionName,
+      award: comp.award,
+      awardDate: comp.awardDate,
+      description: comp.description.map((d: any) => ({ ...d })),
+    }))
+  } else if (editModule.value === 'skills') {
+    // 技能
+    profile.value.skills = [...data.skills]
+  } else if (editModule.value === 'certificate') {
+    // 证书
+    profile.value.certificates = [...data.certificates]
+  }
+}
+
+/** 处理"确认并进入"按钮点击 — 进入下一步 */
+function handleNext() {
+  if (currentStep.value < steps.length) {
+    currentStep.value++
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@use '../assets/styles/pages/agent';
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..823d596
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="home-page">
+    <h1>首页</h1>
+    <el-button type="primary" size="large" @click="router.push('/jobs')">浏览职位</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+
+const router = useRouter()
+const store = useStore()
+
+onMounted(() => {
+  // 进入首页时加载公共工具数据（行业分类等）
+  store.dispatch('loadCommonData')
+})
+</script>
diff --git a/src/views/JobDetail.vue b/src/views/JobDetail.vue
new file mode 100644
index 0000000..117c6af
--- /dev/null
+++ b/src/views/JobDetail.vue
@@ -0,0 +1,546 @@
+<template>
+  <div class="job-detail dflex">
+    <SideNav />
+    <div class="job-detail__content">
+      <!-- 页面标题 + Tab 切换 -->
+      <JobPageHeader :activeTab="''" />
+
+      <!-- 顶部操作栏 -->
+      <div class="job-detail__toolbar">
+        <button class="job-detail__close-btn" @click="goBack" aria-label="关闭">
+          <svg viewBox="0 0 16 16" fill="none" class="job-detail__close-icon">
+            <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </button>
+        <div class="job-detail__toolbar-right">
+          <button class="job-detail__tool-btn" aria-label="编辑" @click="openDislikeDialog">
+            <svg viewBox="0 0 16 16" fill="none" class="job-detail__tool-icon">
+              <path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+            </svg>
+          </button>
+          <button class="jobs-page__action-icon-btn" :class="{ 'job-detail__tool-btn--liked': job.isFavorite }" aria-label="收藏">
+            <svg viewBox="0 0 16 16" :fill="job.isFavorite ? 'currentColor' : 'none'" class="job-detail__tool-icon">
+              <path d="M8 13.7l-1.1-1C3.6 9.8 1.5 7.9 1.5 5.7 1.5 3.9 2.9 2.5 4.7 2.5c1 0 2 .5 2.6 1.2h1.4c.6-.7 1.6-1.2 2.6-1.2 1.8 0 3.2 1.4 3.2 3.2 0 2.2-2.1 4.1-5.4 6.9L8 13.7z" stroke="currentColor" stroke-width="1"/>
+            </svg>
+          </button>
+          <button class="job-detail__apply-btn" @click="handleApply">去投递</button>
+        </div>
+      </div>
+
+      <!-- 内容区域（可滚动） -->
+      <div class="job-detail__body">
+        <!-- 导航 Tab：岗位详情 / 公司概况 -->
+        <div class="job-detail__nav-tabs">
+          <div
+            class="job-detail__nav-tab"
+            :class="{ 'job-detail__nav-tab--active': activeSection === 'job' }"
+            @click="activeSection = 'job'"
+          >岗位详情</div>
+          <div
+            class="job-detail__nav-tab"
+            :class="{ 'job-detail__nav-tab--active': activeSection === 'company' }"
+            @click="scrollToCompany"
+          >公司概况</div>
+          <div class="job-detail__nav-tab-right">
+            <span class="job-detail__link-btn" @click="handleFeedback">问题反馈</span>
+            <span class="job-detail__link-btn" @click="handleReport">原链接</span>
+          </div>
+        </div>
+
+        <!-- 岗位详情内容 -->
+        <template v-if="activeSection === 'job'">
+          <!-- 公司 & 职位头部 -->
+          <div class="job-detail__card">
+            <div class="job-detail__card-top">
+              <div class="job-detail__card-left">
+                <div class="job-detail__company-row">
+                  <div class="job-detail__company-icon">
+                    <img v-if="job.companyLogoUrl" :src="job.companyLogoUrl" :alt="job.company" class="job-detail__company-logo-img" />
+                    <svg v-else viewBox="0 0 24 24" fill="none" class="job-detail__company-svg">
+                      <rect x="3" y="7" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/>
+                      <path d="M7 7V5a2 2 0 012-2h6a2 2 0 012 2v2" stroke="currentColor" stroke-width="1.5"/>
+                      <path d="M3 13h18" stroke="currentColor" stroke-width="1.5"/>
+                    </svg>
+                  </div>
+                  <span class="job-detail__company-name">{{ job.company }}</span>
+                </div>
+                <h3 class="job-detail__job-title">{{ job.title }}</h3>
+                <div class="job-detail__job-meta">
+                  <span class="job-detail__meta-item">
+                    <svg viewBox="0 0 16 16" fill="none" class="job-detail__meta-icon">
+                      <circle cx="8" cy="6.5" r="2.5" stroke="currentColor" stroke-width="1.2"/>
+                      <path d="M8 14s-5-4-5-7.5a5 5 0 0110 0C13 10 8 14 8 14z" stroke="currentColor" stroke-width="1.2"/>
+                    </svg>
+                    {{ job.location }}
+                  </span>
+                  <span class="job-detail__meta-item">
+                    <svg viewBox="0 0 16 16" fill="none" class="job-detail__meta-icon">
+                      <rect x="2" y="3" width="12" height="11" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
+                      <path d="M2 6.5h12" stroke="currentColor" stroke-width="1.2"/>
+                    </svg>
+                    {{ job.experience }}
+                  </span>
+                  <span class="job-detail__meta-item">
+                    <svg viewBox="0 0 16 16" fill="none" class="job-detail__meta-icon">
+                      <rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.2"/>
+                      <path d="M5 8h6M8 5v6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+                    </svg>
+                    {{ job.type }}
+                  </span>
+                  <span v-if="job.education" class="job-detail__meta-item">
+                    <svg viewBox="0 0 16 16" fill="none" class="job-detail__meta-icon">
+                      <path d="M8 2L1 6l7 4 7-4-7-4z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+                      <path d="M3 7.5v4l5 3 5-3v-4" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+                    </svg>
+                    {{ job.education }}
+                  </span>
+                  <span v-if="job.salary" class="job-detail__meta-item">
+                    <svg viewBox="0 0 16 16" fill="none" class="job-detail__meta-icon">
+                      <path d="M8 1v14M4 4h8M3 8h10M5 12h6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+                    </svg>
+                    {{ job.salary }}
+                  </span>
+                </div>
+              </div>
+              <!-- 匹配度环 -->
+              <div class="job-detail__match-area">
+                <div class="job-detail__match-ring">
+                  <svg viewBox="0 0 80 80" class="job-detail__ring-svg">
+                    <circle cx="40" cy="40" r="34" stroke-width="5" stroke="#E8E8E8" fill="none" opacity="0.3"/>
+                    <circle cx="40" cy="40" r="34" stroke-width="5" fill="none"
+                      stroke="#4FC2C9"
+                      stroke-linecap="round"
+                      :stroke-dasharray="2 * Math.PI * 34"
+                      :stroke-dashoffset="2 * Math.PI * 34 * (1 - job.matchScore / 100)"
+                      transform="rotate(-90 40 40)"
+                    />
+                  </svg>
+                  <div class="job-detail__match-score">{{ job.matchScore }}%</div>
+                </div>
+                <div class="job-detail__match-label">岗位匹配值</div>
+                <div class="job-detail__match-details">
+                  <div class="job-detail__match-item" v-for="m in matchItems" :key="m.label">
+                    <div class="job-detail__match-mini-ring">
+                      <svg viewBox="0 0 40 40" class="job-detail__mini-ring-svg">
+                        <circle cx="20" cy="20" r="16" stroke-width="3" stroke="#E8E8E8" fill="none" opacity="0.3"/>
+                        <circle cx="20" cy="20" r="16" stroke-width="3" fill="none"
+                          stroke="#BFBFBF"
+                          stroke-linecap="round"
+                          :stroke-dasharray="2 * Math.PI * 16"
+                          :stroke-dashoffset="2 * Math.PI * 16 * (1 - m.score / 100)"
+                          transform="rotate(-90 20 20)"
+                        />
+                      </svg>
+                      <span class="job-detail__mini-score">{{ m.score }}%</span>
+                    </div>
+                    <span class="job-detail__match-item-label">{{ m.label }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 优化简历提示 -->
+          <div class="job-detail__optimize-bar">
+            <span>优化简历大幅提升面试成功率！</span>
+            <button class="job-detail__optimize-btn" @click="handleGenerateResume">生成岗位专属简历</button>
+          </div>
+
+          <!-- 岗位描述 -->
+          <div class="job-detail__card">
+            <p class="job-detail__desc-text">{{ job.companyInfo.summary }}</p>
+            <div class="job-detail__tag-list">
+              <span v-for="tag in job.tags" :key="tag" class="job-detail__tag">{{ tag }}</span>
+            </div>
+          </div>
+
+          <!-- 岗位职责 -->
+          <div class="job-detail__card">
+            <h3 class="job-detail__section-title">岗位职责</h3>
+            <ol class="job-detail__list">
+              <li v-for="(item, i) in job.responsibilities" :key="i">{{ item }}</li>
+            </ol>
+          </div>
+
+          <!-- 任职要求 -->
+          <div class="job-detail__card">
+            <div class="job-detail__section-header">
+              <h3 class="job-detail__section-title">任职要求</h3>
+              <span class="job-detail__skill-hint">
+                <svg viewBox="0 0 14 14" fill="none" class="job-detail__hint-icon">
+                  <circle cx="7" cy="7" r="6" stroke="currentColor" stroke-width="1"/>
+                  <path d="M7 6.5V10" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+                  <circle cx="7" cy="4.5" r="0.5" fill="currentColor"/>
+                </svg>
+                查看您的技能与岗位要求的匹配情况
+              </span>
+            </div>
+            <div class="job-detail__skill-tags">
+              <span
+                v-for="skill in job.requiredSkills"
+                :key="skill.name"
+                class="job-detail__skill-tag cursor-po"
+                :class="{ 'job-detail__skill-tag--matched': skill.matched }"
+                @click="skill.matched = !skill.matched"
+              >
+                {{ skill.name }}
+                <svg v-if="skill.matched" viewBox="0 0 12 12" fill="none" class="job-detail__skill-close">
+                  <path d="M9 3L3 9M3 3l6 6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+                </svg>
+              </span>
+            </div>
+            <ol class="job-detail__list">
+              <li v-for="(item, i) in job.requirements" :key="i">{{ item }}</li>
+            </ol>
+          </div>
+
+          <!-- 加分项 -->
+          <div class="job-detail__card">
+            <h3 class="job-detail__section-title">加分项</h3>
+            <p class="job-detail__desc-text">{{ job.bonus }}</p>
+          </div>
+
+          <!-- 公司概况 -->
+          <div ref="companySectionRef" class="job-detail__card">
+            <h3 class="job-detail__section-title">公司概况</h3>
+            <div class="job-detail__company-info">
+              <div class="job-detail__company-info-left">
+                <div class="job-detail__company-header">
+                  <div class="job-detail__company-logo">
+                    <img v-if="job.companyLogoUrl" :src="job.companyLogoUrl" :alt="job.company" class="job-detail__company-logo-img" />
+                    <svg v-else viewBox="0 0 24 24" fill="none" class="job-detail__company-svg">
+                      <rect x="3" y="7" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/>
+                      <path d="M7 7V5a2 2 0 012-2h6a2 2 0 012 2v2" stroke="currentColor" stroke-width="1.5"/>
+                    </svg>
+                  </div>
+                  <span class="job-detail__company-info-name">{{ job.company }}</span>
+                </div>
+                <p class="job-detail__company-desc">{{ job.companyInfo.description }}</p>
+              </div>
+              <div class="job-detail__company-info-right">
+                <div class="job-detail__company-meta-item">
+                  <span class="job-detail__meta-label">成立时间：</span>
+                  <span>{{ job.companyInfo.founded }}</span>
+                </div>
+                <div class="job-detail__company-meta-item">
+                  <span class="job-detail__meta-label">公司地址：</span>
+                  <span>{{ job.companyInfo.address }}</span>
+                </div>
+                <div class="job-detail__company-meta-item">
+                  <span class="job-detail__meta-label">企业规模：</span>
+                  <span>{{ job.companyInfo.size }}</span>
+                </div>
+                <div class="job-detail__company-meta-item">
+                  <span class="job-detail__meta-label">官网：</span>
+                  <a :href="job.companyInfo.website" target="_blank" class="job-detail__company-link">{{ job.companyInfo.website }}</a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 融资 -->
+          <div class="job-detail__card">
+            <h3 class="job-detail__section-title">融资</h3>
+            <p class="job-detail__desc-text">
+              <span class="job-detail__funding-label">当前融资阶段：</span>{{ job.companyInfo.fundingStage }}
+              <span class="job-detail__funding-label" style="margin-left: 0.3rem;">最新估值：</span>{{ job.companyInfo.valuation }}
+            </p>
+          </div>
+
+          <!-- 最新动态 -->
+          <div class="job-detail__card" v-if="job.companyInfo.news.length">
+            <h3 class="job-detail__section-title">最新动态</h3>
+            <div class="job-detail__news-list">
+              <div v-for="(news, i) in job.companyInfo.news" :key="i" class="job-detail__news-item">
+                <p class="job-detail__news-desc">{{ news }}</p>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <!-- 公司概况 Tab 已移除，点击直接滚动到岗位详情中的公司概况部分 -->
+      </div>
+    </div>
+    <AiChat />
+
+    <!-- 职位不感兴趣反馈弹窗 -->
+    <JobDislikeDialog ref="dislikeDialogRef" v-model="showDislikeDialog" :job-id="jobId" />
+
+    <!-- 职位问题反馈弹窗 -->
+    <JobFeedbackDialog ref="feedbackDialogRef" v-model="showFeedbackDialog" :job-id="jobId" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, nextTick, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import SideNav from '@/components/SideNav.vue'
+import AiChat from '@/components/AiChat.vue'
+import JobPageHeader from '@/components/JobPageHeader.vue'
+import JobDislikeDialog from '@/components/JobDislikeDialog.vue'
+import JobFeedbackDialog from '@/components/JobFeedbackDialog.vue'
+import { fetchJobDetail } from '@/api/jobs'
+import type { JobDetailData } from '@/api/jobs'
+
+// ==================== 路由相关 ====================
+
+const router = useRouter()
+const route = useRoute()
+
+/** 当前岗位 ID，从路由参数中获取 */
+const jobId = route.params.id as string
+
+// ==================== 工具函数 ====================
+
+/** 工作类型映射：数字 → 中文 */
+function formatEmploymentType(type: number | undefined): string {
+  const map: Record<number, string> = { 0: '全职', 1: '兼职' }
+  return map[type ?? -1] ?? '未知'
+}
+
+/** 学历要求映射：数字 → 中文 */
+function formatEducation(edu: number | undefined): string {
+  const map: Record<number, string> = { 0: '不限', 1: '大专', 2: '本科', 3: '硕士', 4: '博士' }
+  return map[edu ?? -1] ?? '未知'
+}
+
+/** 最低工作年限格式化 */
+function formatExperience(min: number | undefined): string {
+  if (min === undefined || min === null) return '经验不限'
+  if (min === 0) return '经验不限'
+  return `${min}年以上`
+}
+
+/**
+ * 将带序号的文本拆分为列表项
+ * 例如 "1.xxx；2.yyy；3.zzz" → ['xxx', 'yyy', 'zzz']
+ */
+function splitNumberedText(text: string | undefined): string[] {
+  if (!text) return []
+  // 按 "数字." 或 "数字、" 分割，过滤空项
+  const items = text.split(/\d+[.、]/).filter((s) => s.trim())
+  return items.map((s) => s.trim().replace(/[；;]$/, ''))
+}
+
+// ==================== 页面状态 ====================
+
+/** 当前激活的内容区 Tab：job-岗位详情 / company-公司概况 */
+const activeSection = ref<'job' | 'company'>('job')
+
+/** 公司概况卡片 ref，用于滚动定位 */
+const companySectionRef = ref<HTMLElement | null>(null)
+
+/** 是否正在加载 */
+const loading = ref(false)
+
+/** 点击公司概况 tab 时，确保显示岗位详情内容并滚动到公司概况卡片 */
+function scrollToCompany() {
+  activeSection.value = 'job'
+  nextTick(() => {
+    companySectionRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  })
+}
+
+// ==================== 岗位详情数据 ====================
+
+/** 匹配度维度列表（岗位匹配环下方的子维度） */
+const matchItems = ref([
+  { label: '行业经验', score: 0 },
+  { label: '核心技能', score: 0 },
+  { label: '工作经历', score: 0 },
+])
+
+/** 技能标签项（matched 表示用户是否具备该技能，可点击切换） */
+interface SkillTag {
+  /** 技能名称 */
+  name: string
+  /** 是否匹配 */
+  matched: boolean
+}
+
+/** 岗位详情响应式数据 */
+const job = reactive({
+  /** 岗位 ID */
+  id: jobId,
+  /** 公司名称（优先简称） */
+  company: '',
+  /** 公司 Logo URL */
+  companyLogoUrl: '',
+  /** 岗位标题 */
+  title: '',
+  /** 地区名称 */
+  location: '',
+  /** 工作经验要求（格式化后的文案） */
+  experience: '',
+  /** 工作类型（格式化后的文案） */
+  type: '',
+  /** 学历要求（格式化后的文案） */
+  education: '',
+  /** 薪资描述 */
+  salary: '',
+  /** 匹配总分 */
+  matchScore: 0,
+  /** 岗位描述（原始文本） */
+  description: '',
+  /** 岗位标签 */
+  tags: [] as string[],
+  /** 岗位职责列表（从 description 拆分） */
+  responsibilities: [] as string[],
+  /** 技能标签 */
+  requiredSkills: [] as SkillTag[],
+  /** 任职要求列表（从 requirement 拆分） */
+  requirements: [] as string[],
+  /** 加分项 */
+  bonus: '',
+  /** 来源链接 */
+  sourceUrl: '',
+  /** 是否已收藏 */
+  isFavorite: false,
+  /** 公司信息 */
+  companyInfo: {
+    /** 公司类型 */
+    type: '',
+    /** 公司所属行业 */
+    industryName: '',
+    /** 公司简介 */
+    summary: '',
+    /** 公司描述 */
+    description: '',
+    /** 成立时间 */
+    founded: '',
+    /** 公司地址 */
+    address: '',
+    /** 公司规模 */
+    size: '',
+    /** 公司官网 */
+    website: '',
+    /** 融资状态 */
+    fundingStage: '',
+    /** 最新估值 */
+    valuation: '',
+    /** 公司标签 */
+    tags: [] as string[],
+    /** 公司新闻列表 */
+    news: [] as string[],
+  },
+})
+
+/** 将接口返回数据填充到页面响应式对象 */
+function fillJobData(data: JobDetailData) {
+  job.id = data.jobId
+  job.company = data.companyShortName || data.companyName || ''
+  job.companyLogoUrl = data.companyLogoUrl || ''
+  job.title = data.jobTitle || ''
+  job.location = data.regionName || ''
+  job.experience = formatExperience(data.minExperience)
+  job.type = formatEmploymentType(data.employmentType)
+  job.education = formatEducation(data.education)
+  job.salary = data.salary || ''
+  job.matchScore = data.matchScore ?? 0
+  job.description = data.description || ''
+  job.tags = data.tags || []
+  job.sourceUrl = data.sourceUrl || ''
+  job.isFavorite = data.isFavorite ?? false
+  job.bonus = data.bonus || ''
+
+  // 岗位职责：从 description 中按序号拆分
+  job.responsibilities = splitNumberedText(data.description)
+
+  // 任职要求：从 requirement 中按序号拆分
+  job.requirements = splitNumberedText(data.requirement)
+
+  // 技能标签：默认 matched 为 false
+  job.requiredSkills = (data.skillTags || []).map((name) => ({ name, matched: false }))
+
+  // 匹配度详情
+  if (data.matchDetail) {
+    matchItems.value = [
+      { label: '行业经验', score: data.matchDetail.industryScore ?? 0 },
+      { label: '核心技能', score: data.matchDetail.skillScore ?? 0 },
+      { label: '工作经历', score: data.matchDetail.experienceScore ?? 0 },
+    ]
+  }
+
+  // 公司信息
+  job.companyInfo.type = data.companyType || ''
+  job.companyInfo.industryName = data.companyIndustryName || ''
+  job.companyInfo.summary = data.companySummary || ''
+  job.companyInfo.description = data.companyDescription || ''
+  job.companyInfo.founded = data.companyFoundedYear ? `${data.companyFoundedYear}年` : ''
+  job.companyInfo.address = data.companyAddress || ''
+  job.companyInfo.size = data.companyScale || ''
+  job.companyInfo.website = data.companyWebsite || ''
+  job.companyInfo.fundingStage = data.companyFinancingStage || ''
+  job.companyInfo.valuation = data.companyLatestValuation || ''
+  job.companyInfo.tags = data.companyTags || []
+  job.companyInfo.news = data.companyNews || []
+}
+
+// ==================== 加载岗位详情 ====================
+
+/** 调用接口获取岗位详情 */
+async function loadJobDetail() {
+  if (!jobId) return
+  loading.value = true
+  try {
+    const res = await fetchJobDetail(jobId)
+    if (res.code === '0' && res.data) {
+      fillJobData(res.data)
+    }
+  } catch (e) {
+    console.error('加载岗位详情失败', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  loadJobDetail()
+})
+
+// ==================== 事件处理 ====================
+
+/** 不感兴趣弹窗状态 */
+const showDislikeDialog = ref(false)
+const dislikeDialogRef = ref<InstanceType<typeof JobDislikeDialog> | null>(null)
+
+/** 问题反馈弹窗状态 */
+const showFeedbackDialog = ref(false)
+const feedbackDialogRef = ref<InstanceType<typeof JobFeedbackDialog> | null>(null)
+
+/** 打开不感兴趣弹窗 */
+function openDislikeDialog() {
+  dislikeDialogRef.value?.resetForm()
+  showDislikeDialog.value = true
+}
+
+/** 返回职位列表页 */
+function goBack() {
+  router.push('/jobs')
+}
+
+/** 问题反馈 */
+function handleFeedback() {
+  feedbackDialogRef.value?.resetForm()
+  showFeedbackDialog.value = true
+}
+
+/** 跳转到原链接 */
+function handleReport() {
+  if (job.sourceUrl) {
+    window.open(job.sourceUrl, '_blank')
+  }
+}
+
+/** 生成岗位专属简历 */
+function handleGenerateResume() {
+  console.log('生成岗位专属简历')
+}
+
+/** 去投递 — 跳转到来源链接 */
+function handleApply() {
+  if (job.sourceUrl) {
+    window.open(job.sourceUrl, '_blank')
+  }
+}
+</script>
diff --git a/src/views/Jobs.vue b/src/views/Jobs.vue
new file mode 100644
index 0000000..23afb93
--- /dev/null
+++ b/src/views/Jobs.vue
@@ -0,0 +1,553 @@
+<template>
+  <div class="jobs-page dflex">
+    <SideNav />
+    <div class="jobs-page__content">
+      <!-- 页面标题 + Tab 切换 -->
+      <JobPageHeader v-model:activeTab="activeTab" />
+      <!-- 筛选条件 -->
+      <div class="jobs-page__filters-bar">
+        <div class="jobs-page__filters">
+          <div class="jobs-page__filter-group">
+            <!-- 筛选条件按钮列表（行业单独用组件） -->
+            <template v-for="filter in filters" :key="filter.label">
+              <!-- 城市筛选：使用地区选择组件（选到市级） -->
+              <RegionSelector
+                v-if="filter.key === 'city'"
+                :regionCodes="selectedRegionCodes"
+                :level="2"
+                :maxSelect="3"
+                @update:regionCodes="onRegionChange"
+              />
+              <!-- 行业筛选：使用行业选择组件 -->
+              <IndustrySelector
+                v-else-if="filter.key === 'industry'"
+                :industryIds="selectedIndustryIds"
+                :maxSelect="3"
+                @update:industryIds="onIndustryChange"
+              />
+              <!-- 岗位筛选：使用岗位选择组件 -->
+              <JobCategorySelector
+                v-else-if="filter.key === 'position'"
+                :categoryIds="selectedCategoryIds"
+                :maxSelect="3"
+                @update:categoryIds="onCategoryChange"
+              />
+              <!-- 其他筛选条件 -->
+              <div
+                v-else
+                class="jobs-page__filter-item"
+                @click="handleFilterClick(filter)"
+              >
+                <span>{{ filter.selected || filter.label }}</span>
+                <svg class="jobs-page__filter-arrow-icon" viewBox="0 0 12 12" fill="none">
+                  <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <!-- 工作类型下拉菜单 -->
+                <div
+                  v-if="filter.key === 'jobType' && showJobTypeDropdown"
+                  class="jobs-page__filter-dropdown"
+                  @click.stop
+                >
+                  <div
+                    class="jobs-page__filter-dropdown-item"
+                    v-for="option in jobTypeOptions"
+                    :key="option.value"
+                    :class="{ 'jobs-page__filter-dropdown-item--active': filter.selected === option.label }"
+                    @click.stop="selectJobType(filter, option)"
+                  >
+                    {{ option.label }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div class="jobs-page__search-box">
+            <svg class="jobs-page__search-svg" viewBox="0 0 16 16" fill="none">
+              <circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.2"/>
+              <path d="M11 11L14 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+            </svg>
+            <input
+              v-model="searchText"
+              class="jobs-page__search-input"
+              placeholder="搜索职位、公司或关键词"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 职位列表 -->
+      <div ref="jobListRef" class="jobs-page__list pr5" @scroll="onListScroll">
+        <div
+          v-for="(job, index) in jobList"
+          :key="index"
+          class="jobs-page__job-card"
+          :class="{ 'jobs-page__job-card--selected--none': selectedIndex === index }"
+          @click="goToDetail(job)"
+        >
+          <div class="jobs-page__job-main">
+            <!-- 左侧：公司图标 + 职位信息 -->
+            <div class="jobs-page__job-left">
+              <div class="jobs-page__job-icon">
+                <svg viewBox="0 0 24 24" fill="none" class="jobs-page__company-svg">
+                  <rect x="3" y="7" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/>
+                  <path d="M7 7V5a2 2 0 012-2h6a2 2 0 012 2v2" stroke="currentColor" stroke-width="1.5"/>
+                  <path d="M3 13h18" stroke="currentColor" stroke-width="1.5"/>
+                  <rect x="10" y="11" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1"/>
+                </svg>
+              </div>
+              <div class="jobs-page__job-info">
+                <div class="jobs-page__job-title-row">
+                  <span class="jobs-page__job-name">{{ job.title }}</span>
+                  <button class="jobs-page__job-more" aria-label="更多操作" @click.stop="toggleMenu(index)">
+                    <svg viewBox="0 0 16 16" fill="currentColor" class="jobs-page__more-svg">
+                      <circle cx="3" cy="8" r="1.5"/><circle cx="8" cy="8" r="1.5"/><circle cx="13" cy="8" r="1.5"/>
+                    </svg>
+                  </button>
+                </div>
+                <div class="jobs-page__job-meta pt5">
+                  <span>{{ job.regionName }}</span>
+                  <span class="jobs-page__job-dot">·</span>
+                  <span>{{ job.companyShortName || job.companyName }}</span>
+                  <span class="jobs-page__job-dot">·</span>
+                  <span>{{ job.categoryName }}</span>
+                </div>
+                <!-- 提示信息 -->
+                <div v-if="(job as any).tip" class="jobs-page__job-tip">
+                  <svg viewBox="0 0 14 14" fill="none" class="jobs-page__tip-svg">
+                    <circle cx="7" cy="7" r="6" stroke="currentColor" stroke-width="1"/>
+                    <path d="M7 6.5V10" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+                    <circle cx="7" cy="4.5" r="0.5" fill="currentColor"/>
+                  </svg>
+                  {{ (job as any).tip }}
+                </div>
+
+                <!-- 底部操作栏 -->
+                <div class="jobs-page__job-actions pt20">
+                  <div class="dflex fgrow2 aliite-c flex-warp" >
+                    <!-- 标签 -->
+                    <div class="jobs-page__job-tags mt10">
+                      <span v-for="(tag, ti) in job.tags" :key="ti" class="jobs-page__job-tag">{{ tag }}</span>
+                    </div>
+                    <div class="dflex-end mt10">
+                      <div class="jobs-page__job-action-left">
+                        <button class="jobs-page__action-icon-btn" aria-label="不感兴趣" @click.stop="openDislikeDialog(job)">
+                          <svg viewBox="0 0 16 16" fill="none" class="jobs-page__action-svg">
+                            <path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+                          </svg>
+                        </button>
+                        <button class="jobs-page__action-icon-btn" :class="{ 'jobs-page__action-icon-btn--liked': job.isFavorite }" aria-label="收藏">
+                          <svg viewBox="0 0 16 16" :fill="job.isFavorite ? 'currentColor' : 'none'" class="jobs-page__action-svg">
+                            <path d="M8 13.7l-1.1-1C3.6 9.8 1.5 7.9 1.5 5.7 1.5 3.9 2.9 2.5 4.7 2.5c1 0 2 .5 2.6 1.2h1.4c.6-.7 1.6-1.2 2.6-1.2 1.8 0 3.2 1.4 3.2 3.2 0 2.2-2.1 4.1-5.4 6.9L8 13.7z" stroke="currentColor" stroke-width="1"/>
+                          </svg>
+                        </button>
+                      </div>
+
+                      <div class="jobs-page__job-action-right ">
+                        <button class="jobs-page__job-helper">
+                          <svg viewBox="0 0 14 14" fill="none" class="jobs-page__helper-svg">
+                            <circle cx="7" cy="7" r="6" stroke="currentColor" stroke-width="1"/>
+                            <path d="M5.5 5.5a1.5 1.5 0 113 0c0 .8-.7 1-1.5 1.5V9" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+                            <circle cx="7" cy="11" r="0.5" fill="currentColor"/>
+                          </svg>
+                          问助手
+                        </button>
+                        <button class="jobs-page__job-apply-btn" :class="{ 'jobs-page__job-apply-btn--active': job.applied }">
+                          自动投递
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- 弹出菜单 -->
+                  <div v-if="job.showMenu" class="jobs-page__job-popup" @click.stop>
+                    <div
+                      class="jobs-page__job-popup-item"
+                      v-for="action in popupActions"
+                      :key="action"
+                      @click="handlePopupAction(action, job)"
+                    >{{ action }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- 右侧：匹配度 -->
+            <div class="jobs-page__job-match" :class="matchClass(job.matchScore)">
+              <div class="jobs-page__match-ring">
+                <svg viewBox="0 0 80 80" class="jobs-page__ring-svg">
+                  <circle cx="40" cy="40" r="34" stroke-width="5" stroke="#E8E8E8" fill="none" opacity="0.3"/>
+                  <circle cx="40" cy="40" r="34" stroke-width="5" fill="none"
+                    :stroke="job.matchScore >= 80 ? '#4FC2C9' : '#BFBFBF'"
+                    stroke-linecap="round"
+                    :stroke-dasharray="2 * Math.PI * 34"
+                    :stroke-dashoffset="2 * Math.PI * 34 * (1 - job.matchScore / 100)"
+                    transform="rotate(-90 40 40)"
+                  />
+                </svg>
+                <div class="jobs-page__match-score">{{ job.matchScore }}%</div>
+              </div>
+              <div class="jobs-page__match-label">匹配值</div>
+              <div class="jobs-page__match-level">{{ matchLevelText(job.matchScore) }}</div>
+            </div>
+          </div>
+        </div>
+        <!-- 加载更多提示 -->
+        <div v-if="loadingMore" class="jobs-page__loading-more">加载中...</div>
+        <div v-else-if="noMore && jobList.length > 0" class="jobs-page__loading-more">没有更多了</div>
+      </div>
+    </div>
+    <AiChat />
+
+    <!-- 职位不感兴趣反馈弹窗 -->
+    <JobDislikeDialog ref="dislikeDialogRef" v-model="showDislikeDialog" :job-id="dislikeJobId"  />
+
+    <!-- 职位问题反馈弹窗 -->
+    <JobFeedbackDialog ref="feedbackDialogRef" v-model="showFeedbackDialog" :job-id="feedbackJobId"  />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount, nextTick, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useStore } from 'vuex'
+import SideNav from '@/components/SideNav.vue'
+import AiChat from '@/components/AiChat.vue'
+import JobPageHeader from '@/components/JobPageHeader.vue'
+import JobDislikeDialog from '@/components/JobDislikeDialog.vue'
+import JobFeedbackDialog from '@/components/JobFeedbackDialog.vue'
+import IndustrySelector from '@/components/tools/IndustrySelector.vue'
+import JobCategorySelector from '@/components/tools/JobCategorySelector.vue'
+import RegionSelector from '@/components/tools/RegionSelector.vue'
+import { fetchJobList } from '@/api/jobs'
+import type { JobListItem, JobListParams } from '@/api/jobs'
+
+// ==================== 路由相关 ====================
+
+const router = useRouter()
+const route = useRoute()
+const store = useStore()
+
+// ==================== 页面状态 ====================
+
+/** 当前激活的 Tab，从 URL query 参数读取，默认"推荐" */
+const activeTab = ref((route.query.tab as string) || 'recommend')
+
+/** 搜索框输入内容 */
+const searchText = ref('')
+
+/** 当前选中的职位卡片索引 */
+const selectedIndex = ref(0)
+
+/** 不感兴趣弹窗的显示状态 */
+const showDislikeDialog = ref(false)
+
+/** 当前操作的职位 ID（用于提交不感兴趣反馈） */
+const dislikeJobId = ref<string | null>(null)
+
+/** 问题反馈弹窗的显示状态 */
+const showFeedbackDialog = ref(false)
+
+/** 当前操作的职位 ID（用于提交问题反馈） */
+const feedbackJobId = ref<string | null>(null)
+
+// ==================== 常量数据 ====================
+
+/** 筛选条件项类型 */
+interface FilterItem {
+  label: string
+  key: string
+  selected: string
+}
+
+/** 筛选条件列表 */
+const filters = ref<FilterItem[]>([
+  { label: '城市', key: 'city', selected: '' },
+  { label: '岗位', key: 'position', selected: '' },
+  { label: '行业', key: 'industry', selected: '' },
+  { label: '工作类型', key: 'jobType', selected: '' },
+])
+
+/** 工作类型选项映射：label → 接口参数 employmentType（0=全职 1=实习） */
+const jobTypeOptions: { label: string; value: number }[] = [
+  { label: '全职', value: 0 },
+  { label: '实习', value: 1 },
+]
+
+/** 工作类型下拉菜单是否显示 */
+const showJobTypeDropdown = ref(false)
+
+/** 当前选中的工作类型（integer，对应接口参数 employmentType，null 表示未选） */
+const selectedEmploymentType = ref<number | null>(null)
+
+/** 选中的行业 id 数组（integer，对应接口参数 industryIds） */
+const selectedIndustryIds = ref<number[]>([])
+
+/** 选中的岗位 id 数组（integer，对应接口参数 categoryIds） */
+const selectedCategoryIds = ref<number[]>([])
+
+/** 选中的地区编码数组（string，对应接口参数 regionCodes） */
+const selectedRegionCodes = ref<string[]>([])
+
+/** 行业选择变更回调 */
+function onIndustryChange(ids: number[]) {
+  selectedIndustryIds.value = ids
+}
+
+/** 岗位选择变更回调 */
+function onCategoryChange(ids: number[]) {
+  selectedCategoryIds.value = ids
+}
+
+/** 地区选择变更回调 */
+function onRegionChange(codes: string[]) {
+  selectedRegionCodes.value = codes
+}
+
+/** 点击筛选条件按钮 — 仅工作类型展开下拉 */
+function handleFilterClick(filter: FilterItem) {
+  if (filter.key === 'jobType') {
+    showJobTypeDropdown.value = !showJobTypeDropdown.value
+  }
+}
+
+/** 选中工作类型选项 */
+function selectJobType(filter: FilterItem, option: { label: string; value: number }) {
+  filter.selected = option.label
+  selectedEmploymentType.value = option.value
+  showJobTypeDropdown.value = false
+}
+
+/** 点击页面其他区域时关闭下拉菜单 */
+function closeDropdownOnClickOutside(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('.jobs-page__filter-item')) {
+    showJobTypeDropdown.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeDropdownOnClickOutside)
+  // 进入 Jobs 页时加载公共工具数据（行业分类等）
+  store.dispatch('loadCommonData')
+
+  // 尝试从缓存恢复列表数据（从详情页返回时不重新请求）
+  const cache = store.state.jobListCache
+  if (cache && cache.list.length > 0) {
+    jobList.value = cache.list
+    pageNum.value = cache.pageNum
+    total.value = cache.total
+    savedScrollTop = cache.scrollTop
+    // 清除缓存，避免下次非详情页返回时误用
+    store.commit('SET_JOB_LIST_CACHE', null)
+    // 等 DOM 渲染完成后恢复滚动位置
+    nextTick(() => {
+      if (jobListRef.value) {
+        jobListRef.value.scrollTop = savedScrollTop
+      }
+    })
+  } else {
+    // 没有缓存，正常加载
+    loadJobList()
+  }
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', closeDropdownOnClickOutside)
+})
+
+/** 弹出菜单操作项 */
+const popupActions = ['从列表中移除', '已投递', '复制链接', '问题反馈']
+
+// ==================== 职位列表项（扩展接口字段，增加前端交互状态） ====================
+
+/** 职位列表项类型（在接口返回基础上扩展前端交互字段） */
+interface JobItem extends JobListItem {
+  /** 是否已投递 */
+  applied: boolean
+  /** 是否显示弹出菜单 */
+  showMenu: boolean
+}
+
+// ==================== 分页与加载状态 ====================
+
+/** 当前页码 */
+const pageNum = ref(1)
+
+/** 每页条数 */
+const pageSize = ref(15)
+
+/** 总记录数 */
+const total = ref(0)
+
+/** 是否正在加载（首次加载） */
+const loading = ref(false)
+
+/** 是否正在加载下一页 */
+const loadingMore = ref(false)
+
+/** 是否已加载全部数据 */
+const noMore = computed(() => jobList.value.length >= total.value && total.value > 0)
+
+/** 职位列表数据 */
+const jobList = ref<JobItem[]>([])
+
+/** 列表容器 ref，用于监听滚动和恢复滚动位置 */
+const jobListRef = ref<HTMLElement | null>(null)
+
+/** 记录离开页面前的滚动位置 */
+let savedScrollTop = 0
+// ==================== 加载岗位列表 ====================
+
+/** 组装请求参数 */
+function buildParams(): JobListParams {
+  const params: JobListParams = {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }
+  // 地区筛选
+  if (selectedRegionCodes.value.length) {
+    params.regionCodes = selectedRegionCodes.value
+  }
+  // 岗位类型筛选
+  if (selectedCategoryIds.value.length) {
+    params.categoryIds = selectedCategoryIds.value
+  }
+  // 行业筛选
+  if (selectedIndustryIds.value.length) {
+    params.industryIds = selectedIndustryIds.value
+  }
+  // 工作类型筛选
+  if (selectedEmploymentType.value !== null) {
+    params.employmentType = selectedEmploymentType.value
+  }
+  return params
+}
+
+/** 加载岗位列表数据（首次加载，替换列表） */
+async function loadJobList() {
+  loading.value = true
+  try {
+    const res = await fetchJobList(buildParams())
+    if (res.code === '0' && res.data) {
+      // 将接口数据映射为前端 JobItem，补充交互状态字段
+      jobList.value = res.data.list.map((item) => ({
+        ...item,
+        applied: false,
+        showMenu: false,
+      }))
+      total.value = Number(res.data.total)
+    }
+  } catch (e) {
+    console.error('加载岗位列表失败', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 加载下一页数据（追加到列表末尾） */
+async function loadNextPage() {
+  if (loadingMore.value || noMore.value) return
+  loadingMore.value = true
+  pageNum.value++
+  try {
+    const res = await fetchJobList(buildParams())
+    if (res.code === '0' && res.data) {
+      const newItems = res.data.list.map((item) => ({
+        ...item,
+        applied: false,
+        showMenu: false,
+      }))
+      jobList.value.push(...newItems)
+      total.value = Number(res.data.total)
+    }
+  } catch (e) {
+    // 加载失败时回退页码
+    pageNum.value--
+    console.error('加载下一页失败', e)
+  } finally {
+    loadingMore.value = false
+  }
+}
+
+/** 列表滚动事件 — 滚动到底部时自动加载下一页 */
+function onListScroll() {
+  const el = jobListRef.value
+  if (!el) return
+  // 距离底部小于 100px 时触发加载
+  const threshold = 100
+  if (el.scrollHeight - el.scrollTop - el.clientHeight < threshold) {
+    loadNextPage()
+  }
+}
+
+/** 筛选条件变化时重置到第一页并重新加载 */
+function reloadFirstPage() {
+  pageNum.value = 1
+  // 筛选条件变化时清除缓存
+  store.commit('SET_JOB_LIST_CACHE', null)
+  loadJobList()
+}
+
+// 监听筛选条件变化，自动重新加载
+watch(
+  [selectedRegionCodes, selectedCategoryIds, selectedIndustryIds, selectedEmploymentType],
+  () => reloadFirstPage(),
+)
+
+// ==================== 事件处理 ====================
+
+/** 切换职位卡片的弹出菜单（同时关闭其他已打开的菜单） */
+function toggleMenu(index: number) {
+  jobList.value.forEach((j, i) => {
+    j.showMenu = i === index ? !j.showMenu : false
+  })
+}
+
+/** 处理弹出菜单操作项点击 — 问题反馈打开反馈弹窗，其他直接关闭菜单 */
+function handlePopupAction(action: string, job: JobItem) {
+  job.showMenu = false
+  if (action === '问题反馈') {
+    openFeedbackDialog(job)
+  }
+}
+
+/** 根据匹配分数返回对应的 CSS 类名 */
+function matchClass(score: number) {
+  return score >= 80 ? 'jobs-page__job-match--high' : 'jobs-page__job-match--low'
+}
+
+/** 根据匹配分数返回匹配等级文案 */
+function matchLevelText(score: number) {
+  if (score >= 80) return '匹配'
+  if (score >= 60) return '一般匹配'
+  return '匹配度偏低'
+}
+
+/** 跳转到岗位详情页 — 先缓存当前列表和滚动位置 */
+function goToDetail(job: JobItem) {
+  // 保存当前列表状态到 store，返回时恢复
+  store.commit('SET_JOB_LIST_CACHE', {
+    list: jobList.value,
+    pageNum: pageNum.value,
+    total: total.value,
+    scrollTop: jobListRef.value?.scrollTop ?? 0,
+  })
+  router.push(`/jobs/${job.id}`)
+}
+
+/** 不感兴趣弹窗和问题反馈弹窗的组件引用 */
+const dislikeDialogRef = ref<InstanceType<typeof JobDislikeDialog> | null>(null)
+const feedbackDialogRef = ref<InstanceType<typeof JobFeedbackDialog> | null>(null)
+
+/** 打开不感兴趣弹窗 — 记录当前职位 ID 并重置表单 */
+function openDislikeDialog(job: JobItem) {
+  dislikeJobId.value = job.id
+  dislikeDialogRef.value?.resetForm()
+  showDislikeDialog.value = true
+}
+
+/** 打开问题反馈弹窗 — 记录当前职位 ID 并重置表单 */
+function openFeedbackDialog(job: JobItem) {
+  feedbackJobId.value = job.id
+  feedbackDialogRef.value?.resetForm()
+  showFeedbackDialog.value = true
+}
+</script>
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
new file mode 100644
index 0000000..988b452
--- /dev/null
+++ b/src/views/Profile.vue
@@ -0,0 +1,579 @@
+<template>
+  <div class="profile-page dflex">
+    <SideNav />
+    <div class="profile-page__content">
+      <!-- 个人资料编辑抽屉 -->
+      <ProfileEditDrawer
+        v-model="showEditDrawer"
+        :module="editModule"
+        :initial-data="editInitialData"
+        @save="handleSaveEdit"
+      />
+      
+      <!-- 页面标题 -->
+      <div class="profile-page__header">
+        <h2 class="profile-page__title">个人资料 <span class="profile-page__title-tip">ⓘ</span></h2>
+        <p class="profile-page__subtitle">
+          设定个人资料以匹配岗位需求，包括教育背景、实习经历等，大部分信息可以从简历中自动获取，也可以手动修改。
+        </p>
+      </div>
+
+      <!-- 主体区域：左侧详情 + 右侧入口 -->
+      <div class="profile-page__body">
+        <!-- 个人资料内容组件 -->
+        <ProfilePageContent
+          :profile="profile"
+          @edit="handleEdit"
+        />
+
+        <!-- 右侧入口 -->
+        <div class="profile-page__sidebar">
+          <!-- 提示卡片 -->
+          <div class="profile-page__tip-card">
+            <p class="profile-page__tip-text">
+              非常棒！你的个人资料已经被完善了，自动填写信息也已变换，现在可以轻松开始投递简历啦！
+            </p>
+            <button class="profile-page__tip-btn" @click="goToJobs">去投递</button>
+          </div>
+
+          <!-- 管理简历入口 -->
+          <div class="profile-page__nav-entry" @click="goToResume">
+            <span class="profile-page__nav-entry-icon">📄</span>
+            <span class="profile-page__nav-entry-text">管理我的简历</span>
+            <svg viewBox="0 0 16 16" fill="none" class="profile-page__nav-arrow">
+              <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import SideNav from '@/components/SideNav.vue'
+import ProfileEditDrawer from '@/components/ProfileEditDrawer.vue'
+import ProfilePageContent from '@/components/ProfilePageContent.vue'
+import { saveProfile, fetchProfile, fetchEducation, saveEducation, fetchWork, saveWork, fetchInternship, saveInternship, fetchProject, saveProject, fetchCompetition, saveCompetition } from '@/api/profile'
+import type { SaveEducationItem, SaveWorkItem, SaveProjectItem, SaveCompetitionItem } from '@/api/profile'
+
+const router = useRouter()
+const store = useStore()
+
+/** 页面挂载时加载公共分类数据和个人资料 */
+onMounted(async () => {
+  if (!store.state.regions.length) {
+    store.dispatch('loadCommonData')
+  }
+  // 请求个人资料主表数据，填充非数组字段
+  await loadProfile()
+  // 请求教育经历数据
+  await loadEducation()
+  // 请求工作经历数据
+  await loadWork()
+  // 请求实习经历数据
+  await loadInternship()
+  // 请求项目经历数据
+  await loadProject()
+  // 请求竞赛经历数据
+  await loadCompetition()
+})
+
+/** 加载个人资料主表数据 */
+async function loadProfile() {
+  try {
+    const res = await fetchProfile()
+    if (res.code === '0' && res.data) {
+      const d = res.data
+      profile.value.name = d.name || ''
+      profile.value.phone = d.mobileNumber || ''
+      profile.value.email = d.email || ''
+      profile.value.idNumber = d.idCard || ''
+      profile.value.regionCode = d.regionCode || ''
+      profile.value.wechat = d.wechatNumber || ''
+      profile.value.skills = d.skills || []
+      profile.value.certificates = d.certificates || []
+    }
+  } catch {
+    console.error('[Profile] 加载个人资料失败')
+  }
+}
+
+/** 加载教育经历数据 */
+async function loadEducation() {
+  try {
+    const res = await fetchEducation()
+    if (res.code === '0' && res.data) {
+      profile.value.education = res.data.map(item => ({
+        school: item.school || '',
+        major: item.major || '',
+        studyType: item.studyType ?? 0,
+        degree: item.degree ?? 2,
+        startDate: item.startDate || '',
+        endDate: item.endDate || '',
+        description: (item.description || []).map(d => ({
+          id: d.id || '',
+          text: d.text || '',
+        })),
+      }))
+    }
+  } catch {
+    console.error('[Profile] 加载教育经历失败')
+  }
+}
+
+/** 加载工作经历数据 */
+async function loadWork() {
+  try {
+    const res = await fetchWork()
+    if (res.code === '0' && res.data) {
+      profile.value.works = res.data.map(item => ({
+        companyName: item.companyName || '',
+        position: item.position || '',
+        startDate: item.startDate || '',
+        endDate: item.endDate || '',
+        description: (item.description || []).map(d => ({
+          id: d.id || '',
+          text: d.text || '',
+        })),
+      }))
+    }
+  } catch {
+    console.error('[Profile] 加载工作经历失败')
+  }
+}
+
+/** 加载实习经历数据 */
+async function loadInternship() {
+  try {
+    const res = await fetchInternship()
+    if (res.code === '0' && res.data) {
+      profile.value.internships = res.data.map(item => ({
+        companyName: item.companyName || '',
+        position: item.position || '',
+        startDate: item.startDate || '',
+        endDate: item.endDate || '',
+        description: (item.description || []).map(d => ({
+          id: d.id || '',
+          text: d.text || '',
+        })),
+      }))
+    }
+  } catch {
+    console.error('[Profile] 加载实习经历失败')
+  }
+}
+
+/** 加载项目经历数据 */
+async function loadProject() {
+  try {
+    const res = await fetchProject()
+    if (res.code === '0' && res.data) {
+      profile.value.projects = res.data.map(item => ({
+        projectName: item.projectName || '',
+        companyName: item.companyName || '',
+        role: item.role || '',
+        startDate: item.startDate || '',
+        endDate: item.endDate || '',
+        description: (item.description || []).map(d => ({
+          id: d.id || '',
+          text: d.text || '',
+        })),
+      }))
+    }
+  } catch {
+    console.error('[Profile] 加载项目经历失败')
+  }
+}
+
+/** 加载竞赛经历数据 */
+async function loadCompetition() {
+  try {
+    const res = await fetchCompetition()
+    if (res.code === '0' && res.data) {
+      profile.value.competitions = res.data.map(item => ({
+        competitionName: item.competitionName || '',
+        award: item.award || '',
+        awardDate: item.awardDate || '',
+        description: (item.description || []).map(d => ({
+          id: d.id || '',
+          text: d.text || '',
+        })),
+      }))
+    }
+  } catch {
+    console.error('[Profile] 加载竞赛经历失败')
+  }
+}
+
+/** 编辑抽屉的显示状态 */
+const showEditDrawer = ref(false)
+
+/** 当前编辑的模块名称 */
+const editModule = ref('info')
+
+/** 当前编辑模块的初始数据 */
+const editInitialData = ref<Record<string, any>>({})
+
+/** 保存中的加载状态 */
+const saving = ref(false)
+
+// ==================== 个人资料数据（非数组字段由接口填充，数组字段暂用模拟数据） ====================
+const profile = ref({
+  /** 真实姓名 — 接口字段 name */
+  name: '',
+  /** 手机号码 — 接口字段 mobileNumber */
+  phone: '',
+  /** 邮箱 — 接口字段 email */
+  email: '',
+  /** 身份证号 — 接口字段 idCard */
+  idNumber: '',
+  /** 所在城市编码 — 接口字段 regionCode */
+  regionCode: '',
+  /** 微信号 — 接口字段 wechatNumber */
+  wechat: '',
+  /** 技能标签列表 — 接口字段 skills */
+  skills: [] as string[],
+  /** 证书标签列表 — 接口字段 certificates */
+  certificates: [] as string[],
+  /** 教育经历 — 对应数据库 bg_user_profile_education */
+  education: [] as Array<{
+    school: string
+    major: string
+    studyType: number
+    degree: number
+    startDate: string
+    endDate: string
+    description: Array<{ id: string; text: string }>
+  }>,
+  /** 工作经历 — 对应数据库 bg_user_profile_work */
+  works: [] as Array<{
+    companyName: string
+    position: string
+    startDate: string
+    endDate: string
+    description: Array<{ id: string; text: string }>
+  }>,
+  internships: [] as Array<{
+    companyName: string
+    position: string
+    startDate: string
+    endDate: string
+    description: Array<{ id: string; text: string }>
+  }>,
+  projects: [] as Array<{
+    projectName: string
+    companyName: string
+    role: string
+    startDate: string
+    endDate: string
+    description: Array<{ id: string; text: string }>
+  }>,
+  /** 竞赛经历 — 对应数据库 bg_user_profile_competition */
+  competitions: [] as Array<{
+    competitionName: string
+    award: string
+    awardDate: string
+    description: Array<{ id: string; text: string }>
+  }>,
+})
+
+// ==================== 事件处理 ====================
+
+/** 打开编辑抽屉 — 根据模块名设置初始数据 */
+function handleEdit(section: string) {
+  editModule.value = section
+
+  // 根据模块名提取对应的初始数据
+  if (section === 'info') {
+    editInitialData.value = {
+      name: profile.value.name,
+      email: profile.value.email,
+      phone: profile.value.phone,
+      /** 城市编码 — 传给编辑抽屉的 RegionSelector */
+      location: profile.value.regionCode,
+      wechat: profile.value.wechat,
+    }
+  } else if (section === 'education') {
+    editInitialData.value = {
+      education: profile.value.education.map(edu => ({
+        school: edu.school,
+        major: edu.major,
+        studyType: edu.studyType,
+        degree: edu.degree,
+        startDate: edu.startDate,
+        endDate: edu.endDate,
+        description: edu.description.map(d => ({ ...d })),
+      })),
+    }
+  } else if (section === 'work') {
+    editInitialData.value = {
+      works: profile.value.works.map(exp => ({
+        companyName: exp.companyName,
+        position: exp.position,
+        startDate: exp.startDate,
+        endDate: exp.endDate,
+        description: exp.description.map(d => ({ ...d })),
+      })),
+    }
+  } else if (section === 'internship') {
+    editInitialData.value = {
+      internships: profile.value.internships.map(exp => ({
+        companyName: exp.companyName,
+        position: exp.position,
+        startDate: exp.startDate,
+        endDate: exp.endDate,
+        description: exp.description.map(d => ({ ...d })),
+      })),
+    }
+  } else if (section === 'project') {
+    editInitialData.value = {
+      projects: profile.value.projects.map(proj => ({
+        projectName: proj.projectName,
+        companyName: proj.companyName,
+        role: proj.role,
+        startDate: proj.startDate,
+        endDate: proj.endDate,
+        description: proj.description.map(d => ({ ...d })),
+      })),
+    }
+  } else if (section === 'competition') {
+    editInitialData.value = {
+      competitions: profile.value.competitions.map(comp => ({
+        competitionName: comp.competitionName,
+        award: comp.award,
+        awardDate: comp.awardDate,
+        description: comp.description.map(d => ({ ...d })),
+      })),
+    }
+  } else if (section === 'skills') {
+    editInitialData.value = {
+      skills: [...profile.value.skills],
+    }
+  } else if (section === 'certificate') {
+    editInitialData.value = {
+      certificates: [...profile.value.certificates],
+    }
+  } else {
+    editInitialData.value = {}
+  }
+
+  showEditDrawer.value = true
+}
+
+/** 保存编辑数据 — 将抽屉返回的数据合并到 profile，并调用对应接口持久化 */
+async function handleSaveEdit(data: Record<string, any>) {
+  if (editModule.value === 'info') {
+    // ---- 基本信息：调用主表接口保存 ----
+    try {
+      saving.value = true
+      await saveProfile({
+        name: data.name,
+        email: data.email,
+        mobileNumber: data.phone,
+        regionCode: data.location,
+        wechatNumber: data.wechat,
+      })
+      // 接口成功后更新本地数据
+      profile.value.name = data.name
+      profile.value.email = data.email
+      profile.value.phone = data.phone
+      profile.value.wechat = data.wechat
+      /** 将城市编码存入 regionCode，先直接显示编码，后续联调获取接口再做名称转换 */
+      profile.value.regionCode = data.location || ''
+      ElMessage.success('个人信息保存成功')
+    } catch {
+      ElMessage.error('个人信息保存失败，请重试')
+    } finally {
+      saving.value = false
+    }
+  } else if (editModule.value === 'education') {
+    // ---- 教育经历：调用教育经历接口保存 ----
+    try {
+      saving.value = true
+      const payload: SaveEducationItem[] = data.education.map((edu: any) => ({
+        school: edu.school,
+        major: edu.major,
+        degree: edu.degree,
+        studyType: edu.studyType,
+        startDate: edu.startDate,
+        endDate: edu.endDate,
+        description: edu.description.map((d: any) => ({ id: d.id, text: d.text })),
+      }))
+      await saveEducation(payload)
+      // 接口成功后更新本地数据
+      profile.value.education = data.education.map((edu: any) => ({
+        school: edu.school,
+        major: edu.major,
+        studyType: edu.studyType,
+        degree: edu.degree,
+        startDate: edu.startDate,
+        endDate: edu.endDate,
+        description: edu.description.map((d: any) => ({ ...d })),
+      }))
+      ElMessage.success('教育经历保存成功')
+    } catch {
+      ElMessage.error('教育经历保存失败，请重试')
+    } finally {
+      saving.value = false
+    }
+  } else if (editModule.value === 'work') {
+    // ---- 工作经历：调用工作经历接口保存 ----
+    try {
+      saving.value = true
+      const payload: SaveWorkItem[] = data.works.map((work: any) => ({
+        companyName: work.companyName,
+        position: work.position,
+        startDate: work.startDate,
+        endDate: work.endDate || '',
+        description: work.description.map((d: any) => ({ id: d.id, text: d.text })),
+      }))
+      await saveWork(payload)
+      // 接口成功后更新本地数据
+      profile.value.works = data.works.map((work: any) => ({
+        companyName: work.companyName,
+        position: work.position,
+        startDate: work.startDate,
+        endDate: work.endDate,
+        description: work.description.map((d: any) => ({ ...d })),
+      }))
+      ElMessage.success('工作经历保存成功')
+    } catch {
+      ElMessage.error('工作经历保存失败，请重试')
+    } finally {
+      saving.value = false
+    }
+  } else if (editModule.value === 'internship') {
+    // ---- 实习经历：调用实习经历接口保存 ----
+    try {
+      saving.value = true
+      const payload: SaveWorkItem[] = data.internships.map((intern: any) => ({
+        companyName: intern.companyName,
+        position: intern.position,
+        startDate: intern.startDate,
+        endDate: intern.endDate || '',
+        description: intern.description.map((d: any) => ({ id: d.id, text: d.text })),
+      }))
+      await saveInternship(payload)
+      // 接口成功后更新本地数据
+      profile.value.internships = data.internships.map((intern: any) => ({
+        companyName: intern.companyName,
+        position: intern.position,
+        startDate: intern.startDate,
+        endDate: intern.endDate,
+        description: intern.description.map((d: any) => ({ ...d })),
+      }))
+      ElMessage.success('实习经历保存成功')
+    } catch {
+      ElMessage.error('实习经历保存失败，请重试')
+    } finally {
+      saving.value = false
+    }
+  } else if (editModule.value === 'project') {
+    // ---- 项目经历：调用项目经历接口保存 ----
+    try {
+      saving.value = true
+      const payload: SaveProjectItem[] = data.projects.map((proj: any) => ({
+        projectName: proj.projectName,
+        companyName: proj.companyName || '',
+        role: proj.role || '',
+        startDate: proj.startDate,
+        endDate: proj.endDate || '',
+        description: proj.description.map((d: any) => ({ id: d.id, text: d.text })),
+      }))
+      await saveProject(payload)
+      // 接口成功后更新本地数据
+      profile.value.projects = data.projects.map((proj: any) => ({
+        projectName: proj.projectName,
+        companyName: proj.companyName,
+        role: proj.role,
+        startDate: proj.startDate,
+        endDate: proj.endDate,
+        description: proj.description.map((d: any) => ({ ...d })),
+      }))
+      ElMessage.success('项目经历保存成功')
+    } catch {
+      ElMessage.error('项目经历保存失败，请重试')
+    } finally {
+      saving.value = false
+    }
+  } else if (editModule.value === 'competition') {
+    // ---- 竞赛经历：调用竞赛经历接口保存 ----
+    try {
+      saving.value = true
+      const payload: SaveCompetitionItem[] = data.competitions.map((comp: any) => ({
+        competitionName: comp.competitionName,
+        award: comp.award || '',
+        awardDate: comp.awardDate || '',
+        description: comp.description.map((d: any) => ({ id: d.id, text: d.text })),
+      }))
+      await saveCompetition(payload)
+      // 接口成功后更新本地数据
+      profile.value.competitions = data.competitions.map((comp: any) => ({
+        competitionName: comp.competitionName,
+        award: comp.award,
+        awardDate: comp.awardDate,
+        description: comp.description.map((d: any) => ({ ...d })),
+      }))
+      ElMessage.success('竞赛经历保存成功')
+    } catch {
+      ElMessage.error('竞赛经历保存失败，请重试')
+    } finally {
+      saving.value = false
+    }
+  } else if (editModule.value === 'skills') {
+    // ---- 技能：调用主表接口保存，需要传递完整的个人信息数据 ----
+    try {
+      saving.value = true
+      await saveProfile({
+        name: profile.value.name,
+        email: profile.value.email,
+        mobileNumber: profile.value.phone,
+        idCard: profile.value.idNumber,
+        regionCode: profile.value.regionCode,
+        wechatNumber: profile.value.wechat,
+        skills: [...data.skills],
+        certificates: profile.value.certificates,
+      })
+      profile.value.skills = [...data.skills]
+      ElMessage.success('技能保存成功')
+    } catch {
+      ElMessage.error('技能保存失败，请重试')
+    } finally {
+      saving.value = false
+    }
+  } else if (editModule.value === 'certificate') {
+    // ---- 证书：调用主表接口保存，需要传递完整的个人信息数据 ----
+    try {
+      saving.value = true
+      await saveProfile({
+        name: profile.value.name,
+        email: profile.value.email,
+        mobileNumber: profile.value.phone,
+        idCard: profile.value.idNumber,
+        regionCode: profile.value.regionCode,
+        wechatNumber: profile.value.wechat,
+        skills: profile.value.skills,
+        certificates: [...data.certificates],
+      })
+      profile.value.certificates = [...data.certificates]
+      ElMessage.success('证书保存成功')
+    } catch {
+      ElMessage.error('证书保存失败，请重试')
+    } finally {
+      saving.value = false
+    }
+  }
+}
+
+function goToJobs() {
+  router.push('/jobs')
+}
+
+function goToResume() {
+  router.push('/resume')
+}
+</script>
diff --git a/src/views/Resume.vue b/src/views/Resume.vue
new file mode 100644
index 0000000..d240c99
--- /dev/null
+++ b/src/views/Resume.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="resume-page dflex">
+    <SideNav />
+    <div class="resume-page__content">
+      <!-- 页面标题 + 上传按钮 -->
+      <div class="resume-page__header">
+        <h2 class="resume-page__title">我的简历</h2>
+        <button class="resume-page__upload-btn" @click="handleUpload">
+          <svg viewBox="0 0 16 16" fill="none" class="resume-page__upload-icon">
+            <path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+          上传简历
+        </button>
+      </div>
+
+      <!-- 简历表格 -->
+      <div class="resume-page__table-wrap">
+        <table class="resume-page__table">
+          <thead>
+            <tr>
+              <th class="resume-page__th">简历</th>
+              <th class="resume-page__th">目标岗位</th>
+              <th class="resume-page__th">最近修改</th>
+              <th class="resume-page__th">创建时间</th>
+              <th class="resume-page__th resume-page__th--action"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="item in resumeList"
+              :key="item.id"
+              class="resume-page__row"
+              @click="goDetail(item.id)"
+            >
+              <td class="resume-page__td">
+                <div class="resume-page__name-cell">
+                  <span class="resume-page__avatar" :style="{ background: item.avatarColor }">
+                    {{ item.avatarLetter }}
+                  </span>
+                  <span class="resume-page__name">{{ item.name }}</span>
+                  <span v-if="item.isDefault" class="resume-page__default-tag">默认</span>
+                </div>
+              </td>
+              <td class="resume-page__td">{{ item.targetJob }}</td>
+              <td class="resume-page__td">{{ item.updatedAt }}</td>
+              <td class="resume-page__td">{{ item.createdAt }}</td>
+              <td class="resume-page__td resume-page__td--action">
+                <button
+                  class="resume-page__more-btn"
+                  aria-label="更多操作"
+                  @click.stop="toggleMenu(item.id)"
+                >
+                  <svg viewBox="0 0 16 16" fill="currentColor" class="resume-page__more-svg">
+                    <circle cx="3" cy="8" r="1.5"/>
+                    <circle cx="8" cy="8" r="1.5"/>
+                    <circle cx="13" cy="8" r="1.5"/>
+                  </svg>
+                </button>
+                <!-- 弹出菜单 -->
+                <div v-if="activeMenuId === item.id" class="resume-page__popup" @click.stop>
+                  <div
+                    v-for="action in popupActions"
+                    :key="action"
+                    class="resume-page__popup-item"
+                    @click="handleAction(action, item.id)"
+                  >
+                    {{ action }}
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import SideNav from '@/components/SideNav.vue'
+
+const router = useRouter()
+
+// ==================== 类型定义 ====================
+
+/** 简历列表项类型 */
+interface ResumeItem {
+  id: string
+  name: string
+  avatarLetter: string
+  avatarColor: string
+  isDefault: boolean
+  targetJob: string
+  updatedAt: string
+  createdAt: string
+}
+
+// ==================== 数据（模拟数据，后续对接接口） ====================
+
+/** 简历列表 */
+const resumeList = ref<ResumeItem[]>([
+  {
+    id: '1',
+    name: '李华_产品经理',
+    avatarLetter: 'D',
+    avatarColor: '#1A1A2E',
+    isDefault: true,
+    targetJob: '产品经理',
+    updatedAt: '1个月前',
+    createdAt: '1个月前',
+  },
+  {
+    id: '2',
+    name: '李华_产品运营',
+    avatarLetter: 'C',
+    avatarColor: '#4FC2C9',
+    isDefault: false,
+    targetJob: '产品运营',
+    updatedAt: '1个月前',
+    createdAt: '1个月前',
+  },
+  {
+    id: '3',
+    name: '李华_产品经理',
+    avatarLetter: '?',
+    avatarColor: '#BFBFBF',
+    isDefault: false,
+    targetJob: '',
+    updatedAt: '1个月前',
+    createdAt: '1个月前',
+  },
+])
+
+// ==================== 页面状态 ====================
+
+/** 当前打开弹出菜单的简历 ID */
+const activeMenuId = ref<string | null>(null)
+
+/** 弹出菜单操作项 */
+const popupActions = ['设为默认简历', '编辑', '导出简历', '删除']
+
+// ==================== 事件处理 ====================
+
+/** 切换弹出菜单的显示/隐藏 */
+function toggleMenu(id: string) {
+  activeMenuId.value = activeMenuId.value === id ? null : id
+}
+
+/** 弹出菜单操作点击 */
+function handleAction(action: string, id: string) {
+  activeMenuId.value = null
+  console.log(action, id)
+}
+
+/** 上传简历 */
+function handleUpload() {
+  console.log('上传简历')
+}
+
+/** 跳转到简历详情页 */
+function goDetail(id: string) {
+  router.push(`/resume/${id}`)
+}
+</script>
diff --git a/src/views/ResumeDetail.vue b/src/views/ResumeDetail.vue
new file mode 100644
index 0000000..5e8fcea
--- /dev/null
+++ b/src/views/ResumeDetail.vue
@@ -0,0 +1,230 @@
+<template>
+  <div class="resume-detail dflex">
+    <SideNav />
+    <div class="resume-detail__content">
+      <!-- 顶部标题 -->
+      <h2 class="resume-detail__page-title">我的简历</h2>
+
+      <!-- 顶部操作栏 -->
+      <div class="resume-detail__toolbar">
+        <div class="resume-detail__toolbar-left">
+          <button class="resume-detail__back-btn" @click="goBack" aria-label="返回">
+            <svg viewBox="0 0 16 16" fill="none" class="resume-detail__back-icon">
+              <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+          </button>
+          <span class="resume-detail__tab-name">{{ resume.name }}</span>
+        </div>
+        <div class="resume-detail__toolbar-right">
+          <button class="resume-detail__tool-btn" @click="handleFeedback">问题反馈</button>
+          <button class="resume-detail__tool-btn" @click="handleEdit">
+            <svg viewBox="0 0 16 16" fill="none" class="resume-detail__tool-icon">
+              <path d="M11.5 2.5l2 2L5 13H3v-2l8.5-8.5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+            </svg>
+            编辑简历信息
+          </button>
+          <button class="resume-detail__tool-btn" @click="handleExport">
+            <svg viewBox="0 0 16 16" fill="none" class="resume-detail__tool-icon">
+              <path d="M3 10v3h10v-3M8 2v8M5 5l3-3 3 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            导出
+          </button>
+          <button class="resume-detail__tool-btn resume-detail__tool-btn--danger" @click="handleDelete">
+            <svg viewBox="0 0 16 16" fill="none" class="resume-detail__tool-icon">
+              <path d="M4 4h8l-.5 9H4.5L4 4zM6 4V2.5h4V4M2.5 4h11" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            删除
+          </button>
+        </div>
+      </div>
+
+      <!-- 简历评分区域 -->
+      <div class="resume-detail__score-bar">
+        <div class="resume-detail__score-left">
+          <span class="resume-detail__score-avatar" :style="{ background: resume.avatarColor }">
+            {{ resume.avatarLetter }}
+          </span>
+          <span class="resume-detail__score-badge">良好</span>
+          <button class="resume-detail__score-link" @click="handleViewReport">查看评估报告 ></button>
+        </div>
+        <div class="resume-detail__score-right">
+          <div class="resume-detail__score-item">
+            <span class="resume-detail__score-num">{{ resume.urgentCount }}</span>
+            <span class="resume-detail__score-label">紧急修复项</span>
+          </div>
+          <div class="resume-detail__score-item">
+            <span class="resume-detail__score-num">{{ resume.severeCount }}</span>
+            <span class="resume-detail__score-label">严重问题</span>
+          </div>
+          <div class="resume-detail__score-item">
+            <span class="resume-detail__score-num">{{ resume.optionalCount }}</span>
+            <span class="resume-detail__score-label">可选修复项</span>
+          </div>
+          <button class="resume-detail__diagnose-btn" @click="handleDiagnose">重新诊断</button>
+        </div>
+      </div>
+
+      <!-- 简历主体内容 -->
+      <div class="resume-detail__body">
+        <!-- 个人信息卡片 -->
+        <div class="resume-detail__card">
+          <div class="resume-detail__card-header">
+            <div>
+              <h3 class="resume-detail__user-name">{{ resume.realName }}</h3>
+              <p class="resume-detail__user-title">{{ resume.jobTitle }}</p>
+            </div>
+            <div class="resume-detail__card-actions">
+              <button class="resume-detail__card-btn resume-detail__card-btn--outline" @click="handleUrgentFix">紧急修复项</button>
+              <button class="resume-detail__card-btn resume-detail__card-btn--dark" @click="handlePolish">修复</button>
+            </div>
+          </div>
+          <div class="resume-detail__contact">
+            <span class="resume-detail__contact-item">
+              <svg viewBox="0 0 16 16" fill="none" class="resume-detail__contact-icon">
+                <rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
+                <path d="M2 5.5l6 4 6-4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+              </svg>
+              {{ resume.email }}
+            </span>
+            <span class="resume-detail__contact-item">
+              <svg viewBox="0 0 16 16" fill="none" class="resume-detail__contact-icon">
+                <path d="M4 2h2.5l1.5 3-1.5 1.5a8 8 0 003 3L11 8l3 1.5V12a2 2 0 01-2 2C6.5 14 2 9.5 2 4a2 2 0 012-2z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+              </svg>
+              {{ resume.phone }}
+            </span>
+            <span class="resume-detail__contact-item">
+              <svg viewBox="0 0 16 16" fill="none" class="resume-detail__contact-icon">
+                <circle cx="8" cy="6.5" r="2.5" stroke="currentColor" stroke-width="1.2"/>
+                <path d="M8 14s-5-4-5-7.5a5 5 0 0110 0C13 10 8 14 8 14z" stroke="currentColor" stroke-width="1.2"/>
+              </svg>
+              {{ resume.location }}
+            </span>
+          </div>
+        </div>
+
+        <!-- 教育背景 -->
+        <div class="resume-detail__card">
+          <div class="resume-detail__section-header">
+            <h3 class="resume-detail__section-title">教育背景</h3>
+            <div class="resume-detail__card-actions">
+              <button class="resume-detail__card-btn resume-detail__card-btn--outline">紧急修复项</button>
+              <button class="resume-detail__card-btn resume-detail__card-btn--dark">修复</button>
+            </div>
+          </div>
+          <div v-for="(edu, i) in resume.education" :key="i" class="resume-detail__edu-item">
+            <div class="resume-detail__edu-degree">{{ edu.degree }}</div>
+            <div class="resume-detail__edu-meta">{{ edu.school }} · {{ edu.period }}</div>
+            <div v-if="edu.gpa" class="resume-detail__edu-meta">GPA: {{ edu.gpa }}</div>
+          </div>
+        </div>
+
+        <!-- 工作经验 -->
+        <div class="resume-detail__card">
+          <h3 class="resume-detail__section-title">工作经验</h3>
+          <div v-for="(exp, i) in resume.experience" :key="i" class="resume-detail__exp-item">
+            <div class="resume-detail__exp-title">{{ exp.title }}</div>
+            <div class="resume-detail__exp-meta">{{ exp.company }} · {{ exp.period }}</div>
+            <p class="resume-detail__exp-desc">{{ exp.description }}</p>
+          </div>
+        </div>
+
+        <!-- 技能 -->
+        <div class="resume-detail__card">
+          <h3 class="resume-detail__section-title">技能</h3>
+          <div class="resume-detail__skills">
+            <span v-for="(skill, i) in resume.skills" :key="i" class="resume-detail__skill-tag">
+              {{ skill }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import SideNav from '@/components/SideNav.vue'
+
+// ==================== 路由相关 ====================
+
+const router = useRouter()
+const route = useRoute()
+
+/** 当前简历 ID，从路由参数中获取 */
+const resumeId = route.params.id as string
+
+// ==================== 简历数据（模拟数据，后续对接接口） ====================
+
+const resume = ref({
+  id: resumeId,
+  name: '李华_产品经理',
+  avatarLetter: 'B',
+  avatarColor: '#1A1A2E',
+  realName: '李华',
+  jobTitle: '数据产品经理',
+  email: '[email]',
+  phone: '+1 (555) 123-4567',
+  location: '北京',
+  /** 紧急修复项数量 */
+  urgentCount: 8,
+  /** 严重问题数量 */
+  severeCount: 0,
+  /** 可选修复项数量 */
+  optionalCount: 1,
+  /** 教育背景 */
+  education: [
+    { degree: '计算机科学学士', school: '斯坦福大学', period: '2018 - 2022', gpa: '3.8/4.0' },
+    { degree: '高中毕业', school: '加州理工学院附属中学', period: '2014 - 2018', gpa: '' },
+  ],
+  /** 工作经验 */
+  experience: [
+    {
+      title: '高级软件工程师',
+      company: 'Google',
+      period: '2022 - 至今',
+      description: '负责开发和维护大规模分布式系统，优化系统性能和可靠性。',
+    },
+    {
+      title: '软件工程师实习生',
+      company: 'Microsoft',
+      period: '2021 - 2022',
+      description: '参与云服务平台的开发，协助团队完成多个核心功能模块。',
+    },
+  ],
+  /** 技能标签 */
+  skills: ['JavaScript', 'Python', 'React', 'Node.js', 'SQL', 'AWS', 'Docker', 'Kubernetes'],
+})
+
+// ==================== 事件处理 ====================
+
+/** 返回简历列表页 */
+function goBack() {
+  router.push('/resume')
+}
+
+/** 问题反馈 */
+function handleFeedback() { console.log('问题反馈') }
+
+/** 编辑简历信息 */
+function handleEdit() { console.log('编辑简历信息') }
+
+/** 导出简历 */
+function handleExport() { console.log('导出') }
+
+/** 删除简历 */
+function handleDelete() { console.log('删除') }
+
+/** 查看评估报告 */
+function handleViewReport() { console.log('查看评估报告') }
+
+/** 重新诊断简历 */
+function handleDiagnose() { console.log('重新诊断') }
+
+/** 紧急修复项 */
+function handleUrgentFix() { console.log('紧急修复项') }
+
+/** 修复简历问题 */
+function handlePolish() { console.log('修复') }
+</script>
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..8d16e42
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..dac5905
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
\ No newline at end of file
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..8ec5aa6
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "emitDeclarationOnly": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..b817698
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,52 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import PrerenderPlugin from '@prerenderer/rollup-plugin'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { fileURLToPath, URL } from 'node:url'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+    PrerenderPlugin({
+      staticDir: 'dist',
+      routes: ['/'],
+      renderer: '@prerenderer/renderer-puppeteer',
+      rendererOptions: {
+        renderAfterTime: 5000,
+        renderAfterDocumentEvent: 'prerender-trigger'
+      }
+    } as any)
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  build: {
+    outDir: 'dist'
+  },
+  server: {
+    host: '0.0.0.0',
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:8080',
+        changeOrigin: true,
+      },
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        // 各 scss 文件按需 @use '../variables' as * 引入全局变量
+      }
+    }
+  }
+})
\ No newline at end of file