# lingee组件库

**Repository Path**: pipipipiu/lingee-component-library

## Basic Information

- **Project Name**: lingee组件库
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-11
- **Last Updated**: 2025-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 组件库设计系统

基于 Vue 3 + Arco Design + TypeScript + Vite 构建的现代化组件库开发和设计系统平台。

## ✨ 特性

- 🎨 **现代设计** - 基于 HarmonyOS Sans SC 字体和渐变色彩系统
- 🔧 **完整工具链** - Vue 3 + TypeScript + Vite + Vue Router 
- 📱 **响应式设计** - 完全适配移动端和桌面端
- 🎯 **设计令牌** - 完整的设计令牌系统，确保一致性
- 🎪 **实时预览** - 代码演练场支持实时编辑和预览
- 📚 **完善文档** - 详细的组件文档和使用指南
- 🌈 **主题定制** - 支持自定义主题和样式

## 🚀 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 7.0.0

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 类型检查

```bash
npm run type-check
```

## 📁 项目结构

```
src/
├── components/           # 通用组件
│   └── demos/           # 演示组件
├── layouts/             # 布局组件
│   └── MainLayout.vue   # 主布局
├── pages/               # 页面组件
│   ├── Home.vue         # 首页
│   ├── Components.vue   # 组件总览
│   ├── ComponentDetail.vue  # 组件详情
│   ├── DesignTokens.vue # 设计令牌
│   ├── Playground.vue   # 代码演练场
│   └── Guidelines.vue   # 设计指南
├── router/              # 路由配置
├── styles/              # 全局样式
│   ├── index.scss       # 主样式文件
│   ├── variables.scss   # SCSS变量
│   ├── tokens.scss      # 设计令牌
│   └── components.scss  # 组件样式
├── App.vue              # 根组件
└── main.ts              # 应用入口
```

## 🎨 设计规范

### 色彩系统

- **主色调**: `#6D5ACF` - 用于主要操作和重要信息
- **主色调渐变**: `linear-gradient(to right, #6D5ACF, #6D96FF)`
- **次要渐变**: `linear-gradient(to right, #6D5ACF, #A69BFF)`
- **文本颜色**: `#FFFFFF` (主要) / `#AEABB7` (次要)
- **背景色**: `#291A51` (主要) / `#271D38` (次要)

### 字体系统

- **字体族**: HarmonyOS Sans SC
- **字号规范**:
  - H1/大标题: 36px
  - H2/标题: 18px
  - H3/小标题: 16px
  - 正文: 14px
  - 辅助正文: 12px
  - 标签: 10px

### 间距系统

- XS: 4px
- SM: 8px
- MD: 16px
- LG: 24px
- XL: 32px
- 2XL: 40px

### 按钮规范

- **小按钮**: 40px 高度，30px 水平内边距
- **大按钮**: 50px 高度，38px 水平内边距
- **搜索框**: 700px × 64px
- **图标按钮**: 40px × 40px

## 🧩 组件库功能

### 1. 首页 (Home)
- 欢迎界面和产品介绍
- 核心特性展示
- 快速开始指南
- 统计数据概览

### 2. 组件总览 (Components)
- 组件分类浏览
- 实时搜索功能
- 组件状态标识
- 快速预览和跳转

### 3. 组件详情 (ComponentDetail)
- 详细的组件文档
- 实时代码演示
- API 参数说明
- 设计规范说明

### 4. 设计令牌 (DesignTokens)
- 完整的颜色系统
- 字体和排版规范
- 间距和布局系统
- 阴影和视觉效果

### 5. 代码演练场 (Playground)
- 实时代码编辑
- 即时预览效果
- 预设模板快速开始
- 代码复制和分享

### 6. 设计指南 (Guidelines)
- 设计原则说明
- 色彩使用指南
- 排版和布局规范
- 组件使用最佳实践

## 🔧 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **TypeScript** - 类型安全的 JavaScript
- **Vite** - 现代前端构建工具
- **Vue Router** - Vue.js 官方路由
- **Arco Design** - 字节跳动出品的企业级设计语言
- **SCSS** - CSS 预处理器
- **Pinia** - Vue 状态管理库

## 📦 自动化配置

项目已配置以下自动化功能：

- **自动导入**: Vue APIs 和组件自动导入
- **路径别名**: 支持 `@/` 路径别名
- **类型检查**: TypeScript 严格模式
- **样式预处理**: SCSS 全局变量自动注入
- **组件解析**: Arco Design 组件自动解析

## 🎯 使用建议

### 开发新组件

1. 在 `src/components/` 目录下创建组件文件
2. 在 `src/components/demos/` 目录下创建演示组件
3. 遵循现有的命名规范和文件结构
4. 使用设计令牌中定义的颜色和间距

### 自定义主题

1. 修改 `src/styles/variables.scss` 中的变量
2. 调整 `src/styles/tokens.scss` 中的设计令牌
3. 重新构建项目以应用更改

### 添加新页面

1. 在 `src/pages/` 目录下创建页面组件
2. 在 `src/router/index.ts` 中添加路由配置
3. 更新主布局中的导航菜单


## 📝 更新日志