fix: 更新验证/label名称

apps/web/src/views/Dashboard.vue

@@ -250,8 +250,8 @@
 						<el-button @click="dashboardStore.openVarDialog">添加第一个变量</el-button>
 					</div>
 					<el-table v-else :data="filteredVariables" style="width: 100%; margin-top: 12px">
-						<el-table-column prop="key" label="钥匙" />
-						<el-table-column prop="value" label="价值" />
+						<el-table-column prop="key" label="key" />
+						<el-table-column prop="value" label="值" />
 						<el-table-column prop="usage" label="使用语法" width="150">
 							<template #default="scope">
 								<el-tag type="info">{{ scope.row.usage }}</el-tag>
@@ -259,10 +259,10 @@
 						</el-table-column>
 						<el-table-column prop="scope" label="范围" width="100">
 							<template #default="scope">
-								<el-tag size="small">{{ scope.row.scope }}</el-tag>
+								<el-tag size="small">{{ scope.row.scope === 'scope' ? '全局' : '' }}</el-tag>
 							</template>
 						</el-table-column>
-						<el-table-column label="操作" width="120" align="right">
+						<el-table-column label="操作" width="200" align="right">
 							<template #default="scope">
 								<el-button text size="small" @click="editVariable(scope.row)">编辑</el-button>
 								<el-button text size="small" type="danger" @click="deleteVariable(scope.row.id)"
@@ -429,16 +429,16 @@
 
 		<!-- 新变量对话框 -->
 	<el-dialog v-model="dashboardStore.showVarDialog" :title="varDialogTitle" width="500px" @close="resetVarForm">
-			<el-form :model="varForm" label-position="top">
-				<el-form-item label="钥匙" required>
-					<el-input v-model="varForm.key" placeholder="请输入姓名" />
+			<el-form ref="varFormRef" :model="varForm" :rules="varFormRules" label-position="top">
+				<el-form-item label="Key" prop="key">
+					<el-input v-model="varForm.key" placeholder="请输入key" />
 				</el-form-item>
-				<el-form-item label="价值">
+				<el-form-item label="值" prop="value">
 					<el-input v-model="varForm.value" type="textarea" placeholder="请输入一个值" rows="4" />
 				</el-form-item>
-				<el-form-item label="范围" required>
+				<el-form-item label="范围" prop="scope">
 					<el-select v-model="varForm.scope" placeholder="选择">
-						<el-option label="全局的" value="全局的" />
+						<el-option label="全局" value="scope" />
 					</el-select>
 				</el-form-item>
 			</el-form>
@@ -452,11 +452,11 @@
 
 		<!-- 创建新数据表对话框 -->
 	<el-dialog v-model="dashboardStore.showTableDialog" title="创建新数据表" width="500px" @close="resetTableForm">
-			<el-form :model="tableForm">
-				<el-form-item label="数据表名称" required>
+			<el-form ref="tableFormRef" :model="tableForm" :rules="tableFormRules" label-position="top">
+				<el-form-item label="数据表名称" prop="name">
 					<el-input v-model="tableForm.name" placeholder="输入数据表名称" />
 				</el-form-item>
-				<el-form-item label="创建方式">
+				<el-form-item label="创建方式" prop="method">
 					<el-radio-group v-model="tableForm.method">
 						<el-radio value="from-scratch">从零开始</el-radio>
 						<el-radio value="import-csv">导入 CSV 文件</el-radio>
@@ -599,23 +599,36 @@ const resetTableForm = () => {
 	}
 }
 
-const submitTable = () => {
-	if (!tableForm.value.name.trim()) {
-		ElMessage.error('请输入数据表名称')
-		return
-	}
-	const newTable = {
-		id: Math.max(...tables.value.map((t: any) => t.id), 0) + 1,
-		name: tableForm.value.name,
-		description: tableForm.value.method === 'from-scratch' ? '从零开始创建' : '从 CSV 导入',
-		method: tableForm.value.method,
-		size: '0MB',
-		rows: '0'
+const tableFormRef = ref()
+
+const tableFormRules = {
+	name: [
+		{ required: true, message: '请输入数据表名称', trigger: 'blur' },
+		{ min: 1, max: 100, message: '数据表名称长度为 1-100 个字符', trigger: 'blur' }
+	],
+	method: [
+		{ required: true, message: '请选择创建方式', trigger: 'change' }
+	]
+}
+
+const submitTable = async () => {
+	try {
+		await tableFormRef.value?.validate()
+		const newTable = {
+			id: Math.max(...tables.value.map((t: any) => t.id), 0) + 1,
+			name: tableForm.value.name,
+			description: tableForm.value.method === 'from-scratch' ? '从零开始创建' : '从 CSV 导入',
+			method: tableForm.value.method,
+			size: '0MB',
+			rows: '0'
+		}
+		tables.value.push(newTable)
+		dashboardStore.closeTableDialog()
+		resetTableForm()
+		ElMessage.success('数据表已创建')
+	} catch (error) {
+		// 验证失败，form 会自动显示错误信息
 	}
-	tables.value.push(newTable)
-	dashboardStore.closeTableDialog()
-	resetTableForm()
-	ElMessage.success('数据表已创建')
 }
 
 const filter = ref('')
@@ -633,7 +646,7 @@ const varForm = ref({
 	id: undefined as number | undefined,
 	key: '',
 	value: '',
-	scope: '全局的'
+	scope: 'scope'
 })
 
 const resetVarForm = () => {
@@ -641,45 +654,59 @@ const resetVarForm = () => {
 		id: undefined,
 		key: '',
 		value: '',
-		scope: '全局的'
+		scope: 'scope'
 	}
 }
 
-const submitVariable = () => {
-	if (!varForm.value.key.trim()) {
-		ElMessage.error('请输入钥匙')
-		return
-	}
-	// 编辑已有变量
-	if (varForm.value.id) {
-		const idx = variables.value.findIndex((v: any) => v.id === varForm.value.id)
-		if (idx !== -1) {
-			variables.value[idx] = {
-				id: varForm.value.id,
-				key: varForm.value.key,
-				value: varForm.value.value,
-				usage: `$vars.${varForm.value.key}`,
-				scope: varForm.value.scope
+const varFormRef = ref()
+
+const varFormRules = {
+	key: [
+		{ required: true, message: '请输入Key', trigger: 'blur' },
+		{ min: 1, max: 100, message: 'Key 长度为 1-100 个字符', trigger: 'blur' }
+	],
+	value: [],
+	scope: [
+		{ required: true, message: '请选择范围', trigger: 'change' }
+	]
+}
+
+const submitVariable = async () => {
+	try {
+		await varFormRef.value?.validate()
+		// 编辑已有变量
+		if (varForm.value.id) {
+			const idx = variables.value.findIndex((v: any) => v.id === varForm.value.id)
+			if (idx !== -1) {
+				variables.value[idx] = {
+					id: varForm.value.id,
+					key: varForm.value.key,
+					value: varForm.value.value,
+					usage: `$vars.${varForm.value.key}`,
+					scope: varForm.value.scope
+				}
+				dashboardStore.closeVarDialog()
+				resetVarForm()
+				ElMessage.success('变量已更新')
+				return
 			}
-			dashboardStore.closeVarDialog()
-			resetVarForm()
-			ElMessage.success('变量已更新')
-			return
 		}
-	}
 
-	// 新增变量
-	const newVar = {
-		id: Math.max(...variables.value.map((v: any) => v.id), 0) + 1,
-		key: varForm.value.key,
-		value: varForm.value.value,
-		usage: `$vars.${varForm.value.key}`,
-		scope: varForm.value.scope
+		// 新增变量
+		const newVar = {
+			id: Math.max(...variables.value.map((v: any) => v.id), 0) + 1,
+			key: varForm.value.key,
+			value: varForm.value.value,
+			usage: `$vars.${varForm.value.key}`,
+			scope: varForm.value.scope
+		}
+		variables.value.push(newVar)
+		dashboardStore.closeVarDialog()
+		resetVarForm()
+		ElMessage.success('变量已添加')
+	} catch (error) {
+		// 验证失败，form 会自动显示错误信息
 	}
-	variables.value.push(newVar)
-	dashboardStore.closeVarDialog()
-	resetVarForm()
-	ElMessage.success('变量已添加')
 }
 
 const varDialogTitle = computed(() => (varForm.value.id ? '编辑变量' : '新增'))