create-fullstack-scaffold 0.1.0

package/template/src/admin/components/PermissionConfigEditor.tsx

@@ -0,0 +1,237 @@
+import React, { useState, useEffect } from 'react'
+import { Tabs, Input, Button, message, Space, Alert } from 'antd'
+import { CodeOutlined, SaveOutlined, FormatPainterOutlined } from '@ant-design/icons'
+import type { PermissionInfo } from '@shared/modules/permission'
+
+interface PermissionConfigEditorProps {
+  visible: boolean
+  title: string
+  permissions: PermissionInfo[]
+  selectedPermissions: string[]
+  onCancel: () => void
+  onOk: (permissions: string[]) => void
+}
+
+export const PermissionConfigEditor: React.FC<PermissionConfigEditorProps> = ({
+  visible,
+  permissions,
+  selectedPermissions,
+  onOk,
+}) => {
+  const [jsonValue, setJsonValue] = useState('')
+  const [jsonError, setJsonError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (visible) {
+      setJsonValue(JSON.stringify(selectedPermissions, null, 2))
+      setJsonError(null)
+    }
+  }, [visible, selectedPermissions])
+
+  const handleFormatJson = () => {
+    try {
+      const parsed = JSON.parse(jsonValue)
+      setJsonValue(JSON.stringify(parsed, null, 2))
+      setJsonError(null)
+      message.success('JSON格式化成功')
+    } catch (error) {
+      setJsonError(`JSON格式错误: ${(error as Error).message}`)
+      message.error('JSON格式错误')
+    }
+  }
+
+  const handleValidate = () => {
+    try {
+      const parsed = JSON.parse(jsonValue)
+
+      if (!Array.isArray(parsed)) {
+        setJsonError('配置必须是数组格式')
+        return false
+      }
+
+      const validPermissions = permissions.map(p => p.permission)
+      const invalidPermissions = parsed.filter(p => !validPermissions.includes(p))
+
+      if (invalidPermissions.length > 0) {
+        setJsonError(`无效的权限: ${invalidPermissions.join(', ')}`)
+        return false
+      }
+
+      setJsonError(null)
+      return true
+    } catch (error) {
+      setJsonError(`JSON格式错误: ${(error as Error).message}`)
+      return false
+    }
+  }
+
+  const handleOk = () => {
+    if (!handleValidate()) {
+      message.error('请修复JSON错误后再保存')
+      return
+    }
+
+    try {
+      const parsed = JSON.parse(jsonValue)
+      onOk(parsed)
+    } catch {
+      message.error('保存失败')
+    }
+  }
+
+  const handleLoadTemplate = (template: string[]) => {
+    setJsonValue(JSON.stringify(template, null, 2))
+    setJsonError(null)
+    message.success('模板加载成功')
+  }
+
+  const templates = [
+    {
+      name: '超级管理员',
+      permissions: permissions.map(p => p.permission),
+    },
+    {
+      name: '客服人员',
+      permissions: [
+        'user:view',
+        'content:view',
+        'order:view',
+        'order:process',
+        'ticket:view',
+        'ticket:reply',
+        'ticket:close',
+        'data:export',
+        'system:logs',
+      ],
+    },
+    {
+      name: '普通用户',
+      permissions: ['content:view', 'order:view'],
+    },
+    {
+      name: '内容管理员',
+      permissions: ['content:view', 'content:create', 'content:edit', 'content:delete'],
+    },
+    {
+      name: '订单管理员',
+      permissions: ['order:view', 'order:process', 'data:export'],
+    },
+  ]
+
+  if (!visible) return null
+
+  return (
+    <div>
+      <Tabs
+        defaultActiveKey="json"
+        items={[
+          {
+            key: 'json',
+            label: (
+              <span>
+                <CodeOutlined />
+                JSON编辑器
+              </span>
+            ),
+            children: (
+              <div>
+                <Alert
+                  message="JSON格式说明"
+                  description='请输入权限代码数组，例如：["user:view", "user:create"]'
+                  type="info"
+                  showIcon
+                  style={{ marginBottom: '16px' }}
+                />
+
+                <Input.TextArea
+                  value={jsonValue}
+                  onChange={e => {
+                    setJsonValue(e.target.value)
+                    setJsonError(null)
+                  }}
+                  placeholder='["permission1", "permission2"]'
+                  rows={15}
+                  style={{ fontFamily: 'monospace' }}
+                />
+
+                {jsonError && (
+                  <Alert message={jsonError} type="error" showIcon style={{ marginTop: '16px' }} />
+                )}
+
+                <Space style={{ marginTop: '16px' }}>
+                  <Button icon={<FormatPainterOutlined />} onClick={handleFormatJson}>
+                    格式化
+                  </Button>
+                  <Button type="primary" icon={<SaveOutlined />} onClick={handleOk}>
+                    保存
+                  </Button>
+                </Space>
+              </div>
+            ),
+          },
+          {
+            key: 'templates',
+            label: '权限模板',
+            children: (
+              <div>
+                <Alert
+                  message="选择预设模板快速配置权限"
+                  description="点击模板按钮将替换当前配置"
+                  type="info"
+                  showIcon
+                  style={{ marginBottom: '16px' }}
+                />
+
+                <Space direction="vertical" style={{ width: '100%' }}>
+                  {templates.map(template => (
+                    <Button
+                      key={template.name}
+                      block
+                      onClick={() => handleLoadTemplate(template.permissions)}
+                      style={{ textAlign: 'left', height: 'auto', padding: '12px' }}
+                    >
+                      <div style={{ fontWeight: 'bold' }}>{template.name}</div>
+                      <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
+                        {template.permissions.length} 个权限:{' '}
+                        {template.permissions.slice(0, 5).join(', ')}
+                        {template.permissions.length > 5 && '...'}
+                      </div>
+                    </Button>
+                  ))}
+                </Space>
+              </div>
+            ),
+          },
+          {
+            key: 'help',
+            label: '帮助',
+            children: (
+              <div>
+                <h3>权限配置说明</h3>
+
+                <h4>可用权限列表：</h4>
+                <ul>
+                  {permissions.map(permission => (
+                    <li key={permission.permission}>
+                      <code>{permission.permission}</code> - {permission.label}
+                    </li>
+                  ))}
+                </ul>
+
+                <h4>配置示例：</h4>
+                <pre style={{ background: '#f5f5f5', padding: '12px', borderRadius: '4px' }}>
+                  {`[
+  "user:view",
+  "user:create",
+  "user:edit",
+  "content:view"
+]`}
+                </pre>
+              </div>
+            ),
+          },
+        ]}
+      />
+    </div>
+  )
+}

package/template/src/admin/components/PermissionGuard.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import { usePermissions } from '../hooks/usePermissions'
+import { Permission } from '@shared/modules/permission'
+
+interface PermissionGuardProps {
+  permissions?: Permission[]
+  permission?: Permission
+  mode?: 'any' | 'all'
+  children: React.ReactNode
+  fallback?: React.ReactNode
+}
+
+export function PermissionGuard({
+  permissions: permissionsList,
+  permission,
+  mode = 'all',
+  children,
+  fallback = null,
+}: PermissionGuardProps) {
+  const { hasPermission, hasAnyPermission, hasAllPermissions } = usePermissions()
+
+  if (permission) {
+    if (!hasPermission(permission)) {
+      return <>{fallback}</>
+    }
+    return <>{children}</>
+  }
+
+  if (permissionsList && permissionsList.length > 0) {
+    const hasAccess =
+      mode === 'any' ? hasAnyPermission(permissionsList) : hasAllPermissions(permissionsList)
+
+    if (!hasAccess) {
+      return <>{fallback}</>
+    }
+  }
+
+  return <>{children}</>
+}
+
+interface PermissionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  permissions?: Permission[]
+  permission?: Permission
+  mode?: 'any' | 'all'
+  fallback?: React.ReactNode
+}
+
+export function PermissionButton({
+  permissions: permissionsList,
+  permission,
+  mode = 'all',
+  children,
+  fallback = null,
+  ...buttonProps
+}: PermissionButtonProps) {
+  return (
+    <PermissionGuard
+      permissions={permissionsList}
+      permission={permission}
+      mode={mode}
+      fallback={fallback}
+    >
+      <button {...buttonProps}>{children}</button>
+    </PermissionGuard>
+  )
+}
+
+interface CanProps {
+  I: Permission | Permission[]
+  children: React.ReactNode
+  fallback?: React.ReactNode
+  mode?: 'any' | 'all'
+}
+
+export function Can({ I, children, fallback, mode = 'all' }: CanProps) {
+  const permissions = Array.isArray(I) ? I : [I]
+
+  return (
+    <PermissionGuard permissions={permissions} mode={mode} fallback={fallback}>
+      {children}
+    </PermissionGuard>
+  )
+}
+
+interface CannotProps {
+  I: Permission | Permission[]
+  children: React.ReactNode
+  fallback?: React.ReactNode
+  mode?: 'any' | 'all'
+}
+
+export function Cannot({ I, children, fallback = null, mode = 'all' }: CannotProps) {
+  const { hasPermission, hasAnyPermission, hasAllPermissions } = usePermissions()
+  const permissions = Array.isArray(I) ? I : [I]
+
+  const hasAccess =
+    permissions.length === 1
+      ? hasPermission(permissions[0])
+      : mode === 'any'
+        ? hasAnyPermission(permissions)
+        : hasAllPermissions(permissions)
+
+  if (hasAccess) {
+    return <>{fallback}</>
+  }
+
+  return <>{children}</>
+}

package/template/src/admin/components/PermissionTree.tsx

@@ -0,0 +1,193 @@
+import React, { useState, useMemo } from 'react'
+import { Tree, Card, Tag, Input, Space, Button, Tooltip } from 'antd'
+import { SearchOutlined, InfoCircleOutlined } from '@ant-design/icons'
+import type { PermissionInfo, PermissionCategory } from '@shared/modules/permission'
+import type { DataNode } from 'antd/es/tree'
+import {
+  PERMISSION_DEPENDENCIES,
+  getRequiredPermissions,
+} from '@shared/modules/permission/permission-dependencies'
+
+interface PermissionTreeProps {
+  permissions: PermissionInfo[]
+  categories: Record<string, PermissionCategory>
+  selectedPermissions: string[]
+  onSelectionChange: (permissions: string[]) => void
+}
+
+export const PermissionTree: React.FC<PermissionTreeProps> = ({
+  permissions,
+  categories,
+  selectedPermissions,
+  onSelectionChange,
+}) => {
+  const [searchText, setSearchText] = useState('')
+  const [expandedKeys, setExpandedKeys] = useState<string[]>([])
+
+  const treeData = useMemo(() => {
+    const categoryMap = new Map<string, PermissionInfo[]>()
+
+    permissions.forEach(permission => {
+      const category = permission.category
+      if (!categoryMap.has(category)) {
+        categoryMap.set(category, [])
+      }
+      categoryMap.get(category)!.push(permission)
+    })
+
+    return Array.from(categoryMap.entries()).map(([category, perms]) => ({
+      key: category,
+      title: (
+        <span>
+          <Tag color="blue">{categories[category]?.label || category}</Tag>
+          <span style={{ marginLeft: '8px' }}>
+            {perms.filter(p => selectedPermissions.includes(p.permission)).length} / {perms.length}
+          </span>
+        </span>
+      ),
+      children: perms.map(perm => ({
+        key: perm.permission,
+        title: (
+          <span>
+            <Tag color={selectedPermissions.includes(perm.permission) ? 'green' : 'default'}>
+              {perm.label}
+            </Tag>
+            <span style={{ marginLeft: '8px', color: '#666', fontSize: '12px' }}>
+              {perm.permission}
+            </span>
+            {PERMISSION_DEPENDENCIES[perm.permission] && (
+              <Tooltip title={`需要权限: ${PERMISSION_DEPENDENCIES[perm.permission].join(', ')}`}>
+                <InfoCircleOutlined style={{ marginLeft: '4px', color: '#1890ff' }} />
+              </Tooltip>
+            )}
+          </span>
+        ),
+      })),
+    }))
+  }, [permissions, categories, selectedPermissions])
+
+  const filteredTreeData = useMemo(() => {
+    if (!searchText) return treeData
+
+    return treeData
+      .map(category => {
+        const filteredChildren = category.children?.filter(child => {
+          const permission = permissions.find(p => p.permission === child.key)
+          return (
+            permission?.permission.toLowerCase().includes(searchText.toLowerCase()) ||
+            permission?.label.toLowerCase().includes(searchText.toLowerCase())
+          )
+        })
+
+        if (filteredChildren && filteredChildren.length > 0) {
+          return {
+            ...category,
+            children: filteredChildren,
+          }
+        }
+
+        return null
+      })
+      .filter(Boolean)
+  }, [treeData, searchText, permissions])
+
+  const handleCheck = (
+    checked: React.Key[] | { checked: React.Key[]; halfChecked: React.Key[] }
+  ) => {
+    const checkedKeys = Array.isArray(checked) ? checked : checked.checked
+    const newCheckedPermissions = checkedKeys.filter(key =>
+      permissions.some(p => p.permission === key)
+    ) as string[]
+
+    const oldCheckedPermissions = selectedPermissions
+    const addedPermissions = newCheckedPermissions.filter(p => !oldCheckedPermissions.includes(p))
+    const removedPermissions = oldCheckedPermissions.filter(p => !newCheckedPermissions.includes(p))
+
+    let finalPermissions = [...newCheckedPermissions]
+
+    for (const permission of addedPermissions) {
+      const required = getRequiredPermissions(permission)
+      for (const req of required) {
+        if (!finalPermissions.includes(req)) {
+          finalPermissions.push(req)
+        }
+      }
+    }
+
+    for (const permission of removedPermissions) {
+      const dependentPermissions = Object.entries(PERMISSION_DEPENDENCIES)
+        .filter(([_, deps]) => deps.includes(permission))
+        .map(([perm]) => perm)
+
+      for (const dep of dependentPermissions) {
+        finalPermissions = finalPermissions.filter(p => p !== dep)
+      }
+    }
+
+    finalPermissions = [...new Set(finalPermissions)]
+    onSelectionChange(finalPermissions)
+  }
+
+  const handleSelectAll = () => {
+    onSelectionChange(permissions.map(p => p.permission))
+  }
+
+  const handleClearAll = () => {
+    onSelectionChange([])
+  }
+
+  const handleExpandAll = () => {
+    setExpandedKeys(Object.keys(categories))
+  }
+
+  const handleCollapseAll = () => {
+    setExpandedKeys([])
+  }
+
+  const handleExpand = (keys: React.Key[]) => {
+    setExpandedKeys(keys as string[])
+  }
+
+  return (
+    <Card>
+      <Space direction="vertical" style={{ width: '100%', marginBottom: '16px' }}>
+        <Input
+          placeholder="搜索权限..."
+          prefix={<SearchOutlined />}
+          value={searchText}
+          onChange={e => setSearchText(e.target.value)}
+          allowClear
+        />
+
+        <Space>
+          <Button size="small" onClick={handleSelectAll}>
+            全选
+          </Button>
+          <Button size="small" onClick={handleClearAll}>
+            清空
+          </Button>
+          <Button size="small" onClick={handleExpandAll}>
+            展开全部
+          </Button>
+          <Button size="small" onClick={handleCollapseAll}>
+            收起全部
+          </Button>
+        </Space>
+      </Space>
+
+      <Tree
+        checkable
+        checkedKeys={selectedPermissions}
+        expandedKeys={expandedKeys}
+        onExpand={handleExpand}
+        onCheck={handleCheck}
+        treeData={filteredTreeData.filter(Boolean) as DataNode[]}
+        style={{ marginTop: '16px' }}
+      />
+
+      <div style={{ marginTop: '16px', color: '#666' }}>
+        已选择 <Tag color="green">{selectedPermissions.length}</Tag> 个权限
+      </div>
+    </Card>
+  )
+}

package/template/src/admin/components/ProtectedRoute.tsx

@@ -0,0 +1,33 @@
+import { useEffect } from 'react'
+import { Navigate, useLocation } from 'react-router-dom'
+import { useAdminStore } from '../stores/adminStore'
+import { usePermissionStore } from '../hooks/usePermissions'
+import { Role } from '@shared/modules/permission'
+
+interface ProtectedRouteProps {
+  children: React.ReactNode
+  requiredRole?: Role
+}
+
+export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children, requiredRole }) => {
+  const location = useLocation()
+  const { isAuthenticated, user } = useAdminStore()
+  const { initialized, initPermissions, fetchStaticData } = usePermissionStore()
+
+  useEffect(() => {
+    if (isAuthenticated && !initialized) {
+      initPermissions()
+      fetchStaticData()
+    }
+  }, [isAuthenticated, initialized, initPermissions, fetchStaticData])
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />
+  }
+
+  if (requiredRole && user?.role !== requiredRole && user?.role !== Role.SUPER_ADMIN) {
+    return <Navigate to="/dashboard" replace />
+  }
+
+  return <>{children}</>
+}

package/template/src/admin/components/StatsCard.tsx

@@ -0,0 +1,44 @@
+import { Card, Statistic } from 'antd'
+import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons'
+import type { ReactNode } from 'react'
+
+interface StatsCardProps {
+  title: string
+  value: number
+  prefix?: ReactNode
+  suffix?: string
+  trend?: {
+    value: number
+    isUp: boolean
+  }
+  loading?: boolean
+}
+
+export const StatsCard: React.FC<StatsCardProps> = ({
+  title,
+  value,
+  prefix,
+  suffix,
+  trend,
+  loading,
+}) => {
+  return (
+    <Card loading={loading}>
+      <Statistic
+        title={title}
+        value={value}
+        prefix={prefix}
+        suffix={suffix}
+        valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
+      />
+      {trend && (
+        <div className="mt-2">
+          <span style={{ color: trend.isUp ? '#3f8600' : '#cf1322' }}>
+            {trend.isUp ? <ArrowUpOutlined /> : <ArrowDownOutlined />} {Math.abs(trend.value)}%
+          </span>
+          <span className="text-gray-400 ml-2">vs last month</span>
+        </div>
+      )}
+    </Card>
+  )
+}

package/template/src/admin/components/UserFormModal.tsx

@@ -0,0 +1,67 @@
+import { Form, Input, Modal, Select, Switch } from 'antd'
+import type { CreateUserRequest } from '@shared/modules/admin'
+
+type UserFormData = Omit<CreateUserRequest, 'password'> & { status: boolean }
+
+interface UserFormModalProps {
+  open: boolean
+  title: string
+  initialValues?: Partial<UserFormData>
+  onOk: (values: UserFormData) => void
+  onCancel: () => void
+  loading?: boolean
+}
+
+export const UserFormModal: React.FC<UserFormModalProps> = ({
+  open,
+  title,
+  initialValues,
+  onOk,
+  onCancel,
+  loading,
+}) => {
+  const [form] = Form.useForm<UserFormData>()
+
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields()
+      onOk(values)
+    } catch (error) {
+      console.error('Validation failed:', error)
+    }
+  }
+
+  const handleCancel = () => {
+    form.resetFields()
+    onCancel()
+  }
+
+  return (
+    <Modal
+      open={open}
+      title={title}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      confirmLoading={loading}
+    >
+      <Form form={form} layout="vertical" initialValues={initialValues}>
+        <Form.Item name="username" label="Username" rules={[{ required: true }]}>
+          <Input placeholder="Enter username" />
+        </Form.Item>
+        <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email' }]}>
+          <Input placeholder="Enter email" />
+        </Form.Item>
+        <Form.Item name="role" label="Role" rules={[{ required: true }]}>
+          <Select placeholder="Select role">
+            <Select.Option value="admin">Admin</Select.Option>
+            <Select.Option value="user">User</Select.Option>
+            <Select.Option value="guest">Guest</Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item name="status" label="Active" valuePropName="checked">
+          <Switch />
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}