Merge pull request #18 from yyyCode/feature/about-us

feat(web): about-us page + header nav reorder + remove profile drawer

Author: yyyCode

docs/superpowers/plans/2026-08-28-about-us-page.md

@@ -0,0 +1,93 @@
+# 关于我们页面：顶部导航调整 + 独立 `/about-us` 页面
+
+日期：2026-08-28
+状态：已确认（用户拍板：源码链接改为「关于我们」并与头像按钮交换位置；新增独立 `/about-us` 页而非小页面；页面内容含作者卡基础项 + 个人简介段落 + 联系方式/社交链接；右侧抽屉整体移除）✅ 已实现（2026-08-28）
+
+## 背景与目标
+
+站点顶部导航目前有：`首页 | 文章 | 项目推荐 | 求职导航 | 论坛 | 反馈 | 源码(外链) | 头像按钮`。其中「源码」是一个跳 GitHub 仓库的外部链接；「个人信息」入口位于右侧悬浮按钮 → 抽屉（ProfileCard + BlogInfoCard）。
+
+目标：
+1. 顶部导航把「源码」外链改为**「关于我们」导航项**（跳站内新页面），并与头像按钮**交换位置**。
+2. 新增独立整页 `/about-us`，内容为站点作者 yyycode 的自我介绍（即原抽屉 ProfileCard 的「关于我」内容 + 个人简介段落 + 联系方式/社交链接）。
+3. 右侧悬浮按钮「个人信息」与挂件抽屉（WidgetsDrawer）**整体移除**。
+
+**范围：纯前端。** 后端零改动；数据全部复用现有接口与 siteConfig。
+
+## 后端现状（已具备，直接复用）
+
+| 能力 | 接口 | 说明 |
+|---|---|---|
+| 公开资料 | `GET /api/v1/profile` | **匿名调用时返回站点作者**（最近更新的 ACTIVE AUTHOR，回退第一个 AUTHOR，再回退第一个用户）；带 JWT 时返回当前登录用户。返回 `PublicProfileResponse`：`userId, username, avatarUrl, bio`。关于我们页需要**始终匿名**请求，确保访客/登录读者看到的都是作者本人 |
+| 站点配置 | siteConfig（`inject('siteConfig')`，App.vue 统一加载） | 含 `github_url, csdn_url, nowcoder_url, default_avatar_url, blog_name, source_code_url` 等 |
+
+`request()`（`api/http.js`）不带 `withAuth` 时即匿名请求，直接返回 `ApiResponse.data`。
+
+## 改动清单
+
+| 文件 | 改动 |
+|---|---|
+| `vue/src/components/BlogHeader.vue` | 导航重排：「源码」外链 `<a>` → 改为「关于我们」`router-link`（跳 `/about-us`），移到最右端；头像按钮移到「关于我们」之前（原「源码」位置） |
+| `vue/src/views/AboutUsView.vue` | **新建**。关于我们整页 |
+| `vue/src/api/profile.js` | 新增 `fetchOwnerProfile()`：始终匿名 `request('/api/v1/profile')` |
+| `vue/src/router/index.js` | 新增 `/about-us` 路由（`/about` 保留不动） |
+| `vue/src/components/WidgetsDrawer.vue` | **删除**（整抽屉移除） |
+| `vue/src/components/RightDock.vue` | 移除「个人信息」按钮及 `toggle-profile` emit，保留「深浅色」「公告」 |
+| `vue/src/App.vue` | 清理抽屉相关：移除 `WidgetsDrawer` import/渲染、`@toggle-profile` 监听、BlogHeader 的 `@toggle-widgets` 监听、`widgetsOpen`/`toggleWidgets`、`profile`/`loadProfile`（全部只为抽屉服务） |
+
+**保留不动**：`ProfileCard.vue`（搜索页 SearchResultsView 仍用）、`BlogInfoCard.vue`（同上）、`PublicLayout.vue`（死代码，无引用）、`ConsoleSiteConfigView.vue`（`source_code_url` 配置表单保留，导航不再使用该字段）。
+
+## 交互与数据流
+
+### 顶部导航（BlogHeader.vue）
+
+调整后顺序：`首页 | 文章 | 项目推荐 | 求职导航 | 论坛 | 反馈 | [头像按钮] [关于我们]`
+
+- **关于我们**：`router-link to="/about-us"`，替换原「源码」外链 `<a>`（`site-nav-link site-nav-link-sm-hide` 类保留，小屏隐藏）；图标从 GitHub 换成 info 圆形图标。
+- **头像按钮**：从最右端移到「关于我们」之前（原「源码」位置）。点击行为不变：登录 → `/profile`；未登录 → `/login`。
+- 视觉上头像按钮 + 关于我们位于导航右侧一组；`site-nav-auth-trailing` 的右对齐行为由实现者按现有 CSS 调整（最终效果：两个入口靠右、其余导航项靠左）。
+
+### 关于我们页（AboutUsView.vue）
+
+独立整页（`page-wrap` 居中 + `.card`，复用 `vue/src/assets/blog.css` 的 CSS 变量）。结构从上到下：
+
+1. **大头像**：`UserAvatar`（`size` 约 112），`owner.avatarUrl`，回退 `siteConfig.default_avatar_url`，再回退占位图。
+2. **昵称**：`owner.username`（回退「—」）。
+3. **签名**：`owner.bio`（回退「平凡的一枚程序员」）。
+4. **菜单**：全部文章（`/all`）、更新日志（`/changelog`）——沿用原 ProfileCard 的卡片基础项。
+5. **个人简介段落**：静态文案（可编辑）。默认草稿：
+   > 你好，我是 yyycode，这个站点的作者。这里记录我在开发与学习中的经历、踩坑和思考，欢迎通过下面的方式联系我交流。
+6. **联系方式 + 社交链接**：GitHub / CSDN / 牛客，`siteConfig.github_url` / `csdn_url` / `nowcoder_url`，回退值与 ProfileCard 一致（`https://github.com/yyyCode`、`https://blog.csdn.net/2301_80044822`、`https://www.nowcoder.com/users/597303882`）。
+
+**数据源**：`onMounted` 调 `fetchOwnerProfile()`（`request('/api/v1/profile')` 匿名）回填 `owner`；siteConfig 走 `inject('siteConfig')`。页面不依赖登录态。
+
+### 抽屉与悬浮钮移除
+
+- `WidgetsDrawer.vue` 文件删除；App.vue 不再渲染它。
+- RightDock 删除第一个按钮（个人信息）与 `defineEmits(['toggle-profile'])`。
+- App.vue 删除：`widgetsOpen` ref、`toggleWidgets()`、`profile` ref、`loadProfile()`、`watch(route.fullPath, loadProfile)`、onMounted 中的 `loadProfile()` 调用、`WidgetsDrawer` import 与模板节点、`@toggle-profile="toggleWidgets"`（RightDock）、`@toggle-widgets="toggleWidgets"`（BlogHeader）。保留 `postSiteVisit()` 与 `fetchSiteConfig()` 逻辑。
+
+## 错误处理
+
+| 场景 | 表现 |
+|---|---|
+| `fetchOwnerProfile()` 网络/接口失败 | 页面正常渲染，作者区用回退值（占位头像、「—」昵称、回退签名）；社交链接仍正常显示。不报错、不跳转 |
+| 头像为空 | `UserAvatar` 显示人形兜底图标 |
+
+## 验证
+
+1. `cd vue && npm run build` 通过（无编译/引用错误——特别是删文件后无残留引用）。
+2. 手动回归：
+   - 顶部导航顺序：反馈之后依次是头像按钮、「关于我们」，无「源码」外链。
+   - 未登录点「关于我们」→ 进入 `/about-us`，显示作者 yyycode 的头像/昵称/签名/简介/社交链接。
+   - 登录普通读者账号访问 `/about-us` → 仍显示作者 yyycode（而非读者自己）。
+   - 点头像按钮 → 未登录跳 `/login`，登录后进 `/profile`。
+   - 右侧悬浮按钮：只剩深浅色 + 公告；「个人信息」抽屉不再出现。
+   - 搜索页侧栏 ProfileCard / BlogInfoCard 仍正常显示。
+
+## 不做（YAGNI）
+
+- 不加邮箱等联系方式字段（siteConfig 无 email 字段，需后端改动，本期纯前端）。
+- 不改后端、不加接口、不加表。
+- 不动 `/about` 页、不动 `PublicLayout.vue`（死代码）、不改 `SearchResultsView`。
+- 不给「公告」悬浮按钮接新功能（本期只是随抽屉改动顺带保留现状）。

docs/superpowers/specs/2026-08-28-about-us-page-design.md

@@ -1,49 +1,25 @@
 <script setup>
-import { computed, onMounted, provide, ref, watch } from 'vue'
+import { computed, onMounted, provide, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import BlogHeader from './components/BlogHeader.vue'
 import WelcomeGate from './components/WelcomeGate.vue'
 import BackToTop from './components/BackToTop.vue'
-import WidgetsDrawer from './components/WidgetsDrawer.vue'
 import RightDock from './components/RightDock.vue'
 import Live2dCharacter from './components/Live2dCharacter.vue'
-import { postSiteVisit } from './api/site'
-import { fetchSiteConfig } from './api/site'
-import { fetchPublicProfile } from './api/profile'
+import { postSiteVisit, fetchSiteConfig } from './api/site'
 
 const route = useRoute()
 const isConsole = computed(() => route.path.startsWith('/console'))
-const widgetsOpen = ref(false)
-const profile = ref(null)
 const siteConfig = ref({})
 
 // 提供 siteConfig 给所有子组件
 provide('siteConfig', siteConfig)
 
-function toggleWidgets() {
-  widgetsOpen.value = !widgetsOpen.value
-}
-
-async function loadProfile() {
-  if (route.path.startsWith('/console')) return
-  try {
-    profile.value = await fetchPublicProfile()
-  } catch {
-    profile.value = null
-  }
-}
-
-watch(
-  () => route.fullPath,
-  () => loadProfile()
-)
-
 onMounted(() => {
   postSiteVisit().catch(() => {})
 })
 
 onMounted(async () => {
-  await loadProfile()
   // 加载站点配置
   try {
     siteConfig.value = await fetchSiteConfig()
@@ -56,9 +32,8 @@ onMounted(async () => {
 <template>
   <div class="blog-app">
     <WelcomeGate v-if="!isConsole" />
-    <BlogHeader v-if="!isConsole" @toggle-widgets="toggleWidgets" />
-    <RightDock v-if="!isConsole" @toggle-profile="toggleWidgets" />
-    <WidgetsDrawer v-if="!isConsole" :open="widgetsOpen" :profile="profile" @close="widgetsOpen = false" />
+    <BlogHeader v-if="!isConsole" />
+    <RightDock v-if="!isConsole" />
     <BackToTop v-if="!isConsole" />
     <Live2dCharacter v-if="!isConsole" />
     <router-view />

vue/src/App.vue

@@ -10,3 +10,8 @@ export function fetchPublicProfile() {
   return request(`/api/v1/profile`)
 }
 
+export function fetchOwnerProfile() {
+  // 关于我们页：始终匿名请求，确保返回站点作者（而非当前登录用户）
+  return request(`/api/v1/profile`)
+}
+

vue/src/api/profile.js

@@ -74,22 +74,6 @@
           反馈
         </router-link>
 
-        <a
-          class="site-nav-link site-nav-link-sm-hide"
-          :href="(siteConfig && siteConfig.source_code_url) || 'https://github.com/yyyCode/OpenBlog.git'"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <span class="site-nav-ico" aria-hidden="true">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-              <path
-                d="M12 .5C5.73.5.75 5.67.75 12.09c0 5.15 3.28 9.52 7.83 11.06.57.11.78-.25.78-.55 0-.27-.01-1.17-.02-2.12-3.18.71-3.85-1.39-3.85-1.39-.52-1.36-1.28-1.72-1.28-1.72-1.05-.74.08-.73.08-.73 1.16.08 1.77 1.23 1.77 1.23 1.03 1.8 2.7 1.28 3.36.98.1-.77.4-1.28.73-1.57-2.54-.3-5.21-1.3-5.21-5.79 0-1.28.44-2.33 1.16-3.15-.12-.29-.5-1.48.11-3.08 0 0 .95-.31 3.11 1.2.9-.26 1.86-.39 2.82-.39.96 0 1.92.13 2.82.39 2.16-1.51 3.11-1.2 3.11-1.2.61 1.6.23 2.79.11 3.08.72.82 1.16 1.87 1.16 3.15 0 4.5-2.68 5.49-5.23 5.79.41.36.78 1.07.78 2.17 0 1.57-.02 2.83-.02 3.22 0 .3.21.67.79.55 4.55-1.54 7.83-5.91 7.83-11.06C23.25 5.67 18.27.5 12 .5z"
-              />
-            </svg>
-          </span>
-          源码
-        </a>
-
         <div class="site-nav-auth site-nav-auth-trailing" aria-label="账户">
           <button
             type="button"
@@ -100,6 +84,17 @@
             <UserAvatar :url="me ? me.avatarUrl : ''" :size="32" />
           </button>
         </div>
+
+        <router-link to="/about-us" class="site-nav-link site-nav-link-sm-hide" active-class="active">
+          <span class="site-nav-ico" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="9" />
+              <path d="M12 8h.01" />
+              <path d="M11 12h1v5h1" />
+            </svg>
+          </span>
+          关于我们
+        </router-link>
       </nav>
     </div>
   </header>
@@ -112,8 +107,6 @@ import { fetchMe } from '../api/admin'
 import { getStoredAccessToken, isJwtExpired, isLikelyJwt } from '../auth/session'
 import UserAvatar from './UserAvatar.vue'
 
-defineEmits(['toggle-widgets'])
-
 const route = useRoute()
 const router = useRouter()
 const me = ref(null)

vue/src/components/BlogHeader.vue

@@ -1,15 +1,5 @@
 <template>
   <div class="right-dock" :class="{ open: expanded }" @mouseenter="expanded = true" @mouseleave="onLeave">
-    <button type="button" class="right-dock-btn" @click="emit('toggle-profile')" :aria-label="'打开个人信息'">
-      <span class="right-dock-ico" aria-hidden="true">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-          <circle cx="12" cy="7" r="4" />
-        </svg>
-      </span>
-      <span class="right-dock-text">个人信息</span>
-    </button>
-
     <button type="button" class="right-dock-btn" @click="onToggle" :aria-label="isDark ? '切换到浅色模式' : '切换到深色模式'">
       <span class="right-dock-ico" aria-hidden="true">{{ isDark ? '☀' : '☽' }}</span>
       <span class="right-dock-text">{{ isDark ? '浅色' : '深色' }}</span>
@@ -31,7 +21,6 @@
 import { onMounted, ref } from 'vue'
 import { toggleTheme as applyToggle } from '../theme'
 
-const emit = defineEmits(['toggle-profile'])
 const expanded = ref(false)
 const isDark = ref(false)
 

vue/src/components/RightDock.vue

@@ -9,6 +9,7 @@ import AdminLoginView from '../views/AdminLoginView.vue'
 import ChangelogListView from '../views/ChangelogListView.vue'
 import ChangelogDetailView from '../views/ChangelogDetailView.vue'
 import AboutView from '../views/AboutView.vue'
+import AboutUsView from '../views/AboutUsView.vue'
 import FeedbackView from '../views/FeedbackView.vue'
 import SearchResultsView from '../views/SearchResultsView.vue'
 import SiteAuthView from '../views/SiteAuthView.vue'
@@ -53,6 +54,11 @@ const routes = [
     name: 'about',
     component: AboutView
   },
+  {
+    path: '/about-us',
+    name: 'aboutUs',
+    component: AboutUsView
+  },
   {
     path: '/search',
     name: 'search',

vue/src/components/WidgetsDrawer.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="page-wrap">
+    <div class="card about-us-card">
+      <div class="profile-avatar-wrap">
+        <img class="profile-avatar" :src="avatarUrl" alt="avatar" />
+      </div>
+
+      <div class="profile-name">{{ name }}</div>
+      <div class="profile-signature">{{ signature }}</div>
+
+      <div class="profile-menu">
+        <router-link class="profile-menu-item" to="/all">
+          全部文章
+        </router-link>
+        <router-link class="profile-menu-item" to="/changelog">
+          更新日志
+        </router-link>
+      </div>
+
+      <div class="about-us-intro">
+        <p class="about-us-intro-text">
+          你好，我是 yyycode，这个站点的作者。这里记录我在开发与学习中的经历、踩坑和思考，欢迎通过下面的方式联系我交流。
+        </p>
+      </div>
+
+      <div class="links-row">
+        <a class="icon-link" :href="githubUrl" target="_blank" rel="noreferrer">
+          GitHub
+        </a>
+        <a class="icon-link" :href="csdnUrl" target="_blank" rel="noreferrer">
+          CSDN
+        </a>
+        <a class="icon-link" :href="nowcoderUrl" target="_blank" rel="noreferrer">
+          牛客
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject, onMounted, ref } from 'vue'
+import { fetchOwnerProfile } from '../api/profile'
+
+const siteConfig = inject('siteConfig')
+
+const owner = ref(null)
+
+const avatarUrl = computed(() => {
+  const a = owner.value?.avatarUrl
+  if (a) return a
+  return (
+    (siteConfig.value && siteConfig.value.default_avatar_url) ||
+    'https://via.placeholder.com/120x120.png?text=OpenBlog'
+  )
+})
+const name = computed(() => (owner.value && owner.value.username) || '—')
+const signature = computed(() => (owner.value && owner.value.bio) || '平凡的一枚程序员')
+
+const githubUrl = computed(() =>
+  (siteConfig.value && siteConfig.value.github_url) || 'https://github.com/yyyCode'
+)
+const csdnUrl = computed(() =>
+  (siteConfig.value && siteConfig.value.csdn_url) || 'https://blog.csdn.net/2301_80044822'
+)
+const nowcoderUrl = computed(() =>
+  (siteConfig.value && siteConfig.value.nowcoder_url) || 'https://www.nowcoder.com/users/597303882'
+)
+
+onMounted(async () => {
+  try {
+    owner.value = await fetchOwnerProfile()
+  } catch {
+    owner.value = null
+  }
+})
+</script>
+
+<style scoped>
+.page-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 28px 16px;
+}
+.about-us-card {
+  width: 100%;
+  max-width: 520px;
+  padding: 28px 18px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.about-us-intro {
+  margin-top: 26px;
+}
+.about-us-intro-text {
+  margin: 0;
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.9;
+}
+.about-us-card .links-row {
+  margin-top: 22px;
+}
+</style>