feat(openapi): add open app base info

msgbyte · Aug 26, 2023 · 351641c · 351641c
1 parent 380bc3d
commit 351641c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/client/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.less b/client/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.less
@@ -1,3 +1,5 @@
 .plugin-openapi-app-info_profile {
-  // keep
+  h2 {
+    margin-bottom: 10px;
+  }
 }
diff --git a/client/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.tsx b/client/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.tsx
@@ -5,21 +5,47 @@ import {
   Divider,
   SensitiveText,
   Button,
+  Avatar,
 } from '@capital/component';
 import { Translate } from '../../translate';
 import { useOpenAppAction } from './useOpenAppAction';
+import styled from 'styled-components';
 import './Profile.less';
 
+const TwoColumnContainer = styled.div`
+  display: flex;
+
+  > div {
+    flex: 1;
+  }
+`;
+
 /**
  * 基础信息
  */
 const Profile: React.FC = React.memo(() => {
-  const { appId, appSecret } = useOpenAppInfo();
+  const { appId, appSecret, appName, appDesc, appIcon } = useOpenAppInfo();
 
   const { handleDeleteApp } = useOpenAppAction();
 
   return (
     <div className="plugin-openapi-app-info_profile">
+      <h2>{Translate.app.basicInfo}</h2>
+
+      <TwoColumnContainer>
+        <div>
+          <FullModalField title={Translate.app.appName} content={appName} />
+
+          <FullModalField title={Translate.app.appDesc} content={appDesc} />
+        </div>
+
+        <div>
+          <Avatar name={appName} src={appIcon} size={72} />
+        </div>
+      </TwoColumnContainer>
+
+      <Divider />
+
       <h2>{Translate.app.appcret}</h2>
 
       <div>

diff --git a/client/web/plugins/com.msgbyte.openapi/src/translate.ts b/client/web/plugins/com.msgbyte.openapi/src/translate.ts
@@ -47,6 +47,14 @@ export const Translate = {
       'zh-CN': '基础信息',
       'en-US': 'Basic Info',
     }),
+    appName: localTrans({
+      'zh-CN': '应用名称',
+      'en-US': 'App Name',
+    }),
+    appDesc: localTrans({
+      'zh-CN': '应用描述',
+      'en-US': 'App Description',
+    }),
     bot: localTrans({
       'zh-CN': '机器人',
       'en-US': 'Bot',