Merge branch 'liuqiang' into v3

src/components/TopTabs/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="useBox">
+    <!-- table切换 -->
+    <div
+      style="
+        width: 100%;
+        height: 24px;
+        background-color: #7084b4;
+        line-height: 20px;
+      "
+    >
+      <template :key="item" v-for="(item, index) in menuList">
+        <span
+          @click="tableChange(item, index)"
+          :class="['tables', { tableLis: selectedIndex === index }]"
+        >
+          {{ item.name }}
+          <img
+            v-if="selectedIndex === index ? true : false"
+            style="position: absolute; top: 4px; right: 4px"
+            src="../../assets/images/close.png"
+            @click="shotdown(item)"
+          />
+        </span>
+      </template>
+    </div>
+    <!-- 面包屑功能栏 -->
+    <div class="breadBox">
+      <!-- 左侧 -->
+      <div
+        style="
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+        "
+      >
+        <!-- 前进后退 -->
+        <div
+          style="
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+          "
+        >
+          <img
+            style="display: block; width: 11px; height: 11px"
+            :src="blueLeft"
+            alt=""
+          />
+          <img
+            style="display: block; width: 16px; height: 16px"
+            :src="grayRight"
+            alt=""
+          />
+        </div>
+        <!-- 面包屑 -->
+        <div>
+          <el-breadcrumb separator="/">
+            <el-breadcrumb-item style="font-size: 12px"
+              >homepage</el-breadcrumb-item
+            >
+            <el-breadcrumb-item style="font-size: 12px"
+              >promotion management</el-breadcrumb-item
+            >
+            <el-breadcrumb-item style="font-size: 12px"
+              >promotion detail</el-breadcrumb-item
+            >
+          </el-breadcrumb>
+        </div>
+      </div>
+      <!-- 右侧 -->
+      <div>
+        <img :src="sort" alt="" />
+        <img :src="squre" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import blueLeft from "../../assets/images/blueLeft.png";
+import grayRight from "../../assets/images/grayRight.png";
+let selectedIndex = ref(0);
+let menuList = ref([
+  {
+    name: "标签1",
+    choose: "1",
+  },
+  {
+    name: "标签2",
+    choose: "2",
+  },
+]);
+// tableMenu切换
+function tableChange(row, num) {
+  this.selectedIndex = num;
+}
+// x图标事件
+function shotdown(row) {
+  this.menuList = this.menuList.filter((item) => item.name !== row.name);
+}
+</script>
+
+<style lang="scss" scoped>
+.useBox {
+  width: 100%;
+}
+.tables {
+  display: inline-block;
+  width: 112px;
+  height: 22px;
+  border-radius: 4px;
+  line-height: 21px;
+  text-align: center;
+  font-size: 12px;
+  margin-left: 5px;
+  position: relative;
+}
+
+.tableLis {
+  display: inline-block;
+  width: 112px;
+  height: 22px;
+  border-radius: 4px;
+  background-color: #ebeff6;
+  line-height: 21px;
+  text-align: center;
+  font-size: 12px;
+  margin-left: 5px;
+  position: relative;
+}
+
+.manyUse {
+  width: 100%;
+  height: 48px;
+  /* background-color: gray; */
+  line-height: 48px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.el-dropdown-link {
+  color: white;
+}
+
+.breadBox {
+  width: 100%;
+  height: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #d9e0f0;
+}
+
+::v-deep .el-collapse-item__header {
+  height: 24px !important;
+  background-color: #ebeff6 !important;
+}
+</style>

src/views/biz/recent/index.vue

@@ -1,4 +1,5 @@
 <template>
+<TopTabs></TopTabs>
   <div>
     <el-collapse v-model="activeNames" @change="handleChange">
       <div v-if="isList">
@@ -105,9 +106,11 @@
 
 <script setup>
 import { onMounted, ref } from "vue";
+import TopTabs from "@/components/TopTabs/index.vue"
 import { listRecent } from "@/api/biz/recent";
 const activeNames = ref(["folder", "file"]);
 const isList = ref(false); //控制显示方式
+
 onMounted(() => {
   getList();
 });

src/views/collect/index.vue

@@ -2,6 +2,7 @@
   <div class="container">
     <!-- 标签 -->
     <div class="tags">
+      <!-- TODO 标签可以拖动位置 -->
       <el-tabs
         v-model="clickCollect"
         class="demo-tabs"
@@ -14,6 +15,7 @@
           :key="item.labelId"
           :label="item.labelName"
           :name="item.labelId"
+          @contextmenu.prevent="checkRight($event, item)"
         ></el-tab-pane>
       </el-tabs>
       <!-- 添加标签 -->
@@ -136,10 +138,25 @@
       </div>
     </el-collapse>
   </div>
+  <!-- 右键唤出的菜单 -->
+  <div
+    class="right_menu"
+    v-show="visible"
+    :style="{ left: left + 'px', top: top + 'px' }"
+  >
+    <div class="menu_item">
+      <img src="@/assets/images/textbox.png" alt="" />
+      <span>重命名</span>
+    </div>
+    <div class="menu_item">
+      <img src="@/assets/images/trash.png" alt="" />
+      <span>删除</span>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { listLabel, addLabel, delLabel } from "@/api/biz/label.js";
 import { listFavorite } from "@/api/biz/favorite.js";
 const activeNames = ref(["folder", "file"]);
@@ -205,10 +222,25 @@ const tableData = [
     zip: "CA 90036",
   },
 ];
+const visible = ref(false); //显示右键菜单
+const top = ref(0);
+const left = ref(0);
 onMounted(async () => {
   await getList();
   await getCollectList();
 });
+// tab右键事件
+const checkRight = (e, item) => {
+  console.log('11');
+  // TODO 唤出右键菜单，思路：获取鼠标位置来定位菜单
+  this.visible = true;
+  top.value = e.pageY;
+  left.value = e.pageX;
+};
+// 关闭右键菜单
+const closeMenu = () => {
+  visible.value = false;
+};
 //添加标签
 const toAddCollectFn = async () => {
   isAddCollect.value = true;
@@ -244,9 +276,9 @@ const getList = async () => {
 };
 // 删除标签
 const delTabs = async () => {
-  const res = await delLabel("7")//直接传id
-  console.log('delres = ',res);
-   getList();
+  const res = await delLabel("7"); //直接传id
+  console.log("delres = ", res);
+  getList();
 };
 //获取收藏数据
 const getCollectList = async () => {
@@ -256,6 +288,18 @@ const getCollectList = async () => {
     tableData.value = res.rows;
   }
 };
+
+watch(
+  () => visible.value,
+  (nv, ov) => {
+    if (nv) {
+      console.log('r',nv);
+      document.body.addEventListener("click", closeMenu());
+    } else {
+      document.body.removeEventListener("click",closeMenu());
+    }
+  }
+);
 </script>
 
 <style lang="scss" scoped>
@@ -283,6 +327,26 @@ const getCollectList = async () => {
     vertical-align: middle;
   }
 }
+.right_menu {
+  width: 100px;
+  padding: 8px;
+  box-shadow: 0px 2px 10px 1px rgba(199, 203, 216, 0.4);
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #c1cce3;
+  .menu_item {
+    width: 100%;
+    height: 40px;
+    border-radius: 4px 4px 4px 4px;
+    display: flex;
+    align-items: center;
+    &:hover {
+      background-color: #f5f7f9;
+    }
+    span {
+      margin-left: 4px;
+    }
+  }
+}
 
 // tag间距
 ::v-deep .el-tabs__item {