From b26f4a15841a6913803cf4a0864a8e75a8285b54 Mon Sep 17 00:00:00 2001 From: leiyuee Date: Wed, 8 Jul 2026 10:56:29 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=20=E6=9A=82=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../images/create/tabs/create_tab_all.png | Bin 1898 -> 1955 bytes src/assets/images/ic_dui.png | Bin 0 -> 802 bytes src/components/TabPill/index.scss | 52 +++++++++++++++++ src/components/TabPill/index.tsx | 21 +++++++ src/pages/Create/createTabIcons.ts | 12 ++++ src/pages/Create/index.scss | 43 -------------- .../panels/InspirationLibraryPanel/index.scss | 53 ------------------ .../panels/InspirationLibraryPanel/index.tsx | 28 ++++----- .../Create/panels/MyCreationsPanel/index.scss | 18 +++--- .../Create/panels/MyCreationsPanel/index.tsx | 42 ++++++-------- .../Create/panels/MyFavoritePanel/index.tsx | 48 +++++----------- 11 files changed, 135 insertions(+), 182 deletions(-) create mode 100644 src/assets/images/ic_dui.png create mode 100644 src/components/TabPill/index.scss create mode 100644 src/components/TabPill/index.tsx create mode 100644 src/pages/Create/createTabIcons.ts diff --git a/src/assets/images/create/tabs/create_tab_all.png b/src/assets/images/create/tabs/create_tab_all.png index 3fafa67bd12af2e491bf930a62b09e4ed6ff5828..1dcff02366f9fee7f92be406d487d4afd7cbf261 100644 GIT binary patch delta 1865 zcmV-P2e$a?4xq667Sg99;Kto#Arh$&)8{WkO6uf#=ShyNU{|;j-Zw%PoLhBzywv`!oouG{{8zqxJ;!P8I-u_s>Ji>&v!n3 z`g9MMi8O##d4K58p=DpIFA_|FMtKjVVWkQTr>3SBA3b{1ugYYUM>#ImtX?#1 zeE9I8u|?;GN?&UaIWgPip2*|S$A071I&{QUegDSuVWRBCB^dwWxRrqk&p=&}zB zv-5w2YPA+0KYrXRrkNq)SvfCcWKh;(zu(U^IZ)IJ-p58MTkQ~vp2c%R@xa>xSwK;& z0)@V6QyyW3S#kNYtoaJ0Uo58?>-&m2&=aHDMTCQxnNkgGQv>CTAo`kT#jdB{7FjXE!4mSjlcTKs~Q_}j1>^m-2Xv(sp z-0F%a-U@`Zak(;L9rTNeQ*>%*@QI=g*)2t7Izf`0?WlZ{NQC4L=vk@8g(?#qVl4{l$wH z8Qzu3sKU=+L41jFUcP*}H~Sko*P$df(szoSE*ARU`-DMUIa&ZJv0b$+$R`^P{!+0S zVBD)ryJvP{wxxoCoTMsGod@HJw*?Yf;eYAVr#DfsOZa(M%R|K(}dtkc{ zD;&VuU*SC$Y++$SZq+HVLIy4G zCn)bv2}JNMeY4B5X7Oh=dg!*-ip!P;avr*R6Hwd+6nHI^<>gH5P$^d=F4J-)*?*0Y z)<>n*t9EQ$FxyoZ@y@ht`ILjNE|*%qa%@aYfkimUpmN`vpBXCimrMZ2;pyK|dNKI^ zds1>Dk^RH}(uL^_V4`TFYq2X2>rUQ$|95ki);^4j_ z%6Wu*@prwW1}MiI;&&7|8Rd*~aDVSga0MFQlZQAu_=M2`psJW+Aq-;erf~twRSn85(=e_e_`sITNXi7+|CTy5}rEn13`{NL$s8 z0*D#cY;x3nJ>%mt`e8Pg!(E*UIrNgQNC3PoaNLLidMDfr6=kx~A`^_uHWJffeB4!= zHC6b``y(>p-Me?GmR`5t#)6{)tCl0pk!^m<0e)7cJR`>z0kLl)6GjTb-Cmbn4^|wN zSXFLmhefF(d)>u?Dk30Umw#GTLX3ghp?6mtf#<*pW5ha&kqKNLiL#5`WD$;r+EmJ! zh$kTwI8w1OA`>(#N(%4OWMt9+(@vX&WapH8-{lhy)q7Yzh_m$VwMnJG3O^9!~ zd|8M;-~{o78L+Jt(!dbgyWHU9kDZ+zjzy{M4>GhgEi!?iLAcYiR3~S5cel-rRWp>N zT4vW{)H;G~XQ6VmrhimCaB%+`9c5O?=|g#Q5`bXK7@J$>iisFlu5te|%+RxeacOir*3RWcY17$Nm5H%9UEOkIeF@j!k- zrB<6%igHezIC0;^!F1~K8#&j}ZGYyo5|D|W$`zsplDwj{973+Y7%jjV+;=<4jEkIU zFPp#BwhMClTxNxk6NyA3kw_#Gi9{liNF)-8L?ZtHoa3-~Ybg3k00000NkvXXu0mjf DCjp3W delta 1808 zcmV+r2k-c!59$t(Z+`~mNkl$Ikb*bh1c3{z zof8mF5Oac<69isTP6!kS zHh{$M>`#;F1adygH?`A4*b9uxyDCD^f5;^56)mj~<<%&pB9wEW<(s@11) zra-B@_y&p(>VJtTYw(@n=hh_aCaFBQv9xX-g(fSH033nJD`OF9+I+@7(L|VT5R)V< zue9=rWRS>zizKZ9~51=Y~ho;68u}9-n}IlBW3FQ}Jw) zkt>Jy2D=XfaDbB~+~2+b2I|0QP`KaxHrD-5vR~dLo`3V@hmuQdtll4gQ=dehmKm4i zVDIjTb4HWWRzBbA&&}b*#uO@0*#hYUg2pOv_TQP5N6>(2;P_G<0G}PG*M#*gO3757 zl+zl~L~7o`@Mq-+DpGw3bBezfU@)?Yy`&Q3Gv$%M-m2H2r-;F2YvT;$MDnrvPT^=l zp|S$GZhr|va1ORa|L9_~cG{T?df#dJb=2D$W3U8Q#OdNSoRr_8A}*YW>O7j!1S}bj zH>S7|hsqm4W4>oKmvjy)EEb9^>F(`7MVy5(&WUGLLKT%Ls^lz8R92wYdZK0*3cz)i z5HwN))>=<{aPZw;$$BfUtW+0!V5nY=dtgc8#eWx>4nHqHZv)9vT^ww?&_wY-aZKpJ zt+yHzE-dhJ@fzpQ&&nvCpn?F#XeXLyepT=06ID+9(Z&iz3<+?gz7yL!I|J4Cz#o5) zKw}-07iXqrq`b!mN~zR)7{5?1X}l=?FMnLgRAMSe*I@6(O*qL!277&H+LHwwf!jjycS z>e8|lq5Opk%qRv>&TLG}WEtxgvI&#l9rG>u8H_DX!Wa?D#UfqG@@gIVlc7AI^e-bV z`_h`wJ&;WYvg5m{E9DW+;y^LDnD5Z+LVpQ_@~&IC6=S-`LWw3RA$>-d1y!ekv``|> zZbrFEL6o~q1!GmsaJ_B~5*YO2Pxr$hmB5_Qt7@&qF1jf$3$%kOd~z-T@v&zg)W!S3pwaypnItBEl~{27-yxVOc*0+Za64si}F|E1J9t;|Y-4+YBdqdFAnwlkr8#{hm1_RhBT zLbi@@>$ovRh==!wd58B!aNLmulh zYD^9?MpHWzumnF=E`fT^V%-5jF{G|DL34m#l)5?-MANyU??sT6{(qqtSGy4OgU#=N z5alk=WH)H#4!(fnCKukl8*pHz6pYG9=TzVne??I@j$yk@$3TDgo+>>DxpJaNG-S%H zL|^W*Jx0yLSv4l3?VPM3Fsw`4*M=oHGkK yoK^$>>Ozjk5;J#AY&_cgXY!4G+guqiKtQUWLGZ4{ zYcD=HKd*TE%e&g|uH@c%lfHa*?Z+2e6S|IGc(~yCoGtJFo>#Mq*)H+>QK0jO11fI+ zlB=s$sy&i){5Scy#iW^rJ)eJ-rg9XWzt^7Ky)k&(9ZOrm^EX!Z_a>{Pp8ovzWMbL3 zXAU;X9WBC(CA_ormPj0}2ufafRO8r`SzLy0hU=~btT61_xHQeFFR(}7RH&-wk*$Ys zh@#s^yCrO^gbr8m8_ipD+Pow0`QfdfruR)Z?6nPCDsk+8%(a3Ku3bMDDz%+lzVUk1 z%X6vTHmjp}9@}=DyQlD0$*X*a>bwxcw#Z{S`8UIZqf4Kto_cKfMdgUZv1$SJDvR`w z*Sy^$b=-_6I#lvc`kRqapjRt79y#zeq`!7XQR!c*MZl zmj9!u>NJV8m+Ebq-?aiu-HXFs?he0oa-aG6R7S(22HKXv^(!?t9yQS3c~bGd$MK)X zeyKcdKcc(0blc+ldcUO&j~QssJ?(WrcI(!MZ{${7+FVxJ`{eb_W6is5lX?@ws-y$H zZLWOhc5C7%|1Jwz+4p7b^6LBF@7uqvxoJtsU#{Z@j%U8zs|}L6|LOeUu$xwXcm8>N z&9!@47_iIlX!4ANW%u762?(wJyy%RuGmr3;zGJ!?y!eR7VV26H1s6fC zI~aGUR>!Ny(C5PSE0^D%p0;kiukC8VY#!k+k2!9xKfCXD^<_zWwuI+ewX;w4n}U)z b8d&vS{-u0u-`=USN & { + active?: boolean; + children: ReactNode; + iconSrc?: string; + wide?: boolean; +}; + +export function TabPill({ active, children, className, iconSrc, type = "button", wide, ...props }: TabPillProps) { + const tabPillClassName = ["tabPill", active ? "tabPill_active" : null, wide ? "tabPill_wide" : null, className].filter(Boolean).join(" "); + + return ( + + ); +} diff --git a/src/pages/Create/createTabIcons.ts b/src/pages/Create/createTabIcons.ts new file mode 100644 index 0000000..8f2f72b --- /dev/null +++ b/src/pages/Create/createTabIcons.ts @@ -0,0 +1,12 @@ +export type CreateTabIconName = "all" | "image" | "video" | "voice" | "template" | "character" | "background" | "characterAssets"; + +export const CREATE_TAB_ICON_SRC: Record = { + all: new URL("/src/assets/images/create/tabs/create_tab_all.png", import.meta.url).href, + image: new URL("/src/assets/images/create/tabs/create_tab_image.png", import.meta.url).href, + video: new URL("/src/assets/images/create/tabs/create_tab_video.png", import.meta.url).href, + voice: new URL("/src/assets/images/create/tabs/create_tab_voice.png", import.meta.url).href, + template: new URL("/src/assets/images/create/tabs/create_tab_template.png", import.meta.url).href, + character: new URL("/src/assets/images/create/tabs/create_tab_character.png", import.meta.url).href, + background: new URL("/src/assets/images/create/tabs/create_tab_background.png", import.meta.url).href, + characterAssets: new URL("/src/assets/images/create/tabs/create_tab_character_assets.png", import.meta.url).href, +}; diff --git a/src/pages/Create/index.scss b/src/pages/Create/index.scss index ff3a6e3..bd6df5c 100644 --- a/src/pages/Create/index.scss +++ b/src/pages/Create/index.scss @@ -131,49 +131,6 @@ box-sizing: border-box; } -.createPage__filterPill { - width: 91px; - height: 28px; - margin: 0; - padding: 4px 20px; - border: none; - border-radius: 18px; - background: #ffffff; - color: #333333; - font-size: 14px; - font-weight: 400; - line-height: normal; - cursor: pointer; - box-sizing: border-box; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 3px; - white-space: nowrap; -} - -.createPage__filterPillIcon { - flex-shrink: 0; - width: 20px; - height: 20px; - display: block; - object-fit: contain; -} - -.createPage__filterPillIcon_placeholder { - visibility: hidden; -} - -.createPage__filterPill_active { - background: #fbf0ff; - color: #6f47f5; -} - -.createPage__filterPill:focus-visible { - outline: 2px solid rgba(111, 71, 245, 0.45); - outline-offset: 2px; -} - .createPage__batchBtn { width: 91px; height: 36px; diff --git a/src/pages/Create/panels/InspirationLibraryPanel/index.scss b/src/pages/Create/panels/InspirationLibraryPanel/index.scss index ba5bdfe..121dd73 100644 --- a/src/pages/Create/panels/InspirationLibraryPanel/index.scss +++ b/src/pages/Create/panels/InspirationLibraryPanel/index.scss @@ -25,59 +25,6 @@ gap: 10px; } -.inspirationPanel__filterPill { - flex-shrink: 0; - width: 91px; - height: 28px; - margin: 0; - padding: 4px 20px; - border: none; - border-radius: 18px; - background: #ffffff; - color: #333333; - font-size: 14px; - font-weight: 400; - line-height: normal; - cursor: pointer; - box-sizing: border-box; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 3px; - white-space: nowrap; -} - -.inspirationPanel__filterPill_wide { - width: 97px; -} - -.inspirationPanel__filterPillIcon { - width: 20px; - height: 20px; - flex-shrink: 0; - display: block; - object-fit: contain; - filter: brightness(0) saturate(100%) invert(17%) sepia(0%) saturate(0%) hue-rotate(187deg) brightness(95%) contrast(91%); -} - -.inspirationPanel__filterPill_active .inspirationPanel__filterPillIcon { - filter: brightness(0) saturate(100%) invert(39%) sepia(93%) saturate(2844%) hue-rotate(240deg) brightness(98%) contrast(96%); -} - -.inspirationPanel__filterPillLabel { - flex-shrink: 0; -} - -.inspirationPanel__filterPill_active { - background: #fbf0ff; - color: #6f47f5; -} - -.inspirationPanel__filterPill:focus-visible { - outline: 2px solid rgba(111, 71, 245, 0.45); - outline-offset: 2px; -} - /* 设计稿：分类行底到「我的角色」标题区约 13px */ .inspirationPanel__content { margin-top: 20px; diff --git a/src/pages/Create/panels/InspirationLibraryPanel/index.tsx b/src/pages/Create/panels/InspirationLibraryPanel/index.tsx index 7ad521b..b5084f3 100644 --- a/src/pages/Create/panels/InspirationLibraryPanel/index.tsx +++ b/src/pages/Create/panels/InspirationLibraryPanel/index.tsx @@ -3,8 +3,10 @@ import { useTranslation } from "react-i18next"; import { AssetLibraryToolbar } from "./AssetLibraryToolbar"; import { BackgroundAssetsPanel, useBackgroundAssetsModel } from "./BackgroundAssets/BackgroundAssets"; import { TemplateAssetsPanel, useTemplateAssetsModel } from "./TemplateAssets/TemplateAssets"; +import { TabPill } from "@/components/TabPill"; import { CharacterLibrarySections } from "@/pages/Characters"; import { CharacterAssetsPanel, useCharacterAssetsModel } from "./CharacterAssetsPanel/CharacterAssetsPanel"; +import { CREATE_TAB_ICON_SRC, type CreateTabIconName } from "../../createTabIcons"; import "./index.scss"; export interface InspirationLibraryPanelProps { @@ -24,20 +26,13 @@ function useInspirationLibraryToolbar(initialFilter: InspirationFilterId = "back return { filter, selectFilter }; } -const FILTER_CONFIG: readonly InspirationFilterId[] = [ - "background", // 背景素材 - "character", // 角色 - "characterAssets", // 角色素材 - "templates", // 模板 +const FILTER_CONFIG: readonly { iconName: CreateTabIconName; id: InspirationFilterId; wide?: boolean }[] = [ + { iconName: "background", id: "background" }, // 背景素材 + { iconName: "character", id: "character" }, // 角色 + { iconName: "characterAssets", id: "characterAssets", wide: true }, // 角色素材 + { iconName: "template", id: "templates" }, // 模板 ]; -const INSPIRATION_FILTER_ICON_SRC: Record = { - background: new URL("/src/assets/images/create/tabs/create_tab_background.png", import.meta.url).href, - character: new URL("/src/assets/images/create/tabs/create_tab_character.png", import.meta.url).href, - characterAssets: new URL("/src/assets/images/create/tabs/create_tab_character_assets.png", import.meta.url).href, - templates: new URL("/src/assets/images/create/tabs/create_tab_template.png", import.meta.url).href, -}; - export default function InspirationLibraryPanel({ tabIdPrefix, setToolbarExtra }: InspirationLibraryPanelProps) { const { t } = useTranslation(); const { filter, selectFilter } = useInspirationLibraryToolbar("background"); @@ -52,11 +47,10 @@ export default function InspirationLibraryPanel({ tabIdPrefix, setToolbarExtra } () => (
- {FILTER_CONFIG.map((id) => ( - + {FILTER_CONFIG.map(({ iconName, id, wide }) => ( + selectFilter(id)}> + {t(`pages.create.inspiration.filters.${id}`)} + ))}
{showAssetToolbar ? ( diff --git a/src/pages/Create/panels/MyCreationsPanel/index.scss b/src/pages/Create/panels/MyCreationsPanel/index.scss index b382920..5279ede 100644 --- a/src/pages/Create/panels/MyCreationsPanel/index.scss +++ b/src/pages/Create/panels/MyCreationsPanel/index.scss @@ -35,19 +35,19 @@ list-style: none; } -.createPage__myCreationsList > .assetGalleryTile { +.createPage__myCreationsList>.assetGalleryTile { width: 219px; height: 219px; margin-bottom: 0; border-radius: 26px; } -.createPage__myCreationsList > .assetGalleryTile .assetGalleryTile__thumb, -.createPage__myCreationsList > .assetGalleryTile .assetGalleryTile__poster { +.createPage__myCreationsList>.assetGalleryTile .assetGalleryTile__thumb, +.createPage__myCreationsList>.assetGalleryTile .assetGalleryTile__poster { border-radius: 26px; } -.createPage__myCreationsList > .assetGalleryTile_pending { +.createPage__myCreationsList>.assetGalleryTile_pending { border-radius: 26px; } @@ -108,10 +108,8 @@ } .createPage__myCreationsCheckboxIcon { - position: absolute; - inset: -2px; - width: 25px; - height: 25px; + width: 21px; + height: 21px; display: block; } @@ -122,7 +120,7 @@ justify-content: center; } - .createPage__myCreationsList > .assetGalleryTile, + .createPage__myCreationsList>.assetGalleryTile, .createPage__myCreationsItem { width: 182px; height: auto; @@ -150,4 +148,4 @@ .createPage__batchBtn { align-self: flex-end; } -} +} \ No newline at end of file diff --git a/src/pages/Create/panels/MyCreationsPanel/index.tsx b/src/pages/Create/panels/MyCreationsPanel/index.tsx index dd768b2..be91dc3 100644 --- a/src/pages/Create/panels/MyCreationsPanel/index.tsx +++ b/src/pages/Create/panels/MyCreationsPanel/index.tsx @@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next"; import { useSearchParams } from "react-router-dom"; import { getTaskAssetForAsset, getTaskList, getTemplateTaskList, getAssetDetail, addPostLike, delPostLike, deleteAsset, deleteTemplateAsset, getPostDownloadUrls } from "@/api/api"; import { AssetGalleryTile, getAssetDragUrls, resolveAssetGalleryTile, useAssetGalleryVoicePlayback } from "@/components/AssetGalleryTile"; +import { TabPill } from "@/components/TabPill"; import { MY_CREATIONS_REFRESH_QUERY } from "@/constants"; import { formatLocalDate } from "@/utils"; import { openAssetDetailsDialog } from "@/dialog"; @@ -13,6 +14,7 @@ import { useImageDragTransfer, useWarmupImageDragUrls } from "@/hooks/useImageDr import { VoiceMusicDetailModal } from "@/pages/Voice/components/music/VoiceMusicDetailModal"; import { VOICE_MUSIC_SUB_TYPE } from "@/pages/Voice/mockData"; import { getVoiceMusicDetailNeighborId, parseVoiceMusicAssetDetail, type VoiceMusicDetailNavigation } from "@/pages/Voice/utils/voiceGalleryTaskUtils"; +import { CREATE_TAB_ICON_SRC, type CreateTabIconName } from "../../createTabIcons"; import "./index.scss"; const PAGE_SIZE = 20; @@ -27,24 +29,16 @@ export interface MyCreationsPanelProps { } /** 筛选项：title 对应文案 key，type 对应接口参数 */ -const MY_CREATIONS_FILTER_OPTIONS: { title: string; type: number }[] = [ - { title: "all", type: 0 }, - { title: "image", type: 1 }, - { title: "video", type: 2 }, - { title: "voice", type: 3 }, - { title: "template", type: 4 }, +const MY_CREATIONS_FILTER_OPTIONS: { iconName: CreateTabIconName; title: string; type: number }[] = [ + { iconName: "all", title: "all", type: 0 }, + { iconName: "image", title: "image", type: 1 }, + { iconName: "video", title: "video", type: 2 }, + { iconName: "voice", title: "voice", type: 3 }, + { iconName: "template", title: "template", type: 4 }, // { title: "character", type: 5 }, ]; -const MY_CREATIONS_FILTER_ICON_SRC: Record = { - all: new URL("/src/assets/images/create/tabs/create_tab_all.png", import.meta.url).href, - image: new URL("/src/assets/images/create/tabs/create_tab_image.png", import.meta.url).href, - video: new URL("/src/assets/images/create/tabs/create_tab_video.png", import.meta.url).href, - voice: new URL("/src/assets/images/create/tabs/create_tab_voice.png", import.meta.url).href, - template: new URL("/src/assets/images/create/tabs/create_tab_template.png", import.meta.url).href, -}; - -const MY_CREATIONS_BATCH_CHECKED_SRC = "https://www.figma.com/api/mcp/asset/73956270-6032-4730-94ec-3115dfde0970"; +const MY_CREATIONS_BATCH_CHECKED_SRC = new URL("@/assets/images/ic_dui.png", import.meta.url).href; function toMs(raw: any): number { if (raw == null || raw === "") return 0; @@ -328,7 +322,7 @@ export default function MyCreationsPanel({ tabIdPrefix, setToolbarExtra }: MyCre tRef.current = t; /** 始终指向最新 loadNextPage，供 IntersectionObserver 回调使用，减少 observer 反复绑定。 */ - const loadNextPageRef = useRef<() => Promise>(async () => {}); + const loadNextPageRef = useRef<() => Promise>(async () => { }); const todayKey = formatLocalDate(Date.now(), "YYYY-MM-DD"); const selectedCount = selectedAssetIds.size; @@ -883,12 +877,10 @@ export default function MyCreationsPanel({ tabIdPrefix, setToolbarExtra }: MyCre
{MY_CREATIONS_FILTER_OPTIONS.map((option) => { const selected = selectedType === option.type; - const filterIconSrc = MY_CREATIONS_FILTER_ICON_SRC[option.title]; return ( - + ); })}
@@ -996,11 +988,11 @@ export default function MyCreationsPanel({ tabIdPrefix, setToolbarExtra }: MyCre batchMode ? undefined : (voiceRowKey, evt) => { - if (evt.key !== "Enter" && evt.key !== " ") return; - evt.preventDefault(); - evt.stopPropagation(); - toggleVoicePlayback(voiceRowKey, evt.currentTarget.closest("[data-asset-gallery-tile]")); - } + if (evt.key !== "Enter" && evt.key !== " ") return; + evt.preventDefault(); + evt.stopPropagation(); + toggleVoicePlayback(voiceRowKey, evt.currentTarget.closest("[data-asset-gallery-tile]")); + } } onVoiceAudioEnded={onVoiceAudioEnded} onTileClick={openDetails} diff --git a/src/pages/Create/panels/MyFavoritePanel/index.tsx b/src/pages/Create/panels/MyFavoritePanel/index.tsx index dd3c1a7..99556bc 100644 --- a/src/pages/Create/panels/MyFavoritePanel/index.tsx +++ b/src/pages/Create/panels/MyFavoritePanel/index.tsx @@ -3,8 +3,10 @@ import { useTranslation } from "react-i18next"; import { useSearchParams } from "react-router-dom"; import { getPostLikeList, getUserLikeCharacterList } from "@/api/api"; import { AssetGalleryTile, getAssetDragUrls, resolveAssetGalleryTile, useAssetGalleryVoicePlayback } from "@/components/AssetGalleryTile"; +import { TabPill } from "@/components/TabPill"; import { openAssetDetailsDialog, openCharacterDetailDialog } from "@/dialog"; import { useImageDragTransfer } from "@/hooks/useImageDragTransfer"; +import { CREATE_TAB_ICON_SRC, type CreateTabIconName } from "../../createTabIcons"; import "./index.scss"; const PAGE_SIZE = 20; @@ -14,34 +16,21 @@ export interface MyFavoritePanelProps { } /** 筛选项：title 对应文案 key，assetType 对应接口参数（与「我的创造」一致） */ -const MY_FAVORITE_FILTER_OPTIONS: { title: string; assetType: string }[] = [ - { title: "all", assetType: "0" }, - { title: "image", assetType: "1" }, - { title: "video", assetType: "2" }, - { title: "voice", assetType: "3" }, - { title: "template", assetType: "4" }, - { title: "character", assetType: "5" }, +const MY_FAVORITE_FILTER_OPTIONS: { assetType: string; iconName: CreateTabIconName; title: string }[] = [ + { assetType: "0", iconName: "all", title: "all" }, + { assetType: "1", iconName: "image", title: "image" }, + { assetType: "2", iconName: "video", title: "video" }, + { assetType: "3", iconName: "voice", title: "voice" }, + { assetType: "4", iconName: "template", title: "template" }, + { assetType: "5", iconName: "character", title: "character" }, ]; -const MY_FAVORITE_FILTER_ICON_SRC: Record = { - all: new URL("/src/assets/images/create/tabs/create_tab_all.png", import.meta.url).href, - image: new URL("/src/assets/images/create/tabs/create_tab_image.png", import.meta.url).href, - video: new URL("/src/assets/images/create/tabs/create_tab_video.png", import.meta.url).href, - voice: new URL("/src/assets/images/create/tabs/create_tab_voice.png", import.meta.url).href, - template: new URL("/src/assets/images/create/tabs/create_tab_template.png", import.meta.url).href, - character: new URL("/src/assets/images/create/tabs/create_tab_character.png", import.meta.url).href, -}; - function buildFavoriteListParams(assetType: string, pageNum: number): { page: number; pageSize: number; assetType?: string } { const params: { page: number; pageSize: number; assetType?: string } = { page: pageNum, pageSize: PAGE_SIZE }; if (assetType !== "0") params.assetType = assetType; return params; } -function joinClassNames(...parts: Array) { - return parts.filter(Boolean).join(" "); -} - function findScrollContainer(node: HTMLElement | null): HTMLElement | null { let current = node?.parentElement ?? null; while (current != null) { @@ -210,9 +199,9 @@ export default function MyFavoritePanel({ tabIdPrefix, setToolbarExtra }: MyFavo const translatedFilters = useMemo( () => - MY_FAVORITE_FILTER_OPTIONS.map(({ title, assetType }) => ({ + MY_FAVORITE_FILTER_OPTIONS.map(({ assetType, iconName, title }) => ({ assetType, - iconSrc: MY_FAVORITE_FILTER_ICON_SRC[title], + iconName, label: t(`pages.create.filters.${title}`), })), [t], @@ -221,19 +210,10 @@ export default function MyFavoritePanel({ tabIdPrefix, setToolbarExtra }: MyFavo const toolbarExtra = useMemo( () => (
- {translatedFilters.map(({ assetType, iconSrc, label }) => ( - + ))}
),