改造为路由跳转方式

Author: kscript

src/element-plus.js

@@ -0,0 +1,32 @@
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import 'element-plus/dist/index.css'
+import '@/assets/scss/base.scss'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+const debounce = (callback, delay) => {
+  let tid
+  return function () {
+    const ctx = self
+    tid && clearTimeout(tid)
+    tid = setTimeout(() => {
+      callback.apply(ctx, arguments)
+    }, delay)
+  }
+}
+
+export default (app) => {
+  const _ = window.ResizeObserver
+  window.ResizeObserver = class ResizeObserver extends _ {
+    constructor (callback) {
+      callback = debounce(callback, 20)
+      super(callback)
+    }
+  }
+  app.use(ElementPlus, {
+    locale: zhCn
+  })
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+}

src/main.js

@@ -2,17 +2,8 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import ElementPlus from 'element-plus'
-import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-import 'element-plus/dist/index.css'
-import '@/assets/scss/base.scss'
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import useElementPlus from './element-plus'
 
 const app = createApp(App).use(store).use(router)
-app.use(ElementPlus, {
-  locale: zhCn
-})
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
+useElementPlus(app)
 app.mount('#app')

src/router/index.js

@@ -6,15 +6,40 @@ const routes = [
     path: '/',
     name: 'home',
     component: HomeView,
-    redirect: '/manager'
+    redirect: '/manager/manifest'
   },
   {
     path: '/manager',
     name: 'manager',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/manager/index.vue')
+    redirect: '/manager/manifest',
+    component: () => import(/* webpackChunkName: "manager" */ '../views/manager/index.vue'),
+    children: [
+      {
+        path: '/manager/add',
+        name: 'managerAdd',
+        component: () => import(/* webpackChunkName: "managerAdd" */ '../views/manager/add.vue')
+      },
+      {
+        path: '/manager/edit',
+        name: 'managerEdit',
+        component: () => import(/* webpackChunkName: "managerEdit" */ '../views/manager/add.vue')
+      },
+      {
+        path: '/manager/copy',
+        name: 'managerCopy',
+        component: () => import(/* webpackChunkName: "managerCopy" */ '../views/manager/add.vue')
+      },
+      {
+        path: '/manager/list',
+        name: 'managerList',
+        component: () => import(/* webpackChunkName: "managerList" */ '../views/manager/list.vue')
+      },
+      {
+        path: '/manager/manifest',
+        name: 'managerManifest',
+        component: () => import(/* webpackChunkName: "managerManifest" */ '../views/manager/manifest.vue')
+      }
+    ]
   }
 ]
 

src/views/manager/add.vue

@@ -36,11 +36,7 @@
       </el-col>
       <el-col :span="8">
         <el-form-item label="默认运行" prop="defaultRun">
-          <el-switch
-            v-model="form.defaultRun"
-            active-text="开启"
-            inactive-text="关闭"
-          />
+          <el-switch v-model="form.defaultRun" active-text="开启" inactive-text="关闭" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -51,21 +47,18 @@
       <el-input v-model="form.desc" type="textarea" :rows="5"></el-input>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" @click="onConfirm">{{ active === 'edit' ? '修改' : '添加' }}</el-button>
+      <el-button type="primary" @click="onConfirm">{{ route.name === 'managerEdit' ? '修改' : '添加' }}</el-button>
     </el-form-item>
   </el-form>
 </template>
 <script setup>
 import { v4 as uuid } from 'uuid'
-import { ref, defineEmits, defineProps, watch } from 'vue'
+import { ref, defineProps, watch } from 'vue'
 import { manifest } from './common'
-
-const emit = defineEmits(['back'])
-
+import { useRoute } from 'vue-router'
+import router from '@/router'
+const route = useRoute()
 const props = defineProps({
-  active: {
-    type: String
-  },
   row: {
     type: Object,
     default: () => ({})
@@ -101,16 +94,31 @@ const onConfirm = () => {
     commands: tableData.value
   })
   setTimeout(() => {
-    emit('back')
+    router.replace({
+      name: 'managerList'
+    })
   }, 500)
 }
 watch(() => props.active, () => {
   form.value = defaultRef().form
 })
+watch(() => route.name, () => {
+  if (/^manager/.test(route.name)) {
+    if (route.query.uuid) {
+      form.value = tableData.value.find((item) => item.uuid === route.query.uuid)
+    } else {
+      form.value = defaultRef().form
+    }
+  }
+}, {
+  immediate: true
+})
 </script>
 <style lang="scss" scoped>
 .el-form-item {
-  .el-select, :deep(.el-input,.el-select) {
+
+  .el-select,
+  :deep(.el-input, .el-select) {
     width: 100%;
   }
 }

src/views/manager/common.js

@@ -1,16 +1,34 @@
+import { reactive } from 'vue'
 import { useStorage } from '@vueuse/core'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 import api from '@/api'
 import { downloadFile } from '@/utils'
 
+const state = reactive({
+  import: false,
+  export: false
+})
+
 export const manifest = useStorage(
   'manifest',
   {},
   localStorage,
   { mergeDefaults: true }
 )
 
+export const handleImportBefore = (event) => {
+  if (!state.import) {
+    ElMessageBox.confirm('导入配置后, 将会覆盖当前配置, 是否确认?', {
+      title: '确认导入配置',
+      type: 'warning'
+    }).then(() => {
+      state.import = true
+      event.target.click()
+    }).catch(console.log)
+    event.stopPropagation()
+  }
+}
 export const handleImport = async (file) => {
   try {
     const data = await file.text()
@@ -22,6 +40,19 @@ export const handleImport = async (file) => {
   return false
 }
 
+export const handleExportBefore = (event) => {
+  if (!state.export) {
+    manifest.value.path && ElMessageBox.confirm(`是否要导出配置到 ${manifest.value.path}`, {
+      title: '确认导出配置',
+      type: 'warning'
+    }).then(() => {
+      state.export = true
+      handleExport()
+    }).catch(console.log)
+  } else {
+    handleExport()
+  }
+}
 export const handleExport = () => {
   api.export(manifest.value).then(() => {
     ElMessage.success('导出成功')

src/views/manager/index.vue

@@ -1,38 +1,37 @@
 <template>
   <el-container>
     <el-aside width="240px">
-      <el-row @click="active = 'manifest'">
-        配置
-      </el-row>
-      <el-row @click="active = 'list'">
-        命令列表
-      </el-row>
-      <el-row @click="active = 'add'">
-        新增命令
+      <el-row v-for="(item, index) in menus" :key="index" :class="{ 'active': item.name === route.name }"
+        @click="handleClick(item.name)">
+        {{ item.label }}
       </el-row>
     </el-aside>
     <el-main>
-      <Add :active="active" v-if="['add', 'edit', 'copy'].includes(active)" :row="activeRow" @back="active = 'list'" />
-      <List v-if="active === 'list'" @open="handleOpen" @edit="row => handleEdit('edit', row)"
-        @copy="row => handleEdit('copy', row)" />
-      <Manifest v-if="active === 'manifest'" />
+      <router-view></router-view>
     </el-main>
   </el-container>
 </template>
 <script setup>
-import api from '@/api'
 import { ref } from 'vue'
-import Add from './add'
-import List from './list'
-import Manifest from './manifest'
-const active = ref('manifest')
-const activeRow = ref({})
-const handleEdit = (type, row) => {
-  active.value = type
-  activeRow.value = row
-}
-const handleOpen = (row) => {
-  api.open(row)
+import { useRoute } from 'vue-router'
+import router from '@/router'
+const route = useRoute()
+const menus = ref([
+  {
+    name: 'managerManifest',
+    label: '配置'
+  },
+  {
+    name: 'managerList',
+    label: '命令列表'
+  },
+  {
+    name: 'managerAdd',
+    label: '新增命令'
+  }
+])
+const handleClick = (active) => {
+  router.push({ name: active })
 }
 </script>
 <style lang="scss" scoped>
@@ -47,11 +46,15 @@ const handleOpen = (row) => {
   .el-row {
     padding: 10px;
     cursor: pointer;
-    transition: all 1s;
+    transition: all .3s;
+    color: #555;
 
     &:hover {
       color: #111;
-      background: #eee;
+    }
+
+    &.active {
+      color: var(--el-color-primary);
     }
   }
 }

src/views/manager/list.vue

@@ -1,31 +1,39 @@
 <template>
-  <el-table :data="tableData">
-    <el-table-column type="index" label="序号" width="64" />
-    <el-table-column prop="name" label="脚本名称" />
+  <el-table :data="tableData" @dblclick="row => handleRow('managerEdit', row)">
+    <el-table-column type="index" label="序号" width="60" />
+    <el-table-column prop="name" label="名称" width="120" />
+    <el-table-column prop="port" label="端口" width="120" />
+    <el-table-column prop="nodeVersion" label="node版本" width="90" />
+    <el-table-column prop="terminal" label="终端" width="64" />
     <el-table-column prop="path" label="脚本路径" />
-    <el-table-column prop="port" label="端口" />
     <el-table-column prop="keywords" label="关键词" />
-    <el-table-column prop="nodeVersion" label="node版本" />
-    <el-table-column prop="terminal" label="终端" />
     <el-table-column prop="desc" label="备注" />
     <el-table-column prop="handle" label="操作" width="240">
       <template #default="{ row }">
-        <el-button type="info" size="small" @click="emit('open', row)">打开路径</el-button>
-        <el-button type="warning" size="small" @click="emit('edit', row)">修改</el-button>
-        <el-button type="primary" size="small" @click="emit('copy', row)">复制</el-button>
+        <el-button type="info" size="small" @click="handleOpen(row)">打开路径</el-button>
+        <el-button type="warning" size="small" @click="handleRow('managerEdit', row)">修改</el-button>
+        <el-button type="primary" size="small" @click="handleRow('managerCopy', row)">复制</el-button>
       </template>
     </el-table-column>
   </el-table>
-  <el-space>
-    <el-button type="info" @click="handleOutput">输出配置</el-button>
-    <el-button type="success" @click="handleDownload">导出配置</el-button>
-  </el-space>
 </template>
 
 <script setup>
-import { ref, defineEmits } from 'vue'
-import { handleOutput, handleDownload, manifest } from './common'
-const emit = defineEmits(['edit', 'copy', 'open'])
+import { ref } from 'vue'
+import api from '@/api'
+import { manifest } from './common'
+import router from '@/router'
+const handleRow = (type, row) => {
+  router.push({
+    name: type,
+    query: {
+      uuid: row.uuid
+    }
+  })
+}
+const handleOpen = (row) => {
+  api.open(row)
+}
 const tableData = ref(manifest.value.commands)
 </script>
 <style scoped>