import monaco editor and electron

client/README.md

@@ -35,7 +35,7 @@ npm run start
 **模式一：使用外部 UI 服务**
 
 ```
-UI_SERVER_URL=http://localhost:8000 npm run start
+SKIP_SERVER=1 UI_SERVER_URL=http://localhost:8000 npm run start
 ```
 
 **模式二：使用本地 UI 静态文件目录**

client/package.json

@@ -41,6 +41,7 @@
   "dependencies": {
     "@electron/remote": "^2.0.5",
     "electron-log": "^4.4.6",
+    "electron-remote": "^1.3.0",
     "electron-squirrel-startup": "^1.0.0",
     "express": "^4.17.3",
     "find-process": "^1.4.7",

client/src/main.js

@@ -14,7 +14,12 @@ const createWindow = (url) => {
   //   height: 800,
   // });
 
+  require('@electron/remote/main').initialize()
+
   const mainWindow = new BrowserWindow({show: false, webPreferences: {nodeIntegration: true, contextIsolation: false}})
+
+  require("@electron/remote/main").enable(mainWindow.webContents)
+
   mainWindow.maximize()
   mainWindow.show()
 
@@ -63,7 +68,7 @@ app.on('window-all-closed', () => {
   logInfo(`>> Event window-all-closed`)
 
   // if (process.platform !== 'darwin') {
-    app.quit();
+  app.quit();
   // }
 });
 

internal/comm/helper/script/asset.go

@@ -42,6 +42,18 @@ func LoadScriptByProject(projectPath string) (scriptFiles []string) {
 
 func GetScriptContent(pth string) (script serverDomain.TestScript, err error) {
 	script.Code = fileUtils.ReadFile(pth)
+	script.Lang = getScriptLang(pth)
+
+	return
+}
+func getScriptLang(pth string) (lang string) {
+	extName := strings.TrimLeft(fileUtils.GetExtName(pth), ".")
+	for key, val := range langUtils.LangMap {
+		if extName == val["extName"] {
+			lang = key
+			return
+		}
+	}
 
 	return
 }

internal/server/modules/v1/domain/test-script.go

@@ -5,6 +5,7 @@ type TestScript struct {
 	Name    string `json:"name"`
 	Code    string `json:"code"`
 	Desc    string `json:"desc"`
+	Lang    string `json:"lang"`
 
 	ProjectId uint `json:"projectId"`
 }

ui/src/layouts/IndexLayout/components/RightTopProject.vue

@@ -121,6 +121,18 @@ export default defineComponent({
 
       if (!item) {
         setFormVisible(true)
+
+        // if (window.require) {
+        //   const {dialog} = window.require('@electron/remote');
+        //   dialog.showOpenDialog({
+        //     properties: ['openDirectory']
+        //   }).then(result => {
+        //     console.log(result.canceled)
+        //     console.log(result.filePaths)
+        //   }).catch(err => {
+        //     console.log(err)
+        //   })
+        // }
       } else {
         store.dispatch('project/fetchProject', item.path)
       }

ui/src/views/component/project/create.vue

@@ -14,7 +14,21 @@
     <div>
       <a-form :labelCol="{ span: 4 }" :wrapper-col="{span:20}">
         <a-form-item :label="t('path')" v-bind="validateInfos.path" :placeholder="t('project_path')">
-          <a-input v-model:value="modelRef.path" />
+          <a-input-search
+              v-if="isElectron"
+              v-model:value="modelRef.path"
+              @search="selectDir"
+              spellcheck="false"
+          >
+            <template #enterButton>
+              <a-button>选择</a-button>
+            </template>
+          </a-input-search>
+
+          <a-input
+              v-if="!isElectron"
+              v-model:value="modelRef.path"
+              spellcheck="false" />
         </a-form-item>
 
         <a-form-item :label="t('name')">
@@ -44,6 +58,8 @@ import { validateInfos } from 'ant-design-vue/lib/form/useForm';
 
 interface ProjectCreateFormSetupData {
   t: (key: string | number) => string;
+  isElectron: Ref<boolean>;
+  selectDir: () => void;
   modelRef: Ref<Interpreter>
   validateInfos: validateInfos
   onFinish: () => Promise<void>;
@@ -71,7 +87,7 @@ export default defineComponent({
   setup(props): ProjectCreateFormSetupData {
     const { t } = useI18n();
 
-    const modelRef = reactive<any>({path: '', type: 'func'})
+    const modelRef = ref<any>({path: '', type: 'func'})
     const rulesRef = reactive({
       path: [ { required: true, message: t('pls_project_path') } ],
       type: [ { required: true, message: t('pls_project_type') } ],
@@ -79,6 +95,24 @@ export default defineComponent({
 
     const { validate, validateInfos } = Form.useForm(modelRef, rulesRef);
 
+    const isElectron = ref(!!window.require)
+    const selectDir = () => {
+      console.log('selectDir')
+
+      if (isElectron.value) {
+        const {dialog} = window.require('@electron/remote');
+        dialog.showOpenDialog({
+          properties: ['openDirectory']
+        }).then(result => {
+          if (result.filePaths && result.filePaths.length > 0) {
+            modelRef.value.path = result.filePaths[0]
+          }
+        }).catch(err => {
+          console.log(err)
+        })
+      }
+    }
+
     const onFinish = async () => {
       console.log('onFinish')
 
@@ -93,6 +127,8 @@ export default defineComponent({
 
     return {
       t,
+      isElectron,
+      selectDir,
       modelRef,
       validateInfos,
       onFinish

ui/src/views/script/index/main.vue

@@ -45,8 +45,12 @@
           <a-button @click="extract" type="primary">{{ t('extract_step') }}</a-button>
         </div>
         <div class="panel">
-          <div id="monaco"></div>
-<!--          <highlightjs v-if="scriptCode" autodetect :code="scriptCode" />-->
+          <MonacoEditor
+              v-if="scriptCode !== ''"
+              class="editor"
+              :value="scriptCode"
+              :language="lang"
+          />
         </div>
       </div>
     </div>
@@ -63,11 +67,7 @@ import {resizeWidth} from "@/utils/dom";
 import {Empty, message, notification} from "ant-design-vue";
 import {useI18n} from "vue-i18n";
 
-// import 'highlight.js/lib/common';
-// import hljsVuePlugin from "@highlightjs/vue-plugin";
-// import 'highlight.js/styles/googlecode.css'
-
-// import * as monaco from 'monaco-editor';
+import MonacoEditor from 'monaco-editor-vue3'
 
 interface ListScriptPageSetupData {
   t: (key: string | number) => string;
@@ -77,6 +77,7 @@ interface ListScriptPageSetupData {
   tree: Ref;
   script: ComputedRef
   scriptCode: Ref<string>;
+  lang: Ref<string>;
 
   isExpand: Ref<boolean>;
   expandNode: (expandedKeys: string[], e: any) => void;
@@ -92,7 +93,7 @@ export default defineComponent({
   name: 'ScriptListPage',
   components: {
     IconSvg,
-    // highlightjs: hljsVuePlugin.component
+    MonacoEditor,
   },
   setup(): ListScriptPageSetupData {
     const { t } = useI18n();
@@ -130,6 +131,7 @@ export default defineComponent({
     const storeScript = useStore<{ script: ScriptData }>();
     let script = computed<any>(() => storeScript.state.script.detail);
     let scriptCode = ref('')
+    let lang = ref('')
 
     onMounted(() => {
       console.log('onMounted', tree)
@@ -151,19 +153,16 @@ export default defineComponent({
     })
     const selectNode = (selectedKeys, e) => {
       console.log('selectNode', e.selectedNodes)
-      if (e.selectedNodes.length === 0) return
+      if (e.selectedNodes.length === 0 || e.selectedNodes[0].props.isDir) {
+        scriptCode.value = ''
+        return
+      }
       selectedNode = e.selectedNodes[0]
 
       scriptCode.value = ''
       storeScript.dispatch('script/getScript', selectedNode.props).then(() => {
-        console.log('===', script)
         scriptCode.value = script.value.code
-
-        // disposeEditor()
-        // monacoInstance = monaco.editor.create(document.getElementById("monaco") as HTMLElement,{
-        //   value: script.value.code,
-        //   language:"php"
-        // })
+        lang.value = script.value.lang
       })
     }
 
@@ -206,6 +205,7 @@ export default defineComponent({
       expandedKeys,
       script,
       scriptCode,
+      lang,
       simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
     }
   }
@@ -213,7 +213,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .indexlayout-main-conent {
   margin: 0px;
   height: 100%;
@@ -292,8 +292,10 @@ export default defineComponent({
     }
   }
 }
+</style>
 
-#monaco {
-  height: 100%;
+<style lang="less">
+.monaco-editor {
+  padding: 10px 0;
 }
 </style>

ui/vue.config.js

@@ -43,25 +43,6 @@ module.exports = {
             // 'vue': 'Vue',
             // 'vue-router': 'VueRouter',
         },
-        // module: {
-        //     rules: [
-        //         {
-        //             test: /\.(sa|sc|c)ss$/,
-        //             use: [
-        //                 'vue-style-loader',
-        //                 'style-loader',
-        //                 'css-loader',
-        //                 'sass-loader',
-        //                 'postcss-loader',
-        //             ]
-        //         },
-        //         {
-        //             test: /\.ttf$/,
-        //             use: ['file-loader']
-        //         }
-        //     ],
-        // },
-        // plugins: [new MonacoWebpackPlugin()],
     },
 
     chainWebpack(config) {
@@ -99,7 +80,7 @@ module.exports = {
         config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
             {
                 // Languages are loaded on demand at runtime
-                languages: ['json', 'javascript', 'html', 'xml']
+                languages: ['javascript', 'php']
             }
         ])
     }

xdoc/notes.txt

@@ -29,4 +29,12 @@ scp -r client/out/ztf-linux-x64/ 192.168.0.114:/home/aaron
 make compile_mac
 cd client && npm run package-mac && cd ..
 
-client/out/ztf-darwin-x64/ztf.app/Contents/MacOS/ztf
\ No newline at end of file
+client/out/ztf-darwin-x64/ztf.app/Contents/MacOS/ztf
+
+接口：
+用户信息
+产品树状列表（我参与的，其他的分开）
+模块列表
+套件列表
+任务列表
+用例树状列表（按模块组织，可以根据模块、套件、任务过滤）