temp

2022-03-28 17:01:45 +08:00 · 2022-03-28 17:01:45 +08:00 · ee22c4b77a
commit ee22c4b77a
parent 62d3c43436
6 changed files with 62 additions and 54 deletions
--- a/bookmark_front/src/components/main/Search.vue
+++ b/bookmark_front/src/components/main/Search.vue
@ -19,22 +19,20 @@
    <div v-if="focused && list.length > 0" class="searchContent">
      <div
        class="listItem"
-        :class="{ itemActive: index == hoverIndex || index == selectIndex }"
+        :class="{ itemActive: index == selectIndex }"
        v-for="(item, index) in list"
        :key="item.bookmarkId"
        @mousedown="itemClick(index)"
-        @mouseenter="mouseEnterOut(index, 'enter')"
-        @mouseleave="mouseEnterOut(index, 'leave')"
        :id="'bookmark:' + item.bookmarkId"
      >
-        <div class="name" style="" target="_blank">
+        <div class="name" target="_blank" :title="item.url.substr(0, 50)">
          {{ item.name }}
        </div>
-        <div class="icons" v-if="hoverIndex === index">
+        <div class="icons">
          <a-tooltip title="定位到书签树中" v-if="showLocation">
            <my-icon style="color: white; font-size: 1.3em" type="icon-et-location" @mousedown="location($event, item)" />
          </a-tooltip>
-          <a-tooltip :title="'复制链接:' + item.url">
+          <a-tooltip title="复制链接">
            <a-icon
              type="copy"
              style="color: white; font-size: 1.3em; padding-left: 0.5em"
@ -65,8 +63,6 @@ export default {
      value: "",
      focused: false,
      list: [],
-      //鼠标悬浮选中
-      hoverIndex: null,
      //上下选中
      selectIndex: null,
      copyBoard: null, //剪贴板对象
@ -129,7 +125,7 @@ export default {
    submit(forceSearch) {
      let url;
      if (forceSearch || this.selectIndex == null) {
-        //说明使用百度搜索
+        //说明使用网页搜索
        url = this.searchUrl + encodeURIComponent(this.value);
      } else {
        //说明跳转到书签
@ -142,21 +138,11 @@ export default {
      a.click();
    },
    inputBlur() {
-      console.log("blur");
      this.focused = false;
    },
    inputFocus() {
-      console.log("focus");
      this.focused = true;
    },
-    mouseEnterOut(item, type) {
-      console.log(item, type);
-      if (type === "enter") {
-        this.hoverIndex = item;
-      } else {
-        this.hoverIndex = null;
-      }
-    },
    //定位到书签树中
    location(event, item) {
      this.$emit("location", item);
@ -299,13 +285,19 @@ export default {
        white-space: nowrap;
      }
      .icons {
-        display: flex;
+        display: none;
        align-items: center;
      }
    }
+    .listItem:hover {
+      background-color: @listActiveBgColor;
+    }
    .itemActive {
      background-color: @listActiveBgColor;
    }
+    .listItem:hover .icons {
+      display: flex;
+    }
  }
 }
 </style>
--- a/bookmark_front/src/components/main/things/AddBookmark.vue
+++ b/bookmark_front/src/components/main/things/AddBookmark.vue
@ -1,14 +1,14 @@
 <template>
  <div>
    <a-form-model ref="addForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-      <a-form-model-item v-if="isAdd" prop="type" label="类别">
+      <a-form-model-item v-if="isAdd && !addType" prop="type" label="类别">
        <a-radio-group v-model="form.type" :options="options" />
      </a-form-model-item>
      <template v-if="form.type !== 'file'">
        <a-form-model-item prop="name" label="名称" :required="false">
          <a-input v-model="form.name" placeholder="名称" />
        </a-form-model-item>
-        <a-form-model-item v-if="form.type === '0'" prop="url" label="URL">
+        <a-form-model-item v-if="form.type === 'bookmark'" prop="url" label="URL">
          <a-input v-model="form.url" placeholder="url" />
        </a-form-model-item>
        <div class="btns">
@ -16,7 +16,13 @@
        </div>
      </template>
      <div v-else prop="file">
-        <a-upload-dragger name="file" :data="{ path: form.path }" :headers="{ 'jwt-token': token }" action="/bookmark/api/bookmark/uploadBookmarkFile" @change="fileChange">
+        <a-upload-dragger
+          name="file"
+          :data="{ path: form.path }"
+          :headers="{ 'jwt-token': token }"
+          action="/bookmark/api/bookmark/uploadBookmarkFile"
+          @change="fileChange"
+        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
          </p>
@ -30,14 +36,15 @@
 <script>
 import HttpUtil from "@/util/HttpUtil";
 const options = [
-  { label: "书签", value: "0" },
-  { label: "文件夹", value: "1" },
+  { label: "书签", value: "bookmark" },
+  { label: "文件夹", value: "folder" },
  { label: "导入", value: "file" },
 ];
 export default {
  name: "addBookmark",
  props: {
-    isAdd: Boolean,
+    isAdd: Boolean, //是否新增
+    addType: String, //新增的类别
    targetNode: Object,
  },
  data() {
@ -48,7 +55,7 @@ export default {
      token: "",
      loading: false,
      form: {
-        type: "0", //0:书签,1:文件夹,file:文件
+        type: "bookmark",
        name: "",
        url: "",
        path: "",
@ -63,9 +70,9 @@ export default {
  created() {
    console.log(this.isAdd, this.targetNode);
    if (!this.isAdd) {
-      this.form.type = this.targetNode.type.toString();
+      this.form.type = this.targetNode.type == 0 ? "bookmark" : "folder";
      this.form.name = this.targetNode.name;
-      this.form.url = this.form.type === "0" ? this.targetNode.url : "";
+      this.form.url = this.form.type === "bookmark" ? this.targetNode.url : "";
    }
    this.token = this.$store.state.globalConfig.token;
    this.form.path = this.targetNode == null ? "" : this.targetNode.path + (this.isAdd ? "." + this.targetNode.bookmarkId : "");
@ -74,25 +81,27 @@ export default {
    /**
     * 文件提交不走这儿
     */
-    submit() {
+    async submit() {
      //名称校验
      this.loading = true;
-      this.$refs["addForm"].validateField(this.form.type === 0 ? ["name", "url"] : "name", async (message) => {
-        if (message.length > 0) {
+      this.$refs["addForm"].validate(async (pass) => {
+        if (!pass) {
          this.loading = false;
          return;
        }
        let res = null;
+        let body = JSON.parse(JSON.stringify(this.form));
+        body.type = body.type === "bookmark" ? 0 : 1;
        if (this.isAdd) {
-          res = await HttpUtil.put("/bookmark", null, this.form);
+          res = await HttpUtil.put("/bookmark", null, body);
          await this.$store.dispatch("treeData/addNode", { sourceNode: this.targetNode, targetNode: res });
        } else {
-          this.form.bookmarkId = this.targetNode.bookmarkId;
-          let newIcon = await HttpUtil.post("/bookmark/updateOne", null, this.form);
+          body.bookmarkId = this.targetNode.bookmarkId;
+          let newIcon = await HttpUtil.post("/bookmark/updateOne", null, body);
          await this.$store.dispatch("treeData/editNode", { node: this.targetNode, newName: this.form.name, newUrl: this.form.url, newIcon });
        }
        this.$message.success("操作成功");
-        this.$emit("close", false);
+        this.$emit("close", this.form.type);
        this.loading = false;
      });
    },
@ -106,7 +115,7 @@ export default {
          });
        } else {
          this.$message.success("解析成功");
-          this.$emit("close", true);
+          this.$emit("close", this.form.type);
        }
      }
    },
--- a/bookmark_front/src/main.js
+++ b/bookmark_front/src/main.js
@ -18,7 +18,8 @@ import {
 	Upload,
 	Popconfirm,
 	AutoComplete,
-	Select
+	Select,
+	Popover
 } from "ant-design-vue";
 import App from "./App.vue";
 import router from "./router";
@ -44,6 +45,7 @@ Vue.use(Upload);
 Vue.use(Popconfirm);
 Vue.use(AutoComplete);
 Vue.use(Select);
+Vue.use(Popover);
 Vue.component("my-icon", IconFont);

 Vue.prototype.$message = message;
--- a/bookmark_front/src/store/modules/treeData.js
+++ b/bookmark_front/src/store/modules/treeData.js
@ -20,6 +20,10 @@ export const noLoginInit = "noLoginInit";
 export const loginInit = "loginInit";
 export const refresh = "refresh";
 export const clear = "clear";
+/**
+ * 删除书签数据
+ */
+export const deleteData = "deleteData";

 /**
 * 版本检查定时调度
@ -240,7 +244,7 @@ const actions = {
 	/**
 	 * 删除节点数据
 	 */
-	async deleteData (context, { pathList, bookmarkIdList }) {
+	async [deleteData] (context, { pathList, bookmarkIdList }) {
 		//待删除的书签
 		let bookmarkIdSet = new Set();
 		bookmarkIdList.forEach(item => bookmarkIdSet.add(item));
--- a/bookmark_front/src/views/home/PinBookmarkItem.vue
+++ b/bookmark_front/src/views/home/PinBookmarkItem.vue
@ -2,13 +2,11 @@
  <div>
    <a href="pinObj.url" v-if="pinObj" class="pinBookmarkItem">
      <img :src="pinObj.icon.length > 0 ? pinObj.icon : '/favicon.ico'" class="icon" />
-      <span class="text">{{ pinObj.name }}</span>
+      <span class="text" :title="pinObj.name">{{ pinObj.name }}</span>
      <span class="action actionShow">...</span>
    </a>
-    <div v-else class="pinBookmarkItem" @click="add">
-      <a-tooltip title="新增">
+    <div v-else class="pinBookmarkItem" @click="showAddBlock = !showAddBlock" title="新增书签并固定到首页">
      <a-icon style="font-size: 1.5em" type="plus" />
-      </a-tooltip>
    </div>
  </div>
 </template>
@ -20,7 +18,12 @@ export default {
    pinObj: Object,
  },
  data() {
-    return {};
+    return {
+      showAddBlock: false,
+    };
+  },
+  methods: {
+    add() {},
  },
 };
 </script>
--- a/bookmark_front/src/views/manage/bookmarkTree/index.vue
+++ b/bookmark_front/src/views/manage/bookmarkTree/index.vue
@ -99,7 +99,7 @@ import { mapState } from "vuex";
 import { downloadFile } from "@/util/FileUtil";
 import ClipboardJS from "clipboard";
 import moment from "moment";
-import { TREE_DATA, SHOW_REFRESH_TOAST, refreshHomePinList, HOME_PIN_LIST } from "@/store/modules/treeData";
+import { TREE_DATA, SHOW_REFRESH_TOAST, refreshHomePinList, deleteData, HOME_PIN_LIST } from "@/store/modules/treeData";
 import { dealList, exportFileHead } from "@/views/manage/bookmarkTree/helper";
 import { GLOBAL_CONFIG } from "@/store/modules/globalConfig";
 export default {
@ -167,6 +167,7 @@ export default {
     * 加载数据，兼容treeNode为id
     */
    loadData(treeNode) {
+      console.log("加载数据", treeNode);
      return new Promise((resolve) => {
        const data = typeof treeNode === "number" ? this.$store.getters["treeData/getById"](treeNode) : treeNode.dataRef;
        let newPath = data.path + "." + data.bookmarkId;
@ -193,6 +194,7 @@ export default {
     * 重置当前data中书签相关数据
     */
    resetData() {
+      console.log("重置数据");
      this.treeData = this.totalTreeData[""];
      this.expandedKeys = [];
      this.checkedKeys = [];
@ -284,13 +286,9 @@ export default {
        this.$message.warn("请选择后再进行操作");
        return;
      }
-
      this.loading = true;
-      await HttpUtil.post("/bookmark/batchDelete", null, {
-        pathList,
-        bookmarkIdList,
-      });
-      this.$store.dispatch("treeData/deleteData", { pathList, bookmarkIdList });
+      await HttpUtil.post("/bookmark/batchDelete", null, { pathList, bookmarkIdList });
+      this.$store.dispatch(TREE_DATA + "/" + deleteData, { pathList, bookmarkIdList });
      //删除已经被删除的数据
      pathList.forEach((item) => {
        const id = parseInt(item.split(".").reverse()[0]);
@ -337,8 +335,8 @@ export default {
     * 关闭弹窗
     * @param isUpload 说明为上传书签文件，需要刷新缓存数据
     */
-    async close(isUpload) {
-      if (isUpload) {
+    async close(type) {
+      if (type === "file") {
        this.refresh(true);
      } else {
        this.treeData.__ob__.dep.notify();