feat: openapi机器人能力开启/关闭

shared/hooks/useAsyncRefresh.ts

@@ -1,4 +1,4 @@
-import { DependencyList, useEffect, useReducer } from 'react';
+import { DependencyList, useCallback, useEffect } from 'react';
 import type { FunctionReturningPromise } from '../types';
 import { useAsyncFn } from './useAsyncFn';
 
@@ -9,11 +9,14 @@ export function useAsyncRefresh<T extends FunctionReturningPromise>(
   const [state, callback] = useAsyncFn(fn, deps, {
     loading: true,
   });
-  const [inc, refresh] = useReducer((i) => i + 1, 0);
 
   useEffect(() => {
     callback();
-  }, [callback, inc]);
+  }, [callback]);
+
+  const refresh = useCallback(() => {
+    return callback();
+  }, [callback]);
 
   return {
     ...state,

web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Bot.tsx

@@ -1,7 +1,50 @@
 import React from 'react';
+import { FullModalField, Switch } from '@capital/component';
+import { useOpenAppInfo } from '../context';
+import { OpenAppCapability } from '../types';
+import { postRequest, useAsyncFn } from '@capital/common';
 
 const Bot: React.FC = React.memo(() => {
-  return <div>开发中</div>;
+  const { refresh, appId, capability } = useOpenAppInfo();
+
+  const [{ loading }, handleChangeBotCapability] = useAsyncFn(
+    async (checked: boolean) => {
+      const newCapability: OpenAppCapability[] = [...capability];
+      const findIndex = newCapability.findIndex((c) => c === 'bot');
+
+      if (checked) {
+        if (findIndex === -1) {
+          newCapability.push('bot');
+        }
+      } else {
+        if (findIndex !== -1) {
+          newCapability.splice(findIndex, 1);
+        }
+      }
+
+      await postRequest('/openapi/app/setAppCapability', {
+        appId,
+        capability: newCapability,
+      });
+      await refresh();
+    },
+    [appId, capability, refresh]
+  );
+
+  return (
+    <div className="plugin-openapi-app-info_bot">
+      <FullModalField
+        title="开启机器人能力"
+        content={
+          <Switch
+            disabled={loading}
+            checked={capability.includes('bot')}
+            onChange={handleChangeBotCapability}
+          />
+        }
+      />
+    </div>
+  );
 });
 Bot.displayName = 'Bot';
 

web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.tsx

@@ -11,7 +11,7 @@ const Profile: React.FC = React.memo(() => {
   const { appId, appSecret } = useOpenAppInfo();
 
   return (
-    <div>
+    <div className="plugin-openapi-app-info_profile">
       <h2>应用凭证</h2>
 
       <div>

web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Summary.tsx

@@ -2,14 +2,9 @@ import { useOpenAppInfo } from '../context';
 import React from 'react';
 
 const Summary: React.FC = React.memo(() => {
-  const { appId, appName } = useOpenAppInfo();
+  const { refresh, ...other } = useOpenAppInfo();
 
-  return (
-    <div>
-      <div>{appId}</div>
-      <div>{appName}</div>
-    </div>
-  );
+  return <pre>{JSON.stringify(other, undefined, 2)}</pre>;
 });
 Summary.displayName = 'Summary';
 

web/plugins/com.msgbyte.openapi/src/MainPanel/context.tsx

@@ -1,12 +1,24 @@
 import React, { useContext } from 'react';
 import { OpenApp } from './types';
 
-const OpenAppInfoContext = React.createContext<OpenApp>(null);
+interface OpenAppInfoContextProps extends OpenApp {
+  refresh: () => Promise<void>;
+}
+
+const OpenAppInfoContext = React.createContext<OpenAppInfoContextProps>(null);
 OpenAppInfoContext.displayName = 'OpenAppInfoContext';
 
-export const OpenAppInfoProvider: React.FC<{ appInfo: OpenApp }> = (props) => {
+export const OpenAppInfoProvider: React.FC<{
+  appInfo: OpenApp;
+  refresh: OpenAppInfoContextProps['refresh'];
+}> = (props) => {
   return (
-    <OpenAppInfoContext.Provider value={props.appInfo}>
+    <OpenAppInfoContext.Provider
+      value={{
+        ...props.appInfo,
+        refresh: props.refresh,
+      }}
+    >
       {props.children}
     </OpenAppInfoContext.Provider>
   );

web/plugins/com.msgbyte.openapi/src/MainPanel/index.tsx

@@ -14,16 +14,17 @@ import { ServiceChecker } from '../components/ServiceChecker';
 import './index.less';
 
 const OpenApiMainPanel: React.FC = React.memo(() => {
-  const [appInfo, setAppInfo] = useState<OpenApp | null>(null);
+  const [selectedAppId, setSelectedAppId] = useState<string | null>(null);
   const {
     loading,
-    value: allApps,
+    value: allApps = [],
     refresh,
   } = useAsyncRefresh(async (): Promise<OpenApp[]> => {
     const { data } = await postRequest('/openapi/app/all');
 
     return data ?? [];
   }, []);
+  const appInfo = allApps.find((a) => a._id === selectedAppId);
 
   const columns = useMemo(
     () => [
@@ -36,7 +37,7 @@ const OpenApiMainPanel: React.FC = React.memo(() => {
         key: 'action',
         render: (_, record: OpenApp) => (
           <Space>
-            <Button onClick={() => setAppInfo(record)}>进入</Button>
+            <Button onClick={() => setSelectedAppId(record._id)}>进入</Button>
           </Space>
         ),
       },
@@ -62,7 +63,7 @@ const OpenApiMainPanel: React.FC = React.memo(() => {
   return (
     <div className="plugin-openapi-main-panel">
       {appInfo ? (
-        <OpenAppInfoProvider appInfo={appInfo}>
+        <OpenAppInfoProvider appInfo={appInfo} refresh={refresh}>
           <AppInfo />
         </OpenAppInfoProvider>
       ) : (

web/plugins/com.msgbyte.openapi/src/MainPanel/types.ts

@@ -1,5 +1,19 @@
+const openAppCapability = [
+  'bot', // 机器人
+  'webpage', // 网页
+  'oauth', // 第三方登录
+] as const;
+
+export type OpenAppCapability = typeof openAppCapability[number];
+
 export interface OpenApp {
+  _id: string;
   appId: string;
   appSecret: string;
   appName: string;
+  appDesc: string;
+  appIcon: string;
+  capability: OpenAppCapability[];
+
+  owner: string;
 }

web/src/plugin/component/index.tsx

@@ -1,6 +1,15 @@
 import { Input } from 'antd';
 
-export { Button, Checkbox, Input, Divider, Space, Menu, Table } from 'antd';
+export {
+  Button,
+  Checkbox,
+  Input,
+  Divider,
+  Space,
+  Menu,
+  Table,
+  Switch,
+} from 'antd';
 export const TextArea = Input.TextArea;
 export { Image } from '@/components/Image';
 export { Icon } from '@iconify/react';