gy-ui-plus 1.0.8 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +121 -25
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
# gy-ui-plus
|
|
2
2
|
|
|
3
|
-
一个基于 Vue 3
|
|
3
|
+
一个基于 Vue 3 + Element Plus 二次封装的企业级 UI 组件库，提供高质量的封装组件，帮助开发者快速构建复杂的前端应用。
|
|
4
4
|
|
|
5
5
|
## 特性
|
|
6
6
|
|
|
7
7
|
- 基于 Vue 3 + TypeScript 开发，提供完整的类型定义
|
|
8
|
-
-
|
|
8
|
+
- 基于 Element Plus 深度封装，保持良好兼容性
|
|
9
9
|
- 支持按需引入，减小打包体积
|
|
10
|
-
-
|
|
11
|
-
-
|
|
10
|
+
- 提供 LayoutPage、Table、Button 等常用业务组件
|
|
11
|
+
- 内置虚拟滚动、列设置、单行编辑等高级功能
|
|
12
|
+
- 完善的代码规范和自动化工具链
|
|
12
13
|
|
|
13
14
|
## 安装
|
|
14
15
|
|
|
@@ -24,13 +25,13 @@ yarn add gy-ui-plus
|
|
|
24
25
|
|
|
25
26
|
### 完整引入
|
|
26
27
|
|
|
27
|
-
在 main.ts
|
|
28
|
+
在 main.ts 中引入组件库：
|
|
28
29
|
|
|
29
30
|
```typescript
|
|
30
31
|
import { createApp } from 'vue'
|
|
31
32
|
import App from './App.vue'
|
|
32
33
|
import GyUiPlus from 'gy-ui-plus'
|
|
33
|
-
import 'gy-ui-plus/dist/
|
|
34
|
+
import 'gy-ui-plus/dist/style.css'
|
|
34
35
|
|
|
35
36
|
const app = createApp(App)
|
|
36
37
|
app.use(GyUiPlus)
|
|
@@ -44,16 +45,35 @@ app.mount('#app')
|
|
|
44
45
|
```typescript
|
|
45
46
|
import { createApp } from 'vue'
|
|
46
47
|
import App from './App.vue'
|
|
47
|
-
import { GyButton, GyTable } from 'gy-ui-plus'
|
|
48
|
-
import 'gy-ui-plus/dist/
|
|
48
|
+
import { GyButton, GyTable, GyLayoutPage } from 'gy-ui-plus'
|
|
49
|
+
import 'gy-ui-plus/dist/style.css'
|
|
49
50
|
|
|
50
51
|
const app = createApp(App)
|
|
51
52
|
app.component('GyButton', GyButton)
|
|
52
53
|
app.component('GyTable', GyTable)
|
|
54
|
+
app.component('GyLayoutPage', GyLayoutPage)
|
|
53
55
|
app.mount('#app')
|
|
54
56
|
```
|
|
55
57
|
|
|
56
|
-
##
|
|
58
|
+
## 组件列表
|
|
59
|
+
|
|
60
|
+
### GyLayoutPage
|
|
61
|
+
|
|
62
|
+
布局页面组件，提供标准的页面布局结构。
|
|
63
|
+
|
|
64
|
+
### GyTable
|
|
65
|
+
|
|
66
|
+
增强表格组件，支持：
|
|
67
|
+
|
|
68
|
+
- 虚拟滚动（大数据量优化）
|
|
69
|
+
- 列设置（显示/隐藏列）
|
|
70
|
+
- 单行编辑
|
|
71
|
+
- 自定义列渲染
|
|
72
|
+
- 操作列配置
|
|
73
|
+
|
|
74
|
+
### GyButton
|
|
75
|
+
|
|
76
|
+
增强按钮组件，提供更多业务场景的按钮样式和功能。
|
|
57
77
|
|
|
58
78
|
## 开发
|
|
59
79
|
|
|
@@ -68,33 +88,112 @@ app.mount('#app')
|
|
|
68
88
|
npm install
|
|
69
89
|
```
|
|
70
90
|
|
|
71
|
-
###
|
|
91
|
+
### 构建组件库
|
|
72
92
|
|
|
73
93
|
```bash
|
|
74
|
-
npm run
|
|
94
|
+
npm run lib
|
|
75
95
|
```
|
|
76
96
|
|
|
77
|
-
###
|
|
97
|
+
### 代码检查和格式化
|
|
78
98
|
|
|
79
99
|
```bash
|
|
80
|
-
|
|
100
|
+
# 运行所有检查
|
|
101
|
+
npm run lint
|
|
102
|
+
|
|
103
|
+
# 仅运行 ESLint
|
|
104
|
+
npm run lint:eslint
|
|
105
|
+
|
|
106
|
+
# 仅运行 Oxlint
|
|
107
|
+
npm run lint:oxlint
|
|
108
|
+
|
|
109
|
+
# 格式化代码
|
|
110
|
+
npm run format
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### 类型检查
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
npm run type-check
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### 文档开发
|
|
120
|
+
|
|
121
|
+
```bash
|
|
122
|
+
# 启动文档开发服务器
|
|
123
|
+
npm run docs:dev
|
|
124
|
+
|
|
125
|
+
# 构建文档
|
|
126
|
+
npm run docs:build
|
|
127
|
+
|
|
128
|
+
# 预览构建后的文档
|
|
129
|
+
npm run docs:preview
|
|
81
130
|
```
|
|
82
131
|
|
|
83
132
|
## 项目结构
|
|
84
133
|
|
|
85
134
|
```
|
|
86
135
|
gy-ui-plus/
|
|
87
|
-
├── packages/
|
|
88
|
-
│ ├── index.ts
|
|
89
|
-
│ ├── withInstall.ts
|
|
90
|
-
│ ├──
|
|
91
|
-
│
|
|
92
|
-
├──
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
136
|
+
├── packages/ # 组件源码目录
|
|
137
|
+
│ ├── index.ts # 组件库入口文件
|
|
138
|
+
│ ├── withInstall.ts # 组件安装工具函数
|
|
139
|
+
│ ├── button/ # 按钮组件
|
|
140
|
+
│ │ ├── src/
|
|
141
|
+
│ │ │ ├── index.vue # 组件实现
|
|
142
|
+
│ │ │ └── type.ts # 类型定义
|
|
143
|
+
│ │ └── index.ts # 组件导出
|
|
144
|
+
│ ├── table/ # 增强表格组件
|
|
145
|
+
│ │ ├── src/
|
|
146
|
+
│ │ │ ├── index.vue # 主组件
|
|
147
|
+
│ │ │ ├── ColumnSet.vue # 列设置组件
|
|
148
|
+
│ │ │ ├── GyTableColumn.vue # 表格列组件
|
|
149
|
+
│ │ │ ├── operator.vue # 操作列组件
|
|
150
|
+
│ │ │ ├── renderCol.vue # 列渲染组件
|
|
151
|
+
│ │ │ ├── renderHeader.vue # 表头渲染组件
|
|
152
|
+
│ │ │ ├── singleEdit.vue # 单行编辑组件
|
|
153
|
+
│ │ │ ├── singleEditCell.vue # 单元格编辑组件
|
|
154
|
+
│ │ │ ├── tableProps.ts # 表格属性类型定义
|
|
155
|
+
│ │ │ ├── useExpose.ts # 组件暴露方法
|
|
156
|
+
│ │ │ └── useVirtualized.ts # 虚拟滚动逻辑
|
|
157
|
+
│ │ ├── style/
|
|
158
|
+
│ │ │ ├── index.ts # 样式导出
|
|
159
|
+
│ │ │ └── table.scss # 表格样式
|
|
160
|
+
│ │ └── index.ts # 组件导出
|
|
161
|
+
│ └── layout-page/ # 布局页面组件
|
|
162
|
+
│ ├── src/
|
|
163
|
+
│ │ └── index.vue # 组件实现
|
|
164
|
+
│ ├── style/
|
|
165
|
+
│ │ ├── index.ts # 样式导出
|
|
166
|
+
│ │ └── layout-page.scss # 布局样式
|
|
167
|
+
│ └── index.ts # 组件导出
|
|
168
|
+
├── typings/ # 全局类型定义
|
|
169
|
+
│ ├── env.d.ts # 环境变量类型
|
|
170
|
+
│ └── index.d.ts # 主类型定义
|
|
171
|
+
├── public/ # 静态资源目录
|
|
172
|
+
├── .editorconfig # 编辑器配置
|
|
173
|
+
├── .gitattributes # Git 属性配置
|
|
174
|
+
├── .gitignore # Git 忽略文件
|
|
175
|
+
├── .prettierignore # Prettier 忽略文件
|
|
176
|
+
├── .prettierrc.json # Prettier 配置
|
|
177
|
+
├── deploy.yml # 部署配置文件
|
|
178
|
+
├── eslint.config.ts # ESLint 配置
|
|
179
|
+
├── index.html # HTML 入口文件
|
|
180
|
+
├── package.json # 项目配置和依赖
|
|
181
|
+
├── README.md # 项目说明文档
|
|
182
|
+
├── tsconfig.app.json # 应用 TypeScript 配置
|
|
183
|
+
├── tsconfig.json # 主 TypeScript 配置
|
|
184
|
+
├── tsconfig.node.json # Node.js TypeScript 配置
|
|
185
|
+
└── vite.config.ts # Vite 构建配置
|
|
96
186
|
```
|
|
97
187
|
|
|
188
|
+
## 技术栈
|
|
189
|
+
|
|
190
|
+
- **框架**: Vue 3
|
|
191
|
+
- **UI 基础**: Element Plus
|
|
192
|
+
- **构建工具**: Vite
|
|
193
|
+
- **语言**: TypeScript
|
|
194
|
+
- **样式**: SCSS
|
|
195
|
+
- **代码规范**: ESLint + Prettier + Oxlint
|
|
196
|
+
|
|
98
197
|
## 许可证
|
|
99
198
|
|
|
100
199
|
MIT License
|
|
@@ -105,10 +204,7 @@ MIT License
|
|
|
105
204
|
|
|
106
205
|
## 联系方式
|
|
107
206
|
|
|
108
|
-
<!-- 如有问题或建议，欢迎通过以下方式联系： -->
|
|
109
|
-
|
|
110
207
|
- GitHub Issues: https://github.com/SKYE-iiii/gy-ui-plus/issues
|
|
111
|
-
<!-- - Email: -->
|
|
112
208
|
|
|
113
209
|
---
|
|
114
210
|
|