Skip to content

Commit ab148a9

Browse files
cklwblovecklwblove
committed
chore: 更新插件名称和版本，添加 Element Plus 依赖，修改 README 文档以反映新功能
1 parent 9367b37 commit ab148a9

File tree

7 files changed

+9136
-50
lines changed

7 files changed

+9136
-50
lines changed

‎README.md‎

Lines changed: 193 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,217 @@
1-
# winjs-plugin-example
1+
# winjs-plugin-element-plus
22

3-
Example plugin for WinJS.
3+
适配 WinJS 的 Element Plus 插件。
44

55
<p>
6-
<a href="https://npmjs.com/package/winjs-plugin-example">
7-
<img src="https://img.shields.io/npm/v/winjs-plugin-example?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
6+
<a href="https://npmjs.com/package/@winner-fed/plugin-element-plus">
7+
<img src="https://img.shields.io/npm/v/@winner-fed/plugin-element-plus?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
88
</a>
99
<img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
10-
<a href="https://npmcharts.com/compare/winjs-plugin-example?minimal=true"><img src="https://img.shields.io/npm/dm/winjs-plugin-example.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
10+
<a href="https://npmcharts.com/compare/@winner-fed/plugin-element-plus?minimal=true"><img src="https://img.shields.io/npm/dm/@winner-fed/plugin-element-plus.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
1111
</p>
1212

13-
## Usage
1413

15-
Install:
14+
## 功能介绍
15+
16+
`@winner-fed/plugin-element-plus` 是一个专为 WinJS 框架设计的 Element Plus 集成插件，提供了以下核心功能：
17+
18+
- 🚀 **自动导入**：基于 `unplugin-vue-components` 实现 Element Plus 组件的按需自动导入
19+
- 📦 **智能依赖检测**：自动检测项目中的 Element Plus 依赖并获取版本信息
20+
- ⚙️ **配置化管理**：支持通过 WinJS 配置文件进行插件配置
21+
- 🎯 **开箱即用**：无需手动导入组件，直接在模板中使用即可
22+
23+
## 安装
1624

1725
```bash
18-
npm add winjs-plugin-example -D
26+
# 使用 npm
27+
npm install @winner-fed/plugin-element-plus element-plus
28+
29+
# 使用 yarn
30+
yarn add @winner-fed/plugin-element-plus element-plus
31+
32+
# 使用 pnpm
33+
pnpm add @winner-fed/plugin-element-plus element-plus
1934
```
2035

21-
Add plugin to your `.winrc.ts`:
36+
## 基础配置
2237

23-
```ts
24-
// .winrc.ts
25-
export default {
26-
plugins: ['winjs-plugin-example'],
27-
// 开启配置
28-
example: {}
29-
};
38+
在 `.winrc.ts` 配置文件中启用插件：
39+
40+
```typescript
41+
import { defineConfig } from 'win';
42+
43+
export default defineConfig({
44+
plugins: ['@winner-fed/plugin-element-plus'],
45+
elementPlus: {
46+
// 插件配置选项（可选）
47+
}
48+
});
3049
```
3150

32-
## Options
51+
## 使用示例
3352

34-
### foo
53+
### 基础使用
3554

36-
Some description.
55+
配置完成后，您可以直接在 Vue 组件中使用 Element Plus 组件，无需手动导入：
3756

38-
- Type: `string`
39-
- Default: `undefined`
40-
- Example:
57+
```vue
58+
<template>
59+
<div>
60+
<el-button type="primary">主要按钮</el-button>
61+
<el-input v-model="inputValue" placeholder="请输入内容"></el-input>
62+
<el-message-box>消息提示</el-message-box>
63+
</div>
64+
</template>
4165
42-
```js
43-
export default {
44-
plugins: ['winjs-plugin-example'],
45-
// 开启配置
46-
example: {
47-
foo: 'bar'
48-
}
66+
<script setup>
67+
import { ref } from 'vue';
68+
69+
const inputValue = ref('');
70+
</script>
71+
```
72+
73+
### 样式导入
74+
75+
对于某些特殊组件（如 MessageBox），您可能需要手动导入样式：
76+
77+
```vue
78+
<script setup>
79+
// 手动导入样式
80+
import 'element-plus/es/components/message-box/style/css'
81+
import { ElMessageBox } from 'element-plus';
82+
83+
ElMessageBox.confirm('确定要关闭吗？')
84+
.then(() => {
85+
// 确认操作
86+
})
87+
.catch(() => {
88+
// 取消操作
89+
});
90+
</script>
91+
```
92+
93+
### 完整示例
94+
95+
```vue
96+
<template>
97+
<div class="demo-container">
98+
<h2>Element Plus 组件示例</h2>
99+
100+
<!-- 按钮组件 -->
101+
<el-row :gutter="20">
102+
<el-col :span="6">
103+
<el-button>默认按钮</el-button>
104+
</el-col>
105+
<el-col :span="6">
106+
<el-button type="primary">主要按钮</el-button>
107+
</el-col>
108+
<el-col :span="6">
109+
<el-button type="success">成功按钮</el-button>
110+
</el-col>
111+
<el-col :span="6">
112+
<el-button type="warning">警告按钮</el-button>
113+
</el-col>
114+
</el-row>
115+
116+
<!-- 表单组件 -->
117+
<el-form :model="form" label-width="120px">
118+
<el-form-item label="用户名">
119+
<el-input v-model="form.username"></el-input>
120+
</el-form-item>
121+
<el-form-item label="邮箱">
122+
<el-input v-model="form.email"></el-input>
123+
</el-form-item>
124+
<el-form-item>
125+
<el-button type="primary" @click="submitForm">提交</el-button>
126+
</el-form-item>
127+
</el-form>
128+
129+
<!-- 表格组件 -->
130+
<el-table :data="tableData" style="width: 100%">
131+
<el-table-column prop="name" label="姓名"></el-table-column>
132+
<el-table-column prop="email" label="邮箱"></el-table-column>
133+
<el-table-column prop="role" label="角色"></el-table-column>
134+
</el-table>
135+
</div>
136+
</template>
137+
138+
<script setup>
139+
import { ref } from 'vue';
140+
141+
const form = ref({
142+
username: '',
143+
email: ''
144+
});
145+
146+
const tableData = ref([
147+
{ name: '张三', email: '[email protected]', role: '管理员' },
148+
{ name: '李四', email: '[email protected]', role: '用户' },
149+
{ name: '王五', email: '[email protected]', role: '用户' }
150+
]);
151+
152+
const submitForm = () => {
153+
console.log('提交表单:', form.value);
49154
};
155+
</script>
156+
157+
<style scoped>
158+
.demo-container {
159+
padding: 20px;
160+
}
161+
162+
.el-row {
163+
margin-bottom: 20px;
164+
}
165+
166+
.el-form {
167+
margin: 20px 0;
168+
}
169+
</style>
50170
```
51171

52-
## License
172+
## 配置选项
173+
174+
插件支持以下配置选项：
175+
176+
```typescript
177+
interface ElementPlusConfig {
178+
// 目前插件使用默认配置，未来可能会扩展更多选项
179+
}
180+
```
181+
182+
## 依赖要求
183+
184+
- **Element Plus**: `^2.3.8`
185+
- **Vue**: `^3.0.0`
186+
- **WinJS**: 最新版本
187+
188+
## 工作原理
189+
190+
1. **依赖检测**：插件启动时会自动检测项目中的 Element Plus 依赖
191+
2. **版本获取**：读取 Element Plus 的版本信息并存储到应用数据中
192+
3. **自动导入配置**：使用 `ElementPlusResolver` 配置自动导入规则
193+
4. **按需加载**：只有在模板中使用的组件才会被打包到最终产物中
194+
195+
## 注意事项
196+
197+
1. 确保项目中已正确安装 Element Plus 依赖
198+
2. 某些特殊组件（如 MessageBox）的样式可能需要手动导入
199+
3. 插件会自动处理组件的按需导入，无需手动配置 babel 插件
200+
4. 支持 TypeScript，提供完整的类型支持
201+
202+
## 故障排除
203+
204+
### 常见问题
205+
206+
**Q: 提示找不到 Element Plus 包？**
207+
A: 确保已正确安装 Element Plus：`npm install element-plus`
208+
209+
**Q: 组件样式没有生效？**
210+
A: 某些组件可能需要手动导入样式，参考上面的样式导入示例
211+
212+
**Q: TypeScript 类型报错？**
213+
A: 确保项目中安装了 `@types/element-plus` 或 Element Plus 内置的类型声明
214+
215+
## 许可证
53216

54217
[MIT](./LICENSE).

‎package.json‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "winjs-plugin-template",
2+
"name": "@winner-fed/plugin-element-plus",
33
"keywords": [
44
"winjs",
55
"plugin",
@@ -11,10 +11,10 @@
1111
"typescript",
1212
"biome"
1313
],
14-
"version": "0.0.0",
14+
"version": "1.0.0",
1515
"repository": {
1616
"type": "git",
17-
"url": "git+https://github.com/winjs-dev/winjs-plugin-template.git"
17+
"url": "git+https://github.com/winjs-dev/winjs-plugin-element-plus.git"
1818
},
1919
"license": "MIT",
2020
"type": "module",
@@ -52,13 +52,16 @@
5252
"@winner-fed/winjs": "*",
5353
"playwright": "^1.53.2",
5454
"simple-git-hooks": "^2.13.0",
55-
"typescript": "^5.8.3"
55+
"typescript": "^5.8.3",
56+
"unplugin-vue-components": "28.4.1"
5657
},
5758
"peerDevDependencies": {
58-
"@winner-fed/winjs": "*"
59+
"@winner-fed/winjs": "*",
60+
"unplugin-vue-components": "28.4.1"
5961
},
6062
"peerDependencies": {
61-
"@winner-fed/utils": "*"
63+
"@winner-fed/utils": "*",
64+
"element-plus": "^2.3.8"
6265
},
6366
"peerDependenciesMeta": {
6467
"@rsbuild/core": {

‎playground/.winrc.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { defineConfig } from 'win';
22

33
export default defineConfig({
44
plugins: ['../src'],
5-
example: {
6-
foo: 'bar',
7-
},
5+
elementPlus: {},
6+
mfsu: false
87
});

‎playground/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@
1111
"preview": "win preview"
1212
},
1313
"dependencies": {
14-
"@winner-fed/winjs": "*"
14+
"@winner-fed/winjs": "*",
15+
"element-plus": "^2.3.8"
1516
},
1617
"devDependencies": {
17-
"typescript": "^5.0.3"
18+
"typescript": "^5.0.3",
19+
"unplugin-vue-components": "^28.4.1"
1820
}
1921
}

‎playground/src/pages/index.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,26 @@
1+
<script setup>
2+
// 需手动引入样式
3+
import 'element-plus/es/components/message-box/style/css'
4+
import { ElMessageBox } from 'element-plus';
5+
6+
ElMessageBox.confirm('Are you sure to close this dialog?')
7+
.then(() => {
8+
9+
})
10+
.catch(() => {
11+
// catch error
12+
})
13+
14+
const aa = ref(1)
15+
</script>
116
<template>
217
<div>
318
<h2>Hi! Welcome to Winjs ❤️ Vue!</h2>
419
<p>
520
<img src="@/assets/img/logo.png" width="200" height="200" alt="logo" />
621
</p>
22+
<p><el-button type="primary">我是 element-plus 的 Button</el-button></p>
23+
<p>{{aa}}</p>
724
<p>To get started, edit <code>pages/index.vue</code> and save to reload.</p>
825
</div>
926
</template>

0 commit comments

Comments
 (0)