Fix: Pipeline page style optimizations (#14128)

### What problem does this PR solve? Fix: Pipeline page style optimizations ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
2026-06-29 23:41:12 +08:00 · 2026-04-15 19:05:54 +08:00
parent c93ec0a1f3
commit dce0b1c030
5 changed files with 51 additions and 37 deletions
--- a/web/src/components/ragflow-form.tsx
+++ b/web/src/components/ragflow-form.tsx
@@ -21,6 +21,7 @@ type RAGFlowFormItemProps = {
  horizontal?: boolean;
  required?: boolean;
  labelClassName?: string;
+  valueClassName?: string;
  className?: string;
 } & Pick<UseControllerProps<any>, 'rules'>;

@@ -32,6 +33,7 @@ export function RAGFlowFormItem({
  horizontal = false,
  required = false,
  labelClassName,
+  valueClassName,
  className,
  rules,
 }: RAGFlowFormItemProps) {
@@ -60,10 +62,14 @@ export function RAGFlowFormItem({
            </FormLabel>
          )}
          <div
-            className={cn('flex flex-col', {
-              'w-full': !horizontal,
-              'w-3/4': horizontal,
-            })}
+            className={cn(
+              'flex flex-col',
+              {
+                'w-full': !horizontal,
+                'w-3/4': horizontal,
+              },
+              valueClassName,
+            )}
          >
            <FormControl>
              {typeof children === 'function'
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@@ -1513,9 +1513,9 @@ Example: Virtual Hosted Style`,
      includeHeadingContent: 'Include heading content',
      includeHeadingContentTip:
        'When enabled, content directly under a heading is kept as its own chunk. Child chunks keep only the heading path.',
-      hierarchyTip: `Build a heading tree and produce self-contained chunks, each carrying its full ancestor heading path (e.g. Part 1 › Chapter 3 › Section 2 + body text).<br>
+      hierarchyTip: `Build a heading tree and produce self-contained chunks, each carrying its full ancestor heading path (e.g. Part 1 › Chapter 3 › Section 2 + body text).\n
 Best for: Documents with independent, structurally significant sections — such as legal statutes, regulations, contracts, and technical specifications — where each chunk must be identifiable by its structural position even without surrounding context.`,
-      groupTip: `Split the document flat at a chosen heading level and automatically merge adjacent small sections to preserve content continuity. No parent-heading path is injected.<br>
+      groupTip: `Split the document flat at a chosen heading level and automatically merge adjacent small sections to preserve content continuity. No parent-heading path is injected.\n
 Best for: Documents with flowing, contextually connected content — such as books, manuals, reports, and articles — where adjacent paragraphs should stay together to maintain narrative coherence.`,
      enableMultiColumn: 'Detect multi-column layout',
      enableMultiColumnTip:
@@ -2281,8 +2281,11 @@ This process aggregates variables from multiple branches into a single variable
      },
      fields: 'Field',
      addParser: 'Add Parser',
+      rule: 'Rule',
+      addRule: 'Add rule',
      group: 'Group',
      hierarchy: 'Hierarchy',
+      addRegularExpressions: 'Add regular expressions',
      regularExpressions: 'Regular Expressions',
      overlappedPercent: 'Overlapped percent (%)',
      searchMethod: 'Search method',
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@@ -1259,9 +1259,9 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
      includeHeadingContent: '包含标题内容',
      includeHeadingContentTip:
        '启用后，标题下的直接内容将作为一个独立的块保留。子块仅保留标题路径。',
-      hierarchyTip: `构建标题树并生成独立的块，每个块携带其完整的祖先标题路径（例如 第1部分 › 第3章 › 第2节 + 正文）。<br>
+      hierarchyTip: `构建标题树并生成独立的块，每个块携带其完整的祖先标题路径（例如 第1部分 › 第3章 › 第2节 + 正文）。\n
 适用场景：具有独立的、结构性重要章节的文档——如法律条款、法规、合同和技术规范——其中每个块即使没有上下文也能通过其结构位置来识别。`,
-      groupTip: `在选定的标题级别将文档扁平分割，并自动合并相邻的小节以保持内容连续性。不注入父标题路径。<br>
+      groupTip: `在选定的标题级别将文档扁平分割，并自动合并相邻的小节以保持内容连续性。不注入父标题路径。\n
 适用场景：具有流动性的、内容相关联的文档——如书籍、手册、报告和文章——其中相邻段落应保持在一起以维持叙述连贯性。`,
      enableMultiColumn: '启用多栏',
      enableMultiColumnTip:
@@ -1980,8 +1980,11 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
      },
      fields: '字段',
      addParser: '增加解析器',
-      group: '聚合',
-      hierarchy: '层次结构',
+      rule: '规则',
+      addRule: '增加规则',
+      addRegularExpressions: '增加正则表达式',
+      // group: '聚合',
+      // hierarchy: '层次结构',
      regularExpressions: '正则表达式',
      overlappedPercent: '重叠百分比（%）',
      searchMethod: '搜索方法',
--- a/web/src/pages/agent/form/parser-form/common-form-fields.tsx
+++ b/web/src/pages/agent/form/parser-form/common-form-fields.tsx
@@ -9,7 +9,7 @@ import {
  SelectWithSearchFlagOptionType,
 } from '@/components/originui/select-with-search';
 import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { Checkbox } from '@/components/ui/checkbox';
+import { Switch } from '@/components/ui/switch';
 import { upperCase, upperFirst } from 'lodash';
 import { useTranslation } from 'react-i18next';
 import {
@@ -96,10 +96,11 @@ export function TwoColumnCheckFormField({ prefix }: CommonProps) {
      label={t('flow.enableMultiColumn')}
      horizontal={true}
      labelClassName="w-full"
+      valueClassName="w-8"
      tooltip={t('flow.enableMultiColumnTip')}
    >
      {(field) => (
-        <Checkbox
+        <Switch
          checked={field.value}
          onCheckedChange={(checked) => {
            field.onChange?.(checked);
@@ -119,9 +120,10 @@ export function RmdirFormField({ prefix }: CommonProps) {
      horizontal={true}
      tooltip={t('flow.removeTocTip')}
      labelClassName="w-full"
+      valueClassName="w-8"
    >
      {(field) => (
-        <Checkbox
+        <Switch
          checked={field.value}
          onCheckedChange={(checked) => {
            field.onChange?.(checked);
--- a/web/src/pages/agent/form/title-chunker-form/index.tsx
+++ b/web/src/pages/agent/form/title-chunker-form/index.tsx
@@ -3,11 +3,12 @@ import { SelectWithSearch } from '@/components/originui/select-with-search';
 import { RAGFlowFormItem } from '@/components/ragflow-form';
 import { BlockButton, Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
 import { Form } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
+import { cn } from '@/lib/utils';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trash2 } from 'lucide-react';
+import { ChevronDown, ChevronUp, Trash2 } from 'lucide-react';
 import { memo, useEffect, useRef, useState } from 'react';
 import { useFieldArray, useForm, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -145,7 +146,7 @@ function CardBody({ cardName }: CardBodyProps) {
        onClick={() => appendLevel({ expression: '' })}
        className="mt-4"
      >
-        {t('flow.addLevel', 'Add Level')}
+        {t('flow.addRegularExpressions')}
      </BlockButton>
    </CardContent>
  );
@@ -297,27 +298,25 @@ const TitleChunkerForm = ({ node }: INextOperatorForm) => {
          {method === 'group' && t('flow.groupTip')}
        </div> */}
        <div
-          className={`text-xs text-text-secondary w-full border rounded-sm p-2 cursor-pointer ${showAllTip ? 'block' : 'truncate'}`}
+          className={`text-xs text-text-secondary w-full cursor-pointer `}
          onClick={() => setShowAllTip(!showAllTip)}
        >
-          <div className="flex flex-col justify-start items-center">
-            <span
-              className="flex self-start"
-              dangerouslySetInnerHTML={{
-                __html:
-                  method === 'hierarchy'
-                    ? t('flow.hierarchyTip')
-                    : method === 'group'
-                      ? t('flow.groupTip')
-                      : '',
-              }}
-            />
-            {/* {method === 'hierarchy' && t('flow.hierarchyTip')}
-              {method === 'group' && t('flow.groupTip')} */}
-
-            {/* <span className="flex ml-2 text-xs self-center">
-              {showAllTip ? '▲' : ''}
-            </span> */}
+          <div className={cn('flex justify-start items-start')}>
+            <div
+              className={cn(
+                'flex-1 ',
+                showAllTip ? 'whitespace-pre-wrap' : 'truncate',
+              )}
+            >
+              {method === 'hierarchy'
+                ? t('flow.hierarchyTip')
+                : method === 'group'
+                  ? t('flow.groupTip')
+                  : ''}
+            </div>
+            <div className="flex ml-2 text-xs ">
+              {showAllTip ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+            </div>
          </div>
        </div>
        <RAGFlowFormItem name={'hierarchy'} label={''}>
@@ -330,9 +329,10 @@ const TitleChunkerForm = ({ node }: INextOperatorForm) => {
            tooltip={t('flow.includeHeadingContentTip')}
            horizontal={true}
            labelClassName="w-full"
+            valueClassName="w-8"
          >
            {(field) => (
-              <Checkbox
+              <Switch
                checked={field.value}
                onCheckedChange={(checked) => {
                  field.onChange?.(checked);
@@ -389,7 +389,7 @@ const TitleChunkerForm = ({ node }: INextOperatorForm) => {
          }
          className="mt-4"
        >
-          {t('flow.rule', 'Add Rule')}
+          {t('flow.addRule', 'Add Rule')}
        </BlockButton>
        {/* )} */}
      </FormWrapper>