chore: 更新版本号至0.1.4并更新前端框架集成文档

- 将主项目及所有子模块的package.json版本号从0.1.4-rc-2更新为正式版0.1.4
- 重写前端配置指南,为Vue3、Vue2和React提供清晰的模块化集成示例
- 移除旧的Vue单文件组件封装示例,推荐使用npm包直接导入的方式
This commit is contained in:
anghunk
2026-02-12 10:11:08 +08:00
parent 0624101e92
commit 00ac1ce394
5 changed files with 74 additions and 45 deletions

View File

@@ -1,6 +1,6 @@
{
"name": "cwd-admin",
"version": "0.1.4-rc-2",
"version": "0.1.4",
"type": "module",
"scripts": {
"dev": "vite",

View File

@@ -1,6 +1,6 @@
{
"name": "cwd-api",
"version": "0.1.4-rc-2",
"version": "0.1.4",
"scripts": {
"deploy": "node scripts/index.js && wrangler deploy",
"dev": "wrangler dev",

View File

@@ -165,48 +165,77 @@ comments.updateConfig({
</script>
```
### Vue
### Vue3
在 Vue 单文件组件里封装。
`CommentsWidget.vue`:
安装 `npm i cwd-widget`
```html
<template>
<div ref="comments"></div>
</template>
<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
const comments = ref(null);
let instance = null;
onMounted(async () => {
if (!window.CWDComments) {
await loadScript('https://unpkg.com/cwd-widget@0.0.x/dist/cwd.js');
}
instance = new window.CWDComments({
el: comments.value,
apiBaseUrl: 'https://your-api.example.com', // 换成你的 API 地址
});
instance.mount();
});
onBeforeUnmount(() => {
instance = null;
});
function loadScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.async = true;
script.onload = () => resolve();
script.onerror = (e) => reject(e);
document.head.appendChild(script);
});
}
</script>
<div id="comments"></div>
```
```js
import CWDComments from "cwd-widget";
onMounted(() => {
// 初始化评论组件
const comments = new CWDComments({
el: '#comments',
apiBaseUrl: 'https://your-api.example.com',
});
comments.mount();
});
```
### Vue2
安装 `npm i cwd-widget`
```html
<div id="comments"></div>
```
```js
import CWDComments from "cwd-widget";
// 放在 mounted 钩子中初始化评论组件
mounted() {
const comments = new CWDComments({
el: "#comments",
apiBaseUrl: "https://your-api.example.com",
});
comments.mount();
},
```
### React
安装 `npm i cwd-widget`
```js
import { useEffect, useRef } from "react";
import CWDComments, { CWDCommentsConfig } from "cwd-widget";
function Comments() {
const containerRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
if (!containerRef.current) return;
const config: CWDCommentsConfig = {
el: containerRef.current,
apiBaseUrl: "https://your-api.example.com",
};
const comments = new CWDComments(config);
comments.mount();
return () => {
comments.unmount();
};
}, []);
return <div id="comments" ref={containerRef} />;
}
export default Comments;
```

View File

@@ -1,6 +1,6 @@
{
"name": "cwd-widget",
"version": "0.1.4-rc-2",
"version": "0.1.4",
"description": "Server-free, extremely fast and secure, plug-and-play commenting system based on Cloudflare Workers and the Global Edge Network.",
"type": "module",
"author": "anghunk",

View File

@@ -1,6 +1,6 @@
{
"name": "cwd",
"version": "0.1.4-rc-2",
"version": "0.1.4",
"license": "Apache-2.0",
"repository": {
"type": "git",