MVP: 按 07 风格重写前端 + Go 后端落地（长文/短文、编辑器、后台管理）

2026-09-20 20:56:03 +08:00
parent edee708802
commit 4d8f2de3a4
96 changed files with 6005 additions and 2602 deletions
@@ -0,0 +1,141 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { checkAuth } from './auth'
+import { adminApi, session } from '../api'
+import { site } from '../site'
+
+const router = useRouter()
+const ready = ref(false)
+
+onMounted(async () => {
+  if (!(await checkAuth())) {
+    router.replace('/admin/login')
+    return
+  }
+  ready.value = true
+})
+
+// 会话过期时（请求返回 401）统一跳回登录页
+window.addEventListener('one:unauthorized', () => {
+  session.clear()
+  if (router.currentRoute.value.path.startsWith('/admin')) router.replace('/admin/login')
+})
+
+async function logout() {
+  try {
+    await adminApi.logout()
+  } catch (e) {
+    /* 忽略 */
+  }
+  session.clear()
+  router.replace('/admin/login')
+}
+</script>
+
+<template>
+  <div v-if="ready" class="admin">
+    <header class="bar">
+      <div class="brand">
+        <RouterLink to="/" class="site">{{ site.site_title || 'ONE' }}</RouterLink>
+        <span class="sep">/</span>
+        <span class="where">后台</span>
+      </div>
+      <nav class="nav">
+        <RouterLink to="/admin" class="link">文章</RouterLink>
+        <RouterLink to="/admin/new" class="link">写新的</RouterLink>
+        <RouterLink to="/admin/tags" class="link">标签</RouterLink>
+        <RouterLink to="/admin/settings" class="link">设置</RouterLink>
+        <RouterLink to="/" class="link">看前台</RouterLink>
+        <button class="link as-btn" @click="logout">退出</button>
+      </nav>
+    </header>
+
+    <main class="content">
+      <RouterView />
+    </main>
+  </div>
+  <div v-else class="checking">检查登录状态…</div>
+</template>
+
+<style scoped>
+.admin {
+  min-height: 100vh;
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+  padding: 12px 22px;
+  border-bottom: 1px solid var(--line);
+  background: var(--card);
+  position: sticky;
+  top: 0;
+  z-index: 20;
+}
+
+.brand {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.site {
+  font-family: var(--serif);
+  font-size: 17px;
+}
+
+.sep {
+  color: var(--faint);
+}
+
+.where {
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.link {
+  padding: 5px 10px;
+  border-radius: 3px;
+  font-size: 14px;
+  color: var(--ink-soft);
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+
+.link:hover {
+  background: var(--paper-sunken);
+  color: var(--ink);
+}
+
+.link.router-link-exact-active {
+  color: var(--accent);
+}
+
+.as-btn {
+  color: var(--muted);
+}
+
+.content {
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 26px 22px 80px;
+}
+
+.checking {
+  padding: 80px;
+  text-align: center;
+  color: var(--muted);
+}
+</style>