create-fullstack-scaffold 0.4.9 → 0.4.10

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

@@ -7,80 +7,82 @@ import {
   RocketOutlined,
 } from '@ant-design/icons'
 import { NavLink, useLocation } from 'react-router-dom'
+import { useLanguage } from '../i18n/useLanguage'
 
 interface SidebarProps {
   collapsed: boolean
   onCollapse: (collapsed: boolean) => void
 }
 
-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>,
-      },
-    ],
-  },
-]
-
 export const Sidebar: React.FC<SidebarProps> = ({ collapsed, onCollapse }) => {
+  const { t } = useLanguage()
   const location = useLocation()
 
+  const MENU_ITEMS = [
+    {
+      key: 'dashboard',
+      icon: <DashboardOutlined />,
+      label: <NavLink to="/dashboard">{t('sidebar.dashboard')}</NavLink>,
+    },
+    {
+      key: 'content',
+      icon: <FileTextOutlined />,
+      label: t('sidebar.content'),
+      children: [
+        {
+          key: 'content-list',
+          label: <NavLink to="/content">{t('sidebar.contentList')}</NavLink>,
+        },
+        {
+          key: 'categories',
+          label: <NavLink to="/categories">{t('sidebar.categories')}</NavLink>,
+        },
+      ],
+    },
+    {
+      key: 'users-orders',
+      icon: <TeamOutlined />,
+      label: t('sidebar.usersOrders'),
+      children: [
+        {
+          key: 'users',
+          label: <NavLink to="/users">{t('sidebar.users')}</NavLink>,
+        },
+        {
+          key: 'orders',
+          label: <NavLink to="/orders">{t('sidebar.orders')}</NavLink>,
+        },
+        {
+          key: 'tickets',
+          label: <NavLink to="/tickets">{t('sidebar.tickets')}</NavLink>,
+        },
+        {
+          key: 'disputes',
+          label: <NavLink to="/disputes">{t('sidebar.disputes')}</NavLink>,
+        },
+      ],
+    },
+    {
+      key: 'system',
+      icon: <SettingOutlined />,
+      label: t('sidebar.system'),
+      children: [
+        {
+          key: 'roles',
+          label: <NavLink to="/system/roles">{t('sidebar.roles')}</NavLink>,
+        },
+        {
+          key: 'system-settings',
+          label: <NavLink to="/system/settings">{t('sidebar.settings')}</NavLink>,
+        },
+        {
+          key: 'logs',
+          label: <NavLink to="/system/logs">{t('sidebar.logs')}</NavLink>,
+        },
+      ],
+    },
+  ]
+
   const getSelectedKey = () => {
     const path = location.pathname
     if (path === '/dashboard') return 'dashboard'
@@ -90,9 +92,9 @@ export const Sidebar: React.FC<SidebarProps> = ({ collapsed, onCollapse }) => {
     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'
+    if (path.startsWith('/system/roles')) return 'roles'
+    if (path.startsWith('/system/settings')) return 'system-settings'
+    if (path.startsWith('/system/logs')) return 'logs'
     return 'dashboard'
   }
 

package/template/src/admin/main.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import './i18n'
 import { App } from './App'
 import '../client/index.css'
 import { setupApiRequestDeps } from '@shared/core/api-request'

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

@@ -5,34 +5,42 @@ import { PermissionGuard } from '../components/PermissionGuard'
 import { Permission } from '@shared/modules/permission'
 import { apiClient } from '../services/apiClient'
 import type { Content, CreateContentInput } from '@shared/modules/content'
+import { useLanguage } from '../i18n/useLanguage'
 
-const CATEGORY_LABELS = {
-  article: '文章',
-  announcement: '公告',
-  tutorial: '教程',
-  news: '新闻',
-  policy: '政策',
-}
-
-const STATUS_COLORS = {
+const STATUS_COLORS: Record<string, string> = {
   draft: 'default',
   published: 'success',
   archived: 'warning',
 }
 
-const STATUS_LABELS = {
-  draft: '草稿',
-  published: '已发布',
-  archived: '已归档',
-}
-
 export const ContentPage: React.FC = () => {
+  const { t, formatDate } = useLanguage()
   const [contents, setContents] = useState<Content[]>([])
   const [loading, setLoading] = useState(false)
   const [modalVisible, setModalVisible] = useState(false)
   const [editingContent, setEditingContent] = useState<Content | null>(null)
   const [form] = Form.useForm<CreateContentInput>()
 
+  const getCategoryLabel = (category: string) => {
+    const map: Record<string, string> = {
+      article: t('content.catArticle'),
+      announcement: t('content.catAnnouncement'),
+      tutorial: t('content.catTutorial'),
+      news: t('content.catNews'),
+      policy: t('content.catPolicy'),
+    }
+    return map[category] || category
+  }
+
+  const getStatusLabel = (status: string) => {
+    const map: Record<string, string> = {
+      draft: t('content.statusDraft'),
+      published: t('content.statusPublished'),
+      archived: t('content.statusArchived'),
+    }
+    return map[status] || status
+  }
+
   useEffect(() => {
     fetchContents()
   }, [])
@@ -45,10 +53,10 @@ export const ContentPage: React.FC = () => {
       if (result.success) {
         setContents(result.data)
       } else {
-        message.error('Failed to load content')
+        message.error(t('content.loadFailed'))
       }
     } catch {
-      message.error('获取内容列表失败')
+      message.error(t('content.loadFailed'))
     } finally {
       setLoading(false)
     }
@@ -68,8 +76,8 @@ export const ContentPage: React.FC = () => {
 
   const handleDelete = (id: string) => {
     Modal.confirm({
-      title: '确认删除',
-      content: '确定要删除这个内容吗？',
+      title: t('content.confirmDelete'),
+      content: t('content.confirmDeleteContent'),
       onOk: async () => {
         try {
           const response = await apiClient.api.contents[':id'].$delete({
@@ -77,11 +85,11 @@ export const ContentPage: React.FC = () => {
           })
           const result = await response.json()
           if (result.success) {
-            message.success('内容已删除')
+            message.success(t('content.deleted'))
             fetchContents()
           }
         } catch {
-          message.error('删除失败')
+          message.error(t('content.deleteFailed'))
         }
       },
     })
@@ -98,7 +106,7 @@ export const ContentPage: React.FC = () => {
         })
         const result = await response.json()
         if (result.success) {
-          message.success('内容已更新')
+          message.success(t('content.updated'))
           setModalVisible(false)
           fetchContents()
         }
@@ -108,43 +116,43 @@ export const ContentPage: React.FC = () => {
         })
         const result = await response.json()
         if (result.success) {
-          message.success('内容已创建')
+          message.success(t('content.created'))
           setModalVisible(false)
           fetchContents()
         }
       }
     } catch {
-      message.error('操作失败')
+      message.error(t('common.error'))
     }
   }
 
   const columns = [
     {
-      title: '标题',
+      title: t('content.titleCol'),
       dataIndex: 'title',
       key: 'title',
     },
     {
-      title: '分类',
+      title: t('content.category'),
       dataIndex: 'category',
       key: 'category',
-      render: (category: keyof typeof CATEGORY_LABELS) => <Tag>{CATEGORY_LABELS[category]}</Tag>,
+      render: (category: string) => <Tag>{getCategoryLabel(category)}</Tag>,
     },
     {
-      title: '状态',
+      title: t('common.status'),
       dataIndex: 'status',
       key: 'status',
-      render: (status: keyof typeof STATUS_COLORS) => (
-        <Tag color={STATUS_COLORS[status]}>{STATUS_LABELS[status]}</Tag>
+      render: (status: string) => (
+        <Tag color={STATUS_COLORS[status]}>{getStatusLabel(status)}</Tag>
       ),
     },
     {
-      title: '作者',
+      title: t('content.author'),
       dataIndex: 'author',
       key: 'author',
     },
     {
-      title: '浏览/点赞',
+      title: t('content.viewsLikes'),
       key: 'stats',
       render: (_: unknown, record: Content) => (
         <span>
@@ -153,13 +161,13 @@ export const ContentPage: React.FC = () => {
       ),
     },
     {
-      title: '创建时间',
+      title: t('common.createdAt'),
       dataIndex: 'createdAt',
       key: 'createdAt',
-      render: (date: string) => new Date(date).toLocaleDateString('zh-CN'),
+      render: (date: string) => formatDate(date),
     },
     {
-      title: '操作',
+      title: t('common.actions'),
       key: 'actions',
       render: (_: unknown, record: Content) => (
         <Space>
@@ -170,7 +178,7 @@ export const ContentPage: React.FC = () => {
               icon={<Edit className="w-4 h-4" />}
               onClick={() => handleEdit(record)}
             >
-              编辑
+              {t('common.edit')}
             </Button>
           </PermissionGuard>
           <PermissionGuard permission={Permission.CONTENT_DELETE}>
@@ -181,7 +189,7 @@ export const ContentPage: React.FC = () => {
               icon={<Delete className="w-4 h-4" />}
               onClick={() => handleDelete(record.id)}
             >
-              删除
+              {t('common.delete')}
             </Button>
           </PermissionGuard>
         </Space>
@@ -193,12 +201,12 @@ export const ContentPage: React.FC = () => {
     <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>
+          <h1 className="text-2xl font-bold text-gray-900">{t('content.title')}</h1>
+          <p className="text-gray-600 mt-1">{t('content.subtitle')}</p>
         </div>
         <PermissionGuard permission={Permission.CONTENT_CREATE}>
           <Button type="primary" icon={<Plus className="w-4 h-4" />} onClick={handleCreate}>
-            创建内容
+            {t('content.createContent')}
           </Button>
         </PermissionGuard>
       </div>
@@ -214,38 +222,42 @@ export const ContentPage: React.FC = () => {
       </Card>
 
       <Modal
-        title={editingContent ? '编辑内容' : '创建内容'}
+        title={editingContent ? t('content.editContent') : t('content.createContent')}
         open={modalVisible}
         onOk={handleSubmit}
         onCancel={() => setModalVisible(false)}
         width={600}
       >
         <Form form={form} layout="vertical">
-          <Form.Item name="title" label="标题" rules={[{ required: true, message: '请输入标题' }]}>
-            <Input placeholder="请输入标题" />
+          <Form.Item
+            name="title"
+            label={t('content.titleCol')}
+            rules={[{ required: true, message: t('content.titleRequired') }]}
+          >
+            <Input placeholder={t('content.titlePlaceholder')} />
           </Form.Item>
           <Form.Item
             name="category"
-            label="分类"
-            rules={[{ required: true, message: '请选择分类' }]}
+            label={t('content.category')}
+            rules={[{ required: true, message: t('content.categoryRequired') }]}
           >
-            <Select placeholder="请选择分类">
-              <Select.Option value="article">文章</Select.Option>
-              <Select.Option value="announcement">公告</Select.Option>
-              <Select.Option value="tutorial">教程</Select.Option>
-              <Select.Option value="news">新闻</Select.Option>
-              <Select.Option value="policy">政策</Select.Option>
+            <Select placeholder={t('content.categoryPlaceholder')}>
+              <Select.Option value="article">{t('content.catArticle')}</Select.Option>
+              <Select.Option value="announcement">{t('content.catAnnouncement')}</Select.Option>
+              <Select.Option value="tutorial">{t('content.catTutorial')}</Select.Option>
+              <Select.Option value="news">{t('content.catNews')}</Select.Option>
+              <Select.Option value="policy">{t('content.catPolicy')}</Select.Option>
             </Select>
           </Form.Item>
           <Form.Item
             name="content"
-            label="内容"
-            rules={[{ required: true, message: '请输入内容' }]}
+            label={t('content.contentLabel')}
+            rules={[{ required: true, message: t('content.contentRequired') }]}
           >
-            <Input.TextArea rows={6} placeholder="请输入内容" />
+            <Input.TextArea rows={6} placeholder={t('content.contentPlaceholder')} />
           </Form.Item>
-          <Form.Item name="tags" label="标签">
-            <Select mode="tags" placeholder="输入标签后按回车" />
+          <Form.Item name="tags" label={t('content.tags')}>
+            <Select mode="tags" placeholder={t('content.tagsPlaceholder')} />
           </Form.Item>
         </Form>
       </Modal>

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

@@ -1,11 +1,14 @@
 import { useEffect, useState } from 'react'
+import { Button, Select, message, theme } from 'antd'
+import { Activity, CheckCircle, Clock, TrendingUp, BellRing } from 'lucide-react'
 import { apiClient } from '../services/apiClient'
+import { useLanguage } from '../i18n/useLanguage'
 import type { SystemStats } from '@shared/modules/admin'
 import type { NotificationType } from '@shared/schemas'
-import { Activity, CheckCircle, Clock, TrendingUp, Bell, BellRing } from 'lucide-react'
-import { Button, Select, message } from 'antd'
 
 export const DashboardPage: React.FC = () => {
+  const { t } = useLanguage()
+  const { token } = theme.useToken()
   const [stats, setStats] = useState<SystemStats | null>(null)
   const [loading, setLoading] = useState(true)
   const [sendingNotification, setSendingNotification] = useState(false)
@@ -18,20 +21,40 @@ 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)
+      } catch {
+        message.error(t('dashboard.loadFailed'))
       } finally {
         setLoading(false)
       }
     }
 
     fetchStats()
-  }, [])
+  }, [t])
 
-  const handleSendTestNotification = async () => {
+  if (loading) {
+    return (
+      <div className="p-5" style={{ color: token.colorText }}>
+        {t('common.loading')}
+      </div>
+    )
+  }
+
+  const statCards = [
+    { title: t('dashboard.totalTodos'), value: stats?.totalTodos || 0, icon: CheckCircle, color: 'bg-blue-500' },
+    { title: t('dashboard.pending'), value: stats?.pendingTodos || 0, icon: Clock, color: 'bg-yellow-500' },
+    { title: t('dashboard.completed'), value: stats?.completedTodos || 0, icon: TrendingUp, color: 'bg-green-500' },
+    { title: t('dashboard.lastUpdated'), value: stats?.lastUpdated || '-', icon: Activity, color: 'bg-purple-500' },
+  ]
+
+  const notificationTypeOptions: { value: NotificationType; label: string }[] = [
+    { value: 'info', label: t('dashboard.notificationInfo') },
+    { value: 'success', label: t('dashboard.notificationSuccess') },
+    { value: 'warning', label: t('dashboard.notificationWarning') },
+    { value: 'error', label: t('dashboard.notificationError') },
+  ]
+
+  const handleSendTest = async () => {
     setSendingNotification(true)
     try {
       const response = await apiClient.api.admin.notifications.test.$post({
@@ -39,102 +62,85 @@ export const DashboardPage: React.FC = () => {
       })
       const result = await response.json()
       if (result.success) {
-        message.success(`测试通知已发送 (${notificationType})`)
+        message.success(t('dashboard.sent', { type: notificationType }))
       } else {
-        message.error('发送失败')
+        message.error(t('dashboard.sendFailed'))
       }
-    } catch (error) {
-      console.error('Failed to send test notification:', error)
-      message.error('发送失败')
+    } catch {
+      message.error(t('dashboard.sendFailed'))
     } finally {
       setSendingNotification(false)
     }
   }
 
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center h-64">
-        <div className="text-gray-500">Loading...</div>
-      </div>
-    )
-  }
-
-  const statCards = [
-    {
-      title: 'Total Todos',
-      value: stats?.totalTodos || 0,
-      icon: CheckCircle,
-      color: 'bg-blue-500',
-    },
-    {
-      title: 'Pending',
-      value: stats?.pendingTodos || 0,
-      icon: Clock,
-      color: 'bg-yellow-500',
-    },
-    {
-      title: 'Completed',
-      value: stats?.completedTodos || 0,
-      icon: TrendingUp,
-      color: 'bg-green-500',
-    },
-    {
-      title: 'Last Updated',
-      value: stats?.lastUpdated || '-',
-      icon: Activity,
-      color: 'bg-purple-500',
-    },
-  ]
-
   return (
     <div>
-      <h1 className="text-2xl font-bold text-gray-900 mb-6">Dashboard</h1>
+      <h1
+        className="text-2xl font-bold mb-4"
+        style={{ color: token.colorText }}
+      >
+        {t('dashboard.title')}
+      </h1>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      <div className="grid grid-cols-4 gap-4 mb-6">
         {statCards.map((card, index) => {
           const Icon = card.icon
           return (
-            <div key={index} className="bg-white rounded-lg shadow-sm p-6">
-              <div className="flex items-center justify-between mb-4">
-                <div className={`p-3 rounded-lg ${card.color}`}>
+            <div
+              key={index}
+              className="rounded-lg p-6"
+              style={{
+                backgroundColor: token.colorBgContainer,
+                boxShadow: `0 1px 3px ${token.colorBorderSecondary}`,
+              }}
+            >
+              <div className="flex items-center justify-between mb-2">
+                <div className={`p-3 rounded-md ${card.color} w-10 h-10 flex items-center justify-center`}>
                   <Icon className="w-6 h-6 text-white" />
                 </div>
               </div>
-              <h3 className="text-sm font-medium text-gray-500">{card.title}</h3>
-              <p className="text-2xl font-bold text-gray-900 mt-1">{card.value}</p>
+              <h3
+                className="text-sm font-medium"
+                style={{ color: token.colorTextSecondary }}
+              >
+                {card.title}
+              </h3>
+              <p
+                className="text-2xl font-bold mt-1"
+                style={{ color: token.colorText }}
+              >
+                {card.value}
+              </p>
             </div>
           )
         })}
       </div>
 
-      <div className="bg-white rounded-lg shadow-sm p-6">
-        <div className="flex items-center gap-3 mb-4">
-          <BellRing className="w-5 h-5 text-gray-600" />
-          <h2 className="text-lg font-semibold text-gray-900">测试通知功能</h2>
+      <div
+        className="rounded-lg p-6"
+        style={{
+          backgroundColor: token.colorBgContainer,
+          boxShadow: `0 1px 3px ${token.colorBorderSecondary}`,
+        }}
+      >
+        <div className="flex items-center gap-2 mb-4">
+          <BellRing className="w-5 h-5" style={{ color: token.colorTextSecondary }} />
+          <h2 className="text-base font-semibold" style={{ color: token.colorText }}>
+            {t('dashboard.testNotification')}
+          </h2>
         </div>
-        <p className="text-sm text-gray-500 mb-4">
-          发送测试通知到所有已连接的客户端。error 和 warning 类型的通知会弹出 antd
-          notification，info 和 success 类型只会出现在铃铛列表中。
+        <p className="text-sm mb-4" style={{ color: token.colorTextSecondary }}>
+          {t('dashboard.testNotificationDesc')}
         </p>
-        <div className="flex items-center gap-4">
+        <div className="flex gap-2">
           <Select
             value={notificationType}
             onChange={setNotificationType}
             style={{ width: 120 }}
-            options={[
-              { value: 'info', label: 'ℹ️ Info' },
-              { value: 'success', label: '✅ Success' },
-              { value: 'warning', label: '⚠️ Warning' },
-              { value: 'error', label: '❌ Error' },
-            ]}
+            options={notificationTypeOptions}
           />
-          <Button
-            type="primary"
-            icon={<Bell className="w-4 h-4" />}
-            loading={sendingNotification}
-            onClick={handleSendTestNotification}
-          >
-            发送测试通知
+          <Button type="primary" loading={sendingNotification} onClick={handleSendTest}>
+            {t('dashboard.sendTest')}
           </Button>
         </div>
       </div>