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

src/layout/indexCommon.vue

@@ -8,10 +8,13 @@
           </div>
           <div class="search">
             <el-input
-              v-model="input3"
+              v-model="searchText"
               class="w-50 m-2"
               size="small"
+              placeholder="搜索文件"
               suffix-icon="Search"
+              @change="toSearch"
+
             />
           </div>
           <div>
@@ -95,9 +98,12 @@ import becommon from "@/assets/images/becommon.png";
 import chuanshu from "@/assets/images/chuanshu.png";
 import bechuanshu from "@/assets/images/bechuanshu.png";
 import { AppMain, Navbar, Settings, TagsView } from "./components";
+import { useRouter } from 'vue-router';
+const router = useRouter(); //注册路由
 const appStore = useAppStore()
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
+const searchText = ref('') //搜索ipt的值
 
 function toggleSideBar() {
   appStore.toggleSideBar()
@@ -128,6 +134,12 @@ function logout() {
   }).catch(() => { });
 }
 
+// 跳转到全文搜索
+const toSearch = ()=>{
+  console.log('searchText = ',searchText.value);
+  router.push('/search');
+  
+}
 const emits = defineEmits(['setLayout'])
 function setLayout() {
   emits('setLayout');
@@ -149,7 +161,7 @@ const menuList = reactive({
     },
     {
       label: "最近文件",
-      path: "/swagger",
+      path: "/recent",
       imgs: zuijin,
       beimgs: bezuijin,
     },
@@ -161,13 +173,13 @@ const menuList = reactive({
     },
     {
       label: "我的文件",
-      path: "/swagger",
+      path: "/myfile",
       imgs: my,
       beimgs: bemy,
     },
     {
       label: "部门文件",
-      path: "/swagger",
+      path: "/department",
       imgs: bumen,
       beimgs: bebumen,
     },

src/router/index.js

@@ -65,7 +65,7 @@ export const constantRoutes = [
     children: [
       {
         path: 'index',
-        component: () => import('@/layout/index2.vue'),
+        component: () => import('@/views/liveChat/index.vue'),
         name: 'index',
         meta: { title: '首页', icon: 'dashboard', affix: true }
       },
@@ -73,24 +73,76 @@ export const constantRoutes = [
         path:'swagger',
         component:() => import('@/views/tool/swagger/index.vue'),
         name:'swagger',
-        meta:{ title:'接口',icon: 'dashboard' },
+        meta:{ title:'接口',icon: 'dashboard' },      
         
+      },
+      {
+        path:'recent',
+        component:() => import('@/views/biz/recent/index.vue'),
+        name:'recent',
+        meta:{ title:'最近文件',icon: 'dashboard' },
+      },
+      {
+        path:'search',
+        component:() => import('@/views/search/index.vue'),
+        name:'search',
+        meta:{ title:'全文搜索',icon: 'dashboard' },
+      },
+       {
+        path: "/myfile",
+        component: () => import("@/views/myfile/MyFile"),
+        name: "myfile",
+        meta: { title: "我的文件", icon: "myfile" }
+      },
+      {
+        path: "/department",
+        component: () => import("@/views/department/Department"),
+        name: "department",
+        meta: { title: "部门文件", icon: "department" }
       }
     ]
   },
   {
-    path: '/file',
-    component: Layout,
-    redirect: '/index',
+    path: '/admin',
+    component:Layout,
+    redirect: '/admin/index',
     children: [
       {
-        path: "/myfile",
-        component: () => import("@/views/myfile/MyFile"),
-        name: "myfile",
-        meta: { title: "我的文件", icon: "myfile" }
+        path: 'index',
+        // component: () => import('@/layout/index.vue'),
+        name: 'adminIndex',
+        meta: { title: '首页', icon: 'dashboard', affix: true },
       },
+      // 其他 admin 下的子路由
     ]
   },
+  
+  // {
+  //   path: '/file',
+  //   component: Layout,
+  //   redirect: '/index',
+  //   children: [
+  //     // {
+  //     //   path: 'swagger',
+  //     //   component: () => import('@/views/tool/swagger/index.vue'),
+  //     //   name: 'swagger',
+  //     //   meta: { title: '接口', icon: 'dashboard' },
+
+  //     // },
+  //     // {
+  //     //   path: "/myfile",
+  //     //   component: () => import("@/views/myfile/MyFile"),
+  //     //   name: "myfile",
+  //     //   meta: { title: "我的文件", icon: "myfile" }
+  //     // },
+  //     // {
+  //     //   path: "/department",
+  //     //   component: () => import("@/views/department/Department"),
+  //     //   name: "department",
+  //     //   meta: { title: "部门文件", icon: "department" }
+  //     // }
+  //   ]
+  // },
 
   {
     path: '/user',
@@ -211,6 +263,7 @@ const router = createRouter({
     } else {
       return { top: 0 }
     }
+    console.log(savedPosition,'savedPosition');
   },
 });
 

src/store/modules/user.js

@@ -43,7 +43,7 @@ const useUserStore = defineStore(
 					getInfo().then(res => {
 						const user = res.user
 						const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import
-							.meta.env.VITE_APP_BASE_API + user.avatar;
+.meta.env.VITE_APP_BASE_API + user.avatar /* @vite-ignore */;
 
 						if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
 							this.roles = res.roles

src/views/biz/recent/index.vue

@@ -230,23 +230,29 @@ 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"] {
+// ::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){
+    text-align: left;
+  }
 }
 //平铺
 .tile_box {

src/views/department/Department.vue

@@ -0,0 +1,817 @@
+<template>
+    <div>
+        <div class="bigBox">
+            <div class="settingBox">
+                <!-- 设置盒子顶部搜索 -->
+                <div class="topSearch">
+                    <div style="position: relative;">
+                        <el-input v-model="searchFire" class="searchFire" size="large" placeholder="搜索文件" />
+                        <el-icon style="color: gray;display: inline-block;position: absolute;top: 8px;right: 5px;">
+                            <Search />
+                        </el-icon>
+                    </div>
+                    <div>
+                        <el-icon style="font-size: 24px;">
+                            <Plus />
+                        </el-icon>
+                    </div>
+                </div>
+                <!-- 方块点击盒子 -->
+                <div
+                    style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;height: 540px;">
+                    <!-- v-for盒子 -->
+                    <div class="setBox" @click="changeFile">
+                        <el-dropdown trigger="click" class="selectChe">
+                            <span class="el-dropdown-link">
+                                ...
+                            </span>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item @click="addPeople">
+                                        <img :src="togger" alt="">
+                                        <span>添加人员</span>
+                                    </el-dropdown-item>
+                                    <el-dropdown-item>
+                                        <img :src="textbox" alt="">
+                                        <span>重命名</span>
+                                    </el-dropdown-item>
+                                    <el-dropdown-item>
+                                        <img :src="trash" alt="">
+                                        <span>删除</span>
+                                    </el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                        <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;">
+                        <p>xxx文件</p>
+                    </div>
+                </div>
+                <div>
+                    <p>
+                        <span style="margin-left: 10px;">5G/1T</span>
+                        <span style="margin-left: 10rem;font-size: 12px;color: blue;cursor: pointer;"
+                            @click="askApply">申请扩容</span>
+                    </p>
+                    <el-progress style="margin-left: 8px;" :percentage="50" />
+                </div>
+            </div>
+            <!-- 右侧大盒子 -->
+            <div class="mesBox">
+                <!-- 功能盒子  -->
+                <div class="useBox">
+                    <!-- table切换 -->
+                    <div style="width: 100%;height: 24px;background-color: #7084B4;line-height: 20px;">
+                        <template 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="manyUse">
+                        <div
+                            style="display: flex;width: 92px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;">
+                            <div style="margin-left: 5px;">
+                                <el-icon
+                                    style="background-color: #7084B4;width: 24px;height: 24px;border-radius: 50%;color: white;">
+                                    <Plus />
+                                </el-icon>
+                            </div>
+                            <div style="margin-left: 5px;">
+                                <el-dropdown trigger="click">
+                                    <span style="color: black;cursor: pointer;font-size: 12px;" @click="createNew">新建
+                                        <el-icon>
+                                            <arrow-down />
+                                        </el-icon>
+                                    </span>
+                                    <template #dropdown>
+                                        <el-dropdown-menu>
+                                            <!-- <template v-for="(item, index) in arrorMenu">
+                                                <el-dropdown-item>
+                                                    <img :src="item.img" alt="">
+                                                    <span>{{ item.name }}</span>
+                                                </el-dropdown-item>
+                                            </template> -->
+                                            <el-dropdown-item @click="directoryOpen">
+                                                组织目录
+                                            </el-dropdown-item>
+                                            <el-dropdown-item @click="directoryOpen">
+                                                公开目录
+                                            </el-dropdown-item>
+                                        </el-dropdown-menu>
+                                    </template>
+                                </el-dropdown>
+                            </div>
+                        </div>
+                        <template v-for="(item, index) in useMenu">
+                            <div
+                                style="display: flex;width: 82px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;">
+                                <div style="margin-left: 5px;">
+                                    <img :src="item.img" style="width: 24px;height: 24px;" alt="">
+                                </div>
+                                <div style="margin-left: 5px;">
+                                    <span style="font-size: 12px;">{{ item.name }}</span>
+                                </div>
+                            </div>
+                        </template>
+                        <div
+                            style="display: flex;width: 102px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;">
+                            <div style="margin-left: 5px;">
+                                <img :src="funnel" style="width: 24px;height: 24px;" alt="">
+                            </div>
+                            <div style="margin-left: 5px;">
+                                <el-dropdown trigger="click">
+                                    <span style="color: black;cursor: pointer;font-size: 12px;">快速筛选
+                                        <el-icon>
+                                            <arrow-down />
+                                        </el-icon>
+                                    </span>
+                                    <template #dropdown>
+                                        <!-- <el-dropdown-menu>
+                                            <template v-for="(item, index) in arrorMenu">
+                                                <el-dropdown-item>
+                                                    <img :src="item.img" alt="">
+                                                    <span>{{ item.name }}</span>
+                                                </el-dropdown-item>
+                                            </template>
+                                        </el-dropdown-menu> -->
+                                    </template>
+                                </el-dropdown>
+                            </div>
+                        </div>
+                        <div
+                            style="display: flex;width: 92px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;">
+                            <div style="margin-left: 5px;">
+                                <img src="../../assets/images/upload.png" style="width: 24px;height: 24px;" alt="">
+                            </div>
+                            <div style="margin-left: 5px;">
+                                <el-dropdown trigger="click">
+                                    <span style="color: black;cursor: pointer;font-size: 12px;">上传
+                                        <el-icon>
+                                            <arrow-down />
+                                        </el-icon>
+                                    </span>
+                                    <template #dropdown>
+                                        <el-dropdown-menu>
+                                            <template v-for="(item, index) in arrorMenu">
+                                                <el-dropdown-item>
+                                                    <img :src="item.img" alt="">
+                                                    <span>{{ item.name }}</span>
+                                                </el-dropdown-item>
+                                            </template>
+                                        </el-dropdown-menu>
+                                    </template>
+                                </el-dropdown>
+                            </div>
+                        </div>
+                    </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>
+                <!-- 展示文件夹盒子 -->
+                <div>
+                    <!-- 文件夹 -->
+                    <div class="detailBox">
+                        <el-collapse v-model="folder" accordion class="collapse">
+                            <el-collapse-item title="文件夹" name="1" class="custom-collapse-item">
+
+                            </el-collapse-item>
+                        </el-collapse>
+                    </div>
+                    <!-- 文件 -->
+                    <div class="fileTable">
+                        <el-collapse v-model="files" accordion class="collapse">
+                            <el-collapse-item title="文件" name="2" class="custom-collapse-item">
+                                <el-table :data="fileList" style="width: 100%" @row-click="handleRowClick">
+                                    <el-table-column label="Image" width="100">
+                                        <template slot-scope="scope">
+                                            <!-- 插入固定图片 -->
+                                            <span>1</span>
+                                            <img :src="fileBox" alt="" />
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="date" label="Date" width="180" />
+                                    <el-table-column prop="name" label="Name" width="180" />
+                                    <el-table-column prop="address" label="Address" />
+                                </el-table>
+                                <!-- <div class="setCli" v-if="cliCC">
+                                    <template v-for="(item, index) in mouseCli">
+                                        <p @click="chooseSet(item, index)" class="chooseSet">
+                                            <img :src="item.img" alt="">
+                                            {{ item.name }}
+                                            <span v-if="item.name == '在线编辑' || item.name == '协作' ? true : false"
+                                                style="color: #7084B4;float: right;">></span>
+                                        </p>
+                                    </template>
+                                </div> -->
+                            </el-collapse-item>
+                        </el-collapse>
+                    </div>
+                    <!-- 添加人员穿梭框 -->
+                    <div>
+                        <el-dialog v-model="transferModal" title="添加人员" width="40%">
+                            <el-transfer v-model="tranvalue" filterable :filter-method="filterMethod"
+                                filter-placeholder="State Abbreviations" :data="trandata" />
+                            <template #footer>
+                                <span class="dialog-footer">
+                                    <el-button @click="transferModal = false">取消</el-button>
+                                    <el-button type="primary" @click="transferSure">确定</el-button>
+                                </span>
+                            </template>
+                        </el-dialog>
+                    </div>
+                </div>
+            </div>
+            <!-- 扩容弹窗 -->
+            <div>
+                <el-dialog v-model="askTo" title="扩容申请" width="30%">
+                    <el-form>
+                        <el-form-item label="新容量">
+                            <el-input-number v-model="askNum" :min="1" :max="10" />
+                        </el-form-item>
+                        <el-form-item label="申请理由">
+                            <el-input v-model="askTalk" maxlength="150" placeholder="请输入申请理由" show-word-limit
+                                type="textarea" />
+                        </el-form-item>
+                    </el-form>
+                    <template #footer>
+                        <span class="dialog-footer">
+                            <el-button @click="askTo = false">取消</el-button>
+                            <el-button type="primary" @click="sureAsk">
+                                确定
+                            </el-button>
+                        </span>
+                    </template>
+                </el-dialog>
+            </div>
+            <!-- 新建组织目录 -->
+            <div>
+                <el-dialog v-model="directoryModal" title="扩容申请" width="55%">
+                    <el-form :data="v1form">
+                        <el-form-item label="目录名称">
+                            <el-input v-model="v1form.names"></el-input>
+                        </el-form-item>
+                        <el-form-item label="目录分类">
+                            <el-radio-group v-model="v1form.types" class="ml-4" @change="directoryChange">
+                                <el-radio label="公开目录" value="0" size="large"></el-radio>
+                                <el-radio label="组织目录" value="1" size="large"></el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                        <el-form-item label="成员权限" v-if="directoryPower">
+                            <el-checkbox-group v-model="v1form.power">
+                                <el-checkbox label="可查看" />
+                                <el-checkbox label="可编辑" />
+                                <el-checkbox label="可上传" />
+                                <el-checkbox label="可删除" />
+                            </el-checkbox-group>
+                        </el-form-item>
+                        <el-form-item label="选择成员" v-if="directoryPower">
+                            <el-transfer v-model="v1form.tranvalue1" filterable :filter-method="filterMethod1"
+                                filter-placeholder="State Abbreviations" :data="trandata1" />
+                            <!-- <template #footer>
+                                <span class="dialog-footer">
+                                    <el-button @click="transferModal = false">取消</el-button>
+                                    <el-button type="primary" @click="transferSure">确定</el-button>
+                                </span>
+                            </template> -->
+                        </el-form-item>
+                    </el-form>
+                    <template #footer>
+                        <span class="dialog-footer">
+                            <el-button @click="directoryModal = false">取消</el-button>
+                            <el-button type="primary" @click="">
+                                确定
+                            </el-button>
+                        </span>
+                    </template>
+                </el-dialog>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+import myfile from '../../api/myfile/myfile'
+import { Search } from '@element-plus/icons-vue'
+import copy from '../../assets/images/copy.png'
+import clipboard from '../../assets/images/clipboard.png'
+import share from '../../assets/images/share.png'
+import trash from '../../assets/images/trash.png'
+import file from '../../assets/images/file.png'
+import folder from '../../assets/images/folder.png'
+import image from '../../assets/images/image.png'
+import filmSlate from '../../assets/images/filmSlate.png'
+import musicNotes from '../../assets/images/musicNotes.png'
+import blueLeft from '../../assets/images/blueLeft.png'
+import grayRight from "../../assets/images/grayRight.png"
+import sort from '../../assets/images/sort.png'
+import squre from '../../assets/images/squre.png'
+import addolder from '../../assets/images/addolder.png'
+import textbox from '../../assets/images/textbox.png'
+import goon from '../../assets/images/goon.png'
+import notePencil from '../../assets/images/notePencil.png'
+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 funnel from '../../assets/images/funnel.png'
+export default {
+    setup() {
+        let searchFire = ref('')
+        let selectedIndex = ref(0)
+        let folder = ref(['1'])
+        let files = ref(['2'])
+        let folderList = ref([])
+        let askTo = ref(false)
+        let askNum = ref(1)
+        let askTalk = ref('')
+        // let cliCC = ref(false)
+        let transferModal = ref(false)
+        let directoryModal = ref(false)
+        let directoryPower = ref(true)
+        let trandata = ref(generateData())
+        let trandata1 = ref(generateData1())
+        let tranvalue = ref([])
+        // let tranvalue1 = ref([])
+        let v1form = ref({
+            names:"",
+            types:"",
+            power:[],
+            tranvalue1:[]
+        })
+        let fileList = ref([
+            {
+                date: '2016-05-03',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+            },
+            {
+                date: '2016-05-02',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+            },
+            {
+                date: '2016-05-04',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+            },
+            {
+                date: '2016-05-01',
+                name: 'Tom',
+                address: 'No. 189, Grove St, Los Angeles',
+            },
+        ])
+        let menuList = ref([
+            {
+                name: "标签1",
+                choose: "1"
+            },
+            {
+                name: "标签2",
+                choose: "2"
+            },
+        ])
+        let useMenu = ref([
+            {
+                img: copy,
+                name: "复制"
+            },
+            {
+                img: clipboard,
+                name: "粘贴"
+            },
+            {
+                img: share,
+                name: "分享给"
+            },
+            {
+                img: trash,
+                name: "删除"
+            },
+        ])
+        let arrorMenu = ref([
+            {
+                img: file,
+                name: "文件"
+            },
+            {
+                img: folder,
+                name: '文件夹'
+            },
+            {
+                img: image,
+                name: "图片"
+            },
+            {
+                img: filmSlate,
+                name: "视频"
+            },
+            {
+                img: musicNotes,
+                name: "音频"
+            }
+        ])
+        let mouseCli = ref([
+            {
+                img: addolder,
+                name: "移动",
+            },
+            {
+                img: copy,
+                name: "复制",
+            },
+            {
+                img: clipboard,
+                name: "粘贴"
+            },
+            {
+                img: textbox,
+                name: "重命名"
+            },
+            {
+                img: goon,
+                name: "发送"
+            },
+            {
+                img: share,
+                name: "分享"
+            },
+            {
+                img: notePencil,
+                name: "在线编辑"
+            },
+            {
+                img: togger,
+                name: "协作"
+            },
+            {
+                img: icc,
+                name: "文字识别"
+            },
+            {
+                img: history,
+                name: "历史版本"
+            },
+            {
+                img: share,
+                name: "删除"
+            }
+        ])
+        function getAll() {
+            myfile.get().then(res => {
+                console.log(res, 'eee');
+            })
+        }
+        function changeFile(row) {
+
+        }
+        // tableMenu切换
+        function tableChange(row, num) {
+            this.selectedIndex = num
+        }
+        // x图标事件
+        function shotdown(row) {
+            this.menuList = this.menuList.filter(item => item.name !== row.name)
+        }
+        // 文件名表格每一行点击事件
+        function handleRowClick(row) {
+            cliCC.value = true
+        }
+        // 申请扩容
+        function askApply() {
+            this.askTo = true
+        }
+        function sureAsk() {
+            this.askTo = false
+        }
+        //mouse弹框
+        function chooseSet(row, num) {
+            if (row.name == '在线编辑' || row.name == '协作') {
+                cliCC.value = true
+            } else {
+                cliCC.value = false
+            }
+            // if (row.name == '分享') {
+            //     transferModal.value = true
+            // } else {
+            //     transferModal.value = false
+            // }
+        }
+        // 穿梭框数据
+        function generateData() {
+            const data = []
+            const states = [
+                '某人1',
+                '某人2',
+                '某人3',
+                '某人4',
+                '某人5',
+                '某人6',
+                '某人7 ',
+            ]
+            const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
+            states.forEach((city, index) => {
+                data.push({
+                    label: city,
+                    key: index,
+                    initial: initials[index],
+                })
+            })
+            return data
+        }
+        // 新建目录时选择的穿梭框数据
+        function generateData1() {
+            const data = []
+            const states = [
+                '某某1',
+                '某某2',
+                '某某3',
+                '某某4',
+                '某某5',
+                '某某6',
+                '某某7 ',
+            ]
+            const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
+            states.forEach((city, index) => {
+                data.push({
+                    label: city,
+                    key: index,
+                    initial: initials[index],
+                })
+            })
+            return data
+        }
+        function filterMethod(query, item) {
+            return item.initial.toLowerCase().includes(query.toLowerCase())
+        }
+        function filterMethod1(query, item) {
+            return item.initial.toLowerCase().includes(query.toLowerCase())
+        }
+        // 添加人员
+        function addPeople() {
+            transferModal.value = true
+        }
+        // 新建组织目录
+        function directoryOpen() {
+            directoryModal.value = true
+        }
+        function directoryChange(e){
+            if(e==='公开目录'){
+                directoryPower.value = false
+            }else{
+                directoryPower.value = true
+            }
+        }
+        return {
+            folderList,//文件夹的数据
+            fileList,//文件夹的数据
+            getAll,//拿到数据的方法
+            searchFire,//搜索文件的model
+            changeFile,//切换右侧视图的file
+            menuList,//右侧切换
+            tableChange,//改变class点击事件
+            selectedIndex,//当前选中下标
+            shotdown,//筛选出当前数据
+            useMenu,
+            arrorMenu,
+            blueLeft,//返回
+            grayRight,//前进
+            squre,//视图切换
+            sort,//排序
+            folder,
+            files,
+            handleRowClick,
+            askApply,//申请扩容
+            askTo,
+            sureAsk,
+            askNum,
+            askTalk,
+            // cliCC,
+            addolder,//图片↓
+            textbox,
+            goon,
+            notePencil,
+            togger,
+            icc,
+            history,
+            mouseCli,//文件点击弹框
+            chooseSet,
+            fileBox,
+            transferModal,
+            generateData,
+            generateData1,
+            filterMethod,
+            filterMethod1,
+            trandata,
+            trandata1,
+            tranvalue,
+            trash,//删除图标
+            funnel,//筛选图标
+            folder,//文件夹图标
+            addPeople,
+            directoryModal,
+            directoryOpen,//新建组织目录
+            v1form,
+            directoryChange,
+            directoryPower,
+        }
+    },
+    created() {
+        this.getAll();
+    },
+}
+</script>
+
+<style scoped>
+p {
+    margin: 0;
+    padding: 0;
+}
+
+.bigBox {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.settingBox {
+    width: 342px;
+    height: 666px;
+    border: 2px solid black;
+    border-radius: 4px;
+    /* margin: 5px 5px; */
+    margin-right: 15px;
+    background-color: white;
+}
+
+.topSearch {
+    width: 100%;
+    height: 48px;
+    background-color: #EBEFF6;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.searchFire {
+    width: 248px;
+    height: 32px;
+}
+
+.setBox {
+    width: 88px;
+    height: 112px;
+    text-align: center;
+    margin-left: 12px;
+    margin-top: 5px;
+    position: relative;
+}
+
+.setBox:hover {
+    background-color: #EEF9FF;
+}
+
+.setBox:hover .selectChe {
+    background-color: #EEF9FF;
+    display: block;
+}
+
+.selectChe {
+    display: none;
+    width: 20px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 4px 4px 4px 4px;
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    line-height: 10px;
+}
+
+.mesBox {
+    width: 70vw;
+    height: 666px;
+    /* margin: 5px 5px; */
+    border-radius: 4px;
+    background-color: white;
+}
+
+.useBox {
+    width: 100%;
+    height: 96px;
+}
+
+.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: white;
+    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;
+}
+
+.detailBox {
+    width: 100%;
+    height: 270px;
+}
+
+::v-deep .el-dialog__header {
+    background-color: #ECEFF7;
+    margin-right: 0px;
+}
+
+.fileTable {
+    position: relative;
+}
+
+.setCli {
+    width: 156px;
+    height: auto;
+    position: absolute;
+    top: -70px;
+    left: 300px;
+    background-color: white;
+    border: 1px solid gray;
+    border-radius: 4px;
+    z-index: 2;
+}
+
+.chooseSet:hover {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    background-color: #8693b2;
+    color: white;
+}
+</style>

src/views/liveChat/index.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+export default {
+  name: 'index2',
+}
+</script>
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+</script>
+
+<template>
+  <div>
+    会话sdfss
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/myfile/MyFile.vue

@@ -93,7 +93,7 @@
                             </div>
                             <div style="margin-left: 5px;">
                                 <el-dropdown trigger="click">
-                                    <span style="color: black;">上传
+                                    <span style="color: black;cursor: pointer;">上传
                                         <el-icon>
                                             <arrow-down />
                                         </el-icon>
@@ -156,7 +156,7 @@
                                         <template slot-scope="scope">
                                             <!-- 插入固定图片 -->
                                             <span>1</span>
-                                            <img :src="fileBox" alt=""/>
+                                            <img :src="fileBox" alt="" />
                                         </template>
                                     </el-table-column>
                                     <el-table-column prop="date" label="Date" width="180" />
@@ -176,11 +176,26 @@
                             </el-collapse-item>
                         </el-collapse>
                     </div>
+                    <!-- 穿梭框 -->
+                    <div>
+                        <el-dialog v-model="transferModal" title="分享" width="40%">
+                            <el-transfer v-model="tranvalue" filterable :filter-method="filterMethod"
+                                filter-placeholder="State Abbreviations" :data="trandata" />
+                            <template #footer>
+                                <span class="dialog-footer">
+                                    <el-button @click="transferModal = false">取消</el-button>
+                                    <el-button type="primary" @click="transferSure">
+                                        确定
+                                    </el-button>
+                                </span>
+                            </template>
+                        </el-dialog>
+                    </div>
                 </div>
             </div>
             <!-- 扩容弹窗 -->
             <div>
-                <el-dialog v-model="askTo" header="扩容申请" width="30%">
+                <el-dialog v-model="askTo" title="扩容申请" width="30%">
                     <el-form>
                         <el-form-item label="新容量">
                             <el-input-number v-model="askNum" :min="1" :max="10" />
@@ -240,6 +255,9 @@ export default {
         let askNum = ref(1)
         let askTalk = ref('')
         let cliCC = ref(false)
+        let transferModal = ref(false)
+        let trandata = ref(generateData())
+        let tranvalue = ref([])
         let fileList = ref([
             {
                 date: '2016-05-03',
@@ -392,6 +410,35 @@ export default {
             } else {
                 cliCC.value = false
             }
+            if (row.name == '分享') {
+                transferModal.value = true
+            } else {
+                transferModal.value = false
+            }
+        }
+        function generateData() {
+            const data = []
+            const states = [
+                'California',
+                'Illinois',
+                'Maryland',
+                'Texas',
+                'Florida',
+                'Colorado',
+                'Connecticut ',
+            ]
+            const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
+            states.forEach((city, index) => {
+                data.push({
+                    label: city,
+                    key: index,
+                    initial: initials[index],
+                })
+            })
+            return data
+        }
+        function filterMethod(query, item) {
+            return item.initial.toLowerCase().includes(query.toLowerCase())
         }
         return {
             folderList,//文件夹的数据
@@ -428,6 +475,11 @@ export default {
             mouseCli,//文件点击弹框
             chooseSet,
             fileBox,
+            transferModal,
+            generateData,
+            filterMethod,
+            trandata,
+            tranvalue,
         }
     },
     created() {
@@ -449,11 +501,13 @@ p {
 }
 
 .settingBox {
-    width: 312px;
-    height: 636px;
+    width: 342px;
+    height: 666px;
     border: 2px solid black;
     border-radius: 4px;
-    margin: 10px 10px;
+    /* margin: 5px 5px; */
+    margin-right: 15px;
+    background-color: white;
 }
 
 .topSearch {
@@ -502,9 +556,10 @@ p {
 
 .mesBox {
     width: 70vw;
-    height: 636px;
-    margin: 10px 5px;
+    height: 666px;
+    /* margin: 5px 5px; */
     border-radius: 4px;
+    background-color: white;
 }
 
 .useBox {
@@ -581,7 +636,7 @@ p {
 
 .setCli {
     width: 156px;
-    height: 340px;
+    height: auto;
     position: absolute;
     top: -70px;
     left: 300px;

src/views/search/index.vue

@@ -0,0 +1,382 @@
+<template>
+  <div class="container">
+    <!-- 搜索标题 -->
+    <div class="searchTitle">
+      <el-icon>
+        <ArrowLeftBold />
+      </el-icon>
+      <div class="colLine"></div>
+      <div class="searchTitle_text">“边缘代理”的搜索结果</div>
+    </div>
+    <!-- 搜索选项 -->
+    <div class="searchType">
+      <div class="searchFor">
+        <div class="search_title">搜索对象：</div>
+        <el-tabs
+          v-model="searchFor"
+          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 label="内容" name="third"></el-tab-pane>
+        </el-tabs>
+      </div>
+      <div class="line"></div>
+      <div class="searchFor">
+        <div class="search_title">分类：</div>
+        <el-tabs
+          v-model="searchType"
+          class="demo-tabs"
+          @tab-click="changeSearchFor"
+        >
+          <el-tab-pane label="文档" name="1"></el-tab-pane>
+          <el-tab-pane label="图片" name="2"></el-tab-pane>
+          <el-tab-pane label="分类" name="3"></el-tab-pane>
+          <el-tab-pane label="视频" name="4"></el-tab-pane>
+          <el-tab-pane label="压缩包" name="5"></el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+    <!-- 排序显示 -->
+    <div class="statistics">
+      <div class="left_box">
+        <el-checkbox v-model="checkState" size="large" />
+        <div class="dataNum">共3项</div>
+      </div>
+      <div class="right_box">
+        <img src="@/assets/images/sort.png" alt="" />
+        <img src="@/assets/images/squre.png" alt="" @click="changeShow"/>
+      </div>
+    </div>
+    <!-- 文件列表 -->
+    <div class="fileList">
+        <div v-if="isList">
+            <!-- 表格 -->
+            <el-table
+              :data="tableData"
+              style="width: 100%"
+              height="100%"
+              :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>
+        </div>
+        <div v-else>
+            <!-- 平铺 -->
+              <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>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const searchFor = ref("first"); //搜索对象
+const searchType = ref("1"); //搜索对象
+const checkState = ref(false); //勾选框状态
+const activeNames = ref(["folder", "file"]);
+const isList = ref(true); //控制显示方式
+
+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 changeSearchFor = () => {
+  console.log();
+};
+const changeShow = ()=>{
+  isList.value = !isList.value
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: 100%;
+  background-color: #fff;
+  border-radius: 4px;
+}
+.searchTitle {
+  width: 100%;
+  height: 40px;
+  padding-left: 8px;
+  display: flex;
+  align-items: center;
+  .colLine {
+    margin-left: 5px;
+    height: 100%;
+    border-right: 1px solid #c1cce3;
+  }
+  .searchTitle_text {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    margin-left: 16px;
+  }
+}
+.searchType {
+  width: 100%;
+  height: 40px;
+  box-sizing: border-box;
+  background-color: #f5f7f9;
+  border-top: 1px solid #c1cce3;
+  border-bottom: 1px solid #c1cce3;
+  padding-left: 16px;
+  display: flex;
+  align-items: center;
+  .searchFor {
+    height: 100%;
+    display: flex;
+    // align-items: center;
+    .search_title {
+      height: 100%;
+      line-height: 40px;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: Inter-Medium;
+    }
+  }
+  .line {
+    width: 1px;
+    height: 24px;
+    border-left: 1px solid #c1cce3;
+    margin: 0 16px;
+  }
+}
+.statistics {
+  width: 100%;
+  height: 40px;
+  // background-color: #ccc;
+  padding-left: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .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;
+    }
+  }
+}
+.fileList{
+  height: 100%;
+}
+
+// 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:nth-child(2) {
+  padding-left: 0 !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;
+}
+
+
+
+::v-deep  .el-table__inner-wrapper::before{
+  background-color: #fff !important;
+}
+
+::v-deep .el-collapse,.el-collapse-item__wrap {
+  border: none;
+}
+.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_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_"] {
+  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>