@qynpm/ui 0.0.2
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 +137 -0
- package/dist/ui.es.js +994 -0
- package/dist/ui.umd.js +2 -0
- package/index.d.ts +20 -0
- package/index.js +9 -0
- package/package.json +59 -0
package/README.md
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
# @qynpm/ui
|
|
2
|
+
|
|
3
|
+
起印体系内抽离出来的 Vue 3 UI 组件包，当前主要包含上传组件和弹窗组件。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @qynpm/ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Peer Dependencies：
|
|
12
|
+
|
|
13
|
+
- `vue >= 3.4`
|
|
14
|
+
- `element-plus >= 2.0`
|
|
15
|
+
- `@element-plus/icons-vue >= 2.0`
|
|
16
|
+
- `@vueuse/core >= 10.0`
|
|
17
|
+
- `clsx >= 2.0`
|
|
18
|
+
|
|
19
|
+
## 注册
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
import { createApp } from 'vue'
|
|
23
|
+
import ElementPlus from 'element-plus'
|
|
24
|
+
import QyUI from '@qynpm/ui'
|
|
25
|
+
|
|
26
|
+
const app = createApp(App)
|
|
27
|
+
|
|
28
|
+
app.use(ElementPlus)
|
|
29
|
+
app.use(QyUI)
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
也可以按需引入：
|
|
33
|
+
|
|
34
|
+
```ts
|
|
35
|
+
import { Upload, QyDialog } from '@qynpm/ui'
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## 组件说明
|
|
39
|
+
|
|
40
|
+
### `Upload`
|
|
41
|
+
|
|
42
|
+
上传组件，支持：
|
|
43
|
+
|
|
44
|
+
- 图片上传
|
|
45
|
+
- 视频上传
|
|
46
|
+
- 粘贴上传
|
|
47
|
+
- 拖拽上传
|
|
48
|
+
- 文本备注
|
|
49
|
+
- 预览
|
|
50
|
+
|
|
51
|
+
当前可配置项里，和宿主耦合最强的是上传配置：
|
|
52
|
+
|
|
53
|
+
- `api`
|
|
54
|
+
- `tokenKey`
|
|
55
|
+
- `name`
|
|
56
|
+
|
|
57
|
+
其中：
|
|
58
|
+
|
|
59
|
+
- `api` 为必填
|
|
60
|
+
- `tokenKey` 不传时默认使用 `Admin-Token`
|
|
61
|
+
- `name` 不传时默认使用 `file`
|
|
62
|
+
|
|
63
|
+
### `QyDialog`
|
|
64
|
+
|
|
65
|
+
弹窗组件，支持：
|
|
66
|
+
|
|
67
|
+
- 默认头部/底部布局
|
|
68
|
+
- 全屏切换
|
|
69
|
+
- 最小化
|
|
70
|
+
- 自定义 footer
|
|
71
|
+
- 移动端自动全屏
|
|
72
|
+
|
|
73
|
+
## 样式说明
|
|
74
|
+
|
|
75
|
+
- 包内样式会跟随构建产物一起注入
|
|
76
|
+
- 宿主仍然需要自行引入 `element-plus/dist/index.css`
|
|
77
|
+
- 当前组件内部仍然依赖宿主提供的 Tailwind / Iconify 体系能力
|
|
78
|
+
|
|
79
|
+
## 使用示例
|
|
80
|
+
|
|
81
|
+
### Upload
|
|
82
|
+
|
|
83
|
+
```vue
|
|
84
|
+
<template>
|
|
85
|
+
<Upload
|
|
86
|
+
api="/permission-api/common/uploads"
|
|
87
|
+
token-key="Admin-Token"
|
|
88
|
+
@change="handleChange"
|
|
89
|
+
/>
|
|
90
|
+
</template>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### QyDialog
|
|
94
|
+
|
|
95
|
+
```vue
|
|
96
|
+
<template>
|
|
97
|
+
<QyDialog title="标题" @confirm="handleConfirm">
|
|
98
|
+
内容区域
|
|
99
|
+
</QyDialog>
|
|
100
|
+
</template>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## 说明
|
|
104
|
+
|
|
105
|
+
- 当前版本更适合体系内拆包复用
|
|
106
|
+
- 上传默认值仍然保留了现有项目约定，后续如果完全独立对外，可以再继续抽离
|
|
107
|
+
|
|
108
|
+
## 当前联调说明
|
|
109
|
+
|
|
110
|
+
当前 workspace 联调由顶层 Vite 开关统一控制，不再要求在 `UI` 或 `form` 内手动切换 import。
|
|
111
|
+
|
|
112
|
+
开关位置：
|
|
113
|
+
|
|
114
|
+
- [vite.config.ts](/vite.config.ts)
|
|
115
|
+
|
|
116
|
+
当前配置：
|
|
117
|
+
|
|
118
|
+
```ts
|
|
119
|
+
const ENABLE_LOCAL_QIYIN_DEBUG = true
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
规则如下：
|
|
123
|
+
|
|
124
|
+
1. 当值为 `true` 时
|
|
125
|
+
- `@qynpm/ui` 映射到本地 [@qiyin/UI/lib/index.js](/@qiyin/UI/lib/index.js)
|
|
126
|
+
- `@qynpm/form` / `@qiyin/form` 映射到本地 [@qiyin/form/index.ts](/@qiyin/form/index.ts)
|
|
127
|
+
- 消费项目开发时可以直接联调 `UI` 与 `form`
|
|
128
|
+
|
|
129
|
+
2. 当值为 `false` 时
|
|
130
|
+
- 走各自包的正常入口
|
|
131
|
+
- 行为更接近线上
|
|
132
|
+
|
|
133
|
+
如果切换开关后页面报 `Outdated Optimize Dep`：
|
|
134
|
+
|
|
135
|
+
1. 停掉当前 dev 服务
|
|
136
|
+
2. 清理消费项目的 `node_modules/.vite`
|
|
137
|
+
3. 重新启动
|