✨ feat: add standalone type

package.json

@@ -52,7 +52,7 @@
     "not ie <= 10"
   ],
   "dependencies": {
-    "@lobehub/chat-plugin-sdk": "^1.17.7",
+    "@lobehub/chat-plugin-sdk": "^1.18.0",
     "@lobehub/chat-plugins-gateway": "^1",
     "@lobehub/ui": "latest",
     "antd": "^5",
@@ -66,16 +66,14 @@
   "devDependencies": {
     "@commitlint/cli": "^17",
     "@lobehub/lint": "latest",
-    "@types/react": "18",
-    "@types/react-dom": "18",
+    "@types/react": "18.2.28",
     "@vercel/node": "^2",
     "@vitest/coverage-v8": "latest",
     "commitlint": "^17",
     "cross-env": "^7",
     "eslint": "^8",
     "father": "4.3.1",
     "husky": "^8",
-    "lerna": "^7",
     "lint-staged": "^13",
     "prettier": "^3",
     "remark": "^14",

public/manifest-standalone.json

@@ -0,0 +1,32 @@
+{
+  "api": [
+    {
+      "url": "http://localhost:3400/api/clothes",
+      "name": "recommendClothes",
+      "description": "根据用户的心情，给用户推荐他有的衣服",
+      "parameters": {
+        "properties": {
+          "mood": {
+            "description": "用户当前的心情，可选值有：开心（happy）, 难过（sad）,生气 （anger）,害怕（fear）,惊喜（ surprise）,厌恶 （disgust）",
+            "enums": ["happy", "sad", "anger", "fear", "surprise", "disgust"],
+            "type": "string"
+          },
+          "gender": {
+            "type": "string",
+            "enum": ["man", "woman"],
+            "description": "对话用户的性别，需要询问用户后才知道这个信息"
+          }
+        },
+        "required": ["mood", "gender"],
+        "type": "object"
+      }
+    }
+  ],
+  "identifier": "plugin-identifier-standalone",
+  "type": "standalone",
+  "ui": {
+    "url": "http://localhost:3400/iframe",
+    "height": 200
+  },
+  "version": "1"
+}

src/components/Render.tsx

@@ -23,7 +23,7 @@ const Render = memo<Partial<ResponseData>>(({ mood, clothes, today }) => {
       </Flexbox>
       <Flexbox gap={8}>
         推荐衣物
-        <Flexbox gap={12} horizontal>
+        <Flexbox gap={12} horizontal style={{ overflow: 'scroll' }}>
           {clothes?.map((item) => (
             <Card key={item.name} size={'small'} title={item.name}>
               {item.description}

src/pages/api/clothes.ts

@@ -15,7 +15,7 @@ export default async (req: Request) => {
   const clothes = gender === 'man' ? manClothes : womanClothes;
 
   const result: ResponseData = {
-    clothes: clothes[mood] || [],
+    clothes: mood ? clothes[mood] : Object.values(clothes).flat(),
     mood,
     today: Date.now(),
   };

src/pages/iframe/index.tsx

@@ -0,0 +1,55 @@
+import {
+  fetchPluginMessage,
+  postToFillPluginContent,
+  useOnStandalonePluginInit,
+} from '@lobehub/chat-plugin-sdk/client';
+import { Button } from 'antd';
+import { memo, useEffect, useState } from 'react';
+import { Center } from 'react-layout-kit';
+
+import Data from '@/components/Render';
+import { fetchClothes } from '@/services/clothes';
+import { ResponseData } from '@/type';
+
+const Render = memo(() => {
+  // 初始化渲染状态
+  const [data, setData] = useState<ResponseData>();
+
+  // 初始化时从主应用同步状态
+  useEffect(() => {
+    fetchPluginMessage().then(setData);
+  }, []);
+
+  // 记录请求参数
+  const [payload, setPayload] = useState<any>();
+
+  useOnStandalonePluginInit<ResponseData>((payload) => {
+    if (payload.func === 'recommendClothes') {
+      setPayload(payload.args);
+    }
+  });
+
+  const fetchData = async () => {
+    const data = await fetchClothes(payload);
+    setData(data);
+    postToFillPluginContent(data);
+  };
+
+  return data ? (
+    <Data {...data}></Data>
+  ) : (
+    <Center style={{ height: 150 }}>
+      <Button
+        disabled={!payload}
+        onClick={() => {
+          fetchData();
+        }}
+        type={'primary'}
+      >
+        查询衣物
+      </Button>
+    </Center>
+  );
+});
+
+export default Render;

src/services/clothes.ts

@@ -0,0 +1,10 @@
+import { RequestData } from '@/type';
+
+export const fetchClothes = async (params: RequestData) => {
+  const res = await fetch('/api/clothes', {
+    body: JSON.stringify(params),
+    method: 'POST',
+  });
+
+  return res.json();
+};