chore: 更新版本信息（v1.0.0）

app/package.json

@@ -28,6 +28,7 @@
     "electron-builder": "^26.0.12",
     "electron-vite": "^5.0.0",
     "eslint": "^9.39.1",
+    "less": "^4.7.0",
     "eslint-plugin-vue": "^10.6.2",
     "naive-ui": "^2.44.1",
     "vite": "^7.2.6",

app/pnpm-lock.yaml

@@ -23,7 +23,7 @@ importers:
         version: 2.1.0(eslint@9.39.5(jiti@2.7.0))
       '@vitejs/plugin-vue':
         specifier: ^6.0.2
-        version: 6.0.8(vite@7.3.6(@types/node@26.1.1)(jiti@2.7.0))(vue@3.5.39)
+        version: 6.0.8(vite@7.3.6(@types/node@26.1.1)(jiti@2.7.0)(less@4.7.0))(vue@3.5.39)
       electron:
         specifier: ^39.2.6
         version: 39.8.10
@@ -32,19 +32,22 @@ importers:
         version: 26.15.3(electron-builder-squirrel-windows@26.15.3)
       electron-vite:
         specifier: ^5.0.0
-        version: 5.0.0(vite@7.3.6(@types/node@26.1.1)(jiti@2.7.0))
+        version: 5.0.0(vite@7.3.6(@types/node@26.1.1)(jiti@2.7.0)(less@4.7.0))
       eslint:
         specifier: ^9.39.1
         version: 9.39.5(jiti@2.7.0)
       eslint-plugin-vue:
         specifier: ^10.6.2
         version: 10.9.2(eslint@9.39.5(jiti@2.7.0))(vue-eslint-parser@10.4.1(eslint@9.39.5(jiti@2.7.0)))
+      less:
+        specifier: ^4.7.0
+        version: 4.7.0
       naive-ui:
         specifier: ^2.44.1
         version: 2.44.1(vue@3.5.39)
       vite:
         specifier: ^7.2.6
-        version: 7.3.6(@types/node@26.1.1)(jiti@2.7.0)
+        version: 7.3.6(@types/node@26.1.1)(jiti@2.7.0)(less@4.7.0)
       vue:
         specifier: ^3.5.25
         version: 3.5.39
@@ -1088,6 +1091,10 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  copy-anything@3.0.5:
+    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
+    engines: {node: '>=12.13'}
+
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -1120,6 +1127,22 @@ packages:
   date-fns@4.4.0:
     resolution: {integrity: sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==}
 
+  debug@2.6.9:
+    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -1232,6 +1255,10 @@ packages:
   err-code@2.0.3:
     resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==}
 
+  errno@0.1.8:
+    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+    hasBin: true
+
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -1544,6 +1571,14 @@ packages:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
 
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -1582,6 +1617,10 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-what@4.1.16:
+    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
+    engines: {node: '>=12.13'}
+
   isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
@@ -1660,6 +1699,11 @@ packages:
   lazy-val@1.0.5:
     resolution: {integrity: sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==}
 
+  less@4.7.0:
+    resolution: {integrity: sha512-i7dAlT3+boO0mMh1G4cex0vz1lLAScmBbikm1VEDNv+cy0ore1CUo2UtX8m3N9QLE5WYDr4ISbiCRzHNGyFkrA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -1694,6 +1738,10 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
+  make-dir@5.1.0:
+    resolution: {integrity: sha512-IfpFq6UM39dUNiphpA6uDezNx/AvWyhwfICWPR3t1VspkgkMZrL+Rk1RbN1bx+aeNYwOrqGJgEgV3yotk+ZUVw==}
+    engines: {node: '>=18'}
+
   matcher@3.0.0:
     resolution: {integrity: sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==}
     engines: {node: '>=10'}
@@ -1710,6 +1758,11 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
+  mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   mime@2.6.0:
     resolution: {integrity: sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==}
     engines: {node: '>=4.0.0'}
@@ -1761,6 +1814,9 @@ packages:
     engines: {node: '>=16.0.0'}
     hasBin: true
 
+  ms@2.0.0:
+    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -1778,6 +1834,16 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  needle@2.9.1:
+    resolution: {integrity: sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+
+  needle@3.5.0:
+    resolution: {integrity: sha512-jaQyPKKk2YokHrEg+vFDYxXIHTCBgiZwSHOoVx/8V3GIBS8/VN6NdVRmg8q1ERtPkMvmOvebsgga4sAj5hls/w==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+
   node-abi@4.33.0:
     resolution: {integrity: sha512-vLBWCKb+7LWsX+TbfzWOkw0W81m377tyx3hOweBTjO43CXZnRGS1/JPWs20fr0PgZyDXk6ROYrylsEycK8raDA==}
     engines: {node: '>=22.12.0'}
@@ -1839,6 +1905,10 @@ packages:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  parse-node-version@1.0.1:
+    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
+    engines: {node: '>= 0.10'}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -1890,6 +1960,9 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  probe-image-size@7.3.0:
+    resolution: {integrity: sha512-7CaDeBwiAbh6ohXsvLbAZhO7wzsZAmaevfxe39qvCwRh8LyaZfDlBGGLU1CCTgrTLtCOdwBBhjOrIHaIIimHfQ==}
+
   proc-log@6.1.0:
     resolution: {integrity: sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==}
     engines: {node: ^20.17.0 || >=22.9.0}
@@ -1912,6 +1985,9 @@ packages:
   proper-lockfile@4.1.2:
     resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==}
 
+  prr@1.0.1:
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+
   pump@3.0.4:
     resolution: {integrity: sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==}
 
@@ -1994,6 +2070,9 @@ packages:
   safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
   sanitize-filename@1.6.4:
     resolution: {integrity: sha512-9ZyI08PsvdQl2r/bBIGubpVdR3RR9sY6RDiWFPreA21C/EFlQhmgo20UZlNjZMMZNubusLhAQozkA0Od5J21Eg==}
 
@@ -2074,6 +2153,9 @@ packages:
     resolution: {integrity: sha512-jH9EhtKIjuXZ2cWxmXS8ZP80XyC3iasQxMDV8jzhNJpfDb7VbQLVW4Wvsxz9QZvzV+G4YoSfBUVKDOyxLzi/sg==}
     engines: {node: '>= 6'}
 
+  stream-parser@0.3.1:
+    resolution: {integrity: sha512-bJ/HgKq41nlKvlhccD5kaCr/P+Hu0wPNKPJOH7en+YrJu/9EgqUF+88w5Jb6KNcjOFMhfX4B2asfeAtIGuHObQ==}
+
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -2993,10 +3075,10 @@ snapshots:
       '@types/node': 22.20.1
     optional: true
 
-  '@vitejs/plugin-vue@6.0.8(vite@7.3.6(@types/node@26.1.1)(jiti@2.7.0))(vue@3.5.39)':
+  '@vitejs/plugin-vue@6.0.8(vite@7.3.6(@types/node@26.1.1)(jiti@2.7.0)(less@4.7.0))(vue@3.5.39)':
     dependencies:
       '@rolldown/pluginutils': 1.0.1
-      vite: 7.3.6(@types/node@26.1.1)(jiti@2.7.0)
+      vite: 7.3.6(@types/node@26.1.1)(jiti@2.7.0)(less@4.7.0)
       vue: 3.5.39
 
   '@vue/compiler-core@3.5.39':
@@ -3320,6 +3402,10 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
+  copy-anything@3.0.5:
+    dependencies:
+      is-what: 4.1.16
+
   core-util-is@1.0.3: {}
 
   cross-dirname@0.1.0:
@@ -3348,6 +3434,16 @@ snapshots:
 
   date-fns@4.4.0: {}
 
+  debug@2.6.9:
+    dependencies:
+      ms: 2.0.0
+    optional: true
+
+  debug@3.2.7:
+    dependencies:
+      ms: 2.1.3
+    optional: true
+
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
@@ -3455,7 +3551,7 @@ snapshots:
 
   electron-to-chromium@1.5.392: {}
 
-  electron-vite@5.0.0(vite@7.3.6(@types/node@26.1.1)(jiti@2.7.0)):
+  electron-vite@5.0.0(vite@7.3.6(@types/node@26.1.1)(jiti@2.7.0)(less@4.7.0)):
     dependencies:
       '@babel/core': 7.29.7
       '@babel/plugin-transform-arrow-functions': 7.29.7(@babel/core@7.29.7)
@@ -3463,7 +3559,7 @@ snapshots:
       esbuild: 0.25.12
       magic-string: 0.30.21
       picocolors: 1.1.1
-      vite: 7.3.6(@types/node@26.1.1)(jiti@2.7.0)
+      vite: 7.3.6(@types/node@26.1.1)(jiti@2.7.0)(less@4.7.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -3499,6 +3595,11 @@ snapshots:
 
   err-code@2.0.3: {}
 
+  errno@0.1.8:
+    dependencies:
+      prr: 1.0.1
+    optional: true
+
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
@@ -3909,6 +4010,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  iconv-lite@0.4.24:
+    dependencies:
+      safer-buffer: 2.1.2
+    optional: true
+
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+    optional: true
+
   ieee754@1.2.1: {}
 
   ignore@5.3.2: {}
@@ -3937,6 +4048,8 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-what@4.1.16: {}
+
   isarray@1.0.0: {}
 
   isbinaryfile@4.0.10: {}
@@ -3996,6 +4109,21 @@ snapshots:
 
   lazy-val@1.0.5: {}
 
+  less@4.7.0:
+    dependencies:
+      copy-anything: 3.0.5
+      parse-node-version: 1.0.1
+    optionalDependencies:
+      errno: 0.1.8
+      graceful-fs: 4.2.11
+      make-dir: 5.1.0
+      mime: 1.6.0
+      needle: 3.5.0
+      probe-image-size: 7.3.0
+      source-map: 0.6.1
+    transitivePeerDependencies:
+      - supports-color
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
@@ -4027,6 +4155,9 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  make-dir@5.1.0:
+    optional: true
+
   matcher@3.0.0:
     dependencies:
       escape-string-regexp: 4.0.0
@@ -4040,6 +4171,9 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
+  mime@1.6.0:
+    optional: true
+
   mime@2.6.0: {}
 
   mimic-response@1.0.1: {}
@@ -4105,6 +4239,9 @@ snapshots:
       - supports-color
       - utf-8-validate
 
+  ms@2.0.0:
+    optional: true
+
   ms@2.1.3: {}
 
   naive-ui@2.44.1(vue@3.5.39):
@@ -4133,6 +4270,21 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  needle@2.9.1:
+    dependencies:
+      debug: 3.2.7
+      iconv-lite: 0.4.24
+      sax: 1.6.0
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
+  needle@3.5.0:
+    dependencies:
+      iconv-lite: 0.6.3
+      sax: 1.6.0
+    optional: true
+
   node-abi@4.33.0:
     dependencies:
       semver: 7.7.4
@@ -4205,6 +4357,8 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
+  parse-node-version@1.0.1: {}
+
   path-exists@4.0.0: {}
 
   path-is-absolute@1.0.1: {}
@@ -4252,6 +4406,15 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  probe-image-size@7.3.0:
+    dependencies:
+      lodash.merge: 4.6.2
+      needle: 2.9.1
+      stream-parser: 0.3.1
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   proc-log@6.1.0: {}
 
   process-nextick-args@2.0.1: {}
@@ -4271,6 +4434,9 @@ snapshots:
       retry: 0.12.0
       signal-exit: 3.0.7
 
+  prr@1.0.1:
+    optional: true
+
   pump@3.0.4:
     dependencies:
       end-of-stream: 1.4.5
@@ -4385,6 +4551,9 @@ snapshots:
 
   safe-buffer@5.2.1: {}
 
+  safer-buffer@2.1.2:
+    optional: true
+
   sanitize-filename@1.6.4:
     dependencies:
       truncate-utf8-bytes: 1.0.2
@@ -4444,6 +4613,13 @@ snapshots:
 
   stat-mode@1.0.0: {}
 
+  stream-parser@0.3.1:
+    dependencies:
+      debug: 2.6.9
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
@@ -4561,7 +4737,7 @@ snapshots:
       evtd: 0.2.4
       vue: 3.5.39
 
-  vite@7.3.6(@types/node@26.1.1)(jiti@2.7.0):
+  vite@7.3.6(@types/node@26.1.1)(jiti@2.7.0)(less@4.7.0):
     dependencies:
       esbuild: 0.28.1
       fdir: 6.5.0(picomatch@4.0.5)
@@ -4573,6 +4749,7 @@ snapshots:
       '@types/node': 26.1.1
       fsevents: 2.3.3
       jiti: 2.7.0
+      less: 4.7.0
 
   vooks@0.2.12(vue@3.5.39):
     dependencies:

app/src/renderer/src/App.vue

@@ -172,7 +172,38 @@ function handleSwitchTab(tab) {
   </n-config-provider>
 </template>
 
-<style>
+<style lang="less">
+:root {
+  --frost-primary-color: #0ea5a0;
+  --frost-primary-color-hover: #0b8c87;
+  --frost-primary-color-pressed: #0b8c87;
+  --frost-primary-color-suppl: #0ea5a0;
+  --frost-success-color: #22c55e;
+  --frost-success-color-hover: #16a34a;
+  --frost-success-color-pressed: #15803d;
+  --frost-success-color-suppl: #22c55e;
+  --frost-warning-color: #f59e0b;
+  --frost-warning-color-hover: #d97706;
+  --frost-warning-color-pressed: #b45309;
+  --frost-warning-color-suppl: #f59e0b;
+  --frost-error-color: #ef4444;
+  --frost-error-color-hover: #dc2626;
+  --frost-error-color-pressed: #b91c1c;
+  --frost-error-color-suppl: #ef4444;
+  --frost-info-color: #3b82f6;
+  --frost-info-color-hover: #2563eb;
+  --frost-info-color-pressed: #1d4ed8;
+  --frost-info-color-suppl: #3b82f6;
+  --frost-color-text-tertiary: #999;
+  --frost-color-topic: #d25a00;
+  --frost-color-bg-light: #f5f7fa;
+  --frost-color-bg-item: #fafafa;
+  --frost-shadow-black-4: rgba(0, 0, 0, 0.04);
+  --frost-shadow-black-6: rgba(0, 0, 0, 0.06);
+  --frost-shadow-black-8: rgba(0, 0, 0, 0.08);
+  --frost-shadow-black-12: rgba(0, 0, 0, 0.12);
+}
+
 html, body, #app {
   margin: 0;
   padding: 0;
@@ -189,12 +220,12 @@ html, body, #app {
   padding: 0 0 16px 0;
   height: calc(100vh - 50px);
   overflow: hidden;
-}
 
-.dashboard-content {
+  &.dashboard-content {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  overflow: hidden;
+    overflow: hidden;
+  }
 }
 
 .dashboard-scroll-wrapper {
@@ -210,29 +241,27 @@ html, body, #app {
   gap: 12px;
   height: 100%;
   min-width: 0;
-}
 
-.publish-panel,
+  .publish-panel,
-.messages-panel {
+  .messages-panel {
-  min-width: 0;
+    min-width: 0;
-  min-height: 0;
+    min-height: 0;
-}
+  }
 
-.publish-panel {
+  .publish-panel {
-  box-sizing: border-box;
+    box-sizing: border-box;
-  height: 100%;
+    height: 100%;
-  min-height: 0;
+    min-height: 0;
-  overflow: hidden;
+    overflow: hidden;
-}
+  }
 
-.messages-panel {
+  .messages-panel {
-  height: 100%;
+    height: 100%;
-  min-height: 0;
+    min-height: 0;
-  overflow: hidden;
+    overflow: hidden;
-}
+  }
 
-@media (max-width: 900px) {
+  @media (max-width: 900px) {
-  .message-center-layout {
     grid-template-columns: 1fr;
   }
 }
@@ -242,22 +271,27 @@ html, body, #app {
   scrollbar-width: thin;
   scrollbar-color: rgba(144, 147, 153, 0.5) transparent;
 }
+
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
-}
+
-::-webkit-scrollbar-track {
+  &-track {
-  background-color: transparent;
+    background-color: transparent;
-}
+  }
-::-webkit-scrollbar-thumb {
+
-  background-color: rgba(144, 147, 153, 0.5);
+  &-thumb {
-  border-radius: 4px;
+    background-color: rgba(144, 147, 153, 0.5);
-}
+    border-radius: 4px;
-::-webkit-scrollbar-thumb:hover {
+
-  background-color: rgba(144, 147, 153, 0.8);
+    &:hover {
-}
+      background-color: rgba(144, 147, 153, 0.8);
-::-webkit-scrollbar-corner {
+    }
-  display: none;
+  }
-  background-color: transparent;
+
+  &-corner {
+    display: none;
+    background-color: transparent;
+  }
 }
 </style>

app/src/renderer/src/components/Sidebar.vue

@@ -216,7 +216,7 @@ async function handleImportFile(event) {
   </n-layout-sider>
 </template>
 
-<style scoped>
+<style scoped lang="less">
 :deep(.sidebar-scroll-container) {
   height: 100%;
   overflow: hidden !important;
@@ -242,7 +242,7 @@ async function handleImportFile(event) {
 .sidebar-logo {
   width: 32px;
   height: 32px;
-  background: #0ea5a0;
+  background: var(--frost-primary-color);
   border-radius: 6px;
   display: flex;
   align-items: center;
@@ -278,15 +278,19 @@ async function handleImportFile(event) {
   margin-bottom: 4px;
   border: 1px solid transparent;
   transition: all 0.15s;
-}
 
-.server-item:hover {
+  &:hover {
-  background: var(--n-color-hover);
+    background: var(--n-color-hover);
-}
 
-.server-item.active {
+    .server-actions {
-  background: var(--n-color-pressed);
+      opacity: 1;
-  border-color: #0ea5a0;
+    }
+  }
+
+  &.active {
+    background: var(--n-color-pressed);
+    border-color: var(--frost-primary-color);
+  }
 }
 
 .server-item-top {
@@ -310,23 +314,19 @@ async function handleImportFile(event) {
   transition: opacity 0.15s;
 }
 
-.server-item:hover .server-actions {
-  opacity: 1;
-}
-
 .server-url {
   margin-top: 4px;
   overflow: hidden;
-}
 
-.server-url :deep(.n-tag) {
+  :deep(.n-tag) {
-  max-width: 100%;
+    max-width: 100%;
-}
+  }
 
-.server-url :deep(.n-tag__content) {
+  :deep(.n-tag__content) {
-  overflow: hidden;
+    overflow: hidden;
-  text-overflow: ellipsis;
+    text-overflow: ellipsis;
-  white-space: nowrap;
+    white-space: nowrap;
+  }
 }
 
 .server-bottom {
@@ -347,23 +347,23 @@ async function handleImportFile(event) {
   height: 6px;
   border-radius: 50%;
   margin-right: 2px;
-}
 
-.status-dot.connected {
+  &.connected {
-  background: #22c55e;
+    background: var(--frost-success-color);
-}
+  }
 
-.status-dot.connecting {
+  &.connecting {
-  background: #f59e0b;
+    background: var(--frost-warning-color);
-  animation: pulse 1s infinite;
+    animation: pulse 1s infinite;
-}
+  }
 
-.status-dot.disconnected {
+  &.disconnected {
-  background: #999;
+    background: var(--frost-color-text-tertiary);
-}
+  }
 
-.status-dot.error {
+  &.error {
-  background: #ef4444;
+    background: var(--frost-error-color);
+  }
 }
 
 @keyframes pulse {

app/src/renderer/src/views/Dashboard.vue

@@ -189,25 +189,27 @@ async function handleToggleConnection(srv) {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="less">
 .dashboard {
   max-width: 900px;
 }
 
-.server-descriptions :deep(.n-descriptions-table) {
+.server-descriptions {
-  table-layout: fixed;
+  :deep(.n-descriptions-table) {
-  width: 100%;
+    table-layout: fixed;
-}
+    width: 100%;
+  }
 
-.server-descriptions :deep(.n-descriptions-table-header),
+  :deep(.n-descriptions-table-header),
-.server-descriptions :deep(.n-descriptions-table-content) {
+  :deep(.n-descriptions-table-content) {
-  width: 25%;
+    width: 25%;
-}
+  }
 
-.server-descriptions :deep(.n-descriptions-table-content) {
+  :deep(.n-descriptions-table-content) {
-  overflow: hidden;
+    overflow: hidden;
-  text-overflow: ellipsis;
+    text-overflow: ellipsis;
-  white-space: nowrap;
+    white-space: nowrap;
+  }
 }
 
 .status-dot {
@@ -215,23 +217,23 @@ async function handleToggleConnection(srv) {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-}
 
-.status-dot.connected {
+  &.connected {
-  background: #22c55e;
+    background: var(--frost-success-color);
-}
+  }
 
-.status-dot.connecting {
+  &.connecting {
-  background: #f59e0b;
+    background: var(--frost-warning-color);
-  animation: pulse 1s infinite;
+    animation: pulse 1s infinite;
-}
+  }
 
-.status-dot.disconnected {
+  &.disconnected {
-  background: #999;
+    background: var(--frost-color-text-tertiary);
-}
+  }
 
-.status-dot.error {
+  &.error {
-  background: #ef4444;
+    background: var(--frost-error-color);
+  }
 }
 
 @keyframes pulse {

app/src/renderer/src/views/Messages.vue

@@ -1,14 +1,14 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useMqttStore } from '../stores/mqtt.js';
-import { NCard, NSpace, NInput, NButton, NEmpty, useMessage } from 'naive-ui';
+import { NCard, NSelect, NButton, NEmpty, useMessage } from 'naive-ui';
 
 // 全局状态与消息 API
 const store = useMqttStore();
 const message = useMessage();
 
-// 主题过滤关键字
+// 已选中的过滤主题列表
-const filter = ref('');
+const filter = ref([]);
 
 /**
  * 复制主题到剪贴板
@@ -24,22 +24,65 @@ async function copyTopic(topic) {
 }
 
 /**
- * 根据过滤关键字筛选后的消息列表
+ * 可过滤的主题选项（来自已配置主题和已接收消息）
+ * @type {import('vue').ComputedRef<Array<{label: string, value: string}>>}
+ */
+const topicOptions = computed(() => {
+
+  let server = store.activeServer.value;
+  let serverTopics = server?.topics?.map((t) => t.topic) || [];
+  let messageTopics = store.messages.value.map((m) => m.topic);
+  let all = [...new Set([...serverTopics, ...messageTopics])];
+
+  all.sort((a, b) => a.localeCompare(b));
+
+  return all.map((topic) => ({ label: topic, value: topic }));
+
+});
+
+/**
+ * 判断消息主题是否匹配指定的过滤主题（支持 + 单层通配符与 # 多层通配符）
+ * @param {string} filterTopic - 过滤主题，可包含 + 或 #
+ * @param {string} messageTopic - 消息主题
+ * @returns {boolean} 是否匹配
+ */
+function topicMatchesFilter(filterTopic, messageTopic) {
+
+  if (filterTopic === '#') {
+    return true;
+  }
+
+  if (filterTopic.endsWith('/#')) {
+    let prefix = filterTopic.slice(0, -2);
+    return messageTopic === prefix || messageTopic.startsWith(prefix + '/');
+  }
+
+  let filterParts = filterTopic.split('/');
+  let messageParts = messageTopic.split('/');
+
+  if (filterParts.length !== messageParts.length) {
+    return false;
+  }
+
+  return filterParts.every((part, index) => part === '+' || part === messageParts[index]);
+
+}
+
+/**
+ * 根据选中主题筛选后的消息列表（支持 + / # 通配符）
  * @type {import('vue').ComputedRef<Array<Object>>}
  */
 const filteredMessages = computed(() => {
 
-  if (!filter.value.trim()) {
+  if (!filter.value || filter.value.length === 0) {
     return store.messages.value;
   }
 
-  let f = filter.value.trim().toLowerCase();
+  return store.messages.value.filter((m) =>
+    filter.value.some((f) => topicMatchesFilter(f, m.topic))
+  );
 
-  return store.messages.value.filter((m) => {
+});
-    return  m.topic.toLowerCase().includes(f);
-  });
-
-})
 
 /**
  * 清空当前活动服务器的消息列表
@@ -79,10 +122,8 @@ function formatPayload(payload) {
       }"
     >
       <template #header>
-        <n-space
+        <div
-          align="center"
+          style="display: flex; flex-direction: column; gap: 8px; width: 100%"
-          justify="space-between"
-          style="width: 100%"
         >
           <div>
             <span>消息监控</span>
@@ -90,20 +131,26 @@ function formatPayload(payload) {
               style="font-size: 12px; opacity: 0.55; margin-left: 8px"
             >实时查看接收和发送的 MQTT 消息</span>
           </div>
-          <n-space>
+          <div
-            <n-input
+            style="display: flex; align-items: center; gap: 8px; width: 100%"
+          >
+            <n-select
               v-model:value="filter"
               size="small"
               placeholder="过滤主题..."
-              style="width: 180px"
+              style="flex: 1 1 auto; max-width: 480px; min-width: 0"
+              multiple
+              filterable
               clearable
+              max-tag-count="responsive"
+              :options="topicOptions"
             />
             <n-button
               size="small"
               @click="handleClear"
             >清空消息</n-button>
-          </n-space>
+          </div>
-        </n-space>
+        </div>
       </template>
       <n-empty
         v-if="filteredMessages.length === 0"
@@ -154,29 +201,29 @@ function formatPayload(payload) {
 
 </template>
 
-<style scoped>
+<style scoped lang="less">
 .messages-view {
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
-}
 
-.messages-view :deep(.n-card) {
+  :deep(.n-card) {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  height: 100%;
+    height: 100%;
-  min-height: 0;
+    min-height: 0;
-}
+  }
 
-.messages-view :deep(.n-card__content) {
+  :deep(.n-card__content) {
-  flex: 1 1 auto;
+    flex: 1 1 auto;
-  min-height: 0;
+    min-height: 0;
-  overflow: hidden;
+    overflow: hidden;
+  }
 }
 
 .msg-log {
-  background: #f5f7fa;
+  background: var(--frost-color-bg-light);
   border-radius: 6px;
   padding: 12px;
   height: 100%;
@@ -192,7 +239,7 @@ function formatPayload(payload) {
 
 .msg-entry {
   padding: 8px 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  border-bottom: 1px solid var(--frost-shadow-black-6);
 }
 
 .msg-header {
@@ -203,45 +250,51 @@ function formatPayload(payload) {
 }
 
 .msg-time {
-  color: #999;
+  color: var(--frost-color-text-tertiary);
   flex-shrink: 0;
 }
+
 .msg-dir {
   flex-shrink: 0;
   font-weight: 700;
   width: 28px;
+
+  &.pub {
+    color: var(--frost-info-color);
+  }
+
+  &.sub {
+    color: var(--frost-success-color);
+  }
 }
-.msg-dir.pub {
+
-  color: #3b82f6;
-}
-.msg-dir.sub {
-  color: #22c55e;
-}
 .msg-topic {
-  color: #d25a00;
+  color: var(--frost-color-topic);
   min-width: 0;
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
-.msg-topic:hover {
-  text-decoration: underline;
-}
 .msg-payload {
   margin: 6px 0 0;
   padding: 8px 10px;
   border-radius: 4px;
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--frost-shadow-black-4);
   color: #333;
   font: inherit;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
+
 .msg-meta {
-  color: #999;
+  color: var(--frost-color-text-tertiary);
   font-size: 11px;
   flex-shrink: 0;
 }

app/src/renderer/src/views/Publish.vue

@@ -299,7 +299,7 @@ async function copyTopic(topic) {
 
 </template>
 
-<style scoped>
+<style scoped lang="less">
 .publish-view {
   display: flex;
   flex-direction: column;
@@ -307,61 +307,61 @@ async function copyTopic(topic) {
   height: 100%;
   min-width: 0;
   min-height: 0;
-}
 
-.publish-view :deep(.n-tabs) {
+  :deep(.n-tabs) {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  height: 100%;
+    height: 100%;
-  min-height: 0;
+    min-height: 0;
-}
+  }
 
-.publish-view :deep(.n-tabs-nav) {
+  :deep(.n-tabs-nav) {
-  flex-shrink: 0;
+    flex-shrink: 0;
-}
+  }
 
-.publish-view :deep(.n-tabs-pane-wrapper) {
+  :deep(.n-tabs-pane-wrapper) {
-  flex: 1 1 auto;
+    flex: 1 1 auto;
-  min-height: 0;
+    min-height: 0;
-  overflow: hidden;
+    overflow: hidden;
-}
+  }
 
-.publish-view :deep(.n-tabs-tab-panels),
+  :deep(.n-tabs-tab-panels),
-.publish-view :deep(.n-tabs-pane-wrapper) {
+  :deep(.n-tabs-pane-wrapper) {
-  height: 100%;
+    height: 100%;
-  min-height: 0;
+    min-height: 0;
-}
+  }
 
-.publish-view :deep(.n-tab-pane) {
+  :deep(.n-tab-pane) {
-  box-sizing: border-box;
+    box-sizing: border-box;
-  height: 100%;
+    height: 100%;
-  min-height: 0;
+    min-height: 0;
-}
+  }
 
-.publish-view :deep(.n-tab-pane > .n-card) {
+  :deep(.n-tab-pane > .n-card) {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  height: 100%;
+    height: 100%;
-  min-height: 0;
+    min-height: 0;
-}
+  }
 
-.publish-view :deep(.n-card__content) {
+  :deep(.n-card__content) {
-  flex: 1 1 auto;
+    flex: 1 1 auto;
-  min-height: 0;
+    min-height: 0;
-  overflow: hidden;
+    overflow: hidden;
-}
 
-.publish-view :deep(.n-card__content > div) {
+    > div {
-  height: 100%;
+      height: 100%;
-  min-height: 0;
+      min-height: 0;
+    }
+  }
 }
 
 .topic-field {
   width: 100%;
-}
 
-.topic-field :deep(.n-form-item-blank) {
+  :deep(.n-form-item-blank) {
-  width: 100%;
+    width: 100%;
+  }
 }
 
 .publish-form {
@@ -369,34 +369,34 @@ async function copyTopic(topic) {
   flex-direction: column;
   height: 100%;
   min-height: 0;
-}
 
-.publish-form .payload-field {
+  .payload-field {
-  flex: 1;
+    flex: 1;
-  min-height: 0;
+    min-height: 0;
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-}
 
-.publish-form .payload-field :deep(.n-form-item-blank) {
+    :deep(.n-form-item-blank) {
-  flex: 1;
+      flex: 1;
-  min-height: 0;
+      min-height: 0;
-}
+    }
 
-.publish-form .payload-field :deep(.n-input) {
+    :deep(.n-input) {
-  height: 100%;
+      height: 100%;
-}
+    }
 
-.publish-form .payload-field :deep(.n-input__textarea-el),
+    :deep(.n-input__textarea-el),
-.publish-form .payload-field :deep(textarea) {
+    :deep(textarea) {
-  resize: none !important;
+      resize: none !important;
-  height: 100% !important;
+      height: 100% !important;
-  min-height: 0 !important;
+      min-height: 0 !important;
-  font-family: monospace;
+      font-family: monospace;
+    }
+  }
 }
 
 .msg-log {
-  background: #f5f7fa;
+  background: var(--frost-color-bg-light);
   border-radius: 6px;
   padding: 12px;
   height: 100%;
@@ -411,7 +411,7 @@ async function copyTopic(topic) {
 
 .msg-entry {
   padding: 8px 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  border-bottom: 1px solid var(--frost-shadow-black-6);
 }
 
 .msg-header {
@@ -422,7 +422,7 @@ async function copyTopic(topic) {
 }
 
 .msg-time {
-  color: #999;
+  color: var(--frost-color-text-tertiary);
   flex-shrink: 0;
 }
 
@@ -430,31 +430,31 @@ async function copyTopic(topic) {
   flex-shrink: 0;
   font-weight: 700;
   width: 28px;
-}
 
-.msg-dir.pub {
+  &.pub {
-  color: #3b82f6;
+    color: var(--frost-info-color);
+  }
 }
 
 .msg-topic {
-  color: #d25a00;
+  color: var(--frost-color-topic);
   min-width: 0;
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
-}
 
-.msg-topic:hover {
+  &:hover {
-  text-decoration: underline;
+    text-decoration: underline;
+  }
 }
 
 .msg-payload {
   margin: 6px 0 0;
   padding: 8px 10px;
   border-radius: 4px;
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--frost-shadow-black-4);
   color: #333;
   font: inherit;
   white-space: pre-wrap;
@@ -462,7 +462,7 @@ async function copyTopic(topic) {
 }
 
 .msg-meta {
-  color: #999;
+  color: var(--frost-color-text-tertiary);
   font-size: 11px;
   flex-shrink: 0;
 }

app/src/renderer/src/views/QuickSend.vue

@@ -664,7 +664,7 @@ onUnmounted(() => {
 
 </template>
 
-<style scoped>
+<style scoped lang="less">
 .quick-send-view {
   display: flex;
   flex-direction: column;
@@ -672,19 +672,19 @@ onUnmounted(() => {
   height: 100%;
   min-width: 0;
   min-height: 0;
-}
 
-.quick-send-view :deep(.n-card) {
+  :deep(.n-card) {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  height: 100%;
+    height: 100%;
-  min-height: 0;
+    min-height: 0;
-}
+  }
 
-.quick-send-view :deep(.n-card__content) {
+  :deep(.n-card__content) {
-  flex: 1 1 auto;
+    flex: 1 1 auto;
-  min-height: 0;
+    min-height: 0;
-  overflow: hidden;
+    overflow: hidden;
+  }
 }
 
 .quick-list {
@@ -696,18 +696,18 @@ onUnmounted(() => {
   gap: 12px;
   padding-right: 4px;
   align-content: start;
-}
 
-.quick-list.columns-1 {
+  &.columns-1 {
-  grid-template-columns: 1fr;
+    grid-template-columns: 1fr;
-}
+  }
 
-.quick-list.columns-2 {
+  &.columns-2 {
-  grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, 1fr);
-}
+  }
 
-.quick-list.columns-3 {
+  &.columns-3 {
-  grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
 .payload-field {
@@ -715,29 +715,29 @@ onUnmounted(() => {
   flex-direction: column;
   gap: 8px;
   width: 100%;
-}
 
-.payload-field :deep(.n-input) {
+  :deep(.n-input) {
-  width: 100%;
+    width: 100%;
-}
+  }
 
-.payload-field .n-button {
+  .n-button {
-  align-self: flex-end;
+    align-self: flex-end;
+  }
 }
 
 .quick-item {
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--frost-shadow-black-8);
   border-radius: 6px;
   padding: 12px;
-  background: #fafafa;
+  background: var(--frost-color-bg-item);
   cursor: grab;
   transition: box-shadow 0.2s, opacity 0.2s;
-}
 
-.quick-item.dragging {
+  &.dragging {
-  opacity: 0.6;
+    opacity: 0.6;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 4px 12px var(--frost-shadow-black-12);
-  cursor: grabbing;
+    cursor: grabbing;
+  }
 }
 
 .quick-header {
@@ -751,11 +751,11 @@ onUnmounted(() => {
 .quick-checkbox {
   flex-shrink: 0;
   margin-top: 2px;
-}
 
-.quick-checkbox :deep(.n-checkbox-box) {
+  :deep(.n-checkbox-box) {
-  width: 16px;
+    width: 16px;
-  height: 16px;
+    height: 16px;
+  }
 }
 
 .quick-topic-wrap {
@@ -772,14 +772,14 @@ onUnmounted(() => {
   font-weight: 700;
   width: 28px;
   font-size: 12px;
-}
 
-.quick-dir.pub {
+  &.pub {
-  color: #3b82f6;
+    color: var(--frost-info-color);
+  }
 }
 
 .quick-topic {
-  color: #d25a00;
+  color: var(--frost-color-topic);
   min-width: 0;
   flex: 1;
   overflow: hidden;
@@ -788,14 +788,14 @@ onUnmounted(() => {
   cursor: pointer;
   font-family: monospace;
   font-size: 13px;
-}
 
-.quick-topic:hover {
+  &:hover {
-  text-decoration: underline;
+    text-decoration: underline;
+  }
 }
 
 .quick-meta {
-  color: #999;
+  color: var(--frost-color-text-tertiary);
   font-size: 11px;
   flex-shrink: 0;
   font-family: monospace;
@@ -805,7 +805,7 @@ onUnmounted(() => {
   margin: 10px 0 0;
   padding: 8px 10px;
   border-radius: 4px;
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--frost-shadow-black-4);
   color: #333;
   font: inherit;
   white-space: pre-wrap;
@@ -817,23 +817,27 @@ onUnmounted(() => {
   overflow-y: auto;
 }
 
-.quick-send-modal .n-form-item {
+.quick-send-modal {
-  margin-bottom: 20px;
+  .n-form-item {
+    margin-bottom: 20px;
+
+    &__label {
+      margin-bottom: 8px;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .n-grid {
+    margin-bottom: 20px;
+  }
 }
 
-.quick-send-modal .n-form-item__label {
+.quick-send-dialog {
-  margin-bottom: 8px;
+  :deep(.n-dialog__icon) {
-}
+    color: var(--frost-primary-color);
-
+  }
-.quick-send-modal .n-form-item:last-child {
-  margin-bottom: 0;
-}
-
-.quick-send-modal .n-grid {
-  margin-bottom: 20px;
-}
-
-.quick-send-dialog .n-dialog__icon {
-  color: #0ea5a0;
 }
 </style>

app/src/renderer/src/views/Subscribe.vue

@@ -260,15 +260,6 @@ async function handleEditSave(t) {
             @keydown.enter="handleAddTopic"
           />
         </n-form-item>
-        <n-form-item
-          class="qos-field"
-          label="QoS"
-        >
-          <n-select
-            v-model:value="qos"
-            :options="qosOptions"
-          />
-        </n-form-item>
         <n-form-item
           class="comment-field"
           label="备注"
@@ -279,13 +270,20 @@ async function handleEditSave(t) {
             @keydown.enter="handleAddTopic"
           />
         </n-form-item>
+        <n-form-item
+          class="qos-field"
+          label="QoS"
+        >
+          <n-select
+            v-model:value="qos"
+            :options="qosOptions"
+          />
+        </n-form-item>
         <n-button
           class="topic-submit"
           type="primary"
           @click="handleAddTopic"
-        >
+        >+ 添加订阅</n-button>
-          + 添加订阅
-        </n-button>
       </div>
     </n-card>
 
@@ -305,9 +303,7 @@ async function handleEditSave(t) {
         <n-button
           size="small"
           @click="handleSubscribeAll"
-        >
+        >全部订阅</n-button>
-          全部订阅
-        </n-button>
       </template>
       <n-empty
         v-if="!store.activeServer.value.topics || store.activeServer.value.topics.length === 0"
@@ -323,104 +319,96 @@ async function handleEditSave(t) {
             :key="t.id || t.topic"
             class="topic-item"
           >
-            <template
+            <template #prefix>
-              v-if="editingTopicId !== (t.id || t.topic)"
-              #prefix
-            >
               <n-tag
+                class="topic-qos-tag"
                 :type="t.subscribed ? 'success' : 'default'"
                 size="small"
-              >
+              >QoS {{ t.qos }}</n-tag>
-                QoS {{ t.qos }}
-              </n-tag>
             </template>
-            <div
+            <div class="topic-content">
-              v-if="editingTopicId === (t.id || t.topic)"
-              class="topic-edit-row"
-            >
-              <n-input
-                v-model:value="editingTopic"
-                size="small"
-                placeholder="主题名称"
-                @keydown.enter="handleEditSave(t)"
-              />
-              <n-select
-                v-model:value="editingQos"
-                size="small"
-                :options="qosOptions"
-                style="width: 160px; flex-shrink: 0"
-              />
-              <n-input
-                v-model:value="editingComment"
-                size="small"
-                placeholder="备注"
-              />
-              <n-space
-                :size="4"
-                :wrap="false"
-              >
-                <n-button
-                  size="tiny"
-                  type="primary"
-                  @click="handleEditSave(t)"
-                >
-                  保存
-                </n-button>
-                <n-button
-                  size="tiny"
-                  @click="cancelEdit"
-                >
-                  取消
-                </n-button>
-              </n-space>
-            </div>
-            <div
-              v-else
-              class="topic-name"
-            >
-              <span
-                class="topic-label"
-                :title="t.topic"
-              >{{ t.topic }}</span>
               <div
-                v-if="t.comment"
+                class="topic-name"
-                class="topic-comment"
+                :class="{ 'is-hidden': editingTopicId === (t.id || t.topic) }"
               >
-                <span class="topic-comment-prefix">备注</span>
                 <span
-                  class="topic-comment-text"
+                  class="topic-label"
-                  :title="t.comment"
+                  :title="t.topic"
-                >{{ t.comment }}</span>
+                >{{ t.topic }}</span>
+                <div class="topic-comment">
+                  <span class="topic-comment-prefix">备注</span>
+                  <span
+                    class="topic-comment-text"
+                    :title="t.comment"
+                  >{{ t.comment }}</span>
+                </div>
+              </div>
+              <div
+                class="topic-edit-row"
+                :class="{ 'is-visible': editingTopicId === (t.id || t.topic) }"
+              >
+                <n-input
+                  v-model:value="editingTopic"
+                  class="topic-edit-topic"
+                  size="small"
+                  placeholder="主题名称"
+                  @keydown.enter="handleEditSave(t)"
+                />
+                <n-input
+                  v-model:value="editingComment"
+                  class="topic-edit-comment"
+                  size="small"
+                  placeholder="备注"
+                />
+                <n-select
+                  v-model:value="editingQos"
+                  class="topic-edit-qos"
+                  size="small"
+                  :options="qosOptions"
+                />
+                <n-space
+                  class="topic-edit-actions"
+                  :size="4"
+                  :wrap="false"
+                >
+                  <n-button
+                    size="tiny"
+                    type="primary"
+                    @click="handleEditSave(t)"
+                  >保存</n-button>
+                  <n-button
+                    size="tiny"
+                    @click="cancelEdit"
+                  >取消</n-button>
+                </n-space>
               </div>
             </div>
             <template #suffix>
               <n-space
-                v-if="editingTopicId !== (t.id || t.topic)"
                 class="topic-actions"
+                :class="{ 'is-hidden': editingTopicId === (t.id || t.topic) }"
                 :size="4"
                 :wrap="false"
               >
                 <n-button
                   size="tiny"
                   @click="startEdit(t)"
-                >
+                >编辑</n-button>
-                  编辑
-                </n-button>
                 <n-button
+                  class="topic-action-sub"
                   size="tiny"
-                  :type="t.subscribed ? 'error' : 'success'"
+                  :type="t.subscribed ? 'success' : 'primary'"
                   @click="handleToggleSub(t.topic)"
                 >
-                  {{ t.subscribed ? '取消订阅' : '订阅' }}
+                  {{ t.subscribed ? '已订阅' : '未订阅' }}
                 </n-button>
                 <n-button
+                  class="topic-action-remove"
                   size="tiny"
                   type="error"
                   text
                   @click.stop="handleRemoveTopic(t.topic)"
-                >
+                >&#10005;</n-button>
-                  &#10005;
-                </n-button>
               </n-space>
             </template>
           </n-list-item>
@@ -438,7 +426,7 @@ async function handleEditSave(t) {
 
 </template>
 
-<style scoped>
+<style scoped lang="less">
 .subscribe-view {
   display: flex;
   flex-direction: column;
@@ -491,33 +479,66 @@ async function handleEditSave(t) {
   flex: 0 0 auto;
 }
 
-.topic-field :deep(.n-form-item-blank),
+.topic-field,
-.qos-field :deep(.n-form-item-blank),
+.qos-field,
-.comment-field :deep(.n-form-item-blank) {
+.comment-field {
-  width: 100%;
+  :deep(.n-form-item-blank) {
+    width: 100%;
+  }
 }
 
-.topic-item :deep(.n-list-item__main) {
+.topic-item {
+  box-sizing: border-box;
+  height: 56px;
+  min-height: 56px;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+
+  :deep(.n-list-item__main) {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    min-width: 0;
+    gap: 12px;
+  }
+}
+
+.topic-content {
+  position: relative;
   display: flex;
   align-items: center;
+  flex: 1;
+  width: 100%;
+  height: 100%;
   min-width: 0;
-  gap: 12px;
+  overflow: hidden;
 }
 
 .topic-name {
   display: flex;
   flex: 1;
   flex-direction: column;
+  justify-content: center;
   align-items: stretch;
+  width: 100%;
+  height: 40px;
   min-width: 0;
-  gap: 5px;
+  min-height: 0;
+  gap: 2px;
   font-size: 13px;
+  overflow: hidden;
+  visibility: visible;
+
+  &.is-hidden {
+    visibility: hidden;
+  }
 }
 
 .topic-label {
   min-width: 0;
   overflow: hidden;
   font-family: monospace;
+  line-height: 18px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -527,45 +548,90 @@ async function handleEditSave(t) {
   align-items: center;
   min-width: 0;
   max-width: 100%;
-  padding: 2px 6px;
+  padding: 1px 4px;
-  gap: 5px;
+  gap: 4px;
   border: 1px solid rgba(14, 165, 160, 0.16);
   border-radius: 4px;
   background: rgba(20, 184, 166, 0.06);
   color: var(--n-text-color-3);
-  font-size: 12px;
+  font-size: 11px;
-  line-height: 18px;
+  line-height: 16px;
+
+  &-prefix {
+    flex-shrink: 0;
+    color: #0f766e;
+  }
+
+  &-text {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
-.topic-comment-prefix {
+.topic-qos-tag {
-  flex-shrink: 0;
+  min-width: 56px;
-  color: #0f766e;
+  justify-content: center;
-}
-
-.topic-comment-text {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .topic-actions {
   flex-shrink: 0;
+  visibility: visible;
+
+  &.is-hidden {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .n-button {
+    min-width: 40px;
+  }
+
+  .topic-action-sub {
+    min-width: auto;
+  }
+
+  .topic-action-remove {
+    min-width: 24px;
+  }
 }
 
 .topic-edit-row {
+  position: absolute;
+  inset: 0;
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 8px;
-  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  overflow: hidden;
+  visibility: hidden;
+  pointer-events: none;
+
+  &.is-visible {
+    visibility: visible;
+    pointer-events: auto;
+  }
+}
+
+.topic-edit-topic {
+  flex: 1 1 auto;
   min-width: 0;
 }
 
-.topic-edit-row .n-input {
+.topic-edit-comment {
-  flex: 1;
+  flex: 1 1 auto;
-  min-width: 180px;
+  min-width: 0;
+}
+
+.topic-edit-qos {
+  flex: 0 0 auto;
+  width: 160px;
+  min-width: 80px;
 }
 
 @media (max-width: 720px) {

docs/CHANGELOG.md

@@ -0,0 +1,5 @@
+# CHANGELOG
+
+## [1.0.0] - 2026-07-21
+
+- 初始版本发布。

docs/TODO.md

@@ -0,0 +1,4 @@
+# TODO
+
+- [X] 过滤主题功能支持下拉
+- [X] 订阅主题备注

docs/代码风格.md

@@ -34,7 +34,11 @@
 - 事件处理函数以 `handle` 开头，例如 `handleSave`；模板事件名采用 kebab-case，例如 `@edit-server`。
 - Naive UI 组件使用 `NButton` 等 PascalCase 导入，在模板中写为 `n-button`。
 - 模板属性一行较长时换行，每个属性单独一行，并保持 2 空格缩进。
-- 样式采用普通 CSS；类名使用 kebab-case；布局和组件私有样式就近放在对应组件中。
+- 元素标签内文本简短时，将文本与结束标签放在同一行；较长表达式或动态内容可单独成行。
+- 样式使用 Less；Vue SFC 中通过 `<style lang="less">` / `<style lang="less" scoped>` 声明。
+- 类名使用 kebab-case；布局和组件私有样式就近放在对应组件中。
+- 善用嵌套规则、`&` 父选择器减少重复；全局主题色等公共变量在 App.vue 中通过 CSS 自定义属性定义，命名与 `themeOverrides` 对应（例如 `--frost-primary-color`）。
+- 组件内直接使用 `var(--xxx)` 引用全局变量，不再单独定义 Less 变量。
 
 ## Electron 分层
 
@@ -45,5 +49,4 @@
 ## ESLint
 
 - 使用 `@electron-toolkit/eslint-config` 与 Vue 推荐规则作为基础。
-- Vue 组件允许单词名称；未强制默认 Prop；模板单行或多行内容换行规则已关闭。
 - 提交前执行 `pnpm lint`，并修复实际报告的问题。