Momentry Studio
cb7e1ba0ba
Fixes: - VideoPlayer.vue: restore allTags, filteredMarks, marksByTag (removed by mistake) - PeopleView.vue: fix frameTime scope in playFaceDetailVideo catch block - Both errors caused white screen on build failure Root cause: 1. visibleTags duplicate declaration (old + new logic) 2. frameTime undefined in catch block (scope issue) Solution: 1. Keep allTags/filteredMarks/marksByTag (needed in template) 2. Keep visibleTags (new logic for processor toggles) 3. Move frameTime calculation to correct scope in catch block
100 lines
5.7 KiB
Plaintext
100 lines
5.7 KiB
Plaintext
<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>
|
|
<router-link to="/admin" class="gs-nav-item" active-class="active">
|
|
<svg class="gs-nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="3"/>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
|
</svg>
|
|
<span>Admin</span>
|
|
</router-link>
|
|
<router-link to="/client" class="gs-nav-item" active-class="active">
|
|
<svg class="gs-nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
|
</svg>
|
|
<span>Client</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; max-width: 1400px; margin: 0 auto; padding: 28px; gap: 28px; min-height: 100vh; box-sizing: border-box; align-items: stretch; }
|
|
.ms-side { width: 240px; min-width: 240px; flex-shrink: 0; background: #fff; border-radius: 18px; padding: 18px 14px; box-shadow: 0 16px 38px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06); display: flex; flex-direction: column; position: relative; height: calc(100vh - 125px); align-self: flex-start; overflow: visible; }
|
|
.gs-logo { font-size: 15px; font-weight: 600; color: #202124; padding: 8px 12px 16px 12px; flex-shrink: 0; }
|
|
.gs-nav { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
|
|
.gs-nav-item { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: #3c4043; font-weight: 600; font-size: 18px; line-height: 1; background: transparent; box-sizing: border-box; }
|
|
.gs-nav-item:hover { background: var(--ms-accent-soft); color: var(--ms-accent-text); }
|
|
.gs-nav-item.active { background: var(--ms-accent-soft) !important; color: var(--ms-accent-text) !important; font-weight: 600; }
|
|
.gs-nav-icon { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
|
|
.gs-divider { height: 1px; background: #eee; margin: 14px 8px; flex-shrink: 0; }
|
|
.gs-footer { margin-top: auto; padding: 10px 12px; border-radius: 12px; display: flex; align-items: center; gap: 10px; background: #f8f9fa; flex-shrink: 0; }
|
|
.gs-theme-switcher { display: flex; gap: 5px; }
|
|
.gs-theme-btn { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); background: #f3f3f3; cursor: pointer; padding: 0; }
|
|
.gs-theme-btn:hover { transform: scale(1.08); }
|
|
.gs-theme-btn.active { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.16); }
|
|
.gs-account-name { font-size: 12px; color: #5f6368; }
|
|
.ms-main { flex: 1; min-width: 0; background: #fff; border-radius: 18px; padding: 36px 42px; overflow-y: auto; overflow-x: hidden; }
|
|
.ms-content { max-width: 1200px; }
|
|
</style>
|