基础框架完成

MODERN_CSS_EXAMPLES.md

@@ -0,0 +1,365 @@
+# 现代CSS强大功能示例 (2025)
+
+## 1. CSS 嵌套 (CSS Nesting) ⭐ 最推荐
+让CSS代码更清晰、更易维护
+
+```css
+/* 传统写法 */
+.device-container {
+  width: 100%;
+  height: 100%;
+}
+
+.device-container .device-update {
+  display: flex;
+}
+
+.device-container .device-update-title {
+  color: white;
+}
+
+/* 现代嵌套写法 */
+.device-container {
+  width: 100%;
+  height: 100%;
+  
+  .device-update {
+    display: flex;
+    
+    .device-update-title {
+      color: white;
+    }
+  }
+  
+  /* 使用 & 引用父选择器 */
+  &:hover {
+    background-color: #0550d0;
+  }
+  
+  /* 媒体查询嵌套 */
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+}
+```
+
+## 2. CSS 变量 (Custom Properties) ⭐ 最实用
+统一管理颜色、尺寸等
+
+```css
+:root {
+  /* 颜色变量 */
+  --primary-color: #0769fb;
+  --primary-hover: #0550d0;
+  --text-color: #ffffff;
+  --bg-color: #f5f5f5;
+  
+  /* 尺寸变量 */
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  
+  /* 动画变量 */
+  --transition-fast: 0.2s ease;
+  --transition-normal: 0.3s ease;
+}
+
+.device-container {
+  background-color: var(--primary-color);
+  padding: var(--spacing-md);
+  transition: background-color var(--transition-normal);
+  
+  &:hover {
+    background-color: var(--primary-hover);
+  }
+}
+```
+
+## 3. 容器查询 (Container Queries) ⭐ 响应式新标准
+基于容器大小而非视口大小
+
+```css
+.device-container {
+  container-type: inline-size;
+  container-name: device;
+}
+
+/* 当容器宽度大于600px时 */
+@container device (min-width: 600px) {
+  .device-list {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* 当容器宽度小于600px时 */
+@container device (max-width: 599px) {
+  .device-list {
+    display: flex;
+    flex-direction: column;
+  }
+}
+```
+
+## 4. :has() 选择器 ⭐ 强大的父选择器
+根据子元素状态改变父元素样式
+
+```css
+/* 当包含特定子元素时 */
+.device-container:has(.device-update-title) {
+  border-top: 2px solid var(--primary-color);
+}
+
+/* 当子元素有焦点时 */
+.device-container:has(input:focus) {
+  box-shadow: 0 0 0 3px rgba(7, 105, 251, 0.3);
+}
+
+/* 当没有子元素时 */
+.device-list:has(:not(.device-item)) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+}
+```
+
+## 5. @layer 层叠层
+更好地管理CSS优先级
+
+```css
+@layer base, components, utilities;
+
+@layer base {
+  .device-container {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+@layer components {
+  .device-update {
+    display: flex;
+  }
+}
+
+@layer utilities {
+  .flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+```
+
+## 6. aspect-ratio
+保持元素宽高比
+
+```css
+.device-item {
+  aspect-ratio: 16 / 9; /* 保持16:9比例 */
+  width: 100%;
+}
+
+.device-card {
+  aspect-ratio: 1; /* 正方形 */
+}
+```
+
+## 7. backdrop-filter
+毛玻璃效果
+
+```css
+.device-overlay {
+  backdrop-filter: blur(10px);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+```
+
+## 8. clip-path 和 mask
+创建复杂形状
+
+```css
+.device-card {
+  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
+}
+
+.device-icon {
+  mask: url('icon.svg') no-repeat center;
+  mask-size: contain;
+}
+```
+
+## 9. CSS Grid 高级特性
+
+```css
+.device-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--spacing-md);
+  
+  /* 子网格 */
+  .device-list {
+    display: grid;
+    grid-template-columns: subgrid;
+  }
+}
+```
+
+## 10. 动画和过渡
+
+```css
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.device-item {
+  animation: slideIn 0.3s ease-out;
+  
+  /* 或者使用 transition */
+  transition: transform var(--transition-normal),
+              opacity var(--transition-normal);
+  
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+```
+
+## 11. 逻辑属性 (Logical Properties)
+更好的国际化支持
+
+```css
+.device-container {
+  /* 传统 */
+  margin-top: 10px;
+  margin-right: 20px;
+  
+  /* 现代逻辑属性 */
+  margin-block-start: 10px;  /* 顶部（垂直方向开始） */
+  margin-inline-end: 20px;   /* 右侧（水平方向结束） */
+}
+```
+
+## 12. color-mix() 颜色混合
+
+```css
+.device-button {
+  background-color: color-mix(in srgb, var(--primary-color) 80%, white);
+  
+  &:hover {
+    background-color: color-mix(in srgb, var(--primary-color) 100%, black 10%);
+  }
+}
+```
+
+## 实际应用示例：优化你的 device.css
+
+```css
+/* 使用CSS变量和嵌套优化后的代码 */
+:root {
+  --device-primary: #0769fb;
+  --device-primary-hover: #0550d0;
+  --device-spacing: 16px;
+  --device-transition: 0.3s ease;
+}
+
+.device-container {
+  width: 100%;
+  height: 100%;
+  background-color: var(--device-primary);
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  transition: background-color var(--device-transition);
+  
+  &:hover {
+    background-color: var(--device-primary-hover);
+  }
+  
+  .device-update {
+    width: 100%;
+    height: auto;
+    min-height: 60px;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--device-spacing);
+    gap: var(--device-spacing);
+    
+    .device-update-title {
+      font-size: 1.2rem;
+      font-weight: 600;
+      color: white;
+      flex: 1;
+    }
+    
+    .device-update-btn {
+      padding: 8px 16px;
+      background-color: rgba(255, 255, 255, 0.2);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all var(--device-transition);
+      
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.3);
+        transform: scale(1.05);
+      }
+    }
+  }
+  
+  .device-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--device-spacing);
+    
+    /* 容器查询 */
+    container-type: inline-size;
+    
+    @container (min-width: 600px) {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: var(--device-spacing);
+    }
+  }
+  
+  .device-add {
+    width: 100%;
+    min-height: 50px;
+    background-color: rgba(255, 255, 255, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all var(--device-transition);
+    
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+}
+```
+
+## 浏览器支持情况
+
+- ✅ CSS 嵌套: Chrome 112+, Firefox 117+, Safari 16.5+
+- ✅ 容器查询: Chrome 105+, Firefox 110+, Safari 16.0+
+- ✅ :has(): Chrome 105+, Firefox 121+, Safari 15.4+
+- ✅ CSS 变量: 所有现代浏览器
+- ✅ @layer: Chrome 99+, Firefox 97+, Safari 15.4+
+- ✅ aspect-ratio: Chrome 88+, Firefox 89+, Safari 15.0+
+
+## 推荐学习资源
+
+1. MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS
+2. CSS-Tricks: https://css-tricks.com/
+3. web.dev Learn CSS: https://web.dev/learn/css/

configs/dependencies.txt

@@ -0,0 +1,339 @@
+7zip-bin==5.2.0
+@babel/code-frame==7.28.6
+@babel/compat-data==7.28.6
+@babel/core==7.28.6
+@babel/generator==7.28.6
+@babel/helper-compilation-targets==7.28.6
+@babel/helper-globals==7.28.0
+@babel/helper-module-imports==7.28.6
+@babel/helper-module-transforms==7.28.6
+@babel/helper-plugin-utils==7.28.6
+@babel/helper-string-parser==7.27.1
+@babel/helper-validator-identifier==7.28.5
+@babel/helper-validator-option==7.27.1
+@babel/helpers==7.28.6
+@babel/parser==7.28.6
+@babel/plugin-transform-react-jsx-self==7.27.1
+@babel/plugin-transform-react-jsx-source==7.27.1
+@babel/runtime==7.28.6
+@babel/template==7.28.6
+@babel/traverse==7.28.6
+@babel/types==7.28.6
+@develar/schema-utils==2.6.5
+@electron/asar==3.4.1
+@electron/get==2.0.3
+@electron/notarize==2.2.1
+@electron/osx-sign==1.0.5
+@electron/universal==1.5.1
+@emotion/is-prop-valid==1.4.0
+@emotion/memoize==0.9.0
+@emotion/unitless==0.10.0
+@esbuild/win32-arm64==0.21.5
+@hapi/hoek==9.3.0
+@hapi/topo==5.1.0
+@isaacs/cliui==8.0.2
+@jridgewell/gen-mapping==0.3.13
+@jridgewell/remapping==2.3.5
+@jridgewell/resolve-uri==3.1.2
+@jridgewell/sourcemap-codec==1.5.5
+@jridgewell/trace-mapping==0.3.31
+@malept/cross-spawn-promise==1.1.1
+@malept/flatpak-bundler==0.4.0
+@parcel/watcher-win32-arm64==2.5.6
+@parcel/watcher==2.5.6
+@pkgjs/parseargs==0.11.0
+@remix-run/router==1.23.2
+@rolldown/pluginutils==1.0.0-beta.27
+@rollup/rollup-win32-arm64-msvc==4.57.0
+@sideway/address==4.1.5
+@sideway/formula==3.0.1
+@sideway/pinpoint==2.0.0
+@sindresorhus/is==4.6.0
+@szmarczak/http-timer==4.0.6
+@tootallnate/once==2.0.0
+@types/babel__core==7.20.5
+@types/babel__generator==7.27.0
+@types/babel__template==7.4.4
+@types/babel__traverse==7.28.0
+@types/cacheable-request==6.0.3
+@types/debug==4.1.12
+@types/estree==1.0.8
+@types/fs-extra==9.0.13
+@types/http-cache-semantics==4.2.0
+@types/keyv==3.1.4
+@types/ms==2.1.0
+@types/node==18.19.130
+@types/responselike==1.0.3
+@types/stylis==4.2.7
+@types/yauzl==2.10.3
+@vitejs/plugin-react==4.7.0
+@xmldom/xmldom==0.8.11
+agent-base==6.0.2
+ajv-keywords==3.5.2
+ajv==6.12.6
+ansi-regex==5.0.1
+ansi-styles==4.3.0
+app-builder-bin==4.0.0
+app-builder-lib==24.13.3
+archiver-utils==2.1.0
+archiver==5.3.2
+argparse==2.0.1
+async-exit-hook==2.0.1
+async==3.2.6
+asynckit==0.4.0
+at-least-node==1.0.0
+axios==1.13.4
+balanced-match==1.0.2
+base64-js==1.5.1
+baseline-browser-mapping==2.9.19
+bl==4.1.0
+bluebird-lst==1.0.9
+bluebird==3.7.2
+boolean==3.2.0
+brace-expansion==2.0.2
+browserslist==4.28.1
+buffer-crc32==0.2.13
+buffer-equal==1.0.1
+buffer-from==1.1.2
+buffer==5.7.1
+builder-util-runtime==9.2.4
+builder-util==24.13.1
+cacheable-lookup==5.0.4
+cacheable-request==7.0.4
+call-bind-apply-helpers==1.0.2
+camelize==1.0.1
+caniuse-lite==1.0.30001766
+chalk==4.1.2
+chokidar==4.0.3
+chownr==2.0.0
+chromium-pickle-js==0.2.0
+ci-info==3.9.0
+cliui==8.0.1
+clone-response==1.0.3
+color-convert==2.0.1
+color-name==1.1.4
+combined-stream==1.0.8
+commander==5.1.0
+compare-version==0.1.2
+compress-commons==4.1.2
+concat-map==0.0.1
+concurrently==8.2.2
+config-file-ts==0.2.6
+convert-source-map==2.0.0
+core-util-is==1.0.2
+crc-32==1.2.2
+crc32-stream==4.0.3
+cross-spawn==7.0.6
+css-color-keywords==1.0.0
+css-to-react-native==3.2.0
+csstype==3.2.3
+date-fns==2.30.0
+debug==4.4.3
+decompress-response==6.0.0
+defer-to-connect==2.0.1
+define-data-property==1.1.4
+define-properties==1.2.1
+delayed-stream==1.0.0
+detect-libc==2.1.2
+detect-node==2.1.0
+dir-compare==3.3.0
+dmg-builder==24.13.3
+dotenv-expand==5.1.0
+dotenv==9.0.2
+dunder-proto==1.0.1
+eastasianwidth==0.2.0
+ejs==3.1.10
+electron-builder-squirrel-windows==24.13.3
+electron-builder==24.13.3
+electron-publish==24.13.1
+electron-to-chromium==1.5.282
+electron==28.3.3
+emoji-regex==8.0.0
+end-of-stream==1.4.5
+env-paths==2.2.1
+err-code==2.0.3
+es-define-property==1.0.1
+es-errors==1.3.0
+es-object-atoms==1.1.1
+es-set-tostringtag==2.1.0
+es6-error==4.1.1
+esbuild==0.21.5
+escalade==3.2.0
+escape-string-regexp==4.0.0
+extract-zip==2.0.1
+fast-deep-equal==3.1.3
+fast-json-stable-stringify==2.1.0
+fd-slicer==1.1.0
+filelist==1.0.4
+follow-redirects==1.15.11
+foreground-child==3.3.1
+form-data==4.0.5
+fs-constants==1.0.0
+fs-extra==8.1.0
+fs-minipass==2.1.0
+fs.realpath==1.0.0
+function-bind==1.1.2
+gensync==1.0.0-beta.2
+get-caller-file==2.0.5
+get-intrinsic==1.3.0
+get-proto==1.0.1
+get-stream==5.2.0
+glob==7.2.3
+global-agent==3.0.0
+globalthis==1.0.4
+gopd==1.2.0
+got==11.8.6
+graceful-fs==4.2.11
+has-flag==4.0.0
+has-property-descriptors==1.0.2
+has-symbols==1.1.0
+has-tostringtag==1.0.2
+hasown==2.0.2
+hosted-git-info==4.1.0
+http-cache-semantics==4.2.0
+http-proxy-agent==5.0.0
+http2-wrapper==1.0.3
+https-proxy-agent==5.0.1
+iconv-lite==0.6.3
+ieee754==1.2.1
+immutable==5.1.4
+inflight==1.0.6
+inherits==2.0.4
+is-ci==3.0.1
+is-extglob==2.1.1
+is-fullwidth-code-point==3.0.0
+is-glob==4.0.3
+isarray==1.0.0
+isbinaryfile==5.0.7
+isexe==2.0.0
+jackspeak==3.4.3
+jake==10.9.4
+joi==17.13.3
+js-tokens==4.0.0
+js-yaml==4.1.1
+jsesc==3.1.0
+json-buffer==3.0.1
+json-schema-traverse==0.4.1
+json-stringify-safe==5.0.1
+json5==2.2.3
+jsonfile==4.0.0
+keyv==4.5.4
+lazy-val==1.0.5
+lazystream==1.0.1
+lodash.defaults==4.2.0
+lodash.difference==4.5.0
+lodash.flatten==4.4.0
+lodash.isplainobject==4.0.6
+lodash.union==4.6.0
+lodash==4.17.23
+loose-envify==1.4.0
+lowercase-keys==2.0.0
+lru-cache==5.1.1
+matcher==3.0.0
+math-intrinsics==1.1.0
+mime-db==1.52.0
+mime-types==2.1.35
+mime==2.6.0
+mimic-response==1.0.1
+minimatch==5.1.6
+minimist==1.2.8
+minipass==5.0.0
+minizlib==2.1.2
+mkdirp==1.0.4
+ms==2.1.3
+nanoid==3.3.11
+node-releases==2.0.27
+normalize-path==3.0.0
+normalize-url==6.1.0
+object-keys==1.1.1
+once==1.4.0
+p-cancelable==2.1.1
+package-json-from-dist==1.0.1
+path-is-absolute==1.0.1
+path-key==3.1.1
+path-scurry==1.11.1
+pend==1.2.0
+picocolors==1.1.1
+picomatch==4.0.3
+plist==3.1.0
+postcss-value-parser==4.2.0
+postcss==8.5.6
+process-nextick-args==2.0.1
+progress==2.0.3
+promise-retry==2.0.1
+proxy-from-env==1.1.0
+pump==3.0.3
+punycode==2.3.1
+quick-lru==5.1.1
+react-dom==18.3.1
+react-refresh==0.17.0
+react-router-dom==6.30.3
+react-router==6.30.3
+react==18.3.1
+read-config-file==6.3.2
+readable-stream==3.6.2
+readdir-glob==1.1.3
+readdirp==4.1.2
+require-directory==2.1.1
+resolve-alpn==1.2.1
+responselike==2.0.1
+retry==0.12.0
+roarr==2.15.4
+rollup==4.57.0
+rxjs==7.8.2
+safe-buffer==5.2.1
+safer-buffer==2.1.2
+sanitize-filename==1.6.3
+sass==1.97.3
+sax==1.4.4
+scheduler==0.23.2
+semver-compare==1.0.0
+semver==6.3.1
+serialize-error==7.0.1
+shallowequal==1.1.0
+shebang-command==2.0.0
+shebang-regex==3.0.0
+shell-quote==1.8.3
+signal-exit==4.1.0
+simple-update-notifier==2.0.0
+source-map-js==1.2.1
+source-map-support==0.5.21
+source-map==0.6.1
+spawn-command==0.0.2
+sprintf-js==1.1.3
+stat-mode==1.0.0
+string-width==4.2.3
+string_decoder==1.3.0
+strip-ansi==6.0.1
+styled-components==6.3.8
+stylis==4.3.6
+sumchecker==3.0.1
+supports-color==8.1.1
+tar-stream==2.2.0
+tar==6.2.1
+temp-file==3.4.0
+tmp-promise==3.0.3
+tmp==0.2.5
+tree-kill==1.2.2
+truncate-utf8-bytes==1.0.2
+tslib==2.8.1
+type-fest==0.13.1
+typescript==5.9.3
+undici-types==5.26.5
+universalify==0.1.2
+update-browserslist-db==1.2.3
+uri-js==4.4.1
+utf8-byte-length==1.0.5
+util-deprecate==1.0.2
+vite==5.4.21
+wait-on==7.2.0
+which==2.0.2
+wrap-ansi==7.0.0
+wrappy==1.0.2
+xmlbuilder==15.1.1
+y18n==5.0.8
+yallist==3.1.1
+yargs-parser==21.1.1
+yargs==17.7.2
+yauzl==2.10.0
+zip-stream==4.1.1

configs/nodejs-dependencies-install.js

@@ -0,0 +1,204 @@
+#!/usr/bin/env node
+/**
+ * Node.js 依赖安装和同步脚本
+ * 功能：检查、安装 package.json 中的依赖，然后同步所有已安装的包到 dependencies.txt
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+// 获取脚本所在目录和项目根目录
+const scriptDir = __dirname;
+const projectRoot = path.dirname(scriptDir);
+const packageJsonPath = path.join(projectRoot, 'package.json');
+const dependenciesFile = path.join(scriptDir, 'dependencies.txt');
+const nodeModulesPath = path.join(projectRoot, 'node_modules');
+
+// 颜色输出函数
+const colors = {
+    reset: '\x1b[0m',
+    red: '\x1b[31m',
+    green: '\x1b[32m',
+    yellow: '\x1b[33m',
+    cyan: '\x1b[36m',
+    white: '\x1b[37m'
+};
+
+function log(message, color = 'reset') {
+    console.log(`${colors[color]}${message}${colors.reset}`);
+}
+
+// 检查 package.json 是否存在
+if (!fs.existsSync(packageJsonPath)) {
+    log('[X] package.json not found', 'red');
+    process.exit(1);
+}
+
+// 读取 package.json
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+const allDependencies = {};
+
+// 收集所有依赖
+if (packageJson.dependencies) {
+    Object.keys(packageJson.dependencies).forEach(depName => {
+        allDependencies[depName] = {
+            version: packageJson.dependencies[depName],
+            type: 'dependency'
+        };
+    });
+}
+
+if (packageJson.devDependencies) {
+    Object.keys(packageJson.devDependencies).forEach(depName => {
+        allDependencies[depName] = {
+            version: packageJson.devDependencies[depName],
+            type: 'devDependency'
+        };
+    });
+}
+
+// 检查缺失的依赖
+const missingDependencies = [];
+let installedCount = 0;
+let missingCount = 0;
+
+const depNames = Object.keys(allDependencies).sort();
+
+for (const depName of depNames) {
+    const packagePath = path.join(nodeModulesPath, depName);
+    const packageJsonPath = path.join(packagePath, 'package.json');
+    
+    if (fs.existsSync(packageJsonPath)) {
+        installedCount++;
+    } else {
+        missingDependencies.push(depName);
+        missingCount++;
+    }
+}
+
+// 如果有缺失的依赖，显示必要信息并安装
+if (missingCount > 0) {
+    log(`[X] Missing ${missingCount} package(s) out of ${Object.keys(allDependencies).length}`, 'red');
+    
+    log('Missing dependencies:', 'yellow');
+    missingDependencies.forEach(missing => {
+        log(`  - ${missing}`, 'red');
+    });
+    
+    log('\nInstalling missing dependencies...', 'yellow');
+    
+    try {
+        // 切换到项目根目录
+        process.chdir(projectRoot);
+        // 执行 npm install，隐藏输出
+        execSync('npm install', { 
+            stdio: 'ignore',
+            cwd: projectRoot
+        });
+        log('[OK] All dependencies installed successfully', 'green');
+    } catch (error) {
+        log('[X] Dependency installation failed', 'red');
+        process.exit(1);
+    }
+} else {
+    log(`[OK] All dependencies are installed (${Object.keys(allDependencies).length} packages)`, 'green');
+}
+
+// 同步所有已安装的依赖到 dependencies.txt
+log('\nSyncing all installed dependencies to configs/dependencies.txt...', 'cyan');
+
+const syncResult = [];
+
+if (fs.existsSync(nodeModulesPath)) {
+    // 遍历 node_modules 目录，查找所有 package.json 文件
+    function findPackageJsonFiles(dir) {
+        const files = [];
+        try {
+            const entries = fs.readdirSync(dir, { withFileTypes: true });
+            
+            for (const entry of entries) {
+                const fullPath = path.join(dir, entry.name);
+                
+                if (entry.isDirectory()) {
+                    // 跳过 .bin 目录和其他特殊目录
+                    if (entry.name.startsWith('.') || entry.name === 'node_modules') {
+                        continue;
+                    }
+                    // 递归查找
+                    files.push(...findPackageJsonFiles(fullPath));
+                } else if (entry.name === 'package.json') {
+                    files.push(fullPath);
+                }
+            }
+        } catch (error) {
+            // 忽略权限错误等
+        }
+        return files;
+    }
+    
+    const packageJsonFiles = findPackageJsonFiles(nodeModulesPath);
+    
+    for (const file of packageJsonFiles) {
+        try {
+            const pkg = JSON.parse(fs.readFileSync(file, 'utf-8'));
+            if (pkg.name && pkg.version) {
+                syncResult.push(`${pkg.name}==${pkg.version}`);
+            }
+        } catch (error) {
+            // 忽略解析错误
+        }
+    }
+    
+    // 如果遍历结果为空，使用 npm list 作为后备方案
+    if (syncResult.length === 0) {
+        try {
+            const npmListOutput = execSync('npm list --depth=0 --json', { 
+                encoding: 'utf-8',
+                cwd: projectRoot,
+                stdio: ['ignore', 'pipe', 'ignore']
+            });
+            const npmList = JSON.parse(npmListOutput);
+            if (npmList.dependencies) {
+                Object.keys(npmList.dependencies).forEach(depName => {
+                    const dep = npmList.dependencies[depName];
+                    if (dep && dep.version) {
+                        syncResult.push(`${depName}==${dep.version}`);
+                    }
+                });
+            }
+        } catch (error) {
+            // 忽略错误
+        }
+    }
+} else {
+    // 如果 node_modules 不存在，使用 npm list
+    try {
+        const npmListOutput = execSync('npm list --depth=0 --json', { 
+            encoding: 'utf-8',
+            cwd: projectRoot,
+            stdio: ['ignore', 'pipe', 'ignore']
+        });
+        const npmList = JSON.parse(npmListOutput);
+        if (npmList.dependencies) {
+            Object.keys(npmList.dependencies).forEach(depName => {
+                const dep = npmList.dependencies[depName];
+                if (dep && dep.version) {
+                    syncResult.push(`${depName}==${dep.version}`);
+                }
+            });
+        }
+    } catch (error) {
+        // 忽略错误
+    }
+}
+
+// 去重并排序
+const uniqueResult = [...new Set(syncResult)].sort();
+
+// 写入文件（UTF-8 编码）
+fs.writeFileSync(dependenciesFile, uniqueResult.join('\n') + '\n', 'utf-8');
+
+log(`[OK] Dependencies synced to ${dependenciesFile} (${uniqueResult.length} packages)`, 'green');
+
+process.exit(0);

doc/BEST_CSS_VS_SCSS.md

@@ -0,0 +1,453 @@
+# 功能最强大的 CSS 方案 vs SCSS
+
+## 🏆 功能最强大的 CSS 方案：Styled Components（CSS-in-JS）
+
+**Styled Components** 是目前功能最强大的 React CSS 方案，支持动态样式、主题系统、组件绑定等 SCSS 无法实现的功能。
+
+---
+
+## 📊 核心对比
+
+| 功能 | SCSS | Styled Components |
+|------|------|------------------|
+| **动态样式**（根据 props/state） | ❌ | ✅✅✅ |
+| **组件绑定** | ❌ | ✅✅✅ |
+| **主题系统** | ⚠️ 手动实现 | ✅✅✅ 内置 |
+| **条件样式** | ❌ | ✅✅✅ |
+| **运行时修改** | ❌ | ✅✅✅ |
+| **TypeScript 支持** | ⚠️ 基础 | ✅✅✅ 完美 |
+| **变量系统** | ✅✅✅ | ✅✅✅ |
+| **嵌套** | ✅✅✅ | ✅✅✅ |
+| **函数/混入** | ✅✅✅ | ✅✅✅ |
+| **编译时性能** | ✅✅✅ | ⚠️ 运行时 |
+| **运行时性能** | ✅✅✅ | ⚠️ 有开销 |
+
+---
+
+## 🚀 Styled Components 的核心优势
+
+### 1. 动态样式（SCSS 无法实现）
+
+#### SCSS（静态）
+```scss
+// device.scss
+.device-active { background: #28a745; }
+.device-inactive { background: #0769fb; }
+```
+
+```jsx
+// 需要手动切换类名
+<div className={isActive ? 'device-active' : 'device-inactive'}>
+```
+
+#### Styled Components（动态）
+```jsx
+import styled from 'styled-components'
+
+const Device = styled.div`
+  background-color: ${props => props.isActive ? '#28a745' : '#0769fb'};
+  color: ${props => props.isActive ? 'white' : 'black'};
+  transform: ${props => props.isActive ? 'scale(1.05)' : 'scale(1)'};
+  transition: all 0.3s;
+`
+
+// 直接使用，自动根据 props 变化
+<Device isActive={isActive}>设备</Device>
+```
+
+**优势：** 样式完全由 JavaScript 控制，可以根据任何条件动态生成。
+
+---
+
+### 2. 主题系统（SCSS 需要手动实现）
+
+#### SCSS（手动实现）
+```scss
+// 需要写多个主题类
+.theme-light { background: #fff; color: #000; }
+.theme-dark { background: #1a1a1a; color: #fff; }
+```
+
+```jsx
+<div className={`container ${theme === 'dark' ? 'theme-dark' : 'theme-light'}`}>
+```
+
+#### Styled Components（内置主题）
+```jsx
+import styled, { ThemeProvider } from 'styled-components'
+
+const Container = styled.div`
+  background-color: ${props => props.theme.bg};
+  color: ${props => props.theme.text};
+`
+
+const theme = {
+  light: { bg: '#fff', text: '#000' },
+  dark: { bg: '#1a1a1a', text: '#fff' }
+}
+
+// 一键切换主题
+<ThemeProvider theme={theme[currentTheme]}>
+  <Container>内容</Container>
+</ThemeProvider>
+```
+
+**优势：** 内置主题系统，切换主题无需修改组件代码。
+
+---
+
+### 3. 组件绑定（SCSS 样式和组件分离）
+
+#### SCSS（分离）
+```scss
+// device.scss
+.device-container { }
+.device-title { }
+.device-button { }
+```
+
+```jsx
+// device.jsx
+import './device.scss'
+<div className="device-container">
+  <h1 className="device-title">标题</h1>
+  <button className="device-button">按钮</button>
+</div>
+```
+
+#### Styled Components（绑定）
+```jsx
+import styled from 'styled-components'
+
+const DeviceContainer = styled.div`
+  width: 100%;
+  background-color: #0769fb;
+`
+
+const DeviceTitle = styled.h1`
+  font-size: 24px;
+  color: white;
+`
+
+const DeviceButton = styled.button`
+  padding: 12px 24px;
+  background: white;
+  border: none;
+  border-radius: 4px;
+`
+
+// 样式和组件完全绑定，不会冲突
+function Device() {
+  return (
+    <DeviceContainer>
+      <DeviceTitle>标题</DeviceTitle>
+      <DeviceButton>按钮</DeviceButton>
+    </DeviceContainer>
+  )
+}
+```
+
+**优势：** 样式和组件绑定，自动作用域隔离，不会产生样式冲突。
+
+---
+
+### 4. 条件样式（SCSS 需要写多个类）
+
+#### SCSS（多个类）
+```scss
+.button { }
+.button-primary { background: blue; }
+.button-danger { background: red; }
+.button-large { padding: 20px; }
+.button-small { padding: 10px; }
+```
+
+```jsx
+<button className={`button button-${type} button-${size}`}>
+```
+
+#### Styled Components（条件逻辑）
+```jsx
+const Button = styled.button`
+  padding: ${props => props.size === 'large' ? '20px' : '10px'};
+  background-color: ${props => {
+    if (props.variant === 'primary') return '#0769fb';
+    if (props.variant === 'danger') return '#dc3545';
+    return '#6c757d';
+  }};
+  
+  ${props => props.disabled && `
+    opacity: 0.5;
+    cursor: not-allowed;
+  `}
+`
+
+<Button variant="primary" size="large" disabled={false}>
+  按钮
+</Button>
+```
+
+**优势：** 使用 JavaScript 逻辑，更灵活强大。
+
+---
+
+### 5. 响应式设计（更灵活）
+
+#### SCSS（媒体查询）
+```scss
+.container {
+  width: 100%;
+  
+  @media (max-width: 768px) {
+    width: 50%;
+  }
+}
+```
+
+#### Styled Components（函数式）
+```jsx
+const Container = styled.div`
+  width: 100%;
+  
+  ${props => props.theme.breakpoints.md} {
+    width: 50%;
+  }
+  
+  // 或者使用 props
+  width: ${props => props.isMobile ? '100%' : '50%'};
+`
+```
+
+**优势：** 可以根据 props 动态调整，不局限于媒体查询。
+
+---
+
+### 6. TypeScript 完美支持
+
+#### SCSS（无类型）
+```scss
+// 无法类型检查
+.container { }
+```
+
+#### Styled Components（类型安全）
+```tsx
+interface ButtonProps {
+  variant?: 'primary' | 'danger' | 'success';
+  size?: 'small' | 'medium' | 'large';
+}
+
+const Button = styled.button<ButtonProps>`
+  background-color: ${props => {
+    // TypeScript 会自动提示 variant 的值
+    switch (props.variant) {
+      case 'primary': return '#0769fb';
+      case 'danger': return '#dc3545';
+      default: return '#6c757d';
+    }
+  }};
+`
+```
+
+**优势：** 完整的 TypeScript 支持，类型安全，自动补全。
+
+---
+
+## 💪 功能对比总结
+
+### SCSS 能做的
+- ✅ 变量
+- ✅ 嵌套
+- ✅ 函数/混入
+- ✅ 编译时处理
+
+### Styled Components 能做的（SCSS 无法实现）
+- ✅ **动态样式**：根据 props/state 实时变化
+- ✅ **主题系统**：内置主题切换
+- ✅ **组件绑定**：样式和组件绑定
+- ✅ **条件样式**：JavaScript 逻辑控制
+- ✅ **运行时修改**：动态生成样式
+- ✅ **TypeScript**：完美类型支持
+
+---
+
+## 🎯 实际应用场景对比
+
+### 场景1：根据状态改变样式
+
+#### SCSS
+```scss
+.device-online { background: green; }
+.device-offline { background: red; }
+.device-unknown { background: gray; }
+```
+
+```jsx
+<div className={`device-${status}`}>
+```
+
+#### Styled Components
+```jsx
+const Device = styled.div`
+  background-color: ${props => {
+    if (props.status === 'online') return 'green';
+    if (props.status === 'offline') return 'red';
+    return 'gray';
+  }};
+`
+
+<Device status={status}>
+```
+
+**优势：** 无需预定义所有状态类，动态生成。
+
+---
+
+### 场景2：动画效果
+
+#### SCSS
+```scss
+@keyframes slideIn {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+
+.slide-in { animation: slideIn 0.3s; }
+```
+
+#### Styled Components
+```jsx
+const SlideIn = styled.div`
+  animation: ${props => props.duration || '0.3s'} slideIn;
+  
+  @keyframes slideIn {
+    from { transform: translateX(-${props => props.distance || '100%'}); }
+    to { transform: translateX(0); }
+  }
+`
+
+<SlideIn duration="0.5s" distance="200px">
+```
+
+**优势：** 动画参数可以动态配置。
+
+---
+
+### 场景3：复杂条件样式
+
+#### SCSS
+```scss
+// 需要写很多类
+.button { }
+.button-primary { }
+.button-primary-large { }
+.button-primary-large-disabled { }
+.button-danger { }
+.button-danger-large { }
+// ... 组合爆炸
+```
+
+#### Styled Components
+```jsx
+const Button = styled.button`
+  padding: ${props => props.size === 'large' ? '20px' : '10px'};
+  background: ${props => props.variant === 'primary' ? '#0769fb' : '#dc3545'};
+  opacity: ${props => props.disabled ? 0.5 : 1};
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+`
+
+// 任意组合，无需预定义
+<Button variant="primary" size="large" disabled={false}>
+<Button variant="danger" size="small" disabled={true}>
+```
+
+**优势：** 无需预定义所有组合，动态生成。
+
+---
+
+## ⚖️ 性能对比
+
+### SCSS
+- ✅ **编译时处理**：编译后就是普通 CSS
+- ✅ **运行时性能**：零开销
+- ✅ **体积**：只包含使用的样式
+
+### Styled Components
+- ⚠️ **运行时处理**：需要 JavaScript 运行时生成样式
+- ⚠️ **运行时开销**：很小，但存在
+- ⚠️ **体积**：需要引入库（约 15KB gzipped）
+
+**注意：** 对于大多数应用，Styled Components 的性能开销可以忽略不计。
+
+---
+
+## 🎯 结论
+
+### Styled Components 是功能最强大的方案
+
+**原因：**
+1. ✅ **动态样式**：SCSS 无法实现
+2. ✅ **主题系统**：内置支持，SCSS 需要手动实现
+3. ✅ **组件绑定**：自动作用域隔离
+4. ✅ **条件样式**：JavaScript 逻辑，更灵活
+5. ✅ **TypeScript**：完美支持
+
+### SCSS 的优势
+
+1. ✅ **性能**：编译时处理，运行时零开销
+2. ✅ **简单**：学习成本低
+3. ✅ **成熟**：生态完善
+
+### 推荐使用场景
+
+**使用 Styled Components 当你需要：**
+- ✅ 动态样式（根据 props/state）
+- ✅ 主题切换功能
+- ✅ 复杂的条件样式
+- ✅ TypeScript 项目
+
+**使用 SCSS 当你需要：**
+- ✅ 静态样式
+- ✅ 最佳性能
+- ✅ 简单项目
+- ✅ 不需要动态样式
+
+---
+
+## 📦 快速开始
+
+### 安装
+```bash
+npm install styled-components
+```
+
+### 基础使用
+```jsx
+import styled from 'styled-components'
+
+const Container = styled.div`
+  background-color: ${props => props.bgColor || '#0769fb'};
+  padding: 16px;
+`
+
+function App() {
+  return <Container bgColor="#28a745">内容</Container>
+}
+```
+
+---
+
+## 📚 总结
+
+**Styled Components 比 SCSS 功能更强大**，主要体现在：
+- ✅ 动态样式（SCSS 无法实现）
+- ✅ 主题系统（内置支持）
+- ✅ 组件绑定（自动隔离）
+- ✅ 条件样式（JavaScript 逻辑）
+- ✅ TypeScript 完美支持
+
+**但 SCSS 在性能上更优**（编译时处理，零运行时开销）。
+
+**选择建议：**
+- 需要动态样式 → **Styled Components**
+- 只需要静态样式 → **SCSS**

doc/MIGRATION_TO_STYLED_COMPONENTS.md

@@ -0,0 +1,386 @@
+# 迁移到 Styled Components 完成报告
+
+## ✅ 迁移完成
+
+项目已成功从 **SCSS** 迁移到 **Styled Components**（功能最强大的 CSS 方案）。
+
+---
+
+## 📦 已安装的依赖
+
+```json
+{
+  "styled-components": "^6.x.x"
+}
+```
+
+---
+
+## 🎨 新的文件结构
+
+### 主题文件
+```
+src/styles/
+└── theme.js          # 主题配置（替代 _variables.scss）
+```
+
+### 组件文件（已转换）
+```
+src/page/
+├── home.jsx          # ✅ 已转换为 Styled Components
+├── device/
+│   └── device.jsx    # ✅ 已转换为 Styled Components
+├── ai-chat/
+│   ├── ai-chat.jsx   # ✅ 已转换为 Styled Components
+│   ├── input/
+│   │   └── input.jsx # ✅ 已转换为 Styled Components
+│   └── dialog/
+│       └── dialog.jsx # ✅ 已转换为 Styled Components
+├── process/
+│   └── process.jsx   # ✅ 已转换为 Styled Components
+├── screenshot/
+│   └── screenshot.jsx # ✅ 已转换为 Styled Components
+└── public/
+    └── alert-view/
+        └── alert-view.jsx # ✅ 已转换为 Styled Components
+```
+
+### 已删除的文件
+- ❌ 所有 `.scss` 文件已删除
+- ❌ `src/styles/_variables.scss` 已删除
+
+---
+
+## 🔄 主要变化
+
+### 1. 主题系统
+
+#### 之前（SCSS）
+```scss
+// _variables.scss
+$primary-color: #0769fb;
+```
+
+```scss
+// component.scss
+@import '../../styles/_variables';
+.container {
+  background-color: $primary-color;
+}
+```
+
+#### 现在（Styled Components）
+```js
+// theme.js
+export const theme = {
+  colors: {
+    primary: '#0769fb',
+  }
+}
+```
+
+```jsx
+// component.jsx
+import styled from 'styled-components'
+
+const Container = styled.div`
+  background-color: ${props => props.theme.colors.primary};
+`
+```
+
+### 2. 组件样式
+
+#### 之前（SCSS）
+```jsx
+import './component.scss'
+
+<div className="container">
+```
+
+#### 现在（Styled Components）
+```jsx
+import styled from 'styled-components'
+
+const Container = styled.div`
+  /* 样式 */
+`
+
+<Container>
+```
+
+### 3. 入口文件
+
+#### 之前
+```jsx
+// index.jsx
+<App />
+```
+
+#### 现在
+```jsx
+// index.jsx
+<ThemeProvider theme={theme}>
+  <App />
+</ThemeProvider>
+```
+
+---
+
+## 🚀 新功能优势
+
+### 1. 动态样式（SCSS 无法实现）
+
+现在可以根据 props 动态改变样式：
+
+```jsx
+const Device = styled.div`
+  background-color: ${props => 
+    props.isActive ? '#28a745' : '#0769fb'
+  };
+`
+
+<Device isActive={true}>设备</Device>
+```
+
+### 2. 主题切换（内置支持）
+
+可以轻松切换主题：
+
+```jsx
+const lightTheme = { colors: { primary: '#0769fb' } }
+const darkTheme = { colors: { primary: '#4a9eff' } }
+
+<ThemeProvider theme={isDark ? darkTheme : lightTheme}>
+  <App />
+</ThemeProvider>
+```
+
+### 3. 组件绑定（自动隔离）
+
+样式和组件绑定，不会产生冲突：
+
+```jsx
+const Button = styled.button`
+  /* 样式自动隔离 */
+`
+```
+
+### 4. TypeScript 支持（完美）
+
+如果使用 TypeScript，可以获得完整的类型支持：
+
+```tsx
+interface ButtonProps {
+  variant?: 'primary' | 'danger';
+}
+
+const Button = styled.button<ButtonProps>`
+  background: ${props => 
+    props.variant === 'primary' ? '#0769fb' : '#dc3545'
+  };
+`
+```
+
+---
+
+## 📝 使用指南
+
+### 基本用法
+
+```jsx
+import styled from 'styled-components'
+
+const Container = styled.div`
+  width: 100%;
+  background-color: ${props => props.theme.colors.primary};
+  padding: 16px;
+  
+  &:hover {
+    background-color: ${props => props.theme.colors.secondary};
+  }
+`
+
+function Component() {
+  return <Container>内容</Container>
+}
+```
+
+### 使用主题
+
+所有组件自动可以访问主题：
+
+```jsx
+const Button = styled.button`
+  color: ${props => props.theme.colors.white};
+  background: ${props => props.theme.colors.primary};
+`
+```
+
+### 动态样式
+
+```jsx
+const Card = styled.div`
+  background: ${props => 
+    props.isActive ? props.theme.colors.primary : '#f5f5f5'
+  };
+  transform: ${props => props.isActive ? 'scale(1.05)' : 'scale(1)'};
+  transition: all 0.3s;
+`
+
+<Card isActive={isActive}>卡片</Card>
+```
+
+---
+
+## 🎯 主题配置
+
+当前主题配置在 `src/styles/theme.js`：
+
+```js
+export const theme = {
+  colors: {
+    primary: '#0769fb',
+    aiChatBg: '#e0e8f4',
+    processBg: '#07fb40',
+    screenshotBg: 'rgba(251, 7, 7, 0.9)',
+    white: '#fff',
+    black: '#000',
+  },
+  sizes: {
+    full: '100%',
+    spacingBase: 0,
+  },
+  breakpoints: {
+    sm: '576px',
+    md: '768px',
+    lg: '992px',
+    xl: '1200px',
+  },
+}
+```
+
+### 添加新颜色
+
+在 `theme.js` 中添加：
+
+```js
+colors: {
+  // ... 现有颜色
+  success: '#28a745',
+  danger: '#dc3545',
+}
+```
+
+### 使用新颜色
+
+```jsx
+const Button = styled.button`
+  background: ${props => props.theme.colors.success};
+`
+```
+
+---
+
+## ⚠️ 注意事项
+
+### 1. 性能
+- Styled Components 有运行时开销，但对于大多数应用可以忽略
+- 如果性能是首要考虑，可以考虑使用 CSS Modules + SCSS
+
+### 2. 学习曲线
+- 需要学习 Styled Components 语法
+- 但功能更强大，值得学习
+
+### 3. 调试
+- 浏览器中会看到生成的类名（如 `sc-bdVaJa`）
+- 可以使用 `babel-plugin-styled-components` 获得更好的调试体验
+
+---
+
+## 🔧 可选优化
+
+### 1. 安装 Babel 插件（更好的调试）
+
+```bash
+npm install -D babel-plugin-styled-components
+```
+
+### 2. 创建全局样式
+
+```jsx
+import { createGlobalStyle } from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  body {
+    font-family: Arial, sans-serif;
+  }
+`
+
+function App() {
+  return (
+    <>
+      <GlobalStyle />
+      <App />
+    </>
+  )
+}
+```
+
+### 3. 创建混入（Mixin）
+
+```jsx
+// styles/mixins.js
+export const flexCenter = `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+// 使用
+const Container = styled.div`
+  ${flexCenter}
+`
+```
+
+---
+
+## 📚 相关文档
+
+- [Styled Components 官方文档](https://styled-components.com/)
+- [功能对比文档](./BEST_CSS_VS_SCSS.md)
+- [项目 CSS 指南](./PROJECT_CSS_GUIDE.md)
+
+---
+
+## ✅ 迁移检查清单
+
+- [x] 安装 styled-components
+- [x] 创建主题文件（theme.js）
+- [x] 转换所有组件为 Styled Components
+- [x] 更新入口文件添加 ThemeProvider
+- [x] 删除所有旧的 SCSS 文件
+- [x] 测试项目运行正常
+
+---
+
+## 🎉 完成
+
+项目已成功迁移到 **Styled Components**，现在可以使用：
+
+- ✅ 动态样式
+- ✅ 主题系统
+- ✅ 组件绑定
+- ✅ TypeScript 支持
+- ✅ 条件样式
+
+享受功能最强大的 CSS 方案带来的便利！
+
+---
+
+**迁移日期：** 2025-01-30

doc/MODERN_CSS_EXAMPLES.md

@@ -0,0 +1,365 @@
+# 现代CSS强大功能示例 (2025)
+
+## 1. CSS 嵌套 (CSS Nesting) ⭐ 最推荐
+让CSS代码更清晰、更易维护
+
+```css
+/* 传统写法 */
+.device-container {
+  width: 100%;
+  height: 100%;
+}
+
+.device-container .device-update {
+  display: flex;
+}
+
+.device-container .device-update-title {
+  color: white;
+}
+
+/* 现代嵌套写法 */
+.device-container {
+  width: 100%;
+  height: 100%;
+  
+  .device-update {
+    display: flex;
+    
+    .device-update-title {
+      color: white;
+    }
+  }
+  
+  /* 使用 & 引用父选择器 */
+  &:hover {
+    background-color: #0550d0;
+  }
+  
+  /* 媒体查询嵌套 */
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+}
+```
+
+## 2. CSS 变量 (Custom Properties) ⭐ 最实用
+统一管理颜色、尺寸等
+
+```css
+:root {
+  /* 颜色变量 */
+  --primary-color: #0769fb;
+  --primary-hover: #0550d0;
+  --text-color: #ffffff;
+  --bg-color: #f5f5f5;
+  
+  /* 尺寸变量 */
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  
+  /* 动画变量 */
+  --transition-fast: 0.2s ease;
+  --transition-normal: 0.3s ease;
+}
+
+.device-container {
+  background-color: var(--primary-color);
+  padding: var(--spacing-md);
+  transition: background-color var(--transition-normal);
+  
+  &:hover {
+    background-color: var(--primary-hover);
+  }
+}
+```
+
+## 3. 容器查询 (Container Queries) ⭐ 响应式新标准
+基于容器大小而非视口大小
+
+```css
+.device-container {
+  container-type: inline-size;
+  container-name: device;
+}
+
+/* 当容器宽度大于600px时 */
+@container device (min-width: 600px) {
+  .device-list {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* 当容器宽度小于600px时 */
+@container device (max-width: 599px) {
+  .device-list {
+    display: flex;
+    flex-direction: column;
+  }
+}
+```
+
+## 4. :has() 选择器 ⭐ 强大的父选择器
+根据子元素状态改变父元素样式
+
+```css
+/* 当包含特定子元素时 */
+.device-container:has(.device-update-title) {
+  border-top: 2px solid var(--primary-color);
+}
+
+/* 当子元素有焦点时 */
+.device-container:has(input:focus) {
+  box-shadow: 0 0 0 3px rgba(7, 105, 251, 0.3);
+}
+
+/* 当没有子元素时 */
+.device-list:has(:not(.device-item)) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+}
+```
+
+## 5. @layer 层叠层
+更好地管理CSS优先级
+
+```css
+@layer base, components, utilities;
+
+@layer base {
+  .device-container {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+@layer components {
+  .device-update {
+    display: flex;
+  }
+}
+
+@layer utilities {
+  .flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+```
+
+## 6. aspect-ratio
+保持元素宽高比
+
+```css
+.device-item {
+  aspect-ratio: 16 / 9; /* 保持16:9比例 */
+  width: 100%;
+}
+
+.device-card {
+  aspect-ratio: 1; /* 正方形 */
+}
+```
+
+## 7. backdrop-filter
+毛玻璃效果
+
+```css
+.device-overlay {
+  backdrop-filter: blur(10px);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+```
+
+## 8. clip-path 和 mask
+创建复杂形状
+
+```css
+.device-card {
+  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
+}
+
+.device-icon {
+  mask: url('icon.svg') no-repeat center;
+  mask-size: contain;
+}
+```
+
+## 9. CSS Grid 高级特性
+
+```css
+.device-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--spacing-md);
+  
+  /* 子网格 */
+  .device-list {
+    display: grid;
+    grid-template-columns: subgrid;
+  }
+}
+```
+
+## 10. 动画和过渡
+
+```css
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.device-item {
+  animation: slideIn 0.3s ease-out;
+  
+  /* 或者使用 transition */
+  transition: transform var(--transition-normal),
+              opacity var(--transition-normal);
+  
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+```
+
+## 11. 逻辑属性 (Logical Properties)
+更好的国际化支持
+
+```css
+.device-container {
+  /* 传统 */
+  margin-top: 10px;
+  margin-right: 20px;
+  
+  /* 现代逻辑属性 */
+  margin-block-start: 10px;  /* 顶部（垂直方向开始） */
+  margin-inline-end: 20px;   /* 右侧（水平方向结束） */
+}
+```
+
+## 12. color-mix() 颜色混合
+
+```css
+.device-button {
+  background-color: color-mix(in srgb, var(--primary-color) 80%, white);
+  
+  &:hover {
+    background-color: color-mix(in srgb, var(--primary-color) 100%, black 10%);
+  }
+}
+```
+
+## 实际应用示例：优化你的 device.css
+
+```css
+/* 使用CSS变量和嵌套优化后的代码 */
+:root {
+  --device-primary: #0769fb;
+  --device-primary-hover: #0550d0;
+  --device-spacing: 16px;
+  --device-transition: 0.3s ease;
+}
+
+.device-container {
+  width: 100%;
+  height: 100%;
+  background-color: var(--device-primary);
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  transition: background-color var(--device-transition);
+  
+  &:hover {
+    background-color: var(--device-primary-hover);
+  }
+  
+  .device-update {
+    width: 100%;
+    height: auto;
+    min-height: 60px;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--device-spacing);
+    gap: var(--device-spacing);
+    
+    .device-update-title {
+      font-size: 1.2rem;
+      font-weight: 600;
+      color: white;
+      flex: 1;
+    }
+    
+    .device-update-btn {
+      padding: 8px 16px;
+      background-color: rgba(255, 255, 255, 0.2);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all var(--device-transition);
+      
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.3);
+        transform: scale(1.05);
+      }
+    }
+  }
+  
+  .device-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--device-spacing);
+    
+    /* 容器查询 */
+    container-type: inline-size;
+    
+    @container (min-width: 600px) {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: var(--device-spacing);
+    }
+  }
+  
+  .device-add {
+    width: 100%;
+    min-height: 50px;
+    background-color: rgba(255, 255, 255, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all var(--device-transition);
+    
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+}
+```
+
+## 浏览器支持情况
+
+- ✅ CSS 嵌套: Chrome 112+, Firefox 117+, Safari 16.5+
+- ✅ 容器查询: Chrome 105+, Firefox 110+, Safari 16.0+
+- ✅ :has(): Chrome 105+, Firefox 121+, Safari 15.4+
+- ✅ CSS 变量: 所有现代浏览器
+- ✅ @layer: Chrome 99+, Firefox 97+, Safari 15.4+
+- ✅ aspect-ratio: Chrome 88+, Firefox 89+, Safari 15.0+
+
+## 推荐学习资源
+
+1. MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS
+2. CSS-Tricks: https://css-tricks.com/
+3. web.dev Learn CSS: https://web.dev/learn/css/

doc/PROJECT_CSS_GUIDE.md

@@ -0,0 +1,574 @@
+# 项目 CSS/SCSS 使用规范
+
+## 📋 目录
+
+1. [项目概述](#项目概述)
+2. [文件结构](#文件结构)
+3. [变量系统](#变量系统)
+4. [代码规范](#代码规范)
+5. [最佳实践](#最佳实践)
+6. [快速参考](#快速参考)
+7. [常见问题](#常见问题)
+
+---
+
+## 项目概述
+
+### 当前使用的方案
+- **SCSS**：项目使用 SCSS 作为 CSS 预处理器
+- **Vite**：构建工具，内置 SCSS 支持
+- **变量系统**：统一的变量管理
+
+### 技术栈
+- React 18.2.0
+- Vite 5.0.8
+- Sass 1.97.3
+
+---
+
+## 文件结构
+
+### 目录结构
+```
+src/
+├── styles/
+│   └── _variables.scss      # 全局变量文件
+├── page/
+│   ├── home.scss            # 页面样式
+│   ├── device/
+│   │   └── device.scss      # 组件样式
+│   ├── ai-chat/
+│   │   ├── ai-chat.scss
+│   │   ├── input/
+│   │   │   └── input.scss
+│   │   └── dialog/
+│   │       └── dialog.scss
+│   └── ...
+```
+
+### 命名规范
+- **变量文件**：使用下划线前缀 `_variables.scss`
+- **组件样式**：与组件同名 `device.scss`、`home.scss`
+- **导入变量**：使用 `@import '../../styles/_variables'`
+
+---
+
+## 变量系统
+
+### 全局变量文件
+位置：`src/styles/_variables.scss`
+
+### 当前定义的变量
+
+#### 颜色变量
+```scss
+$primary-color: #0769fb;      // 主色调
+$ai-chat-bg: #e0e8f4;         // AI聊天背景色
+$process-bg: #07fb40;         // 进程背景色
+$screenshot-bg: #fb0707e6;    // 截图背景色
+$white: #fff;                 // 白色
+$black: #000;                 // 黑色
+```
+
+#### 尺寸变量
+```scss
+$spacing-base: 0;             // 基础间距
+$full-size: 100%;             // 全尺寸
+```
+
+#### 布局变量
+```scss
+$flex-center: (
+  display: flex,
+  align-items: center,
+  justify-content: center
+);
+
+$reset: (
+  margin: 0,
+  padding: 0
+);
+```
+
+### 如何使用变量
+
+#### 1. 导入变量文件
+```scss
+// 在组件 SCSS 文件顶部导入
+@import '../../styles/_variables';
+```
+
+#### 2. 使用变量
+```scss
+.device-container {
+  background-color: $primary-color;
+  width: $full-size;
+  height: $full-size;
+}
+```
+
+#### 3. 添加新变量
+在 `_variables.scss` 中添加：
+```scss
+// 新颜色
+$success-color: #28a745;
+$danger-color: #dc3545;
+
+// 新尺寸
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+```
+
+---
+
+## 代码规范
+
+### 1. 文件组织
+
+#### ✅ 好的做法
+```scss
+// 1. 导入变量（文件顶部）
+@import '../../styles/_variables';
+
+// 2. 组件根类
+.device-container {
+  // 样式
+}
+
+// 3. 嵌套子元素
+.device-container {
+  .device-update {
+    // 样式
+  }
+}
+```
+
+#### ❌ 避免的做法
+```scss
+// 不要忘记导入变量
+.device-container {
+  background-color: #0769fb; // ❌ 应该使用 $primary-color
+}
+```
+
+### 2. 嵌套规范
+
+#### ✅ 好的嵌套（3-4层以内）
+```scss
+.device-container {
+  width: $full-size;
+  
+  .device-update {
+    padding: 16px;
+    
+    .device-update-title {
+      font-size: 20px;
+    }
+  }
+}
+```
+
+#### ❌ 避免过度嵌套
+```scss
+// ❌ 嵌套太深，难以维护
+.container {
+  .wrapper {
+    .content {
+      .inner {
+        .title {
+          .text {
+            color: red;
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+### 3. 使用 & 符号
+
+#### ✅ 正确使用
+```scss
+.button {
+  background: $primary-color;
+  
+  // 伪类
+  &:hover {
+    background: darken($primary-color, 10%);
+  }
+  
+  // 修饰符
+  &.active {
+    background: #28a745;
+  }
+  
+  // 伪元素
+  &::before {
+    content: '';
+  }
+}
+```
+
+### 4. 注释规范
+
+```scss
+// 单行注释（推荐）
+.device-container {
+  // 设备容器样式
+  width: 100%;
+}
+
+/* 
+ * 多行注释
+ * 用于复杂说明
+ */
+```
+
+---
+
+## 最佳实践
+
+### 1. 统一使用变量
+
+#### ✅ 推荐
+```scss
+@import '../../styles/_variables';
+
+.container {
+  background-color: $primary-color;
+  color: $white;
+}
+```
+
+#### ❌ 不推荐
+```scss
+.container {
+  background-color: #0769fb; // ❌ 硬编码
+  color: #fff;
+}
+```
+
+### 2. 创建混入（Mixin）复用代码
+
+#### 创建混入文件
+```scss
+// src/styles/_mixins.scss
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin button-base {
+  padding: 12px 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+```
+
+#### 使用混入
+```scss
+@import '../../styles/_variables';
+@import '../../styles/_mixins';
+
+.device-container {
+  @include flex-center;
+  width: $full-size;
+}
+```
+
+### 3. 响应式设计
+
+```scss
+.device-container {
+  width: 100%;
+  
+  // 移动端
+  @media (max-width: 768px) {
+    padding: 10px;
+    
+    .device-update {
+      flex-direction: column;
+    }
+  }
+  
+  // 桌面端
+  @media (min-width: 1200px) {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+```
+
+### 4. 组件样式隔离
+
+每个组件有自己的 SCSS 文件：
+```scss
+// device/device.scss
+.device-container {
+  // 只包含 device 组件的样式
+}
+
+// home.scss
+.home-container {
+  // 只包含 home 组件的样式
+}
+```
+
+---
+
+## 快速参考
+
+### 常用代码片段
+
+#### 1. 居中布局
+```scss
+// Flex 居中
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 使用
+.container {
+  @include flex-center;
+}
+```
+
+#### 2. 清除浮动
+```scss
+@mixin clearfix {
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+```
+
+#### 3. 文本省略
+```scss
+@mixin text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+```
+
+#### 4. 响应式断点
+```scss
+$breakpoints: (
+  'sm': 576px,
+  'md': 768px,
+  'lg': 992px,
+  'xl': 1200px
+);
+
+@mixin respond-to($breakpoint) {
+  $value: map-get($breakpoints, $breakpoint);
+  
+  @if $value {
+    @media (min-width: $value) {
+      @content;
+    }
+  }
+}
+
+// 使用
+.container {
+  width: 100%;
+  
+  @include respond-to('md') {
+    width: 50%;
+  }
+}
+```
+
+### 颜色函数
+
+```scss
+$primary: $primary-color;
+
+// 变亮/变暗
+lighten($primary, 20%)
+darken($primary, 10%)
+
+// 调整透明度
+rgba($primary, 0.8)
+
+// 混合颜色
+mix($primary, white, 50%)
+```
+
+### 数学函数
+
+```scss
+// 百分比
+percentage(2/3)  // 66.666667%
+
+// 四舍五入
+round(18.7px)    // 19px
+
+// 向上/向下取整
+ceil(18.2px)     // 19px
+floor(18.9px)    // 18px
+```
+
+---
+
+## 常见问题
+
+### Q1: 如何添加新的全局变量？
+
+**A:** 在 `src/styles/_variables.scss` 中添加：
+```scss
+// 新变量
+$new-color: #ff0000;
+$new-spacing: 20px;
+```
+
+然后在组件中导入使用：
+```scss
+@import '../../styles/_variables';
+
+.container {
+  color: $new-color;
+  padding: $new-spacing;
+}
+```
+
+### Q2: 如何创建可复用的样式？
+
+**A:** 使用混入（Mixin）：
+```scss
+// 在 _mixins.scss 中定义
+@mixin card-style {
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+// 使用
+.card {
+  @include card-style;
+}
+```
+
+### Q3: 如何实现主题切换？
+
+**A:** 使用 SCSS 变量和类切换：
+```scss
+// _variables.scss
+$themes: (
+  'light': (
+    'bg': #fff,
+    'text': #333
+  ),
+  'dark': (
+    'bg': #1a1a1a,
+    'text': #fff
+  )
+);
+
+@function theme($theme-name, $key) {
+  $theme: map-get($themes, $theme-name);
+  @return map-get($theme, $key);
+}
+
+// 使用
+.container {
+  background-color: theme('light', 'bg');
+  
+  .dark-theme & {
+    background-color: theme('dark', 'bg');
+  }
+}
+```
+
+### Q4: 样式不生效怎么办？
+
+**检查清单：**
+1. ✅ 确认文件扩展名是 `.scss`
+2. ✅ 确认在组件中正确导入：`import './component.scss'`
+3. ✅ 确认类名拼写正确
+4. ✅ 检查浏览器控制台是否有错误
+5. ✅ 确认 SCSS 文件已保存
+
+### Q5: 如何调试 SCSS？
+
+**A:** 使用 `@debug` 和 `@warn`：
+```scss
+$width: 100px;
+@debug "Width is: #{$width}";
+
+@function calculate($value) {
+  @if $value < 0 {
+    @warn "Value should be positive";
+  }
+  @return $value * 2;
+}
+```
+
+---
+
+## 项目特定规范
+
+### 当前项目颜色方案
+```scss
+主色调: #0769fb (蓝色)
+AI聊天: #e0e8f4 (浅蓝灰)
+进程:   #07fb40 (绿色)
+截图:   #fb0707e6 (红色，带透明度)
+```
+
+### 组件样式文件位置
+- `home.scss` - 首页布局
+- `device/device.scss` - 设备管理
+- `ai-chat/ai-chat.scss` - AI聊天
+- `process/process.scss` - 进程管理
+- `screenshot/screenshot.scss` - 截图功能
+- `public/alert-view/alert-view.scss` - 弹窗组件
+
+---
+
+## 更新日志
+
+### 2025-01-30
+- ✅ 项目迁移到 SCSS
+- ✅ 创建全局变量系统
+- ✅ 统一代码规范
+- ✅ 删除所有旧 CSS 文件
+
+---
+
+## 相关文档
+
+- [SCSS 使用指南](./SCSS_USAGE_GUIDE.md) - 详细的 SCSS 语法
+- [React CSS 方案对比](./REACT_CSS_COMPARISON.md) - 各种 CSS 方案对比
+- [现代 CSS 功能](./MODERN_CSS_EXAMPLES.md) - 现代 CSS 特性
+
+---
+
+## 贡献指南
+
+### 添加新样式时
+1. ✅ 优先使用现有变量
+2. ✅ 如需新变量，添加到 `_variables.scss`
+3. ✅ 保持嵌套不超过 4 层
+4. ✅ 添加必要的注释
+5. ✅ 遵循命名规范
+
+### 代码审查检查点
+- [ ] 是否使用了变量而非硬编码？
+- [ ] 嵌套是否过深？
+- [ ] 是否有重复代码可以提取为混入？
+- [ ] 是否添加了必要的注释？
+- [ ] 响应式设计是否考虑？
+
+---
+
+**最后更新：2025-01-30**

doc/REACT_CSS_COMPARISON.md

@@ -0,0 +1,544 @@
+# React CSS 方案对比：SCSS vs React CSS-in-JS
+
+## 🎯 核心问题
+
+**SCSS 比 React 的 CSS 还强大吗？React 还有更厉害的 CSS 吗？**
+
+**答案：** React 有很多更强大的 CSS 方案，它们各有优势。SCSS 是**预处理器**，而 React 的 CSS-in-JS 是**运行时/编译时**方案，功能更强大。
+
+---
+
+## 📊 方案对比总览
+
+| 方案 | 类型 | 学习曲线 | 性能 | 功能强大度 | 流行度 |
+|------|------|---------|------|-----------|--------|
+| **SCSS** | 预处理器 | ⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
+| **CSS Modules** | 编译时 | ⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |
+| **Styled Components** | CSS-in-JS | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
+| **Emotion** | CSS-in-JS | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
+| **Tailwind CSS** | 工具类 | ⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
+| **StyleX** | 零运行时 | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ |
+
+---
+
+## 1. SCSS（你当前使用的）
+
+### 特点
+- ✅ **预处理器**：编译时转换为 CSS
+- ✅ **功能强大**：变量、嵌套、函数、混入等
+- ✅ **性能好**：编译后就是普通 CSS
+- ✅ **生态成熟**：插件和工具丰富
+
+### 代码示例
+```scss
+// device.scss
+$primary-color: #0769fb;
+
+.device-container {
+  background-color: $primary-color;
+  
+  .device-update {
+    padding: 16px;
+  }
+}
+```
+
+```jsx
+// device.jsx
+import './device.scss'
+
+function Device() {
+  return <div className="device-container">...</div>
+}
+```
+
+### 优势
+- ✅ 编译时处理，运行时性能好
+- ✅ 功能完整（变量、函数、循环等）
+- ✅ 学习成本低
+- ✅ 浏览器兼容性好
+
+### 劣势
+- ❌ 无法在 JS 中动态修改样式
+- ❌ 无法根据 props 动态生成样式
+- ❌ 样式和组件分离
+
+---
+
+## 2. CSS Modules（编译时方案）
+
+### 特点
+- ✅ **局部作用域**：自动生成唯一类名
+- ✅ **类型安全**：TypeScript 支持好
+- ✅ **性能优秀**：编译时处理
+- ✅ **零运行时开销**
+
+### 代码示例
+```css
+/* device.module.css */
+.container {
+  background-color: #0769fb;
+}
+
+.title {
+  font-size: 20px;
+}
+```
+
+```jsx
+// device.jsx
+import styles from './device.module.css'
+
+function Device() {
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>设备</h1>
+    </div>
+  )
+}
+```
+
+### 优势
+- ✅ 自动作用域隔离，避免样式冲突
+- ✅ 性能好，编译时处理
+- ✅ TypeScript 支持好
+- ✅ 可以配合 SCSS 使用
+
+### 劣势
+- ❌ 无法动态修改样式
+- ❌ 需要手动管理类名
+
+---
+
+## 3. Styled Components（CSS-in-JS）⭐ 最流行
+
+### 特点
+- ✅ **CSS-in-JS**：样式写在 JS 中
+- ✅ **动态样式**：根据 props 动态生成
+- ✅ **组件化**：样式和组件绑定
+- ✅ **主题支持**：内置主题系统
+
+### 安装
+```bash
+npm install styled-components
+```
+
+### 代码示例
+```jsx
+import styled from 'styled-components'
+
+// 创建样式组件
+const DeviceContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: ${props => props.bgColor || '#0769fb'};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  &:hover {
+    background-color: ${props => props.hoverColor || '#0550d0'};
+  }
+`
+
+const Title = styled.h1`
+  font-size: ${props => props.size || '20px'};
+  color: ${props => props.theme.primaryColor};
+`
+
+// 使用
+function Device({ isActive }) {
+  return (
+    <DeviceContainer 
+      bgColor={isActive ? '#28a745' : '#0769fb'}
+      hoverColor="#0550d0"
+    >
+      <Title size="24px">设备列表</Title>
+    </DeviceContainer>
+  )
+}
+
+// 主题支持
+const theme = {
+  primaryColor: '#0769fb',
+  spacing: '16px'
+}
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Device />
+    </ThemeProvider>
+  )
+}
+```
+
+### 优势
+- ✅ **动态样式**：根据 props/state 动态生成
+- ✅ **组件化**：样式和组件绑定，易维护
+- ✅ **主题系统**：内置主题支持
+- ✅ **TypeScript 支持好**
+- ✅ **自动处理浏览器前缀**
+
+### 劣势
+- ❌ 运行时开销（但很小）
+- ❌ 学习曲线较陡
+- ❌ 调试稍困难（生成的类名）
+
+---
+
+## 4. Emotion（CSS-in-JS）⭐ 性能更好
+
+### 特点
+- ✅ **性能优化**：比 styled-components 更快
+- ✅ **灵活**：支持多种写法
+- ✅ **体积小**：247KB
+- ✅ **React 18 支持好**
+
+### 安装
+```bash
+npm install @emotion/react @emotion/styled
+```
+
+### 代码示例
+```jsx
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+
+// 方式1：css prop
+const containerStyle = css`
+  width: 100%;
+  background-color: #0769fb;
+  
+  &:hover {
+    background-color: #0550d0;
+  }
+`
+
+function Device() {
+  return <div css={containerStyle}>设备</div>
+}
+
+// 方式2：styled components
+const DeviceContainer = styled.div`
+  width: 100%;
+  background-color: ${props => props.bgColor};
+  
+  &:hover {
+    transform: scale(1.05);
+  }
+`
+
+// 方式3：动态样式
+function Device({ isActive }) {
+  return (
+    <div
+      css={css`
+        background-color: ${isActive ? '#28a745' : '#0769fb'};
+        transition: all 0.3s;
+      `}
+    >
+      设备
+    </div>
+  )
+}
+```
+
+### 优势
+- ✅ 性能比 styled-components 好
+- ✅ 支持多种写法
+- ✅ 体积更小
+- ✅ SSR 支持好
+
+### 劣势
+- ❌ 社区相对较小
+- ❌ 文档不如 styled-components 完善
+
+---
+
+## 5. Tailwind CSS（工具类）⭐ 最流行
+
+### 特点
+- ✅ **工具类**：预定义的 CSS 类
+- ✅ **按需生成**：只生成使用的样式
+- ✅ **性能极佳**：编译时处理
+- ✅ **开发速度快**：无需写 CSS
+
+### 安装
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+### 代码示例
+```jsx
+// 纯工具类
+function Device() {
+  return (
+    <div className="w-full h-full bg-blue-500 flex items-center justify-center hover:bg-blue-600 transition-colors">
+      <h1 className="text-white text-2xl font-bold">设备列表</h1>
+    </div>
+  )
+}
+
+// 配合 CSS Modules
+// device.module.css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .device-card {
+    @apply bg-blue-500 p-4 rounded-lg shadow-lg;
+  }
+}
+```
+
+### 优势
+- ✅ **开发速度快**：无需写 CSS
+- ✅ **性能好**：按需生成
+- ✅ **一致性**：设计系统统一
+- ✅ **体积小**：只包含使用的样式
+- ✅ **学习成本低**
+
+### 劣势
+- ❌ HTML 类名可能很长
+- ❌ 需要记忆工具类
+- ❌ 复杂动画需要额外配置
+
+---
+
+## 6. StyleX（Meta 零运行时）
+
+### 特点
+- ✅ **零运行时**：编译时转换为 CSS
+- ✅ **类型安全**：TypeScript 支持好
+- ✅ **性能最佳**：无运行时开销
+- ✅ **Meta 开发**：Facebook 出品
+
+### 安装
+```bash
+npm install @stylexjs/stylex
+```
+
+### 代码示例
+```jsx
+import stylex from '@stylexjs/stylex'
+
+const styles = stylex.create({
+  container: {
+    width: '100%',
+    backgroundColor: '#0769fb',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: '20px',
+    color: 'white',
+  },
+})
+
+function Device() {
+  return (
+    <div {...stylex.props(styles.container)}>
+      <h1 {...stylex.props(styles.title)}>设备</h1>
+    </div>
+  )
+}
+```
+
+### 优势
+- ✅ 零运行时开销
+- ✅ 类型安全
+- ✅ 性能最佳
+- ✅ Meta 支持
+
+### 劣势
+- ❌ 相对较新，生态不成熟
+- ❌ 学习曲线陡
+- ❌ 文档较少
+
+---
+
+## 🎯 功能对比
+
+### 动态样式（根据 props/state）
+
+| 方案 | 支持度 |
+|------|--------|
+| SCSS | ❌ 不支持 |
+| CSS Modules | ❌ 不支持 |
+| Styled Components | ✅✅✅ 完全支持 |
+| Emotion | ✅✅✅ 完全支持 |
+| Tailwind CSS | ⚠️ 需要配合 JS |
+| StyleX | ✅ 支持 |
+
+### 主题支持
+
+| 方案 | 支持度 |
+|------|--------|
+| SCSS | ⚠️ 需要手动实现 |
+| CSS Modules | ⚠️ 需要手动实现 |
+| Styled Components | ✅✅✅ 内置支持 |
+| Emotion | ✅✅✅ 内置支持 |
+| Tailwind CSS | ✅ 配置支持 |
+| StyleX | ⚠️ 需要手动实现 |
+
+### 性能
+
+| 方案 | 运行时开销 | 编译时优化 |
+|------|-----------|-----------|
+| SCSS | ✅ 无 | ✅ 是 |
+| CSS Modules | ✅ 无 | ✅ 是 |
+| Styled Components | ⚠️ 有 | ❌ 否 |
+| Emotion | ⚠️ 有（较小） | ⚠️ 部分 |
+| Tailwind CSS | ✅ 无 | ✅ 是 |
+| StyleX | ✅ 无 | ✅ 是 |
+
+### TypeScript 支持
+
+| 方案 | 支持度 |
+|------|--------|
+| SCSS | ⚠️ 基础 |
+| CSS Modules | ✅✅✅ 完美 |
+| Styled Components | ✅✅✅ 完美 |
+| Emotion | ✅✅✅ 完美 |
+| Tailwind CSS | ✅✅ 很好 |
+| StyleX | ✅✅✅ 完美 |
+
+---
+
+## 💡 实际应用示例对比
+
+### 场景：根据状态动态改变样式
+
+#### SCSS（不支持动态）
+```scss
+// 需要写多个类
+.device-active { background: #28a745; }
+.device-inactive { background: #0769fb; }
+```
+
+```jsx
+<div className={isActive ? 'device-active' : 'device-inactive'}>
+```
+
+#### Styled Components（完全支持）
+```jsx
+const Device = styled.div`
+  background-color: ${props => props.isActive ? '#28a745' : '#0769fb'};
+  transition: all 0.3s;
+`
+
+<Device isActive={isActive}>设备</Device>
+```
+
+#### Tailwind CSS（需要配合 JS）
+```jsx
+<div className={`${isActive ? 'bg-green-500' : 'bg-blue-500'} transition-colors`}>
+```
+
+---
+
+## 🏆 推荐方案
+
+### 1. **小型项目** → SCSS
+- ✅ 简单直接
+- ✅ 性能好
+- ✅ 学习成本低
+
+### 2. **中型项目** → CSS Modules + SCSS
+- ✅ 作用域隔离
+- ✅ 性能好
+- ✅ TypeScript 支持好
+
+### 3. **大型项目（需要动态样式）** → Styled Components / Emotion
+- ✅ 动态样式支持
+- ✅ 主题系统
+- ✅ 组件化
+
+### 4. **快速开发** → Tailwind CSS
+- ✅ 开发速度快
+- ✅ 性能好
+- ✅ 设计系统统一
+
+### 5. **性能优先** → StyleX
+- ✅ 零运行时
+- ✅ 性能最佳
+- ✅ 类型安全
+
+---
+
+## 📝 总结
+
+### SCSS vs React CSS-in-JS
+
+| 特性 | SCSS | React CSS-in-JS |
+|------|------|-----------------|
+| **动态样式** | ❌ | ✅ |
+| **组件绑定** | ❌ | ✅ |
+| **主题系统** | ⚠️ | ✅ |
+| **运行时性能** | ✅ | ⚠️ |
+| **编译时性能** | ✅ | ⚠️ |
+| **学习曲线** | ⭐⭐ | ⭐⭐⭐ |
+| **功能强大度** | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
+
+### 结论
+
+1. **SCSS 是预处理器**，功能强大但**无法动态修改样式**
+2. **React CSS-in-JS（Styled Components/Emotion）** 更强大，支持**动态样式、主题、组件绑定**
+3. **Tailwind CSS** 适合快速开发，性能好
+4. **StyleX** 性能最佳，但生态不成熟
+
+**建议：**
+- 如果**不需要动态样式** → 继续用 SCSS
+- 如果需要**动态样式和主题** → 使用 Styled Components 或 Emotion
+- 如果**追求性能** → 使用 Tailwind CSS 或 StyleX
+
+---
+
+## 🚀 迁移建议
+
+### 从 SCSS 迁移到 Styled Components
+
+```jsx
+// 之前：SCSS
+// device.scss
+.device-container {
+  background-color: $primary-color;
+}
+
+// device.jsx
+import './device.scss'
+<div className="device-container">
+
+// 之后：Styled Components
+import styled from 'styled-components'
+
+const DeviceContainer = styled.div`
+  background-color: ${props => props.theme.primaryColor};
+`
+
+<DeviceContainer>
+```
+
+### 混合使用（推荐）
+
+```jsx
+// 全局样式用 SCSS
+import './global.scss'
+
+// 组件样式用 Styled Components
+const Button = styled.button`...`
+```
+
+---
+
+## 📚 学习资源
+
+- **Styled Components**: https://styled-components.com/
+- **Emotion**: https://emotion.sh/
+- **Tailwind CSS**: https://tailwindcss.com/
+- **StyleX**: https://stylexjs.com/
+- **CSS Modules**: https://github.com/css-modules/css-modules

doc/SCSS_POWER_FEATURES.md

@@ -0,0 +1,443 @@
+# SCSS/SASS 为什么功能最强大？
+
+## 🏆 功能对比
+
+| 特性 | SCSS/SASS | Less | UnoCSS | Tailwind |
+|------|-----------|------|--------|----------|
+| **变量** | ✅ 支持 | ✅ 支持 | ❌ | ❌ |
+| **嵌套** | ✅ 完整支持 | ✅ 支持 | ❌ | ❌ |
+| **混入(Mixin)** | ✅ 强大 | ✅ 基础 | ❌ | ❌ |
+| **函数** | ✅ 内置+自定义 | ⚠️ 有限 | ❌ | ❌ |
+| **循环** | ✅ @for/@each/@while | ⚠️ 有限 | ❌ | ❌ |
+| **条件判断** | ✅ @if/@else | ⚠️ 有限 | ❌ | ❌ |
+| **继承** | ✅ @extend | ✅ 支持 | ❌ | ❌ |
+| **模块化** | ✅ @use/@forward | ⚠️ @import | ❌ | ❌ |
+| **数学运算** | ✅ 完整 | ✅ 支持 | ❌ | ❌ |
+| **颜色函数** | ✅ 丰富 | ⚠️ 基础 | ❌ | ❌ |
+| **编程能力** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐ | ⭐ |
+
+---
+
+## 💪 SCSS 强大功能展示
+
+### 1. **变量系统** - 比 CSS 变量更强大
+
+```scss
+// 支持多种数据类型
+$primary-color: #0769fb;
+$spacing: 16px;
+$font-family: ('Arial', sans-serif);
+$breakpoints: (
+  'small': 480px,
+  'medium': 768px,
+  'large': 1024px
+);
+
+// 使用
+.container {
+  color: $primary-color;
+  padding: $spacing;
+  font-family: $font-family;
+  
+  @media (min-width: map-get($breakpoints, 'medium')) {
+    padding: $spacing * 2;
+  }
+}
+```
+
+### 2. **混入(Mixin)** - 可复用的样式块
+
+```scss
+// 基础混入
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 带参数的混入
+@mixin button($bg-color, $text-color: white) {
+  background-color: $bg-color;
+  color: $text-color;
+  padding: 12px 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  &:hover {
+    background-color: darken($bg-color, 10%);
+  }
+}
+
+// 使用
+.btn-primary {
+  @include button(#0769fb);
+}
+
+.btn-danger {
+  @include button(#ff0000);
+}
+```
+
+### 3. **函数** - 内置 + 自定义
+
+```scss
+// 内置函数
+.container {
+  // 颜色函数
+  background: lighten(#0769fb, 20%);
+  border-color: darken(#0769fb, 10%);
+  color: rgba(#0769fb, 0.8);
+  
+  // 数学函数
+  width: percentage(2/3);
+  font-size: round(18.7px);
+  
+  // 字符串函数
+  content: quote('Hello');
+  font-family: unquote('Arial');
+}
+
+// 自定义函数
+@function calculate-rem($pixels) {
+  @return $pixels / 16px * 1rem;
+}
+
+@function spacing($multiplier) {
+  @return $multiplier * 8px;
+}
+
+.title {
+  font-size: calculate-rem(24px); // 1.5rem
+  margin: spacing(2); // 16px
+}
+```
+
+### 4. **循环** - 批量生成样式
+
+```scss
+// @for 循环
+@for $i from 1 through 5 {
+  .mt-#{$i} {
+    margin-top: #{$i * 8}px;
+  }
+}
+// 生成: .mt-1, .mt-2, .mt-3, .mt-4, .mt-5
+
+// @each 循环
+$colors: (
+  'primary': #0769fb,
+  'success': #28a745,
+  'danger': #dc3545,
+  'warning': #ffc107
+);
+
+@each $name, $color in $colors {
+  .btn-#{$name} {
+    background-color: $color;
+    
+    &:hover {
+      background-color: darken($color, 10%);
+    }
+  }
+}
+
+// @while 循环
+$i: 1;
+@while $i <= 12 {
+  .col-#{$i} {
+    width: percentage($i / 12);
+  }
+  $i: $i + 1;
+}
+```
+
+### 5. **条件判断** - 逻辑控制
+
+```scss
+@mixin responsive-text($size) {
+  @if $size == 'small' {
+    font-size: 14px;
+    line-height: 1.5;
+  } @else if $size == 'medium' {
+    font-size: 16px;
+    line-height: 1.6;
+  } @else {
+    font-size: 18px;
+    line-height: 1.7;
+  }
+}
+
+.title {
+  @include responsive-text('large');
+}
+
+// 条件判断函数
+@function get-text-color($bg-color) {
+  @if lightness($bg-color) > 50% {
+    @return #000; // 浅色背景用黑色文字
+  } @else {
+    @return #fff; // 深色背景用白色文字
+  }
+}
+
+.button {
+  background: $primary-color;
+  color: get-text-color($primary-color);
+}
+```
+
+### 6. **继承** - 代码复用
+
+```scss
+%button-base {
+  padding: 12px 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.btn-primary {
+  @extend %button-base;
+  background-color: #0769fb;
+  color: white;
+}
+
+.btn-secondary {
+  @extend %button-base;
+  background-color: #6c757d;
+  color: white;
+}
+```
+
+### 7. **模块化** - 现代模块系统
+
+```scss
+// _variables.scss
+$primary-color: #0769fb;
+$spacing: 16px;
+
+// _mixins.scss
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// main.scss
+@use 'variables' as vars;
+@use 'mixins' as mix;
+
+.container {
+  color: vars.$primary-color;
+  padding: vars.$spacing;
+  @include mix.flex-center;
+}
+```
+
+### 8. **高级嵌套** - 灵活的选择器
+
+```scss
+.container {
+  color: #333;
+  
+  // 普通嵌套
+  .title {
+    font-size: 24px;
+  }
+  
+  // & 引用父选择器
+  &:hover {
+    background: #f5f5f5;
+  }
+  
+  // 属性嵌套
+  border: {
+    width: 1px;
+    style: solid;
+    color: #ddd;
+  }
+  
+  // 媒体查询嵌套
+  @media (max-width: 768px) {
+    padding: 10px;
+    
+    .title {
+      font-size: 20px;
+    }
+  }
+}
+```
+
+### 9. **颜色操作** - 强大的颜色函数
+
+```scss
+$primary: #0769fb;
+
+.button {
+  // 变亮/变暗
+  background: lighten($primary, 20%);
+  border-color: darken($primary, 10%);
+  
+  // 调整饱和度
+  background: saturate($primary, 20%);
+  background: desaturate($primary, 20%);
+  
+  // 调整透明度
+  background: rgba($primary, 0.8);
+  background: fade-in($primary, 0.2);
+  background: fade-out($primary, 0.2);
+  
+  // 混合颜色
+  background: mix($primary, white, 50%);
+  
+  // 调整色调
+  background: adjust-hue($primary, 30deg);
+  
+  // 互补色
+  border-color: complement($primary);
+}
+```
+
+### 10. **实际应用示例** - 完整的组件样式系统
+
+```scss
+// 配置
+$spacing-base: 8px;
+$colors: (
+  'primary': #0769fb,
+  'success': #28a745,
+  'danger': #dc3545
+);
+
+// 工具函数
+@function spacing($multiplier) {
+  @return $multiplier * $spacing-base;
+}
+
+@function color($name) {
+  @return map-get($colors, $name);
+}
+
+// 混入
+@mixin button-variant($color-name) {
+  $color: color($color-name);
+  background-color: $color;
+  color: white;
+  
+  &:hover {
+    background-color: darken($color, 10%);
+  }
+  
+  &:active {
+    background-color: darken($color, 15%);
+  }
+}
+
+@mixin responsive-grid($columns) {
+  display: grid;
+  grid-template-columns: repeat($columns, 1fr);
+  gap: spacing(2);
+  
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+// 使用
+.button {
+  padding: spacing(1.5) spacing(3);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  &.primary {
+    @include button-variant('primary');
+  }
+  
+  &.success {
+    @include button-variant('success');
+  }
+  
+  &.danger {
+    @include button-variant('danger');
+  }
+}
+
+.grid-container {
+  @include responsive-grid(3);
+}
+```
+
+---
+
+## 🎯 为什么 SCSS 功能最强大？
+
+### 1. **完整的编程语言特性**
+- ✅ 变量、函数、循环、条件判断
+- ✅ 可以写复杂的逻辑和算法
+- ✅ 支持模块化和代码组织
+
+### 2. **丰富的内置功能**
+- ✅ 100+ 内置函数（颜色、字符串、数学等）
+- ✅ 强大的混入系统
+- ✅ 灵活的继承机制
+
+### 3. **生态成熟**
+- ✅ 大量插件和库
+- ✅ 社区支持好
+- ✅ 文档完善
+
+### 4. **适用场景广泛**
+- ✅ 可以构建完整的样式系统
+- ✅ 可以写复杂的主题切换
+- ✅ 可以生成大量重复样式
+
+---
+
+## 📊 对比总结
+
+| 工具 | 主要用途 | 功能强度 | 适用场景 |
+|------|---------|---------|---------|
+| **SCSS/SASS** | 预处理器 | ⭐⭐⭐⭐⭐ | 需要复杂逻辑、主题系统、大型项目 |
+| **Less** | 预处理器 | ⭐⭐⭐ | 简单项目、快速开发 |
+| **UnoCSS** | 原子化CSS | ⭐⭐ | 快速开发、性能优先 |
+| **Tailwind** | 原子化CSS | ⭐⭐ | 快速开发、工具类 |
+
+---
+
+## 💡 结论
+
+**SCSS/SASS 是功能最强大的 CSS 工具**，因为：
+
+1. ✅ **编程能力完整** - 可以写复杂的逻辑
+2. ✅ **功能最丰富** - 变量、函数、循环、条件等应有尽有
+3. ✅ **扩展性强** - 可以构建完整的样式系统
+4. ✅ **生态成熟** - 插件和库丰富
+
+**但要注意：**
+- 功能强大 ≠ 总是最好的选择
+- 简单项目可能不需要这么复杂的功能
+- UnoCSS 在性能上更优（按需生成）
+- 根据项目需求选择合适的工具
+
+---
+
+## 🚀 推荐使用场景
+
+**使用 SCSS/SASS 当你需要：**
+- ✅ 构建大型项目的样式系统
+- ✅ 复杂的主题切换功能
+- ✅ 需要写大量重复但有规律的样式
+- ✅ 需要颜色计算、数学运算等高级功能
+- ✅ 需要模块化和代码组织
+
+**使用 UnoCSS 当你需要：**
+- ✅ 快速开发
+- ✅ 性能优先（按需生成）
+- ✅ 原子化CSS开发方式
+
+**使用 Less 当你需要：**
+- ✅ 简单的预处理器功能
+- ✅ 学习成本低
+- ✅ 快速上手

doc/SCSS_USAGE_GUIDE.md

@@ -0,0 +1,917 @@
+# SCSS 使用指南
+
+## 📚 目录
+
+1. [基础语法](#基础语法)
+2. [变量](#变量)
+3. [嵌套](#嵌套)
+4. [混入（Mixin）](#混入mixin)
+5. [函数](#函数)
+6. [继承](#继承)
+7. [模块化](#模块化)
+8. [实际应用示例](#实际应用示例)
+9. [最佳实践](#最佳实践)
+
+---
+
+## 基础语法
+
+### 文件扩展名
+- SCSS 文件使用 `.scss` 扩展名
+- 在组件中导入：`import './style.scss'`
+
+### 注释
+```scss
+// 单行注释（不会编译到 CSS）
+/* 多行注释（会编译到 CSS） */
+```
+
+---
+
+## 变量
+
+### 定义变量
+```scss
+// 颜色变量
+$primary-color: #0769fb;
+$secondary-color: #6c757d;
+$text-color: #333;
+$bg-color: #fff;
+
+// 尺寸变量
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+
+// 字体变量
+$font-size-base: 16px;
+$font-size-lg: 20px;
+$font-size-sm: 14px;
+
+// 布局变量
+$container-width: 1200px;
+$sidebar-width: 250px;
+```
+
+### 使用变量
+```scss
+.button {
+  background-color: $primary-color;
+  padding: $spacing-md;
+  font-size: $font-size-base;
+  color: $text-color;
+}
+```
+
+### 变量作用域
+```scss
+$global-color: #000; // 全局变量
+
+.container {
+  $local-color: #fff; // 局部变量，只在 .container 内可用
+  
+  color: $local-color;
+  border-color: $global-color;
+}
+```
+
+### 默认值
+```scss
+// 如果变量未定义，使用默认值
+$primary-color: #0769fb !default;
+
+.button {
+  background-color: $primary-color; // 如果未定义，使用 #0769fb
+}
+```
+
+---
+
+## 嵌套
+
+### 基本嵌套
+```scss
+// 传统 CSS
+.container {
+  width: 100%;
+}
+.container .title {
+  font-size: 20px;
+}
+.container .title:hover {
+  color: red;
+}
+
+// SCSS 嵌套
+.container {
+  width: 100%;
+  
+  .title {
+    font-size: 20px;
+    
+    &:hover {
+      color: red;
+    }
+  }
+}
+```
+
+### & 符号（父选择器引用）
+```scss
+.button {
+  background: blue;
+  
+  // &:hover 编译为 .button:hover
+  &:hover {
+    background: darkblue;
+  }
+  
+  // &.active 编译为 .button.active
+  &.active {
+    background: green;
+  }
+  
+  // &::before 编译为 .button::before
+  &::before {
+    content: '';
+  }
+  
+  // 嵌套中的 & 引用
+  .icon {
+    // .button .icon 中的 & 仍然是 .button
+    &:hover {
+      // 编译为 .button .icon:hover
+    }
+  }
+}
+```
+
+### 属性嵌套
+```scss
+// 传统写法
+.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #ddd;
+}
+
+// SCSS 属性嵌套
+.box {
+  border: {
+    width: 1px;
+    style: solid;
+    color: #ddd;
+  }
+  
+  // 也可以嵌套伪类
+  font: {
+    family: Arial;
+    size: 16px;
+    weight: bold;
+  }
+}
+```
+
+### 媒体查询嵌套
+```scss
+.container {
+  width: 100%;
+  
+  @media (max-width: 768px) {
+    width: 100%;
+    padding: 10px;
+    
+    .title {
+      font-size: 18px;
+    }
+  }
+  
+  @media (min-width: 1200px) {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+```
+
+---
+
+## 混入（Mixin）
+
+### 基础混入
+```scss
+// 定义混入
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 使用混入
+.container {
+  @include flex-center;
+  height: 100vh;
+}
+```
+
+### 带参数的混入
+```scss
+// 定义带参数的混入
+@mixin button($bg-color, $text-color: white) {
+  background-color: $bg-color;
+  color: $text-color;
+  padding: 12px 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  &:hover {
+    background-color: darken($bg-color, 10%);
+  }
+}
+
+// 使用
+.btn-primary {
+  @include button(#0769fb);
+}
+
+.btn-danger {
+  @include button(#dc3545);
+}
+
+.btn-custom {
+  @include button(#28a745, #fff);
+}
+```
+
+### 带默认参数的混入
+```scss
+@mixin card($padding: 16px, $shadow: true) {
+  padding: $padding;
+  border-radius: 8px;
+  
+  @if $shadow {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.card {
+  @include card; // 使用默认值
+}
+
+.card-large {
+  @include card(24px, false); // 自定义参数
+}
+```
+
+### 内容块混入
+```scss
+@mixin responsive($breakpoint) {
+  @media (max-width: $breakpoint) {
+    @content; // 插入传入的内容
+  }
+}
+
+.container {
+  width: 100%;
+  
+  @include responsive(768px) {
+    width: 100%;
+    padding: 10px;
+  }
+}
+```
+
+---
+
+## 函数
+
+### 内置函数
+
+#### 颜色函数
+```scss
+$primary: #0769fb;
+
+.button {
+  // 变亮/变暗
+  background: lighten($primary, 20%);
+  border-color: darken($primary, 10%);
+  
+  // 调整饱和度
+  background: saturate($primary, 20%);
+  background: desaturate($primary, 20%);
+  
+  // 调整透明度
+  background: rgba($primary, 0.8);
+  background: fade-in($primary, 0.2);
+  background: fade-out($primary, 0.2);
+  
+  // 混合颜色
+  background: mix($primary, white, 50%);
+  
+  // 调整色调
+  background: adjust-hue($primary, 30deg);
+  
+  // 互补色
+  border-color: complement($primary);
+}
+```
+
+#### 字符串函数
+```scss
+$font-family: 'Arial';
+
+.text {
+  // 转大写
+  text-transform: to-upper-case($font-family);
+  
+  // 转小写
+  text-transform: to-lower-case($font-family);
+  
+  // 引用字符串
+  content: quote('Hello');
+  
+  // 取消引用
+  font-family: unquote('Arial');
+}
+```
+
+#### 数学函数
+```scss
+.container {
+  // 百分比
+  width: percentage(2/3); // 66.666667%
+  
+  // 四舍五入
+  font-size: round(18.7px); // 19px
+  
+  // 向上取整
+  padding: ceil(18.2px); // 19px
+  
+  // 向下取整
+  margin: floor(18.9px); // 18px
+  
+  // 绝对值
+  left: abs(-10px); // 10px
+  
+  // 最小值/最大值
+  width: min(100px, 200px); // 100px
+  height: max(50px, 100px); // 100px
+}
+```
+
+### 自定义函数
+```scss
+// 计算 rem
+@function calculate-rem($pixels) {
+  @return $pixels / 16px * 1rem;
+}
+
+.title {
+  font-size: calculate-rem(24px); // 1.5rem
+}
+
+// 间距函数
+@function spacing($multiplier) {
+  @return $multiplier * 8px;
+}
+
+.container {
+  padding: spacing(2); // 16px
+  margin: spacing(3); // 24px
+}
+
+// 颜色对比度函数
+@function get-text-color($bg-color) {
+  @if lightness($bg-color) > 50% {
+    @return #000; // 浅色背景用黑色文字
+  } @else {
+    @return #fff; // 深色背景用白色文字
+  }
+}
+
+.button {
+  background: $primary-color;
+  color: get-text-color($primary-color);
+}
+```
+
+---
+
+## 继承
+
+### 基础继承
+```scss
+// 定义占位符选择器（%）
+%button-base {
+  padding: 12px 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: none;
+}
+
+// 继承
+.btn-primary {
+  @extend %button-base;
+  background-color: #0769fb;
+  color: white;
+}
+
+.btn-secondary {
+  @extend %button-base;
+  background-color: #6c757d;
+  color: white;
+}
+```
+
+### 继承 vs 混入
+```scss
+// 混入：会复制代码到每个类中
+@mixin button-mixin {
+  padding: 12px;
+}
+
+.btn1 { @include button-mixin; }
+.btn2 { @include button-mixin; }
+// 编译后：两个类都有 padding: 12px
+
+// 继承：会合并选择器
+%button-extend {
+  padding: 12px;
+}
+
+.btn1 { @extend %button-extend; }
+.btn2 { @extend %button-extend; }
+// 编译后：.btn1, .btn2 { padding: 12px; }
+```
+
+---
+
+## 模块化
+
+### @import（旧方式，已废弃）
+```scss
+@import 'variables';
+@import 'mixins';
+```
+
+### @use（推荐方式）
+```scss
+// _variables.scss
+$primary-color: #0769fb;
+$spacing: 16px;
+
+// _mixins.scss
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// main.scss
+@use 'variables' as vars;
+@use 'mixins' as mix;
+
+.container {
+  color: vars.$primary-color;
+  padding: vars.$spacing;
+  @include mix.flex-center;
+}
+
+// 或者不使用命名空间
+@use 'variables';
+@use 'mixins';
+
+.container {
+  color: variables.$primary-color;
+  @include mixins.flex-center;
+}
+```
+
+### @forward（转发模块）
+```scss
+// _all.scss
+@forward 'variables';
+@forward 'mixins';
+
+// main.scss
+@use 'all';
+
+.container {
+  color: all.$primary-color;
+  @include all.flex-center;
+}
+```
+
+---
+
+## 实际应用示例
+
+### 1. 按钮组件系统
+```scss
+// _variables.scss
+$button-colors: (
+  'primary': #0769fb,
+  'success': #28a745,
+  'danger': #dc3545,
+  'warning': #ffc107
+);
+
+$button-padding: 12px 24px;
+$button-radius: 4px;
+
+// _mixins.scss
+@mixin button-base {
+  padding: $button-padding;
+  border-radius: $button-radius;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  transition: all 0.3s;
+  
+  &:hover {
+    transform: translateY(-2px);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+@mixin button-variant($color-name) {
+  $color: map-get($button-colors, $color-name);
+  
+  background-color: $color;
+  color: white;
+  
+  &:hover {
+    background-color: darken($color, 10%);
+  }
+  
+  &:active {
+    background-color: darken($color, 15%);
+  }
+}
+
+// buttons.scss
+@use 'variables' as vars;
+@use 'mixins' as mix;
+
+.button {
+  @include mix.button-base;
+  
+  @each $name, $color in vars.$button-colors {
+    &.#{$name} {
+      @include mix.button-variant($name);
+    }
+  }
+}
+```
+
+### 2. 响应式网格系统
+```scss
+// _variables.scss
+$breakpoints: (
+  'sm': 576px,
+  'md': 768px,
+  'lg': 992px,
+  'xl': 1200px
+);
+
+$grid-columns: 12;
+
+// _mixins.scss
+@mixin respond-to($breakpoint) {
+  $value: map-get($breakpoints, $breakpoint);
+  
+  @if $value {
+    @media (min-width: $value) {
+      @content;
+    }
+  }
+}
+
+@mixin grid-column($columns) {
+  width: percentage($columns / $grid-columns);
+  
+  @include respond-to('md') {
+    width: percentage($columns / $grid-columns);
+  }
+}
+
+// grid.scss
+@use 'variables' as vars;
+@use 'mixins' as mix;
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  
+  @include respond-to('md') {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 16px;
+  }
+}
+
+@for $i from 1 through vars.$grid-columns {
+  .col-#{$i} {
+    @include mix.grid-column($i);
+  }
+}
+```
+
+### 3. 主题切换系统
+```scss
+// _themes.scss
+$themes: (
+  'light': (
+    'bg': #fff,
+    'text': #333,
+    'primary': #0769fb
+  ),
+  'dark': (
+    'bg': #1a1a1a,
+    'text': #fff,
+    'primary': #4a9eff
+  )
+);
+
+@function theme($theme-name, $key) {
+  $theme: map-get($themes, $theme-name);
+  @return map-get($theme, $key);
+}
+
+// main.scss
+@use 'themes' as t;
+
+body {
+  background-color: t.theme('light', 'bg');
+  color: t.theme('light', 'text');
+  
+  &.dark-theme {
+    background-color: t.theme('dark', 'bg');
+    color: t.theme('dark', 'text');
+  }
+}
+
+.button {
+  background-color: t.theme('light', 'primary');
+  
+  .dark-theme & {
+    background-color: t.theme('dark', 'primary');
+  }
+}
+```
+
+### 4. 动画系统
+```scss
+// _animations.scss
+@mixin fade-in($duration: 0.3s) {
+  animation: fadeIn $duration ease-in-out;
+  
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+}
+
+@mixin slide-in($direction: left, $distance: 100px, $duration: 0.3s) {
+  $transform: null;
+  
+  @if $direction == 'left' {
+    $transform: translateX(-$distance);
+  } @else if $direction == 'right' {
+    $transform: translateX($distance);
+  } @else if $direction == 'up' {
+    $transform: translateY(-$distance);
+  } @else {
+    $transform: translateY($distance);
+  }
+  
+  animation: slideIn $duration ease-out;
+  
+  @keyframes slideIn {
+    from {
+      transform: $transform;
+      opacity: 0;
+    }
+    to {
+      transform: translate(0, 0);
+      opacity: 1;
+    }
+  }
+}
+
+// 使用
+.modal {
+  @include fade-in(0.5s);
+}
+
+.sidebar {
+  @include slide-in('left', 200px, 0.4s);
+}
+```
+
+---
+
+## 最佳实践
+
+### 1. 文件组织
+```
+styles/
+├── _variables.scss    # 变量
+├── _mixins.scss       # 混入
+├── _functions.scss    # 函数
+├── _base.scss         # 基础样式
+├── _components.scss   # 组件样式
+└── main.scss          # 主文件
+```
+
+### 2. 命名规范
+```scss
+// 变量：使用 kebab-case
+$primary-color: #0769fb;
+$spacing-base: 8px;
+
+// 混入：使用 kebab-case
+@mixin flex-center { }
+@mixin button-variant { }
+
+// 函数：使用 kebab-case
+@function calculate-rem { }
+```
+
+### 3. 避免过度嵌套
+```scss
+// ❌ 不好：嵌套太深
+.container {
+  .wrapper {
+    .content {
+      .title {
+        .text {
+          color: red;
+        }
+      }
+    }
+  }
+}
+
+// ✅ 好：保持 3-4 层以内
+.container {
+  .content {
+    .title {
+      color: red;
+    }
+  }
+}
+```
+
+### 4. 使用变量统一管理
+```scss
+// ✅ 好：使用变量
+$primary: #0769fb;
+.button { background: $primary; }
+
+// ❌ 不好：硬编码
+.button { background: #0769fb; }
+```
+
+### 5. 合理使用混入和继承
+```scss
+// 混入：用于需要参数的样式
+@mixin button($color) {
+  background: $color;
+}
+
+// 继承：用于不需要参数的通用样式
+%reset-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+```
+
+### 6. 使用 @use 替代 @import
+```scss
+// ✅ 推荐
+@use 'variables';
+
+// ❌ 已废弃
+@import 'variables';
+```
+
+---
+
+## 常用代码片段
+
+### 清除浮动
+```scss
+@mixin clearfix {
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+```
+
+### 文本省略
+```scss
+@mixin text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin text-ellipsis-multi($lines: 2) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+```
+
+### 居中布局
+```scss
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+```
+
+### 响应式断点
+```scss
+$breakpoints: (
+  'sm': 576px,
+  'md': 768px,
+  'lg': 992px,
+  'xl': 1200px
+);
+
+@mixin respond-to($breakpoint) {
+  $value: map-get($breakpoints, $breakpoint);
+  
+  @if $value {
+    @media (min-width: $value) {
+      @content;
+    }
+  }
+}
+```
+
+---
+
+## 调试技巧
+
+### 1. 使用 @debug
+```scss
+$width: 100px;
+@debug "Width is: #{$width}";
+```
+
+### 2. 使用 @warn
+```scss
+@function calculate-rem($pixels) {
+  @if unit($pixels) != 'px' {
+    @warn "Expected pixels, got #{unit($pixels)}";
+  }
+  @return $pixels / 16px * 1rem;
+}
+```
+
+### 3. 检查变量值
+```scss
+@mixin debug-variable($var) {
+  &::before {
+    content: '#{$var}';
+  }
+}
+```
+
+---
+
+## 总结
+
+SCSS 的核心优势：
+1. ✅ **变量** - 统一管理值
+2. ✅ **嵌套** - 代码更清晰
+3. ✅ **混入** - 复用样式块
+4. ✅ **函数** - 计算和转换
+5. ✅ **继承** - 减少重复代码
+6. ✅ **模块化** - 代码组织更清晰
+
+记住：**功能强大，但要适度使用，保持代码简洁易读！**

doc/UNIAPP_CSS_TOOLS.md

@@ -0,0 +1,376 @@
+# uni-app 常用 CSS 工具和依赖介绍
+
+## 📦 一、CSS 预处理器（需要安装依赖）
+
+### 1. **SCSS/SASS** ⭐ 最常用
+**特点：** 功能强大，语法丰富，社区支持好
+
+**安装：**
+```bash
+npm install sass sass-loader@10 -D
+# 或
+yarn add sass sass-loader@10 -D
+```
+
+**使用：**
+```vue
+<style lang="scss">
+$primary-color: #0769fb;
+$spacing: 16px;
+
+.container {
+  color: $primary-color;
+  padding: $spacing;
+  
+  .title {
+    font-size: 20px;
+  }
+}
+</style>
+```
+
+**优点：**
+- ✅ 变量、嵌套、混入、函数等功能完整
+- ✅ 生态成熟，插件多
+- ✅ uni-app 官方支持
+
+---
+
+### 2. **Less**
+**特点：** 语法简洁，学习成本低
+
+**安装：**
+```bash
+npm install less less-loader@6 -D
+```
+
+**使用：**
+```vue
+<style lang="less">
+@primary-color: #0769fb;
+@spacing: 16px;
+
+.container {
+  color: @primary-color;
+  padding: @spacing;
+}
+</style>
+```
+
+**优点：**
+- ✅ 语法简单
+- ✅ 编译速度快
+- ✅ 适合简单项目
+
+---
+
+### 3. **Stylus**
+**特点：** 语法最简洁，可选分号和括号
+
+**安装：**
+```bash
+npm install stylus stylus-loader -D
+```
+
+**使用：**
+```vue
+<style lang="stylus">
+primary-color = #0769fb
+spacing = 16px
+
+.container
+  color primary-color
+  padding spacing
+</style>
+```
+
+---
+
+## 🎨 二、原子化 CSS 框架（需要安装依赖）
+
+### 1. **UnoCSS** ⭐ 推荐（性能最好）
+**特点：** 按需生成，体积小，速度快
+
+**安装：**
+```bash
+npm install -D unocss
+npm install -D @unocss/preset-uno
+npm install -D unocss-preset-uni  # uni-app 专用预设
+```
+
+**配置（vite.config.js）：**
+```js
+import UnoCSS from 'unocss/vite'
+import { presetUno } from '@unocss/preset-uno'
+import presetUni from 'unocss-preset-uni'
+
+export default {
+  plugins: [
+    UnoCSS({
+      presets: [
+        presetUno(),
+        presetUni() // uni-app 预设
+      ]
+    })
+  ]
+}
+```
+
+**使用：**
+```vue
+<template>
+  <view class="flex items-center justify-center p-4 bg-blue-500">
+    <text class="text-white text-lg">Hello UnoCSS</text>
+  </view>
+</template>
+```
+
+**优点：**
+- ✅ 按需生成，体积小
+- ✅ 性能极佳
+- ✅ 有 uni-app 专用预设
+- ✅ 支持自定义规则
+
+---
+
+### 2. **Tailwind CSS**
+**特点：** 最流行的原子化 CSS，文档完善
+
+**安装：**
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+**注意：** uni-app 中使用 Tailwind 需要特殊配置，官方支持有限
+
+**使用：**
+```vue
+<view class="flex items-center justify-center p-4 bg-blue-500">
+  <text class="text-white text-lg">Hello Tailwind</text>
+</view>
+```
+
+**优点：**
+- ✅ 生态最完善
+- ✅ 文档详细
+- ✅ 插件丰富
+
+**缺点：**
+- ❌ uni-app 支持不完善
+- ❌ 需要额外配置
+
+---
+
+### 3. **Windi CSS**（已停止维护）
+**特点：** Tailwind 的替代品，但已停止维护
+
+**不推荐使用**
+
+---
+
+## 🛠️ 三、CSS 工具库（需要安装依赖）
+
+### 1. **PostCSS + Autoprefixer**
+**作用：** 自动添加浏览器前缀
+
+**安装：**
+```bash
+npm install -D postcss autoprefixer
+```
+
+**配置（postcss.config.js）：**
+```js
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}
+```
+
+---
+
+### 2. **CSS Modules**
+**作用：** 局部作用域 CSS，避免样式冲突
+
+**uni-app 默认支持，无需安装**
+
+**使用：**
+```vue
+<style module>
+.container {
+  color: red;
+}
+</style>
+
+<template>
+  <view :class="$style.container">Hello</view>
+</template>
+```
+
+---
+
+### 3. **rpx 单位转换工具**
+**uni-app 内置支持 rpx，无需安装**
+
+**使用：**
+```css
+.container {
+  width: 750rpx; /* 等于屏幕宽度 */
+  font-size: 32rpx; /* 自动适配不同屏幕 */
+}
+```
+
+---
+
+## 📚 四、UI 框架内置 CSS（通常已包含）
+
+### 1. **uView UI**
+**特点：** uni-app 最流行的 UI 框架
+
+**安装：**
+```bash
+npm install uview-ui
+```
+
+**包含：**
+- ✅ 内置样式系统
+- ✅ 主题定制
+- ✅ 响应式工具类
+
+---
+
+### 2. **uni-ui**
+**特点：** DCloud 官方 UI 组件库
+
+**安装：**
+```bash
+npm install @dcloudio/uni-ui
+```
+
+**包含：**
+- ✅ 官方维护
+- ✅ 与 uni-app 深度集成
+
+---
+
+### 3. **ColorUI**
+**特点：** 专注样式的 UI 库
+
+**安装：**
+```bash
+# 直接下载 CSS 文件或通过 npm
+npm install colorui
+```
+
+**包含：**
+- ✅ 丰富的颜色系统
+- ✅ 动画效果
+- ✅ 工具类
+
+---
+
+## 🎯 五、推荐组合方案
+
+### 方案一：基础项目
+```
+SCSS + PostCSS + Autoprefixer
+```
+**适合：** 中小型项目，需要预处理器功能
+
+---
+
+### 方案二：现代化项目 ⭐ 推荐
+```
+UnoCSS + unocss-preset-uni
+```
+**适合：** 追求性能和开发效率的项目
+
+---
+
+### 方案三：传统项目
+```
+Less + uView UI
+```
+**适合：** 需要完整 UI 框架支持的项目
+
+---
+
+## 📝 六、快速安装命令汇总
+
+### SCSS
+```bash
+npm install sass sass-loader@10 -D
+```
+
+### Less
+```bash
+npm install less less-loader@6 -D
+```
+
+### UnoCSS（推荐）
+```bash
+npm install -D unocss @unocss/preset-uno unocss-preset-uni
+```
+
+### Tailwind CSS
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+### PostCSS + Autoprefixer
+```bash
+npm install -D postcss autoprefixer
+```
+
+### uView UI
+```bash
+npm install uview-ui
+```
+
+---
+
+## ⚠️ 注意事项
+
+1. **sass-loader 版本：**
+   - uni-app 通常需要 `sass-loader@10`
+   - 新版本可能不兼容
+
+2. **less-loader 版本：**
+   - 通常使用 `less-loader@6`
+   - 注意与 webpack 版本匹配
+
+3. **UnoCSS 配置：**
+   - 需要在 `vite.config.js` 中配置
+   - 需要创建 `uno.config.js` 配置文件
+
+4. **小程序限制：**
+   - 某些 CSS 特性在小程序中不支持
+   - 注意兼容性
+
+5. **rpx 单位：**
+   - uni-app 内置支持
+   - 无需额外配置
+
+---
+
+## 🔗 官方文档链接
+
+- **uni-app 官方：** https://uniapp.dcloud.net.cn/
+- **UnoCSS：** https://unocss.dev/
+- **Tailwind CSS：** https://tailwindcss.com/
+- **SCSS：** https://sass-lang.com/
+- **Less：** https://lesscss.org/
+- **uView UI：** https://www.uviewui.com/
+
+---
+
+## 💡 总结
+
+**最推荐的组合：**
+1. **UnoCSS** - 现代化、高性能
+2. **SCSS** - 功能强大、生态好
+3. **uView UI** - 完整的 UI 解决方案
+
+根据项目需求选择合适的工具，不要过度依赖，保持代码简洁！

electron/main.js

@@ -1,6 +1,6 @@
 const { app, BrowserWindow } = require('electron')
 const path = require('path')
-const config = require('../config.js')
+const config = require('../configs/config.js')
 const isDev = process.env.NODE_ENV === 'development' || !app.isPackaged
 
 function createWindow() {

enviroment-check.ps1

@@ -1,4 +1,9 @@
 # Environment check script
+# 设置控制台编码为 UTF-8，避免乱码
+[Console]::OutputEncoding = [System.Text.Encoding]::UTF8
+$OutputEncoding = [System.Text.Encoding]::UTF8
+chcp 65001 | Out-Null
+
 Write-Host "Checking development environment..." -ForegroundColor Cyan
 Write-Host "================================" -ForegroundColor Cyan
 
@@ -6,17 +11,17 @@ Write-Host "================================" -ForegroundColor Cyan
 Write-Host "`nChecking Node.js..." -ForegroundColor Yellow
 $nodeVersion = node --version 2>$null
 if ($nodeVersion) {
-    Write-Host "✓ Node.js: $nodeVersion" -ForegroundColor Green
+    Write-Host "[OK] Node.js: $nodeVersion" -ForegroundColor Green
 } else {
-    Write-Host "✗ Node.js is not installed" -ForegroundColor Red
+    Write-Host "[X] Node.js is not installed" -ForegroundColor Red
     # Download nodejs
     Write-Host "Downloading Node.js..." -ForegroundColor Yellow
     npm install -g node
     if ($LASTEXITCODE -ne 0) {
-        Write-Host "✗ Node.js download failed" -ForegroundColor Red
+        Write-Host "[X] Node.js download failed" -ForegroundColor Red
         exit 1
     }
-    Write-Host "✓ Node.js downloaded successfully" -ForegroundColor Green
+    Write-Host "[OK] Node.js downloaded successfully" -ForegroundColor Green
     node --version
 }
 
@@ -24,50 +29,106 @@ if ($nodeVersion) {
 Write-Host "`nChecking npm..." -ForegroundColor Yellow
 $npmVersion = npm --version 2>$null
 if ($npmVersion) {
-    Write-Host "✓ npm: $npmVersion" -ForegroundColor Green
+    Write-Host "[OK] npm: $npmVersion" -ForegroundColor Green
 } else {
-    Write-Host "✗ npm is not installed" -ForegroundColor Red
+    Write-Host "[X] npm is not installed" -ForegroundColor Red
     # Download npm
     Write-Host "Downloading npm..." -ForegroundColor Yellow
     npm install -g npm
     if ($LASTEXITCODE -ne 0) {
-        Write-Host "✗ npm download failed" -ForegroundColor Red
+        Write-Host "[X] npm download failed" -ForegroundColor Red
         exit 1
     }
-    Write-Host "✓ npm downloaded successfully" -ForegroundColor Green
+    Write-Host "[OK] npm downloaded successfully" -ForegroundColor Green
     npm --version
 }
 
 # Check if dependencies are installed
 Write-Host "`nChecking project dependencies..." -ForegroundColor Yellow
-if (Test-Path "node_modules") {
-    Write-Host "✓ node_modules exists" -ForegroundColor Green
-} else {
-    Write-Host "✗ node_modules does not exist, installing dependencies..." -ForegroundColor Yellow
-    npm install
+
+# 调用 nodejs-dependencies-install.js 脚本进行依赖检查和安装
+$nodeDependenciesScript = Join-Path (Split-Path -Parent $MyInvocation.MyCommand.Path) "configs\nodejs-dependencies-install.js"
+
+if (Test-Path $nodeDependenciesScript) {
+    node $nodeDependenciesScript
     if ($LASTEXITCODE -ne 0) {
-        Write-Host "✗ Dependency installation failed" -ForegroundColor Red
+        Write-Host "[X] Node dependencies check/installation failed" -ForegroundColor Red
         exit 1
     }
+} else {
+    Write-Host "[X] nodejs-dependencies-install.js not found at: $nodeDependenciesScript" -ForegroundColor Red
+    Write-Host "[WARN] Continuing without dependency check..." -ForegroundColor Yellow
 }
 
 # Check if python is installed
 Write-Host "`nChecking if python is installed..." -ForegroundColor Yellow
 $pythonVersion = python --version 2>$null
 if ($pythonVersion) {
-    Write-Host "✓ python: $pythonVersion" -ForegroundColor Green
+    Write-Host "[OK] python: $pythonVersion" -ForegroundColor Green
 } else {
-    Write-Host "✗ python is not installed" -ForegroundColor Red
+    Write-Host "[X] python is not installed" -ForegroundColor Red
     # Download python
     Write-Host "Downloading python..." -ForegroundColor Yellow
     npm install -g python
     if ($LASTEXITCODE -ne 0) {
-        Write-Host "✗ python download failed" -ForegroundColor Red
+        Write-Host "[X] python download failed" -ForegroundColor Red
         exit 1
     }
-    Write-Host "✓ python downloaded successfully" -ForegroundColor Green
+    Write-Host "[OK] python downloaded successfully" -ForegroundColor Green
     python --version
 }
 
+# check pip is installed
+Write-Host "`nChecking pip is installed..." -ForegroundColor Yellow
+$pipVersion = pip --version 2>$null
+if ($pipVersion) {
+    Write-Host "[OK] pip: $pipVersion" -ForegroundColor Green
+} else {
+    Write-Host "[X] pip is not installed" -ForegroundColor Red
+    Write-Host "Installing pip..." -ForegroundColor Yellow
+    pip install --upgrade pip
+    if ($LASTEXITCODE -ne 0) {
+        Write-Host "[X] pip installation failed" -ForegroundColor Red
+        exit 1
+    }
+    Write-Host "[OK] pip installed successfully" -ForegroundColor Green
+    pip --version
+}
+
+
+#check python virtual environment
+Write-Host "`nChecking python virtual environment..." -ForegroundColor Yellow
+$venvPath = "./python/env"
+if (Test-Path $venvPath) {
+    Write-Host "[OK] python virtual environment exists at: $venvPath" -ForegroundColor Green
+} else {
+    Write-Host "[X] python virtual environment is not installed" -ForegroundColor Yellow
+    Write-Host "Creating python virtual environment..." -ForegroundColor Yellow
+    python -m venv $venvPath
+    if ($LASTEXITCODE -ne 0) {
+        Write-Host "[X] python virtual environment creation failed" -ForegroundColor Red
+        Write-Host "[WARN] Continuing without virtual environment..." -ForegroundColor Yellow
+    } else {
+        Write-Host "[OK] python virtual environment created successfully" -ForegroundColor Green
+    }
+}
+
+# check python dependencies
+Write-Host "`nChecking python dependencies..." -ForegroundColor Yellow
+
+# 调用 python-enviroment-install.py 脚本进行依赖检查和安装（安装到虚拟环境）
+$pythonDependenciesScript = Join-Path (Split-Path -Parent $MyInvocation.MyCommand.Path) "python\python-enviroment-install.py"
+
+if (Test-Path $pythonDependenciesScript) {
+    python $pythonDependenciesScript
+    if ($LASTEXITCODE -ne 0) {
+        Write-Host "[X] Python dependencies check/installation failed" -ForegroundColor Red
+        exit 1
+    }
+} else {
+    Write-Host "[X] python-enviroment-install.py not found at: $pythonDependenciesScript" -ForegroundColor Red
+    Write-Host "[WARN] Continuing without Python dependency check..." -ForegroundColor Yellow
+}
+
 Write-Host "`n================================" -ForegroundColor Cyan
 Write-Host "Environment check completed!" -ForegroundColor Green

package.json

@@ -14,13 +14,15 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.20.0"
+    "react-router-dom": "^6.20.0",
+    "styled-components": "^6.3.8"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",
     "concurrently": "^8.2.2",
     "electron": "^28.0.0",
     "electron-builder": "^24.9.1",
+    "sass": "^1.97.3",
     "vite": "^5.0.8",
     "wait-on": "^7.2.0"
   }

python/environment.txt

@@ -0,0 +1,16 @@
+coloredlogs==15.0.1
+flatbuffers==25.12.19
+humanfriendly==10.0
+mpmath==1.3.0
+numpy==2.4.1
+opencv-contrib-python==4.13.0.90
+opencv-python==4.13.0.90
+opencv-python-headless==4.13.0.90
+packaging==26.0
+protobuf==6.33.4
+pyclipper==1.4.0
+pyreadline3==3.5.4
+setuptools==80.10.2
+shapely==2.1.2
+sympy==1.14.0
+wheel==0.46.3

python/python-enviroment-install.py

@@ -0,0 +1,214 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+Python 依赖安装和同步脚本
+功能：检查、安装 Python 依赖到虚拟环境，然后同步所有已安装的包到 environment.txt
+"""
+
+import os
+import sys
+import subprocess
+import platform
+from pathlib import Path
+
+# 获取脚本所在目录和项目根目录
+SCRIPT_DIR = Path(__file__).parent.absolute()
+PROJECT_ROOT = SCRIPT_DIR.parent.absolute()
+VENV_PATH = SCRIPT_DIR / "env"
+ENVIRONMENT_FILE = SCRIPT_DIR / "environment.txt"
+REQUIREMENTS_FILE = PROJECT_ROOT / "requirements.txt"
+
+# 根据操作系统确定虚拟环境的 Python 和 pip 路径
+if platform.system() == "Windows":
+    VENV_PYTHON = VENV_PATH / "Scripts" / "python.exe"
+    VENV_PIP = VENV_PATH / "Scripts" / "pip.exe"
+else:
+    VENV_PYTHON = VENV_PATH / "bin" / "python"
+    VENV_PIP = VENV_PATH / "bin" / "pip"
+
+
+def run_command(cmd, check=True, capture_output=True):
+    """运行命令并返回结果"""
+    try:
+        result = subprocess.run(
+            cmd,
+            shell=True,
+            check=check,
+            capture_output=capture_output,
+            text=True,
+            encoding='utf-8'
+        )
+        return result.returncode == 0, result.stdout, result.stderr
+    except subprocess.CalledProcessError as e:
+        return False, e.stdout if hasattr(e, 'stdout') else "", str(e)
+
+
+def ensure_venv():
+    """确保虚拟环境存在"""
+    if not VENV_PATH.exists():
+        print("[WARN] Virtual environment not found, creating...")
+        success, _, error = run_command(f'python -m venv "{VENV_PATH}"', check=False)
+        if not success:
+            print(f"[X] Failed to create virtual environment: {error}")
+            sys.exit(1)
+        print("[OK] Virtual environment created successfully")
+    return True
+
+
+def get_venv_pip():
+    """获取虚拟环境的 pip 命令"""
+    if platform.system() == "Windows":
+        return str(VENV_PIP)
+    else:
+        return str(VENV_PIP)
+
+
+def read_dependencies(source_file):
+    """读取依赖列表"""
+    if not source_file.exists():
+        return []
+    
+    dependencies = []
+    with open(source_file, 'r', encoding='utf-8') as f:
+        for line in f:
+            line = line.strip()
+            # 跳过注释和空行
+            if line and not line.startswith('#'):
+                dependencies.append(line)
+    return dependencies
+
+
+def check_package_installed(package_name, venv_pip):
+    """检查包是否已安装"""
+    # 提取包名（支持 ==, >=, <=, >, <, ~= 等版本操作符）
+    pkg_name = package_name.split('==')[0].split('>=')[0].split('<=')[0].split('>')[0].split('<')[0].split('~=')[0].strip()
+    
+    cmd = f'"{venv_pip}" show {pkg_name}'
+    success, _, _ = run_command(cmd, check=False, capture_output=True)
+    return success
+
+
+def install_packages(packages, source_file, venv_pip):
+    """安装包到虚拟环境"""
+    failed_packages = []
+    
+    if source_file == REQUIREMENTS_FILE and REQUIREMENTS_FILE.exists():
+        # 使用 requirements.txt 批量安装
+        cmd = f'"{venv_pip}" install -r "{source_file}"'
+        success, _, error = run_command(cmd, check=False)
+        if not success:
+            print(f"[X] Installation failed: {error}")
+            return False, failed_packages
+    else:
+        # 逐个安装
+        for package in packages:
+            cmd = f'"{venv_pip}" install {package}'
+            success, _, error = run_command(cmd, check=False)
+            if not success:
+                print(f"[X] Failed to install: {package}")
+                failed_packages.append(package)
+    
+    if failed_packages:
+        return False, failed_packages
+    return True, []
+
+
+def sync_environment_file(venv_pip, silent=False):
+    """同步所有已安装的包到 environment.txt"""
+    cmd = f'"{venv_pip}" freeze'
+    success, output, error = run_command(cmd, check=False)
+    
+    if not success:
+        if not silent:
+            print(f"[X] Failed to get installed packages list: {error}")
+        return False
+    
+    # 使用 UTF-8 无 BOM 编码写入文件
+    with open(ENVIRONMENT_FILE, 'w', encoding='utf-8', newline='\n') as f:
+        f.write(output)
+    
+    if not silent:
+        package_count = len([line for line in output.strip().split('\n') if line.strip()])
+        print(f"[OK] All installed packages synced to {ENVIRONMENT_FILE}")
+        print(f"      Total packages: {package_count}")
+    return True
+
+
+def main():
+    """主函数"""
+    # 确保虚拟环境存在
+    if not ensure_venv():
+        sys.exit(1)
+    
+    venv_pip = get_venv_pip()
+    
+    # 确定依赖源文件（优先使用 requirements.txt，如果没有则使用 environment.txt）
+    if REQUIREMENTS_FILE.exists():
+        source_file = REQUIREMENTS_FILE
+    elif ENVIRONMENT_FILE.exists():
+        source_file = ENVIRONMENT_FILE
+    else:
+        sync_environment_file(venv_pip)
+        sys.exit(0)
+    
+    # 读取依赖列表
+    required_packages = read_dependencies(source_file)
+    
+    if not required_packages:
+        print("[OK] No dependencies specified")
+        sys.exit(0)
+    
+    # 检查缺失的依赖
+    missing_packages = []
+    installed_count = 0
+    missing_count = 0
+    
+    for package in required_packages:
+        package_line = package.strip()
+        if not package_line:
+            continue
+        
+        # 提取包名
+        package_name = package_line.split('==')[0].split('>=')[0].split('<=')[0].split('>')[0].split('<')[0].split('~=')[0].strip()
+        
+        if check_package_installed(package_name, venv_pip):
+            installed_count += 1
+        else:
+            missing_packages.append(package_line)
+            missing_count += 1
+    
+    # 如果有缺失的依赖，显示必要信息并安装
+    if missing_count > 0:
+        print(f"[X] Missing {missing_count} package(s) out of {len(required_packages)}")
+        
+        print("Missing packages:")
+        for missing in missing_packages:
+            print(f"  - {missing}")
+        
+        print("\nInstalling missing packages...")
+        
+        success, failed = install_packages(missing_packages, source_file, venv_pip)
+        if success:
+            print("[OK] All packages installed successfully")
+        else:
+            if failed:
+                print(f"[X] Failed to install {len(failed)} package(s):")
+                for pkg in failed:
+                    print(f"  - {pkg}")
+            else:
+                print("[X] Some packages installation failed")
+            # 即使有失败，也继续同步已安装的包
+            print("[WARN] Continuing to sync installed packages...")
+        
+        # 同步所有已安装的包到 environment.txt
+        sync_environment_file(venv_pip)
+    else:
+        # 所有依赖都齐全时，只显示一行信息（包含同步结果）
+        sync_environment_file(venv_pip, silent=True)
+        print(f"[OK] All dependencies are installed ({len(required_packages)} packages)")
+    
+    sys.exit(0)
+
+
+if __name__ == "__main__":
+    main()

src/index.jsx

@@ -1,16 +1,20 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { ThemeProvider } from 'styled-components'
+import { theme } from './styles/theme'
 import Home from './page/home.jsx'
 
 function App() {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Navigate to="/page" replace />} />
-        <Route path="/page" element={<Home />} />
-      </Routes>
-    </BrowserRouter>
+    <ThemeProvider theme={theme}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Navigate to="/page" replace />} />
+          <Route path="/page" element={<Home />} />
+        </Routes>
+      </BrowserRouter>
+    </ThemeProvider>
   )
 }
 

src/page/ai-chat/ai-chat.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { AiChatContainer } from './ai-chat.styled.js'
+
+function AiChat({ show }) {
+  if (!show) {
+    return null
+  }
+
+  return (
+    <AiChatContainer>
+      AiChat (30%)
+    </AiChatContainer>
+  )
+}
+
+export default AiChat

src/page/ai-chat/ai-chat.styled.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const AiChatContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: ${props => props.theme.colors.aiChatBg};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+`

src/page/ai-chat/dialog/dialog.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { DialogContainer } from './dialog.styled.js'
+
+function Dialog({ show }) {
+  if (!show) {
+    return null
+  }
+
+  return (
+    <DialogContainer>
+      Dialog (20%)
+    </DialogContainer>
+  )
+}
+
+export default Dialog

src/page/ai-chat/dialog/dialog.styled.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const DialogContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: ${props => props.theme.colors.primary};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+`

src/page/ai-chat/input/input.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { InputContainer } from './input.styled.js'
+
+function Input({ show }) {
+  if (!show) {
+    return null
+  }
+
+  return (
+    <InputContainer>
+      Input (20%)
+    </InputContainer>
+  )
+}
+
+export default Input

src/page/ai-chat/input/input.styled.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const InputContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: ${props => props.theme.colors.primary};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+`

src/page/device/device.css

@@ -1,12 +0,0 @@
-.device-container {
-    width: 100%;
-    height: 100%;
-
-    background-color: #0769fb;
-    display: flex;
-    align-items: center;
-    justify-content: center;
- 
-    margin: 0;
-    padding: 0;
-}

src/page/device/device.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import './device.css'
+import './device.scss'
 
 function Device({ show }) {
   if (!show) {
@@ -8,7 +8,16 @@ function Device({ show }) {
 
   return (
     <div className="device-container">
-        Device (20%)
+      <div className="device-update">
+        <div className="device-update-title">设备列表</div>
+        <div className="device-update-btn"></div>
+      </div>
+      <div className="device-list">
+
+      </div>
+      <div className="device-add">
+
+      </div>
     </div>
   )
 }

src/page/device/device.scss

@@ -0,0 +1,43 @@
+@use '../../styles/variables' as *;
+
+.device-container {
+  width: $full-size;
+  height: $full-size;
+  background-color: $primary-color;
+  @include flex-center;
+  margin: 0;
+  padding: 0;
+}
+
+.device-update {
+  width: $full-size;
+  height: $full-size;
+  background-color: $primary-color;
+  @include flex-center;
+}
+
+.device-update-title {
+  width: $full-size;
+  height: $full-size;
+  background-color: $primary-color;
+  @include flex-center;
+}
+
+.device-update-btn {
+  width: $full-size;
+  height: $full-size;
+  background-color: $primary-color;
+  @include flex-center;
+}
+
+.device-list {
+  width: $full-size;
+  height: $full-size;
+}
+
+.device-add {
+  width: $full-size;
+  height: $full-size;
+  background-color: $primary-color;
+  @include flex-center;
+}

src/page/home.jsx

@@ -1,27 +1,30 @@
 import React, { useState } from 'react'
-import './home.css'
+import { HomeContainer, HomeBg } from './home.styled.js'
 import Alert from './public/alert-view/alert-view.jsx'
 import Device from './device/device.jsx'
 import ScreenShot from './screenshot/screenshot.jsx'
+import AiChat from './ai-chat/ai-chat.jsx'
 import Process from './process/process.jsx'
-import { createHandleToggle, createHandleClose } from './home.js'
+import { createHandleClose } from './home.js'
 
 function Home() {
   const [showAlert, setShowAlert] = useState(false)
   const [showDevice, setShowDevice] = useState(true)
   const [showScreenShot, setShowScreenShot] = useState(true)
+  const [showAiChat, setShowAiChat] = useState(true)
   const [showProcess, setShowProcess] = useState(true)
   
   return (
-    <div className="home-container">
-      <div className='home-bg'>
+    <HomeContainer>
+      <HomeBg>
         {showDevice && <Device show={showDevice}/>}
         {showScreenShot && <ScreenShot show={showScreenShot}/>}
+        {showAiChat && <AiChat show={showAiChat}/>}
         {showProcess && <Process show={showProcess}/>}
-      </div>
+      </HomeBg>
      
       {showAlert && <Alert show={showAlert} onClose={createHandleClose(setShowAlert)} />}
-    </div>  
+    </HomeContainer>
   )
 }
 

src/page/home.css → src/page/home.styled.js

@@ -1,21 +1,20 @@
-/* Home页面的容器 */
-.home-container {
+import styled from 'styled-components'
+
+export const HomeContainer = styled.div`
   width: 100vw;
   height: 100vh;
   margin: 0;
   padding: 0;
- 
   box-sizing: border-box;
-}
+`
 
-.home-bg {
+export const HomeBg = styled.div`
   display: grid !important;
-  grid-template-columns: 20% 30% 50% !important;
-
+  grid-template-columns: 20% 30% 30% 20% !important;
   width: 100%;
   height: 100%;
   gap: 0;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-}
+`

src/page/process/process.css

@@ -1,13 +0,0 @@
-.process-container {
-    width: 100%;
-    height: 100%;
- 
-    background-color: #07fb40;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-
-    margin: 0;
-    padding: 0;
-}

src/page/process/process.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import './process.css'
+import { ProcessContainer } from './process.styled.js'
 
 function Process({ show }) {
   if (!show) {
@@ -7,10 +7,10 @@ function Process({ show }) {
   }
 
   return (
-    <div className="process-container">
-        Process (20%)
-    </div>
+    <ProcessContainer>
+      Process (20%)
+    </ProcessContainer>
   )
 }
 
-export default Process
+export default Process

src/page/process/process.styled.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const ProcessContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: ${props => props.theme.colors.processBg};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+`

src/page/public/alert-view/alert-view.css

@@ -1,78 +0,0 @@
-.alert-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-.alert-bg {
-    width: 50%;
-    height: 30%;
-    background-color: #fff;
-    border-radius: 10px;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column;
-
-    /* 文字不能选择 */
-    user-select: none;
-    
-    /* 根据屏幕缩放而缩放，同时响应宽度和高度变化 */
-    /* 取宽度和高度计算结果的较小值，确保字体大小同时响应宽高变化 */
-    /* 父div宽度 = 50vw，高度 = 30vh */
-    /* 宽度比例：50vw * 0.04 = 父div宽度的4% */
-    /* 高度比例：30vh * 0.08 = 父div高度的8% */
-    font-size: min(calc(50vw * 0.04), calc(30vh * 0.08));
-}
-
-.title {
-    width: 100%;
-    height: 100%;
-    /* em单位精确相对于父元素.alert-bg的字体大小 */
-    font-size: 2.5em;
-    font-weight: bold;
-    color: #000;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-}
-
-.content {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    /* em单位精确相对于父元素.alert-bg的字体大小 */
-    font-size: 1.5em;
-    color: #000;
-}
-
-.footer {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-}
-
-.confirm-button {
-    width:30%;
-    height: 80%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-    border-radius: 10px;
-    font-size: 1.5em;
-}

src/page/public/alert-view/alert-view.jsx

@@ -1,5 +1,12 @@
 import React from 'react'
-import './alert-view.css'
+import {
+  AlertContainer,
+  AlertBg,
+  Title,
+  Content,
+  Footer,
+  ConfirmButton
+} from './alert-view.styled.js'
 import { handleConfirm, defaultTitle, defaultContent } from './alert-view.js'
 
 function AlertView({ show, onClose, title = defaultTitle, content = defaultContent }) {
@@ -8,19 +15,19 @@ function AlertView({ show, onClose, title = defaultTitle, content = defaultConte
   }
 
   return (
-    <div className="alert-container">
-        <div className="alert-bg">
-            <div className="title">
-              <label>{title}</label>
-            </div>
-            <div className="content">
-              <label>{content}</label>
-            </div>
-            <div className="footer">
-               <div className="confirm-button" onClick={() => handleConfirm(onClose)}>确定</div>
-            </div>
-        </div>
-    </div>
+    <AlertContainer>
+      <AlertBg>
+        <Title>
+          <label>{title}</label>
+        </Title>
+        <Content>
+          <label>{content}</label>
+        </Content>
+        <Footer>
+          <ConfirmButton onClick={() => handleConfirm(onClose)}>确定</ConfirmButton>
+        </Footer>
+      </AlertBg>
+    </AlertContainer>
   )
 }
 

src/page/public/alert-view/alert-view.styled.js

@@ -0,0 +1,87 @@
+import styled from 'styled-components'
+
+export const AlertContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: ${props => props.theme.sizes.full};
+  height: ${props => props.theme.sizes.full};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`
+
+export const AlertBg = styled.div`
+  width: 50%;
+  height: 30%;
+  background-color: ${props => props.theme.colors.white};
+  border-radius: 10px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  /* 根据屏幕缩放而缩放，同时响应宽度和高度变化 */
+  /* 取宽度和高度计算结果的较小值，确保字体大小同时响应宽高变化 */
+  /* 父div宽度 = 50vw，高度 = 30vh */
+  /* 宽度比例：50vw * 0.04 = 父div宽度的4% */
+  /* 高度比例：30vh * 0.08 = 父div高度的8% */
+  font-size: min(calc(50vw * 0.04), calc(30vh * 0.08));
+`
+
+export const Title = styled.div`
+  width: ${props => props.theme.sizes.full};
+  height: ${props => props.theme.sizes.full};
+  /* em单位精确相对于父元素.alert-bg的字体大小 */
+  font-size: 2.5em;
+  font-weight: bold;
+  color: ${props => props.theme.colors.black};
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`
+
+export const Content = styled.div`
+  width: ${props => props.theme.sizes.full};
+  height: ${props => props.theme.sizes.full};
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  /* em单位精确相对于父元素.alert-bg的字体大小 */
+  font-size: 1.5em;
+  color: ${props => props.theme.colors.black};
+`
+
+export const Footer = styled.div`
+  width: ${props => props.theme.sizes.full};
+  height: ${props => props.theme.sizes.full};
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`
+
+export const ConfirmButton = styled.div`
+  width: 30%;
+  height: 80%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  font-size: 1.5em;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+    transform: scale(1.05);
+  }
+  
+  &:active {
+    transform: scale(0.95);
+  }
+`

src/page/screenshot/screenshot.css

@@ -1,12 +0,0 @@
-.screenshot-container {
-    width: 100%;
-    height: 100%;
-
-    background-color: #fb0707e6;
-    display: flex;
-    align-items: center;
-    justify-content: center;
- 
-    margin: 0;
-    padding: 0;
-}

src/page/screenshot/screenshot.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import './screenshot.css'
+import { ScreenshotContainer } from './screenshot.styled.js'
 
 function ScreenShot({ show }) {
   if (!show) {
@@ -7,9 +7,9 @@ function ScreenShot({ show }) {
   }
 
   return (
-    <div className="screenshot-container">
-        ScreenShot (60%)
-    </div>
+    <ScreenshotContainer>
+      ScreenShot (30%)
+    </ScreenshotContainer>
   )
 }
 

src/page/screenshot/screenshot.styled.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const ScreenshotContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: ${props => props.theme.colors.screenshotBg};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+`

src/styles/_variables.scss

@@ -0,0 +1,25 @@
+// 全局 SCSS 变量文件
+// 颜色变量
+$primary-color: #0769fb;
+$ai-chat-bg: #e0e8f4;
+$process-bg: #07fb40;
+$screenshot-bg: rgba(251, 7, 7, 0.9);
+$white: #fff;
+$black: #000;
+
+// 尺寸变量
+$full-size: 100%;
+$spacing-base: 0;
+
+// 响应式断点
+$breakpoint-sm: 576px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1200px;
+
+// Mixin: Flex 居中
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/styles/theme.js

@@ -0,0 +1,32 @@
+// 主题配置 - 将 SCSS 变量转换为 JavaScript 主题对象
+export const theme = {
+  colors: {
+    primary: '#0769fb',
+    aiChatBg: '#e0e8f4',
+    processBg: '#07fb40',
+    screenshotBg: 'rgba(251, 7, 7, 0.9)', // #fb0707e6
+    white: '#fff',
+    black: '#000',
+  },
+  
+  sizes: {
+    full: '100%',
+    spacingBase: 0,
+  },
+  
+  layout: {
+    flexCenter: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  },
+  
+  // 响应式断点
+  breakpoints: {
+    sm: '576px',
+    md: '768px',
+    lg: '992px',
+    xl: '1200px',
+  },
+}

vite.config.js

@@ -5,5 +5,12 @@ export default defineConfig({
   plugins: [react()],
   server: {
     port: 5173
-  }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler', // 使用现代 API，消除弃用警告
+      },
+    },
+  },
 })