refactor: 全站改用数据库动态驱动，支持分类与统计动态查询，并全面将作者及博主标识由'旺总'切换为'小东'

frontend/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>旺总的技术全栈博客 | Full-Stack · Cloud-Native · DevOps</title>
+    <title>小东的技术全栈博客 | Full-Stack · Cloud-Native · DevOps</title>
     <!-- Tailwind CSS CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
@@ -250,12 +250,12 @@
                 <div class="flex items-center gap-6">
                     <a href="#/" @click.prevent="navigateView('home')" class="flex items-center gap-3 group">
                         <div class="relative w-10 h-10 rounded-xl bg-gradient-to-tr from-sky-500 via-indigo-500 to-purple-600 flex items-center justify-center text-white shadow-md shadow-sky-500/25 group-hover:scale-105 transition-transform">
-                            <span class="text-xl font-black">旺</span>
+                            <span class="text-xl font-black">东</span>
                             <span class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-emerald-500 rounded-full border-2 border-white dark:border-slate-900"></span>
                         </div>
                         <div class="hidden sm:block">
                             <div class="font-extrabold text-base tracking-tight flex items-center gap-2">
-                                <span class="bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">旺总的技术全栈</span>
+                                <span class="bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">小东的技术全栈</span>
                                 <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-sky-100 text-sky-800 dark:bg-sky-950 dark:text-sky-300 border border-sky-200 dark:border-sky-800">
                                     v2.0
                                 </span>
@@ -341,7 +341,7 @@
                         <div>
                             <div class="flex flex-wrap items-center gap-3">
                                 <h1 class="text-2xl sm:text-3xl font-black tracking-tight text-slate-900 dark:text-white">
-                                    旺总 <span class="text-slate-400 text-lg font-normal font-mono">(WangZong)</span>
+                                    小东 <span class="text-slate-400 text-lg font-normal font-mono">(XiaoDong)</span>
                                 </h1>
                                 <span class="px-2.5 py-0.5 text-xs font-semibold rounded-md bg-gradient-to-r from-sky-500/10 to-indigo-500/10 text-sky-700 dark:text-sky-300 border border-sky-200/60 dark:border-sky-800/60">
                                     🚀 全栈架构师 · DevOps 极客
@@ -544,8 +544,8 @@
 
                             <div class="flex flex-wrap items-center gap-4 text-xs text-slate-500 dark:text-slate-400 font-mono">
                                 <span class="flex items-center gap-1.5">
-                                    <span class="w-5 h-5 rounded-full bg-slate-800 text-white flex items-center justify-center text-[10px]">旺</span>
-                                    <span>作者: {{ activePost.author || '旺总' }}</span>
+                                    <span class="w-5 h-5 rounded-full bg-slate-800 text-white flex items-center justify-center text-[10px]">东</span>
+                                    <span>作者: {{ activePost.author || '小东' }}</span>
                                 </span>
                                 <span>·</span>
                                 <span>⏱️ 预计耗时 {{ activePost.readTime || '5 min' }}</span>
@@ -758,7 +758,7 @@
                 <div>
                     <h1 class="text-3xl font-black text-slate-900 dark:text-white flex items-center gap-3">
                         <span>👨‍💻</span>
-                        <span>关于旺总 (WangZong) 与本站架构</span>
+                        <span>关于小东 (XiaoDong) 与本站架构</span>
                     </h1>
                     <p class="mt-2 text-sm text-slate-500">一个追求工程极致、拥抱云原生与本地大模型的全栈开发者个人空间。</p>
                 </div>
@@ -878,10 +878,7 @@
                             <label class="block font-semibold mb-1 text-slate-700 dark:text-slate-300 text-xs">技术专栏分类</label>
                             <select v-model="newPost.categoryName"
                                     class="w-full px-3.5 py-2 rounded-xl bg-slate-50 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 focus:ring-2 focus:ring-sky-500 focus:outline-none text-xs">
-                                <option value="云原生 & Linux">云原生 & Linux</option>
-                                <option value="Java & Spring Boot">Java & Spring Boot</option>
-                                <option value="AI & 本地模型">AI & 本地模型</option>
-                                <option value="全栈开发 & CI/CD">全栈开发 & CI/CD</option>
+                                <option v-for="cat in availableCategories" :key="cat" :value="cat">{{ cat }}</option>
                             </select>
                         </div>
                         <div>
@@ -964,7 +961,7 @@
             <div class="max-w-6xl mx-auto px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
                 <div class="flex items-center gap-2">
                     <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
-                    <span>© 2026 旺总的技术全栈 · 运行于 Google Cloud 台湾节点</span>
+                    <span>© 2026 小东的技术全栈 · 运行于 Google Cloud 台湾节点</span>
                 </div>
                 <div class="flex items-center gap-4 font-mono text-[11px]">
                     <span>Spring Boot 3</span>
@@ -1007,24 +1004,48 @@
                 const showScrollTop = ref(false);
                 const toasts = ref([]);
 
-                const categories = ['全部', '云原生 & Linux', 'Java & Spring Boot', 'AI & 本地模型', '全栈开发 & CI/CD'];
-
-                const categoryList = [
-                    { name: '云原生 & Linux', icon: '☁️', desc: 'Google Cloud 台湾节点云服务器运维、Ubuntu 系统内核参数调优、1Panel 容器环境与网络实战。' },
-                    { name: 'Java & Spring Boot', icon: '🍃', desc: 'Spring Boot 3.2 现代化分层设计、Spring Data JPA 对象关系映射、事务控制与统一 RESTful 规范。' },
-                    { name: 'AI & 本地模型', icon: '🧠', desc: 'Ollama 容器化引擎、DeepSeek R1 本地 CPU 性能压测与加速方案、Prompt 预填充降延迟实操。' },
-                    { name: '全栈开发 & CI/CD', icon: '⚙️', desc: '前后端分离微服务架构、Docker Compose 多容器生命周期管理、私有 Gitea Actions 持续交付流水线。' }
-                ];
+                const categories = ref(['全部']);
+                const categoryList = ref([]);
+                const availableCategories = computed(() => categories.value.filter(c => c !== '全部'));
 
                 const newPost = ref({
                     title: '',
                     categoryName: '全栈开发 & CI/CD',
-                    author: '旺总',
+                    author: '小东',
                     tags: 'SpringBoot,MySQL',
                     summary: '',
                     content: ''
                 });
 
+                // 从后端 MySQL 8.0 动态获取分类列表
+                async function fetchCategories() {
+                    try {
+                        const res = await fetch(`${API_BASE}/categories`);
+                        if (res.ok) {
+                            const result = await res.json();
+                            const list = result.data || result || [];
+                            if (list.length > 0) {
+                                categoryList.value = list.map(c => ({
+                                    name: c.name,
+                                    icon: getCategoryIcon(c.name),
+                                    desc: c.description || '沉淀架构与工程规范'
+                                }));
+                                categories.value = ['全部', ...list.map(c => c.name)];
+                                return;
+                            }
+                        }
+                    } catch (e) {
+                        console.warn('获取分类数据失败，使用基础兜底:', e);
+                    }
+                    categories.value = ['全部', '云原生 & Linux', 'Java & Spring Boot', 'AI & 本地模型', '全栈开发 & CI/CD'];
+                    categoryList.value = [
+                        { name: '云原生 & Linux', icon: '☁️', desc: 'Google Cloud 台湾节点云服务器运维、Ubuntu 系统内核参数调优、1Panel 容器环境与网络实战。' },
+                        { name: 'Java & Spring Boot', icon: '🍃', desc: 'Spring Boot 3.2 现代化分层设计、Spring Data JPA 对象关系映射、事务控制与统一 RESTful 规范。' },
+                        { name: 'AI & 本地模型', icon: '🧠', desc: 'Ollama 容器化引擎、DeepSeek R1 本地 CPU 性能压测与加速方案、Prompt 预填充降延迟实操。' },
+                        { name: '全栈开发 & CI/CD', icon: '⚙️', desc: '前后端分离微服务架构、Docker Compose 多容器生命周期管理、私有 Gitea Actions 持续交付流水线。' }
+                    ];
+                }
+
                 // Toast 通知提示系统
                 function showToast(text, type = 'info', icon = '🔔') {
                     const id = Date.now() + Math.random();
@@ -1318,8 +1339,8 @@
                 function openPublishModal() {
                     newPost.value = {
                         title: '',
-                        categoryName: '全栈开发 & CI/CD',
-                        author: '旺总',
+                        categoryName: availableCategories.value[0] || '全栈开发 & CI/CD',
+                        author: '小东',
                         tags: 'SpringBoot,MySQL,Docker',
                         summary: '',
                         content: ''
@@ -1479,6 +1500,7 @@
                     window.addEventListener('scroll', handleScroll);
                     window.addEventListener('hashchange', handleHashRoute);
 
+                    await fetchCategories();
                     await fetchPosts();
                     handleHashRoute();
                 });
@@ -1498,6 +1520,7 @@
                     stats,
                     categories,
                     categoryList,
+                    availableCategories,
                     selectedCategory,
                     searchKeyword,
                     selectCategory,