From 5c53f0a2894ffeaf499d3cea829f03ce51b24884 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 11 Feb 2022 17:44:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BA=94=E7=94=A8=E5=87=AD=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/MainPanel/AppInfo/Profile.less        |  3 ++
 .../src/MainPanel/AppInfo/Profile.tsx         | 29 ++++++++++++++++++-
 .../src/MainPanel/AppInfo/index.less          |  5 ++++
 .../src/MainPanel/AppInfo/index.tsx           | 28 +++++++++++-------
 .../src/MainPanel/index.less                  |  2 +-
 .../src/components/SecretValue.less           |  9 ++++++
 .../src/components/SecretValue.tsx            | 23 +++++++++++++++
 web/plugins/com.msgbyte.openapi/src/index.ts  | 12 ++++++--
 web/src/plugin/component/index.tsx            |  1 +
 9 files changed, 97 insertions(+), 15 deletions(-)
 create mode 100644 web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.less
 create mode 100644 web/plugins/com.msgbyte.openapi/src/components/SecretValue.less
 create mode 100644 web/plugins/com.msgbyte.openapi/src/components/SecretValue.tsx

diff --git a/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.less b/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.less
new file mode 100644
index 00000000..3b4e3c01
--- /dev/null
+++ b/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.less
@@ -0,0 +1,3 @@
+.plugin-openapi-app-info_profile {
+  // keep
+}
diff --git a/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.tsx b/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.tsx
index 7e51eb6b..e46b5c20 100644
--- a/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.tsx
+++ b/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.tsx
@@ -1,7 +1,34 @@
+import { useOpenAppInfo } from '../context';
 import React from 'react';
+import { FullModalField, Divider } from '@capital/component';
+import { SecretValue } from '../../components/SecretValue';
+import './Profile.less';
 
+/**
+ * 基础信息
+ */
 const Profile: React.FC = React.memo(() => {
-  return <div>开发中</div>;
+  const { appId, appSecret } = useOpenAppInfo();
+
+  return (
+    <div>
+      <h2>应用凭证</h2>
+
+      <div>
+        <FullModalField title="App ID" content={appId} />
+        <FullModalField
+          title="App Secret"
+          content={<SecretValue>{appSecret}</SecretValue>}
+        />
+      </div>
+
+      <Divider />
+
+      <h2>基本信息</h2>
+
+      {/* TODO */}
+    </div>
+  );
 });
 Profile.displayName = 'Profile';
 
diff --git a/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/index.less b/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/index.less
index 52ea0d17..67dd136e 100644
--- a/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/index.less
+++ b/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/index.less
@@ -1,3 +1,8 @@
 .plugin-openapi-app-info {
   display: flex;
+  height: 100%;
+
+  .plugin-openapi-app-info_body {
+    padding: 0 10px;
+  }
 }
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 502ba6ec..44ee532b 100644
--- a/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/index.tsx
+++ b/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Menu } from '@capital/component';
 import { Loadable } from '@capital/common';
+import { useOpenAppInfo } from '../context';
 import './index.less';
 
 const menuRouteMap: Record<string, React.ComponentType> = {
@@ -12,21 +13,26 @@ const menuRouteMap: Record<string, React.ComponentType> = {
 
 const AppInfo: React.FC = React.memo(() => {
   const [menu, setMenu] = useState('summary');
+  const { appName } = useOpenAppInfo();
 
   return (
     <div className="plugin-openapi-app-info">
-      <Menu
-        style={{ width: 256 }}
-        selectedKeys={[menu]}
-        onSelect={({ key }) => setMenu(key)}
-      >
-        <Menu.Item key="summary">总览</Menu.Item>
-        <Menu.Item key="profile">基础信息</Menu.Item>
-        <Menu.Item key="bot">机器人</Menu.Item>
-        <Menu.Item key="webpage">网页</Menu.Item>
-      </Menu>
-
       <div>
+        <div>{appName}</div>
+
+        <Menu
+          style={{ width: 256 }}
+          selectedKeys={[menu]}
+          onSelect={({ key }) => setMenu(key)}
+        >
+          <Menu.Item key="summary">总览</Menu.Item>
+          <Menu.Item key="profile">基础信息</Menu.Item>
+          <Menu.Item key="bot">机器人</Menu.Item>
+          <Menu.Item key="webpage">网页</Menu.Item>
+        </Menu>
+      </div>
+
+      <div className="plugin-openapi-app-info_body">
         {menuRouteMap[menu] ? React.createElement(menuRouteMap[menu]) : <div />}
       </div>
     </div>
diff --git a/web/plugins/com.msgbyte.openapi/src/MainPanel/index.less b/web/plugins/com.msgbyte.openapi/src/MainPanel/index.less
index 8fcf8907..0ac2140f 100644
--- a/web/plugins/com.msgbyte.openapi/src/MainPanel/index.less
+++ b/web/plugins/com.msgbyte.openapi/src/MainPanel/index.less
@@ -1,3 +1,3 @@
 .plugin-openapi-main-panel {
-  // keep
+  height: 100%;
 }
diff --git a/web/plugins/com.msgbyte.openapi/src/components/SecretValue.less b/web/plugins/com.msgbyte.openapi/src/components/SecretValue.less
new file mode 100644
index 00000000..72dafb90
--- /dev/null
+++ b/web/plugins/com.msgbyte.openapi/src/components/SecretValue.less
@@ -0,0 +1,9 @@
+.plugin-openapi-secret-value {
+  display: flex;
+  align-items: center;
+
+  .iconify {
+    cursor: pointer;
+    margin-left: 4px;
+  }
+}
diff --git a/web/plugins/com.msgbyte.openapi/src/components/SecretValue.tsx b/web/plugins/com.msgbyte.openapi/src/components/SecretValue.tsx
new file mode 100644
index 00000000..359c5fa6
--- /dev/null
+++ b/web/plugins/com.msgbyte.openapi/src/components/SecretValue.tsx
@@ -0,0 +1,23 @@
+import { Icon } from '@capital/component';
+import React, { useState } from 'react';
+import './SecretValue.less';
+
+export const SecretValue: React.FC = React.memo((props) => {
+  const [show, setShow] = useState(false);
+  return (
+    <span className="plugin-openapi-secret-value">
+      {show ? (
+        <>
+          <span>{props.children}</span>
+          <Icon icon="mdi:eye-off-outline" onClick={() => setShow(false)} />
+        </>
+      ) : (
+        <>
+          <span>********</span>
+          <Icon icon="mdi:eye-outline" onClick={() => setShow(true)} />
+        </>
+      )}
+    </span>
+  );
+});
+SecretValue.displayName = 'SecretValue';
diff --git a/web/plugins/com.msgbyte.openapi/src/index.ts b/web/plugins/com.msgbyte.openapi/src/index.ts
index 570c3267..4b8f8a50 100644
--- a/web/plugins/com.msgbyte.openapi/src/index.ts
+++ b/web/plugins/com.msgbyte.openapi/src/index.ts
@@ -1,10 +1,18 @@
-import { Loadable, regCustomPanel } from '@capital/common';
+import { Loadable, regCustomPanel, regRootRouter } from '@capital/common';
 import { Translate } from './translate';
 
+const MainPanel = Loadable(() => import('./MainPanel'));
+
 regCustomPanel({
   position: 'setting',
   icon: '',
   name: 'com.msgbyte.openapi/mainPanel',
   label: Translate.openapi,
-  render: Loadable(() => import('./MainPanel')),
+  render: MainPanel,
+});
+
+regRootRouter({
+  name: 'com.msgbyte.openapi/route',
+  path: '/openapi',
+  component: MainPanel,
 });
diff --git a/web/src/plugin/component/index.tsx b/web/src/plugin/component/index.tsx
index b765eda2..f8c0e17d 100644
--- a/web/src/plugin/component/index.tsx
+++ b/web/src/plugin/component/index.tsx
@@ -7,3 +7,4 @@ 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';