87 lines
3.8 KiB
Vue
87 lines
3.8 KiB
Vue
<template>
|
||
<div id="app" class="ms-app" :data-current-login="'guest'">
|
||
<aside class="ms-side">
|
||
<div class="gs-logo">Workspace</div>
|
||
<nav class="gs-nav">
|
||
<router-link to="/search" class="gs-nav-item" active-class="active">
|
||
<img class="gs-nav-icon" src="/icons/Search.png" alt="">
|
||
<span>Search</span>
|
||
</router-link>
|
||
<router-link to="/library" class="gs-nav-item" active-class="active">
|
||
<img class="gs-nav-icon" src="/icons/Library.png" alt="">
|
||
<span>Library</span>
|
||
</router-link>
|
||
<router-link to="/people" class="gs-nav-item" active-class="active">
|
||
<img class="gs-nav-icon" src="/icons/People.png" alt="">
|
||
<span>People</span>
|
||
</router-link>
|
||
</nav>
|
||
<div class="gs-divider"></div>
|
||
<div class="gs-footer">
|
||
<div class="gs-theme-switcher">
|
||
<button class="gs-theme-btn active">☀️</button>
|
||
<button class="gs-theme-btn">🌙</button>
|
||
<button class="gs-theme-btn">🌗</button>
|
||
</div>
|
||
<div class="gs-account"><span class="gs-account-name">Demo</span></div>
|
||
</div>
|
||
</aside>
|
||
<main class="ms-main">
|
||
<div class="ms-content"><router-view /></div>
|
||
</main>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, onUnmounted, ref } from 'vue'
|
||
|
||
const appZoom = ref(100)
|
||
|
||
function handleKeydown(e: KeyboardEvent) {
|
||
if ((e.metaKey || e.ctrlKey)) {
|
||
if (e.key === '=' || e.key === '+') {
|
||
e.preventDefault()
|
||
appZoom.value = Math.min(appZoom.value + 10, 300)
|
||
document.documentElement.style.zoom = appZoom.value + '%'
|
||
} else if (e.key === '-') {
|
||
e.preventDefault()
|
||
appZoom.value = Math.max(appZoom.value - 10, 50)
|
||
document.documentElement.style.zoom = appZoom.value + '%'
|
||
} else if (e.key === '0') {
|
||
e.preventDefault()
|
||
appZoom.value = 100
|
||
document.documentElement.style.zoom = '100%'
|
||
}
|
||
}
|
||
}
|
||
|
||
onMounted(() => document.addEventListener('keydown', handleKeydown))
|
||
onUnmounted(() => document.removeEventListener('keydown', handleKeydown))
|
||
</script>
|
||
|
||
<style>
|
||
@import './assets/wordpress-exact.css';
|
||
</style>
|
||
|
||
<style scoped>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: 'DM Sans', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif; background: #fff; color: #202124; }
|
||
#app { display: flex; min-height: 100vh; }
|
||
.ms-side { width: 260px; background: #fff; border-right: 1px solid #e8eaed; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; }
|
||
.gs-logo { padding: 16px 20px; font-size: 16px; font-weight: 700; border-bottom: 1px solid #e8eaed; }
|
||
.gs-nav { flex: 1; padding: 8px 0; overflow-y: auto; }
|
||
.gs-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: #5f6368; text-decoration: none; font-size: 13px; font-weight: 500; border-left: 3px solid transparent; cursor: pointer; }
|
||
.gs-nav-item:hover { background: #f1f3f4; color: #202124; }
|
||
.gs-nav-item.active { background: #e8f0fe; color: #1967d2; border-left-color: #1967d2; font-weight: 600; }
|
||
.gs-nav-icon { width: 24px; height: 24px; object-fit: contain; }
|
||
.gs-divider { height: 1px; background: #e8eaed; margin: 4px 0; }
|
||
.gs-footer { padding: 12px 20px; border-top: 1px solid #e8eaed; }
|
||
.gs-theme-switcher { display: flex; gap: 6px; margin-bottom: 10px; }
|
||
.gs-theme-btn { width: 32px; height: 32px; border: 1px solid #dadce0; background: #fff; border-radius: 8px; cursor: pointer; font-size: 14px; }
|
||
.gs-theme-btn:hover { background: #f1f3f4; }
|
||
.gs-theme-btn.active { border-color: #1967d2; background: #e8f0fe; }
|
||
.gs-account-name { font-size: 12px; color: #80868b; }
|
||
.ms-main { margin-left: 260px; flex: 1; min-height: 100vh; background: #fff; }
|
||
.ms-content { padding: 24px 32px; max-width: 1200px; }
|
||
</style>
|