Initial commit: Momentry Studio v0.1.0

src/App.vue

@@ -0,0 +1,57 @@
+<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>
+
+<style>
+@import './assets/wordpress-exact.css';
+
+* { 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; font-size: 14px; }
+#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; flex-shrink: 0; }
+.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>