Fix: Modify the style of your personal center #10703 (#11487)

### What problem does this PR solve? Modify the style of your personal center Add resizable component ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
2025-12-25 08:06:48 +08:00 · 2025-11-25 11:17:39 +08:00
parent bcd70affb5
commit af72e8dc33
12 changed files with 201 additions and 112 deletions
--- a/web/src/pages/user-setting/data-source/index.tsx
+++ b/web/src/pages/user-setting/data-source/index.tsx
@ -13,56 +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,
-  },
-  {
-    id: DataSourceKey.DROPBOX,
-    name: DataSourceInfo[DataSourceKey.DROPBOX].name,
-    description: DataSourceInfo[DataSourceKey.DROPBOX].description,
-    icon: DataSourceInfo[DataSourceKey.DROPBOX].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();

--- 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>
  );
 }
--- 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>
--- 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 && (