# work-notes-ssd-ui **Repository Path**: asahi_software/work-notes-ssd-ui ## Basic Information - **Project Name**: work-notes-ssd-ui - **Description**: 基于SSD+AgentSkill 开发的工作笔记前端 - **Primary Language**: JavaScript - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-01-27 - **Last Updated**: 2026-02-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Work Notes SSD UI 基于 Vue 3 + Vite + UnoCSS + Pinia + Axios + Vant + SCSS 构建的现代化前端工程。 ## 技术栈 - **框架**: Vue 3.4+ - **构建工具**: Vite 5.0+ - **路由**: Vue Router 4.2+ - **状态管理**: Pinia 2.1+ - **UI组件库**: Vant 4.8+ - **HTTP客户端**: Axios 1.6+ - **CSS方案**: UnoCSS 0.58+ + SCSS - **自动导入**: unplugin-auto-import + unplugin-vue-components ## 项目特性 ✨ **现代化技术栈** - 使用 Vue 3 Composition API 和最新的前端技术 🎨 **原子化CSS** - 集成 UnoCSS，提供高效的样式解决方案 📱 **移动端优先** - 基于 Vant 组件库，完美适配移动端 🔧 **自动导入** - 组件和API自动导入，提升开发效率 🌐 **请求封装** - 完善的 Axios 拦截器配置和错误处理 📦 **状态管理** - 使用 Pinia 进行轻量级状态管理 🎯 **TypeScript 支持** - 提供完整的类型定义 ## 项目结构 ``` work-notes-ssd-ui/ ├── public/ # 静态资源目录 ├── src/ │ ├── api/ # API接口 │ │ └── user.js # 用户相关接口 │ ├── assets/ # 资源文件 │ ├── components/ # 公共组件 │ ├── router/ # 路由配置 │ │ └── index.js # 路由主文件 │ ├── stores/ # Pinia状态管理 │ │ └── user.js # 用户状态 │ ├── styles/ # 全局样式 │ │ ├── index.scss # 全局样式入口 │ │ └── variables.scss # SCSS变量 │ ├── utils/ # 工具函数 │ │ └── request.js # Axios封装 │ ├── views/ # 页面组件 │ │ ├── Home.vue # 首页 │ │ └── About.vue # 关于页面 │ ├── App.vue # 根组件 │ └── main.js # 入口文件 ├── .env # 环境变量 ├── .env.development # 开发环境变量 ├── .env.production # 生产环境变量 ├── .gitignore # Git忽略配置 ├── index.html # HTML模板 ├── package.json # 项目配置 ├── uno.config.js # UnoCSS配置 ├── vite.config.js # Vite配置 └── README.md # 项目说明 ``` ## 快速开始 ### 安装依赖 ```bash npm install # 或 yarn install # 或 pnpm install ``` ### 开发环境 ```bash npm run dev ``` 项目将在 `http://localhost:3000` 启动 ### 生产构建 ```bash npm run build ``` ### 预览构建结果 ```bash npm run preview ``` ## 环境变量 项目支持多环境配置： - `.env` - 所有环境的默认配置 - `.env.development` - 开发环境配置 - `.env.production` - 生产环境配置 ### 可用的环境变量 ```bash # 应用标题 VITE_APP_TITLE=SSD UI # API基础路径 VITE_API_BASE_URL=/api ``` ## 核心配置说明 ### UnoCSS配置 项目集成了 UnoCSS，提供了原子化的CSS解决方案。配置文件：`uno.config.js` - 预设了常用的工具类 - 自定义主题色配合 Vant 组件库 - 提供便捷的 shortcuts ### Axios封装 位于 `src/utils/request.js`，提供了： - 请求/响应拦截器 - 自动添加 Token - 统一错误处理 - Loading状态管理 - 请求超时处理 ### Pinia状态管理 示例 Store 位于 `src/stores/user.js`，展示了： - 状态定义 - Getters使用 - Actions异步操作 - LocalStorage持久化 ### 路由配置 位于 `src/router/index.js`，特性包括： - 路由懒加载 - 页面标题自动设置 - 路由守卫示例 ## 开发规范 ### 代码风格 - 使用 ESLint 进行代码检查 - 组件使用 `