feat(widget): 支持通过 siteId 隔离不同站点的评论数据

- 在配置界面添加 siteId 输入项,用于区分不同站点/环境的评论
- 更新 API 客户端,将 postSlug 参数改为 postUrl 以保持一致性
- 在开发配置中默认添加 siteId 字段,并同步到存储和初始化逻辑
This commit is contained in:
anghunk
2026-02-09 14:15:16 +08:00
parent 32603d281a
commit 2453929455
3 changed files with 12 additions and 3 deletions

View File

@@ -129,6 +129,10 @@
<label>API 地址</label> <label>API 地址</label>
<input type="text" id="apiBaseUrl" value="http://localhost:8788" /> <input type="text" id="apiBaseUrl" value="http://localhost:8788" />
</div> </div>
<div class="config-item">
<label>Site ID可选用于隔离不同站点/环境的评论)</label>
<input type="text" id="siteId" placeholder="例如blog、dev、zishu.me" />
</div>
<div class="config-item"> <div class="config-item">
<label>主题</label> <label>主题</label>
<select id="theme"> <select id="theme">

View File

@@ -139,7 +139,7 @@ export function createApiClient(config) {
async function getLikeStatus() { async function getLikeStatus() {
const params = new URLSearchParams({ const params = new URLSearchParams({
post_slug: config.postSlug post_slug: config.postUrl
}); });
const headers = { const headers = {
'X-CWD-Like-User': getLikeUserId() 'X-CWD-Like-User': getLikeUserId()

View File

@@ -11,6 +11,7 @@ const STORAGE_KEY = 'cwd-dev-config';
const DEFAULT_CONFIG = { const DEFAULT_CONFIG = {
el: '#comments', el: '#comments',
apiBaseUrl: 'http://localhost:8788', apiBaseUrl: 'http://localhost:8788',
siteId: 'cwd-dev-config',
theme: 'light', // 默认 light / dark theme: 'light', // 默认 light / dark
}; };
@@ -47,10 +48,12 @@ function populateInputs(config) {
const apiBaseUrlInput = document.getElementById('apiBaseUrl'); const apiBaseUrlInput = document.getElementById('apiBaseUrl');
const themeSelect = document.getElementById('theme'); const themeSelect = document.getElementById('theme');
const avatarPrefixInput = document.getElementById('avatarPrefix'); const avatarPrefixInput = document.getElementById('avatarPrefix');
const siteIdInput = document.getElementById('siteId');
if (apiBaseUrlInput) apiBaseUrlInput.value = config.apiBaseUrl || DEFAULT_CONFIG.apiBaseUrl; if (apiBaseUrlInput) apiBaseUrlInput.value = config.apiBaseUrl || DEFAULT_CONFIG.apiBaseUrl;
if (themeSelect) themeSelect.value = config.theme || DEFAULT_CONFIG.theme; if (themeSelect) themeSelect.value = config.theme || DEFAULT_CONFIG.theme;
if (avatarPrefixInput) avatarPrefixInput.value = config.avatarPrefix || DEFAULT_CONFIG.avatarPrefix; if (avatarPrefixInput) avatarPrefixInput.value = config.avatarPrefix || DEFAULT_CONFIG.avatarPrefix;
if (siteIdInput) siteIdInput.value = config.siteId || DEFAULT_CONFIG.siteId || '';
} }
/** /**
@@ -59,7 +62,8 @@ function populateInputs(config) {
function getConfigFromInputs() { function getConfigFromInputs() {
const apiBaseUrl = document.getElementById('apiBaseUrl')?.value || DEFAULT_CONFIG.apiBaseUrl; const apiBaseUrl = document.getElementById('apiBaseUrl')?.value || DEFAULT_CONFIG.apiBaseUrl;
const theme = document.getElementById('theme')?.value || DEFAULT_CONFIG.theme; const theme = document.getElementById('theme')?.value || DEFAULT_CONFIG.theme;
return { apiBaseUrl, theme }; const siteId = document.getElementById('siteId')?.value || DEFAULT_CONFIG.siteId || '';
return { apiBaseUrl, theme, siteId };
} }
/** /**
@@ -88,6 +92,7 @@ async function initWidget() {
widgetInstance = new CWDComments({ widgetInstance = new CWDComments({
el: '#comments', el: '#comments',
apiBaseUrl: config.apiBaseUrl, apiBaseUrl: config.apiBaseUrl,
siteId: config.siteId,
}); });
widgetInstance.mount(); widgetInstance.mount();
} catch (error) {} } catch (error) {}
@@ -148,7 +153,7 @@ document.addEventListener('DOMContentLoaded', () => {
// 监听输入框变化,实时保存 // 监听输入框变化,实时保存
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const inputs = ['apiBaseUrl', 'theme']; const inputs = ['apiBaseUrl', 'theme', 'siteId'];
inputs.forEach((id) => { inputs.forEach((id) => {
const element = document.getElementById(id); const element = document.getElementById(id);
if (element) { if (element) {