diff --git a/src/api/infra/demo/demo01/index.ts b/src/api/infra/demo/demo01/index.ts
new file mode 100644
index 00000000..1a389c28
--- /dev/null
+++ b/src/api/infra/demo/demo01/index.ts
@@ -0,0 +1,31 @@
+import { defHttp } from '@/utils/http/axios'
+
+// 查询示例联系人列表
+export function getDemo01ContactPage(params) {
+ return defHttp.get({ url: '/infra/demo01-contact/page', params })
+}
+
+// 查询示例联系人详情
+export function getDemo01Contact(id: number) {
+ return defHttp.get({ url: `/infra/demo01-contact/get?id=${id}` })
+}
+
+// 新增示例联系人
+export function createDemo01Contact(data) {
+ return defHttp.post({ url: '/infra/demo01-contact/create', data })
+}
+
+// 修改示例联系人
+export function updateDemo01Contact(data) {
+ return defHttp.put({ url: '/infra/demo01-contact/update', data })
+}
+
+// 删除示例联系人
+export function deleteDemo01Contact(id: number) {
+ return defHttp.delete({ url: `/infra/demo01-contact/delete?id=${id}` })
+}
+
+// 导出示例联系人 Excel
+export function exportDemo01Contact(params) {
+ return defHttp.download({ url: '/infra/demo01-contact/export-excel', params }, '示例联系人.xls')
+}
diff --git a/src/api/infra/demo/demo02/index.ts b/src/api/infra/demo/demo02/index.ts
new file mode 100644
index 00000000..0ad69328
--- /dev/null
+++ b/src/api/infra/demo/demo02/index.ts
@@ -0,0 +1,31 @@
+import { defHttp } from '@/utils/http/axios'
+
+// 查询示例分类列表
+export function getDemo02CategoryPage(params) {
+ return defHttp.get({ url: '/infra/demo02-category/page', params })
+}
+
+// 查询示例分类详情
+export function getDemo02Category(id: number) {
+ return defHttp.get({ url: `/infra/demo02-category/get?id=${id}` })
+}
+
+// 新增示例分类
+export function createDemo02Category(data) {
+ return defHttp.post({ url: '/infra/demo02-category/create', data })
+}
+
+// 修改示例分类
+export function updateDemo02Category(data) {
+ return defHttp.put({ url: '/infra/demo02-category/update', data })
+}
+
+// 删除示例分类
+export function deleteDemo02Category(id: number) {
+ return defHttp.delete({ url: `/infra/demo02-category/delete?id=${id}` })
+}
+
+// 导出示例分类 Excel
+export function exportDemo02Category(params) {
+ return defHttp.download({ url: '/infra/demo02-category/export-excel', params }, '示例分类.xls')
+}
diff --git a/src/views/infra/demo/demo01/Demo01ContactModal.vue b/src/views/infra/demo/demo01/Demo01ContactModal.vue
new file mode 100644
index 00000000..eec869e9
--- /dev/null
+++ b/src/views/infra/demo/demo01/Demo01ContactModal.vue
@@ -0,0 +1,59 @@
+
+
+
+
+
+
diff --git a/src/views/infra/demo/demo01/demo01Contact.data.ts b/src/views/infra/demo/demo01/demo01Contact.data.ts
new file mode 100644
index 00000000..cab1f7f0
--- /dev/null
+++ b/src/views/infra/demo/demo01/demo01Contact.data.ts
@@ -0,0 +1,179 @@
+import type { BasicColumn, FormSchema } from '@/components/Table'
+import { useRender } from '@/components/Table'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+
+export const columns: BasicColumn[] = [
+ {
+ title: '编号',
+ dataIndex: 'id',
+ width: 80
+ },
+ {
+ title: '名字',
+ dataIndex: 'name',
+ width: 160
+ },
+ {
+ title: '性别',
+ dataIndex: 'sex',
+ width: 80,
+ customRender: ({ text }) => {
+ return useRender.renderDict(text, DICT_TYPE.SYSTEM_USER_SEX)
+ }
+ },
+ {
+ title: '出生年',
+ dataIndex: 'birthday',
+ width: 180,
+ customRender: ({ text }) => {
+ return useRender.renderDate(text)
+ }
+ },
+ {
+ title: '简介',
+ dataIndex: 'description',
+ width: 180
+ },
+ {
+ title: '头像',
+ dataIndex: 'avatar',
+ width: 120,
+ customRender: ({ text }) => {
+ return useRender.renderImg(text)
+ }
+ },
+ {
+ title: '创建时间',
+ dataIndex: 'createTime',
+ width: 180,
+ customRender: ({ text }) => {
+ return useRender.renderDate(text)
+ }
+ }
+]
+
+export const searchFormSchema: FormSchema[] = [
+ {
+ label: '名字',
+ field: 'name',
+ component: 'Input',
+ colProps: { span: 8 }
+ },
+ {
+ label: '性别',
+ field: 'sex',
+ component: 'Select',
+ componentProps: {
+ options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX)
+ },
+ colProps: { span: 8 }
+ },
+ {
+ label: '创建时间',
+ field: 'createTime',
+ component: 'RangePicker',
+ colProps: { span: 8 }
+ }
+]
+
+export const createFormSchema: FormSchema[] = [
+ {
+ label: '编号',
+ field: 'id',
+ show: false,
+ component: 'Input'
+ },
+ {
+ label: '名字',
+ field: 'name',
+ required: true,
+ component: 'Input'
+ },
+ {
+ label: '性别',
+ field: 'sex',
+ required: true,
+ component: 'RadioGroup',
+ componentProps: {
+ options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX)
+ }
+ },
+ {
+ label: '出生年月',
+ field: 'birthday',
+ required: true,
+ component: 'DatePicker',
+ componentProps: {
+ showTime: true,
+ format: 'YYYY-MM-DD',
+ valueFormat: 'x'
+ }
+ },
+ {
+ label: '简介',
+ field: 'description',
+ required: true,
+ component: 'Editor'
+ },
+ {
+ label: '头像',
+ field: 'avatar',
+ required: true,
+ component: 'FileUpload',
+ componentProps: {
+ fileType: 'image',
+ maxCount: 1
+ }
+ }
+]
+
+export const updateFormSchema: FormSchema[] = [
+ {
+ label: '编号',
+ field: 'id',
+ show: false,
+ component: 'Input'
+ },
+ {
+ label: '名字',
+ field: 'name',
+ required: true,
+ component: 'Input'
+ },
+ {
+ label: '性别',
+ field: 'sex',
+ required: true,
+ component: 'RadioGroup',
+ componentProps: {
+ options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX)
+ }
+ },
+ {
+ label: '出生年',
+ field: 'birthday',
+ required: true,
+ component: 'DatePicker',
+ componentProps: {
+ showTime: true,
+ format: 'YYYY-MM-DD',
+ valueFormat: 'x'
+ }
+ },
+ {
+ label: '简介',
+ field: 'description',
+ required: true,
+ component: 'Editor'
+ },
+ {
+ label: '头像',
+ field: 'avatar',
+ required: true,
+ component: 'FileUpload',
+ componentProps: {
+ fileType: 'image',
+ maxCount: 1
+ }
+ }
+]
diff --git a/src/views/infra/demo/demo01/index.vue b/src/views/infra/demo/demo01/index.vue
index dcf90705..1cba8afa 100644
--- a/src/views/infra/demo/demo01/index.vue
+++ b/src/views/infra/demo/demo01/index.vue
@@ -1,17 +1,93 @@
+import Demo01ContactModal from './Demo01ContactModal.vue'
+import { columns, searchFormSchema } from './demo01Contact.data'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+import { useModal } from '@/components/Modal'
+import { BasicTable, TableAction, useTable } from '@/components/Table'
+import { deleteDemo01Contact, exportDemo01Contact, getDemo01ContactPage } from '@/api/infra/demo/demo01'
+import { IconEnum } from '@/enums/appEnum'
+defineOptions({ name: 'Demo01Contact' })
+
+const { t } = useI18n()
+const { createConfirm, createMessage } = useMessage()
+const [registerModal, { openModal }] = useModal()
+
+const [registerTable, { getForm, reload }] = useTable({
+ title: '示例联系人列表',
+ api: getDemo01ContactPage,
+ columns,
+ formConfig: { labelWidth: 120, schemas: searchFormSchema },
+ useSearchForm: true,
+ showTableSetting: true,
+ showIndexColumn: false,
+ actionColumn: {
+ width: 140,
+ title: t('common.action'),
+ dataIndex: 'action',
+ fixed: 'right'
+ }
+})
+
+function handleCreate() {
+ openModal(true, { isUpdate: false })
+}
+
+function handleEdit(record: Recordable) {
+ openModal(true, { record, isUpdate: true })
+}
+
+async function handleExport() {
+ createConfirm({
+ title: t('common.exportTitle'),
+ iconType: 'warning',
+ content: t('common.exportMessage'),
+ async onOk() {
+ await exportDemo01Contact(getForm().getFieldsValue())
+ createMessage.success(t('common.exportSuccessText'))
+ }
+ })
+}
+
+async function handleDelete(record: Recordable) {
+ await deleteDemo01Contact(record.id)
+ createMessage.success(t('common.delSuccessText'))
+ reload()
+}
+
-
-
-
- 该功能支持 Vue3 + element-plus 版本!
-
-
-
- 可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/infra/demo/demo01/index.vue 代码,pull request 贡献给我们!
-
+
+
+
+ {{ t('action.create') }}
+
+
+ {{ t('action.export') }}
+
+
+
+
+
+
+
+
+
diff --git a/src/views/infra/demo/demo02/Demo02CategoryModal.vue b/src/views/infra/demo/demo02/Demo02CategoryModal.vue
new file mode 100644
index 00000000..d31dbd1f
--- /dev/null
+++ b/src/views/infra/demo/demo02/Demo02CategoryModal.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
diff --git a/src/views/infra/demo/demo02/demo02Category.data.ts b/src/views/infra/demo/demo02/demo02Category.data.ts
new file mode 100644
index 00000000..c8e6a466
--- /dev/null
+++ b/src/views/infra/demo/demo02/demo02Category.data.ts
@@ -0,0 +1,101 @@
+import type { BasicColumn, FormSchema } from '@/components/Table'
+import { useRender } from '@/components/Table'
+import { getDemo02CategoryPage } from '@/api/infra/demo/demo02'
+
+export const columns: BasicColumn[] = [
+ {
+ title: '编号',
+ dataIndex: 'id',
+ width: 100
+ },
+ {
+ title: '名字',
+ dataIndex: 'name',
+ width: 290
+ },
+ {
+ title: '创建时间',
+ dataIndex: 'createTime',
+ width: 120,
+ customRender: ({ text }) => {
+ return useRender.renderDate(text)
+ }
+ }
+]
+
+export const searchFormSchema: FormSchema[] = [
+ {
+ label: '名字',
+ field: 'name',
+ component: 'Input',
+ colProps: { span: 8 }
+ },
+ {
+ label: '创建时间',
+ field: 'createTime',
+ component: 'RangePicker',
+ colProps: { span: 8 }
+ }
+]
+
+export const createFormSchema: FormSchema[] = [
+ {
+ label: '编号',
+ field: 'id',
+ show: false,
+ component: 'Input'
+ },
+ {
+ label: '名字',
+ field: 'name',
+ required: true,
+ component: 'Input'
+ },
+ {
+ label: '父级编号',
+ field: 'parentId',
+ required: true,
+ component: 'ApiTreeSelect',
+ componentProps: {
+ api: () => getDemo02CategoryPage(null),
+ parentLabel: '顶级示例分类',
+ fieldNames: {
+ label: 'name',
+ key: 'id',
+ value: 'id'
+ },
+ handleTree: 'id'
+ }
+ }
+]
+
+export const updateFormSchema: FormSchema[] = [
+ {
+ label: '编号',
+ field: 'id',
+ show: false,
+ component: 'Input'
+ },
+ {
+ label: '名字',
+ field: 'name',
+ required: true,
+ component: 'Input'
+ },
+ {
+ label: '父级编号',
+ field: 'parentId',
+ required: true,
+ component: 'ApiTreeSelect',
+ componentProps: {
+ api: () => getDemo02CategoryPage(null),
+ fieldNames: {
+ parentLabel: '顶级示例分类',
+ label: 'name',
+ key: 'id',
+ value: 'id'
+ },
+ handleTree: 'id'
+ }
+ }
+]
diff --git a/src/views/infra/demo/demo02/index.vue b/src/views/infra/demo/demo02/index.vue
index 748f53c9..b0d328cf 100644
--- a/src/views/infra/demo/demo02/index.vue
+++ b/src/views/infra/demo/demo02/index.vue
@@ -1,16 +1,114 @@
-
-
-
-
- 该功能支持 Vue3 + element-plus 版本!
-
-
-
- 可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/infra/demo/demo02/index.vue 代码,pull request 贡献给我们!
-
+
+
+
+ {{ t('action.create') }}
+
+
+ {{ t('action.export') }}
+
+ {{ t('component.tree.expandAll') }}
+ {{ t('component.tree.unExpandAll') }}
+
+
+
+
+
+
+
+
-
\ No newline at end of file
+
diff --git a/src/views/infra/demo/demo03/erp/index.vue b/src/views/infra/demo/demo03/erp/index.vue
deleted file mode 100644
index 486b35d6..00000000
--- a/src/views/infra/demo/demo03/erp/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
-
-
- 该功能支持 Vue3 + element-plus 版本!
-
-
-
- 可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/infra/demo/demo03/erp/index.vue 代码,pull request 贡献给我们!
-
-
-
\ No newline at end of file
diff --git a/src/views/infra/demo/demo03/inner/index.vue b/src/views/infra/demo/demo03/inner/index.vue
deleted file mode 100644
index 67650d5a..00000000
--- a/src/views/infra/demo/demo03/inner/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
-
-
- 该功能支持 Vue3 + element-plus 版本!
-
-
-
- 可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/infra/demo/demo03/inner/index.vue 代码,pull request 贡献给我们!
-
-
-
\ No newline at end of file
diff --git a/src/views/infra/demo/demo03/normal/index.vue b/src/views/infra/demo/demo03/normal/index.vue
deleted file mode 100644
index 48695850..00000000
--- a/src/views/infra/demo/demo03/normal/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
-
-
- 该功能支持 Vue3 + element-plus 版本!
-
-
-
- 可参考 https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/infra/demo/demo03/normal/index.vue 代码,pull request 贡献给我们!
-
-
-
\ No newline at end of file