Explorar el Código

✨ feat(silver-knowledges): 实现知识分类动态加载功能

- 引入silverUsersClient以获取分类数据
- 添加分类加载状态管理和数据存储
- 实现loadCategories方法从API获取分类列表
- 修改分类选择器为动态加载选项
- 优化分类显示逻辑,显示分类名称而非ID
yourname hace 7 meses
padre
commit
8c85c882d9
Se han modificado 1 ficheros con 29 adiciones y 11 borrados
  1. 29 11
      src/client/admin/pages/SilverKnowledges.tsx

+ 29 - 11
src/client/admin/pages/SilverKnowledges.tsx

@@ -3,7 +3,7 @@ import { Card, Table, Button, Modal, Form, Input, Select, message, Space, Tag, P
 import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined, PaperClipOutlined } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
 import type { InferResponseType, InferRequestType } from 'hono/client';
-import { silverKnowledgeClient } from '@/client/api';
+import { silverKnowledgeClient, silverUsersClient } from '@/client/api';
 import CoverImageUploader from '@/client/admin/components/CoverImageUploader';
 import AttachmentUploader from '@/client/admin/components/AttachmentUploader';
 
@@ -23,6 +23,8 @@ const SilverKnowledges: React.FC = () => {
   const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
   const [form] = Form.useForm();
   const [searchText, setSearchText] = useState('');
+  const [categories, setCategories] = useState<Array<{id: number, name: string}>>([]);
+  const [categoriesLoading, setCategoriesLoading] = useState(false);
 
   const fetchData = async (page = 1, pageSize = 10) => {
     setLoading(true);
@@ -46,6 +48,7 @@ const SilverKnowledges: React.FC = () => {
 
   useEffect(() => {
     fetchData();
+    loadCategories();
   }, []);
 
   const handleCreate = () => {
@@ -60,6 +63,7 @@ const SilverKnowledges: React.FC = () => {
     setCurrentRecord(record);
     form.setFieldsValue({
       ...record,
+      categoryId: record.categoryId,
       tags: record.tags || undefined,
       coverImage: record.coverImage || undefined,
       attachment: record.attachment || undefined,
@@ -112,6 +116,19 @@ const SilverKnowledges: React.FC = () => {
     fetchData(1, pagination.pageSize);
   };
 
+  const loadCategories = async () => {
+    setCategoriesLoading(true);
+    try {
+      const response = await silverUsersClient['knowledge-categories'].$get();
+      const result = await response.json();
+      setCategories(result.data);
+    } catch (error) {
+      message.error('加载分类失败');
+    } finally {
+      setCategoriesLoading(false);
+    }
+  };
+
   const columns: ColumnsType<SilverKnowledge> = [
     {
       title: 'ID',
@@ -151,6 +168,7 @@ const SilverKnowledges: React.FC = () => {
       dataIndex: 'category',
       key: 'category',
       width: 120,
+      render: (_, record) => record.category?.name || '-',
     },
     {
       title: '作者',
@@ -324,18 +342,18 @@ const SilverKnowledges: React.FC = () => {
 
           <Form.Item
             label="知识分类"
-            name="category"
+            name="categoryId"
             rules={[{ required: true, message: '请选择知识分类' }]}
           >
-            <Select placeholder="请选择知识分类">
-              <Option value="健康养生">健康养生</Option>
-              <Option value="生活技巧">生活技巧</Option>
-              <Option value="心理情感">心理情感</Option>
-              <Option value="法律常识">法律常识</Option>
-              <Option value="金融理财">金融理财</Option>
-              <Option value="科技应用">科技应用</Option>
-              <Option value="教育培训">教育培训</Option>
-              <Option value="兴趣爱好">兴趣爱好</Option>
+            <Select
+              placeholder="请选择知识分类"
+              loading={categoriesLoading}
+              showSearch
+              optionFilterProp="children"
+            >
+              {categories.map(cat => (
+                <Option key={cat.id} value={cat.id}>{cat.name}</Option>
+              ))}
             </Select>
           </Form.Item>