refactor(gui): Responsible DataView (TableView + DataView)

ui/web/src/modules/AccountInfo/AccountList.tsx

@@ -1,17 +1,124 @@
-import { List } from '@douyinfe/semi-ui';
+import { Space, Spin, Typography } from '@douyinfe/semi-ui';
+import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { formatTime } from '@yuants/data-model';
 import { useObservableState } from 'observable-hooks';
+import { useMemo } from 'react';
+import { executeCommand } from '../CommandCenter';
+import { Button, DataView } from '../Interactive';
 import { registerPage } from '../Pages';
-import { AccountInfoItem } from './AccountInfoItem';
-import { accountIds$ } from './model';
+import { accountIds$, useAccountInfo } from './model';
 
 registerPage('AccountList', () => {
   const accountIds = useObservableState(accountIds$, []);
 
-  return (
-    <List>
-      {accountIds.map((accountId) => (
-        <AccountInfoItem key={accountId} account_id={accountId} />
-      ))}
-    </List>
-  );
+  const columns = useMemo(() => {
+    const columnHelper = createColumnHelper<string>();
+    return [
+      columnHelper.accessor((x) => x, {
+        id: 'account_id',
+        header: () => '账户 ID',
+        cell: (x) => <Typography.Text copyable>{x.renderValue()}</Typography.Text>,
+      }),
+      columnHelper.accessor((x) => x, {
+        id: 'currency',
+        header: () => '货币',
+        cell: (x) => {
+          const account_id = x.row.original;
+          const accountInfo$ = useMemo(() => useAccountInfo(account_id), [account_id]);
+          const accountInfo = useObservableState(accountInfo$);
+
+          return accountInfo?.money.currency;
+        },
+      }),
+      columnHelper.accessor((x) => x, {
+        id: 'equity',
+        header: () => '净值',
+        cell: (x) => {
+          const account_id = x.row.original;
+          const accountInfo$ = useMemo(() => useAccountInfo(account_id), [account_id]);
+          const accountInfo = useObservableState(accountInfo$);
+
+          return accountInfo?.money.equity;
+        },
+      }),
+      columnHelper.accessor((x) => x, {
+        id: 'balance',
+        header: () => '余额',
+        cell: (x) => {
+          const account_id = x.row.original;
+          const accountInfo$ = useMemo(() => useAccountInfo(account_id), [account_id]);
+          const accountInfo = useObservableState(accountInfo$);
+
+          return accountInfo?.money.balance;
+        },
+      }),
+      columnHelper.accessor((x) => x, {
+        id: 'profit',
+        header: () => '盈亏',
+        cell: (x) => {
+          const account_id = x.row.original;
+          const accountInfo$ = useMemo(() => useAccountInfo(account_id), [account_id]);
+          const accountInfo = useObservableState(accountInfo$);
+
+          return accountInfo?.money.profit;
+        },
+      }),
+      columnHelper.accessor((x) => x, {
+        id: 'used-margin-ratio',
+        header: () => '保证金使用率',
+        cell: (x) => {
+          const account_id = x.row.original;
+          const accountInfo$ = useMemo(() => useAccountInfo(account_id), [account_id]);
+          const accountInfo = useObservableState(accountInfo$);
+
+          if (!accountInfo) return null;
+
+          const value = (accountInfo.money.used / accountInfo.money.equity) * 100;
+          if (Number.isNaN(value)) return 'N/A';
+
+          return value.toFixed(2) + '%';
+        },
+      }),
+      columnHelper.accessor((x) => x, {
+        id: 'time',
+        header: () => '更新时间',
+        cell: (x) => {
+          const account_id = x.row.original;
+          const accountInfo$ = useMemo(() => useAccountInfo(account_id), [account_id]);
+          const accountInfo = useObservableState(accountInfo$);
+
+          if (!accountInfo) return <Spin />;
+
+          const updated_at = accountInfo.updated_at || (accountInfo.timestamp_in_us ?? NaN) / 1000;
+          const timeLag = Date.now() - updated_at;
+
+          return (
+            <Space>
+              {formatTime(updated_at)}
+              {timeLag > 60_000 && (
+                <Typography.Text type="warning">
+                  信息更新于 {formatTime(accountInfo.timestamp_in_us / 1000)}，已经{' '}
+                  {(timeLag / 1000).toFixed(0)} 秒未更新，可能已经失去响应
+                </Typography.Text>
+              )}
+            </Space>
+          );
+        },
+      }),
+      columnHelper.accessor((x) => x, {
+        id: 'actions',
+        header: () => '操作',
+        cell: (x) => {
+          const account_id = x.row.original;
+          return <Button onClick={() => executeCommand('AccountInfoPanel', { account_id })}>详情</Button>;
+        },
+      }),
+    ];
+  }, []);
+
+  const data = accountIds;
+
+  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
+
+  return <DataView table={table} />;
 });

ui/web/src/modules/Interactive/DataView.tsx

@@ -0,0 +1,11 @@
+import { Table } from '@tanstack/react-table';
+import { ListView } from './ListView';
+import { TableView } from './TableView';
+
+export function DataView<T>(props: { table: Table<T> }) {
+  if (window.outerWidth >= 1080) {
+    return <TableView table={props.table} />;
+  }
+
+  return <ListView table={props.table} />;
+}

ui/web/src/modules/Interactive/ListView.tsx

@@ -0,0 +1,38 @@
+import { Descriptions, List, Space } from '@douyinfe/semi-ui';
+import { Table, flexRender } from '@tanstack/react-table';
+
+export function ListView<T>(props: { table: Table<T> }) {
+  const { table } = props;
+  return (
+    <Space vertical align="start">
+      <div>{table.getRowModel().rows.length} Items</div>
+      <List>
+        {table.getRowModel().rows.map((row) => (
+          <List.Item key={row.id}>
+            <Descriptions>
+              {table.getHeaderGroups().map((headerGroup) =>
+                headerGroup.headers.map((header, idx) => {
+                  return (
+                    <Descriptions.Item
+                      key={headerGroup.id}
+                      itemKey={
+                        header.isPlaceholder
+                          ? null
+                          : flexRender(header.column.columnDef.header, header.getContext())
+                      }
+                    >
+                      {row
+                        .getVisibleCells()
+                        .filter((cell) => cell.column.id === header.column.id)
+                        .map((cell) => flexRender(cell.column.columnDef.cell, cell.getContext()))}
+                    </Descriptions.Item>
+                  );
+                }),
+              )}
+            </Descriptions>
+          </List.Item>
+        ))}
+      </List>
+    </Space>
+  );
+}

ui/web/src/modules/Interactive/TableView.tsx

@@ -0,0 +1,53 @@
+import { Space } from '@douyinfe/semi-ui';
+import { Table, flexRender } from '@tanstack/react-table';
+
+export function TableView<T>(props: { table: Table<T> }) {
+  const { table } = props;
+  return (
+    <Space vertical align="start">
+      <div>{table.getRowModel().rows.length} Items</div>
+      <table className="semi-table">
+        <thead
+          className="semi-table-thead"
+          style={{ position: 'sticky', zIndex: 1, top: 0, background: 'var(--semi-color-bg-1)' }}
+        >
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id} className="semi-table-row">
+              {headerGroup.headers.map((header) => (
+                <th key={header.id} className="semi-table-row-head">
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext())}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody className="semi-table-tbody">
+          {table.getRowModel().rows.map((row) => (
+            <tr key={row.id} className="semi-table-row">
+              {row.getVisibleCells().map((cell) => (
+                <td key={cell.id} className="semi-table-row-cell">
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+        <tfoot>
+          {table.getFooterGroups().map((footerGroup) => (
+            <tr key={footerGroup.id}>
+              {footerGroup.headers.map((header) => (
+                <th key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.footer, header.getContext())}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </tfoot>
+      </table>
+    </Space>
+  );
+}

ui/web/src/modules/Interactive/index.ts

@@ -1 +1,4 @@
 export * from './Button';
+export * from './DataView';
+export * from './ListView';
+export * from './TableView';