@lobehub/chat 1.51.2 → 1.51.3

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

@@ -1,42 +1,19 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Empty } from 'antd';
 import { createStyles } from 'antd-style';
 import { Download, Filter, RefreshCw } from 'lucide-react';
 import React from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
 import { mutate } from 'swr';
 
-import { FETCH_TABLE_DATA_KEY } from '../usePgTable';
-import Table from './Table';
+import Header from '../../features/Header';
+import Table from '../../features/Table';
+import { FETCH_TABLE_DATA_KEY, usePgTable, useTableColumns } from '../usePgTable';
 
 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 {
@@ -46,29 +23,42 @@ interface DataTableProps {
 const DataTable = ({ tableName }: DataTableProps) => {
   const { styles } = useStyles();
 
+  const tableColumns = useTableColumns(tableName);
+  const tableData = usePgTable(tableName);
+  const columns = tableColumns.data?.map((t) => t.name) || [];
+  const isLoading = tableColumns.isLoading || tableData.isLoading;
+  const dataSource = tableData.data?.data || [];
+
   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}
-            onClick={async () => {
+    <Flexbox className={styles.dataPanel} flex={1} height={'100%'}>
+      <Header
+        actions={[
+          {
+            icon: Filter,
+            title: 'Filter',
+          },
+          {
+            icon: Download,
+            title: 'Export',
+          },
+          {
+            icon: RefreshCw,
+            onClick: async () => {
               await mutate(FETCH_TABLE_DATA_KEY(tableName));
-            }}
-            title={'Refresh'}
-          />
-        </div>
-      </div>
-
-      {/* Table */}
-      <Table tableName={tableName} />
-    </div>
+            },
+            title: 'Refresh',
+          },
+        ]}
+        title={tableName || 'Select a table'}
+      />
+      {tableName ? (
+        <Table columns={columns} dataSource={dataSource} loading={isLoading} />
+      ) : (
+        <Center height={'80%'}>
+          <Empty description={'Select a table to view data'} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        </Center>
+      )}
+    </Flexbox>
   );
 };
 

package/src/features/DevPanel/PostgresViewer/{TableColumns.tsx → SchemaSidebar/Columns.tsx}

@@ -3,7 +3,7 @@ import { createStyles } from 'antd-style';
 import React from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useTableColumns } from './usePgTable';
+import { useTableColumns } from '../usePgTable';
 
 const useStyles = createStyles(({ token, css }) => ({
   container: css`
@@ -26,7 +26,7 @@ interface TableColumnsProps {
   tableName: string;
 }
 
-const TableColumns = ({ tableName }: TableColumnsProps) => {
+const Columns = ({ tableName }: TableColumnsProps) => {
   const { styles } = useStyles();
 
   const { data, isLoading } = useTableColumns(tableName);
@@ -34,7 +34,9 @@ const TableColumns = ({ tableName }: TableColumnsProps) => {
   return (
     <div className={styles.container}>
       {isLoading ? (
-        <div>Loading...</div>
+        ` <Center width={'100%'}>
+          <Icon icon={Loader2Icon} spin />
+        </Center>`
       ) : (
         <Flexbox>
           {data?.map((column) => (
@@ -64,4 +66,4 @@ const TableColumns = ({ tableName }: TableColumnsProps) => {
   );
 };
 
-export default TableColumns;
+export default Columns;

package/src/features/DevPanel/PostgresViewer/{Schema.tsx → SchemaSidebar/index.tsx}

@@ -1,11 +1,11 @@
-import { Icon } from '@lobehub/ui';
+import { DraggablePanel, DraggablePanelBody, Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { ChevronDown, ChevronRight, Database, Table as TableIcon } from 'lucide-react';
+import { ChevronDown, ChevronRight, Database, Loader2Icon, Table as TableIcon } from 'lucide-react';
 import React, { useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
 
-import TableColumns from './TableColumns';
-import { useFetchTables } from './usePgTable';
+import { useFetchTables } from '../usePgTable';
+import Columns from './Columns';
 
 const useStyles = createStyles(({ token, css }) => ({
   button: css`
@@ -51,24 +51,7 @@ const useStyles = createStyles(({ token, css }) => ({
     color: ${token.colorTextTertiary};
   `,
   schemaHeader: css`
-    display: flex;
-    gap: 8px;
-    align-items: center;
-
-    padding-block: 12px;
-    padding-inline: 16px;
-
     font-weight: ${token.fontWeightStrong};
-    color: ${token.colorText};
-  `,
-  schemaPanel: css`
-    overflow: scroll;
-
-    width: 280px;
-    height: 100%;
-    border-inline-end: 1px solid ${token.colorBorderSecondary};
-
-    background: ${token.colorBgContainer};
   `,
   selected: css`
     background: ${token.colorFillSecondary};
@@ -146,41 +129,52 @@ const SchemaPanel = ({ onTableSelect, selectedTable }: SchemaPanelProps) => {
   };
 
   return (
-    <div className={styles.schemaPanel}>
-      <div className={styles.schemaHeader}>
-        <Database size={16} />
-        <Flexbox align={'center'} horizontal justify={'space-between'}>
-          <span>Tables {data?.length}</span>
-          <span className={styles.schema}>public</span>
+    <DraggablePanel placement={'left'}>
+      <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }}>
+        <Flexbox
+          align={'center'}
+          className={styles.schemaHeader}
+          gap={8}
+          horizontal
+          paddingBlock={12}
+          paddingInline={16}
+        >
+          <Database size={16} />
+          <Flexbox align={'center'} horizontal justify={'space-between'}>
+            <span>Tables {data?.length}</span>
+            <span className={styles.schema}>public</span>
+          </Flexbox>
         </Flexbox>
-      </div>
-      {isLoading ? (
-        <div>Loading...</div>
-      ) : (
-        <Flexbox>
-          {data?.map((table) => (
-            <div key={table.name}>
-              <Flexbox
-                className={cx(styles.tableItem, selectedTable === table.name && styles.selected)}
-                horizontal
-                onClick={() => {
-                  toggleTable(table.name);
-                  onTableSelect(table.name);
-                }}
-              >
-                <Icon icon={expandedTables.has(table.name) ? ChevronDown : ChevronRight} />
-                <TableIcon size={16} />
-                <Flexbox align={'center'} horizontal justify={'space-between'}>
-                  <span>{table.name}</span>
-                  <span className={styles.count}>{table.count}</span>
+        <DraggablePanelBody style={{ padding: 0 }}>
+          {isLoading ? (
+            <Center height={'100%'} width={'100%'}>
+              <Icon icon={Loader2Icon} spin />
+            </Center>
+          ) : (
+            data?.map((table) => (
+              <div key={table.name}>
+                <Flexbox
+                  className={cx(styles.tableItem, selectedTable === table.name && styles.selected)}
+                  horizontal
+                  onClick={() => {
+                    toggleTable(table.name);
+                    onTableSelect(table.name);
+                  }}
+                >
+                  <Icon icon={expandedTables.has(table.name) ? ChevronDown : ChevronRight} />
+                  <TableIcon size={16} />
+                  <Flexbox align={'center'} horizontal justify={'space-between'}>
+                    <span>{table.name}</span>
+                    <span className={styles.count}>{table.count}</span>
+                  </Flexbox>
                 </Flexbox>
-              </Flexbox>
-              {expandedTables.has(table.name) && <TableColumns tableName={table.name} />}
-            </div>
-          ))}
-        </Flexbox>
-      )}
-    </div>
+                {expandedTables.has(table.name) && <Columns tableName={table.name} />}
+              </div>
+            ))
+          )}
+        </DraggablePanelBody>
+      </Flexbox>
+    </DraggablePanel>
   );
 };
 

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

@@ -1,8 +1,10 @@
+'use client';
+
 import React, { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import DataTable from './DataTable';
-import SchemaPanel from './Schema';
+import SchemaSidebar from './SchemaSidebar';
 
 // Main Database Panel Component
 const DatabasePanel = () => {
@@ -10,7 +12,7 @@ const DatabasePanel = () => {
 
   return (
     <Flexbox height={'100%'} horizontal>
-      <SchemaPanel onTableSelect={setSelectedTable} selectedTable={selectedTable} />
+      <SchemaSidebar onTableSelect={setSelectedTable} selectedTable={selectedTable} />
       <DataTable tableName={selectedTable} />
     </Flexbox>
   );

package/src/features/DevPanel/features/FloatPanel.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { ActionIcon, FluentEmoji, Icon, SideNav } from '@lobehub/ui';
+import { Dropdown, FloatButton } from 'antd';
+import { createStyles } from 'antd-style';
+import { BugIcon, BugOff, XIcon } from 'lucide-react';
+import { ReactNode, memo, useEffect, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { Rnd } from 'react-rnd';
+
+import { BRANDING_NAME } from '@/const/branding';
+
+// 定义样式
+const useStyles = createStyles(({ token, css, prefixCls }) => {
+  return {
+    collapsed: css`
+      pointer-events: none;
+      transform: scale(0.8);
+      opacity: 0;
+    `,
+    expanded: css`
+      pointer-events: auto;
+      transform: scale(1);
+      opacity: 1;
+    `,
+    floatButton: css`
+      inset-block-end: 16px;
+      inset-inline-end: 16px;
+
+      width: 36px;
+      height: 36px;
+      border: 1px solid ${token.colorBorderSecondary};
+
+      font-size: 20px;
+      .${prefixCls}-float-btn-body {
+        background: ${token.colorBgLayout};
+
+        &:hover {
+          width: auto;
+          background: ${token.colorBgElevated};
+        }
+      }
+    `,
+    header: css`
+      cursor: move;
+      user-select: none;
+
+      padding-block: 8px;
+      padding-inline: 16px;
+      border-block-end: 1px solid ${token.colorBorderSecondary};
+
+      color: ${token.colorText};
+
+      background: ${token.colorFillAlter};
+    `,
+    panel: css`
+      position: fixed;
+      z-index: 1000;
+
+      overflow: hidden;
+      display: flex;
+
+      border: 1px solid ${token.colorBorderSecondary};
+      border-radius: 12px;
+
+      background: ${token.colorBgContainer};
+      box-shadow: ${token.boxShadow};
+
+      transition: opacity ${token.motionDurationMid} ${token.motionEaseInOut};
+    `,
+  };
+});
+
+const minWidth = 800;
+const minHeight = 600;
+
+interface CollapsibleFloatPanelProps {
+  items: { children: ReactNode; icon: ReactNode; key: string }[];
+}
+
+const CollapsibleFloatPanel = memo<CollapsibleFloatPanelProps>(({ items }) => {
+  const { styles, theme } = useStyles();
+  const [tab, setTab] = useState<string>(items[0].key);
+  const [isHide, setIsHide] = useState(false);
+  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 (
+    <>
+      {!isHide && (
+        <Dropdown
+          menu={{
+            items: [
+              {
+                icon: (
+                  <Icon color={theme.colorTextSecondary} icon={BugOff} size={{ fontSize: 16 }} />
+                ),
+                key: 'hide',
+                label: 'Hide Toolbar',
+                onClick: () => setIsHide(true),
+              },
+            ],
+          }}
+          trigger={['hover']}
+        >
+          <FloatButton
+            className={styles.floatButton}
+            icon={<Icon icon={isExpanded ? BugOff : BugIcon} />}
+            onClick={() => setIsExpanded(!isExpanded)}
+          />
+        </Dropdown>
+      )}
+      {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%'}
+            horizontal
+            style={{ overflow: 'hidden', position: 'relative' }}
+            width={'100%'}
+          >
+            <SideNav
+              avatar={<FluentEmoji emoji={'🧰'} size={24} />}
+              bottomActions={[]}
+              style={{
+                paddingBlock: 12,
+                width: 48,
+              }}
+              topActions={items.map((item) => (
+                <ActionIcon
+                  active={tab === item.key}
+                  key={item.key}
+                  onClick={() => setTab(item.key)}
+                  placement={'right'}
+                  title={item.key}
+                >
+                  {item.icon}
+                </ActionIcon>
+              ))}
+            />
+            <Flexbox
+              height={'100%'}
+              style={{ overflow: 'hidden', position: 'relative' }}
+              width={'100%'}
+            >
+              <Flexbox
+                align={'center'}
+                className={`panel-drag-handle ${styles.header}`}
+                horizontal
+                justify={'space-between'}
+              >
+                <Flexbox align={'baseline'} gap={6} horizontal>
+                  <b>{BRANDING_NAME} Dev Tools</b>
+                  <span style={{ color: theme.colorTextDescription }}>/</span>
+                  <span style={{ color: theme.colorTextDescription }}>{tab}</span>
+                </Flexbox>
+                <ActionIcon icon={XIcon} onClick={() => setIsExpanded(false)} />
+              </Flexbox>
+              {items.map((item) => (
+                <Flexbox
+                  flex={1}
+                  height={'100%'}
+                  key={item.key}
+                  style={{
+                    display: tab === item.key ? 'flex' : 'none',
+                    overflow: 'hidden',
+                  }}
+                >
+                  {item.children}
+                </Flexbox>
+              ))}
+            </Flexbox>
+          </Flexbox>
+        </Rnd>
+      )}
+    </>
+  );
+});
+
+export default CollapsibleFloatPanel;

package/src/features/DevPanel/features/Header.tsx

@@ -0,0 +1,50 @@
+import { ActionIcon, type ActionIconProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import React, { ReactNode } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
+
+const useStyles = createStyles(({ token, css }) => ({
+  header: css`
+    border-block-end: 1px solid ${token.colorBorderSecondary};
+  `,
+  title: css`
+    font-weight: 550;
+  `,
+}));
+
+interface HeaderProps extends Omit<FlexboxProps, 'title' | 'children'> {
+  actions?: ActionIconProps[];
+  extra?: ReactNode;
+  title?: ReactNode;
+}
+
+const Header = ({ title, actions = [], extra, ...rest }: HeaderProps) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox
+      align={'center'}
+      className={styles.header}
+      flex={'none'}
+      height={46}
+      horizontal
+      justify={'space-between'}
+      paddingInline={16}
+      {...rest}
+    >
+      <div className={styles.title}>{title}</div>
+      <Flexbox align={'center'} gap={4} horizontal>
+        {extra}
+        {actions.map((action, index) => (
+          <ActionIcon
+            {...action}
+            key={action.title || index}
+            size={{ blockSize: 28, fontSize: 16 }}
+          />
+        ))}
+      </Flexbox>
+    </Flexbox>
+  );
+};
+
+export default Header;

package/src/features/DevPanel/features/Table/TableCell.tsx

@@ -0,0 +1,73 @@
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import { get, isDate } from 'lodash-es';
+import React, { useMemo } from 'react';
+
+import TooltipContent from './TooltipContent';
+
+const { Text } = Typography;
+
+const useStyles = createStyles(({ token, css }) => ({
+  cell: css`
+    font-family: ${token.fontFamilyCode};
+    font-size: ${token.fontSizeSM}px;
+  `,
+  tooltip: css`
+    border: 1px solid ${token.colorBorder};
+
+    font-family: ${token.fontFamilyCode};
+    font-size: ${token.fontSizeSM}px;
+    color: ${token.colorText} !important;
+    word-break: break-all;
+
+    background: ${token.colorBgElevated} !important;
+  `,
+}));
+
+interface TableCellProps {
+  column: string;
+  dataItem: any;
+  rowIndex: number;
+}
+
+const TableCell = ({ dataItem, column, rowIndex }: TableCellProps) => {
+  const { styles } = useStyles();
+  const data = get(dataItem, column);
+  const content = useMemo(() => {
+    if (isDate(data)) return dayjs(data).format('YYYY-MM-DD HH:mm:ss');
+
+    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)}>
+      <Text
+        className={styles.cell}
+        ellipsis={{
+          tooltip: {
+            arrow: false,
+            classNames: { body: styles.tooltip },
+            title: <TooltipContent>{content}</TooltipContent>,
+          },
+        }}
+      >
+        {content}
+      </Text>
+    </td>
+  );
+};
+
+export default TableCell;

package/src/features/DevPanel/features/Table/TooltipContent.tsx

@@ -0,0 +1,39 @@
+import { Highlighter } from '@lobehub/ui';
+import Link from 'next/link';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const TooltipContent = memo<{ children: ReactNode }>(({ children }) => {
+  if (typeof children !== 'string') return children;
+
+  if (children.startsWith('data:image')) {
+    return <img src={children} style={{ height: 'auto', maxWidth: '100%' }} />;
+  }
+
+  if (children.startsWith('http'))
+    return (
+      <Link href={children} target={'_blank'}>
+        {children}
+      </Link>
+    );
+
+  const code = children.trim().trimEnd();
+
+  if ((code.startsWith('{') && code.endsWith('}')) || (code.startsWith('[') && code.endsWith(']')))
+    return (
+      <Highlighter
+        language={'json'}
+        style={{
+          maxHeight: 400,
+          overflow: 'auto',
+        }}
+        type={'pure'}
+      >
+        {JSON.stringify(JSON.parse(code), null, 2)}
+      </Highlighter>
+    );
+
+  return <Flexbox>{children}</Flexbox>;
+});
+
+export default TooltipContent;