文档完美

README.md

@@ -1,4 +1,4 @@
-**一、框架：Electron + React + Vite
+**一、框架：Electron + React + Vite
 
 **二、测试连接：adb connect 192.168.0.15:5555
 
@@ -25,3 +25,28 @@
 
 **3. 修改 `src/App.jsx`**：
    - 删除 Devices 的 import 和组件使用
+
+**五、响应式字体大小设置**
+
+根据窗口的宽高变化，字体大小自动缩放。在最外层父标签设置基础字体大小，下面所有子标签的字体都使用 `rem` 为单位即可。
+
+**示例：**
+
+```css
+/* 父div宽度 = 50vw，高度 = 30vh */
+/* 宽度比例：50vw * 0.04 = 父div宽度的4% */
+/* 高度比例：30vh * 0.08 = 父div高度的8% */
+font-size: min(calc(50vw * 0.04), calc(30vh * 0.08));
+```
+
+**参数说明：**
+
+- **`50vw`**：根父容器宽度
+- **`30vh`**：根父容器高度
+- **`0.04`**：字体大小 = 父容器宽度的4%（调整此值可改变字体大小）
+- **`0.08`**：字体大小 = 父容器高度的8%（调整此值可改变字体大小）
+- **`min()`**：取两个计算结果中的较小值，确保字体同时响应宽高变化
+
+**调整方法：**
+- 修改 `0.04` 和 `0.08` 的值来调整字体大小（数值越大字体越大）
+- 修改 `50vw` 和 `30vh` 来调整容器大小

README_REACT.md

@@ -1,76 +0,0 @@
-# Electron + React + Vite 项目
-
-最基础的 Electron + React + Vite 桌面应用项目。
-
-## 项目结构
-
-```
-.
-├── src/
-│   ├── index.jsx          # 入口文件（只做路由跳转）
-│   └── home/
-│       ├── home.jsx       # Home 页面组件
-│       ├── home.js        # Home 逻辑
-│       └── home.css       # Home 样式
-├── electron/
-│   └── main.js            # Electron 主进程
-├── vite.config.js         # Vite 配置
-└── package.json
-```
-
-## 安装依赖
-
-```bash
-npm install
-```
-
-## 运行应用
-
-### 开发模式（推荐）
-```bash
-npm run electron:dev
-```
-
-这会同时启动：
-1. Vite 开发服务器（http://localhost:5173）
-2. Electron 应用
-
-### 分别启动
-```bash
-# 终端1：启动 Vite
-npm run dev
-
-# 终端2：启动 Electron
-npm run electron
-```
-
-## 打包应用
-
-```bash
-npm run electron:build
-```
-
-## 页面说明
-
-### index.jsx
-- 只做路由跳转逻辑
-- 访问 `/` 自动跳转到 `/home`
-
-### home.jsx
-- Home 页面组件
-- 包含一个 label 和一个 button
-
-### home.js
-- Home 页面的业务逻辑
-- `handleClick` 函数处理按钮点击
-
-### home.css
-- Home 页面的样式
-- 最基础的样式
-
-## 技术栈
-
-- **Electron** - 桌面应用框架
-- **React** - UI 框架
-- **Vite** - 构建工具
-- **React Router** - 路由

configs/config.js

@@ -12,6 +12,12 @@ module.exports = {
     enabled: false, // 是否显示调试侧边栏（DevTools）
   },
 
+  // Vite 开发服务器配置
+  vite: {
+    port: 9527, // Vite 开发服务器端口（如果被占用会自动尝试下一个端口）
+    host: 'localhost' // 服务器主机地址
+  },
+
   // Python 路径配置
   pythonPath: {
     path: 'D:\\Program\\Python312' // Python 安装路径

configs/dependencies.txt

@@ -28,7 +28,7 @@
 @emotion/is-prop-valid==1.4.0
 @emotion/memoize==0.9.0
 @emotion/unitless==0.10.0
-@esbuild/win32-arm64==0.21.5
+@esbuild/win32-arm64==0.27.2
 @hapi/hoek==9.3.0
 @hapi/topo==5.1.0
 @isaacs/cliui==8.0.2
@@ -43,7 +43,7 @@
 @parcel/watcher==2.5.6
 @pkgjs/parseargs==0.11.0
 @remix-run/router==1.23.2
-@rolldown/pluginutils==1.0.0-beta.27
+@rolldown/pluginutils==1.0.0-beta.53
 @rollup/rollup-win32-arm64-msvc==4.57.0
 @sideway/address==4.1.5
 @sideway/formula==3.0.1
@@ -62,11 +62,11 @@
 @types/http-cache-semantics==4.2.0
 @types/keyv==3.1.4
 @types/ms==2.1.0
-@types/node==18.19.130
+@types/node==25.1.0
 @types/responselike==1.0.3
 @types/stylis==4.2.7
 @types/yauzl==2.10.3
-@vitejs/plugin-react==4.7.0
+@vitejs/plugin-react==5.1.2
 @xmldom/xmldom==0.8.11
 agent-base==6.0.2
 ajv-keywords==3.5.2
@@ -157,13 +157,14 @@ 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
+esbuild==0.27.2
 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
+fdir==6.5.0
 filelist==1.0.4
 follow-redirects==1.15.11
 foreground-child==3.3.1
@@ -266,7 +267,7 @@ pump==3.0.3
 punycode==2.3.1
 quick-lru==5.1.1
 react-dom==18.3.1
-react-refresh==0.17.0
+react-refresh==0.18.0
 react-router-dom==6.30.3
 react-router==6.30.3
 react==18.3.1
@@ -312,6 +313,7 @@ supports-color==8.1.1
 tar-stream==2.2.0
 tar==6.2.1
 temp-file==3.4.0
+tinyglobby==0.2.15
 tmp-promise==3.0.3
 tmp==0.2.5
 tree-kill==1.2.2
@@ -319,13 +321,13 @@ truncate-utf8-bytes==1.0.2
 tslib==2.8.1
 type-fest==0.13.1
 typescript==5.9.3
-undici-types==5.26.5
+undici-types==7.16.0
 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
+vite==7.3.1
 wait-on==7.2.0
 which==2.0.2
 wrap-ansi==7.0.0

doc/BEST_CSS_VS_SCSS.md

@@ -1,453 +0,0 @@
-# 功能最强大的 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

@@ -1,386 +0,0 @@
-# 迁移到 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

@@ -1,365 +0,0 @@
-# 现代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

@@ -1,574 +0,0 @@
-# 项目 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

@@ -1,544 +0,0 @@
-# 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

@@ -1,443 +0,0 @@
-# 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

@@ -1,917 +0,0 @@
-# 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/SCSS_VS_CSS.md

@@ -0,0 +1,388 @@
+# SCSS vs 传统 CSS 功能对比
+
+## 快速对比
+
+| 功能 | 传统 CSS | SCSS |
+|------|---------|------|
+| 语法 | 标准 CSS 语法 | ✅ 完全兼容 CSS 语法 |
+| 变量 | ❌ 不支持（CSS 变量有限） | ✅ `$variable` |
+| 嵌套 | ❌ 不支持 | ✅ 支持嵌套 |
+| Mixin | ❌ 不支持 | ✅ `@mixin` / `@include` |
+| 继承 | ❌ 不支持 | ✅ `@extend` |
+| 函数 | ❌ 不支持 | ✅ 内置函数 + 自定义函数 |
+| 条件语句 | ❌ 不支持 | ✅ `@if` / `@else` |
+| 循环 | ❌ 不支持 | ✅ `@for` / `@each` / `@while` |
+| 导入 | ✅ `@import` | ✅ `@use` / `@import` |
+| 模块化 | ⚠️ 有限 | ✅ 完整的模块系统 |
+
+---
+
+## 1. 变量 (Variables)
+
+### 传统 CSS
+```css
+/* 需要重复写值 */
+.header {
+  color: #0769fb;
+}
+.button {
+  color: #0769fb; /* 重复 */
+}
+```
+
+### SCSS
+```scss
+$primary-color: #0769fb;
+
+.header {
+  color: $primary-color;
+}
+.button {
+  color: $primary-color; // 使用变量
+}
+```
+
+---
+
+## 2. 嵌套 (Nesting)
+
+### 传统 CSS
+```css
+.nav {
+  background: #fff;
+}
+.nav ul {
+  list-style: none;
+}
+.nav ul li {
+  display: inline;
+}
+.nav ul li a {
+  color: #000;
+}
+```
+
+### SCSS
+```scss
+.nav {
+  background: #fff;
+  ul {
+    list-style: none;
+    li {
+      display: inline;
+      a {
+        color: #000;
+      }
+    }
+  }
+}
+```
+
+---
+
+## 3. Mixin（混入）
+
+### 传统 CSS
+```css
+/* 需要重复写相同的代码 */
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card {
+  display: flex;
+  align-items: center;
+  justify-content: center; /* 重复 */
+}
+```
+
+### SCSS
+```scss
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button {
+  @include flex-center;
+}
+.card {
+  @include flex-center; // 复用
+}
+```
+
+**带参数的 Mixin：**
+```scss
+@mixin button($bg-color, $text-color) {
+  background-color: $bg-color;
+  color: $text-color;
+  padding: 10px 20px;
+}
+
+.primary-button {
+  @include button(#0769fb, #fff);
+}
+```
+
+---
+
+## 4. 继承 (Extend)
+
+### 传统 CSS
+```css
+/* 需要重复写 */
+.error {
+  border: 1px solid red;
+  color: red;
+}
+.serious-error {
+  border: 1px solid red; /* 重复 */
+  color: red; /* 重复 */
+  font-weight: bold;
+}
+```
+
+### SCSS
+```scss
+.error {
+  border: 1px solid red;
+  color: red;
+}
+.serious-error {
+  @extend .error; // 继承所有样式
+  font-weight: bold;
+}
+```
+
+---
+
+## 5. 函数 (Functions)
+
+### 传统 CSS
+```css
+/* 无法计算 */
+.box {
+  width: 100%; /* 无法动态计算 */
+}
+```
+
+### SCSS
+```scss
+// 内置函数
+.box {
+  width: percentage(2/3); // 66.66667%
+  background: darken(#0769fb, 10%); // 颜色变暗
+  padding: round(3.7px); // 4px
+}
+
+// 自定义函数
+@function double($value) {
+  @return $value * 2;
+}
+
+.container {
+  width: double(50px); // 100px
+}
+```
+
+---
+
+## 6. 条件语句 (Conditionals)
+
+### 传统 CSS
+```css
+/* 不支持条件 */
+```
+
+### SCSS
+```scss
+$theme: 'dark';
+
+.button {
+  @if $theme == 'dark' {
+    background-color: #000;
+    color: #fff;
+  } @else {
+    background-color: #fff;
+    color: #000;
+  }
+}
+```
+
+---
+
+## 7. 循环 (Loops)
+
+### 传统 CSS
+```css
+/* 需要手动写 */
+.col-1 { width: 8.33%; }
+.col-2 { width: 16.66%; }
+.col-3 { width: 25%; }
+/* ... 重复写 12 次 */
+```
+
+### SCSS
+```scss
+// @for 循环
+@for $i from 1 through 12 {
+  .col-#{$i} {
+    width: percentage($i / 12);
+  }
+}
+
+// @each 循环
+$colors: red, blue, green;
+@each $color in $colors {
+  .bg-#{$color} {
+    background-color: $color;
+  }
+}
+```
+
+---
+
+## 8. 模块化 (Modularity)
+
+### 传统 CSS
+```css
+/* 所有样式在一个文件，难以管理 */
+```
+
+### SCSS
+```scss
+// _variables.scss (变量文件)
+$primary-color: #0769fb;
+
+// _mixins.scss (混入文件)
+@mixin flex-center { ... }
+
+// main.scss (主文件)
+@use 'variables' as *;
+@use 'mixins' as *;
+
+.button {
+  color: $primary-color;
+  @include flex-center;
+}
+```
+
+---
+
+## 9. 运算 (Operations)
+
+### 传统 CSS
+```css
+/* 无法计算 */
+.container {
+  width: 100%; /* 无法做数学运算 */
+}
+```
+
+### SCSS
+```scss
+$base-size: 16px;
+$spacing: 20px;
+
+.container {
+  width: 100% - $spacing; // 计算
+  font-size: $base-size * 1.5; // 24px
+  padding: $spacing / 2; // 10px
+}
+```
+
+---
+
+## 10. 父选择器引用 (&)
+
+### 传统 CSS
+```css
+.button {
+  color: blue;
+}
+.button:hover {
+  color: red; /* 需要重复写选择器 */
+}
+```
+
+### SCSS
+```scss
+.button {
+  color: blue;
+  &:hover {
+    color: red; // & 代表父选择器
+  }
+  &.active {
+    background: yellow;
+  }
+}
+```
+
+---
+
+## 实际项目示例
+
+### 传统 CSS（44 行）
+```css
+.device-container {
+  width: 100%;
+  height: 100%;
+  background-color: #0769fb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+}
+.device-update {
+  width: 100%;
+  height: 100%;
+  background-color: #0769fb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/* ... 重复代码 ... */
+```
+
+### SCSS（更简洁，使用变量和 mixin）
+```scss
+@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 {
+  @extend .device-container; // 继承所有样式
+}
+```
+
+---
+
+## 总结
+
+**SCSS 的优势：**
+- ✅ 语法完全兼容 CSS（可以直接写 CSS）
+- ✅ 变量：避免重复值
+- ✅ 嵌套：结构更清晰
+- ✅ Mixin：代码复用
+- ✅ 函数：动态计算
+- ✅ 逻辑：条件、循环
+- ✅ 模块化：更好的组织
+
+**传统 CSS：**
+- ✅ 浏览器原生支持
+- ✅ 无需编译
+- ❌ 功能有限
+- ❌ 代码重复多
+- ❌ 难以维护大型项目
+
+**推荐：** 使用 SCSS 编写，编译为 CSS 使用。

doc/UNIAPP_CSS_TOOLS.md

@@ -1,376 +0,0 @@
-# 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

@@ -15,7 +15,9 @@ function createWindow() {
   })
 
   if (isDev) {
-    mainWindow.loadURL('http://localhost:5173')
+    // 从配置文件读取 Vite 开发服务器端口
+    const vitePort = config.vite?.port || 5173
+    mainWindow.loadURL(`http://${config.vite?.host || 'localhost'}:${vitePort}`)
     // 根据配置文件决定是否打开调试侧边栏
     if (config.devTools.enabled) {
       mainWindow.webContents.openDevTools()

package.json

@@ -18,12 +18,12 @@
     "styled-components": "^6.3.8"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^5.1.2",
     "concurrently": "^8.2.2",
     "electron": "^28.0.0",
     "electron-builder": "^24.9.1",
     "sass": "^1.97.3",
-    "vite": "^5.0.8",
+    "vite": "^7.3.1",
     "wait-on": "^7.2.0"
   }
 }

src/index.jsx

@@ -1,20 +1,16 @@
 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 (
-    <ThemeProvider theme={theme}>
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Navigate to="/page" replace />} />
-          <Route path="/page" element={<Home />} />
-        </Routes>
-      </BrowserRouter>
-    </ThemeProvider>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Navigate to="/page" replace />} />
+        <Route path="/page" element={<Home />} />
+      </Routes>
+    </BrowserRouter>
   )
 }
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AiChatContainer } from './ai-chat.styled.js'
+import './ai-chat.scss'
 
 function AiChat({ show }) {
   if (!show) {
@@ -7,9 +7,9 @@ function AiChat({ show }) {
   }
 
   return (
-    <AiChatContainer>
+    <div className="ai-chat-container">
       AiChat (30%)
-    </AiChatContainer>
+    </div>
   )
 }
 

src/page/ai-chat/ai-chat.scss

@@ -0,0 +1,10 @@
+@use '../../styles/variables' as *;
+
+.ai-chat-container {
+  width: $full-size;
+  height: $full-size;
+  background-color: $ai-chat-bg;
+  @include flex-center;
+  margin: 0;
+  padding: 0;
+}

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

@@ -1,12 +0,0 @@
-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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { DialogContainer } from './dialog.styled.js'
+import './dialog.scss'
 
 function Dialog({ show }) {
   if (!show) {
@@ -7,9 +7,9 @@ function Dialog({ show }) {
   }
 
   return (
-    <DialogContainer>
+    <div className="dialog-container">
       Dialog (20%)
-    </DialogContainer>
+    </div>
   )
 }
 

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

@@ -0,0 +1,10 @@
+@use '../../../styles/variables' as *;
+
+.dialog-container {
+  width: $full-size;
+  height: $full-size;
+  background-color: $primary-color;
+  @include flex-center;
+  margin: 0;
+  padding: 0;
+}

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

@@ -1,12 +0,0 @@
-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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { InputContainer } from './input.styled.js'
+import './input.scss'
 
 function Input({ show }) {
   if (!show) {
@@ -7,9 +7,9 @@ function Input({ show }) {
   }
 
   return (
-    <InputContainer>
+    <div className="input-container">
       Input (20%)
-    </InputContainer>
+    </div>
   )
 }
 

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

@@ -0,0 +1,10 @@
+@use '../../../styles/variables' as *;
+
+.input-container {
+  width: $full-size;
+  height: $full-size;
+  background-color: $primary-color;
+  @include flex-center;
+  margin: 0;
+  padding: 0;
+}

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

@@ -1,12 +0,0 @@
-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.scss

@@ -7,37 +7,37 @@
   @include flex-center;
   margin: 0;
   padding: 0;
-}
 
-.device-update {
-  width: $full-size;
-  height: $full-size;
-  background-color: $primary-color;
-  @include flex-center;
-}
+  .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-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-update-btn {
+      width: $full-size;
+      height: $full-size;
+      background-color: $primary-color;
+      @include flex-center;
+    }
+  }
 
-.device-list {
-  width: $full-size;
-  height: $full-size;
-}
+  .device-list {
+    width: $full-size;
+    height: $full-size;
+  }
 
-.device-add {
-  width: $full-size;
-  height: $full-size;
-  background-color: $primary-color;
-  @include flex-center;
+  .device-add {
+    width: $full-size;
+    height: $full-size;
+    background-color: $primary-color;
+    @include flex-center;
+  }
 }

src/page/home.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { HomeContainer, HomeBg } from './home.styled.js'
+import './home.scss'
 import Alert from './public/alert-view/alert-view.jsx'
 import Device from './device/device.jsx'
 import ScreenShot from './screenshot/screenshot.jsx'
@@ -15,16 +15,16 @@ function Home() {
   const [showProcess, setShowProcess] = useState(true)
   
   return (
-    <HomeContainer>
-      <HomeBg>
+    <div className="home-container">
+      <div className="home-bg">
         {showDevice && <Device show={showDevice}/>}
         {showScreenShot && <ScreenShot show={showScreenShot}/>}
         {showAiChat && <AiChat show={showAiChat}/>}
         {showProcess && <Process show={showProcess}/>}
-      </HomeBg>
+      </div>
      
       {showAlert && <Alert show={showAlert} onClose={createHandleClose(setShowAlert)} />}
-    </HomeContainer>
+    </div>
   )
 }
 

src/page/home.scss

@@ -0,0 +1,20 @@
+@use '../styles/variables' as *;
+
+.home-container {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+
+  .home-bg {
+    display: grid !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/home.styled.js

@@ -1,20 +0,0 @@
-import styled from 'styled-components'
-
-export const HomeContainer = styled.div`
-  width: 100vw;
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-`
-
-export const HomeBg = styled.div`
-  display: grid !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.jsx

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

src/page/process/process.scss

@@ -0,0 +1,10 @@
+@use '../../styles/variables' as *;
+
+.process-container {
+  width: $full-size;
+  height: $full-size;
+  background-color: $process-bg;
+  @include flex-center;
+  margin: 0;
+  padding: 0;
+}

src/page/process/process.styled.js

@@ -1,12 +0,0 @@
-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.jsx

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

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

@@ -0,0 +1,87 @@
+@use '../../../styles/variables' as *;
+
+.alert-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: $full-size;
+  height: $full-size;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .alert-bg {
+    width: 50%;
+    height: 30%;
+    background-color: $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));
+
+    .title {
+      width: $full-size;
+      height: $full-size;
+      /* em单位精确相对于父元素.alert-bg的字体大小 */
+      font-size: 2.5em;
+      font-weight: bold;
+      color: $black;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .content {
+      width: $full-size;
+      height: $full-size;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      /* em单位精确相对于父元素.alert-bg的字体大小 */
+      font-size: 1.5em;
+      color: $black;
+    }
+
+    .footer {
+      width: $full-size;
+      height: $full-size;
+      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;
+        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/public/alert-view/alert-view.styled.js

@@ -1,87 +0,0 @@
-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.jsx

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

src/page/screenshot/screenshot.scss

@@ -0,0 +1,10 @@
+@use '../../styles/variables' as *;
+
+.screenshot-container {
+  width: $full-size;
+  height: $full-size;
+  background-color: $screenshot-bg;
+  @include flex-center;
+  margin: 0;
+  padding: 0;
+}

src/page/screenshot/screenshot.styled.js

@@ -1,12 +0,0 @@
-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;
-`

vite.config.js

@@ -1,16 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 5173
-  },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        api: 'modern-compiler', // 使用现代 API，消除弃用警告
-      },
-    },
-  },
-})

vite.config.mjs

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { createRequire } from 'module'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+
+// 使用 createRequire 来加载 CommonJS 格式的配置文件
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const require = createRequire(import.meta.url)
+const configPath = join(__dirname, 'configs', 'config.js')
+const config = require(configPath)
+
+// 从配置文件读取 Vite 端口，默认 5173
+const vitePort = config.vite?.port || 5173
+const viteHost = config.vite?.host || 'localhost'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: viteHost,
+    port: vitePort,
+    strictPort: false // 如果端口被占用，自动尝试下一个端口
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler', // 使用现代 API，消除弃用警告
+      },
+    },
+  },
+})