mirror of
https://gitee.com/mirrors/AllinSSL.git
synced 2026-03-19 12:35:37 +08:00
【同步】前端项目源码
【修复】工作流兼容问题
This commit is contained in:
chudong
52
frontend/packages/vue/naive-ui/src/views/Demo.tsx
Normal file
52
frontend/packages/vue/naive-ui/src/views/Demo.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { defineComponent, ref, computed } from 'vue'
|
||||
import { NSpace, NTabs, NTabPane, NBackTop, NButton } from 'naive-ui'
|
||||
import TableDemo from './tabs/TableDemo'
|
||||
import FormDemo from './tabs/FormDemo'
|
||||
import { useModal } from '../hooks/useModal'
|
||||
// import FormBuilder from '../components/FormBuilder'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Demo',
|
||||
setup() {
|
||||
const tabName = ref('table')
|
||||
const tabTitle = computed(() => {
|
||||
if (tabName.value === 'table') {
|
||||
return '动态表格'
|
||||
} else if (tabName.value === 'form') {
|
||||
return '动态表单'
|
||||
} else if (tabName.value === 'builder') {
|
||||
return '表单构建器'
|
||||
}
|
||||
})
|
||||
|
||||
const handleClick = () => {
|
||||
useModal().imperative.open({
|
||||
title: '测试标题',
|
||||
content: '测试内容',
|
||||
yes: () => {
|
||||
console.log('确认')
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return () => (
|
||||
<NSpace vertical size="large">
|
||||
<div class="p-0">
|
||||
<NButton onClick={handleClick}>测试按钮</NButton>
|
||||
<h1 class="text-[32px] font-bold mb-[24px]">{tabTitle.value}</h1>
|
||||
<NTabs type="line" class=" rounded-lg " modelValue={tabName.value}>
|
||||
<NTabPane name="table" tab="动态表格">
|
||||
<TableDemo />
|
||||
</NTabPane>
|
||||
<NTabPane name="form" tab="动态表单">
|
||||
<FormDemo />
|
||||
</NTabPane>
|
||||
<NTabPane name="builder" tab="表单构建器">
|
||||
{/* <FormBuilder /> */}
|
||||
</NTabPane>
|
||||
</NTabs>
|
||||
</div>
|
||||
</NSpace>
|
||||
)
|
||||
},
|
||||
})
|
||||
232
frontend/packages/vue/naive-ui/src/views/tabs/FormDemo.tsx
Normal file
232
frontend/packages/vue/naive-ui/src/views/tabs/FormDemo.tsx
Normal file
@@ -0,0 +1,232 @@
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { NCard } from 'naive-ui'
|
||||
import useForm from '@hooks/useForm'
|
||||
import type { FormConfig, CheckboxOptionItem, RadioOptionItem, UseFormOptions } from '../../types/form'
|
||||
|
||||
const mockFormRequest = async (data: any) => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
console.log('Form submitted:', data)
|
||||
return { success: true }
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FormDemo',
|
||||
setup() {
|
||||
const dynamFormSelectList = ref([
|
||||
{ label: '男', value: 'male' },
|
||||
{ label: '女', value: 'female' },
|
||||
{ label: '其他', value: 'other' },
|
||||
])
|
||||
|
||||
const educationOptions = ref<RadioOptionItem[]>([
|
||||
{ label: '高中', value: 'highschool' },
|
||||
{ label: '大专', value: 'college' },
|
||||
{ label: '本科', value: 'bachelor' },
|
||||
{ label: '硕士', value: 'master' },
|
||||
{ label: '博士', value: 'phd' },
|
||||
])
|
||||
|
||||
const hobbyOptions = ref<CheckboxOptionItem[]>([
|
||||
{ label: '阅读', value: 'reading' },
|
||||
{ label: '运动', value: 'sports' },
|
||||
{ label: '音乐', value: 'music' },
|
||||
{ label: '旅行', value: 'travel' },
|
||||
{ label: '摄影', value: 'photography' },
|
||||
])
|
||||
|
||||
const departmentOptions = ref([
|
||||
{ label: '技术部', value: 'tech' },
|
||||
{ label: '产品部', value: 'product' },
|
||||
{ label: '设计部', value: 'design' },
|
||||
{ label: '运营部', value: 'operation' },
|
||||
{ label: '市场部', value: 'marketing' },
|
||||
])
|
||||
|
||||
const formConfig: FormConfig = [
|
||||
{
|
||||
type: 'grid',
|
||||
cols: 24,
|
||||
xGap: 24,
|
||||
children: [
|
||||
{
|
||||
type: 'formItemGi',
|
||||
label: '姓名',
|
||||
span: 12,
|
||||
required: true,
|
||||
children: [
|
||||
{
|
||||
type: 'input',
|
||||
field: 'name',
|
||||
placeholder: '请输入姓名',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'formItemGi',
|
||||
label: '性别',
|
||||
span: 12,
|
||||
required: true,
|
||||
children: [
|
||||
{
|
||||
type: 'select',
|
||||
field: 'gender',
|
||||
placeholder: '请选择性别',
|
||||
options: dynamFormSelectList.value,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'grid',
|
||||
cols: 24,
|
||||
xGap: 24,
|
||||
children: [
|
||||
{
|
||||
type: 'formItemGi',
|
||||
label: '出生日期',
|
||||
span: 12,
|
||||
required: true,
|
||||
children: [
|
||||
{
|
||||
type: 'datepicker',
|
||||
field: 'birthDate',
|
||||
placeholder: '请选择出生日期',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'formItemGi',
|
||||
label: '部门',
|
||||
span: 12,
|
||||
required: true,
|
||||
children: [
|
||||
{
|
||||
type: 'select',
|
||||
field: 'department',
|
||||
placeholder: '请选择部门',
|
||||
options: departmentOptions.value,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'grid',
|
||||
cols: 24,
|
||||
xGap: 24,
|
||||
children: [
|
||||
{
|
||||
type: 'formItemGi',
|
||||
label: '手机号码',
|
||||
span: 12,
|
||||
required: true,
|
||||
children: [
|
||||
{
|
||||
type: 'input',
|
||||
field: 'phone',
|
||||
placeholder: '请输入手机号码',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'formItemGi',
|
||||
label: '邮箱',
|
||||
span: 12,
|
||||
required: true,
|
||||
children: [
|
||||
{
|
||||
type: 'input',
|
||||
field: 'email',
|
||||
placeholder: '请输入邮箱地址',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'formItem',
|
||||
label: '教育程度',
|
||||
required: true,
|
||||
children: [
|
||||
{
|
||||
type: 'radio',
|
||||
field: 'education',
|
||||
options: educationOptions.value,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'formItem',
|
||||
label: '兴趣爱好',
|
||||
children: [
|
||||
{
|
||||
type: 'checkbox',
|
||||
field: 'hobbies',
|
||||
options: hobbyOptions.value,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'formItem',
|
||||
label: '个人简介',
|
||||
children: [
|
||||
{
|
||||
type: 'input',
|
||||
field: 'introduction',
|
||||
placeholder: '请输入个人简介',
|
||||
inputProps: { type: 'textarea' },
|
||||
rows: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'grid',
|
||||
cols: 24,
|
||||
xGap: 24,
|
||||
children: [
|
||||
{
|
||||
type: 'formItemGi',
|
||||
label: '薪资期望',
|
||||
span: 12,
|
||||
children: [
|
||||
{
|
||||
type: 'inputNumber',
|
||||
field: 'expectedSalary',
|
||||
placeholder: '请输入期望薪资',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'formItemGi',
|
||||
label: '工作年限',
|
||||
span: 12,
|
||||
children: [
|
||||
{
|
||||
type: 'inputNumber',
|
||||
field: 'workYears',
|
||||
placeholder: '请输入工作年限',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const { FormComponent, config, formData } = useForm<{ name: number }>({
|
||||
config: formConfig,
|
||||
requestFn: mockFormRequest,
|
||||
defaultValues: {
|
||||
name: 1,
|
||||
},
|
||||
})
|
||||
|
||||
return () => (
|
||||
<NCard title="复杂表单示例" class="mt-[16px]">
|
||||
<div class="p-[16px]">
|
||||
<FormComponent />
|
||||
</div>
|
||||
</NCard>
|
||||
)
|
||||
},
|
||||
})
|
||||
87
frontend/packages/vue/naive-ui/src/views/tabs/TableDemo.tsx
Normal file
87
frontend/packages/vue/naive-ui/src/views/tabs/TableDemo.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import { defineComponent } from 'vue'
|
||||
import { NButton, NCard, NSwitch } from 'naive-ui'
|
||||
import useTable from '@hooks/useTable'
|
||||
|
||||
// 定义表格数据接口
|
||||
interface TableData {
|
||||
id: number
|
||||
cpu: number
|
||||
memory: number
|
||||
disk: number
|
||||
netIn: string
|
||||
netOut: string
|
||||
status: boolean
|
||||
updateTime: string
|
||||
}
|
||||
|
||||
// 生成随机数据的辅助函数
|
||||
const generateRandomData = (count: number): TableData[] => {
|
||||
return Array.from({ length: count }, (_, index) => ({
|
||||
id: index + 1,
|
||||
cpu: Math.floor(Math.random() * 100),
|
||||
memory: Math.floor(Math.random() * 100),
|
||||
disk: Math.floor(Math.random() * 100),
|
||||
netIn: `${(Math.random() * 100).toFixed(2)} MB/s`,
|
||||
netOut: `${(Math.random() * 100).toFixed(2)} MB/s`,
|
||||
status: Math.random() > 0.5,
|
||||
updateTime: new Date().toLocaleString(),
|
||||
}))
|
||||
}
|
||||
|
||||
// 模拟API请求
|
||||
const mockTableRequest = async (params: any) => {
|
||||
const { page = 1, pageSize = 10 } = params
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
const total = 100
|
||||
const list = generateRandomData(pageSize)
|
||||
return {
|
||||
list,
|
||||
total,
|
||||
}
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TableDemo',
|
||||
setup() {
|
||||
const { TableComponent } = useTable<TableData>({
|
||||
columns: [
|
||||
{ title: 'ID', key: 'id', width: 80 },
|
||||
{ title: 'CPU使用率', key: 'cpu', width: 120 },
|
||||
{ title: '内存使用率', key: 'memory', width: 120 },
|
||||
{ title: '磁盘使用率', key: 'disk', width: 120 },
|
||||
{ title: '网络流入', key: 'netIn', width: 120 },
|
||||
{ title: '网络流出', key: 'netOut', width: 120 },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
render: (row) => {
|
||||
return <NSwitch size="small" value={row.status} />
|
||||
},
|
||||
},
|
||||
{ title: '更新时间', key: 'updateTime', width: 160 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 100,
|
||||
fixed: 'right',
|
||||
align: 'right',
|
||||
render: (row) => {
|
||||
return (
|
||||
<NButton type="text" size="small">
|
||||
编辑
|
||||
</NButton>
|
||||
)
|
||||
},
|
||||
},
|
||||
],
|
||||
requestFn: mockTableRequest,
|
||||
})
|
||||
|
||||
return () => (
|
||||
<NCard title="表格示例" class="mt-[16px]">
|
||||
<TableComponent />
|
||||
</NCard>
|
||||
)
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user