youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-03 00:48:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: extract sqlite table panel

Browse Source
This commit is contained in:
yyh
2026-01-22 16:18:15 +08:00
parent e69163d072
commit aa1ee123b3
2 changed files with 68 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/app/components/workflow/skill/viewer/sqlite-file-preview/index.tsx
View File

@ -4,7 +4,7 @@ import { useEffect, useMemo, useReducer, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Loading from '@/app/components/base/loading'
import { useSQLiteDatabase } from '../../hooks/use-sqlite-database'
import DataTable from './data-table'
import TablePanel from './table-panel'
import TableSelector from './table-selector'
type SQLiteFilePreviewProps = {
@ -149,40 +149,12 @@ const SQLiteFilePreview: FC<SQLiteFilePreviewProps> = ({
isLoading={tableState.isLoading}
/>
</div>
<div
ref={tableScrollRef}
className="min-h-0 min-w-0 flex-1 overflow-auto rounded-lg bg-components-panel-bg"
>
{tableState.isLoading
? (
<div className="flex h-full w-full items-center justify-center">
<Loading type="area" />
</div>
)
: tableState.error
? (
<div className="flex h-full w-full items-center justify-center text-text-tertiary">
<span className="system-sm-regular">
{t('skillSidebar.sqlitePreview.loadError')}
</span>
</div>
)
: tableState.data
? (
<DataTable
columns={tableState.data.columns}
values={tableState.data.values}
scrollRef={tableScrollRef}
/>
)
: (
<div className="flex h-full w-full items-center justify-center text-text-tertiary">
<span className="system-sm-regular">
{t('skillSidebar.sqlitePreview.emptyRows')}
</span>
</div>
)}
</div>
<TablePanel
data={tableState.data}
isLoading={tableState.isLoading}
error={tableState.error}
scrollRef={tableScrollRef}
/>
</div>
)
}

61
web/app/components/workflow/skill/viewer/sqlite-file-preview/table-panel.tsx Normal file
View File

@ -0,0 +1,61 @@
import type { FC, RefObject } from 'react'
import type { SQLiteQueryResult } from '../../hooks/sqlite/types'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import Loading from '@/app/components/base/loading'
import DataTable from './data-table'
type TablePanelProps = {
data: SQLiteQueryResult | null
isLoading: boolean
error: Error | null
scrollRef: RefObject<HTMLDivElement | null>
}
const TablePanel: FC<TablePanelProps> = ({
data,
isLoading,
error,
scrollRef,
}) => {
const { t } = useTranslation('workflow')
return (
<div
ref={scrollRef}
className="min-h-0 min-w-0 flex-1 overflow-auto rounded-lg bg-components-panel-bg"
>
{isLoading
? (
<div className="flex h-full w-full items-center justify-center">
<Loading type="area" />
</div>
)
: error
? (
<div className="flex h-full w-full items-center justify-center text-text-tertiary">
<span className="system-sm-regular">
{t('skillSidebar.sqlitePreview.loadError')}
</span>
</div>
)
: data
? (
<DataTable
columns={data.columns}
values={data.values}
scrollRef={scrollRef}
/>
)
: (
<div className="flex h-full w-full items-center justify-center text-text-tertiary">
<span className="system-sm-regular">
{t('skillSidebar.sqlitePreview.emptyRows')}
</span>
</div>
)}
</div>
)
}
export default React.memo(TablePanel)