增加样式提示词

商家端web/样式设计提示词.md

@@ -0,0 +1,94 @@
+# 样式设计提示词
+
+## 整体设计风格
+创建一个现代化的企业级管理系统界面，采用简洁清晰的设计风格，注重用户体验和视觉层次。
+
+## 颜色方案
+
+### 主色调
+- **头部背景色**: `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. **响应性**: 适配不同设备和屏幕尺寸
+
+## 关键特色
+- 深绿色头部体现企业稳重感
+- 蓝色系交互元素提供现代感
+- 细腻的阴影和过渡效果