add tour

2024-05-31 17:31:25 +08:00 · 2024-05-31 17:31:25 +08:00 · 09d60c6be0
parent 3972da0904
commit 09d60c6be0
5 changed files with 155 additions and 61 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -605,9 +605,9 @@
      }
    },
    "node_modules/@babel/parser": {
-      "version": "7.16.2",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.2.tgz",
-      "integrity": "sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==",
+      "version": "7.24.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.6.tgz",
+      "integrity": "sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q==",
      "bin": {
        "parser": "bin/babel-parser.js"
      },
@ -24748,9 +24748,9 @@
      }
    },
    "@babel/parser": {
-      "version": "7.16.2",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.2.tgz",
-      "integrity": "sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw=="
+      "version": "7.24.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.6.tgz",
+      "integrity": "sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q=="
    },
    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
      "version": "7.16.2",
--- a/src/views/adapterManagement/components/CreateAdapter.vue
+++ b/src/views/adapterManagement/components/CreateAdapter.vue
@ -1,60 +1,66 @@
 <template>
-  <el-dialog
-    v-if="createFormVisible"
-    width="40%"
-    :close-on-click-modal="false"
-    :title="isEdit ? $t('page.updateAdapter') : $t('page.addAdapter')"
-    :visible.sync="createFormVisible"
-  >
-    <el-form
-      ref="editInfoForm"
-      :rules="rules"
-      :model="editInfoForm"
-      label-width="auto"
-      label-position="left"
+  <div id="createContainer">
+    <el-dialog
+      v-if="createFormVisible"
+      id="createAdapter"
+      width="40%"
+      :close-on-click-modal="false"
+      :title="isEdit ? $t('page.updateAdapter') : $t('page.addAdapter')"
+      :visible.sync="createFormVisible"
    >
-      <el-form-item
-        prop="name"
-        :label="$t('page.participantName')"
+      <el-form
+        ref="editInfoForm"
+        :rules="rules"
+        :model="editInfoForm"
+        label-width="auto"
+        label-position="left"
      >
-        <el-input v-model="editInfoForm.name" :maxlength="63" />
-      </el-form-item>
-      <el-form-item
-        prop="type"
-        :label="$t('page.calculationType')"
-      >
-        <el-radio v-model="editInfoForm.type" label="0">{{ $t('page.cloud') }}</el-radio>
-        <el-radio v-model="editInfoForm.type" label="1">{{ $t('page.ai') }}</el-radio>
-        <el-radio v-model="editInfoForm.type" label="2">{{ $t('page.hpc') }}</el-radio>
-      </el-form-item>
-      <el-form-item
-        prop="nickname"
-        :label="$t('page.stackName')"
-      >
-        <el-input v-model="editInfoForm.nickname" />
-      </el-form-item>
-      <el-form-item
-        prop="version"
-        :label="$t('page.stackVersion')"
-      >
-        <el-input v-model="editInfoForm.version" />
-      </el-form-item>
-      <el-form-item
-        prop="server"
-        :label="$t('page.address')"
-      >
-        <el-input v-model="editInfoForm.server" />
-      </el-form-item>
-    </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button @click="createFormVisible = false">{{ $t("message.cancel") }}</el-button>
-      <el-button type="primary" @click="submitInfoEdit">{{ $t("message.confirm") }}</el-button>
-    </div>
-  </el-dialog>
+        <el-form-item
+          prop="name"
+          :label="$t('page.participantName')"
+        >
+          <el-input v-model="editInfoForm.name" :maxlength="63" />
+        </el-form-item>
+        <el-form-item
+          prop="type"
+          :label="$t('page.calculationType')"
+        >
+          <el-radio v-model="editInfoForm.type" label="0">{{ $t('page.cloud') }}</el-radio>
+          <el-radio v-model="editInfoForm.type" label="1">{{ $t('page.ai') }}</el-radio>
+          <el-radio v-model="editInfoForm.type" label="2">{{ $t('page.hpc') }}</el-radio>
+        </el-form-item>
+        <el-form-item
+          prop="nickname"
+          :label="$t('page.stackName')"
+        >
+          <el-input v-model="editInfoForm.nickname" />
+        </el-form-item>
+        <el-form-item
+          prop="version"
+          :label="$t('page.stackVersion')"
+        >
+          <el-input v-model="editInfoForm.version" />
+        </el-form-item>
+        <el-form-item
+          prop="server"
+          :label="$t('page.address')"
+        >
+          <el-input v-model="editInfoForm.server" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="createFormVisible = false">{{ $t("message.cancel") }}</el-button>
+        <el-button type="primary" @click="submitInfoEdit">{{ $t("message.confirm") }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>

 <script>
 import { createAdapter, updateAdapter } from '@/api/pcm/adapter'
+import Driver from 'driver.js' // import driver.js
+import 'driver.js/dist/driver.min.css'
+
 export default {
  props: {
    value: {
@ -74,6 +80,7 @@ export default {
  },
  data() {
    return {
+      driver: null,
      editInfoForm: {
        name: '',
        type: '0',
@ -118,10 +125,27 @@ export default {
    },
    createFormVisible(val) {
      if (val) {
+        this.$nextTick(() => {
+          console.log(document.getElementById('createAdapter').getElementsByClassName('el-dialog')[0])
+
+          this.driver.highlight({
+            element: document.getElementById('createAdapter').getElementsByClassName('el-dialog')[0],
+            popover: {
+              title: 'Name',
+              description: 'Enter your name here'
+            }
+          })
+        })
        if (!this.isEdit) { this.editInfoForm = { type: '0' } }
      }
    }
  },
+  mounted() {
+    this.driver = new Driver({
+      allowClose: false,
+      padding: 20
+    })
+  },
  methods: {
    submitInfoEdit() {
      this.$refs.editInfoForm.validate((valid) => {
@ -145,3 +169,44 @@ export default {
  }
 }
 </script>
+<style lang="scss">
+#createContainer{
+  margin-bottom: 10px;
+}
+// .dialog{
+//   position: relative;
+//   #createAdapter{
+//     position: absolute;
+//     z-index: 2000;
+//   }
+// }
+// div#driver-highlighted-element-stage{
+//   z-index: 100000!important;
+//   // background-color: transparent!important;
+// }
+.el-dialog{
+  z-index: 100004;
+  // height: 55vh;
+  margin-bottom: 30vh;
+}
+#createAdapter{
+  z-index: 100004!important;
+}
+// #createAdapter.el-dialog__wrapper{
+//   // .el-dialog__wrapper{
+//   // top: -20px!important;
+//   // height: 50vh;
+
+//   // }
+// }
+// .driver-highlighted-element{
+//   z-index: 100010!important
+// }
+// .driver-fix-stacking{
+//   z-index: 100001!important;
+// }
+// div#driver-page-overlay{
+//   z-index: 100000!important;
+
+// }
+</style>
--- a/src/views/adapterManagement/components/steps.js
+++ b/src/views/adapterManagement/components/steps.js
@ -0,0 +1,12 @@
+const steps = [
+  {
+    element: '#addAdapter',
+    popover: {
+      title: 'Adapter',
+      description: 'add adater first',
+      position: 'left'
+    },
+    padding: 20
+  }
+]
+export default steps
--- a/src/views/adapterManagement/list.vue
+++ b/src/views/adapterManagement/list.vue
@ -25,7 +25,7 @@
          >
            <template v-slot:filterBtns>
              <!-- <span>{{ $t('page.total') }}：<span>{{ num }}</span></span> -->
-              <el-button size="medium" type="primary" @click="addFun('adapter')">{{ $t('page.addAdapter') }}</el-button>
+              <el-button id="addAdapter" size="medium" type="primary" @click="addFun('adapter')">{{ $t('page.addAdapter') }}</el-button>
            </template>
          </List>
        </el-tab-pane>
@ -61,10 +61,16 @@ import List from '@/components/list'
 import CreateAdapter from './components/CreateAdapter'
 import CreateCluster from './components/CreateCluster'
 import { getAdapterList, getAdapterRelation, deleteAdapter, deleteCluster } from '@/api/pcm/adapter'
+
+import Driver from 'driver.js' // import driver.js
+import 'driver.js/dist/driver.min.css' // import driver.js css
+import steps from './components/steps'
+
 export default {
  components: { List, CreateAdapter, CreateCluster },
  data() {
    return {
+      driver: null,
      getAdapterList,
      getAdapterRelation,
      createAdapterVisible: false,
@ -73,7 +79,7 @@ export default {
      adapterRelation: [],
      isEdit: false,
      // num: 0,
-      typeList: [this.$t('page.cloud'), this.$t('page.ai'), this.$t('page.hpc')],
+      typeList: [this.$t('page.cloud'), this.$t('page.ai'), this.$t('page.hpc'), this.$t('page.cloud')],
      activeName: '0',
      updateData: {}
    }
@ -133,9 +139,19 @@ export default {
    }
  },
  mounted() {
+    this.driver = new Driver()
+    // if (true) { // set
+    this.$nextTick(() => {
+      this.guide()
+    })
+    // }
    // this.tabSwitch()
  },
  methods: {
+    guide() {
+      this.driver.defineSteps(steps)
+      this.driver.start()
+    },
    // tabSwitch() {
    //   if (this.activeName === '0') {
    //     getAdapterList().then(e => (this.num = e.data?.list?.length || 0))
@ -144,6 +160,7 @@ export default {
    //   }
    // },
    addFun(type) {
+      this.driver.moveNext()
      this.isEdit = false
      if (type === 'adapter') {
        this.createAdapterVisible = true
--- a/yarn.lock
+++ b/yarn.lock
@ -267,9 +267,9 @@
    "js-tokens" "^4.0.0"

 "@babel/parser@^7.1.0", "@babel/parser@^7.16.0", "@babel/parser@^7.4.3", "@babel/parser@^7.7.0":
-  "integrity" "sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw=="
-  "resolved" "https://registry.npmjs.org/@babel/parser/-/parser-7.16.2.tgz"
-  "version" "7.16.2"
+  "integrity" "sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q=="
+  "resolved" "https://registry.npmjs.org/@babel/parser/-/parser-7.24.6.tgz"
+  "version" "7.24.6"

 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.0":
  "integrity" "sha512-h37CvpLSf8gb2lIJ2CgC3t+EjFbi0t8qS7LCS1xcJIlEXE4czlofwaW7W1HA8zpgOCzI9C1nmoqNR1zWkk0pQg=="