create-fullstack-scaffold 0.1.0

package/template/src/admin/App.tsx

@@ -0,0 +1,59 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { ConfigProvider } from 'antd'
+import { Layout } from './layouts/Layout'
+import { DashboardPage } from './pages/DashboardPage'
+import { LoginPage } from './pages/LoginPage'
+import { RegisterPage } from './pages/RegisterPage'
+import { SettingsPage } from './pages/SettingsPage'
+import { PermissionsPage } from './pages/PermissionsPage'
+import { RolesPage } from './pages/RolesPage'
+import { SystemLogsPage } from './pages/SystemLogsPage'
+import { UsersPage } from './pages/UsersPage'
+import { OrdersPage } from './pages/OrdersPage'
+import { TicketsPage } from './pages/TicketsPage'
+import { DisputesPage } from './pages/DisputesPage'
+import { ContentPage } from './pages/ContentPage'
+import { ProtectedRoute, CaptchaModal } from './components'
+
+export const App: React.FC = () => {
+  return (
+    <ConfigProvider
+      theme={{
+        token: {
+          colorPrimary: '#1890ff',
+        },
+      }}
+    >
+      <BrowserRouter basename="/admin">
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/register" element={<RegisterPage />} />
+          <Route
+            path="/*"
+            element={
+              <ProtectedRoute>
+                <Layout>
+                  <Routes>
+                    <Route path="/" element={<Navigate to="/dashboard" replace />} />
+                    <Route path="/dashboard" element={<DashboardPage />} />
+                    <Route path="/users" element={<UsersPage />} />
+                    <Route path="/orders" element={<OrdersPage />} />
+                    <Route path="/tickets" element={<TicketsPage />} />
+                    <Route path="/disputes" element={<DisputesPage />} />
+                    <Route path="/content" element={<ContentPage />} />
+                    <Route path="/system/settings" element={<SettingsPage />} />
+                    <Route path="/system/logs" element={<SystemLogsPage />} />
+                    <Route path="/system/monitor" element={<div>系统监控页面（待开发）</div>} />
+                    <Route path="/system/permissions" element={<PermissionsPage />} />
+                    <Route path="/system/roles" element={<RolesPage />} />
+                  </Routes>
+                </Layout>
+              </ProtectedRoute>
+            }
+          />
+        </Routes>
+        <CaptchaModal />
+      </BrowserRouter>
+    </ConfigProvider>
+  )
+}

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

@@ -0,0 +1,104 @@
+import { useState } from 'react'
+import { Dropdown, Button, Tag, Space, message } from 'antd'
+import { User, RefreshCw } from 'lucide-react'
+import { useAdminStore } from '../stores/adminStore'
+import { usePermissions } from '../hooks/usePermissions'
+import { Role } from '@shared/modules/permission'
+
+interface TestAccount {
+  username: string
+  password: string
+  role: Role
+  label: string
+  color: string
+}
+
+const TEST_ACCOUNTS: TestAccount[] = [
+  {
+    username: 'superadmin',
+    password: '123456',
+    role: Role.SUPER_ADMIN,
+    label: '超级管理员',
+    color: 'red',
+  },
+  {
+    username: 'customerservice',
+    password: '123456',
+    role: Role.CUSTOMER_SERVICE,
+    label: '客服人员',
+    color: 'blue',
+  },
+  {
+    username: 'user1',
+    password: '123456',
+    role: Role.USER,
+    label: '普通用户',
+    color: 'green',
+  },
+]
+
+export const AccountSwitcher: React.FC = () => {
+  const [switching, setSwitching] = useState(false)
+  const { user, login, logout } = useAdminStore()
+  const { refreshPermissions } = usePermissions()
+
+  const handleSwitchAccount = async (account: TestAccount) => {
+    if (user?.username === account.username) {
+      message.info('已经是当前账号')
+      return
+    }
+
+    setSwitching(true)
+    try {
+      await logout()
+      await login(account.username, account.password)
+      await refreshPermissions()
+      message.success(`已切换到 ${account.label}`)
+      window.location.reload()
+    } catch (error) {
+      message.error('切换账号失败')
+      console.error('Switch account error:', error)
+    } finally {
+      setSwitching(false)
+    }
+  }
+
+  const currentRole = user?.role
+  const currentAccount = TEST_ACCOUNTS.find(acc => acc.role === currentRole)
+
+  return (
+    <Dropdown
+      menu={{
+        items: TEST_ACCOUNTS.map(account => ({
+          key: account.username,
+          label: (
+            <div className="flex items-center justify-between w-full">
+              <span>{account.label}</span>
+              {user?.username === account.username && (
+                <Tag color="success" className="ml-2">
+                  当前
+                </Tag>
+              )}
+            </div>
+          ),
+          icon: <User className="w-4 h-4" />,
+          onClick: () => handleSwitchAccount(account),
+        })),
+      }}
+      trigger={['click']}
+    >
+      <Button
+        type="text"
+        className="flex items-center gap-2 text-white hover:bg-gray-700"
+        loading={switching}
+      >
+        <User className="w-4 h-4" />
+        <Space>
+          <span>{user?.username}</span>
+          <Tag color={currentAccount?.color}>{currentAccount?.label || user?.role}</Tag>
+        </Space>
+        <RefreshCw className="w-3 h-3" />
+      </Button>
+    </Dropdown>
+  )
+}

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

@@ -0,0 +1,150 @@
+import { Modal, Input, Button, message } from 'antd'
+import { ReloadOutlined } from '@ant-design/icons'
+import { useState, useEffect } from 'react'
+import { useCaptchaStore } from '../stores/captchaStore'
+import type { CaptchaResponse } from '@shared/modules/captcha'
+
+export const CaptchaModal: React.FC = () => {
+  const { isOpen, resolve } = useCaptchaStore()
+  const [code, setCode] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [captchaData, setCaptchaData] = useState<CaptchaResponse | null>(null)
+  const [refreshing, setRefreshing] = useState(false)
+
+  const fetchCaptcha = async () => {
+    setRefreshing(true)
+    try {
+      const response = await window.fetch('/api/captcha')
+      const result = (await response.json()) as { success: boolean; data?: CaptchaResponse }
+
+      if (result.success && result.data) {
+        setCaptchaData(result.data)
+      } else {
+        message.error('获取验证码失败')
+      }
+    } catch {
+      message.error('获取验证码失败')
+    } finally {
+      setRefreshing(false)
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      fetchCaptcha()
+      setCode('')
+    }
+  }, [isOpen])
+
+  const handleRefresh = () => {
+    fetchCaptcha()
+  }
+
+  const handleSubmit = async () => {
+    if (!code.trim()) {
+      message.warning('请输入验证码')
+      return
+    }
+
+    if (!captchaData) {
+      message.warning('验证码未加载，请刷新')
+      return
+    }
+
+    setLoading(true)
+    try {
+      const response = await window.fetch('/api/verify-captcha', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          id: captchaData.id,
+          code,
+        }),
+      })
+
+      const result = (await response.json()) as { success: boolean; error?: string }
+
+      if (result.success) {
+        message.success('验证成功')
+        resolve(true)
+        setCode('')
+        setCaptchaData(null)
+      } else {
+        message.error(result.error || '验证失败')
+        handleRefresh()
+      }
+    } catch {
+      message.error('验证失败，请重试')
+      handleRefresh()
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleCancel = () => {
+    setCode('')
+    setCaptchaData(null)
+    resolve(false)
+  }
+
+  return (
+    <Modal
+      open={isOpen}
+      title="请完成安全验证"
+      onCancel={handleCancel}
+      footer={null}
+      maskClosable={false}
+      closable={true}
+      width={400}
+    >
+      <div className="space-y-4">
+        <div className="relative">
+          {captchaData?.image ? (
+            <img
+              src={captchaData.image}
+              alt="验证码"
+              className="w-full h-32 object-cover border rounded cursor-pointer"
+              onClick={handleRefresh}
+            />
+          ) : (
+            <div className="w-full h-32 border rounded flex items-center justify-center bg-gray-50">
+              {refreshing ? '加载中...' : '点击刷新验证码'}
+            </div>
+          )}
+          <Button
+            type="text"
+            icon={<ReloadOutlined />}
+            onClick={handleRefresh}
+            loading={refreshing}
+            className="absolute top-2 right-2"
+            title="刷新验证码"
+          />
+        </div>
+
+        <Input
+          placeholder="请输入验证码"
+          value={code}
+          onChange={e => setCode(e.target.value)}
+          onPressEnter={handleSubmit}
+          size="large"
+          disabled={!captchaData}
+        />
+
+        <div className="flex gap-2">
+          <Button onClick={handleCancel} className="flex-1">
+            取消
+          </Button>
+          <Button
+            type="primary"
+            onClick={handleSubmit}
+            loading={loading}
+            disabled={!captchaData}
+            className="flex-1"
+          >
+            提交
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}

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

@@ -0,0 +1,213 @@
+import { Bell, CheckCheck, Info, AlertTriangle, XCircle, CheckCircle } from 'lucide-react'
+import { Badge, Button, Drawer, Empty, Spin, Tabs } from 'antd'
+import type { AppNotification, NotificationType } from '@shared/schemas'
+
+interface NotificationDrawerProps {
+  open: boolean
+  onClose: () => void
+  notifications: AppNotification[]
+  unreadCount: number
+  onMarkAsRead: (id: string) => void
+  onMarkAllAsRead: () => void
+  loading?: boolean
+}
+
+const typeConfig: Record<
+  NotificationType,
+  { color: string; bgColor: string; icon: React.ReactNode }
+> = {
+  info: {
+    color: '#1890ff',
+    bgColor: '#e6f7ff',
+    icon: <Info className="w-4 h-4" />,
+  },
+  warning: {
+    color: '#faad14',
+    bgColor: '#fffbe6',
+    icon: <AlertTriangle className="w-4 h-4" />,
+  },
+  error: {
+    color: '#ff4d4f',
+    bgColor: '#fff2f0',
+    icon: <XCircle className="w-4 h-4" />,
+  },
+  success: {
+    color: '#52c41a',
+    bgColor: '#f6ffed',
+    icon: <CheckCircle className="w-4 h-4" />,
+  },
+}
+
+function formatTime(dateString: string): string {
+  const date = new Date(dateString)
+  const now = new Date()
+  const diff = now.getTime() - date.getTime()
+
+  const minutes = Math.floor(diff / 60000)
+  const hours = Math.floor(diff / 3600000)
+  const days = Math.floor(diff / 86400000)
+
+  if (minutes < 1) return '刚刚'
+  if (minutes < 60) return `${minutes}分钟前`
+  if (hours < 24) return `${hours}小时前`
+  if (days < 7) return `${days}天前`
+  return date.toLocaleDateString('zh-CN')
+}
+
+export const NotificationDrawer: React.FC<NotificationDrawerProps> = ({
+  open,
+  onClose,
+  notifications,
+  unreadCount,
+  onMarkAsRead,
+  onMarkAllAsRead,
+  loading,
+}) => {
+  const renderNotificationItem = (notif: AppNotification) => {
+    const config = typeConfig[notif.type]
+
+    return (
+      <div
+        key={notif.id}
+        className={`p-4 border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors ${
+          !notif.read ? 'bg-blue-50/50' : ''
+        }`}
+        onClick={() => !notif.read && onMarkAsRead(notif.id)}
+      >
+        <div className="flex items-start gap-3">
+          <div
+            className="flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center"
+            style={{ backgroundColor: config.bgColor, color: config.color }}
+          >
+            {config.icon}
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <span className="font-medium text-gray-900 truncate">{notif.title}</span>
+              {!notif.read && <span className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0" />}
+            </div>
+            <p className="text-sm text-gray-500 mt-1 line-clamp-2">{notif.message}</p>
+            <span className="text-xs text-gray-400 mt-1 block">{formatTime(notif.createdAt)}</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const unreadNotifications = notifications.filter(n => !n.read)
+  const readNotifications = notifications.filter(n => n.read)
+
+  const tabItems = [
+    {
+      key: 'all',
+      label: `全部 (${notifications.length})`,
+      children: (
+        <div className="overflow-y-auto" style={{ maxHeight: 'calc(100vh - 200px)' }}>
+          {loading ? (
+            <div className="flex items-center justify-center py-12">
+              <Spin />
+            </div>
+          ) : notifications.length === 0 ? (
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无通知" className="py-12" />
+          ) : (
+            notifications.map(renderNotificationItem)
+          )}
+        </div>
+      ),
+    },
+    {
+      key: 'unread',
+      label: `未读 (${unreadNotifications.length})`,
+      children: (
+        <div className="overflow-y-auto" style={{ maxHeight: 'calc(100vh - 200px)' }}>
+          {unreadNotifications.length === 0 ? (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              description="暂无未读通知"
+              className="py-12"
+            />
+          ) : (
+            unreadNotifications.map(renderNotificationItem)
+          )}
+        </div>
+      ),
+    },
+    {
+      key: 'read',
+      label: `已读 (${readNotifications.length})`,
+      children: (
+        <div className="overflow-y-auto" style={{ maxHeight: 'calc(100vh - 200px)' }}>
+          {readNotifications.length === 0 ? (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              description="暂无已读通知"
+              className="py-12"
+            />
+          ) : (
+            readNotifications.map(renderNotificationItem)
+          )}
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <Drawer
+      title={
+        <div className="flex items-center justify-between">
+          <span>通知中心</span>
+          {unreadCount > 0 && (
+            <Button
+              type="link"
+              size="small"
+              icon={<CheckCheck className="w-4 h-4" />}
+              onClick={onMarkAllAsRead}
+              className="text-xs"
+            >
+              全部已读
+            </Button>
+          )}
+        </div>
+      }
+      placement="right"
+      onClose={onClose}
+      open={open}
+      width={400}
+      styles={{
+        header: { borderBottom: '1px solid #f0f0f0' },
+        body: { padding: 0 },
+      }}
+    >
+      <Tabs defaultActiveKey="all" items={tabItems} className="px-4" />
+    </Drawer>
+  )
+}
+
+export const NotificationBell: React.FC<{
+  unreadCount: number
+  onClick: () => void
+}> = ({ unreadCount, onClick }) => {
+  return (
+    <button
+      className="p-2 rounded-lg hover:bg-gray-100 transition-colors relative"
+      onClick={onClick}
+    >
+      <Bell className="w-5 h-5 text-gray-600" />
+      {unreadCount > 0 && (
+        <Badge
+          count={unreadCount > 99 ? '99+' : unreadCount}
+          size="small"
+          style={{
+            position: 'absolute',
+            top: -2,
+            right: -2,
+            minWidth: 18,
+            height: 18,
+            fontSize: 10,
+            lineHeight: '18px',
+          }}
+        />
+      )}
+    </button>
+  )
+}

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

@@ -0,0 +1,45 @@
+import { Typography, Breadcrumb } from 'antd'
+import { HomeOutlined } from '@ant-design/icons'
+import type { ReactNode } from 'react'
+
+const { Title } = Typography
+
+interface BreadcrumbItem {
+  title: string
+  href?: string
+}
+
+interface PageHeaderProps {
+  title: string
+  subtitle?: string
+  breadcrumbs?: BreadcrumbItem[]
+  extra?: ReactNode
+}
+
+export const PageHeader: React.FC<PageHeaderProps> = ({ title, subtitle, breadcrumbs, extra }) => {
+  return (
+    <div className="mb-6">
+      {breadcrumbs && breadcrumbs.length > 0 && (
+        <Breadcrumb className="mb-2">
+          <Breadcrumb.Item>
+            <HomeOutlined />
+          </Breadcrumb.Item>
+          {breadcrumbs.map((item, index) => (
+            <Breadcrumb.Item key={index} href={item.href}>
+              {item.title}
+            </Breadcrumb.Item>
+          ))}
+        </Breadcrumb>
+      )}
+      <div className="flex items-center justify-between">
+        <div>
+          <Title level={2} style={{ margin: 0 }}>
+            {title}
+          </Title>
+          {subtitle && <p className="text-gray-500 mt-1">{subtitle}</p>}
+        </div>
+        {extra && <div>{extra}</div>}
+      </div>
+    </div>
+  )
+}