# zss-lit-ui

**Repository Path**: zengshengsun-code/zss-lit-ui

## Basic Information

- **Project Name**: zss-lit-ui
- **Description**: 利用lit库封装的web component组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-10-27
- **Last Updated**: 2025-12-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ZSS Lit UI

一个基于 Lit 框架的 Web Components 组件库，实现了 Element Plus 风格的组件。

## ✨ 特性

- 🚀 **基于 Lit 3.x** - 使用最新的 Lit 框架构建
- 🎨 **Element Plus 风格** - 熟悉的 Element Plus 设计语言
- 📦 **Tree Shaking 支持** - 支持按需引入，减小打包体积
- 🔧 **TypeScript 支持** - 完整的类型定义
- 🎯 **Web Components 标准** - 原生 Web Components，无框架依赖
- 📱 **响应式设计** - 适配各种屏幕尺寸

## 📦 安装

### NPM 安装

```bash
npm install zss-lit-ui
```

### Yarn 安装

```bash
yarn add zss-lit-ui
```

### PNPM 安装

```bash
pnpm add zss-lit-ui
```

## 🚀 快速开始

### 完整引入

```javascript
import { ZssButton, ZssInput, ZssTable, ZssMenu, ZssMessage } from 'zss-lit-ui';
import 'zss-lit-ui/dist/zss-lit-ui.min.css';

// 注册所有组件
customElements.define('zss-button', ZssButton);
customElements.define('zss-input', ZssInput);
customElements.define('zss-table', ZssTable);
customElements.define('zss-menu', ZssMenu);
```

### 按需引入

```javascript
// 引入单个组件
import { ZssButton } from 'zss-lit-ui/components/basic';
import 'zss-lit-ui/dist/zss-lit-ui.min.css';

// 注册单个组件
customElements.define('zss-button', ZssButton);
```

### CDN 引入

```html
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/zss-lit-ui/dist/zss-lit-ui.min.css">

<!-- 引入脚本 -->
<script src="https://unpkg.com/zss-lit-ui/dist/zss-lit-ui.umd.js"></script>

<!-- 使用组件 -->
<zss-button type="primary">主要按钮</zss-button>
```

## 📚 组件使用示例

### 基础组件

#### 按钮组件

```html
<zss-button type="primary" size="large">主要按钮</zss-button>
<zss-button type="success">成功按钮</zss-button>
<zss-button type="warning">警告按钮</zss-button>
<zss-button type="danger">危险按钮</zss-button>
<zss-button type="text">文本按钮</zss-button>
```

#### 图标组件

```html
<zss-icon name="search" size="20"></zss-icon>
<zss-icon name="home" color="#409eff"></zss-icon>
```

#### 布局组件

```html
<zss-layout>
  <div slot="header">头部内容</div>
  <div slot="aside">侧边栏内容</div>
  <div slot="main">主内容区域</div>
  <div slot="footer">底部内容</div>
</zss-layout>
```

### 表单组件

#### 输入框组件

```html
<zss-input 
  placeholder="请输入内容"
  size="large"
  clearable
></zss-input>
```

#### 选择器组件

```html
<zss-select 
  .options=${[
    { label: '选项一', value: '1' },
    { label: '选项二', value: '2' }
  ]}
  placeholder="请选择"
></zss-select>
```

#### 复选框组件

```html
<zss-checkbox checked>同意协议</zss-checkbox>
<zss-checkbox-group 
  .options=${[
    { label: '选项A', value: 'a' },
    { label: '选项B', value: 'b' }
  ]}
></zss-checkbox-group>
```

#### 单选框组件

```html
<zss-radio value="1" checked>选项一</zss-radio>
<zss-radio-group 
  .options=${[
    { label: '男', value: 'male' },
    { label: '女', value: 'female' }
  ]}
></zss-radio-group>
```

#### 日期选择器组件

```html
<zss-date-picker 
  placeholder="选择日期"
  format="YYYY-MM-DD"
></zss-date-picker>
```

#### 上传组件

```html
<zss-upload 
  action="/api/upload"
  multiple
  accept="image/*"
></zss-upload>
```

### 数据展示组件

#### 表格组件

```html
<zss-table 
  .columns=${[
    { prop: 'name', label: '姓名' },
    { prop: 'age', label: '年龄' }
  ]}
  .data=${[
    { name: '张三', age: 25 },
    { name: '李四', age: 30 }
  ]}
  border
  selection
></zss-table>
```

#### 卡片组件

```html
<zss-card 
  header="卡片标题"
  shadow="hover"
>
  <div>卡片内容</div>
</zss-card>
```

#### 列表组件

```html
<zss-list 
  .data=${[
    { id: 1, title: '列表项一', description: '描述信息' },
    { id: 2, title: '列表项二', description: '描述信息' }
  ]}
  border
></zss-list>
```

#### 标签组件

```html
<zss-tag>默认标签</zss-tag>
<zss-tag type="primary">主要标签</zss-tag>
<zss-tag type="success">成功标签</zss-tag>
<zss-tag type="warning">警告标签</zss-tag>
<zss-tag type="danger">危险标签</zss-tag>
<zss-tag closable>可关闭标签</zss-tag>
```

#### 进度条组件

```html
<zss-progress percentage="50" status="success"></zss-progress>
<zss-progress type="circle" percentage="75"></zss-progress>
```

#### 徽章组件

```html
<zss-badge value="5">
  <zss-button>消息</zss-button>
</zss-badge>
<zss-badge is-dot>新消息</zss-badge>
```

#### 树形组件

```html
<zss-tree 
  .data=${[
    {
      id: 1,
      label: '一级节点',
      children: [
        { id: 2, label: '二级节点' }
      ]
    }
  ]}
  show-checkbox
></zss-tree>
```

### 导航组件

#### 菜单组件

```html
<zss-menu 
  .items=${[
    { label: '首页', value: 'home' },
    { label: '产品', value: 'product' },
    { label: '关于', value: 'about' }
  ]}
></zss-menu>
```

#### 面包屑组件

```html
<zss-breadcrumb 
  .items=${[
    { label: '首页', href: '/' },
    { label: '用户管理', href: '/users' },
    { label: '用户详情', href: '/users/123' }
  ]}
></zss-breadcrumb>
```

#### 分页组件

```html
<zss-pagination 
  total="100"
  page-size="10"
  current-page="1"
></zss-pagination>
```

#### 标签页组件

```html
<zss-tabs 
  .tabs=${[
    { label: '标签一', value: 'tab1' },
    { label: '标签二', value: 'tab2' }
  ]}
></zss-tabs>
```

### 反馈组件

#### 消息组件

```javascript
// 使用静态方法
ZssMessage.success('操作成功');
ZssMessage.error('操作失败');
ZssMessage.warning('警告信息');
ZssMessage.info('提示信息');
```

#### 对话框组件

```html
<zss-button @click=${() => this.showDialog = true}>打开对话框</zss-button>
<zss-dialog 
  title="对话框标题"
  .visible=${this.showDialog}
  @close=${() => this.showDialog = false}
>
  <div>对话框内容</div>
</zss-dialog>
```

#### 加载组件

```html
<zss-button @click=${() => this.showLoading = true}>显示加载</zss-button>
<zss-loading 
  .visible=${this.showLoading}
  text="加载中..."
></zss-loading>
```

#### 通知组件

```javascript
ZssNotification.info({
  title: '信息通知',
  message: '这是一条信息通知'
});

ZssNotification.success({
  title: '成功通知',
  message: '操作成功完成'
});
```

## 🔧 开发

### 环境要求

- Node.js >= 16.0.0
- npm >= 7.0.0 或 pnpm >= 6.0.0

### 克隆项目

```bash
git clone <repository-url>
cd zss-lit-ui
```

### 安装依赖

```bash
npm install
# 或
pnpm install
```

### 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:5173 查看示例页面。

### 构建项目

```bash
# 构建所有目标
npm run build

# 仅构建库文件
npm run build:lib

# 构建 TypeScript 声明文件
npm run build:types

# 构建示例页面
npm run build:examples

# 构建 UMD 格式
npm run build:umd

# 构建 CSS 文件
npm run build:css
```

### 代码检查

```bash
npm run lint
```

### 代码格式化

```bash
npm run format
```

### 运行测试

```bash
npm run test
```

## 📁 项目结构

```
zss-lit-ui/
├── src/                    # 源代码
│   ├── components/         # 组件目录
│   │   ├── basic/          # 基础组件
│   │   ├── form/           # 表单组件
│   │   ├── data/           # 数据展示组件
│   │   ├── navigation/     # 导航组件
│   │   └── feedback/       # 反馈组件
│   ├── styles/            # 样式文件
│   ├── utils/             # 工具函数
│   └── index.ts           # 主入口文件
├── examples/              # 示例代码
├── dist/                  # 构建输出
├── scripts/              # 构建脚本
└── package.json          # 项目配置
```

## 📦 发布到 NPM

### 1. 准备发布

确保已完成以下步骤：

- [ ] 更新 `package.json` 中的版本号
- [ ] 运行 `npm run build` 确保构建成功
- [ ] 运行 `npm run test` 确保测试通过
- [ ] 更新 CHANGELOG.md（如果有）

### 2. 登录 NPM

```bash
npm login
```

### 3. 发布包

```bash
npm publish
```

### 4. 发布到其他注册表（可选）

```bash
# 发布到 GitHub Packages
npm publish --registry=https://npm.pkg.github.com

# 发布到公司私有注册表
npm publish --registry=<your-registry-url>
```

## 🔗 浏览器兼容性

- Chrome >= 61
- Firefox >= 63
- Safari >= 10.1
- Edge >= 79

## 🤝 贡献

欢迎贡献代码！请阅读我们的贡献指南。

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 许可证

本项目基于 MIT 许可证开源。

## 🔗 相关链接

- [文档网站](https://your-docs-site.com)
- [在线演示](https://your-demo-site.com)
- [问题反馈](https://github.com/your-repo/issues)
- [更新日志](CHANGELOG.md)

## 🙏 致谢

感谢以下项目的启发：

- [Lit](https://lit.dev/) - 优秀的 Web Components 框架
- [Element Plus](https://element-plus.org/) - 优秀的 Vue 3 UI 组件库

---

如有问题，请提交 [Issue](https://github.com/your-repo/issues) 或通过邮件联系我们。