@lvetechs/create-app 1.0.4 → 1.0.5

package/templates/react/src/views/system/user/index.tsx

@@ -1,5 +1,39 @@
+import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import '@/styles/page-common.scss'
+import { Button, Input, Dialog } from '@lvetechs/ui-lib'
+import { useForm } from '@/hooks/useForm'
+
+// 如果 @lvetechs/ui-lib 没有 Select，自己实现一个简单的 Select
+interface SelectProps {
+  name?: string
+  value: string
+  onChange: (value: string) => void
+  options: Array<{ label: string; value: string }>
+  placeholder?: string
+}
+
+function Select({ name, value, onChange, options, placeholder }: SelectProps) {
+  return (
+    <select
+      name={name}
+      className="w-full rounded border border-slate-200 px-3 py-2 text-sm outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+    >
+      {placeholder && (
+        <option value="" disabled>
+          {placeholder}
+        </option>
+      )}
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  )
+}
 
 const users = [
   { id: 1, username: 'admin', nickname: '管理员', role: '超级管理员', status: '启用' },
@@ -7,15 +41,147 @@ const users = [
   { id: 3, username: 'viewer', nickname: '访客', role: '只读', status: '禁用' }
 ]
 
+interface UserFormValues {
+  username: string
+  nickname: string
+  email: string
+  role: string
+}
+
+function validateUserForm(values: UserFormValues) {
+  const errors: Partial<Record<keyof UserFormValues, string>> = {}
+  if (!values.username.trim()) {
+    errors.username = '请输入用户名'
+  }
+  if (!values.nickname.trim()) {
+    errors.nickname = '请输入昵称'
+  }
+  if (!values.email.trim()) {
+    errors.email = '请输入邮箱'
+  } else if (!/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(values.email)) {
+    errors.email = '邮箱格式不正确'
+  }
+  if (!values.role.trim()) {
+    errors.role = '请选择角色'
+  }
+  return errors
+}
+
 export default function SystemUser() {
   const navigate = useNavigate()
+  const [showForm, setShowForm] = useState(false)
+
+  const { values, errors, submitting, handleChange, handleSubmit, reset } = useForm<UserFormValues>({
+    initialValues: {
+      username: '',
+      nickname: '',
+      email: '',
+      role: ''
+    },
+    validate: validateUserForm,
+    onSubmit: async (formValues) => {
+      // eslint-disable-next-line no-console
+      console.log('新增用户', formValues)
+      await new Promise((resolve) => setTimeout(resolve, 800))
+      alert(`用户 ${formValues.username} 创建成功！`)
+      setShowForm(false)
+      reset()
+    }
+  })
+
+  const handleOpenForm = () => {
+    setShowForm(true)
+    reset()
+  }
+
+  const handleCloseForm = () => {
+    setShowForm(false)
+    reset()
+  }
 
   return (
     <div className="page-container">
       <div className="page-header">
         <h2>用户管理</h2>
-        <button className="btn-primary">+ 新增用户</button>
+        <Button onClick={handleOpenForm}>+ 新增用户</Button>
       </div>
+
+      {/* 新增用户表单弹窗（使用 @lvetechs/ui-lib 的 Dialog 作为容器） */}
+      {showForm && (
+        <Dialog
+          visible={showForm}
+          maskClosable={false}
+          onClose={handleCloseForm}
+          onOk={handleSubmit}
+          okText={submitting ? '提交中...' : '提交'}
+          cancelText='取消'
+          onCancel={handleCloseForm}
+        >
+          <div className="space-y-4">
+            <label className="mb-1 block text-sm font-medium text-slate-700" htmlFor="username">
+              用户名 <span className="text-rose-500">*</span>
+            </label>
+            <Input
+              id="username"
+              name="username"
+              placeholder="请输入用户名"
+              value={values.username}
+              onChange={handleChange}
+            />
+            {errors.username && (
+              <p className="mt-1 text-xs text-rose-500">{errors.username}</p>
+            )}
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-slate-700" htmlFor="nickname">
+              昵称 <span className="text-rose-500">*</span>
+            </label>
+            <Input
+              id="nickname"
+              name="nickname"
+              placeholder="请输入昵称"
+              value={values.nickname}
+              onChange={handleChange}
+            />
+            {errors.nickname && (
+              <p className="mt-1 text-xs text-rose-500">{errors.nickname}</p>
+            )}
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-slate-700" htmlFor="email">
+              邮箱 <span className="text-rose-500">*</span>
+            </label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              placeholder="请输入邮箱"
+              value={values.email}
+              onChange={handleChange}
+            />
+            {errors.email && <p className="mt-1 text-xs text-rose-500">{errors.email}</p>}
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-slate-700" htmlFor="role">
+              角色 <span className="text-rose-500">*</span>
+            </label>
+            <Select
+              name="role"
+              value={values.role}
+              onChange={(value) => {
+                handleChange({ target: { name: 'role', value } } as any)
+              }}
+              placeholder="请选择角色"
+              options={[
+                { label: '超级管理员', value: '超级管理员' },
+                { label: '编辑', value: '编辑' },
+                { label: '只读', value: '只读' }
+              ]}
+            />
+            {errors.role && <p className="mt-1 text-xs text-rose-500">{errors.role}</p>}
+          </div>
+        </Dialog>
+      )}
       <table className="data-table">
         <thead>
           <tr>
@@ -40,11 +206,11 @@ export default function SystemUser() {
                 </span>
               </td>
               <td>
-                <button className="btn-link" onClick={() => navigate(`/user/detail/${user.id}`)}>
+                <Button style={{ margin: '0 5px' }} type="button" onClick={() => navigate(`/user/detail/${user.id}`)}>
                   详情
-                </button>
-                <button className="btn-link">编辑</button>
-                <button className="btn-link danger">删除</button>
+                </Button>
+                <Button style={{ margin: '0 5px' }} type="button">编辑</Button>
+                <Button style={{ margin: '0 5px' }} type="button">删除</Button>
               </td>
             </tr>
           ))}

package/templates/vue/.env

@@ -1,3 +1,3 @@
-# 基础环境变量
-VITE_APP_TITLE=My Vue App
+# 基础环境变量
+VITE_APP_TITLE=My Vue App
 VITE_APP_BASE_API=/api

package/templates/vue/.env.development

@@ -1,3 +1,3 @@
-# 开发环境
-VITE_APP_TITLE=My Vue App (Dev)
+# 开发环境
+VITE_APP_TITLE=My Vue App (Dev)
 VITE_APP_BASE_API=/api

package/templates/vue/.env.production

@@ -1,3 +1,3 @@
-# 生产环境
-VITE_APP_TITLE=My Vue App
+# 生产环境
+VITE_APP_TITLE=My Vue App
 VITE_APP_BASE_API=https://api.example.com