# 开源学习wang-ele

**Repository Path**: wang-dabao1/open-source-learning-wang-ele

## Basic Information

- **Project Name**: 开源学习wang-ele
- **Description**: @wang-ele/form
整体项目演示
https://www.wangxiaowen.top/wangForm/ 关于此项目的可拖拽表单
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-02-26
- **Last Updated**: 2025-03-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + TypeScript + Vite
如果不想看下面的，可直接拉项目感受一下

https://gitee.com/wang-dabao1/open-source-learning-wang-ele

关于此项目的低代码拖拽

https://www.wangxiaowen.top/wangForm/

<!-- 组件引入 -->
``` typescript
import { createApp } from 'vue'
import WangForm from '@wang-ele/form'
createApp(App)
.use(ElementPlus) // ElementPlus 全局引入
.use(WangForm) // WangForm 全局引入
.mount('#app')
```
<!-- 组件使用 -->
``` html
<template>
	<div>
		<el-card>
			<template #header>
				<el-divider content-position="left">基本信息</el-divider>
			</template>
			<!-- ref不可定义为wangForm不然会把原有标签给替换 -->
			<wang-form :form="form" ref="wang_one">
				<template #我是个插槽> 我是个插槽可以随便插东西</template>
				<template #switchRef>
					<span>&nbsp;&nbsp;开启该选项后，该Notebook实例将在运行时长超出您所选择的时长后，自动停止</span>
				</template>
				<template #radioRef>
					<el-form-item prop="numbers" v-if="form.model.env === '0'">
						<el-input min="1" style="width: 100px; margin-left: 10px" type="number" v-model="form.model.numbers"></el-input>
					</el-form-item>
				</template>
				<template #select>
					<algorithm
						v-model:type="form.model.isPrefab"
						v-model:id="form.model.algorithmId"
						v-model:version-id="form.model.algorithmVersionId"
					></algorithm>
				</template>
			</wang-form>
			<template #footer>
				<el-button type="primary" @click="onSubmit">确定</el-button>
				<el-button @click="onCancel">取消</el-button>
			</template>
		</el-card>
	</div>
</template>
```
<!-- 具体数据驱动 -->
``` typescript

<script setup lang="ts">
// import { Session } from '/@/utils/storage';
// import { useRouter } from 'vue-router';
// import { useDict } from '/@/hooks/systemDict';
// import { bigdataDatasetTypeDetails } from '/@/api/dataService/dataSet';
import { ref, reactive, computed } from 'vue';
// const router = useRouter();
const wang_one = ref();
// 定义字典演示如何加入wang-form 算法框架
// const { algorithm_framework } = useDict('algorithm_framework');

// 后端自写无分页查询接口
const datasetData: any = ref([]);
// bigdataDatasetTypeDetails({ type: '1' }).then((res) => {
// 	datasetData.value = res.data;
// });

const form: any = reactive({
	list: [
		{
			RefName: '我是个插槽',
		},
		{
			component: 'input',
			label: '任务名称',
			field: 'name',
			span: 24,
			attrs: {
				placeholder: '请输入任务名称',
				maxlength: 50,
				showWordLimit: true,
				clearable: true,
			},
		},
		{
			component: 'select',
			label: '模型类型',
			field: 'type',
			span: 12,
			attrs: {
				placeholder: '请选择模型类型',
				clearable: true,
				filterable: true,
			},
			options: [
				{ label: '分类', value: '1' },
				{ label: '回归', value: '2' },
				{ label: '目标检测', value: '3' },
				{ label: '图像分割', value: '4' },
			],
		},
		{
			component: 'radio',
			label: '运行环境',
			field: 'env',
			span: 12,
			attrs: {
				border: true,
				size: 'large',
				onChange: (val: any) => {
					val === 'cpu' ? (form.model.gpuCount = '') : null;
				},
			},
			options: [
				{ label: 'CPU', value: 'cpu' },
				{ label: 'GPU', value: 'gpu' },
			],
		},
		{
			component: 'number',
			label: '训练轮次',
			field: 'epochs',
			span: 8,
			attrs: {
				min: 1,
				max: 1000,
				step: 1,
				controlsPosition: 'right',
				placeholder: '请输入训练轮次',
			},
		},
		{
			component: 'number',
			label: '批次大小',
			field: 'batchSize',
			span: 8,
			attrs: {
				min: 1,
				max: 512,
				step: 1,
				controlsPosition: 'right',
				placeholder: '请输入批次大小',
			},
		},
		{
			component: 'number',
			label: 'GPU数量',
			field: 'gpuCount',
			span: 8,
			attrs: {
				min: 1,
				max: 8,
				step: 1,
				controlsPosition: 'right',
				placeholder: '请输入GPU数量',
				disabled: computed(() => form.model.env === 'cpu'),
			},
		},
		{
			component: 'slider',
			label: '学习率',
			field: 'learningRate',
			span: 24,
			attrs: {
				min: 0,
				max: 80,
				step: 2,
				showInput: false,
				showStops: false,
				marks: {
					0: '0',
					20: '20',
					40: '40',
					80: '80',
				},
			},
		},
		{
			component: 'checkbox',
			label: '高级选项',
			field: 'advancedOptions',
			span: 24,
			attrs: {
				border: true,
			},
			options: [
				{ label: '使用预训练模型', value: 'pretrained' },
				{ label: '启用早停', value: 'earlyStop' },
				{ label: '保存检查点', value: 'checkpoint' },
				{ label: '使用混合精度', value: 'mixedPrecision' },
				{ label: '启用梯度裁剪', value: 'gradientClipping' },
			],
		},
		{
			component: 'time',
			label: '定时执行',
			field: 'scheduleTime',
			span: 12,
			attrs: {
				placeholder: '请选择执行时间',
				format: 'HH:mm',
				clearable: true,
			},
		},
		{
			component: 'date',
			label: '截止日期',
			field: 'deadline',
			span: 12,
			attrs: {
				type: 'date',
				placeholder: '请选择截止日期',
				clearable: true,
			},
		},
		{
			component: 'switch',
			label: '是否公开',
			field: 'isPublic',
			span: 12,
			attrs: {
				activeText: '是',
				inactiveText: '否',
				inlinePrompt: true,
			},
		},
		{
			component: 'rate',
			label: '优先级',
			field: 'priority',
			span: 12,
			attrs: {
				max: 3,
				texts: ['低', '中', '高'],
				showText: true,
				allowHalf: false,
			},
		},
		{
			component: 'cascader',
			label: '模型分类',
			field: 'modelCategory',
			span: 12,
			attrs: {
				placeholder: '请选择模型分类',
				clearable: true,
				props: {
					expandTrigger: 'hover',
				},
			},
			options: [
				{
					value: 'cv',
					label: '计算机视觉',
					children: [
						{
							value: 'classification',
							label: '图像分类',
							children: [
								{ value: 'single', label: '单标签分类' },
								{ value: 'multi', label: '多标签分类' },
							],
						},
						{
							value: 'detection',
							label: '目标检测',
							children: [
								{ value: 'face', label: '人脸检测' },
								{ value: 'object', label: '物体检测' },
							],
						},
					],
				},
				{
					value: 'nlp',
					label: '自然语言处理',
					children: [
						{
							value: 'classification',
							label: '文本分类',
							children: [
								{ value: 'sentiment', label: '情感分析' },
								{ value: 'topic', label: '主题分类' },
							],
						},
						{
							value: 'generation',
							label: '文本生成',
							children: [
								{ value: 'summary', label: '文本摘要' },
								{ value: 'translation', label: '机器翻译' },
							],
						},
					],
				},
			],
		},
		{
			component: 'tree',
			label: '预训练模型',
			field: 'pretrainedModel',
			span: 12,
			attrs: {
				placeholder: '请选择预训练模型',
				checkStrictly: true,
				showCheckbox: true,
				nodeKey: 'id',
				props: {
					label: 'name',
					children: 'children',
				},
			},
			options: [
				{
					id: 1,
					name: 'ResNet系列',
					children: [
						{ id: 2, name: 'ResNet18' },
						{ id: 3, name: 'ResNet34' },
						{ id: 4, name: 'ResNet50' },
					],
				},
				{
					id: 5,
					name: 'BERT系列',
					children: [
						{ id: 6, name: 'BERT-base' },
						{ id: 7, name: 'BERT-large' },
						{ id: 8, name: 'RoBERTa' },
					],
				},
			],
		},
		{
			component: 'datetime',
			label: '计划开始时间',
			field: 'startTime',
			span: 12,
			attrs: {
				placeholder: '请选择开始时间',
				format: 'YYYY-MM-DD HH:mm:ss',
				valueFormat: 'YYYY-MM-DD HH:mm:ss',
				clearable: true,
			},
		},
		{
			component: 'datetime',
			label: '计划结束时间',
			field: 'endTime',
			span: 12,
			attrs: {
				placeholder: '请选择结束时间',
				format: 'YYYY-MM-DD HH:mm:ss',
				valueFormat: 'YYYY-MM-DD HH:mm:ss',
				clearable: true,
			},
		},
		{
			component: 'tag',
			label: '标签',
			field: 'tags',
			span: 24,
			attrs: {
				placeholder: '请输入标签',
				collapseTags: true,
				collapseTagsTooltip: true,
			},
			options: [
				{ label: '深度学习', value: 'deep-learning' },
				{ label: '机器学习', value: 'machine-learning' },
				{ label: '神经网络', value: 'neural-network' },
				{ label: '人工智能', value: 'ai' },
			],
		},
		{
			component: 'color',
			label: '标记颜色',
			field: 'color',
			span: 12,
			attrs: {
				showAlpha: true,
				colorFormat: 'hex',
			},
		},
		{
			component: 'upload',
			label: '数据集上传',
			field: 'datasetUpload',
			span: 24,
			attrs: {
				action: '/api/system/sys-file/dataupload',
				multiple: true,
				accept: '.csv,.txt,.json,.png,.jpg,.jpeg',
				limit: 5,
				tip: '支持上传CSV、TXT、JSON、PNG、JPG、JPEG格式文件，单个文件不超过50MB',
				headers: {
					Authorization: `Bearer {Session.getToken()}`, // 将这里的yourAuthTokenHere替换为实际的令牌变量
				},
			},
		},
		{
			component: 'switch',
			label: '自动停止',
			field: 'autoStop',
			span: 13,
			afterSlotName: 'switchRef', // 插槽可以插到表单后面
			attrs: {
				activeText: '是',
				inactiveText: '否',
				inlinePrompt: true,
			},
		},
		{
			component: 'radio',
			label: '',
			field: 'env',
			span: 13,
			afterSlotName: 'radioRef',
			attrs: {
				border: true,
				size: 'large',
			},
			options: [
				{ label: '1小时', value: '1' },
				{ label: '2小时', value: '2' },
				{ label: '3小时', value: '3' },
				{ label: '4小时', value: '4' },
				{ label: '6小时', value: '6' },
				{ label: '自定义', value: '0' },
			],
		},
		{
			component: 'radio',
			label: '算法框架',
			field: 'algorithmFramework',
			span: 13,
			attrs: {
				children: {
					border: true,
				},
			},
			options: [],
		},
		{
			component: 'radio',
			label: '数据类型',
			field: 'dataType',
			span: 13,
			attrs: {
				label: 'name',
				value: 'id',
				children: {
					border: true,
				},
			},
			options: datasetData,
		},
		{
			component: 'select',
			label: '数据集',
			field: 'datasetKey',
			span: 13,
			attrs: {
				placeholder: '请选择数据集',
				clearable: true,
				label: 'name',
				value: 'id',
			},
			options: datasetData,
		},
		{
			SlotName: 'select',
		},
	],
	rules: {
		name: [
			{ required: true, message: '请输入任务名称', trigger: 'blur' },
			{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' },
		],
		type: [{ required: true, message: '请选择模型类型', trigger: 'change' }],
		env: [{ required: true, message: '请选择运行环境', trigger: 'change' }],
		epochs: [
			{ required: true, message: '请输入训练轮次', trigger: 'blur' },
			{ type: 'number', min: 1, max: 1000, message: '轮次范围在 1 到 1000 之间', trigger: 'blur' },
		],
		batchSize: [
			{ required: true, message: '请输入批次大小', trigger: 'blur' },
			{ type: 'number', min: 1, max: 512, message: '批次大小范围在 1 到 512 之间', trigger: 'blur' },
		],
		learningRate: [{ required: true, message: '请设置学习率', trigger: 'blur' }],
		optimizer: [{ required: true, message: '请选择优化器', trigger: 'change' }],
		lossFunction: [{ required: true, message: '请选择损失函数', trigger: 'change' }],
		algorithmId: [{ required: true, message: '请选择算法', trigger: 'change' }],
	},
	model: {
		isPrefab: '1',
		algorithmId: '',
		algorithmVersionId: '',
		inType: '2',
		env: 'cpu',
	},
	labelWidth: '120px',
	size: 'default',
	gutter: 20,
});
const onSubmit = async () => {
	try {
		await wang_one.value.visible();
		// 校验通过后直接根据自己的业务提交
		console.log(form.model);
	} catch {
	} finally {
	}
};
setTimeout(() => {}, 2000);
const onCancel = () => {
	// router.back();
};
</script>
```