feat(article): add article type support — JOB_NAV type, /jobs route, compose type selector, API, migration SQL

Author: yyyCode

OpenBlog-business/src/main/java/com/yqz/openblog/article/dto/ArticleDetailResponse.java

@@ -1,6 +1,7 @@
 package com.yqz.openblog.article.dto;
 
 import com.yqz.openblog.article.entity.ArticleStatus;
+import com.yqz.openblog.article.entity.ArticleType;
 
 import java.time.Instant;
 
@@ -15,6 +16,7 @@ public class ArticleDetailResponse {
     private String authorNickname;
     private Instant publishedAt;
     private ArticleStatus status;
+    private ArticleType type;
     private Long likeCount;
     private Long viewCount;
     private Long favoriteCount;
@@ -105,6 +107,14 @@ public void setStatus(ArticleStatus status) {
         this.status = status;
     }
 
+    public ArticleType getType() {
+        return type;
+    }
+
+    public void setType(ArticleType type) {
+        this.type = type;
+    }
+
     public Long getLikeCount() {
         return likeCount;
     }

OpenBlog-business/src/main/java/com/yqz/openblog/article/dto/ArticlePublishedContentCachePayload.java

@@ -1,6 +1,7 @@
 package com.yqz.openblog.article.dto;
 
 import com.yqz.openblog.article.entity.ArticleStatus;
+import com.yqz.openblog.article.entity.ArticleType;
 
 import java.time.Instant;
 
@@ -19,6 +20,7 @@ public class ArticlePublishedContentCachePayload {
     private String authorNickname;
     private Instant publishedAt;
     private ArticleStatus status;
+    private ArticleType type;
     private Instant createdAt;
     private Instant updatedAt;
     private Long categoryId;
@@ -37,6 +39,7 @@ public static ArticlePublishedContentCachePayload fromDetail(ArticleDetailRespon
         p.setAuthorNickname(d.getAuthorNickname());
         p.setPublishedAt(d.getPublishedAt());
         p.setStatus(d.getStatus());
+        p.setType(d.getType());
         p.setCreatedAt(d.getCreatedAt());
         p.setUpdatedAt(d.getUpdatedAt());
         p.setCategoryId(d.getCategoryId());
@@ -125,6 +128,14 @@ public void setStatus(ArticleStatus status) {
         this.status = status;
     }
 
+    public ArticleType getType() {
+        return type;
+    }
+
+    public void setType(ArticleType type) {
+        this.type = type;
+    }
+
     public Instant getCreatedAt() {
         return createdAt;
     }

OpenBlog-business/src/main/java/com/yqz/openblog/article/service/ArticleService.java

@@ -146,6 +146,7 @@ public ArticleDetailResponse mapDetail(Article a) {
         resp.setAuthorNickname(author == null ? null : author.getUsername());
         resp.setPublishedAt(a.getPublishedAt());
         resp.setStatus(a.getStatus());
+        resp.setType(a.getType());
         resp.setLikeCount(a.getLikeCount());
         resp.setViewCount(a.getViewCount() == null ? 0L : a.getViewCount());
         resp.setFavoriteCount(a.getFavoriteCount());
@@ -206,6 +207,7 @@ private ArticleDetailResponse mergePublishedDetailFromCache(ArticlePublishedCont
         r.setAuthorNickname(p.getAuthorNickname());
         r.setPublishedAt(p.getPublishedAt());
         r.setStatus(p.getStatus());
+        r.setType(p.getType());
         r.setCreatedAt(p.getCreatedAt());
         r.setUpdatedAt(p.getUpdatedAt());
         r.setCategoryId(p.getCategoryId());

OpenBlog-business/src/main/resources/sql/migrate-article-type.sql

@@ -0,0 +1,2 @@
+-- 为 articles 表添加 type 字段，默认值为 ARTICLE
+ALTER TABLE articles ADD COLUMN type VARCHAR(16) NOT NULL DEFAULT 'ARTICLE' AFTER status;

vue/src/api/article.js

@@ -12,6 +12,12 @@ export function fetchArticleDetail(id) {
   return request(`/api/v1/articles/${id}`)
 }
 
+export function fetchArticlesByType(type, params = {}) {
+  const size = params.size ?? 20
+  const page = params.page ?? 0
+  return request(`/api/v1/articles/type/${type}?page=${page}&size=${size}`)
+}
+
 export function coverUrl(key) {
   if (!key) return ''
   return `${API_BASE}/api/v1/media/files/${key}`

vue/src/components/BlogHeader.vue

@@ -45,15 +45,15 @@
           项目推荐
         </router-link>
 
-        <a href="#" class="site-nav-link">
+        <router-link to="/jobs" class="site-nav-link" 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">
               <path d="M20 7h-4V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2H4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z" />
               <path d="M9 7V5h6v2" />
             </svg>
           </span>
           求职导航
-        </a>
+        </router-link>
 
         <router-link to="/feedback" class="site-nav-link" active-class="active">
           <span class="site-nav-ico" aria-hidden="true">

vue/src/router/index.js

@@ -27,6 +27,7 @@ import ConsoleUsersView from '../views/ConsoleUsersView.vue'
 import ConsoleUserDetailView from '../views/ConsoleUserDetailView.vue'
 import ConsoleFeedbackView from '../views/ConsoleFeedbackView.vue'
 import ConsoleSiteConfigView from '../views/ConsoleSiteConfigView.vue'
+import JobNavView from '../views/JobNavView.vue'
 import ProjectsListView from '../views/ProjectsListView.vue'
 import ProjectDetailView from '../views/ProjectDetailView.vue'
 import ConsoleProjectsView from '../views/ConsoleProjectsView.vue'
@@ -52,6 +53,11 @@ const routes = [
     name: 'search',
     component: SearchResultsView
   },
+  {
+    path: '/jobs',
+    name: 'jobNav',
+    component: JobNavView
+  },
   {
     path: '/projects',
     name: 'projectsList',

vue/src/views/ConsoleArticleComposeView.vue

@@ -186,6 +186,22 @@
 
           <div class="field">
 
+            <div class="label">文章类型</div>
+
+            <select v-model="form.type" class="input">
+
+              <option value="ARTICLE">博客文章</option>
+
+              <option value="JOB_NAV">求职导航</option>
+
+            </select>
+
+          </div>
+
+
+
+          <div>
+
             <div class="label">分类（可选）</div>
 
             <select v-model="form.categoryId" class="input">
@@ -462,7 +478,9 @@ const form = ref({
 
   coverMediaKey: null,
 
-  categoryId: null
+  categoryId: null,
+
+  type: 'ARTICLE'
 
 })
 
@@ -858,6 +876,8 @@ async function loadEditor(id) {
 
     form.value.categoryId = detail.categoryId ?? null
 
+    form.value.type = detail.type || 'ARTICLE'
+
     publishAtInput.value = toLocalDatetimeInput(detail.publishedAt)
 
   } finally {
@@ -1048,7 +1068,9 @@ async function saveDraft() {
 
     coverMediaKey: form.value.coverMediaKey,
 
-    categoryId: form.value.categoryId
+    categoryId: form.value.categoryId,
+
+    type: form.value.type
 
   }
 

vue/src/views/JobNavView.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="blog-container jobs-page">
+    <div class="page-header">
+      <h1 class="page-title">求职导航</h1>
+      <p class="page-subtitle">求职经验、面试技巧、行业洞见</p>
+    </div>
+
+    <div v-if="loading" class="article-detail-loading">加载中...</div>
+
+    <div v-else-if="articles.length === 0" class="card">
+      <div class="card-body" style="padding: 22px; color: var(--muted)">暂无内容</div>
+    </div>
+
+    <div v-else class="article-grid">
+      <ArticleCard v-for="a in articles" :key="a.id" :article="a" />
+    </div>
+
+    <div v-if="total > size" class="pagination" style="margin-top: 24px; display: flex; justify-content: center; gap: 12px">
+      <button class="btn" :disabled="page <= 0" @click="goPage(page - 1)">上一页</button>
+      <span style="line-height: 36px; color: var(--muted); font-size: 13px">
+        {{ page + 1 }} / {{ Math.ceil(total / size) }}
+      </span>
+      <button class="btn" :disabled="(page + 1) * size >= total" @click="goPage(page + 1)">下一页</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { fetchArticlesByType } from '../api/article'
+import ArticleCard from '../components/ArticleCard.vue'
+
+const route = useRoute()
+const router = useRouter()
+const loading = ref(true)
+const articles = ref([])
+const page = ref(0)
+const size = 20
+const total = ref(0)
+
+async function load() {
+  loading.value = true
+  try {
+    const p = Number(route.query.page) || 0
+    page.value = p
+    const resp = await fetchArticlesByType('JOB_NAV', { page: p, size })
+    articles.value = resp?.items || []
+    total.value = resp?.total ?? 0
+  } finally {
+    loading.value = false
+  }
+}
+
+function goPage(p) {
+  router.push({ query: { page: String(p) } })
+}
+
+watch(() => route.query.page, () => load())
+onMounted(() => load())
+</script>
+
+<style scoped>
+.page-header {
+  margin-bottom: 24px;
+}
+.page-title {
+  font-size: 28px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+.page-subtitle {
+  color: var(--muted);
+  font-size: 14px;
+  margin-top: 6px;
+}
+.article-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>