create-fullstack-scaffold 0.1.0

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

@@ -0,0 +1,252 @@
+import { useState, useEffect } from 'react'
+import { Table, Card, Tag, Button, Space, Modal, Form, Input, Select, message } from 'antd'
+import { Plus, Edit, Delete } from 'lucide-react'
+import { PermissionGuard } from '../components/PermissionGuard'
+import { Permission } from '@shared/modules/permission'
+import { apiClient } from '../services/apiClient'
+import type { Content, CreateContentInput } from '@shared/modules/content'
+
+const CATEGORY_LABELS = {
+  article: '文章',
+  announcement: '公告',
+  tutorial: '教程',
+  news: '新闻',
+  policy: '政策',
+}
+
+const STATUS_COLORS = {
+  draft: 'default',
+  published: 'success',
+  archived: 'warning',
+}
+
+const STATUS_LABELS = {
+  draft: '草稿',
+  published: '已发布',
+  archived: '已归档',
+}
+
+export const ContentPage: React.FC = () => {
+  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>()
+
+  useEffect(() => {
+    fetchContents()
+  }, [])
+
+  const fetchContents = async () => {
+    setLoading(true)
+    try {
+      const response = await apiClient.api.contents.$get({ query: {} })
+      const result = await response.json()
+      if (result.success) {
+        setContents(result.data)
+      }
+    } catch {
+      message.error('获取内容列表失败')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleCreate = () => {
+    setEditingContent(null)
+    form.resetFields()
+    setModalVisible(true)
+  }
+
+  const handleEdit = (content: Content) => {
+    setEditingContent(content)
+    form.setFieldsValue(content)
+    setModalVisible(true)
+  }
+
+  const handleDelete = (id: string) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: '确定要删除这个内容吗？',
+      onOk: async () => {
+        try {
+          const response = await apiClient.api.contents[':id'].$delete({
+            param: { id },
+          })
+          const result = await response.json()
+          if (result.success) {
+            message.success('内容已删除')
+            fetchContents()
+          }
+        } catch {
+          message.error('删除失败')
+        }
+      },
+    })
+  }
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields()
+
+      if (editingContent) {
+        const response = await apiClient.api.contents[':id'].$put({
+          param: { id: editingContent.id },
+          json: values,
+        })
+        const result = await response.json()
+        if (result.success) {
+          message.success('内容已更新')
+          setModalVisible(false)
+          fetchContents()
+        }
+      } else {
+        const response = await apiClient.api.contents.$post({
+          json: values,
+        })
+        const result = await response.json()
+        if (result.success) {
+          message.success('内容已创建')
+          setModalVisible(false)
+          fetchContents()
+        }
+      }
+    } catch {
+      message.error('操作失败')
+    }
+  }
+
+  const columns = [
+    {
+      title: '标题',
+      dataIndex: 'title',
+      key: 'title',
+    },
+    {
+      title: '分类',
+      dataIndex: 'category',
+      key: 'category',
+      render: (category: keyof typeof CATEGORY_LABELS) => <Tag>{CATEGORY_LABELS[category]}</Tag>,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (status: keyof typeof STATUS_COLORS) => (
+        <Tag color={STATUS_COLORS[status]}>{STATUS_LABELS[status]}</Tag>
+      ),
+    },
+    {
+      title: '作者',
+      dataIndex: 'author',
+      key: 'author',
+    },
+    {
+      title: '浏览/点赞',
+      key: 'stats',
+      render: (_: unknown, record: Content) => (
+        <span>
+          {record.viewCount} / {record.likeCount}
+        </span>
+      ),
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      render: (date: string) => new Date(date).toLocaleDateString('zh-CN'),
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      render: (_: unknown, record: Content) => (
+        <Space>
+          <PermissionGuard permission={Permission.CONTENT_EDIT}>
+            <Button
+              type="link"
+              size="small"
+              icon={<Edit className="w-4 h-4" />}
+              onClick={() => handleEdit(record)}
+            >
+              编辑
+            </Button>
+          </PermissionGuard>
+          <PermissionGuard permission={Permission.CONTENT_DELETE}>
+            <Button
+              type="link"
+              size="small"
+              danger
+              icon={<Delete className="w-4 h-4" />}
+              onClick={() => handleDelete(record.id)}
+            >
+              删除
+            </Button>
+          </PermissionGuard>
+        </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>
+        <PermissionGuard permission={Permission.CONTENT_CREATE}>
+          <Button type="primary" icon={<Plus className="w-4 h-4" />} onClick={handleCreate}>
+            创建内容
+          </Button>
+        </PermissionGuard>
+      </div>
+
+      <Card>
+        <Table
+          columns={columns}
+          dataSource={contents}
+          rowKey="id"
+          loading={loading}
+          pagination={{ pageSize: 10 }}
+        />
+      </Card>
+
+      <Modal
+        title={editingContent ? '编辑内容' : '创建内容'}
+        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>
+          <Form.Item
+            name="category"
+            label="分类"
+            rules={[{ required: true, message: '请选择分类' }]}
+          >
+            <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>
+          </Form.Item>
+          <Form.Item
+            name="content"
+            label="内容"
+            rules={[{ required: true, message: '请输入内容' }]}
+          >
+            <Input.TextArea rows={6} placeholder="请输入内容" />
+          </Form.Item>
+          <Form.Item name="tags" label="标签">
+            <Select mode="tags" placeholder="输入标签后按回车" />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  )
+}

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

@@ -0,0 +1,141 @@
+import { useEffect, useState } from 'react'
+import { apiClient } from '../services/apiClient'
+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 [stats, setStats] = useState<SystemStats | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [sendingNotification, setSendingNotification] = useState(false)
+  const [notificationType, setNotificationType] = useState<NotificationType>('info')
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      try {
+        const response = await apiClient.api.admin.stats.$get()
+        const result = await response.json()
+        if (result.success) {
+          setStats(result.data)
+        }
+      } catch (error) {
+        console.error('Failed to fetch stats:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchStats()
+  }, [])
+
+  const handleSendTestNotification = async () => {
+    setSendingNotification(true)
+    try {
+      const response = await apiClient.api.admin.notifications.test.$post({
+        json: { type: notificationType },
+      })
+      const result = await response.json()
+      if (result.success) {
+        message.success(`测试通知已发送 (${notificationType})`)
+      } else {
+        message.error('发送失败')
+      }
+    } catch (error) {
+      console.error('Failed to send test notification:', error)
+      message.error('发送失败')
+    } 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>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        {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}`}>
+                  <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>
+            </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>
+        <p className="text-sm text-gray-500 mb-4">
+          发送测试通知到所有已连接的客户端。error 和 warning 类型的通知会弹出 antd
+          notification，info 和 success 类型只会出现在铃铛列表中。
+        </p>
+        <div className="flex items-center gap-4">
+          <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' },
+            ]}
+          />
+          <Button
+            type="primary"
+            icon={<Bell className="w-4 h-4" />}
+            loading={sendingNotification}
+            onClick={handleSendTestNotification}
+          >
+            发送测试通知
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,261 @@
+import { useState, useEffect } from 'react'
+import { Table, Card, Tag, Button, Space, Modal, message, Descriptions } from 'antd'
+import { Eye, AlertTriangle, CheckCircle } from 'lucide-react'
+import { PermissionGuard } from '../components/PermissionGuard'
+import { Permission } from '@shared/modules/permission'
+import { apiClient } from '../services/apiClient'
+import type { Dispute } from '@shared/modules/dispute'
+
+const TYPE_LABELS = {
+  refund: '退款争议',
+  product_quality: '商品质量',
+  service_quality: '服务质量',
+  delivery: '配送问题',
+  other: '其他',
+}
+
+const STATUS_COLORS = {
+  pending: 'orange',
+  investigating: 'blue',
+  resolved: 'green',
+  rejected: 'red',
+}
+
+const STATUS_LABELS = {
+  pending: '待处理',
+  investigating: '调查中',
+  resolved: '已解决',
+  rejected: '已驳回',
+}
+
+export const DisputesPage: React.FC = () => {
+  const [disputes, setDisputes] = useState<Dispute[]>([])
+  const [loading, setLoading] = useState(false)
+  const [selectedDispute, setSelectedDispute] = useState<Dispute | null>(null)
+  const [detailVisible, setDetailVisible] = useState(false)
+
+  useEffect(() => {
+    fetchDisputes()
+  }, [])
+
+  const fetchDisputes = async () => {
+    setLoading(true)
+    try {
+      const response = await apiClient.api.disputes.$get({ query: {} })
+      const result = await response.json()
+      if (result.success) {
+        setDisputes(result.data)
+      }
+    } catch {
+      message.error('获取争议列表失败')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleResolve = (dispute: Dispute) => {
+    Modal.confirm({
+      title: '解决争议',
+      content: (
+        <div>
+          <p>确定要解决这个争议吗？</p>
+          <p>金额：¥{dispute.amount.toFixed(2)}</p>
+        </div>
+      ),
+      onOk: async () => {
+        try {
+          const response = await apiClient.api.disputes[':id'].resolve.$put({
+            param: { id: dispute.id },
+            json: {
+              resolution: '已同意退款，3-5个工作日内到账',
+              resolvedBy: '客服人员',
+            },
+          })
+          const result = await response.json()
+          if (result.success) {
+            message.success('争议已解决')
+            fetchDisputes()
+          }
+        } catch {
+          message.error('解决争议失败')
+        }
+      },
+    })
+  }
+
+  const showDetail = (dispute: Dispute) => {
+    setSelectedDispute(dispute)
+    setDetailVisible(true)
+  }
+
+  const columns = [
+    {
+      title: '争议编号',
+      dataIndex: 'disputeNo',
+      key: 'disputeNo',
+      render: (text: string) => <code className="text-sm">{text}</code>,
+    },
+    {
+      title: '订单号',
+      dataIndex: 'orderNo',
+      key: 'orderNo',
+    },
+    {
+      title: '客户',
+      key: 'customer',
+      render: (_: unknown, record: Dispute) => (
+        <div>
+          <div className="font-medium">{record.customerName}</div>
+          <div className="text-sm text-gray-500">{record.customerEmail}</div>
+        </div>
+      ),
+    },
+    {
+      title: '类型',
+      dataIndex: 'type',
+      key: 'type',
+      render: (type: keyof typeof TYPE_LABELS) => TYPE_LABELS[type],
+    },
+    {
+      title: '金额',
+      dataIndex: 'amount',
+      key: 'amount',
+      render: (amount: number) => (
+        <span className="font-medium text-red-600">¥{amount.toFixed(2)}</span>
+      ),
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (status: keyof typeof STATUS_COLORS) => (
+        <Tag color={STATUS_COLORS[status]}>{STATUS_LABELS[status]}</Tag>
+      ),
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      render: (_: unknown, record: Dispute) => (
+        <Space>
+          <Button
+            type="link"
+            size="small"
+            icon={<Eye className="w-4 h-4" />}
+            onClick={() => showDetail(record)}
+          >
+            查看
+          </Button>
+          <PermissionGuard permission={Permission.TICKET_CLOSE}>
+            {(record.status === 'pending' || record.status === 'investigating') && (
+              <Button
+                type="link"
+                size="small"
+                icon={<CheckCircle className="w-4 h-4" />}
+                onClick={() => handleResolve(record)}
+              >
+                解决
+              </Button>
+            )}
+          </PermissionGuard>
+        </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 onClick={fetchDisputes}>刷新</Button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+        <Card>
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm text-gray-500">总争议</div>
+              <div className="text-2xl font-bold">{disputes.length}</div>
+            </div>
+            <AlertTriangle className="w-8 h-8 text-orange-500" />
+          </div>
+        </Card>
+        <Card>
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm text-gray-500">待处理</div>
+              <div className="text-2xl font-bold text-orange-500">
+                {disputes.filter(d => d.status === 'pending').length}
+              </div>
+            </div>
+            <AlertTriangle className="w-8 h-8 text-orange-500" />
+          </div>
+        </Card>
+        <Card>
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm text-gray-500">已解决</div>
+              <div className="text-2xl font-bold text-green-500">
+                {disputes.filter(d => d.status === 'resolved').length}
+              </div>
+            </div>
+            <CheckCircle className="w-8 h-8 text-green-500" />
+          </div>
+        </Card>
+      </div>
+
+      <Card>
+        <Table
+          columns={columns}
+          dataSource={disputes}
+          rowKey="id"
+          loading={loading}
+          pagination={{ pageSize: 10 }}
+        />
+      </Card>
+
+      <Modal
+        title="争议详情"
+        open={detailVisible}
+        onCancel={() => setDetailVisible(false)}
+        footer={null}
+        width={600}
+      >
+        {selectedDispute && (
+          <Descriptions column={1} bordered>
+            <Descriptions.Item label="争议编号">
+              <code>{selectedDispute.disputeNo}</code>
+            </Descriptions.Item>
+            <Descriptions.Item label="订单号">{selectedDispute.orderNo}</Descriptions.Item>
+            <Descriptions.Item label="客户">
+              {selectedDispute.customerName} ({selectedDispute.customerEmail})
+            </Descriptions.Item>
+            <Descriptions.Item label="类型">{TYPE_LABELS[selectedDispute.type]}</Descriptions.Item>
+            <Descriptions.Item label="金额">
+              <span className="text-lg font-bold text-red-600">
+                ¥{selectedDispute.amount.toFixed(2)}
+              </span>
+            </Descriptions.Item>
+            <Descriptions.Item label="状态">
+              <Tag color={STATUS_COLORS[selectedDispute.status]}>
+                {STATUS_LABELS[selectedDispute.status]}
+              </Tag>
+            </Descriptions.Item>
+            <Descriptions.Item label="描述">{selectedDispute.description}</Descriptions.Item>
+            {selectedDispute.resolution && (
+              <Descriptions.Item label="解决方案">{selectedDispute.resolution}</Descriptions.Item>
+            )}
+          </Descriptions>
+        )}
+      </Modal>
+    </div>
+  )
+}