mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-22 23:31:52 +08:00
feat: 添加消息图标面板
This commit is contained in:
xingyu
parent
2d5571bcce
commit
c7b6030418
@ -0,0 +1,3 @@
|
||||
import Message from './src/Message.vue'
|
||||
|
||||
export { Message }
|
||||
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="message">
|
||||
<el-popover placement="bottom" :width="310" trigger="click">
|
||||
<template #reference>
|
||||
<el-badge :value="noticeList.length" class="item">
|
||||
<Icon icon="ep:bell" :size="18" class="cursor-pointer" />
|
||||
</el-badge>
|
||||
</template>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="通知(5)" name="first">
|
||||
<div class="message-list">
|
||||
<template v-for="item in noticeList" :key="item.id">
|
||||
<div class="message-item">
|
||||
<img src="@/assets/imgs/avatar.gif" alt="" class="message-icon" />
|
||||
<div class="message-content">
|
||||
<span class="message-title">{{ item.title }}</span>
|
||||
<span class="message-date">{{ item.date }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="消息(0)" name="second">
|
||||
<div class="message-list">
|
||||
<template v-for="item in messageList" :key="item.id">
|
||||
<div class="message-item">
|
||||
<img src="@/assets/imgs/avatar.gif" alt="" class="message-icon" />
|
||||
<div class="message-content">
|
||||
<span class="message-title">{{ item.title }}</span>
|
||||
<span class="message-date">{{ item.date }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="代办(0)" name="third">
|
||||
<div class="message-list">
|
||||
<template v-for="item in needList" :key="item.id">
|
||||
<div class="message-item">
|
||||
<img src="@/assets/imgs/avatar.gif" alt="" class="message-icon" />
|
||||
<div class="message-content">
|
||||
<span class="message-title">{{ item.title }}</span>
|
||||
<span class="message-date">{{ item.date }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ElTabs, ElTabPane, ElPopover, ElBadge } from 'element-plus'
|
||||
|
||||
const activeName = ref('first')
|
||||
|
||||
const noticeList = ref([
|
||||
{ id: 1, title: '版本升级1', date: '2022-12-12 10:00:00' },
|
||||
{ id: 2, title: '版本升级2', date: '2022-12-12 10:00:00' },
|
||||
{ id: 3, title: '版本升级3', date: '2022-12-12 10:00:00' },
|
||||
{ id: 4, title: '版本升级4', date: '2022-12-12 10:00:00' },
|
||||
{ id: 5, title: '版本升级5', date: '2022-12-12 10:00:00' }
|
||||
])
|
||||
const messageList = ref([
|
||||
{ id: 1, title: '加班1', date: '2022-12-12 10:00:00' },
|
||||
{ id: 2, title: '加班2', date: '2022-12-12 10:00:00' },
|
||||
{ id: 3, title: '加班3', date: '2022-12-12 10:00:00' },
|
||||
{ id: 4, title: '加班4', date: '2022-12-12 10:00:00' },
|
||||
{ id: 5, title: '加班5', date: '2022-12-12 10:00:00' }
|
||||
])
|
||||
const needList = ref([
|
||||
{ id: 1, title: '审批1', date: '2022-12-12 10:00:00' },
|
||||
{ id: 2, title: '审批2', date: '2022-12-12 10:00:00' },
|
||||
{ id: 3, title: '审批3', date: '2022-12-12 10:00:00' },
|
||||
{ id: 4, title: '审批4', date: '2022-12-12 10:00:00' },
|
||||
{ id: 5, title: '审批5', date: '2022-12-12 10:00:00' }
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.message-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 260px;
|
||||
line-height: 45px;
|
||||
}
|
||||
.message-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.message-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
.message-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 20px 0 5px;
|
||||
}
|
||||
.message-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.message-title {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.message-date {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -122,6 +122,8 @@ const copyConfig = async () => {
|
||||
size: ${appStore.getSize},
|
||||
// 多语言图标
|
||||
locale: ${appStore.getLocale},
|
||||
// 消息图标
|
||||
message: ${appStore.getMessage},
|
||||
// 标签页
|
||||
tagsView: ${appStore.getTagsView},
|
||||
// 标签页图标
|
||||
|
||||
@ -57,6 +57,13 @@ const localeChange = (show: boolean) => {
|
||||
appStore.setLocale(show)
|
||||
}
|
||||
|
||||
// 消息图标
|
||||
const message = ref(appStore.getMessage)
|
||||
|
||||
const messageChange = (show: boolean) => {
|
||||
appStore.setMessage(show)
|
||||
}
|
||||
|
||||
// 标签页
|
||||
const tagsView = ref(appStore.getTagsView)
|
||||
|
||||
@ -164,6 +171,11 @@ watch(
|
||||
<ElSwitch v-model="locale" @change="localeChange" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-14px">{{ t('setting.messageIcon') }}</span>
|
||||
<ElSwitch v-model="message" @change="messageChange" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-14px">{{ t('setting.tagsView') }}</span>
|
||||
<ElSwitch v-model="tagsView" @change="tagsViewChange" />
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<script lang="tsx">
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import { Message } from '@/layout/components//Message'
|
||||
import { Collapse } from '@/layout/components/Collapse'
|
||||
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
|
||||
import { SizeDropdown } from '@/layout/components/SizeDropdown'
|
||||
import { UserInfo } from '@/layout/components/UserInfo'
|
||||
import { Screenfull } from '@/layout/components/Screenfull'
|
||||
import { Breadcrumb } from '@/layout/components/Breadcrumb'
|
||||
import { SizeDropdown } from '@/layout/components/SizeDropdown'
|
||||
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
@ -33,6 +34,9 @@ const layout = computed(() => appStore.getLayout)
|
||||
// 多语言图标
|
||||
const locale = computed(() => appStore.getLocale)
|
||||
|
||||
// 消息图标
|
||||
const message = computed(() => appStore.getMessage)
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ToolHeader',
|
||||
setup() {
|
||||
@ -66,6 +70,9 @@ export default defineComponent({
|
||||
color="var(--top-header-text-color)"
|
||||
></LocaleDropdown>
|
||||
) : undefined}
|
||||
{message.value ? (
|
||||
<Message class="hover-trigger" color="var(--top-header-text-color)"></Message>
|
||||
) : undefined}
|
||||
<UserInfo class="hover-trigger"></UserInfo>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -80,6 +80,7 @@ export default {
|
||||
screenfullIcon: 'Screenfull icon',
|
||||
sizeIcon: 'Size icon',
|
||||
localeIcon: 'Locale icon',
|
||||
messageIcon: 'Message icon',
|
||||
tagsView: 'Tags view',
|
||||
logo: 'Logo',
|
||||
greyMode: 'Grey mode',
|
||||
|
||||
@ -80,6 +80,7 @@ export default {
|
||||
screenfullIcon: '全屏图标',
|
||||
sizeIcon: '尺寸图标',
|
||||
localeIcon: '多语言图标',
|
||||
messageIcon: '消息图标',
|
||||
tagsView: '标签页',
|
||||
logo: '标志',
|
||||
greyMode: '灰色模式',
|
||||
|
||||
@ -18,6 +18,7 @@ interface AppState {
|
||||
screenfull: boolean
|
||||
size: boolean
|
||||
locale: boolean
|
||||
message: boolean
|
||||
tagsView: boolean
|
||||
tagsViewIcon: boolean
|
||||
logo: boolean
|
||||
@ -53,6 +54,7 @@ export const useAppStore = defineStore('app', {
|
||||
screenfull: true, // 全屏图标
|
||||
size: true, // 尺寸图标
|
||||
locale: true, // 多语言图标
|
||||
message: true, // 消息图标
|
||||
tagsView: true, // 标签页
|
||||
tagsViewIcon: true, // 是否显示标签图标
|
||||
logo: true, // logo
|
||||
@ -121,6 +123,9 @@ export const useAppStore = defineStore('app', {
|
||||
getLocale(): boolean {
|
||||
return this.locale
|
||||
},
|
||||
getMessage(): boolean {
|
||||
return this.message
|
||||
},
|
||||
getTagsView(): boolean {
|
||||
return this.tagsView
|
||||
},
|
||||
@ -195,6 +200,9 @@ export const useAppStore = defineStore('app', {
|
||||
setLocale(locale: boolean) {
|
||||
this.locale = locale
|
||||
},
|
||||
setMessage(message: boolean) {
|
||||
this.message = message
|
||||
},
|
||||
setTagsView(tagsView: boolean) {
|
||||
this.tagsView = tagsView
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user