manager/zyplayer-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

右上角操作按钮优化

Browse Source
This commit is contained in:
sswiki
2024-12-06 23:01:33 +08:00
parent 858e7d6f21
commit d7256cf122
3 changed files with 115 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
zyplayer-doc-ui/wiki-ui/src/components/layouts/UserMessagePopover.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<span class="user-message-popover"> <span class="user-message-popover">
<el-tooltip content="文档通知"> <a-tooltip title="文档通知">
<el-badge :value="notReadMessageNum" :max="99" :hidden="notReadMessageNum <= 0"> <a-badge :count="notReadMessageNum" :hidden="notReadMessageNum <= 0" :offset="[-6, 6]">
<el-button ref="remindButtonRef" class="hover-button" text><IconParkRemind size="18"/></el-button> <a-button ref="remindButtonRef" class="hover-button hover-bg" size="large" :icon="h(BellOutlined)"></a-button>
</el-badge> </a-badge>
</el-tooltip> </a-tooltip>
<el-popover v-model:visible="userMessagePopVisible" placement="bottom" :width="700" trigger="click" <el-popover v-model:visible="userMessagePopVisible" placement="bottom" :width="700" trigger="click"
popper-class="header-user-remind" ref="popoverRef" popper-class="header-user-remind" ref="popoverRef"
:virtual-ref="remindButtonRef" virtual-triggering> :virtual-ref="remindButtonRef" virtual-triggering>
@@ -48,10 +48,8 @@ import {
Plus as ElIconPlus, Plus as ElIconPlus,
Check as ElIconCheck, Check as ElIconCheck,
} from '@element-plus/icons-vue' } from '@element-plus/icons-vue'
import { import {BellOutlined, CheckOutlined} from '@ant-design/icons-vue';
Remind as IconParkRemind, import {onBeforeUnmount, toRefs, ref, reactive, onMounted, watch, h, defineProps, nextTick, defineEmits, defineExpose, computed} from 'vue';
} from '@icon-park/vue-next'
import {onBeforeUnmount, toRefs, ref, reactive, onMounted, watch, defineProps, nextTick, defineEmits, defineExpose, computed} from 'vue';
import {onBeforeRouteUpdate, useRouter, useRoute} from "vue-router"; import {onBeforeRouteUpdate, useRouter, useRoute} from "vue-router";
import {ElMessageBox, ElMessage} from 'element-plus' import {ElMessageBox, ElMessage} from 'element-plus'
import pageApi from "@/assets/api/page"; import pageApi from "@/assets/api/page";

215
zyplayer-doc-ui/wiki-ui/src/views/page/aside/RightHeader.vue
View File

@@ -17,17 +17,20 @@
<el-col :span="12" style="text-align: right;"> <el-col :span="12" style="text-align: right;">
<div class="header-action-box"> <div class="header-action-box">
<template v-if="storeDisplay.currentPage === 'view'"> <template v-if="storeDisplay.currentPage === 'view'">
<el-tooltip v-if="storePage.pageAuth.canEdit === 1" content="编辑文档"> <a-tooltip v-if="storePage.pageAuth.canEdit === 1" title="编辑文档">
<el-button class="hover-button" @click="editWiki" text><IconParkEdit size="18"/></el-button> <a-button class="hover-button hover-bg" @click="editWiki" size="large" :icon="h(EditOutlined)"></a-button>
</el-tooltip> </a-tooltip>
<el-tooltip content="文档沟通"> <a-tooltip v-else title="没有编辑权限">
<el-button class="hover-button" @click="showCommentWiki" text><IconParkCommunication size="18"/></el-button> <span class="disabled-btn-box"><a-button class="hover-button" size="large" :icon="h(EditOutlined)" disabled></a-button></span>
</el-tooltip> </a-tooltip>
<a-tooltip title="文档沟通">
<a-button class="hover-button hover-bg" @click="showCommentWiki" size="large" :icon="h(MessageOutlined)"></a-button>
</a-tooltip>
<UserMessagePopover/> <UserMessagePopover/>
<a-dropdown trigger="click" placement="bottom" overlayClassName="header-action-more-dropdown"> <a-dropdown trigger="click" placement="bottom" overlayClassName="header-action-more-dropdown">
<span style="line-height: 60px;display:inline-block;margin: 0 8px;"> <span style="display:inline-block;margin: 0 12px;">
<el-button :icon="ElIconMoreFilled" class="hover-button" text></el-button> <a-button class="hover-button hover-bg" size="large" :icon="h(EllipsisOutlined)"></a-button>
</span> </span>
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<a-menu-item @click="editWikiAuth" v-if="storePage.pageAuth.canConfigAuth === 1"><el-icon><ElIconSCheck/></el-icon> 权限设置</a-menu-item> <a-menu-item @click="editWikiAuth" v-if="storePage.pageAuth.canConfigAuth === 1"><el-icon><ElIconSCheck/></el-icon> 权限设置</a-menu-item>
@@ -41,8 +44,8 @@
</a-dropdown> </a-dropdown>
</template> </template>
<a-dropdown trigger="click" placement="bottom" overlayClassName="header-action-user-dropdown"> <a-dropdown trigger="click" placement="bottom" overlayClassName="header-action-user-dropdown">
<span style="line-height: 60px;display:inline-block;"> <span style="display:inline-block;">
<el-button :icon="ElIconUserFilled" class="hover-button" text></el-button> <a-button class="hover-button hover-bg" size="large" :icon="h(UserOutlined)"></a-button>
</span> </span>
<template #overlay> <template #overlay>
<a-menu> <a-menu>
@@ -77,12 +80,8 @@ import {
Setting as ElIconSetting, Setting as ElIconSetting,
UserFilled as ElIconUserFilled, UserFilled as ElIconUserFilled,
} from '@element-plus/icons-vue' } from '@element-plus/icons-vue'
import { import {UserOutlined, EditOutlined, MessageOutlined, CheckOutlined, EllipsisOutlined} from '@ant-design/icons-vue';
Star as IconParkStar, import {toRefs, ref, reactive, onMounted, watch, defineEmits, h, computed} from 'vue';
Edit as IconParkEdit,
Communication as IconParkCommunication,
} from '@icon-park/vue-next'
import {toRefs, ref, reactive, onMounted, watch, defineEmits, computed} from 'vue';
import {useRouter, useRoute} from "vue-router"; import {useRouter, useRoute} from "vue-router";
import { ElMessageBox, ElMessage } from 'element-plus' import { ElMessageBox, ElMessage } from 'element-plus'
import { useStoreDisplay } from '@/store/wikiDisplay.js' import { useStoreDisplay } from '@/store/wikiDisplay.js'
@@ -213,131 +212,131 @@ const showConsole = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.left-action-box { .left-action-box {
display: flex; display: flex;
.collapse-box { .collapse-box {
line-height: 60px; line-height: 60px;
.fold-btn { .fold-btn {
font-size: 18px; font-size: 18px;
padding: 4px 10px; padding: 4px 10px;
color: #888 !important; color: #888 !important;
} }
}
.title-time-box {
flex: 1;
padding: 5px 0 6px 10px;
overflow: hidden;
.title {
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
line-height: 28px;
.text {
vertical-align: middle;
}
} }
.time { .title-time-box {
font-size: 12px; flex: 1;
overflow: hidden; padding: 5px 0 6px 10px;
white-space: nowrap; overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
}
.title-setting-box { .title {
.setting-title { overflow: hidden;
font-size: 18px; white-space: nowrap;
line-height: 60px; -o-text-overflow: ellipsis;
padding-left: 10px; text-overflow: ellipsis;
.text { line-height: 28px;
display: inline-block;
} .text {
vertical-align: middle;
}
}
.time {
font-size: 12px;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
}
.title-setting-box {
.setting-title {
font-size: 18px;
line-height: 60px;
padding-left: 10px;
.text {
display: inline-block;
}
}
} }
}
} }
</style> </style>
<style lang="scss"> <style lang="scss">
.left-action-box { .left-action-box {
.title-time-box { .title-time-box {
.title { .title {
.i-icon { .i-icon {
vertical-align: middle; vertical-align: middle;
svg { svg {
vertical-align: unset; vertical-align: unset;
}
}
} }
}
} }
}
} }
.title-setting-box { .title-setting-box {
.setting-title { .setting-title {
.tips-icon { .tips-icon {
vertical-align: 0.1em; vertical-align: 0.1em;
margin-left: 6px; margin-left: 6px;
}
} }
}
} }
.header-action-box { .header-action-box {
display: inline-block; display: inline-block;
line-height: 60px; line-height: 60px;
.disabled-btn-box { .disabled-btn-box {
margin-right: 10px; margin-right: 10px;
}
.hover-button {
border: 0;
color: #888;
.i-icon svg {
vertical-align: middle;
} }
}
.hover-button:focus { .hover-button {
color: #888; border: 0;
background: #fff; box-shadow: unset;
} width: 54px !important;
.hover-button:hover { .i-icon svg {
color: #888; vertical-align: inherit;
background: #eaeaea; }
}
&:hover.hover-bg {
background: #eaeaea;
}
& + .hover-button {
margin-left: 10px;
}
}
} }
.header-action-user-dropdown { .header-action-user-dropdown {
width: 120px; width: 120px;
} }
.header-action-more-dropdown { .header-action-more-dropdown {
width: 140px; width: 140px;
.delete { .delete {
color: #f00; color: #f00;
} }
.delete.disabled { .delete.disabled {
cursor: not-allowed; cursor: not-allowed;
color: var(--el-text-color-disabled); color: var(--el-text-color-disabled);
} }
.cant-hover { .cant-hover {
cursor: default; cursor: default;
} }
.cant-hover:hover { .cant-hover:hover {
background: #fff; background: #fff;
} }
} }
</style> </style>

2
zyplayer-doc-ui/wiki-ui/src/views/page/show/Navigation.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="navigation-box"> <div class="navigation-box">
<div class="navigation-content-box"> <div class="navigation-content-box">
<div>dasdas</div> <div></div>
<div class="nav-heading" :style="{ width: navigationWidth }"> <div class="nav-heading" :style="{ width: navigationWidth }">
<div v-for="item in heading" :class="'heading-item heading-' + item.level" @click="headingItemClick(item)"> <div v-for="item in heading" :class="'heading-item heading-' + item.level" @click="headingItemClick(item)">
{{ item.text }} {{ item.text }}