From 51139de1781fb924a79f4dec6776e892a2224018 Mon Sep 17 00:00:00 2001 From: chanx <1243304602@qq.com> Date: Tue, 14 Oct 2025 19:06:50 +0800 Subject: [PATCH] Fix: Switch the default theme from light mode to dark mode and improve some styles #9869 (#10552) ### What problem does this PR solve? Fix: Switch the default theme from light mode to dark mode and improve some styles #9869 -Update UI component styles such as input boxes, tables, and prompt boxes -Optimize login page layout and style details -Revise some of the wording, such as uniformly changing "data flow" to "pipeline" -Adjust the parser to support the markdown type ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue) --- web/src/app.tsx | 2 +- .../components/data-pipeline-select/index.tsx | 1 + .../next-markdown-content/index.tsx | 5 +- web/src/components/theme-provider.tsx | 2 +- web/src/components/ui/input.tsx | 2 +- web/src/components/ui/table.tsx | 2 +- web/src/components/ui/tooltip.tsx | 6 +- web/src/locales/en.ts | 11 +- web/src/locales/zh.ts | 18 +- web/src/pages/chat/markdown-content/index.tsx | 6 +- .../components/parse-editer/index.tsx | 2 +- web/src/pages/dataflow-result/parser.tsx | 2 +- .../dataset-overview/dataset-common.ts | 2 +- .../dataset-overview/overview-table.tsx | 6 +- .../configuration/common-item.tsx | 1 + web/src/pages/home/application-card.tsx | 6 +- web/src/pages/login-next/bg.tsx | 4 +- web/src/pages/login-next/card.tsx | 4 +- web/src/pages/login-next/index.less | 4 + web/src/pages/login-next/index.tsx | 341 +++++++++--------- .../next-search/markdown-content/index.tsx | 5 +- 21 files changed, 231 insertions(+), 201 deletions(-) diff --git a/web/src/app.tsx b/web/src/app.tsx index daa345c72..feab5007a 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -104,7 +104,7 @@ const RootProvider = ({ children }: React.PropsWithChildren) => { {children} diff --git a/web/src/components/data-pipeline-select/index.tsx b/web/src/components/data-pipeline-select/index.tsx index 18e246529..24747c939 100644 --- a/web/src/components/data-pipeline-select/index.tsx +++ b/web/src/components/data-pipeline-select/index.tsx @@ -108,6 +108,7 @@ export function DataFlowSelect(props: IProps) { {...field} placeholder={t('dataFlowPlaceholder')} options={options} + triggerClassName="!bg-bg-base" /> )} {isMult && ( diff --git a/web/src/components/next-markdown-content/index.tsx b/web/src/components/next-markdown-content/index.tsx index 24f67a995..b841cd446 100644 --- a/web/src/components/next-markdown-content/index.tsx +++ b/web/src/components/next-markdown-content/index.tsx @@ -54,7 +54,10 @@ function MarkdownContent({ const { setDocumentIds, data: fileThumbnails } = useFetchDocumentThumbnailsByIds(); const contentWithCursor = useMemo(() => { - let text = DOMPurify.sanitize(content); + let text = DOMPurify.sanitize(content, { + ADD_TAGS: ['think', 'section'], + ADD_ATTR: ['class'], + }); // let text = content; if (text === '') { text = t('chat.searching'); diff --git a/web/src/components/theme-provider.tsx b/web/src/components/theme-provider.tsx index 4ae554ab0..25898572a 100644 --- a/web/src/components/theme-provider.tsx +++ b/web/src/components/theme-provider.tsx @@ -21,7 +21,7 @@ const ThemeProviderContext = createContext(initialState); export function ThemeProvider({ children, - defaultTheme = ThemeEnum.Light, + defaultTheme = ThemeEnum.Dark, storageKey = 'vite-ui-theme', ...props }: ThemeProviderProps) { diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx index 77f746814..580f9b9c7 100644 --- a/web/src/components/ui/input.tsx +++ b/web/src/components/ui/input.tsx @@ -31,7 +31,7 @@ const Input = React.forwardRef( (({ className, rootClassName, ...props }, ref) => (
diff --git a/web/src/components/ui/tooltip.tsx b/web/src/components/ui/tooltip.tsx index 228ce8a60..b1fe01139 100644 --- a/web/src/components/ui/tooltip.tsx +++ b/web/src/components/ui/tooltip.tsx @@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - 'z-50 overflow-auto scrollbar-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-w-[20vw]', + 'z-50 overflow-auto scrollbar-auto rounded-md whitespace-pre-wrap border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-w-[30vw]', className, )} {...props} @@ -41,9 +41,7 @@ export const FormTooltip = ({ tooltip }: { tooltip: React.ReactNode }) => { > - -

{tooltip}

- + {tooltip} ); }; diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index 3c6c5e406..92ccfec5b 100644 --- a/web/src/locales/en.ts +++ b/web/src/locales/en.ts @@ -300,8 +300,8 @@ export default { dataFlowPlaceholder: 'Please select a pipeline.', buildItFromScratch: 'Build it from scratch', dataFlow: 'Pipeline', - parseType: 'Parse Type', - manualSetup: 'Manual Setup', + parseType: 'Ingestion pipeline', + manualSetup: 'Choose pipeline', builtIn: 'Built-in', titleDescription: 'Update your knowledge base configuration here, particularly the chunking method.', @@ -477,8 +477,9 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s useGraphRagTip: 'Construct a knowledge graph over file chunks of the current knowledge base to enhance multi-hop question-answering involving nested logic. See https://ragflow.io/docs/dev/construct_knowledge_graph for details.', graphRagMethod: 'Method', - graphRagMethodTip: `Light: (Default) Use prompts provided by github.com/HKUDS/LightRAG to extract entities and relationships. This option consumes fewer tokens, less memory, and fewer computational resources.
- General: Use prompts provided by github.com/microsoft/graphrag to extract entities and relationships`, + graphRagMethodTip: ` + Light: (Default) Use prompts provided by github.com/HKUDS/LightRAG to extract entities and relationships. This option consumes fewer tokens, less memory, and fewer computational resources.
+ General: Use prompts provided by github.com/microsoft/graphrag to extract entities and relationships`, resolution: 'Entity resolution', resolutionTip: `An entity deduplication switch. When enabled, the LLM will combine similar entities - e.g., '2025' and 'the year of 2025', or 'IT' and 'Information Technology' - to construct a more accurate graph`, community: 'Community reports', @@ -1740,7 +1741,7 @@ This delimiter is used to split the input text into several text pieces echo of overlappedPercent: 'Overlapped percent (%)', searchMethod: 'Search method', searchMethodTip: `Defines how the content can be searched — by full-text, embedding, or both. -The Tokenizer will store the content in the corresponding data structures for the selected methods.`, +The Indexer will store the content in the corresponding data structures for the selected methods.`, begin: 'File', parserMethod: 'Parsing method', systemPrompt: 'System Prompt', diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts index bcfe07f95..884f56235 100644 --- a/web/src/locales/zh.ts +++ b/web/src/locales/zh.ts @@ -268,25 +268,25 @@ export default {
是否要继续？ `, - extractRaptor: '从文档中提取Raptor', + extractRaptor: '从文档中提取RAPTOR', extractKnowledgeGraph: '从文档中提取知识图谱', filterPlaceholder: '请输入', fileFilterTip: '', fileFilter: '正则匹配表达式', setDefaultTip: '', setDefault: '设置默认', - eidtLinkDataPipeline: '编辑数据流', + eidtLinkDataPipeline: '编辑pipeline', linkPipelineSetTip: '管理与此数据集的数据管道链接', default: '默认', - dataPipeline: '数据流', - linkDataPipeline: '关联数据流', + dataPipeline: 'pipeline', + linkDataPipeline: '关联pipeline', enableAutoGenerate: '是否启用自动生成', teamPlaceholder: '请选择团队', - dataFlowPlaceholder: '请选择数据流', + dataFlowPlaceholder: '请选择pipeline', buildItFromScratch: '去Scratch构建', - dataFlow: '数据流', - parseType: '切片方法', - manualSetup: '手动设置', + dataFlow: 'pipeline', + parseType: 'Ingestion pipeline', + manualSetup: '选择pipeline', builtIn: '内置', titleDescription: '在这里更新您的知识库详细信息，尤其是切片方法。', name: '知识库名称', @@ -1611,7 +1611,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于

要保留这些更改，请点击“重新运行”以重新运行当前阶段。

`, changeStepModalConfirmText: '继续切换', changeStepModalCancelText: '取消', - unlinkPipelineModalTitle: '解绑数据流', + unlinkPipelineModalTitle: '解绑pipeline', unlinkPipelineModalContent: `

一旦取消链接，该数据集将不再连接到当前数据管道。

正在解析的文件将继续解析，直到完成。

diff --git a/web/src/pages/chat/markdown-content/index.tsx b/web/src/pages/chat/markdown-content/index.tsx index 72d34fc27..adc4f15c8 100644 --- a/web/src/pages/chat/markdown-content/index.tsx +++ b/web/src/pages/chat/markdown-content/index.tsx @@ -48,7 +48,11 @@ const MarkdownContent = ({ const { setDocumentIds, data: fileThumbnails } = useFetchDocumentThumbnailsByIds(); const contentWithCursor = useMemo(() => { - let text = DOMPurify.sanitize(content); + let text = DOMPurify.sanitize(content, { + ADD_TAGS: ['think', 'section'], + ADD_ATTR: ['class'], + }); + // let text = content; if (text === '') { text = t('chat.searching'); diff --git a/web/src/pages/dataflow-result/components/parse-editer/index.tsx b/web/src/pages/dataflow-result/components/parse-editer/index.tsx index 799cb11c9..b9754002b 100644 --- a/web/src/pages/dataflow-result/components/parse-editer/index.tsx +++ b/web/src/pages/dataflow-result/components/parse-editer/index.tsx @@ -44,7 +44,7 @@ const FormatPreserveEditor = ({ /> )} - {['text', 'html'].includes(initialValue.key) && ( + {['text', 'html', 'markdown'].includes(initialValue.key) && ( {
- {row.original.pipeline_title} + {row.original.pipeline_title === 'naive' + ? 'general' + : row.original.pipeline_title}
), }, @@ -396,7 +398,7 @@ const FileLogsTable: FC = ({ ))} - + {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => (
diff --git a/web/src/pages/home/application-card.tsx b/web/src/pages/home/application-card.tsx index 82f0c214a..67594f224 100644 --- a/web/src/pages/home/application-card.tsx +++ b/web/src/pages/home/application-card.tsx @@ -20,15 +20,15 @@ export function ApplicationCard({ }: ApplicationCardProps) { return ( - -
+ +
-

+

{app.title}

diff --git a/web/src/pages/login-next/bg.tsx b/web/src/pages/login-next/bg.tsx index c9b016c5c..a4ec08853 100644 --- a/web/src/pages/login-next/bg.tsx +++ b/web/src/pages/login-next/bg.tsx @@ -134,7 +134,7 @@ export const BgSvg = () => { )}

{def( @@ -144,7 +144,7 @@ export const BgSvg = () => { )}
{def( diff --git a/web/src/pages/login-next/card.tsx b/web/src/pages/login-next/card.tsx index 0908da6a1..2e04cd6ba 100644 --- a/web/src/pages/login-next/card.tsx +++ b/web/src/pages/login-next/card.tsx @@ -23,12 +23,12 @@ const FlipCard3D = (props: IProps) => { className={`relative w-full h-full transition-transform transform-style-3d ${isFlipped ? 'rotate-y-180' : ''}`} > {/* Front Face */} -
+
{children}
{/* Back Face */} -
+
{children}
diff --git a/web/src/pages/login-next/index.less b/web/src/pages/login-next/index.less index 1ce641c32..7a6c89d89 100644 --- a/web/src/pages/login-next/index.less +++ b/web/src/pages/login-next/index.less @@ -42,6 +42,10 @@ ////////////////////////////////////////////////////////////////////////// .perspective-1000 { perspective: 1000px; + overflow: hidden; + min-height: 680px; + display: flex; + align-items: center; } .transform-style-3d { transform-style: preserve-3d; diff --git a/web/src/pages/login-next/index.tsx b/web/src/pages/login-next/index.tsx index 8b8601889..23a8f1b83 100644 --- a/web/src/pages/login-next/index.tsx +++ b/web/src/pages/login-next/index.tsx @@ -24,6 +24,7 @@ import { FormMessage, } from '@/components/ui/form'; import { Input } from '@/components/ui/input'; +import { cn } from '@/lib/utils'; import { zodResolver } from '@hookform/resolvers/zod'; import { Eye, EyeOff } from 'lucide-react'; import { useForm } from 'react-hook-form'; @@ -135,8 +136,7 @@ const Login = () => { }; return ( -
- + <> { Y={'-10%'} color={'rgb(128, 255, 248)'} /> +
+ - {/* */} -
-
-
- logo -
-
RAGFlow
-
-

{t('title')}

-
- {t('start')} -
-
-
- {/* Logo and Header */} - - {/* Login Form */} - -
-
-

- {title === 'login' ? t('loginTitle') : t('signUpTitle')} -

+ {/* */} +
+
+
+ logo
-
-
- onCheck(data))} - > - ( - - {t('emailLabel')} - - - - - - )} - /> - {title === 'register' && ( +
RAGFlow
+
+

+ {t('title')} +

+ {/* border border-accent-primary rounded-full */} + {/*
+ {t('start')} +
*/} +
+
+ {/* Logo and Header */} + + {/* Login Form */} + +
+
+

+ {title === 'login' ? t('loginTitle') : t('signUpTitle')} +

+
+
+ + onCheck(data))} + > ( - {t('nicknameLabel')} + {t('emailLabel')} @@ -222,131 +209,157 @@ const Login = () => { )} /> - )} - - ( - - {t('passwordLabel')} - -
- - -
- - - + {title === 'register' && ( + ( + + {t('nicknameLabel')} + + + + + + )} + /> )} - /> - {title === 'login' && ( ( + {t('passwordLabel')} -
- { - field.onChange(checked); - }} +
+ - {t('rememberMe')} +
)} /> - )} - - {title === 'login' ? t('login') : t('continue')} - - {title === 'login' && channels && channels.length > 0 && ( -
- {channels.map((item) => ( - - ))} -
- )} - - - {title === 'login' && registerEnabled && ( -
-

- {t('signInTip')} - -

-
- )} - {title === 'register' && ( -
-

- {t('signUpTip')} - -

-
- )} + {title === 'login' ? t('login') : t('continue')} + + {title === 'login' && channels && channels.length > 0 && ( +
+ {channels.map((item) => ( + + ))} +
+ )} + + + + {title === 'login' && registerEnabled && ( +
+

+ {t('signInTip')} + +

+
+ )} + {title === 'register' && ( +
+

+ {t('signUpTip')} + +

+
+ )} +
-
- + +
-
+ ); }; diff --git a/web/src/pages/next-search/markdown-content/index.tsx b/web/src/pages/next-search/markdown-content/index.tsx index 36e82afe5..fe23900b6 100644 --- a/web/src/pages/next-search/markdown-content/index.tsx +++ b/web/src/pages/next-search/markdown-content/index.tsx @@ -64,7 +64,10 @@ const MarkdownContent = ({ const { setDocumentIds, data: fileThumbnails } = useFetchDocumentThumbnailsByIds(); const contentWithCursor = useMemo(() => { - let text = DOMPurify.sanitize(content); + let text = DOMPurify.sanitize(content, { + ADD_TAGS: ['think', 'section'], + ADD_ATTR: ['class'], + }); // let text = content; if (text === '') { text = t('chat.searching');