From cfe46b41448a24f904c2dbda84d632f77d1942c6 Mon Sep 17 00:00:00 2001 From: Ethan-Zhang Date: Fri, 17 Oct 2025 12:08:02 +0800 Subject: [PATCH] =?UTF-8?q?Fix:=20=E9=9D=99=E6=80=81=E8=B5=84=E6=BA=90?= =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=BC=95=E5=85=A5=E9=81=BF=E5=85=8D=E7=94=9F?= =?UTF-8?q?=E4=BA=A7=E7=8E=AF=E5=A2=83=E6=97=A0=E6=B3=95=E8=8E=B7=E5=8F=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/composables/useAssets.ts | 45 +++++++++++++++-- src/styles/theme.scss | 24 ++++----- src/utils/cssAssetResolver.ts | 94 +++++++++++++++++------------------ 3 files changed, 97 insertions(+), 66 deletions(-) diff --git a/src/composables/useAssets.ts b/src/composables/useAssets.ts index 88b09b2..8660f9c 100644 --- a/src/composables/useAssets.ts +++ b/src/composables/useAssets.ts @@ -24,26 +24,61 @@ export function useAssets() { /** * 获取图片 URL - * @param imagePath 图片路径 + * @param imagePath 图片路径（相对于 src/assets/images/） * @returns 处理后的图片 URL */ const getImageUrl = (imagePath: string): string => { - return resolveAssetUrl(`/assets/images/${imagePath}`); + try { + // 使用 Vite 的 new URL() 构造函数来获取正确的打包后路径 + // 这是 Vite 推荐的静态资源处理方式 + const imageUrl = new URL(`../assets/images/${imagePath}`, import.meta.url).href; + return resolveAssetUrl(imageUrl); + } catch (error) { + console.warn(`Failed to resolve image path: ${imagePath}`, error); + // 回退方案：直接使用相对路径 + return resolveAssetUrl(`./assets/images/${imagePath}`); + } }; /** * 获取 SVG 图标 URL - * @param iconPath SVG 图标路径 + * @param iconPath SVG 图标路径（相对于 src/assets/svg/） * @returns 处理后的图标 URL */ const getSvgUrl = (iconPath: string): string => { - return resolveAssetUrl(`/assets/svg/${iconPath}`); + try { + // 使用 Vite 的 new URL() 构造函数来获取正确的打包后路径 + const svgUrl = new URL(`../assets/svg/${iconPath}`, import.meta.url).href; + return resolveAssetUrl(svgUrl); + } catch (error) { + console.warn(`Failed to resolve SVG path: ${iconPath}`, error); + // 回退方案：直接使用相对路径 + return resolveAssetUrl(`./assets/svg/${iconPath}`); + } + }; + + /** + * 通用的静态资源获取函数 + * @param assetPath 资源路径（相对于 src/assets/） + * @returns 处理后的资源 URL + */ + const getAssetUrl = (assetPath: string): string => { + try { + // 使用 Vite 的 new URL() 构造函数来获取正确的打包后路径 + const fullAssetUrl = new URL(`../assets/${assetPath}`, import.meta.url).href; + return resolveAssetUrl(fullAssetUrl); + } catch (error) { + console.warn(`Failed to resolve asset path: ${assetPath}`, error); + // 回退方案：直接使用相对路径 + return resolveAssetUrl(`./assets/${assetPath}`); + } }; return { resolveAsset, resolveAssets, getImageUrl, - getSvgUrl + getSvgUrl, + getAssetUrl }; } diff --git a/src/styles/theme.scss b/src/styles/theme.scss index 947a1ac..c77b986 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -1,6 +1,6 @@ body[theme='dark'] { - --o-main-bg: var(--bg-dark, url('/src/assets/images/dark_bg_1.webp')); + --o-main-bg: var(--bg-dark, url('@/assets/images/dark_bg_1.webp')); --o-bg-dialog:var(--o-bg-color-base); --o-button-bg:rgb(99 149 253); --o-tag-text-color:rgb(99 149 253); @@ -15,16 +15,16 @@ body[theme='dark'] { --o-tag-code-bg:rgb(168 67 205 0.3); --o-tag-qa-color:rgb(235 175 0); --o-tag-qa-bg:rgb(66 53 0); - --o-empty-img-pending: var(--empty-pending-dark, url('/src/assets/images/empty_pending_dark.svg')); - --o-empty-img-failed: var(--empty-failed-dark, url('/src/assets/images/empty_failed_dark.svg')); - --o-empty-img-running: var(--empty-running-dark, url('/src/assets/images/empty_running_dark.svg')); - --o-task-list-icon: var(--task-list-dark, url('/src/assets/svg/dark_taskList.svg')); - --o-task-score-icon: var(--task-score-dark, url('/src/assets/svg/dark_taskScore.svg')); + --o-empty-img-pending: var(--empty-pending-dark, url('@/assets/images/empty_pending_dark.svg')); + --o-empty-img-failed: var(--empty-failed-dark, url('@/assets/images/empty_failed_dark.svg')); + --o-empty-img-running: var(--empty-running-dark, url('@/assets/images/empty_running_dark.svg')); + --o-task-list-icon: var(--task-list-dark, url('@/assets/svg/dark_taskList.svg')); + --o-task-score-icon: var(--task-score-dark, url('@/assets/svg/dark_taskScore.svg')); --o-task-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3); } body[theme='light'] { - --o-main-bg: var(--bg-light, url('/src/assets/images/light_bg_1.webp')); + --o-main-bg: var(--bg-light, url('@/assets/images/light_bg_1.webp')); --o-bg-dialog:var(--o-bg-color-base); --o-button-bg:rgb(99 149 253); --o-tag-text-color:rgb(99 149 253); @@ -39,10 +39,10 @@ body[theme='light'] { --o-tag-code-bg:rgb(189 69 232 0.3); --o-tag-qa-color:rgb(235 175 0); --o-tag-qa-bg:rgb(249 235 184); - --o-empty-img-pending: var(--empty-pending-light, url('/src/assets/images/empty_pending.svg')); - --o-empty-img-failed: var(--empty-failed-light, url('/src/assets/images/empty_failed.svg')); - --o-empty-img-running: var(--empty-running-light, url('/src/assets/images/empty_running.svg')); - --o-task-list-icon: var(--task-list-light, url('/src/assets/svg/light_taskList.svg')); - --o-task-score-icon: var(--task-score-light, url('/src/assets/svg/light_taskScore.svg')); + --o-empty-img-pending: var(--empty-pending-light, url('@/assets/images/empty_pending.svg')); + --o-empty-img-failed: var(--empty-failed-light, url('@/assets/images/empty_failed.svg')); + --o-empty-img-running: var(--empty-running-light, url('@/assets/images/empty_running.svg')); + --o-task-list-icon: var(--task-list-light, url('@/assets/svg/light_taskList.svg')); + --o-task-score-icon: var(--task-score-light, url('@/assets/svg/light_taskScore.svg')); --o-task-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3); } \ No newline at end of file diff --git a/src/utils/cssAssetResolver.ts b/src/utils/cssAssetResolver.ts index 5d37d43..e5fdaeb 100644 --- a/src/utils/cssAssetResolver.ts +++ b/src/utils/cssAssetResolver.ts @@ -3,6 +3,7 @@ * 在运行时动态替换 CSS 变量中的静态资源路径 */ import { isInIframe, getIntegrationOrigin } from './index'; +import { useAssets } from '@/composables/useAssets'; /** * 初始化 CSS 静态资源解析 @@ -16,57 +17,52 @@ export function initCssAssetResolver() { return; } - const integrationOrigin = getIntegrationOrigin(); - const basePath = import.meta.env.BASE_URL || '/witchaind/'; - - // 构建静态资源基础路径 - const assetBaseUrl = `${integrationOrigin}${basePath.replace(/\/$/, '')}/assets`; + const { getImageUrl, getSvgUrl, getAssetUrl } = useAssets(); // 设置 CSS 变量 const root = document.documentElement; - // 设置图片资源路径 - root.style.setProperty('--asset-base-url', assetBaseUrl); - root.style.setProperty('--asset-images-url', `${assetBaseUrl}/images`); - root.style.setProperty('--asset-svg-url', `${assetBaseUrl}/svg`); - root.style.setProperty('--asset-icons-url', `${assetBaseUrl}/icons`); - - // 设置具体的静态资源路径 - root.style.setProperty('--bg-light', `url('${assetBaseUrl}/images/light_bg_1.webp')`); - root.style.setProperty('--bg-dark', `url('${assetBaseUrl}/images/dark_bg_1.webp')`); - - // 空状态图标 - root.style.setProperty('--empty-pending-light', `url('${assetBaseUrl}/images/empty_pending.svg')`); - root.style.setProperty('--empty-pending-dark', `url('${assetBaseUrl}/images/empty_pending_dark.svg')`); - root.style.setProperty('--empty-failed-light', `url('${assetBaseUrl}/images/empty_failed.svg')`); - root.style.setProperty('--empty-failed-dark', `url('${assetBaseUrl}/images/empty_failed_dark.svg')`); - root.style.setProperty('--empty-running-light', `url('${assetBaseUrl}/images/empty_running.svg')`); - root.style.setProperty('--empty-running-dark', `url('${assetBaseUrl}/images/empty_running_dark.svg')`); - - // 任务图标 - root.style.setProperty('--task-list-light', `url('${assetBaseUrl}/svg/light_taskList.svg')`); - root.style.setProperty('--task-list-dark', `url('${assetBaseUrl}/svg/dark_taskList.svg')`); - root.style.setProperty('--task-score-light', `url('${assetBaseUrl}/svg/light_taskScore.svg')`); - root.style.setProperty('--task-score-dark', `url('${assetBaseUrl}/svg/dark_taskScore.svg')`); - - // 加载图标 - root.style.setProperty('--task-loading', `url('${assetBaseUrl}/icons/taskLoading.png')`); - - // 更多操作图标 - root.style.setProperty('--more-icon', `url('${assetBaseUrl}/svg/more.svg')`); - root.style.setProperty('--more-hover-icon', `url('${assetBaseUrl}/svg/more_hover.svg')`); - root.style.setProperty('--more-active-icon', `url('${assetBaseUrl}/svg/more_active.svg')`); - - // 登录背景 - root.style.setProperty('--login-bg-light', `url('${assetBaseUrl}/images/login-background-light.webp')`); - root.style.setProperty('--login-bg-dark', `url('${assetBaseUrl}/images/login-background-dark.jpg')`); - - // 信息图标 - root.style.setProperty('--info-icon', `url('${assetBaseUrl}/svg/icon_info.svg')`); - - // 字体文件 - root.style.setProperty('--font-harmony-woff2', `url('${assetBaseUrl}/fonts/HarmonyOS/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Regular.woff2')`); - root.style.setProperty('--font-harmony-woff', `url('${assetBaseUrl}/fonts/HarmonyOS/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Regular.woff')`); - - console.log('CSS 静态资源路径已动态设置:', assetBaseUrl); + // 设置具体的静态资源路径，使用 useAssets 来获取正确的打包后路径 + try { + // 背景图片 + root.style.setProperty('--bg-light', `url('${getImageUrl('light_bg_1.webp')}')`); + root.style.setProperty('--bg-dark', `url('${getImageUrl('dark_bg_1.webp')}')`); + + // 空状态图标 + root.style.setProperty('--empty-pending-light', `url('${getImageUrl('empty_pending.svg')}')`); + root.style.setProperty('--empty-pending-dark', `url('${getImageUrl('empty_pending_dark.svg')}')`); + root.style.setProperty('--empty-failed-light', `url('${getImageUrl('empty_failed.svg')}')`); + root.style.setProperty('--empty-failed-dark', `url('${getImageUrl('empty_failed_dark.svg')}')`); + root.style.setProperty('--empty-running-light', `url('${getImageUrl('empty_running.svg')}')`); + root.style.setProperty('--empty-running-dark', `url('${getImageUrl('empty_running_dark.svg')}')`); + + // 任务图标 + root.style.setProperty('--task-list-light', `url('${getSvgUrl('light_taskList.svg')}')`); + root.style.setProperty('--task-list-dark', `url('${getSvgUrl('dark_taskList.svg')}')`); + root.style.setProperty('--task-score-light', `url('${getSvgUrl('light_taskScore.svg')}')`); + root.style.setProperty('--task-score-dark', `url('${getSvgUrl('dark_taskScore.svg')}')`); + + // 加载图标（从 icons 目录） + root.style.setProperty('--task-loading', `url('${getAssetUrl('icons/taskLoading.png')}')`); + + // 更多操作图标 + root.style.setProperty('--more-icon', `url('${getSvgUrl('more.svg')}')`); + root.style.setProperty('--more-hover-icon', `url('${getSvgUrl('more_hover.svg')}')`); + root.style.setProperty('--more-active-icon', `url('${getSvgUrl('more_active.svg')}')`); + + // 登录背景 + root.style.setProperty('--login-bg-light', `url('${getImageUrl('login-background-light.webp')}')`); + root.style.setProperty('--login-bg-dark', `url('${getImageUrl('login-background-dark.jpg')}')`); + + // 信息图标 + root.style.setProperty('--info-icon', `url('${getSvgUrl('icon_info.svg')}')`); + + // 字体文件 + root.style.setProperty('--font-harmony-woff2', `url('${getAssetUrl('fonts/HarmonyOS/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Regular.woff2')}')`); + root.style.setProperty('--font-harmony-woff', `url('${getAssetUrl('fonts/HarmonyOS/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Regular.woff')}')`); + + console.log('CSS 静态资源路径已动态设置，使用 useAssets 组合式函数'); + } catch (error) { + console.error('设置 CSS 静态资源路径时出错:', error); + } } -- Gitee