Fix:Modify the personal center style #10703 (#11470)

### What problem does this PR solve? Fix:Modify the personal center style #10703 - All form-label font styles are no longer bold - Menus are not highlighted on first visit to the personal center ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
2025-12-08 12:32:30 +08:00 · 2025-11-24 12:20:48 +08:00
parent 7140950e93
commit 8fe782f4ea
10 changed files with 49 additions and 17 deletions
--- a/web/src/components/originui/select-with-search.tsx
+++ b/web/src/components/originui/select-with-search.tsx
@ -47,6 +47,7 @@ export type SelectWithSearchFlagProps = {
  allowClear?: boolean;
  disabled?: boolean;
  placeholder?: string;
+  emptyData?: string;
 };

 function findLabelWithoutOptions(
@ -78,6 +79,7 @@ export const SelectWithSearch = forwardRef<
      allowClear = false,
      disabled = false,
      placeholder = t('common.selectPlaceholder'),
+      emptyData = t('common.noDataFound'),
    },
    ref,
  ) => {
@ -183,8 +185,8 @@ export const SelectWithSearch = forwardRef<
                className=" placeholder:text-text-disabled"
              />
            )}
-            <CommandList className="mt-2">
-              <CommandEmpty>{t('common.noDataFound')}</CommandEmpty>
+            <CommandList className="mt-2 outline-none">
+              <CommandEmpty>{emptyData}</CommandEmpty>
              {options.map((group, idx) => {
                if (group.options) {
                  return (
@ -196,6 +198,9 @@ export const SelectWithSearch = forwardRef<
                            value={option.value}
                            disabled={option.disabled}
                            onSelect={handleSelect}
+                            className={
+                              value === option.value ? 'bg-bg-card' : ''
+                            }
                          >
                            <span className="leading-none">{option.label}</span>

--- a/web/src/components/ui/label.tsx
+++ b/web/src/components/ui/label.tsx
@ -7,7 +7,7 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';

 const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-text-secondary',
+  'text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-text-secondary',
 );

 const Label = React.forwardRef<
--- a/web/src/hooks/common-hooks.tsx
+++ b/web/src/hooks/common-hooks.tsx
@ -88,18 +88,18 @@ export const useShowDeleteConfirm = () => {
    ({ title, content, onOk, onCancel }: IProps): Promise<number> => {
      return new Promise((resolve, reject) => {
        Modal.show({
-          title: title ?? t('common.deleteModalTitle'),
+          // title: title ?? t('common.deleteModalTitle'),
+          closable: false,
          visible: true,
          onVisibleChange: () => {
            Modal.hide();
          },
          footer: null,
-          closable: true,
          maskClosable: false,
          okText: t('common.yes'),
          cancelText: t('common.no'),
          style: {
-            width: '400px',
+            width: '450px',
          },
          okButtonClassName:
            'bg-state-error text-white hover:bg-state-error hover:text-white',
@ -116,7 +116,14 @@ export const useShowDeleteConfirm = () => {
            onCancel?.();
            Modal.hide();
          },
-          children: content,
+          children: (
+            <div className="flex flex-col justify-start items-start mt-3">
+              <div className="text-lg font-medium">
+                {title ?? t('common.deleteModalTitle')}
+              </div>
+              <div className="text-base font-normal">{content}</div>
+            </div>
+          ),
        });
      });
    },
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@ -696,6 +696,9 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
      tocEnhanceTip: ` During the parsing of the document, table of contents information was generated (see the 'Enable Table of Contents Extraction' option in the General method). This allows the large model to return table of contents items relevant to the user's query, thereby using these items to retrieve related chunks and apply weighting to these chunks during the sorting process. This approach is derived from mimicking the behavioral logic of how humans search for knowledge in books.`,
    },
    setting: {
+      modelEmptyTip:
+        'No models available. Please add models from the panel on the right.',
+      sourceEmptyTip: 'No data sources added yet. Select one below to connect.',
      seconds: 'seconds',
      minutes: 'minutes',
      edit: 'Edit',
@ -716,7 +719,7 @@ Example: https://fsn1.your-objectstorage.com`,
      deleteSourceModalTitle: 'Delete data source',
      deleteSourceModalContent: `
      <p>Are you sure you want to delete this data source link?</p>`,
-      deleteSourceModalConfirmText: 'Comfirm',
+      deleteSourceModalConfirmText: 'Confirm',
      errorMsg: 'Error message',
      newDocs: 'New Docs',
      timeStarted: 'Time started',
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@ -685,6 +685,8 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
      tocEnhanceTip: `解析文档时生成了目录信息（见General方法的‘启用目录抽取’），让大模型返回和用户问题相关的目录项，从而利用目录项拿到相关chunk，对这些chunk在排序中进行加权。这种方法来源于模仿人类查询书本中知识的行为逻辑`,
    },
    setting: {
+      modelEmptyTip: '暂无可用模型，请先在右侧面板添加模型。',
+      sourceEmptyTip: '暂未添加任何数据源，请从下方选择一个进行连接。',
      seconds: '秒',
      minutes: '分',
      edit: '编辑',
--- a/web/src/pages/user-setting/components/user-setting-header/index.tsx
+++ b/web/src/pages/user-setting/components/user-setting-header/index.tsx
@ -10,7 +10,7 @@ export const UserSettingHeader = ({
 }) => {
  return (
    <>
-      <header className="flex flex-col gap-1 justify-between items-start p-0">
+      <header className="flex flex-col gap-1.5 justify-between items-start p-0">
        <div className="text-2xl font-medium text-text-primary">{name}</div>
        {description && (
          <div className="text-sm text-text-secondary ">{description}</div>
--- a/web/src/pages/user-setting/data-source/data-source-detail-page/index.tsx
+++ b/web/src/pages/user-setting/data-source/data-source-detail-page/index.tsx
@ -170,7 +170,7 @@ const SourceDetailPage = () => {
          </CardTitle>
        </CardHeader>
        <Separator className="border-border-button bg-border-button w-[calc(100%+2rem)] -translate-x-4 -translate-y-4" />
-        <CardContent className="p-2 flex flex-col gap-2 max-h-[calc(100vh-190px)] overflow-y-auto scrollbar-auto">
+        <CardContent className="p-2 flex flex-col gap-10 max-h-[calc(100vh-190px)] overflow-y-auto scrollbar-auto">
          <div className="max-w-[1200px]">
            <DynamicForm.Root
              ref={formRef}
@ -181,8 +181,10 @@ const SourceDetailPage = () => {
              defaultValues={defaultValues}
            />
          </div>
-          <section className="flex flex-col gap-2 mt-6">
-            <div className="text-2xl text-text-primary">{t('setting.log')}</div>
+          <section className="flex flex-col gap-2">
+            <div className="text-2xl text-text-primary mb-2">
+              {t('setting.log')}
+            </div>
            <DataSourceLogsTable refresh_freq={detail?.refresh_freq || false} />
          </section>
        </CardContent>
--- a/web/src/pages/user-setting/data-source/index.tsx
+++ b/web/src/pages/user-setting/data-source/index.tsx
@ -120,6 +120,11 @@ const DataSource = () => {
      <div className="relative">
        <div className=" flex flex-col gap-4 max-h-[calc(100vh-230px)] overflow-y-auto overflow-x-hidden scrollbar-auto">
          <div className="flex flex-col gap-3">
+            {categorizedList?.length <= 0 && (
+              <div className="text-text-secondary w-full flex justify-center items-center h-20">
+                {t('setting.sourceEmptyTip')}
+              </div>
+            )}
            {categorizedList.map((item, index) => (
              <AddedSourceCard key={index} {...item} />
            ))}
@ -127,9 +132,9 @@ const DataSource = () => {
          <section className="bg-transparent border-none mt-8">
            <header className="flex flex-row items-center justify-between space-y-0 p-0 pb-4">
              {/* <Users className="mr-2 h-5 w-5 text-[#1677ff]" /> */}
-              <CardTitle className="text-2xl font-semibold">
+              <CardTitle className="text-2xl font-semibold ">
                {t('setting.availableSources')}
-                <div className="text-sm text-text-secondary font-normal">
+                <div className="text-sm text-text-secondary font-normal mt-1.5">
                  {t('setting.availableSourcesDescription')}
                </div>
              </CardTitle>
--- a/web/src/pages/user-setting/setting-model/components/system-setting.tsx
+++ b/web/src/pages/user-setting/setting-model/components/system-setting.tsx
@ -161,6 +161,7 @@ const SystemSetting = ({ onOk, loading }: IProps) => {
          options={options}
          onChange={(value) => handleFieldChange(id, value)}
          placeholder={t('selectModelPlaceholder')}
+          emptyData={t('modelEmptyTip')}
        />
      </div>
    );
--- a/web/src/pages/user-setting/sidebar/hooks.tsx
+++ b/web/src/pages/user-setting/sidebar/hooks.tsx
@ -1,12 +1,19 @@
 import { useLogout } from '@/hooks/login-hooks';
 import { Routes } from '@/routes';
-import { useCallback, useState } from 'react';
-import { useNavigate } from 'umi';
+import { useCallback, useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'umi';

 export const useHandleMenuClick = () => {
  const navigate = useNavigate();
  const [active, setActive] = useState<Routes>();
  const { logout } = useLogout();
+  const location = useLocation();
+  useEffect(() => {
+    const path = (location.pathname.split('/')?.[2] || '') as Routes;
+    if (path) {
+      setActive(('/' + path) as Routes);
+    }
+  }, [location]);

  const handleMenuClick = useCallback(
    (key: Routes) => () => {
@ -20,5 +27,5 @@ export const useHandleMenuClick = () => {
    [logout, navigate],
  );

-  return { handleMenuClick, active };
+  return { handleMenuClick, active, setActive };
 };