diff --git a/商家端web/样式规范文档.md b/商家端web/样式规范文档.md
new file mode 100644
index 0000000..0c5be4f
--- /dev/null
+++ b/商家端web/样式规范文档.md
@@ -0,0 +1,598 @@
+# 商家端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`
diff --git a/商家端web/样式设计.md b/商家端web/样式设计.md
deleted file mode 100644
index 2560944..0000000
--- a/商家端web/样式设计.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# 样式设计提示词
-
-## 整体设计风格
-创建一个现代化的企业级管理系统界面，采用简洁清晰的设计风格，注重用户体验和视觉层次。
-
-## 颜色方案
-
-### 主色调
-- **头部背景色**: `rgb(9, 84, 43)` - 深绿色，体现专业稳重
-- **页面背景色**: `#f5f5f5` - 浅灰色，减少视觉疲劳
-
-### 功能色彩
-- **主要操作色**: `#1890ff` - 蓝色系
-  - 悬停状态: `#40a9ff`
-  - 选中状态: `#e6f7ff`（背景）
-- **成功色**: `#52c41a` - 绿色
-  - 悬停状态: `#73d13d`
-- **警告色**: `#faad14` - 橙黄色
-  - 悬停状态: `#ffc53d`
-
-### 辅助色彩
-- **表单背景**: `#fafafa` - 极浅灰
-- **边框色**: `#d9d9d9`、`#e8e8e8`
-- **文本色**: `#333` - 深灰色
-- **白色**: `#fff` - 纯白色用于卡片背景
-
-## 布局特点
-
-### 页面结构
-- 全屏布局：`width: 100%`, `height: 100vh`
-- 顶部固定头部区域
-- 主内容区域可滚动：`overflow-y: auto`
-
-### 间距系统
-- 大间距: `30px` (页面边距、区块间距)
-- 中间距: `20px` (表单元素间距)
-- 小间距: `10px`、`5px` (按钮、图标间距)
-
-## 组件设计
-
-### 按钮样式
-```css
-.btn {
-    padding: 10px 20px;
-    border-radius: 5px;
-    font-size: 14px;
-    font-weight: 500;
-    transition: all 0.3s ease;
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-}
-```
-
-### 表单元素
-- **输入框**: 圆角 `4px`，边框 `#d9d9d9`
-- **聚焦效果**: 蓝色边框 + 阴影效果
-- **标签**: 字重 `500`，深灰色 `#333`
-
-## 交互效果
-
-### 动画过渡
-- **通用过渡**: `transition: all 0.3s ease`
-- **按钮悬停**: 向上移动 `translateY(-2px)`
-- **展开动画**: 淡入效果 `fadeIn 0.3s ease-in-out`
-
-### 视觉反馈
-- **悬停状态**: 颜色变化 + 轻微位移
-- **选中状态**: 背景色变化 + 边框高亮
-- **加载状态**: 渐变动画效果
-
-## 响应式设计
-- **移动端适配**: `@media (max-width: 768px)`
-- **布局调整**: 头部垂直排列，表单单列布局
-- **间距优化**: 减少边距和字体大小
-
-## 字体系统
-```css
-font-family: "Helvetica Neue", Helvetica, "PingFang SC", 
-             "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, 
-             Arial, sans-serif;
-```
-
-## 设计原则
-1. **一致性**: 统一的颜色、字体、间距系统
-2. **层次性**: 清晰的信息层级和视觉引导
-3. **易用性**: 直观的操作反馈和状态提示
-4. **专业性**: 企业级应用的稳重可靠感
-5. **响应性**: 适配不同设备和屏幕尺寸
-
-## 关键特色
-- 深绿色头部体现企业稳重感
-- 蓝色系交互元素提供现代感
-- 细腻的阴影和过渡效果
\ No newline at end of file