Merge remote-tracking branch 'origin/v3' into v3

package.json

@@ -27,9 +27,12 @@
     "jsencrypt": "3.3.1",
     "nprogress": "0.2.0",
     "pinia": "2.0.22",
+    "sockjs-client": "^1.6.1",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",
-    "vue-router": "4.1.4"
+    "vue-native-websocket": "^2.0.15",
+    "vue-router": "4.1.4",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "3.1.0",

src/api/space/space.js

@@ -0,0 +1,11 @@
+import request from "../../../src/utils/request"
+function getSpaceOut(data) {
+    return request({
+        url: '/biz/expansion/list',
+        method: "get",
+        params: data
+    })
+}
+export default {
+    getSpaceOut,
+}

src/assets/styles/my-common.scss

@@ -0,0 +1,11 @@
+.spill{
+    display: -webkit-box; /*弹性伸缩盒子模型显示*/
+    -webkit-box-orient: vertical; /*排列方式*/
+    -webkit-line-clamp: 1; /*显示文本行数*/
+    overflow: hidden; /*溢出隐藏*/
+}
+.flex-buju{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

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/layout/indexCommon.vue

@@ -40,7 +40,7 @@
         </div>
       </el-header>
       <el-container>
-        <el-aside width="120px" class="asides">
+        <el-aside width="92px" class="asides">
           <div class="aside-con">
             <router-link
               :to="item.path"
@@ -48,8 +48,7 @@
               :key="index"
               @click="clickPath(index)"
               ><div
-                :class="
-                  clickId == index ? 'acitve-img-style img-style' : 'img-style'
+                :class="$route.path==item.path ? 'acitve-img-style img-style' : 'img-style'
                 "
               >
                 <img :src="clickId == index ? item.beimgs : item.imgs" />
@@ -69,20 +68,12 @@
 </template>
 
 <script setup>
+import { onMounted } from 'vue'
 import { ElMessageBox } from 'element-plus'
-import Breadcrumb from '@/components/Breadcrumb'
-import TopNav from '@/components/TopNav'
-import Hamburger from '@/components/Hamburger'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import HeaderSearch from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
 import useAppStore from '@/store/modules/app'
 import useUserStore from '@/store/modules/user'
 import useSettingsStore from '@/store/modules/settings'
 
-
 import chat from "@/assets/images/chat.png";
 import bechat from "@/assets/images/bechat.png";
 import zuijin from "@/assets/images/zuijin.png";
@@ -108,7 +99,9 @@ const searchText = ref('') //搜索ipt的值
 function toggleSideBar() {
   appStore.toggleSideBar()
 }
-
+onMounted(() => {
+  console.log('router',router)
+})
 function handleCommand(command) {
   switch (command) {
     case "setLayout":
@@ -144,7 +137,7 @@ const emits = defineEmits(['setLayout'])
 function setLayout() {
   emits('setLayout');
 }
-const clickId = ref("0");
+const clickId = ref('');
 const menuList = reactive({
   data: [
     {
@@ -167,7 +160,7 @@ const menuList = reactive({
     },
     {
       label: "收藏文件",
-      path: "/swagger",
+      path: "/collect",
       imgs: colloect,
       beimgs: becolloect,
     },
@@ -211,14 +204,19 @@ const clickPath = (index) => {
 .el-container {
   height: 100vh;
 }
+:deep .el-main{
+  --el-main-padding:8px !important;
+}
 .nav {
   background: #06286c;
   height: 48px;
   .nav-top {
     width: 98%;
-    margin-left: 1%;
     display: flex;
     justify-content: space-between;
+    &>div:first-child{
+      font-family:"Inter-SemiBold";
+    }
     & > div:first-child,
     & > div:last-child {
       display: flex;
@@ -237,6 +235,7 @@ const clickPath = (index) => {
     margin-right:10px;
   }
   .avatar-wrapper {
+    color: #fff;
     display: flex;
     align-items: center;
   }
@@ -245,15 +244,19 @@ const clickPath = (index) => {
     :deep .el-input {
       width: 400px;
       height: 32px;
+      border-radius: 4px;
       margin-top: 8px;
       background: #6f85b5 !important;
+      --el-input-border-color:#6F85B5
     }
   }
   :deep .el-input__wrapper {
     background: #1f3f7e !important;
   }
 }
+
 .asides {
+  padding: 8px 10px !important;
   font-size: 14px;
   color: #000;
   background: #fff;
@@ -264,6 +267,7 @@ const clickPath = (index) => {
 //侧边栏css
 .acitve-img-style {
   background-color: #f5f7f9;
+  border-radius: 4px;
 }
 .img-style {
   width: 72px;

src/router/index.js

@@ -88,7 +88,7 @@ export const constantRoutes = [
         name:'search',
         meta:{ title:'全文搜索',icon: 'dashboard' },
       },
-       {
+      {
         path: "/myfile",
         component: () => import("@/views/myfile/MyFile"),
         name: "myfile",
@@ -99,12 +99,19 @@ export const constantRoutes = [
         component: () => import("@/views/department/Department"),
         name: "department",
         meta: { title: "部门文件", icon: "department" }
+      },
+      {
+        path: "/collect",
+        component: () => import("@/views/collect/index.vue"),
+        name: "collect",
+        meta: { title: "收藏文件", icon: "department" }
       }
     ]
   },
   {
     path: '/admin',
     component:Layout,
+    component: Layout,
     redirect: '/admin/index',
     children: [
       {
@@ -128,6 +135,21 @@ export const constantRoutes = [
   //     //   name: 'swagger',
   //     //   meta: { title: '接口', icon: 'dashboard' },
 
+  {
+    path: '/file',
+    component: Layout,
+    redirect: '/index',
+    children: [
+      // {
+      //   path: 'swagger',
+      //   component: () => import('@/views/tool/swagger/index.vue'),
+      //   name: 'swagger',
+      //   meta: { title: '接口', icon: 'dashboard' },
+
+      // },
+    ]
+  },
+
   //     // },
   //     // {
   //     //   path: "/myfile",
@@ -263,7 +285,7 @@ const router = createRouter({
     } else {
       return { top: 0 }
     }
-    console.log(savedPosition,'savedPosition');
+    console.log(savedPosition, 'savedPosition');
   },
 });
 

src/store/modules/user.js

@@ -12,69 +12,68 @@ import defAva from '@/assets/images/profile.jpg'
 
 const useUserStore = defineStore(
 	'user', {
-		state: () => ({
-			token: getToken(),
-			uid: '',
-			name: '',
-			avatar: '',
-			roles: [],
-			permissions: []
-		}),
-		actions: {
-			// 登录
-			login(userInfo) {
-				const username = userInfo.username.trim()
-				const password = userInfo.password
-				const code = userInfo.code
-				const uuid = userInfo.uuid
-				return new Promise((resolve, reject) => {
-					login(username, password, code, uuid).then(res => {
-						setToken(res.token)
-						this.token = res.token
-						resolve()
-					}).catch(error => {
-						reject(error)
-					})
+	state: () => ({
+		token: getToken(),
+		uid: '',
+		name: '',
+		avatar: '',
+		roles: [],
+		permissions: []
+	}),
+	actions: {
+		// 登录
+		login(userInfo) {
+			const username = userInfo.username.trim()
+			const password = userInfo.password
+			const code = userInfo.code
+			const uuid = userInfo.uuid
+			return new Promise((resolve, reject) => {
+				login(username, password, code, uuid).then(res => {
+					setToken(res.token)
+					this.token = res.token
+					resolve()
+				}).catch(error => {
+					reject(error)
 				})
-			},
-			// 获取用户信息
-			getInfo() {
-				return new Promise((resolve, reject) => {
-					getInfo().then(res => {
-						const user = res.user
-						const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import
-.meta.env.VITE_APP_BASE_API + user.avatar /* @vite-ignore */;
+			})
+		},
+		// 获取用户信息
+		getInfo() {
+			return new Promise((resolve, reject) => {
+				getInfo().then(res => {
+					const user = res.user
+					const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
 
-						if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-							this.roles = res.roles
-							this.permissions = res.permissions
-						} else {
-							this.roles = ['ROLE_DEFAULT']
-						}
-						this.uid = user.userId;
-						this.name = user.userName;
-						this.avatar = avatar;
-						resolve(res)
-					}).catch(error => {
-						reject(error)
-					})
+					if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
+						this.roles = res.roles
+						this.permissions = res.permissions
+					} else {
+						this.roles = ['ROLE_DEFAULT']
+					}
+					this.uid = user.userId;
+					this.name = user.userName;
+					this.avatar = avatar;
+					resolve(res)
+				}).catch(error => {
+					reject(error)
 				})
-			},
-			// 退出系统
-			logOut() {
-				return new Promise((resolve, reject) => {
-					logout(this.token).then(() => {
-						this.token = ''
-						this.roles = []
-						this.permissions = []
-						removeToken()
-						resolve()
-					}).catch(error => {
-						reject(error)
-					})
+			})
+		},
+		// 退出系统
+		logOut() {
+			return new Promise((resolve, reject) => {
+				logout(this.token).then(() => {
+					this.token = ''
+					this.roles = []
+					this.permissions = []
+					removeToken()
+					resolve()
+				}).catch(error => {
+					reject(error)
 				})
-			}
+			})
 		}
-	})
+	}
+})
 
 export default useUserStore

src/store/modules/websocket.js

@@ -0,0 +1,46 @@
+// websocket.js
+import { useWebSocket } from 'vue-native-websocket'
+import useDictStore from '@/store/modules/dict'
+export default {
+  namespaced: true,
+  state: {
+    messages: []
+  },
+  mutations: {
+    addMessage(state, message) {
+      state.messages.push(message)
+    }
+  },
+  actions: {
+    connect({ commit }) {
+      const options = {
+        url: "ws://localhost:8080/websocket/message/" + useUserStore().uid,
+        format: 'json'
+      }
+      const { send } = useWebSocket(options)
+
+      commit('addMessage', 'Connected to server')
+
+      // 监听消息事件
+      send({ type: 'listen' })
+
+      // 处理消息
+      return ({ type, payload }) => {
+        switch (type) {
+          case 'message':
+            commit('addMessage', payload)
+            break
+          // 处理其他消息类型
+          // ...
+        }
+      }
+    },
+    sendMessage(context, message) {
+      const { send } = useWebSocket()
+      send({
+        type: 'send',
+        payload: message
+      })
+    }
+  }
+}

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">
@@ -18,7 +19,7 @@
                 <div>
                   <img
                     class="table_icon"
-                    src="../../../assets/images/fileBox.png"
+                    src="@/assets/images/fileBox.png"
                     alt=""
                     style=""
                   />
@@ -47,7 +48,7 @@
                 <div>
                   <img
                     class="table_icon"
-                    src="../../../assets/images/fileBox.png"
+                    src="@/assets/images/fileBox.png"
                     alt=""
                     style=""
                   />
@@ -72,7 +73,7 @@
               <div class="file_box" v-for="item in 20" :key="item">
                 <img
                   class="big_file_img"
-                  src="../../../assets/images/fileBox.png"
+                  src="@/assets/images/fileBox.png"
                   alt=""
                 />
                 <span>Inceptos</span>
@@ -90,7 +91,7 @@
               <div class="file_box" v-for="item in 20" :key="item">
                 <img
                   class="big_file_img"
-                  src="../../../assets/images/fileType//file／DOC.png"
+                  src="@/assets/images/fileType//file／DOC.png"
                   alt=""
                 />
                 <span>Inceptos</span>
@@ -105,9 +106,11 @@
 
 <script setup>
 import { onMounted, ref } from "vue";
-import { listRecent } from "../../../api/biz/recent";
+import TopTabs from "@/components/TopTabs/index.vue"
+import { listRecent } from "@/api/biz/recent";
 const activeNames = ref(["folder", "file"]);
 const isList = ref(false); //控制显示方式
+
 onMounted(() => {
   getList();
 });
@@ -230,24 +233,6 @@ const tableData = [
     text-align: left;
   }
 }
-// ::v-deep .el-table__body tbody [class*="column_2"] {
-//   text-align: right;
-// }
-// ::v-deep .el-table__body tbody [class*="column_3"] {
-//   text-align: right;
-// }
-// ::v-deep .el-table__body tbody [class*="column_4"] {
-//   text-align: right;
-// }
-// ::v-deep .el-table__body tbody [class*="column_6"] {
-//   text-align: right;
-// }
-// ::v-deep .el-table__body tbody [class*="column_7"] {
-//   text-align: right;
-// }
-// ::v-deep .el-table__body tbody [class*="column_8"] {
-//   text-align: right;
-// }
 ::v-deep .el-table__body tbody [class*="column_"] {
   text-align: right;
   &:nth-child(4n+1){

src/views/collect/index.vue

@@ -0,0 +1,451 @@
+<template>
+  <div class="container">
+    <!-- 标签 -->
+    <div class="tags">
+      <!-- TODO 标签可以拖动位置 -->
+      <el-tabs
+        v-model="clickCollect"
+        class="demo-tabs"
+        @tab-click="changeSearchFor"
+      >
+        <el-tab-pane label="常用" name="first"></el-tab-pane>
+        <el-tab-pane label="默认" name="second"></el-tab-pane>
+        <el-tab-pane
+          v-for="item in tabList"
+          :key="item.labelId"
+          :label="item.labelName"
+          :name="item.labelId"
+          @contextmenu.prevent="checkRight($event, item)"
+        ></el-tab-pane>
+      </el-tabs>
+      <!-- 添加标签 -->
+      <div class="addCollect">
+        <div v-if="!isAddCollect">
+          <el-icon color="#2E6BC8">
+            <Plus />
+          </el-icon>
+          <span @click="toAddCollectFn">添加标签</span>
+        </div>
+        <div v-else>
+          <el-input
+            v-model="tabName"
+            size="mini"
+            @blur="addCollectFn"
+            maxlength="32"
+            :autofocus="true"
+          ></el-input>
+        </div>
+      </div>
+    </div>
+    <el-collapse v-model="activeNames" @change="handleChange">
+      <div v-if="isList">
+        <el-collapse-item name="folder">
+          <template #title>
+            <span class="collapseItem_title">文件夹</span>
+          </template>
+          <!-- 表格 -->
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            height="250"
+            :scrollbar-always-on="true"
+          >
+            <el-table-column fixed prop="date" label="名称" width="500">
+              <template #default="scope">
+                <div>
+                  <img
+                    class="table_icon"
+                    src="@/assets/images/fileBox.png"
+                    alt=""
+                    style=""
+                  />
+                  {{ scope.row.date }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="时间" width="200" />
+            <el-table-column prop="state" label="类型" width="180" />
+            <el-table-column prop="city" label="大小" width="160" />
+          </el-table>
+        </el-collapse-item>
+        <el-collapse-item name="file">
+          <template #title>
+            <span class="collapseItem_title">文件</span>
+          </template>
+          <!-- 表格 -->
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            height="250"
+            :scrollbar-always-on="true"
+          >
+            <el-table-column fixed prop="date" label="名称" width="500">
+              <template #default="scope">
+                <div>
+                  <img
+                    class="table_icon"
+                    src="@/assets/images/fileBox.png"
+                    alt=""
+                    style=""
+                  />
+                  {{ scope.row.date }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="时间" width="200" />
+            <el-table-column prop="state" label="类型" width="180" />
+            <el-table-column prop="city" label="大小" width="160" />
+          </el-table>
+        </el-collapse-item>
+      </div>
+      <div v-else>
+        <el-collapse-item name="folder">
+          <template #title>
+            <span class="collapseItem_title">文件夹</span>
+          </template>
+          <!-- 平铺 -->
+          <el-scrollbar height="360px">
+            <div class="tile_box">
+              <div class="file_box" v-for="item in 20" :key="item">
+                <img
+                  class="big_file_img"
+                  src="@/assets/images/fileBox.png"
+                  alt=""
+                />
+                <span>Inceptos</span>
+              </div>
+            </div>
+          </el-scrollbar>
+        </el-collapse-item>
+        <el-collapse-item name="file">
+          <template #title>
+            <span class="collapseItem_title">文件</span>
+          </template>
+          <!-- 平铺 -->
+          <el-scrollbar height="360px">
+            <div class="tile_box">
+              <div class="file_box" v-for="item in 20" :key="item">
+                <img
+                  class="big_file_img"
+                  src="@/assets/images/fileType//file／DOC.png"
+                  alt=""
+                />
+                <span>Inceptos</span>
+              </div>
+            </div>
+          </el-scrollbar>
+        </el-collapse-item>
+      </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, watch } from "vue";
+import { listLabel, addLabel, delLabel } from "@/api/biz/label.js";
+import { listFavorite } from "@/api/biz/favorite.js";
+const activeNames = ref(["folder", "file"]);
+const clickCollect = ref("first"); //当前标签
+const isAddCollect = ref(false); //是否在添加标签
+const tabName = ref(""); //新增的标签名
+const tabList = ref([]);
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-08",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-06",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    zip: "CA 90036",
+  },
+  {
+    date: "2016-05-07",
+    name: "Tom",
+    state: "California",
+    city: "Los Angeles",
+    address: "No. 189, Grove St, Los Angeles",
+    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;
+  // const res = await addLabel({
+  //   labelName: "tab1",
+  //   params: {},
+  // });
+  // if (res.code == 200) {
+  //   getList();
+  // }
+};
+const addCollectFn = async () => {
+  if (!tabName.value) {
+    isAddCollect.value = false;
+    return;
+  }
+  const res = await addLabel({
+    labelName: tabName.value,
+  });
+  if (res.code == 200) {
+    isAddCollect.value = false;
+    tabName.value = "";
+    getList();
+  }
+};
+//获取标签数据
+const getList = async () => {
+  const res = await listLabel();
+  console.log("tabList =", res);
+  if (res.rows.length > 0) {
+    tabList.value = res.rows;
+  }
+};
+// 删除标签
+const delTabs = async () => {
+  const res = await delLabel("7"); //直接传id
+  console.log("delres = ", res);
+  getList();
+};
+//获取收藏数据
+const getCollectList = async () => {
+  const res = await listFavorite();
+  //   console.log("collectres = ", res);
+  if (res.code === 200 && res.rows.length > 0) {
+    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>
+.container {
+  height: 100%;
+  background-color: #fff;
+  border-radius: 4px;
+  .tags {
+    display: flex;
+    width: 100%;
+    height: 40px;
+    box-sizing: border-box;
+    border-top: 1px solid #c1cce3;
+    border-bottom: 1px solid #c1cce3;
+    background-color: #f5f7f9;
+  }
+  .addCollect {
+    margin-left: 16px;
+    cursor: pointer;
+    height: 100%;
+    line-height: 40px;
+    font-size: 14px;
+    color: #2e6bc8;
+    font-weight: 400;
+    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 {
+  padding: 0 16px !important;
+  color: #505870 !important;
+  font-weight: 400 !important;
+}
+::v-deep .el-tabs--top .el-tabs__item.is-top:last-child {
+  padding-right: 0 !important;
+}
+// tag选中颜色
+::v-deep .el-tabs__item.is-active {
+  color: #2e6bc8 !important;
+  font-weight: normal;
+  font-family: Inter-SemiBold;
+}
+::v-deep .el-tabs__active-bar {
+  background-color: #2e6bc8;
+}
+
+.table_icon {
+  height: 27px;
+  width: 27px;
+  vertical-align: middle;
+}
+::v-deep .el-collapse-item__content {
+  padding-bottom: 0;
+}
+::v-deep .el-collapse-item__header {
+  background-color: #ebeff6 !important;
+  width: 100% !important;
+  height: 24px !important;
+}
+::v-deep .el-collapse-item__arrow {
+  position: relative;
+  color: #2e6bc8;
+  right: 97%;
+}
+::v-deep .el-table td.el-table__cell {
+  border: none;
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  color: #000 !important;
+}
+::v-deep .el-table__row {
+  height: 35px !important;
+}
+::v-deep .el-table .el-table__header-wrapper th {
+  border-bottom: none;
+  border-right: 1px solid #c1cce3;
+  background-color: #fff !important;
+  color: #505870;
+  font-size: 14px;
+}
+.collapseItem_title {
+  position: relative;
+  left: 40px;
+  color: #2e6bc8;
+  font-family: Inter-Medium;
+  font-size: 12px;
+}
+// 表格右边3个靠右对齐
+::v-deep .el-table__header thead tr th {
+  font-family: Inter-Medium;
+  font-size: 14px;
+  color: #505870;
+  text-align: right;
+  &:nth-child(1) {
+    text-align: left;
+  }
+}
+::v-deep .el-table__body tbody [class*="column_"] {
+  text-align: right;
+  &:nth-child(4n + 1) {
+    text-align: left;
+  }
+}
+//平铺
+.tile_box {
+  width: 100%;
+  height: 300px;
+  display: flex;
+  flex-wrap: wrap;
+  .file_box {
+    width: 116px;
+    min-height: 138px;
+    // border: 1px solid #000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .big_file_img {
+      width: 100px;
+      height: 100px;
+    }
+    span {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+    }
+  }
+}
+</style>

src/views/liveChat/index.vue

@@ -1,19 +1,223 @@
-<script lang="ts">
+<script>
 export default {
-  name: 'index2',
-}
+  name: "index2",
+};
 </script>
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-
+<script setup>
+import { ref, reactive } from "vue";
+import chat from "@/assets/images/profile.jpg";
+import cebian from "@/assets/images/cebian.png";
+import send from "@/assets/images/send.png";
+import sendFile from "@/assets/images/send-file.png";
+import store from '@/store'
+const height = ref(document.documentElement.clientHeight - 74 + "px;");
+const searchText = ref(""); //搜
+const SearchChat = () => {}; //搜索的点击事件
+//聊天列表数据模拟
+const personList = reactive({
+  data: [
+    {
+      imgs: chat,
+      name: "Kathry Murl",
+      cont: "comment inside the import() call to suppress this",
+    },
+    {
+      imgs: chat,
+      name: "Mathry Murl",
+      cont: "comment inside o suppress this",
+    },
+  ],
+});
+//点击左侧聊天列表
+const clickPersonIndex = ref("");
+const clickPerson = (index) => {
+  clickPersonIndex.value = index;
+};
 </script>
 
 <template>
-  <div>
-    会话sdfss
+  <div class="main" :style="'height:' + height">
+    <!-- 左侧用户列表 -->
+    <div class="left-main">
+      <div class="left-top search">
+        <el-input
+          v-model="searchText"
+          class="w-50 m-2"
+          size="small"
+          placeholder="搜索聊天"
+          suffix-icon="Search"
+          @change="SearchChat"
+        />
+        <el-icon size="24" color="#505870"><Plus /></el-icon>
+      </div>
+      <div
+        :class="
+          clickPersonIndex == index
+            ? 'activ-left-container left-container'
+            : 'left-container'
+        "
+        v-for="(item, index) in personList.data"
+        :key="index"
+        @click="clickPerson(index)"
+      >
+        <img :src="cebian" class="cebian" v-if="clickPersonIndex == index" />
+        <div><img :src="item.imgs" class="head-sculpture" /></div>
+        <div>
+          <span class="person-name">{{ item.name }}</span
+          ><span class="person-cont spill"> {{ item.cont }}</span>
+        </div>
+      </div>
+    </div>
+    <!-- 右侧聊天 -->
+    <div class="right-main">
+      <div
+        class="common-layout"
+        style="display: flex; flex-direction: column; height: 100vh"
+      >
+        <el-container>
+          <el-header height="64px" class="right-header flex-buju"
+            >Header</el-header
+          >
+          <el-main class="right-container">Main</el-main>
+          <!-- 底部 -->
+          <el-footer height="72px" class="right-footer">
+            <img :src="sendFile" class="send-info-file" />
+            <el-input
+              v-model="searchText"
+              class="w-50 m-2"
+              size="small"
+              placeholder="请输入聊天内容"
+              @change="SearchChat"
+            />
+            <img :src="send" class="send-info" />
+          </el-footer>
+        </el-container>
+      </div>
+    </div>
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "@/assets/styles/my-common.scss";
+.main {
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  .left-main,
+  .right-main {
+    background: #fff;
+    border-radius: 4px;
+  }
+  //左侧板块
+  .left-main {
+    width: 312px;
+    margin-right: 8px;
+    .left-top {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      height: 48px;
+      background: #ebeff6;
+      border-top-right-radius: 4px;
+      border-top-left-radius: 4px;
+    }
+  }
+  //右侧板块
+  .right-main {
+    width: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    .right-header {
+      background-color: #ebeff6;
+      border-top-right-radius: 4px;
+      border-top-left-radius: 4px;
+    }
+    .right-container {
+      flex: 1;
+      border-bottom: 1px solid #c1cce3;
+    }
+    .right-footer {
+      display: flex;
+      align-items: center;
+      :deep .el-input__wrapper {
+        background: #F5F7F9 !important;
+        border-radius: 16px;
+      }
+      .w-50{
+        margin: 0 16px;
+        flex:1;
+      }
+      .send-info {
+        width: 40px;
+        height: 40px;
+        border-radius: 16px;
+      }
+      .send-info-file{
+        width: 28px;
+        height: 28px;
+      }
+      :deep .el-input {
+        width: 80%;
+        height: 40px;
+        border-radius: 16px;
+        --el-input-border-color: #c9d2e6;
+      }
+
+    }
+  }
+}
+//搜索
+.search {
+  .w-50,
+  :deep .el-input {
+    width: 80%;
+    height: 32px;
+    border-radius: 4px;
+    --el-input-border-color: #c9d2e6;
+  }
+}
+//左侧聊天列表展示
+.left-container {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #c1cce3;
+  position: relative;
+  .head-sculpture {
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    margin: 0 8px 0 12px;
+    vertical-align: middle;
+  }
 
+  & > div:last-child {
+    vertical-align: middle;
+    margin-right: 10px;
+    display: flex;
+    height: 40px;
+    justify-content: space-between;
+    flex-direction: column;
+    .person-name {
+      font-family: "Inter-Medium";
+      color: #000;
+      font-size: 16px;
+    }
+    .person-cont {
+      color: #505870;
+      font-size: 14px;
+    }
+  }
+}
+//点击时列表的背景色
+.activ-left-container {
+  background: #f5f7f9;
+}
+.cebian {
+  height: 100%;
+  width: 4px;
+  position: absolute;
+  left: 0;
+}
 </style>

src/views/myfile/MyFile.vue

@@ -150,7 +150,7 @@
                     <!-- 文件 -->
                     <div class="fileTable">
                         <el-collapse v-model="files" accordion class="collapse">
-                            <el-collapse-item title="文件" name="2" class="custom-collapse-item">
+                            <el-collapse-item title="文件" name="2" class="">
                                 <el-table :data="fileList" style="width: 100%" @row-click="handleRowClick">
                                     <el-table-column label="Image" width="100">
                                         <template slot-scope="scope">
@@ -169,9 +169,19 @@
                                             <img :src="item.img" alt="">
                                             {{ item.name }}
                                             <span v-if="item.name == '在线编辑' || item.name == '协作' ? true : false"
-                                                style="color: #7084B4;float: right;">></span>
+                                                style="color: #7084B4;float: right;position: relative;">></span>
                                         </p>
                                     </template>
+                                    <div class="setCli1" v-if="anyP">
+                                        <p @click="chooseSet1()" class="chooseSet">
+                                            <img :src="user" alt="">
+                                            选择人员
+                                        </p>
+                                        <p class="chooseSet">
+                                            <img :src="archiveTray" alt="">
+                                            归档
+                                        </p>
+                                    </div>
                                 </div>
                             </el-collapse-item>
                         </el-collapse>
@@ -222,6 +232,7 @@
 <script>
 import { ref } from 'vue'
 import myfile from '../../api/myfile/myfile'
+import space from '../../api/space/space'
 import { Search } from '@element-plus/icons-vue'
 import copy from '../../assets/images/copy.png'
 import clipboard from '../../assets/images/clipboard.png'
@@ -244,6 +255,8 @@ import togger from '../../assets/images/togger.png'
 import icc from '../../assets/images/icc.png'
 import history from '../../assets/images/history.png'
 import fileBox from '../../assets/images/fileBox.png'
+import user from '../../assets/images/user.png'
+import archiveTray from '../../assets/images/archiveTray.png'
 export default {
     setup() {
         let searchFire = ref('')
@@ -256,6 +269,7 @@ export default {
         let askTalk = ref('')
         let cliCC = ref(false)
         let transferModal = ref(false)
+        let anyP = ref(false)
         let trandata = ref(generateData())
         let tranvalue = ref([])
         let fileList = ref([
@@ -415,6 +429,15 @@ export default {
             } else {
                 transferModal.value = false
             }
+            if (row.name == '协作') {
+                anyP.value = true
+            } else {
+                anyP.value = false
+            }
+        }
+        function chooseSet1() {
+            transferModal.value = true
+            anyP.value = false
         }
         function generateData() {
             const data = []
@@ -440,6 +463,11 @@ export default {
         function filterMethod(query, item) {
             return item.initial.toLowerCase().includes(query.toLowerCase())
         }
+        function getSpace(){
+            space.getSpaceOut({}).then(res=>{
+                console.log(res,'111');
+            })
+        }
         return {
             folderList,//文件夹的数据
             fileList,//文件夹的数据
@@ -480,11 +508,16 @@ export default {
             filterMethod,
             trandata,
             tranvalue,
+            archiveTray,//协作图标
+            user,//用户图标
+            anyP,
+            chooseSet1,
+            getSpace,//获取内存空间
         }
     },
     created() {
         this.getAll();
-        // 监听鼠标左键点击事件
+        this.getSpace()
     },
 }
 </script>
@@ -646,11 +679,33 @@ p {
     z-index: 2;
 }
 
+.setCli1 {
+    width: 156px;
+    height: auto;
+    position: absolute;
+    top: 185px;
+    left: 155px;
+    background-color: white;
+    border: 1px solid gray;
+    border-radius: 4px;
+    z-index: 2;
+}
+
+.chooseSet {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+}
+
 .chooseSet:hover {
     width: 100%;
-    height: 40px;
-    line-height: 40px;
+    height: 30px;
+    line-height: 30px;
     background-color: #8693b2;
     color: white;
 }
+
+::v-deep [data-v-69cdaa40] .el-collapse-item__header {
+    padding-left: 10px;
+}
 </style>

src/views/search/index.vue

@@ -46,7 +46,8 @@
       </div>
       <div class="right_box">
         <img src="@/assets/images/sort.png" alt="" />
-        <img src="@/assets/images/squre.png" alt="" @click="changeShow"/>
+        <img v-if="isList" src="@/assets/images/squre.png" alt="" @click="changeShow"/>
+        <img v-else src="@/assets/images/Frame 187.png" alt="" @click="changeShow"/>
       </div>
     </div>
     <!-- 文件列表 -->