# smartisan-ui

**Repository Path**: xiak/smartisan-ui

## Basic Information

- **Project Name**: smartisan-ui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-19
- **Last Updated**: 2026-05-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: UI

## README

# Smartisan Design System (SDS)

锤子科技 Smartisan Design System —— 一个面向产品后台、商城与账户中心的拟物扁平化设计系统。

## 特性

- **命名空间隔离**：全部组件以 `sds-` 为前缀，避免与项目现有样式冲突
- **设计 Token 化**：色彩、间距、圆角、阴影、字体等通过 CSS 自定义属性统一管理
- **组件丰富**：涵盖按钮、表单、卡片、表格、模态框、下拉菜单、标签、分页、折叠面板、步进器等 30+ 组件
- **无障碍支持**：focus-visible、aria 属性、键盘导航
- **移动端适配**：针对触摸设备优化 hover 状态与响应式布局
- **JS 组件封装**：提供 `SmartisanUI` 全局对象，支持程序化调用与自动初始化

## 文件结构

```
smartisan-ui/
├── css/
│   ├── smartisan-ui.css    # 入口文件，导入所有模块
│   ├── tokens.css          # 设计 Token（变量）
│   ├── reset.css           # 重置与基础样式
│   ├── layout.css          # 布局系统
│   ├── components.css      # 组件样式
│   ├── utilities.css       # 工具类
│   ├── responsive.css      # 响应式与移动端适配
│   └── demo.css            # 演示页面样式（可选）
├── js/
│   └── smartisan-ui.js     # 组件交互库
├── index.html              # 组件演示页
└── README.md               # 本文档
```

## 快速开始

在 HTML 中引入样式和脚本：

```html
<link rel="stylesheet" href="css/smartisan-ui.css">
<script src="js/smartisan-ui.js"></script>
```

脚本会自动初始化页面上的所有组件。你也可以通过 `SmartisanUI.init()` 手动触发。

## 设计 Token

所有 Token 定义在 `css/tokens.css` 的 `:root` 中，可在运行时覆盖：

### 品牌色

| Token | 默认值 | 说明 |
|-------|--------|------|
| `--color-primary` | `#5079d9` | 主色 |
| `--color-primary-hover` | `#395699` | 主色悬停 |
| `--color-price` | `#d44d44` | 价格红 |

### 状态色

| Token | 默认值 | 说明 |
|-------|--------|------|
| `--color-success` | `#86c040` | 成功 |
| `--color-warning` | `#ffcc25` | 警告 |
| `--color-danger` | `#d44d44` | 危险 |
| `--color-orange` | `#fe9820` | 橙色 |

### 中性色

| Token | 默认值 | 说明 |
|-------|--------|------|
| `--color-dark` | `#333` | 深色文字 |
| `--color-text` | `#666` | 正文 |
| `--color-muted` | `#999` | 辅助文字 |
| `--color-border` | `#dcdcdc` | 边框 |
| `--color-bg` | `#f5f5f5` | 背景 |

### 间距

| Token | 默认值 |
|-------|--------|
| `--spacing-xs` | `4px` |
| `--spacing-sm` | `8px` |
| `--spacing-md` | `12px` |
| `--spacing-lg` | `20px` |
| `--spacing-xl` | `30px` |

### 圆角

| Token | 默认值 |
|-------|--------|
| `--radius-sm` | `4px` |
| `--radius-md` | `6px` |
| `--radius-lg` | `8px` |

### 阴影

| Token | 说明 |
|-------|------|
| `--shadow-card` | 卡片默认阴影 |
| `--shadow-card-hover` | 卡片悬停阴影 |
| `--shadow-dropdown` | 下拉菜单阴影 |
| `--shadow-modal` | 模态框阴影 |

## 组件使用

### 按钮 Button

```html
<button class="sds-btn sds-btn-primary">主按钮</button>
<button class="sds-btn sds-btn-default">默认按钮</button>
<button class="sds-btn sds-btn-success">成功</button>
<button class="sds-btn sds-btn-warning">警告</button>
<button class="sds-btn sds-btn-danger">危险</button>
<button class="sds-btn sds-btn-orange">橙色</button>
```

尺寸与状态：

```html
<button class="sds-btn sds-btn-primary sds-btn-sm">小按钮</button>
<button class="sds-btn sds-btn-primary sds-btn-lg">大按钮</button>
<button class="sds-btn sds-btn-primary sds-btn-loading">加载中</button>
<button class="sds-btn sds-btn-primary" disabled>禁用</button>
```

### 表单 Form

```html
<div class="sds-form-group">
  <label class="sds-form-label">用户名</label>
  <input type="text" class="sds-input" placeholder="请输入">
</div>
```

状态：

```html
<input type="text" class="sds-input sds-input-success" value="验证通过">
<input type="text" class="sds-input sds-input-error" value="输入错误">
```

### 卡片 Card

```html
<div class="sds-card">
  <div class="sds-card-image"><img src="..." alt=""></div>
  <div class="sds-card-body">
    <div class="sds-card-title">标题</div>
    <div class="sds-card-text">描述内容</div>
  </div>
  <div class="sds-card-footer">... footer ...</div>
</div>
```

### 模态框 Modal

HTML 结构：

```html
<div class="sds-modal-overlay" id="myModal">
  <div class="sds-modal">
    <div class="sds-modal-header">
      <div class="sds-modal-title">标题</div>
      <button class="sds-modal-close" onclick="SmartisanUI.hideModal()">×</button>
    </div>
    <div class="sds-modal-body">内容</div>
    <div class="sds-modal-footer">
      <button class="sds-btn sds-btn-default" onclick="SmartisanUI.hideModal()">取消</button>
      <button class="sds-btn sds-btn-primary" onclick="SmartisanUI.hideModal()">确定</button>
    </div>
  </div>
</div>
```

JS 调用：

```javascript
SmartisanUI.showModal();   // 显示 id="modalDemo" 的模态框
SmartisanUI.hideModal();   // 隐藏
```

### Toast 轻提示

```javascript
SmartisanUI.showToast('success', '操作成功');
SmartisanUI.showToast('error', '操作失败');
SmartisanUI.showToast('warning', '请注意');
SmartisanUI.showToast('info', '提示信息');
```

### 折叠面板 Accordion

```html
<div class="sds-accordion">
  <div class="sds-accordion-item">
    <button class="sds-accordion-header" aria-expanded="false">标题 1</button>
    <div class="sds-accordion-body">内容 1</div>
  </div>
</div>
```

脚本会自动绑定点击展开/收起。手动控制：

```javascript
document.querySelectorAll('.sds-accordion-header').forEach(h => {
  h.addEventListener('click', () => {
    const item = h.closest('.sds-accordion-item');
    item.classList.toggle('sds-is-open');
    h.setAttribute('aria-expanded', item.classList.contains('sds-is-open'));
  });
});
```

### 标签 Tag

```html
<span class="sds-tag sds-tag-primary">标签</span>
<span class="sds-tag sds-tag-success">成功</span>
<span class="sds-tag sds-tag-warning">警告</span>
<span class="sds-tag sds-tag-danger">危险</span>
<span class="sds-tag sds-tag-orange">橙色</span>
<span class="sds-tag sds-tag-outline">描边</span>
```

### 工具类 Utilities

| 类名 | 说明 |
|------|------|
| `sds-d-flex` | display: flex |
| `sds-justify-between` | justify-content: space-between |
| `sds-align-center` | align-items: center |
| `sds-text-bold` | font-weight: bold |
| `sds-text-muted` | 辅助色文字 |
| `sds-text-primary` | 主色文字 |
| `sds-text-danger` | 危险色文字 |
| `sds-text-success` | 成功色文字 |
| `sds-text-warning` | 警告色文字 |
| `sds-mb-md` | margin-bottom: 12px |
| `sds-mb-lg` | margin-bottom: 20px |
| `sds-mt-sm` | margin-top: 8px |
| `sds-w-full` | width: 100% |
| `sds-h-full` | height: 100% |
| `sds-sr-only` | 屏幕阅读器专用 |

## JS API 参考

### 全局对象

`SmartisanUI` 暴露以下方法：

| 方法 | 说明 |
|------|------|
| `SmartisanUI.init()` | 手动初始化所有组件 |
| `SmartisanUI.showModal()` | 显示模态框 |
| `SmartisanUI.hideModal()` | 隐藏模态框 |
| `SmartisanUI.showMDialog()` | 显示 M-Dialog |
| `SmartisanUI.hideMDialog()` | 隐藏 M-Dialog |
| `SmartisanUI.showToast(type, message)` | 显示 Toast |
| `SmartisanUI.removeToast(el)` | 移除指定 Toast 元素 |
| `SmartisanUI.toggleLoading(btn)` | 按钮加载演示（2 秒） |

## 浏览器支持

- Chrome / Edge 88+
- Firefox 78+
- Safari 14+
- 支持 `CSS Custom Properties`、`IntersectionObserver`、`focus-visible`

## 定制主题

在引入 `smartisan-ui.css` **之后**覆盖 Token 即可：

```css
:root {
  --color-primary: #your-brand-color;
  --color-primary-hover: #your-brand-hover;
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
}
```

## 许可

MIT