pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-22 22:26:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Replace color variables according to design draft #3221 (#9305)

Browse Source 
### What problem does this PR solve?

Feat: Replace color variables according to design draft #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-08-07 15:19:45 +08:00
committed by GitHub
parent 23062cb27a
commit dc48c3863d
57 changed files with 93 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/pages/agent/canvas/edge/index.tsx
View File

@ -90,7 +90,7 @@ function InnerButtonEdge({
path={edgePath}
markerEnd={markerEnd}
style={{ ...style, ...selectedStyle, ...highlightStyle }}
className="text-text-sub-title"
className="text-text-secondary"
/>
<EdgeLabelRenderer>
@ -108,7 +108,7 @@ function InnerButtonEdge({
>
<button
className={cn(
'size-3.5 border border-text-delete-red text-text-delete-red rounded-full leading-none',
'size-3.5 border border-state-error text-state-error rounded-full leading-none',
'invisible',
{ visible },
)}

4
web/src/pages/agent/canvas/node/agent-node.tsx
View File

@ -89,7 +89,7 @@ function InnerAgentNode({
{(isGotoMethod ||
exceptionMethod === AgentExceptionMethod.Comment) && (
<div className="bg-bg-card rounded-sm p-1 flex justify-between gap-2">
<span className="text-text-sub-title">On Failure</span>
<span className="text-text-secondary">On Failure</span>
<span className="truncate flex-1 text-right">
{t(`flow.${exceptionMethod}`)}
</span>
@ -101,7 +101,7 @@ function InnerAgentNode({
type="source"
position={Position.Right}
isConnectable={isConnectable}
className="!bg-text-delete-red"
className="!bg-state-error"
style={{ ...RightHandleStyle, top: 94 }}
nodeId={id}
id={NodeHandleId.AgentException}

2
web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx
View File

@ -68,7 +68,7 @@ function AccordionOperators() {
return (
<Accordion
type="multiple"
className="px-2 text-text-title max-h-[45vh] overflow-auto"
className="px-2 text-text-primary max-h-[45vh] overflow-auto"
defaultValue={['item-1', 'item-2', 'item-3', 'item-4', 'item-5']}
>
<AccordionItem value="item-1">

2
web/src/pages/agent/canvas/node/handle.tsx
View File

@ -28,7 +28,7 @@ export function CommonHandle({
<Handle
{...props}
className={cn(
'inline-flex justify-center items-center !bg-background-checked !size-4 !rounded-sm !border-none ',
'inline-flex justify-center items-center !bg-accent-primary !size-4 !rounded-sm !border-none ',
className,
)}
onClick={(e) => {

2
web/src/pages/agent/canvas/node/node-wrapper.tsx
View File

@ -8,7 +8,7 @@ export function NodeWrapper({ children, className, selected }: IProps) {
<section
className={cn(
'bg-text-title-invert p-2.5 rounded-sm w-[200px] text-xs',
{ 'border border-background-checked': selected },
{ 'border border-accent-primary': selected },
className,
)}
>

6
web/src/pages/agent/canvas/node/switch-node.tsx
View File

@ -48,7 +48,7 @@ const ConditionBlock = ({
{items.map((x, idx) => (
<div key={idx}>
<section className="flex justify-between gap-2 items-center text-xs p-1">
<div className="flex-1 truncate text-background-checked">
<div className="flex-1 truncate text-accent-primary">
{getLabel(x?.cpn_id)}
</div>
<span>{renderOperatorIcon(x?.operator)}</span>
@ -81,11 +81,11 @@ function InnerSwitchNode({ id, data, selected }: NodeProps<ISwitchNode>) {
<section className="flex flex-col text-xs">
<div className="text-right">
<span>{getConditionKey(idx, positions.length)}</span>
<div className="text-text-sub-title">
<div className="text-text-secondary">
{idx < positions.length - 1 && position.text}
</div>
</div>
<span className="text-background-checked">
<span className="text-accent-primary">
{idx < positions.length - 1 &&
position.condition?.logical_operator?.toUpperCase()}
</span>

4
web/src/pages/agent/embed-dialog/index.tsx
View File

@ -100,7 +100,7 @@ function EmbedDialog({
{t('embedIntoSite', { keyPrefix: 'common' })}
</DialogTitle>
</DialogHeader>
<section className="w-full overflow-auto space-y-5 text-sm text-text-sub-title">
<section className="w-full overflow-auto space-y-5 text-sm text-text-secondary">
<Form {...form}>
<form className="space-y-5">
<FormField
@ -150,7 +150,7 @@ function EmbedDialog({
<CopyToClipboard text={token}></CopyToClipboard>
</div>
<a
className="cursor-pointer text-background-checked inline-block"
className="cursor-pointer text-accent-primary inline-block"
href={
isAgent
? 'https://ragflow.io/docs/dev/http_api_reference#create-session-with-agent'

2
web/src/pages/agent/form-sheet/single-debug-sheet/index.tsx
View File

@ -64,7 +64,7 @@ const SingleDebugSheet = ({
{!isEmpty(data) ? (
<div
className={cn('mt-4 rounded-md border', {
[`border-text-delete-red`]: !isEmpty(data._ERROR),
[`border-state-error`]: !isEmpty(data._ERROR),
})}
>
<div className="flex justify-between p-2">

6
web/src/pages/agent/form/agent-form/agent-tools.tsx
View File

@ -71,7 +71,7 @@ function ActionButton<T>({ deleteRecord, record, edit }: ActionButtonProps<T>) {
}, [deleteRecord, record]);
return (
<div className="flex items-center gap-2 text-text-sub-title">
<div className="flex items-center gap-2 text-text-secondary">
<PencilLine
className="size-4 cursor-pointer"
data-tool={record}
@ -106,7 +106,7 @@ export function AgentTools() {
return (
<section className="space-y-2.5">
<span className="text-text-sub-title">Tools</span>
<span className="text-text-secondary">Tools</span>
<ul className="space-y-2">
{toolNames.map((x) => (
<ToolCard key={x}>
@ -160,7 +160,7 @@ export function Agents({ node }: INextOperatorForm) {
return (
<section className="space-y-2.5">
<span className="text-text-sub-title">Agents</span>
<span className="text-text-secondary">Agents</span>
<ul className="space-y-2">
{subBottomAgentNodeIds.map((id) => {
const currentNode = getNode(id);

4
web/src/pages/agent/form/code-form/next-variable.tsx
View File

@ -66,7 +66,7 @@ export function DynamicVariableForm({ name = 'arguments', isOutputs }: IProps) {
</FormItem>
)}
/>
<Separator className="w-3 text-text-sub-title" />
<Separator className="w-3 text-text-secondary" />
<FormField
control={form.control}
name={`${name}.${index}.type`}
@ -104,7 +104,7 @@ export function DynamicVariableForm({ name = 'arguments', isOutputs }: IProps) {
}
export function VariableTitle({ title }: { title: ReactNode }) {
return <div className="font-medium text-text-title pb-2">{title}</div>;
return <div className="font-medium text-text-primary pb-2">{title}</div>;
}
export function DynamicInputVariable({

4
web/src/pages/agent/form/components/output.tsx
View File

@ -22,9 +22,9 @@ export function Output({ list }: OutputProps) {
{list.map((x, idx) => (
<li
key={idx}
className="bg-background-highlight text-background-checked rounded-sm px-2 py-1"
className="bg-background-highlight text-accent-primary rounded-sm px-2 py-1"
>
{x.title}: <span className="text-text-sub-title">{x.type}</span>
{x.title}: <span className="text-text-secondary">{x.type}</span>
</li>
))}
</ul>

2
web/src/pages/agent/form/components/prompt-editor/index.tsx
View File

@ -160,7 +160,7 @@ export function PromptEditor({
placeholder={
<div
className={cn(
'absolute top-1 left-2 text-text-sub-title pointer-events-none',
'absolute top-1 left-2 text-text-secondary pointer-events-none',
{
'truncate w-[90%]': !multiLine,
},

4
web/src/pages/agent/form/iteration-form/dynamic-output.tsx
View File

@ -75,7 +75,7 @@ export function DynamicOutputForm({ node }: IProps) {
</FormItem>
)}
/>
<Separator className="w-3 text-text-sub-title" />
<Separator className="w-3 text-text-secondary" />
<FormField
control={form.control}
name={`${name}.${index}.ref`}
@ -114,7 +114,7 @@ export function DynamicOutputForm({ node }: IProps) {
}
export function VariableTitle({ title }: { title: ReactNode }) {
return <div className="font-medium text-text-title pb-2">{title}</div>;
return <div className="font-medium text-text-primary pb-2">{title}</div>;
}
export function DynamicOutput({ node }: IProps) {

4
web/src/pages/agent/form/switch-form/index.tsx
View File

@ -143,7 +143,7 @@ function ConditionCards({
<SelectWithSearch
{...field}
options={finalOptions}
triggerClassName="text-background-checked bg-transparent border-none truncate"
triggerClassName="text-accent-primary bg-transparent border-none truncate"
></SelectWithSearch>
</FormControl>
<FormMessage />
@ -260,7 +260,7 @@ function SwitchForm({ node }: IOperatorForm) {
<div className="flex justify-between items-center">
<section>
<span>{index === 0 ? 'IF' : 'ELSEIF'}</span>
<div className="text-text-sub-title">Case {index + 1}</div>
<div className="text-text-secondary">Case {index + 1}</div>
</section>
{index !== 0 && (
<Button

2
web/src/pages/agent/form/tool-form/mcp-form/index.tsx
View File

@ -46,7 +46,7 @@ function MCPForm() {
</CardHeader>
<CardContent className="p-0 text-sm">
<span className="pr-2"> URL:</span>
<a href={data.url} className="text-background-checked">
<a href={data.url} className="text-accent-primary">
{data.url}
</a>
</CardContent>

2
web/src/pages/agent/form/tool-form/mcp-form/mcp-card.tsx
View File

@ -12,7 +12,7 @@ export function MCPCard({
{children}
<section>
<div className="pb-3 text-sm">{data.name}</div>
<p className="text-text-sub-title text-xs">{data.description}</p>
<p className="text-text-secondary text-xs">{data.description}</p>
</section>
</CardContent>
</Card>

2
web/src/pages/agent/index.tsx
View File

@ -114,7 +114,7 @@ export default function Agent() {
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<div className="text-xs text-text-sub-title translate-y-3">
<div className="text-xs text-text-secondary translate-y-3">
{t('flow.autosaved')} {time}
</div>
</section>

4
web/src/pages/agent/log-sheet/toolTimelineItem.tsx
View File

@ -157,13 +157,13 @@ const ToolTimelineItem = ({
] ?? changeToolName(tool.tool_name)}
</span>
)}
<span className="text-text-sub-title text-xs">
<span className="text-text-secondary text-xs">
{/* 0:00
{x.data.elapsed_time?.toString().slice(0, 6)} */}
</span>
<span
className={cn(
'border-background -end-1 -top-1 size-2 rounded-full bg-dot-green',
'border-background -end-1 -top-1 size-2 rounded-full bg-state--success',
)}
>
<span className="sr-only">Online</span>

8
web/src/pages/agent/log-sheet/workFlowTimeline.tsx
View File

@ -211,7 +211,7 @@ export const WorkFlowTimeline = ({
>
<TimelineHeader>
<TimelineSeparator
className="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5 top-6 bg-background-checked"
className="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5 top-6 bg-accent-primary"
style={{
background:
x.data.component_type === 'Agent'
@ -271,14 +271,14 @@ export const WorkFlowTimeline = ({
] ??
nodeLabel)}
</span>
<span className="text-text-sub-title text-xs">
<span className="text-text-secondary text-xs">
{x.data.elapsed_time?.toString().slice(0, 6)}
</span>
<span
className={cn(
'border-background -end-1 -top-1 size-2 rounded-full',
{ 'bg-dot-green': isEmpty(x.data.error) },
{ 'bg-dot-red': !isEmpty(x.data.error) },
{ 'bg-state--success': isEmpty(x.data.error) },
{ 'bg-state--error': !isEmpty(x.data.error) },
)}
>
<span className="sr-only">Online</span>

2
web/src/pages/agent/operator-icon.tsx
View File

@ -64,7 +64,7 @@ const OperatorIcon = ({ name, className }: IProps) => {
if (name === Operator.Begin) {
return (
<div className="inline-block p-1 bg-background-checked rounded-sm">
<div className="inline-block p-1 bg-accent-primary rounded-sm">
<HousePlus className="rounded size-3" />
</div>
);

2
web/src/pages/agent/version-dialog/index.tsx
View File

@ -92,7 +92,7 @@ export function VersionDialog({
<section className="flex justify-between">
<div>
<div className="pb-1 truncate">{agent?.title}</div>
<p className="text-text-sub-title text-xs">
<p className="text-text-secondary text-xs">
Created: {formatDate(agent?.create_date)}
</p>
</div>

4
web/src/pages/agents/agent-card.tsx
View File

@ -37,8 +37,8 @@ export function AgentCard({ data, showAgentRenameModal }: DatasetCardProps) {
<h3 className="text-lg font-semibold mb-2 line-clamp-1">
{data.title}
</h3>
<p className="text-xs text-text-sub-title">{data.description}</p>
<p className="text-xs text-text-sub-title">
<p className="text-xs text-text-secondary">{data.description}</p>
<p className="text-xs text-text-secondary">
{formatDate(data.update_time)}
</p>
</div>

2
web/src/pages/agents/agent-dropdown.tsx
View File

@ -47,7 +47,7 @@ export function AgentDropdown({
<DropdownMenuSeparator />
<ConfirmDeleteDialog onOk={handleDelete}>
<DropdownMenuItem
className="text-text-delete-red"
className="text-state-error"
onSelect={(e) => {
e.preventDefault();
}}

2
web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/document-preview/csv-preview.tsx
View File

@ -84,7 +84,7 @@ const CSVFileViewer: React.FC<FileViewerProps> = () => {
{data.headers.map((header, index) => (
<th
key={`header-${index}`}
className="px-6 py-3 text-left text-sm font-medium text-text-title"
className="px-6 py-3 text-left text-sm font-medium text-text-primary"
>
{header}
</th>

2
web/src/pages/dataset/dataset-title.tsx
View File

@ -9,7 +9,7 @@ export function TopTitle({ title, description }: TopTitleProps) {
return (
<div className="pb-5">
<div className="text-2xl font-semibold">{title}</div>
<p className="text-text-sub-title pt-2">{description}</p>
<p className="text-text-secondary pt-2">{description}</p>
</div>
);
}

6
web/src/pages/dataset/sidebar/index.tsx
View File

@ -62,8 +62,8 @@ export function SideBar({ refreshCount }: PropType) {
name={data.name}
className="size-16"
></RAGFlowAvatar>
<div className=" text-text-sub-title text-xs space-y-1">
<h3 className="text-lg font-semibold line-clamp-1 text-text-title">
<div className=" text-text-secondary text-xs space-y-1">
<h3 className="text-lg font-semibold line-clamp-1 text-text-primary">
{data.name}
</h3>
<div className="flex justify-between">
@ -85,7 +85,7 @@ export function SideBar({ refreshCount }: PropType) {
'w-full justify-start gap-2.5 px-3 relative h-10 text-text-sub-title-invert',
{
'bg-bg-card': active,
'text-text-title': active,
'text-text-primary': active,
},
)}
onClick={handleMenuClick(item.key)}

2
web/src/pages/dataset/testing/index.tsx
View File

@ -44,7 +44,7 @@ export default function RetrievalTesting() {
<section className="flex divide-x h-full">
<div className="p-4 flex-1">
<div className="flex justify-between pb-2.5">
<span className="text-text-title font-semibold text-2xl">
<span className="text-text-primary font-semibold text-2xl">
Test setting
</span>
{/* <Button variant={'outline'} onClick={addCount}>

2
web/src/pages/dataset/testing/testing-result.tsx
View File

@ -65,7 +65,7 @@ export function TestingResult({
return (
<div className="p-4 flex-1">
<div className="flex justify-between pb-2.5">
<span className="text-text-title font-semibold text-2xl">
<span className="text-text-primary font-semibold text-2xl">
Test results
</span>
<FilterPopover

6
web/src/pages/datasets/dataset-card.tsx
View File

@ -55,10 +55,10 @@ export function DatasetCard({
<h3 className="text-lg font-semibold mb-2 line-clamp-1">
{dataset.name}
</h3>
<p className="text-xs text-text-sub-title">
<p className="text-xs text-text-secondary">
{dataset.doc_num} files
</p>
<p className="text-xs text-text-sub-title">
<p className="text-xs text-text-secondary">
{formatDate(dataset.update_time)}
</p>
</div>
@ -76,7 +76,7 @@ export function SeeAllCard() {
className="bg-colors-background-inverse-weak w-40"
onClick={navigateToDatasetList}
>
<CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-sub-title">
<CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-secondary">
See All <ChevronRight className="size-4" />
</CardContent>
</Card>

2
web/src/pages/datasets/dataset-dropdown.tsx
View File

@ -47,7 +47,7 @@ export function DatasetDropdown({
<DropdownMenuSeparator />
<ConfirmDeleteDialog onOk={handleDelete}>
<DropdownMenuItem
className="text-text-delete-red"
className="text-state-error"
onSelect={(e) => {
e.preventDefault();
}}

4
web/src/pages/home/application-card.tsx
View File

@ -25,7 +25,7 @@ export function ApplicationCard({ app }: ApplicationCardProps) {
<h3 className="text-sm font-normal line-clamp-1 mb-1">
{app.title}
</h3>
<p className="text-xs font-normal text-text-sub-title">
<p className="text-xs font-normal text-text-secondary">
{formatDate(app.update_time)}
</p>
</div>
@ -44,7 +44,7 @@ export type SeeAllAppCardProps = {
export function SeeAllAppCard({ click }: SeeAllAppCardProps) {
return (
<Card className="w-64 min-h-[76px]" onClick={click}>
<CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-sub-title">
<CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-secondary">
See All <ChevronRight className="size-4" />
</CardContent>
</Card>

2
web/src/pages/home/banner.tsx
View File

@ -43,7 +43,7 @@ export function NextBanner() {
const { t } = useTranslation();
return (
<section className="text-5xl pt-10 pb-14 font-bold">
<span className="text-text-title">{t('header.welcome')}</span>
<span className="text-text-primary">{t('header.welcome')}</span>
<span className="pl-3 text-transparent bg-clip-text bg-gradient-to-l from-[#40EBE3] to-[#4A51FF]">
RAGFlow
</span>

4
web/src/pages/next-chats/chat-card.tsx
View File

@ -34,8 +34,8 @@ export function ChatCard({ data, showChatRenameModal }: IProps) {
<h3 className="text-lg font-semibold mb-2 line-clamp-1 truncate">
{data.name}
</h3>
<p className="text-xs text-text-sub-title">{data.description}</p>
<p className="text-xs text-text-sub-title">
<p className="text-xs text-text-secondary">{data.description}</p>
<p className="text-xs text-text-secondary">
{formatDate(data.update_time)}
</p>
</div>

2
web/src/pages/next-chats/chat-dropdown.tsx
View File

@ -47,7 +47,7 @@ export function ChatDropdown({
<DropdownMenuSeparator />
<ConfirmDeleteDialog onOk={handleDelete}>
<DropdownMenuItem
className="text-text-delete-red"
className="text-state-error"
onSelect={(e) => {
e.preventDefault();
}}

2
web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx
View File

@ -133,7 +133,7 @@ export function EditMcpDialog({
onClick={handleTest}
>
<RefreshCw
className={cn('text-background-checked', {
className={cn('text-accent-primary', {
'animate-spin': testLoading,
})}
/>

4
web/src/pages/profile-setting/mcp/index.tsx
View File

@ -33,9 +33,9 @@ export default function McpServer() {
return (
<section className="p-4 w-full">
<div className="text-text-title text-2xl">MCP Servers</div>
<div className="text-text-primary text-2xl">MCP Servers</div>
<section className="flex items-center justify-between pb-5">
<div className="text-text-sub-title">
<div className="text-text-secondary">
Customize the list of MCP servers
</div>
<div className="flex gap-5">

6
web/src/pages/profile-setting/mcp/mcp-card.tsx
View File

@ -36,7 +36,7 @@ export function McpCard({
<Card key={data.id} className="w-64">
<CardContent className="p-2.5 pt-2 group">
<section className="flex justify-between pb-2">
<h3 className="text-lg font-semibold line-clamp-1">{data.name}</h3>
<h3 className="text-lg font-semibold truncate flex-1">{data.name}</h3>
<div className="space-x-4">
<McpDropdown mcpId={data.id} showEditModal={showEditModal}>
<MoreButton></MoreButton>
@ -52,10 +52,10 @@ export function McpCard({
</section>
<div className="flex justify-between items-end">
<div className="w-full">
<div className="text-base font-semibold mb-3 line-clamp-1 text-text-sub-title">
<div className="text-base font-semibold mb-3 line-clamp-1 text-text-secondary">
{toolLength} cached tools
</div>
<p className="text-sm text-text-sub-title">
<p className="text-sm text-text-secondary">
{formatDate(data.update_date)}
</p>
</div>

2
web/src/pages/profile-setting/mcp/mcp-dropdown.tsx
View File

@ -43,7 +43,7 @@ export function McpDropdown({
<DropdownMenuSeparator />
<ConfirmDeleteDialog onOk={handleDelete}>
<DropdownMenuItem
className="text-text-delete-red"
className="text-state-error"
onSelect={(e) => {
e.preventDefault();
}}

2
web/src/pages/profile-setting/mcp/tool-card.tsx
View File

@ -10,7 +10,7 @@ export function McpToolCard({ data }: McpToolCardProps) {
<Card>
<CardContent className="p-2.5 pt-2 group">
<h3 className="text-sm font-semibold line-clamp-1 pb-2">{data.name}</h3>
<div className="text-xs font-normal mb-3 text-text-sub-title">
<div className="text-xs font-normal mb-3 text-text-secondary">
{data.description}
</div>
</CardContent>