feat: api

apps/api/src/app.service.ts

@@ -26,14 +26,14 @@ export class AppService {
       .orderBy('user_level', 'DESC')
       .getRawMany();
 
-    for (const item of data) {
-      const { user_id } = item;
-      const msg_contents = await this.danmuRepository.find({
-        select: ['msg_content'],
-        where: { user_id },
-      });
-      item.msg_contents = msg_contents;
-    }
+    // for (const item of data) {
+    //   const { user_id } = item;
+    //   const msg_contents = await this.danmuRepository.find({
+    //     select: ['msg_content'],
+    //     where: { user_id },
+    //   });
+    //   item.msg_contents = msg_contents;
+    // }
     return data;
   }
 
@@ -42,6 +42,6 @@ export class AppService {
       select: ['msg_content'],
       where: { user_id },
     });
-    return data;
+    return data.map((i) => i.msg_content);
   }
 }

apps/viewer/src/Dashboard.tsx

@@ -1,9 +1,11 @@
 import { useState, useEffect } from "react";
-import { Table, Button, Space } from "antd";
+import { Table, Button, Space, Tag } from "antd";
 import axios from "axios";
 
 export const Dashboard = () => {
   const [dataSource, setDatasource] = useState<[]>([]);
+  const [expandedRowData, setExpandedRowData] = useState({});
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -24,18 +26,19 @@ export const Dashboard = () => {
 
   const columns = [
     {
-      title: "昵称",
-      dataIndex: "nickName",
-      key: "nickName",
+      title: "#",
+      key: "index",
+      render: (text, record, index) => index + 1, // 添加序号列
     },
     {
-      title: "身份",
-      key: "base",
-      render: (record) => {
+      title: "昵称",
+      key: "nickName",
+      render: (record: any) => {
         return (
           <Space>
-            <span>{record.user_isAdmin == 1 ? "管" : ""}</span>
-            <span>{record.user_is_super_admin == 1 ? "超" : ""}</span>
+            <span>{record.user_nickName}</span>
+            {record.user_isAdmin == 1 && <Tag color="magenta">管</Tag>}
+            {record.user_is_super_admin == 1 && <Tag color="red">超管</Tag>}
           </Space>
         );
       },
@@ -50,17 +53,40 @@ export const Dashboard = () => {
       dataIndex: "user_fans_club_level",
       key: "user_fans_club_level",
     },
-    {
-      title: "听大哥的话",
-      key: "msg_content",
-      render: (record) => {
-        return record.msg_contents.map((item) => {
-          const { msg_content } = item;
-          return <div>{msg_content}</div>;
-        });
-      },
-    },
   ];
 
-  return <Table dataSource={dataSource} columns={columns}></Table>;
+  const expandedRowRender = (record) => {
+    const { key: user_id } = record;
+    const data = expandedRowData[user_id];
+    if (loading) return <p>正在加载数据...</p>;
+    if (data)
+      return (
+        <>
+          {data.map((i, index) => (
+            <div key={index}>{i}</div>
+          ))}
+        </>
+      );
+    return null;
+  };
+
+  const onExpand = async (expanded, record) => {
+    const { key: user_id } = record;
+    if (user_id in expandedRowData || !expanded) return;
+    setLoading(true);
+    const { data } = await axios.get(`/api/msg_content/${user_id}`);
+    setExpandedRowData((p) => ({ ...p, [user_id]: data }));
+    setLoading(false);
+  };
+
+  return (
+    <Table
+      dataSource={dataSource}
+      columns={columns}
+      expandable={{
+        onExpand,
+        expandedRowRender,
+      }}
+    ></Table>
+  );
 };