feat(widget): 添加评论图片灯箱预览功能

- 新增 ImagePreview 组件用于全屏查看评论中的图片
- 在功能设置中添加图片灯箱模式开关选项
- 扩展媒体元素样式限制，支持视频和 iframe 的尺寸控制
- 更新前后端 API 以支持 enableImageLightbox 配置项
- 优化设置页面布局，使用卡片式分组展示功能项

cwd-admin/src/api/admin.ts

@@ -130,6 +130,7 @@ export type LikeStatsResponse = {
 export type FeatureSettingsResponse = {
 	enableCommentLike: boolean;
 	enableArticleLike: boolean;
+	enableImageLightbox: boolean;
 	commentPlaceholder?: string;
 	visibleDomains?: string[];
 };
@@ -333,7 +334,7 @@ export function fetchFeatureSettings(): Promise<FeatureSettingsResponse> {
 	return get<FeatureSettingsResponse>('/admin/settings/features');
 }
 
-export function saveFeatureSettings(data: { enableCommentLike?: boolean; enableArticleLike?: boolean; commentPlaceholder?: string; visibleDomains?: string[] }): Promise<{ message: string }> {
+export function saveFeatureSettings(data: { enableCommentLike?: boolean; enableArticleLike?: boolean; enableImageLightbox?: boolean; commentPlaceholder?: string; visibleDomains?: string[] }): Promise<{ message: string }> {
 	return put<{ message: string }>('/admin/settings/features', data);
 }
 

cwd-admin/src/styles/components/setting.less

@@ -279,4 +279,20 @@
 .tab-fade-leave-to {
   opacity: 0;
   transform: translateY(4px);
+}
+
+.form-item-flex {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.feature {
+  .bg {
+    margin-bottom: 15px;
+    background: var(--bg-sider);
+    padding: 10px;
+    border-radius: 5px;
+  }
 }

cwd-admin/src/styles/markdown.css

@@ -114,9 +114,12 @@
   background: var(--cwd-bg-secondary, #f6f8fa);
 }
 
-.cell-content-text img {
+.cell-content-text img,
+.cell-content-text video,
+.cell-content-text iframe {
   max-width: 100%;
   height: auto;
+  max-height: 200px;
 }
 
 /* 兼容其他框架导入的样式 */

cwd-admin/src/views/SettingsView/index.vue

@@ -207,39 +207,54 @@
             </div>
           </template>
           <template v-else-if="activeTab === 'feature'">
-            <div class="card">
+            <div class="card feature">
               <div class="card-header">
                 <div class="card-title">功能开关</div>
               </div>
               <div class="card-body">
-                <div class="form-item">
-                  <label class="form-label">开启文章点赞功能</label>
-                  <label class="switch">
-                    <input v-model="enableArticleLike" type="checkbox" />
-                    <span class="slider" />
-                  </label>
+                <div class="form-item bg">
+                  <div class="form-item-flex">
+                    <label class="form-label">开启文章点赞功能</label>
+                    <label class="switch">
+                      <input v-model="enableArticleLike" type="checkbox" />
+                      <span class="slider" />
+                    </label>
+                  </div>
                   <div class="form-hint">
                     开启后，评论区顶部会显示的文章点赞（喜欢）按钮。
                   </div>
                 </div>
-                <div class="form-item">
-                  <label class="form-label">开启评论点赞功能</label>
-                  <label class="switch">
-                    <input v-model="enableCommentLike" type="checkbox" />
-                    <span class="slider" />
-                  </label>
+                <div class="form-item bg">
+                  <div class="form-item-flex">
+                    <label class="form-label">开启评论点赞功能</label>
+                    <label class="switch">
+                      <input v-model="enableCommentLike" type="checkbox" />
+                      <span class="slider" />
+                    </label>
+                  </div>
                   <div class="form-hint">
                     开启后，评论列表中的每条评论都会显示点赞按钮。
                   </div>
                 </div>
-      
+
+                <div class="form-item bg">
+                  <div class="form-item-flex">
+                    <label class="form-label">评论列表图片灯箱模式</label>
+                    <label class="switch">
+                      <input v-model="enableImageLightbox" type="checkbox" />
+                      <span class="slider" />
+                    </label>
+                  </div>
+                  <div class="form-hint">开启后，点击评论中的图片时会全屏放大预览。</div>
+                </div>
+
                 <div class="form-item">
                   <label class="form-label">评论框提示文案 (Placeholder)</label>
                   <textarea
                     v-model="commentPlaceholder"
                     class="form-input"
                     rows="3"
-                    style="height:90px;resize:none;"
+                    style="height: 90px; resize: none"
                     placeholder="默认：写下你的评论，可换行书写提示"
                   ></textarea>
                   <div class="form-hint">
@@ -382,7 +397,8 @@
                   </div>
                   <div v-else-if="smtpProvider === '163'" class="form-hint">
                     注意：163 邮箱必须使用授权码，而非登录密码。<br />
-                    请登录 163 邮箱网页版，在【设置 - POP3/SMTP/IMAP】中开启服务并生成授权码。
+                    请登录 163 邮箱网页版，在【设置 -
+                    POP3/SMTP/IMAP】中开启服务并生成授权码。
                   </div>
                 </div>
 
@@ -640,6 +656,7 @@ const adminKeySet = ref(false);
 const requireReview = ref(false);
 const enableArticleLike = ref(true);
 const enableCommentLike = ref(true);
+const enableImageLightbox = ref(true);
 const commentPlaceholder = ref("");
 const telegramBotToken = ref("");
 const telegramChatId = ref("");
@@ -932,6 +949,7 @@ async function load() {
     emailGlobalEnabled.value = !!emailNotifyRes.globalEnabled;
     enableArticleLike.value = featureRes.enableArticleLike;
     enableCommentLike.value = featureRes.enableCommentLike;
+    enableImageLightbox.value = featureRes.enableImageLightbox;
     commentPlaceholder.value = featureRes.commentPlaceholder || "";
 
     telegramBotToken.value = telegramRes.botToken || "";
@@ -1080,6 +1098,7 @@ async function saveFeature() {
       saveFeatureSettings({
         enableArticleLike: enableArticleLike.value,
         enableCommentLike: enableCommentLike.value,
+        enableImageLightbox: enableImageLightbox.value,
         commentPlaceholder: commentPlaceholder.value,
       }),
     ]);