3.0.0原版

packages/ui/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="@rsbuild/core/types" />
+/// <reference types="unplugin-icons/types/vue" />

packages/ui/package.json

@@ -0,0 +1,23 @@
+{
+  "type": "module",
+  "scripts": {
+    "build": "rsbuild build",
+    "dev": "rsbuild build --watch --env-mode=development",
+    "type-check": "vue-tsc --build"
+  },
+  "dependencies": {
+    "@halo-dev/comment-widget": "workspace:*",
+    "@halo-dev/components": "^2.21.0",
+    "@halo-dev/console-shared": "link:/Users/ryanwang/Workspace/github/ruibaby/halo-next/ui/packages/shared",
+    "vue": "^3.5.18"
+  },
+  "devDependencies": {
+    "@halo-dev/ui-plugin-bundler-kit": "^2.21.2",
+    "@rsbuild/core": "^1.4.15",
+    "@rsbuild/plugin-vue": "^1.1.1",
+    "@types/node": "^20.19.10",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "~5.8.3",
+    "vue-tsc": "^2.2.12"
+  }
+}

packages/ui/rsbuild.config.mjs

@@ -0,0 +1,36 @@
+import { rsbuildConfig } from '@halo-dev/ui-plugin-bundler-kit';
+import { pluginVue } from '@rsbuild/plugin-vue';
+
+const MANIFEST_PATH = '../../src/main/resources/plugin.yaml';
+const OUT_DIR_PROD = '../../src/main/resources/console';
+const OUT_DIR_DEV = '../../build/resources/main/console';
+
+export default rsbuildConfig({
+  manifestPath: MANIFEST_PATH,
+  rsbuild: ({ envMode }) => {
+    const isProduction = envMode === 'production';
+    const outDir = isProduction ? OUT_DIR_PROD : OUT_DIR_DEV;
+
+    return {
+      resolve: {
+        alias: {
+          '@': './src',
+        },
+      },
+      plugins: [
+        pluginVue({
+          vueLoaderOptions: {
+            compilerOptions: {
+              isCustomElement: (tag) => tag.startsWith('comment-'),
+            },
+          },
+        }),
+      ],
+      output: {
+        distPath: {
+          root: outDir,
+        },
+      },
+    };
+  },
+});

packages/ui/src/components/Content.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import '@halo-dev/comment-widget';
+
+defineProps<{
+  content: string;
+}>();
+</script>
+<template>
+  <comment-content :content="content"></comment-content>
+</template>

packages/ui/src/components/Editor.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import '@halo-dev/comment-widget';
+import type { CommentEditor } from '@halo-dev/comment-widget';
+import { onMounted, ref } from 'vue';
+
+const props = defineProps<{
+  autoFocus?: boolean;
+}>();
+
+const emit =
+  defineEmits<
+    (e: 'update', content: { content: string; characterCount: number }) => void
+  >();
+
+const editorRef = ref<InstanceType<typeof CommentEditor>>();
+
+onMounted(() => {
+  if (props.autoFocus) {
+    editorRef.value?.setFocus();
+  }
+
+  editorRef.value?.addEventListener('update', (e) => {
+    const detail = (e as CustomEvent).detail;
+    emit('update', {
+      content: detail.content,
+      characterCount: detail.characterCount ?? 0,
+    });
+  });
+});
+</script>
+<template>
+  <comment-editor ref="editorRef" keep-alive></comment-editor>
+</template>

packages/ui/src/index.ts

@@ -0,0 +1,29 @@
+import { VLoading } from '@halo-dev/components';
+import { definePlugin } from '@halo-dev/console-shared';
+import { defineAsyncComponent, markRaw } from 'vue';
+
+export default definePlugin({
+  components: {},
+  routes: [],
+  extensionPoints: {
+    'comment:editor:replace': () => {
+      return {
+        component: markRaw(
+          defineAsyncComponent({
+            loader: () => import('./components/Editor.vue'),
+            loadingComponent: VLoading,
+          })
+        ),
+      };
+    },
+    'comment:list-item:content:replace': () => {
+      return {
+        component: markRaw(
+          defineAsyncComponent({
+            loader: () => import('./components/Content.vue'),
+          })
+        ),
+      };
+    },
+  },
+});

packages/ui/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}