refactor: use lit element to refactor comment component (#80)

使用 [Lit](https://lit.dev/) 重写评论组件，可以获得更小的体积，并且提高可移植性，用于任何 JS 框架。可测试插件：[plugin-comment-widget-2.0.0-SNAPSHOT.jar.zip](https://github.com/halo-dev/plugin-comment-widget/files/14477870/plugin-comment-widget-2.0.0-SNAPSHOT.jar.zip) /kind improvement Fixes #79 此外，重写之后也解决了以下遗留问题： 1. Fixes #78 2. Fixes #72 3. Fixes #56 4. Fixes #74 5. Fixes #81 6. Emoji 选择器的配色切换问题。 TODO: - [x] 完成 Emoji 选择组件的适配 - [x] 完善基础样式（按钮、分页等） - [x] 整理 CSS，抽取部分 CSS 规则为变量 - [x] 完善默认的暗黑样式 - [x] 完善操作提示（比如评论成功后的提示） - [x] 完善文档 ```release-note 使用 Lit Element 重构评论组件，以获得更小的体积，以及解决若干遗留问题。 ```
halo-dev · Mar 4, 2024 · 5bc1867 · 5bc1867
1 parent 3f09e72
commit 5bc1867
Show file tree

Hide file tree

Showing 91 changed files with 4,780 additions and 14,973 deletions.
diff --git a/.gitignore b/.gitignore
@@ -72,4 +72,5 @@ application-local.properties
 
 /packages/*/node_modules/
 node_modules
-/workplace/
+/workplace/
+/src/main/resources/static/
diff --git a/README.md b/README.md
@@ -28,43 +28,252 @@ cd path/to/plugin-comment-widget
 ```bash
 ./gradlew pnpmInstall
 
-./gradlew build
+# 启动一个 Docker 容器作为开发环境并自动加载此插件
+./gradlew haloServer
 ```
 
-修改 Halo 配置文件：
-
-```yaml
-halo:
-  plugin:
-    runtime-mode: development
-    classes-directories:
-      - "build/classes"
-      - "build/resources"
-    lib-directories:
-      - "libs"
-    fixedPluginPath:
-      - "/path/to/plugin-comment-widget"
-```
+Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/category/%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91)。
 
 ## 主题适配
 
-此插件是一个通用的评论组件插件，主题需要针对此类型插件做适配。Halo 为模板引擎提供了专门的标签（<halo:comment />），只需要在必要的位置添加此标签即可。
+### 接入
+
+接入文档可参考 [自定义标签](https://docs.halo.run/developer-guide/theme/template-tag#halocomment)。
+
+### 自定义样式
+
+虽然目前不能直接为评论组件编写额外的样式，但可以通过一系列的 CSS 变量来自定义部分样式，开发者可以根据需求自行在主题中添加这些 CSS 变量，让评论组件和主题更好地融合。
+
+目前已提供的 CSS 变量：
+
+| 变量名                                                                  | 描述                     |
+|-------------------------------------------------------------------------|------------------------|
+| `--halo-comment-widget-base-border-radius`                              | 基础元素的圆角           |
+| `--halo-comment-widget-base-font-size`                                  | 基础字体大小             |
+| `--halo-comment-widget-base-line-height`                                | 基础行高                 |
+| `--halo-comment-widget-base-font-family`                                | 基础字体族               |
+| `--halo-comment-widget-component-avatar-rounded`                        | 头像的圆角大小           |
+| `--halo-comment-widget-component-avatar-size`                           | 头像大小                 |
+| `--halo-comment-widget-component-form-input-bg-color`                   | 表单输入背景颜色         |
+| `--halo-comment-widget-component-form-input-color`                      | 表单输入文字颜色         |
+| `--halo-comment-widget-component-form-input-border-color`               | 表单输入边框颜色         |
+| `--halo-comment-widget-component-form-input-border-color-focus`         | 表单输入焦点时边框颜色   |
+| `--halo-comment-widget-component-form-input-box-shadow-focus`           | 表单输入焦点时的阴影     |
+| `--halo-comment-widget-component-form-button-login-bg-color`            | 登录按钮背景颜色         |
+| `--halo-comment-widget-component-form-button-login-bg-color-hover`      | 登录按钮悬停背景颜色     |
+| `--halo-comment-widget-component-form-button-login-border-color`        | 登录按钮边框颜色         |
+| `--halo-comment-widget-component-form-button-submit-bg-color`           | 提交按钮背景颜色         |
+| `--halo-comment-widget-component-form-button-submit-color`              | 提交按钮文字颜色         |
+| `--halo-comment-widget-component-form-button-submit-border-color`       | 提交按钮边框颜色         |
+| `--halo-comment-widget-component-form-button-submit-border-color-hover` | 提交按钮悬停边框颜色     |
+| `--halo-comment-widget-component-form-button-emoji-color`               | 表情按钮颜色             |
+| `--halo-comment-widget-component-comment-item-action-bg-color-hover`    | 评论项操作悬停背景颜色   |
+| `--halo-comment-widget-component-comment-item-action-color`             | 评论项操作颜色           |
+| `--halo-comment-widget-component-comment-item-action-color-hover`       | 评论项操作悬停颜色       |
+| `--halo-comment-widget-component-pagination-button-bg-color-hover`      | 分页按钮悬停背景颜色     |
+| `--halo-comment-widget-component-pagination-button-bg-color-active`     | 分页按钮活动状态背景颜色 |
+| `--halo-comment-widget-component-pagination-button-border-color-active` | 分页按钮活动状态边框颜色 |
+| `--halo-comment-widget-component-emoji-picker-rgb-color`                | 表情选择器颜色           |
+| `--halo-comment-widget-component-emoji-picker-rgb-accent`               | 表情选择器强调颜色       |
+| `--halo-comment-widget-component-emoji-picker-rgb-background`           | 表情选择器背景颜色       |
+| `--halo-comment-widget-component-emoji-picker-rgb-input`                | 表情选择器输入颜色       |
+| `--halo-comment-widget-component-emoji-picker-color-border`             | 表情选择器边框颜色       |
+| `--halo-comment-widget-component-emoji-picker-color-border-over`        | 表情选择器悬停边框颜色   |
+
+<details>
+<summary>点击查看 CSS 代码模板</summary>
+
+```css
+:root {
+  --halo-comment-widget-base-border-radius: ;
+  --halo-comment-widget-base-font-size: ;
+  --halo-comment-widget-base-line-height: ;
+  --halo-comment-widget-base-font-family: ;
+  --halo-comment-widget-component-avatar-rounded: ;
+  --halo-comment-widget-component-avatar-size: ;
+  --halo-comment-widget-component-form-input-bg-color: ;
+  --halo-comment-widget-component-form-input-color: ;
+  --halo-comment-widget-component-form-input-border-color: ;
+  --halo-comment-widget-component-form-input-border-color-focus: ;
+  --halo-comment-widget-component-form-input-box-shadow-focus: ;
+  --halo-comment-widget-component-form-button-login-bg-color: ;
+  --halo-comment-widget-component-form-button-login-bg-color-hover: ;
+  --halo-comment-widget-component-form-button-login-border-color: ;
+  --halo-comment-widget-component-form-button-submit-bg-color: ;
+  --halo-comment-widget-component-form-button-submit-color: ;
+  --halo-comment-widget-component-form-button-submit-border-color: ;
+  --halo-comment-widget-component-form-button-submit-border-color-hover: ;
+  --halo-comment-widget-component-form-button-emoji-color: ;
+  --halo-comment-widget-component-comment-item-action-bg-color-hover: ;
+  --halo-comment-widget-component-comment-item-action-color: ;
+  --halo-comment-widget-component-comment-item-action-color-hover: ;
+  --halo-comment-widget-component-pagination-button-bg-color-hover: ;
+  --halo-comment-widget-component-pagination-button-bg-color-active: ;
+  --halo-comment-widget-component-pagination-button-border-color-active: ;
+  --halo-comment-widget-component-emoji-picker-rgb-color: ;
+  --halo-comment-widget-component-emoji-picker-rgb-accent: ;
+  --halo-comment-widget-component-emoji-picker-rgb-background: ;
+  --halo-comment-widget-component-emoji-picker-rgb-input: ;
+  --halo-comment-widget-component-emoji-picker-color-border: ;
+  --halo-comment-widget-component-emoji-picker-color-border-over: ;
+}
+```
+
+</details>
+
+### 配色切换方案
+
+根据上面提供的 CSS 变量，也可以通过定义 CSS 变量的方式为评论组件提供动态切换配色的功能。
+
+以下是实现示例，你可以根据需求自行修改选择器或者媒体查询。
+
+```css
+@media (prefers-color-scheme: dark) {
+  .color-scheme-auto,
+  [data-color-scheme='auto'] {
+    color-scheme: dark;
+    --halo-comment-widget-component-form-input-bg-color: #475569;
+    --halo-comment-widget-component-form-input-color: #ffffff;
+    --halo-comment-widget-component-form-input-border-color: #495056;
+    --halo-comment-widget-component-form-input-border-color-focus: #65a3ff;
+    --halo-comment-widget-component-form-input-box-shadow-focus: 0 0 0 0.15em #1c3966;
+    --halo-comment-widget-component-form-button-login-bg-color: #334155;
+    --halo-comment-widget-component-form-button-login-bg-color-hover: #475569;
+    --halo-comment-widget-component-form-button-login-border-color: #475569;
+    --halo-comment-widget-component-form-button-submit-border-color: #475569;
+    --halo-comment-widget-component-form-button-submit-border-color-hover: #64748b;
+    --halo-comment-widget-component-form-button-emoji-color: #cbd5e1;
+
+    --halo-comment-widget-component-comment-item-action-bg-color-hover: #475569;
+    --halo-comment-widget-component-comment-item-action-color: #64748b;
+    --halo-comment-widget-component-comment-item-action-color-hover: #94a3b8;
+
+    --halo-comment-widget-component-pagination-button-bg-color-hover: #475569;
+    --halo-comment-widget-component-pagination-button-bg-color-active: #475569;
+    --halo-comment-widget-component-pagination-button-border-color-active: #475569;
+
+    --halo-comment-widget-component-emoji-picker-rgb-color: 222, 222, 221;
+    --halo-comment-widget-component-emoji-picker-rgb-accent: 58, 130, 247;
+    --halo-comment-widget-component-emoji-picker-rgb-background: 21, 22, 23;
+    --halo-comment-widget-component-emoji-picker-rgb-input: 0, 0, 0;
+    --halo-comment-widget-component-emoji-picker-color-border: rgba(255, 255, 255, 0.1);
+    --halo-comment-widget-component-emoji-picker-color-border-over: rgba(255, 255, 255, 0.2);
+  }
+}
+
+.color-scheme-dark,
+.dark,
+[data-color-scheme='dark'] {
+  color-scheme: dark;
+
+  --halo-comment-widget-component-form-input-bg-color: #475569;
+  --halo-comment-widget-component-form-input-color: #ffffff;
+  --halo-comment-widget-component-form-input-border-color: #495056;
+  --halo-comment-widget-component-form-input-border-color-focus: #65a3ff;
+  --halo-comment-widget-component-form-input-box-shadow-focus: 0 0 0 0.15em #1c3966;
+  --halo-comment-widget-component-form-button-login-bg-color: #334155;
+  --halo-comment-widget-component-form-button-login-bg-color-hover: #475569;
+  --halo-comment-widget-component-form-button-login-border-color: #475569;
+  --halo-comment-widget-component-form-button-submit-border-color: #475569;
+  --halo-comment-widget-component-form-button-submit-border-color-hover: #64748b;
+  --halo-comment-widget-component-form-button-emoji-color: #cbd5e1;
+
+  --halo-comment-widget-component-comment-item-action-bg-color-hover: #475569;
+  --halo-comment-widget-component-comment-item-action-color: #64748b;
+  --halo-comment-widget-component-comment-item-action-color-hover: #94a3b8;
 
-以下是代码示例：
+  --halo-comment-widget-component-pagination-button-bg-color-hover: #475569;
+  --halo-comment-widget-component-pagination-button-bg-color-active: #475569;
+  --halo-comment-widget-component-pagination-button-border-color-active: #475569;
 
-```html
-<!-- /templates/post.html -->
-<halo:comment
-  group="content.halo.run"
-  kind="Post"
-  th:attr="name=${post.metadata.name}"
-  colorScheme="'light'"
-/>
+  --halo-comment-widget-component-emoji-picker-rgb-color: 222, 222, 221;
+  --halo-comment-widget-component-emoji-picker-rgb-accent: 58, 130, 247;
+  --halo-comment-widget-component-emoji-picker-rgb-background: 21, 22, 23;
+  --halo-comment-widget-component-emoji-picker-rgb-input: 0, 0, 0;
+  --halo-comment-widget-component-emoji-picker-color-border: rgba(255, 255, 255, 0.1);
+  --halo-comment-widget-component-emoji-picker-color-border-over: rgba(255, 255, 255, 0.2);
+}
 ```
 
-参数解释：
+此外，为了让主题可以更加方便的适配暗黑模式，此插件也提供了一套暗黑模式的配色方案，主题可以直接使用此方案，而不需要自己去适配暗黑模式，适配方式如下：
 
-- `group`：自定义模型的 group，目前文章和自定义页面的分组均为 `content.halo.run`。
-- `kind`：目前支持 Post（文章） 和 SinglePage（自定义页面） 两种类型，分别可用于 `post.html` 和 `page.html` 模板。
-- `name`：文章或者自定义页面的唯一标识，可通过 `post.metadata.name` 或者 `singlePage.metadata.name` 获取。
-- `colorScheme`：评论组件的颜色方案，支持 `light` 和 `dark` 两种，支持固定或者 JavaScript 变量。需要注意的是，如果需要固定一个值，那么需要添加单引号，如 `'dark'`。使用 JavaScript 变量时不需要。
+1. 在 html 或者 body 标签添加 class：
+   1. `color-scheme-auto`：自动模式，根据系统的暗黑模式自动切换。
+   2. `color-scheme-dark` / `dark`：强制暗黑模式。
+   3. `color-scheme-light` / `light`：强制明亮模式。
+2. 在 html 或者 body 标签添加 `data-color-scheme` 属性：
+   1. `auto`：自动模式，根据系统的暗黑模式自动切换。
+   2. `dark`：强制暗黑模式。
+   3. `light`：强制明亮模式。
+
+## 作为组件使用
+
+此插件的 UI 部分采用 [Lit Element](https://lit.dev/) 编写，并最终编译为 Web Component，所以理论上可以在任何 JS 框架中使用。这非常适用于将 Halo 作为 Headless CMS 使用的场景。例如使用 Vue、React 等框架编写网站，并调用 Halo 的 API 来渲染网页，这个时候文章评论的解决方案就可以直接使用此组件。
+
+安装：
+
+```bash
+pnpm install @halo-dev/comment-widget
+```
+
+### Vue
+
+在 Vue 组件中使用时，需要在 Vue 的编译选项中设置将此组件标记为非 Vue 组件，以下是 Vite 的配置示例：
+
+```js
+import vue from '@vitejs/plugin-vue'
+
+export default {
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag === 'comment-widget'
+        }
+      }
+    })
+  ]
+}
+```
+
+然后在 SFC 中使用即可：
+
+```vue
+<script setup>
+import '@halo-dev/comment-widget'
+import '@halo-dev/comment-widget/var.css';
+</script>
+
+<template>
+  <comment-widget
+    baseUrl="https://demo.halo.run"
+    group="content.halo.run"
+    kind="Post"
+    version="v1alpha1"
+    name="e0507f6f-88bb-4d3c-a90a-a88aba222035"
+  ></comment-widget>
+</template>
+```
+
+## React
+
+```ts
+import "@halo-dev/comment-widget";
+import "@halo-dev/comment-widget/var.css";
+
+function App() {
+  return (
+    <>
+      <comment-widget
+        baseUrl="https://demo.halo.run"
+        group="content.halo.run"
+        kind="Post"
+        version="v1alpha1"
+        name="e0507f6f-88bb-4d3c-a90a-a88aba222035"
+      ></comment-widget>
+    </>
+  );
+}
+
+export default App;
+```
diff --git a/build.gradle b/build.gradle
@@ -39,3 +39,7 @@ build {
     // build frontend before build
     tasks.getByName('compileJava').dependsOn('buildFrontend')
 }
+
+halo {
+    version = "2.13.0"
+}
diff --git a/gradle.properties b/gradle.properties
@@ -1 +1 @@
-version=1.6.0-SNAPSHOT
+version=2.0.0-SNAPSHOT
diff --git a/package.json b/package.json
@@ -1,9 +1,5 @@
 {
-  "scripts": {
-    "build:packages": "pnpm --filter \"./packages/**\" build",
-    "example:dev": "pnpm --filter \"./packages/example\" dev",
-    "release:packages": "pnpm --filter \"./packages/**\" release"
-  },
+  "license": "GPL-3.0",
   "author": {
     "name": "Halo OSS Team",
     "url": "https://github.com/halo-dev"
@@ -15,36 +11,22 @@
       "url": "https://github.com/ruibaby"
     }
   ],
-  "keywords": [],
-  "license": "GPL-3.0",
-  "dependencies": {
-    "axios": "^0.27.2",
-    "pinia": "^2.1.3",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.2",
-    "@vueuse/components": "^10.3.0",
-    "@vueuse/core": "^10.3.0"
+  "scripts": {
+    "build:packages": "pnpm --filter \"./packages/**\" build",
+    "example:dev": "pnpm --filter \"./packages/example\" dev",
+    "release:packages": "pnpm --filter \"./packages/**\" release"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.3.0",
-    "@types/jsdom": "^20.0.1",
-    "@types/node": "^18.16.16",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/compiler-sfc": "^3.3.4",
-    "@vue/eslint-config-prettier": "^7.1.0",
-    "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/test-utils": "^2.3.2",
-    "@vue/tsconfig": "^0.4.0",
+    "@rushstack/eslint-patch": "^1.7.2",
     "@tsconfig/node18": "^18.2.2",
-    "eslint": "^8.42.0",
-    "eslint-plugin-vue": "^9.14.1",
-    "jsdom": "^19.0.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
-    "rollup-plugin-copy-merge": "^1.0.2",
-    "typescript": "~5.2.0",
-    "vite": "^4.3.9",
-    "vitest": "^0.28.5",
-    "vue-tsc": "^1.8.13"
+    "@types/node": "^18.19.18",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "prettier": "^3.2.5",
+    "typescript": "~5.3.3",
+    "vite": "^5.1.4"
   }
 }
diff --git a/packages/comment-widget/.env.development b/packages/comment-widget/.env.development
diff --git a/packages/comment-widget/.env.production b/packages/comment-widget/.env.production
diff --git a/packages/comment-widget/.eslintrc.cjs b/packages/comment-widget/.eslintrc.cjs