diff --git a/package-lock.json b/package-lock.json
index dd669f1..137b9a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,13 +8,30 @@
       "name": "ai-demo",
       "version": "0.0.0",
       "dependencies": {
-        "vue": "^3.5.30"
+        "vue": "^3.5.30",
+        "vue-router": "^5.0.3"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.5",
         "vite": "^8.0.0"
       }
     },
+    "node_modules/@babel/generator": {
+      "version": "7.29.1",
+      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.29.1.tgz",
+      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.27.1",
       "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
@@ -95,12 +112,51 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.1.tgz",
@@ -428,6 +484,33 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vue-macros/common": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/@vue-macros/common/-/common-3.1.2.tgz",
+      "integrity": "sha512-h9t4ArDdniO9ekYHAD95t9AZcAbb19lEGK+26iAjUODOIJKmObDNBSe4+6ELQAA3vtYiFPPBtHh7+cQCKi3Dng==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-sfc": "^3.5.22",
+        "ast-kit": "^2.1.2",
+        "local-pkg": "^1.1.2",
+        "magic-string-ast": "^1.0.2",
+        "unplugin-utils": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/vue-macros"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.2.25"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.5.30",
       "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.30.tgz",
@@ -478,6 +561,33 @@
         "@vue/shared": "3.5.30"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-8.1.0.tgz",
+      "integrity": "sha512-O44X57jjkLKbLEc4OgL/6fEPOOanRJU8kYpCE8qfKlV96RQZcdzrcLI5mxMuVRUeXhHKIHGhCpHacyCk0HyO4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^8.1.0"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-kit/-/devtools-kit-8.1.0.tgz",
+      "integrity": "sha512-/NZlS4WtGIB54DA/z10gzk+n/V7zaqSzYZOVlg2CfdnpIKdB61bd7JDIMxf/zrtX41zod8E2/bbEBoW/d7x70Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^8.1.0",
+        "birpc": "^2.6.1",
+        "hookable": "^5.5.3",
+        "perfect-debounce": "^2.0.0"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-8.1.0.tgz",
+      "integrity": "sha512-h8uCb4Qs8UT8VdTT5yjY6tOJ//qH7EpxToixR0xqejR55t5OdISIg7AJ7eBkhBs8iu1qG5gY3QQNN1DF1EelAA==",
+      "license": "MIT"
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.30",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.30.tgz",
@@ -528,6 +638,80 @@
       "integrity": "sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ==",
       "license": "MIT"
     },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ast-kit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/ast-kit/-/ast-kit-2.2.0.tgz",
+      "integrity": "sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "pathe": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/ast-walker-scope": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmmirror.com/ast-walker-scope/-/ast-walker-scope-0.8.3.tgz",
+      "integrity": "sha512-cbdCP0PGOBq0ASG+sjnKIoYkWMKhhz+F/h9pRexUdX2Hd38+WOlBkRKlqkGOSm0YQpcFMQBJeK4WspUAkwsEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.4",
+        "ast-kit": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmmirror.com/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/confbox": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.2.4.tgz",
+      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
@@ -562,11 +746,16 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "license": "MIT"
     },
+    "node_modules/exsolve": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/exsolve/-/exsolve-1.0.8.tgz",
+      "integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==",
+      "license": "MIT"
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -595,6 +784,36 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmmirror.com/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -856,6 +1075,23 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/local-pkg": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-1.1.2.tgz",
+      "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
@@ -865,6 +1101,56 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/magic-string-ast": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/magic-string-ast/-/magic-string-ast-1.0.3.tgz",
+      "integrity": "sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==",
+      "license": "MIT",
+      "dependencies": {
+        "magic-string": "^0.30.19"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/mlly": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmmirror.com/mlly/-/mlly-1.8.1.tgz",
+      "integrity": "sha512-SnL6sNutTwRWWR/vcmCYHSADjiEesp5TGQQ0pXyLhW5IoeibRlF/CbSLailbB3CNqJUk9cVJ9dUDnbD7GrcHBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.3"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
@@ -883,6 +1169,18 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "license": "MIT"
+    },
+    "node_modules/perfect-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-2.1.0.tgz",
+      "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
@@ -893,7 +1191,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -902,6 +1199,17 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.8",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.8.tgz",
@@ -930,6 +1238,35 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmmirror.com/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/rolldown": {
       "version": "1.0.0-rc.9",
       "resolved": "https://registry.npmmirror.com/rolldown/-/rolldown-1.0.0-rc.9.tgz",
@@ -971,6 +1308,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/scule": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -984,7 +1327,6 @@
       "version": "0.2.15",
       "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.15.tgz",
       "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -1005,6 +1347,42 @@
       "license": "0BSD",
       "optional": true
     },
+    "node_modules/ufo": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.6.3.tgz",
+      "integrity": "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==",
+      "license": "MIT"
+    },
+    "node_modules/unplugin": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-3.0.0.tgz",
+      "integrity": "sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/unplugin-utils": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmmirror.com/unplugin-utils/-/unplugin-utils-0.3.1.tgz",
+      "integrity": "sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==",
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
     "node_modules/vite": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-8.0.0.tgz",
@@ -1104,6 +1482,72 @@
           "optional": true
         }
       }
+    },
+    "node_modules/vue-router": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-5.0.3.tgz",
+      "integrity": "sha512-nG1c7aAFac7NYj8Hluo68WyWfc41xkEjaR0ViLHCa3oDvTQ/nIuLJlXJX1NUPw/DXzx/8+OKMng045HHQKQKWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/generator": "^7.28.6",
+        "@vue-macros/common": "^3.1.1",
+        "@vue/devtools-api": "^8.0.6",
+        "ast-walker-scope": "^0.8.3",
+        "chokidar": "^5.0.0",
+        "json5": "^2.2.3",
+        "local-pkg": "^1.1.2",
+        "magic-string": "^0.30.21",
+        "mlly": "^1.8.0",
+        "muggle-string": "^0.4.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "scule": "^1.3.0",
+        "tinyglobby": "^0.2.15",
+        "unplugin": "^3.0.0",
+        "unplugin-utils": "^0.3.1",
+        "yaml": "^2.8.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@pinia/colada": ">=0.21.2",
+        "@vue/compiler-sfc": "^3.5.17",
+        "pinia": "^3.0.4",
+        "vue": "^3.5.0"
+      },
+      "peerDependenciesMeta": {
+        "@pinia/colada": {
+          "optional": true
+        },
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "pinia": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "license": "MIT"
+    },
+    "node_modules/yaml": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmmirror.com/yaml/-/yaml-2.8.2.tgz",
+      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index be4cbbd..31becc4 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.5.30"
+    "vue": "^3.5.30",
+    "vue-router": "^5.0.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.5",
diff --git a/src/App.vue b/src/App.vue
index 68f5a12..9265544 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,116 +1,7 @@
 <script setup>
-import { ref, onMounted } from 'vue'
-
-const features = ref([
-  { 
-    id: 1, 
-    title: 'AI听力考试音频生成', 
-    desc: '基于先进TTS技术，根据文本快速合成全真模拟的英语听力考试音频。', 
-    class: 'card-1', 
-    icon: 'audio',
-    url: 'https://jz5k88k7vv.coze.site'
-  },
-  { 
-    id: 2, 
-    title: 'AI口语对话', 
-    desc: '全天候1对1外教级对练，实时纠正发音与语法，快速提升口语表达。', 
-    class: 'card-2', 
-    icon: 'mic' 
-  },
-  { 
-    id: 3, 
-    title: 'AI作文原图批改', 
-    desc: '一键上传手写作文图片，AI智能OCR识别并提供词汇、语法深度批改。', 
-    class: 'card-3', 
-    icon: 'edit' 
-  },
-  { 
-    id: 4, 
-    title: '英语试题AI分析', 
-    desc: '深度解析长难句、阅读理解及语法考点，为您提供专属错题讲解。', 
-    class: 'card-4', 
-    icon: 'analytics' 
-  },
-  { 
-    id: 5, 
-    title: 'AI单词听写', 
-    desc: '自适应发音报词，智能追踪拼写薄弱点，让词汇记忆更高效。', 
-    class: 'card-5', 
-    icon: 'spell' 
-  },
-  { 
-    id: 6, 
-    title: 'AI英语发音', 
-    desc: '输入英语单词或长难句，一键调用AI为您进行标准地道的语音朗读示范。', 
-    class: 'card-6', 
-    icon: 'speaker' 
-  }
-])
-
-// Hover effect for glassmorphism glare
-const handleMouseMove = (e) => {
-  const cards = document.querySelectorAll('.feature-card')
-  for (const card of cards) {
-    const rect = card.getBoundingClientRect()
-    const x = e.clientX - rect.left
-    const y = e.clientY - rect.top
-    card.style.setProperty('--mouse-x', `${x}px`)
-    card.style.setProperty('--mouse-y', `${y}px`)
-  }
-}
-
-onMounted(() => {
-  document.getElementById('app').addEventListener('mousemove', handleMouseMove)
-})
+import HomePage from './components/HomePage.vue'
 </script>
 
 <template>
-  <header>
-    <h1>AI 英语学习辅助平台</h1>
-    <p class="subtitle">全方位智能化辅助，让英语学习更加简单、高效</p>
-  </header>
-
-  <main class="grid-container">
-    <a v-for="feature in features" :key="feature.id" :href="feature.url || '#'" :target="feature.url ? '_blank' : '_self'" class="feature-card" :class="feature.class">
-      
-      <div class="icon-wrapper">
-        <!-- Audio Icon (Headphones) -->
-        <svg v-if="feature.icon === 'audio'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
-        </svg>
-
-        <!-- Mic Icon (Chat/Mic) -->
-        <svg v-else-if="feature.icon === 'mic'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z" />
-        </svg>
-
-        <!-- Edit Icon (Document Text / Pen) -->
-        <svg v-else-if="feature.icon === 'edit'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
-        </svg>
-
-        <!-- Analytics Icon (Chart/Sparkles) -->
-        <svg v-else-if="feature.icon === 'analytics'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
-        </svg>
-
-        <!-- Spell Icon (Book Open) -->
-        <svg v-else-if="feature.icon === 'spell'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
-        </svg>
-
-        <!-- Speaker Icon (Megaphone/Speaker) -->
-        <svg v-else-if="feature.icon === 'speaker'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z" />
-        </svg>
-      </div>
-
-      <h2 class="card-title">{{ feature.title }}</h2>
-      <p class="card-desc">{{ feature.desc }}</p>
-
-      <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
-      </svg>
-    </a>
-  </main>
+  <HomePage />
 </template>
diff --git a/src/MainLayout.vue b/src/MainLayout.vue
new file mode 100644
index 0000000..13ee9ea
--- /dev/null
+++ b/src/MainLayout.vue
@@ -0,0 +1,7 @@
+<script setup>
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+  <RouterView />
+</template>
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
new file mode 100644
index 0000000..f099e7e
--- /dev/null
+++ b/src/components/HomePage.vue
@@ -0,0 +1,327 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const features = ref([
+  { 
+    id: 1, 
+    title: 'AI听力考试音频生成', 
+    desc: '基于先进TTS技术，根据文本快速合成全真模拟的英语听力考试音频。', 
+    class: 'card-1', 
+    icon: 'audio',
+    url: 'https://jz5k88k7vv.coze.site'
+  },
+  { 
+    id: 2, 
+    title: 'AI口语对话', 
+    desc: '全天候1对1外教级对练，实时纠正发音与语法，快速提升口语表达。', 
+    class: 'card-2', 
+    icon: 'mic',
+    route: null
+  },
+  { 
+    id: 3, 
+    title: 'AI作文原图批改', 
+    desc: '一键上传手写作文图片，AI智能OCR识别并提供词汇、语法深度批改。', 
+    class: 'card-3', 
+    icon: 'edit',
+    route: null
+  },
+  { 
+    id: 4, 
+    title: '英语试题AI分析', 
+    desc: '深度解析长难句、阅读理解及语法考点，为您提供专属错题讲解。', 
+    class: 'card-4', 
+    icon: 'analytics',
+    route: null
+  },
+  { 
+    id: 5, 
+    title: 'AI单词听写', 
+    desc: '自适应发音报词，智能追踪拼写薄弱点，让词汇记忆更高效。', 
+    class: 'card-5', 
+    icon: 'spell',
+    route: null
+  },
+  { 
+    id: 6, 
+    title: 'AI英语发音', 
+    desc: '输入英语单词或长难句，一键调用AI为您进行标准地道的语音朗读示范。', 
+    class: 'card-6', 
+    icon: 'speaker',
+    route: '/pronunciation'
+  }
+])
+
+// Hover effect for glassmorphism glare
+const handleMouseMove = (e) => {
+  const cards = document.querySelectorAll('.homepage-feature-card')
+  for (const card of cards) {
+    const rect = card.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    card.style.setProperty('--mouse-x', `${x}px`)
+    card.style.setProperty('--mouse-y', `${y}px`)
+  }
+}
+
+const handleCardClick = (feature) => {
+  if (feature.url) {
+    window.open(feature.url, '_blank')
+  } else if (feature.route) {
+    router.push(feature.route)
+  }
+}
+
+onMounted(() => {
+  const container = document.querySelector('.homepage-container')
+  if (container) {
+    container.addEventListener('mousemove', handleMouseMove)
+  }
+})
+
+onUnmounted(() => {
+  const container = document.querySelector('.homepage-container')
+  if (container) {
+    container.removeEventListener('mousemove', handleMouseMove)
+  }
+})
+</script>
+
+<template>
+  <div class="homepage-container">
+    <header>
+      <h1>AI 英语学习辅助平台</h1>
+      <p class="subtitle">全方位智能化辅助，让英语学习更加简单、高效</p>
+    </header>
+
+    <main class="grid-container">
+      <div v-for="feature in features" :key="feature.id" @click="handleCardClick(feature)" class="homepage-feature-card" :class="feature.class">
+        
+        <div class="icon-wrapper">
+          <!-- Audio Icon (Headphones) -->
+          <svg v-if="feature.icon === 'audio'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
+          </svg>
+
+          <!-- Mic Icon (Chat/Mic) -->
+          <svg v-else-if="feature.icon === 'mic'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z" />
+          </svg>
+
+          <!-- Edit Icon (Document Text / Pen) -->
+          <svg v-else-if="feature.icon === 'edit'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
+          </svg>
+
+          <!-- Analytics Icon (Chart/Sparkles) -->
+          <svg v-else-if="feature.icon === 'analytics'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
+          </svg>
+
+          <!-- Spell Icon (Book Open) -->
+          <svg v-else-if="feature.icon === 'spell'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
+          </svg>
+
+          <!-- Speaker Icon (Megaphone/Speaker) -->
+          <svg v-else-if="feature.icon === 'speaker'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z" />
+          </svg>
+        </div>
+
+        <h2 class="card-title">{{ feature.title }}</h2>
+        <p class="card-desc">{{ feature.desc }}</p>
+
+        <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+        </svg>
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.homepage-container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 4rem 2rem;
+  box-sizing: border-box;
+}
+
+header {
+  text-align: center;
+  margin-bottom: 4rem;
+}
+
+h1 {
+  font-size: 3.5rem;
+  font-weight: 800;
+  letter-spacing: -0.05em;
+  margin: 0;
+  background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0 0 40px rgba(99, 102, 241, 0.3);
+}
+
+.subtitle {
+  font-size: 1.25rem;
+  color: #94a3b8;
+  margin-top: 1rem;
+  font-weight: 400;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 2rem;
+}
+
+.homepage-feature-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 20px;
+  padding: 2.5rem 2rem;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-decoration: none;
+  color: inherit;
+}
+
+.homepage-feature-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.06), transparent 40%);
+  opacity: 0;
+  transition: opacity 0.4s;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.homepage-feature-card:hover::before {
+  opacity: 1;
+}
+
+.homepage-feature-card:hover {
+  transform: translateY(-8px);
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
+}
+
+.icon-wrapper {
+  width: 60px;
+  height: 60px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+  font-size: 1.75rem;
+  color: #fff;
+  position: relative;
+  z-index: 2;
+  transition: transform 0.3s ease;
+}
+
+.homepage-feature-card:hover .icon-wrapper {
+  transform: scale(1.1) rotate(5deg);
+}
+
+.icon-wrapper svg {
+  width: 32px;
+  height: 32px;
+}
+
+/* Colors for specific cards */
+.card-1 .icon-wrapper {
+  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  box-shadow: 0 8px 20px -6px rgba(99, 102, 241, 0.5);
+}
+
+.card-2 .icon-wrapper {
+  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
+  box-shadow: 0 8px 20px -6px rgba(139, 92, 246, 0.5);
+}
+
+.card-3 .icon-wrapper {
+  background: linear-gradient(135deg, #ec4899, #db2777);
+  box-shadow: 0 8px 20px -6px rgba(236, 72, 153, 0.5);
+}
+
+.card-4 .icon-wrapper {
+  background: linear-gradient(135deg, #14b8a6, #0d9488);
+  box-shadow: 0 8px 20px -6px rgba(20, 184, 166, 0.5);
+}
+
+.card-5 .icon-wrapper {
+  background: linear-gradient(135deg, #f59e0b, #d97706);
+  box-shadow: 0 8px 20px -6px rgba(245, 158, 11, 0.5);
+}
+
+.card-6 .icon-wrapper {
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+  box-shadow: 0 8px 20px -6px rgba(239, 68, 68, 0.5);
+}
+
+.card-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0 0 0.75rem 0;
+  color: #f8fafc;
+  z-index: 2;
+}
+
+.card-desc {
+  font-size: 1rem;
+  color: #94a3b8;
+  line-height: 1.6;
+  margin: 0;
+  z-index: 2;
+}
+
+.arrow-icon {
+  position: absolute;
+  bottom: 2rem;
+  right: 2rem;
+  width: 24px;
+  height: 24px;
+  color: rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+  z-index: 2;
+}
+
+.homepage-feature-card:hover .arrow-icon {
+  color: #fff;
+  transform: translateX(4px);
+}
+
+@media (max-width: 768px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+  
+  .homepage-container {
+    padding: 2rem 1rem;
+  }
+  
+  .homepage-feature-card {
+    padding: 2rem 1.5rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 2425c0f..28e8b66 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,9 @@
 import { createApp } from 'vue'
 import './style.css'
-import App from './App.vue'
+import MainLayout from './MainLayout.vue'
+import router from './router'
 
-createApp(App).mount('#app')
+const app = createApp(MainLayout)
+
+app.use(router)
+app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..9cd1a56
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../App.vue'
+import Pronunciation from '../views/Pronunciation.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      path: '/pronunciation',
+      name: 'pronunciation',
+      component: Pronunciation
+    }
+  ]
+})
+
+export default router
diff --git a/src/style.css b/src/style.css
index e348ff4..ea86ca2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -33,183 +33,4 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-#app {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 4rem 2rem;
-  box-sizing: border-box;
-}
-
-header {
-  text-align: center;
-  margin-bottom: 4rem;
-}
-
-h1 {
-  font-size: 3.5rem;
-  font-weight: 800;
-  letter-spacing: -0.05em;
-  margin: 0;
-  background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  text-shadow: 0 0 40px rgba(99, 102, 241, 0.3);
-}
-
-.subtitle {
-  font-size: 1.25rem;
-  color: var(--text-secondary);
-  margin-top: 1rem;
-  font-weight: 400;
-}
-
-.grid-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  gap: 2rem;
-}
-
-.feature-card {
-  background: var(--card-bg);
-  border: 1px solid var(--card-border);
-  border-radius: 20px;
-  padding: 2.5rem 2rem;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  text-decoration: none;
-  color: inherit;
-}
-
-.feature-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.06), transparent 40%);
-  opacity: 0;
-  transition: opacity 0.4s;
-  z-index: 1;
-  pointer-events: none;
-}
-
-.feature-card:hover::before {
-  opacity: 1;
-}
-
-.feature-card:hover {
-  transform: translateY(-8px);
-  background: var(--card-hover-bg);
-  border-color: var(--card-hover-border);
-  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
-}
-
-.icon-wrapper {
-  width: 60px;
-  height: 60px;
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 1.5rem;
-  font-size: 1.75rem;
-  color: #fff;
-  position: relative;
-  z-index: 2;
-  transition: transform 0.3s ease;
-}
-
-.feature-card:hover .icon-wrapper {
-  transform: scale(1.1) rotate(5deg);
-}
-
-.icon-wrapper svg {
-  width: 32px;
-  height: 32px;
-}
-
-/* Colors for specific cards */
-.card-1 .icon-wrapper {
-  background: linear-gradient(135deg, var(--accent-1), #4f46e5);
-  box-shadow: 0 8px 20px -6px rgba(99, 102, 241, 0.5);
-}
-
-.card-2 .icon-wrapper {
-  background: linear-gradient(135deg, var(--accent-2), #7c3aed);
-  box-shadow: 0 8px 20px -6px rgba(139, 92, 246, 0.5);
-}
-
-.card-3 .icon-wrapper {
-  background: linear-gradient(135deg, var(--accent-3), #db2777);
-  box-shadow: 0 8px 20px -6px rgba(236, 72, 153, 0.5);
-}
-
-.card-4 .icon-wrapper {
-  background: linear-gradient(135deg, var(--accent-4), #0d9488);
-  box-shadow: 0 8px 20px -6px rgba(20, 184, 166, 0.5);
-}
-
-.card-5 .icon-wrapper {
-  background: linear-gradient(135deg, var(--accent-5), #d97706);
-  box-shadow: 0 8px 20px -6px rgba(245, 158, 11, 0.5);
-}
-
-.card-6 .icon-wrapper {
-  background: linear-gradient(135deg, var(--accent-6), #dc2626);
-  box-shadow: 0 8px 20px -6px rgba(239, 68, 68, 0.5);
-}
-
-.card-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin: 0 0 0.75rem 0;
-  color: #f8fafc;
-  z-index: 2;
-}
-
-.card-desc {
-  font-size: 1rem;
-  color: var(--text-secondary);
-  line-height: 1.6;
-  margin: 0;
-  z-index: 2;
-}
-
-.arrow-icon {
-  position: absolute;
-  bottom: 2rem;
-  right: 2rem;
-  width: 24px;
-  height: 24px;
-  color: rgba(255, 255, 255, 0.2);
-  transition: all 0.3s ease;
-  z-index: 2;
-}
-
-.feature-card:hover .arrow-icon {
-  color: #fff;
-  transform: translateX(4px);
-}
-
-@media (max-width: 768px) {
-  h1 {
-    font-size: 2.5rem;
-  }
-  
-  #app {
-    padding: 2rem 1rem;
-  }
-  
-  .feature-card {
-    padding: 2rem 1.5rem;
-  }
-}
+/* App-wide styles only - component-specific styles should be defined in component scoped styles */
diff --git a/src/views/Pronunciation.vue b/src/views/Pronunciation.vue
new file mode 100644
index 0000000..06f9449
--- /dev/null
+++ b/src/views/Pronunciation.vue
@@ -0,0 +1,1417 @@
+<script setup>
+import { ref, computed, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
+
+// ==========================================
+// 豆包 (Volcengine) TTS API 配置项 (V3 API)
+// 请在此处填写您在火山引擎申请的具体参数
+// ==========================================
+const DOUBAO_APP_ID = "2542859186";
+const DOUBAO_ACCESS_TOKEN = "a4h5fT3cVlBi82u93iEQlqT3c4MP6_8V";
+// V3 API 需要 Resource ID，通常为 volc.service_type.10029 (针对1.0) 或者 seed-tts-2.0
+const DOUBAO_RESOURCE_ID = "seed-tts-2.0";
+// ==========================================
+
+const router = useRouter();
+const textInput = ref("");
+const selectedVoice = ref("1");
+const activeCategory = ref("all");
+const isGenerating = ref(false);
+
+// 真实音频播放相关状态
+const audioUrl = ref(null);
+const isPlaying = ref(false);
+const progress = ref(0);
+const currentTime = ref("00:00");
+const durationTime = ref("00:00");
+let audioInstance = null;
+
+// 模拟正在播放的试听音频ID
+const playingDemoId = ref(null);
+let demoAudioInstance = null; // 试听专用音频实例
+
+const categories = [
+  { id: "all", name: "全部音色" },
+  { id: "female", name: "女声" },
+  { id: "male", name: "男声" },
+];
+
+// 音色列表（来源：豆包 TTS 音色库）
+const voices = ref([
+  // ===== 英语音色 =====
+  {
+    id: "1",
+    name: "Dacey (美音)",
+    category: "female",
+    tags: ["女声", "美音", "清晰"],
+    avatar: "👩🏼",
+    voice_type: "en_female_dacey_uranus_bigtts",
+    demo_text:
+      "Hello! Welcome to our English pronunciation practice. I hope you enjoy learning with me.",
+  },
+  {
+    id: "2",
+    name: "Tim (美音)",
+    category: "male",
+    tags: ["男声", "美音", "磁性"],
+    avatar: "👨🏼",
+    voice_type: "en_male_tim_uranus_bigtts",
+    demo_text:
+      "Good morning! Today is a beautiful day to learn English. Let us practice together.",
+  },
+  {
+    id: "3",
+    name: "Stokie (美音)",
+    category: "female",
+    tags: ["女声", "美音", "活泼"],
+    avatar: "👩🏻",
+    voice_type: "en_female_stokie_uranus_bigtts",
+    demo_text:
+      "Hi there! I am so excited to help you improve your English pronunciation today!",
+  },
+  {
+    id: "4",
+    name: "Tina 老师 (英音)",
+    category: "female",
+    tags: ["女声", "英音", "专业"],
+    avatar: "👩‍🏫",
+    voice_type: "zh_female_yingyujiaoxue_uranus_bigtts",
+    demo_text:
+      "Welcome to English class. I will help you master British English pronunciation step by step.",
+  },
+
+  // ===== 中文女声 =====
+  {
+    id: "5",
+    name: "Vivi 2.0",
+    category: "female",
+    tags: ["女声", "多语种", "情感"],
+    avatar: "👩🏻",
+    voice_type: "zh_female_vv_uranus_bigtts",
+    demo_text: "你好，很高兴认识你。今天天气真好，让我们一起愉快地交流吧。",
+  },
+  {
+    id: "6",
+    name: "小何 2.0",
+    category: "female",
+    tags: ["女声", "温柔", "情感"],
+    avatar: "👩🏻",
+    voice_type: "zh_female_xiaohe_uranus_bigtts",
+    demo_text: "大家好，我是小何。希望能用我的声音温暖你的每一天。",
+  },
+  {
+    id: "7",
+    name: "清新女声 2.0",
+    category: "female",
+    tags: ["女声", "清新", "自然"],
+    avatar: "🌸",
+    voice_type: "zh_female_qingxinnvsheng_uranus_bigtts",
+    demo_text: "清晨的阳光洒在窗前，新的一天开始了，愿你心情愉快。",
+  },
+  {
+    id: "8",
+    name: "甜美小源 2.0",
+    category: "female",
+    tags: ["女声", "甜美", "可爱"],
+    avatar: "🍬",
+    voice_type: "zh_female_tianmeixiaoyuan_uranus_bigtts",
+    demo_text: "嗨，我是小源，很高兴能和你聊天，今天有什么有趣的事吗？",
+  },
+  {
+    id: "9",
+    name: "甜美桃子 2.0",
+    category: "female",
+    tags: ["女声", "甜美", "活泼"],
+    avatar: "🍑",
+    voice_type: "zh_female_tianmeitaozi_uranus_bigtts",
+    demo_text: "大家好呀，我是桃子，希望能给你带来快乐和甜蜜。",
+  },
+  {
+    id: "10",
+    name: "爽快思思 2.0",
+    category: "female",
+    tags: ["女声", "爽朗", "干练"],
+    avatar: "💪",
+    voice_type: "zh_female_shuangkuaisisi_uranus_bigtts",
+    demo_text: "没问题，交给我吧！我一定会把事情办得漂漂亮亮的。",
+  },
+  {
+    id: "11",
+    name: "邻家女孩 2.0",
+    category: "female",
+    tags: ["女声", "亲切", "邻家"],
+    avatar: "👧",
+    voice_type: "zh_female_linjianvhai_uranus_bigtts",
+    demo_text: "嗨，好久不见啦！最近过得怎么样呀？",
+  },
+  {
+    id: "12",
+    name: "魅力女友 2.0",
+    category: "female",
+    tags: ["女声", "魅力", "温柔"],
+    avatar: "💕",
+    voice_type: "zh_female_meilinvyou_uranus_bigtts",
+    demo_text: "亲爱的，今天想我了吗？我会一直陪在你身边的。",
+  },
+  {
+    id: "13",
+    name: "流畅女声 2.0",
+    category: "female",
+    tags: ["女声", "流畅", "专业"],
+    avatar: "🎙️",
+    voice_type: "zh_female_liuchangnv_uranus_bigtts",
+    demo_text: "欢迎收听本期节目，今天我们要聊的话题非常精彩，一起来听听吧。",
+  },
+  {
+    id: "14",
+    name: "鸡汤女 2.0",
+    category: "female",
+    tags: ["女声", "励志", "温暖"],
+    avatar: "📖",
+    voice_type: "zh_female_jitangnv_uranus_bigtts",
+    demo_text: "每一天都是新的开始，相信自己，你一定可以创造奇迹。",
+  },
+  {
+    id: "15",
+    name: "黑猫咪仔 2.0",
+    category: "female",
+    tags: ["女声", "故事", "神秘"],
+    avatar: "🐱",
+    voice_type: "zh_female_mizai_uranus_bigtts",
+    demo_text: "喵～侦探社的故事又要开始了，这次会有什么神秘案件呢？",
+  },
+
+  // ===== 中文男声 =====
+  {
+    id: "16",
+    name: "云舟 2.0",
+    category: "male",
+    tags: ["男声", "沉稳", "大气"],
+    avatar: "👨🏻",
+    voice_type: "zh_male_m191_uranus_bigtts",
+    demo_text: "大家好，欢迎来到这里。希望今天的内容能对你有所帮助。",
+  },
+  {
+    id: "17",
+    name: "小天 2.0",
+    category: "male",
+    tags: ["男声", "阳光", "活力"],
+    avatar: "🌞",
+    voice_type: "zh_male_taocheng_uranus_bigtts",
+    demo_text: "嘿，我是小天！今天又是元气满满的一天，一起加油吧！",
+  },
+  {
+    id: "18",
+    name: "刘飞 2.0",
+    category: "male",
+    tags: ["男声", "磁性", "成熟"],
+    avatar: "🎤",
+    voice_type: "zh_male_liufei_uranus_bigtts",
+    demo_text: "很高兴能在这里与你相遇，希望我的声音能给你带来好心情。",
+  },
+  {
+    id: "19",
+    name: "魅力苏菲 2.0",
+    category: "male",
+    tags: ["男声", "魅力", "低沉"],
+    avatar: "🎭",
+    voice_type: "zh_male_sophie_uranus_bigtts",
+    demo_text: "夜深了，让我为你讲一个故事，愿你有个好梦。",
+  },
+  {
+    id: "20",
+    name: "少年梓辛 2.0",
+    category: "male",
+    tags: ["男声", "少年", "青春"],
+    avatar: "👦",
+    voice_type: "zh_male_shaonianzixin_uranus_bigtts",
+    demo_text: "大家好，我是梓辛，很高兴认识你们，以后请多多关照！",
+  },
+  {
+    id: "21",
+    name: "猴哥 2.0",
+    category: "male",
+    tags: ["男声", "角色", "特色"],
+    avatar: "🐵",
+    voice_type: "zh_male_sunwukong_uranus_bigtts",
+    demo_text: "嘿嘿，俺老孙来也！有什么能帮到你的，尽管说！",
+  },
+  {
+    id: "22",
+    name: "大壹 2.0",
+    category: "male",
+    tags: ["男声", "配音", "专业"],
+    avatar: "🎬",
+    voice_type: "zh_male_dayi_uranus_bigtts",
+    demo_text: "欢迎观看本期视频，今天我们来讲一个有趣的话题。",
+  },
+  {
+    id: "23",
+    name: "儒雅逸辰 2.0",
+    category: "male",
+    tags: ["男声", "儒雅", "书卷"],
+    avatar: "📚",
+    voice_type: "zh_male_ruyayichen_uranus_bigtts",
+    demo_text: "古人云，学而时习之，不亦说乎。让我们一起探索知识的海洋。",
+  },
+
+  // ===== 角色扮演 =====
+  {
+    id: "24",
+    name: "知性灿灿 2.0",
+    category: "female",
+    tags: ["女声", "知性", "优雅"],
+    avatar: "👩‍💼",
+    voice_type: "zh_female_cancan_uranus_bigtts",
+    demo_text: "你好，很高兴为你服务。有什么问题都可以来问我哦。",
+  },
+  {
+    id: "25",
+    name: "撒娇学妹 2.0",
+    category: "female",
+    tags: ["女声", "撒娇", "可爱"],
+    avatar: "🎀",
+    voice_type: "zh_female_sajiaoxuemei_uranus_bigtts",
+    demo_text: "学长～人家今天好想你呀，你有没有想人家嘛～",
+  },
+  {
+    id: "26",
+    name: "可爱女生",
+    category: "female",
+    tags: ["女声", "可爱", "萌系"],
+    avatar: "💖",
+    voice_type: "saturn_zh_female_keainvsheng_tob",
+    demo_text: "哇，你好呀！今天的你看起来好棒哦，要继续保持呢！",
+  },
+  {
+    id: "27",
+    name: "调皮公主",
+    category: "female",
+    tags: ["女声", "调皮", "俏皮"],
+    avatar: "👸",
+    voice_type: "saturn_zh_female_tiaopigongzhu_tob",
+    demo_text: "哼，本公主今天心情好，就陪你聊聊天吧～",
+  },
+  {
+    id: "28",
+    name: "爽朗少年",
+    category: "male",
+    tags: ["男声", "爽朗", "少年"],
+    avatar: "😄",
+    voice_type: "saturn_zh_male_shuanglangshaonian_tob",
+    demo_text: "嘿，哥们儿！今天打球去不？保证让你玩得痛快！",
+  },
+  {
+    id: "29",
+    name: "天才同桌",
+    category: "male",
+    tags: ["男声", "学霸", "少年"],
+    avatar: "🤓",
+    voice_type: "saturn_zh_male_tiancaitongzhuo_tob",
+    demo_text: "这道题很简单啊，你看，只要这样算就能得出答案了。",
+  },
+  {
+    id: "30",
+    name: "知性灿灿",
+    category: "female",
+    tags: ["女声", "知性", "温柔"],
+    avatar: "💼",
+    voice_type: "saturn_zh_female_cancan_tob",
+    demo_text: "让我们一起分析这个问题吧，相信很快就能找到解决办法。",
+  },
+
+  // ===== 儿童音 =====
+  {
+    id: "31",
+    name: "儿童绘本 2.0",
+    category: "female",
+    tags: ["女声", "儿童", "故事"],
+    avatar: "📚",
+    voice_type: "zh_female_xiaoxue_uranus_bigtts",
+    demo_text: "小朋友们好呀，今天要给你们讲一个好听的故事，准备好了吗？",
+  },
+  {
+    id: "32",
+    name: "佩奇猪 2.0",
+    category: "female",
+    tags: ["女声", "儿童", "角色"],
+    avatar: "🐷",
+    voice_type: "zh_female_peiqi_uranus_bigtts",
+    demo_text: "大家好，我是佩奇，今天我要和弟弟乔治一起去公园玩啦！",
+  },
+
+  // ===== 客服音 =====
+  {
+    id: "33",
+    name: "暖阳女声 2.0",
+    category: "female",
+    tags: ["女声", "客服", "温暖"],
+    avatar: "☀️",
+    voice_type: "zh_female_kefunvsheng_uranus_bigtts",
+    demo_text: "您好，很高兴为您服务，请问有什么可以帮助您的吗？",
+  },
+  {
+    id: "34",
+    name: "轻盈朵朵 2.0",
+    category: "female",
+    tags: ["女声", "客服", "轻盈"],
+    avatar: "🌼",
+    voice_type: "saturn_zh_female_qingyingduoduo_cs_tob",
+    demo_text: "您好，欢迎咨询，我会尽力为您解答所有问题的。",
+  },
+  {
+    id: "35",
+    name: "温婉珊珊 2.0",
+    category: "female",
+    tags: ["女声", "客服", "温婉"],
+    avatar: "🌷",
+    voice_type: "saturn_zh_female_wenwanshanshan_cs_tob",
+    demo_text: "感谢您的来电，请问有什么需要帮助的地方呢？",
+  },
+  {
+    id: "36",
+    name: "热情艾娜 2.0",
+    category: "female",
+    tags: ["女声", "客服", "热情"],
+    avatar: "🔥",
+    voice_type: "saturn_zh_female_reqingaina_cs_tob",
+    demo_text: "您好您好！非常高兴为您服务，有什么问题尽管问我哦！",
+  },
+]);
+
+const filteredVoices = computed(() => {
+  if (activeCategory.value === "all") return voices.value;
+  return voices.value.filter((v) => v.category === activeCategory.value);
+});
+
+const handleDemoPlay = async (id) => {
+  // 如果正在播放同一个，则停止
+  if (playingDemoId.value === id) {
+    if (demoAudioInstance) {
+      demoAudioInstance.pause();
+      demoAudioInstance = null;
+    }
+    playingDemoId.value = null;
+    return;
+  }
+
+  // 停止之前的试听
+  if (demoAudioInstance) {
+    demoAudioInstance.pause();
+    demoAudioInstance = null;
+  }
+
+  // 标记开始播放
+  playingDemoId.value = id;
+
+  const voice = voices.value.find((v) => v.id === id);
+  if (!voice || !voice.demo_text) {
+    playingDemoId.value = null;
+    return;
+  }
+
+  try {
+    // 调用 TTS API 生成试听音频
+    const payload = {
+      user: { uid: "demo_" + Date.now() },
+      req_params: {
+        text: voice.demo_text,
+        speaker: voice.voice_type,
+        audio_params: { format: "mp3", sample_rate: 24000 },
+      },
+    };
+
+    const response = await fetch("/tts-api/api/v3/tts/unidirectional", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Api-App-Id": DOUBAO_APP_ID,
+        "X-Api-Access-Key": DOUBAO_ACCESS_TOKEN,
+        "X-Api-Resource-Id": DOUBAO_RESOURCE_ID,
+        "X-Api-Request-Id": crypto.randomUUID(),
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+
+    // 读取流式响应
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    let audioChunks = [];
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+
+      const lines = buffer.split("\n");
+      buffer = lines.pop();
+
+      for (const line of lines) {
+        if (!line.trim()) continue;
+        try {
+          const resData = JSON.parse(line);
+          if (resData.code === 0 && resData.data) {
+            const binaryString = window.atob(resData.data);
+            const bytes = new Uint8Array(binaryString.length);
+            for (let i = 0; i < binaryString.length; i++) {
+              bytes[i] = binaryString.charCodeAt(i);
+            }
+            audioChunks.push(bytes);
+          }
+        } catch (e) {}
+      }
+    }
+
+    // 处理剩余缓冲区
+    if (buffer.trim()) {
+      try {
+        const resData = JSON.parse(buffer);
+        if (resData.code === 0 && resData.data) {
+          const binaryString = window.atob(resData.data);
+          const bytes = new Uint8Array(binaryString.length);
+          for (let i = 0; i < binaryString.length; i++) {
+            bytes[i] = binaryString.charCodeAt(i);
+          }
+          audioChunks.push(bytes);
+        }
+      } catch (e) {}
+    }
+
+    // 播放音频
+    if (audioChunks.length > 0) {
+      const totalLength = audioChunks.reduce((acc, val) => acc + val.length, 0);
+      const allBytes = new Uint8Array(totalLength);
+      let offset = 0;
+      for (const chunk of audioChunks) {
+        allBytes.set(chunk, offset);
+        offset += chunk.length;
+      }
+
+      const blob = new Blob([allBytes], { type: "audio/mp3" });
+      const url = URL.createObjectURL(blob);
+
+      demoAudioInstance = new Audio(url);
+      demoAudioInstance.onended = () => {
+        playingDemoId.value = null;
+        URL.revokeObjectURL(url);
+      };
+      demoAudioInstance.onerror = () => {
+        playingDemoId.value = null;
+      };
+      demoAudioInstance.play();
+    } else {
+      playingDemoId.value = null;
+    }
+  } catch (error) {
+    console.error("Demo play error:", error);
+    playingDemoId.value = null;
+  }
+};
+
+// 格式化时间显示
+const formatTime = (seconds) => {
+  if (!seconds || isNaN(seconds)) return "00:00";
+  const m = Math.floor(seconds / 60)
+    .toString()
+    .padStart(2, "0");
+  const s = Math.floor(seconds % 60)
+    .toString()
+    .padStart(2, "0");
+  return `${m}:${s}`;
+};
+
+// 初始化真实的音频播放器
+const initAudio = (src) => {
+  if (audioInstance) {
+    audioInstance.pause();
+  }
+  audioInstance = new Audio(src);
+
+  audioInstance.addEventListener("timeupdate", () => {
+    const curr = audioInstance.currentTime;
+    const dur = audioInstance.duration || 0;
+    if (dur > 0) {
+      progress.value = (curr / dur) * 100;
+    }
+    currentTime.value = formatTime(curr);
+  });
+
+  audioInstance.addEventListener("loadedmetadata", () => {
+    durationTime.value = formatTime(audioInstance.duration);
+  });
+
+  audioInstance.addEventListener("ended", () => {
+    isPlaying.value = false;
+    progress.value = 0;
+    currentTime.value = "00:00";
+  });
+};
+
+// 播放/暂停控制
+const togglePlay = () => {
+  if (!audioInstance) return;
+  if (isPlaying.value) {
+    audioInstance.pause();
+  } else {
+    audioInstance.play();
+  }
+  isPlaying.value = !isPlaying.value;
+};
+
+// 真正的豆包 API 调用逻辑 (升级为V3 HTTP Chunked协议)
+const handleGenerate = async () => {
+  if (!textInput.value.trim()) return;
+
+  // 校验参数是否填写
+  if (
+    DOUBAO_APP_ID === "YOUR_APP_ID" ||
+    DOUBAO_ACCESS_TOKEN === "YOUR_ACCESS_TOKEN"
+  ) {
+    alert(
+      "请先在代码顶部配置 DOUBAO_APP_ID 和 DOUBAO_ACCESS_TOKEN 才能调用真实的 AI 发音！"
+    );
+    return;
+  }
+
+  isGenerating.value = true;
+  audioUrl.value = null;
+  if (audioInstance) {
+    audioInstance.pause();
+    isPlaying.value = false;
+  }
+
+  try {
+    const selectedVoiceData = voices.value.find(
+      (v) => v.id === selectedVoice.value
+    );
+
+    // 构造 V3 API 请求体
+    const payload = {
+      user: {
+        uid: "user_" + Date.now(),
+      },
+      req_params: {
+        text: textInput.value,
+        speaker: selectedVoiceData.voice_type,
+        audio_params: {
+          format: "mp3",
+          sample_rate: 24000,
+        },
+      },
+    };
+
+    // 调用配置的代理路径避免跨域 (指向 https://openspeech.bytedance.com/api/v3/tts/unidirectional)
+    const response = await fetch("/tts-api/api/v3/tts/unidirectional", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Api-App-Id": DOUBAO_APP_ID,
+        "X-Api-Access-Key": DOUBAO_ACCESS_TOKEN,
+        "X-Api-Resource-Id": DOUBAO_RESOURCE_ID,
+        "X-Api-Request-Id": crypto.randomUUID(),
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) {
+      const err = await response.text();
+      throw new Error(`HTTP ${response.status}: ${err}`);
+    }
+
+    // 读取流式响应 (Chunked JSON)
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    let audioChunks = []; // 收集二进制数据
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+
+      // V3 的 HTTP Chunked 数据通常每段是一个独立的 JSON，可能有换行符分隔
+      // 但也可能是一次性传输，我们按照逐行或独立JSON块尝试解析
+      const lines = buffer.split("\n");
+      buffer = lines.pop(); // 最后一行可能不完整，保留到下一次
+
+      for (const line of lines) {
+        if (!line.trim()) continue;
+        try {
+          const resData = JSON.parse(line);
+
+          if (resData.code === 3001) {
+            throw new Error(
+              "API报错 3001: 权限不足。您当前使用的 AppID 未配置或未授权该音色。"
+            );
+          }
+
+          // 20000000 表示合成成功结束
+          if (resData.code === 20000000) {
+            break;
+          }
+
+          // 获取音频流
+          if (resData.code === 0 && resData.data) {
+            // 解析Base64音频块并拼接到数组
+            const binaryString = window.atob(resData.data);
+            const len = binaryString.length;
+            const bytes = new Uint8Array(len);
+            for (let i = 0; i < len; i++) {
+              bytes[i] = binaryString.charCodeAt(i);
+            }
+            audioChunks.push(bytes);
+          } else if (resData.code > 0) {
+            throw new Error(
+              `[${resData.code}] ${resData.message || "未知错误"}`
+            );
+          }
+        } catch (e) {
+          // 如果是我们的抛出的特定业务错误，直接往外层抛出
+          if (e.message.startsWith("API报错") || e.message.startsWith("["))
+            throw e;
+          // 否则可能是由于被不小心截断的 JSON（虽然按行分割大概率安全，但若无换行则忽略继续收集）
+        }
+      }
+    }
+
+    // 检查缓冲区中剩余内容
+    if (buffer.trim()) {
+      try {
+        const resData = JSON.parse(buffer);
+        if (resData.code === 3001)
+          throw new Error(
+            "API报错 3001: 权限不足。您当前使用的 AppID 未配置或未授权该音色。"
+          );
+        if (resData.code === 0 && resData.data) {
+          const binaryString = window.atob(resData.data);
+          const len = binaryString.length;
+          const bytes = new Uint8Array(len);
+          for (let i = 0; i < len; i++) {
+            bytes[i] = binaryString.charCodeAt(i);
+          }
+          audioChunks.push(bytes);
+        } else if (resData.code > 0 && resData.code !== 20000000) {
+          throw new Error(`[${resData.code}] ${resData.message || "未知错误"}`);
+        }
+      } catch (e) {
+        if (e.message.startsWith("API报错") || e.message.startsWith("["))
+          throw e;
+      }
+    }
+
+    // 合并完整的音频数据为可播放格式
+    if (audioChunks.length > 0) {
+      const totalLength = audioChunks.reduce((acc, val) => acc + val.length, 0);
+      const allBytes = new Uint8Array(totalLength);
+      let offset = 0;
+      for (const chunk of audioChunks) {
+        allBytes.set(chunk, offset);
+        offset += chunk.length;
+      }
+
+      // 转换为 Blob URL 交给播放器
+      const blob = new Blob([allBytes], { type: "audio/mp3" });
+      audioUrl.value = URL.createObjectURL(blob);
+      initAudio(audioUrl.value);
+
+      // 自动开始播放
+      setTimeout(() => {
+        togglePlay();
+      }, 100);
+    } else {
+      alert(
+        "未收到任何音频数据，请检查所选音色(Resource ID)是否已在后台开通！"
+      );
+    }
+  } catch (error) {
+    console.error("TTS API Error:", error);
+    if (error.message.includes("3001")) {
+      alert(
+        `权限不足！\n原因: 您的 AppID 没有开通当前音色或Resource ID的使用权限。\n解决办法: 请登录火山引擎控制台->语音技术->应用管理，确认已添加该音色。`
+      );
+    } else {
+      alert(`请求豆包 API 失败:\n${error.message}`);
+    }
+  } finally {
+    isGenerating.value = false;
+  }
+};
+
+const handleDownload = () => {
+  if (!audioUrl.value) return;
+  const a = document.createElement("a");
+  a.href = audioUrl.value;
+  a.download = "AI_Pronunciation.mp3";
+  a.click();
+};
+
+onUnmounted(() => {
+  if (audioInstance) {
+    audioInstance.pause();
+    audioInstance = null;
+  }
+  if (demoAudioInstance) {
+    demoAudioInstance.pause();
+    demoAudioInstance = null;
+  }
+});
+</script>
+
+<template>
+  <div class="page-container">
+    <nav class="nav-bar">
+      <button @click="router.push('/')" class="back-btn">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+          />
+        </svg>
+        返回首页
+      </button>
+      <div class="nav-title">AI 英语发音</div>
+    </nav>
+
+    <div class="content-grid">
+      <!-- 左侧：输入区域 -->
+      <div class="panel input-panel">
+        <div class="panel-header">
+          <h3>输入待发音内容</h3>
+          <span class="char-count">{{ textInput.length }} / 500</span>
+        </div>
+
+        <textarea
+          v-model="textInput"
+          class="text-area"
+          placeholder="请输入需要朗读的英语单词或长难句..."
+          maxlength="500"
+        ></textarea>
+
+        <div class="action-area">
+          <button
+            class="primary-btn"
+            :disabled="!textInput.trim() || isGenerating"
+            @click="handleGenerate"
+          >
+            <svg
+              v-if="!isGenerating"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"
+              />
+            </svg>
+            <svg
+              v-else
+              class="spinner"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
+            </svg>
+            {{ isGenerating ? "AI 合成中..." : "开始合成发音" }}
+          </button>
+        </div>
+
+        <!-- 生成结果展示区域 -->
+        <div v-if="audioUrl" class="result-area">
+          <div class="result-header">
+            <h4>合成结果</h4>
+            <button class="download-btn" @click="handleDownload">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
+                />
+              </svg>
+              保存音频
+            </button>
+          </div>
+          <div class="audio-player-mock">
+            <div class="play-control" @click="togglePlay">
+              <!-- Pause Icon -->
+              <svg
+                v-if="isPlaying"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15.75 5.25v13.5m-7.5-13.5v13.5"
+                />
+              </svg>
+              <!-- Play Icon -->
+              <svg
+                v-else
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"
+                />
+              </svg>
+            </div>
+            <div class="progress-bar">
+              <div
+                class="progress-fill"
+                :style="{ width: progress + '%' }"
+              ></div>
+            </div>
+            <span class="time">{{ currentTime }} / {{ durationTime }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧：发音人选择区域 -->
+      <div class="panel voice-panel">
+        <div class="panel-header">
+          <h3>选择 AI 发音人</h3>
+        </div>
+
+        <div class="category-tabs">
+          <button
+            v-for="cat in categories"
+            :key="cat.id"
+            class="tab-btn"
+            :class="{ active: activeCategory === cat.id }"
+            @click="activeCategory = cat.id"
+          >
+            {{ cat.name }}
+          </button>
+        </div>
+
+        <div class="voices-list">
+          <div
+            v-for="voice in filteredVoices"
+            :key="voice.id"
+            class="voice-card"
+            :class="{ selected: selectedVoice === voice.id }"
+            @click="selectedVoice = voice.id"
+          >
+            <div class="voice-avatar">{{ voice.avatar }}</div>
+            <div class="voice-info">
+              <div class="voice-name">{{ voice.name }}</div>
+              <div class="voice-tags">
+                <span v-for="tag in voice.tags" :key="tag" class="tag">{{
+                  tag
+                }}</span>
+              </div>
+            </div>
+
+            <button
+              class="demo-btn"
+              :class="{ playing: playingDemoId === voice.id }"
+              @click.stop="handleDemoPlay(voice.id)"
+              title="试听音色"
+            >
+              <svg
+                v-if="playingDemoId !== voice.id"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"
+                />
+              </svg>
+              <div v-else class="playing-bars">
+                <span></span><span></span><span></span>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+* {
+  box-sizing: border-box;
+}
+.page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-bar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.back-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.back-btn:hover {
+  background: var(--card-bg);
+  color: var(--text-primary);
+}
+
+.back-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.nav-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-left: auto;
+  margin-right: auto;
+  transform: translateX(-40px); /* offset the back button width */
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: 1fr 400px;
+  gap: 2rem;
+  flex: 1;
+  min-height: 0;
+}
+
+.panel {
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: 20px;
+  backdrop-filter: blur(12px);
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.panel-header h3 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.char-count {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+/* Input Area */
+.text-area {
+  flex: 1;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--card-border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 1.1rem;
+  line-height: 1.6;
+  resize: none;
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.3s;
+  min-height: 200px;
+}
+
+.text-area:focus {
+  border-color: var(--accent-1);
+}
+
+.action-area {
+  margin-top: 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.primary-btn {
+  background: linear-gradient(135deg, var(--accent-1), #4f46e5);
+  color: white;
+  border: none;
+  padding: 1rem 2rem;
+  border-radius: 12px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: all 0.3s;
+  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
+}
+
+.primary-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
+}
+
+.primary-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.primary-btn svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* Spinner */
+.spinner {
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.opacity-25 {
+  opacity: 0.25;
+}
+.opacity-75 {
+  opacity: 0.75;
+}
+
+/* Voice Selection */
+.category-tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  overflow-x: auto;
+  padding-bottom: 0.5rem;
+}
+
+.tab-btn {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid transparent;
+  color: var(--text-secondary);
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+
+.tab-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.tab-btn.active {
+  background: var(--accent-bg, rgba(99, 102, 241, 0.15));
+  color: var(--accent-1);
+  border-color: rgba(99, 102, 241, 0.3);
+}
+
+.voices-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+  padding-right: 0.5rem;
+}
+
+.voices-list::-webkit-scrollbar {
+  width: 6px;
+}
+.voices-list::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+}
+
+.voice-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--card-border);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.voice-card:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.voice-card.selected {
+  border-color: var(--accent-1);
+  background: linear-gradient(
+    to right,
+    rgba(99, 102, 241, 0.1),
+    rgba(0, 0, 0, 0.2)
+  );
+}
+
+.voice-avatar {
+  font-size: 2rem;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 50%;
+}
+
+.voice-info {
+  flex: 1;
+}
+
+.voice-name {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.voice-tags {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.tag {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  background: rgba(255, 255, 255, 0.05);
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+}
+
+.demo-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.demo-btn:hover {
+  background: var(--accent-1);
+  transform: scale(1.1);
+}
+
+.demo-btn.playing {
+  background: var(--accent-1);
+}
+
+.demo-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* Playing Animation */
+.playing-bars {
+  display: flex;
+  gap: 2px;
+  height: 14px;
+  align-items: flex-end;
+}
+.playing-bars span {
+  width: 3px;
+  background: white;
+  border-radius: 2px;
+  animation: bounce 0.5s infinite alternate;
+}
+.playing-bars span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.playing-bars span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes bounce {
+  from {
+    height: 4px;
+  }
+  to {
+    height: 14px;
+  }
+}
+
+/* Result Area */
+.result-area {
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--card-border);
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.result-header h4 {
+  margin: 0;
+  color: var(--accent-4);
+}
+
+.download-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: rgba(20, 184, 166, 0.1);
+  color: #2dd4bf;
+  border: 1px solid rgba(20, 184, 166, 0.3);
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+}
+
+.download-btn:hover {
+  background: rgba(20, 184, 166, 0.2);
+}
+
+.download-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.audio-player-mock {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background: rgba(0, 0, 0, 0.2);
+  padding: 1rem;
+  border-radius: 12px;
+}
+
+.play-control {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--accent-4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.play-control svg {
+  width: 20px;
+  height: 20px;
+}
+
+.progress-bar {
+  flex: 1;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  width: 0%;
+  height: 100%;
+  background: var(--accent-4);
+}
+
+.time {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+@media (max-width: 900px) {
+  .content-grid {
+    grid-template-columns: 1fr;
+  }
+  .page-container {
+    height: auto;
+  }
+}
+</style>
diff --git a/vite.config.js b/vite.config.js
index bbcf80c..7a74ca0 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,4 +4,13 @@ import vue from '@vitejs/plugin-vue'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  server: {
+    proxy: {
+      '/tts-api': {
+        target: 'https://openspeech.bytedance.com',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/tts-api/, '')
+      }
+    }
+  }
 })