feat: 🚀 新增 pro-form

src/language/modules/en.ts

@@ -9,10 +9,10 @@ export default {
 		closeAll: "Close All"
 	},
 	header: {
-		componentSize: "Component Size",
+		componentSize: "Component size",
 		language: "Language",
 		theme: "theme",
-		themeSetting: "Theme setting",
+		layoutConfig: "Layout config",
 		primary: "primary",
 		darkMode: "Dark Mode",
 		greyMode: "Grey mode",

src/language/modules/zh.ts

@@ -11,8 +11,8 @@ export default {
 	header: {
 		componentSize: "组件大小",
 		language: "语言",
-		theme: "主题",
-		themeSetting: "主题设置",
+		theme: "全局主题",
+		layoutConfig: "布局配置",
 		primary: "primary",
 		darkMode: "暗黑模式",
 		greyMode: "灰色模式",

src/layout/Header/components/Theme.vue

@@ -3,8 +3,8 @@
 		<el-tooltip effect="dark" :content="$t('header.theme')" placement="bottom">
 			<i :class="'iconfont icon-zhuti'" class="icon-style" @click="openDrawer"></i>
 		</el-tooltip>
-		<el-drawer v-model="drawerVisible" :title="$t('header.themeSetting')" size="300px">
-			<el-divider content-position="center">{{ $t("header.theme") }}</el-divider>
+		<el-drawer v-model="drawerVisible" :title="$t('header.layoutConfig')" size="300px">
+			<el-divider class="divider" content-position="center">{{ $t("header.theme") }}</el-divider>
 			<div class="theme-item">
 				<span>{{ $t("header.primary") }}</span>
 				<el-color-picker v-model="themeConfig.primary" @change="changePrimary"> </el-color-picker>

src/layout/Header/index.scss

@@ -47,6 +47,9 @@
 				font-size: 14px;
 			}
 		}
+		.divider {
+			margin-top: 15px;
+		}
 	}
 	.theme-switch {
 		display: flex;

src/views/form/dynamicForm/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="content-box">
-		<el-button class="add" type="success" @click="addDomain" plain>Add Input</el-button>
+		<el-button class="add" type="primary" @click="addDomain" plain>Add Input</el-button>
 		<el-form ref="formRef" :model="dynamicValidateForm" label-width="100px" class="demo-dynamic">
 			<el-form-item
 				prop="email"

src/views/form/proForm/index.scss

@@ -1,3 +1,4 @@
 .el-form {
 	width: 100%;
+	margin-top: 20px;
 }

src/views/form/proForm/index.vue

@@ -1,5 +1,10 @@
 <template>
 	<div class="content-box">
+		<el-alert
+			title="通过 component :is 组件属性 && v-bind 属性透传，可以将 template 中的 html 代码全部改变为 columns 配置项，具体配置请看代码。"
+			type="warning"
+			:closable="false"
+		/>
 		<component :is="'el-form'" v-bind="options.form" ref="proFormRef" :model="model">
 			<template v-for="item in options.columns" :key="item.prop">
 				<component :is="'el-form-item'" v-bind="item.formItem">
@@ -19,22 +24,22 @@ import { ref } from "vue";
 let model = ref<any>({});
 
 const options = ref({
-	// * 表单整体配置项
+	// 表单整体配置项
 	form: {
 		inline: false,
 		labelPosition: "right",
 		labelWidth: "80px",
-		size: "large",
+		size: "default",
 		disabled: false,
 		labelSuffix: " :"
 	},
-	// * 表单列配置项()
+	// 表单列配置项 (formItem 代表 item 配置项，attrs 代表 输入、选择框 配置项)
 	columns: [
 		{
 			formItem: {
 				label: "用户名",
 				prop: "username",
-				labelWidth: "180px",
+				labelWidth: "80px",
 				required: true
 			},
 			attrs: {
@@ -48,8 +53,7 @@ const options = ref({
 			formItem: {
 				label: "密码",
 				prop: "password",
-				class: "data",
-				style: "width:200px"
+				class: "data"
 			},
 			attrs: {
 				typeName: "input",
@@ -67,7 +71,8 @@ const options = ref({
 			attrs: {
 				typeName: "input",
 				placeholder: "请输入邮箱",
-				clearable: true
+				clearable: true,
+				style: "width:500px"
 			}
 		}
 	]

src/views/login/index.scss

@@ -1,4 +1,5 @@
 .login-container {
+	position: relative;
 	min-width: 550px;
 	height: 100%;
 	min-height: 500px;