diff --git a/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/OAuth.tsx b/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/OAuth.tsx new file mode 100644 index 00000000..9be4002e --- /dev/null +++ b/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/OAuth.tsx @@ -0,0 +1,82 @@ +import React from 'react'; +import { + FullModalField, + DefaultFullModalTextAreaEditorRender, + Switch, +} from '@capital/component'; +import { useOpenAppInfo } from '../context'; +import { OpenAppCapability } from '../types'; +import { postRequest, useAsyncFn } from '@capital/common'; + +const OAuth: React.FC = React.memo(() => { + const { refresh, appId, capability, oauth } = useOpenAppInfo(); + + const [{ loading }, handleChangeOAuthCapability] = useAsyncFn( + async (checked: boolean) => { + const newCapability: OpenAppCapability[] = [...capability]; + const findIndex = newCapability.findIndex((c) => c === 'oauth'); + const isExist = findIndex !== -1; + + if (checked && !isExist) { + newCapability.push('oauth'); + } else if (!checked && isExist) { + newCapability.splice(findIndex, 1); + } + + await postRequest('/openapi/app/setAppCapability', { + appId, + capability: newCapability, + }); + await refresh(); + }, + [appId, capability, refresh] + ); + + const [, handleUpdateOAuthInfo] = useAsyncFn( + async (name: string, value: any) => { + await postRequest('/openapi/app/setAppOAuthInfo', { + appId, + fieldName: name, + fieldValue: value, + }); + await refresh(); + }, + [] + ); + + return ( +
+ + } + /> + + {capability.includes('oauth') && ( + + handleUpdateOAuthInfo( + 'redirectUrls', + String(str) + .split('\n') + .map((t) => t.trim()) + ) + } + /> + )} +
+ ); +}); +OAuth.displayName = 'OAuth'; + +export default OAuth; diff --git a/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/index.tsx b/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/index.tsx index 44ee532b..d56c511c 100644 --- a/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/index.tsx +++ b/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/index.tsx @@ -1,40 +1,58 @@ -import React, { useState } from 'react'; -import { Menu } from '@capital/component'; +import React, { useMemo } from 'react'; +import { SidebarView } from '@capital/component'; import { Loadable } from '@capital/common'; import { useOpenAppInfo } from '../context'; import './index.less'; -const menuRouteMap: Record = { - summary: Loadable(() => import('./Summary')), - profile: Loadable(() => import('./Profile')), - bot: Loadable(() => import('./Bot')), - webpage: Loadable(() => import('./Webpage')), -}; +const Summary = Loadable(() => import('./Summary')); +const Profile = Loadable(() => import('./Profile')); +const Bot = Loadable(() => import('./Bot')); +const Webpage = Loadable(() => import('./Webpage')); +const OAuth = Loadable(() => import('./OAuth')); const AppInfo: React.FC = React.memo(() => { - const [menu, setMenu] = useState('summary'); const { appName } = useOpenAppInfo(); + const menu = useMemo( + () => [ + { + type: 'group', + title: appName, + children: [ + { + type: 'item', + title: '总览', + content: , + }, + { + type: 'item', + title: '基础信息', + content: , + }, + { + type: 'item', + title: '机器人', + content: , + }, + { + type: 'item', + title: '网页', + content: , + }, + { + type: 'item', + title: '应用登录', + content: , + }, + ], + }, + ], + [] + ); + return (
-
-
{appName}
- - setMenu(key)} - > - 总览 - 基础信息 - 机器人 - 网页 - -
- -
- {menuRouteMap[menu] ? React.createElement(menuRouteMap[menu]) :
} -
+
); }); diff --git a/web/plugins/com.msgbyte.openapi/src/MainPanel/types.ts b/web/plugins/com.msgbyte.openapi/src/MainPanel/types.ts index 195b379b..74a4b266 100644 --- a/web/plugins/com.msgbyte.openapi/src/MainPanel/types.ts +++ b/web/plugins/com.msgbyte.openapi/src/MainPanel/types.ts @@ -6,6 +6,10 @@ const openAppCapability = [ export type OpenAppCapability = typeof openAppCapability[number]; +interface OpenAppOAuth { + redirectUrls: string[]; +} + export interface OpenApp { _id: string; appId: string; @@ -14,6 +18,7 @@ export interface OpenApp { appDesc: string; appIcon: string; capability: OpenAppCapability[]; + oauth?: OpenAppOAuth; owner: string; } diff --git a/web/src/components/FullModal/Field.tsx b/web/src/components/FullModal/Field.tsx index 0d802cbd..ec7e6a1e 100644 --- a/web/src/components/FullModal/Field.tsx +++ b/web/src/components/FullModal/Field.tsx @@ -157,7 +157,7 @@ export const DefaultFullModalInputEditorRender: FullModalFieldEditorRenderCompon export const DefaultFullModalTextAreaEditorRender: FullModalFieldEditorRenderComponent = ({ value, onChange }) => ( onChange(e.target.value)} /> diff --git a/web/src/plugin/component/index.tsx b/web/src/plugin/component/index.tsx index 48b4def3..a629d6c0 100644 --- a/web/src/plugin/component/index.tsx +++ b/web/src/plugin/component/index.tsx @@ -16,5 +16,10 @@ export { Icon } from '@iconify/react'; export { PillTabs, PillTabPane } from '@/components/PillTabs'; export { LoadingSpinner } from '@/components/LoadingSpinner'; export { WebFastForm } from '@/components/WebFastForm'; -export { FullModalField } from '@/components/FullModal/Field'; +export { + FullModalField, + DefaultFullModalInputEditorRender, + DefaultFullModalTextAreaEditorRender, +} from '@/components/FullModal/Field'; export { Loading } from '@/components/Loading'; +export { SidebarView } from '@/components/SidebarView';