From 7cb6eabfd0da301586a47ebd9c4cf7f4d40df7c0 Mon Sep 17 00:00:00 2001
From: chanx <1243304602@qq.com>
Date: Mon, 24 Nov 2025 19:05:46 +0800
Subject: [PATCH] =?UTF-8?q?Fix=EF=BC=9AModify=20the=20style=20of=20your=20?=
 =?UTF-8?q?personal=20center?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../originui/select-with-search.tsx           |   6 +-
 .../components/similarity-slider/index.tsx    |   2 +-
 .../components/slider-input-form-field.tsx    |   2 +-
 web/src/components/ui/input.tsx               |   6 +-
 web/src/components/ui/modal/modal.tsx         |   2 +-
 .../pages/user-setting/data-source/index.tsx  |  54 ++----
 .../user-setting/mcp/edit-mcp-dialog.tsx      | 165 ++++++++++++------
 web/src/pages/user-setting/mcp/tool-card.tsx  |   2 +-
 .../components/system-setting.tsx             |   2 +-
 9 files changed, 135 insertions(+), 106 deletions(-)

diff --git a/web/src/components/originui/select-with-search.tsx b/web/src/components/originui/select-with-search.tsx
index 4b87792d7..3434ba36b 100644
--- a/web/src/components/originui/select-with-search.tsx
+++ b/web/src/components/originui/select-with-search.tsx
@@ -219,7 +219,11 @@ export const SelectWithSearch = forwardRef<
                       value={group.value}
                       disabled={group.disabled}
                       onSelect={handleSelect}
-                      className="min-h-10"
+                      className={
+                        value === group.value
+                          ? 'bg-bg-card min-h-10'
+                          : 'min-h-10'
+                      }
                     >
                       <span className="leading-none">{group.label}</span>
 
diff --git a/web/src/components/similarity-slider/index.tsx b/web/src/components/similarity-slider/index.tsx
index 73666b504..d4c07e4d3 100644
--- a/web/src/components/similarity-slider/index.tsx
+++ b/web/src/components/similarity-slider/index.tsx
@@ -159,7 +159,7 @@ export function SimilaritySliderFormField({
               <FormControl>
                 <NumberInput
                   className={cn(
-                    'h-6 w-10 p-0 text-center bg-bg-input border-border-default border text-text-secondary',
+                    'h-6 w-10 p-0 text-center bg-bg-input border-border-button border text-text-secondary',
                     '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
                     numberInputClassName,
                   )}
diff --git a/web/src/components/slider-input-form-field.tsx b/web/src/components/slider-input-form-field.tsx
index 0344c4eeb..3bfbfea82 100644
--- a/web/src/components/slider-input-form-field.tsx
+++ b/web/src/components/slider-input-form-field.tsx
@@ -82,7 +82,7 @@ export function SliderInputFormField({
             <FormControl>
               <NumberInput
                 className={cn(
-                  'h-6 w-10 p-0 text-center bg-bg-input border border-border-default text-text-secondary',
+                  'h-6 w-10 p-0 text-center bg-bg-input border border-border-button text-text-secondary',
                   '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
                   numberInputClassName,
                 )}
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
index c8f0044bf..1ba68a28d 100644
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@@ -64,7 +64,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             className,
           )}
           style={{
-            paddingLeft: !!prefix ? `${prefixWidth}px` : '',
+            paddingLeft: !!prefix && prefixWidth ? `${prefixWidth}px` : '',
             paddingRight: isPasswordInput
               ? '40px'
               : !!suffix
@@ -144,7 +144,9 @@ export interface ExpandedInputProps extends InputProps {}
 const ExpandedInput = Input;
 
 const SearchInput = (props: InputProps) => {
-  return <Input {...props} prefix={<Search className="ml-3 size-[1em]" />} />;
+  return (
+    <Input {...props} prefix={<Search className="ml-2 mr-1 size-[1em]" />} />
+  );
 };
 
 type Value = string | readonly string[] | number | undefined;
diff --git a/web/src/components/ui/modal/modal.tsx b/web/src/components/ui/modal/modal.tsx
index c40e5f90b..13de06cf8 100644
--- a/web/src/components/ui/modal/modal.tsx
+++ b/web/src/components/ui/modal/modal.tsx
@@ -200,7 +200,7 @@ const Modal: ModalType = ({
                   <DialogPrimitive.Close asChild>
                     <button
                       type="button"
-                      className="flex h-7 w-7 items-center justify-center text-text-secondary rounded-full hover:bg-bg-card focus-visible:outline-none"
+                      className="flex h-7 w-7 items-center justify-center text-text-secondary rounded-full hover:text-text-primary focus-visible:outline-none"
                       onClick={handleCancel}
                     >
                       {closeIcon}
diff --git a/web/src/pages/user-setting/data-source/index.tsx b/web/src/pages/user-setting/data-source/index.tsx
index 2ba7cecd0..004b540f7 100644
--- a/web/src/pages/user-setting/data-source/index.tsx
+++ b/web/src/pages/user-setting/data-source/index.tsx
@@ -13,50 +13,16 @@ import { AddedSourceCard } from './component/added-source-card';
 import { DataSourceInfo, DataSourceKey } from './contant';
 import { useAddDataSource, useListDataSource } from './hooks';
 import { IDataSorceInfo } from './interface';
-const dataSourceTemplates = [
-  {
-    id: DataSourceKey.CONFLUENCE,
-    name: DataSourceInfo[DataSourceKey.CONFLUENCE].name,
-    description: DataSourceInfo[DataSourceKey.CONFLUENCE].description,
-    icon: DataSourceInfo[DataSourceKey.CONFLUENCE].icon,
-  },
-  {
-    id: DataSourceKey.S3,
-    name: DataSourceInfo[DataSourceKey.S3].name,
-    description: DataSourceInfo[DataSourceKey.S3].description,
-    icon: DataSourceInfo[DataSourceKey.S3].icon,
-  },
-  {
-    id: DataSourceKey.GOOGLE_DRIVE,
-    name: DataSourceInfo[DataSourceKey.GOOGLE_DRIVE].name,
-    description: DataSourceInfo[DataSourceKey.GOOGLE_DRIVE].description,
-    icon: DataSourceInfo[DataSourceKey.GOOGLE_DRIVE].icon,
-  },
-  {
-    id: DataSourceKey.DISCORD,
-    name: DataSourceInfo[DataSourceKey.DISCORD].name,
-    description: DataSourceInfo[DataSourceKey.DISCORD].description,
-    icon: DataSourceInfo[DataSourceKey.DISCORD].icon,
-  },
-  {
-    id: DataSourceKey.NOTION,
-    name: DataSourceInfo[DataSourceKey.NOTION].name,
-    description: DataSourceInfo[DataSourceKey.NOTION].description,
-    icon: DataSourceInfo[DataSourceKey.NOTION].icon,
-  },
-  {
-    id: DataSourceKey.MOODLE,
-    name: DataSourceInfo[DataSourceKey.MOODLE].name,
-    description: DataSourceInfo[DataSourceKey.MOODLE].description,
-    icon: DataSourceInfo[DataSourceKey.MOODLE].icon,
-  },
-  {
-    id: DataSourceKey.JIRA,
-    name: DataSourceInfo[DataSourceKey.JIRA].name,
-    description: DataSourceInfo[DataSourceKey.JIRA].description,
-    icon: DataSourceInfo[DataSourceKey.JIRA].icon,
-  },
-];
+
+const dataSourceTemplates = Object.values(DataSourceKey).map((id) => {
+  return {
+    id,
+    name: DataSourceInfo[id].name,
+    description: DataSourceInfo[id].description,
+    icon: DataSourceInfo[id].icon,
+  };
+});
+
 const DataSource = () => {
   const { t } = useTranslation();
 
diff --git a/web/src/pages/user-setting/mcp/edit-mcp-dialog.tsx b/web/src/pages/user-setting/mcp/edit-mcp-dialog.tsx
index 3e33c4c2e..c60eb1ecb 100644
--- a/web/src/pages/user-setting/mcp/edit-mcp-dialog.tsx
+++ b/web/src/pages/user-setting/mcp/edit-mcp-dialog.tsx
@@ -1,14 +1,8 @@
 import { Collapse } from '@/components/collapse';
 import { Button, ButtonLoading } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
+import { DialogClose, DialogFooter } from '@/components/ui/dialog';
+import { Modal } from '@/components/ui/modal/modal';
 import { useGetMcpServer, useTestMcpServer } from '@/hooks/use-mcp-request';
 import { IModalProps } from '@/interfaces/common';
 import { IMCPTool, IMCPToolObject } from '@/interfaces/database/mcp';
@@ -114,50 +108,73 @@ export function EditMcpDialog({
   const disabled = !!!tools?.length || testLoading || fieldChanged;
 
   return (
-    <Dialog open onOpenChange={hideModal}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{id ? t('mcp.editMCP') : t('mcp.addMCP')}</DialogTitle>
-        </DialogHeader>
-        <EditMcpForm
-          onOk={handleOk}
-          form={form}
-          setFieldChanged={setFieldChanged}
-        ></EditMcpForm>
-        <Card className="bg-transparent">
-          <CardContent className="p-3">
-            <Collapse
-              title={
-                <div>
-                  {nextTools?.length || 0} {t('mcp.toolsAvailable')}
-                </div>
-              }
-              open={collapseOpen}
-              onOpenChange={setCollapseOpen}
-              rightContent={
-                <Button
-                  variant={'transparent'}
-                  form={FormId}
-                  type="submit"
-                  onClick={handleTest}
-                  className="border-none p-0 hover:bg-transparent"
-                >
-                  <RefreshCw
-                    className={cn('text-text-secondary', {
-                      'animate-spin': testLoading,
-                    })}
-                  />
-                </Button>
-              }
-            >
-              <div className="overflow-auto max-h-80 divide-y-[0.5px] divide-border-button bg-bg-card rounded-md px-2.5 scrollbar-auto">
-                {nextTools?.map((x) => (
-                  <McpToolCard key={x.name} data={x}></McpToolCard>
-                ))}
-              </div>
-            </Collapse>
-          </CardContent>
-        </Card>
+    // <Dialog open onOpenChange={hideModal}>
+    //   <DialogContent>
+    //     <DialogHeader>
+    //       <DialogTitle>{id ? t('mcp.editMCP') : t('mcp.addMCP')}</DialogTitle>
+    //     </DialogHeader>
+    //     <EditMcpForm
+    //       onOk={handleOk}
+    //       form={form}
+    //       setFieldChanged={setFieldChanged}
+    //     ></EditMcpForm>
+    //     <Card className="bg-transparent">
+    //       <CardContent className="p-3">
+    //         <Collapse
+    //           title={
+    //             <div>
+    //               {nextTools?.length || 0} {t('mcp.toolsAvailable')}
+    //             </div>
+    //           }
+    //           open={collapseOpen}
+    //           onOpenChange={setCollapseOpen}
+    //           rightContent={
+    //             <Button
+    //               variant={'transparent'}
+    //               form={FormId}
+    //               type="submit"
+    //               onClick={handleTest}
+    //               className="border-none p-0 hover:bg-transparent"
+    //             >
+    //               <RefreshCw
+    //                 className={cn('text-text-secondary', {
+    //                   'animate-spin': testLoading,
+    //                 })}
+    //               />
+    //             </Button>
+    //           }
+    //         >
+    //           <div className="overflow-auto max-h-80 divide-y-[0.5px] divide-border-button bg-bg-card rounded-md px-2.5 scrollbar-auto">
+    //             {nextTools?.map((x) => (
+    //               <McpToolCard key={x.name} data={x}></McpToolCard>
+    //             ))}
+    //           </div>
+    //         </Collapse>
+    //       </CardContent>
+    //     </Card>
+    //     <DialogFooter>
+    //       <DialogClose asChild>
+    //         <Button variant="outline">{t('common.cancel')}</Button>
+    //       </DialogClose>
+    //       <ButtonLoading
+    //         type="submit"
+    //         form={FormId}
+    //         loading={loading}
+    //         onClick={handleSave}
+    //         disabled={disabled}
+    //       >
+    //         {t('common.save')}
+    //       </ButtonLoading>
+    //     </DialogFooter>
+    //   </DialogContent>
+    // </Dialog>
+    <Modal
+      title={id ? t('mcp.editMCP') : t('mcp.addMCP')}
+      open={true}
+      onOpenChange={hideModal}
+      cancelText={t('common.cancel')}
+      okText={t('common.save')}
+      footer={
         <DialogFooter>
           <DialogClose asChild>
             <Button variant="outline">{t('common.cancel')}</Button>
@@ -172,7 +189,47 @@ export function EditMcpDialog({
             {t('common.save')}
           </ButtonLoading>
         </DialogFooter>
-      </DialogContent>
-    </Dialog>
+      }
+    >
+      <EditMcpForm
+        onOk={handleOk}
+        form={form}
+        setFieldChanged={setFieldChanged}
+      ></EditMcpForm>
+      <Card className="bg-transparent">
+        <CardContent className="p-3">
+          <Collapse
+            title={
+              <div>
+                {nextTools?.length || 0} {t('mcp.toolsAvailable')}
+              </div>
+            }
+            open={collapseOpen}
+            onOpenChange={setCollapseOpen}
+            rightContent={
+              <Button
+                variant={'transparent'}
+                form={FormId}
+                type="submit"
+                onClick={handleTest}
+                className="border-none p-0 text-text-secondary hover:bg-transparent hover:text-text-primary"
+              >
+                <RefreshCw
+                  className={cn({
+                    'animate-spin': testLoading,
+                  })}
+                />
+              </Button>
+            }
+          >
+            <div className="overflow-auto max-h-80 divide-y-[0.5px] divide-border-button bg-bg-card rounded-md px-2.5 scrollbar-auto">
+              {nextTools?.map((x) => (
+                <McpToolCard key={x.name} data={x}></McpToolCard>
+              ))}
+            </div>
+          </Collapse>
+        </CardContent>
+      </Card>
+    </Modal>
   );
 }
diff --git a/web/src/pages/user-setting/mcp/tool-card.tsx b/web/src/pages/user-setting/mcp/tool-card.tsx
index 123b4a611..fa82446db 100644
--- a/web/src/pages/user-setting/mcp/tool-card.tsx
+++ b/web/src/pages/user-setting/mcp/tool-card.tsx
@@ -7,7 +7,7 @@ export type McpToolCardProps = {
 export function McpToolCard({ data }: McpToolCardProps) {
   return (
     <section className="group py-2.5">
-      <h3 className="text-sm font-semibold line-clamp-1 pb-2">{data.name}</h3>
+      <div className="text-sm font-normal line-clamp-1 pb-2">{data.name}</div>
       <div className="text-xs font-normal text-text-secondary">
         {data.description}
       </div>
diff --git a/web/src/pages/user-setting/setting-model/components/system-setting.tsx b/web/src/pages/user-setting/setting-model/components/system-setting.tsx
index 97906a421..398804fcd 100644
--- a/web/src/pages/user-setting/setting-model/components/system-setting.tsx
+++ b/web/src/pages/user-setting/setting-model/components/system-setting.tsx
@@ -139,7 +139,7 @@ const SystemSetting = ({ onOk, loading }: IProps) => {
   }) => {
     return (
       <div className="flex gap-3">
-        <label className="block text-sm font-medium text-text-secondary mb-1 w-1/4">
+        <label className="block text-sm font-normal text-text-secondary mb-1 w-1/4">
           {isRequired && <span className="text-red-500">*</span>}
           {label}
           {tooltip && (