mi-assessment/.kiro/steering/design-system.md

inclusion
always

MiAssessment 设计系统规则

本文档定义了学业邑规划小程序的设计系统规范，用于 Figma 设计稿到代码的转换。

1. 技术栈

• 框架: UniApp + Vue 3
• 样式: SCSS
• 状态管理: Pinia
• 构建工具: Vite

2. 设计令牌 (Design Tokens)

2.1 颜色系统

// 主色调
$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 间距系统

$spacing-xs: 8rpx;   // 4px
$spacing-sm: 16rpx;  // 8px
$spacing-md: 24rpx;  // 12px
$spacing-lg: 32rpx;  // 16px
$spacing-xl: 48rpx;  // 24px

2.3 字体系统

$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 圆角系统

$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 阴影系统

$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 组件使用示例

<script setup>
import { Popup, Empty, Loading, Navbar } from '@/components'
</script>

4. 样式工具类

项目提供了丰富的工具类，位于 @/styles/common.scss：

4.1 Flex 布局

.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 文字样式

.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 间距样式

// Margin: .m-xs, .mt-sm, .mb-md, .ml-lg, .mr-xl
// Padding: .p-xs, .pt-sm, .pb-md, .pl-lg, .pr-xl

4.4 按钮样式

.btn, .btn-primary, .btn-outline, .btn-disabled
.btn-sm, .btn-lg

4.5 卡片和边框

.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 代码风格

<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 图片使用

<image src="/static/logo.png" mode="aspectFit" />

7. 页面结构

7.1 页面目录

uniapp/pages/
├── index/          # 首页
├── mine/           # 我的
├── message/        # 消息
├── login/          # 登录
├── assessment/     # 测评相关
├── order/          # 订单相关
├── invite/         # 邀请
└── ...

7.2 页面模板

<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 请求封装

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. 代码注释: 为复杂逻辑添加中文注释