@lvetechs/create-app 1.0.4 → 1.0.6

package/templates/react/src/stores/user.ts

@@ -7,33 +7,180 @@ export interface UserInfo {
   nickname: string
   avatar: string
   roles: string[]
+  email?: string
+  phone?: string
+  department?: string
+  lastLoginTime?: number
+}
+
+export interface LoginHistoryItem {
+  time: number
+  ip: string
+  location?: string
 }
 
 interface UserState {
   token: string
   userInfo: UserInfo | null
+  /** 是否已登录（由 token 推导，也会被显式维护一份，方便订阅） */
   isLoggedIn: boolean
+  /** 登录历史（最近若干次登录） */
+  loginHistory: LoginHistoryItem[]
+
+  // ========== 计算相关（通过方法计算，而不是状态字段） ==========
+  /** 用户展示名称 */
+  getDisplayName: () => string
+  /** 用户头像地址 */
+  getAvatar: () => string
+  /** 是否管理员 */
+  getIsAdmin: () => boolean
+
+  // ========== 基础方法 ==========
   setToken: (val: string) => void
   setUserInfo: (info: UserInfo) => void
+  updateUserInfo: (updates: Partial<UserInfo>) => void
+
+  addLoginHistory: (ip: string, location?: string) => void
+
+  hasRole: (role: string) => boolean
+  addRole: (role: string) => void
+  removeRole: (role: string) => void
+
   logout: () => void
+
+  /** 模拟登录流程（实际项目中可替换为真实接口） */
+  login: (username: string, password: string) => Promise<UserInfo>
 }
 
 export const useUserStore = create<UserState>()(
   persist(
-    (set) => ({
+    (set, get) => ({
       token: '',
       userInfo: null,
       isLoggedIn: false,
+      loginHistory: [],
+
+      // 计算相关
+      getDisplayName: () => {
+        const user = get().userInfo
+        return user?.nickname || user?.username || '未登录'
+      },
+
+      getAvatar: () => {
+        const user = get().userInfo
+        return user?.avatar || '/default-avatar.png'
+      },
+
+      getIsAdmin: () => {
+        const user = get().userInfo
+        return user?.roles?.includes('admin') ?? false
+      },
 
+      // 基础方法
       setToken: (val) => set({ token: val, isLoggedIn: !!val }),
 
-      setUserInfo: (info) => set({ userInfo: info }),
+      setUserInfo: (info) =>
+        set(() => ({
+          userInfo: {
+            ...info,
+            lastLoginTime: info.lastLoginTime ?? Date.now()
+          }
+        })),
+
+      updateUserInfo: (updates) =>
+        set((state) =>
+          state.userInfo
+            ? {
+                userInfo: {
+                  ...state.userInfo,
+                  ...updates
+                }
+              }
+            : state
+        ),
+
+      addLoginHistory: (ip, location) =>
+        set((state) => {
+          const next: LoginHistoryItem[] = [
+            {
+              time: Date.now(),
+              ip,
+              location
+            },
+            ...state.loginHistory
+          ]
+          // 只保留最近 10 条
+          if (next.length > 10) {
+            next.length = 10
+          }
+          return { loginHistory: next }
+        }),
+
+      hasRole: (role) => {
+        const user = get().userInfo
+        return user?.roles?.includes(role) ?? false
+      },
+
+      addRole: (role) =>
+        set((state) => {
+          const user = state.userInfo
+          if (!user) return state
+          if (user.roles.includes(role)) return state
+          return {
+            userInfo: {
+              ...user,
+              roles: [...user.roles, role]
+            }
+          }
+        }),
+
+      removeRole: (role) =>
+        set((state) => {
+          const user = state.userInfo
+          if (!user) return state
+          return {
+            userInfo: {
+              ...user,
+              roles: user.roles.filter((r) => r !== role)
+            }
+          }
+        }),
+
+      logout: () => set({ token: '', userInfo: null, isLoggedIn: false }),
+
+      // 模拟登录（可在实际项目中替换成真正的 API 调用）
+      login: async (username, _password) => {
+        // 模拟异步请求
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+
+        const mockUserInfo: UserInfo = {
+          id: 1,
+          username,
+          nickname: username === 'admin' ? '管理员' : '普通用户',
+          avatar: '/avatar.png',
+          roles: username === 'admin' ? ['admin'] : ['viewer'],
+          email: `${username}@example.com`,
+          lastLoginTime: Date.now()
+        }
+
+        set({
+          token: `mock-token-${Date.now()}`,
+          userInfo: mockUserInfo,
+          isLoggedIn: true
+        })
+
+        get().addLoginHistory('192.168.1.100', '本地')
 
-      logout: () => set({ token: '', userInfo: null, isLoggedIn: false })
+        return mockUserInfo
+      }
     }),
     {
       name: 'user-store',
-      partialize: (state) => ({ token: state.token })
+      partialize: (state) => ({
+        token: state.token,
+        userInfo: state.userInfo,
+        loginHistory: state.loginHistory
+      })
     }
   )
 )

package/templates/react/src/views/home/index.tsx

@@ -1,13 +1,159 @@
-import { useState } from 'react'
+import { createContext, useContext, useReducer } from 'react'
 import '@/styles/page-common.scss'
-import { Button, Container, Input, Tabs } from '@lvetechs/ui-lib'
-export default function Home() {
-  const [count, setCount] = useState(0)
+import { Button, Card, Container, Input, Tabs } from '@lvetechs/ui-lib'
+import { useForm } from '@/hooks/useForm'
+
+// ================ useContext + useReducer 示例 ================
+
+interface CounterState {
+  count: number
+}
+
+type CounterAction = { type: 'increment' } | { type: 'decrement' } | { type: 'reset' }
+
+const CounterContext = createContext<
+  | {
+      state: CounterState
+      dispatch: React.Dispatch<CounterAction>
+    }
+  | undefined
+>(undefined)
+
+function counterReducer(state: CounterState, action: CounterAction): CounterState {
+  switch (action.type) {
+    case 'increment':
+      return { count: state.count + 1 }
+    case 'decrement':
+      return { count: state.count - 1 }
+    case 'reset':
+      return { count: 0 }
+    default:
+      return state
+  }
+}
+
+function useCounter() {
+  const ctx = useContext(CounterContext)
+  if (!ctx) {
+    throw new Error('useCounter 必须在 <CounterProvider> 内使用')
+  }
+  return ctx
+}
+
+function CounterProvider({ children }: { children: React.ReactNode }) {
+  const [state, dispatch] = useReducer(counterReducer, { count: 0 })
+
+  return <CounterContext.Provider value={{ state, dispatch }}>{children}</CounterContext.Provider>
+}
+
+function CounterSection() {
+  const {
+    state: { count },
+    dispatch
+  } = useCounter()
+
+  return (
+    <Card padding="md">
+      <h3 className="mb-2 text-lg font-semibold">useContext + useReducer 计数器示例</h3>
+      <p className="mb-4 text-3xl font-bold text-indigo-600">{count}</p>
+      <Container direction="row" gap="sm">
+        <Button onClick={() => dispatch({ type: 'increment' })}>+1</Button>
+        <Button onClick={() => dispatch({ type: 'decrement' })}>-1</Button>
+        <Button onClick={() => dispatch({ type: 'reset' })}>重置</Button>
+      </Container>
+    </Card>
+  )
+}
+
+// ================ 表单 Hook 示例（useForm） ================
+
+interface ProfileFormValues {
+  name: string
+  email: string
+}
+
+function validateProfile(values: ProfileFormValues) {
+  const errors: Partial<Record<keyof ProfileFormValues, string>> = {}
+  if (!values.name.trim()) {
+    errors.name = '请输入姓名'
+  }
+  if (!values.email.trim()) {
+    errors.email = '请输入邮箱'
+  } else if (!/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(values.email)) {
+    errors.email = '邮箱格式不正确'
+  }
+  return errors
+}
+
+function ProfileFormSection() {
+  const { values, errors, submitting, handleChange, handleSubmit, reset } = useForm<ProfileFormValues>(
+    {
+      initialValues: {
+        name: '',
+        email: ''
+      },
+      validate: validateProfile,
+      onSubmit: async (formValues) => {
+        // eslint-disable-next-line no-console
+        console.log('提交的表单数据', formValues)
+        await new Promise((resolve) => setTimeout(resolve, 800))
+        alert('提交成功（请在控制台查看提交数据）')
+      }
+    }
+  )
+
+  return (
+    <Card padding="md">
+      <h3 className="mb-2 text-lg font-semibold">useForm 表单示例</h3>
+      <p className="mb-4 text-sm text-slate-500">
+        演示如何用自定义 Hook 管理表单值、校验和提交状态。
+      </p>
+      <form className="space-y-4" onSubmit={handleSubmit}>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700" htmlFor="name">
+            姓名
+          </label>
+          <Input
+            id="name"
+            name="name"
+            placeholder="请输入姓名"
+            value={values.name}
+            onChange={handleChange}
+          />
+          {errors.name && <p className="mt-1 text-xs text-rose-500">{errors.name}</p>}
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-700" htmlFor="email">
+            邮箱
+          </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>
+        <Container direction="row" gap="sm">
+          <Button type="submit" disabled={submitting}>
+            {submitting ? '提交中...' : '提交'}
+          </Button>
+          <Button type="button" onClick={reset}>
+            重置
+          </Button>
+        </Container>
+      </form>
+    </Card>
+  )
+}
 
+export default function Home() {
   return (
     <div className="home-page" style={{ maxWidth: 900, margin: '0 auto' }}>
       <div className="page-card">
-        <h1 style={{ fontSize: 28, marginBottom: 12 }}>👋 欢迎使用 {import.meta.env.VITE_APP_TITLE}</h1>
+        <h1 style={{ fontSize: 28, marginBottom: 12 }}>欢迎使用 {import.meta.env.VITE_APP_TITLE}</h1>
         <p style={{ color: 'var(--text-color-secondary)', fontSize: 15, marginBottom: 24 }}>
           该模板创建自 @lvetechs/create-app react模板
         </p>
@@ -48,8 +194,23 @@ export default function Home() {
           },
           {
             label: 'TailwindCSS', key: 'TailwindCSS', children: <div className="feature-card">
-              实用优先的
+              实用优先的 CSS 框架
             </div>
+          },
+          {
+            label: 'React Hooks', key: 'React Hooks', children: (
+              <CounterProvider>
+                <div className="space-y-4">
+                  <p className="text-sm text-slate-500 mb-4">
+                    演示 useContext、useReducer 和自定义 useForm Hook 的实际应用
+                  </p>
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <CounterSection />
+                    <ProfileFormSection />
+                  </div>
+                </div>
+              </CounterProvider>
+            )
           }
         ]} defaultValue="@lvetechs/ui-lib" />
       </div>

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