feat: 增加github项目可交互按钮并增加全局code样式

msgbyte · Dec 10, 2022 · 5e4ee9b · 5e4ee9b
1 parent 6424199
commit 5e4ee9b
Show file tree

Hide file tree

Showing 5 changed files with 204 additions and 38 deletions.
diff --git a/client/web/src/styles/global.less b/client/web/src/styles/global.less
@@ -21,6 +21,16 @@ body {
     opacity: var(--tc-content-background-image-opacity);
   }
 
+  code {
+    // fork from antd: .ant-typography code
+    margin: 0 0.2em;
+    padding: 0.2em 0.4em 0.1em;
+    font-size: 85%;
+    background: rgba(150, 150, 150, 0.1);
+    border: 1px solid rgba(100, 100, 100, 0.2);
+    border-radius: 3px;
+  }
+
   /* 滚动条 */
   ::-webkit-scrollbar {
     width: 16px;

diff --git a/....github/web/plugins/com.msgbyte.github/src/GroupSubscribePanel/AddGroupSubscribeModal.tsx b/....github/web/plugins/com.msgbyte.github/src/GroupSubscribePanel/AddGroupSubscribeModal.tsx
@@ -1,12 +1,15 @@
 import React, { useMemo } from 'react';
 import {
-  ModalWrapper,
   createFastFormSchema,
   fieldSchema,
   useAsyncRequest,
   showToasts,
 } from '@capital/common';
-import { WebFastForm, GroupPanelSelector } from '@capital/component';
+import {
+  WebFastForm,
+  GroupPanelSelector,
+  ModalWrapper,
+} from '@capital/component';
 import { request } from '../request';
 import { Translate } from '../translate';
 

diff --git a/...ugins/com.msgbyte.github/web/plugins/com.msgbyte.github/src/GroupSubscribePanel/index.tsx b/...ugins/com.msgbyte.github/web/plugins/com.msgbyte.github/src/GroupSubscribePanel/index.tsx
@@ -8,7 +8,7 @@ import {
   getServiceUrl,
   useGroupPanelInfo,
 } from '@capital/common';
-import { Button, Space, Table } from '@capital/component';
+import { Button, CopyableText, Space, Table } from '@capital/component';
 import { Translate } from '../translate';
 import { AddGroupSubscribeModal } from './AddGroupSubscribeModal';
 import { request } from '../request';
@@ -99,6 +99,7 @@ const GroupSubscribePanel: React.FC = React.memo(() => {
     ],
     [handleDelete]
   );
+  const url = `${getServiceUrl()}/api/plugin:com.msgbyte.github.subscribe/webhook/callback`;
 
   return (
     <div>
@@ -128,10 +129,9 @@ const GroupSubscribePanel: React.FC = React.memo(() => {
           <h3>如何接入:</h3>
           <p>
             在对应 Github 仓库中添加 github webhook, 回调地址指向:{' '}
-            <code style={{ userSelect: 'text' }}>
-              {getServiceUrl()}
-              /api/plugin:com.msgbyte.github.subscribe/webhook/callback
-            </code>
+            <CopyableText config={{ text: url }}>
+              <code style={{ userSelect: 'text' }}>{url}</code>
+            </CopyableText>
           </p>
           <p>
             并确保 <code>Content type</code> 类型为{' '}