初版代码提交

jog-frontend/src/layouts/AdminLayout.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="admin-layout">
+    <el-container>
+      <el-aside width="220px">
+        <div class="admin-logo">管理后台</div>
+        <el-menu :default-active="$route.path" router background-color="#304156" text-color="#bfcbd9" active-text-color="#409eff">
+          <el-menu-item index="/admin">
+            <el-icon><DataAnalysis /></el-icon>
+            <span>仪表盘</span>
+          </el-menu-item>
+          <el-menu-item index="/admin/users">
+            <el-icon><User /></el-icon>
+            <span>用户管理</span>
+          </el-menu-item>
+          <el-menu-item index="/admin/articles">
+            <el-icon><Document /></el-icon>
+            <span>文章管理</span>
+          </el-menu-item>
+          <el-menu-item index="/admin/comments">
+            <el-icon><ChatDotSquare /></el-icon>
+            <span>评论管理</span>
+          </el-menu-item>
+          <el-menu-item index="/admin/categories">
+            <el-icon><Menu /></el-icon>
+            <span>分类管理</span>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+      <el-container>
+        <el-header class="admin-header">
+          <el-button @click="$router.push('/')">返回前台</el-button>
+          <el-button @click="handleLogout">退出</el-button>
+        </el-header>
+        <el-main>
+          <router-view />
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script setup>
+import { useUserStore } from '@/stores/user'
+import { useRouter } from 'vue-router'
+
+const userStore = useUserStore()
+const router = useRouter()
+
+async function handleLogout() {
+  await userStore.logout()
+  router.push('/login')
+}
+</script>
+
+<style scoped>
+.admin-layout {
+  min-height: 100vh;
+}
+.el-aside {
+  background: #304156;
+}
+.admin-logo {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 18px;
+  font-weight: bold;
+}
+.admin-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  background: #fff;
+  border-bottom: 1px solid #e4e7ed;
+}
+.el-main {
+  background: #f5f7fa;
+}
+</style>

jog-frontend/src/layouts/AppLayout.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="app-layout">
+    <el-container>
+      <el-aside width="200px">
+        <el-menu :default-active="$route.path" router>
+          <el-menu-item index="/app/dashboard">
+            <el-icon><DataAnalysis /></el-icon>
+            <span>控制台</span>
+          </el-menu-item>
+          <el-menu-item index="/app/articles">
+            <el-icon><Document /></el-icon>
+            <span>我的文章</span>
+          </el-menu-item>
+          <el-menu-item index="/app/editor">
+            <el-icon><EditPen /></el-icon>
+            <span>写文章</span>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+      <el-main>
+        <router-view />
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.app-layout {
+  min-height: 100vh;
+}
+.el-aside {
+  background: #fff;
+  border-right: 1px solid #e4e7ed;
+}
+.el-main {
+  background: #f5f7fa;
+}
+</style>

jog-frontend/src/layouts/BlogLayout.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="jog-layout">
+    <el-header class="header">
+      <div class="header-content">
+        <router-link to="/" class="logo">Jog</router-link>
+        <el-menu mode="horizontal" :ellipsis="false" class="nav-menu">
+          <el-menu-item index="home">
+            <router-link to="/">首页</router-link>
+          </el-menu-item>
+        </el-menu>
+        <div class="header-right">
+          <template v-if="userStore.isLoggedIn">
+            <el-dropdown>
+              <span class="user-info">
+                <el-avatar :size="28" :src="userStore.userInfo?.avatar" />
+                {{ userStore.userInfo?.nickname || '用户' }}
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="$router.push('/app/dashboard')">控制台</el-dropdown-item>
+                  <el-dropdown-item v-if="userStore.isAdmin" @click="$router.push('/admin')">管理后台</el-dropdown-item>
+                  <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+          <template v-else>
+            <el-button type="primary" @click="$router.push('/login')">登录</el-button>
+            <el-button @click="$router.push('/register')">注册</el-button>
+          </template>
+        </div>
+      </div>
+    </el-header>
+    <el-main class="main">
+      <router-view />
+    </el-main>
+    <el-footer class="footer">Jog &copy; 2026</el-footer>
+  </div>
+</template>
+
+<script setup>
+import { useUserStore } from '@/stores/user'
+import { useRouter } from 'vue-router'
+
+const userStore = useUserStore()
+const router = useRouter()
+
+async function handleLogout() {
+  await userStore.logout()
+  router.push('/')
+}
+</script>
+
+<style scoped>
+.jog-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.header {
+  border-bottom: 1px solid #e4e7ed;
+  background: #fff;
+}
+.header-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  height: 60px;
+  padding: 0 20px;
+}
+.logo {
+  font-size: 20px;
+  font-weight: bold;
+  color: #409eff;
+  text-decoration: none;
+  margin-right: 40px;
+}
+.nav-menu {
+  flex: 1;
+  border-bottom: none;
+}
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+.main {
+  flex: 1;
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 20px;
+}
+.footer {
+  text-align: center;
+  color: #909399;
+  border-top: 1px solid #e4e7ed;
+}
+</style>