feat: use webview

Author: uniquemo

package.json

@@ -14,7 +14,8 @@
   "activationEvents": [
     "onCustomEditor:customEditor.mrDetail",
     "onView:codingPlugin.treeMR",
-    "onView:codingPlugin.treeDepot"
+    "onView:codingPlugin.treeDepot",
+    "onView:codingPlugin.webview"
   ],
   "contributes": {
     "customEditors": [
@@ -61,6 +62,12 @@
           "id": "CODING-DEPOT",
           "title": "CODING 仓库"
         }
+      ],
+      "rightside": [
+        {
+          "id": "WebviewContainerId",
+          "title": "CODING 合并请求详情"
+        }
       ]
     },
     "views": {
@@ -75,6 +82,12 @@
           "id": "codingPlugin.treeDepot",
           "name": "CODING 仓库"
         }
+      ],
+      "WebviewContainerId": [
+        {
+          "id": "codingPlugin.webview",
+          "title": "CODING 合并请求详情"
+        }
       ]
     }
   },

src/extension.ts

@@ -1,5 +1,6 @@
 import init from './init';
 import CodingServer from './services/codingServer';
+import WebviewProvider from './webviews';
 import ACTIONS, { dispatch } from './utils/actions';
 import { proxyCtx } from './utils/proxy';
 import toast from './utils/toast';
@@ -26,6 +27,7 @@ const user = {
 
 async function activate(context: IContext) {
   // TODO: 认证，拿到用户信息
+  const webviewProvider = new WebviewProvider();
 
   const repoInfo = await CodingServer.getRepoParams();
   console.log('repoInfo ==> ', repoInfo);
@@ -43,6 +45,7 @@ async function activate(context: IContext) {
   dispatch(ACTIONS.SET_CTX, {
     context,
     value: {
+      webviewProvider,
       codingServer,
       depots: [],
       selectedDepot: null,

src/init.ts

@@ -5,7 +5,6 @@ import MRCustomEditorProvider from './customEditors/mergeRequest';
 
 import toast from './utils/toast';
 import ACTIONS, { dispatch } from './utils/actions';
-import { openHosts } from './utils/mr';
 import { IDepot, IMRItem } from './typings/common';
 
 const { registerCommand } = hx.commands;
@@ -15,11 +14,10 @@ export function registerCommands(context: IContext) {
 
   context.subscriptions.push(
     registerCommand('codingPlugin.mrTreeItemClick', async function ([team, mrItem]: [string, IMRItem]) {
-      openHosts();
       const matchRes = mrItem.path.match(/\/p\/([^/]+)\/d\/([^/]+)\/git\/merge\/([0-9]+)/);
       if (matchRes) {
         const [, project, repo, mergeRequestIId] = matchRes;
-        context.mrCustomEditor.update({
+        context.webviewProvider.update({
           session: codingServer.session,
           mergeRequestIId,
           repoInfo: {
@@ -47,6 +45,12 @@ export function registerCommands(context: IContext) {
       const depot = await hx.window.showInputBox({
         prompt: '请输入仓库名',
       });
+
+      if (!depot) {
+        toast.warn('仓库名不能为空');
+        return;
+      }
+
       const team = codingServer.session?.user?.team;
       await codingServer.createDepot(team, depot, depot);
       toast.info('仓库创建成功');
@@ -88,7 +92,6 @@ export function clear(context: IContext) {
 
 export function registerCustomEditors(context: IContext) {
   const mrCustomEditor = new MRCustomEditorProvider(context);
-
   hx.window.registerCustomEditorProvider('customEditor.mrDetail', mrCustomEditor);
 
   dispatch(ACTIONS.SET_MR_CUSTOM_EDITOR, {
@@ -100,6 +103,5 @@ export function registerCustomEditors(context: IContext) {
 export default function init(context: IContext) {
   registerCommands(context);
   createTreeViews(context);
-  registerCustomEditors(context);
   workspaceInit();
 }

src/customEditors/webview.ts renamed to src/webviews/index.ts

@@ -44,18 +44,29 @@ export default class WebviewProvider {
 
   update(data: any) {
     const webview = this.panel.webView;
-    const fileInfo = hx.Uri.file(path.resolve(__dirname, '../out/webviews/main.js'));
+    const fileInfo = hx.Uri.file(path.resolve(__dirname, '../../out/webviews/main.js'));
+
+    const config = hx.workspace.getConfiguration();
+    const colorScheme = config.get('editor.colorScheme');
+
+    const COLORS: Record<string, string> = {
+      Monokai: 'themeDark',
+      'Atom One Dark': 'themeDarkBlue',
+      Default: 'themeLight',
+    };
 
     webview.html = `
-      <body>
-        <div>
-          <div id='root'></div>
-        </div>
-        <script>
-          window.__CODING__ = '${JSON.stringify(data)}'
-        </script>
-        <script src='${fileInfo}'></script>
-      </body>
+      <html>
+        <body class='${COLORS[colorScheme]}'>
+          <div>
+            <div id='root'></div>
+          </div>
+          <script>
+            window.__CODING__ = '${JSON.stringify(data)}'
+          </script>
+          <script src='${fileInfo}'></script>
+        </body>
+      </html>
     `;
   }
 }

webviews/App.tsx

@@ -180,15 +180,6 @@ const App = () => {
       <div dangerouslySetInnerHTML={{ __html: body }} />
 
       <div className={style.btnGroup}>
-        {showMergeBtn && (
-          <div
-            className={cn(style.btn, style.btnPrimary, isMerging && style.disabled)}
-            onClick={handleMerge}
-          >
-            {renderActionText(isMerging, '合并')}
-          </div>
-        )}
-
         {showAllowMergeBtn && !isAgreed && (
           <div
             className={cn(style.btn, style.btnPrimary, isAllowing && style.disabled)}
@@ -207,6 +198,15 @@ const App = () => {
           </div>
         )}
 
+        {showMergeBtn && (
+          <div
+            className={cn(style.btn, style.btnPrimary, isMerging && style.disabled)}
+            onClick={handleMerge}
+          >
+            {renderActionText(isMerging, '合并')}
+          </div>
+        )}
+
         {showCloseBtn && (
           <div
             className={cn(style.btn, isClosing && style.disabled)}