feat: 新增评论框提示文案自定义功能并优化侧边栏排序

- 新增评论框提示文案（placeholder）自定义功能，支持在后台设置 - 更新文档：重命名“点赞开关”为“功能开关”，调整侧边栏排序 - 优化前端组件，统一处理评论表单和回复编辑器的提示文案 - 修复CSS样式，确保操作按钮始终可见
2026-02-04 14:01:48 +08:00
parent b304f52ceb
commit b8550848d7
15 changed files with 769 additions and 710 deletions
--- a/cwd-admin/src/api/admin.ts
+++ b/cwd-admin/src/api/admin.ts
@@ -126,6 +126,7 @@ export type LikeStatsResponse = {
 export type FeatureSettingsResponse = {
 	enableCommentLike: boolean;
 	enableArticleLike: boolean;
+	commentPlaceholder?: string;
 };

 export type AdminDisplaySettingsResponse = {
@@ -327,7 +328,7 @@ export function fetchFeatureSettings(): Promise<FeatureSettingsResponse> {
 	return get<FeatureSettingsResponse>('/admin/settings/features');
 }

-export function saveFeatureSettings(data: { enableCommentLike?: boolean; enableArticleLike?: boolean }): Promise<{ message: string }> {
+export function saveFeatureSettings(data: { enableCommentLike?: boolean; enableArticleLike?: boolean; commentPlaceholder?: string }): Promise<{ message: string }> {
 	return put<{ message: string }>('/admin/settings/features', data);
 }

--- a/cwd-admin/src/views/SettingsView/index.vue
+++ b/cwd-admin/src/views/SettingsView/index.vue
@@ -224,6 +224,20 @@
                    开启后，评论列表中的每条评论都会显示点赞按钮。
                  </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;"
+                    placeholder="默认：写下你的评论，可换行书写提示"
+                  ></textarea>
+                  <div class="form-hint">
+                    自定义评论输入框的提示文字，支持换行。留空则使用默认值。
+                  </div>
+                </div>
                <div class="card-actions">
                  <button
                    class="card-button"
@@ -600,6 +614,7 @@ const adminKeySet = ref(false);
 const requireReview = ref(false);
 const enableArticleLike = ref(true);
 const enableCommentLike = ref(true);
+const commentPlaceholder = ref("");
 const telegramBotToken = ref("");
 const telegramChatId = ref("");
 const telegramNotifyEnabled = ref(false);
@@ -853,6 +868,7 @@ async function load() {
    emailGlobalEnabled.value = !!emailNotifyRes.globalEnabled;
    enableArticleLike.value = featureRes.enableArticleLike;
    enableCommentLike.value = featureRes.enableCommentLike;
+    commentPlaceholder.value = featureRes.commentPlaceholder || "";

    telegramBotToken.value = telegramRes.botToken || "";
    telegramChatId.value = telegramRes.chatId || "";
@@ -998,6 +1014,7 @@ async function saveFeature() {
      saveFeatureSettings({
        enableArticleLike: enableArticleLike.value,
        enableCommentLike: enableCommentLike.value,
+        commentPlaceholder: commentPlaceholder.value,
      }),
    ]);

--- a/cwd-api/src/api/admin/featureSettings.ts
+++ b/cwd-api/src/api/admin/featureSettings.ts
@@ -25,10 +25,15 @@ export const updateFeatureSettings = async (c: Context<{ Bindings: Bindings }>)
 			typeof body.enableArticleLike === 'boolean'
 				? body.enableArticleLike
 				: undefined;
+		const rawCommentPlaceholder =
+			typeof body.commentPlaceholder === 'string' ? body.commentPlaceholder : undefined;
+		const commentPlaceholder =
+			rawCommentPlaceholder !== undefined ? rawCommentPlaceholder.trim() : undefined;

 		await saveFeatureSettings(c.env, {
 			enableCommentLike,
-			enableArticleLike
+			enableArticleLike,
+			commentPlaceholder
 		});

 		return c.json({ message: '保存成功！' });
--- a/cwd-api/src/utils/featureSettings.ts
+++ b/cwd-api/src/utils/featureSettings.ts
@@ -2,10 +2,12 @@ import { Bindings } from '../bindings';

 export const FEATURE_COMMENT_LIKE_KEY = 'comment_feature_comment_like';
 export const FEATURE_ARTICLE_LIKE_KEY = 'comment_feature_article_like';
+export const FEATURE_COMMENT_PLACEHOLDER_KEY = 'comment_feature_placeholder';

 export type FeatureSettings = {
 	enableCommentLike: boolean;
 	enableArticleLike: boolean;
+	commentPlaceholder?: string;
 };

 export async function loadFeatureSettings(env: Bindings): Promise<FeatureSettings> {
@@ -13,9 +15,9 @@ export async function loadFeatureSettings(env: Bindings): Promise<FeatureSetting
 		'CREATE TABLE IF NOT EXISTS Settings (key TEXT PRIMARY KEY, value TEXT NOT NULL)'
 	).run();

-	const keys = [FEATURE_COMMENT_LIKE_KEY, FEATURE_ARTICLE_LIKE_KEY];
+	const keys = [FEATURE_COMMENT_LIKE_KEY, FEATURE_ARTICLE_LIKE_KEY, FEATURE_COMMENT_PLACEHOLDER_KEY];
 	const { results } = await env.CWD_DB.prepare(
-		'SELECT key, value FROM Settings WHERE key IN (?, ?)'
+		'SELECT key, value FROM Settings WHERE key IN (?, ?, ?)'
 	)
 		.bind(...keys)
 		.all<{ key: string; value: string }>();
@@ -47,9 +49,12 @@ export async function loadFeatureSettings(env: Bindings): Promise<FeatureSetting
 	const enableArticleLikeRaw = map.get(FEATURE_ARTICLE_LIKE_KEY);
 	const enableArticleLike = enableArticleLikeRaw !== '0'; // Default to true if missing or '1'

+	const commentPlaceholder = map.get(FEATURE_COMMENT_PLACEHOLDER_KEY);
+
 	return {
 		enableCommentLike,
-		enableArticleLike
+		enableArticleLike,
+		commentPlaceholder
 	};
 }

@@ -79,6 +84,10 @@ export async function saveFeatureSettings(
 						? '1'
 						: '0'
 					: undefined
+		},
+		{
+			key: FEATURE_COMMENT_PLACEHOLDER_KEY,
+			value: settings.commentPlaceholder
 		}
 	];

--- a/docs/.vitepress/configs/sidebar.js
+++ b/docs/.vitepress/configs/sidebar.js
@@ -12,12 +12,12 @@ export const rootSidebar = [
 		text: '功能',
 		items: [
 			{ text: '后台设置', link: '/function/admin-panel' },
-			{ text: '通知邮箱', link: '/function/email-reminder' },
+			{ text: '邮箱提醒', link: '/function/email-reminder' },
 			{ text: 'Telegram 通知', link: '/function/telegram-notify' },
 			{ text: '安全设置', link: '/function/security-settings' },
+			{ text: '功能开关', link: '/function/feature-settings' },
+			{ text: '数据看板', link: '/function/data-statistics' },
 			{ text: '数据管理', link: '/function/data-migration' },
-			{ text: '点赞开关', link: '/function/feature-settings' },
-			{ text: '数据统计', link: '/function/data-statistics' },
 		],
 	},
 	{ text: '反馈', link: '/guide/feedback' },
--- a/docs/function/data-migration.md
+++ b/docs/function/data-migration.md
@@ -1,4 +1,4 @@
-# 数据迁移
+# 数据管理

 目前支持迁移数据的评论框架有以下，请保证导出的格式为 json 格式。

--- a/docs/function/data-statistics.md
+++ b/docs/function/data-statistics.md
@@ -1,4 +1,4 @@
-# 数据统计
+# 数据看板

 CWD 内置提供评论数据分析和访客数据分析功能。

--- a/docs/function/email-reminder.md
+++ b/docs/function/email-reminder.md
@@ -1,4 +1,4 @@
-# 通知邮箱
+# 邮箱提醒

 目前支持进行通知的邮箱有：

--- a/docs/function/feature-settings.md
+++ b/docs/function/feature-settings.md
@@ -1,5 +1,11 @@
-# 点赞开关
+# 功能开关
+
+### 点赞开关

 在 `网站设置` > `功能开关` 中，您可以控制文章点赞和评论点赞功能的开启状态。

 功能默认开启，可根据需要关闭。
+
+### 评论框提示文案 (Placeholder)
+
+自定义评论输入框的提示文字，支持换行。留空则使用默认值。
--- a/docs/widget/src/components/CommentForm.js
+++ b/docs/widget/src/components/CommentForm.js
@@ -43,6 +43,7 @@ export class CommentForm extends Component {
 		const canSubmit = localForm.name.trim() && localForm.email.trim() && localForm.content.trim();
 		const isAdmin = this.props.adminEmail && localForm.email.trim() === this.props.adminEmail;
 		const isVerified = isAdmin && auth.hasToken();
+		const placeholderText = this.props.placeholder || '';

 		const root = this.createElement('form', {
 			className: 'cwd-comment-form',
@@ -104,6 +105,7 @@ export class CommentForm extends Component {
 									className: `cwd-form-textarea ${formErrors.content ? 'cwd-input-error' : ''}`,
 									attributes: {
 										rows: 4,
+										placeholder: placeholderText,
 										disabled: submitting,
 										onInput: (e) => this.handleFieldChange('content', e.target.value),
 										onKeydown: (e) => this.handleContentKeydown(e),
--- a/docs/widget/src/components/CommentItem.js
+++ b/docs/widget/src/components/CommentItem.js
@@ -53,10 +53,10 @@ export class CommentItem extends Component {
 							attributes: {
 								src: comment.avatar,
 								alt: comment.name,
-                loading: 'lazy'
-              }
-            })
-          ]
+								loading: 'lazy',
+							},
+						}),
+					],
 				}),

 				// 主体内容
@@ -79,33 +79,35 @@ export class CommentItem extends Component {
 															attributes: {
 																href: comment.url,
 																target: '_blank',
-                                rel: 'noopener noreferrer'
+																rel: 'noopener noreferrer',
 															},
-                              text: comment.name
-                            })
-                          ]
+															text: comment.name,
+														}),
+													],
 												})
 											: this.createTextElement('span', comment.name, 'cwd-author-name'),
-                    ...(isAdmin ? [
+										...(isAdmin
+											? [
 													adminBadge
 														? this.createTextElement('span', `${adminBadge}`, 'cwd-admin-badge')
 														: this.createElement('span', {
 																className: 'cwd-admin-badge cwd-admin-badge-icon',
 																attributes: {
-                              title: '网站管理员'
+																	title: '网站管理员',
 																},
-                            html: '<svg viewBox="0 0 22 22" aria-label="网站管理员" role="img" class="cwd-admin-icon" style="width:15px;height:15px;fill:currentColor;vertical-align:-0.15em;"><g><path d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"></path></g></svg>'
-                          })
-                    ] : []),
-                    ...(isPinned ? [
-                      this.createTextElement('span', '置顶', 'cwd-pin-badge')
-                    ] : []),
-                    // 显示回复目标
-                    ...(comment.replyToAuthor ? [
-                      this.createTextElement('span', ' 回复 ', 'cwd-reply-to-separator'),
-                      this.createTextElement('span', comment.replyToAuthor, 'cwd-reply-to-author')
-                    ] : [])
+																html: '<svg viewBox="0 0 22 22" aria-label="网站管理员" role="img" class="cwd-admin-icon" style="width:15px;height:15px;fill:currentColor;vertical-align:-0.15em;"><g><path d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"></path></g></svg>',
+															}),
 												]
+											: []),
+										...(isPinned ? [this.createTextElement('span', '置顶', 'cwd-pin-badge')] : []),
+										// 显示回复目标
+										...(comment.replyToAuthor
+											? [
+													this.createTextElement('span', ' 回复 ', 'cwd-reply-to-separator'),
+													this.createTextElement('span', comment.replyToAuthor, 'cwd-reply-to-author'),
+												]
+											: []),
+									],
 								}),

 								// 操作区域
@@ -115,11 +117,12 @@ export class CommentItem extends Component {
 										this.createElement('span', {
 											className: 'cwd-action-btn',
 											attributes: {
-                        onClick: () => this.handleReply()
+												onClick: () => this.handleReply(),
 											},
-                      text: '回复'
+											text: '回复',
 										}),
-                    ...(this.props.enableCommentLike !== false ? [
+										...(this.props.enableCommentLike !== false
+											? [
 													this.createElement('div', {
 														className: 'cwd-comment-like',
 														children: [
@@ -128,7 +131,7 @@ export class CommentItem extends Component {
 																attributes: {
 																	type: 'button',
 																	'aria-label': this.hasLiked(comment.id) ? '取消点赞' : '点赞',
-                              onClick: () => this.handleLikeComment()
+																	onClick: () => this.handleLikeComment(),
 																},
 																children: [
 																	this.createElement('span', {
@@ -139,17 +142,17 @@ export class CommentItem extends Component {
 																				attributes: {
 																					viewBox: '0 0 24 24',
 																					'aria-hidden': 'true',
-                                      fill: this.hasLiked(comment.id) ? 'currentColor' : 'none'
+																					fill: this.hasLiked(comment.id) ? 'currentColor' : 'none',
 																				},
 																				children: [
 																					this.createElement('path', {
 																						attributes: {
-                                          d: 'M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13 1 7.59 6.41C7.22 6.78 7 7.3 7 7.83V19c0 1.1.9 2 2 2h8c.78 0 1.48-.45 1.82-1.11l3.02-7.05c.11-.23.16-.48.16-.74v-2z'
-                                        }
-                                      })
-                                    ]
-                                  })
-                                ]
+																							d: 'M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13 1 7.59 6.41C7.22 6.78 7 7.3 7 7.83V19c0 1.1.9 2 2 2h8c.78 0 1.48-.45 1.82-1.11l3.02-7.05c.11-.23.16-.48.16-.74v-2z',
+																						},
+																					}),
+																				],
+																			}),
+																		],
 																	}),
 																	...(() => {
 																		const likeCount =
@@ -157,45 +160,42 @@ export class CommentItem extends Component {
 																				? comment.likes
 																				: 0;
 																		return likeCount >= 1
-                                  ? [
-                                      this.createTextElement(
-                                        'span',
-                                        String(likeCount),
-                                        'cwd-comment-like-count'
-                                      )
-                                    ]
+																			? [this.createTextElement('span', String(likeCount), 'cwd-comment-like-count')]
 																			: [];
-                              })()
-                            ]
-                          })
-                        ]
-                      })
-                    ] : []),
-                    this.createTextElement('span', formatRelativeTime(comment.created), 'cwd-comment-time')
-                  ]
-                })
+																	})(),
+																],
+															}),
+														],
+													}),
 												]
+											: []),
+										this.createTextElement('span', formatRelativeTime(comment.created), 'cwd-comment-time'),
+									],
+								}),
+							],
 						}),

 						// 评论内容
 						this.createElement('div', {
-              className: 'cwd-comment-content'
+							className: 'cwd-comment-content',
 						}),

 						// 回复编辑器容器
 						this.createElement('div', {
-              className: 'cwd-reply-editor-container'
+							className: 'cwd-reply-editor-container',
 						}),

 						// 嵌套回复容器
-            ...(comment.replies && comment.replies.length > 0 ? [
+						...(comment.replies && comment.replies.length > 0
+							? [
 									this.createElement('div', {
-                className: 'cwd-replies'
-              })
-            ] : [])
-          ]
-        })
+										className: 'cwd-replies',
+									}),
 								]
+							: []),
+					],
+				}),
+			],
 		});

 		// 设置评论内容的 TEXT
@@ -218,7 +218,8 @@ export class CommentItem extends Component {
 					onUpdate: (content) => this.handleUpdateReplyContent(content),
 					onSubmit: () => this.handleSubmitReply(),
 					onCancel: () => this.handleCancelReply(),
-          onClearError: () => this.handleClearReplyError()
+					onClearError: () => this.handleClearReplyError(),
+					placeholder: this.props.replyPlaceholder,
 				});
 				this.replyEditor.render();
 				this.replyEditor.focus();
@@ -232,7 +233,7 @@ export class CommentItem extends Component {
 		if (comment.replies && comment.replies.length > 0) {
 			const repliesContainer = root.querySelector('.cwd-replies');
 			if (repliesContainer) {
-        comment.replies.forEach(reply => {
+				comment.replies.forEach((reply) => {
 					const replyItem = new CommentItem(repliesContainer, {
 						comment: reply,
 						isReply: true,
@@ -245,12 +246,13 @@ export class CommentItem extends Component {
 						// adminEmail 已移除
 						adminBadge: this.props.adminBadge,
 						enableCommentLike: this.props.enableCommentLike,
+						replyPlaceholder: this.props.replyPlaceholder,
 						onReply: this.props.onReply,
 						onLikeComment: this.props.onLikeComment,
 						onSubmitReply: this.props.onSubmitReply,
 						onCancelReply: this.props.onCancelReply,
 						onUpdateReplyContent: this.props.onUpdateReplyContent,
-            onClearReplyError: this.props.onClearReplyError
+						onClearReplyError: this.props.onClearReplyError,
 					});
 					replyItem.render();
 					this.childCommentItems.push(replyItem);
@@ -296,7 +298,8 @@ export class CommentItem extends Component {
 					onUpdate: (content) => this.handleUpdateReplyContent(content),
 					onSubmit: () => this.handleSubmitReply(),
 					onCancel: () => this.handleCancelReply(),
-          onClearError: () => this.handleClearReplyError()
+					onClearError: () => this.handleClearReplyError(),
+					placeholder: this.props.replyPlaceholder,
 				});
 				this.replyEditor.render();
 				this.replyEditor.focus();
@@ -311,7 +314,8 @@ export class CommentItem extends Component {
 				content: this.props.replyContent,
 				error: this.props.replyError,
 				submitting: this.props.submitting,
-        currentUser: this.props.currentUser
+				currentUser: this.props.currentUser,
+				placeholder: this.props.replyPlaceholder,
 			});
 		}

@@ -325,7 +329,8 @@ export class CommentItem extends Component {
 					submitting: this.props.submitting,
 					currentUser: this.props.currentUser,
 					enableCommentLike: this.props.enableCommentLike,
-          onLikeComment: this.props.onLikeComment
+					replyPlaceholder: this.props.replyPlaceholder,
+					onLikeComment: this.props.onLikeComment,
 				});
 			});
 		}
@@ -403,7 +408,7 @@ export class CommentItem extends Component {
 			try {
 				const parsed = JSON.parse(data);
 				if (Array.isArray(parsed)) {
-          parsed.forEach(id => likedSet.add(String(id)));
+					parsed.forEach((id) => likedSet.add(String(id)));
 				}
 			} catch (e) {
 				// 解析失败，返回空集合
--- a/docs/widget/src/components/CommentList.js
+++ b/docs/widget/src/components/CommentList.js
@@ -100,6 +100,7 @@ export class CommentList extends Component {
          // adminEmail 已移除，改用 comment.isAdmin 字段
          adminBadge: this.props.adminBadge,
          enableCommentLike: this.props.enableCommentLike,
+          replyPlaceholder: this.props.replyPlaceholder,
          onReply: (commentId) => this.handleReply(commentId),
          onSubmitReply: (commentId) => this.handleSubmitReply(commentId),
          onCancelReply: () => this.handleCancelReply(),
--- a/docs/widget/src/components/ReplyEditor.js
+++ b/docs/widget/src/components/ReplyEditor.js
@@ -32,6 +32,7 @@ export class ReplyEditor extends Component {
 	render() {
 		const { currentUser } = this.props;
 		const { showUserInfo } = this.state;
+		const placeholderText = this.props.placeholder || '';

 		const root = this.createElement('div', {
 			className: 'cwd-reply-editor',
@@ -45,34 +46,36 @@ export class ReplyEditor extends Component {
 							className: 'cwd-btn-close',
 							attributes: {
 								type: 'button',
-                onClick: () => this.handleCancel()
+								onClick: () => this.handleCancel(),
 							},
-              text: '✕'
-            })
-          ]
+							text: '✕',
+						}),
+					],
 				}),

 				// 用户信息输入框（当缺少信息时显示）
-        ...(showUserInfo ? [
+				...(showUserInfo
+					? [
 							this.createElement('div', {
 								className: 'cwd-form-row',
 								attributes: {
-              style: 'margin-bottom: 12px;'
+									style: 'margin-bottom: 12px;',
 								},
 								children: [
 									this.createFormField('昵称 *', 'text', 'name', currentUser?.name),
 									this.createFormField('邮箱 *', 'email', 'email', currentUser?.email),
-              this.createFormField('网址', 'url', 'url', currentUser?.url)
+									this.createFormField('网址', 'url', 'url', currentUser?.url),
+								],
+							}),
 						]
-          })
-        ] : []),
+					: []),

 				// 文本框
 				this.createElement('textarea', {
 					className: 'cwd-reply-textarea',
 					attributes: {
 						rows: 3,
-            placeholder: '支持 Markdown 格式',
+						placeholder: placeholderText,
 						disabled: this.props.submitting,
 						onInput: (e) => this.handleInput(e),
 						onKeydown: (e) => this.handleTextareaKeydown(e),
@@ -80,7 +83,8 @@ export class ReplyEditor extends Component {
 				}),

 				// 错误提示
-        ...(this.props.error ? [
+				...(this.props.error
+					? [
 							this.createElement('div', {
 								className: 'cwd-error-inline cwd-error-small',
 								children: [
@@ -89,13 +93,14 @@ export class ReplyEditor extends Component {
 										className: 'cwd-error-close',
 										attributes: {
 											type: 'button',
-                  onClick: () => this.handleClearError()
+											onClick: () => this.handleClearError(),
 										},
-                text: '✕'
-              })
+										text: '✕',
+									}),
+								],
+							}),
 						]
-          })
-        ] : []),
+					: []),

 				// 操作按钮
 				this.createElement('div', {
@@ -115,20 +120,20 @@ export class ReplyEditor extends Component {
 							attributes: {
 								type: 'button',
 								disabled: this.props.submitting || !this.state.content.trim(),
-                onClick: () => this.handleSubmit()
+								onClick: () => this.handleSubmit(),
 							},
-              text: this.props.submitting ? '提交中...' : '提交回复'
+							text: this.props.submitting ? '提交中...' : '提交回复',
 						}),
 						this.createElement('button', {
 							className: 'cwd-btn cwd-btn-secondary cwd-btn-small',
 							attributes: {
 								type: 'button',
 								disabled: this.props.submitting,
-                onClick: () => this.handleCancel()
+								onClick: () => this.handleCancel(),
 							},
-              text: '取消'
-            })
-          ]
+							text: '取消',
+						}),
+					],
 				}),

 				// 预览区域
@@ -146,7 +151,7 @@ export class ReplyEditor extends Component {
 							}),
 						]
 					: []),
-      ]
+			],
 		});

 		// 设置文本框内容
@@ -188,13 +193,7 @@ export class ReplyEditor extends Component {
 	}

 	handleTextareaKeydown(e) {
-    if (
-      e.key === '/' &&
-      !e.ctrlKey &&
-      !e.metaKey &&
-      !e.altKey &&
-      !e.shiftKey
-    ) {
+		if (e.key === '/' && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey) {
 			e.stopPropagation();
 		}
 	}
@@ -302,10 +301,10 @@ export class ReplyEditor extends Component {
 						value: value || '',
 						disabled: this.props.submitting,
 						onInput: (e) => this.handleUserInfoChange(field, e.target.value),
-            onKeydown: (e) => this.handleTextareaKeydown(e)
-          }
-        })
-      ]
+						onKeydown: (e) => this.handleTextareaKeydown(e),
+					},
+				}),
+			],
 		});
 	}
 }
--- a/docs/widget/src/core/CWDComments.js
+++ b/docs/widget/src/core/CWDComments.js
@@ -101,6 +101,8 @@ export class CWDComments {
 				allowedDomains: Array.isArray(data.allowedDomains) ? data.allowedDomains : [],
 				enableCommentLike: typeof data.enableCommentLike === 'boolean' ? data.enableCommentLike : true,
 				enableArticleLike: typeof data.enableArticleLike === 'boolean' ? data.enableArticleLike : true,
+				commentPlaceholder:
+					typeof data.commentPlaceholder === 'string' ? data.commentPlaceholder : undefined,
 			};
 		} catch (e) {
 			return {};
@@ -168,6 +170,10 @@ export class CWDComments {
 			this.config.requireReview = !!serverConfig.requireReview;
 			this.config.enableCommentLike = serverConfig.enableCommentLike;
 			this.config.enableArticleLike = serverConfig.enableArticleLike;
+			this.config.commentPlaceholder =
+				typeof serverConfig.commentPlaceholder === 'string'
+					? serverConfig.commentPlaceholder
+					: this.config.commentPlaceholder;

 			const api = createApiClient(this.config);
 			this.api = api;
@@ -339,6 +345,7 @@ export class CWDComments {
 				onFieldChange: (field, value) => this.store.updateFormField(field, value),
 				adminEmail: this.config.adminEmail,
 				onVerifyAdmin: (key) => this.api.verifyAdminKey(key),
+				placeholder: this.config.commentPlaceholder,
 			});
 			this.commentForm.render();
 		}
@@ -388,6 +395,7 @@ export class CWDComments {
 				onCancelReply: () => this.store.cancelReply(),
 				onUpdateReplyContent: (content) => this.store.updateReplyContent(content),
 				onClearReplyError: () => this.store.clearReplyError(),
+          replyPlaceholder: this.config.commentPlaceholder,
 				onPrevPage: () => this.store.goToPage(state.pagination.page - 1),
 				onNextPage: () => this.store.goToPage(state.pagination.page + 1),
 				onGoToPage: (page) => this.store.goToPage(page),
--- a/docs/widget/src/styles/main.css
+++ b/docs/widget/src/styles/main.css
@@ -149,6 +149,7 @@
  font-size: 13px;
  font-weight: 500;
  color: var(--cwd-text, #24292f);
+  white-space: pre-wrap;
 }

 .cwd-form-field input,
@@ -165,6 +166,11 @@
  font-family: inherit;
 }

+.cwd-form-field input::placeholder,
+.cwd-form-field textarea::placeholder {
+  color: var(--cwd-text-secondary);
+}
+
 .cwd-form-field input:focus,
 .cwd-form-field textarea:focus {
  outline: none;
@@ -318,9 +324,9 @@
 }

 /* 鼠标悬停在评论主体上时显示操作按钮 */
-.cwd-comment-body:hover .cwd-action-btn {
+/* .cwd-comment-body:hover>.cwd-comment-header>.cwd-comment-actions>.cwd-action-btn {
  display: inline-flex !important;
-}
+} */

 .cwd-comment-item:last-child {
  border-bottom: none;
@@ -681,7 +687,7 @@
  cursor: pointer;
  transition: background-color 0.2s;
  font-family: inherit;
-  display: none;
+  /* display: none; */
 }

 .cwd-action-btn:hover {