首页新增新增&日活报表
This commit is contained in:
eafonyang
+23
-40
@@ -9,52 +9,35 @@ source_files:
|
||||
- frontend/packages/uno-preset/src/index.ts
|
||||
- frontend/src/theme/vars.ts
|
||||
- frontend/src/theme/settings.ts
|
||||
- frontend/src/theme/preset/default.json
|
||||
- frontend/src/theme/preset/dark.json
|
||||
- frontend/src/styles/css/reset.css
|
||||
- frontend/src/styles/css/global.css
|
||||
- frontend/src/styles/scss/scrollbar.scss
|
||||
---
|
||||
|
||||
## 样式系统概览
|
||||
|
||||
本项目前端采用 **UnoCSS + NaiveUI** 的原子化 CSS 方案，结合运行时主题变量实现动态换肤。整体风格源自 SoybeanAdmin 模板，通过设计令牌（Design Tokens）统一管理色彩、圆角、阴影等视觉规范。
|
||||
## 系统概述
|
||||
前端采用 **UnoCSS**（原子化 CSS）+ **Naive UI** 组件库的混合方案，配合自研 `@sa/uno-preset` 预设与 JSON 主题预设文件，实现可配置、可切换的多主题中后台风格。
|
||||
|
||||
## 核心架构
|
||||
|
||||
### 1. 原子化样式引擎：UnoCSS
|
||||
- 使用 `presetWind3`（Tailwind v3 兼容预设）提供基础原子类
|
||||
- 自定义 `@sa/uno-preset` 包定义项目级快捷类（如 `flex-center`、`absolute-lt`、`ellipsis-text`）
|
||||
- 启用 `transformerDirectives` 和 `transformerVariantGroup` 支持 `@apply` 与类分组语法
|
||||
- 根配置位于 `frontend/uno.config.ts`
|
||||
|
||||
### 2. 组件库：Naive UI
|
||||
- 作为主要 UI 组件来源，配合 `tailwind-merge` 处理样式冲突
|
||||
- 通过 Pinia store 管理主题状态，与 UnoCSS 变量联动
|
||||
|
||||
### 3. 主题系统
|
||||
- **运行时主题变量**：`src/theme/vars.ts` 生成 CSS 变量映射（如 `--primary-color`、`--container-bg-color`），覆盖 UnoCSS 主题
|
||||
- **主题设置**：`src/theme/settings.ts` 定义默认主题色（`#646cff`）、圆角（6px）、布局模式等
|
||||
- **预设主题**：`src/theme/preset/*.json` 提供 light/dark/compact/azir 等多套预设，支持运行时切换
|
||||
- **暗色模式**：通过 `class` 策略（`dark: 'class'`）在 `<html>` 上切换，而非媒体查询
|
||||
|
||||
### 4. 全局样式组织
|
||||
- `src/styles/css/global.css`：统一引入 reset、nprogress、transition 样式
|
||||
- `src/styles/css/reset.css`：基于 Tailwind 官方 base 的完整浏览器重置
|
||||
- `src/styles/scss/`：仅保留滚动条等少量 SCSS，主体样式走 UnoCSS
|
||||
- 组件内样式优先使用 UnoCSS 原子类，必要时用 `<style scoped>` 补充
|
||||
- **原子化样式层**：通过 `unocss` + `presetWind3` 提供 Tailwind 兼容类名；自定义 `presetSoybeanAdmin` 在 `packages/uno-preset/src/index.ts` 中集中定义 `flex-*`、`absolute-*`、`fixed-*` 等常用快捷类。
|
||||
- **设计令牌层**：`src/theme/vars.ts` 将颜色、阴影映射为 CSS 变量（如 `--primary-color`、`--header-box-shadow`），由 `themeSettings` 与 `src/theme/preset/*.json` 驱动注入。
|
||||
- **主题预设层**：`src/theme/preset/{default,dark,azir,compact}.json` 以 JSON 描述主题色板、圆角、布局模式、Header/Sider/Tab/Footer 尺寸等，运行时由 `theme-drawer` 动态切换。
|
||||
- **全局样式层**：`src/styles/css/reset.css` 提供浏览器默认样式重置；`global.css` 统一 `html/body/#app` 高度与基础文本色；`src/styles/scss/global.scss` 引入滚动条 mixin，支持暗色覆盖。
|
||||
|
||||
## 关键文件
|
||||
- `frontend/uno.config.ts` — UnoCSS 主配置
|
||||
- `frontend/packages/uno-preset/src/index.ts` — 自定义快捷类预设
|
||||
- `frontend/src/theme/vars.ts` — CSS 变量令牌生成器
|
||||
- `frontend/src/theme/settings.ts` — 默认主题设置
|
||||
- `frontend/src/theme/preset/*.json` — 主题预设文件
|
||||
- `frontend/src/styles/css/reset.css` — 浏览器样式重置
|
||||
- `frontend/src/styles/css/global.css` — 全局样式入口
|
||||
- `frontend/uno.config.ts` — UnoCSS 入口，合并 `themeVars`、注册 `presetWind3({ dark: 'class' })` 与 `presetSoybeanAdmin`、启用 `transformerDirectives` / `transformerVariantGroup`
|
||||
- `frontend/packages/uno-preset/src/index.ts` — 项目级快捷类集合（flex/absolute/fixed/ellipsis 等）
|
||||
- `frontend/src/theme/vars.ts` — 生成 `colors.*`、`boxShadow.*` 的 CSS 变量映射表
|
||||
- `frontend/src/theme/settings.ts` — 默认主题设置（主色、圆角、布局模式、各区域尺寸、light/dark tokens）
|
||||
- `frontend/src/theme/preset/*.json` — 可插拔主题预设（default/dark/azir/compact）
|
||||
- `frontend/src/styles/css/reset.css` — 跨浏览器 reset 基线
|
||||
- `frontend/src/styles/scss/scrollbar.scss` — 带暗色覆盖的滚动条 mixin
|
||||
- `frontend/package.json` — 依赖声明（naive-ui、unocss、sass、tailwind-merge 等）
|
||||
|
||||
## 开发者约定
|
||||
1. **优先使用 UnoCSS 原子类**，避免手写 CSS；仅在无法表达时写 `<style scoped>`
|
||||
2. **颜色必须通过 CSS 变量**（如 `text-primary`、`bg-container`），禁止硬编码色值
|
||||
3. **新增主题色**需同步更新 `settings.ts` 中的 `otherColor` 及 `vars.ts` 的调色板生成逻辑
|
||||
4. **暗色适配**通过 `dark:` 前缀类或 `class` 切换，不使用 `prefers-color-scheme`
|
||||
5. **响应式断点**遵循 UnoCSS 默认（sm/md/lg/xl），不自行扩展断点
|
||||
6. **图标统一使用 @iconify/vue**，尺寸通过 `icon-*` 字号类控制
|
||||
## 约定与规则
|
||||
1. **优先使用 UnoCSS 原子类**：布局用 `flex-center`、`absolute-lt` 等 preset 快捷类，避免手写 flex/position 代码。
|
||||
2. **主题色通过 CSS 变量消费**：组件内直接引用 `var(--primary-color)` 或 Uno 类 `text-primary`，禁止硬编码十六进制色值。
|
||||
3. **暗色模式以 class 切换**：Uno 配置 `dark: 'class'`，通过给 `<html>` 添加 `.dark` 类触发，所有样式需遵循此约定。
|
||||
4. **新增主题走 preset JSON**：在 `src/theme/preset/` 下新建 JSON 文件，保持与 `default.json` 一致的字段结构，再通过 theme drawer 加载。
|
||||
5. **全局样式分层**：reset 放 `css/reset.css`，业务通用样式放 `scss/global.scss`，页面级样式尽量拆到组件 SCSS 文件中，避免污染全局。
|
||||
6. **滚动条统一使用 mixin**：需要自定义滚动条时引入 `@forward 'scrollbar'` 并使用 `$size/$color` 参数，确保暗色自动适配。
|
||||
Reference in New Issue
Block a user