cwd-widget 0.0.1

package/src/styles/variables.css

@@ -0,0 +1,60 @@
+/**
+ * CSS 变量定义
+ * 支持主题切换
+ */
+
+.cwd-comments-container,
+[data-theme="light"] {
+  /* 主色调 */
+  --cwd-primary: #0969da;
+  --cwd-primary-hover: #0864ca;
+
+  /* 文字颜色 */
+  --cwd-text: #24292f;
+  --cwd-text-secondary: #6e7781;
+
+  /* 背景色 */
+  --cwd-bg: #ffffff;
+  --cwd-bg-input: #ffffff;
+  --cwd-bg-secondary: #f6f8fa;
+  --cwd-bg-reply: #f6f8fa;
+  --cwd-bg-hover: #f6f8fa;
+  --cwd-bg-disabled: #f6f8fa;
+  --cwd-bg-avatar: #f6f8fa;
+
+  /* 边框颜色 */
+  --cwd-border: #d0d7de;
+  --cwd-border-light: #eaeef2;
+
+  /* 状态颜色 */
+  --cwd-error: #cf222e;
+  --cwd-bg-error: #ffebe9;
+  --cwd-border-error: #fd8c73;
+
+  /* 圆角 */
+  --cwd-radius: 6px;
+}
+
+/* 深色主题 */
+[data-theme="dark"] {
+  --cwd-primary: #58a6ff;
+  --cwd-primary-hover: #4094ff;
+
+  --cwd-text: #c9d1d9;
+  --cwd-text-secondary: #8b949e;
+
+  --cwd-bg: #0d1117;
+  --cwd-bg-input: #0d1117;
+  --cwd-bg-secondary: #161b22;
+  --cwd-bg-reply: #161b22;
+  --cwd-bg-hover: #161b22;
+  --cwd-bg-disabled: #161b22;
+  --cwd-bg-avatar: #161b22;
+
+  --cwd-border: #30363d;
+  --cwd-border-light: #21262d;
+
+  --cwd-error: #f85149;
+  --cwd-bg-error: #3d1614;
+  --cwd-border-error: #f85149;
+}

package/src/utils/auth.js

@@ -0,0 +1,76 @@
+const STORAGE_KEY = 'cwd_admin_auth';
+const EXPIRY_MS = 72 * 60 * 60 * 1000; // 72 hours
+
+// Simple obfuscation (not real encryption, but sufficient for local storage requirement if no sensitive data other than the key itself which is already shared)
+// Requirement says "Local storage key credential needs to be encrypted".
+// We can use a simple XOR with a fixed salt or just Base64.
+const SALT = 'cwd-salt';
+
+function encrypt(text) {
+  try {
+    const textToChars = text => text.split('').map(c => c.charCodeAt(0));
+    const byteHex = n => ("0" + Number(n).toString(16)).substr(-2);
+    const applySaltToChar = code => textToChars(SALT).reduce((a, b) => a ^ b, code);
+
+    return text
+      .split('')
+      .map(textToChars)
+      .map(applySaltToChar)
+      .map(byteHex)
+      .join('');
+  } catch (e) {
+    return btoa(text); // Fallback
+  }
+}
+
+function decrypt(encoded) {
+  try {
+    const textToChars = text => text.split('').map(c => c.charCodeAt(0));
+    const applySaltToChar = code => textToChars(SALT).reduce((a, b) => a ^ b, code);
+    
+    return encoded
+      .match(/.{1,2}/g)
+      .map(hex => parseInt(hex, 16))
+      .map(applySaltToChar)
+      .map(charCode => String.fromCharCode(charCode))
+      .join('');
+  } catch (e) {
+    return atob(encoded); // Fallback
+  }
+}
+
+export const auth = {
+  saveToken(token) {
+    const data = {
+      adminToken: encrypt(token),
+      timestamp: Date.now()
+    };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+  },
+
+  getToken() {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return null;
+
+      const data = JSON.parse(raw);
+      if (Date.now() - data.timestamp > EXPIRY_MS) {
+        this.clearToken();
+        return null;
+      }
+
+      return decrypt(data.adminToken);
+    } catch (e) {
+      this.clearToken();
+      return null;
+    }
+  },
+
+  clearToken() {
+    localStorage.removeItem(STORAGE_KEY);
+  },
+  
+  hasToken() {
+      return !!this.getToken();
+  }
+};

package/src/utils/date.js

@@ -0,0 +1,78 @@
+/**
+ * 日期时间格式化工具
+ */
+
+/**
+ * 格式化时间（3天内显示相对时间，超过3天显示完整日期）
+ * @param {string|number} dateValue - 日期字符串或时间戳
+ * @returns {string}
+ */
+export function formatRelativeTime(dateValue) {
+  const date = new Date(dateValue);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  // 3天内显示相对时间
+  if (days < 3) {
+    if (days > 0) {
+      return days === 1 ? '昨天' : `${days}天前`;
+    }
+    if (hours > 0) {
+      return `${hours}小时前`;
+    }
+    if (minutes > 0) {
+      return `${minutes}分钟前`;
+    }
+    return '刚刚';
+  }
+
+  // 超过3天显示完整日期
+  return formatDateTime(dateValue);
+}
+
+/**
+ * 格式化日期时间
+ * @param {string|number} dateValue - 日期字符串或时间戳
+ * @returns {string}
+ */
+export function formatDateTime(dateValue) {
+  const date = new Date(dateValue);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+  return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
+}
+
+/**
+ * 格式化日期
+ * @param {string|number} dateValue - 日期字符串或时间戳
+ * @returns {string}
+ */
+export function formatDate(dateValue) {
+  const date = new Date(dateValue);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}/${month}/${day}`;
+}
+
+/**
+ * 格式化时间
+ * @param {string|number} dateValue - 日期字符串或时间戳
+ * @returns {string}
+ */
+export function formatTime(dateValue) {
+  const date = new Date(dateValue);
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+  return `${hours}:${minutes}:${seconds}`;
+}

package/src/utils/dom.js

@@ -0,0 +1,210 @@
+/**
+ * DOM 操作工具函数
+ */
+
+/**
+ * 创建元素
+ * @param {string} tag - 标签名
+ * @param {string} className - 类名
+ * @param {Object} attributes - 属性对象，支持 onClick 等事件监听器
+ * @param {string|HTMLElement|HTMLElement[]} content - 内容
+ * @returns {HTMLElement}
+ */
+export function createElement(tag, className = '', attributes = {}, content = null) {
+  const el = document.createElement(tag);
+
+  if (className) {
+    el.className = className;
+  }
+
+  Object.entries(attributes).forEach(([key, value]) => {
+    if (key.startsWith('on')) {
+      // 事件监听器，如 onClick -> click
+      const event = key.slice(2).toLowerCase();
+      el.addEventListener(event, value);
+    } else if (key === 'dataset') {
+      // 设置 data-* 属性
+      Object.entries(value).forEach(([dataKey, dataValue]) => {
+        el.dataset[dataKey] = dataValue;
+      });
+    } else {
+      el.setAttribute(key, value);
+    }
+  });
+
+  // 处理内容
+  if (content !== null) {
+    appendContent(el, content);
+  }
+
+  return el;
+}
+
+/**
+ * 添加内容到元素
+ * @param {HTMLElement} el - 目标元素
+ * @param {string|HTMLElement|HTMLElement[]} content - 内容
+ */
+export function appendContent(el, content) {
+  if (typeof content === 'string') {
+    el.textContent = content;
+  } else if (Array.isArray(content)) {
+    content.forEach(child => {
+      if (child instanceof HTMLElement) {
+        el.appendChild(child);
+      }
+    });
+  } else if (content instanceof HTMLElement) {
+    el.appendChild(content);
+  }
+}
+
+/**
+ * 设置元素的 HTML 内容
+ * @param {HTMLElement} el - 目标元素
+ * @param {string} html - HTML 字符串
+ */
+export function setHTML(el, html) {
+  el.innerHTML = html;
+}
+
+/**
+ * 清空元素内容
+ * @param {HTMLElement} el - 目标元素
+ */
+export function empty(el) {
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
+  }
+}
+
+/**
+ * 显示元素
+ * @param {HTMLElement} el - 目标元素
+ */
+export function show(el) {
+  el.style.display = '';
+}
+
+/**
+ * 隐藏元素
+ * @param {HTMLElement} el - 目标元素
+ */
+export function hide(el) {
+  el.style.display = 'none';
+}
+
+/**
+ * 切换元素显示状态
+ * @param {HTMLElement} el - 目标元素
+ * @param {boolean} visible - 是否显示
+ */
+export function toggle(el, visible) {
+  if (visible) {
+    show(el);
+  } else {
+    hide(el);
+  }
+}
+
+/**
+ * 添加类名
+ * @param {HTMLElement} el - 目标元素
+ * @param {string} className - 类名
+ */
+export function addClass(el, className) {
+  el.classList.add(className);
+}
+
+/**
+ * 移除类名
+ * @param {HTMLElement} el - 目标元素
+ * @param {string} className - 类名
+ */
+export function removeClass(el, className) {
+  el.classList.remove(className);
+}
+
+/**
+ * 切换类名
+ * @param {HTMLElement} el - 目标元素
+ * @param {string} className - 类名
+ * @param {boolean} force - 强制添加或移除
+ */
+export function toggleClass(el, className, force) {
+  el.classList.toggle(className, force);
+}
+
+/**
+ * 查找元素
+ * @param {string|HTMLElement} selector - 选择器或元素
+ * @param {HTMLElement} context - 上下文元素
+ * @returns {HTMLElement|null}
+ */
+export function query(selector, context = document) {
+  if (typeof selector === 'string') {
+    return context.querySelector(selector);
+  }
+  return selector;
+}
+
+/**
+ * 查找所有元素
+ * @param {string} selector - 选择器
+ * @param {HTMLElement} context - 上下文元素
+ * @returns {NodeList}
+ */
+export function queryAll(selector, context = document) {
+  return context.querySelectorAll(selector);
+}
+
+/**
+ * 委托事件监听
+ * @param {HTMLElement} el - 目标元素
+ * @param {string} event - 事件名
+ * @param {string} selector - 选择器
+ * @param {Function} handler - 处理函数
+ */
+export function delegate(el, event, selector, handler) {
+  el.addEventListener(event, (e) => {
+    const target = e.target.closest(selector);
+    if (target && el.contains(target)) {
+      handler.call(target, e);
+    }
+  });
+}
+
+/**
+ * 防抖函数
+ * @param {Function} func - 要防抖的函数
+ * @param {number} wait - 等待时间
+ * @returns {Function}
+ */
+export function debounce(func, wait = 300) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
+/**
+ * 节流函数
+ * @param {Function} func - 要节流的函数
+ * @param {number} limit - 限制时间
+ * @returns {Function}
+ */
+export function throttle(func, limit = 300) {
+  let inThrottle;
+  return function executedFunction(...args) {
+    if (!inThrottle) {
+      func(...args);
+      inThrottle = true;
+      setTimeout(() => inThrottle = false, limit);
+    }
+  };
+}

package/src/utils/markdown.js

@@ -0,0 +1,34 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+
+// 配置 marked
+try {
+  marked.setOptions({
+    gfm: true, // 启用 GitHub Flavored Markdown
+    breaks: true, // 启用换行符转 <br>
+  });
+} catch (e) {
+  console.error('Failed to configure marked:', e);
+}
+
+/**
+ * 渲染 Markdown 为 HTML，并进行净化
+ * @param {string} content Markdown 内容
+ * @returns {string} 净化后的 HTML
+ */
+export function renderMarkdown(content) {
+  if (!content) return '';
+  try {
+    const html = marked.parse(content);
+    // marked.parse can return a Promise if async is enabled, but we are using sync mode
+    // Just in case, handle potential Promise (though unlikely with current config)
+    if (html instanceof Promise) {
+      console.warn('marked.parse returned a Promise. Async markdown rendering is not fully supported in this sync flow.');
+      return '';
+    }
+    return DOMPurify.sanitize(html);
+  } catch (error) {
+    console.error('Markdown rendering error:', error);
+    return DOMPurify.sanitize(content); // Fallback to plain text (sanitized)
+  }
+}

package/src/utils/validator.js

@@ -0,0 +1,122 @@
+/**
+ * 表单验证工具
+ */
+
+/**
+ * 验证邮箱格式
+ * @param {string} email - 邮箱地址
+ * @returns {boolean}
+ */
+export function isValidEmail(email) {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+}
+
+/**
+ * 验证 URL 格式
+ * @param {string} url - URL 地址
+ * @returns {boolean}
+ */
+export function isValidUrl(url) {
+  if (!url) return true; // URL 是可选的
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * 验证评论内容
+ * @param {string} content - 评论内容
+ * @returns {{valid: boolean, error?: string}}
+ */
+export function validateCommentContent(content) {
+  if (!content || content.trim().length === 0) {
+    return { valid: false, error: '请输入评论内容' };
+  }
+  if (content.length > 1000) {
+    return { valid: false, error: '评论内容不能超过 1000 字' };
+  }
+  return { valid: true };
+}
+
+/**
+ * 验证评论表单
+ * @param {Object} data - 表单数据
+ * @param {string} data.name - 昵称
+ * @param {string} data.email - 邮箱
+ * @param {string} data.url - 网址
+ * @param {string} data.content - 评论内容
+ * @returns {{valid: boolean, errors: Object<string, string>}}
+ */
+export function validateCommentForm(data) {
+  const errors = {};
+
+  // 验证昵称
+  if (!data.name || data.name.trim().length === 0) {
+    errors.name = '请输入昵称';
+  } else if (data.name.length > 50) {
+    errors.name = '昵称不能超过 50 字';
+  }
+
+  // 验证邮箱
+  if (!data.email || data.email.trim().length === 0) {
+    errors.email = '请输入邮箱';
+  } else if (!isValidEmail(data.email)) {
+    errors.email = '邮箱格式不正确';
+  }
+
+  // 验证网址（可选）
+  if (data.url && !isValidUrl(data.url)) {
+    errors.url = '网址格式不正确';
+  }
+
+  // 验证评论内容
+  const contentValidation = validateCommentContent(data.content);
+  if (!contentValidation.valid) {
+    errors.content = contentValidation.error;
+  }
+
+  return {
+    valid: Object.keys(errors).length === 0,
+    errors
+  };
+}
+
+/**
+ * 验证回复所需的用户信息
+ * @param {Object} data - 用户信息
+ * @param {string} data.name - 昵称
+ * @param {string} data.email - 邮箱
+ * @param {string} data.url - 网址
+ * @returns {{valid: boolean, errors: Object<string, string>}}
+ */
+export function validateReplyUserInfo(data) {
+  const errors = {};
+
+  // 验证昵称
+  if (!data.name || data.name.trim().length === 0) {
+    errors.name = '请输入昵称';
+  } else if (data.name.length > 50) {
+    errors.name = '昵称不能超过 50 字';
+  }
+
+  // 验证邮箱
+  if (!data.email || data.email.trim().length === 0) {
+    errors.email = '请输入邮箱';
+  } else if (!isValidEmail(data.email)) {
+    errors.email = '邮箱格式不正确';
+  }
+
+  // 验证网址（可选）
+  if (data.url && !isValidUrl(data.url)) {
+    errors.url = '网址格式不正确';
+  }
+
+  return {
+    valid: Object.keys(errors).length === 0,
+    errors
+  };
+}

package/src/vite-env.d.ts

@@ -0,0 +1,21 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare module '*?inline' {
+  const content: string;
+  export default content;
+}
+
+interface ImportMetaEnv {
+  readonly DEV: boolean;
+  readonly PROD: boolean;
+  readonly MODE: string;
+  readonly BASE_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/vite.config.js

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import { readFileSync } from 'fs';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+
+const pkg = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf-8'));
+const banner = `/*! CWDComments widget v${pkg.version} */`;
+
+export default defineConfig({
+	plugins: [cssInjectedByJsPlugin()],
+	resolve: {
+		alias: {
+			'@': resolve(__dirname, 'src'),
+		},
+	},
+	build: {
+		lib: {
+			name: 'CWDComments',
+			entry: resolve(__dirname, 'src/index.js'),
+			formats: ['umd'],
+			fileName: (format) => `cwd.js`,
+		},
+		rollupOptions: {
+			output: {
+				exports: 'named',
+				banner,
+			},
+		},
+		sourcemap: false,
+		minify: 'terser',
+		terserOptions: {
+			compress: {
+				drop_console: false,
+			},
+		},
+	},
+});