40f0ba71f5
Migration Summary: ant-design-vue → antdv-next Core Changes package.json - Replaced "ant-design-vue": "catalog:" with "antdv-next": "catalog:" bootstrap.ts - Changed @vben/styles/antd to @vben/styles/antdv-next adapter/component/index.ts - Major rewrite: Removed dynamic defineAsyncComponent imports from ant-design-vue/es/... Added static imports from antdv-next main entry Renamed RangePicker → DateRangePicker, Textarea → TextArea Defined local types for Rule, Locale, UploadRequestOption, FileType, Key Bulk Import Replacements (100+ files) from ant-design-vue → from antdv-next from ant-design-vue/es/locale/... → from antdv-next/locale/... from ant-design-vue/es/... → removed (use main entry) from ant-design-vue/lib/... → removed (use main entry) Component API Differences Handled ant-design-vue antdv-next Files affected Form.Item FormItem 475 references Tabs.TabPane TabPane 240 references Select.Option SelectOption 151 references Descriptions.Item DescriptionsItem 2 references Timeline.Item TimelineItem 2 references Radio.Group RadioGroup 20 references Collapse.Panel CollapsePanel 9 references Layout.Content/Sider/Header/Footer LayoutContent/LayoutSider/... 14 references Dropdown#overlay slot Dropdown#popupRender 6 references RangePicker DateRangePicker 15+ references Textarea TextArea 37 references ButtonGroup Space (fallback) 12 references Known Issues (requires manual attention) List component - Not available in antdv-next. 4 files have TODO comments where List/List.Item/List.Item.Meta are used @form-create/ant-design-vue - Kept as-is (compatible with antdv-next at runtime) Type errors - ~366 type errors remain (vs 189 in web-antd), mostly pre-existing business logic issues and minor API differences
103 lines
2.2 KiB
TypeScript
103 lines
2.2 KiB
TypeScript
import type { App } from 'vue';
|
|
|
|
import formCreate from '@form-create/ant-design-vue';
|
|
import install from '@form-create/ant-design-vue/auto-import';
|
|
import FcDesigner from '@form-create/antd-designer';
|
|
// 👇使用 form-create 需额外全局引入 ant-design-vue 组件
|
|
import {
|
|
Alert,
|
|
Badge,
|
|
Card,
|
|
Collapse,
|
|
CollapsePanel,
|
|
ConfigProvider,
|
|
Divider,
|
|
Dropdown,
|
|
Image,
|
|
Layout,
|
|
LayoutContent,
|
|
LayoutFooter,
|
|
LayoutHeader,
|
|
LayoutSider,
|
|
Menu,
|
|
MenuDivider,
|
|
MenuItem,
|
|
message,
|
|
Popconfirm,
|
|
Table,
|
|
TableColumn,
|
|
TabPane,
|
|
Tabs,
|
|
Tag,
|
|
Transfer,
|
|
} from 'antdv-next';
|
|
|
|
// ======================= 自定义组件 =======================
|
|
import { useApiSelect } from '#/components/form-create';
|
|
import AreaSelect from '#/components/form-create/components/area-select.vue';
|
|
import DeptSelect from '#/components/form-create/components/dept-select.vue';
|
|
import DictSelect from '#/components/form-create/components/dict-select.vue';
|
|
import IframeComponent from '#/components/form-create/components/iframe.vue';
|
|
import { useImagesUpload } from '#/components/form-create/components/use-images-upload';
|
|
import { Tinymce } from '#/components/tinymce';
|
|
import { FileUpload, ImageUpload } from '#/components/upload';
|
|
|
|
const UserSelect = useApiSelect({
|
|
name: 'UserSelect',
|
|
labelField: 'nickname',
|
|
valueField: 'id',
|
|
url: '/system/user/simple-list',
|
|
});
|
|
const ApiSelect = useApiSelect({
|
|
name: 'ApiSelect',
|
|
});
|
|
const ImagesUpload = useImagesUpload();
|
|
|
|
const components = [
|
|
Alert,
|
|
Badge,
|
|
Card,
|
|
Collapse,
|
|
CollapsePanel,
|
|
ConfigProvider,
|
|
Divider,
|
|
Dropdown,
|
|
Image,
|
|
Layout,
|
|
LayoutContent,
|
|
LayoutFooter,
|
|
LayoutHeader,
|
|
LayoutSider,
|
|
Menu,
|
|
MenuDivider,
|
|
MenuItem,
|
|
Popconfirm,
|
|
Table,
|
|
TableColumn,
|
|
TabPane,
|
|
Tabs,
|
|
Tag,
|
|
Transfer,
|
|
UserSelect,
|
|
DeptSelect,
|
|
ApiSelect,
|
|
ImagesUpload,
|
|
DictSelect,
|
|
Tinymce,
|
|
ImageUpload,
|
|
FileUpload,
|
|
IframeComponent,
|
|
AreaSelect,
|
|
];
|
|
|
|
// 参考 https://www.form-create.com/v3/ant-design-vue/auto-import 文档
|
|
export function setupFormCreate(app: App) {
|
|
components.forEach((component) => {
|
|
app.component(component.name as string, component);
|
|
});
|
|
app.component('AMessage', message);
|
|
formCreate.use(install);
|
|
app.use(formCreate);
|
|
app.use(FcDesigner);
|
|
}
|