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)
This commit is contained in:
chanx
2025-11-18 20:07:17 +08:00
committed by GitHub
parent 8cd4882596
commit 50bc53a1f5
19 changed files with 79 additions and 68 deletions

View File

@ -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,
})}
>

View File

@ -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>

View File

@ -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>

View File

@ -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',

View File

@ -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}

View File

@ -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>

View File

@ -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}
height={26}
width={24}
height={24}
size={'small'}
imgClass="size-6"
/>
<span>{getRealModelName(x.llm_name)}</span>
</div>

View File

@ -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',

View File

@ -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: '请选择模型',

View File

@ -40,17 +40,17 @@ const AddDataSourceModal = ({
return (
<Modal
title={
<div className="flex flex-col">
{sourceData?.icon}
<div className="flex flex-col gap-4">
<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);
}}

View File

@ -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
className="cursor-pointer"
size={14}
<Button
variant={'ghost'}
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
className="cursor-pointer"
size={14}
<Button
variant={'ghost'}
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>

View File

@ -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 ? (

View File

@ -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">
<RAGFlowTooltip tooltip={t('mcp.export')}>
<Upload
className="size-3 cursor-pointer"
onClick={handleExportMcpJson([mcpId])}
/>
</RAGFlowTooltip>
<RAGFlowTooltip tooltip={t('common.edit')}>
<PenLine
className="size-3 cursor-pointer"
onClick={showEditModal(mcpId)}
/>
</RAGFlowTooltip>
<RAGFlowTooltip tooltip={t('common.delete')}>
<ConfirmDeleteDialog onOk={handleDelete}>
<Trash2 className="size-3 cursor-pointer" />
</ConfirmDeleteDialog>
</RAGFlowTooltip>
<div className="hidden gap-1 group-hover:flex text-text-secondary">
{/* <RAGFlowTooltip tooltip={t('mcp.export')}> */}
<Upload
className="size-5 cursor-pointer p-1 rounded-sm hover:text-text-primary hover:bg-bg-card"
onClick={handleExportMcpJson([mcpId])}
/>
{/* </RAGFlowTooltip>
<RAGFlowTooltip tooltip={t('common.edit')}> */}
<PenLine
className="size-5 cursor-pointer p-1 rounded-sm hover:text-text-primary hover:bg-bg-card"
onClick={showEditModal(mcpId)}
/>
{/* </RAGFlowTooltip>
<RAGFlowTooltip tooltip={t('common.delete')}> */}
<ConfirmDeleteDialog onOk={handleDelete}>
<Trash2 className="size-5 cursor-pointer p-1 rounded-sm hover:text-state-error hover:bg-state-error-5" />
</ConfirmDeleteDialog>
{/* </RAGFlowTooltip> */}
</div>
);
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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"

View File

@ -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"