Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 客户端缓存导致界面设置 Logo 不能正常显示 #7048

Merged
merged 1 commit into from
Nov 14, 2024
Merged

fix: 客户端缓存导致界面设置 Logo 不能正常显示 #7048

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/hooks/use-logo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@ export const useLogo = async () => {
const link = (document.querySelector("link[rel*='icon']") || document.createElement('link')) as HTMLLinkElement;
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = globalStore.themeConfig.favicon ? '/api/v1/images/favicon' : '/public/favicon.png';
link.href = globalStore.themeConfig.favicon ? `/api/v1/images/favicon?t=${Date.now()}` : '/public/favicon.png';
document.getElementsByTagName('head')[0].appendChild(link);
};
9 changes: 7 additions & 2 deletions frontend/src/layout/components/Sidebar/components/Logo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
<template>
<div class="logo" style="cursor: pointer" @click="goHome">
<template v-if="isCollapse">
<img v-if="globalStore.themeConfig.logo" :src="'/api/v1/images/logo'" style="cursor: pointer" alt="logo" />
<img
v-if="globalStore.themeConfig.logo"
:src="`/api/v1/images/logo?t=${Date.now()}`"
style="cursor: pointer"
alt="logo"
/>
<MenuLogo v-else />
</template>
<template v-else>
<img
v-if="globalStore.themeConfig.logoWithText"
:src="'/api/v1/images/logoWithText'"
:src="`/api/v1/images/logoWithText?t=${Date.now()}`"
style="cursor: pointer"
alt="logo"
/>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个片段是 Vue.js 中的一个模板，它显示一个图标菜单中的一个 logo 图片，并在点击时改变图片。代码中有些地方可能存在一些问题或可优化的地方，我为您提供了一些建议：

  1. 图像加载时间：如果当前日期（2024-11）距离原始日期小于9个月，则可以考虑使用缓存策略： 
    // 使用本地缓存替代网络请求

this.$store.dispatch('getLogoImageCache');

2. **动态 URL 创建和处理** ：现在创建的源应该用于确保每次更新后的URL有效且保持一致性。

const t = Date();
let src = /api/v1/images/logo?t=${t};

if (typeof img.src === 'string') {
src += &date="${parseInt(t)}";
}


3. 如果可能，将图片重命名以减少内存消耗。

这是一个简化版的修正例子，请根据实际情况调整并注意引入适当的异步等待操作来解决可能出现的问题。

```html
<script setup lang="ts">
import { ref, onMounted } from 'vue';

const urlRef = useRef<string>();
urlRef.value =
process.env.NODE_ENV === 'development'
 ? '' 
 : window.localStorage.getItem(urlKey) || '/images/logo';
</script>

<template>
...
</template>

<style scoped></style>

Expand Down
4 changes: 2 additions & 2 deletions frontend/src/utils/xpack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ export function initFavicon() {
</svg>
`;
goldLink = `data:image/svg+xml,${encodeURIComponent(svg)}`;
link.href = favicon ? '/api/v1/images/favicon' : goldLink;
link.href = favicon ? `/api/v1/images/favicon?t=${Date.now()}` : goldLink;
} else {
link.href = favicon ? '/api/v1/images/favicon' : '/public/favicon.png';
link.href = favicon ? `/api/v1/images/favicon?t=${Date.now()}` : '/public/favicon.png';
}
document.head.appendChild(link);
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

没有明显的错误或问题，代码已格式化并保持一致。看起来在处理图像链接时做了优化，并确保了兼容性和安全性的设置。

然而，在某些现代浏览器中可能需要添加异步加载逻辑（避免网络延迟）。此外，对于未找到的icon可以考虑使用一个默认图片作为替代品来提升用户体验。

Expand Down
6 changes: 5 additions & 1 deletion frontend/src/views/setting/about/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
<template #main>
<div style="text-align: center; margin-top: 20px">
<div style="justify-self: center" class="logo">
<img v-if="globalStore.themeConfig.logo" style="width: 80px" :src="'/api/v1/images/logo'" />
<img
v-if="globalStore.themeConfig.logo"
style="width: 80px"
:src="`/api/v1/images/logo?t=${Date.now()}`"
/>
<PrimaryLogo v-else />
</div>
<h3 class="description">{{ globalStore.themeConfig.title || $t('setting.description') }}</h3>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个代码似乎是一段Vue CLI自动生成的代码，没有明显的错误或问题。它的主要功能是展示一个带有主题Logo的大标题和描述。

然而，我不能对未修改的原始代码进行对比分析。你可以直接使用当前版本或最新发布的内容比较。对于现有的代码，如果你有任何更具体的需求或者想要改进的地方，请告诉我！

Expand Down
Loading