dm-design/商家端web/样式规范文档.md

# 商家端Web页面样式规范文档

## 1. 全局样式规范

### 1.1 基础重置
```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
```

### 1.2 字体系统
- **字体家族**: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif`
- **基础文字颜色**: `#333`
- **次要文字颜色**: `#666`
- **标题文字颜色**: `#262626`

### 1.3 背景颜色
- **页面背景**: `#f5f5f5`
- **卡片/容器背景**: `white`
- **次级背景**: `#fafafa`
- **表格行悬停背景**: `#f8f9fa`
- **嵌套区域背景**: `#f8f9fa`

### 1.4 主题色系
- **主色**: `#1890ff`
- **主色悬停**: `#40a9ff`
- **成功色**: `#52c41a`
- **警告色**: `#fa8c16`
- **错误色**: `#ff4d4f`

## 2. 布局规范

### 2.1 容器布局
```css
.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}
```

### 2.2 卡片/模块间距
- **模块底部间距**: `16px` (margin-bottom)
- **模块内边距**: `24px` (padding)
- **小卡片内边距**: `20px`

### 2.3 圆角规范
- **大卡片圆角**: `8px`
- **小组件圆角**: `6px`
- **微小组件圆角**: `4px`

### 2.4 阴影规范
- **标准卡片阴影**: `0 2px 8px rgba(0, 0, 0, 0.1)`

## 3. 页面头部样式

### 3.1 页面标题区域
```css
.page-header {
    background: white;
    padding: 16px 24px;
    margin-bottom: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-title {
    font-size: 24px;
    font-weight: 600;
    color: #262626;
}
```

## 4. 搜索/筛选区域样式

### 4.1 搜索区域容器
```css
.search-section {
    background: white;
    padding: 24px;
    margin-bottom: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
```

### 4.2 表单布局
```css
.search-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.form-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
```

### 4.3 表单元素样式
```css
.form-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.form-input {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.form-input:focus {
    outline: none;
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
```

### 4.4 日期范围选择器
```css
.date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-range .form-input {
    flex: 1;
}
```

## 5. 按钮样式规范

### 5.1 按钮基础样式
```css
.btn {
    height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
```

### 5.2 主要按钮
```css
.btn-primary {
    background: #1890ff;
    color: white;
}

.btn-primary:hover {
    background: #40a9ff;
}
```

### 5.3 次要按钮
```css
.btn-default {
    background: white;
    color: #666;
    border: 1px solid #ddd;
}

.btn-default:hover {
    border-color: #1890ff;
    color: #1890ff;
}
```

### 5.4 按钮组
```css
.button-group {
    display: flex;
    gap: 12px;
}
```

## 6. 统计数据区域样式

### 6.1 统计区域容器
```css
.stats-section {
    background: white;
    padding: 24px;
    margin-bottom: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
```

### 6.2 统计网格布局
```css
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
```

### 6.3 统计卡片样式
```css
.stat-item {
    text-align: center;
    padding: 20px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    background: #fafafa;
}

.stat-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 24px;
    font-weight: 600;
    color: #1890ff;
}
```

## 7. 标签页(Tabs)样式

### 7.1 标签页容器
```css
.tabs-section {
    background: white;
    padding: 0 24px;
    margin-bottom: 16px;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
```

### 7.2 标签页样式
```css
.tabs {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
}

.tab {
    padding: 16px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    color: #666;
    font-size: 14px;
    transition: all 0.3s;
}

.tab.active {
    color: #1890ff;
    border-bottom-color: #1890ff;
}

.tab:hover {
    color: #1890ff;
}
```

## 8. 表格样式规范

### 8.1 表格容器
```css
.table-section {
    background: white;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.table-wrapper {
    overflow-x: auto;
}
```

### 8.2 主表格样式
```css
.order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.order-table th {
    background: #fafafa;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #666;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}

.order-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f9f9f9;
    vertical-align: top;
}

.order-table tbody tr:hover {
    background: #f8f9fa;
}
```

### 8.3 嵌套表格样式
```css
.nested-table-wrapper {
    padding: 16px;
    background: #f8f9fa;
}

.sub-table {
    width: 100%;
    margin: 8px 0;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
}

.sub-table th,
.sub-table td {
    padding: 8px;
    font-size: 12px;
    border-bottom: 1px solid #f9f9f9;
}

.sub-table th {
    background: #f5f5f5;
}
```

### 8.4 展开行样式
```css
.expandable-row {
    background: #f8f9fa;
}

.expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.expand-btn:hover {
    background: #e6f7ff;
}
```

### 8.5 商品图片样式
```css
.product-image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
}
```

## 9. 状态标签样式

### 9.1 状态标签基础样式
```css
.status-tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}
```

### 9.2 状态颜色变体
```css
/* 已支付/已完成 - 绿色 */
.status-paid,
.status-completed {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

/* 待处理 - 橙色 */
.status-pending {
    background: #fff7e6;
    color: #fa8c16;
    border: 1px solid #ffd591;
}

/* 取消 - 红色 */
.status-cancelled {
    background: #fff2f0;
    color: #ff4d4f;
    border: 1px solid #ffb3b3;
}
```

## 10. 分页组件样式

### 10.1 分页容器
```css
.pagination {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-top: 1px solid #f0f0f0;
}
```

### 10.2 分页信息
```css
.pagination-info {
    color: #666;
    font-size: 14px;
}
```

### 10.3 分页控制区域
```css
.pagination-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}
```

### 10.4 每页条数选择器
```css
.page-size-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-size-select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}
```

### 10.5 页码列表
```css
.page-list {
    display: flex;
    gap: 4px;
    list-style: none;
}

.page-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

.page-item:hover {
    border-color: #1890ff;
    color: #1890ff;
}

.page-item.active {
    background: #1890ff;
    color: white;
    border-color: #1890ff;
}

.page-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
```

### 10.6 页码跳转
```css
.page-jump {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
}

.page-jump input {
    width: 60px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
}
```

## 11. 边框和分隔线

### 11.1 边框颜色规范
- **浅灰边框**: `#f0f0f0`
- **中灰边框**: `#ddd`
- **极浅边框**: `#f9f9f9`

### 11.2 常用边框样式
```css
border: 1px solid #f0f0f0;  /* 主要边框 */
border: 1px solid #ddd;     /* 输入框边框 */
border-bottom: 1px solid #f0f0f0;  /* 分隔线 */
```

## 12. 过渡动画

### 12.1 标准过渡
```css
transition: all 0.3s;
```

### 12.2 应用场景
- 按钮悬停效果
- 标签页切换
- 页码项交互
- 边框颜色变化

## 13. 响应式布局

### 13.1 栅格系统
- 使用 `grid-template-columns: repeat(auto-fit, minmax(Xpx, 1fr))` 实现自适应布局
- 搜索表单最小宽度: `250px`
- 统计卡片最小宽度: `200px`

### 13.2 间距系统
- **超小间距**: `4px`
- **小间距**: `8px`
- **中等间距**: `12px` / `16px`
- **大间距**: `20px` / `24px`

## 14. 字号规范

- **大标题**: `24px` (font-weight: 600)
- **统计数值**: `24px` (font-weight: 600)
- **正文/表单**: `14px`
- **子表格**: `12px`
- **标签**: `12px`

## 15. 使用建议

### 15.1 页面结构顺序
1. 页面标题区域 (page-header)
2. 搜索/筛选区域 (search-section)
3. 统计数据区域 (stats-section) - 可选
4. 标签页区域 (tabs-section) - 可选
5. 表格区域 (table-section)
6. 分页区域 (pagination)

### 15.2 色彩使用原则
- 主色 `#1890ff` 用于主要操作按钮、激活状态、链接
- 成功色 `#52c41a` 用于完成/成功状态
- 警告色 `#fa8c16` 用于待处理状态
- 错误色 `#ff4d4f` 用于取消/错误状态
- 保持页面色彩统一,避免过多颜色

### 15.3 间距使用原则
- 模块间使用 `16px` 间距
- 模块内使用 `24px` 内边距
- 表单元素间使用 `16px` 间距
- 小组件间使用 `8px` 或 `12px` 间距

### 15.4 交互反馈
- 所有可点击元素添加 `cursor: pointer`
- 悬停状态使用颜色或背景色变化
- 焦点状态显示蓝色边框和阴影
- 禁用状态降低透明度至 `0.5`