feat: 应用凭证

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

@@ -0,0 +1,3 @@
+.plugin-openapi-app-info_profile {
+  // keep
+}

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';
 

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;
+  }
 }

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>

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

@@ -1,3 +1,3 @@
 .plugin-openapi-main-panel {
-  // keep
+  height: 100%;
 }

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;
+  }
+}

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';

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,
 });

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';