# da-style

**Repository Path**: da9527/da-style

## Basic Information

- **Project Name**: da-style
- **Description**: 自定义Vue3组件库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2021-10-28
- **Last Updated**: 2026-06-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Da式风格组件库

> 赛博朋克风格 Vue3 组件库 — 深黑背景 + 霓虹青/粉发光 + 几何切角边框

## 安装

```bash
npm i da-style
# 或
yarn add da-style
# 或
pnpm add da-style
```

## 使用

### 全量引入

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import DaStyle from 'da-style'
import 'da-style/dist/da-style.css'

createApp(App).use(DaStyle).mount('#app')
```

### 按需引入

```vue
<script setup>
import { DButton, DInput } from 'da-style'
import 'da-style/dist/da-style.css'
</script>

<template>
  <DButton status="primary">按钮</DButton>
  <DInput placeholder="输入框" />
</template>
```

## 组件

### DButton 按钮

```vue
<template>
  <DButton>默认</DButton>
  <DButton status="primary">主要</DButton>
  <DButton status="success">成功</DButton>
  <DButton status="warning">警告</DButton>
  <DButton status="danger">危险</DButton>
  <DButton status="info">信息</DButton>
</template>
```

**Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| status | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'` | 按钮类型 |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 按钮大小 |
| disabled | `boolean` | `false` | 禁用状态 |
| loading | `boolean` | `false` | 加载状态 |
| glow | `boolean` | `false` | 霓虹发光效果 |
| ghost | `boolean` | `false` | 幽灵按钮 |
| block | `boolean` | `false` | 块级按钮 |
| round | `boolean` | `false` | 圆角按钮 |
| circle | `boolean` | `false` | 圆形按钮 |

### DInput 输入框

```vue
<template>
  <DInput placeholder="请输入" />
  <DInput type="password" placeholder="密码" />
  <DInput clearable placeholder="可清除" />
  <DInput glow placeholder="发光效果" />
</template>
```

**Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| modelValue | `string` | - | 绑定值 |
| type | `'text' \| 'password' \| 'email' \| 'number' \| 'tel' \| 'url' \| 'search'` | `'text'` | 输入类型 |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 输入框大小 |
| disabled | `boolean` | `false` | 禁用状态 |
| readonly | `boolean` | `false` | 只读状态 |
| placeholder | `string` | - | 占位符 |
| clearable | `boolean` | `false` | 可清除 |
| glow | `boolean` | `false` | 聚焦发光效果 |

### DTag 标签

```vue
<template>
  <DTag>默认</DTag>
  <DTag status="primary">主要</DTag>
  <DTag status="success">成功</DTag>
  <DTag status="warning">警告</DTag>
  <DTag status="danger">危险</DTag>
  <DTag closable>可关闭</DTag>
  <DTag ghost glow>幽灵发光</DTag>
</template>
```

**Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| status | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'` | 标签类型 |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 标签大小 |
| closable | `boolean` | `false` | 可关闭 |
| ghost | `boolean` | `false` | 幽灵样式 |
| glow | `boolean` | `false` | 霓虹发光效果 |
| round | `boolean` | `false` | 圆角样式 |

**Events:**

| 事件名 | 说明 |
|--------|------|
| close | 关闭时触发 |

### DLoading 加载

```vue
<template>
  <DLoading />
  <DLoading type="dots" />
  <DLoading type="pulse" />
  <DLoading text="加载中..." />
  <DLoading fullscreen />
</template>
```

**Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| type | `'spinner' \| 'dots' \| 'pulse'` | `'spinner'` | 动画类型 |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 加载器大小 |
| color | `string` | - | 自定义颜色 |
| text | `string` | - | 加载文本 |
| fullscreen | `boolean` | `false` | 全屏遮罩模式 |

### DIcon 图标

```vue
<template>
  <DIcon name="check" />
  <DIcon name="close" color="#00ffff" />
  <DIcon name="loading" spin />
  <DIcon :size="32" name="info" />
</template>
```

**Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| name | `IconName` | - | 图标名称 |
| size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | 图标大小 |
| color | `string` | - | 图标颜色 |
| spin | `boolean` | `false` | 旋转动画 |

**可用图标:** `close`, `check`, `chevron-left`, `chevron-right`, `chevron-down`, `chevron-up`, `loading`, `search`, `info`, `warning`, `error`, `success`, `eye`, `eye-off`

### DFlex 弹性布局

```vue
<template>
  <DFlex gap="md" status="primary">
    <DButton size="small">项目一</DButton>
    <DButton size="small">项目二</DButton>
  </DFlex>
  <DFlex direction="column" gap="sm">
    <DButton size="small">垂直</DButton>
    <DButton size="small">排列</DButton>
  </DFlex>
</template>
```

**Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| direction | `'row' \| 'row-reverse' \| 'column' \| 'column-reverse'` | `'row'` | 主轴方向 |
| wrap | `'nowrap' \| 'wrap' \| 'wrap-reverse'` | `'nowrap'` | 换行方式 |
| justify | `'flex-start' \| 'flex-end' \| 'center' \| 'space-between' \| 'space-around' \| 'space-evenly'` | `'flex-start'` | 主轴对齐 |
| align | `'flex-start' \| 'flex-end' \| 'center' \| 'stretch' \| 'baseline'` | `'stretch'` | 交叉轴对齐 |
| gap | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | 子元素间距 |
| status | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'` | 边框状态色 |
| glow | `boolean` | `false` | 霓虹辉光效果 |
| block | `boolean` | `false` | 块级元素 |

### DLayout 布局

```vue
<template>
  <DLayout fullHeight>
    <DLayoutHeader>Header</DLayoutHeader>
    <DLayout>
      <DLayoutSider width="240px">Sider</DLayoutSider>
      <DLayoutContent>Content</DLayoutContent>
    </DLayout>
    <DLayoutFooter>Footer</DLayoutFooter>
  </DLayout>
</template>
```

**DLayout Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| direction | `'horizontal' \| 'vertical'` | `'vertical'` | 布局方向 |
| status | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'` | 边框状态色 |
| glow | `boolean` | `false` | 霓虹辉光效果 |
| fullHeight | `boolean` | `false` | 撑满视口高度 |

**DLayoutHeader / DLayoutFooter Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| height | `string` | `'64px'` | 高度 |
| status | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'` | 边框状态色 |
| glow | `boolean` | `false` | 霓虹辉光效果 |

**DLayoutSider Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| width | `string` | `'240px'` | 侧边栏宽度 |
| status | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'` | 边框状态色 |
| glow | `boolean` | `false` | 霓虹辉光效果 |
| collapsed | `boolean` | `false` | 折叠状态 |

**DLayoutContent Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| status | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'` | 边框状态色 |
| glow | `boolean` | `false` | 霓虹辉光效果 |

### DForm 表单

```vue
<template>
  <DForm :model="formModel" :rules="formRules" @submit="handleSubmit">
    <DFormItem label="用户名" field="username" required>
      <DInput v-model="formModel.username" placeholder="请输入用户名" />
    </DFormItem>
    <DFormItem label="邮箱" field="email" required>
      <DInput v-model="formModel.email" placeholder="请输入邮箱" />
    </DFormItem>
    <DFormItem>
      <DButton status="primary" nativeType="submit">提交</DButton>
    </DFormItem>
  </DForm>
</template>
```

**DForm Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| model | `Record<string, unknown>` | `{}` | 表单数据模型 |
| rules | `Record<string, FormRule[]>` | `{}` | 表单校验规则 |
| layout | `'horizontal' \| 'vertical'` | `'horizontal'` | 表单布局方式 |
| labelPosition | `'left' \| 'right' \| 'top'` | `'right'` | 表单标签位置 |
| labelWidth | `string` | `'80px'` | 标签宽度 |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 表单尺寸 |
| status | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'` | 视觉风格 |
| glow | `boolean` | `false` | 霓虹辉光效果 |
| disabled | `boolean` | `false` | 禁用整个表单 |

**DForm Events:**

| 事件名 | 回调参数 | 说明 |
|--------|----------|------|
| submit | `(model: Record<string, unknown>)` | 表单提交时触发 |
| validate | `(valid: boolean, model: Record<string, unknown>)` | 校验完成时触发 |

**DFormItem Props:**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| label | `string` | `''` | 表单项标签 |
| field | `string` | `''` | 绑定的字段名 |
| rules | `FormRule[]` | - | 校验规则（覆盖表单级规则） |
| required | `boolean` | `false` | 是否必填 |
| labelWidth | `string` | - | 标签宽度（覆盖表单级设置） |
| labelAlign | `'left' \| 'right'` | `'right'` | 标签对齐方式 |
| hideLabel | `boolean` | `false` | 是否隐藏标签 |

## Design Tokens

da-style 提供完整的设计令牌系统，可在项目中使用：

```javascript
import {
  // 颜色
  cyan, magenta, purple, blue, yellow, green, orange, red,
  colorPrimary, colorSuccess, colorWarning, colorDanger, colorInfo,
  // 间距
  space1, space2, space3, space4, space5, space6, space8, space10, space12,
  // 字体
  fontMono, fontSans, fontHeading, fontBody,
  textXs, textSm, textBase, textLg, textXl, text2xl, text3xl,
  // 边框
  radiusNone, radiusSm, radiusMd, radiusLg, radiusFull,
  // 阴影
  shadowGlowCyan, shadowGlowMagenta, shadowGlowPurple, shadowGlowGreen, shadowGlowYellow, shadowGlowRed,
  // 注入
  injectTokens, resetInjection,
} from 'da-style'
```

或在 CSS 中使用 CSS 变量：

```css
.my-component {
  background: var(--d-bg-primary);
  color: var(--d-text-primary);
  border: 1px solid var(--d-cyan);
  box-shadow: var(--d-glow-cyan);
  clip-path: polygon(8px 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%, 0% 8px);
}
```

## AI Agent Skill

da-style 内置了 AI Agent Skill，随 npm 包一起发布。安装 da-style 后，你的 AI 编程助手（如 Claude Code、Cursor 等）可以直接加载 Skill，获得完整的组件 API、设计令牌和使用示例，从而更准确地生成代码。

### Skill 文件位置

安装 da-style 后，Skill 文件位于 `node_modules/da-style/skills/da-style/` 目录下：

```
node_modules/da-style/skills/da-style/
├── SKILL.md                    # Skill 主文件（触发条件 + 快速参考）
└── references/
    ├── components.md           # 完整组件 API 文档
    └── tokens.md               # 设计令牌完整列表
```

### 手动复制安装

将 `node_modules/da-style/skills/da-style` 整个文件夹复制到当前项目的 AI 代理配置目录：

| AI 代理 | 目标目录 |
|---------|----------|
| Cursor | `.cursor/skills/` |
| Claude Code | `.claude/skills/` |
| 通用标准 | `.agents/skills/` |

安装完成后，在对话框中输入 `@da-style` 或触发词，AI 即可加载该 Skill。

### Skill 能力

Agent 加载 Skill 后可以：

- **准确生成组件代码**：自动使用正确的 props、事件和插槽
- **遵循设计规范**：使用 cyberpunk 风格的颜色、字体和边框
- **正确使用 Design Tokens**：引用 `--d-*` CSS 变量或 JS token 导出
- **避免常见错误**：如错误的 import 路径、缺少 CSS 文件引入等

## 文档

启动文档开发服务器：

```bash
pnpm docs:dev
```

## 开发

```bash
pnpm install
pnpm dev          # 启动开发服务器
pnpm build        # 构建库
pnpm test         # 运行测试
pnpm typecheck    # 类型检查
```

## License

MIT