chore: 更新版本号至0.1.4并更新前端框架集成文档
- 将主项目及所有子模块的package.json版本号从0.1.4-rc-2更新为正式版0.1.4 - 重写前端配置指南,为Vue3、Vue2和React提供清晰的模块化集成示例 - 移除旧的Vue单文件组件封装示例,推荐使用npm包直接导入的方式
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "cwd-admin",
|
"name": "cwd-admin",
|
||||||
"version": "0.1.4-rc-2",
|
"version": "0.1.4",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "cwd-api",
|
"name": "cwd-api",
|
||||||
"version": "0.1.4-rc-2",
|
"version": "0.1.4",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"deploy": "node scripts/index.js && wrangler deploy",
|
"deploy": "node scripts/index.js && wrangler deploy",
|
||||||
"dev": "wrangler dev",
|
"dev": "wrangler dev",
|
||||||
|
|||||||
@@ -165,48 +165,77 @@ comments.updateConfig({
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Vue
|
### Vue3
|
||||||
|
|
||||||
在 Vue 单文件组件里封装。
|
安装 `npm i cwd-widget`
|
||||||
|
|
||||||
`CommentsWidget.vue`:
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<div id="comments"></div>
|
||||||
<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>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
```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;
|
||||||
|
```
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "cwd-widget",
|
"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.",
|
"description": "Server-free, extremely fast and secure, plug-and-play commenting system based on Cloudflare Workers and the Global Edge Network.",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"author": "anghunk",
|
"author": "anghunk",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "cwd",
|
"name": "cwd",
|
||||||
"version": "0.1.4-rc-2",
|
"version": "0.1.4",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|||||||
Reference in New Issue
Block a user