From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化
---
app/components/tools/labels/filter.tsx | 56 +++++++++++++++++++++++++++++++++++---------------------
1 files changed, 35 insertions(+), 21 deletions(-)
diff --git a/app/components/tools/labels/filter.tsx b/app/components/tools/labels/filter.tsx
index 78e350d..20db687 100644
--- a/app/components/tools/labels/filter.tsx
+++ b/app/components/tools/labels/filter.tsx
@@ -1,8 +1,10 @@
import type { FC } from 'react'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
-import { useDebounceFn } from 'ahooks'
+import { useContext } from 'use-context-selector'
+import { useDebounceFn, useMount } from 'ahooks'
import { RiArrowDownSLine } from '@remixicon/react'
+import { useStore as useLabelStore } from './store'
import cn from '@/utils/classnames'
import {
PortalToFollowElem,
@@ -14,7 +16,9 @@
import { Check } from '@/app/components/base/icons/src/vender/line/general'
import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
import type { Label } from '@/app/components/tools/labels/constant'
-import { useTags } from '@/app/components/plugins/hooks'
+import { fetchLabelList } from '@/service/tools'
+import I18n from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
type LabelFilterProps = {
value: string[]
@@ -25,9 +29,12 @@
onChange,
}) => {
const { t } = useTranslation()
+ const { locale } = useContext(I18n)
+ const language = getLanguage(locale)
const [open, setOpen] = useState(false)
- const { tags: labelList } = useTags()
+ const labelList = useLabelStore(s => s.labelList)
+ const setLabelList = useLabelStore(s => s.setLabelList)
const [keywords, setKeywords] = useState('')
const [searchKeywords, setSearchKeywords] = useState('')
@@ -54,6 +61,12 @@
onChange([...value, label.name])
}
+ useMount(() => {
+ fetchLabelList().then((res) => {
+ setLabelList(res)
+ })
+ })
+
return (
<PortalToFollowElem
open={open}
@@ -67,38 +80,39 @@
className='block'
>
<div className={cn(
- 'flex h-8 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 hover:bg-components-input-bg-hover',
- !open && !!value.length && 'shadow-xs',
- open && !!value.length && 'shadow-xs',
+ 'flex items-center gap-1 px-2 h-8 rounded-lg border-[0.5px] border-transparent bg-gray-200 cursor-pointer hover:bg-gray-300',
+ open && !value.length && '!bg-gray-300 hover:bg-gray-300',
+ !open && !!value.length && '!bg-white/80 shadow-xs !border-black/5 hover:!bg-gray-200',
+ open && !!value.length && '!bg-gray-200 !border-black/5 shadow-xs hover:!bg-gray-200',
)}>
<div className='p-[1px]'>
- <Tag01 className='h-3.5 w-3.5 text-text-tertiary' />
+ <Tag01 className='h-3.5 w-3.5 text-gray-700' />
</div>
- <div className='text-[13px] leading-[18px] text-text-tertiary'>
+ <div className='text-[13px] leading-[18px] text-gray-700'>
{!value.length && t('common.tag.placeholder')}
- {!!value.length && currentLabel?.label}
+ {!!value.length && currentLabel?.label[language]}
</div>
{value.length > 1 && (
- <div className='text-xs font-medium leading-[18px] text-text-tertiary'>{`+${value.length - 1}`}</div>
+ <div className='text-xs font-medium leading-[18px] text-gray-500'>{`+${value.length - 1}`}</div>
)}
{!value.length && (
<div className='p-[1px]'>
- <RiArrowDownSLine className='h-3.5 w-3.5 text-text-tertiary' />
+ <RiArrowDownSLine className='h-3.5 w-3.5 text-gray-700' />
</div>
)}
{!!value.length && (
- <div className='group/clear cursor-pointer p-[1px]' onClick={(e) => {
+ <div className='p-[1px] cursor-pointer group/clear' onClick={(e) => {
e.stopPropagation()
onChange([])
}}>
- <XCircle className='h-3.5 w-3.5 text-text-tertiary group-hover/clear:text-text-secondary' />
+ <XCircle className='h-3.5 w-3.5 text-gray-400 group-hover/clear:text-gray-600' />
</div>
)}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1002]'>
- <div className='relative w-[240px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
- <div className='p-2'>
+ <div className='relative w-[240px] bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg'>
+ <div className='p-2 border-b-[0.5px] border-black/5'>
<Input
showLeftIcon
showClearIcon
@@ -111,17 +125,17 @@
{filteredLabelList.map(label => (
<div
key={label.name}
- className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover'
+ className='flex items-center gap-2 pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-100'
onClick={() => selectLabel(label)}
>
- <div title={label.label} className='grow truncate text-sm leading-5 text-text-secondary'>{label.label}</div>
- {value.includes(label.name) && <Check className='h-4 w-4 shrink-0 text-text-accent' />}
+ <div title={label.label[language]} className='grow text-sm text-gray-700 leading-5 truncate'>{label.label[language]}</div>
+ {value.includes(label.name) && <Check className='shrink-0 w-4 h-4 text-primary-600' />}
</div>
))}
{!filteredLabelList.length && (
- <div className='flex flex-col items-center gap-1 p-3'>
- <Tag03 className='h-6 w-6 text-text-quaternary' />
- <div className='text-xs leading-[14px] text-text-tertiary'>{t('common.tag.noTag')}</div>
+ <div className='p-3 flex flex-col items-center gap-1'>
+ <Tag03 className='h-6 w-6 text-gray-300' />
+ <div className='text-gray-500 text-xs leading-[14px]'>{t('common.tag.noTag')}</div>
</div>
)}
</div>
--
Gitblit v1.8.0