# 共创空间会议室预约系统 - 设计规范

## 1. 品牌标识

| 属性 | 值 |
|------|------|
| 产品名称 | 共创空间 |
| 产品定位 | 会议室预约系统（小程序用户端 + PC管理端） |
| 品牌主色 | `#1677FF` 蓝色 |

## 2. 色彩系统

### 主色调

```
--primary:       #1677FF   主色/按钮/激活态
--primary-light: #E8F4FF   浅色背景/选中态
```

### 功能色

```
--success:  #52C41A   成功/可预约/已完成
--warning:  #FAAD14   警告/待确认
--danger:   #FF4D4F   错误/已取消/危险操作
--orange:   #FF6B00   价格强调
```

### 中性色

```
--text-primary:   #1A1A1A  主文本/标题
--text-secondary: #666666  次要文本/正文
--text-muted:     #999999  辅助文本/占位
--border:         #EBEBEB  边框/分割线
--bg:             #F7F8FA  页面背景（小程序）
--bg-admin:       #F5F5F5  页面背景（管理端）
--white:          #FFFFFF  卡片背景
```

## 3. 图标风格

### 原则

- **全部使用 SVG 线性图标**，不用 emoji
- 统一 `stroke-width: 1.8`，`stroke-linecap: round`，`stroke-linejoin: round`
- `fill: none`（纯描边风格）
- 尺寸根据场景灵活：Tab 图标 22px，卡片内小图标 14px，快捷入口 18px

### 图标映射

| 语义 | SVG viewBox | 说明 |
|------|------------|------|
| 首页/房屋 | `M3 10.5L12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v6H5a1 1 0 0 1-1-1v-9.5z` | 房屋轮廓 |
| 日历 | `<rect x="3" y="4" width="18" height="18" rx="2"/>` + 日期标记线 + 日期点 | 日历网格 |
| 人物 | `<circle cx="12" cy="8" r="4"/>` + `<path d="M20 21a8 8 0 1 0-16 0"/>` | 用户头像 |
| 位置/地图 | `<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>` | 定位标记 |
| 人数/团队 | 多人轮廓组合 | 用户群体 |
| 屏幕/投影 | `<rect x="2" y="3" width="20" height="14" rx="2"/>` + 支架 | 显示器/投影 |
| 文件/文档 | `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>` | 文件纸张 |
| 星星/会员 | `<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>` | 星星徽章 |

### 使用示例

```html
<!-- 小图标（14px，用在卡片内） -->
<svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round">
  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
  <circle cx="12" cy="10" r="3"/>
</svg>

<!-- Tab 图标（22px） -->
<svg viewBox="0 0 24 24" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 10.5L12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v6H5a1 1 0 0 1-1-1v-9.5z"/>
</svg>
```

## 4. 排版

| 场景 | 字号 | 字重 |
|------|------|------|
| 页面标题 | 20px | 700 |
| 卡片标题 | 16-18px | 600 |
| 正文 | 14px | 400 |
| 辅助信息 | 12-13px | 400 |
| Tab 文字 | 10px | 400 |

## 5. 间距与圆角

### 圆角

```
按钮/大卡片: 12px
小按钮/输入框: 8px
标签/状态: 4-10px（胶囊形）
头像: 50%（圆形）
```

### 间距

```
卡片内边距: 12-16px
卡片间距: 12px
列表项间距: 12-16px
```

### 阴影

```
卡片: 0 1px 4px rgba(0,0,0,0.04)
主按钮: 0 4px 16px rgba(22,119,255,0.3)
悬浮卡片: 0 4px 12px rgba(0,0,0,0.08)
```

## 6. 布局

### 小程序
- 屏幕尺寸: 375 x 812px（iPhone X 基准）
- 底部 Tab 栏: 83px（含安全区域）
- 导航栏: 44px + 状态栏 44px

### PC 管理端
- 屏幕尺寸: 1440 x 900px
- 左侧导航: 220px 宽，深色背景 `#001529`
- 顶部栏: 64px 高，白色
- 内容区: 24px 内边距

## 7. 组件样式

### 按钮

```
主按钮: #1677FF 背景，白色文字，圆角 22px（大）/ 6px（小）
次按钮: 白色背景，border 1px solid #EBEBEB
危险按钮: 白色背景，红色文字，浅红边框
```

### 状态标签

```
已确认: #E8F4FF 背景 + #1677FF 文字
待确认: #FFF7E6 背景 + #FF6B00 文字
已完成: #F6FFED 背景 + #52C41A 文字
已取消: #F5F5F5 背景 + #999999 文字
```

## 8. 图片

- 会议室图片使用 Unsplash 真实照片
- URL 格式: `https://images.unsplash.com/photo-{id}?w={width}&q=80`
- 列表页缩略图宽度 400-600px