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

### What problem does this PR solve?

Fix: Modify the personal center style

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/dynamic-form.tsx

@@ -496,7 +496,7 @@ const DynamicForm = {
                     <Textarea
                       {...finalFieldProps}
                       placeholder={field.placeholder}
-                      className="resize-none"
+                      // className="resize-none"
                     />
                   );
                 }}
@@ -544,7 +544,7 @@ const DynamicForm = {
                 render={({ field: formField }) => (
                   <FormItem
                     className={cn('flex items-center w-full', {
-                      'flex-row items-start space-x-3 space-y-0':
+                      'flex-row items-center space-x-3 space-y-0':
                         !field.horizontal,
                     })}
                   >

web/src/components/originui/password-input.tsx

@@ -2,7 +2,6 @@
 
 'use client';
 
-import { EyeIcon, EyeOffIcon } from 'lucide-react';
 import React, { useId, useState } from 'react';
 import { Input, InputProps } from '../ui/input';
 
@@ -33,11 +32,11 @@ export default React.forwardRef<HTMLInputElement, InputProps>(
             aria-pressed={isVisible}
             aria-controls="password"
           >
-            {isVisible ? (
+            {/* {isVisible ? (
               <EyeOffIcon size={16} aria-hidden="true" />
             ) : (
               <EyeIcon size={16} aria-hidden="true" />
-            )}
+            )} */}
           </button>
         </div>
       </div>

web/src/components/originui/select-with-search.tsx

@@ -140,7 +140,7 @@ export const SelectWithSearch = forwardRef<
             ref={ref}
             disabled={disabled}
             className={cn(
-              '!bg-bg-input hover:bg-background border-input w-full  justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px] [&_svg]:pointer-events-auto',
+              '!bg-bg-input hover:bg-background border-border-button w-full  justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px] [&_svg]:pointer-events-auto',
               triggerClassName,
             )}
           >
@@ -166,7 +166,7 @@ export const SelectWithSearch = forwardRef<
               )}
               <ChevronDownIcon
                 size={16}
-                className="text-muted-foreground/80 shrink-0 ml-2"
+                className="text-text-disabled shrink-0 ml-2"
                 aria-hidden="true"
               />
             </div>

web/src/components/ui/input.tsx

@@ -41,7 +41,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={isPasswordInput && showPassword ? 'text' : type}
         className={cn(
           'peer/input',
-          'flex h-8 w-full rounded-md border-0.5 border-input bg-bg-input px-3 py-2 outline-none text-sm text-text-primary',
+          'flex h-8 w-full rounded-md border-0.5 border-border-button bg-bg-input px-3 py-2 outline-none text-sm text-text-primary',
           'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-disabled',
           'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary',
           'disabled:cursor-not-allowed disabled:opacity-50 transition-colors',

web/src/components/ui/textarea.tsx

@@ -54,7 +54,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full bg-bg-input rounded-md border border-input px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm overflow-hidden',
+          'flex min-h-[80px] w-full bg-bg-input rounded-md border border-input px-3 py-2 text-base ring-offset-background placeholder:text-text-disabled focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm overflow-hidden',
           className,
         )}
         rows={autoSize?.minRows ?? props.rows ?? undefined}

web/src/components/ui/tooltip.tsx

@@ -4,7 +4,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
-import { Info } from 'lucide-react';
+import { CircleQuestionMark } from 'lucide-react';
 
 const TooltipProvider = TooltipPrimitive.Provider;
 
@@ -39,7 +39,7 @@ export const FormTooltip = ({ tooltip }: { tooltip: React.ReactNode }) => {
           e.preventDefault(); // Prevent clicking the tooltip from triggering form save
         }}
       >
-        <Info className="size-3 ml-2" />
+        <CircleQuestionMark className="size-3 ml-2" />
       </TooltipTrigger>
       <TooltipContent>{tooltip}</TooltipContent>
     </Tooltip>

web/src/hooks/llm-hooks.tsx

@@ -61,9 +61,10 @@ function buildLlmOptionsWithIcon(x: IThirdOAIModel) {
       <div className="flex items-center justify-center gap-6">
         <LlmIcon
           name={getLLMIconName(x.fid, x.llm_name)}
-          width={26}
+          width={24}
-          height={26}
+          height={24}
           size={'small'}
+          imgClass="size-6"
         />
         <span>{getRealModelName(x.llm_name)}</span>
       </div>

web/src/locales/en.ts

@@ -1,6 +1,7 @@
 export default {
   translation: {
     common: {
+      confirm: 'Confirm',
       back: 'Back',
       noResults: 'No results.',
       selectPlaceholder: 'select value',
@@ -694,6 +695,7 @@ 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: {
+      edit: 'Edit',
       cropTip:
         'Drag the selection area to choose the cropping position of the image, and scroll to zoom in/out',
       cropImage: 'Crop image',

web/src/locales/zh.ts

@@ -1,6 +1,7 @@
 export default {
   translation: {
     common: {
+      confirm: '确定',
       back: '返回',
       noResults: '无结果。',
       selectPlaceholder: '请选择',
@@ -684,6 +685,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       tocEnhanceTip: `解析文档时生成了目录信息（见General方法的‘启用目录抽取’），让大模型返回和用户问题相关的目录项，从而利用目录项拿到相关chunk，对这些chunk在排序中进行加权。这种方法来源于模仿人类查询书本中知识的行为逻辑`,
     },
     setting: {
+      edit: '编辑',
       cropTip: '拖动选区可以选择要图片的裁剪位置，滚动可以放大/缩小选区',
       cropImage: '剪裁图片',
       selectModelPlaceholder: '请选择模型',

web/src/pages/user-setting/data-source/add-datasource-modal.tsx

@@ -40,17 +40,17 @@ const AddDataSourceModal = ({
   return (
     <Modal
       title={
-        <div className="flex flex-col">
+        <div className="flex flex-col gap-4">
-          {sourceData?.icon}
+          <div className="size-6">{sourceData?.icon}</div>
           {t('setting.addDataSourceModalTital', { name: sourceData?.name })}
         </div>
       }
       open={visible || false}
       onOpenChange={(open) => !open && hideModal?.()}
       // onOk={() => handleOk()}
-      okText={t('common.ok')}
+      okText={t('common.confirm')}
       cancelText={t('common.cancel')}
-      showfooter={false}
+      footer={<div className="p-4"></div>}
     >
       <DynamicForm.Root
         fields={fields}
@@ -63,7 +63,7 @@ const AddDataSourceModal = ({
           ] as FieldValues
         }
       >
-        <div className="flex items-center justify-end w-full gap-2 py-4">
+        <div className=" absolute bottom-0 right-0 left-0 flex items-center justify-end w-full gap-2 py-6 px-6">
           <DynamicForm.CancelButton
             handleCancel={() => {
               hideModal?.();
@@ -71,7 +71,7 @@ const AddDataSourceModal = ({
           />
           <DynamicForm.SavingButton
             submitLoading={loading || false}
-            buttonText={t('common.ok')}
+            buttonText={t('common.confirm')}
             submitFunc={(values: FieldValues) => {
               handleOk(values);
             }}

web/src/pages/user-setting/data-source/component/added-source-card.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { Settings, Trash2 } from 'lucide-react';
@@ -32,17 +33,19 @@ export const AddedSourceCard = (props: IAddedSourceCardProps) => {
           >
             <div className="text-sm text-text-secondary ">{item.name}</div>
             <div className="text-sm text-text-secondary  flex gap-2">
-              <Settings
+              <Button
-                className="cursor-pointer"
+                variant={'ghost'}
-                size={14}
+                className="rounded-lg px-2 py-1 bg-transparent hover:bg-bg-card"
                 onClick={() => {
                   toDetail(item.id);
                 }}
-              />
+              >
+                <Settings size={14} />
+              </Button>
               {/* <ConfirmDeleteDialog onOk={() => handleDelete(item)}> */}
-              <Trash2
+              <Button
-                className="cursor-pointer"
+                variant={'ghost'}
-                size={14}
+                className="rounded-lg px-2 py-1 bg-transparent hover:bg-state-error-5 hover:text-state-error"
                 onClick={() =>
                   delSourceModal({
                     data: item,
@@ -51,7 +54,9 @@ export const AddedSourceCard = (props: IAddedSourceCardProps) => {
                     },
                   })
                 }
-              />
+              >
+                <Trash2 className="cursor-pointer" size={14} />
+              </Button>
               {/* </ConfirmDeleteDialog> */}
             </div>
           </div>

web/src/pages/user-setting/mcp/index.tsx

@@ -71,6 +71,7 @@ export default function McpServer() {
                 className="w-40"
                 value={searchString}
                 onChange={handleInputChange}
+                placeholder={t('common.search')}
               ></SearchInput>
               <Button variant={'secondary'} onClick={switchSelectionMode}>
                 {isSelectionMode ? (

web/src/pages/user-setting/mcp/mcp-operation.tsx

@@ -1,5 +1,4 @@
 import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
-import { RAGFlowTooltip } from '@/components/ui/tooltip';
 import { useDeleteMcpServer } from '@/hooks/use-mcp-request';
 import { PenLine, Trash2, Upload } from 'lucide-react';
 import { MouseEventHandler, useCallback } from 'react';
@@ -20,24 +19,24 @@ export function McpOperation({
   }, [deleteMcpServer, mcpId]);
 
   return (
-    <div className="hidden gap-3  group-hover:flex text-text-secondary">
+    <div className="hidden gap-1  group-hover:flex text-text-secondary">
-      <RAGFlowTooltip tooltip={t('mcp.export')}>
+      {/* <RAGFlowTooltip tooltip={t('mcp.export')}> */}
-        <Upload
+      <Upload
-          className="size-3 cursor-pointer"
+        className="size-5 cursor-pointer p-1 rounded-sm hover:text-text-primary hover:bg-bg-card"
-          onClick={handleExportMcpJson([mcpId])}
+        onClick={handleExportMcpJson([mcpId])}
-        />
+      />
-      </RAGFlowTooltip>
+      {/* </RAGFlowTooltip>
-      <RAGFlowTooltip tooltip={t('common.edit')}>
+      <RAGFlowTooltip tooltip={t('common.edit')}> */}
-        <PenLine
+      <PenLine
-          className="size-3 cursor-pointer"
+        className="size-5 cursor-pointer p-1 rounded-sm hover:text-text-primary hover:bg-bg-card"
-          onClick={showEditModal(mcpId)}
+        onClick={showEditModal(mcpId)}
-        />
+      />
-      </RAGFlowTooltip>
+      {/* </RAGFlowTooltip>
-      <RAGFlowTooltip tooltip={t('common.delete')}>
+      <RAGFlowTooltip tooltip={t('common.delete')}> */}
-        <ConfirmDeleteDialog onOk={handleDelete}>
+      <ConfirmDeleteDialog onOk={handleDelete}>
-          <Trash2 className="size-3 cursor-pointer" />
+        <Trash2 className="size-5 cursor-pointer p-1 rounded-sm hover:text-state-error hover:bg-state-error-5" />
-        </ConfirmDeleteDialog>
+      </ConfirmDeleteDialog>
-      </RAGFlowTooltip>
+      {/* </RAGFlowTooltip> */}
     </div>
   );
 }

web/src/pages/user-setting/profile/index.tsx

@@ -143,12 +143,12 @@ const ProfilePage: FC = () => {
               {profile.userName}
             </div>
             <Button
-              variant={'secondary'}
+              variant={'ghost'}
               type="button"
               onClick={() => handleEditClick(EditType.editName)}
-              className="text-sm text-text-secondary flex gap-1 px-1"
+              className="text-sm text-text-secondary flex gap-1 px-1 border border-border-button"
             >
-              <PenLine size={12} /> Edit
+              <PenLine size={12} /> {t('edit')}
             </Button>
           </div>
         </div>
@@ -175,12 +175,12 @@ const ProfilePage: FC = () => {
               {profile.timeZone}
             </div>
             <Button
-              variant={'secondary'}
+              variant={'ghost'}
               type="button"
               onClick={() => handleEditClick(EditType.editTimeZone)}
-              className="text-sm text-text-secondary flex gap-1 px-1"
+              className="text-sm text-text-secondary flex gap-1 px-1 border border-border-button"
             >
-              <PenLine size={12} /> Edit
+              <PenLine size={12} /> {t('edit')}
             </Button>
           </div>
         </div>
@@ -208,12 +208,12 @@ const ProfilePage: FC = () => {
               {profile.currPasswd ? '********' : ''}
             </div>
             <Button
-              variant={'secondary'}
+              variant={'ghost'}
               type="button"
               onClick={() => handleEditClick(EditType.editPassword)}
-              className="text-sm text-text-secondary flex gap-1 px-1"
+              className="text-sm text-text-secondary flex gap-1 px-1 border border-border-button"
             >
-              <PenLine size={12} /> Edit
+              <PenLine size={12} /> {t('edit')}
             </Button>
           </div>
         </div>
@@ -304,7 +304,7 @@ const ProfilePage: FC = () => {
                         <div className="flex flex-col w-full gap-2">
                           <FormLabel
                             required
-                            className="text-sm flex justify-between text-text-secondary whitespace-nowrap"
+                            className="text-sm flex text-text-secondary whitespace-nowrap"
                           >
                             {t('currentPassword')}
                           </FormLabel>

web/src/pages/user-setting/setting-model/components/modal-card.tsx

@@ -67,21 +67,22 @@ export const ModelProviderCard: FC<IModelCardProps> = ({
   return (
     <div className={`w-full rounded-lg border border-border-button`}>
       {/* Header */}
-      <div className="flex h-16  items-center justify-between p-4 cursor-pointer transition-colors">
+      <div className="flex h-16  items-center justify-between p-4 cursor-pointer transition-colors text-text-secondary">
         <div className="flex items-center space-x-3">
           <LlmIcon name={item.name} />
           <div>
-            <h3 className="font-medium">{item.name}</h3>
+            <div className="font-medium text-xl">{item.name}</div>
           </div>
         </div>
 
         <div className="flex items-center space-x-2">
           <Button
+            variant={'ghost'}
             onClick={(e) => {
               e.stopPropagation();
               handleApiKeyClick();
             }}
-            className="px-3 py-1 text-sm bg-bg-input hover:bg-bg-input text-text-primary  rounded-md transition-colors flex items-center space-x-1"
+            className="px-3 py-1 text-sm    rounded-md transition-colors flex items-center space-x-1 border border-border-default"
           >
             <SettingOutlined />
             <span>
@@ -90,23 +91,24 @@ export const ModelProviderCard: FC<IModelCardProps> = ({
           </Button>
 
           <Button
+            variant={'ghost'}
             onClick={(e) => {
               e.stopPropagation();
               handleShowMoreClick();
             }}
-            className="px-3 py-1 text-sm bg-bg-input hover:bg-bg-input text-text-primary rounded-md transition-colors flex items-center space-x-1"
+            className="px-3 py-1 text-sm   rounded-md transition-colors flex items-center space-x-1 border border-border-default"
           >
             <span>{visible ? t('hideModels') : t('showMoreModels')}</span>
             {!visible ? <ChevronsDown /> : <ChevronsUp />}
           </Button>
 
           <Button
-            variant={'secondary'}
+            variant={'ghost'}
             onClick={(e) => {
               e.stopPropagation();
               handleDeleteFactory();
             }}
-            className="p-1 text-text-primary hover:text-state-error transition-colors"
+            className="  hover:text-state-error hover:bg-state-error-5 transition-colors border border-border-default"
           >
             <Trash2 />
           </Button>

web/src/pages/user-setting/setting-model/components/system-setting.tsx

@@ -27,7 +27,6 @@ interface IProps {
 const SystemSetting = ({ onOk, loading }: IProps) => {
   const { systemSetting: initialValues, allOptions } =
     useFetchSystemModelSettingOnMount();
-  const { t: tcommon } = useTranslate('common');
   const { t } = useTranslate('setting');
 
   const [formData, setFormData] = useState({
@@ -149,7 +148,7 @@ const SystemSetting = ({ onOk, loading }: IProps) => {
               <TooltipTrigger>
                 <CircleQuestionMark
                   size={12}
-                  className="ml-1 text-text-disabled text-xs"
+                  className="ml-1 text-text-secondary text-xs"
                 />
               </TooltipTrigger>
             </Tooltip>

web/src/pages/user-setting/setting-model/components/un-add-model.tsx

@@ -1,6 +1,7 @@
 // src/components/AvailableModels.tsx
 import { LlmIcon } from '@/components/svg-icon';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useSelectLlmList } from '@/hooks/llm-hooks';
 import { Plus, Search } from 'lucide-react';
@@ -77,12 +78,12 @@ export const AvailableModels: FC<{
       {/* Search Bar */}
       <div className="mb-6">
         <div className="relative">
-          <input
+          <Input
             type="text"
             placeholder={t('search')}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full px-4 py-3 pl-10 bg-bg-input border border-border-default rounded-lg focus:outline-none focus:ring-1 focus:ring-border-button transition-colors"
+            className="w-full px-4 py-2 pl-10 bg-bg-input border border-border-default rounded-lg focus:outline-none focus:ring-1 focus:ring-border-button transition-colors"
           />
           <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-text-secondary" />
         </div>

web/src/pages/user-setting/setting-team/tenant-table.tsx

@@ -72,7 +72,7 @@ const TenantTable = ({ searchTerm }: { searchTerm: string }) => {
     <div className="rounded-lg bg-bg-input scrollbar-auto overflow-hidden border border-border-default">
       <Table rootClassName="rounded-lg">
         <TableHeader className="bg-bg-title">
-          <TableRow>
+          <TableRow className="hover:bg-bg-title">
             <TableHead className="h-12 px-4">{t('common.name')}</TableHead>
             <TableHead
               className="h-12 px-4 cursor-pointer"

web/src/pages/user-setting/setting-team/user-table.tsx

@@ -78,7 +78,7 @@ const UserTable = ({ searchUser }: { searchUser: string }) => {
     <div className="rounded-lg bg-bg-input scrollbar-auto overflow-hidden border border-border-default">
       <Table rootClassName="rounded-lg">
         <TableHeader className="bg-bg-title">
-          <TableRow>
+          <TableRow className="hover:bg-bg-title">
             <TableHead className="h-12 px-4">{t('common.name')}</TableHead>
             <TableHead
               className="h-12 px-4 cursor-pointer"