Skip to content

Commit 6c323a7

Browse files
committed
chore: 更新 README 和代码,支持 Ant Design Vue >= 2.2.0-beta.6,添加版本兼容性检查
1 parent 97ef6c6 commit 6c323a7

File tree

2 files changed

+153
-18
lines changed

2 files changed

+153
-18
lines changed

README.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
- 🚀 **自动导入组件** - 无需手动导入,直接使用 Ant Design Vue 组件
1616
- 🎨 **自动导入样式** - 自动处理样式文件的导入
17-
- 📦 **版本兼容** - 支持 Ant Design Vue 1.x 和 4.x 版本
17+
- 📦 **版本兼容** - 支持 Ant Design Vue >= 2.2.0-beta.6 版本
1818
- 🔧 **智能检测** - 自动检测项目中的依赖版本
1919
-**按需加载** - 只导入使用的组件,减小打包体积
2020

@@ -83,15 +83,14 @@ export default defineConfig({
8383

8484
## 依赖要求
8585

86-
- `ant-design-vue`: ^4.0.0
86+
- `ant-design-vue`: ^2.2.0-beta.6
8787
- `vue`: ^3.0.0
8888

8989
## 版本兼容性
9090

9191
| 插件版本 | Ant Design Vue 版本 | Vue 版本 |
9292
|---------|-------------------|----------|
93-
| ^1.0.0 | ^4.0.0 | ^3.0.0 |
94-
| ^1.0.0 | ^1.x | ^2.0.0 |
93+
| ^1.0.0 | ^2.2.0-beta.6 | ^3.0.0 |
9594

9695
## 工作原理
9796

src/index.ts

Lines changed: 150 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,16 @@ import { deepmerge, resolve } from '@winner-fed/utils';
33
import type { IApi } from '@winner-fed/winjs';
44
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
55

6-
function resolveProjectDep(opts: { pkg: any; cwd: string; dep: string }) {
6+
interface PackageJson {
7+
dependencies?: Record<string, string>;
8+
devDependencies?: Record<string, string>;
9+
}
10+
11+
function resolveProjectDep(opts: {
12+
pkg: PackageJson;
13+
cwd: string;
14+
dep: string;
15+
}) {
716
if (
817
opts.pkg.dependencies?.[opts.dep] ||
918
opts.pkg.devDependencies?.[opts.dep]
@@ -16,6 +25,64 @@ function resolveProjectDep(opts: { pkg: any; cwd: string; dep: string }) {
1625
}
1726
}
1827

28+
function compareVersion(version: string, targetVersion: string): number {
29+
const parseVersion = (v: string) => {
30+
// 解析版本号,处理 beta/alpha/rc 等预发布版本
31+
const match = v.match(/^(\d+)\.(\d+)\.(\d+)(?:-(.+?)\.(\d+))?/);
32+
if (!match)
33+
return { major: 0, minor: 0, patch: 0, prerelease: '', prereleaseNum: 0 };
34+
35+
return {
36+
major: parseInt(match[1], 10),
37+
minor: parseInt(match[2], 10),
38+
patch: parseInt(match[3], 10),
39+
prerelease: match[4] || '',
40+
prereleaseNum: parseInt(match[5] || '0', 10),
41+
};
42+
};
43+
44+
const v1 = parseVersion(version);
45+
const v2 = parseVersion(targetVersion);
46+
47+
// 比较主版本号
48+
if (v1.major !== v2.major) return v1.major - v2.major;
49+
// 比较次版本号
50+
if (v1.minor !== v2.minor) return v1.minor - v2.minor;
51+
// 比较修订版本号
52+
if (v1.patch !== v2.patch) return v1.patch - v2.patch;
53+
54+
// 如果都没有预发布版本,则相等
55+
if (!v1.prerelease && !v2.prerelease) return 0;
56+
57+
// 正式版本大于预发布版本
58+
if (!v1.prerelease && v2.prerelease) return 1;
59+
if (v1.prerelease && !v2.prerelease) return -1;
60+
61+
// 比较预发布版本
62+
if (v1.prerelease !== v2.prerelease) {
63+
return v1.prerelease.localeCompare(v2.prerelease);
64+
}
65+
66+
// 比较预发布版本号
67+
return v1.prereleaseNum - v2.prereleaseNum;
68+
}
69+
70+
function checkVersionCompatibility(version: string) {
71+
const minRequiredVersion = '2.2.0-beta.6';
72+
73+
// 检查是否满足最低版本要求
74+
if (compareVersion(version, minRequiredVersion) < 0) {
75+
console.warn(
76+
`[winjs-plugin-antdv] 警告:当前 ant-design-vue 版本 (${version}) 不支持 AntDesignVueResolver。\n` +
77+
`AntDesignVueResolver 需要 ant-design-vue@${minRequiredVersion} 或更高版本。\n` +
78+
`请升级您的 ant-design-vue 版本:npm install ant-design-vue@latest`,
79+
);
80+
return false;
81+
}
82+
83+
return true;
84+
}
85+
1986
export default (api: IApi) => {
2087
let pkgPath: string = '';
2188
try {
@@ -25,11 +92,7 @@ export default (api: IApi) => {
2592
cwd: api.cwd,
2693
dep: 'ant-design-vue',
2794
}) || dirname(require.resolve('ant-design-vue/package.json'));
28-
} catch (e) {
29-
throw new Error(
30-
`Can't find ant-design-vue package. Please install antd first.`,
31-
);
32-
}
95+
} catch (_) {}
3396

3497
function checkPkgPath() {
3598
if (!pkgPath) {
@@ -40,10 +103,11 @@ export default (api: IApi) => {
40103
}
41104

42105
const antdvVersion = require(`${pkgPath}/package.json`).version;
43-
const isAntdv2 = antdvVersion?.startsWith('1.');
44106

45107
api.modifyAppData((memo) => {
46108
checkPkgPath();
109+
// 检查版本兼容性
110+
checkVersionCompatibility(antdvVersion);
47111
memo.antdv = {
48112
pkgPath,
49113
version: antdvVersion,
@@ -55,19 +119,91 @@ export default (api: IApi) => {
55119
key: 'antdv',
56120
config: {
57121
schema({ zod }) {
58-
return zod.object({});
122+
return zod
123+
.object({
124+
exclude: zod
125+
.array(zod.string())
126+
.describe(
127+
'排除自动导入的组件列表。数组元素为组件名称(不含前缀),如 ["Button", "Input"]。被排除的组件需要手动导入。',
128+
)
129+
.default([])
130+
.optional(),
131+
importStyle: zod
132+
.union([
133+
zod.boolean(),
134+
zod.literal('css'),
135+
zod.literal('less'),
136+
zod.literal('css-in-js'),
137+
])
138+
.describe(
139+
'样式导入方式。true 或 "css" 导入编译后的 CSS 文件,"less" 导入 Less 源文件以支持主题定制,"css-in-js" 导入 CSS-in-JS 样式,false 不自动导入样式。默认为 "css"。',
140+
)
141+
.optional(),
142+
resolveIcons: zod
143+
.boolean()
144+
.describe(
145+
'是否自动解析和导入 Ant Design Vue 的图标组件。设为 true 时,将自动解析并导入图标组件,无需手动导入。需要安装 @ant-design/icons-vue 包。默认为 false。',
146+
)
147+
.default(false)
148+
.optional(),
149+
cjs: zod
150+
.boolean()
151+
.describe(
152+
'是否使用 CommonJS 构建版本。设为 true 时使用 CommonJS 构建,false 使用 ES 模块构建。默认为 false。',
153+
)
154+
.default(false)
155+
.optional(),
156+
packageName: zod
157+
.string()
158+
.describe(
159+
'重命名包名。用于指定 ant-design-vue 包的别名或自定义包名。默认为 "ant-design-vue"。',
160+
)
161+
.default('ant-design-vue')
162+
.optional(),
163+
prefix: zod
164+
.string()
165+
.describe(
166+
'组件名称前缀。默认为 "A",对应 "AButton"、"AInput" 等组件名。如需自定义可修改此配置。',
167+
)
168+
.default('A')
169+
.optional(),
170+
})
171+
.describe(
172+
'Ant Design Vue 自动导入插件配置。集成 unplugin-vue-components 的 AntDesignVueResolver,提供 Ant Design Vue 组件和样式的按需自动导入功能,支持 Vue2 和 Vue3 版本。',
173+
)
174+
.optional()
175+
.default({});
59176
},
60177
},
61178
enableBy: api.EnableBy.config,
62179
});
63180

64-
const unComponents = {
65-
resolvers: [
66-
AntDesignVueResolver({
67-
// vue2 为 true
68-
importStyle: isAntdv2,
181+
// 获取用户配置,如果没有配置则使用默认值
182+
const userConfig = api.config.antdv || {};
183+
const resolverConfig = {
184+
// 排除的组件列表:默认为空数组
185+
...(userConfig.exclude &&
186+
userConfig.exclude.length > 0 && { exclude: userConfig.exclude }),
187+
// 样式导入方式:用户配置优先,否则使用默认值 'css'
188+
importStyle:
189+
userConfig.importStyle !== undefined ? userConfig.importStyle : 'css',
190+
// 是否解析图标:默认为 false
191+
resolveIcons:
192+
userConfig.resolveIcons !== undefined ? userConfig.resolveIcons : false,
193+
// 是否使用 CommonJS:默认为 false
194+
...(userConfig.cjs !== undefined && { cjs: userConfig.cjs }),
195+
// 包名:默认为 'ant-design-vue'
196+
...(userConfig.packageName &&
197+
userConfig.packageName !== 'ant-design-vue' && {
198+
packageName: userConfig.packageName,
69199
}),
70-
],
200+
// 组件前缀:默认为 'A'
201+
...(userConfig.prefix &&
202+
userConfig.prefix !== 'A' && { prefix: userConfig.prefix }),
203+
};
204+
205+
const unComponents = {
206+
resolvers: [AntDesignVueResolver(resolverConfig)],
71207
};
72208

73209
api.userConfig.autoImport = deepmerge(

0 commit comments

Comments
 (0)