道

工具的终极目标是降低人与人、人与知识之间的阻抗。一个工具平台不只是功能的集合，更是知识的载体——它将操作者的经验固化为流程，将隐性知识转化为显性界面，让后来者不必重复踩坑。这种知识的传递与复用，是技术进步最朴素的动力。

简约之中见深度。优秀的工具应当让人感觉"本来就应该这样"，而非炫技式的功能堆砌。每一个交互的消失、每一步操作的简化，背后都是对用户心智模型的深刻理解。我们希望这个平台能成为使用者手边的得力助手，安静、高效、值得信赖。

法

前端架构设计原则

1. 组件化与分层：将界面拆解为独立、可复用的组件单元。布局组件（侧边栏、页眉、页脚）提供应用骨架，通用组件（颜色选择器、日期选择器、进度条）封装通用交互，业务组件承载具体工具逻辑。三层各司其职，修改一处不影响全局。

2. 响应式状态管理：全局状态（如主题、用户偏好）由集中式存储管理，通过响应式机制自动同步到所有消费组件。局部状态（如表单输入、临时数据）保持在组件内部，避免不必要的全局污染。

3. 声明式路由与懒加载：路由配置与视图组件解耦，支持嵌套路由和路由守卫。非首屏视图按需异步加载，减少初始资源的下载与解析耗时。

4. 类型安全保障：所有数据结构、接口参数、组件属性均通过类型系统约束，在编译阶段拦截潜在的类型不匹配错误，而非依赖运行时调试。

5. 原子化样式体系：采用工具类优先的样式策略，样式规则直接在标记层声明。全局主题变量控制颜色、圆角、间距等设计令牌，实现一键换肤。

设计原则

• 渐进增强：基础功能无需额外依赖，高级特性按需引入
• 关注点分离：表现层、逻辑层、数据层边界清晰
• 可访问性：支持键盘导航、屏幕阅读器、高对比度模式

术

核心框架

Vue 3

• 用途：渐进式前端框架，采用组合式 API 构建用户界面
• 官网：https://vuejs.org/
• 版本：^3.5.33
• 核心能力：响应式数据绑定、组件系统、虚拟 DOM、组合式函数复用逻辑

Vite

• 用途：下一代前端构建工具
• 官网：https://vite.dev/
• 版本：^8.0.3
• 核心能力：ES 模块原生开发服务器、Rolldown 生产构建、热模块替换（HMR）、CSS 分割、自动 chunk 分包

路由与状态

Vue Router

• 用途：官方路由管理
• 官网：https://router.vuejs.org/
• 版本：^5.0.4
• 核心能力：HTML5 History 模式、嵌套路由、导航守卫、路由懒加载

Pinia

• 用途：Vue 3 官方状态管理库
• 官网：https://pinia.vuejs.org/
• 版本：^3.0.4
• 核心能力：模块化 store、TypeScript 原生支持、DevTools 集成

pinia-plugin-persistedstate

• 用途：Pinia 持久化插件，自动将 store 状态同步到 localStorage
• 官网：https://github.com/prazdevs/pinia-plugin-persistedstate
• 版本：^4.7.1

UI 与样式

Tailwind CSS

• 用途：原子化 CSS 框架
• 官网：https://tailwindcss.com/
• 版本：^4.2.4
• 核心能力：工具类优先的样式系统、JIT 编译、设计令牌、暗色模式、响应式断点

daisyUI

• 用途：基于 Tailwind CSS 的组件库
• 官网：https://daisyui.com/
• 版本：^5.5.19
• 核心能力：语义化组件类名（btn、card、drawer、dropdown）、多主题切换、无 JavaScript 纯 CSS 组件

radix-vue

• 用途：无样式、无障碍的基础 UI 组件原语
• 官网：https://www.radix-vue.com/
• 版本：^1.9.17
• 核心能力：符合 WAI-ARIA 标准、键盘导航、焦点管理

@tailwindcss/typography

• 用途：Tailwind CSS 排版插件，为 Markdown 渲染内容提供优雅的默认样式
• 官网：https://github.com/tailwindlabs/tailwindcss-typography
• 版本：^0.5.19

class-variance-authority + tailwind-merge + clsx

• 用途：组件变体管理（CVA）、类名智能合并（tailwind-merge）、条件类名拼接（clsx）
• 官网：https://cva.style/ | https://github.com/dcastil/tailwind-merge | https://github.com/lukeed/clsx

数据可视化与内容渲染

ECharts + vue-echarts

• 用途：数据可视化图表库及其 Vue 封装
• 官网：https://echarts.apache.org/ | https://github.com/ecomfe/vue-echarts
• 版本：^6.0.0 / ^8.0.1

markdown-it

• 用途：Markdown 解析与渲染
• 官网：https://github.com/markdown-it/markdown-it
• 版本：^14.1.1

Mermaid

• 用途：流程图、时序图等文本驱动图表渲染
• 官网：https://mermaid.js.org/
• 版本：^11.14.0

图标

@phosphor-icons/vue

• 用途：Phosphor 图标库的 Vue 组件封装
• 官网：https://phosphoricons.com/
• 版本：^2.2.1

@iconify/vue

• 用途：Iconify 统一图标框架，支持 200+ 图标集
• 官网：https://iconify.design/
• 版本：^5.0.0

工具函数

@vueuse/core

• 用途：Vue 组合式函数工具集
• 官网：https://vueuse.org/
• 版本：^14.2.1

开发工具链

TypeScript

• 用途：JavaScript 超集，提供静态类型检查
• 官网：https://www.typescriptlang.org/
• 版本：~6.0.0

vue-tsc

• 用途：Vue 模板的类型检查工具
• 官网：https://github.com/vuejs/language-tools
• 版本：^3.2.6

ESLint + Prettier + Oxlint

• 用途：代码规范检查（ESLint）、代码格式化（Prettier）、Rust 编写的高性能 Linter（Oxlint）
• 官网：https://eslint.org/ | https://prettier.io/ | https://oxc.rs/

Vitest + Playwright

• 用途：单元测试（Vitest）、端到端测试（Playwright）
• 官网：https://vitest.dev/ | https://playwright.dev/