feat(wiki): 二十四节气详情抓取百度百科并图文展示
Publish Mini Program Dev Version / publish (push) Successful in 1m12s
Build and Publish Server / build (push) Successful in 8m24s

数据源:百度百科开放接口 BaikeLemmaCardApi(无反爬,返回结构化 JSON)
与「历史上的今天」(维基)完全解耦,维基代码原样保留可随时恢复:

服务端:
- WikiEntry 增加 image(配图)和 extra(结构化字段 JSON)字段
- 新建 BaikeTermSyncLog 独立日志表(不污染维基 WikiSyncLog)
- 新建 BaikeTermSyncService 独立同步服务(24 节气,间隔 1.2s)
- 启动时缺详情自动补齐,之后按配置间隔定时增量刷新
- 管理 API:GET/POST /admin/api/wiki/term-sync*

管理后台:
- 百科条目 Tab 顶部加节气同步卡片(X/24 + 状态 + 同步按钮)
- 条目编辑器加配图 URL(含预览)和节气扩展字段编辑

小程序:
- 百科页展开详情图文展示:配图 + 简介 + 物候/习俗/养生等分块

本地验证:24/24 节气抓取成功,image/extra 全部填充,维基数据不受影响
This commit is contained in:
gouki
2026-08-13 00:31:43 +00:00
parent 0ce1a1ef97
commit fec383f257
12 changed files with 759 additions and 6 deletions
+104 -5
View File
@@ -47,6 +47,27 @@ export default {
<!-- 百科条目管理 -->
<div class="px-4 py-2 sm:px-0" v-if="tab === 'entries'">
<!-- 节气详情同步(百度百科) -->
<div class="bg-white shadow rounded-lg mb-4">
<div class="px-4 py-4 sm:px-6 flex flex-wrap items-center justify-between gap-3">
<div class="flex items-center gap-4">
<div>
<div class="text-sm font-medium text-gray-900">节气详情(百度百科)</div>
<div class="text-xs text-gray-500 mt-0.5">
已含详情 {{ termSync.detailedTerms || 0 }} / {{ termSync.totalTerms || 24 }}
<span v-if="termSync.lastSync && termSync.lastSync.startedAt"> 最近同步:{{ formatTime(termSync.lastSync.startedAt) }}</span>
<span v-if="termSync.lastSync && termSync.lastSync.status" :class="termSync.lastSync.status === 'success' ? 'text-green-600' : 'text-yellow-600'"> {{ termSync.lastSync.status === 'success' ? '成功' : termSync.lastSync.status === 'partial' ? '部分失败' : '失败' }}</span>
</div>
</div>
</div>
<div class="flex items-center gap-2">
<button @click="loadTermSyncStatus" class="px-3 py-2 border border-gray-300 rounded-md text-sm hover:bg-gray-50">刷新</button>
<button @click="triggerTermSync" :disabled="termSync.running || termSyncing" class="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed">
<i class="fas fa-sync mr-1" :class="termSync.running ? 'fa-spin' : ''"></i>{{ termSync.running ? '同步中...' : '同步节气详情' }}
</button>
</div>
</div>
</div>
<div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
@@ -170,6 +191,21 @@ export default {
<label class="block text-sm font-medium text-gray-700 mb-1">详细内容</label>
<textarea v-model="editor.form.content" rows="6" class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm"></textarea>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">配图 URL</label>
<input v-model="editor.form.image" placeholder="https://..." class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm"/>
<div v-if="editor.form.image" class="mt-2"><img :src="editor.form.image" class="h-20 rounded border" alt="配图预览"/></div>
</div>
<!-- 节气扩展字段(仅节气分类显示) -->
<div v-if="editor.form.category === 'term'">
<label class="block text-sm font-medium text-gray-700 mb-2">节气扩展信息</label>
<div class="grid grid-cols-2 gap-3">
<div v-for="f in termExtraFields" :key="f.key">
<label class="block text-xs text-gray-500 mb-1">{{ f.name }}</label>
<input v-model="editor.extra[f.key]" class="block w-full rounded-md border border-gray-300 px-2 py-1.5 text-sm"/>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">排序(越小越靠前)</label>
@@ -210,20 +246,39 @@ export default {
editor: {
visible: false,
id: null,
form: { category: 'other', title: '', brief: '', content: '', sort: 0, status: 1 },
form: { category: 'other', title: '', brief: '', content: '', image: '', sort: 0, status: 1 },
extra: {},
},
termExtraFields: [
{ key: 'alias', name: '别名' },
{ key: 'english', name: '外文名' },
{ key: 'meaning', name: '涵义' },
{ key: 'solarDate', name: '公历时间' },
{ key: 'ecliptic', name: '黄道位置' },
{ key: 'climate', name: '气候特点' },
{ key: 'phenology', name: '物候现象' },
{ key: 'farming', name: '农事活动' },
{ key: 'customs', name: '传统习俗' },
{ key: 'health', name: '起居养生' },
{ key: 'flower', name: '花信' },
],
saving: false,
syncing: false,
syncStatus: {},
syncTimer: null,
termSync: {},
termSyncing: false,
termSyncTimer: null,
};
},
mounted() {
this.loadEntries();
this.loadSyncStatus();
this.loadTermSyncStatus();
},
beforeUnmount() {
if (this.syncTimer) clearInterval(this.syncTimer);
if (this.termSyncTimer) clearInterval(this.termSyncTimer);
},
methods: {
catName(key) {
@@ -265,22 +320,40 @@ export default {
openEditor(entry) {
this.editor.id = entry ? entry.id : null;
this.editor.form = entry
? { category: entry.category, title: entry.title, brief: entry.brief, content: entry.content, sort: entry.sort, status: entry.status }
: { category: 'other', title: '', brief: '', content: '', sort: 0, status: 1 };
? { category: entry.category, title: entry.title, brief: entry.brief, content: entry.content, image: entry.image || '', sort: entry.sort, status: entry.status }
: { category: 'other', title: '', brief: '', content: '', image: '', sort: 0, status: 1 };
let extra = {};
if (entry && entry.extra) {
try { extra = JSON.parse(entry.extra); } catch (e) { extra = {}; }
}
this.editor.extra = extra;
this.editor.visible = true;
},
async saveEntry() {
const f = this.editor.form;
if (!f.title.trim()) { alert('标题不能为空'); return; }
// 节气分类:把 extra 对象序列化为 JSON 字符串
const payload = { ...f };
if (f.category === 'term') {
const extra = {};
this.termExtraFields.forEach(fd => {
const v = (this.editor.extra[fd.key] || '').trim();
if (v) extra[fd.key] = v;
});
payload.extra = JSON.stringify(extra);
} else {
payload.extra = '';
}
this.saving = true;
try {
if (this.editor.id) {
await this.api(`/admin/api/wiki/entries/${this.editor.id}`, { method: 'PUT', body: JSON.stringify(f) });
await this.api(`/admin/api/wiki/entries/${this.editor.id}`, { method: 'PUT', body: JSON.stringify(payload) });
} else {
await this.api('/admin/api/wiki/entries', { method: 'POST', body: JSON.stringify(f) });
await this.api('/admin/api/wiki/entries', { method: 'POST', body: JSON.stringify(payload) });
}
this.editor.visible = false;
this.loadEntries();
this.loadTermSyncStatus();
} catch (e) {
alert(e.message);
} finally {
@@ -322,5 +395,31 @@ export default {
this.syncing = false;
}
},
async loadTermSyncStatus() {
try {
this.termSync = await this.api('/admin/api/wiki/term-sync-status');
if (this.termSync.running && !this.termSyncTimer) {
this.termSyncTimer = setInterval(() => this.loadTermSyncStatus(), 5000);
} else if (!this.termSync.running && this.termSyncTimer) {
clearInterval(this.termSyncTimer);
this.termSyncTimer = null;
}
} catch (e) {
console.error(e);
}
},
async triggerTermSync() {
if (!confirm('将从百度百科抓取 24 节气的详细图文(约 30 秒),确认执行?')) return;
this.termSyncing = true;
try {
await this.api('/admin/api/wiki/term-sync', { method: 'POST' });
this.loadTermSyncStatus();
setTimeout(() => this.loadEntries(), 3000);
} catch (e) {
alert(e.message);
} finally {
this.termSyncing = false;
}
},
},
}