feat(widget): 支持通过 siteId 隔离不同站点的评论数据
- 在配置界面添加 siteId 输入项,用于区分不同站点/环境的评论 - 更新 API 客户端,将 postSlug 参数改为 postUrl 以保持一致性 - 在开发配置中默认添加 siteId 字段,并同步到存储和初始化逻辑
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
@@ -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()
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user