feat(web): 布局壳与 NAKU 品牌——侧栏图标菜单、两行品牌区、favicon

apps/web/src/layouts/member-layout.vue

@@ -6,34 +6,66 @@ import { useMemberMe } from "@/queries/member.ts";
 const tokenStore = useMemberTokenStore();
 const meQuery = useMemberMe();
 
-const memberName = computed(() => tokenStore.memberName || meQuery.data.value?.name || "");
+const memberName = computed(
+  () => tokenStore.memberName || meQuery.data.value?.name || "",
+);
 </script>
 
 <template>
   <div class="member-layout">
     <header class="member-layout__header">
-      <strong>成员入口</strong>
-      <span>{{ memberName }}</span>
+      <div class="member-layout__brand">成员入口</div>
+      <div class="member-layout__name">{{ memberName }}</div>
     </header>
     <main class="member-layout__main">
-      <router-view />
+      <div class="member-layout__surface">
+        <router-view />
+      </div>
     </main>
   </div>
 </template>
 
 <style scoped>
+/* design.md：bg-layout 底 + bg-container 内容面；间距 24/16 对齐 spacing lg/md */
 .member-layout {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  background: #f5f5f5;
 }
+
 .member-layout__header {
+  height: 64px;
+  padding: 0 24px;
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid #eee;
 }
+
+.member-layout__brand {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.member-layout__name {
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+}
+
 .member-layout__main {
-  padding: 16px;
+  flex: 1;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 24px 16px 48px;
+}
+
+.member-layout__surface {
+  background: #fff;
+  border-radius: 8px;
+  padding: 24px;
 }
 </style>