Feat: Restore the button's background color #3221 (#9307)

### What problem does this PR solve? Feat: Restore the button's background color #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-12-08 20:42:30 +08:00 · 2025-08-07 17:37:53 +08:00
parent 5749aa30b0
commit d628234942
28 changed files with 41 additions and 251 deletions
--- a/web/src/pages/agents/template-card.tsx
+++ b/web/src/pages/agents/template-card.tsx
@ -19,7 +19,7 @@ export function TemplateCard({ data, showModal, isCreate = false }: IProps) {
    showModal(data);
  }, [data, showModal]);
  return (
-    <Card className="bg-colors-background-inverse-weak  border-colors-outline-neutral-standard group relative min-h-40">
+    <Card className="border-colors-outline-neutral-standard group relative min-h-40">
      <CardContent className="p-4 ">
        {isCreate && (
          <div
--- a/web/src/pages/chunk/index.tsx
+++ b/web/src/pages/chunk/index.tsx
@ -69,14 +69,13 @@ export default function ChunkPage() {
            options={options}
            value={path}
            onChange={navigateToChunk as (val: SegmentedValue) => void}
-            className="bg-colors-background-inverse-standard text-colors-text-neutral-standard"
          ></Segmented>
        </div>
        <div className="flex items-center gap-2">
          <Button variant={'icon'} size={'icon'}>
            <EllipsisVertical />
          </Button>
-          <Button variant={'tertiary'} size={'sm'}>
+          <Button size={'sm'}>
            <Save />
            Save
          </Button>
--- a/web/src/pages/dataset/setting/advanced-setting-form.tsx
+++ b/web/src/pages/dataset/setting/advanced-setting-form.tsx
@ -148,12 +148,7 @@ export default function AdvancedSettingForm() {
            </FormItem>
          )}
        />
-        <Button
-          variant={'tertiary'}
-          size={'sm'}
-          type="submit"
-          className="w-2/5"
-        >
+        <Button size={'sm'} type="submit" className="w-2/5">
          Test
        </Button>
      </form>
--- a/web/src/pages/dataset/setting/chunk-method-card.tsx
+++ b/web/src/pages/dataset/setting/chunk-method-card.tsx
@ -93,7 +93,7 @@ export default function ChunkMethodCard() {
  const form = useFormContext();

  return (
-    <Card className="border-0 p-6 mb-8 bg-colors-background-inverse-weak flex">
+    <Card className="border-0 p-6 mb-8 flex">
      <div className="w-2/5">
        <FormField
          control={form.control}
@ -103,7 +103,7 @@ export default function ChunkMethodCard() {
              <FormLabel>{t('chunkMethod')}</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
-                  <SelectTrigger className="bg-colors-background-inverse-weak">
+                  <SelectTrigger>
                    <SelectValue placeholder="Select a verified email to display" />
                  </SelectTrigger>
                </FormControl>
--- a/web/src/pages/dataset/testing/testing-form.tsx
+++ b/web/src/pages/dataset/testing/testing-form.tsx
@ -98,10 +98,7 @@ export default function TestingForm({
            <FormItem>
              <FormLabel>{t('knowledgeDetails.testText')}</FormLabel>
              <FormControl>
-                <Textarea
-                  {...field}
-                  className="bg-colors-background-inverse-weak"
-                ></Textarea>
+                <Textarea {...field}></Textarea>
              </FormControl>

              <FormMessage />
--- a/web/src/pages/datasets/dataset-card.tsx
+++ b/web/src/pages/datasets/dataset-card.tsx
@ -72,10 +72,7 @@ export function SeeAllCard() {
  const { navigateToDatasetList } = useNavigatePage();

  return (
-    <Card
-      className="bg-colors-background-inverse-weak w-40"
-      onClick={navigateToDatasetList}
-    >
+    <Card className="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-secondary">
        See All <ChevronRight className="size-4" />
      </CardContent>
--- a/web/src/pages/home/application-card.tsx
+++ b/web/src/pages/home/application-card.tsx
@ -1,5 +1,5 @@
 import { MoreButton } from '@/components/more-button';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Card, CardContent } from '@/components/ui/card';
 import { formatDate } from '@/utils/date';
 import { ChevronRight } from 'lucide-react';
@ -17,10 +17,11 @@ export function ApplicationCard({ app }: ApplicationCardProps) {
    <Card className="w-[264px]">
      <CardContent className="p-2.5  group flex justify-between">
        <div className="flex items-center gap-2.5">
-          <Avatar className="size-14 rounded-lg">
-            <AvatarImage src={app.avatar === null ? '' : app.avatar} />
-            <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-          </Avatar>
+          <RAGFlowAvatar
+            className="size-14 rounded-lg"
+            avatar={app.avatar}
+            name={app.title || 'CN'}
+          ></RAGFlowAvatar>
          <div className="flex-1">
            <h3 className="text-sm font-normal line-clamp-1 mb-1">
              {app.title}
--- a/web/src/pages/home/header.tsx
+++ b/web/src/pages/home/header.tsx
@ -1,113 +0,0 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import { Container } from '@/components/ui/container';
-import { Segmented, SegmentedValue } from '@/components/ui/segmented';
-import { useTranslate } from '@/hooks/common-hooks';
-import { useNavigateWithFromState } from '@/hooks/route-hook';
-import {
-  ChevronDown,
-  Cpu,
-  Github,
-  Library,
-  MessageSquareText,
-  Search,
-  Star,
-  Zap,
-} from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
-import { useLocation } from 'umi';
-
-export function HomeHeader() {
-  const { t } = useTranslate('header');
-  const { pathname } = useLocation();
-  const navigate = useNavigateWithFromState();
-  const [currentPath, setCurrentPath] = useState('/home');
-
-  const tagsData = useMemo(
-    () => [
-      { path: '/home', name: t('knowledgeBase'), icon: Library },
-      { path: '/chat', name: t('chat'), icon: MessageSquareText },
-      { path: '/search', name: t('search'), icon: Search },
-      { path: '/flow', name: t('flow'), icon: Cpu },
-      // { path: '/file', name: t('fileManager'), icon: FileIcon },
-    ],
-    [t],
-  );
-
-  const options = useMemo(() => {
-    return tagsData.map((tag) => {
-      const HeaderIcon = tag.icon;
-
-      return {
-        label: (
-          <div className="flex items-center gap-1">
-            <HeaderIcon className="size-5"></HeaderIcon>
-            <span>{tag.name}</span>
-          </div>
-        ),
-        value: tag.path,
-      };
-    });
-  }, [tagsData]);
-
-  // const currentPath = useMemo(() => {
-  //   return tagsData.find((x) => pathname.startsWith(x.path))?.name || 'home';
-  // }, [pathname, tagsData]);
-
-  const handleChange = (path: SegmentedValue) => {
-    // navigate(path as string);
-    setCurrentPath(path as string);
-  };
-
-  const handleLogoClick = useCallback(() => {
-    navigate('/');
-  }, [navigate]);
-
-  return (
-    <section className="py-[12px] flex justify-between items-center">
-      <div className="flex items-center gap-4">
-        <img
-          src={'/logo.svg'}
-          alt="logo"
-          className="w-[100] h-[100] mr-[12]"
-          onClick={handleLogoClick}
-        />
-        <Button variant="secondary">
-          <Github />
-          21.5k stars
-          <Star />
-        </Button>
-      </div>
-      <div>
-        <Segmented
-          options={options}
-          value={currentPath}
-          onChange={handleChange}
-          className="bg-colors-background-inverse-standard text-backgroundInverseStandard-foreground"
-        ></Segmented>
-      </div>
-      <div className="flex items-center gap-4">
-        <Container>
-          V 0.13.0
-          <Button variant="secondary" className="size-8">
-            <ChevronDown />
-          </Button>
-        </Container>
-        <Container className="px-3 py-2">
-          <Avatar className="w-[30px] h-[30px]">
-            <AvatarImage src="https://github.com/shadcn.png" />
-            <AvatarFallback>CN</AvatarFallback>
-          </Avatar>
-          yifanwu92@gmail.com
-          <Button
-            variant="destructive"
-            className="py-[2px] px-[8px] h-[23px] rounded-[4px]"
-          >
-            <Zap />
-            Pro
-          </Button>
-        </Container>
-      </div>
-    </section>
-  );
-}
--- a/web/src/pages/next-search/index.tsx
+++ b/web/src/pages/next-search/index.tsx
@ -13,9 +13,7 @@ export default function SearchPage() {
          <Button variant={'icon'} size={'icon'}>
            <EllipsisVertical />
          </Button>
-          <Button variant={'tertiary'} size={'sm'}>
-            Publish
-          </Button>
+          <Button size={'sm'}>Publish</Button>
        </div>
      </PageHeader>
    </section>
--- a/web/src/pages/next-searches/search-card.tsx
+++ b/web/src/pages/next-searches/search-card.tsx
@ -15,7 +15,7 @@ export function SearchCard({ data }: IProps) {
  const { navigateToSearch } = useNavigatePage();

  return (
-    <Card className="bg-colors-background-inverse-weak  border-colors-outline-neutral-standard">
+    <Card className="border-colors-outline-neutral-standard">
      <CardContent className="p-4 flex gap-2 items-start group">
        <div className="flex justify-between mb-4">
          <RAGFlowAvatar
--- a/web/src/pages/profile-setting/model/index.tsx
+++ b/web/src/pages/profile-setting/model/index.tsx
@ -30,10 +30,7 @@ export default function ModelManagement() {
        <section className="mt-6">
          <div className="flex justify-between items-center mb-3">
            <h2 className="text-2xl font-semibold ">Model library</h2>
-            <Input
-              placeholder="search"
-              className="bg-colors-background-inverse-weak w-1/5"
-            ></Input>
+            <Input placeholder="search" className="w-1/5"></Input>
          </div>
          <div className="grid grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-4">
            {modelLibraryList.map((x, idx) => (
--- a/web/src/pages/profile-setting/model/model-card.tsx
+++ b/web/src/pages/profile-setting/model/model-card.tsx
@ -104,7 +104,7 @@ export function AddModelCard() {
          <Button variant="secondary" size="icon">
            <MoreVertical className="h-4 w-4" />
          </Button>
-          <Button variant={'tertiary'}>
+          <Button>
            <Key /> API
          </Button>
        </div>
@ -126,7 +126,7 @@ export function ModelLibraryCard() {
        <p>LLM,TEXT EMBEDDING, SPEECH2TEXT, MODERATION</p>

        <div className="text-right">
-          <Button variant={'tertiary'}>
+          <Button>
            <Plus /> Add
          </Button>
        </div>
--- a/web/src/pages/profile-setting/plan/index.tsx
+++ b/web/src/pages/profile-setting/plan/index.tsx
@ -79,20 +79,20 @@ export default function Plan() {
  return (
    <section className="p-8">
      <h1 className="text-3xl font-bold mb-6">Plan & balance</h1>
-      <Card className="border-0 p-6 mb-6 bg-colors-background-inverse-weak divide-y divide-colors-outline-neutral-strong">
+      <Card className="border-0 p-6 mb-6  divide-y divide-colors-outline-neutral-strong">
        <div className="pb-2 flex justify-between text-xl">
          <span className="font-bold ">Balance</span>
          <span className="font-medium">$ 100.00</span>
        </div>
        <div className="flex items-center justify-between pt-3">
          <span>The value equals to 1,000 tokens or 10.00 GBs of storage</span>
-          <Button variant={'tertiary'} size={'sm'}>
+          <Button size={'sm'}>
            <LogOut />
            Recharge
          </Button>
        </div>
      </Card>
-      <Card className="pt-6 bg-colors-background-inverse-weak">
+      <Card className="pt-6 ">
        <CardContent className="space-y-4">
          <div className="font-bold text-xl">Upgrade to access</div>
          <section className="grid grid-cols-2 gap-3">
@ -107,7 +107,7 @@ export default function Plan() {
            options={options}
            value={val}
            onChange={handleChange}
-            className="bg-colors-background-inverse-standard inline-flex"
+            className="inline-flex"
          ></Segmented>
          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            {pricingData.map((plan, index) => (
--- a/web/src/pages/profile-setting/plan/pricing-card.tsx
+++ b/web/src/pages/profile-setting/plan/pricing-card.tsx
@ -38,10 +38,7 @@ export function PricingCard({
      <CardHeader className=" justify-between p-0 pb-3 h-52">
        <section>
          <div className="flex items-center justify-between mb-2">
-            <Badge
-              variant={isFree ? 'secondary' : 'tertiary'}
-              className="text-xs"
-            >
+            <Badge className="text-xs">
              {isPro && <Zap className="mr-2 h-4 w-4" />}
              {isEnterprise && <Mail className="mr-2 h-4 w-4" />}
              {title}
@ -59,7 +56,6 @@ export function PricingCard({
            )}
          </div>
          <Button
-            variant={isFree ? 'secondary' : 'tertiary'}
            className={cn('w-full', {
              'bg-colors-text-core-standard': !isFree,
            })}
--- a/web/src/pages/profile-setting/profile/index.tsx
+++ b/web/src/pages/profile-setting/profile/index.tsx
@ -188,11 +188,7 @@ export default function Profile() {
                      {t('username')}
                    </FormLabel>
                    <FormControl className="w-3/4">
-                      <Input
-                        placeholder=""
-                        {...field}
-                        className="bg-colors-background-inverse-weak"
-                      />
+                      <Input placeholder="" {...field} />
                    </FormControl>
                  </div>
                  <div className="flex w-[640px] pt-1">
--- a/web/src/pages/profile-setting/prompt/index.tsx
+++ b/web/src/pages/profile-setting/prompt/index.tsx
@ -16,7 +16,7 @@ const PromptManagement = () => {
      <div className="mx-auto">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-4xl font-bold">Prompt templates</h1>
-          <Button variant={'tertiary'} size={'sm'}>
+          <Button size={'sm'}>
            <Plus className="mr-2 h-4 w-4" />
            Create template
          </Button>
--- a/web/src/pages/profile-setting/team/index.tsx
+++ b/web/src/pages/profile-setting/team/index.tsx
@ -32,7 +32,7 @@ const TeamManagement = () => {
      <div className=" mx-auto">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-4xl font-bold">Team management</h1>
-          <Button variant={'tertiary'} size={'sm'}>
+          <Button size={'sm'}>
            <Plus className="mr-2 h-4 w-4" />
            Create team
          </Button>
@ -46,7 +46,7 @@ const TeamManagement = () => {
            </Button>
          </div>

-          <Card className="border-0 p-6 mb-6 bg-colors-background-inverse-weak">
+          <Card className="border-0 p-6 mb-6">
            <div className="grid grid-cols-3 gap-8">
              <div>
                <p className="text-sm text-gray-400 mb-2">Project</p>
@ -63,7 +63,7 @@ const TeamManagement = () => {
            </div>
          </Card>

-          <Card className="border-0 p-6 bg-colors-background-inverse-weak">
+          <Card className="border-0 p-6">
            <Table>
              <TableBody>
                {teamMembers.map((member, idx) => (