create-fullstack-scaffold 0.1.0

package/template/src/admin/pages/RolesPage.tsx

@@ -0,0 +1,330 @@
+import React, { useEffect, useState } from 'react'
+import {
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Switch,
+  message,
+  Popconfirm,
+  Space,
+  Tag,
+  Tabs,
+} from 'antd'
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  KeyOutlined,
+  CodeOutlined,
+  ApartmentOutlined,
+} from '@ant-design/icons'
+import { useRoleStore } from '../hooks/useRoles'
+import { useConfig, usePermissionCategories } from '../hooks/useConfig'
+import { usePermissions } from '../hooks/usePermissions'
+import type { RoleType, CreateRoleType } from '@shared/modules/role/schemas'
+import { PermissionConfigEditor } from '../components/PermissionConfigEditor'
+import { PermissionTree } from '../components/PermissionTree'
+import { apiClient } from '../services/apiClient'
+import { validatePermissionDependencies } from '@shared/modules/permission/permission-dependencies'
+
+type RoleFormValues = Pick<CreateRoleType, 'code' | 'name' | 'label' | 'description'> & {
+  isActive?: boolean | null
+}
+
+export const RolesPage: React.FC = () => {
+  const { roles, loading, fetchRoles, createRole, updateRole, deleteRole, updateRolePermissions } =
+    useRoleStore()
+  const { permissions } = useConfig()
+  const { categories } = usePermissionCategories()
+  const { refreshPermissions } = usePermissions()
+  const [modalVisible, setModalVisible] = useState(false)
+  const [permissionModalVisible, setPermissionModalVisible] = useState(false)
+  const [editingRole, setEditingRole] = useState<RoleType | null>(null)
+  const [selectedPermissions, setSelectedPermissions] = useState<string[]>([])
+  const [form] = Form.useForm<RoleFormValues>()
+
+  useEffect(() => {
+    fetchRoles()
+  }, [fetchRoles])
+
+  const handleCreate = () => {
+    setEditingRole(null)
+    form.resetFields()
+    setModalVisible(true)
+  }
+
+  const handleEdit = (role: RoleType) => {
+    setEditingRole(role)
+    form.setFieldsValue({
+      code: role.code,
+      name: role.name,
+      label: role.label,
+      description: role.description,
+      isActive: role.isActive ?? undefined,
+    })
+    setModalVisible(true)
+  }
+
+  const handleDelete = async (id: string) => {
+    const success = await deleteRole(id)
+    if (success) {
+      message.success('角色删除成功')
+    }
+  }
+
+  const handleManagePermissions = async (role: RoleType) => {
+    setEditingRole(role)
+
+    try {
+      const response = await apiClient.api.roles[':id'].$get({
+        param: { id: role.id },
+      })
+      const data = await response.json()
+
+      if (data.success && data.data.permissions) {
+        setSelectedPermissions(data.data.permissions)
+      } else {
+        setSelectedPermissions([])
+      }
+    } catch (error) {
+      console.error('Failed to fetch role permissions:', error)
+      setSelectedPermissions([])
+    }
+
+    setPermissionModalVisible(true)
+  }
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields()
+
+      if (editingRole) {
+        const success = await updateRole(editingRole.id, values)
+        if (success) {
+          message.success('角色更新成功')
+          setModalVisible(false)
+        }
+      } else {
+        const success = await createRole(values)
+        if (success) {
+          message.success('角色创建成功')
+          setModalVisible(false)
+        }
+      }
+    } catch (error) {
+      console.error('Form validation failed:', error)
+    }
+  }
+
+  const handlePermissionSubmit = async () => {
+    if (!editingRole) return
+
+    const validation = validatePermissionDependencies(selectedPermissions)
+    if (!validation.valid) {
+      Modal.error({
+        title: '权限依赖校验失败',
+        content: (
+          <div>
+            <p>以下权限配置存在问题：</p>
+            <ul>
+              {validation.errors.map((error, index) => (
+                <li key={index}>{error}</li>
+              ))}
+            </ul>
+          </div>
+        ),
+      })
+      return
+    }
+
+    const success = await updateRolePermissions(editingRole.id, selectedPermissions)
+    if (success) {
+      message.success('权限更新成功')
+      setPermissionModalVisible(false)
+      await refreshPermissions()
+    }
+  }
+
+  const columns = [
+    {
+      title: '角色代码',
+      dataIndex: 'code',
+      key: 'code',
+    },
+    {
+      title: '角色名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '显示名称',
+      dataIndex: 'label',
+      key: 'label',
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+    },
+    {
+      title: '系统角色',
+      dataIndex: 'isSystem',
+      key: 'isSystem',
+      render: (isSystem: boolean) => (
+        <Tag color={isSystem ? 'blue' : 'default'}>{isSystem ? '是' : '否'}</Tag>
+      ),
+    },
+    {
+      title: '状态',
+      dataIndex: 'isActive',
+      key: 'isActive',
+      render: (isActive: boolean) => (
+        <Tag color={isActive ? 'green' : 'red'}>{isActive ? '启用' : '禁用'}</Tag>
+      ),
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_: unknown, record: RoleType) => (
+        <Space>
+          {record.code !== 'super_admin' && (
+            <Button
+              type="link"
+              icon={<KeyOutlined />}
+              onClick={() => handleManagePermissions(record)}
+            >
+              权限
+            </Button>
+          )}
+          <Button type="link" icon={<EditOutlined />} onClick={() => handleEdit(record)}>
+            编辑
+          </Button>
+          {!record.isSystem && (
+            <Popconfirm
+              title="确定要删除这个角色吗？"
+              onConfirm={() => handleDelete(record.id)}
+              okText="确定"
+              cancelText="取消"
+            >
+              <Button type="link" danger icon={<DeleteOutlined />}>
+                删除
+              </Button>
+            </Popconfirm>
+          )}
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <div style={{ padding: '24px' }}>
+      <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'space-between' }}>
+        <h1>角色管理</h1>
+        <Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>
+          创建角色
+        </Button>
+      </div>
+
+      <Table columns={columns} dataSource={roles} rowKey="id" loading={loading} />
+
+      <Modal
+        title={editingRole ? '编辑角色' : '创建角色'}
+        open={modalVisible}
+        onOk={handleSubmit}
+        onCancel={() => setModalVisible(false)}
+        okText="确定"
+        cancelText="取消"
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="code"
+            label="角色代码"
+            rules={[{ required: true, message: '请输入角色代码' }]}
+          >
+            <Input disabled={!!editingRole} placeholder="请输入角色代码，如：manager" />
+          </Form.Item>
+
+          <Form.Item
+            name="name"
+            label="角色名称"
+            rules={[{ required: true, message: '请输入角色名称' }]}
+          >
+            <Input placeholder="请输入角色名称" />
+          </Form.Item>
+
+          <Form.Item
+            name="label"
+            label="显示名称"
+            rules={[{ required: true, message: '请输入显示名称' }]}
+          >
+            <Input placeholder="请输入显示名称" />
+          </Form.Item>
+
+          <Form.Item name="description" label="描述">
+            <Input.TextArea placeholder="请输入角色描述" />
+          </Form.Item>
+
+          {editingRole && (
+            <Form.Item name="isActive" label="状态" valuePropName="checked">
+              <Switch checkedChildren="启用" unCheckedChildren="禁用" />
+            </Form.Item>
+          )}
+        </Form>
+      </Modal>
+
+      <Modal
+        title={`管理角色权限 - ${editingRole?.label || ''}`}
+        open={permissionModalVisible}
+        onOk={handlePermissionSubmit}
+        onCancel={() => setPermissionModalVisible(false)}
+        width={900}
+        okText="保存"
+        cancelText="取消"
+      >
+        <Tabs
+          defaultActiveKey="tree"
+          items={[
+            {
+              key: 'tree',
+              label: (
+                <span>
+                  <ApartmentOutlined />
+                  树状选择
+                </span>
+              ),
+              children: (
+                <PermissionTree
+                  permissions={permissions}
+                  categories={categories}
+                  selectedPermissions={selectedPermissions}
+                  onSelectionChange={setSelectedPermissions}
+                />
+              ),
+            },
+            {
+              key: 'json',
+              label: (
+                <span>
+                  <CodeOutlined />
+                  JSON编辑
+                </span>
+              ),
+              children: (
+                <PermissionConfigEditor
+                  visible={true}
+                  title=""
+                  permissions={permissions}
+                  selectedPermissions={selectedPermissions}
+                  onCancel={() => {}}
+                  onOk={setSelectedPermissions}
+                />
+              ),
+            },
+          ]}
+        />
+      </Modal>
+    </div>
+  )
+}

package/template/src/admin/pages/SettingsPage.tsx

@@ -0,0 +1,73 @@
+import { Card, Form, Input, Button, Switch, Divider, message } from 'antd'
+
+interface SettingsFormValues {
+  siteName?: string
+  siteDescription?: string
+  currentPassword?: string
+  newPassword?: string
+  confirmPassword?: string
+}
+
+export const SettingsPage: React.FC = () => {
+  const [form] = Form.useForm<SettingsFormValues>()
+
+  const handleSave = () => {
+    message.success('Settings saved successfully!')
+  }
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-gray-900 mb-6">Settings</h1>
+
+      <Card title="General Settings" className="mb-6">
+        <Form form={form} layout="vertical">
+          <Form.Item label="Site Name" name="siteName">
+            <Input placeholder="Enter site name" />
+          </Form.Item>
+          <Form.Item label="Site Description" name="siteDescription">
+            <Input.TextArea rows={4} placeholder="Enter site description" />
+          </Form.Item>
+        </Form>
+      </Card>
+
+      <Card title="Notification Settings" className="mb-6">
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium">Email Notifications</p>
+              <p className="text-sm text-gray-500">
+                Receive email notifications for important updates
+              </p>
+            </div>
+            <Switch defaultChecked />
+          </div>
+          <Divider />
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium">Push Notifications</p>
+              <p className="text-sm text-gray-500">Receive push notifications in browser</p>
+            </div>
+            <Switch />
+          </div>
+        </div>
+      </Card>
+
+      <Card title="Security Settings">
+        <Form form={form} layout="vertical">
+          <Form.Item label="Current Password" name="currentPassword">
+            <Input.Password placeholder="Enter current password" />
+          </Form.Item>
+          <Form.Item label="New Password" name="newPassword">
+            <Input.Password placeholder="Enter new password" />
+          </Form.Item>
+          <Form.Item label="Confirm New Password" name="confirmPassword">
+            <Input.Password placeholder="Confirm new password" />
+          </Form.Item>
+          <Button type="primary" onClick={handleSave}>
+            Save Changes
+          </Button>
+        </Form>
+      </Card>
+    </div>
+  )
+}

package/template/src/admin/pages/SystemLogsPage.tsx

@@ -0,0 +1,218 @@
+import React, { useEffect, useState } from 'react'
+import { Table, Card, Input, Select, Space, Tag, Button, Descriptions, Modal } from 'antd'
+import { SearchOutlined, EyeOutlined, ReloadOutlined } from '@ant-design/icons'
+import { useAuditLogStore } from '../hooks/useAuditLogs'
+import type { AuditLogType } from '@shared/modules/audit'
+import {
+  RESOURCE_TYPES,
+  RESOURCE_LABELS,
+  ACTION_TYPES,
+  ACTION_LABELS,
+  ACTION_COLORS,
+  type ResourceType,
+  type ActionType,
+} from '@shared/constants'
+
+const { Option } = Select
+
+export const SystemLogsPage: React.FC = () => {
+  const { logs, loading, fetchLogs } = useAuditLogStore()
+  const [selectedLog, setSelectedLog] = useState<AuditLogType | null>(null)
+  const [detailModalVisible, setDetailModalVisible] = useState(false)
+  const [filters, setFilters] = useState<{
+    userId: string
+    action: ActionType | ''
+    resourceType: ResourceType | ''
+  }>({
+    userId: '',
+    action: '',
+    resourceType: '',
+  })
+
+  useEffect(() => {
+    fetchLogs()
+  }, [fetchLogs])
+
+  const handleSearch = () => {
+    fetchLogs({
+      userId: filters.userId || undefined,
+      action: filters.action || undefined,
+      resourceType: filters.resourceType || undefined,
+    })
+  }
+
+  const handleReset = () => {
+    setFilters({ userId: '', action: '', resourceType: '' })
+    fetchLogs()
+  }
+
+  const handleViewDetail = (log: AuditLogType) => {
+    setSelectedLog(log)
+    setDetailModalVisible(true)
+  }
+
+  const columns = [
+    {
+      title: '时间',
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      width: 180,
+      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
+    },
+    {
+      title: '用户ID',
+      dataIndex: 'userId',
+      key: 'userId',
+      width: 120,
+    },
+    {
+      title: '操作',
+      dataIndex: 'action',
+      key: 'action',
+      width: 100,
+      render: (action: ActionType) => (
+        <Tag color={ACTION_COLORS[action] || 'default'}>{ACTION_LABELS[action] || action}</Tag>
+      ),
+    },
+    {
+      title: '资源类型',
+      dataIndex: 'resourceType',
+      key: 'resourceType',
+      width: 120,
+      render: (type: ResourceType) => RESOURCE_LABELS[type] || type,
+    },
+    {
+      title: '资源ID',
+      dataIndex: 'resourceId',
+      key: 'resourceId',
+      width: 150,
+      render: (id: string | null) => id || '-',
+    },
+    {
+      title: 'IP地址',
+      dataIndex: 'ipAddress',
+      key: 'ipAddress',
+      width: 140,
+      render: (ip: string | null) => ip || '-',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 100,
+      render: (_: unknown, record: AuditLogType) => (
+        <Button type="link" icon={<EyeOutlined />} onClick={() => handleViewDetail(record)}>
+          详情
+        </Button>
+      ),
+    },
+  ]
+
+  return (
+    <div style={{ padding: '24px' }}>
+      <Card
+        title="系统日志"
+        extra={
+          <Button icon={<ReloadOutlined />} onClick={() => fetchLogs()}>
+            刷新
+          </Button>
+        }
+      >
+        <Space style={{ marginBottom: '16px' }} wrap>
+          <Input
+            placeholder="用户ID"
+            value={filters.userId}
+            onChange={e => setFilters({ ...filters, userId: e.target.value })}
+            style={{ width: 150 }}
+          />
+          <Select
+            placeholder="操作类型"
+            value={filters.action || undefined}
+            onChange={value => setFilters({ ...filters, action: (value || '') as ActionType | '' })}
+            style={{ width: 120 }}
+            allowClear
+          >
+            {Object.entries(ACTION_TYPES).map(([key, value]) => (
+              <Option key={key} value={value}>
+                {ACTION_LABELS[value]}
+              </Option>
+            ))}
+          </Select>
+          <Select
+            placeholder="资源类型"
+            value={filters.resourceType || undefined}
+            onChange={value =>
+              setFilters({ ...filters, resourceType: (value || '') as ResourceType | '' })
+            }
+            style={{ width: 120 }}
+            allowClear
+          >
+            {Object.entries(RESOURCE_TYPES).map(([key, value]) => (
+              <Option key={key} value={value}>
+                {RESOURCE_LABELS[value]}
+              </Option>
+            ))}
+          </Select>
+          <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
+            搜索
+          </Button>
+          <Button onClick={handleReset}>重置</Button>
+        </Space>
+
+        <Table
+          columns={columns}
+          dataSource={logs}
+          rowKey="id"
+          loading={loading}
+          pagination={{
+            pageSize: 20,
+            showSizeChanger: true,
+            showTotal: total => `共 ${total} 条记录`,
+          }}
+        />
+      </Card>
+
+      <Modal
+        title="日志详情"
+        open={detailModalVisible}
+        onCancel={() => setDetailModalVisible(false)}
+        footer={null}
+        width={700}
+      >
+        {selectedLog && (
+          <Descriptions column={1} bordered>
+            <Descriptions.Item label="日志ID">{selectedLog.id}</Descriptions.Item>
+            <Descriptions.Item label="用户ID">{selectedLog.userId}</Descriptions.Item>
+            <Descriptions.Item label="操作">
+              <Tag color={ACTION_COLORS[selectedLog.action] || 'default'}>
+                {ACTION_LABELS[selectedLog.action] || selectedLog.action}
+              </Tag>
+            </Descriptions.Item>
+            <Descriptions.Item label="资源类型">
+              {RESOURCE_LABELS[selectedLog.resourceType] || selectedLog.resourceType}
+            </Descriptions.Item>
+            <Descriptions.Item label="资源ID">{selectedLog.resourceId || '-'}</Descriptions.Item>
+            <Descriptions.Item label="IP地址">{selectedLog.ipAddress || '-'}</Descriptions.Item>
+            <Descriptions.Item label="User Agent">{selectedLog.userAgent || '-'}</Descriptions.Item>
+            <Descriptions.Item label="时间">
+              {new Date(selectedLog.createdAt).toLocaleString('zh-CN')}
+            </Descriptions.Item>
+            {selectedLog.oldValue && (
+              <Descriptions.Item label="旧值">
+                <pre style={{ margin: 0, maxHeight: '200px', overflow: 'auto' }}>
+                  {JSON.stringify(JSON.parse(selectedLog.oldValue), null, 2)}
+                </pre>
+              </Descriptions.Item>
+            )}
+            {selectedLog.newValue && (
+              <Descriptions.Item label="新值">
+                <pre style={{ margin: 0, maxHeight: '200px', overflow: 'auto' }}>
+                  {JSON.stringify(JSON.parse(selectedLog.newValue), null, 2)}
+                </pre>
+              </Descriptions.Item>
+            )}
+          </Descriptions>
+        )}
+      </Modal>
+    </div>
+  )
+}