回收站前端代码提交

zyplayer-doc-ui/wiki-ui/src/components/leftSideBar/LeftSidebarCli.vue

@@ -54,6 +54,20 @@
 				</template>
 			</el-tree>
 		</div>
+		<div class="sidebar-tool-box">
+			<a-divider />
+			<span >
+				<a-button type="text" @click="routeToFileCtl()">
+					<template #icon><DatabaseOutlined /></template>
+					文件管理
+				</a-button>
+				<a-divider type="vertical"  style="height: 10px; background-color: #7cb305"/>
+				<a-button type="text" @click="routeToRecycleBin()">
+					<template #icon><DeleteOutlined /></template>
+					回收站
+				</a-button>
+			</span>
+		</div>
 	</div>
 </template>
 
@@ -63,6 +77,8 @@ import {useRouter, useRoute} from "vue-router";
 import pageApi from '../../assets/api/page'
 import {useStoreDisplay} from "@/store/wikiDisplay";
 import {useStorePageData} from "@/store/pageData";
+import {DatabaseOutlined,DeleteOutlined} from '@ant-design/icons-vue';
+
 
 let emit = defineEmits(['doGetPageList', 'spaceChangeEvents', 'setNowPageId'])
 let searchKeywords = ref('');
@@ -167,7 +183,22 @@ const handlePageDrop = (draggingNode, dropNode, dropType, ev) => {
 		emit('doGetPageList', node.id, node)
 	})
 }
+const routeToFileCtl = () => {
+	router.push({
+		path: '/management/file'
+	})
+}
+const routeToRecycleBin = () => {
+	router.push({
+		path: '/management/recyclebin',
+	})
+}
 defineExpose({searchByKeywords})
 </script>
+<style scoped>
+	.sidebar-tool-box{
+		text-align:center;
+	}
+</style>
 
 

zyplayer-doc-ui/wiki-ui/src/components/template/TemplateManage.vue

@@ -1,4 +1,5 @@
 <template>
+	<div>
 		<el-dialog title="设置为模板" v-model="newTemplateDialogVisible" width="600px" :close-on-click-modal="false">
 			<el-form label-width="100px" :model="templateNewForm">
 				<el-form-item label="模板标签">
@@ -74,6 +75,7 @@
 			</el-row>
 			<template #footer/>
 		</a-modal>
+	</div>
 </template>
 
 <script setup>

zyplayer-doc-ui/wiki-ui/src/routes.js

@@ -9,6 +9,8 @@ import Home from './views/home/Home.vue'
 import MyInfo from './views/user/MyInfo.vue'
 import Show from './views/page/Show.vue'
 import Edit from './views/page/Edit.vue'
+import FileManagement from './views/management/FileManagement.vue'
+import RecycleBinManagement from './views/management/RecycleBinManagement.vue'
 
 import spaceManage from './views/space/Manage.vue'
 
@@ -30,6 +32,8 @@ let routes = [
 			{path: '/page/show', name: 'WIKI-页面查看', component: Show},
 			{path: '/page/edit', name: 'WIKI-编辑内容', component: Edit},
 			{path: '/space/manage', name: 'WIKI-空间管理', component: spaceManage},
+			{path: '/management/file', name: 'WIKI-文件管理', component: FileManagement},
+			{path: '/management/recyclebin', name: 'WIKI-回收站', component: RecycleBinManagement},
 		],
 	},
 	{

zyplayer-doc-ui/wiki-ui/src/views/management/FileManagement.vue

@@ -0,0 +1,5 @@
+<template>
+	<div >
+		文件管
+	</div>
+</template>

zyplayer-doc-ui/wiki-ui/src/views/management/RecycleBinManagement.vue

@@ -0,0 +1,107 @@
+<template>
+	<div>
+		<a-table :columns="columns" :data-source="table" :pagination="{ pageSize: 10 }" :scroll="{ y: 240 }">
+			<template v-slot:bodyCell="{ column, record ,index}">
+			<span v-if="column.key === 'action'">
+				<a-button @click="showFiles(record)">
+					<template #icon><TableOutlined /></template>
+					相关文件
+				</a-button>
+				<a-divider type="vertical"/>
+				<a-button @click="revertConfirm(record)">
+					<template #icon><UndoOutlined /></template>
+					恢复
+				</a-button>
+				<a-divider type="vertical"/>
+				<a-button @click="destroy(record)">
+					<template #icon><DeleteFilled /></template>
+					彻底删除
+			  	</a-button>
+			</span>
+			</template>
+		</a-table>
+	</div>
+	<a-modal :open="visible" title="详情展示" :closable="false">
+		<template #footer>
+			<a-button key="Submit" type="primary" @click="handleOk">好的</a-button>
+		</template>
+		<a-carousel arrows>
+			<template #nextArrow>
+				<div class="custom-slick-arrow" style="right: 10px">
+					<right-circle-outlined />
+				</div>
+			</template>
+			<div><h3>1</h3></div>
+			<div><h3>2</h3></div>
+			<div><h3>3</h3></div>
+			<div><h3>4</h3></div>
+		</a-carousel>
+	</a-modal>
+</template>
+<script setup>
+	import {UndoOutlined,DeleteFilled,TableOutlined,RightCircleOutlined,} from '@ant-design/icons-vue';
+	import {ref} from "vue";
+	let visible = ref(false)
+	let table = ref([
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',},
+		{key: 321, name: 'Edward King ', age: 32, address: 'London, Park Lane no. ',}
+	]);
+	let columns = ref([
+		{title: '名称', dataIndex: 'name', width: '50%' ,},
+		{title: '删除日期', dataIndex: 'age', width: '15%',},
+		{title: '操作者', dataIndex: 'address', width: '15%',},
+		{title: '', key: 'action'},
+	])
+	const handleOk = (e) => {
+		visible.value = false;
+	}
+	const showFiles = (record) => {
+		visible.value = true;
+	}
+	const revertConfirm = (record) => {
+	}
+	const destroy = (record) => {
+	}
+</script>
+<style scoped>
+	.ant-carousel :deep(.slick-slide) {
+		text-align: center;
+		height: 160px;
+		line-height: 160px;
+		background: #364d79;
+		overflow: hidden;
+	}
+
+	.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
+		width: 25px;
+		height: 25px;
+		font-size: 25px;
+		color: #fff;
+		background-color: rgba(31, 45, 61, 0.11);
+		opacity: 0.3;
+	}
+	.ant-carousel :deep(.custom-slick-arrow:before) {
+		display: none;
+	}
+	.ant-carousel :deep(.custom-slick-arrow:hover) {
+		opacity: 0.5;
+	}
+
+	.ant-carousel :deep(.slick-slide h3) {
+		color: #fff;
+	}
+</style>