Merge branch 'v3' of ssh://94.191.59.107:10222/houwenfeng/cloudfile-ui into v3

.gitignore

@@ -21,3 +21,4 @@ selenium-debug.log
 
 package-lock.json
 yarn.lock
+/vite.config.js

src/api/fileCount/fileCount.js

@@ -1,48 +1,56 @@
 import request from '../../utils/request'
 // 查询文档协作人员
 // data为docid
-function getActor(data){
+function getActor(data) {
     return request({
-        url:`/biz/actor/${data}`,
-        method:"get",
-        params:data
+        url: `/biz/actor/${data}`,
+        method: "get",
+        params: data
     })
 }
 // 归档
-function lockActor(data){
+function lockActor(data) {
     return request({
-        url:`/biz/actor/${data}`,
-        method:"put",
+        url: `/biz/actor/${data}`,
+        method: "put",
     })
 }
 // 添加协作人员
-function addActor(num,data){
+function addActor(num, data) {
     return request({
-        url:`/biz/actor/${num}`,
-        method:"post",
+        url: `/biz/actor/${num}`,
+        method: "post",
         data
     })
 }
 // 我发起的
-function myCount(data){
+function myCount(data) {
     return request({
-        url:`/biz/actor/initiation`,
-        method:"get",
-        params:data,
+        url: `/biz/actor/initiation`,
+        method: "get",
+        params: data,
     })
 }
 // 我参与的
-function myJoin(data){
+function myJoin(data) {
     return request({
-        url:`/biz/actor/participation`,
-        method:"get",
-        params:data,
+        url: `/biz/actor/participation`,
+        method: "get",
+        params: data,
     })
 }
-export default{
+function createFiles(data) {
+    return request({
+        url: `/biz/info/create`,
+        method: "get",
+        params: data,
+    })
+}
+export default {
     getActor,
     addActor,
     lockActor,
     myCount,
     myJoin,
+    createFiles,
 }

src/layout/indexCommon.vue

@@ -38,7 +38,7 @@
                       : '@/assets/images/profile.png'
                   "
                   class="head-img"
-                /><span>{{ logingName }}</span>
+                /><span>{{ userStore.name }}</span>
               </div>
               <template #dropdown>
                 <el-dropdown-menu>
@@ -121,6 +121,8 @@ import chuanshu from "@/assets/images/chuanshu.png";
 import bechuanshu from "@/assets/images/bechuanshu.png";
 import highsearch from "@/assets/images/highsearch.png";
 import behighsearch from "@/assets/images/behighsearch.png";
+import manyBody from "@/assets/images/manyBody.png";
+import manyBodyFalse from "@/assets/images/manyBodyFalse.png";
 import { AppMain, Navbar, Settings, TagsView } from "./components";
 import { flieSearch } from "@/api/search/search.js";
 import { useRouter, useRoute } from "vue-router";
@@ -133,7 +135,7 @@ const userStore = useUserStore();
 const settingsStore = useSettingsStore();
 const searchText = ref(""); //搜索ipt的值
 const selectValue = ref(1); //文档空间类型
-
+const wangzhi=import.meta.env.VITE_APP_BASE_API
 const isAlive = ref(true);
 
 function reload() {
@@ -189,6 +191,8 @@ const toSearch = async () => {
     keyword: searchText.value,
     isAsc: "asc",
     orderByColumn: "createTime",
+    pageSize:3,
+    pageNum:1
   };
   const res = await flieSearch(query);
   // console.log("res", res);
@@ -281,6 +285,12 @@ const menuList = reactive({
       imgs: system,
       beimgs: issystem,
     },
+    {
+      label: "我的协作",
+      path: "/myjoin",
+      imgs: manyBody,
+      beimgs: manyBodyFalse,
+    },
   ],
 });
 const clickPath = (index, items) => {

src/router/index.js

@@ -110,6 +110,15 @@ export const constantRoutes = [{
 				}
 			},
 			{
+				path: "/myjoin",
+				component: () => import("@/views/myjoin/MyJoin"),
+				name: "myjoin",
+				meta: {
+					title: "我的协作",
+					icon: "myjoin"
+				}
+			},
+			{
 				path: "/department",
 				component: () => import("@/views/department/Department"),
 				name: "department",

src/store/modules/websocket.js

@@ -67,7 +67,7 @@ const useWebsoctStore = defineStore('websoct', {
     
     // 重新连接
    reconnect(url) {
-      if (lockReconnect) return ElMessage({ message: "WebSocket重连失败,请尝试刷新界面", type: "error" });
+      if (this.lockReconnect) return ElMessage({ message: "WebSocket重连失败,请尝试刷新界面", type: "error" });
       this.lockReconnect = true;
       setTimeout(function () { //没连接上会一直重连，设置延迟避免请求过多
         ElMessage({ message: "请尝试重连中", type: "error" });

src/views/collect/index.vue

@@ -1,5 +1,36 @@
 <template>
   <div class="container">
+    <div class="statistics">
+      <div class="left_box">
+        <div class="dataNum">共查询到个相关结果</div>
+      </div>
+      <div class="right_box">
+        <img
+          src="@/assets/images/sort.png"
+          @click="changeSort"
+          v-if="isAsc == 'asc'"
+          alt=""
+        />
+        <img
+          src="@/assets/images/Frame_188.png"
+          @click="changeSort"
+          v-else
+          alt=""
+        />
+        <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>
     <!-- 标签 -->
     <div class="tags">
       <!-- TODO 标签可以拖动位置 -->
@@ -237,6 +268,7 @@ const isAddCollect = ref(false); //是否在添加标签
 const tabName = ref(""); //新增的标签名
 const changeTabName = ref(""); //修改的标签名
 const tabList = ref([]);
+const isAsc = ref("asc");
 const tableData = [
   {
     date: "2016-05-03",
@@ -375,7 +407,7 @@ const delTabs = async () => {
 // TODO 按标签获取收藏数据，实现文件夹收藏功能，文件夹右键菜单和文件右键菜单样式统一
 //获取收藏数据
 const getCollectList = async () => {
-  const res = await listFavoriteById(17);
+  const res = await listFavorite();
   console.log("collectres = ", res);
   if (res.code === 200 && res.rows.length > 0) {
     tableData.value = res.rows;
@@ -454,6 +486,11 @@ const rowDrop = () => {
 
 const tabchange = async (labelId) => {
   console.log("labelId", toRaw(labelId));
+  const query = {
+    labelId,
+    isAsc: isAsc.value,
+    orderByColumn: "createTime",
+  }; 
   // 获取当前标签下的数据
   const res = await listFavoriteById(labelId);
   // console.log("res", res);
@@ -462,6 +499,13 @@ const tabchange = async (labelId) => {
   console.log("folderArr", folderArr.value);
   console.log("fileArr", fileArr.value);
 };
+const changeShow = () => {
+  isList.value = !isList.value;
+};
+const changeSort = async () => {
+  isAsc.value == "asc" ? (isAsc.value = "desc") : (isAsc.value = "asc");
+  // console.log("res", res);
+};
 
 // 工具函数
 //获取新增标签时要赋予的ordername
@@ -487,6 +531,34 @@ const sortArr = (field) => {
   height: 100%;
   background-color: #fff;
   border-radius: 4px;
+  .statistics {
+    width: 100%;
+    height: 40px;
+    background-color: #D9E0F0;
+    padding-left: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #6F85B5;
+    .left_box {
+      display: flex;
+      align-items: center;
+      .dataNum {
+        margin-left: 4px;
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+    .right_box {
+      width: 50px;
+      display: flex;
+      justify-content: space-between;
+      margin-right: 30px;
+      img {
+        cursor: pointer;
+      }
+    }
+  }
   .tags {
     display: flex;
     width: 100%;

src/views/highSearch/HighSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container" v-if="!showPreview">
     <div class="logo">
       <img src="@/assets/images/Frame_427319127.png" alt="" />
       <div class="font">聚合智慧文档管理系统</div>
@@ -40,6 +40,7 @@
         class="search_ipt"
         v-model="searchText"
         maxlength="32"
+        @keydown.enter="doSearch"
         placeholder="请输入要查询的内容"
       />
       <div class="search_btn" @click="doSearch">搜索</div>
@@ -56,7 +57,9 @@
       >
         <!-- <el-scrollbar height="200px"  ref="scrollRef" id="scrollRef"> -->
         <div class="oneBox" v-for="item in listData" :key="item.id">
-          <span class="fileName">{{ item.content.docInfo.fileName }}</span>
+          <span class="fileName" @click="toPreview(item)">{{
+            item.content.docInfo.fileName
+          }}</span>
           <div class="flieTime">
             <img src="@/assets/images/bx：bx-time-five.png" alt="" />
             <span>{{ item.content.docInfo.createTime }}</span>
@@ -76,13 +79,22 @@
         <span>没有关于“{{ noFound }}”的结果 </span>
       </div>
     </div>
-    <!-- <IdentifyFont :openFile="openFile"></IdentifyFont> -->
   </div>
+  <divv v-else class="preview">
+    <FileEdit
+      :docId="clickRowId"
+      :copyRow="copyRow"
+      :historyPrew="historyPrew"
+      :historycopyRow="historycopyRow"
+      :onlyView="onlyView"
+    ></FileEdit>
+  </divv>
 </template>
 
 <script setup>
 import { onMounted, ref } from "vue";
 import { search } from "@/api/search/search.js";
+import FileEdit from "@/views/myfile/components/FileEdit.vue";
 // import IdentifyFont from "@/components/IdentifyFont/IdentifyFont.vue";
 const searchText = ref(""); //搜索ipt的值
 const selectValue = ref(1); //文档空间类型
@@ -93,6 +105,12 @@ const noData = ref(false); //没有搜索出数据
 const beEnd = ref(false); //拉到最底部了
 const listData = ref([]);
 const noFound = ref(); //没有结果的text
+const clickRowId = ref();
+const copyRow = ref();
+const historyPrew = ref();
+const historycopyRow = ref(false);
+const onlyView = ref(false);
+const showPreview = ref(false);
 const selectOptions = [
   { label: "公共文档", value: 1 },
   { label: "部门文档", value: 2 },
@@ -165,9 +183,22 @@ const setScroll = async () => {
     beEnd.value = true;
   }
 };
+// 预览事件
+const toPreview = (item) => {
+  console.log("item", item);
+  clickRowId.value = item.content.docInfo.docId;
+  copyRow.value = item.content.docInfo;
+  showPreview.value = true;
+};
 </script>
 
 <style lang="scss" scoped>
+.preview {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  overflow: hidden;
+}
 .container {
   height: 100%;
   background-color: #fff;

src/views/liveChat/index.vue

@@ -259,6 +259,7 @@ const sendFileClick = async () => {
 const handleNewMessage = async () => {
   if (websoctStore.newMessage) {
     msgRecordEvent(sendCont.data.toId); //获取用户的聊天记录
+     const resFriend = await msgFriend();
     getMsgList();
     websoctStore.newMessage = false; // 重置新消息标记
   }
@@ -427,6 +428,7 @@ onMounted(() => {
             class="head-sculpture"
             v-if="item.toId == userIds.uid && item.fromAvatar"
           />
+          <img :src="item.avatar " alt="" v-else-if="item.avatar"/>
           <img
             :src="wangzhi + item.toAvatar"
             class="head-sculpture"
@@ -443,7 +445,8 @@ onMounted(() => {
             "
             class="head-sculpture"
             v-else
-            >{{ item.toId == userIds.uid? item.fromName?.slice(0, 1): item.toName?.slice(0, 1) }}</span>
+            >{{ item.nickName
+              ? item.nickName?.slice(0, 1):item.toId == userIds.uid? item.fromName?.slice(0, 1): item.toName?.slice(0, 1) }}</span>
         </div>
         <div class="spill">
           <span class="person-name">{{

src/views/myfile/MyFile.vue

@@ -42,7 +42,7 @@
                 </div>
                 <div>
                     <p>
-                        <span style="margin-left: 5px;">{{ useSpace + 'G' }}/{{ allSpace + "G" }}</span>
+                        <span style="margin-left: 5px;">{{ formatStorage(useSpace) }}/{{ allSpace + "G" }}</span>
                         <span style="margin-left: 5px;font-size: 12px;color: blue;cursor: pointer;"
                             @click="askApply">申请扩容</span>
                     </p>
@@ -50,7 +50,7 @@
                 </div>
             </div>
             <!-- 右侧大盒子 -->
-            <div class="mesBox" v-if="editOnline">
+            <div class="mesBox">
                 <!-- 功能盒子  -->
                 <div class="useBox">
                     <!-- table切换 -->
@@ -65,6 +65,11 @@
                             </span>
                         </template>
                     </div>
+
+                </div>
+                <!-- 展示文件夹盒子 -->
+                <!-- 文件夹 -->
+                <div v-if="editOnline">
                     <!-- 众多功能 -->
                     <div class="manyUse">
                         <div
@@ -122,22 +127,26 @@
                         <!-- 右侧 -->
                         <div>
                             <img :src="sort" alt="">
-                            <img :src="squre" alt="" >
+                            <img :src="squre" alt="" @click="gridChange">
                         </div>
                     </div>
-                </div>
+                <!-- </div> -->
                 <!-- 展示文件夹盒子 -->
                 <!-- 文件夹 -->
                 <div class="detailBox file-jia" @click="mouseClick">
                     <el-collapse v-model="folder" accordion class="collapseSell">
                         <el-collapse-item title="文件夹" name="1" class="custom-collapse-item">
-                            <el-table :data="folderList" style="width: 100%" @selection-change="handleSelectionChange1"
-                                :single-select="true" @row-click="folderClick" @row-contextmenu="folderRClick"
-                                ref="taskTableRef">
+                            <el-table v-if="folderGrid" :data="folderList" style="width: 100%"
+                                @selection-change="handleSelectionChange1" :single-select="true" @row-click="folderClick"
+                                @row-contextmenu="folderRClick" ref="taskTableRef">
                                 <el-table-column type="selection" width="55" />
                                 <el-table-column label="名称" width="180">
                                     <template #default="scope">
                                         <span>
+                                            <el-icon v-if="scope.row.isFavorite == 'N'">
+                                                <Star />
+                                            </el-icon>
+                                            <img v-else @click.stop="delCollect(scope.row,$event)" src="../../assets/images/yellowstar.png" alt="">
                                             <img src="../../assets/images/fileBox.png" style="width: 20px;height: 24px;"
                                                 alt="">
                                             {{ scope.row.dirName }}
@@ -158,89 +167,95 @@
                                     </template>
                                 </el-table-column>
 
-                            </el-table>
-                        </el-collapse-item>
-                    </el-collapse>
-                    <!-- 右键唤出的菜单 -->
-                    <div class="right_menu" v-if="folderVisible"
-                        :style="{ left: folderleft + 'px', top: foldertop + 'px' }">
-                        <div class="menu_item" @click="folderClick(null, null)">
-                            <img src="@/assets/images/trash.png" alt="" />
-                            <span>打开</span>
-                        </div>
-                        <div class="menu_item" @click="restName(null, null)">
-                            <img src="@/assets/images/textbox.png" alt="" />
-                            <span>重命名</span>
-                        </div>
-                        <div class="menu_item" @click="collectFolder">
-                            <img src="@/assets/images/collect.png" alt="" />
-                            <span>收藏</span>
+                                </el-table>
+                                <PlaceGridFolder v-else :folderClick="folderClick" :restName="restName"
+                                    :collectFolder="collectFolder" :getAllTop="getAllTop" @folderBack="folderBack">
+                                </PlaceGridFolder>
+                            </el-collapse-item>
+                        </el-collapse>
+                        <!-- 右键唤出的菜单 -->
+                        <div class="right_menu" v-if="folderVisible"
+                            :style="{ left: folderleft + 'px', top: foldertop + 'px' }">
+                            <div class="menu_item" @click="folderClick(null, null)">
+                                <img src="@/assets/images/trash.png" alt="" />
+                                <span>打开</span>
+                            </div>
+                            <div class="menu_item" @click="restName(null, null)">
+                                <img src="@/assets/images/textbox.png" alt="" />
+                                <span>重命名</span>
+                            </div>
+                            <div class="menu_item" @click="collectFolder">
+                                <img src="@/assets/images/collect.png" alt="" />
+                                <span>收藏</span>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <!-- 文件 -->
-                <div class="fileTable">
-                    <el-collapse v-model="files" accordion class="collapse" style="height: 200px;">
-                        <el-collapse-item title="文件" name="2" class="">
-                            <el-table v-if="fileGrid" :data="fileList" style="width: 100%;position: relative;"
-                                @row-contextmenu="handleRowClick" @selection-change="handleSelectionChange"
-                                @row-click="mouseClick" :default-sort="{ prop: 'createTime', order: 'descending' }">
-                                <el-table-column type="selection" width="55" />
-                                <el-table-column label="名称" width="200">
-                                    <template #default="scope">
-                                        <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
-                                            <el-icon v-if="collectImg">
+                    <!-- 文件 -->
+                    <div class="fileTable">
+                        <el-collapse v-model="files" accordion class="collapse" style="height: 200px;">
+                            <el-collapse-item title="文件" name="2" class="">
+                                <el-table v-if="fileGrid" :data="fileList" style="width: 100%;position: relative;"
+                                    @row-contextmenu="handleRowClick" @selection-change="handleSelectionChange"
+                                    @row-click="mouseClick" :default-sort="{ prop: 'createTime', order: 'descending' }">
+                                    <el-table-column type="selection" width="55" />
+                                    <el-table-column label="名称" width="200">
+                                        <template #default="scope">
+                                            <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
+                                            <el-icon v-if="scope.row.isFavorite == 'N'">
                                                 <Star />
                                             </el-icon>
-                                            <img v-else src="../../assets/images/yellowstar.png" alt="">
+                                            <img v-else @click.stop="delCollect(scope.row,$event)" src="../../assets/images/yellowstar.png" alt="">
                                             <img :src="getImage(scope.row.fileType)" alt="">
                                             {{ scope.row.fileName }}
                                         </span>
-                                    </template>
-                                </el-table-column>
-                                <el-table-column prop="createTime" label="时间" sortable width="180" />
-                                <el-table-column prop="fileType" label="类型" />
-                                <el-table-column label="大小">
-                                    <template #default="scope">
-                                        <span>
-                                            {{ formatFileSize(scope.row.fileSize) }}
-                                        </span>
-                                    </template>
-                                </el-table-column>
-                            </el-table>
-                            <PalaceGridFile v-else></PalaceGridFile>
-                        </el-collapse-item>
-                    </el-collapse>
-                    <div class="setCli" v-if="cliCC" :style="{ left: xz + 'px', top: yz - 260 + 'px' }">
-                        <template v-for="(item, index) in filterMouseCli()">
-                            <p @click="chooseSet(item, index,1)" class="chooseSet">
-                                <img :src="item.img" alt="">
-                                {{ item.name }}
-                                <span v-if="item.name == '在线编辑' || item.name == '协作' ? true : false"
-                                    style="color: #7084B4;float: right;position: relative;" class="arrow">></span>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="createTime" label="时间" sortable width="180" />
+                                    <el-table-column prop="fileType" label="类型" />
+                                    <el-table-column label="大小">
+                                        <template #default="scope">
+                                            <span>
+                                                {{ formatFileSize(scope.row.fileSize) }}
+                                            </span>
+                                        </template>
+                                    </el-table-column>
+                                </el-table>
+                                <PalaceGridFile v-else @showFile="showFile" :getAllTop="getAllTop" @navBack="navBack"
+                                    @lastBB="lastBB" @onlineCase="onlineCase" @shareBack="shareBack"></PalaceGridFile>
+                            </el-collapse-item>
+                        </el-collapse>
+                        <div class="setCli" v-if="cliCC" :style="{ left: xz + 'px', top: yz - 260 + 'px' }">
+                            <template v-for="(item, index) in filterMouseCli()">
+                                <p @click="chooseSet(item, index, 1)" class="chooseSet">
+                                    <img :src="item.img" alt="">
+                                    {{ item.name }}
+                                    <span v-if="item.name == '在线编辑' || item.name == '协作' ? true : false"
+                                        style="color: #7084B4;float: right;position: relative;" class="arrow">></span>
+                                </p>
+                            </template>
+                        </div>
+                        <div class="setCli1" v-if="anyP" :style="{ left: xz + 155 + 'px', top: yz + 'px' }">
+                            <p @click="chooseSet1(0)" class="chooseSet">
+                                <img src="../../assets/images/user.png" alt="">
+                                选择人员
                             </p>
-                        </template>
+                            <p class="chooseSet" @click="goLock">
+                                <img src="../../assets/images/archiveTray.png" alt="">
+                                归档
+                            </p>
+                        </div>
                     </div>
-                    <div class="setCli1" v-if="anyP">
-                        <p @click="chooseSet1(0)" class="chooseSet">
-                            <img src="../../assets/images/user.png" alt="">
-                            选择人员
-                        </p>
-                        <p class="chooseSet" @click="goLock">
-                            <img src="../../assets/images/archiveTray.png" alt="">
-                            归档
-                        </p>
                     </div>
+                <div v-else>
+                    <div>
+                        <el-button @click="editOnline = true; historyPrew = false">返回</el-button>
+                    </div>
+                    <FileEdit :docId="clickRowId" :copyRow="copyRow" :historyPrew="historyPrew"
+                        :historycopyRow="historycopyRow" :onlyView="onlyView" @cancleHistoryPrew="cancleHistoryPrew">
+                    </FileEdit>
                 </div>
-
-            </div>
-            <div v-else>
-                <div>
-                    <el-button @click="editOnline = true; historyPrew = false">返回</el-button>
-                </div>
-                <FileEdit :docId="clickRowId" :copyRow="copyRow" :historyPrew="historyPrew" :historycopyRow="historycopyRow"
-                    :onlyView="onlyView" @cancleHistoryPrew="cancleHistoryPrew"></FileEdit>
             </div>
+
             <!-- 扩容弹窗 -->
             <div>
                 <SpaceBig v-if="spaces" :spaces="spaces" :impSpaceId="impSpaceId" @getSpaceC="getSpaceC"></SpaceBig>
@@ -291,7 +306,7 @@
             <!-- 文件收藏 -->
             <div>
                 <FileCollect v-if="collects" :collects="collects" @getCollects="getCollects" :copyFileName="copyFileName"
-                    :copyFileId="copyFileId" :isFolder="isFolder" :clickRow="clickRow"></FileCollect>
+                    :copyFileId="copyFileId" @refreshFile="refreshFile" :isFolder="isFolder" :clickRow="clickRow"></FileCollect>
             </div>
             <!-- 中栏重命名 -->
             <div>
@@ -324,6 +339,7 @@
 <script>
 import { ref, toRaw, onMounted } from 'vue'
 import myfile from '../../api/myfile/myfile'
+import { delFavorite } from '@/api/biz/favorite.js'
 import documents from '../../api/document/document'
 import fileCount from '../../api/fileCount/fileCount'
 import FileTree from './components/FileTree.vue'
@@ -411,6 +427,10 @@ export default {
         let fileList = ref([
         ])
         let menuList = ref([
+            {
+                name: "我的空间",
+                choose: "我的空间"
+            }
         ])
         let useMenu = ref([
             // {
@@ -607,10 +627,12 @@ export default {
                 }
                 // }
             })
-            this.selectedIndex = num
+            selectedIndex.value = num
             const newItem = {
                 name: row.dirName,
-                choose: row.dirName
+                choose: row.dirName,
+                dirIds: row.dirId,
+                spaceIds: row.spaceId
             };
             // 检查 newItem 是否已存在于 menuList 中
             const isItemExist = menuList.value.some(item => item.choose === newItem.choose);
@@ -622,15 +644,52 @@ export default {
 
         // tableMenu切换
         function tableChange(row, num) {
-            this.selectedIndex = num
+            if (row.name == '我的空间') {
+                getAllTop()
+                if (!editOnline.value) {
+                    editOnline.value = true
+                }
+            } else {
+                let obj = {
+                    pageNum: 1,
+                    pageSize: 10
+                }
+                documents.getALLdocument({ parentId: row.dirIds - 0, spaceId: row.spaceIds - 0, pageNum: obj.pageNum, pageSize: obj.pageSize }).then(res => {
+                    // fileMenu.value = res.data
+                    folderList.value = res.data
+                })
+                myfile.getById(row.dirIds - 0, obj).then(res => {
+                    if (res.code === 200) {
+                        fileList.value = res.rows
+                        fileTotal.value = res.total
+                        if (fileTotal.value / 10 != 1) {
+                            let x = Math.trunc(fileTotal.value / 10) + 1
+                            for (var i = 1; i <= x; i++) {
+                                obj.pageNum = i
+                                myfile.getById(userMe[0].dirId - 0, obj).then(res => {
+                                    fileList.value = fileList.value.concat(res.rows)
+                                    const uniqueFileList = Array.from(new Set(fileList.value.map(item => item.docId)))
+                                        .map(docId => fileList.value.find(item => item.docId === docId));
+                                    // 合并数组并更新 fileList.value
+                                    fileList.value = uniqueFileList
+                                })
+                            }
+                        }
+                    }
+                })
+            }
+            selectedIndex.value = num
         }
         // x图标事件
         function shotdown(row) {
-            this.menuList = this.menuList.filter(item => item.name !== row.name)
+            menuList.value = menuList.value.filter(item => item.name !== row.name)
+            selectedIndex.value = -1
+            if (!editOnline.value) {
+                editOnline.value = true
+            }
         }
         // 文件名表格每一行点击事件
         function handleRowClick(row, col, e) {
-            console.log('row',row);
             isFolder.value = "N"
             clickRow.value = row
             e.preventDefault();
@@ -660,8 +719,6 @@ export default {
         async function chooseSet(row, index, num) {
             if (row.name == '在线编辑' || row.name == '协作') {
                 cliCC.value = true
-            } else {
-                cliCC.value = false
             }
             if (row.name == '分享') {
                 workOrEdit.value = num
@@ -709,6 +766,19 @@ export default {
             if (row.name === '在线编辑') {
                 editOnline.value = false
                 cliCC.value = false
+                const newItem = {
+                    name: copyFileName.value,
+                    choose: copyFileId.value,
+                    dirIds: copyDirId.value,
+                    spaceIds: copySpaceId.value
+                };
+                // 检查 newItem 是否已存在于 menuList 中
+                const isItemExist = menuList.value.some(item => item.choose === newItem.choose);
+                // 如果不存在，则添加它
+                if (!isItemExist) {
+                    menuList.value.push(newItem);
+                }
+                selectedIndex.value = selectedIndex.value + 1
             }
             if (row.name === '文字识别') {
                 router.push({
@@ -853,7 +923,6 @@ export default {
             copyFolderName.value = row.dirName
             selectedBox.value = row.dirId
             rename.value = true
-
         }
         function getMenu(row, num) {
             if (row.name === '删除') {
@@ -920,13 +989,20 @@ export default {
         function folderClick(row, list) {
             // 上一级dirId就是下一级的parentId
             // 判断是点击打开还是右键菜单打开
-            row = row ? row : thisFolder.value
-            // console.log('row', toRaw(row));
+            if(row){
+                thisFolder.value = row;
+            }else{
+                row =thisFolder.value
+            }
+            console.log('row', toRaw(row));
             topPath.value = row.dirPath
             // console.log('topPath',toRaw(topPath.value));
             newDirId.value = row.dirId
             newSpaceId.value = row.spaceId
-            documents.getALLdocument({ parentId: row.dirId - 0, spaceId: row.spaceId - 0 }).then(res => {
+            documents.getALLdocument({
+                parentId: newDirId.value - 0,
+                spaceId: newSpaceId.value - 0
+            }).then(res => {
                 folderList.value = res.data
                 if (res.data.length === 0) {
                     myfile.getById(newDirId.value).then(res => {
@@ -935,7 +1011,7 @@ export default {
                         }
                     })
                 } else {
-                    myfile.getById(row.dirId - 0).then(res => {
+                    myfile.getById(newDirId.value).then(res => {
                         if (res.code === 200) {
                             fileList.value = res.rows
                         }
@@ -999,6 +1075,29 @@ export default {
         function getSpaceC(data) {
             spaces.value = data
         }
+        function navBack(data, name) {
+            nameForm.value.name = name
+            fileNameChange.value = data
+        }
+        function onlineCase(data, uid, row) {
+            editOnline.value = data
+            clickRowId.value = uid
+            copyRow = row
+        }
+        function shareBack(data, num) {
+            thanks.value = data
+            workOrEdit.value = num
+        }
+        function showFile(data, e, a) {
+            editOnline.value = data
+            clickRowId.value = e
+            copyRow = a
+        }
+        function folderBack(dir, spa, nam) {
+            selectedBox.value = dir
+            copyFolderName.value = nam
+            copyFileName.value = spa
+        }
         //历史版本
         const forwardTreeData = reactive({ data: {} });
         const historycopyRow = ref({})
@@ -1011,7 +1110,11 @@ export default {
             }
             openForwardFile.value = val
         }
-
+        function lastBB(data, row, num) {
+            openForwardFile.value = data
+            historyTotal.value = row
+            fileUserTreeData.data = num
+        }
         //对mouseCli数组进行筛选，实现菜单的区分显示
         const filterMouseCli = () => {
             const canPreviewArray = ['.doc', '.docm', '.docx', '.dot', '.dotm', '.dotx', '.epub', '.fodt', '.htm', '.html', '.mht', '.odt', '.ott', '.pdf', '.rtf', '.txt', '.djvu', '.xps', 'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx', 'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx']
@@ -1058,15 +1161,15 @@ export default {
             folderVisible.value = false;
         };
         // 文件夹收藏事件
-        const collectFolder = ()=>{
+        const collectFolder = () => {
             isFolder.value = 'Y'
             clickRow.value = thisFolder.value
+            // thisFolder.value = ''
             copyFileName.value = thisFolder.value.dirName
             collects.value = true
-            console.log('thisFolder',thisFolder.value);
         }
         // 左箭头事件
-        const arrowLift = ()=>{
+        const arrowLift = () => {
             // router.go(-1)
         }
         // 归档
@@ -1097,19 +1200,59 @@ export default {
                 return fileSize + 'B';
             }
         }
+        function formatStorage(sizeInGB) {
+            if (sizeInGB >= 1) {
+                return sizeInGB.toFixed(2) + 'GB';
+            } else {
+                const sizeInMB = sizeInGB * 1024;
+                if (sizeInMB >= 1) {
+                    return sizeInMB.toFixed(2) + 'MB';
+                } else {
+                    const sizeInKB = sizeInMB * 1024;
+                    return sizeInKB.toFixed(2) + 'KB';
+                }
+            }
+        }
         function gridChange() {
             if (fileGrid.value) {
                 fileGrid.value = false
             } else {
                 fileGrid.value = true
             }
+            if (folderGrid.value) {
+                folderGrid.value = false
+            } else {
+                folderGrid.value = true
+            }
+        }
+        //点击收藏后刷新文件
+        const refreshFile = ()=>{
+            if(thisFolder.value){//如果点开了文件夹
+            // console.log(111);
+               folderClick()
+            }else{
+            // console.log(222);
+                getAllTop()
+            }
+        }
+        // 取消文件收藏
+        const delCollect = async (row,e)=>{
+            const thisRow = toRaw(row)
+            console.log('thisRow',thisRow);
+            // console.log('e',e);
+            if(thisRow.dirType){
+                const res = await delFavorite(thisRow.dirId)
+            }else{
+                const res = await delFavorite(thisRow.docId)
+            }
+            console.log('res',res);
         }
         onMounted(() => {
             getAllTop()
             getSpaceList()
             // 添加监听，点击其他地方关闭文件夹右键菜单
             window.addEventListener("click", closeRMenu, true);
-            window.addEventListener("click", mouseClick);
+            window.addEventListener("click", mouseClick, true);
         })
         return {
             getSpaceList,
@@ -1248,7 +1391,16 @@ export default {
             folderGrid,
             gridChange,
             collectFolder,
-            arrowLift
+            arrowLift,
+            formatStorage,
+            showFile,
+            navBack,
+            onlineCase,
+            lastBB,
+            shareBack,
+            folderBack,
+            refreshFile,
+            delCollect
         }
     },
     watch: {
@@ -1348,7 +1500,7 @@ p {
 
 .useBox {
     width: 100%;
-    height: 96px;
+    height: 24px;
 }
 
 .tables {
@@ -1429,6 +1581,7 @@ p {
 .fileTable {
     height: 100%;
     overflow-y: hidden;
+    margin-top: 55px;
 }
 
 .setCli {
@@ -1450,8 +1603,6 @@ p {
     width: 156px;
     height: auto;
     position: absolute;
-    top: 185px;
-    left: 455px;
     background-color: white;
     border: 1px solid gray;
     border-radius: 4px;

src/views/myfile/components/FileEdit.vue

@@ -98,8 +98,8 @@ export default {
             oo(docId, true);
         }
         onMounted(() => {
-            // console.log(docId, 'doc');
-            // console.log(copyRow, 'row');
+            console.log(docId, 'doc');
+            console.log(copyRow, 'row');
             edit()
             // let row = JSON.parse(newObj.value)
             // console.log(row, '852');

src/views/myfile/components/FileTree.vue

@@ -28,7 +28,7 @@ export default {
             required: true
         },
         fileId: {
-            type: String,
+            type: Number,
             required: true
         },
         copyOrMove: {

src/views/myfile/components/PalaceGridFile.vue

@@ -2,32 +2,83 @@
     <div>
         <!-- flex盒子 -->
         <div class="bigBox">
-            <template v-for="(item,index) in fileList">
+            <template v-for="(item, index) in fileList">
                 <!-- 循环盒子 -->
-                <div>
+                <div class="flexBox" @contextmenu="rightClick(item, $event)">
                     <!-- 图片 -->
-                    <div>
-                        <img :src="getImage(item.fileType)" alt="">
+                    <div class="imgBox">
+                        <img :src="getImage(item.fileType)" alt="" style="vertical-align: middle;">
                     </div>
                     <!-- 名称 -->
-                    <div>
-                        <p>{{ item.fileName }}</p>
+                    <div class="nameBox">
+                        <p class="nameName">{{ item.fileName }}</p>
                     </div>
                 </div>
             </template>
+            <div class="setCli" v-if="cliCC" :style="{ left: xz + 'px', top: (yz - 330) + 'px' }">
+                <template v-for="(item, index) in filterMouseCli()">
+                    <p @click="chooseSet(item, index, 1)" class="chooseSet">
+                        <img :src="item.img" alt="">
+                        {{ item.name }}
+                        <span v-if="item.name == '协作' ? true : false"
+                            style="color: #7084B4;float: right;position: relative;" class="arrow">></span>
+                    </p>
+                </template>
+            </div>
+            <div class="setCli1" v-if="anyP" :style="{ left: xz + 155 + 'px', top: yz - 50 + 'px' }">
+                <p @click="chooseSet1(0)" class="chooseSet">
+                    <img src="../../../assets/images/user.png" alt="">
+                    选择人员
+                </p>
+                <p class="chooseSet" @click="goLock">
+                    <img src="../../../assets/images/archiveTray.png" alt="">
+                    归档
+                </p>
+            </div>
+            <!-- <div>
+                <TransferModal v-if="thanks" :thanks="thanks" :clickRowId="clickRowId" :workOrEdit="workOrEdit"
+                    @getCback="getCback"></TransferModal>
+            </div> -->
+            <!-- 复制粘贴 -->
+            <div>
+                <FileTree v-if="fileTrees" :fileTrees="fileTrees" :newSpaceId="newSpaceId" :fileId="clickRowId"
+                    @getChildren="getChildren" :copyOrMove="copyOrMove"></FileTree>
+            </div>
+            <div>
+                <ImgPreview :previewData="previewData" :copyFileType="copyFileType" :showPreview="showPreview"
+                    @closeImgPreview="closeImgPreview"></ImgPreview>
+            </div>
+            <div>
+                <FileCollect v-if="collects" :collects="collects" @getCollects="getCollects" :copyFileName="copyFileName"
+                    :copyFileId="copyFileId" :isFolder="isFolder" :clickRow="clickRow"></FileCollect>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
-import { ref, onMounted } from "vue"
+import { ref, onMounted, watch } from "vue"
 import { ElMessage } from "element-plus";
 import myfile from "../../../api/myfile/myfile";
 import documents from "../../../api/document/document";
+import fileCount from "../../../api/fileCount/fileCount";
+import TransferModal from '../modalComponebts/Transfer.vue'
+import ImgPreview from '@/components/ImgPreview/ImgPreview.vue'
+import FileCollect from '../modalComponebts/FileCollect.vue'
+import FileEdit from './FileEdit.vue'
+import FileTree from './FileTree.vue'
 import ImgFile from "../jsComponents/ImgFile";
-// import bigFolder from '../../../assets/images/folderBig.png'
+import { canPreviewFile } from "@/utils/index.js"
+import { preview } from "@/api/common/common.js";
+import { listVersion } from "@/api/biz/version";
 export default {
-    setup() {
+    props: {
+        getAllTop: {
+            type: Function,
+            required: true
+        },
+    },
+    setup(props, { emit }) {
         let impDirId = ref(0)
         let impSpaceId = ref(0)
         let newSpaceId = ref(0)
@@ -37,6 +88,88 @@ export default {
         let folderList = ref([])
         let fileTotal = ref(0)
         let fileMenu = ref([])
+        let isFolder = ref("")
+        let clickRow = ref({})
+        let copyRow = ref("")
+        let clickRowId = ref("")
+        let copyDirId = ref("")
+        let copySpaceId = ref("")
+        let copyFileId = ref("")
+        let copyFileSize = ref("")
+        let copyFileType = ref("")
+        let workOrEdit = ref(0)
+        let copyOrMove = ref(0)
+        let nameForm = ref({
+            name: ""
+        })
+        const historycopyRow = ref({})
+        let copyFileName = ref("")
+        let yz = ref(0)
+        let xz = ref(0)
+        let cliCC = ref(false)
+        let anyP = ref(false)
+        let thanks = ref(false)
+        let fileTrees = ref(false)
+        let onlyView = ref(false)
+        let editOnline = ref(false)
+        let showPreview = ref(false)
+        let historyPrew = ref(false)
+        let fileNameChange = ref(false)
+        let collects = ref(false)
+        let openForwardFile = ref(false)
+        let historyTotal = ref(0)
+        const fileUserTreeData = reactive({ data: {} });
+        let previewData = ref()
+        let mouseCli = ref([
+            {
+                img: ImgFile.previewIcon,
+                name: "预览"
+            },
+            {
+                img: ImgFile.addolder,
+                name: "移动到...",
+            },
+            {
+                img: ImgFile.copy,
+                name: "复制到...",
+            },
+            {
+                img: ImgFile.collect,
+                name: "收藏"
+            },
+            {
+                img: ImgFile.downLoad,
+                name: "下载"
+            },
+            {
+                img: ImgFile.textbox,
+                name: "重命名"
+            },
+            {
+                img: ImgFile.share,
+                name: "分享"
+            },
+            {
+                img: ImgFile.notePencil,
+                name: "在线编辑"
+            },
+            {
+                img: ImgFile.togger,
+                name: "协作"
+            },
+            {
+                img: ImgFile.icc,
+                name: "文字识别"
+            },
+            {
+                img: ImgFile.history,
+                name: "历史版本"
+            },
+            {
+                img: ImgFile.trash,
+                name: "删除"
+            }
+        ])
         // 获取文件夹，中栏，文件
         function getAllTop() {
             documents.getTop(3).then(res => {
@@ -79,10 +212,9 @@ export default {
         }
         // 筛选后缀图片
         function getImage(file) {
-            console.log(file,'file');
             if (file === '.txt') {
                 return ImgFile.bigTxt
-            } else if (file === '.xlxs' || file === '.docx') {
+            } else if (file === '.xlxs' || file === '.docx' || file === '.xls') {
                 return ImgFile.bigxlsx
             } else if (file === '.pptx') {
                 return ImgFile.bigpptx
@@ -90,10 +222,202 @@ export default {
                 return ImgFile.bigdoc
             } else if (file === '.pdf') {
                 return ImgFile.bigpdf
+            } else if (file === ".mp3") {
+                return ImgFile.audio
+            } else if (file === '.mp4') {
+                return ImgFile.video
+            } else if (file === ".png" || file === ".jpg") {
+                return ImgFile.pic
+            } else {
+                return ImgFile.elseFile
+            }
+        }
+        function rightClick(row, event) {
+            event.preventDefault()
+            isFolder.value = "N"
+            clickRow.value = row
+            xz.value = event.pageX
+            yz.value = event.pageY
+            copyRow.value = row
+            clickRowId.value = row.docId
+            copyDirId.value = row.dirId
+            copySpaceId.value = row.spaceId
+            copyFileId.value = row.fileId
+            copyFileSize.value = row.fileSize
+            copyFileType.value = row.fileType
+            nameForm.value.name = row.fileName
+            copyFileName.value = row.fileName
+            if (cliCC.value === true) {
+                cliCC.value = false
+            } else {
+                cliCC.value = true
+            }
+        }
+        //对mouseCli数组进行筛选，实现菜单的区分显示
+        const filterMouseCli = () => {
+            const canPreviewArray = ['.doc', '.docm', '.docx', '.dot', '.dotm', '.dotx', '.epub', '.fodt', '.htm', '.html', '.mht', '.odt', '.ott', '.pdf', '.rtf', '.txt', '.djvu', '.xps', 'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx', 'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx']
+            const typeArr = ['.png', '.jpg', '.jpeg', '.JPG', '.mp3', '.mp4']
+            const imgTypeArr = ['.png', '.jpg', '.jpeg', '.JPG']
+            const canEditArr = ['.doc', '.docm', '.docx', '.dot', '.dotm', '.dotx', '.txt', '.djvu', '.xps', 'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx', 'fodp', 'odp', 'otp']
+            let arr = []
+            if (!(typeArr.includes(copyFileType.value) || canPreviewArray.includes(copyFileType.value))) {
+                arr = mouseCli.value.filter(item => item.name !== "预览")
+            } else {
+                arr = toRaw(mouseCli.value)
+            }
+            if (!canEditArr.includes(copyFileType.value)) {
+                arr = arr.filter(item => item.name !== "在线编辑" && item.name !== "协作" && item.name !== "历史版本")
+            }
+            if (!imgTypeArr.includes(copyFileType.value)) {
+                arr = arr.filter(item => item.name !== "文字识别")
+            }
+            return arr
+        }
+        function mouseClick() {
+            if (cliCC.value) {
+                cliCC.value = false
+            }
+            if (anyP) {
+                anyP.value = false
+            }
+        }
+        async function chooseSet(row, index, num) {
+
+            if (row.name == '协作') {
+                cliCC.value = true
+            } else {
+                cliCC.value = false
+            }
+            if (row.name == '分享') {
+                workOrEdit.value = num
+                thanks.value = true
+                emit("shareBack", thanks.value, workOrEdit.value)
+            } else {
+                thanks.value = false
+            }
+            if (row.name == '协作') {
+                if (anyP.value) {
+                    anyP.value = false
+                } else {
+                    anyP.value = true
+                }
+            } else {
+                anyP.value = false
+            }
+            console.log(anyP.value, 'anyp');
+            if (row.name == '删除') {
+                myfile.delMenu(clickRowId.value).then(res => {
+                    if (res.code === 200) {
+                        ElMessage({
+                            type: "success",
+                            message: "删除成功"
+                        })
+                        getAllTop()
+                    }
+                })
+            }
+            if (row.name === '复制到...') {
+                copyOrMove.value = 0
+                fileTrees.value = true
+            }
+            if (row.name === '移动到...') {
+                copyOrMove.value = 1
+                fileTrees.value = true
+            }
+            if (row.name === '重命名') {
+                fileNameChange.value = true
+                emit("navBack", fileNameChange.value, nameForm.value.name)
+            }
+            if (row.name === "下载") {
+                location.href = `${import.meta.env.VITE_APP_BASE_API}/api/download/${copyFileId.value}`;
+            }
+            if (row.name === '收藏') {
+                collects.value = true
+            }
+            if (row.name === '在线编辑') {
+                editOnline.value = false
+                emit("onlineCase", editOnline.value, clickRowId.value, copyRow.value)
+            }
+            if (row.name === '文字识别') {
+                router.push({
+                    path: '/identifyFont',
+                    query: {
+                        fileId: copyFileId.value,
+                        fileType: copyFileType.value
+                    }
+                })
+            }
+            if (row.name === '预览') {
+                // editOnline.value = true
+                // emit("showFile", false)
+                const filePreview = canPreviewFile(copyFileType.value)
+                if (filePreview) {
+                    onlyView.value = true
+                    emit("showFile", false, clickRowId.value, copyRow.value)
+                    cliCC.value = false
+                } else {
+                    showPreview.value = true
+                    const res = await preview(copyFileId.value)
+                    previewData.value = URL.createObjectURL(res)
+                }
+                showPreview.value = true
+                const res = await preview(copyFileId.value)
+                previewData.value = URL.createObjectURL(res)
+            } else if (row.name === "历史版本") {
+                const resHistory = await listVersion({ docId: clickRowId.value })
+                historyTotal.value = resHistory.total
+                fileUserTreeData.data = resHistory.rows;
+                openForwardFile.value = true
+                emit("lastBB", openForwardFile.value, historyTotal.value, fileUserTreeData.data)
+            }
+        }
+        function changeMsgClose(val, item) {
+            if (val) {
+                historycopyRow.value = item
+                editOnline.value = false
+                cliCC.value = false
+                historyPrew.value = true
             }
+            openForwardFile.value = val
+        }
+
+        function chooseSet1(num) {
+            workOrEdit.value = num
+            thanks.value = true
+            anyP.value = false
+            emit("shareBack", thanks.value, workOrEdit.value)
+        }
+        function getChildren(data) {
+            fileTrees.value = data
+        }
+        function getCback(data) {
+            thanks.value = data
+        }
+        function closeImgPreview(data) {
+            showPreview.value = data
+        }
+        function cancleHistoryPrew(data) {
+            historyPrew.value = false
+        }
+        function getCollects(data) {
+            collects.value = false
+        }
+        // 归档
+        function goLock() {
+            fileCount.lockActor(clickRowId.value).then(res => {
+                if (res.code === 200) {
+                    ElMessage({
+                        type: "success",
+                        message: "归档成功"
+                    })
+                    cliCC.value = false
+                    anyP.value = false
+                }
+            })
         }
         onMounted(() => {
             getAllTop()
+            window.addEventListener("click", mouseClick, true);
         })
         return {
             getAllTop,
@@ -106,9 +430,141 @@ export default {
             folderList,
             fileTotal,
             getImage,
+            rightClick,
+            filterMouseCli,
+            copyRow,
+            clickRow,
+            clickRowId,
+            copyDirId,
+            copySpaceId,
+            copyFileId,
+            copyFileSize,
+            copyFileType,
+            nameForm,
+            copyFileName,
+            cliCC,
+            mouseClick,
+            anyP,
+            xz,
+            yz,
+            chooseSet,
+            chooseSet1,
+            thanks,
+            FileTree,
+            fileTrees,
+            getCback,
+            getChildren,
+            copyOrMove,
+            onlyView,
+            editOnline,
+            showPreview,
+            ImgPreview,
+            previewData,
+            closeImgPreview,
+            FileEdit,
+            cancleHistoryPrew,
+            historycopyRow,
+            changeMsgClose,
+            historyPrew,
+            getCollects,
+            collects,
+            fileNameChange,
+            editOnline,
+            goLock,
         }
+    },
+    components: {
+        TransferModal,
+        FileTree,
+        ImgPreview,
+        FileEdit,
+        FileCollect,
     }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped>
+.bigBox {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.imgBox {
+    width: 88px;
+    height: 88px;
+    text-align: center;
+    line-height: 88px;
+}
+
+.flexBox {
+    width: 104px;
+    height: 148px;
+    position: relative;
+}
+
+.nameName {
+    width: 100%;
+    white-space: nowrap;
+    /* 禁止文本换行 */
+    overflow: hidden;
+    /* 隐藏溢出部分文本 */
+    text-overflow: ellipsis;
+    /* 显示省略号 */
+}
+
+.setCli {
+    width: 156px;
+    max-height: auto;
+    position: absolute;
+    flex-wrap: 400;
+    background-color: white;
+    border: 1px solid gray;
+    border-radius: 4px;
+    z-index: 3;
+    overflow-y: auto;
+    /* // font-size: 16px; */
+}
+
+.setCli1 {
+    width: 156px;
+    height: auto;
+    position: absolute;
+    background-color: white;
+    border: 1px solid gray;
+    border-radius: 4px;
+    z-index: 2;
+    overflow-y: auto;
+}
+
+.chooseSet {
+    width: 140px;
+    height: 30px;
+    line-height: 30px;
+    margin: 5px auto;
+    font-size: 13px;
+    /* 
+    display: flex;
+    align-items: center;
+    position: relative; */
+
+}
+
+.chooseSet img {
+    margin-right: 4px;
+    vertical-align: middle;
+}
+
+.chooseSet:hover {
+    width: 140px;
+    height: 30px;
+    line-height: 30px;
+    margin: 5px auto;
+    font-size: 13px;
+    background-color: #F5F7F9;
+    /* color: white; */
+}
+</style>

src/views/myfile/components/PlaceGridFolder.vue

@@ -1,14 +1,86 @@
 <template>
     <div>
-
+        <div>
+            <!-- flex盒子 -->
+            <div class="bigBox">
+                <template v-for="(item, index) in folderList">
+                    <!-- 循环盒子 -->
+                    <div class="flexBox" @contextmenu="rightClick(item, index, $event)">
+                        <!-- 图片 -->
+                        <div class="imgBox">
+                            <img src="../../../assets/images/folderBig.png" alt="" style="vertical-align: middle;">
+                        </div>
+                        <!-- 名称 -->
+                        <div class="nameBox">
+                            <p class="nameName">{{ item.dirName }}</p>
+                        </div>
+                    </div>
+                </template>
+                <!-- 右键唤出的菜单 -->
+                <div class="rightList" v-if="folderVisible"
+                    :style="{ left: folderleft + 30 + 'px', top: foldertop - 50 + 'px' }">
+                    <div class="menu_item" @click="fatherOpen(null, null)">
+                        <img src="@/assets/images/trash.png" alt="" />
+                        <span>打开</span>
+                    </div>
+                    <div class="menu_item" @click="fatherRest(null, null)">
+                        <img src="@/assets/images/textbox.png" alt="" />
+                        <span>重命名</span>
+                    </div>
+                    <div class="menu_item" @click="fatherCollect">
+                        <img src="@/assets/images/collect.png" alt="" />
+                        <span>收藏</span>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
-import {ref,onMounted} from "vue"
+import { ref, onMounted } from "vue"
 import { ElMessage } from "element-plus";
+import myfile from "../../../api/myfile/myfile";
+import documents from "../../../api/document/document";
+import ImgFile from "../jsComponents/ImgFile";
+import PalaceGridFile from "./PalaceGridFile.vue";
 export default {
-    setup () {
+    props: {
+        folderClick: {
+            type: Function,
+            required: true,
+        },
+        restName: {
+            type: Function,
+            required: true
+        },
+        collectFolder: {
+            type: Function,
+            required: true
+        },
+        getAllTop: {
+            type: Function,
+            required: true
+        },
+
+    },
+    setup(props, { emit }) {
+        let impDirId = ref(0)
+        let impSpaceId = ref(0)
+        let newSpaceId = ref(0)
+        let newDirId = ref(0)
+        let topPath = ref("")
+        let fileList = ref([])
+        let folderList = ref([])
+        let fileTotal = ref(0)
+        let fileMenu = ref([])
+        let folderleft = ref(0)
+        let foldertop = ref(0)
+        let folderVisible = ref(false)
+        let copyDir = ref(0)
+        let copySpa = ref(0)
+        let copyNma = ref("")
+        let copyFir = ref("")
         // 获取文件夹，中栏，文件
         function getAllTop() {
             documents.getTop(3).then(res => {
@@ -47,14 +119,127 @@ export default {
                 })
             })
         }
-
+        function rightClick(row, num, eve) {
+            eve.preventDefault();
+            eve.stopPropagation();
+            folderleft.value = eve.pageX
+            foldertop.value = eve.pageY
+            copyDir.value = row.dirId
+            copySpa.value = row.spaceId
+            copyNma.value = row.dirName
+            copyFir.value = row.dirName
+            if (folderVisible.value) {
+                folderVisible.value = false
+            } else {
+                folderVisible.value = true
+            }
+        }
+        function mouseClick() {
+            folderVisible.value = false
+        }
+        function fatherOpen(a, b) {
+            documents.getALLdocument({
+                parentId: copyDir.value - 0,
+                spaceId: copySpa.value - 0
+            }).then(res => {
+                folderList.value = res.data
+                if (res.data.length === 0) {
+                    myfile.getById(copyDir.value).then(res => {
+                        if (res.code === 200) {
+                            fileList.value = res.rows
+                        }
+                    })
+                } else {
+                    myfile.getById(copyDir.value).then(res => {
+                        if (res.code === 200) {
+                            fileList.value = res.rows
+                        }
+                    })
+                }
+            })
+        }
+        function fatherCollect() {
+            emit("folderBack", copyNma.value, copyFir.value)
+            props.collectFolder()
+        }
+        function fatherRest(a, b) {
+            props.restName(a, b)
+            emit('folderBack', copyDir.value, copySpa.value, copyNma.value)
+        }
+        onMounted(() => {
+            getAllTop()
+            window.addEventListener("click", mouseClick, true);
+        })
         return {
-
+            getAllTop,
+            impDirId,
+            impSpaceId,
+            newDirId,
+            newSpaceId,
+            fileList,
+            fileMenu,
+            folderList,
+            fileTotal,
+            rightClick,
+            folderleft,
+            foldertop,
+            folderVisible,
+            mouseClick,
+            fatherCollect,
+            fatherOpen,
+            fatherRest,
+            copyDir,
+            copySpa,
+            copyNma,
+            copyFir,
         }
+    },
+    components:{
+        PalaceGridFile,
     }
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+.bigBox {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.imgBox {
+    width: 88px;
+    height: 88px;
+    text-align: center;
+    line-height: 88px;
+}
+
+.flexBox {
+    width: 104px;
+    height: 148px;
+    position: relative;
+}
 
+.nameName {
+    width: 100%;
+    text-align: center;
+    white-space: nowrap;
+    /* 禁止文本换行 */
+    overflow: hidden;
+    /* 隐藏溢出部分文本 */
+    text-overflow: ellipsis;
+    /* 显示省略号 */
+}
+
+.rightList {
+    width: 100px;
+    height: auto;
+    position: absolute;
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 5px;
+}
 </style>

src/views/myfile/jsComponents/ImgFile.js

@@ -35,6 +35,10 @@ import bigxlsx from '../../../assets/images/xlsxBig.png'
 import bigpdf from '../../../assets/images/pdfBig.png'
 import bigdoc from '../../../assets/images/docBig.png'
 import bigpptx from '../../../assets/images/pptxBig.png'
+import audio from '../../../assets/images/audio.png'
+import video from '../../../assets/images/video.png'
+import pic from '../../../assets/images/pic.png'
+import elseFile from '../../../assets/images/elseFile.png'
 export default {
     copy,
     clipboard,
@@ -72,4 +76,8 @@ export default {
     bigpdf,
     bigpptx,
     bigxlsx,
+    audio,
+    video,
+    pic,
+    elseFile,
 }

src/views/myfile/jsComponents/brother.js

@@ -0,0 +1,2 @@
+import {ref} from 'vue'
+export let shareData = ref([])

src/views/myfile/modalComponebts/CreateFloder.vue

@@ -34,38 +34,38 @@ export default {
             type: Number,
             required: true
         },
-        impDirId:{
-            type:Number,
-            required:true
+        impDirId: {
+            type: Number,
+            required: true
         },
-        impSpaceId:{
-            type:Number,
-            required:true
+        impSpaceId: {
+            type: Number,
+            required: true
         },
-        newDirId:{
-            type:Number,
-            required:true
+        newDirId: {
+            type: Number,
+            required: true
         },
-        newSpaceId:{
-            type:Number,
-            required:true
+        newSpaceId: {
+            type: Number,
+            required: true
         },
-        getAllTop:Function,
+        getAllTop: Function,
     },
     setup(props, { emit }) {
-        let { addBack, sureAddBoser,diClose } = toRef(props)
+        let { addBack, sureAddBoser, diClose } = toRef(props)
         let result = props.folderCase
         let free = props.oneOrTwo
         let spId = props.impSpaceId
         let drId = props.impDirId
-        let newspid=props.newSpaceId
+        let newspid = props.newSpaceId
         let newdrid = props.newDirId
         let addBoser = ref(false)
         let boserForm = ref({
             dirName: "",
         })
         function inital() {
-            console.log(free,'free');
+            console.log(free, 'free');
             addBoser.value = result
         }
         function backTo() {
@@ -73,43 +73,51 @@ export default {
             emit("getChildrenC", addBoser.value)
         }
         function addFloder() {
-            if (free === 1) {
-                documents.addDocument(
-                    {
-                        "dirName": boserForm.value.dirName,
-                        "parentId": drId - 0,
-                        "spaceId": spId - 0,
-                    }
-                ).then(res => {
-                    if (res.code === 200) {
-                        ElMessage({
-                            message: '添加一级目录成功',
-                            type: 'success',
-                        })
-                    }
-                    addBoser.value = false
-                    emit("getChildrenC", addBoser.value)
-                    props.getAllTop()
+            if (boserForm.value.dirName === '') {
+                ElMessage({
+                    type: "error",
+                    message: "目录名称不能为空"
                 })
             } else {
-                documents.addDocument(
-                    {
-                        "dirName": boserForm.value.dirName,
-                        "parentId": newdrid - 0,
-                        "spaceId": newspid - 0,
-                    }
-                ).then(res => {
-                    if (res.code === 200) {
-                        ElMessage({
-                            message: '添加成功',
-                            type: 'success',
-                        })
-                    }
-                    addBoser.value = false
-                    emit("getChildrenC", addBoser.value)
-                    props.getAllTop()
-                })
+                if (free === 1) {
+                    documents.addDocument(
+                        {
+                            "dirName": boserForm.value.dirName,
+                            "parentId": drId - 0,
+                            "spaceId": spId - 0,
+                        }
+                    ).then(res => {
+                        if (res.code === 200) {
+                            ElMessage({
+                                message: '添加一级目录成功',
+                                type: 'success',
+                            })
+                        }
+                        addBoser.value = false
+                        emit("getChildrenC", addBoser.value)
+                        props.getAllTop()
+                    })
+                } else {
+                    documents.addDocument(
+                        {
+                            "dirName": boserForm.value.dirName,
+                            "parentId": newdrid - 0,
+                            "spaceId": newspid - 0,
+                        }
+                    ).then(res => {
+                        if (res.code === 200) {
+                            ElMessage({
+                                message: '添加成功',
+                                type: 'success',
+                            })
+                        }
+                        addBoser.value = false
+                        emit("getChildrenC", addBoser.value)
+                        props.getAllTop()
+                    })
+                }
             }
+
         }
         onMounted(() => {
             inital()
@@ -119,8 +127,8 @@ export default {
             boserForm,
             inital,
             addBack: backTo,
-            sureAddBoser:addFloder,
-            diClose:backTo,
+            sureAddBoser: addFloder,
+            diClose: backTo,
             spId,
             drId,
             newdrid,

src/views/myfile/modalComponebts/FileCollect.vue

@@ -112,6 +112,7 @@ export default {
         }
         // 确认收藏
         function sureCollect() {
+            // console.log('clickRow',props.clickRow.value);
             let query = {}
             if(props.isFolder === "Y"){
                 query = {
@@ -136,6 +137,7 @@ export default {
             })
             fileCollect.value = false
             emit("getCollects", fileCollect.value)
+            emit("refreshFile")
         }
         function tobacks() {
             fileCollect.value = false

src/views/myfile/modalComponebts/SpaceBig.vue

@@ -56,13 +56,13 @@ export default {
             emit("getSpaceC", askTo.value)
         }
         function addSpace() {
-            // fileSpace.addSpace({
-            //     spaceId: spid - 0,
-            //     expandCap: spaceForm.value.newCup - 0,
-            //     expandReason: spaceForm.value.newTalk
-            // }).then(res => {
-            //     console.log(res,'ssq');
-            // })
+            fileSpace.addSpace({
+                spaceId: spid - 0,
+                expandCap: spaceForm.value.newCup - 0,
+                expandReason: spaceForm.value.newTalk
+            }).then(res => {
+                console.log(res,'ssq');
+            })
             askTo.value = false
             emit("getSpaceC", askTo.value)
         }

src/views/myjoin/MyJoin.vue

@@ -0,0 +1,177 @@
+<template>
+    <div>
+        <div class="bigBox">
+            <!-- 功能 -->
+            <div class="tabBox">
+                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" tab-position="top">
+                    <el-tab-pane label="我发起的" name="first">
+                        <div>
+                            <el-button @click="newFileAdd">新建文件</el-button>
+                        </div>
+                        <div>
+                            <el-table :data="myEjoy" style="width: 100%">
+                                <el-table-column type="selection" width="55" />
+                                <el-table-column label="名称" width="200">
+                                    <template #default="scope">
+                                        <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
+                                            <el-icon v-if="collectImg">
+                                                <Star />
+                                            </el-icon>
+                                            <img v-else src="../../assets/images/yellowstar.png" alt="">
+                                            <img :src="getImage(scope.row.fileType)" alt="">
+                                            {{ scope.row.fileName }}
+                                        </span>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column prop="createTime" label="时间" sortable width="180" />
+                                <el-table-column prop="fileType" label="类型" />
+                                <el-table-column label="大小">
+                                    <template #default="scope">
+                                        <span>
+                                            {{ formatFileSize(scope.row.fileSize) }}
+                                        </span>
+                                    </template>
+                                </el-table-column>
+                            </el-table>
+                        </div>
+                    </el-tab-pane>
+                    <el-tab-pane label="我参与的" name="second">
+                        <el-table :data="myPack" style="width: 100%">
+                            <el-table-column type="selection" width="55" />
+                            <el-table-column label="名称" width="200">
+                                <template #default="scope">
+                                    <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
+                                        <el-icon v-if="collectImg">
+                                            <Star />
+                                        </el-icon>
+                                        <img v-else src="../../assets/images/yellowstar.png" alt="">
+                                        <img :src="getImage(scope.row.fileType)" alt="">
+                                        {{ scope.row.fileName }}
+                                    </span>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="createTime" label="时间" sortable width="180" />
+                            <el-table-column prop="fileType" label="类型" />
+                            <el-table-column label="大小">
+                                <template #default="scope">
+                                    <span>
+                                        {{ formatFileSize(scope.row.fileSize) }}
+                                    </span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </el-tab-pane>
+                </el-tabs>
+            </div>
+            <!-- 新增文件盒子 -->
+            <div>
+                <AddFile v-if="newAdd" :newAdd="newAdd" @threeBe="threeBe"></AddFile>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue'
+import fileCount from '../../api/fileCount/fileCount';
+import ImgFile from '../myfile/jsComponents/ImgFile';
+import AddFile from './components/AddFile.vue'
+import { ElMessage } from 'element-plus';
+export default {
+    setup() {
+        const activeName = ref('first')
+        let collectImg = ref(true)
+        let myEjoy = ref([])
+        let myPack = ref([])
+        let newAdd = ref(false)
+        function getCountPeople() {
+            fileCount.myCount({}).then(res => {
+                myEjoy.value = res.rows
+            })
+        }
+        function getMyJoin() {
+            fileCount.myJoin({}).then(res => {
+                myPack.value = res.rows
+            })
+        }
+        function handleClick(data, e) {
+            console.log(data, e, 'tab');
+        }
+        function getImage(file) {
+            if (file === '.txt') {
+                return ImgFile.txt
+            } else if (file === '.xlxs' || file === '.docx') {
+                return ImgFile.xlxs
+            } else if (file === '.pptx') {
+                return ImgFile.pptx
+            } else if (file === '.word') {
+                return ImgFile.word
+            } else if (file === '.pdf') {
+                return ImgFile.pdf
+            }
+        }
+        function formatFileSize(fileSize) {
+            if (fileSize >= 1024 * 1024 * 1024) {
+                // 大于等于1GB，显示GB
+                return (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'GB';
+            } else if (fileSize >= 1024 * 1024) {
+                // 大于等于1MB，显示MB
+                return (fileSize / (1024 * 1024)).toFixed(2) + 'MB';
+            } else if (fileSize >= 1024) {
+                // 大于等于1KB，显示KB
+                return (fileSize / 1024).toFixed(2) + 'KB';
+            } else {
+                // 小于1KB，显示字节
+                return fileSize + 'B';
+            }
+        }
+        function newFileAdd(){
+            newAdd.value = true
+        }
+        function threeBe(data){
+            newAdd.value = data
+        }
+        onMounted(() => {
+            getCountPeople()
+            getMyJoin()
+        })
+        return {
+            activeName,
+            handleClick,
+            myEjoy,
+            myPack,
+            getCountPeople,
+            getMyJoin,
+            collectImg,
+            getImage,
+            formatFileSize,
+            newAdd,
+            newFileAdd,
+            threeBe,
+        }
+    },
+    components:{
+        AddFile,
+    }
+}
+</script>
+
+<style scoped>
+.bigBox {
+    width: 100%;
+    height: 92vh;
+    margin: 0 auto;
+    background-color: white;
+}
+
+.tabBox {
+    width: 100%;
+    height: 40px;
+    margin: 0 auto;
+    background-color: #F5F7F9;
+}
+
+:deep(.el-tabs__nav) {
+    margin: 0 calc(100% - 55%);
+}
+</style>

src/views/myjoin/components/AddFile.vue

@@ -0,0 +1,140 @@
+<template>
+    <div>
+        <div>
+            <el-dialog v-model="addFile" title="新建文件" width="30%" @close="backTo">
+                <el-form :model="createFile">
+                    <el-form-item label="文件目录">
+                        <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
+                    </el-form-item>
+                    <el-form-item label="你选择的目录是">
+                        <p>{{ nowFolder }}</p>
+                    </el-form-item>
+                    <el-form-item label="文件名">
+                        <el-input v-model="createFile.name" maxlength="150" placeholder="请输入文件名" type="textarea" />
+                    </el-form-item>
+                    <el-form-item label="文件类型">
+                        <el-select v-model="createFile.fileType" clearable placeholder="Select" @change="optChange">
+                            <el-option v-for="item in typeF" :key="item.value" :label="item.label" :value="item.value" />
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <template #footer>
+                    <span class="dialog-footer">
+                        <el-button @click="back">取消</el-button>
+                        <el-button type="primary" @click="sureAddFile">
+                            确定
+                        </el-button>
+                    </span>
+                </template>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, toRef } from 'vue'
+import fileCount from "../../../api/fileCount/fileCount"
+import documents from '../../../api/document/document';
+export default {
+    props: {
+        newAdd: {
+            type: Boolean,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let { sureAddFile, back } = toRef(props)
+        let result = props.newAdd
+        let createFile = ref({
+            name: "",
+            fileType: ""
+        })
+        let treeData = ref([])
+        let defaultProps = ref({
+            label: "label",
+            value: "id",
+            disable: false
+        })
+        let typeF = ref([
+            {
+                label: "word",
+                value: "word"
+            },
+            {
+                label: "excel",
+                value: "excel"
+            },
+            {
+                label: "ppt",
+                value: "ppt"
+            },
+            {
+                label: "txt",
+                value: "txt"
+            }
+        ])
+        let noChangeSpaceId = ref(0)
+        let dirIds = ref(0)
+        let addFile = ref(false)
+        let nowFolder = ref("")
+        function inlineList() {
+            addFile.value = result
+        }
+        //获取文件树
+        function getFileTree() {
+            documents.fileTree(3).then(res => {
+                treeData.value = [res]
+            })
+            documents.getTop(3).then(res => {
+                noChangeSpaceId.value = res.spaceId
+            })
+        }
+        function handleNodeClick(data) {
+            console.log(data, 'data');
+            dirIds.value = data.id
+            nowFolder.value = data.label
+        }
+        function backTo() {
+            addFile.value = false
+            emit('threeBe', addFile.value)
+        }
+        function everyDunk() {
+            fileCount.createFiles({
+                dirId: dirIds.value - 0,
+                spaceId: noChangeSpaceId.value - 0,
+                type: createFile.value.fileType + ""
+            }).then(res => {
+                console.log(res, 'rrr');
+                addFile.value = false
+                emit('threeBe', addFile.value)
+            })
+
+        }
+        function optChange(e) {
+            createFile.value.fileType = e
+        }
+        onMounted(() => {
+            inlineList()
+            getFileTree()
+        })
+        return {
+            createFile,
+            getFileTree,
+            treeData,
+            defaultProps,
+            handleNodeClick,
+            typeF,
+            addFile,
+            backTo,
+            noChangeSpaceId,
+            dirIds,
+            back: backTo,
+            sureAddFile: everyDunk,
+            nowFolder,
+            optChange,
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/system/user/profile/index.vue

@@ -1,7 +1,7 @@
 <template>
    <div class="app-container">
-      <el-row :gutter="20">
-         <el-col :span="6" :xs="24">
+      <div class="main">
+         <div class="right-main">
             <el-card class="box-card">
                <template v-slot:header>
                  <div class="clearfix">
@@ -11,37 +11,39 @@
                <div>
                   <div class="text-center">
                      <userAvatar :user="state.user" />
+                     <div class="user-name">{{ state.user.userName }}</div>
+                     <div class="emails">{{ state.user.email }}sfsdf</div>
                   </div>
-                  <ul class="list-group list-group-striped">
-                     <li class="list-group-item">
+                  <ul class="list-group list-group-striped" style="color: #505870 !important;">
+                     <!-- <li class="list-group-item">
                         <svg-icon icon-class="user" />用户名称
                         <div class="pull-right">{{ state.user.userName }}</div>
-                     </li>
+                     </li> -->
                      <li class="list-group-item">
-                        <svg-icon icon-class="phone" />手机号码
+                        <svg-icon icon-class="phone" class="tubiao"/>手机号码
                         <div class="pull-right">{{ state.user.phonenumber }}</div>
                      </li>
-                     <li class="list-group-item">
+                     <!-- <li class="list-group-item">
                         <svg-icon icon-class="email" />用户邮箱
                         <div class="pull-right">{{ state.user.email }}</div>
-                     </li>
+                     </li> -->
                      <li class="list-group-item">
-                        <svg-icon icon-class="tree" />所属部门
+                        <svg-icon icon-class="tree" class="tubiao"/>所属部门
                         <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
                      </li>
                      <li class="list-group-item">
-                        <svg-icon icon-class="peoples" />所属角色
+                        <svg-icon icon-class="peoples" class="tubiao"/>所属角色
                         <div class="pull-right">{{ state.roleGroup }}</div>
                      </li>
                      <li class="list-group-item">
-                        <svg-icon icon-class="date" />创建日期
+                        <svg-icon icon-class="date" class="tubiao"/>创建日期
                         <div class="pull-right">{{ state.user.createTime }}</div>
                      </li>
                   </ul>
                </div>
             </el-card>
-         </el-col>
-         <el-col :span="18" :xs="24">
+         </div>
+         <div class="left-main">
             <el-card>
                <template v-slot:header>
                  <div class="clearfix">
@@ -57,8 +59,8 @@
                   </el-tab-pane>
                </el-tabs>
             </el-card>
-         </el-col>
-      </el-row>
+         </div>
+      </div>
    </div>
 </template>
 
@@ -85,3 +87,54 @@ function getUser() {
 
 getUser();
 </script>
+<style lang="scss" scoped>
+
+.app-container {
+    padding: 20px;
+    height: 89vh; /* 设置高度为视口的100% */
+    display: flex;
+    flex-direction: column;
+  }
+  .main{
+   display: flex;justify-content: space-around;height: 100%;
+  }
+  .right-main{
+   width: 36%;margin-right: 16px;height: 100%;
+   border: 1px solid #C1CCE3;
+  }
+  .left-main{
+   flex: 1;height: 100%;
+   border: 1px solid #C1CCE3;
+  }
+  :deep(.el-card){
+   border: none !important;
+   --el-box-shadow-light:none;
+   .list-group-item{
+      border: none;
+   }
+  }
+ :deep(.el-card__header){
+   border: none !important;
+  }
+  .text-center{
+     .user-name{
+      margin-top: 8px;
+      font-size: 20px;
+     }
+   .emails{
+      margin-top: 8px;
+      font-size: 14px;
+      color: #06286C;
+   }
+  }
+  .list-group-item{
+   color: #505870;
+   .pull-right{
+   color: #000;
+  }
+  .tubiao{
+   margin-right: 4px;
+  }
+  }
+
+</style>

src/views/system/user/profile/userAvatar.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="user-info-head" @click="editCropper()">
     <img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
+    <img :src="PencilSimple" title="点击上传头像" class="img-bianji" />
     <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
       <el-row>
         <el-col :xs="24" :md="12" :style="{ height: '350px' }">
@@ -62,6 +63,7 @@
 import "vue-cropper/dist/index.css";
 import { VueCropper } from "vue-cropper";
 import { uploadAvatar } from "@/api/system/user";
+import PencilSimple from "@/assets/images/perCenter/PencilSimple.png";
 import useUserStore from "@/store/modules/user";
 
 const userStore = useUserStore();
@@ -166,4 +168,11 @@ function closeDialog() {
   line-height: 110px;
   border-radius: 50%;
 }
+.img-bianji{
+  position: absolute;
+  right: 8px;
+  bottom: 0;
+  width: 27.5px;
+  height: 27.5px;
+}
 </style>

vite.config.js

@@ -40,8 +40,8 @@ export default defineConfig(({
 				// https://cn.vitejs.dev/config/#server-proxy
 				'/dev-api': {
 					// target: 'http://192.168.1.28:8080/',
-					// target: 'http://8.142.173.95:19527/',
-					target:'http://192.168.1.11:8080/',
+					target: 'http://8.142.173.95:19527/',
+					// target:'http://192.168.1.28:8080/',
 					changeOrigin: true,
 					rewrite: (p) => p.replace(/^\/dev-api/, '')
 				},