@lobehub/chat 1.46.7 → 1.47.1

package/src/database/repositories/tableViewer/index.ts

@@ -0,0 +1,251 @@
+import { sql } from 'drizzle-orm';
+import pMap from 'p-map';
+
+import { LobeChatDatabase } from '@/database/type';
+import {
+  FilterCondition,
+  PaginationParams,
+  TableBasicInfo,
+  TableColumnInfo,
+} from '@/types/tableViewer';
+
+export class TableViewerRepo {
+  private userId: string;
+  private db: LobeChatDatabase;
+
+  constructor(db: LobeChatDatabase, userId: string) {
+    this.userId = userId;
+    this.db = db;
+  }
+
+  /**
+   * 获取数据库中所有的表
+   */
+  async getAllTables(schema = 'public'): Promise<TableBasicInfo[]> {
+    const query = sql`
+      SELECT
+        table_name as name,
+        table_type as type
+      FROM information_schema.tables
+      WHERE table_schema = ${schema}
+      ORDER BY table_name;
+    `;
+
+    const tables = await this.db.execute(query);
+
+    const tableNames = tables.rows.map((row) => row.name) as string[];
+
+    const counts = await pMap(tableNames, async (name) => this.getTableCount(name), {
+      concurrency: 10,
+    });
+
+    return tables.rows.map((row, index) => ({
+      count: counts[index],
+      name: row.name,
+      type: row.type,
+    })) as TableBasicInfo[];
+  }
+
+  /**
+   * 获取指定表的详细结构信息
+   */
+  async getTableDetails(tableName: string): Promise<TableColumnInfo[]> {
+    const query = sql`
+      SELECT
+        c.column_name,
+        c.data_type,
+        c.is_nullable,
+        c.column_default,
+        -- 主键信息
+        (
+          SELECT true
+          FROM information_schema.table_constraints tc
+          JOIN information_schema.key_column_usage kcu
+            ON tc.constraint_name = kcu.constraint_name
+          WHERE tc.table_name = c.table_name
+            AND kcu.column_name = c.column_name
+            AND tc.constraint_type = 'PRIMARY KEY'
+        ) is_primary_key,
+        -- 外键信息
+        (
+          SELECT json_build_object(
+            'table', ccu.table_name,
+            'column', ccu.column_name
+          )
+          FROM information_schema.table_constraints tc
+          JOIN information_schema.key_column_usage kcu
+            ON tc.constraint_name = kcu.constraint_name
+          JOIN information_schema.constraint_column_usage ccu
+            ON ccu.constraint_name = tc.constraint_name
+          WHERE tc.table_name = c.table_name
+            AND kcu.column_name = c.column_name
+            AND tc.constraint_type = 'FOREIGN KEY'
+        ) foreign_key
+      FROM information_schema.columns c
+      WHERE c.table_name = ${tableName}
+      AND c.table_schema = 'public'
+      ORDER BY c.ordinal_position;
+    `;
+
+    const columns = await this.db.execute(query);
+
+    return columns.rows.map((col: any) => ({
+      defaultValue: col.column_default,
+      foreignKey: col.foreign_key,
+      isPrimaryKey: !!col.is_primary_key,
+      name: col.column_name,
+      nullable: col.is_nullable === 'YES',
+      type: col.data_type,
+    }));
+  }
+
+  /**
+   * 获取表数据，支持分页、排序和筛选
+   */
+  async getTableData(tableName: string, pagination: PaginationParams, filters?: FilterCondition[]) {
+    const offset = (pagination.page - 1) * pagination.pageSize;
+
+    // 构建基础查询
+    let baseQuery = sql`SELECT * FROM ${sql.identifier(tableName)}`;
+
+    // 添加筛选条件
+    if (filters && filters.length > 0) {
+      const whereConditions = filters.map((filter) => {
+        const column = sql.identifier(filter.column);
+
+        switch (filter.operator) {
+          case 'equals': {
+            return sql`${column} = ${filter.value}`;
+          }
+          case 'contains': {
+            return sql`${column} ILIKE ${`%${filter.value}%`}`;
+          }
+          case 'startsWith': {
+            return sql`${column} ILIKE ${`${filter.value}%`}`;
+          }
+          case 'endsWith': {
+            return sql`${column} ILIKE ${`%${filter.value}`}`;
+          }
+          default: {
+            return sql`1=1`;
+          }
+        }
+      });
+
+      baseQuery = sql`${baseQuery} WHERE ${sql.join(whereConditions, sql` AND `)}`;
+    }
+
+    // 添加排序
+    if (pagination.sortBy) {
+      const direction = pagination.sortOrder === 'desc' ? sql`DESC` : sql`ASC`;
+      baseQuery = sql`${baseQuery} ORDER BY ${sql.identifier(pagination.sortBy)} ${direction}`;
+    }
+
+    // 添加分页
+    const query = sql`${baseQuery} LIMIT ${pagination.pageSize} OFFSET ${offset}`;
+
+    // 获取总数
+    const countQuery = sql`SELECT COUNT(*) as total FROM ${sql.identifier(tableName)}`;
+
+    // 并行执行查询
+    const [data, count] = await Promise.all([this.db.execute(query), this.db.execute(countQuery)]);
+
+    return {
+      data: data.rows,
+      pagination: {
+        page: pagination.page,
+        pageSize: pagination.pageSize,
+        total: Number(count.rows[0].total),
+      },
+    };
+  }
+
+  /**
+   * 更新表中的一行数据
+   */
+  async updateRow(
+    tableName: string,
+    id: string,
+    primaryKeyColumn: string,
+    data: Record<string, any>,
+  ) {
+    const setColumns = Object.entries(data).map(([key, value]) => {
+      return sql`${sql.identifier(key)} = ${value}`;
+    });
+
+    const query = sql`
+      UPDATE ${sql.identifier(tableName)}
+      SET ${sql.join(setColumns, sql`, `)}
+      WHERE ${sql.identifier(primaryKeyColumn)} = ${id}
+      RETURNING *
+    `;
+
+    const result = await this.db.execute(query);
+    return result.rows[0];
+  }
+
+  /**
+   * 删除表中的一行数据
+   */
+  async deleteRow(tableName: string, id: string, primaryKeyColumn: string) {
+    const query = sql`
+      DELETE FROM ${sql.identifier(tableName)}
+      WHERE ${sql.identifier(primaryKeyColumn)} = ${id}
+    `;
+
+    await this.db.execute(query);
+  }
+
+  /**
+   * 插入新行数据
+   */
+  async insertRow(tableName: string, data: Record<string, any>) {
+    const columns = Object.keys(data).map((key) => sql.identifier(key));
+    const values = Object.values(data);
+
+    const query = sql`
+      INSERT INTO ${sql.identifier(tableName)}
+      (${sql.join(columns, sql`, `)})
+      VALUES (${sql.join(
+        values.map((v) => sql`${v}`),
+        sql`, `,
+      )})
+      RETURNING *
+    `;
+
+    const result = await this.db.execute(query);
+    return result.rows[0];
+  }
+
+  /**
+   * 获取表的总记录数
+   */
+  async getTableCount(tableName: string): Promise<number> {
+    const query = sql`SELECT COUNT(*) as total FROM ${sql.identifier(tableName)}`;
+    const result = await this.db.execute(query);
+    return Number(result.rows[0].total);
+  }
+
+  /**
+   * 批量删除数据
+   */
+  async batchDelete(tableName: string, ids: string[], primaryKeyColumn: string) {
+    const query = sql`
+      DELETE FROM ${sql.identifier(tableName)}
+      WHERE ${sql.identifier(primaryKeyColumn)} = ANY(${ids})
+    `;
+
+    await this.db.execute(query);
+  }
+
+  /**
+   * 导出表数据（支持分页导出）
+   */
+  async exportTableData(
+    tableName: string,
+    pagination?: PaginationParams,
+    filters?: FilterCondition[],
+  ) {
+    return this.getTableData(tableName, pagination || { page: 1, pageSize: 1000 }, filters);
+  }
+}

package/src/database/server/models/aiProvider.ts

@@ -165,7 +165,7 @@ export class AiProviderModel {
 
   getAiProviderById = async (
     id: string,
-    decryptor: DecryptUserKeyVaults,
+    decryptor?: DecryptUserKeyVaults,
   ): Promise<AiProviderDetailItem | undefined> => {
     const query = this.db
       .select({
@@ -205,7 +205,7 @@ export class AiProviderModel {
     return { ...result, keyVaults } as AiProviderDetailItem;
   };
 
-  getAiProviderRuntimeConfig = async (decryptor: DecryptUserKeyVaults) => {
+  getAiProviderRuntimeConfig = async (decryptor?: DecryptUserKeyVaults) => {
     const result = await this.db
       .select({
         fetchOnClient: aiProviders.fetchOnClient,

package/src/features/DevPanel/FloatPanel.tsx

@@ -0,0 +1,136 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { FloatButton } from 'antd';
+import { createStyles } from 'antd-style';
+import { BugIcon, BugOff, XIcon } from 'lucide-react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { Rnd } from 'react-rnd';
+
+// 定义样式
+const useStyles = createStyles(({ token, css }) => {
+  return {
+    collapsed: css`
+      pointer-events: none;
+      transform: scale(0.8);
+      opacity: 0;
+    `,
+    content: css`
+      overflow: auto;
+      flex: 1;
+      height: 100%;
+      color: ${token.colorText};
+    `,
+
+    expanded: css`
+      pointer-events: auto;
+      transform: scale(1);
+      opacity: 1;
+    `,
+
+    header: css`
+      cursor: move;
+      user-select: none;
+
+      padding-block: 8px;
+      padding-inline: 16px;
+      border-block-end: 1px solid ${token.colorBorderSecondary};
+      border-start-start-radius: 12px;
+      border-start-end-radius: 12px;
+
+      font-weight: ${token.fontWeightStrong};
+      color: ${token.colorText};
+
+      background: ${token.colorFillAlter};
+    `,
+    panel: css`
+      position: fixed;
+      z-index: 1000;
+
+      overflow: hidden;
+      display: flex;
+
+      border-radius: 12px;
+
+      background: ${token.colorBgContainer};
+      box-shadow: ${token.boxShadow};
+
+      transition: opacity ${token.motionDurationMid} ${token.motionEaseInOut};
+    `,
+  };
+});
+
+const minWidth = 800;
+const minHeight = 600;
+
+const CollapsibleFloatPanel = ({ children }: PropsWithChildren) => {
+  const { styles } = useStyles();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [position, setPosition] = useState({ x: 100, y: 100 });
+  const [size, setSize] = useState({ height: minHeight, width: minWidth });
+
+  useEffect(() => {
+    try {
+      const localStoragePosition = localStorage.getItem('debug-panel-position');
+      if (localStoragePosition && JSON.parse(localStoragePosition)) {
+        setPosition(JSON.parse(localStoragePosition));
+      }
+    } catch {
+      /* empty */
+    }
+
+    try {
+      const localStorageSize = localStorage.getItem('debug-panel-size');
+      if (localStorageSize && JSON.parse(localStorageSize)) {
+        setSize(JSON.parse(localStorageSize));
+      }
+    } catch {
+      /* empty */
+    }
+  }, []);
+
+  return (
+    <>
+      <FloatButton
+        icon={<Icon icon={isExpanded ? BugOff : BugIcon} />}
+        onClick={() => setIsExpanded(!isExpanded)}
+        style={{ bottom: 24, right: 24 }}
+      />
+      {isExpanded && (
+        <Rnd
+          bounds="window"
+          className={`${styles.panel} ${isExpanded ? styles.expanded : styles.collapsed}`}
+          dragHandleClassName="panel-drag-handle"
+          minHeight={minHeight}
+          minWidth={minWidth}
+          onDragStop={(e, d) => {
+            setPosition({ x: d.x, y: d.y });
+          }}
+          onResizeStop={(e, direction, ref, delta, position) => {
+            setSize({
+              height: Number(ref.style.height),
+              width: Number(ref.style.width),
+            });
+            setPosition(position);
+          }}
+          position={position}
+          size={size}
+        >
+          <Flexbox height={'100%'}>
+            <Flexbox
+              align={'center'}
+              className={`panel-drag-handle ${styles.header}`}
+              horizontal
+              justify={'space-between'}
+            >
+              开发者面板
+              <ActionIcon icon={XIcon} onClick={() => setIsExpanded(false)} />
+            </Flexbox>
+            <Flexbox className={styles.content}>{children}</Flexbox>
+          </Flexbox>
+        </Rnd>
+      )}
+    </>
+  );
+};
+
+export default CollapsibleFloatPanel;

package/src/features/DevPanel/PostgresViewer/DataTable/Table.tsx

@@ -0,0 +1,157 @@
+import { createStyles } from 'antd-style';
+import React from 'react';
+import { Center } from 'react-layout-kit';
+import { TableVirtuoso } from 'react-virtuoso';
+import useSWR from 'swr';
+
+import { tableViewerService } from '@/services/tableViewer';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+
+import { useTableColumns } from '../useTableColumns';
+import TableCell from './TableCell';
+
+const useStyles = createStyles(({ token, css }) => ({
+  columnList: css`
+    margin-inline-start: 32px;
+    font-size: ${token.fontSizeSM}px;
+    color: ${token.colorTextSecondary};
+
+    > div {
+      padding-block: ${token.paddingXS}px;
+      padding-inline: 0;
+    }
+  `,
+  table: css`
+    overflow: scroll hidden;
+    flex: 1;
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      margin-inline-end: 12px;
+      font-family: ${token.fontFamilyCode};
+    }
+
+    thead {
+      tr {
+        outline: 1px solid ${token.colorBorderSecondary};
+      }
+    }
+
+    th,
+    td {
+      overflow: hidden;
+
+      max-width: 200px;
+      padding-block: 8px;
+      padding-inline: 12px;
+      border-inline-end: 1px solid ${token.colorBorderSecondary};
+
+      font-size: 12px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    th {
+      position: sticky;
+      z-index: 1;
+      inset-block-start: 0;
+
+      border-block-end: 1px solid ${token.colorBorderSecondary};
+
+      font-weight: ${token.fontWeightStrong};
+      text-align: start;
+      text-wrap: nowrap;
+
+      background: ${token.colorBgElevated};
+    }
+
+    td {
+      border-block-end: 1px solid ${token.colorBorderSecondary};
+      text-wrap: nowrap;
+    }
+
+    tbody {
+      tr:hover {
+        background: ${token.colorFillTertiary};
+      }
+    }
+  `,
+  tableItem: css`
+    cursor: pointer;
+
+    display: flex;
+    gap: ${token.padding}px;
+    align-items: center;
+
+    padding: 12px;
+    border-radius: ${token.borderRadius}px;
+
+    color: ${token.colorText};
+  `,
+}));
+
+interface TableProps {
+  tableName?: string;
+}
+
+const Table = ({ tableName }: TableProps) => {
+  const { styles } = useStyles();
+
+  const tableColumns = useTableColumns(tableName);
+  const isDBInited = useGlobalStore(systemStatusSelectors.isDBInited);
+
+  const tableData = useSWR(
+    isDBInited && tableName ? ['fetch-table-data', tableName] : null,
+    ([, table]) => tableViewerService.getTableData(table),
+  );
+
+  const columns = tableColumns.data?.map((t) => t.name) || [];
+  const isLoading = tableColumns.isLoading || tableData.isLoading;
+
+  if (!tableName) return <Center height={'80%'}>Select a table to view data</Center>;
+
+  if (isLoading) return <Center height={'80%'}>Loading...</Center>;
+
+  const dataSource = tableData.data?.data || [];
+  const header = (
+    <tr>
+      {columns.map((column) => (
+        <th key={column}>{column}</th>
+      ))}
+    </tr>
+  );
+
+  return (
+    <div className={styles.table}>
+      {dataSource.length === 0 ? (
+        <>
+          <table>
+            <thead>{header}</thead>
+          </table>
+          <Center height={400}>no rows</Center>
+        </>
+      ) : (
+        <TableVirtuoso
+          data={dataSource}
+          fixedHeaderContent={() => header}
+          itemContent={(index, row) => (
+            <>
+              {columns.map((column) => (
+                <TableCell
+                  column={column}
+                  dataItem={row}
+                  key={`${column}_${index}`}
+                  rowIndex={index}
+                />
+              ))}
+            </>
+          )}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Table;

package/src/features/DevPanel/PostgresViewer/DataTable/TableCell.tsx

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+
+interface TableCellProps {
+  column: string;
+  dataItem: any;
+  rowIndex: number;
+}
+
+const TableCell = ({ dataItem, column, rowIndex }: TableCellProps) => {
+  const data = dataItem[column];
+  const content = useMemo(() => {
+    switch (typeof data) {
+      case 'object': {
+        return JSON.stringify(data);
+      }
+
+      case 'boolean': {
+        return data ? 'True' : 'False';
+      }
+
+      default: {
+        return data;
+      }
+    }
+  }, [data]);
+
+  return (
+    <td key={column} onDoubleClick={() => console.log('Edit cell:', rowIndex, column)}>
+      {content}
+    </td>
+  );
+};
+
+export default TableCell;

package/src/features/DevPanel/PostgresViewer/DataTable/index.tsx

@@ -0,0 +1,67 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { createStyles } from 'antd-style';
+import { Download, Filter, RefreshCw } from 'lucide-react';
+import React from 'react';
+
+import Table from './Table';
+
+const useStyles = createStyles(({ token, css }) => ({
+  dataPanel: css`
+    overflow: hidden;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    height: 100%;
+
+    background: ${token.colorBgContainer};
+  `,
+  toolbar: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-block: 12px;
+    padding-inline: 16px;
+    border-block-end: 1px solid ${token.colorBorderSecondary};
+  `,
+  toolbarButtons: css`
+    display: flex;
+    gap: 4px;
+  `,
+  toolbarTitle: css`
+    font-size: ${token.fontSizeLG}px;
+    font-weight: ${token.fontWeightStrong};
+    color: ${token.colorText};
+  `,
+}));
+
+interface DataTableProps {
+  tableName: string;
+}
+
+const DataTable = ({ tableName }: DataTableProps) => {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.dataPanel}>
+      {/* Toolbar */}
+      <div className={styles.toolbar}>
+        <div className={styles.toolbarTitle}>{tableName || 'Select a table'}</div>
+        <div className={styles.toolbarButtons}>
+          <Button color={'default'} icon={<Icon icon={Filter} />} variant={'filled'}>
+            Filter
+          </Button>
+          <ActionIcon icon={Download} title={'Export'} />
+          <ActionIcon icon={RefreshCw} title={'Refresh'} />
+        </div>
+      </div>
+
+      {/* Table */}
+      <Table tableName={tableName} />
+    </div>
+  );
+};
+
+export default DataTable;