diff --git a/src/dialog/app-download-mac/index.tsx b/src/dialog/app-download-mac/index.tsx index 2741fbf..2f370f1 100644 --- a/src/dialog/app-download-mac/index.tsx +++ b/src/dialog/app-download-mac/index.tsx @@ -1,4 +1,5 @@ import { Message } from "@arco-design/web-react"; +import { createPortal } from "react-dom"; import { useTranslation } from "react-i18next"; import "./index.scss"; @@ -86,11 +87,14 @@ export default function AppMacDownloadDialog({ } export function AppMacDownloadDialogOverlay({ macIntelUrl, macArmUrl, windowsUrl, onClose }: AppMacDownloadDialogProps) { - return ( + if (typeof document === "undefined") return null; + + return createPortal(
onClose?.()}>
event.stopPropagation()}>
-
+ , + document.body, ); } diff --git a/src/layouts/Layout/Layout.scss b/src/layouts/Layout/Layout.scss index 0a29835..7e17e7a 100644 --- a/src/layouts/Layout/Layout.scss +++ b/src/layouts/Layout/Layout.scss @@ -146,79 +146,6 @@ } } - .layoutShell__sidebarCollapse { - position: absolute; - top: calc(var(--layout-promo-height) + 27px); - left: max(16px, calc(var(--layout-sidebar-width) - 18px)); - z-index: 45; - width: 36px; - height: 36px; - padding: 10px; - border: 0; - border-radius: 24px; - background: #ffffff; - color: #333333; - cursor: pointer; - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 3px; - transition: - top var(--layout-sidebar-transition), - left var(--layout-sidebar-transition), - width var(--layout-sidebar-transition), - height var(--layout-sidebar-transition), - padding var(--layout-sidebar-transition), - transform var(--layout-sidebar-transition), - box-shadow var(--layout-sidebar-transition); - - .layoutShell__sidebarCollapseText { - max-height: 0; - opacity: 0; - overflow: hidden; - color: #333333; - font-size: 14px; - font-weight: 400; - line-height: 20px; - text-align: center; - white-space: pre-line; - transition: - max-height var(--layout-sidebar-transition), - opacity 0.14s ease; - } - - img { - width: 16px; - height: 16px; - display: block; - object-fit: contain; - transition: transform var(--layout-sidebar-transition); - } - } - - &.layoutShell_sidebarCollapsed .layoutShell__sidebarCollapse { - top: calc(var(--layout-promo-height) + ((100vh - var(--layout-promo-height)) / 2)); - left: 0; - width: 36px; - height: 91px; - padding: 16px 10px; - transform: translateY(-50%); - - .layoutShell__sidebarCollapseText { - max-height: 40px; - opacity: 1; - transition: - max-height var(--layout-sidebar-transition), - opacity 0.16s ease 0.1s; - } - } - - &.layoutShell_sidebarCollapsed .layoutShell__sidebarCollapse img { - transform: rotate(-180deg); - } - .layoutShell__topbar { position: absolute; top: var(--layout-promo-height); @@ -649,10 +576,6 @@ background: #ffffff; } - &.layoutShell_sidebarCollapsed .layoutShell__body { - background: #f2f2f2; - } - .layoutShell__sidebar { position: absolute; top: 0; @@ -665,15 +588,7 @@ box-sizing: border-box; display: flex; flex-direction: column; - transition: - opacity var(--layout-sidebar-transition), - transform var(--layout-sidebar-transition); - } - - &.layoutShell_sidebarCollapsed .layoutShell__sidebar { - transform: translateX(-110px); - opacity: 0; - pointer-events: none; + transition: transform var(--layout-sidebar-transition); } .layoutShell__sidebar_footerPopoverOpen { @@ -911,6 +826,7 @@ overflow: auto; scrollbar-width: none; -ms-overflow-style: none; + padding-left: 30px; >.createPage { height: 100%; @@ -1082,20 +998,6 @@ padding: 14px 8px; } - &.layoutShell_sidebarCollapsed .layoutShell__sidebar { - transform: translateX(-76px); - } - - .layoutShell__sidebarCollapse { - top: 17px; - left: max(10px, calc(var(--layout-sidebar-width) - 18px)); - } - - &.layoutShell_sidebarCollapsed .layoutShell__sidebarCollapse { - top: calc(var(--layout-promo-height) + ((100vh - var(--layout-promo-height)) / 2)); - left: 0; - } - .layoutShell__brand, .layoutShell__sideNav, .layoutShell__footer, diff --git a/src/layouts/Layout/Layout.tsx b/src/layouts/Layout/Layout.tsx index b1e4898..67c1b6d 100644 --- a/src/layouts/Layout/Layout.tsx +++ b/src/layouts/Layout/Layout.tsx @@ -43,7 +43,6 @@ interface LayoutSideNavIconProps { const LAYOUT_NAV_ASSETS = { logo: new URL("@/assets/images/layout/nav/popi-logo.png", import.meta.url).href, - collapse: new URL("@/assets/images/layout/nav/collapse.png", import.meta.url).href, explore: new URL("@/assets/images/layout/nav/explore.png", import.meta.url).href, exploreActive: new URL("@/assets/images/layout/nav/explore_active.png", import.meta.url).href, characters: new URL("@/assets/images/layout/nav/characters.png", import.meta.url).href, @@ -81,6 +80,13 @@ const LAYOUT_SIDE_NAV_ITEMS: readonly LayoutSideNavItem[] = [ activeIconSrc: LAYOUT_NAV_ASSETS.charactersActive, to: ROUTES.CHARACTERS, }, + { + id: "voice", + labelKey: "layout.nav.voice", + iconSrc: LAYOUT_NAV_ASSETS.voice, + activeIconSrc: LAYOUT_NAV_ASSETS.voiceActive, + to: ROUTES.VOICE, + }, { id: "create", labelKey: "layout.nav.create", @@ -96,13 +102,6 @@ const LAYOUT_SIDE_NAV_ITEMS: readonly LayoutSideNavItem[] = [ to: CANVAS_BASE_URL ?? "", badgeKey: "layout.nav.canvasBadge", }, - { - id: "voice", - labelKey: "layout.nav.voice", - iconSrc: LAYOUT_NAV_ASSETS.voice, - activeIconSrc: LAYOUT_NAV_ASSETS.voiceActive, - to: ROUTES.VOICE, - }, ]; const LANGUAGE_LABEL_KEYS: Record = { @@ -188,7 +187,6 @@ export function Layout({ children }: LayoutProps) { const [languageMenuOpen, setLanguageMenuOpen] = useState(false); const [footerPopoverOpen, setFooterPopoverOpen] = useState(false); const [topbarServiceQrOpen, setTopbarServiceQrOpen] = useState(false); - const [sidebarCollapsed, setSidebarCollapsed] = useState(false); const [promoBarVisible, setPromoBarVisible] = useState(() => !isLayoutPromoBarDismissed()); const activePromptPanelHost = useComposerStore((s) => s.activePromptPanelHost); @@ -204,7 +202,6 @@ export function Layout({ children }: LayoutProps) { const requestComposerCollapse = useComposerStore((s) => s.requestComposerCollapse); const requestComposerExpand = useComposerStore((s) => s.requestComposerExpand); const prevPathnameRef = useRef(pathname); - const prevPathnameForCharactersCreateRef = useRef(pathname); useEffect(() => { if (!getToken()) { @@ -254,11 +251,8 @@ export function Layout({ children }: LayoutProps) { } }; - /** 角色创建页：侧栏固定收起且不可展开 */ - const isCharactersCreateRoute = pathname === ROUTES.CHARACTERS_CREATE; const isVoiceArea = pathname === ROUTES.VOICE || pathname.startsWith(`${ROUTES.VOICE_MUSIC_SHARE}/`); const shouldShowFloatingComposer = pathname !== ROUTES.SUBSCRIBE && pathname !== ROUTES.CHARACTERS_CREATE && !isVoiceArea; - const effectiveSidebarCollapsed = isCharactersCreateRoute || sidebarCollapsed; const handlePromoBarClose = useCallback((evt: ReactMouseEvent) => { evt.stopPropagation(); @@ -294,14 +288,6 @@ export function Layout({ children }: LayoutProps) { window.scrollTo(0, 0); }, [pathname]); - useEffect(() => { - const prev = prevPathnameForCharactersCreateRef.current; - if (prev === ROUTES.CHARACTERS_CREATE && pathname !== ROUTES.CHARACTERS_CREATE) { - setSidebarCollapsed(false); - } - prevPathnameForCharactersCreateRef.current = pathname; - }, [pathname]); - useEffect(() => { if (prevPathnameRef.current === pathname) return; prevPathnameRef.current = pathname; @@ -420,7 +406,7 @@ export function Layout({ children }: LayoutProps) {
-
+
{promoBarVisible ? (
navigate(ROUTES.SUBSCRIBE)}>
@@ -453,19 +439,6 @@ export function Layout({ children }: LayoutProps) {
) : null} -
@@ -688,7 +661,7 @@ export function Layout({ children }: LayoutProps) { const isActive = pathname === item.to || (item.to !== "/" && pathname.startsWith(`${item.to}/`)); const className = ["layoutShell__sideItem", isActive ? "layoutShell__sideItem_active" : ""].filter(Boolean).join(" "); return ( - handleLayoutNavClick(evt, item.to)}> + handleLayoutNavClick(evt, item.to)}> {t(item.labelKey)} {item.badgeKey ? {t(item.badgeKey)} : null} @@ -702,7 +675,7 @@ export function Layout({ children }: LayoutProps) { const isActive = pathname === item.to || (item.to !== "/" && pathname.startsWith(`${item.to}/`)); const className = ["layoutShell__sideItem", isActive ? "layoutShell__sideItem_active" : ""].filter(Boolean).join(" "); return ( - handleLayoutNavClick(evt, item.to)}> + handleLayoutNavClick(evt, item.to)}> {t(item.labelKey)} diff --git a/src/layouts/globalPromptPanel/globalPromptPanel.scss b/src/layouts/globalPromptPanel/globalPromptPanel.scss index 5beede8..9ac0e29 100644 --- a/src/layouts/globalPromptPanel/globalPromptPanel.scss +++ b/src/layouts/globalPromptPanel/globalPromptPanel.scss @@ -675,6 +675,10 @@ background: #ffffff; box-shadow: 0 2px 15px 0 rgba(51, 51, 51, 0.2); box-sizing: border-box; + max-height: min(620px, calc(100vh - 120px)); + display: flex; + flex-direction: column; + overflow: hidden; .layoutShell__composerModelDropdownTitle { margin: 0; @@ -689,6 +693,11 @@ display: flex; flex-direction: column; gap: 0; + min-height: 0; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; + scrollbar-width: thin; .layoutShell__composerModelDropdownItem { width: 100%; @@ -894,6 +903,10 @@ background: #ffffff; box-shadow: 0 2px 15px 0 rgba(51, 51, 51, 0.2); box-sizing: border-box; + max-height: min(620px, calc(100vh - 120px)); + display: flex; + flex-direction: column; + overflow: hidden; .layoutShell__composerModelDropdownTitle { margin: 0; @@ -908,6 +921,11 @@ display: flex; flex-direction: column; gap: 0; + min-height: 0; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; + scrollbar-width: thin; } .layoutShell__composerModelDropdownItem { @@ -971,6 +989,10 @@ background: #ffffff; box-shadow: 0 2px 15px 0 rgba(51, 51, 51, 0.2); box-sizing: border-box; + max-height: min(620px, calc(100vh - 120px)); + display: flex; + flex-direction: column; + overflow: hidden; .layoutShell__composerModelDropdownTitle { margin: 0; @@ -985,6 +1007,11 @@ display: flex; flex-direction: column; gap: 0; + min-height: 0; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; + scrollbar-width: thin; } .layoutShell__composerModelDropdownItem { @@ -1268,4 +1295,4 @@ display: block; flex-shrink: 0; } -} \ No newline at end of file +} diff --git a/src/layouts/globalPromptPanel/globalPromptPanel.tsx b/src/layouts/globalPromptPanel/globalPromptPanel.tsx index 5c9840d..ff17089 100644 --- a/src/layouts/globalPromptPanel/globalPromptPanel.tsx +++ b/src/layouts/globalPromptPanel/globalPromptPanel.tsx @@ -115,6 +115,7 @@ type AiCategoryItem = { taskSubType: number; name?: string; icon?: string; + activeIcon?: string; id?: number | string; }; @@ -834,6 +835,7 @@ export function GlobalPromptPanel({ mode = "floating", embeddedVisible = false, taskSubType: subTypeNum, name: typeof row.name === "string" ? row.name : undefined, icon: typeof row.icon === "string" ? row.icon : undefined, + activeIcon: typeof row.activeIcon === "string" ? row.activeIcon : undefined, id: typeof row.id === "number" || typeof row.id === "string" ? row.id : undefined, }; }) @@ -1618,6 +1620,7 @@ export function GlobalPromptPanel({ mode = "floating", embeddedVisible = false, > {aiCategories.map((item, idx) => { const isActive = activeTaskSubType === item.taskSubType; + const tabIcon = isActive ? item.activeIcon || item.icon : item.icon; return ( ); diff --git a/src/layouts/globalPromptPanel/utils.ts b/src/layouts/globalPromptPanel/utils.ts index 04584fd..cc9ec66 100644 --- a/src/layouts/globalPromptPanel/utils.ts +++ b/src/layouts/globalPromptPanel/utils.ts @@ -35,6 +35,7 @@ export const OTHER_CATEGORY = [ taskSubType: 999, name: "Template", icon: new URL("/src/assets/images/AiCategories_template.png", import.meta.url).href, + activeIcon: new URL("/src/assets/images/AiCategories_template.png", import.meta.url).href, }, ]; diff --git a/src/locales/en-US.json b/src/locales/en-US.json index c855e7c..fedf170 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -12,9 +12,6 @@ "layout.aria.sideNav": "Sidebar navigation", "layout.aria.content": "Content", "layout.brand.aria": "Popi home", - "layout.sidebar.expand": "Expand sidebar", - "layout.sidebar.collapse": "Collapse sidebar", - "layout.sidebar.menuLabel": "Menu", "layout.language.tooltip": "Switch language", "layout.language.menuAria": "Switch language", "layout.language.zhCN": "简体中文", @@ -88,7 +85,7 @@ "layout.nav.voice": "Voice", "layout.nav.points": "Points", "layout.topbar.skill": "SKILL", - "layout.footer.subscribe": "Subscribe", + "layout.footer.subscribe": "Membership", "layout.footer.profile": "Profile", "layout.footer.navAria": "Footer navigation", "layout.footerPopover.menuAria": "More and legal", diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json index 1bc0284..1c0fb8d 100644 --- a/src/locales/zh-CN.json +++ b/src/locales/zh-CN.json @@ -12,9 +12,6 @@ "layout.aria.sideNav": "侧边栏菜单", "layout.aria.content": "内容区", "layout.brand.aria": "Popi 首页", - "layout.sidebar.expand": "展开侧边栏", - "layout.sidebar.collapse": "收起侧边栏", - "layout.sidebar.menuLabel": "菜\n单", "layout.language.tooltip": "切换语言", "layout.language.menuAria": "切换语言", "layout.language.zhCN": "简体中文", @@ -88,7 +85,7 @@ "layout.nav.voice": "声音", "layout.nav.points": "积分", "layout.topbar.skill": "SKILL", - "layout.footer.subscribe": "订阅", + "layout.footer.subscribe": "会员", "layout.footer.profile": "个人", "layout.footer.navAria": "底部导航", "layout.footerPopover.menuAria": "更多与协议", diff --git a/src/locales/zh-TW.json b/src/locales/zh-TW.json index d5ee159..01531bc 100644 --- a/src/locales/zh-TW.json +++ b/src/locales/zh-TW.json @@ -12,9 +12,6 @@ "layout.aria.sideNav": "側邊欄選單", "layout.aria.content": "內容區", "layout.brand.aria": "Popi 首頁", - "layout.sidebar.expand": "展開側邊欄", - "layout.sidebar.collapse": "收起側邊欄", - "layout.sidebar.menuLabel": "菜\n單", "layout.language.tooltip": "切換語言", "layout.language.menuAria": "切換語言", "layout.language.zhCN": "简体中文", @@ -88,7 +85,7 @@ "layout.nav.voice": "聲音", "layout.nav.points": "積分", "layout.topbar.skill": "SKILL", - "layout.footer.subscribe": "訂閱", + "layout.footer.subscribe": "會員", "layout.footer.profile": "個人", "layout.footer.navAria": "底部導覽", "layout.footerPopover.menuAria": "更多與協議", diff --git a/src/pages/CharactersCreate/index.scss b/src/pages/CharactersCreate/index.scss index 827e66a..6cc194c 100644 --- a/src/pages/CharactersCreate/index.scss +++ b/src/pages/CharactersCreate/index.scss @@ -10,7 +10,7 @@ $font: "Source Han Sans CN", "Noto Sans SC", system-ui, sans-serif; overflow: hidden; display: flex; flex-direction: column; - background: #f7f7f7; + // background: #f7f7f7; *, *::before, @@ -648,7 +648,7 @@ $font: "Source Han Sans CN", "Noto Sans SC", system-ui, sans-serif; box-sizing: border-box; } -.charactersCreate__composerUploadCard > img { +.charactersCreate__composerUploadCard>img { width: 25px; height: 25px; display: block; @@ -1531,6 +1531,7 @@ $font: "Source Han Sans CN", "Noto Sans SC", system-ui, sans-serif; } @media (prefers-reduced-motion: reduce) { + .charactersCreate__rightPromptCardMain, .charactersCreate__rightPromptCardMask { transition-duration: 0.01ms; @@ -1741,4 +1742,4 @@ $font: "Source Han Sans CN", "Noto Sans SC", system-ui, sans-serif; .charactersCreate__createGlobal.charactersCreate__createGlobal_active { cursor: pointer; opacity: 1; -} +} \ No newline at end of file diff --git a/src/pages/Create/index.scss b/src/pages/Create/index.scss index feab0a9..9b797b0 100644 --- a/src/pages/Create/index.scss +++ b/src/pages/Create/index.scss @@ -9,14 +9,14 @@ overflow: hidden; display: flex; flex-direction: column; - background: #f9f9f9; + background: #f2f2f2; } .createPage__toolbar { flex-shrink: 0; padding: 22px 29px 16px; box-sizing: border-box; - background: #f9f9f9; + background: #f2f2f2; } .createPage__toolbar_primary_only { @@ -106,7 +106,7 @@ flex-wrap: wrap; gap: 10px 16px; margin-top: 0; - background: #f9f9f9; + // background: #f9f9f9; } .createPage__filters { @@ -137,7 +137,7 @@ } .createPage__filterPill_active { - background: #f0f0f0; + background: #ffffff; color: #333333; } @@ -247,4 +247,4 @@ flex-direction: column; align-items: stretch; } -} +} \ No newline at end of file diff --git a/src/pages/Explore/ExploreTemplateFeed/ExploreTemplateFeed.tsx b/src/pages/Explore/ExploreTemplateFeed/ExploreTemplateFeed.tsx index 2e8745e..ce43222 100644 --- a/src/pages/Explore/ExploreTemplateFeed/ExploreTemplateFeed.tsx +++ b/src/pages/Explore/ExploreTemplateFeed/ExploreTemplateFeed.tsx @@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next"; import "./ExploreTemplateFeed.scss"; const FEED_PAGE_SIZE = 50; -const TEMPLATE_LOGO_SRC = new URL("/src/assets/images/layout/nav/popi-logo.png", import.meta.url).href; +const TEMPLATE_LOGO_SRC = new URL("/src/assets/images/popi_avatar.png", import.meta.url).href; type TemplateListResponse = { data?: { diff --git a/src/pages/Profile/index.scss b/src/pages/Profile/index.scss index ba04a6e..8c470fd 100644 --- a/src/pages/Profile/index.scss +++ b/src/pages/Profile/index.scss @@ -1,7 +1,7 @@ .profilePage { height: 100%; padding: 0 0 44px; - background: #f9f9f9; + background: #f2f2f2; overflow-y: scroll; scrollbar-width: none; will-change: transform; // 提示浏览器优化滚动容器 @@ -200,7 +200,7 @@ margin-right: 0; border: 0; border-radius: 9px; - background: #f9f9f9; + // background: #f9f9f9; color: #333333; font-size: 14px; font-weight: 400; @@ -346,4 +346,4 @@ column-gap: 14px; } } -} +} \ No newline at end of file diff --git a/src/pages/Voice/index.scss b/src/pages/Voice/index.scss index ba65f7f..c25a8b6 100644 --- a/src/pages/Voice/index.scss +++ b/src/pages/Voice/index.scss @@ -9,7 +9,7 @@ $font: "Source Han Sans CN", "Noto Sans SC", system-ui, sans-serif; display: flex; flex-direction: column; // overflow: hidden; - background: #f9f9f9; + background: #f2f2f2; position: relative; --voice-player-bar-bottom: calc(20px + 12px); @@ -108,7 +108,7 @@ $font: "Source Han Sans CN", "Noto Sans SC", system-ui, sans-serif; flex: 1 1 0; min-width: 0; min-height: 0; - background: #f9f9f9; + // background: #f9f9f9; border-radius: 24px; } @@ -131,7 +131,7 @@ $font: "Source Han Sans CN", "Noto Sans SC", system-ui, sans-serif; padding: 25px; border: none; border-radius: 24px; - background: #f0f0f0; + background: #ffffff; cursor: pointer; text-align: left; } @@ -619,7 +619,7 @@ $font: "Source Han Sans CN", "Noto Sans SC", system-ui, sans-serif; align-items: center; gap: 10px; padding-top: 4px; - background: #f9f9f9; + // background: #f9f9f9; .layoutShell__composerModelDropdownTrigger { display: inline-flex; diff --git a/src/pages/subscribe/index.scss b/src/pages/subscribe/index.scss index c849771..030f03e 100644 --- a/src/pages/subscribe/index.scss +++ b/src/pages/subscribe/index.scss @@ -1,4 +1,7 @@ .subscribe-page { + min-height: 100%; + background: #f2f2f2; + .subscribe-overview { width: min(100%, 100%); margin: 13px auto 0; diff --git a/src/store/index.ts b/src/store/index.ts index 8410a67..801d4fc 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,12 +1,5 @@ import { create } from "zustand"; -interface AppState { - /** 示例：侧栏折叠 */ - sidebarCollapsed: boolean; - setSidebarCollapsed: (v: boolean) => void; -} +type AppState = Record; -export const useAppStore = create((set) => ({ - sidebarCollapsed: false, - setSidebarCollapsed: (v) => set({ sidebarCollapsed: v }), -})); +export const useAppStore = create(() => ({}));