@lvetechs/create-app 1.0.4 → 1.0.5

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

@@ -0,0 +1,184 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+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[]
+}
+
+export const usePermissionStore = defineStore(
+  'permission',
+  () => {
+    // 所有权限配置
+    const allPermissions = ref<PermissionConfig[]>([
+      { 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: '系统管理' }
+    ])
+
+    // 所有角色配置
+    const allRoles = ref<RoleConfig[]>([
+      {
+        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']
+      }
+    ])
+
+    // 当前用户拥有的权限（从 user store 获取）
+    const userPermissions = computed(() => {
+      const userStore = useUserStore()
+      if (!userStore.userInfo) return []
+
+      const userRoles = userStore.userInfo.roles || []
+      const permissions: Permission[] = []
+
+      // 根据用户角色获取所有权限
+      userRoles.forEach((role) => {
+        const roleConfig = allRoles.value.find((r) => r.role === role)
+        if (roleConfig) {
+          permissions.push(...roleConfig.permissions)
+        }
+      })
+
+      // 去重
+      return Array.from(new Set(permissions))
+    })
+
+    // 检查是否有指定权限
+    function hasPermission(permission: Permission): boolean {
+      return userPermissions.value.includes(permission)
+    }
+
+    // 检查是否有任意一个权限
+    function hasAnyPermission(permissions: Permission[]): boolean {
+      return permissions.some((p) => hasPermission(p))
+    }
+
+    // 检查是否有所有权限
+    function hasAllPermissions(permissions: Permission[]): boolean {
+      return permissions.every((p) => hasPermission(p))
+    }
+
+    // 检查是否有指定角色
+    function hasRole(role: Role): boolean {
+      const userStore = useUserStore()
+      if (!userStore.userInfo) return false
+      return userStore.userInfo.roles?.includes(role) || false
+    }
+
+    // 检查是否有任意一个角色
+    function hasAnyRole(roles: Role[]): boolean {
+      return roles.some((r) => hasRole(r))
+    }
+
+    // 获取角色配置
+    function getRoleConfig(role: Role): RoleConfig | undefined {
+      return allRoles.value.find((r) => r.role === role)
+    }
+
+    // 获取权限配置
+    function getPermissionConfig(permission: Permission): PermissionConfig | undefined {
+      return allPermissions.value.find((p) => p.permission === permission)
+    }
+
+    // 按模块分组权限
+    const permissionsByModule = computed(() => {
+      const grouped: Record<string, PermissionConfig[]> = {}
+      allPermissions.value.forEach((permission) => {
+        const module = permission.module || '其他'
+        if (!grouped[module]) {
+          grouped[module] = []
+        }
+        grouped[module].push(permission)
+      })
+      return grouped
+    })
+
+    // 添加权限配置
+    function addPermission(permission: PermissionConfig) {
+      if (!allPermissions.value.find((p) => p.permission === permission.permission)) {
+        allPermissions.value.push(permission)
+      }
+    }
+
+    // 添加角色配置
+    function addRole(role: RoleConfig) {
+      if (!allRoles.value.find((r) => r.role === role.role)) {
+        allRoles.value.push(role)
+      }
+    }
+
+    // 更新角色权限
+    function updateRolePermissions(role: Role, permissions: Permission[]) {
+      const roleConfig = allRoles.value.find((r) => r.role === role)
+      if (roleConfig) {
+        roleConfig.permissions = permissions
+      }
+    }
+
+    return {
+      allPermissions,
+      allRoles,
+      userPermissions,
+      permissionsByModule,
+      hasPermission,
+      hasAnyPermission,
+      hasAllPermissions,
+      hasRole,
+      hasAnyRole,
+      getRoleConfig,
+      getPermissionConfig,
+      addPermission,
+      addRole,
+      updateRolePermissions
+    }
+  },
+  {
+    persist: {
+      key: 'permission-store',
+      paths: ['allPermissions', 'allRoles']
+    }
+  }
+)

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

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
+import { usePermissionStore } from './permission'
 
 export interface UserInfo {
   id: number
@@ -7,6 +8,10 @@ export interface UserInfo {
   nickname: string
   avatar: string
   roles: string[]
+  email?: string
+  phone?: string
+  department?: string
+  lastLoginTime?: number
 }
 
 export const useUserStore = defineStore(
@@ -14,35 +19,137 @@ export const useUserStore = defineStore(
   () => {
     const token = ref<string>('')
     const userInfo = ref<UserInfo | null>(null)
+    const loginHistory = ref<Array<{ time: number; ip: string; location?: string }>>([])
 
     const isLoggedIn = computed(() => !!token.value)
 
+    // 计算属性：用户显示名称
+    const displayName = computed(() => {
+      return userInfo.value?.nickname || userInfo.value?.username || '未登录'
+    })
+
+    // 计算属性：用户头像
+    const avatar = computed(() => {
+      return userInfo.value?.avatar || '/default-avatar.png'
+    })
+
+    // 计算属性：是否是管理员
+    const isAdmin = computed(() => {
+      return userInfo.value?.roles?.includes('admin') || false
+    })
+
     function setToken(val: string) {
       token.value = val
     }
 
     function setUserInfo(info: UserInfo) {
       userInfo.value = info
+      // 更新最后登录时间
+      if (userInfo.value) {
+        userInfo.value.lastLoginTime = Date.now()
+      }
+    }
+
+    // 更新用户信息（部分更新）
+    function updateUserInfo(updates: Partial<UserInfo>) {
+      if (userInfo.value) {
+        userInfo.value = { ...userInfo.value, ...updates }
+      }
+    }
+
+    // 添加登录历史记录
+    function addLoginHistory(ip: string, location?: string) {
+      loginHistory.value.unshift({
+        time: Date.now(),
+        ip,
+        location
+      })
+      // 只保留最近 10 条记录
+      if (loginHistory.value.length > 10) {
+        loginHistory.value = loginHistory.value.slice(0, 10)
+      }
+    }
+
+    // 检查用户是否有指定权限（通过 permission store）
+    function hasPermission(permission: string): boolean {
+      const permissionStore = usePermissionStore()
+      return permissionStore.hasPermission(permission)
+    }
+
+    // 检查用户是否有指定角色
+    function hasRole(role: string): boolean {
+      return userInfo.value?.roles?.includes(role) || false
+    }
+
+    // 添加角色
+    function addRole(role: string) {
+      if (userInfo.value && !userInfo.value.roles.includes(role)) {
+        userInfo.value.roles.push(role)
+      }
+    }
+
+    // 移除角色
+    function removeRole(role: string) {
+      if (userInfo.value) {
+        userInfo.value.roles = userInfo.value.roles.filter((r) => r !== role)
+      }
     }
 
     function logout() {
       token.value = ''
       userInfo.value = null
+      // 清空登录历史（可选，根据需求决定）
+      // loginHistory.value = []
+    }
+
+    // 模拟登录
+    async function login(username: string, _password: string) {
+      // 这里应该是实际的 API 调用
+      // 模拟异步登录
+      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()
+      }
+
+      setToken('mock-token-' + Date.now())
+      setUserInfo(mockUserInfo)
+      addLoginHistory('192.168.1.100', '本地')
+
+      return mockUserInfo
     }
 
     return {
       token,
       userInfo,
+      loginHistory,
       isLoggedIn,
+      displayName,
+      avatar,
+      isAdmin,
       setToken,
       setUserInfo,
-      logout
+      updateUserInfo,
+      addLoginHistory,
+      hasPermission,
+      hasRole,
+      addRole,
+      removeRole,
+      logout,
+      login
     }
   },
   {
     persist: {
       key: 'user-store',
-      paths: ['token']
+      paths: ['token', 'userInfo', 'loginHistory']
     }
   }
 )

package/templates/vue/src/views/home/index.vue

@@ -7,34 +7,34 @@
 <template>
   <div class="home-page">
     <div class="welcome-card">
-      <h1>👋 欢迎使用 {{title}}</h1>
+      <h1>欢迎使用 {{title}}</h1>
       <p>
         该模板集成了 Vue 3 + Vite + TypeScript + Vue Router + Pinia + Axios + TailwindCSS
         等常用工具和最佳实践。
       </p>
       <div class="features">
         <div class="feature-item">
-          <h3>⚡ Vite</h3>
+          <h3>Vite</h3>
           <p>下一代前端构建工具，极速开发体验</p>
         </div>
         <div class="feature-item">
-          <h3>🦾 TypeScript</h3>
+          <h3>TypeScript</h3>
           <p>强类型语言支持，提高代码质量</p>
         </div>
         <div class="feature-item">
-          <h3>🍍 Pinia</h3>
+          <h3>Pinia</h3>
           <p>轻量灵活的状态管理方案</p>
         </div>
         <div class="feature-item">
-          <h3>🧭 Vue Router</h3>
+          <h3>Vue Router</h3>
           <p>官方路由管理，支持懒加载</p>
         </div>
         <div class="feature-item">
-          <h3>📦 Auto Import</h3>
+          <h3>Auto Import</h3>
           <p>API 和组件自动按需导入</p>
         </div>
         <div class="feature-item">
-          <h3>🎨 TailwindCSS</h3>
+          <h3>TailwindCSS</h3>
           <p>即时按需原子化 CSS 引擎</p>
         </div>
       </div>

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

@@ -1,40 +0,0 @@
-import '@/styles/page-common.scss'
-
-export default function About() {
-  const features = [
-    'React 18 + Hooks',
-    'Vite 5 构建工具',
-    'TypeScript 5 类型支持',
-    'React Router 6 路由管理',
-    'Zustand 状态管理 (支持持久化)',
-    'Axios 请求封装 (拦截器 + 类型)',
-    'TailwindCSS 实用优先 CSS',
-    'ESLint + Prettier 代码规范'
-  ]
-
-  return (
-    <div style={{ maxWidth: 700, margin: '0 auto' }}>
-      <div className="page-card">
-        <h1 style={{ fontSize: 24, marginBottom: 12 }}>关于</h1>
-        <p style={{ color: 'var(--text-color-secondary)', marginBottom: 16 }}>
-          这是一个基于 React 18 的现代化前端模板项目。
-        </p>
-        <ul style={{ listStyle: 'none', padding: 0 }}>
-          {features.map((item) => (
-            <li
-              key={item}
-              style={{
-                padding: '8px 0',
-                borderBottom: '1px solid var(--border-color-light)',
-                color: 'var(--text-color-regular)'
-              }}
-            >
-              ✅ {item}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  )
-}
-

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

@@ -1,138 +0,0 @@
-import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useUserStore } from '@/stores/user'
-
-export default function Login() {
-  const navigate = useNavigate()
-  const { setToken, setUserInfo } = useUserStore()
-
-  const [form, setForm] = useState({ username: '', password: '' })
-  const [loading, setLoading] = useState(false)
-
-  async function handleLogin(e: React.FormEvent) {
-    e.preventDefault()
-    if (!form.username || !form.password) {
-      alert('请输入用户名和密码')
-      return
-    }
-
-    setLoading(true)
-    try {
-      // TODO: 调用登录 API
-      // const res = await loginApi(form)
-      // setToken(res.data.token)
-
-      // 模拟登录
-      setToken('mock-token')
-      setUserInfo({
-        id: 1,
-        username: form.username,
-        nickname: '管理员',
-        avatar: '',
-        roles: ['admin']
-      })
-
-      navigate('/')
-    } catch (error) {
-      console.error('登录失败:', error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <div className="login-page">
-      <div className="login-card">
-        <h2>用户登录</h2>
-        <form onSubmit={handleLogin}>
-          <div className="form-item">
-            <label>用户名</label>
-            <input
-              type="text"
-              placeholder="请输入用户名"
-              autoComplete="username"
-              value={form.username}
-              onChange={(e) => setForm({ ...form, username: e.target.value })}
-            />
-          </div>
-          <div className="form-item">
-            <label>密码</label>
-            <input
-              type="password"
-              placeholder="请输入密码"
-              autoComplete="current-password"
-              value={form.password}
-              onChange={(e) => setForm({ ...form, password: e.target.value })}
-            />
-          </div>
-          <button type="submit" className="login-btn" disabled={loading}>
-            {loading ? '登录中...' : '登 录'}
-          </button>
-        </form>
-      </div>
-
-      <style>{`
-        .login-page {
-          height: 100vh;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        }
-        .login-card {
-          width: 380px;
-          padding: 40px;
-          background: #fff;
-          border-radius: 12px;
-          box-shadow: 0 20px 60px rgba(0,0,0,0.15);
-        }
-        .login-card h2 {
-          text-align: center;
-          margin-bottom: 32px;
-          color: #333;
-          font-size: 24px;
-        }
-        .form-item {
-          margin-bottom: 20px;
-        }
-        .form-item label {
-          display: block;
-          margin-bottom: 6px;
-          font-size: 14px;
-          color: #606266;
-        }
-        .form-item input {
-          width: 100%;
-          padding: 10px 12px;
-          border: 1px solid #dcdfe6;
-          border-radius: 6px;
-          font-size: 14px;
-          outline: none;
-          transition: border-color 0.2s;
-          box-sizing: border-box;
-        }
-        .form-item input:focus {
-          border-color: #409eff;
-        }
-        .form-item input::placeholder {
-          color: #c0c4cc;
-        }
-        .login-btn {
-          width: 100%;
-          padding: 12px;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          color: #fff;
-          border: none;
-          border-radius: 6px;
-          font-size: 16px;
-          cursor: pointer;
-          transition: opacity 0.2s;
-          margin-top: 8px;
-        }
-        .login-btn:hover { opacity: 0.9; }
-        .login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
-      `}</style>
-    </div>
-  )
-}
-

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

@@ -1,143 +0,0 @@
-import { useState } from 'react'
-import { useNavigate, Link } from 'react-router-dom'
-
-export default function Register() {
-  const navigate = useNavigate()
-  const [form, setForm] = useState({ username: '', password: '', confirmPassword: '' })
-  const [loading, setLoading] = useState(false)
-
-  async function handleRegister(e: React.FormEvent) {
-    e.preventDefault()
-    if (!form.username || !form.password) {
-      alert('请填写完整信息')
-      return
-    }
-    if (form.password !== form.confirmPassword) {
-      alert('两次密码输入不一致')
-      return
-    }
-
-    setLoading(true)
-    try {
-      // TODO: 调用注册 API
-      alert('注册成功！')
-      navigate('/login')
-    } catch (error) {
-      console.error('注册失败:', error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <div className="register-page">
-      <div className="register-card">
-        <h2>用户注册</h2>
-        <form onSubmit={handleRegister}>
-          <div className="form-item">
-            <label>用户名</label>
-            <input
-              type="text"
-              placeholder="请输入用户名"
-              autoComplete="username"
-              value={form.username}
-              onChange={(e) => setForm({ ...form, username: e.target.value })}
-            />
-          </div>
-          <div className="form-item">
-            <label>密码</label>
-            <input
-              type="password"
-              placeholder="请输入密码"
-              autoComplete="new-password"
-              value={form.password}
-              onChange={(e) => setForm({ ...form, password: e.target.value })}
-            />
-          </div>
-          <div className="form-item">
-            <label>确认密码</label>
-            <input
-              type="password"
-              placeholder="请再次输入密码"
-              autoComplete="new-password"
-              value={form.confirmPassword}
-              onChange={(e) => setForm({ ...form, confirmPassword: e.target.value })}
-            />
-          </div>
-          <button type="submit" className="register-btn" disabled={loading}>
-            {loading ? '注册中...' : '注 册'}
-          </button>
-          <div className="to-login">
-            已有账号？<Link to="/login">立即登录</Link>
-          </div>
-        </form>
-      </div>
-
-      <style>{`
-        .register-page {
-          height: 100vh;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-        }
-        .register-card {
-          width: 400px;
-          padding: 40px;
-          background: #fff;
-          border-radius: 12px;
-          box-shadow: 0 20px 60px rgba(0,0,0,0.15);
-        }
-        .register-card h2 {
-          text-align: center;
-          margin-bottom: 32px;
-          color: #333;
-          font-size: 24px;
-        }
-        .form-item {
-          margin-bottom: 20px;
-        }
-        .form-item label {
-          display: block;
-          margin-bottom: 6px;
-          font-size: 14px;
-          color: #606266;
-        }
-        .form-item input {
-          width: 100%;
-          padding: 10px 12px;
-          border: 1px solid #dcdfe6;
-          border-radius: 6px;
-          font-size: 14px;
-          outline: none;
-          transition: border-color 0.2s;
-          box-sizing: border-box;
-        }
-        .form-item input:focus { border-color: #43e97b; }
-        .form-item input::placeholder { color: #c0c4cc; }
-        .register-btn {
-          width: 100%;
-          padding: 12px;
-          background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-          color: #fff;
-          border: none;
-          border-radius: 6px;
-          font-size: 16px;
-          cursor: pointer;
-          transition: opacity 0.2s;
-          margin-top: 8px;
-        }
-        .register-btn:hover { opacity: 0.9; }
-        .register-btn:disabled { opacity: 0.6; cursor: not-allowed; }
-        .to-login {
-          text-align: center;
-          margin-top: 16px;
-          font-size: 14px;
-          color: #909399;
-        }
-        .to-login a { color: #43e97b; font-weight: 500; }
-      `}</style>
-    </div>
-  )
-}
-