diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 410c93b..69bfbed 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -8,7 +8,7 @@ repos:
       - id: check-added-large-files
 
   - repo: https://github.com/psf/black
-    rev: 25.12.0
+    rev: 26.1.0
     hooks:
       - id: black
         files: ^api/
@@ -21,9 +21,18 @@ repos:
 
   - repo: local
     hooks:
-      - id: web-format
-        name: web-format
+      - id: prettier-format
+        name: prettier-format
         entry: npm run format --prefix web
         language: system
         files: ^web/
         pass_filenames: false
+
+  - repo: local
+    hooks:
+      - id: eslint
+        name: eslint
+        entry: npm run lint --prefix web
+        language: system
+        files: ^web/
+        pass_filenames: false
diff --git a/README.md b/README.md
index ab2eb6f..465532f 100644
--- a/README.md
+++ b/README.md
@@ -77,6 +77,16 @@ docker compose -f docker-compose.dev.yml up --build
 
 API 文档：http://localhost:8000/docs
 
+## 代码提交
+
+使用 [pre-commit](https://pre-commit.com/) 格式化
+
+```shell
+pip install pre-commit
+
+pre-commit run --all-files
+```
+
 ## 📚 数据库迁移
 
 ```bash
@@ -92,23 +102,13 @@ alembic upgrade head
 alembic downgrade -1
 ```
 
-## 🤝 贡献
-
-欢迎贡献！请遵循以下步骤：
-
-1. Fork 本仓库
-2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
-3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
-4. 推送到分支 (`git push origin feature/AmazingFeature`)
-5. 开启 Pull Request
-
 ## 📄 许可证
 
 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情
 
 ## 📧 联系方式
 
-如有问题或建议，请提交 Issue 或 Pull Request。
+如有问题或建议，请提交 Issue 。
 
 ---
 
diff --git a/api/alembic/versions/54ffc5a9b833_add_system_admin_table_and_remove_user_.py b/api/alembic/versions/54ffc5a9b833_add_system_admin_table_and_remove_user_.py
index 007ff06..4a1c0a3 100644
--- a/api/alembic/versions/54ffc5a9b833_add_system_admin_table_and_remove_user_.py
+++ b/api/alembic/versions/54ffc5a9b833_add_system_admin_table_and_remove_user_.py
@@ -82,22 +82,18 @@ def downgrade() -> None:
         batch_op.add_column(sa.Column("role", sa.String(), nullable=True))
 
     # 将 system_admins 表中的用户恢复到 users.role
-    op.execute(
-        """
+    op.execute("""
         UPDATE users
         SET role = 'admin'
         WHERE id IN (SELECT user_id FROM system_admins)
-    """
-    )
+    """)
 
     # 设置其他用户为 'user'
-    op.execute(
-        """
+    op.execute("""
         UPDATE users
         SET role = 'user'
         WHERE role IS NULL
-    """
-    )
+    """)
 
     # 删除 system_admins 表
     op.drop_index(op.f("ix_system_admins_id"), table_name="system_admins")
diff --git a/api/pyproject.toml b/api/pyproject.toml
index 2894dd1..c82f703 100644
--- a/api/pyproject.toml
+++ b/api/pyproject.toml
@@ -17,6 +17,7 @@ dependencies = [
     "boto3>=1.35.0",
     "alembic>=1.17.2",
     "shortuuid>=1.0.13",
+    "pre-commit>=4.5.1",
 ]
 
 [tool.black]
diff --git a/api/uv.lock b/api/uv.lock
index 98a5786..eaa5e53 100644
--- a/api/uv.lock
+++ b/api/uv.lock
@@ -59,6 +59,7 @@ dependencies = [
     { name = "asyncpg" },
     { name = "boto3" },
     { name = "fastapi" },
+    { name = "pre-commit" },
     { name = "pwdlib", extra = ["argon2"] },
     { name = "pydantic" },
     { name = "python-dotenv" },
@@ -75,6 +76,7 @@ requires-dist = [
     { name = "asyncpg", specifier = ">=0.31.0" },
     { name = "boto3", specifier = ">=1.35.0" },
     { name = "fastapi", specifier = ">=0.123.4" },
+    { name = "pre-commit", specifier = ">=4.5.1" },
     { name = "pwdlib", extras = ["argon2"], specifier = ">=0.3.0" },
     { name = "pydantic", specifier = ">=2.12.5" },
     { name = "python-dotenv", specifier = ">=1.0.0" },
@@ -233,6 +235,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/ae/3a/dbeec9d1ee0844c679f6bb5d6ad4e9f198b1224f4e7a32825f47f6192b0c/cffi-2.0.0-cp314-cp314t-win_arm64.whl", hash = "sha256:0a1527a803f0a659de1af2e1fd700213caba79377e27e4693648c2923da066f9", size = 184195, upload-time = "2025-09-08T23:23:43.004Z" },
 ]
 
+[[package]]
+name = "cfgv"
+version = "3.5.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/4e/b5/721b8799b04bf9afe054a3899c6cf4e880fcf8563cc71c15610242490a0c/cfgv-3.5.0.tar.gz", hash = "sha256:d5b1034354820651caa73ede66a6294d6e95c1b00acc5e9b098e917404669132", size = 7334, upload-time = "2025-11-19T20:55:51.612Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/db/3c/33bac158f8ab7f89b2e59426d5fe2e4f63f7ed25df84c036890172b412b5/cfgv-3.5.0-py2.py3-none-any.whl", hash = "sha256:a8dc6b26ad22ff227d2634a65cb388215ce6cc96bbcc5cfde7641ae87e8dacc0", size = 7445, upload-time = "2025-11-19T20:55:50.744Z" },
+]
+
 [[package]]
 name = "click"
 version = "8.3.1"
@@ -310,6 +321,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/e8/cb/2da4cc83f5edb9c3257d09e1e7ab7b23f049c7962cae8d842bbef0a9cec9/cryptography-46.0.3-cp38-abi3-win_arm64.whl", hash = "sha256:d89c3468de4cdc4f08a57e214384d0471911a3830fcdaf7a8cc587e42a866372", size = 2918740, upload-time = "2025-10-15T23:18:12.277Z" },
 ]
 
+[[package]]
+name = "distlib"
+version = "0.4.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/96/8e/709914eb2b5749865801041647dc7f4e6d00b549cfe88b65ca192995f07c/distlib-0.4.0.tar.gz", hash = "sha256:feec40075be03a04501a973d81f633735b4b69f98b05450592310c0f401a4e0d", size = 614605, upload-time = "2025-07-17T16:52:00.465Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/33/6b/e0547afaf41bf2c42e52430072fa5658766e3d65bd4b03a563d1b6336f57/distlib-0.4.0-py2.py3-none-any.whl", hash = "sha256:9659f7d87e46584a30b5780e43ac7a2143098441670ff0a49d5f9034c54a6c16", size = 469047, upload-time = "2025-07-17T16:51:58.613Z" },
+]
+
 [[package]]
 name = "ecdsa"
 version = "0.19.1"
@@ -337,6 +357,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/bc/e9/1c266c3c6aeaab86b5f7b2d7bd3e3789ddc6780c0a4236d24d92814628f1/fastapi-0.123.4-py3-none-any.whl", hash = "sha256:fc2b5cbc10fa05f4f22d87ef7ebc8993b5110ffd9850c08e1fc35a0da37f492e", size = 111270, upload-time = "2025-12-02T10:48:19.707Z" },
 ]
 
+[[package]]
+name = "filelock"
+version = "3.20.3"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/1d/65/ce7f1b70157833bf3cb851b556a37d4547ceafc158aa9b34b36782f23696/filelock-3.20.3.tar.gz", hash = "sha256:18c57ee915c7ec61cff0ecf7f0f869936c7c30191bb0cf406f1341778d0834e1", size = 19485, upload-time = "2026-01-09T17:55:05.421Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/b5/36/7fb70f04bf00bc646cd5bb45aa9eddb15e19437a28b8fb2b4a5249fac770/filelock-3.20.3-py3-none-any.whl", hash = "sha256:4b0dda527ee31078689fc205ec4f1c1bf7d56cf88b6dc9426c4f230e46c2dce1", size = 16701, upload-time = "2026-01-09T17:55:04.334Z" },
+]
+
 [[package]]
 name = "greenlet"
 version = "3.2.4"
@@ -346,6 +375,7 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/49/e8/58c7f85958bda41dafea50497cbd59738c5c43dbbea5ee83d651234398f4/greenlet-3.2.4-cp313-cp313-macosx_11_0_universal2.whl", hash = "sha256:1a921e542453fe531144e91e1feedf12e07351b1cf6c9e8a3325ea600a715a31", size = 272814, upload-time = "2025-08-07T13:15:50.011Z" },
     { url = "https://files.pythonhosted.org/packages/62/dd/b9f59862e9e257a16e4e610480cfffd29e3fae018a68c2332090b53aac3d/greenlet-3.2.4-cp313-cp313-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:cd3c8e693bff0fff6ba55f140bf390fa92c994083f838fece0f63be121334945", size = 641073, upload-time = "2025-08-07T13:42:57.23Z" },
     { url = "https://files.pythonhosted.org/packages/f7/0b/bc13f787394920b23073ca3b6c4a7a21396301ed75a655bcb47196b50e6e/greenlet-3.2.4-cp313-cp313-manylinux2014_ppc64le.manylinux_2_17_ppc64le.whl", hash = "sha256:710638eb93b1fa52823aa91bf75326f9ecdfd5e0466f00789246a5280f4ba0fc", size = 655191, upload-time = "2025-08-07T13:45:29.752Z" },
+    { url = "https://files.pythonhosted.org/packages/f2/d6/6adde57d1345a8d0f14d31e4ab9c23cfe8e2cd39c3baf7674b4b0338d266/greenlet-3.2.4-cp313-cp313-manylinux2014_s390x.manylinux_2_17_s390x.whl", hash = "sha256:c5111ccdc9c88f423426df3fd1811bfc40ed66264d35aa373420a34377efc98a", size = 649516, upload-time = "2025-08-07T13:53:16.314Z" },
     { url = "https://files.pythonhosted.org/packages/7f/3b/3a3328a788d4a473889a2d403199932be55b1b0060f4ddd96ee7cdfcad10/greenlet-3.2.4-cp313-cp313-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:d76383238584e9711e20ebe14db6c88ddcedc1829a9ad31a584389463b5aa504", size = 652169, upload-time = "2025-08-07T13:18:32.861Z" },
     { url = "https://files.pythonhosted.org/packages/ee/43/3cecdc0349359e1a527cbf2e3e28e5f8f06d3343aaf82ca13437a9aa290f/greenlet-3.2.4-cp313-cp313-manylinux_2_24_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:23768528f2911bcd7e475210822ffb5254ed10d71f4028387e5a99b4c6699671", size = 610497, upload-time = "2025-08-07T13:18:31.636Z" },
     { url = "https://files.pythonhosted.org/packages/b8/19/06b6cf5d604e2c382a6f31cafafd6f33d5dea706f4db7bdab184bad2b21d/greenlet-3.2.4-cp313-cp313-musllinux_1_1_aarch64.whl", hash = "sha256:00fadb3fedccc447f517ee0d3fd8fe49eae949e1cd0f6a611818f4f6fb7dc83b", size = 1121662, upload-time = "2025-08-07T13:42:41.117Z" },
@@ -356,6 +386,7 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/22/5c/85273fd7cc388285632b0498dbbab97596e04b154933dfe0f3e68156c68c/greenlet-3.2.4-cp314-cp314-macosx_11_0_universal2.whl", hash = "sha256:49a30d5fda2507ae77be16479bdb62a660fa51b1eb4928b524975b3bde77b3c0", size = 273586, upload-time = "2025-08-07T13:16:08.004Z" },
     { url = "https://files.pythonhosted.org/packages/d1/75/10aeeaa3da9332c2e761e4c50d4c3556c21113ee3f0afa2cf5769946f7a3/greenlet-3.2.4-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:299fd615cd8fc86267b47597123e3f43ad79c9d8a22bebdce535e53550763e2f", size = 686346, upload-time = "2025-08-07T13:42:59.944Z" },
     { url = "https://files.pythonhosted.org/packages/c0/aa/687d6b12ffb505a4447567d1f3abea23bd20e73a5bed63871178e0831b7a/greenlet-3.2.4-cp314-cp314-manylinux2014_ppc64le.manylinux_2_17_ppc64le.whl", hash = "sha256:c17b6b34111ea72fc5a4e4beec9711d2226285f0386ea83477cbb97c30a3f3a5", size = 699218, upload-time = "2025-08-07T13:45:30.969Z" },
+    { url = "https://files.pythonhosted.org/packages/dc/8b/29aae55436521f1d6f8ff4e12fb676f3400de7fcf27fccd1d4d17fd8fecd/greenlet-3.2.4-cp314-cp314-manylinux2014_s390x.manylinux_2_17_s390x.whl", hash = "sha256:b4a1870c51720687af7fa3e7cda6d08d801dae660f75a76f3845b642b4da6ee1", size = 694659, upload-time = "2025-08-07T13:53:17.759Z" },
     { url = "https://files.pythonhosted.org/packages/92/2e/ea25914b1ebfde93b6fc4ff46d6864564fba59024e928bdc7de475affc25/greenlet-3.2.4-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:061dc4cf2c34852b052a8620d40f36324554bc192be474b9e9770e8c042fd735", size = 695355, upload-time = "2025-08-07T13:18:34.517Z" },
     { url = "https://files.pythonhosted.org/packages/72/60/fc56c62046ec17f6b0d3060564562c64c862948c9d4bc8aa807cf5bd74f4/greenlet-3.2.4-cp314-cp314-manylinux_2_24_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:44358b9bf66c8576a9f57a590d5f5d6e72fa4228b763d0e43fee6d3b06d3a337", size = 657512, upload-time = "2025-08-07T13:18:33.969Z" },
     { url = "https://files.pythonhosted.org/packages/23/6e/74407aed965a4ab6ddd93a7ded3180b730d281c77b765788419484cdfeef/greenlet-3.2.4-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:2917bdf657f5859fbf3386b12d68ede4cf1f04c90c3a6bc1f013dd68a22e2269", size = 1612508, upload-time = "2025-11-04T12:42:23.427Z" },
@@ -372,6 +403,15 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/04/4b/29cac41a4d98d144bf5f6d33995617b185d14b22401f75ca86f384e87ff1/h11-0.16.0-py3-none-any.whl", hash = "sha256:63cf8bbe7522de3bf65932fda1d9c2772064ffb3dae62d55932da54b31cb6c86", size = 37515, upload-time = "2025-04-24T03:35:24.344Z" },
 ]
 
+[[package]]
+name = "identify"
+version = "2.6.16"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/5b/8d/e8b97e6bd3fb6fb271346f7981362f1e04d6a7463abd0de79e1fda17c067/identify-2.6.16.tar.gz", hash = "sha256:846857203b5511bbe94d5a352a48ef2359532bc8f6727b5544077a0dcfb24980", size = 99360, upload-time = "2026-01-12T18:58:58.201Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/b8/58/40fbbcefeda82364720eba5cf2270f98496bdfa19ea75b4cccae79c698e6/identify-2.6.16-py2.py3-none-any.whl", hash = "sha256:391ee4d77741d994189522896270b787aed8670389bfd60f326d677d64a6dfb0", size = 99202, upload-time = "2026-01-12T18:58:56.627Z" },
+]
+
 [[package]]
 name = "idna"
 version = "3.11"
@@ -454,6 +494,40 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/70/bc/6f1c2f612465f5fa89b95bead1f44dcb607670fd42891d8fdcd5d039f4f4/markupsafe-3.0.3-cp314-cp314t-win_arm64.whl", hash = "sha256:32001d6a8fc98c8cb5c947787c5d08b0a50663d139f1305bac5885d98d9b40fa", size = 14146, upload-time = "2025-09-27T18:37:28.327Z" },
 ]
 
+[[package]]
+name = "nodeenv"
+version = "1.10.0"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/24/bf/d1bda4f6168e0b2e9e5958945e01910052158313224ada5ce1fb2e1113b8/nodeenv-1.10.0.tar.gz", hash = "sha256:996c191ad80897d076bdfba80a41994c2b47c68e224c542b48feba42ba00f8bb", size = 55611, upload-time = "2025-12-20T14:08:54.006Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/88/b2/d0896bdcdc8d28a7fc5717c305f1a861c26e18c05047949fb371034d98bd/nodeenv-1.10.0-py2.py3-none-any.whl", hash = "sha256:5bb13e3eed2923615535339b3c620e76779af4cb4c6a90deccc9e36b274d3827", size = 23438, upload-time = "2025-12-20T14:08:52.782Z" },
+]
+
+[[package]]
+name = "platformdirs"
+version = "4.5.1"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/cf/86/0248f086a84f01b37aaec0fa567b397df1a119f73c16f6c7a9aac73ea309/platformdirs-4.5.1.tar.gz", hash = "sha256:61d5cdcc6065745cdd94f0f878977f8de9437be93de97c1c12f853c9c0cdcbda", size = 21715, upload-time = "2025-12-05T13:52:58.638Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/cb/28/3bfe2fa5a7b9c46fe7e13c97bda14c895fb10fa2ebf1d0abb90e0cea7ee1/platformdirs-4.5.1-py3-none-any.whl", hash = "sha256:d03afa3963c806a9bed9d5125c8f4cb2fdaf74a55ab60e5d59b3fde758104d31", size = 18731, upload-time = "2025-12-05T13:52:56.823Z" },
+]
+
+[[package]]
+name = "pre-commit"
+version = "4.5.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "cfgv" },
+    { name = "identify" },
+    { name = "nodeenv" },
+    { name = "pyyaml" },
+    { name = "virtualenv" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/40/f1/6d86a29246dfd2e9b6237f0b5823717f60cad94d47ddc26afa916d21f525/pre_commit-4.5.1.tar.gz", hash = "sha256:eb545fcff725875197837263e977ea257a402056661f09dae08e4b149b030a61", size = 198232, upload-time = "2025-12-16T21:14:33.552Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/5d/19/fd3ef348460c80af7bb4669ea7926651d1f95c23ff2df18b9d24bab4f3fa/pre_commit-4.5.1-py2.py3-none-any.whl", hash = "sha256:3b3afd891e97337708c1674210f8eba659b52a38ea5f822ff142d10786221f77", size = 226437, upload-time = "2025-12-16T21:14:32.409Z" },
+]
+
 [[package]]
 name = "pwdlib"
 version = "0.3.0"
@@ -603,6 +677,42 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/45/58/38b5afbc1a800eeea951b9285d3912613f2603bdf897a4ab0f4bd7f405fc/python_multipart-0.0.20-py3-none-any.whl", hash = "sha256:8a62d3a8335e06589fe01f2a3e178cdcc632f3fbe0d492ad9ee0ec35aab1f104", size = 24546, upload-time = "2024-12-16T19:45:44.423Z" },
 ]
 
+[[package]]
+name = "pyyaml"
+version = "6.0.3"
+source = { registry = "https://pypi.org/simple" }
+sdist = { url = "https://files.pythonhosted.org/packages/05/8e/961c0007c59b8dd7729d542c61a4d537767a59645b82a0b521206e1e25c2/pyyaml-6.0.3.tar.gz", hash = "sha256:d76623373421df22fb4cf8817020cbb7ef15c725b9d5e45f17e189bfc384190f", size = 130960, upload-time = "2025-09-25T21:33:16.546Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/d1/11/0fd08f8192109f7169db964b5707a2f1e8b745d4e239b784a5a1dd80d1db/pyyaml-6.0.3-cp313-cp313-macosx_10_13_x86_64.whl", hash = "sha256:8da9669d359f02c0b91ccc01cac4a67f16afec0dac22c2ad09f46bee0697eba8", size = 181669, upload-time = "2025-09-25T21:32:23.673Z" },
+    { url = "https://files.pythonhosted.org/packages/b1/16/95309993f1d3748cd644e02e38b75d50cbc0d9561d21f390a76242ce073f/pyyaml-6.0.3-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:2283a07e2c21a2aa78d9c4442724ec1eb15f5e42a723b99cb3d822d48f5f7ad1", size = 173252, upload-time = "2025-09-25T21:32:25.149Z" },
+    { url = "https://files.pythonhosted.org/packages/50/31/b20f376d3f810b9b2371e72ef5adb33879b25edb7a6d072cb7ca0c486398/pyyaml-6.0.3-cp313-cp313-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:ee2922902c45ae8ccada2c5b501ab86c36525b883eff4255313a253a3160861c", size = 767081, upload-time = "2025-09-25T21:32:26.575Z" },
+    { url = "https://files.pythonhosted.org/packages/49/1e/a55ca81e949270d5d4432fbbd19dfea5321eda7c41a849d443dc92fd1ff7/pyyaml-6.0.3-cp313-cp313-manylinux2014_s390x.manylinux_2_17_s390x.manylinux_2_28_s390x.whl", hash = "sha256:a33284e20b78bd4a18c8c2282d549d10bc8408a2a7ff57653c0cf0b9be0afce5", size = 841159, upload-time = "2025-09-25T21:32:27.727Z" },
+    { url = "https://files.pythonhosted.org/packages/74/27/e5b8f34d02d9995b80abcef563ea1f8b56d20134d8f4e5e81733b1feceb2/pyyaml-6.0.3-cp313-cp313-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:0f29edc409a6392443abf94b9cf89ce99889a1dd5376d94316ae5145dfedd5d6", size = 801626, upload-time = "2025-09-25T21:32:28.878Z" },
+    { url = "https://files.pythonhosted.org/packages/f9/11/ba845c23988798f40e52ba45f34849aa8a1f2d4af4b798588010792ebad6/pyyaml-6.0.3-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:f7057c9a337546edc7973c0d3ba84ddcdf0daa14533c2065749c9075001090e6", size = 753613, upload-time = "2025-09-25T21:32:30.178Z" },
+    { url = "https://files.pythonhosted.org/packages/3d/e0/7966e1a7bfc0a45bf0a7fb6b98ea03fc9b8d84fa7f2229e9659680b69ee3/pyyaml-6.0.3-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:eda16858a3cab07b80edaf74336ece1f986ba330fdb8ee0d6c0d68fe82bc96be", size = 794115, upload-time = "2025-09-25T21:32:31.353Z" },
+    { url = "https://files.pythonhosted.org/packages/de/94/980b50a6531b3019e45ddeada0626d45fa85cbe22300844a7983285bed3b/pyyaml-6.0.3-cp313-cp313-win32.whl", hash = "sha256:d0eae10f8159e8fdad514efdc92d74fd8d682c933a6dd088030f3834bc8e6b26", size = 137427, upload-time = "2025-09-25T21:32:32.58Z" },
+    { url = "https://files.pythonhosted.org/packages/97/c9/39d5b874e8b28845e4ec2202b5da735d0199dbe5b8fb85f91398814a9a46/pyyaml-6.0.3-cp313-cp313-win_amd64.whl", hash = "sha256:79005a0d97d5ddabfeeea4cf676af11e647e41d81c9a7722a193022accdb6b7c", size = 154090, upload-time = "2025-09-25T21:32:33.659Z" },
+    { url = "https://files.pythonhosted.org/packages/73/e8/2bdf3ca2090f68bb3d75b44da7bbc71843b19c9f2b9cb9b0f4ab7a5a4329/pyyaml-6.0.3-cp313-cp313-win_arm64.whl", hash = "sha256:5498cd1645aa724a7c71c8f378eb29ebe23da2fc0d7a08071d89469bf1d2defb", size = 140246, upload-time = "2025-09-25T21:32:34.663Z" },
+    { url = "https://files.pythonhosted.org/packages/9d/8c/f4bd7f6465179953d3ac9bc44ac1a8a3e6122cf8ada906b4f96c60172d43/pyyaml-6.0.3-cp314-cp314-macosx_10_13_x86_64.whl", hash = "sha256:8d1fab6bb153a416f9aeb4b8763bc0f22a5586065f86f7664fc23339fc1c1fac", size = 181814, upload-time = "2025-09-25T21:32:35.712Z" },
+    { url = "https://files.pythonhosted.org/packages/bd/9c/4d95bb87eb2063d20db7b60faa3840c1b18025517ae857371c4dd55a6b3a/pyyaml-6.0.3-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:34d5fcd24b8445fadc33f9cf348c1047101756fd760b4dacb5c3e99755703310", size = 173809, upload-time = "2025-09-25T21:32:36.789Z" },
+    { url = "https://files.pythonhosted.org/packages/92/b5/47e807c2623074914e29dabd16cbbdd4bf5e9b2db9f8090fa64411fc5382/pyyaml-6.0.3-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:501a031947e3a9025ed4405a168e6ef5ae3126c59f90ce0cd6f2bfc477be31b7", size = 766454, upload-time = "2025-09-25T21:32:37.966Z" },
+    { url = "https://files.pythonhosted.org/packages/02/9e/e5e9b168be58564121efb3de6859c452fccde0ab093d8438905899a3a483/pyyaml-6.0.3-cp314-cp314-manylinux2014_s390x.manylinux_2_17_s390x.manylinux_2_28_s390x.whl", hash = "sha256:b3bc83488de33889877a0f2543ade9f70c67d66d9ebb4ac959502e12de895788", size = 836355, upload-time = "2025-09-25T21:32:39.178Z" },
+    { url = "https://files.pythonhosted.org/packages/88/f9/16491d7ed2a919954993e48aa941b200f38040928474c9e85ea9e64222c3/pyyaml-6.0.3-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:c458b6d084f9b935061bc36216e8a69a7e293a2f1e68bf956dcd9e6cbcd143f5", size = 794175, upload-time = "2025-09-25T21:32:40.865Z" },
+    { url = "https://files.pythonhosted.org/packages/dd/3f/5989debef34dc6397317802b527dbbafb2b4760878a53d4166579111411e/pyyaml-6.0.3-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:7c6610def4f163542a622a73fb39f534f8c101d690126992300bf3207eab9764", size = 755228, upload-time = "2025-09-25T21:32:42.084Z" },
+    { url = "https://files.pythonhosted.org/packages/d7/ce/af88a49043cd2e265be63d083fc75b27b6ed062f5f9fd6cdc223ad62f03e/pyyaml-6.0.3-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:5190d403f121660ce8d1d2c1bb2ef1bd05b5f68533fc5c2ea899bd15f4399b35", size = 789194, upload-time = "2025-09-25T21:32:43.362Z" },
+    { url = "https://files.pythonhosted.org/packages/23/20/bb6982b26a40bb43951265ba29d4c246ef0ff59c9fdcdf0ed04e0687de4d/pyyaml-6.0.3-cp314-cp314-win_amd64.whl", hash = "sha256:4a2e8cebe2ff6ab7d1050ecd59c25d4c8bd7e6f400f5f82b96557ac0abafd0ac", size = 156429, upload-time = "2025-09-25T21:32:57.844Z" },
+    { url = "https://files.pythonhosted.org/packages/f4/f4/a4541072bb9422c8a883ab55255f918fa378ecf083f5b85e87fc2b4eda1b/pyyaml-6.0.3-cp314-cp314-win_arm64.whl", hash = "sha256:93dda82c9c22deb0a405ea4dc5f2d0cda384168e466364dec6255b293923b2f3", size = 143912, upload-time = "2025-09-25T21:32:59.247Z" },
+    { url = "https://files.pythonhosted.org/packages/7c/f9/07dd09ae774e4616edf6cda684ee78f97777bdd15847253637a6f052a62f/pyyaml-6.0.3-cp314-cp314t-macosx_10_13_x86_64.whl", hash = "sha256:02893d100e99e03eda1c8fd5c441d8c60103fd175728e23e431db1b589cf5ab3", size = 189108, upload-time = "2025-09-25T21:32:44.377Z" },
+    { url = "https://files.pythonhosted.org/packages/4e/78/8d08c9fb7ce09ad8c38ad533c1191cf27f7ae1effe5bb9400a46d9437fcf/pyyaml-6.0.3-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:c1ff362665ae507275af2853520967820d9124984e0f7466736aea23d8611fba", size = 183641, upload-time = "2025-09-25T21:32:45.407Z" },
+    { url = "https://files.pythonhosted.org/packages/7b/5b/3babb19104a46945cf816d047db2788bcaf8c94527a805610b0289a01c6b/pyyaml-6.0.3-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:6adc77889b628398debc7b65c073bcb99c4a0237b248cacaf3fe8a557563ef6c", size = 831901, upload-time = "2025-09-25T21:32:48.83Z" },
+    { url = "https://files.pythonhosted.org/packages/8b/cc/dff0684d8dc44da4d22a13f35f073d558c268780ce3c6ba1b87055bb0b87/pyyaml-6.0.3-cp314-cp314t-manylinux2014_s390x.manylinux_2_17_s390x.manylinux_2_28_s390x.whl", hash = "sha256:a80cb027f6b349846a3bf6d73b5e95e782175e52f22108cfa17876aaeff93702", size = 861132, upload-time = "2025-09-25T21:32:50.149Z" },
+    { url = "https://files.pythonhosted.org/packages/b1/5e/f77dc6b9036943e285ba76b49e118d9ea929885becb0a29ba8a7c75e29fe/pyyaml-6.0.3-cp314-cp314t-manylinux2014_x86_64.manylinux_2_17_x86_64.manylinux_2_28_x86_64.whl", hash = "sha256:00c4bdeba853cc34e7dd471f16b4114f4162dc03e6b7afcc2128711f0eca823c", size = 839261, upload-time = "2025-09-25T21:32:51.808Z" },
+    { url = "https://files.pythonhosted.org/packages/ce/88/a9db1376aa2a228197c58b37302f284b5617f56a5d959fd1763fb1675ce6/pyyaml-6.0.3-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:66e1674c3ef6f541c35191caae2d429b967b99e02040f5ba928632d9a7f0f065", size = 805272, upload-time = "2025-09-25T21:32:52.941Z" },
+    { url = "https://files.pythonhosted.org/packages/da/92/1446574745d74df0c92e6aa4a7b0b3130706a4142b2d1a5869f2eaa423c6/pyyaml-6.0.3-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:16249ee61e95f858e83976573de0f5b2893b3677ba71c9dd36b9cf8be9ac6d65", size = 829923, upload-time = "2025-09-25T21:32:54.537Z" },
+    { url = "https://files.pythonhosted.org/packages/f0/7a/1c7270340330e575b92f397352af856a8c06f230aa3e76f86b39d01b416a/pyyaml-6.0.3-cp314-cp314t-win_amd64.whl", hash = "sha256:4ad1906908f2f5ae4e5a8ddfce73c320c2a1429ec52eafd27138b7f1cbe341c9", size = 174062, upload-time = "2025-09-25T21:32:55.767Z" },
+    { url = "https://files.pythonhosted.org/packages/f1/12/de94a39c2ef588c7e6455cfbe7343d3b2dc9d6b6b2f40c4c6565744c873d/pyyaml-6.0.3-cp314-cp314t-win_arm64.whl", hash = "sha256:ebc55a14a21cb14062aa4162f906cd962b28e2e9ea38f9b4391244cd8de4ae0b", size = 149341, upload-time = "2025-09-25T21:32:56.828Z" },
+]
+
 [[package]]
 name = "rsa"
 version = "4.9.1"
@@ -720,3 +830,17 @@ sdist = { url = "https://files.pythonhosted.org/packages/cb/ce/f06b84e2697fef468
 wheels = [
     { url = "https://files.pythonhosted.org/packages/ee/d9/d88e73ca598f4f6ff671fb5fde8a32925c2e08a637303a1d12883c7305fa/uvicorn-0.38.0-py3-none-any.whl", hash = "sha256:48c0afd214ceb59340075b4a052ea1ee91c16fbc2a9b1469cca0e54566977b02", size = 68109, upload-time = "2025-10-18T13:46:42.958Z" },
 ]
+
+[[package]]
+name = "virtualenv"
+version = "20.36.1"
+source = { registry = "https://pypi.org/simple" }
+dependencies = [
+    { name = "distlib" },
+    { name = "filelock" },
+    { name = "platformdirs" },
+]
+sdist = { url = "https://files.pythonhosted.org/packages/aa/a3/4d310fa5f00863544e1d0f4de93bddec248499ccf97d4791bc3122c9d4f3/virtualenv-20.36.1.tar.gz", hash = "sha256:8befb5c81842c641f8ee658481e42641c68b5eab3521d8e092d18320902466ba", size = 6032239, upload-time = "2026-01-09T18:21:01.296Z" }
+wheels = [
+    { url = "https://files.pythonhosted.org/packages/6a/2a/dc2228b2888f51192c7dc766106cd475f1b768c10caaf9727659726f7391/virtualenv-20.36.1-py3-none-any.whl", hash = "sha256:575a8d6b124ef88f6f51d56d656132389f961062a9177016a50e4f507bbcc19f", size = 6008258, upload-time = "2026-01-09T18:20:59.425Z" },
+]
diff --git a/web/eslint.config.js b/web/eslint.config.js
index 7807d8b..2be74cf 100644
--- a/web/eslint.config.js
+++ b/web/eslint.config.js
@@ -21,6 +21,16 @@ export default defineConfig([
   },
 
   js.configs.recommended,
-  ...pluginVue.configs['flat/essential'],
+  ...pluginVue.configs['flat/recommended'],
+  {
+    rules: {
+      'vue/block-order': [
+        'error',
+        {
+          order: ['script', 'template', 'style'],
+        },
+      ],
+    },
+  },
   skipFormatting,
 ])
diff --git a/web/src/components/DragUploadZone.vue b/web/src/components/DragUploadZone.vue
index 3918f1a..4e77a1e 100644
--- a/web/src/components/DragUploadZone.vue
+++ b/web/src/components/DragUploadZone.vue
@@ -257,7 +257,7 @@ defineExpose({
     />
 
     <!-- 默认插槽：包裹需要拖拽上传功能的内容 -->
-    <slot :triggerFileInput="triggerFileInput" :triggerFolderInput="triggerFolderInput"></slot>
+    <slot :trigger-file-input="triggerFileInput" :trigger-folder-input="triggerFolderInput"></slot>
 
     <!-- 拖拽覆盖层 -->
     <div
@@ -290,9 +290,9 @@ defineExpose({
       class="absolute top-4 right-4 z-40 flex gap-2"
     >
       <button
-        @click.stop="triggerFileInput"
         class="btn btn-sm btn-primary gap-2 shadow-lg"
         title="选择文件上传"
+        @click.stop="triggerFileInput"
       >
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path
@@ -305,9 +305,9 @@ defineExpose({
         上传文件
       </button>
       <button
-        @click.stop="triggerFolderInput"
         class="btn btn-sm btn-primary gap-2 shadow-lg"
         title="选择文件夹上传"
+        @click.stop="triggerFolderInput"
       >
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path
diff --git a/web/src/components/FileDetails.vue b/web/src/components/FileDetails.vue
index 6a29b30..d30c811 100644
--- a/web/src/components/FileDetails.vue
+++ b/web/src/components/FileDetails.vue
@@ -19,7 +19,7 @@ const props = defineProps({
   // 当模态框打开才有 fileId
   fileId: {
     type: String,
-    // required: true,
+    default: '',
   },
   isOpen: {
     type: Boolean,
@@ -103,15 +103,15 @@ watch(
             </h2>
             <p class="flex gap-3 text-sm text-gray-500 dark:text-gray-400 mt-1">
               <span class="badge badge-outline">{{ getFileExtension(file.filename) }} 文件</span>
-              <span class="badge badge-outline badge-warning" v-if="file.is_deleted === 1"
+              <span v-if="file.is_deleted === 1" class="badge badge-outline badge-warning"
                 >在回收站</span
               >
             </p>
           </div>
         </div>
         <button
-          @click="close"
           class="btn btn-sm btn-circle btn-ghost text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+          @click="close"
         >
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
@@ -217,9 +217,9 @@ watch(
                   {{ file.filename }}
                 </span>
                 <button
-                  @click="copyToClipboard(file.filename)"
                   class="btn btn-xs btn-ghost text-gray-400 hover:text-blue-500"
                   title="复制文件名"
+                  @click="copyToClipboard(file.filename)"
                 >
                   <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
@@ -260,9 +260,9 @@ watch(
                 </span>
                 <button
                   v-if="file.hash"
-                  @click="copyToClipboard(file.hash)"
                   class="btn btn-xs btn-ghost text-gray-400 hover:text-blue-500"
                   title="复制哈希值"
+                  @click="copyToClipboard(file.hash)"
                 >
                   <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
@@ -340,9 +340,9 @@ watch(
                   {{ file.id }}
                 </span>
                 <button
-                  @click="copyToClipboard(file.id)"
                   class="btn btn-xs btn-ghost text-gray-400 hover:text-blue-500"
                   title="复制 ID"
+                  @click="copyToClipboard(file.id)"
                 >
                   <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
@@ -384,8 +384,8 @@ watch(
         <div class="flex gap-2">
           <button
             v-if="showRename"
-            @click="$emit('rename', file)"
             class="btn btn-sm btn-outline gap-2"
+            @click="$emit('rename', file)"
           >
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
@@ -399,8 +399,8 @@ watch(
           </button>
           <button
             v-if="showDelete"
-            @click="$emit('delete', file.id)"
             class="btn btn-sm btn-outline btn-error gap-2"
+            @click="$emit('delete', file.id)"
           >
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
@@ -416,8 +416,8 @@ watch(
         <div class="flex gap-2">
           <button
             v-if="showManageNotes"
-            @click="$emit('manage-notes', file, 'file')"
             class="btn btn-sm btn-primary gap-2"
+            @click="$emit('manage-notes', file, 'file')"
           >
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
diff --git a/web/src/components/FileFolderSelector.vue b/web/src/components/FileFolderSelector.vue
index 33e71d8..b12ff06 100644
--- a/web/src/components/FileFolderSelector.vue
+++ b/web/src/components/FileFolderSelector.vue
@@ -194,10 +194,10 @@ onMounted(() => {
         </svg>
         <input
           v-model="searchQuery"
-          @input="handleSearch"
           type="text"
           placeholder="搜索文件..."
           class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-white dark:bg-gray-800"
+          @input="handleSearch"
         />
       </div>
 
@@ -218,11 +218,11 @@ onMounted(() => {
 
     <!-- 内容区域 -->
     <DragUploadZone
-      :showSelected="true"
+      :show-selected="true"
       :folder-id="currentFolderId"
       :upload-mode="uploadMode"
-      @upload-complete="handleDragUploadComplete"
       class="flex-1 overflow-y-auto"
+      @upload-complete="handleDragUploadComplete"
     >
       <div v-if="loading" class="flex justify-center items-center py-12">
         <span class="loading loading-spinner loading-lg"></span>
diff --git a/web/src/components/FileGrid.vue b/web/src/components/FileGrid.vue
index b7ea95b..f227f5b 100644
--- a/web/src/components/FileGrid.vue
+++ b/web/src/components/FileGrid.vue
@@ -105,12 +105,12 @@ const hoveredFolder = ref(null)
           @mouseenter="hoveredFolder = folder.id"
           @mouseleave="hoveredFolder = null"
         >
-          <div class="absolute top-2 left-2 z-10" v-if="selectionMode">
+          <div v-if="selectionMode" class="absolute top-2 left-2 z-10">
             <input
               type="checkbox"
               :checked="localSelectedFolders.includes(folder.id)"
-              @click.stop="toggleFolderSelection(folder.id)"
               class="checkbox checkbox-sm checkbox-primary"
+              @click.stop="toggleFolderSelection(folder.id)"
             />
           </div>
           <div
@@ -137,10 +137,10 @@ const hoveredFolder = ref(null)
                 {{ folder.name }}
               </h3>
               <button
-                @click.stop="$emit('manage-notes', folder, 'folder')"
                 class="btn btn-xs btn-outline text-gray-400 hover:text-blue-500"
                 :class="{ 'text-blue-500': folder.notes_count > 0 }"
                 :title="`管理笔记 (${folder.notes_count || 0})`"
+                @click.stop="$emit('manage-notes', folder, 'folder')"
               >
                 📝
                 <span v-if="folder.notes_count > 0" class="text-xs">{{ folder.notes_count }}</span>
@@ -153,8 +153,8 @@ const hoveredFolder = ref(null)
               <div class="flex-1">
                 <button
                   class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600"
-                  @click.stop="$emit('edit-folder', folder)"
                   title="重命名"
+                  @click.stop="$emit('edit-folder', folder)"
                 >
                   <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
@@ -199,12 +199,12 @@ const hoveredFolder = ref(null)
           @mouseenter="hoveredFile = file.id"
           @mouseleave="hoveredFile = null"
         >
-          <div class="absolute top-2 left-2 z-10" v-if="selectionMode">
+          <div v-if="selectionMode" class="absolute top-2 left-2 z-10">
             <input
               type="checkbox"
               :checked="localSelectedFiles.includes(file.id)"
-              @click.stop="toggleFileSelection(file.id)"
               class="checkbox checkbox-sm checkbox-primary"
+              @click.stop="toggleFileSelection(file.id)"
             />
           </div>
           <!-- 文件预览区域 -->
@@ -238,9 +238,9 @@ const hoveredFolder = ref(null)
             >
               <div class="flex gap-2">
                 <button
-                  @click.stop="$emit('view-details', file)"
                   class="btn btn-sm btn-circle bg-white/90 hover:bg-white text-gray-700 border-0 shadow-lg"
                   title="查看文件"
+                  @click.stop="$emit('view-details', file)"
                 >
                   <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
@@ -271,10 +271,10 @@ const hoveredFolder = ref(null)
                 {{ file.filename }}
               </h3>
               <button
-                @click="$emit('manage-notes', file, 'file')"
                 class="btn btn-xs btn-outline text-gray-400 hover:text-blue-500"
                 :class="{ 'text-blue-500': file.notes_count > 0 }"
                 :title="`管理笔记 (${file.notes_count || 0})`"
+                @click="$emit('manage-notes', file, 'file')"
               >
                 📝
                 <span v-if="file.notes_count > 0" class="text-xs">{{ file.notes_count }}</span>
@@ -288,13 +288,13 @@ const hoveredFolder = ref(null)
 
             <!-- 操作按钮 -->
             <div
-              class="flex gap-2 pt-2 border-t border-gray-100 dark:border-gray-700"
               v-if="isShowOperationBtn"
+              class="flex gap-2 pt-2 border-t border-gray-100 dark:border-gray-700"
             >
               <button
                 class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600"
-                @click="$emit('view-details', file)"
                 title="查看详情"
+                @click="$emit('view-details', file)"
               >
                 <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
@@ -307,8 +307,8 @@ const hoveredFolder = ref(null)
               </button>
               <button
                 class="btn btn-xs btn-ghost text-gray-500 hover:text-blue-600"
-                @click="$emit('rename-file', file)"
                 title="重命名"
+                @click="$emit('rename-file', file)"
               >
                 <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
diff --git a/web/src/components/FilePreview.vue b/web/src/components/FilePreview.vue
index e71d252..d41f81b 100644
--- a/web/src/components/FilePreview.vue
+++ b/web/src/components/FilePreview.vue
@@ -1,3 +1,28 @@
+<script setup>
+import { formatDate, formatSize } from '@/utils/format'
+import {
+  getFileIcon,
+  getFileTypeColor,
+  isImage,
+  isVideo,
+  isAudio,
+  isPdf,
+  isText,
+} from '@/utils/file'
+
+import PDFViewer from './PDFViewer.vue'
+import TextViewer from './TextViewer.vue'
+
+defineProps({
+  file: {
+    type: Object,
+    default: null,
+  },
+})
+
+defineEmits(['close', 'add-note'])
+</script>
+
 <template>
   <div
     v-if="file"
@@ -28,9 +53,9 @@
         </div>
         <div class="flex items-center gap-2">
           <button
-            @click="$emit('add-note', file)"
             class="btn btn-sm btn-primary"
             title="为此文件添加笔记"
+            @click="$emit('add-note', file)"
           >
             <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
@@ -67,7 +92,7 @@
             </svg>
             详情
           </router-link>
-          <button @click="$emit('close')" class="btn btn-sm btn-circle btn-ghost">
+          <button class="btn btn-sm btn-circle btn-ghost" @click="$emit('close')">
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 stroke-linecap="round"
@@ -162,28 +187,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { formatDate, formatSize } from '@/utils/format'
-import {
-  getFileIcon,
-  getFileTypeColor,
-  isImage,
-  isVideo,
-  isAudio,
-  isPdf,
-  isText,
-} from '@/utils/file'
-
-import PDFViewer from './PDFViewer.vue'
-import TextViewer from './TextViewer.vue'
-
-const props = defineProps({
-  file: {
-    type: Object,
-    default: null,
-  },
-})
-
-defineEmits(['close', 'add-note'])
-</script>
diff --git a/web/src/components/FileUpload.vue b/web/src/components/FileUpload.vue
index aa4cae4..7015f08 100644
--- a/web/src/components/FileUpload.vue
+++ b/web/src/components/FileUpload.vue
@@ -229,12 +229,12 @@ const uploadFiles = async (filesWithPaths) => {
     @dragleave="handleDragLeave"
     @drop="handleDrop"
   >
-    <input type="file" multiple class="hidden" ref="fileInput" @change="handleFileSelect" />
+    <input ref="fileInput" type="file" multiple class="hidden" @change="handleFileSelect" />
     <input
+      ref="folderInput"
       type="file"
       webkitdirectory
       class="hidden"
-      ref="folderInput"
       @change="handleFolderSelect"
     />
 
@@ -254,8 +254,8 @@ const uploadFiles = async (filesWithPaths) => {
       <div class="text-4xl mb-4">📂</div>
       <p class="text-lg font-medium mb-4">拖放文件或文件夹到这里</p>
       <div class="flex gap-3 justify-center">
-        <button @click="triggerFileInput" class="btn btn-primary btn-sm">📄 上传文件</button>
-        <button @click="triggerFolderInput" class="btn btn-secondary btn-sm">📁 上传文件夹</button>
+        <button class="btn btn-primary btn-sm" @click="triggerFileInput">📄 上传文件</button>
+        <button class="btn btn-secondary btn-sm" @click="triggerFolderInput">📁 上传文件夹</button>
       </div>
       <p class="text-xs text-base-content/60 mt-3">
         支持拖拽上传，自动保留文件夹结构
diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
index d184545..13d184e 100644
--- a/web/src/components/NavBar.vue
+++ b/web/src/components/NavBar.vue
@@ -1,3 +1,36 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { RouterLink, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { logout } from '@/api/authService'
+
+const router = useRouter()
+const authStore = useAuthStore()
+const searchQuery = ref('')
+const showMobileMenu = ref(false)
+
+// 检查是否已登录（直接使用 store 的计算属性）
+const isLoggedIn = computed(() => authStore.isAuthenticated)
+
+// 检查是否为系统管理员
+const isSystemAdmin = computed(() => authStore.isSystemAdmin)
+
+const handleSearch = () => {
+  if (searchQuery.value.trim()) {
+    router.push({ name: 'search', query: { q: searchQuery.value } })
+    showMobileMenu.value = false
+  }
+}
+
+const handleLogout = async () => {
+  // 使用 auth store 清除认证信息
+  authStore.clearAuth()
+  showMobileMenu.value = false
+  await logout()
+  router.push('/auth/login')
+}
+</script>
+
 <template>
   <header
     class="bg-white dark:bg-gray-900 shadow-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-40"
@@ -87,17 +120,17 @@
             </div>
             <input
               v-model="searchQuery"
-              @keyup.enter="handleSearch"
               type="text"
               placeholder="搜索文件和笔记..."
               class="w-56 pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400"
+              @keyup.enter="handleSearch"
             />
           </div>
 
           <!-- 用户认证按钮 -->
           <div class="flex items-center gap-2">
             <template v-if="isLoggedIn">
-              <button @click="handleLogout" class="btn btn-sm btn-ghost gap-2 hidden lg:flex">
+              <button class="btn btn-sm btn-ghost gap-2 hidden lg:flex" @click="handleLogout">
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
                     stroke-linecap="round"
@@ -137,8 +170,8 @@
 
           <!-- 移动端菜单按钮 -->
           <button
-            @click="showMobileMenu = !showMobileMenu"
             class="lg:hidden btn btn-sm btn-ghost btn-circle"
+            @click="showMobileMenu = !showMobileMenu"
           >
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
@@ -233,10 +266,10 @@
               </div>
               <input
                 v-model="searchQuery"
-                @keyup.enter="handleSearch"
                 type="text"
                 placeholder="搜索..."
                 class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400"
+                @keyup.enter="handleSearch"
               />
             </div>
           </div>
@@ -245,8 +278,8 @@
           <div class="px-4 pt-2 space-y-2">
             <template v-if="isLoggedIn">
               <button
-                @click="handleLogout"
                 class="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-gray-100 dark:hover:bg-gray-800 transition-colors"
+                @click="handleLogout"
               >
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
@@ -297,36 +330,3 @@
     </div>
   </header>
 </template>
-
-<script setup>
-import { ref, computed } from 'vue'
-import { RouterLink, useRouter } from 'vue-router'
-import { useAuthStore } from '@/stores/auth'
-import { logout } from '@/api/authService'
-
-const router = useRouter()
-const authStore = useAuthStore()
-const searchQuery = ref('')
-const showMobileMenu = ref(false)
-
-// 检查是否已登录（直接使用 store 的计算属性）
-const isLoggedIn = computed(() => authStore.isAuthenticated)
-
-// 检查是否为系统管理员
-const isSystemAdmin = computed(() => authStore.isSystemAdmin)
-
-const handleSearch = () => {
-  if (searchQuery.value.trim()) {
-    router.push({ name: 'search', query: { q: searchQuery.value } })
-    showMobileMenu.value = false
-  }
-}
-
-const handleLogout = async () => {
-  // 使用 auth store 清除认证信息
-  authStore.clearAuth()
-  showMobileMenu.value = false
-  await logout()
-  router.push('/auth/login')
-}
-</script>
diff --git a/web/src/components/NoteEditor.vue b/web/src/components/NoteEditor.vue
index 55c626d..16cf3f6 100644
--- a/web/src/components/NoteEditor.vue
+++ b/web/src/components/NoteEditor.vue
@@ -1,3 +1,126 @@
+<script setup>
+import { ref, watch } from 'vue'
+import noteService from '../api/noteService'
+import FileFolderSelector from './FileFolderSelector.vue'
+import { useToast } from '@/composables/useToast'
+import { getFileIcon, getFileTypeColor } from '@/utils/file'
+import { formatSize } from '@/utils/format'
+
+const props = defineProps({
+  note: {
+    type: Object,
+    default: null,
+  },
+})
+
+const emit = defineEmits(['save', 'cancel'])
+
+const title = ref('')
+const content = ref('')
+const attachedFiles = ref([])
+const attachedFolders = ref([])
+const showSelector = ref(false)
+
+const { showToast } = useToast()
+
+// 监听属性变化
+watch(
+  () => props.note,
+  (newNote) => {
+    if (newNote) {
+      title.value = newNote.title || ''
+      content.value = newNote.content || ''
+      attachedFiles.value = newNote.files || []
+      attachedFolders.value = newNote.folders || []
+    } else {
+      title.value = ''
+      content.value = ''
+      attachedFiles.value = []
+      attachedFolders.value = []
+    }
+  },
+  { immediate: true },
+)
+
+// 事件处理
+const handleSubmit = () => {
+  if (!title.value.trim() || !content.value.trim()) {
+    return
+  }
+
+  emit('save', {
+    title: title.value,
+    content: content.value,
+  })
+}
+
+const handleShowSelector = () => {
+  if (!props.note || !props.note.id) {
+    showToast('请先保存笔记，再关联文件和文件夹', 'warning')
+    return
+  }
+  showSelector.value = true
+}
+
+const handleAttachItems = async ({ files: fileIds, folders: folderIds }) => {
+  showSelector.value = false
+
+  if (!props.note || !props.note.id) {
+    showToast('请先保存笔记，再关联文件和文件夹', 'warning')
+    return
+  }
+
+  try {
+    // 同时关联文件和文件夹
+    const promises = []
+    if (fileIds.length > 0) {
+      promises.push(noteService.attachFiles(props.note.id, fileIds))
+    }
+    if (folderIds.length > 0) {
+      promises.push(noteService.attachFolders(props.note.id, folderIds))
+    }
+
+    await Promise.all(promises)
+
+    // 重新获取笔记信息以更新关联列表
+    const response = await noteService.getNote(props.note.id)
+    attachedFiles.value = response.files || []
+    attachedFolders.value = response.folders || []
+  } catch (error) {
+    console.error('Failed to attach items', error)
+    showToast('关联失败', 'error')
+  }
+}
+
+const handleDetachFile = async (fileId) => {
+  if (!props.note || !props.note.id) return
+
+  if (!confirm('确定要移除这个文件的关联吗？')) return
+
+  try {
+    await noteService.detachFiles(props.note.id, [fileId])
+    attachedFiles.value = attachedFiles.value.filter((file) => file.id !== fileId)
+  } catch (error) {
+    console.error('Failed to detach file', error)
+    showToast('移除文件关联失败', 'error')
+  }
+}
+
+const handleDetachFolder = async (folderId) => {
+  if (!props.note || !props.note.id) return
+
+  if (!confirm('确定要移除这个文件夹的关联吗？')) return
+
+  try {
+    await noteService.detachFolders(props.note.id, [folderId])
+    attachedFolders.value = attachedFolders.value.filter((folder) => folder.id !== folderId)
+  } catch (error) {
+    console.error('Failed to detach folder', error)
+    showToast('移除文件夹关联失败', 'error')
+  }
+}
+</script>
+
 <template>
   <div
     class="bg-white dark:bg-gray-900 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 h-full flex flex-col"
@@ -23,11 +146,11 @@
           </h2>
         </div>
         <div class="flex items-center gap-2">
-          <button @click="$emit('cancel')" class="btn btn-sm btn-soft">✖️ 取消</button>
+          <button class="btn btn-sm btn-soft" @click="$emit('cancel')">✖️ 取消</button>
           <button
-            @click="handleSubmit"
             class="btn btn-sm btn-primary"
             :disabled="!title.trim() || !content.trim()"
+            @click="handleSubmit"
           >
             💾 保存
           </button>
@@ -49,7 +172,7 @@
             placeholder="输入笔记标题..."
             class="w-full px-4 py-3 text-lg border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400"
           />
-          <button @click="handleShowSelector" class="btn btn-lg btn-primary ml-2 rounded-lg">
+          <button class="btn btn-lg btn-primary ml-2 rounded-lg" @click="handleShowSelector">
             ＋ 关联
           </button>
         </div>
@@ -63,8 +186,8 @@
           </label>
         </div>
         <div
-          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3"
           v-if="attachedFolders.length > 0"
+          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3"
         >
           <div
             v-for="folder in attachedFolders"
@@ -82,9 +205,9 @@
               </p>
             </div>
             <button
-              @click="handleDetachFolder(folder.id)"
               class="btn btn-xs btn-ghost text-gray-400 hover:text-red-500"
               title="移除关联"
+              @click="handleDetachFolder(folder.id)"
             >
               <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
@@ -106,8 +229,8 @@
           </label>
         </div>
         <div
-          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3"
           v-if="attachedFiles.length > 0"
+          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3"
         >
           <div
             v-for="file in attachedFiles"
@@ -128,9 +251,9 @@
               </p>
             </div>
             <button
-              @click="handleDetachFile(file.id)"
               class="btn btn-xs btn-ghost text-gray-400 hover:text-red-500"
               title="移除关联"
+              @click="handleDetachFile(file.id)"
             >
               <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
@@ -180,7 +303,7 @@
           class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700"
         >
           <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">选择文件和文件夹</h3>
-          <button @click="showSelector = false" class="btn btn-sm btn-circle btn-ghost">
+          <button class="btn btn-sm btn-circle btn-ghost" @click="showSelector = false">
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 stroke-linecap="round"
@@ -195,134 +318,11 @@
           :exclude-file-ids="attachedFiles.map((f) => f.id)"
           :exclude-folder-ids="attachedFolders.map((f) => f.id)"
           mode="both"
+          class="p-4 flex-1 overflow-hidden"
           @select="handleAttachItems"
           @cancel="showSelector = false"
-          class="p-4 flex-1 overflow-hidden"
         />
       </div>
     </div>
   </div>
 </template>
-
-<script setup>
-import { ref, watch } from 'vue'
-import noteService from '../api/noteService'
-import FileFolderSelector from './FileFolderSelector.vue'
-import { useToast } from '@/composables/useToast'
-import { getFileIcon, getFileTypeColor } from '@/utils/file'
-import { formatSize } from '@/utils/format'
-
-const props = defineProps({
-  note: {
-    type: Object,
-    default: null,
-  },
-})
-
-const emit = defineEmits(['save', 'cancel'])
-
-const title = ref('')
-const content = ref('')
-const attachedFiles = ref([])
-const attachedFolders = ref([])
-const showSelector = ref(false)
-
-const { showToast } = useToast()
-
-// 监听属性变化
-watch(
-  () => props.note,
-  (newNote) => {
-    if (newNote) {
-      title.value = newNote.title || ''
-      content.value = newNote.content || ''
-      attachedFiles.value = newNote.files || []
-      attachedFolders.value = newNote.folders || []
-    } else {
-      title.value = ''
-      content.value = ''
-      attachedFiles.value = []
-      attachedFolders.value = []
-    }
-  },
-  { immediate: true },
-)
-
-// 事件处理
-const handleSubmit = () => {
-  if (!title.value.trim() || !content.value.trim()) {
-    return
-  }
-
-  emit('save', {
-    title: title.value,
-    content: content.value,
-  })
-}
-
-const handleShowSelector = () => {
-  if (!props.note || !props.note.id) {
-    showToast('请先保存笔记，再关联文件和文件夹', 'warning')
-    return
-  }
-  showSelector.value = true
-}
-
-const handleAttachItems = async ({ files: fileIds, folders: folderIds }) => {
-  showSelector.value = false
-
-  if (!props.note || !props.note.id) {
-    showToast('请先保存笔记，再关联文件和文件夹', 'warning')
-    return
-  }
-
-  try {
-    // 同时关联文件和文件夹
-    const promises = []
-    if (fileIds.length > 0) {
-      promises.push(noteService.attachFiles(props.note.id, fileIds))
-    }
-    if (folderIds.length > 0) {
-      promises.push(noteService.attachFolders(props.note.id, folderIds))
-    }
-
-    await Promise.all(promises)
-
-    // 重新获取笔记信息以更新关联列表
-    const response = await noteService.getNote(props.note.id)
-    attachedFiles.value = response.files || []
-    attachedFolders.value = response.folders || []
-  } catch (error) {
-    console.error('Failed to attach items', error)
-    showToast('关联失败', 'error')
-  }
-}
-
-const handleDetachFile = async (fileId) => {
-  if (!props.note || !props.note.id) return
-
-  if (!confirm('确定要移除这个文件的关联吗？')) return
-
-  try {
-    await noteService.detachFiles(props.note.id, [fileId])
-    attachedFiles.value = attachedFiles.value.filter((file) => file.id !== fileId)
-  } catch (error) {
-    console.error('Failed to detach file', error)
-    showToast('移除文件关联失败', 'error')
-  }
-}
-
-const handleDetachFolder = async (folderId) => {
-  if (!props.note || !props.note.id) return
-
-  if (!confirm('确定要移除这个文件夹的关联吗？')) return
-
-  try {
-    await noteService.detachFolders(props.note.id, [folderId])
-    attachedFolders.value = attachedFolders.value.filter((folder) => folder.id !== folderId)
-  } catch (error) {
-    console.error('Failed to detach folder', error)
-    showToast('移除文件夹关联失败', 'error')
-  }
-}
-</script>
diff --git a/web/src/components/PDFViewer.vue b/web/src/components/PDFViewer.vue
index dd1a16d..b3acb53 100644
--- a/web/src/components/PDFViewer.vue
+++ b/web/src/components/PDFViewer.vue
@@ -228,9 +228,9 @@ onBeforeUnmount(() => {
       <div
         v-for="page in pdfPages"
         :key="page.pageNumber"
+        :ref="(el) => setPageRef(el, page.pageNumber)"
         :data-page-number="page.pageNumber"
         class="relative bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 p-2 flex justify-center"
-        :ref="(el) => setPageRef(el, page.pageNumber)"
       >
         <canvas :ref="(el) => setCanvasRef(el, page.pageNumber)" class="max-w-full"></canvas>
 
diff --git a/web/src/components/UnifiedNotes.vue b/web/src/components/UnifiedNotes.vue
index 466062b..308fd1b 100644
--- a/web/src/components/UnifiedNotes.vue
+++ b/web/src/components/UnifiedNotes.vue
@@ -2,8 +2,6 @@
 import { ref, watch, computed } from 'vue'
 import { marked } from 'marked'
 import DOMPurify from 'dompurify'
-import fileService from '../api/fileService'
-import folderService from '../api/folderService'
 import noteService from '../api/noteService'
 import { formatDate } from '@/utils/format'
 import { getFileIcon, getFileTypeColor } from '@/utils/file'
@@ -230,7 +228,7 @@ watch(
             </p>
           </div>
         </div>
-        <button @click="$emit('close')" class="btn btn-sm btn-circle btn-ghost">
+        <button class="btn btn-sm btn-circle btn-ghost" @click="$emit('close')">
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               stroke-linecap="round"
@@ -247,7 +245,7 @@ watch(
         <!-- 左侧：笔记列表 -->
         <div class="w-1/3 border-r border-gray-200 dark:border-gray-700 flex flex-col">
           <div class="p-4 border-b border-gray-200 dark:border-gray-700">
-            <button @click="startNewNote" class="w-full btn btn-primary btn-sm">
+            <button class="w-full btn btn-primary btn-sm" @click="startNewNote">
               <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   stroke-linecap="round"
@@ -307,9 +305,9 @@ watch(
                   </span>
                   <div class="flex gap-1">
                     <button
-                      @click.stop="editNote(note)"
                       class="btn btn-xs btn-ghost text-gray-400 hover:text-blue-500"
                       title="编辑"
+                      @click.stop="editNote(note)"
                     >
                       <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path
@@ -321,9 +319,9 @@ watch(
                       </svg>
                     </button>
                     <button
-                      @click.stop="detachNote(note.id)"
                       class="btn btn-xs btn-ghost text-gray-400 hover:text-orange-500"
                       title="取消关联"
+                      @click.stop="detachNote(note.id)"
                     >
                       <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path
@@ -335,9 +333,9 @@ watch(
                       </svg>
                     </button>
                     <button
-                      @click.stop="deleteNote(note.id)"
                       class="btn btn-xs btn-ghost text-gray-400 hover:text-red-500"
                       title="删除"
+                      @click.stop="deleteNote(note.id)"
                     >
                       <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path
@@ -374,8 +372,8 @@ watch(
               ></textarea>
             </div>
             <div class="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-2">
-              <button @click="cancelEdit" class="btn btn-ghost">取消</button>
-              <button @click="saveNote" class="btn btn-primary">
+              <button class="btn btn-ghost" @click="cancelEdit">取消</button>
+              <button class="btn btn-primary" @click="saveNote">
                 {{ editingNote.id ? '保存' : '创建并关联' }}
               </button>
             </div>
diff --git a/web/src/views/admin/StorageBackendsView.vue b/web/src/views/admin/StorageBackendsView.vue
index fab902c..4510cfa 100644
--- a/web/src/views/admin/StorageBackendsView.vue
+++ b/web/src/views/admin/StorageBackendsView.vue
@@ -1,525 +1,3 @@
-<template>
-  <div class="container mx-auto px-4 py-8">
-    <div class="flex justify-between items-center mb-8">
-      <div>
-        <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">存储后端管理</h1>
-        <p class="text-gray-500 dark:text-gray-400 mt-1">
-          管理文件存储位置，支持本地存储和 S3 兼容对象存储
-        </p>
-      </div>
-      <div class="flex gap-2">
-        <div class="dropdown dropdown-end">
-          <label tabindex="0" class="btn btn-outline btn-sm">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 mr-1"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-              />
-            </svg>
-            更多操作
-          </label>
-          <ul
-            tabindex="0"
-            class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 mt-2"
-          >
-            <li>
-              <a @click="handleExport">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                  />
-                </svg>
-                导出配置
-              </a>
-            </li>
-            <li>
-              <a @click="openImportModal">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L9 8m4-4v12"
-                  />
-                </svg>
-                导入配置
-              </a>
-            </li>
-          </ul>
-        </div>
-        <button class="btn btn-sm btn-primary" @click="openCreateModal">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5 mr-2"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
-              clip-rule="evenodd"
-            />
-          </svg>
-          添加存储后端
-        </button>
-      </div>
-    </div>
-
-    <!-- Loading State -->
-    <div v-if="loading" class="flex justify-center py-12">
-      <span class="loading loading-spinner loading-lg text-primary"></span>
-    </div>
-
-    <!-- Empty State -->
-    <div
-      v-else-if="backends.length === 0"
-      class="text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-xl"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-16 w-16 mx-auto text-gray-400 mb-4"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
-        />
-      </svg>
-      <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">暂无存储后端</h3>
-      <p class="text-gray-500 dark:text-gray-400 mt-2">请添加一个存储后端以开始存储文件</p>
-    </div>
-
-    <!-- Backend List -->
-    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      <div
-        v-for="backend in backends"
-        :key="backend.id"
-        class="card bg-base-100 shadow-xl border border-gray-200 dark:border-gray-700 hover:shadow-2xl transition-shadow"
-        :class="{ 'ring-2 ring-primary': backend.is_default }"
-      >
-        <div class="card-body">
-          <div class="flex justify-between items-start">
-            <div class="flex items-center gap-2">
-              <div
-                class="badge badge-lg"
-                :class="backend.backend_type === 'local' ? 'badge-neutral' : 'badge-accent'"
-              >
-                {{ BACKEND_TYPES.find((item) => backend.backend_type === item.value)?.label }}
-              </div>
-              <div v-if="backend.is_default" class="badge badge-primary badge-lg gap-1">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-3 w-3"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-                默认
-              </div>
-            </div>
-            <div class="dropdown dropdown-end">
-              <label tabindex="0" class="btn btn-ghost btn-sm btn-circle">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-                  />
-                </svg>
-              </label>
-              <ul
-                tabindex="0"
-                class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
-              >
-                <li><a @click="openEditModal(backend)">编辑配置</a></li>
-                <li v-if="!backend.is_default">
-                  <a @click="handleSetDefault(backend)">设为默认</a>
-                </li>
-                <li v-if="!backend.is_default">
-                  <a @click="handleDelete(backend)" class="text-error">删除后端</a>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <h2 class="card-title mt-2">{{ backend.name }}</h2>
-          <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 min-h-[2.5rem]">
-            {{ backend.description || '暂无描述' }}
-          </p>
-
-          <div class="divider my-2"></div>
-
-          <div class="text-xs text-gray-500 space-y-1">
-            <div v-if="backend.backend_type === 'local'">
-              <span class="font-semibold">路径:</span> {{ backend.config.base_dir }}
-            </div>
-            <div v-else>
-              <div><span class="font-semibold">Bucket:</span> {{ backend.config.bucket_name }}</div>
-              <div><span class="font-semibold">Region:</span> {{ backend.config.region_name }}</div>
-              <div v-if="backend.config.endpoint_url">
-                <span class="font-semibold">Endpoint:</span> {{ backend.config.endpoint_url }}
-              </div>
-              <div v-if="backend.config.public_url">
-                <span class="font-semibold">Endpoint:</span> {{ backend.config.public_url }}
-              </div>
-              <div class="mt-2">
-                <span class="font-semibold">客户端直传:</span>
-                <span
-                  class="badge badge-sm ml-1 align-baseline"
-                  :class="backend.allow_client_direct_upload ? 'badge-success' : 'badge-ghost'"
-                >
-                  {{ backend.allow_client_direct_upload ? '已启用' : '未启用' }}
-                </span>
-              </div>
-            </div>
-          </div>
-
-          <div class="card-actions justify-end mt-4">
-            <button
-              class="btn btn-sm btn-outline"
-              @click="handleTest(backend)"
-              :disabled="testingId === backend.id"
-            >
-              <span
-                v-if="testingId === backend.id"
-                class="loading loading-spinner loading-xs"
-              ></span>
-              <span v-else>测试连接</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Create/Edit Modal -->
-    <dialog id="backend_modal" class="modal">
-      <div class="modal-box w-11/12 max-w-3xl">
-        <h3 class="font-bold text-lg mb-4">{{ isEditing ? '编辑存储后端' : '添加存储后端' }}</h3>
-
-        <form @submit.prevent="handleSubmit" class="space-y-4">
-          <!-- Basic Info -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div class="form-control">
-              <label class="label"><span class="label-text">名称</span></label>
-              <input
-                type="text"
-                v-model="form.name"
-                placeholder="例如: 主S3存储"
-                class="input input-bordered w-full"
-                required
-              />
-            </div>
-
-            <div class="form-control">
-              <label class="label"><span class="label-text">类型</span></label>
-              <select v-model="form.backend_type" class="select select-bordered w-full">
-                <option
-                  v-for="backend_type in BACKEND_TYPES"
-                  :value="backend_type.value"
-                  :key="backend_type.value"
-                >
-                  {{ backend_type.label }}
-                </option>
-              </select>
-            </div>
-          </div>
-
-          <div class="form-control">
-            <label class="label"><span class="label-text">描述</span></label>
-            <textarea
-              v-model="form.description"
-              class="textarea textarea-bordered h-20 w-full"
-              placeholder="可选描述信息..."
-            ></textarea>
-          </div>
-
-          <div class="divider">配置参数</div>
-
-          <!-- Local Config -->
-          <div v-if="form.backend_type === 'local'" class="bg-base-200 p-4 rounded-lg">
-            <div class="form-control">
-              <label class="label"><span class="label-text">基础目录 (Base Dir)</span></label>
-              <input
-                type="text"
-                v-model="form.config.base_dir"
-                placeholder="data/files"
-                class="input input-bordered w-full"
-                required
-              />
-              <label class="label"
-                ><span class="label-text-alt text-gray-500">相对于应用根目录或绝对路径</span></label
-              >
-            </div>
-          </div>
-
-          <!-- S3 Config -->
-          <div
-            v-if="S3_BACKEND_TYPES.includes(form.backend_type)"
-            class="bg-base-200 p-4 rounded-lg space-y-4"
-          >
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div class="form-control">
-                <label class="label"><span class="label-text">Bucket Name</span></label>
-                <input
-                  type="text"
-                  v-model="form.config.bucket_name"
-                  class="input input-bordered w-full"
-                  required
-                />
-              </div>
-              <div class="form-control">
-                <label class="label"><span class="label-text">Region Name</span></label>
-                <input
-                  type="text"
-                  v-model="form.config.region_name"
-                  placeholder="us-east-1"
-                  class="input input-bordered w-full"
-                />
-              </div>
-            </div>
-
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div class="form-control">
-                <label class="label"><span class="label-text">Access Key</span></label>
-                <input
-                  type="text"
-                  v-model="form.config.access_key"
-                  class="input input-bordered w-full"
-                  required
-                />
-              </div>
-              <div class="form-control">
-                <label class="label"><span class="label-text">Secret Key</span></label>
-                <input
-                  type="text"
-                  v-model="form.config.secret_key"
-                  class="input input-bordered w-full"
-                  required
-                />
-              </div>
-            </div>
-
-            <div class="form-control">
-              <label class="label"><span class="label-text">Endpoint URL (可选)</span></label>
-              <input
-                type="text"
-                v-model="form.config.endpoint_url"
-                placeholder="https://s3.amazonaws.com"
-                class="input input-bordered w-full"
-              />
-              <label class="label"
-                ><span class="label-text-alt text-gray-500"
-                  >用于 MinIO, 阿里云 OSS 等非 AWS S3 服务</span
-                ></label
-              >
-            </div>
-
-            <div class="form-control">
-              <label class="label"><span class="label-text">Public URL (可选)</span></label>
-              <input
-                type="text"
-                v-model="form.config.public_url"
-                placeholder="https://cdn.example.com"
-                class="input input-bordered w-full"
-              />
-              <label class="label"
-                ><span class="label-text-alt text-gray-500">用于公开访问的自定义域名</span></label
-              >
-            </div>
-
-            <div class="form-control mt-4">
-              <label class="label cursor-pointer justify-start gap-4">
-                <input
-                  type="checkbox"
-                  v-model="form.allow_client_direct_upload"
-                  class="checkbox checkbox-primary"
-                />
-                <div>
-                  <span class="label-text font-medium">启用客户端直传</span>
-                  <p class="text-xs text-gray-500 mt-1">
-                    允许前端直接上传到S3，提升上传速度并减轻服务器负担
-                  </p>
-                </div>
-              </label>
-            </div>
-          </div>
-
-          <div class="form-control mt-4" v-if="!isEditing">
-            <label class="label cursor-pointer justify-start gap-4">
-              <input type="checkbox" v-model="form.is_default" class="checkbox checkbox-primary" />
-              <span class="label-text font-medium">设为默认存储后端</span>
-            </label>
-          </div>
-
-          <div class="modal-action">
-            <button type="button" class="btn" @click="closeModal">取消</button>
-            <button type="submit" class="btn btn-primary" :disabled="submitting">
-              <span v-if="submitting" class="loading loading-spinner loading-xs"></span>
-              {{ isEditing ? '保存修改' : '立即创建' }}
-            </button>
-          </div>
-        </form>
-      </div>
-      <form method="dialog" class="modal-backdrop">
-        <button @click="closeModal">close</button>
-      </form>
-    </dialog>
-
-    <!-- Import Modal -->
-    <dialog id="import_modal" class="modal">
-      <div class="modal-box">
-        <h3 class="font-bold text-lg mb-4">导入存储配置</h3>
-
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text">选择 JSON 配置文件</span>
-          </label>
-          <input
-            type="file"
-            ref="importFileInput"
-            @change="handleFileSelect"
-            accept=".json,application/json"
-            class="file-input file-input-bordered w-full"
-          />
-          <label class="label">
-            <span class="label-text-alt text-gray-500"> 支持导出的 JSON 配置文件 </span>
-          </label>
-        </div>
-
-        <div class="form-control mt-4">
-          <label class="label cursor-pointer">
-            <span class="label-text">替换现有同名配置</span>
-            <input
-              type="checkbox"
-              v-model="importOptions.replaceExisting"
-              class="checkbox checkbox-primary"
-            />
-          </label>
-          <label class="label">
-            <span class="label-text-alt text-gray-500">
-              勾选后，同名配置将被覆盖；不勾选则跳过同名配置
-            </span>
-          </label>
-        </div>
-
-        <!-- Import Result -->
-        <div v-if="importResult" class="mt-4">
-          <div
-            class="alert"
-            :class="importResult.status === 'success' ? 'alert-success' : 'alert-error'"
-          >
-            <svg
-              v-if="importResult.status === 'success'"
-              xmlns="http://www.w3.org/2000/svg"
-              class="stroke-current shrink-0 h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-            <svg
-              v-else
-              xmlns="http://www.w3.org/2000/svg"
-              class="stroke-current shrink-0 h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-            <div>
-              <div class="font-bold">{{ importResult.message }}</div>
-              <div v-if="importResult.stats" class="text-sm mt-1">
-                总计: {{ importResult.stats.total }} | 新增: {{ importResult.stats.imported }} |
-                更新: {{ importResult.stats.updated }} | 跳过: {{ importResult.stats.skipped }}
-              </div>
-              <div
-                v-if="importResult.stats && importResult.stats.errors.length > 0"
-                class="text-sm mt-2"
-              >
-                <details>
-                  <summary class="cursor-pointer">查看错误详情</summary>
-                  <ul class="list-disc list-inside mt-2">
-                    <li v-for="(error, idx) in importResult.stats.errors" :key="idx">
-                      {{ error }}
-                    </li>
-                  </ul>
-                </details>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="modal-action">
-          <button type="button" class="btn" @click="closeImportModal" :disabled="importing">
-            取消
-          </button>
-          <button
-            type="button"
-            class="btn btn-primary"
-            @click="handleImport"
-            :disabled="!selectedFile || importing"
-          >
-            <span v-if="importing" class="loading loading-spinner loading-sm"></span>
-            <span v-else>开始导入</span>
-          </button>
-        </div>
-      </div>
-      <form method="dialog" class="modal-backdrop">
-        <button>close</button>
-      </form>
-    </dialog>
-  </div>
-</template>
-
 <script setup>
 import { ref, reactive, onMounted, watch } from 'vue'
 import storageBackendService from '@/api/storageBackendService'
@@ -550,264 +28,786 @@ const BACKEND_TYPES = [
 
 const S3_BACKEND_TYPES = ['aws_s3', 'aliyun_oss', 'minio', 's3']
 
-const backends = ref([])
-const loading = ref(true)
-const submitting = ref(false)
-const testingId = ref(null)
-const isEditing = ref(false)
-const currentId = ref(null)
+const backends = ref([])
+const loading = ref(true)
+const submitting = ref(false)
+const testingId = ref(null)
+const isEditing = ref(false)
+const currentId = ref(null)
+
+const { showToast } = useToast()
+
+const importing = ref(false)
+const selectedFile = ref(null)
+const importFileInput = ref(null)
+const importResult = ref(null)
+const importOptions = reactive({
+  replaceExisting: false,
+})
+
+const form = reactive({
+  name: '',
+  backend_type: 'local',
+  description: '',
+  is_default: false,
+  allow_client_direct_upload: false,
+  config: {
+    base_dir: 'data/files',
+    bucket_name: '',
+    access_key: '',
+    secret_key: '',
+    endpoint_url: '',
+    region_name: 'us-east-1',
+    public_url: '',
+  },
+})
+
+// Watch backend type to reset config defaults
+watch(
+  () => form.backend_type,
+  (newType) => {
+    if (!isEditing.value) {
+      if (newType === 'local') {
+        form.config = { base_dir: 'data/files' }
+      } else {
+        form.config = {
+          bucket_name: '',
+          access_key: '',
+          secret_key: '',
+          endpoint_url: '',
+          region_name: 'us-east-1',
+          public_url: '',
+        }
+      }
+    }
+  },
+)
+
+const fetchBackends = async () => {
+  loading.value = true
+  try {
+    backends.value = await storageBackendService.getBackends()
+  } catch (error) {
+    showToast('加载存储后端失败', 'error')
+    console.error(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+const openCreateModal = () => {
+  isEditing.value = false
+  currentId.value = null
+  form.name = ''
+  form.backend_type = 'local'
+  form.description = ''
+  form.is_default = false
+  form.allow_client_direct_upload = false
+  form.config = { base_dir: 'data/files' }
+  document.getElementById('backend_modal').showModal()
+}
+
+const openEditModal = (backend) => {
+  isEditing.value = true
+  currentId.value = backend.id
+  form.name = backend.name
+  form.backend_type = backend.backend_type
+  form.description = backend.description
+  form.is_default = backend.is_default
+  form.allow_client_direct_upload = backend.allow_client_direct_upload || false
+  // Deep copy config to avoid reactivity issues
+  form.config = JSON.parse(JSON.stringify(backend.config))
+
+  // Ensure S3 fields exist if switching from local or old data
+  if (form.backend_type === 's3') {
+    form.config = {
+      bucket_name: '',
+      access_key: '',
+      secret_key: '',
+      endpoint_url: '',
+      region_name: 'us-east-1',
+      public_url: '',
+      ...form.config,
+    }
+  }
+
+  document.getElementById('backend_modal').showModal()
+}
+
+const closeModal = () => {
+  document.getElementById('backend_modal').close()
+}
+
+const handleSubmit = async () => {
+  submitting.value = true
+  try {
+    // Clean up config based on type
+    const submitData = {
+      name: form.name,
+      backend_type: form.backend_type,
+      description: form.description,
+      allow_client_direct_upload: S3_BACKEND_TYPES.includes(form.backend_type)
+        ? form.allow_client_direct_upload
+        : false,
+      config: { ...form.config },
+    }
+
+    if (form.backend_type === 'local') {
+      // Remove S3 fields for local
+      submitData.config = { base_dir: form.config.base_dir }
+    }
+
+    if (isEditing.value) {
+      // Update
+      submitData.is_active = true // Keep active on update
+      await storageBackendService.updateBackend(currentId.value, submitData)
+      showToast('更新成功')
+    } else {
+      // Create
+      submitData.is_default = form.is_default
+      await storageBackendService.createBackend(submitData)
+      showToast('创建成功')
+    }
+
+    closeModal()
+    fetchBackends()
+  } catch (error) {
+    showToast(error.response?.data?.detail || '操作失败', 'error')
+  } finally {
+    submitting.value = false
+  }
+}
+
+const handleDelete = async (backend) => {
+  if (!confirm(`确定要删除 "${backend.name}" 吗？此操作不可恢复。`)) return
+
+  try {
+    await storageBackendService.deleteBackend(backend.id)
+    showToast('删除成功')
+    fetchBackends()
+  } catch (error) {
+    showToast(error.response?.data?.detail || '删除失败', 'error')
+  }
+}
+
+const handleSetDefault = async (backend) => {
+  try {
+    await storageBackendService.setDefaultBackend(backend.id)
+    showToast('已设置为默认后端')
+    fetchBackends()
+  } catch (error) {
+    showToast(error.response?.data?.detail || '设置失败', 'error')
+  }
+}
+
+const handleTest = async (backend) => {
+  testingId.value = backend.id
+  try {
+    const res = await storageBackendService.testBackend(backend.id)
+    showToast(res.message || '连接测试成功')
+  } catch (error) {
+    showToast(error.response?.data?.detail || '连接测试失败', 'error')
+  } finally {
+    testingId.value = null
+  }
+}
+
+const handleExport = async () => {
+  try {
+    const response = await storageBackendService.exportConfig()
+    // Create download link
+    const blob = new Blob([JSON.stringify(response, null, 2)], {
+      type: 'application/json',
+    })
+    const url = window.URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `storage_config_${new Date().toISOString().replace(/[:.]/g, '-')}.json`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    window.URL.revokeObjectURL(url)
+    showToast('配置导出成功')
+  } catch (error) {
+    showToast(error.response?.data?.detail || '导出失败', 'error')
+  }
+}
+
+const openImportModal = () => {
+  selectedFile.value = null
+  importResult.value = null
+  importOptions.replaceExisting = false
+  if (importFileInput.value) {
+    importFileInput.value.value = ''
+  }
+  document.getElementById('import_modal').showModal()
+}
 
-const { showToast } = useToast()
+const closeImportModal = () => {
+  document.getElementById('import_modal').close()
+}
 
-const importing = ref(false)
-const selectedFile = ref(null)
-const importFileInput = ref(null)
-const importResult = ref(null)
-const importOptions = reactive({
-  replaceExisting: false,
-})
+const handleFileSelect = (event) => {
+  const file = event.target.files[0]
+  if (file) {
+    selectedFile.value = file
+    importResult.value = null
+  }
+}
 
-const form = reactive({
-  name: '',
-  backend_type: 'local',
-  description: '',
-  is_default: false,
-  allow_client_direct_upload: false,
-  config: {
-    base_dir: 'data/files',
-    bucket_name: '',
-    access_key: '',
-    secret_key: '',
-    endpoint_url: '',
-    region_name: 'us-east-1',
-    public_url: '',
-  },
-})
+const handleImport = async () => {
+  if (!selectedFile.value) return
 
-// Watch backend type to reset config defaults
-watch(
-  () => form.backend_type,
-  (newType) => {
-    if (!isEditing.value) {
-      if (newType === 'local') {
-        form.config = { base_dir: 'data/files' }
-      } else {
-        form.config = {
-          bucket_name: '',
-          access_key: '',
-          secret_key: '',
-          endpoint_url: '',
-          region_name: 'us-east-1',
-          public_url: '',
-        }
-      }
-    }
-  },
-)
+  importing.value = true
+  importResult.value = null
 
-const fetchBackends = async () => {
-  loading.value = true
   try {
-    backends.value = await storageBackendService.getBackends()
+    const formData = new FormData()
+    formData.append('file', selectedFile.value)
+
+    const result = await storageBackendService.importConfig(formData, importOptions.replaceExisting)
+
+    importResult.value = result
+    showToast(result.message || '导入成功')
+
+    // Refresh list if successful
+    if (result.status === 'success') {
+      fetchBackends()
+    }
   } catch (error) {
-    showToast('加载存储后端失败', 'error')
-    console.error(error)
+    importResult.value = {
+      status: 'error',
+      message: error.response?.data?.detail || '导入失败',
+    }
+    showToast(error.response?.data?.detail || '导入失败', 'error')
   } finally {
-    loading.value = false
+    importing.value = false
   }
 }
 
-const openCreateModal = () => {
-  isEditing.value = false
-  currentId.value = null
-  form.name = ''
-  form.backend_type = 'local'
-  form.description = ''
-  form.is_default = false
-  form.allow_client_direct_upload = false
-  form.config = { base_dir: 'data/files' }
-  document.getElementById('backend_modal').showModal()
-}
+onMounted(() => {
+  fetchBackends()
+})
+</script>
 
-const openEditModal = (backend) => {
-  isEditing.value = true
-  currentId.value = backend.id
-  form.name = backend.name
-  form.backend_type = backend.backend_type
-  form.description = backend.description
-  form.is_default = backend.is_default
-  form.allow_client_direct_upload = backend.allow_client_direct_upload || false
-  // Deep copy config to avoid reactivity issues
-  form.config = JSON.parse(JSON.stringify(backend.config))
+<template>
+  <div class="container mx-auto px-4 py-8">
+    <div class="flex justify-between items-center mb-8">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">存储后端管理</h1>
+        <p class="text-gray-500 dark:text-gray-400 mt-1">
+          管理文件存储位置，支持本地存储和 S3 兼容对象存储
+        </p>
+      </div>
+      <div class="flex gap-2">
+        <div class="dropdown dropdown-end">
+          <label tabindex="0" class="btn btn-outline btn-sm">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5 mr-1"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+              />
+            </svg>
+            更多操作
+          </label>
+          <ul
+            tabindex="0"
+            class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52 mt-2"
+          >
+            <li>
+              <a @click="handleExport">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                  />
+                </svg>
+                导出配置
+              </a>
+            </li>
+            <li>
+              <a @click="openImportModal">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L9 8m4-4v12"
+                  />
+                </svg>
+                导入配置
+              </a>
+            </li>
+          </ul>
+        </div>
+        <button class="btn btn-sm btn-primary" @click="openCreateModal">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5 mr-2"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+              clip-rule="evenodd"
+            />
+          </svg>
+          添加存储后端
+        </button>
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="loading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg text-primary"></span>
+    </div>
+
+    <!-- Empty State -->
+    <div
+      v-else-if="backends.length === 0"
+      class="text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-xl"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-16 w-16 mx-auto text-gray-400 mb-4"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
+        />
+      </svg>
+      <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">暂无存储后端</h3>
+      <p class="text-gray-500 dark:text-gray-400 mt-2">请添加一个存储后端以开始存储文件</p>
+    </div>
+
+    <!-- Backend List -->
+    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div
+        v-for="backend in backends"
+        :key="backend.id"
+        class="card bg-base-100 shadow-xl border border-gray-200 dark:border-gray-700 hover:shadow-2xl transition-shadow"
+        :class="{ 'ring-2 ring-primary': backend.is_default }"
+      >
+        <div class="card-body">
+          <div class="flex justify-between items-start">
+            <div class="flex items-center gap-2">
+              <div
+                class="badge badge-lg"
+                :class="backend.backend_type === 'local' ? 'badge-neutral' : 'badge-accent'"
+              >
+                {{ BACKEND_TYPES.find((item) => backend.backend_type === item.value)?.label }}
+              </div>
+              <div v-if="backend.is_default" class="badge badge-primary badge-lg gap-1">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-3 w-3"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                默认
+              </div>
+            </div>
+            <div class="dropdown dropdown-end">
+              <label tabindex="0" class="btn btn-ghost btn-sm btn-circle">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+                  />
+                </svg>
+              </label>
+              <ul
+                tabindex="0"
+                class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
+              >
+                <li><a @click="openEditModal(backend)">编辑配置</a></li>
+                <li v-if="!backend.is_default">
+                  <a @click="handleSetDefault(backend)">设为默认</a>
+                </li>
+                <li v-if="!backend.is_default">
+                  <a class="text-error" @click="handleDelete(backend)">删除后端</a>
+                </li>
+              </ul>
+            </div>
+          </div>
 
-  // Ensure S3 fields exist if switching from local or old data
-  if (form.backend_type === 's3') {
-    form.config = {
-      bucket_name: '',
-      access_key: '',
-      secret_key: '',
-      endpoint_url: '',
-      region_name: 'us-east-1',
-      public_url: '',
-      ...form.config,
-    }
-  }
+          <h2 class="card-title mt-2">{{ backend.name }}</h2>
+          <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 min-h-[2.5rem]">
+            {{ backend.description || '暂无描述' }}
+          </p>
 
-  document.getElementById('backend_modal').showModal()
-}
+          <div class="divider my-2"></div>
 
-const closeModal = () => {
-  document.getElementById('backend_modal').close()
-}
+          <div class="text-xs text-gray-500 space-y-1">
+            <div v-if="backend.backend_type === 'local'">
+              <span class="font-semibold">路径:</span> {{ backend.config.base_dir }}
+            </div>
+            <div v-else>
+              <div><span class="font-semibold">Bucket:</span> {{ backend.config.bucket_name }}</div>
+              <div><span class="font-semibold">Region:</span> {{ backend.config.region_name }}</div>
+              <div v-if="backend.config.endpoint_url">
+                <span class="font-semibold">Endpoint:</span> {{ backend.config.endpoint_url }}
+              </div>
+              <div v-if="backend.config.public_url">
+                <span class="font-semibold">Endpoint:</span> {{ backend.config.public_url }}
+              </div>
+              <div class="mt-2">
+                <span class="font-semibold">客户端直传:</span>
+                <span
+                  class="badge badge-sm ml-1 align-baseline"
+                  :class="backend.allow_client_direct_upload ? 'badge-success' : 'badge-ghost'"
+                >
+                  {{ backend.allow_client_direct_upload ? '已启用' : '未启用' }}
+                </span>
+              </div>
+            </div>
+          </div>
 
-const handleSubmit = async () => {
-  submitting.value = true
-  try {
-    // Clean up config based on type
-    const submitData = {
-      name: form.name,
-      backend_type: form.backend_type,
-      description: form.description,
-      allow_client_direct_upload: S3_BACKEND_TYPES.includes(form.backend_type)
-        ? form.allow_client_direct_upload
-        : false,
-      config: { ...form.config },
-    }
+          <div class="card-actions justify-end mt-4">
+            <button
+              class="btn btn-sm btn-outline"
+              :disabled="testingId === backend.id"
+              @click="handleTest(backend)"
+            >
+              <span
+                v-if="testingId === backend.id"
+                class="loading loading-spinner loading-xs"
+              ></span>
+              <span v-else>测试连接</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
 
-    if (form.backend_type === 'local') {
-      // Remove S3 fields for local
-      submitData.config = { base_dir: form.config.base_dir }
-    }
+    <!-- Create/Edit Modal -->
+    <dialog id="backend_modal" class="modal">
+      <div class="modal-box w-11/12 max-w-3xl">
+        <h3 class="font-bold text-lg mb-4">{{ isEditing ? '编辑存储后端' : '添加存储后端' }}</h3>
 
-    if (isEditing.value) {
-      // Update
-      submitData.is_active = true // Keep active on update
-      await storageBackendService.updateBackend(currentId.value, submitData)
-      showToast('更新成功')
-    } else {
-      // Create
-      submitData.is_default = form.is_default
-      await storageBackendService.createBackend(submitData)
-      showToast('创建成功')
-    }
+        <form class="space-y-4" @submit.prevent="handleSubmit">
+          <!-- Basic Info -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="form-control">
+              <label class="label"><span class="label-text">名称</span></label>
+              <input
+                v-model="form.name"
+                type="text"
+                placeholder="例如: 主S3存储"
+                class="input input-bordered w-full"
+                required
+              />
+            </div>
 
-    closeModal()
-    fetchBackends()
-  } catch (error) {
-    showToast(error.response?.data?.detail || '操作失败', 'error')
-  } finally {
-    submitting.value = false
-  }
-}
+            <div class="form-control">
+              <label class="label"><span class="label-text">类型</span></label>
+              <select v-model="form.backend_type" class="select select-bordered w-full">
+                <option
+                  v-for="backend_type in BACKEND_TYPES"
+                  :key="backend_type.value"
+                  :value="backend_type.value"
+                >
+                  {{ backend_type.label }}
+                </option>
+              </select>
+            </div>
+          </div>
 
-const handleDelete = async (backend) => {
-  if (!confirm(`确定要删除 "${backend.name}" 吗？此操作不可恢复。`)) return
+          <div class="form-control">
+            <label class="label"><span class="label-text">描述</span></label>
+            <textarea
+              v-model="form.description"
+              class="textarea textarea-bordered h-20 w-full"
+              placeholder="可选描述信息..."
+            ></textarea>
+          </div>
 
-  try {
-    await storageBackendService.deleteBackend(backend.id)
-    showToast('删除成功')
-    fetchBackends()
-  } catch (error) {
-    showToast(error.response?.data?.detail || '删除失败', 'error')
-  }
-}
+          <div class="divider">配置参数</div>
 
-const handleSetDefault = async (backend) => {
-  try {
-    await storageBackendService.setDefaultBackend(backend.id)
-    showToast('已设置为默认后端')
-    fetchBackends()
-  } catch (error) {
-    showToast(error.response?.data?.detail || '设置失败', 'error')
-  }
-}
+          <!-- Local Config -->
+          <div v-if="form.backend_type === 'local'" class="bg-base-200 p-4 rounded-lg">
+            <div class="form-control">
+              <label class="label"><span class="label-text">基础目录 (Base Dir)</span></label>
+              <input
+                v-model="form.config.base_dir"
+                type="text"
+                placeholder="data/files"
+                class="input input-bordered w-full"
+                required
+              />
+              <label class="label"
+                ><span class="label-text-alt text-gray-500">相对于应用根目录或绝对路径</span></label
+              >
+            </div>
+          </div>
 
-const handleTest = async (backend) => {
-  testingId.value = backend.id
-  try {
-    const res = await storageBackendService.testBackend(backend.id)
-    showToast(res.message || '连接测试成功')
-  } catch (error) {
-    showToast(error.response?.data?.detail || '连接测试失败', 'error')
-  } finally {
-    testingId.value = null
-  }
-}
+          <!-- S3 Config -->
+          <div
+            v-if="S3_BACKEND_TYPES.includes(form.backend_type)"
+            class="bg-base-200 p-4 rounded-lg space-y-4"
+          >
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="form-control">
+                <label class="label"><span class="label-text">Bucket Name</span></label>
+                <input
+                  v-model="form.config.bucket_name"
+                  type="text"
+                  class="input input-bordered w-full"
+                  required
+                />
+              </div>
+              <div class="form-control">
+                <label class="label"><span class="label-text">Region Name</span></label>
+                <input
+                  v-model="form.config.region_name"
+                  type="text"
+                  placeholder="us-east-1"
+                  class="input input-bordered w-full"
+                />
+              </div>
+            </div>
 
-const handleExport = async () => {
-  try {
-    const response = await storageBackendService.exportConfig()
-    // Create download link
-    const blob = new Blob([JSON.stringify(response, null, 2)], {
-      type: 'application/json',
-    })
-    const url = window.URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `storage_config_${new Date().toISOString().replace(/[:.]/g, '-')}.json`
-    document.body.appendChild(a)
-    a.click()
-    document.body.removeChild(a)
-    window.URL.revokeObjectURL(url)
-    showToast('配置导出成功')
-  } catch (error) {
-    showToast(error.response?.data?.detail || '导出失败', 'error')
-  }
-}
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="form-control">
+                <label class="label"><span class="label-text">Access Key</span></label>
+                <input
+                  v-model="form.config.access_key"
+                  type="text"
+                  class="input input-bordered w-full"
+                  required
+                />
+              </div>
+              <div class="form-control">
+                <label class="label"><span class="label-text">Secret Key</span></label>
+                <input
+                  v-model="form.config.secret_key"
+                  type="text"
+                  class="input input-bordered w-full"
+                  required
+                />
+              </div>
+            </div>
 
-const openImportModal = () => {
-  selectedFile.value = null
-  importResult.value = null
-  importOptions.replaceExisting = false
-  if (importFileInput.value) {
-    importFileInput.value.value = ''
-  }
-  document.getElementById('import_modal').showModal()
-}
+            <div class="form-control">
+              <label class="label"><span class="label-text">Endpoint URL (可选)</span></label>
+              <input
+                v-model="form.config.endpoint_url"
+                type="text"
+                placeholder="https://s3.amazonaws.com"
+                class="input input-bordered w-full"
+              />
+              <label class="label"
+                ><span class="label-text-alt text-gray-500"
+                  >用于 MinIO, 阿里云 OSS 等非 AWS S3 服务</span
+                ></label
+              >
+            </div>
 
-const closeImportModal = () => {
-  document.getElementById('import_modal').close()
-}
+            <div class="form-control">
+              <label class="label"><span class="label-text">Public URL (可选)</span></label>
+              <input
+                v-model="form.config.public_url"
+                type="text"
+                placeholder="https://cdn.example.com"
+                class="input input-bordered w-full"
+              />
+              <label class="label"
+                ><span class="label-text-alt text-gray-500">用于公开访问的自定义域名</span></label
+              >
+            </div>
 
-const handleFileSelect = (event) => {
-  const file = event.target.files[0]
-  if (file) {
-    selectedFile.value = file
-    importResult.value = null
-  }
-}
+            <div class="form-control mt-4">
+              <label class="label cursor-pointer justify-start gap-4">
+                <input
+                  v-model="form.allow_client_direct_upload"
+                  type="checkbox"
+                  class="checkbox checkbox-primary"
+                />
+                <div>
+                  <span class="label-text font-medium">启用客户端直传</span>
+                  <p class="text-xs text-gray-500 mt-1">
+                    允许前端直接上传到S3，提升上传速度并减轻服务器负担
+                  </p>
+                </div>
+              </label>
+            </div>
+          </div>
 
-const handleImport = async () => {
-  if (!selectedFile.value) return
+          <div v-if="!isEditing" class="form-control mt-4">
+            <label class="label cursor-pointer justify-start gap-4">
+              <input v-model="form.is_default" type="checkbox" class="checkbox checkbox-primary" />
+              <span class="label-text font-medium">设为默认存储后端</span>
+            </label>
+          </div>
 
-  importing.value = true
-  importResult.value = null
+          <div class="modal-action">
+            <button type="button" class="btn" @click="closeModal">取消</button>
+            <button type="submit" class="btn btn-primary" :disabled="submitting">
+              <span v-if="submitting" class="loading loading-spinner loading-xs"></span>
+              {{ isEditing ? '保存修改' : '立即创建' }}
+            </button>
+          </div>
+        </form>
+      </div>
+      <form method="dialog" class="modal-backdrop">
+        <button @click="closeModal">close</button>
+      </form>
+    </dialog>
 
-  try {
-    const formData = new FormData()
-    formData.append('file', selectedFile.value)
+    <!-- Import Modal -->
+    <dialog id="import_modal" class="modal">
+      <div class="modal-box">
+        <h3 class="font-bold text-lg mb-4">导入存储配置</h3>
 
-    const result = await storageBackendService.importConfig(formData, importOptions.replaceExisting)
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">选择 JSON 配置文件</span>
+          </label>
+          <input
+            ref="importFileInput"
+            type="file"
+            accept=".json,application/json"
+            class="file-input file-input-bordered w-full"
+            @change="handleFileSelect"
+          />
+          <label class="label">
+            <span class="label-text-alt text-gray-500"> 支持导出的 JSON 配置文件 </span>
+          </label>
+        </div>
 
-    importResult.value = result
-    showToast(result.message || '导入成功')
+        <div class="form-control mt-4">
+          <label class="label cursor-pointer">
+            <span class="label-text">替换现有同名配置</span>
+            <input
+              v-model="importOptions.replaceExisting"
+              type="checkbox"
+              class="checkbox checkbox-primary"
+            />
+          </label>
+          <label class="label">
+            <span class="label-text-alt text-gray-500">
+              勾选后，同名配置将被覆盖；不勾选则跳过同名配置
+            </span>
+          </label>
+        </div>
 
-    // Refresh list if successful
-    if (result.status === 'success') {
-      fetchBackends()
-    }
-  } catch (error) {
-    importResult.value = {
-      status: 'error',
-      message: error.response?.data?.detail || '导入失败',
-    }
-    showToast(error.response?.data?.detail || '导入失败', 'error')
-  } finally {
-    importing.value = false
-  }
-}
+        <!-- Import Result -->
+        <div v-if="importResult" class="mt-4">
+          <div
+            class="alert"
+            :class="importResult.status === 'success' ? 'alert-success' : 'alert-error'"
+          >
+            <svg
+              v-if="importResult.status === 'success'"
+              xmlns="http://www.w3.org/2000/svg"
+              class="stroke-current shrink-0 h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <svg
+              v-else
+              xmlns="http://www.w3.org/2000/svg"
+              class="stroke-current shrink-0 h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <div>
+              <div class="font-bold">{{ importResult.message }}</div>
+              <div v-if="importResult.stats" class="text-sm mt-1">
+                总计: {{ importResult.stats.total }} | 新增: {{ importResult.stats.imported }} |
+                更新: {{ importResult.stats.updated }} | 跳过: {{ importResult.stats.skipped }}
+              </div>
+              <div
+                v-if="importResult.stats && importResult.stats.errors.length > 0"
+                class="text-sm mt-2"
+              >
+                <details>
+                  <summary class="cursor-pointer">查看错误详情</summary>
+                  <ul class="list-disc list-inside mt-2">
+                    <li v-for="(error, idx) in importResult.stats.errors" :key="idx">
+                      {{ error }}
+                    </li>
+                  </ul>
+                </details>
+              </div>
+            </div>
+          </div>
+        </div>
 
-onMounted(() => {
-  fetchBackends()
-})
-</script>
+        <div class="modal-action">
+          <button type="button" class="btn" :disabled="importing" @click="closeImportModal">
+            取消
+          </button>
+          <button
+            type="button"
+            class="btn btn-primary"
+            :disabled="!selectedFile || importing"
+            @click="handleImport"
+          >
+            <span v-if="importing" class="loading loading-spinner loading-sm"></span>
+            <span v-else>开始导入</span>
+          </button>
+        </div>
+      </div>
+      <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+      </form>
+    </dialog>
+  </div>
+</template>
diff --git a/web/src/views/files/FileDetailView.vue b/web/src/views/files/FileDetailView.vue
index 591acd9..9df7be2 100644
--- a/web/src/views/files/FileDetailView.vue
+++ b/web/src/views/files/FileDetailView.vue
@@ -117,7 +117,7 @@ onMounted(() => {
     <div v-else-if="file" class="container mx-auto px-4 py-6">
       <!-- 头部导航 -->
       <div class="mb-6">
-        <button @click="goBack" class="btn btn-ghost gap-2">
+        <button class="btn btn-ghost gap-2" @click="goBack">
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               stroke-linecap="round"
@@ -155,7 +155,7 @@ onMounted(() => {
                   <span class="badge badge-outline"
                     >{{ getFileExtension(file.filename) }} 文件</span
                   >
-                  <span class="badge badge-outline badge-warning" v-if="file.is_deleted === 1"
+                  <span v-if="file.is_deleted === 1" class="badge badge-outline badge-warning"
                     >在回收站</span
                   >
                 </div>
@@ -243,7 +243,7 @@ onMounted(() => {
                 </svg>
                 下载文件
               </a>
-              <button @click="handleManageNotes" class="btn btn-outline w-full gap-2">
+              <button class="btn btn-outline w-full gap-2" @click="handleManageNotes">
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
                     stroke-linecap="round"
@@ -258,9 +258,9 @@ onMounted(() => {
                 }}</span>
               </button>
               <button
-                @click="showRenameModal = true"
-                class="btn btn-outline w-full gap-2"
                 v-if="!file.is_deleted === 1"
+                class="btn btn-outline w-full gap-2"
+                @click="showRenameModal = true"
               >
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
@@ -273,9 +273,9 @@ onMounted(() => {
                 重命名
               </button>
               <button
-                @click="handleDelete"
-                class="btn btn-outline btn-error w-full gap-2"
                 v-if="!file.is_deleted === 1"
+                class="btn btn-outline btn-error w-full gap-2"
+                @click="handleDelete"
               >
                 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
@@ -307,9 +307,9 @@ onMounted(() => {
                     {{ file.filename }}
                   </p>
                   <button
-                    @click="copyToClipboard(file.filename)"
                     class="btn btn-xs btn-ghost text-gray-400 hover:text-blue-500"
                     title="复制"
+                    @click="copyToClipboard(file.filename)"
                   >
                     <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path
@@ -356,9 +356,9 @@ onMounted(() => {
                     {{ file.hash }}
                   </p>
                   <button
-                    @click="copyToClipboard(file.hash)"
                     class="btn btn-xs btn-ghost text-gray-400 hover:text-blue-500"
                     title="复制"
+                    @click="copyToClipboard(file.hash)"
                   >
                     <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path
@@ -456,9 +456,9 @@ onMounted(() => {
                     {{ file.id }}
                   </p>
                   <button
-                    @click="copyToClipboard(file.id)"
                     class="btn btn-xs btn-ghost text-gray-400 hover:text-blue-500"
                     title="复制"
+                    @click="copyToClipboard(file.id)"
                   >
                     <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path
@@ -508,12 +508,12 @@ onMounted(() => {
           type="text"
           placeholder="文件名"
           class="input input-bordered w-full mb-4"
-          @keyup.enter="handleRename"
           autoFocus
+          @keyup.enter="handleRename"
         />
         <div class="flex justify-end gap-2">
-          <button @click="showRenameModal = false" class="btn btn-ghost">取消</button>
-          <button @click="handleRename" class="btn btn-primary">保存</button>
+          <button class="btn btn-ghost" @click="showRenameModal = false">取消</button>
+          <button class="btn btn-primary" @click="handleRename">保存</button>
         </div>
       </div>
     </div>
diff --git a/web/src/views/files/FilesView.vue b/web/src/views/files/FilesView.vue
index a62ea52..4731c1d 100644
--- a/web/src/views/files/FilesView.vue
+++ b/web/src/views/files/FilesView.vue
@@ -433,29 +433,29 @@ onMounted(async () => {
           </div>
           <div class="flex gap-2">
             <button
-              @click="toggleSelectionMode"
               class="btn"
               :class="isSelectionMode ? 'btn-secondary' : 'btn-ghost'"
+              @click="toggleSelectionMode"
             >
               {{ isSelectionMode ? '取消选择' : '批量选择' }}
             </button>
             <div v-if="isSelectionMode" class="flex gap-2">
               <button
-                @click="batchDelete"
                 class="btn btn-error"
                 :disabled="selectedFiles.length === 0 && selectedFolders.length === 0"
+                @click="batchDelete"
               >
                 删除
               </button>
               <button
-                @click="openBatchMoveModal"
                 class="btn btn-info"
                 :disabled="selectedFiles.length === 0 && selectedFolders.length === 0"
+                @click="openBatchMoveModal"
               >
                 移动
               </button>
             </div>
-            <button @click="showCreateFolderModal = true" class="btn btn-primary gap-2">
+            <button class="btn btn-primary gap-2" @click="showCreateFolderModal = true">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="h-5 w-5"
@@ -472,7 +472,7 @@ onMounted(async () => {
               </svg>
               新建文件夹
             </button>
-            <button @click="showUploadModal = !showUploadModal" class="btn btn-primary gap-2">
+            <button class="btn btn-primary gap-2" @click="showUploadModal = !showUploadModal">
               <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   stroke-linecap="round"
@@ -492,8 +492,8 @@ onMounted(async () => {
         <ul>
           <li v-for="(crumb, index) in breadcrumbs" :key="crumb.id">
             <a
-              @click="navigateBreadcrumb(index)"
               :class="{ 'font-bold': index === breadcrumbs.length - 1 }"
+              @click="navigateBreadcrumb(index)"
             >
               {{ crumb.name }}
             </a>
@@ -512,12 +512,12 @@ onMounted(async () => {
             type="text"
             placeholder="Folder Name"
             class="input input-bordered w-full mb-4"
-            @keyup.enter="renameFolder"
             autoFocus
+            @keyup.enter="renameFolder"
           />
           <div class="flex justify-end gap-2">
-            <button @click="showRenameFolderModal = false" class="btn btn-ghost">取消</button>
-            <button @click="renameFolder" class="btn btn-primary">保存</button>
+            <button class="btn btn-ghost" @click="showRenameFolderModal = false">取消</button>
+            <button class="btn btn-primary" @click="renameFolder">保存</button>
           </div>
         </div>
       </div>
@@ -534,12 +534,12 @@ onMounted(async () => {
             type="text"
             placeholder="File Name"
             class="input input-bordered w-full mb-4"
-            @keyup.enter="confirmRenameFile"
             autoFocus
+            @keyup.enter="confirmRenameFile"
           />
           <div class="flex justify-end gap-2">
-            <button @click="showRenameFileModal = false" class="btn btn-ghost">取消</button>
-            <button @click="confirmRenameFile" class="btn btn-primary">保存</button>
+            <button class="btn btn-ghost" @click="showRenameFileModal = false">取消</button>
+            <button class="btn btn-primary" @click="confirmRenameFile">保存</button>
           </div>
         </div>
       </div>
@@ -556,12 +556,12 @@ onMounted(async () => {
             type="text"
             placeholder="Folder Name"
             class="input input-bordered w-full mb-4"
-            @keyup.enter="createFolder"
             autoFocus
+            @keyup.enter="createFolder"
           />
           <div class="flex justify-end gap-2">
-            <button @click="showCreateFolderModal = false" class="btn btn-ghost">取消</button>
-            <button @click="createFolder" class="btn btn-primary">新建</button>
+            <button class="btn btn-ghost" @click="showCreateFolderModal = false">取消</button>
+            <button class="btn btn-primary" @click="createFolder">新建</button>
           </div>
         </div>
       </div>
@@ -576,9 +576,9 @@ onMounted(async () => {
 
             <button
               v-if="supportsDirectUpload"
-              @click="uploadMode = uploadMode === 'traditional' ? 'direct' : 'traditional'"
               class="btn btn-outline btn-sm"
               :title="uploadMode === 'traditional' ? '切换到直传模式' : '切换到普通模式'"
+              @click="uploadMode = uploadMode === 'traditional' ? 'direct' : 'traditional'"
             >
               <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
@@ -685,7 +685,7 @@ onMounted(async () => {
           <div class="text-6xl mb-4">📂</div>
           <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">暂无文件</h3>
           <p class="text-gray-500 mb-6">开始上传一些文件，让您的内容库丰富起来吧！</p>
-          <button @click="showUploadModal = true" class="btn btn-primary">📤 上传第一个文件</button>
+          <button class="btn btn-primary" @click="showUploadModal = true">📤 上传第一个文件</button>
         </div>
 
         <div
@@ -701,8 +701,8 @@ onMounted(async () => {
         </div>
 
         <DragUploadZone
-          :showSelected="false"
           v-else
+          :show-selected="false"
           :folder-id="currentFolderId"
           :upload-mode="uploadMode"
           @upload-complete="handleDragUploadComplete"
@@ -726,7 +726,7 @@ onMounted(async () => {
               @rename-file="handleRenameFile"
             />
             <!-- Pagination -->
-            <div class="flex justify-center mt-6" v-if="totalPages > 1">
+            <div v-if="totalPages > 1" class="flex justify-center mt-6">
               <div class="join">
                 <button
                   class="join-item btn"
@@ -786,8 +786,8 @@ onMounted(async () => {
           <ul>
             <li v-for="(crumb, index) in moveBreadcrumbs" :key="crumb.id">
               <a
-                @click="navigateMoveBreadcrumb(index)"
                 :class="{ 'font-bold': index === moveBreadcrumbs.length - 1 }"
+                @click="navigateMoveBreadcrumb(index)"
               >
                 {{ crumb.name }}
               </a>
@@ -807,7 +807,7 @@ onMounted(async () => {
           </div>
           <ul v-else class="menu w-full p-0">
             <li v-for="folder in moveFolders" :key="folder.id">
-              <a @click="enterMoveFolder(folder)" class="flex justify-between">
+              <a class="flex justify-between" @click="enterMoveFolder(folder)">
                 <span class="flex items-center gap-2">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -845,8 +845,8 @@ onMounted(async () => {
             移动到: {{ moveBreadcrumbs[moveBreadcrumbs.length - 1]?.name }}
           </div>
           <div class="flex gap-2">
-            <button @click="showBatchMoveModal = false" class="btn btn-ghost">取消</button>
-            <button @click="confirmBatchMove" class="btn btn-primary">移动到此处</button>
+            <button class="btn btn-ghost" @click="showBatchMoveModal = false">取消</button>
+            <button class="btn btn-primary" @click="confirmBatchMove">移动到此处</button>
           </div>
         </div>
       </div>
diff --git a/web/src/views/files/RecycleBinView.vue b/web/src/views/files/RecycleBinView.vue
index 24d5b61..b5c4b5a 100644
--- a/web/src/views/files/RecycleBinView.vue
+++ b/web/src/views/files/RecycleBinView.vue
@@ -86,16 +86,16 @@ onMounted(() => {
         </div>
         <div class="flex gap-2">
           <button
-            @click="restoreItems"
             class="btn btn-success"
             :disabled="selectedFiles.length === 0 && selectedFolders.length === 0"
+            @click="restoreItems"
           >
             还原
           </button>
           <button
-            @click="permanentDeleteItems"
             class="btn btn-error"
             :disabled="selectedFiles.length === 0 && selectedFolders.length === 0"
+            @click="permanentDeleteItems"
           >
             彻底删除
           </button>
@@ -113,7 +113,7 @@ onMounted(() => {
           :selection-mode="isSelectionMode"
           :selected-files="selectedFiles"
           :selected-folders="selectedFolders"
-          :isShowOperationBtn="false"
+          :is-show-operation-btn="false"
           @view-details="handleViewDetails"
           @selection-change="handleSelectionChange"
         />
diff --git a/web/src/views/index/HomeView.vue b/web/src/views/index/HomeView.vue
index b6aaba8..5f345f6 100644
--- a/web/src/views/index/HomeView.vue
+++ b/web/src/views/index/HomeView.vue
@@ -1,3 +1,83 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { RouterLink, useRouter } from 'vue-router'
+import fileService from '../../api/fileService.js'
+import noteService from '../../api/noteService.js'
+import statsService from '../../api/statsService.js'
+import { formatSize } from '@/utils/format'
+import { getFileIcon, getFileTypeColor } from '@/utils/file'
+import { useAuthStore } from '@/stores/auth.js'
+
+const router = useRouter()
+
+const stats = ref({
+  totalFiles: 0,
+  totalNotes: 0,
+  totalSize: 0,
+  todayActivity: 0,
+})
+
+const recentFiles = ref([])
+const recentNotes = ref([])
+
+// 格式化日期
+const formatDate = (dateString) => {
+  const date = new Date(dateString)
+  const now = new Date()
+  const diff = now - date
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+
+  if (days === 0) return '今天'
+  if (days === 1) return '昨天'
+  if (days < 7) return `${days}天前`
+  return date.toLocaleDateString()
+}
+
+// 导航到页面
+const goToFiles = () => router.push('/files')
+const goToNotes = () => router.push('/notes')
+
+// 加载数据
+const loadData = async () => {
+  try {
+    // 加载统计数据
+    const statsData = await statsService.getStats()
+    stats.value.totalFiles = statsData.file_count
+    stats.value.totalSize = statsData.storage_usage
+    stats.value.totalNotes = statsData.note_count
+    stats.value.todayActivity = statsData.today_activity
+
+    // 加载文件列表用于展示最近文件
+    const filesResponse = await fileService.getFiles()
+    const files = filesResponse.data || []
+
+    // 最近文件（最多5个）
+    recentFiles.value = files
+      .sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
+      .slice(0, 5)
+
+    // 加载笔记列表用于展示最近笔记
+    const notesResponse = await noteService.getNotes()
+    const notes = notesResponse.data || []
+
+    // 最近笔记（最多5个）
+    recentNotes.value = notes
+      .sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at))
+      .slice(0, 5)
+  } catch (error) {
+    console.error('Failed to load dashboard data', error)
+  }
+}
+
+const { isAuthenticated } = useAuthStore()
+
+onMounted(() => {
+  if (isAuthenticated) {
+    loadData()
+  }
+})
+</script>
+
 <template>
   <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
     <!-- 头部欢迎区域 -->
@@ -336,83 +416,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { RouterLink, useRouter } from 'vue-router'
-import fileService from '../../api/fileService.js'
-import noteService from '../../api/noteService.js'
-import statsService from '../../api/statsService.js'
-import { formatSize } from '@/utils/format'
-import { getFileIcon, getFileTypeColor } from '@/utils/file'
-import { useAuthStore } from '@/stores/auth.js'
-
-const router = useRouter()
-
-const stats = ref({
-  totalFiles: 0,
-  totalNotes: 0,
-  totalSize: 0,
-  todayActivity: 0,
-})
-
-const recentFiles = ref([])
-const recentNotes = ref([])
-
-// 格式化日期
-const formatDate = (dateString) => {
-  const date = new Date(dateString)
-  const now = new Date()
-  const diff = now - date
-  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
-
-  if (days === 0) return '今天'
-  if (days === 1) return '昨天'
-  if (days < 7) return `${days}天前`
-  return date.toLocaleDateString()
-}
-
-// 导航到页面
-const goToFiles = () => router.push('/files')
-const goToNotes = () => router.push('/notes')
-
-// 加载数据
-const loadData = async () => {
-  try {
-    // 加载统计数据
-    const statsData = await statsService.getStats()
-    stats.value.totalFiles = statsData.file_count
-    stats.value.totalSize = statsData.storage_usage
-    stats.value.totalNotes = statsData.note_count
-    stats.value.todayActivity = statsData.today_activity
-
-    // 加载文件列表用于展示最近文件
-    const filesResponse = await fileService.getFiles()
-    const files = filesResponse.data || []
-
-    // 最近文件（最多5个）
-    recentFiles.value = files
-      .sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
-      .slice(0, 5)
-
-    // 加载笔记列表用于展示最近笔记
-    const notesResponse = await noteService.getNotes()
-    const notes = notesResponse.data || []
-
-    // 最近笔记（最多5个）
-    recentNotes.value = notes
-      .sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at))
-      .slice(0, 5)
-  } catch (error) {
-    console.error('Failed to load dashboard data', error)
-  }
-}
-
-const { isAuthenticated } = useAuthStore()
-
-onMounted(() => {
-  if (isAuthenticated) {
-    loadData()
-  }
-})
-</script>
diff --git a/web/src/views/index/SearchView.vue b/web/src/views/index/SearchView.vue
index aeaaab7..f594fb8 100644
--- a/web/src/views/index/SearchView.vue
+++ b/web/src/views/index/SearchView.vue
@@ -1,3 +1,140 @@
+<script setup>
+import { ref, watch, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import fileService from '../../api/fileService.js'
+import noteService from '../../api/noteService.js'
+import FileGrid from '../../components/FileGrid.vue'
+import FileDetails from '../../components/FileDetails.vue'
+import UnifiedNotes from '../../components/UnifiedNotes.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const query = ref('')
+const searchInput = ref('')
+const files = ref([])
+const notes = ref([])
+const loading = ref(false)
+const searchTime = ref(0)
+const activeTab = ref('all')
+const detailsFile = ref(null)
+const showDetails = ref(false)
+const notesItem = ref(null)
+const notesItemType = ref('file')
+const showNotes = ref(false)
+
+// 计算属性
+const totalResults = computed(() => files.value.length + notes.value.length)
+const hasResults = computed(() => totalResults.value > 0)
+
+// 格式化日期
+const formatDate = (dateString) => {
+  const date = new Date(dateString)
+  const now = new Date()
+  const diff = now - date
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+
+  if (days === 0) return '今天'
+  if (days === 1) return '昨天'
+  if (days < 7) return `${days}天前`
+  return date.toLocaleDateString()
+}
+
+// 高亮搜索文本
+const highlightText = (text, searchQuery) => {
+  if (!searchQuery || !text) return text
+
+  // 简单高亮实现，实际项目中可能需要更复杂的处理
+  const regex = new RegExp(`(${searchQuery})`, 'gi')
+  return text.replace(regex, '<mark class="bg-yellow-200 dark:bg-yellow-600">$1</mark>')
+}
+
+// 执行搜索
+const performSearch = async () => {
+  const searchQuery = searchInput.value.trim() || query.value.trim()
+  if (!searchQuery) return
+
+  // 更新URL
+  if (searchQuery !== route.query.q) {
+    router.push({ query: { q: searchQuery } })
+    return
+  }
+
+  loading.value = true
+  const startTime = Date.now()
+
+  try {
+    const [filesRes, notesRes] = await Promise.all([
+      fileService.getFiles({ q: searchQuery }),
+      noteService.getNotes({ q: searchQuery }),
+    ])
+
+    files.value = filesRes.data || []
+    notes.value = notesRes.data || []
+
+    searchTime.value = Date.now() - startTime
+  } catch (error) {
+    console.error('Search failed', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 事件处理
+const handleDelete = async (id) => {
+  if (!confirm('确定要删除这个文件吗？')) return
+  try {
+    await fileService.deleteFile(id)
+    showDetails.value = false
+    await performSearch()
+  } catch (error) {
+    console.error('Failed to delete file', error)
+  }
+}
+
+const handleViewDetails = (file) => {
+  detailsFile.value = file
+  showDetails.value = true
+}
+
+const handleCloseDetails = () => {
+  showDetails.value = false
+  detailsFile.value = null
+}
+
+const handleManageNotes = (item, type) => {
+  notesItem.value = item
+  notesItemType.value = type
+  showNotes.value = true
+  detailsFile.value = null
+}
+
+const closeNotes = () => {
+  showNotes.value = false
+  notesItem.value = null
+}
+
+const openNote = (note) => {
+  router.push({ path: `/note/${note.id}` })
+}
+
+// 监听路由查询参数变化
+watch(
+  () => route.query.q,
+  (newQ) => {
+    query.value = newQ || ''
+    searchInput.value = newQ || ''
+    if (newQ) {
+      performSearch()
+    } else {
+      files.value = []
+      notes.value = []
+    }
+  },
+  { immediate: true },
+)
+</script>
+
 <template>
   <div class="bg-gray-50 dark:bg-gray-900">
     <div class="container mx-auto px-4 py-8">
@@ -35,15 +172,15 @@
               </div>
               <input
                 v-model="searchInput"
-                @keyup.enter="performSearch"
                 type="text"
                 placeholder="搜索文件名、笔记内容..."
                 class="w-full pl-12 pr-16 py-4 text-lg border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                @keyup.enter="performSearch"
               />
               <button
-                @click="performSearch"
                 class="absolute right-2 top-1/2 transform -translate-y-1/2 btn btn-primary btn-sm"
                 :disabled="loading"
+                @click="performSearch"
               >
                 <span v-if="loading" class="loading loading-spinner loading-xs"></span>
                 <span v-else>搜索</span>
@@ -66,20 +203,20 @@
           <!-- 结果类型筛选 -->
           <div class="flex gap-2">
             <button
-              @click="activeTab = 'all'"
               :class="['btn btn-sm', activeTab === 'all' ? 'btn-primary' : 'btn-ghost']"
+              @click="activeTab = 'all'"
             >
               全部 ({{ totalResults }})
             </button>
             <button
-              @click="activeTab = 'files'"
               :class="['btn btn-sm', activeTab === 'files' ? 'btn-primary' : 'btn-ghost']"
+              @click="activeTab = 'files'"
             >
               文件 ({{ files.length }})
             </button>
             <button
-              @click="activeTab = 'notes'"
               :class="['btn btn-sm', activeTab === 'notes' ? 'btn-primary' : 'btn-ghost']"
+              @click="activeTab = 'notes'"
             >
               笔记 ({{ notes.length }})
             </button>
@@ -252,140 +389,3 @@
     />
   </div>
 </template>
-
-<script setup>
-import { ref, watch, computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import fileService from '../../api/fileService.js'
-import noteService from '../../api/noteService.js'
-import FileGrid from '../../components/FileGrid.vue'
-import FileDetails from '../../components/FileDetails.vue'
-import UnifiedNotes from '../../components/UnifiedNotes.vue'
-
-const route = useRoute()
-const router = useRouter()
-
-const query = ref('')
-const searchInput = ref('')
-const files = ref([])
-const notes = ref([])
-const loading = ref(false)
-const searchTime = ref(0)
-const activeTab = ref('all')
-const detailsFile = ref(null)
-const showDetails = ref(false)
-const notesItem = ref(null)
-const notesItemType = ref('file')
-const showNotes = ref(false)
-
-// 计算属性
-const totalResults = computed(() => files.value.length + notes.value.length)
-const hasResults = computed(() => totalResults.value > 0)
-
-// 格式化日期
-const formatDate = (dateString) => {
-  const date = new Date(dateString)
-  const now = new Date()
-  const diff = now - date
-  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
-
-  if (days === 0) return '今天'
-  if (days === 1) return '昨天'
-  if (days < 7) return `${days}天前`
-  return date.toLocaleDateString()
-}
-
-// 高亮搜索文本
-const highlightText = (text, searchQuery) => {
-  if (!searchQuery || !text) return text
-
-  // 简单高亮实现，实际项目中可能需要更复杂的处理
-  const regex = new RegExp(`(${searchQuery})`, 'gi')
-  return text.replace(regex, '<mark class="bg-yellow-200 dark:bg-yellow-600">$1</mark>')
-}
-
-// 执行搜索
-const performSearch = async () => {
-  const searchQuery = searchInput.value.trim() || query.value.trim()
-  if (!searchQuery) return
-
-  // 更新URL
-  if (searchQuery !== route.query.q) {
-    router.push({ query: { q: searchQuery } })
-    return
-  }
-
-  loading.value = true
-  const startTime = Date.now()
-
-  try {
-    const [filesRes, notesRes] = await Promise.all([
-      fileService.getFiles({ q: searchQuery }),
-      noteService.getNotes({ q: searchQuery }),
-    ])
-
-    files.value = filesRes.data || []
-    notes.value = notesRes.data || []
-
-    searchTime.value = Date.now() - startTime
-  } catch (error) {
-    console.error('Search failed', error)
-  } finally {
-    loading.value = false
-  }
-}
-
-// 事件处理
-const handleDelete = async (id) => {
-  if (!confirm('确定要删除这个文件吗？')) return
-  try {
-    await fileService.deleteFile(id)
-    showDetails.value = false
-    await performSearch()
-  } catch (error) {
-    console.error('Failed to delete file', error)
-  }
-}
-
-const handleViewDetails = (file) => {
-  detailsFile.value = file
-  showDetails.value = true
-}
-
-const handleCloseDetails = () => {
-  showDetails.value = false
-  detailsFile.value = null
-}
-
-const handleManageNotes = (item, type) => {
-  notesItem.value = item
-  notesItemType.value = type
-  showNotes.value = true
-  detailsFile.value = null
-}
-
-const closeNotes = () => {
-  showNotes.value = false
-  notesItem.value = null
-}
-
-const openNote = (note) => {
-  router.push({ path: `/note/${note.id}` })
-}
-
-// 监听路由查询参数变化
-watch(
-  () => route.query.q,
-  (newQ) => {
-    query.value = newQ || ''
-    searchInput.value = newQ || ''
-    if (newQ) {
-      performSearch()
-    } else {
-      files.value = []
-      notes.value = []
-    }
-  },
-  { immediate: true },
-)
-</script>
diff --git a/web/src/views/notes/NoteDetailView.vue b/web/src/views/notes/NoteDetailView.vue
index 6f07262..2ee6d14 100644
--- a/web/src/views/notes/NoteDetailView.vue
+++ b/web/src/views/notes/NoteDetailView.vue
@@ -307,7 +307,7 @@ onMounted(async () => {
         <div class="text-6xl mb-4">📝</div>
         <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">笔记未找到</h3>
         <p class="text-gray-500 mb-6">该笔记可能已被删除或不存在</p>
-        <button @click="handleBack" class="btn btn-primary">返回笔记列表</button>
+        <button class="btn btn-primary" @click="handleBack">返回笔记列表</button>
       </div>
     </div>
 
diff --git a/web/src/views/notes/NotesView.vue b/web/src/views/notes/NotesView.vue
index 1733c57..f7f9be8 100644
--- a/web/src/views/notes/NotesView.vue
+++ b/web/src/views/notes/NotesView.vue
@@ -205,10 +205,10 @@ onMounted(async () => {
                   formatDate(note.updated_at)
                 }}</span>
                 <div class="flex gap-1">
-                  <span class="badge" v-if="note.folders && note.folders.length > 0"
+                  <span v-if="note.folders && note.folders.length > 0" class="badge"
                     >📁 {{ note.folders.length }}</span
                   >
-                  <span class="badge" v-if="note.files && note.files.length > 0"
+                  <span v-if="note.files && note.files.length > 0" class="badge"
                     >📎 {{ note.files.length }}</span
                   >
                 </div>
@@ -221,7 +221,7 @@ onMounted(async () => {
           </div>
         </div>
 
-        <div class="p-2 border-t border-base-200" v-if="totalPages > 1">
+        <div v-if="totalPages > 1" class="p-2 border-t border-base-200">
           <div class="join flex justify-center">
             <button
               class="join-item btn btn-sm"