refactor: #235 move debug panel to outside (#239)

* refactor: move debug panel to outside * refactor: extract debug panel into independent component
labring · Aug 10, 2022 · 1165899 · 1165899
1 parent fd59030
commit 1165899
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 52 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -86,4 +86,4 @@
   ],
   "mocha.files.glob": "packages/*/tests/**/*test.js",
   "mochaExplorer.files": "packages/*/tests/**/*test*.js"
-}
+}
diff --git a/packages/web/src/pages/app/[appid]/cloudfunction/[id].vue b/packages/web/src/pages/app/[appid]/cloudfunction/[id].vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { debounce } from 'lodash'
 import FunctionLogDetail from './components/FunctionLogDetail.vue'
+import DebugPanel from './components/DebugPanel.vue'
 import { compileFunctionCode, getFunctionById, getFunctionChangeHistory, getFunctionLogs, getPublishedFunction, launchFunction, publishOneFunction, updateFunctionCode } from '~/api/func'
-import JsonEditor from '~/components/JsonEditor/param.vue'
 import FunctionEditor from '~/components/FunctionEditor/index.vue'
 import DiffEditor from '~/components/FunctionEditor/diff.vue'
 import { useAppStore } from '~/store/app'
@@ -29,7 +29,6 @@ let invokeResult = $ref(null)
 let invokeLogs = $ref(null)
 let invokeTimeUsage = $ref(null)
 let invokeRequestId = $ref('')
-let showDebugPanel = $ref(false)
 let latestLogs: any = $ref([])
 let logDetail = $ref(undefined)
 let isShowLogDetail = $ref(false)
@@ -272,15 +271,8 @@ async function bindShortKey(e: { ctrlKey: any; metaKey: any; key: string; preven
     e.preventDefault()
   }
 
-  // Ctrl + j 弹出/隐藏调试框
-  if ((e.ctrlKey || e.metaKey) && e.key === 'j') {
-    showDebugPanel = !showDebugPanel
-    e.preventDefault()
-  }
-
   // Ctrl + b 为调试运行，并弹出调试框
   if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
-    showDebugPanel = true
     launch()
     e.preventDefault()
   }
@@ -367,17 +359,26 @@ onMounted(async () => {
       >
         对比已发布 (#{{ published_func.version }})
       </el-button>
-      <el-button style="float: right" type="primary" @click="showDebugPanel = true">
-        显示调试面板(J)
+      <el-button type="success" style="float: right; margin-left: 10px" :loading="loading" @click="launch">
+        运行(B)
       </el-button>
     </div>
 
     <div style="display: flex; height: calc(100vh - 140px)">
-      <div v-if="func" class="editor-container  w-78/100 mr-12px">
+      <div v-if="func" class="editor-container  w-2/3">
         <FunctionEditor v-model="value" :name="func.name" :height="editorHeight" :dark="false" />
       </div>
-      <div class="latest-logs w-1/5">
-        <el-tabs type="border-card">
+      <div class="w-1/3 pl-6px">
+        <el-tabs type="border-card" class="inspector h-full overflow-hidden">
+          <el-tab-pane label="在线调试" class="h-full overflow-auto">
+            <DebugPanel
+              :invoke-params="invokeParams"
+              :invoke-request-id="invokeRequestId"
+              :invoke-time-usage="invokeTimeUsage"
+              :invoke-result="invokeResult"
+            />
+          </el-tab-pane>
+
           <el-tab-pane label="最近执行">
             <template #label>
               <span>最近执行 <el-icon @click="getLatestLogs"><Refresh /></el-icon></span>
@@ -413,41 +414,6 @@ onMounted(async () => {
       </div>
     </div>
 
-    <el-drawer
-      v-model="showDebugPanel" title="调试面板" direction="rtl" size="40%" :destroy-on-close="false"
-      :show-close="true" :modal="true" :wrapper-closable="true" @close="showDebugPanel = false"
-    >
-      <div class="invoke-panel h-full">
-        <div class="title">
-          调用参数
-          <el-button type="success" style="margin-left: 10px" :loading="loading" @click="launch">
-            运行(B)
-          </el-button>
-        </div>
-        <div class="editor h-full">
-          <JsonEditor v-model="invokeParams" :line-numbers="false" :height="300" :dark="false" />
-        </div>
-        <div v-if="invokeRequestId" class="invoke-result">
-          <div class="title">
-            执行日志
-            <span v-if="invokeRequestId">（ RequestId: {{ invokeRequestId }} ）</span>
-          </div>
-          <div v-if="invokeLogs" class="logs">
-            <div v-for="(log, index) in invokeLogs" :key="index" class="log-item">
-              <pre>- {{ log }}</pre>
-            </div>
-          </div>
-          <div class="title" style="margin-top: 20px">
-            调用结果
-            <span v-if="invokeTimeUsage"> （ {{ invokeTimeUsage }} ms ）</span>
-          </div>
-          <div class="result">
-            <pre>{{ invokeResult }}</pre>
-          </div>
-        </div>
-      </div>
-    </el-drawer>
-
     <!-- 日志详情对话框 -->
     <el-dialog v-if="logDetail" v-model="isShowLogDetail" title="日志详情">
       <FunctionLogDetail :data="logDetail" />
@@ -463,6 +429,12 @@ onMounted(async () => {
   </div>
 </template>
 
+<style lang="scss" scoped>
+  .inspector::v-deep > .el-tabs__content {
+    height: 100%;
+  }
+</style>
+
 <route lang="yaml">
 name: debug
 hidden: true

diff --git a/packages/web/src/pages/app/[appid]/cloudfunction/components/DebugPanel.vue b/packages/web/src/pages/app/[appid]/cloudfunction/components/DebugPanel.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import JsonEditor from '~/components/JsonEditor/param.vue'
+
+const props = defineProps<{
+  invokeParams: any
+  invokeRequestId?: string
+  invokeTimeUsage?: number
+  invokeResult?: string
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <div>
+      调用参数
+    </div>
+    <div class="h-300px">
+      <JsonEditor v-model="props.invokeParams" :line-numbers="false" :height="300" :dark="false" />
+    </div>
+    <div v-if="props.invokeRequestId" class="invoke-result">
+      <div class="title">
+        执行日志
+        <span v-if="props.invokeRequestId">（ RequestId: {{ props.invokeRequestId }} ）</span>
+      </div>
+      <div v-if="invokeLogs" class="logs">
+        <div v-for="(log, index) in invokeLogs" :key="index" class="log-item">
+          <pre>- {{ log }}</pre>
+        </div>
+      </div>
+      <div class="title" style="margin-top: 20px">
+        调用结果
+        <span v-if="props.invokeTimeUsage"> （ {{ props.invokeTimeUsage }} ms ）</span>
+      </div>
+      <div class="result overflow-auto">
+        <pre>{{ props.invokeResult }}</pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.invoke-result {
+  margin-top: 20px;
+
+  .logs {
+    margin-top: 10px;
+    padding: 10px;
+    padding-left: 20px;
+    background: rgba(233, 243, 221, 0.472);
+    border-radius: 10px;
+    overflow-x: auto;
+  }
+
+  .result {
+    margin-top: 10px;
+    padding: 16px;
+    background: rgba(233, 243, 221, 0.472);
+    border-radius: 10px;
+    overflow-x: auto;
+  }
+}
+</style>
diff --git a/packages/web/src/pages/app/[appid]/cloudfunction/index.vue b/packages/web/src/pages/app/[appid]/cloudfunction/index.vue
@@ -17,8 +17,7 @@ const $router = useRouter()
 
 const dataFormRef = $ref<FormInstance>()
 
-const defaultCode = `
-import cloud from '@/cloud-sdk'
+const defaultCode = `import cloud from '@/cloud-sdk'
 
 exports.main = async function (ctx: FunctionContext) {
   // body, query 为请求参数, auth 是授权对象
-Original file line number
+Diff line change
@@ Expand Up / @@ -86,4 +86,4 @@ @@
       ],
       "mocha.files.glob": "packages/*/tests/**/*test.js",
       "mochaExplorer.files": "packages/*/tests/**/*test*.js"
-    }
+    }