shumengya/cwd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(router): 添加页面标题和滚动重置功能

Browse Source 
- 为路由添加 meta.title 配置，在导航守卫中动态设置文档标题
- 添加 afterEach 钩子，在路由切换时重置布局内容和窗口滚动位置
- 标准化路由配置的逗号格式，增强代码一致性
- 优化主题切换 composable 的代码格式和注释翻译
- 改进访问统计页面的排序逻辑，使用 computed 替代手动重新加载
- 添加全局滚动条样式，提升视觉一致性
This commit is contained in:
anghunk
2026-01-29 17:16:11 +08:00
parent cfeedc36bb
commit 29f29f8b77
4 changed files with 157 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
cwd-admin/src/views/LayoutView.vue
View File

@@ -31,20 +31,34 @@
<a class="layout-button" href="https://github.com/anghunk/cwd" target="_blank">
Github
</a>
<button class="layout-button" @click="cycleTheme" :title="themeTitle" type="button">
<svg v-if="theme === 'light'" viewBox="0 0 24 24" width="16" height="16">
<path d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" fill="currentColor"/>
</svg>
<svg v-else-if="theme === 'dark'" viewBox="0 0 24 24" width="16" height="16">
<path d="M20 12.986c-.52.095-1.056.15-1.6.15-5.238 0-9.486-4.248-9.486-9.486 0-.544.055-1.08.15-1.6-5.275.986-9.264 5.615-9.264 11.123 0 6.255 5.07 11.325 11.325 11.325 5.508 0 10.137-3.989 11.123-9.264a9.66 9.66 0 0 1-2.248.752z" fill="currentColor"/>
</svg>
<svg v-else viewBox="0 0 24 24" width="16" height="16">
<path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6zM6 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H6zm-3 14a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-1z" fill="currentColor"/>
</svg>
</button>
<button
class="layout-button"
@click="cycleTheme"
:title="themeTitle"
type="button"
>
<svg v-if="theme === 'light'" viewBox="0 0 24 24" width="16" height="16">
<path
d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"
fill="currentColor"
/>
</svg>
<svg v-else-if="theme === 'dark'" viewBox="0 0 24 24" width="16" height="16">
<path
d="M20 12.986c-.52.095-1.056.15-1.6.15-5.238 0-9.486-4.248-9.486-9.486 0-.544.055-1.08.15-1.6-5.275.986-9.264 5.615-9.264 11.123 0 6.255 5.07 11.325 11.325 11.325 5.508 0 10.137-3.989 11.123-9.264a9.66 9.66 0 0 1-2.248.752z"
fill="currentColor"
/>
</svg>
<svg v-else viewBox="0 0 24 24" width="16" height="16">
<path
d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6zM6 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H6zm-3 14a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-1z"
fill="currentColor"
/>
</svg>
</button>
<button class="layout-button" @click="handleLogout">退出</button>
</div>
<button
class="layout-actions-toggle"
@click="toggleActions"
@@ -150,15 +164,15 @@ const isMobileSiderOpen = ref(false);
const isActionsOpen = ref(false);
const themeTitle = computed(() => {
if (theme.value === 'light') return '明亮模式';
if (theme.value === 'dark') return '暗黑模式';
return '跟随系统';
if (theme.value === "light") return "明亮模式";
if (theme.value === "dark") return "暗黑模式";
return "跟随系统";
});
function cycleTheme() {
if (theme.value === 'system') setTheme('light');
else if (theme.value === 'light') setTheme('dark');
else setTheme('system');
if (theme.value === "system") setTheme("light");
else if (theme.value === "light") setTheme("dark");
else setTheme("system");
}
const storedDomain =
@@ -267,6 +281,19 @@ function handleLogoutFromActions() {
</script>
<style scoped>
::-webkit-scrollbar {
width: 8px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg-body);
border-radius: 0;
}
::-webkit-scrollbar-thumb {
background: var(--text-secondary);
border-radius: 10px;
transition: all 0.1s linear;
}
.layout {
display: flex;
flex-direction: column;