create-fullstack-scaffold 0.1.1 → 0.2.0

package/template/src/admin/layouts/Sidebar.tsx

@@ -1,120 +1,137 @@
-import { useState } from 'react'
-import { NavLink } from 'react-router-dom'
+import { Layout, Menu } from 'antd'
 import {
-  LayoutDashboard,
-  Users,
-  ShoppingCart,
-  Headphones,
-  FileText,
-  AlertTriangle,
-  Settings,
-  Shield,
-  UserCog,
-  Activity,
-  ChevronDown,
-  ChevronRight,
-  type LucideIcon,
-} from 'lucide-react'
-import { usePermissions } from '../hooks/usePermissions'
-import type { MenuItem } from '@shared/modules/permission'
-
-const ICON_MAP: Record<string, LucideIcon> = {
-  LayoutDashboard,
-  Users,
-  ShoppingCart,
-  Headphones,
-  FileText,
-  AlertTriangle,
-  Settings,
-  Shield,
-  UserCog,
-  Activity,
-}
+  DashboardOutlined,
+  FileTextOutlined,
+  TeamOutlined,
+  SettingOutlined,
+  RocketOutlined,
+} from '@ant-design/icons'
+import { NavLink, useLocation } from 'react-router-dom'
 
 interface SidebarProps {
-  isOpen: boolean
+  collapsed: boolean
+  onCollapse: (collapsed: boolean) => void
 }
 
-interface MenuItemComponentProps {
-  item: MenuItem
-  level?: number
-}
+const MENU_ITEMS = [
+  {
+    key: 'dashboard',
+    icon: <DashboardOutlined />,
+    label: <NavLink to="/dashboard">Dashboard</NavLink>,
+  },
+  {
+    key: 'content',
+    icon: <FileTextOutlined />,
+    label: 'Content Management',
+    children: [
+      {
+        key: 'content-list',
+        label: <NavLink to="/content">Content List</NavLink>,
+      },
+      {
+        key: 'categories',
+        label: <NavLink to="/categories">Categories</NavLink>,
+      },
+    ],
+  },
+  {
+    key: 'users-orders',
+    icon: <TeamOutlined />,
+    label: 'Users & Orders',
+    children: [
+      {
+        key: 'users',
+        label: <NavLink to="/users">Users</NavLink>,
+      },
+      {
+        key: 'orders',
+        label: <NavLink to="/orders">Orders</NavLink>,
+      },
+      {
+        key: 'tickets',
+        label: <NavLink to="/tickets">Tickets</NavLink>,
+      },
+      {
+        key: 'disputes',
+        label: <NavLink to="/disputes">Disputes</NavLink>,
+      },
+    ],
+  },
+  {
+    key: 'system',
+    icon: <SettingOutlined />,
+    label: 'System',
+    children: [
+      {
+        key: 'roles',
+        label: <NavLink to="/roles">Roles & Permissions</NavLink>,
+      },
+      {
+        key: 'system-settings',
+        label: <NavLink to="/settings">Settings</NavLink>,
+      },
+      {
+        key: 'logs',
+        label: <NavLink to="/system-logs">System Logs</NavLink>,
+      },
+    ],
+  },
+]
 
-const MenuItemComponent: React.FC<MenuItemComponentProps> = ({ item, level = 0 }) => {
-  const [expanded, setExpanded] = useState(false)
-  const Icon = ICON_MAP[item.icon] || LayoutDashboard
-  const hasChildren = item.children && item.children.length > 0
+export const Sidebar: React.FC<SidebarProps> = ({ collapsed, onCollapse }) => {
+  const location = useLocation()
 
-  if (hasChildren) {
-    return (
-      <div>
-        <button
-          onClick={() => setExpanded(!expanded)}
-          className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg mb-2 transition-colors text-gray-300 hover:bg-gray-800 ${
-            level > 0 ? 'pl-8' : ''
-          }`}
-        >
-          <Icon className="w-5 h-5" />
-          <span className="flex-1 text-left">{item.label}</span>
-          {expanded ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
-        </button>
-        {expanded && (
-          <div className="ml-4">
-            {item.children!.map(child => (
-              <MenuItemComponent key={child.path} item={child} level={level + 1} />
-            ))}
-          </div>
-        )}
-      </div>
-    )
+  const getSelectedKey = () => {
+    const path = location.pathname
+    if (path === '/dashboard') return 'dashboard'
+    if (path.startsWith('/content')) return 'content-list'
+    if (path.startsWith('/categories')) return 'categories'
+    if (path.startsWith('/users')) return 'users'
+    if (path.startsWith('/orders')) return 'orders'
+    if (path.startsWith('/tickets')) return 'tickets'
+    if (path.startsWith('/disputes')) return 'disputes'
+    if (path.startsWith('/roles')) return 'roles'
+    if (path.startsWith('/settings') || path === '/settings') return 'system-settings'
+    if (path.startsWith('/system-logs')) return 'logs'
+    return 'dashboard'
   }
 
   return (
-    <NavLink
-      to={item.path}
-      className={({ isActive }) =>
-        `flex items-center gap-3 px-4 py-3 rounded-lg mb-2 transition-colors ${
-          isActive ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-800'
-        } ${level > 0 ? 'pl-8 text-sm' : ''}`
-      }
-    >
-      <Icon className="w-5 h-5" />
-      <span>{item.label}</span>
-    </NavLink>
-  )
-}
-
-export const Sidebar: React.FC<SidebarProps> = ({ isOpen }) => {
-  const { menuConfig, loading, initialized } = usePermissions()
-
-  if (loading || !initialized) {
-    return (
-      <aside className="bg-gray-900 text-white w-64 overflow-hidden" data-testid="admin-sidebar">
-        <div className="h-16 flex items-center justify-between px-4 border-b border-gray-800">
-          <h1 className="text-lg font-bold">Admin Panel</h1>
-        </div>
-        <nav className="p-4">
-          <div className="text-gray-400">加载中...</div>
-        </nav>
-      </aside>
-    )
-  }
-
-  return (
-    <aside
-      className={`bg-gray-900 text-white transition-all duration-300 ${
-        isOpen ? 'w-64' : 'w-0'
-      } overflow-hidden`}
+    <Layout.Sider
+      collapsible
+      collapsed={collapsed}
+      onCollapse={onCollapse}
+      trigger={null}
+      width={256}
+      collapsedWidth={80}
+      className="!bg-[#001529]"
       data-testid="admin-sidebar"
     >
-      <div className="h-16 flex items-center justify-between px-4 border-b border-gray-800">
-        <h1 className="text-lg font-bold">Admin Panel</h1>
+      <div
+        className="h-16 flex items-center justify-center border-b border-gray-700 overflow-hidden transition-all duration-300"
+        data-testid="admin-sidebar-logo"
+      >
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 rounded-lg bg-indigo-500 flex items-center justify-center flex-shrink-0">
+            <RocketOutlined className="text-white text-base" />
+          </div>
+          {!collapsed && (
+            <span className="text-white font-semibold text-base whitespace-nowrap tracking-tight">
+              Biomimic
+            </span>
+          )}
+        </div>
       </div>
-      <nav className="p-4">
-        {menuConfig.map((item: MenuItem) => (
-          <MenuItemComponent key={item.path} item={item} />
-        ))}
-      </nav>
-    </aside>
+
+      <Menu
+        mode="inline"
+        selectedKeys={[getSelectedKey()]}
+        defaultOpenKeys={['content', 'users-orders', 'system']}
+        inlineCollapsed={false}
+        items={MENU_ITEMS}
+        className="!border-r-0 !bg-transparent mt-2"
+        style={{ background: 'transparent' }}
+      />
+    </Layout.Sider>
   )
 }

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

@@ -0,0 +1,241 @@
+import { useState, useEffect, useCallback } from 'react'
+import {
+  Table,
+  Card,
+  Button,
+  Space,
+  Modal,
+  Form,
+  Input,
+  InputNumber,
+  message,
+  Popconfirm,
+} from 'antd'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
+import type { ColumnsType } from 'antd/es/table'
+import { apiClient, api } from '../services/apiClient'
+import type { Category } from '@shared/modules/plugins'
+
+type CategoryFormValues = Pick<Category, 'name' | 'slug'> & {
+  description?: string
+  icon?: string
+  sortOrder?: number
+}
+
+export const CategoryManagementPage: React.FC = () => {
+  const [categories, setCategories] = useState<Category[]>([])
+  const [loading, setLoading] = useState(false)
+  const [modalVisible, setModalVisible] = useState(false)
+  const [editingCategory, setEditingCategory] = useState<Category | null>(null)
+  const [form] = Form.useForm<CategoryFormValues>()
+
+  const fetchCategories = useCallback(async () => {
+    setLoading(true)
+    try {
+      const data = await api(apiClient.api.categories.$get()).withLoading('加载分类...').json()
+      if (Array.isArray(data)) {
+        setCategories(data)
+      }
+    } catch {
+      // 错误已由 api-request 自动处理
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchCategories()
+  }, [fetchCategories])
+
+  const handleCreate = () => {
+    setEditingCategory(null)
+    form.resetFields()
+    form.setFieldsValue({ sortOrder: 0 })
+    setModalVisible(true)
+  }
+
+  const handleEdit = (category: Category) => {
+    setEditingCategory(category)
+    form.setFieldsValue({
+      name: category.name,
+      slug: category.slug,
+      description: category.description ?? undefined,
+      icon: category.icon ?? undefined,
+      sortOrder: category.sortOrder,
+    })
+    setModalVisible(true)
+  }
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields()
+
+      if (editingCategory) {
+        await api(
+          apiClient.api.categories[':id'].$put({
+            param: { id: editingCategory.id },
+            json: values,
+          })
+        )
+          .withLoading('更新中...')
+          .json()
+        message.success('分类已更新')
+      } else {
+        await api(apiClient.api.categories.$post({ json: values }))
+          .withLoading('创建中...')
+          .json()
+        message.success('分类已创建')
+      }
+
+      setModalVisible(false)
+      fetchCategories()
+    } catch {
+      // 错误已由 api-request 自动处理
+    }
+  }
+
+  const handleDelete = async (id: string) => {
+    try {
+      await api(apiClient.api.categories[':id'].$delete({ param: { id } }))
+        .withLoading('删除中...')
+        .json()
+      message.success('分类已删除')
+      fetchCategories()
+    } catch {
+      // 错误已由 api-request 自动处理
+    }
+  }
+
+  const columns: ColumnsType<Category> = [
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+      render: (name: string, record: Category) => (
+        <div>
+          <span className="font-medium">{name}</span>
+          {record.icon && <span className="ml-2 text-gray-400">{record.icon}</span>}
+        </div>
+      ),
+    },
+    {
+      title: 'Slug',
+      dataIndex: 'slug',
+      key: 'slug',
+      render: (slug: string) => (
+        <code className="text-xs bg-gray-100 px-1.5 py-0.5 rounded">{slug}</code>
+      ),
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+      ellipsis: true,
+      render: (desc?: string) => desc || <span className="text-gray-300">-</span>,
+    },
+    {
+      title: '图标',
+      dataIndex: 'icon',
+      key: 'icon',
+      render: (icon?: string) => icon || <span className="text-gray-300">-</span>,
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortOrder',
+      key: 'sortOrder',
+      sorter: (a: Category, b: Category) => a.sortOrder - b.sortOrder,
+      width: 100,
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      width: 180,
+      render: (_: unknown, record: Category) => (
+        <Space>
+          <Button
+            type="link"
+            size="small"
+            icon={<EditOutlined />}
+            onClick={() => handleEdit(record)}
+          >
+            编辑
+          </Button>
+          <Popconfirm
+            title="确定要删除此分类吗？"
+            description="删除后关联的插件将失去分类标记"
+            onConfirm={() => handleDelete(record.id)}
+            okText="删除"
+            cancelText="取消"
+            okButtonProps={{ danger: true }}
+          >
+            <Button type="link" size="small" danger icon={<DeleteOutlined />}>
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">分类管理</h1>
+          <p className="text-gray-600 mt-1">管理插件市场的分类</p>
+        </div>
+        <Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>
+          创建分类
+        </Button>
+      </div>
+
+      <Card className="shadow-sm">
+        <Table
+          columns={columns}
+          dataSource={categories}
+          rowKey="id"
+          loading={loading}
+          pagination={{ pageSize: 20, showTotal: t => `共 ${t} 个分类` }}
+        />
+      </Card>
+
+      <Modal
+        title={editingCategory ? '编辑分类' : '创建分类'}
+        open={modalVisible}
+        onOk={handleSubmit}
+        onCancel={() => setModalVisible(false)}
+        okText={editingCategory ? '保存' : '创建'}
+        width={520}
+      >
+        <Form form={form} layout="vertical" className="mt-4">
+          <Form.Item
+            name="name"
+            label="分类名称"
+            rules={[{ required: true, message: '请输入分类名称' }]}
+          >
+            <Input placeholder="例如：AI 工具" />
+          </Form.Item>
+          <Form.Item
+            name="slug"
+            label="Slug"
+            rules={[
+              { required: true, message: '请输入 Slug' },
+              { pattern: /^[a-z0-9-]+$/, message: '只能包含小写字母、数字和连字符' },
+            ]}
+          >
+            <Input placeholder="例如：ai-tools" disabled={!!editingCategory} />
+          </Form.Item>
+          <Form.Item name="description" label="描述">
+            <Input.TextArea rows={3} placeholder="分类描述（可选）" maxLength={500} showCount />
+          </Form.Item>
+          <Form.Item name="icon" label="图标">
+            <Input placeholder="图标名称或 Emoji（可选）" />
+          </Form.Item>
+          <Form.Item name="sortOrder" label="排序" initialValue={0}>
+            <InputNumber min={0} max={9999} style={{ width: '100%' }} placeholder="0" />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  )
+}

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

@@ -44,6 +44,8 @@ export const ContentPage: React.FC = () => {
       const result = await response.json()
       if (result.success) {
         setContents(result.data)
+      } else {
+        message.error('Failed to load content')
       }
     } catch {
       message.error('获取内容列表失败')

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

@@ -18,6 +18,8 @@ export const DashboardPage: React.FC = () => {
         const result = await response.json()
         if (result.success) {
           setStats(result.data)
+        } else {
+          message.error(result.error || 'Failed to load stats')
         }
       } catch (error) {
         console.error('Failed to fetch stats:', error)

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

@@ -45,6 +45,8 @@ export const DisputesPage: React.FC = () => {
       const result = await response.json()
       if (result.success) {
         setDisputes(result.data)
+      } else {
+        message.error(result.error || 'Failed to load disputes')
       }
     } catch {
       message.error('获取争议列表失败')

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

@@ -194,7 +194,7 @@ export const MediaTestPage: React.FC = () => {
         setDirectSpeed(`${speed} KB/s`)
       }
 
-      const blob = new Blob(chunks)
+      const blob = new Blob(chunks as BlobPart[])
       const url = URL.createObjectURL(blob)
       const a = document.createElement('a')
       a.href = url

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

@@ -41,6 +41,8 @@ export const OrdersPage: React.FC = () => {
       const result = await response.json()
       if (result.success) {
         setOrders(result.data)
+      } else {
+        message.error(result.error || 'Failed to load orders')
       }
     } catch {
       message.error('获取订单列表失败')