✨ feat: 新增展示文档

README.md

@@ -8,7 +8,7 @@
 
 <h1>Project Template<br/><sup>LobeChat Plugin</sup></h1>
 
-This is the plugin template for LobeChat plugin development, see detail on [template usage](https://chat-plugin-sdk.lobehub.com/guides/template)
+This is the plugin template for LobeChat plugin development
 
 [Changelog](./CHANGELOG.md) · [Report Bug][issues-url] · [Request Feature][issues-url]
 
@@ -50,7 +50,7 @@ This is the plugin template for LobeChat plugin development, see detail on [temp
 
 ## 🤯 Usage
 
-This is a function calling plugin for [Lobe Chat](https://github.com/lobehub/lobe-chat), you can install it in plugin setting page.
+see detail on [template usage](https://chat-plugin-sdk.lobehub.com/guides/template)
 
 <div align="right">
 

docs/.dumirc.ts

@@ -0,0 +1,56 @@
+import { defineConfig } from 'dumi';
+import path from 'node:path';
+
+import { homepage } from '../package.json';
+
+const isWin = process.platform === 'win32';
+
+const isProd = process.env.NODE_ENV === 'production';
+
+const themeConfig = {
+  actions: [
+    {
+      link: homepage,
+      openExternal: true,
+      text: 'Github',
+    },
+    {
+      link: 'https://github.com/lobehub/lobe-chat',
+      text: 'Try it on LobeChat',
+      type: 'primary',
+    },
+  ],
+  footer: 'Made with 🤯 by LobeHub',
+  name: 'Realtime Weather',
+  socialLinks: {
+    discord: 'https://discord.gg/AYFPHvv2jT',
+    github: homepage,
+  },
+};
+
+export default defineConfig({
+  alias: {
+    '@': path.join(__dirname, '../src'),
+  },
+  base: isProd ? '/docs/' : '/',
+  extraBabelPlugins: ['babel-plugin-antd-style'],
+  favicons: [
+    'https://registry.npmmirror.com/@lobehub/assets-emoji/1.3.0/files/assets/package.webp',
+  ],
+  mfsu: isWin ? undefined : {},
+  npmClient: 'pnpm',
+  outputPath: '../public/docs',
+
+  publicPath: isProd ? '/docs/' : '/',
+  // ssr: isProduction ? {} : false,
+  styles: [
+    `html, body { background: transparent;  }
+
+  @media (prefers-color-scheme: dark) {
+    html, body { background: #000; }
+  }`,
+  ],
+
+  themeConfig,
+  title: 'RealTime Weather - Lobe Chat Plugin',
+});

docs/docs/changelog.md

@@ -0,0 +1,9 @@
+---
+title: Changelog
+description: New updates and improvements to @lobehub/chat-plugin-realtime-weather
+nav:
+  title: Changelog
+  order: 999
+---
+
+<embed src="../../CHANGELOG.md"></embed>

docs/docs/data.ts

@@ -0,0 +1,7 @@
+import { manClothes } from '@/data';
+
+export const data = {
+  clothes: manClothes['happy'],
+  mood: 'happy',
+  today: Date.now(),
+};

docs/docs/demo.tsx

@@ -0,0 +1,7 @@
+import Render from '@/components/Render';
+
+import { data } from './data';
+
+export default () => {
+  return <Render {...data} />;
+};

docs/docs/index.md

@@ -0,0 +1,7 @@
+---
+hero:
+  title: Project <b>Template</b>
+  description: This is the plugin template for LobeChat plugin development
+---
+
+<code src="./demo.tsx" inline></code>

docs/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "docs",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "dumi build",
+    "dev": "dumi dev"
+  },
+  "devDependencies": {
+    "babel-plugin-antd-style": "^1",
+    "dumi": "^2",
+    "dumi-theme-lobehub": "latest"
+  }
+}

docs/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "module": "CommonJS",
+    "target": "ES5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "sourceMap": true,
+    "skipDefaultLibCheck": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "paths": {
+      "@@/*": ["./dumi/tmp/*"],
+      "@/*": ["../src/*"]
+    },
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "isolatedModules": true
+  },
+  "exclude": ["node_modules"],
+  "include": [".", ".dumi/**/*", ".dumirc.ts", "../src"]
+}

package.json

@@ -6,9 +6,11 @@
   "homepage": "https://github.com/lobehub/chat-plugin-template",
   "repository": "https://github.com/lobehub/chat-plugin-template.git",
   "scripts": {
-    "build": "next build",
+    "build": "npm run docs:build && next build",
     "ci": "npm run lint && npm run type-check",
     "dev": "next dev -p 3400",
+    "docs:build": "cd docs && npm run build",
+    "docs:dev": "npm run dev --prefix ./docs",
     "lint": "eslint \"{src,api,docs}/**/*.{js,jsx,ts,tsx}\" --fix",
     "lint:md": "remark . --quiet --frail --output",
     "lint:style": "stylelint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
@@ -46,13 +48,13 @@
     "not ie <= 10"
   ],
   "dependencies": {
-    "@lobehub/chat-plugin-sdk": "^1",
+    "@lobehub/chat-plugin-sdk": "^1.17.7",
     "@lobehub/chat-plugins-gateway": "^1",
     "@lobehub/ui": "latest",
     "antd": "^5",
     "antd-style": "^3",
     "dayjs": "^1",
-    "next": "13",
+    "next": "13.4.7",
     "react": "^18",
     "react-dom": "^18",
     "react-layout-kit": "^1"

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - 'docs'
+  - .

src/components/Render.tsx

@@ -0,0 +1,38 @@
+import { Card } from 'antd';
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { ResponseData } from '@/type';
+
+const useStyles = createStyles(({ css, token }) => ({
+  date: css`
+    color: ${token.colorTextQuaternary};
+  `,
+}));
+
+const Render = memo<Partial<ResponseData>>(({ mood, clothes, today }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox gap={24}>
+      <Flexbox distribution={'space-between'} horizontal>
+        🌟心情：{mood}
+        <span className={styles.date}>{dayjs(today).format('YYYY/MM/DD')}</span>
+      </Flexbox>
+      <Flexbox gap={8}>
+        推荐衣物
+        <Flexbox gap={12} horizontal>
+          {clothes?.map((item) => (
+            <Card key={item.name} size={'small'} title={item.name}>
+              {item.description}
+            </Card>
+          ))}
+        </Flexbox>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Render;

src/pages/index.tsx

@@ -1,46 +1,19 @@
 import { fetchPluginMessage } from '@lobehub/chat-plugin-sdk/client';
-import { Card } from 'antd';
-import { createStyles } from 'antd-style';
-import dayjs from 'dayjs';
 import { memo, useEffect, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
+import Data from '@/components/Render';
 import { ResponseData } from '@/type';
 
-const useStyles = createStyles(({ css, token }) => ({
-  date: css`
-    color: ${token.colorTextQuaternary};
-  `,
-}));
-
 const Render = memo(() => {
   const [data, setData] = useState<ResponseData>();
-  const { styles } = useStyles();
 
   useEffect(() => {
     fetchPluginMessage().then((e: ResponseData) => {
       setData(e);
     });
   }, []);
 
-  return (
-    <Flexbox gap={24}>
-      <Flexbox distribution={'space-between'} horizontal>
-        🌟心情：{data?.mood}
-        <span className={styles.date}>{dayjs(data?.today).format('YYYY/MM/DD')}</span>
-      </Flexbox>
-      <Flexbox gap={8}>
-        推荐衣物
-        <Flexbox gap={12} horizontal>
-          {data?.clothes?.map((item) => (
-            <Card key={item.name} size={'small'} title={item.name}>
-              {item.description}
-            </Card>
-          ))}
-        </Flexbox>
-      </Flexbox>
-    </Flexbox>
-  );
+  return <Data {...data}></Data>;
 });
 
 export default Render;