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

Feat: Configure colors according to the design draft#3221 (#9301)

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

Feat: Configure colors according to the design draft#3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-08-07 13:59:33 +08:00
committed by GitHub
parent 63c2f5b821
commit 23062cb27a
20 changed files with 92 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/edit-tag/index.tsx
View File

@ -58,7 +58,7 @@ const EditTag = ({ value = [], onChange }: EditTagsProps) => {
<HoverCardTrigger>
<div
key={tag}
className="w-fit flex items-center justify-center gap-2 border-dashed border px-1 rounded-sm bg-background-card"
className="w-fit flex items-center justify-center gap-2 border-dashed border px-1 rounded-sm bg-bg-card"
>
<div className="flex gap-2 items-center">
<div className="max-w-80 overflow-hidden text-ellipsis">
@ -90,7 +90,7 @@ const EditTag = ({ value = [], onChange }: EditTagsProps) => {
<Input
ref={inputRef}
type="text"
className="h-8 bg-background-card"
className="h-8 bg-bg-card"
value={inputValue}
onChange={handleInputChange}
onBlur={handleInputConfirm}
@ -103,7 +103,7 @@ const EditTag = ({ value = [], onChange }: EditTagsProps) => {
) : (
<Button
variant="dashed"
className="w-fit flex items-center justify-center gap-2 bg-background-card"
className="w-fit flex items-center justify-center gap-2 bg-bg-card"
onClick={showInput}
style={tagPlusStyle}
>

2
web/src/components/next-message-item/index.tsx
View File

@ -226,7 +226,7 @@ function MessageItem({
? styles.messageTextDark
: styles.messageText]: isAssistant,
[styles.messageUserText]: !isAssistant,
'bg-background-card': !isAssistant,
'bg-bg-card': !isAssistant,
})}
>
{item.data ? (

2
web/src/components/ui/badge.tsx
View File

@ -11,7 +11,7 @@ const badgeVariants = cva(
default:
'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
secondary:
'border-transparent bg-background-card text-text-sub-title-invert hover:bg-secondary/80 rounded-md',
'border-transparent bg-bg-card text-text-sub-title-invert hover:bg-secondary/80 rounded-md',
destructive:
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
outline: 'text-foreground',

5
web/src/components/ui/button.tsx
View File

@ -15,8 +15,7 @@ const buttonVariants = cva(
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline:
'border border-text-sub-title-invert bg-transparent hover:bg-accent hover:text-accent-foreground',
secondary:
'bg-background-card text-secondary-foreground hover:bg-secondary/80',
secondary: 'bg-bg-card text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
tertiary:
@ -52,7 +51,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
return (
<Comp
className={cn(
'bg-background-card',
'bg-bg-card',
buttonVariants({ variant, size, className }),
)}
ref={ref}

5
web/src/components/ui/card.tsx
View File

@ -8,10 +8,7 @@ const Card = React.forwardRef<
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
'rounded-lg bg-background-card text-card-foreground shadow-sm',
className,
)}
className={cn('rounded-lg bg-bg-card shadow-sm', className)}
{...props}
/>
));

2
web/src/components/ui/table.tsx
View File

@ -8,7 +8,7 @@ const Table = React.forwardRef<
>(({ className, rootClassName, ...props }, ref) => (
<div
className={cn(
'relative w-full overflow-auto rounded-2xl bg-background-card',
'relative w-full overflow-auto rounded-2xl bg-bg-card',
rootClassName,
)}
>

2
web/src/locales/en.ts
View File

@ -1028,7 +1028,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
'30d': '30 days',
},
publish: 'API',
exeSQL: 'ExeSQL',
exeSQL: 'Execute SQL',
exeSQLDescription:
'A component that performs SQL queries on a relational database, supporting querying from MySQL, PostgreSQL, or MariaDB.',
dbType: 'Database Type',

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

@ -83,12 +83,12 @@ function InnerAgentNode({
></Handle>
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
<section className="flex flex-col gap-2">
<div className={'bg-background-card rounded-sm p-1'}>
<div className={'bg-bg-card rounded-sm p-1'}>
<LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
</div>
{(isGotoMethod ||
exceptionMethod === AgentExceptionMethod.Comment) && (
<div className="bg-background-card rounded-sm p-1 flex justify-between gap-2">
<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="truncate flex-1 text-right">
{t(`flow.${exceptionMethod}`)}

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

@ -31,13 +31,13 @@ export function InnerCategorizeNode({
<NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
<section className="flex flex-col gap-2">
<div className={'bg-background-card rounded-sm px-1'}>
<div className={'bg-bg-card rounded-sm px-1'}>
<LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
</div>
{positions.map((position) => {
return (
<div key={position.uuid}>
<div className={'bg-background-card rounded-sm p-1 truncate'}>
<div className={'bg-bg-card rounded-sm p-1 truncate'}>
{position.name}
</div>
<CommonHandle

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

@ -42,7 +42,7 @@ function OperatorItemList({ operators }: OperatorItemProps) {
<TooltipTrigger asChild>
<DropdownMenuItem
key={x}
className="hover:bg-background-card py-1 px-3 cursor-pointer rounded-sm flex gap-2 items-center justify-start"
className="hover:bg-bg-card py-1 px-3 cursor-pointer rounded-sm flex gap-2 items-center justify-start"
onClick={addCanvasNode(x, {
nodeId,
id,

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

@ -145,7 +145,7 @@ function EmbedDialog({
{t(isAgent ? 'flow' : 'chat', { keyPrefix: 'header' })}
<span className="ml-1 inline-block">ID</span>
</div>
<div className="bg-background-card rounded-lg flex justify-between p-2">
<div className="bg-bg-card rounded-lg flex justify-between p-2">
<span>{token} </span>
<CopyToClipboard text={token}></CopyToClipboard>
</div>

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

@ -36,7 +36,7 @@ export function ToolCard({
<li
{...props}
className={cn(
'flex bg-background-card p-1 rounded-sm justify-between',
'flex bg-bg-card p-1 rounded-sm justify-between',
className,
)}
>

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

@ -133,7 +133,7 @@ function ConditionCards({
},
)}
>
<section className="p-2 bg-background-card flex justify-between items-center">
<section className="p-2 bg-bg-card flex justify-between items-center">
<FormField
control={form.control}
name={`${name}.${index}.cpn_id`}

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

@ -135,7 +135,7 @@ const ToolTimelineItem = ({
<Accordion
type="single"
collapsible
className="bg-background-card px-3"
className="bg-bg-card px-3"
>
<AccordionItem value={idx.toString()}>
<AccordionTrigger

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

@ -254,7 +254,7 @@ export const WorkFlowTimeline = ({
<Accordion
type="single"
collapsible
className="bg-background-card px-3"
className="bg-bg-card px-3"
>
<AccordionItem value={idx.toString()}>
<AccordionTrigger

11
web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/index.tsx
View File

@ -61,7 +61,7 @@ export default ({
};
return (
<div className="flex pr-[25px]">
<div className="flex items-center gap-4 bg-background-card text-muted-foreground w-fit h-[35px] rounded-md px-4 py-2">
<div className="flex items-center gap-4 bg-bg-card text-muted-foreground w-fit h-[35px] rounded-md px-4 py-2">
{textSelectOptions.map((option) => (
<div
key={option.value}
@ -76,7 +76,7 @@ export default ({
</div>
<div className="ml-auto"></div>
<Input
className="bg-background-card text-muted-foreground"
className="bg-bg-card text-muted-foreground"
style={{ width: 200 }}
placeholder={t('search')}
icon={<SearchOutlined />}
@ -86,7 +86,7 @@ export default ({
<div className="w-[20px]"></div>
<Popover>
<PopoverTrigger asChild>
<Button className="bg-background-card text-muted-foreground hover:bg-card">
<Button className="bg-bg-card text-muted-foreground hover:bg-card">
<ListFilter />
</Button>
</PopoverTrigger>
@ -95,10 +95,7 @@ export default ({
</PopoverContent>
</Popover>
<div className="w-[20px]"></div>
<Button
onClick={() => createChunk()}
className="bg-background-card text-primary"
>
<Button onClick={() => createChunk()} className="bg-bg-card text-primary">
<Plus size={44} />
</Button>
</div>

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

@ -84,7 +84,7 @@ export function SideBar({ refreshCount }: PropType) {
className={cn(
'w-full justify-start gap-2.5 px-3 relative h-10 text-text-sub-title-invert',
{
'bg-background-card': active,
'bg-bg-card': active,
'text-text-title': active,
},
)}

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

@ -40,7 +40,7 @@ export function Sessions({ handleConversationCardClick }: SessionProps) {
key={x.id}
onClick={handleCardClick(x.id, x.is_new)}
className={cn('cursor-pointer bg-transparent', {
'bg-background-card': conversationId === x.id,
'bg-bg-card': conversationId === x.id,
})}
>
<CardContent className="px-3 py-2 flex justify-between items-center group">

22
web/tailwind.config.js
View File

@ -58,6 +58,28 @@ module.exports = {
'dot-green': 'var(--dot-green)',
'dot-red': 'var(--dot-red)',
/* design colors */
'bg-base': 'var(--bg-base)',
'bg-card': 'var(--bg-card)',
'text-primary': 'var(--text-primary)',
'text-disabled': 'var(--text-disabled)',
'text-input-tip': 'var(--text-input-tip)',
'border-default': 'var(--border-default)',
'border-accent': 'var(--border-accent)',
'border-button': 'var(--border-button)',
'accent-primary': 'var(--accent-primary)',
'bg-accent': 'var(--bg-accent)',
'state--success': 'var(--state--success)',
'state--warning': 'var(--state--warning)',
'state--error': 'var(--state--error)',
'team-group': 'var(--team-group)',
'team-member': 'var(--team-member)',
'team-department': 'var(--team-department)',
'bg-group': 'var(--bg-group)',
'bg-member': 'var(--bg-member)',
'bg-department': 'var(--bg-department)',
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',

44
web/tailwind.css
View File

@ -93,6 +93,38 @@
--input-border: rgba(22, 22, 24, 0.2);
--dot-green: rgba(59, 160, 92, 1);
--dot-red: rgba(216, 73, 75, 1);
/* design colors */
--bg-base: #f6f6f7;
/* card color , dividing line */
--bg-card: rgba(0, 0, 0, 0.05);
/* Button ,Body text, Input completed text */
--text-primary: #161618;
--text-secondary: #75787a;
--text-disabled: #b2b5b7;
/* input placeholder color */
--text-input-tip: #b2b5b7;
/* Input default color */
--border-default: rgba(0, 0, 0, 0.2);
/* Input accent color */
--border-accent: #000000;
--border-button: rgba(0, 0, 0, 0.1);
/* Regulators, parsing, switches, variables */
--accent-primary: #4ca4e7;
/* Output Variables Box */
--bg-accent: rgba(76, 164, 231, 0.05);
--state--success: #3ba05c;
--state--warning: #faad14;
--state-error: #d8494b;
--team-group: #5ab77e;
--team-member: #5c96c8;
--team-department: #8866d3;
--bg-group: rgba(90, 183, 126, 0.1);
--bg-member: rgba(92, 150, 200, 0.1);
--bg-department: rgba(136, 102, 211, 0.1);
}
.dark {
@ -207,6 +239,18 @@
--dot-green: rgba(59, 160, 92, 1);
--dot-red: rgba(216, 73, 75, 1);
/* design colors */
--bg-base: #161618;
--bg-card: rgba(255, 255, 255, 0.05);
--text-primary: #f6f6f7;
--text-secondary: #b2b5b7;
--text-disabled: #75787a;
--text-input-tip: #75787a;
--border-default: rgba(255, 255, 255, 0.2);
--border-accent: #ffffff;
--border-button: rgba(255, 255, 255, 0.1);
}
}