xsl/ocean_project_manager

Fork 0

Files

T

xsl f33a902c95 save code

2026-01-25 00:02:54 +08:00

13 KiB

Raw Blame History

UI设计规范文档

1. 设计系统概述

本系统采用Ant Design风格，简洁专业，适合企业级应用。

2. 颜色系统

2.1 主色调

/* 主品牌色 - 蓝色 */
--primary-color: #1890ff;

/* 功能色 */
--success-color: #52c41a;  /* 成功/进行中 */
--warning-color: #fa8c16;  /* 警告/暂停 */
--error-color: #ff4d4f;    /* 错误/删除 */
--info-color: #1890ff;     /* 信息/新建 */

2.2 中性色

--text-primary: #333333;   /* 主要文字 */
--text-secondary: #666666; /* 次要文字 */
--text-disabled: #999999;   /* 禁用文字 */
--border-color: #e8e8e8;   /* 边框颜色 */
--divider-color: #f0f0f0;  /* 分割线颜色 */

2.3 背景色

--layout-header-bg: #001529;  /* 顶部导航背景 */
--layout-sidebar-bg: #ffffff; /* 侧边栏背景 */
--layout-content-bg: #f0f2f5; /* 内容区背景 */
--component-bg: #ffffff;      /* 组件背景 */

3. 状态标签颜色

状态	背景色	文字颜色	适用场景
新建	#e6f7ff	#1890ff	项目初始状态
进行中	#f6ffed	#52c41a	项目执行中
已完成	#f5f5f5	#999999	项目完成
已暂停	#fff7e6	#fa8c16	项目暂停
已取消	#fff1f0	#f5222d	项目取消
正常	#f6ffed	#52c41a	用户状态正常
禁用	#f5f5f5	#999999	用户状态禁用
管理员	#fff1f0	#f5222d	管理员角色
市场部	#e6f7ff	#1890ff	市场部角色
其他部门	#e6f7ff	#1890ff	其他部门角色

4. 字体系统

/* 字体家族 */
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

/* 字体大小 */
--font-size-base: 14px;
--font-size-lg: 16px;
--font-size-sm: 12px;
--font-size-title: 18px;
--font-size-heading: 24px;

/* 字重 */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

5. 间距系统

--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 24px;
--spacing-xxl: 32px;

6. 组件样式

6.1 按钮

/* 主按钮 */
.btn-primary {
  background-color: #1890ff;
  color: #ffffff;
  border: none;
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

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

/* 默认按钮 */
.btn-default {
  background-color: #ffffff;
  color: #666666;
  border: 1px solid #d9d9d9;
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

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

/* 链接按钮 */
.btn-link {
  background: none;
  color: #1890ff;
  border: none;
  padding: 0 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-link:hover {
  color: #40a9ff;
}

/* 危险按钮 */
.btn-danger {
  background: none;
  color: #ff4d4f;
  border: none;
  padding: 0 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-danger:hover {
  color: #ff7875;
}

6.2 输入框

.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  color: #333333;
  transition: all 0.3s;
}

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

.form-input::placeholder {
  color: #cccccc;
}

6.3 选择框

.form-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  color: #333333;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.3s;
}

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

6.4 卡片

.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 12px;
}

6.5 表格

.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead th {
  background: #fafafa;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #333333;
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
}

.table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #e8e8e8;
  color: #666666;
  font-size: 14px;
}

.table tbody tr:hover {
  background: #fafafa;
}

6.6 标签

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
  line-height: 1.5;
}

.tag-blue {
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  color: #1890ff;
}

.tag-green {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  color: #52c41a;
}

.tag-orange {
  background: #fff7e6;
  border: 1px solid #ffd591;
  color: #fa8c16;
}

.tag-red {
  background: #fff1f0;
  border: 1px solid #ffa39e;
  color: #f5222d;
}

.tag-gray {
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  color: #999999;
}

6.7 头像

.avatar {
  width: 32px;
  height: 32px;
  background: #1890ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
}

.avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 24px;
}

7. 布局系统

7.1 整体布局

┌─────────────────────────────────────────┐
│           Header (顶部导航)               │
│           #001529                        │
├──────────┬──────────────────────────────┤
│          │                              │
│ Sidebar  │        Content              │
│ (侧边栏)  │       (内容区)               │
│ #ffffff  │      #f0f2f5                 │
│ 256px    │                              │
│          │                              │
└──────────┴──────────────────────────────┘

7.2 顶部导航栏

.layout-header {
  height: 64px;
  background: #001529;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

7.3 侧边栏

.layout-sider {
  width: 256px;
  background: #ffffff;
  border-right: 1px solid #e8e8e8;
  position: fixed;
  left: 64px;
  top: 64px;
  bottom: 0;
  overflow-y: auto;
}

/* 菜单项 */
.menu-item {
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666666;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.3s;
}

.menu-item:hover {
  background: #e6f7ff;
  color: #1890ff;
}

.menu-item.active {
  background: #e6f7ff;
  color: #1890ff;
  border-left-color: #1890ff;
}

7.4 内容区

.layout-content {
  margin-left: 256px;
  margin-top: 64px;
  padding: 24px;
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
}

8. 统计卡片

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.stat-card {
  background: #ffffff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

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

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

.stat-icon {
  float: right;
  font-size: 24px;
  color: #1890ff;
  opacity: 0.3;
}

9. 表单系统

9.1 表单组

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  color: #333333;
  font-weight: 500;
  font-size: 14px;
}

.form-label.required::after {
  content: ' *';
  color: #ff4d4f;
}

9.2 表单行（两列布局）

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

10. 工具栏

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.toolbar-left {
  display: flex;
  gap: 12px;
  align-items: center;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 600px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid #e8e8e8;
  font-size: 16px;
  font-weight: 600;
  color: #333333;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

12. 响应式设计

/* 平板 */
@media (max-width: 1024px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 移动端 */
@media (max-width: 768px) {
  .layout-sider {
    width: 200px;
  }

  .layout-content {
    margin-left: 200px;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .table {
    font-size: 12px;
  }

  .toolbar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
}

13. 动画效果

/* 过渡动画 */
.transition-all {
  transition: all 0.3s ease;
}

/* 悬停效果 */
.hover-scale:hover {
  transform: scale(1.02);
}

.hover-shadow:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 淡入淡出 */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

14. React 组件实现参考

14.1 颜色配置 (config/colors.js)

export const colors = {
  primary: '#1890ff',
  success: '#52c41a',
  warning: '#fa8c16',
  error: '#ff4d4f',
  info: '#1890ff',

  text: {
    primary: '#333333',
    secondary: '#666666',
    disabled: '#999999',
  },

  border: {
    base: '#e8e8e8',
    light: '#f0f0f0',
  },

  bg: {
    header: '#001529',
    sidebar: '#ffffff',
    content: '#f0f2f5',
    component: '#ffffff',
  },
};

14.2 状态标签组件 (components/Tag.jsx)

import React from 'react';
import { colors } from '../config/colors';

const tagStyles = {
  new: { bg: '#e6f7ff', color: '#1890ff', border: '#91d5ff' },
  inProgress: { bg: '#f6ffed', color: '#52c41a', border: '#b7eb8f' },
  completed: { bg: '#f5f5f5', color: '#999999', border: '#d9d9d9' },
  paused: { bg: '#fff7e6', color: '#fa8c16', border: '#ffd591' },
  cancelled: { bg: '#fff1f0', color: '#f5222d', border: '#ffa39e' },
};

export const Tag = ({ children, type = 'default' }) => {
  const style = tagStyles[type] || { bg: '#f5f5f5', color: '#999999', border: '#d9d9d9' };

  return (
    <span style={{
      display: 'inline-block',
      padding: '2px 8px',
      borderRadius: '2px',
      fontSize: '12px',
      lineHeight: 1.5,
      background: style.bg,
      color: style.color,
      border: `1px solid ${style.border}`,
    }}>
      {children}
    </span>
  );
};

14.3 卡片组件 (components/Card.jsx)

import React from 'react';

export const Card = ({ title, children, extra }) => (
  <div style={{
    background: '#ffffff',
    borderRadius: '8px',
    padding: '24px',
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
    marginBottom: '24px',
  }}>
    {title && (
      <div style={{
        fontSize: '16px',
        fontWeight: 600,
        color: '#333333',
        marginBottom: '20px',
        borderBottom: '1px solid #e8e8e8',
        paddingBottom: '12px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}>
        {title}
        {extra}
      </div>
    )}
    {children}
  </div>
);

15. 图标使用

推荐使用以下图标库：

Ant Design Icons：@ant-design/icons
React Icons：react-icons

常用图标：

Dashboard: DashboardOutlined
Project: FileTextOutlined
User: UserOutlined
Settings: SettingOutlined
Add: PlusOutlined
Edit: EditOutlined
Delete: DeleteOutlined
View: EyeOutlined
Logout: LogoutOutlined

16. 页面布局模板

import React from 'react';

const PageLayout = ({ children, title }) => (
  <div style={{
    marginLeft: '256px',
    marginTop: '64px',
    padding: '24px',
    background: '#f0f2f5',
    minHeight: 'calc(100vh - 64px)',
  }}>
    {title && (
      <h1 style={{
        fontSize: '24px',
        fontWeight: 600,
        color: '#333333',
        marginBottom: '24px',
      }}>
        {title}
      </h1>
    )}
    {children}
  </div>
);

17. 注意事项

颜色使用：统一使用预定义的颜色变量，不要使用硬编码的颜色值
间距统一：使用间距系统保持一致性
响应式：移动端、平板、桌面端都要适配
可访问性：确保对比度符合WCAG标准，最小对比度4.5:1
性能：避免过度使用动画，保持流畅的用户体验
浏览器兼容：确保在主流浏览器中正常显示

13 KiB Raw Blame History Unescape Escape

UI设计规范文档

1. 设计系统概述

2. 颜色系统

2.1 主色调

2.2 中性色

2.3 背景色

3. 状态标签颜色

4. 字体系统

5. 间距系统

6. 组件样式

6.1 按钮

6.2 输入框

6.3 选择框

6.4 卡片

6.5 表格

6.6 标签

6.7 头像

7. 布局系统

7.1 整体布局

7.2 顶部导航栏

7.3 侧边栏

7.4 内容区

8. 统计卡片

9. 表单系统

9.1 表单组

9.2 表单行（两列布局）

10. 工具栏

11. Modal 弹窗

12. 响应式设计

13. 动画效果

14. React 组件实现参考

14.1 颜色配置 (config/colors.js)

14.2 状态标签组件 (components/Tag.jsx)

14.3 卡片组件 (components/Card.jsx)

15. 图标使用

16. 页面布局模板

17. 注意事项

13 KiB

Raw Blame History