335 lines
6.0 KiB
Markdown
335 lines
6.0 KiB
Markdown
---
|
||
inclusion: always
|
||
---
|
||
|
||
# MiAssessment 设计系统规则
|
||
|
||
本文档定义了学业邑规划小程序的设计系统规范，用于 Figma 设计稿到代码的转换。
|
||
|
||
## 1. 技术栈
|
||
|
||
- **框架**: UniApp + Vue 3
|
||
- **样式**: SCSS
|
||
- **状态管理**: Pinia
|
||
- **构建工具**: Vite
|
||
|
||
## 2. 设计令牌 (Design Tokens)
|
||
|
||
### 2.1 颜色系统
|
||
|
||
```scss
|
||
// 主色调
|
||
$primary-color: #4A90E2;
|
||
$primary-light: #6BA3E8;
|
||
$primary-dark: #3A7BC8;
|
||
|
||
// 功能色
|
||
$success-color: #52C41A;
|
||
$warning-color: #FAAD14;
|
||
$error-color: #FF4D4F;
|
||
$info-color: #1890FF;
|
||
|
||
// 文字颜色
|
||
$text-color: #333333;
|
||
$text-secondary: #666666;
|
||
$text-placeholder: #999999;
|
||
$text-disabled: #CCCCCC;
|
||
$text-white: #FFFFFF;
|
||
|
||
// 背景颜色
|
||
$bg-color: #F5F5F5;
|
||
$bg-white: #FFFFFF;
|
||
$bg-gray: #F8F8F8;
|
||
|
||
// 边框颜色
|
||
$border-color: #E8E8E8;
|
||
$border-light: #F0F0F0;
|
||
```
|
||
|
||
### 2.2 间距系统
|
||
|
||
```scss
|
||
$spacing-xs: 8rpx; // 4px
|
||
$spacing-sm: 16rpx; // 8px
|
||
$spacing-md: 24rpx; // 12px
|
||
$spacing-lg: 32rpx; // 16px
|
||
$spacing-xl: 48rpx; // 24px
|
||
```
|
||
|
||
### 2.3 字体系统
|
||
|
||
```scss
|
||
$font-size-xs: 22rpx; // 11px
|
||
$font-size-sm: 24rpx; // 12px
|
||
$font-size-md: 28rpx; // 14px
|
||
$font-size-lg: 32rpx; // 16px
|
||
$font-size-xl: 36rpx; // 18px
|
||
$font-size-xxl: 40rpx; // 20px
|
||
|
||
$font-weight-normal: 400;
|
||
$font-weight-medium: 500;
|
||
$font-weight-bold: 600;
|
||
```
|
||
|
||
### 2.4 圆角系统
|
||
|
||
```scss
|
||
$border-radius-xs: 4rpx;
|
||
$border-radius-sm: 8rpx;
|
||
$border-radius-md: 12rpx;
|
||
$border-radius-lg: 16rpx;
|
||
$border-radius-xl: 24rpx;
|
||
$border-radius-round: 9999rpx;
|
||
```
|
||
|
||
### 2.5 阴影系统
|
||
|
||
```scss
|
||
$shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
||
$shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||
$shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
|
||
```
|
||
|
||
## 3. 组件库
|
||
|
||
### 3.1 可用组件
|
||
|
||
| 组件 | 路径 | 用途 |
|
||
|------|------|------|
|
||
| Popup | `@/components/Popup/index.vue` | 弹窗组件 |
|
||
| Empty | `@/components/Empty/index.vue` | 空状态组件 |
|
||
| Loading | `@/components/Loading/index.vue` | 加载组件 |
|
||
| EmojiPicker | `@/components/EmojiPicker/index.vue` | 表情选择器 |
|
||
| VoiceRecorder | `@/components/VoiceRecorder/index.vue` | 语音录制组件 |
|
||
| Navbar | `@/components/Navbar/index.vue` | 自定义导航栏 |
|
||
|
||
### 3.2 组件使用示例
|
||
|
||
```vue
|
||
<script setup>
|
||
import { Popup, Empty, Loading, Navbar } from '@/components'
|
||
</script>
|
||
```
|
||
|
||
## 4. 样式工具类
|
||
|
||
项目提供了丰富的工具类，位于 `@/styles/common.scss`：
|
||
|
||
### 4.1 Flex 布局
|
||
|
||
```scss
|
||
.flex, .flex-row, .flex-col
|
||
.flex-wrap, .flex-1, .flex-shrink-0
|
||
.items-center, .items-start, .items-end
|
||
.justify-center, .justify-between, .justify-around, .justify-end
|
||
```
|
||
|
||
### 4.2 文字样式
|
||
|
||
```scss
|
||
.text-xs, .text-sm, .text-md, .text-lg, .text-xl
|
||
.text-primary, .text-secondary, .text-placeholder, .text-white
|
||
.text-success, .text-warning, .text-error
|
||
.text-center, .text-left, .text-right
|
||
.font-medium, .font-bold
|
||
.text-ellipsis, .text-ellipsis-2
|
||
```
|
||
|
||
### 4.3 间距样式
|
||
|
||
```scss
|
||
// Margin: .m-xs, .mt-sm, .mb-md, .ml-lg, .mr-xl
|
||
// Padding: .p-xs, .pt-sm, .pb-md, .pl-lg, .pr-xl
|
||
```
|
||
|
||
### 4.4 按钮样式
|
||
|
||
```scss
|
||
.btn, .btn-primary, .btn-outline, .btn-disabled
|
||
.btn-sm, .btn-lg
|
||
```
|
||
|
||
### 4.5 卡片和边框
|
||
|
||
```scss
|
||
.card, .border, .border-top, .border-bottom
|
||
.rounded-sm, .rounded-md, .rounded-lg, .rounded-full
|
||
```
|
||
|
||
## 5. Figma 转换规则
|
||
|
||
### 5.1 颜色映射
|
||
|
||
| Figma 颜色 | 项目变量 |
|
||
|------------|----------|
|
||
| #4A90E2 | $primary-color |
|
||
| #333333 | $text-color |
|
||
| #666666 | $text-secondary |
|
||
| #999999 | $text-placeholder |
|
||
| #F5F5F5 | $bg-color |
|
||
| #FFFFFF | $bg-white |
|
||
|
||
### 5.2 单位转换
|
||
|
||
- Figma px → UniApp rpx (1px = 2rpx)
|
||
- 使用 rpx 作为主要单位，确保多端适配
|
||
|
||
### 5.3 代码风格
|
||
|
||
```vue
|
||
<script setup>
|
||
/**
|
||
* 组件描述
|
||
*/
|
||
import { ref, onMounted } from 'vue'
|
||
|
||
// Props
|
||
const props = defineProps({
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
})
|
||
|
||
// Emits
|
||
const emit = defineEmits(['click'])
|
||
|
||
// State
|
||
const loading = ref(false)
|
||
|
||
// Methods
|
||
function handleClick() {
|
||
emit('click')
|
||
}
|
||
|
||
// Lifecycle
|
||
onMounted(() => {
|
||
// 初始化逻辑
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view class="component-name">
|
||
<!-- 内容 -->
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
@import '@/styles/variables.scss';
|
||
|
||
.component-name {
|
||
// 样式
|
||
}
|
||
</style>
|
||
```
|
||
|
||
## 6. 图标和资源
|
||
|
||
### 6.1 静态资源路径
|
||
|
||
- 图标: `@/static/`
|
||
- TabBar 图标: `@/static/tabbar/`
|
||
- 切图资源: `docs/切图/`
|
||
|
||
### 6.2 图片使用
|
||
|
||
```vue
|
||
<image src="/static/logo.png" mode="aspectFit" />
|
||
```
|
||
|
||
## 7. 页面结构
|
||
|
||
### 7.1 页面目录
|
||
|
||
```
|
||
uniapp/pages/
|
||
├── index/ # 首页
|
||
├── mine/ # 我的
|
||
├── message/ # 消息
|
||
├── login/ # 登录
|
||
├── assessment/ # 测评相关
|
||
├── order/ # 订单相关
|
||
├── invite/ # 邀请
|
||
└── ...
|
||
```
|
||
|
||
### 7.2 页面模板
|
||
|
||
```vue
|
||
<script setup>
|
||
/**
|
||
* 页面名称
|
||
*/
|
||
import { ref, onMounted } from 'vue'
|
||
import { Navbar } from '@/components'
|
||
|
||
// State
|
||
const loading = ref(false)
|
||
const dataList = ref([])
|
||
|
||
// Methods
|
||
async function fetchData() {
|
||
loading.value = true
|
||
try {
|
||
// API 调用
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// Lifecycle
|
||
onMounted(() => {
|
||
fetchData()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view class="page-container">
|
||
<Navbar title="页面标题" />
|
||
|
||
<view class="page-content">
|
||
<!-- 页面内容 -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
@import '@/styles/variables.scss';
|
||
|
||
.page-container {
|
||
min-height: 100vh;
|
||
background-color: $bg-color;
|
||
}
|
||
|
||
.page-content {
|
||
padding: $spacing-lg;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
## 8. API 请求
|
||
|
||
### 8.1 请求封装
|
||
|
||
```javascript
|
||
import { get, post } from '@/api/request'
|
||
|
||
// GET 请求
|
||
export function getList(params) {
|
||
return get('/api/list', params)
|
||
}
|
||
|
||
// POST 请求
|
||
export function createItem(data) {
|
||
return post('/api/create', data)
|
||
}
|
||
```
|
||
|
||
## 9. 注意事项
|
||
|
||
1. **优先使用项目变量**: 不要硬编码颜色、间距等值
|
||
2. **复用现有组件**: 检查 `@/components` 是否有可用组件
|
||
3. **遵循命名规范**: 使用 kebab-case 命名 CSS 类
|
||
4. **响应式设计**: 使用 rpx 单位确保多端适配
|
||
5. **代码注释**: 为复杂逻辑添加中文注释
|