fix(样式): 修复暗黑主题下评论组件边框显示问题

修复评论组件在暗黑主题下边框显示异常的问题：
- 移除评论头部的固定底部边框，改由主题变量控制
- 修正主题变量作用域，确保变量在容器内生效
- 优化主题初始化逻辑，默认使用亮色主题
- 添加主题切换监听，支持动态切换亮色/暗黑主题

docs/.vitepress/components/footerDoc.vue

@@ -3,9 +3,14 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
+import { useData } from "vitepress";
 
 const commentsRoot = ref(null);
+const commentsInstance = ref(null);
+const { isDark } = useData();
+
+const getTheme = () => (isDark.value ? "dark" : "light");
 
 onMounted(async () => {
   if (!commentsRoot.value || typeof window === "undefined") return;
@@ -30,8 +35,22 @@ onMounted(async () => {
   const comments = new window.CWDComments({
     el: commentsRoot.value,
     apiBaseUrl,
+    theme: getTheme(),
   });
 
+  commentsInstance.value = comments;
+
   comments.mount();
+
+  watch(
+    isDark,
+    (value) => {
+      if (!commentsInstance.value) return;
+      commentsInstance.value.updateConfig({
+        theme: value ? "dark" : "light",
+      });
+    },
+    { immediate: false }
+  );
 });
 </script>

docs/widget/src/core/CWDComments.js

@@ -126,9 +126,8 @@ export class CWDComments {
 			this.mountPoint = document.createElement('div');
 			this.mountPoint.className = 'cwd-comments-container';
 			this.shadowRoot.appendChild(this.mountPoint);
-			if (this.config.theme) {
-				this.mountPoint.setAttribute('data-theme', this.config.theme);
-			}
+			const theme = this.config.theme || 'light';
+			this.mountPoint.setAttribute('data-theme', theme);
 			this._applyCustomCss();
 		}
 

docs/widget/src/styles/main.css

@@ -41,7 +41,6 @@
 
 .cwd-comments-header {
   padding: 16px 0;
-  border-bottom: 1px solid var(--cwd-border);
 }
 
 .cwd-comments-count {

docs/widget/src/styles/variables.css

@@ -3,7 +3,7 @@
  * 支持主题切换
  */
 
-:root,
+.cwd-comments-container,
 [data-theme="light"] {
   /* 主色调 */
   --cwd-primary: #0969da;