@lvetechs/create-app 1.0.4 → 1.0.5

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

@@ -0,0 +1,183 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { useUserStore } from './user'
+
+export type Permission = string
+export type Role = string
+
+export interface PermissionConfig {
+  permission: Permission
+  name: string
+  description?: string
+  module?: string
+}
+
+export interface RoleConfig {
+  role: Role
+  name: string
+  description?: string
+  permissions: Permission[]
+}
+
+interface PermissionState {
+  allPermissions: PermissionConfig[]
+  allRoles: RoleConfig[]
+
+  // 计算相关
+  getUserPermissions: () => Permission[]
+  getPermissionsByModule: () => Record<string, PermissionConfig[]>
+
+  // 检查权限 / 角色
+  hasPermission: (permission: Permission) => boolean
+  hasAnyPermission: (permissions: Permission[]) => boolean
+  hasAllPermissions: (permissions: Permission[]) => boolean
+  hasRole: (role: Role) => boolean
+  hasAnyRole: (roles: Role[]) => boolean
+
+  // 查询配置
+  getRoleConfig: (role: Role) => RoleConfig | undefined
+  getPermissionConfig: (permission: Permission) => PermissionConfig | undefined
+
+  // 修改配置
+  addPermission: (permission: PermissionConfig) => void
+  addRole: (role: RoleConfig) => void
+  updateRolePermissions: (role: Role, permissions: Permission[]) => void
+}
+
+export const usePermissionStore = create<PermissionState>()(
+  persist(
+    (set, get) => ({
+      allPermissions: [
+        { permission: 'user:view', name: '查看用户', module: '用户管理' },
+        { permission: 'user:create', name: '创建用户', module: '用户管理' },
+        { permission: 'user:edit', name: '编辑用户', module: '用户管理' },
+        { permission: 'user:delete', name: '删除用户', module: '用户管理' },
+        { permission: 'role:view', name: '查看角色', module: '角色管理' },
+        { permission: 'role:create', name: '创建角色', module: '角色管理' },
+        { permission: 'role:edit', name: '编辑角色', module: '角色管理' },
+        { permission: 'role:delete', name: '删除角色', module: '角色管理' },
+        { permission: 'system:config', name: '系统配置', module: '系统管理' },
+        { permission: 'system:log', name: '查看日志', module: '系统管理' }
+      ],
+
+      allRoles: [
+        {
+          role: 'admin',
+          name: '超级管理员',
+          description: '拥有所有权限',
+          permissions: [
+            'user:view',
+            'user:create',
+            'user:edit',
+            'user:delete',
+            'role:view',
+            'role:create',
+            'role:edit',
+            'role:delete',
+            'system:config',
+            'system:log'
+          ]
+        },
+        {
+          role: 'editor',
+          name: '编辑',
+          description: '可以查看和编辑内容',
+          permissions: ['user:view', 'user:create', 'user:edit', 'role:view']
+        },
+        {
+          role: 'viewer',
+          name: '只读',
+          description: '只能查看内容',
+          permissions: ['user:view', 'role:view']
+        }
+      ],
+
+      getUserPermissions: () => {
+        const user = useUserStore.getState().userInfo
+        if (!user) return []
+
+        const roles = user.roles || []
+        const allRoles = get().allRoles
+
+        const permissions: Permission[] = []
+        roles.forEach((role) => {
+          const roleConfig = allRoles.find((r) => r.role === role)
+          if (roleConfig) {
+            permissions.push(...roleConfig.permissions)
+          }
+        })
+
+        return Array.from(new Set(permissions))
+      },
+
+      getPermissionsByModule: () => {
+        const grouped: Record<string, PermissionConfig[]> = {}
+        get().allPermissions.forEach((permission) => {
+          const module = permission.module || '其他'
+          if (!grouped[module]) grouped[module] = []
+          grouped[module].push(permission)
+        })
+        return grouped
+      },
+
+      hasPermission: (permission) => get().getUserPermissions().includes(permission),
+
+      hasAnyPermission: (permissions) => permissions.some((p) => get().hasPermission(p)),
+
+      hasAllPermissions: (permissions) => permissions.every((p) => get().hasPermission(p)),
+
+      hasRole: (role) => {
+        const user = useUserStore.getState().userInfo
+        return user?.roles?.includes(role) ?? false
+      },
+
+      hasAnyRole: (roles) => roles.some((r) => get().hasRole(r)),
+
+      getRoleConfig: (role) => get().allRoles.find((r) => r.role === role),
+
+      getPermissionConfig: (permission) =>
+        get().allPermissions.find((p) => p.permission === permission),
+
+      getPermissionsByModule: () => {
+        const grouped: Record<string, PermissionConfig[]> = {}
+        get().allPermissions.forEach((permission) => {
+          const module = permission.module || '其他'
+          if (!grouped[module]) grouped[module] = []
+          grouped[module].push(permission)
+        })
+        return grouped
+      },
+
+      addPermission: (permission) =>
+        set((state) => {
+          if (state.allPermissions.some((p) => p.permission === permission.permission)) {
+            return state
+          }
+          return { allPermissions: [...state.allPermissions, permission] }
+        }),
+
+      addRole: (role) =>
+        set((state) => {
+          if (state.allRoles.some((r) => r.role === role.role)) {
+            return state
+          }
+          return { allRoles: [...state.allRoles, role] }
+        }),
+
+      updateRolePermissions: (role, permissions) =>
+        set((state) => ({
+          allRoles: state.allRoles.map((r) =>
+            r.role === role ? { ...r, permissions } : r
+          )
+        }))
+    }),
+    {
+      name: 'permission-store',
+      partialize: (state) => ({
+        allPermissions: state.allPermissions,
+        allRoles: state.allRoles
+      })
+    }
+  )
+)
+

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>