style: replace h-[1px] with h-px to unify the writing format of Tailwind CSS (#24146)

2025-08-21 21:38:40 +08:00
parent 1abf1240b2
commit 0c595c4745
34 changed files with 41 additions and 47 deletions
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@@ -107,7 +107,7 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
        )}
      </div>
      <div className='px-4'>
-        <div className={cn('mx-auto mt-1 h-[1px] bg-divider-subtle', !expand && 'w-6')} />
+        <div className={cn('mx-auto mt-1 h-px bg-divider-subtle', !expand && 'w-6')} />
      </div>
      <nav
        className={`
--- a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
@@ -24,7 +24,7 @@ export const EditTitle: FC<{ className?: string; title: string }> = ({ className
    <RiEditFill className='mr-1 h-3.5 w-3.5' />
    <div>{title}</div>
    <div
-      className='ml-2 h-[1px] grow'
+      className='ml-2 h-px grow'
      style={{
        background: 'linear-gradient(90deg, rgba(0, 0, 0, 0.05) -1.65%, rgba(0, 0, 0, 0.00) 100%)',
      }}
--- a/web/app/components/app/configuration/base/group-name/index.tsx
+++ b/web/app/components/app/configuration/base/group-name/index.tsx
@@ -12,7 +12,7 @@ const GroupName: FC<IGroupNameProps> = ({
  return (
    <div className='mb-1 flex items-center'>
      <div className='mr-3 text-xs font-semibold uppercase leading-[18px] text-text-tertiary'>{name}</div>
-      <div className='h-[1px] grow'
+      <div className='h-px grow'
        style={{
          background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, #F3F4F6 100%)',

--- a/web/app/components/app/configuration/config-var/select-var-type.tsx
+++ b/web/app/components/app/configuration/config-var/select-var-type.tsx
@@ -66,7 +66,7 @@ const SelectVarType: FC<Props> = ({
            <SelectItem type={InputVarType.select} value='select' text={t('appDebug.variableConfig.select')} onClick={handleChange}></SelectItem>
            <SelectItem type={InputVarType.number} value='number' text={t('appDebug.variableConfig.number')} onClick={handleChange}></SelectItem>
          </div>
-          <div className='h-[1px] border-t border-components-panel-border'></div>
+          <div className='h-px border-t border-components-panel-border'></div>
          <div className='p-1'>
            <SelectItem Icon={ApiConnection} value='api' text={t('appDebug.variableConfig.apiBasedVar')} onClick={handleChange}></SelectItem>
          </div>
--- a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
+++ b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
@@ -81,7 +81,7 @@ const AssistantTypePicker: FC<Props> = ({

  const agentConfigUI = (
    <>
-      <div className='my-4 h-[1px] bg-gray-100'></div>
+      <div className='my-4 h-px bg-gray-100'></div>
      <div
        className={cn(isAgent ? 'group cursor-pointer hover:bg-primary-50' : 'opacity-30', 'rounded-xl bg-gray-50 p-3 pr-4 ')}
        onClick={() => {
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -678,7 +678,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
          ? <div className="px-6 py-4">
            <div className='flex h-[18px] items-center space-x-3'>
              <div className='system-xs-semibold-uppercase text-text-tertiary'>{t('appLog.table.header.output')}</div>
-              <div className='h-[1px] grow' style={{
+              <div className='h-px grow' style={{
                background: 'linear-gradient(270deg, rgba(243, 244, 246, 0) 0%, rgb(243, 244, 246) 100%)',
              }}></div>
            </div>
--- a/web/app/components/base/agent-log-modal/iteration.tsx
+++ b/web/app/components/base/agent-log-modal/iteration.tsx
@@ -24,7 +24,7 @@ const Iteration: FC<Props> = ({ iterationInfo, isFinal, index }) => {
        {!isFinal && (
          <div className='mr-3 shrink-0 text-xs font-semibold leading-[18px] text-text-tertiary'>{`${t('appLog.agentLogDetail.iteration').toUpperCase()} ${index}`}</div>
        )}
-        <Divider bgStyle='gradient' className='mx-0 h-[1px] grow'/>
+        <Divider bgStyle='gradient' className='mx-0 h-px grow'/>
      </div>
      <ToolCall
        isLLM
--- a/web/app/components/base/chat/chat/citation/index.tsx
+++ b/web/app/components/base/chat/chat/citation/index.tsx
@@ -79,7 +79,7 @@ const Citation: FC<CitationProps> = ({
    <div className='-mb-1 mt-3'>
      <div className='system-xs-medium mb-2 flex items-center text-text-tertiary'>
        {t('common.chat.citation.title')}
-        <div className='ml-2 h-[1px] grow bg-divider-regular' />
+        <div className='ml-2 h-px grow bg-divider-regular' />
      </div>
      <div className='relative flex flex-wrap'>
        {
--- a/web/app/components/base/chat/chat/citation/popup.tsx
+++ b/web/app/components/base/chat/chat/citation/popup.tsx
@@ -114,7 +114,7 @@ const Popup: FC<PopupProps> = ({
                    </div>
                    {
                      index !== data.sources.length - 1 && (
-                        <div className='my-1 h-[1px] bg-divider-regular' />
+                        <div className='my-1 h-px bg-divider-regular' />
                      )
                    }
                  </Fragment>
--- a/web/app/components/base/dropdown/index.tsx
+++ b/web/app/components/base/dropdown/index.tsx
@@ -77,7 +77,7 @@ const Dropdown: FC<DropdownProps> = ({
          }
          {
            (!!items.length && !!secondItems?.length) && (
-              <div className='h-[1px] bg-divider-regular' />
+              <div className='h-px bg-divider-regular' />
            )
          }
          {
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
@@ -19,7 +19,7 @@ const ScoreSlider: FC<Props> = ({

  return (
    <div className={className}>
-      <div className='mt-[14px] h-[1px]'>
+      <div className='mt-[14px] h-px'>
        <Slider
          max={100}
          min={80}
--- a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
+++ b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
@@ -101,9 +101,9 @@ const FileFromLinkOrLocal = ({
          {
            showFromLink && showFromLocal && (
              <div className='system-2xs-medium-uppercase flex h-7 items-center p-2 text-text-quaternary'>
-                <div className='mr-2 h-[1px] w-[93px] bg-gradient-to-l from-[rgba(16,24,40,0.08)]' />
+                <div className='mr-2 h-px w-[93px] bg-gradient-to-l from-[rgba(16,24,40,0.08)]' />
                OR
-                <div className='ml-2 h-[1px] w-[93px] bg-gradient-to-r from-[rgba(16,24,40,0.08)]' />
+                <div className='ml-2 h-px w-[93px] bg-gradient-to-r from-[rgba(16,24,40,0.08)]' />
              </div>
            )
          }
--- a/web/app/components/base/image-uploader/chat-image-uploader.tsx
+++ b/web/app/components/base/image-uploader/chat-image-uploader.tsx
@@ -93,9 +93,9 @@ const UploaderButton: FC<UploaderButtonProps> = ({
          {hasUploadFromLocal && (
            <>
              <div className="mt-2 flex items-center px-2 text-xs font-medium text-gray-400">
-                <div className="mr-3 h-[1px] w-[93px] bg-gradient-to-l from-[#F3F4F6]" />
+                <div className="mr-3 h-px w-[93px] bg-gradient-to-l from-[#F3F4F6]" />
                OR
-                <div className="ml-3 h-[1px] w-[93px] bg-gradient-to-r from-[#F3F4F6]" />
+                <div className="ml-3 h-px w-[93px] bg-gradient-to-r from-[#F3F4F6]" />
              </div>
              <Uploader
                onUpload={handleUpload}
--- a/web/app/components/base/tag-management/selector.tsx
+++ b/web/app/components/base/tag-management/selector.tsx
@@ -150,7 +150,7 @@ const Panel = (props: PanelProps) => {
        </div>
      )}
      {keywords && notExisted && filteredTagList.length > 0 && (
-        <Divider className='!my-0 !h-[1px]' />
+        <Divider className='!my-0 !h-px' />
      )}
      {(filteredTagList.length > 0 || filteredSelectedTagList.length > 0) && (
        <div className='max-h-[172px] overflow-y-auto p-1'>
@@ -192,7 +192,7 @@ const Panel = (props: PanelProps) => {
          </div>
        </div>
      )}
-      <Divider className='!my-0 !h-[1px]' />
+      <Divider className='!my-0 !h-px' />
      <div className='p-1'>
        <div className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover' onClick={() => setShowTagManagementModal(true)}>
          <Tag03 className='h-4 w-4 text-text-tertiary' />
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -101,7 +101,6 @@ const RuleDetail: FC<{
        break
    }
    return value
-    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sourceData])

  return <div className='flex flex-col gap-1'>
@@ -196,7 +195,6 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
    return () => {
      stopQueryStatus()
    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  // get rule
@@ -334,7 +332,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
          </div>
        ))}
      </div>
-      <hr className="my-3 h-[1px] border-0 bg-divider-subtle" />
+      <hr className="my-3 h-px border-0 bg-divider-subtle" />
      <RuleDetail
        sourceData={ruleDetail}
        indexingType={indexingType}
--- a/web/app/components/datasets/create/step-three/index.tsx
+++ b/web/app/components/datasets/create/step-three/index.tsx
@@ -39,7 +39,7 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
                  </div>
                </div>
              </div>
-              <hr className="my-6 h-[1px] border-0 bg-divider-subtle" />
+              <hr className="my-6 h-px border-0 bg-divider-subtle" />
            </>
          )}
          {datasetId && (
--- a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
+++ b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
@@ -93,7 +93,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
      isParagraphMode ? 'pb-2 pt-1' : 'grow px-3',
      (isFullDocMode && isLoading) && 'overflow-y-hidden',
    )}>
-      {isFullDocMode ? <Divider type='horizontal' className='my-1 h-[1px] bg-divider-subtle' /> : null}
+      {isFullDocMode ? <Divider type='horizontal' className='my-1 h-px bg-divider-subtle' /> : null}
      <div className={classNames('flex items-center justify-between', isFullDocMode ? 'sticky -top-2 left-0 bg-background-default pb-3 pt-2' : '')}>
        <div className={classNames(
          'flex h-7 items-center rounded-lg pl-1 pr-3',
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -175,7 +175,6 @@ const Completed: FC<ICompletedProps> = ({
      if (totalPages < currentPage)
        setCurrentPage(totalPages === 0 ? 1 : totalPages)
    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [segmentListData])

  useEffect(() => {
@@ -214,7 +213,6 @@ const Completed: FC<ICompletedProps> = ({
      if (totalPages < currentPage)
        setCurrentPage(totalPages === 0 ? 1 : totalPages)
    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [childChunkListData])

  const resetList = useCallback(() => {
@@ -375,13 +373,11 @@ const Completed: FC<ICompletedProps> = ({

  useEffect(() => {
    resetList()
-  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pathname])

  useEffect(() => {
    if (importStatus === ProcessStatus.COMPLETED)
      resetList()
-  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [importStatus])

  const onCancelBatchOperation = useCallback(() => {
@@ -655,7 +651,7 @@ const Completed: FC<ICompletedProps> = ({
          />
      }
      {/* Pagination */}
-      <Divider type='horizontal' className='mx-6 my-0 h-[1px] w-auto bg-divider-subtle' />
+      <Divider type='horizontal' className='mx-6 my-0 h-px w-auto bg-divider-subtle' />
      <Pagination
        current={currentPage - 1}
        onChange={cur => setCurrentPage(cur + 1)}
--- a/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/selector.tsx
@@ -105,7 +105,7 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
              }
            </div>
          </div>
-          <div className='h-[1px] bg-divider-regular' />
+          <div className='h-px bg-divider-regular' />
          <div className='p-1'>
            <div
              className='flex h-8 cursor-pointer items-center px-3 text-sm text-text-accent'
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
@@ -206,7 +206,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
              </div>
              {
                !!parameterRules.length && (
-                  <div className='my-3 h-[1px] bg-divider-subtle' />
+                  <div className='my-3 h-px bg-divider-subtle' />
                )
              }
              {
--- a/web/app/components/plugins/marketplace/intersection-line/index.tsx
+++ b/web/app/components/plugins/marketplace/intersection-line/index.tsx
@@ -14,7 +14,7 @@ const IntersectionLine = ({
  useScrollIntersection(ref, intersectionContainerId)

  return (
-    <div ref={ref} className='mb-4 h-[1px] shrink-0 bg-transparent'></div>
+    <div ref={ref} className='mb-4 h-px shrink-0 bg-transparent'></div>
  )
 }

--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@@ -294,7 +294,7 @@ const Authorized = ({
                )
              }
            </div>
-            <div className='h-[1px] bg-divider-subtle'></div>
+            <div className='h-px bg-divider-subtle'></div>
            <div className='p-2'>
              <Authorize
                pluginPayload={pluginPayload}
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
@@ -248,7 +248,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
                />
              </div>
              {(currentModel?.model_type === ModelTypeEnum.textGeneration || currentModel?.model_type === ModelTypeEnum.tts) && (
-                <div className='my-3 h-[1px] bg-divider-subtle' />
+                <div className='my-3 h-px bg-divider-subtle' />
              )}
              {currentModel?.model_type === ModelTypeEnum.textGeneration && (
                <LLMParamsPanel
--- a/web/app/components/tools/workflow-tool/configure-button.tsx
+++ b/web/app/components/tools/workflow-tool/configure-button.tsx
@@ -175,7 +175,7 @@ const WorkflowToolConfigureButton = ({

  return (
    <>
-      <Divider type='horizontal' className='h-[1px] bg-divider-subtle' />
+      <Divider type='horizontal' className='h-px bg-divider-subtle' />
      {(!published || !isLoading) && (
        <div className={cn(
          'group rounded-lg bg-background-section-burn transition-colors',
--- a/web/app/components/workflow/help-line/index.tsx
+++ b/web/app/components/workflow/help-line/index.tsx
@@ -15,7 +15,7 @@ const HelpLineHorizontal = memo(({

  return (
    <div
-      className='absolute z-[9] h-[1px] bg-primary-300'
+      className='absolute z-[9] h-px bg-primary-300'
      style={{
        top: top * zoom + y,
        left: left * zoom + x,
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/panel-operator-popup.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/panel-operator-popup.tsx
@@ -119,7 +119,7 @@ const PanelOperatorPopup = ({
                )
              }
            </div>
-            <div className='h-[1px] bg-divider-regular'></div>
+            <div className='h-px bg-divider-regular'></div>
          </>
        )
      }
@@ -148,7 +148,7 @@ const PanelOperatorPopup = ({
                <ShortcutsName keys={['ctrl', 'd']} />
              </div>
            </div>
-            <div className='h-[1px] bg-divider-regular'></div>
+            <div className='h-px bg-divider-regular'></div>
            <div className='p-1'>
              <div
                className={`
@@ -161,7 +161,7 @@ const PanelOperatorPopup = ({
                <ShortcutsName keys={['del']} />
              </div>
            </div>
-            <div className='h-[1px] bg-divider-regular'></div>
+            <div className='h-px bg-divider-regular'></div>
          </>
        )
      }
@@ -177,7 +177,7 @@ const PanelOperatorPopup = ({
                {t('workflow.panel.helpLink')}
              </a>
            </div>
-            <div className='h-[1px] bg-divider-regular'></div>
+            <div className='h-px bg-divider-regular'></div>
          </>
        )
      }
--- a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
@@ -204,7 +204,7 @@ const ConditionWrap: FC<Props> = ({
                </div>
              </div>
              {!isSubVariable && (
-                <div className='mx-3 my-2 h-[1px] bg-divider-subtle'></div>
+                <div className='mx-3 my-2 h-px bg-divider-subtle'></div>
              )}
            </div>
          ))
--- a/web/app/components/workflow/nodes/if-else/panel.tsx
+++ b/web/app/components/workflow/nodes/if-else/panel.tsx
@@ -73,7 +73,7 @@ const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
          ELIF
        </Button>
      </div>
-      <div className='mx-3 my-2 h-[1px] bg-divider-subtle'></div>
+      <div className='mx-3 my-2 h-px bg-divider-subtle'></div>
      <Field
        title={t(`${i18nPrefix}.else`)}
        className='px-4 py-2'
--- a/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
@@ -71,7 +71,7 @@ const Operator = ({
              <ShortcutsName keys={['ctrl', 'd']} />
            </div>
          </div>
-          <div className='h-[1px] bg-divider-subtle'></div>
+          <div className='h-px bg-divider-subtle'></div>
          <div className='p-1'>
            <div
              className='flex h-8 cursor-pointer items-center justify-between rounded-md px-3 text-sm text-text-secondary hover:bg-state-base-hover'
@@ -85,7 +85,7 @@ const Operator = ({
              />
            </div>
          </div>
-          <div className='h-[1px] bg-divider-subtle'></div>
+          <div className='h-px bg-divider-subtle'></div>
          <div className='p-1'>
            <div
              className='flex h-8 cursor-pointer items-center justify-between rounded-md px-3 text-sm text-text-secondary hover:bg-state-destructive-hover hover:text-text-destructive'
--- a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
@@ -107,7 +107,7 @@ const ConversationVariableModal = ({
          <div className='flex h-0 grow flex-col p-4 pt-2'>
            <div className='mb-2 flex shrink-0 items-center gap-2'>
              <div className='system-xs-medium-uppercase shrink-0 text-text-tertiary'>{t('workflow.chatVariable.storedContent').toLocaleUpperCase()}</div>
-              <div className='h-[1px] grow' style={{
+              <div className='h-px grow' style={{
                background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255) 100%)',
              }}></div>
              {latestValueTimestampMap[currentVar.id] && (
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
@@ -64,7 +64,7 @@ const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {
          {
            isShowDelete && (
              <>
-                <Divider type='horizontal' className='my-0 h-[1px] bg-divider-subtle' />
+                <Divider type='horizontal' className='my-0 h-px bg-divider-subtle' />
                <div className='p-1'>
                  <MenuItem
                    item={deleteOperation}
--- a/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
@@ -70,7 +70,7 @@ const Filter: FC<FilterProps> = ({
              })
            }
          </div>
-          <Divider type='horizontal' className='my-0 h-[1px] bg-divider-subtle' />
+          <Divider type='horizontal' className='my-0 h-px bg-divider-subtle' />
          <FilterSwitch enabled={isOnlyShowNamedVersions} handleSwitch={handleSwitch} />
        </div>
      </PortalToFollowElemContent>
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@@ -414,7 +414,7 @@ const SelectionContextmenu = () => {
            {t('workflow.operator.distributeVertical')}
          </div>
        </div>
-        <div className='h-[1px] bg-divider-regular'></div>
+        <div className='h-px bg-divider-regular'></div>
        <div className='p-1'>
            <div className='system-xs-medium px-2 py-2 text-text-tertiary'>
            {t('workflow.operator.horizontal')}
--- a/web/app/education-apply/education-apply-page.tsx
+++ b/web/app/education-apply/education-apply-page.tsx
@@ -154,7 +154,7 @@ const EducationApplyAge = () => {
          >
            {t('education.submit')}
          </Button>
-          <div className='mb-4 mt-5 h-[1px] bg-gradient-to-r from-[rgba(16,24,40,0.08)]'></div>
+          <div className='mb-4 mt-5 h-px bg-gradient-to-r from-[rgba(16,24,40,0.08)]'></div>
          <a
            className='system-xs-regular flex items-center text-text-accent'
            href={docLink('/getting-started/dify-for-education')}