完善
This commit is contained in:
334
pages/mall/admin/docs/QUICK_REFERENCE.md
Normal file
334
pages/mall/admin/docs/QUICK_REFERENCE.md
Normal file
@@ -0,0 +1,334 @@
|
||||
# 快速参考卡片 - CRMEB 设计系统
|
||||
|
||||
## 🎯 5 分钟快速入门
|
||||
|
||||
### 1. 文档位置
|
||||
|
||||
所有文档都在 **`docs/`** 文件夹
|
||||
|
||||
### 2. 3 个必读文档
|
||||
|
||||
```
|
||||
docs/
|
||||
├── README.md ← 从这里开始！
|
||||
├── STYLE_SPECIFICATION.md ← 样式规范
|
||||
└── PAGE_STRUCTURE_SPECIFICATION.md ← 页面模板
|
||||
```
|
||||
|
||||
### 3. 开发时遵循的 3 个原则
|
||||
|
||||
```
|
||||
✅ 原则 1: 所有颜色使用 $color-* 变量
|
||||
✅ 原则 2: 所有间距使用 $space-* 变量
|
||||
✅ 原则 3: 所有样式都来自 uni.scss（禁止硬编码）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 常用设计变量速查表
|
||||
|
||||
### 颜色变量
|
||||
|
||||
```scss
|
||||
$primary-color: #1890ff // 主交互色
|
||||
$success-color: #52c41a // 成功绿
|
||||
$warning-color: #faad14 // 警告黄
|
||||
$error-color: #ff4d4f // 错误红
|
||||
|
||||
$text-primary: #000000 // 主文本
|
||||
$text-secondary: #666666 // 次文本
|
||||
$background-primary: #ffffff // 主背景
|
||||
$border-color: #d9d9d9 // 边框色
|
||||
```
|
||||
|
||||
### 间距变量（4px 基准）
|
||||
|
||||
```scss
|
||||
$space-xs: 4px // 极小
|
||||
$space-sm: 8px // 小
|
||||
$space: 12px // 标准（最常用）
|
||||
$space-md: 16px // 中
|
||||
$space-lg: 24px // 大
|
||||
```
|
||||
|
||||
### 其他常用变量
|
||||
|
||||
```scss
|
||||
$radius-sm: 4px // 按钮圆角
|
||||
$radius: 6px // 卡片圆角
|
||||
$shadow: ... // 标准阴影
|
||||
$font-size: 14px // 默认字体
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 代码片段速查
|
||||
|
||||
### 使用颜色
|
||||
|
||||
```scss
|
||||
.button {
|
||||
color: $text-primary; // ✅
|
||||
background: $primary-color; // ✅
|
||||
border: 1px solid $border-color; // ✅
|
||||
}
|
||||
```
|
||||
|
||||
### 使用间距
|
||||
|
||||
```scss
|
||||
.card {
|
||||
padding: $space-md; // 16px
|
||||
margin-bottom: $space-lg; // 24px
|
||||
gap: $space-sm; // 8px
|
||||
}
|
||||
```
|
||||
|
||||
### 使用圆角
|
||||
|
||||
```scss
|
||||
.button {
|
||||
border-radius: $radius-sm; // 4px
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: $radius; // 6px
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border-radius: $radius-full; // 9999px (圆形)
|
||||
}
|
||||
```
|
||||
|
||||
### 使用阴影
|
||||
|
||||
```scss
|
||||
.card {
|
||||
box-shadow: $shadow; // 标准阴影
|
||||
}
|
||||
|
||||
.modal {
|
||||
box-shadow: $shadow-lg; // 强阴影
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ 页面结构快速模板
|
||||
|
||||
### 最小列表页
|
||||
|
||||
```uvue
|
||||
<template>
|
||||
<AdminLayout :currentPage="pageName">
|
||||
<!-- 标题 -->
|
||||
<view class="page-header">
|
||||
<text class="page-title">{{ title }}</text>
|
||||
<button class="btn btn-primary">新增</button>
|
||||
</view>
|
||||
|
||||
<!-- 搜索 -->
|
||||
<view class="search-card">
|
||||
<input v-model="searchForm.keyword" class="input" placeholder="搜索..." />
|
||||
<button @click="handleSearch">搜索</button>
|
||||
</view>
|
||||
|
||||
<!-- 列表 -->
|
||||
<view class="list-card">
|
||||
<view class="list-item" v-for="item in items" :key="item.id">
|
||||
{{ item.name }}
|
||||
<button @click="handleEdit(item)">编辑</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页 -->
|
||||
<view class="pagination">
|
||||
<button @click="handlePrevPage">上一页</button>
|
||||
<text>第 {{ page }} 页</text>
|
||||
<button @click="handleNextPage">下一页</button>
|
||||
</view>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 最小表单页
|
||||
|
||||
```uvue
|
||||
<template>
|
||||
<AdminLayout :currentPage="pageName">
|
||||
<view class="form-card">
|
||||
<view class="form-item">
|
||||
<label class="form-label">名称</label>
|
||||
<input v-model="form.name" class="input" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<label class="form-label">描述</label>
|
||||
<textarea v-model="form.description" class="textarea" />
|
||||
</view>
|
||||
<view class="form-actions">
|
||||
<button class="btn btn-primary" @click="handleSubmit">保存</button>
|
||||
<button class="btn btn-default" @click="handleCancel">取消</button>
|
||||
</view>
|
||||
</view>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📦 组件库简化版
|
||||
|
||||
### 基础组件类别
|
||||
|
||||
| 类别 | 组件 | 用途 |
|
||||
| -------- | -------------------------------------- | -------- |
|
||||
| **输入** | Button, Input, Select, Checkbox, Radio | 用户交互 |
|
||||
| **容器** | Card, Modal, Pagination | 页面布局 |
|
||||
| **表单** | Form, FormItem, Upload | 数据采集 |
|
||||
| **展示** | Table, List, Badge, Tag | 数据展示 |
|
||||
| **反馈** | Message, Alert, Loading | 用户反馈 |
|
||||
|
||||
### 最常用的 3 个组件
|
||||
|
||||
#### 1. Button（按钮）
|
||||
|
||||
```uvue
|
||||
<Button type="primary" label="创建" @click="handleCreate" />
|
||||
<Button type="default" label="编辑" />
|
||||
<Button type="danger" :disabled="true" label="删除" />
|
||||
```
|
||||
|
||||
#### 2. Input（输入框）
|
||||
|
||||
```uvue
|
||||
<input v-model="value" class="input" placeholder="请输入" />
|
||||
```
|
||||
|
||||
#### 3. Modal（模态框）
|
||||
|
||||
```uvue
|
||||
<view v-if="visible" class="modal">
|
||||
<text>确定删除吗？</text>
|
||||
<button @click="handleConfirm">确定</button>
|
||||
<button @click="visible = false">取消</button>
|
||||
</view>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ 代码审查检查清单（10 秒版）
|
||||
|
||||
发代码前，问自己：
|
||||
|
||||
- [ ] 有没有硬编码颜色值？ (应该用 $color-\* 变量)
|
||||
- [ ] 有没有硬编码尺寸？ (应该用 $space-\* 变量)
|
||||
- [ ] 有没有硬编码圆角？ (应该用 $radius-\* 变量)
|
||||
- [ ] 有没有 console.log？ (应该删除)
|
||||
- [ ] 有没有测试通过？ (应该运行测试)
|
||||
- [ ] 有没有写注释？ (复杂逻辑应该有注释)
|
||||
|
||||
如果都检查过了，可以提交 PR！
|
||||
|
||||
---
|
||||
|
||||
## 🚀 常见任务 (30 秒版)
|
||||
|
||||
### 任务 1: 添加一个新页面
|
||||
|
||||
1. 复制 docs/PAGE_STRUCTURE_SPECIFICATION.md 中的模板
|
||||
2. 修改标题和字段
|
||||
3. 替换 API 调用
|
||||
4. 检查变量使用
|
||||
5. 完成！
|
||||
|
||||
### 任务 2: 使用一个新颜色
|
||||
|
||||
1. 打开 uni.scss
|
||||
2. 找 `$color-*` 或 `$text-*` 或 `$background-*`
|
||||
3. 在样式中使用该变量
|
||||
4. 完成！
|
||||
|
||||
### 任务 3: 调整间距
|
||||
|
||||
1. 打开 uni.scss
|
||||
2. 找 `$space-*` 变量
|
||||
3. 选择合适的间距级别
|
||||
4. 完成！
|
||||
|
||||
---
|
||||
|
||||
## 📞 遇到问题？
|
||||
|
||||
### Q: 我想要的颜色或尺寸没有预定义怎么办？
|
||||
|
||||
**A**:
|
||||
|
||||
1. 首先检查 uni.scss，看看有没有接近的
|
||||
2. 如果真的没有，先用最接近的顶替
|
||||
3. 然后提一个 Issue 讨论是否需要添加新的变量
|
||||
|
||||
### Q: 能不能硬编码这个值？
|
||||
|
||||
**A**: 不能。所有值都应该来自变量。如果没有合适的变量，应该添加它。
|
||||
|
||||
### Q: 页面结构能不能和模板不一样？
|
||||
|
||||
**A**: 尽量不要。统一的结构让用户体验更好，维护也更简单。
|
||||
|
||||
### Q: 我想创建一个新组件，应该放在哪里？
|
||||
|
||||
**A**:
|
||||
|
||||
- 基础组件 → `components/basic/`
|
||||
- 容器组件 → `components/container/`
|
||||
- 表单组件 → `components/form/`
|
||||
- 数据展示 → `components/data/`
|
||||
- 反馈组件 → `components/feedback/`
|
||||
- 导航组件 → `components/navigation/`
|
||||
|
||||
---
|
||||
|
||||
## 📚 详细文档
|
||||
|
||||
需要更多信息？查看完整文档：
|
||||
|
||||
| 需求 | 文档 |
|
||||
| -------- | ------------------------------- |
|
||||
| 整体了解 | README.md |
|
||||
| 样式规范 | STYLE_SPECIFICATION.md |
|
||||
| 页面模板 | PAGE_STRUCTURE_SPECIFICATION.md |
|
||||
| 组件规范 | COMPONENT_SPECIFICATION.md |
|
||||
| 工程规范 | ENGINEERING_BEST_PRACTICES.md |
|
||||
| 项目计划 | IMPLEMENTATION_ROADMAP.md |
|
||||
|
||||
---
|
||||
|
||||
## ⚡ 速记
|
||||
|
||||
```
|
||||
记住这 5 点：
|
||||
|
||||
1️⃣ 颜色来自变量 → $primary-color, $text-primary, ...
|
||||
2️⃣ 间距来自变量 → $space, $space-md, ...
|
||||
3️⃣ 圆角来自变量 → $radius, $radius-sm, ...
|
||||
4️⃣ 页面遵循模板 → 使用 ListPage/FormPage/DetailPage 模板
|
||||
5️⃣ 组件有分类 → 放在 basic/container/form/data/feedback/navigation
|
||||
|
||||
违反任何一条都需要代码审查！
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 下一步
|
||||
|
||||
1. 打开 docs/README.md 深入了解
|
||||
2. 选择一个简单任务开始（如添加新页面）
|
||||
3. 遵循规范编写代码
|
||||
4. 提交 PR 进行审查
|
||||
5. 完成！
|
||||
|
||||
---
|
||||
|
||||
**创建日期**: 2026-01-31
|
||||
**版本**: 1.0
|
||||
**用时**: 仅需 5-10 分钟阅读本卡片即可快速上手！
|
||||
Reference in New Issue
Block a user