pref: #291 (halo-dev/console#300)

package.json

@@ -26,46 +26,46 @@
     "enquire.js": "^2.1.6",
     "filepond": "^4.25.1",
     "filepond-plugin-file-validate-type": "^1.2.5",
-    "filepond-plugin-image-preview": "^4.6.4",
+    "filepond-plugin-image-preview": "^4.6.5",
     "flv.js": "^1.5.0",
     "halo-editor": "^2.8.2",
-    "marked": "^1.2.7",
+    "marked": "^1.2.9",
     "nprogress": "^0.2.0",
     "tiny-pinyin": "^1.3.2",
     "verte": "^0.0.12",
     "vue": "^2.6.12",
     "vue-clipboard2": "^0.3.1",
     "vue-codemirror-lite": "^1.0.4",
-    "vue-contextmenujs": "^1.3.12",
+    "vue-contextmenujs": "^1.3.13",
     "vue-count-to": "^1.0.13",
     "vue-dplayer": "0.0.10",
     "vue-filepond": "^6.0.3",
-    "vue-ls": "^3.2.1",
+    "vue-ls": "^3.2.2",
     "vue-router": "^3.4.9",
     "vuedraggable": "^2.24.3",
-    "vuejs-logger": "^1.5.4",
+    "vuejs-logger": "^1.5.5",
     "vuex": "^3.6.0"
   },
   "devDependencies": {
-    "@babel/polyfill": "^7.11.5",
+    "@babel/polyfill": "^7.12.1",
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-plugin-eslint": "^4.5.4",
     "@vue/cli-plugin-unit-jest": "^4.5.4",
     "@vue/cli-service": "^4.5.4",
     "@vue/eslint-config-standard": "^4.0.0",
-    "@vue/test-utils": "^1.1.0",
+    "@vue/test-utils": "^1.1.3",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.3.0",
-    "babel-plugin-import": "^1.13.0",
+    "babel-jest": "^26.6.3",
+    "babel-plugin-import": "^1.13.3",
     "eslint": "^6.8.0",
-    "eslint-plugin-html": "^6.1.0",
+    "eslint-plugin-html": "^6.1.1",
     "eslint-plugin-vue": "^6.2.2",
     "generate-asset-webpack-plugin": "^0.3.0",
-    "husky": "^4.3.0",
-    "less": "^3.12.2",
+    "husky": "^4.3.8",
+    "less": "^3.13.1",
     "less-loader": "^5.0.0",
-    "lint-staged": "^10.3.0",
+    "lint-staged": "^10.5.4",
     "tailwindcss": "^1.8.8",
     "vue-svg-component-runtime": "^1.0.1",
     "vue-svg-icon-loader": "^2.1.1",

src/views/interface/MenuList.vue

@@ -93,12 +93,7 @@
         :xs="24"
         class="pb-3"
       >
-        <a-card
-          :bodyStyle="{ padding: '16px' }"
-          ref="mheader"
-          :class="{ 'card-header-fixed': headerIsFixed }"
-          :headStyle="headStyle"
-        >
+        <a-card :bodyStyle="{ padding: '16px' }">
           <template slot="title">
             <span>
               {{ menuListTitle }}
@@ -106,7 +101,7 @@
             <a-tooltip
               slot="action"
               title="分组下的菜单为空时，该分组也不会保存"
-              v-if="list.data.length <= 0"
+              v-if="list.data.length <= 0 && !list.loading"
             >
               <a-icon
                 type="info-circle-o"
@@ -127,13 +122,20 @@
                 :disabled="list.data.length<=0"
               ></ReactiveButton>
               <a-button
+                v-if="!form.visible"
                 @click="handleOpenCreateMenuForm()"
-                :disabled="form.visible"
                 type="primary"
                 ghost
               >
                 新增
               </a-button>
+              <a-button
+                v-else
+                @click="handleCloseCreateMenuForm()"
+                type="default"
+              >
+                取消新增
+              </a-button>
               <a-dropdown :trigger="['click']">
                 <a-menu slot="overlay">
                   <a-menu-item @click="menuInternalLinkSelector.visible = true">
@@ -225,17 +227,10 @@ export default {
       menuInternalLinkSelector: {
         visible: false,
       },
-      headerIsFixed: false,
-      headStyle: {},
     }
   },
   computed: {
     ...mapGetters(['options']),
-    computedTeams() {
-      return this.teams.data.filter((item) => {
-        return item !== ''
-      })
-    },
     computedMenusMoved() {
       const menus = deepClone(this.list.data)
       return this.handleMenuMoved(0, menus)
@@ -267,9 +262,6 @@ export default {
     defaultMenuTeam() {
       return this.options.default_menu_team ? this.options.default_menu_team : ''
     },
-    mHeaderFromTopAbs() {
-      return Math.floor(Math.abs(this.mHeaderFromTop))
-    },
   },
   created() {
     this.handleListTeams()
@@ -294,6 +286,7 @@ export default {
         })
     },
     handleListMenus() {
+      this.list.data = []
       this.list.loading = true
       menuApi
         .listTreeByTeam(this.teams.selected)
@@ -412,7 +405,7 @@ export default {
       } else {
         this.refreshOptionsCache()
       }
-    }
+    },
   },
 }
 </script>

src/views/interface/components/MenuTreeNode.vue

@@ -18,6 +18,18 @@
         >
           <a-list-item class="cursor-pointer menu-item">
             <a-list-item-meta>
+              <span
+                slot="title"
+                class="title cursor-move inline-block font-bold"
+              >{{ item.name }}
+                <a-tooltip
+                  title="外部链接"
+                  v-if="item.target==='_blank'"
+                >
+                  <a-icon type="link" />
+                </a-tooltip>
+                {{ item.formVisible?'（正在编辑）':'' }}
+              </span>
               <span
                 slot="description"
                 class="inline-block"
@@ -28,26 +40,22 @@
                   class="ant-anchor-link-title"
                 > {{ item.url }} </a>
               </span>
-              <span
-                slot="title"
-                class="title cursor-move inline-block font-bold"
-              >{{ item.name }}
-                <a-tooltip title="外部链接">
-                  <a-icon
-                    v-if="item.target==='_blank'"
-                    type="link"
-                  />
-                </a-tooltip>
-                {{ item.formVisible?'（正在编辑）':'' }}
-              </span>
             </a-list-item-meta>
             <template slot="actions">
               <a
+                v-if="!item.formVisible"
                 href="javascript:void(0);"
                 @click="handleOpenEditForm(item)"
               >
                 编辑
               </a>
+              <a
+                v-else
+                href="javascript:void(0);"
+                @click="handleCloseCreateMenuForm(item)"
+              >
+                取消编辑
+              </a>
             </template>
             <template slot="actions">
               <a
@@ -146,9 +154,11 @@ export default {
   computed: {
     dragOptions() {
       return {
-        animation: 200,
+        animation: 300,
         group: 'description',
         ghostClass: 'ghost',
+        chosenClass: 'chosen',
+        dragClass: 'drag',
         emptyInsertThreshold: 20,
       }
     },
@@ -210,7 +220,16 @@ export default {
 <style scoped>
 .ghost {
   opacity: 0.8;
-  background: #c8ebfb;
+  @apply bg-gray-200;
+}
+.chosen {
+  opacity: 0.8;
+  @apply bg-gray-200;
+  padding: 0 5px;
+}
+.drag {
+  @apply bg-white;
+  padding: 0 5px;
 }
 ::v-deep .ant-list-item-action {
   display: none;