菜单目录优化
This commit is contained in:
sswiki
@@ -129,69 +129,3 @@ body {
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.space-folder-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wiki-page-tree-box {
|
||||
.el-tree-node__content {
|
||||
height: 35px;
|
||||
position: relative;
|
||||
|
||||
.page-tree-node {
|
||||
width: 100%;
|
||||
|
||||
.label {
|
||||
.el-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
max-width: calc(100% - 40px);
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.rename-input {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.page-action-box {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
|
||||
.page-action-dropdown-btn {
|
||||
padding: 0 8px;
|
||||
height: 35px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.el-button + .el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-action-box.renaming {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .page-action-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,18 +3,18 @@
|
||||
<a-button :icon="h(PlusOutlined)" type="text" style="color: #888;"></a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="createWiki(1)">
|
||||
<IconParkWord fill="#498ba7"/> 创建富文本
|
||||
<a-menu-item @click="createPage(1)">
|
||||
<IconParkWord fill="#498ba7"/> 新建富文本
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="createWiki(2)">
|
||||
<IconDocument fill="#558ff2"/> 创建Markdown
|
||||
<a-menu-item @click="createPage(2)">
|
||||
<IconDocument fill="#558ff2"/> 新建Markdown
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="createWiki(0)">
|
||||
<FolderOpen fill="#ffd149"/> 创建文件夹
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="createWikiByTemplate()">
|
||||
<IconParkPageTemplate/> 从模板创建
|
||||
<a-menu-item @click="createFolder">
|
||||
<FolderOpen fill="#ffd149"/> 新建文件夹
|
||||
</a-menu-item>
|
||||
<!-- <a-menu-item @click="createPageByTemplate()">-->
|
||||
<!-- <IconParkPageTemplate/> 从模板创建-->
|
||||
<!-- </a-menu-item>-->
|
||||
<!-- <a-menu-item key="3">-->
|
||||
<!-- <el-tooltip content="支持MD，ZIP格式（图片和MD文件请放到同级目录并配置同级相对路径）" placement="right-start" :show-after="300">-->
|
||||
<!-- <a-upload v-model:file-list="fileList" name="file" :multiple="false" :customRequest="doAUpload" class="import-upload">-->
|
||||
@@ -38,6 +38,7 @@ import axios from "axios";
|
||||
import IconDocument from '@/components/base/IconDocument.vue'
|
||||
import {useStorePageData} from "@/store/pageData";
|
||||
import {useStoreSpaceData} from "@/store/spaceData";
|
||||
import MessagePrompt from "@/components/single/MessagePrompt";
|
||||
|
||||
let router = useRouter();
|
||||
let storePage = useStorePageData();
|
||||
@@ -45,7 +46,6 @@ let storeSpace = useStoreSpaceData();
|
||||
|
||||
let uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/import/upload');
|
||||
let fileList = ref([]);
|
||||
let emit = defineEmits(['createWikiByTemplate']);
|
||||
let props = defineProps({
|
||||
pageId: Number
|
||||
});
|
||||
@@ -78,30 +78,47 @@ const doAUpload = (data) => {
|
||||
ElMessage.error('导入失败：' + e.message);
|
||||
});
|
||||
}
|
||||
const createWikiByTemplate = () => {
|
||||
const createPageByTemplate = () => {
|
||||
// TODO
|
||||
}
|
||||
const createWiki = (editorType) => {
|
||||
if (storeSpace.chooseSpaceId > 0) {
|
||||
let name = "新建文档";
|
||||
if (editorType === 0) name = "新建文件夹";
|
||||
pageApi.updatePage({
|
||||
spaceId: storeSpace.chooseSpaceId,
|
||||
parentId: props.pageId,
|
||||
editorType: editorType,
|
||||
name: name,
|
||||
content: '',
|
||||
preview: ''
|
||||
}).then((json) => {
|
||||
storePage.eventPageListUpdate = !storePage.eventPageListUpdate;
|
||||
ElMessage.success('创建成功');
|
||||
if (editorType !== 0) {
|
||||
router.push({path: '/page/edit', query: {parentId: props.pageId, pageId: json.data.id}});
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const createPage = (editorType, confirmName) => {
|
||||
if (!storeSpace.chooseSpaceId) {
|
||||
ElMessage.warning('请先选择或创建空间');
|
||||
return;
|
||||
}
|
||||
let name = "新建文档";
|
||||
if (editorType === 0) name = confirmName || "新建文件夹";
|
||||
pageApi.updatePage({
|
||||
spaceId: storeSpace.chooseSpaceId,
|
||||
parentId: props.pageId,
|
||||
editorType: editorType,
|
||||
name: name,
|
||||
content: '',
|
||||
preview: ''
|
||||
}).then((json) => {
|
||||
storePage.eventPageListUpdate = !storePage.eventPageListUpdate;
|
||||
ElMessage.success('创建成功');
|
||||
if (editorType !== 0) {
|
||||
router.push({path: '/page/edit', query: {parentId: props.pageId, pageId: json.data.id}});
|
||||
}
|
||||
});
|
||||
}
|
||||
let createFolder = () => {
|
||||
MessagePrompt({
|
||||
title: '新建文件夹',
|
||||
label: '文件夹名称',
|
||||
placeholder: '请输入文件夹名称',
|
||||
validator: (value) => {
|
||||
if (!value || !value.trim()) return '请输入文件夹名称';
|
||||
if (value && value.length > 40) return '文件夹名称不能超过40个字符';
|
||||
return true;
|
||||
}
|
||||
}).then((value) => {
|
||||
if (value && value.trim()) {
|
||||
createPage(0, value.trim());
|
||||
}
|
||||
}).catch(() => {
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -58,19 +58,17 @@
|
||||
<el-tooltip v-if="data.shareStatus > 0" :content="data.tags" placement="top-start" :show-after="500">
|
||||
<a-tag color="warning" style="margin-inline-end: 4px;padding-inline: 4px;"> {{data.shareStatus === 1 ? '公共模板' : '个人模板'}}</a-tag>
|
||||
</el-tooltip>
|
||||
<a-input v-if="data.renaming" v-model:value="data.name" @blur="doRename(node,data)" @click.stop
|
||||
class="rename-input" placeholder="请输入文档名称"/>
|
||||
<span v-else style="vertical-align: middle;margin-left: 5px;">
|
||||
<span style="vertical-align: middle;margin-left: 5px;">
|
||||
<el-tooltip :content="node.label" placement="top-start" :show-after="700">{{ node.label }}</el-tooltip>
|
||||
</span>
|
||||
<!--操作-->
|
||||
<div class="page-action-box" :class="data.renaming?'renaming':''" @click.stop>
|
||||
<div class="page-action-box">
|
||||
<AddMenu :pageId="data.id"/>
|
||||
<a-dropdown :trigger="['click']" @click="choosePageIdFunc(data.id)">
|
||||
<a-button :icon="h(EllipsisOutlined)" type="text" style="color: #888;"></a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="rename(node,data)">
|
||||
<a-menu-item @click="renamePage(node,data)">
|
||||
<IconParkEditTwo class="el-icon"/> 重命名
|
||||
</a-menu-item>
|
||||
<a-sub-menu title="移动文档">
|
||||
@@ -126,6 +124,7 @@ import {ElMessageBox, ElMessage} from 'element-plus'
|
||||
import {useStoreSpaceData} from "@/store/spaceData";
|
||||
import Navigation from "@/views/page/show/Navigation.vue";
|
||||
import PageZan from "@/views/page/show/PageZan.vue";
|
||||
import MessagePrompt from "@/components/single/MessagePrompt";
|
||||
|
||||
let route = useRoute();
|
||||
let router = useRouter();
|
||||
@@ -206,8 +205,29 @@ const createWikiByTemplate = () => {
|
||||
const choosePageIdFunc = (id) => {
|
||||
storePage.optionPageId = id;
|
||||
}
|
||||
const rename = (node, data) => {
|
||||
data.renaming = true;
|
||||
const renamePage = (node, data) => {
|
||||
MessagePrompt({
|
||||
title: '重命名',
|
||||
label: '文档名称',
|
||||
placeholder: '请输入文档名称',
|
||||
value: data.name,
|
||||
validator: (value) => {
|
||||
if (!value || !value.trim()) return '文档名称不能为空';
|
||||
if (value && value.length > 255) return '文档名称不能超过255个字符';
|
||||
return true;
|
||||
}
|
||||
}).then((value) => {
|
||||
if (value && value.trim()) {
|
||||
let name = value.trim();
|
||||
if (data.name !== name) {
|
||||
pageApi.renamePage({id: data.id, name: name}).then(json => {
|
||||
data.name = name;
|
||||
ElMessage.success('重命名成功');
|
||||
});
|
||||
}
|
||||
}
|
||||
}).catch(() => {
|
||||
});
|
||||
}
|
||||
const openMoveMenu = (onlyMove) => {
|
||||
// TODO
|
||||
@@ -243,7 +263,6 @@ const doRename = (node, data) => {
|
||||
pageApi.renamePage({"id": data.id, "name": data.name}).then((json) => {
|
||||
doGetPageList();
|
||||
ElMessage.success('重命名成功');
|
||||
data.renaming = false;
|
||||
});
|
||||
}
|
||||
const doGetPageList = () => {
|
||||
@@ -347,10 +366,59 @@ defineExpose({searchByKeywords})
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.el-tree-node__content {
|
||||
height: 35px;
|
||||
position: relative;
|
||||
|
||||
.page-tree-node {
|
||||
width: 100%;
|
||||
|
||||
.label {
|
||||
.el-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
max-width: calc(100% - 40px);
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.page-action-box {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
|
||||
button {
|
||||
padding: 5px 8px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .page-action-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-autocomplete-popper {
|
||||
width: 600px !important;
|
||||
}
|
||||
|
||||
.space-folder-box {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user