feat(web): use bg replace img

This commit is contained in:
zhaoying
2026-04-01 12:03:56 +08:00
parent c9ca5df05c
commit d3cd66fc6e
30 changed files with 104 additions and 279 deletions

View File

@@ -17,10 +17,6 @@ import { useNavigate } from 'react-router-dom';
import { Flex } from 'antd';
import Card from './Card';
import applicationIcon from '@/assets/images/home/application.svg';
import knowledgeIcon from '@/assets/images/home/knowledge.svg';
import memoryConversationIcon from '@/assets/images/home/memoryConversation.svg';
import helpCenterIcon from '@/assets/images/menu/helpCenter_active.svg'
/** Quick operation items configuration */
const quickOperations = [
@@ -37,12 +33,11 @@ const bgStyleList = [
'rb:bg-[rgba(77,168,255,0.1)]'
]
/** Icon mapping for quick operations */
const quickOperationIcons: {[key: string]: string | undefined} = {
createNewApplication: applicationIcon,
createNewKnowledge: knowledgeIcon,
memoryConversation: memoryConversationIcon,
helpCenter: helpCenterIcon
const quickOperationIconsClassNames: Record<string, string> = {
createNewApplication: 'rb:bg-[url("@/assets/images/home/application.svg")]',
createNewKnowledge: 'rb:bg-[url("@/assets/images/home/knowledge.svg")]',
memoryConversation: 'rb:bg-[url("@/assets/images/home/memoryConversation.svg")]',
helpCenter: 'rb:bg-[url("@/assets/images/menu/helpCenter_active.svg")]'
}
const QuickOperation:FC = () => {
const { t, i18n } = useTranslation()
@@ -76,7 +71,7 @@ const QuickOperation:FC = () => {
{quickOperations.map((item, index) => (
<Flex key={item.key} align="center" gap={20} className={clsx("rb:relative rb:rounded-xl rb:py-2! rb:px-3! rb:cursor-pointer", bgStyleList[index])} onClick={() => handleJump(item.url)}>
<div className="rb:size-8 rb:rounded-lg rb:p-1 rb:bg-[#FFFFFF]">
<img className="rb:size-6" src={quickOperationIcons[item.key]} />
<div className={`rb:size-6 rb:bg-cover ${quickOperationIconsClassNames[item.key]}`}></div>
</div>
<div>
<div className="rb:text-[14px] rb:leading-5 rb:font-medium">{t(`dashboard.${item.key}`)}</div>

View File

@@ -15,10 +15,6 @@ import clsx from 'clsx'
import { useTranslation } from 'react-i18next'
import { Skeleton, Flex } from 'antd';
import chunkCountIcon from '@/assets/images/home/chunk_count.svg';
import statementsCountIcon from '@/assets/images/home/statements_count.svg';
import tripletCountIcon from '@/assets/images/home/triplet_count.svg';
import temporalCountIcon from '@/assets/images/home/temporal_count.svg';
import activityEmpty from '@/assets/images/home/ActivityEmpty.svg'
import Empty from '@/components/Empty';
import Card from './Card';
@@ -49,10 +45,10 @@ interface RecentActivities {
/** Activity list configuration */
const activityList = [
{ key: 'chunk_count', icon: chunkCountIcon },
{ key: 'statements_count', icon: statementsCountIcon },
{ key: 'triplet_count', icon: tripletCountIcon },
{ key: 'temporal_count', icon: temporalCountIcon },
{ key: 'chunk_count', iconClass: "rb:bg-[url('@/assets/images/home/chunk_count.svg')]" },
{ key: 'statements_count', iconClass: "rb:bg-[url('@/assets/images/home/statements_count.svg')]" },
{ key: 'triplet_count', iconClass: "rb:bg-[url('@/assets/images/home/triplet_count.svg')]" },
{ key: 'temporal_count', iconClass: "rb:bg-[url('@/assets/images/home/temporal_count.svg')]" },
]
const RecentActivity:FC = () => {
@@ -89,7 +85,7 @@ const RecentActivity:FC = () => {
{activityList.map((item) => (
<Flex key={item.key} align="center" justify="space-between" className={clsx("rb:not-italic")}>
<Flex align="center" gap={20}>
<img className="rb:size-10" src={item.icon} />
<div className={clsx("rb:size-6 rb:bg-cover", item.iconClass)}></div>
<div>
<div className="rb:text-[16px] rb:leading-5.5 rb:font-medium">{t(`dashboard.${item.key}`)}</div>
<div className="rb:text-[#7B8085] rb:text-[14px] rb:font-regular rb:mt-1 rb:leading-4.5">