From 8a8cd1b295a8149262c8c7cbf0ba81e593bdf76d Mon Sep 17 00:00:00 2001
From: Sh1yu <41428433@qq.com>
Date: Wed, 11 Oct 2023 10:34:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=9E=E6=94=B6=E7=AB=99=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/leftSideBar/LeftSidebarCli.vue |  31 ++++
 .../components/template/TemplateManage.vue    | 150 +++++++++---------
 zyplayer-doc-ui/wiki-ui/src/routes.js         |   4 +
 .../src/views/management/FileManagement.vue   |   5 +
 .../views/management/RecycleBinManagement.vue | 107 +++++++++++++
 5 files changed, 223 insertions(+), 74 deletions(-)
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/management/FileManagement.vue
 create mode 100644 zyplayer-doc-ui/wiki-ui/src/views/management/RecycleBinManagement.vue

diff --git a/zyplayer-doc-ui/wiki-ui/src/components/leftSideBar/LeftSidebarCli.vue b/zyplayer-doc-ui/wiki-ui/src/components/leftSideBar/LeftSidebarCli.vue
index e4b92a4a..250b8039 100644
--- a/zyplayer-doc-ui/wiki-ui/src/components/leftSideBar/LeftSidebarCli.vue
+++ b/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>
 
 
diff --git a/zyplayer-doc-ui/wiki-ui/src/components/template/TemplateManage.vue b/zyplayer-doc-ui/wiki-ui/src/components/template/TemplateManage.vue
index 840fbc9e..6d84d70c 100644
--- a/zyplayer-doc-ui/wiki-ui/src/components/template/TemplateManage.vue
+++ b/zyplayer-doc-ui/wiki-ui/src/components/template/TemplateManage.vue
@@ -1,79 +1,81 @@
 <template>
-	<el-dialog title="设置为模板" v-model="newTemplateDialogVisible" width="600px" :close-on-click-modal="false">
-		<el-form label-width="100px" :model="templateNewForm">
-			<el-form-item label="模板标签">
-				<el-input v-model="templateNewForm.tagName"></el-input>
-			</el-form-item>
-			<el-form-item label="是否公开">
-				<el-switch v-model="templateNewForm.shareStatus" inactive-text="个人模板" :inactive-value="0" active-text="公共模板" :active-value="1"></el-switch>
-			</el-form-item>
-			<el-form-item>
-				<el-button type="primary" v-if="exsit" @click="onNewTemplateSubmit">保存修改</el-button>
-				<el-button type="primary" v-else @click="onNewTemplateSubmit">立即创建</el-button>
-				<el-button @click="onNewTemplateCancel">取消</el-button>
-			</el-form-item>
-		</el-form>
-	</el-dialog>
-	<a-modal
-			v-model:open="templateChooseDialogVisible"
-			title="模板库"
-			width="100%"
-			wrapClassName="full-modal"
-			:confirm-loading="aModalWaiting"
-			:destroyOnClose=true
-			:closable=true>
-		<div>
-			<el-switch v-model="open" inactive-text="个人模板" :inactive-value="0" active-text="公共模板" :active-value="1" @change="filterByOpen"></el-switch>
-			<a-divider type="vertical"/>
-			<el-input v-model="name" style="width: 30%" @change="filterByName"></el-input>
-		</div>
-		<a-divider>模板标签</a-divider>
-		<a-checkable-tag v-for="tag in tags" @click="filterByTags(tag.tagName,tag.show)" v-model:checked="tag.show" style="margin: 5px" size="big">{{tag.tagName}}</a-checkable-tag>
-		<a-divider/>
-		<a-list :grid="{gutter:1,column:4,xs:1,sm:1,md:2,lg:2,xl:4,xxl:4}" :data-source="templateList">
-			<template #renderItem="{item}">
-				<a-list-item>
-					<a-card :title="item.name">
-						<a-tag color="#f50">{{filterShareStatus(item.shareStatus)}}</a-tag>
-						<a-tag color="#87d068">{{item.tags}}</a-tag>
-						<br/>
-						{{item.createUserName}}
-						<br/>
-						{{item.createTime}}
-						<template #actions>
-							<el-tooltip effect="dark" content="转到原文档" placement="top">
-								<AimOutlined @click="turnToSource(item)"/>
-							</el-tooltip>
-							<el-tooltip effect="dark" content="预览模板" placement="top">
-								<BorderOutlined @click="showPreview(item)"/>
-							</el-tooltip>
-							<el-tooltip effect="dark" content="使用模板" placement="top">
-								<AlertOutlined @click="chooseTemplate(item)"/>
-							</el-tooltip>
-						</template>
-					</a-card>
-				</a-list-item>
-			</template>
-		</a-list>
-		<a-pagination simple v-model:current="nowTemplateNum" :total="totalTemplate" style="float: right"
-					  :page-size="8" :hide-on-single-page=true @change="pageUpDown"/>
-		<template #footer/>
-	</a-modal>
-	<a-modal
-			v-model:open="previewVisible"
-			title="模板预览"
-			width="100%"
-			wrapClassName="full-modal"
-			:destroyOnClose=true
-			:closable=true>
-		<el-row>
-			<div ref="pageContentRef" class="wiki-page-content">
-				<div v-html="pageShowDetail" class="markdown-body" v-if="editorType.value === 2" v-highlight></div>
-				<div v-html="pageShowDetail" class="wang-editor-body" v-else></div>
+	<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="模板标签">
+					<el-input v-model="templateNewForm.tagName"></el-input>
+				</el-form-item>
+				<el-form-item label="是否公开">
+					<el-switch v-model="templateNewForm.shareStatus" inactive-text="个人模板" :inactive-value="0" active-text="公共模板" :active-value="1"></el-switch>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" v-if="exsit" @click="onNewTemplateSubmit">保存修改</el-button>
+					<el-button type="primary" v-else @click="onNewTemplateSubmit">立即创建</el-button>
+					<el-button @click="onNewTemplateCancel">取消</el-button>
+				</el-form-item>
+			</el-form>
+		</el-dialog>
+		<a-modal
+				v-model:open="templateChooseDialogVisible"
+				title="模板库"
+				width="100%"
+				wrapClassName="full-modal"
+				:confirm-loading="aModalWaiting"
+				:destroyOnClose=true
+				:closable=true>
+			<div>
+				<el-switch v-model="open" inactive-text="个人模板" :inactive-value="0" active-text="公共模板" :active-value="1" @change="filterByOpen"></el-switch>
+				<a-divider type="vertical"/>
+				<el-input v-model="name" style="width: 30%" @change="filterByName"></el-input>
 			</div>
-		</el-row>
-		<template #footer/>
-	</a-modal>
+			<a-divider>模板标签</a-divider>
+			<a-checkable-tag v-for="tag in tags" @click="filterByTags(tag.tagName,tag.show)" v-model:checked="tag.show" style="margin: 5px" size="big">{{tag.tagName}}</a-checkable-tag>
+			<a-divider/>
+			<a-list :grid="{gutter:1,column:4,xs:1,sm:1,md:2,lg:2,xl:4,xxl:4}" :data-source="templateList">
+				<template #renderItem="{item}">
+					<a-list-item>
+						<a-card :title="item.name">
+							<a-tag color="#f50">{{filterShareStatus(item.shareStatus)}}</a-tag>
+							<a-tag color="#87d068">{{item.tags}}</a-tag>
+							<br/>
+							{{item.createUserName}}
+							<br/>
+							{{item.createTime}}
+							<template #actions>
+								<el-tooltip effect="dark" content="转到原文档" placement="top">
+									<AimOutlined @click="turnToSource(item)"/>
+								</el-tooltip>
+								<el-tooltip effect="dark" content="预览模板" placement="top">
+									<BorderOutlined @click="showPreview(item)"/>
+								</el-tooltip>
+								<el-tooltip effect="dark" content="使用模板" placement="top">
+									<AlertOutlined @click="chooseTemplate(item)"/>
+								</el-tooltip>
+							</template>
+						</a-card>
+					</a-list-item>
+				</template>
+			</a-list>
+			<a-pagination simple v-model:current="nowTemplateNum" :total="totalTemplate" style="float: right"
+						  :page-size="8" :hide-on-single-page=true @change="pageUpDown"/>
+			<template #footer/>
+		</a-modal>
+		<a-modal
+				v-model:open="previewVisible"
+				title="模板预览"
+				width="100%"
+				wrapClassName="full-modal"
+				:destroyOnClose=true
+				:closable=true>
+			<el-row>
+				<div ref="pageContentRef" class="wiki-page-content">
+					<div v-html="pageShowDetail" class="markdown-body" v-if="editorType.value === 2" v-highlight></div>
+					<div v-html="pageShowDetail" class="wang-editor-body" v-else></div>
+				</div>
+			</el-row>
+			<template #footer/>
+		</a-modal>
+	</div>
 </template>
 
 <script setup>
diff --git a/zyplayer-doc-ui/wiki-ui/src/routes.js b/zyplayer-doc-ui/wiki-ui/src/routes.js
index 988d76b1..fc0f5f7e 100644
--- a/zyplayer-doc-ui/wiki-ui/src/routes.js
+++ b/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},
 		],
 	},
 	{
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/management/FileManagement.vue b/zyplayer-doc-ui/wiki-ui/src/views/management/FileManagement.vue
new file mode 100644
index 00000000..47d21163
--- /dev/null
+++ b/zyplayer-doc-ui/wiki-ui/src/views/management/FileManagement.vue
@@ -0,0 +1,5 @@
+<template>
+	<div >
+		文件管
+	</div>
+</template>
diff --git a/zyplayer-doc-ui/wiki-ui/src/views/management/RecycleBinManagement.vue b/zyplayer-doc-ui/wiki-ui/src/views/management/RecycleBinManagement.vue
new file mode 100644
index 00000000..199afefe
--- /dev/null
+++ b/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>