Revert "refactor: labring#235 move debug panel to outside (labring#239)…

…" (labring#245) This reverts commit 1165899.
LeezQ · Sep 19, 2022 · 8ff4db5 · 8ff4db5
1 parent 8aa6640
commit 8ff4db5
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 85 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,6 +29,7 @@ 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)
@@ -271,8 +272,15 @@ 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()
   }
@@ -359,26 +367,17 @@ onMounted(async () => {
       >
         对比已发布 (#{{ published_func.version }})
       </el-button>
-      <el-button type="success" style="float: right; margin-left: 10px" :loading="loading" @click="launch">
-        运行(B)
+      <el-button style="float: right" type="primary" @click="showDebugPanel = true">
+        显示调试面板(J)
       </el-button>
     </div>
 
     <div style="display: flex; height: calc(100vh - 140px)">
-      <div v-if="func" class="editor-container  w-2/3">
+      <div v-if="func" class="editor-container  w-78/100 mr-12px">
         <FunctionEditor v-model="value" :name="func.name" :height="editorHeight" :dark="false" />
       </div>
-      <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>
-
+      <div class="latest-logs w-1/5">
+        <el-tabs type="border-card">
           <el-tab-pane label="最近执行">
             <template #label>
               <span>最近执行 <el-icon @click="getLatestLogs"><Refresh /></el-icon></span>
@@ -414,6 +413,41 @@ 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" />
@@ -429,12 +463,6 @@ 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
diff --git a/packages/web/src/pages/app/[appid]/cloudfunction/index.vue b/packages/web/src/pages/app/[appid]/cloudfunction/index.vue
@@ -17,7 +17,8 @@ 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"
-    }
+    }