feat: v1.1 Element Plus 组件全面升级

- 布局: 面包屑/头像下拉/公告气泡(点击外部关闭)/菜单滚动条/路由切换动效
- 工作台: el-statistic 彩色统计卡/el-skeleton 骨架屏/公告轮播/快捷入口
- 订单: 日期范围筛选/列排序/详情抽屉 el-descriptions+el-tabs+el-timeline 日志
- 样板库: el-tree-select 分类树/el-image 大图预览/el-badge 引用徽标
- 客户表单校验规则/优化下料 dashboard 利用率进度环
- 全接口回归 13/13 通过, SPA 路由验证通过

frontend/src/views/CustomersView.vue

@@ -24,9 +24,11 @@
                    :total="total" :page-size="page_size" v-model:current-page="page" @current-change="load" />
 
     <el-dialog v-model="editVisible" :title="form.id ? '编辑客户' : '新增客户'" width="480px">
-      <el-form :model="form" label-width="70px">
-        <el-form-item label="姓名"><el-input v-model="form.name" /></el-form-item>
-        <el-form-item label="电话"><el-input v-model="form.phone" /></el-form-item>
+      <el-form :model="form" :rules="rules" ref="formRef" label-width="70px">
+        <el-form-item label="姓名" prop="name"><el-input v-model="form.name" /></el-form-item>
+        <el-form-item label="电话" prop="phone">
+          <el-input v-model="form.phone" maxlength="20" />
+        </el-form-item>
         <el-form-item label="地址"><el-input v-model="form.address" /></el-form-item>
         <el-form-item label="备注"><el-input v-model="form.note" type="textarea" /></el-form-item>
       </el-form>
@@ -50,7 +52,12 @@ const page_size = 15
 const keyword = ref('')
 const loading = ref(false)
 const editVisible = ref(false)
+const formRef = ref()
 const form = reactive({ id: 0, name: '', phone: '', address: '', note: '' })
+const rules = {
+  name: [{ required: true, message: '请输入客户姓名', trigger: 'blur' }],
+  phone: [{ pattern: /^[0-9+\-\s]{5,20}$/, message: '电话格式不正确', trigger: 'blur' }],
+}
 
 async function load() {
   loading.value = true
@@ -67,6 +74,7 @@ function openEdit(row?: any) {
 }
 
 async function save() {
+  await formRef.value.validate()
   if (form.id) await api('put', `/api/customers/${form.id}`, form)
   else await api('post', '/api/customers', form)
   ElMessage.success('已保存')