-
Notifications
You must be signed in to change notification settings - Fork 155
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
23 changed files
with
386 additions
and
65 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -28,4 +28,4 @@ stats.html | |
pnpm-lock.yaml | ||
package-lock.json | ||
yarn.lock | ||
/src/types/components.d.ts | ||
/src/typings/components.d.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<template> | ||
<n-back-top :bottom="80" :visibility-height="300"> | ||
<n-tooltip placement="left" trigger="hover"> | ||
<template #trigger> | ||
<div wh-full flex-center> | ||
<i-icon-park-outline-to-top /> | ||
</div> | ||
</template> | ||
<span>返回顶部</span> | ||
</n-tooltip> | ||
</n-back-top> | ||
</template> | ||
|
||
<script setup lang="ts"></script> | ||
|
||
<style scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
<template> | ||
<n-scrollbar style="height: 400px"> | ||
<n-list hoverable clickable> | ||
<n-list-item v-for="(item, index) in props.list" :key="item.id" @click="handleRead(index)"> | ||
<n-thing content-indented :class="{ 'opacity-30': item.isRead }"> | ||
<template #header> | ||
<n-ellipsis :line-clamp="1"> | ||
{{ item.title }} | ||
</n-ellipsis> | ||
</template> | ||
<template #avatar> | ||
<e-icon :icon="item.icon" :size="30" class="c-primary" /> | ||
</template> | ||
<template v-if="item.tagTitle" #header-extra> | ||
<n-tag :bordered="false" :type="item.tagType" size="small">{{ item.tagTitle }}</n-tag> | ||
</template> | ||
<template v-if="item.description" #description> | ||
<n-ellipsis :line-clamp="2"> | ||
{{ item.description }} | ||
</n-ellipsis> | ||
</template> | ||
<template #footer>{{ item.date }}</template> | ||
</n-thing> | ||
</n-list-item> | ||
</n-list> | ||
</n-scrollbar> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
interface Props { | ||
list?: Message.List[]; | ||
} | ||
const props = defineProps<Props>(); | ||
interface Emits { | ||
(e: 'read', val: number): void; | ||
} | ||
const emit = defineEmits<Emits>(); | ||
function handleRead(index: number) { | ||
emit('read', index); | ||
} | ||
</script> | ||
|
||
<style scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,135 @@ | ||
<template> | ||
<n-popover placement="bottom" trigger="click" arrow-point-to-center style="width: 400px"> | ||
<n-popover placement="bottom" trigger="click" arrow-point-to-center class="!p-0"> | ||
<template #trigger> | ||
<n-tooltip placement="bottom" trigger="hover"> | ||
<template #trigger> | ||
<HeaderButton @click="openNotice"> | ||
<i-icon-park-outline-remind class="text-18px" /> | ||
<HeaderButton> | ||
<n-badge :value="massageCount" :max="99" style="color: unset"> | ||
<i-icon-park-outline-remind class="text-18px" /> | ||
</n-badge> | ||
</HeaderButton> | ||
</template> | ||
<span>消息通知</span> | ||
</n-tooltip> | ||
</template> | ||
<n-tabs type="line" animated justify-content="space-evenly"> | ||
<n-tab-pane name="chap1" tab="通知"> | ||
我这辈子最疯狂的事,发生在我在 Amazon 当软件工程师的时候,故事是这样的: | ||
</n-tab-pane> | ||
<n-tab-pane name="chap2" tab="消息"> | ||
“威尔!着火了!快来帮忙!”我听到女朋友大喊。现在一个难题在我面前——是恢复一个重要的 Amazon 服务,还是救公寓的火。 | ||
</n-tab-pane> | ||
<n-tab-pane name="chap3" tab="待办"> | ||
但是忽然,公寓的烟味消失,火警也停了。我的女朋友走进了房间,让我震惊的是,她摘下了自己的假发,她是 Jeff | ||
<n-tabs v-model:value="currentTab" type="line" animated justify-content="space-evenly" class="w-390px"> | ||
<n-tab-pane v-for="item in MassageData" :key="item.key" :name="item.key"> | ||
<template #tab> | ||
<n-space class="w-130px" justify="center"> | ||
{{ item.name }} | ||
<n-badge v-bind="item.badgeProps" :value="item.list.filter((item) => !item.isRead).length" :max="99" /> | ||
</n-space> | ||
</template> | ||
<NoticeList :list="item.list" @read="handleRead" /> | ||
</n-tab-pane> | ||
</n-tabs> | ||
</n-popover> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import HeaderButton from '../common/HeaderButton.vue'; | ||
const openNotice = () => { | ||
console.log('消息通知'); | ||
}; | ||
import NoticeList from '../common/NoticeList.vue'; | ||
import { ref, computed } from 'vue'; | ||
const MassageData = ref<Message.Tab[]>([ | ||
{ | ||
key: 0, | ||
name: '通知', | ||
badgeProps: { type: 'warning' }, | ||
list: [ | ||
{ | ||
id: 0, | ||
title: 'EnchAdmin 已经完成40%了!', | ||
icon: 'icon-park-outline:tips-one', | ||
tagTitle: '未开始', | ||
tagType: 'info', | ||
description: '项目稳定推进中,很快就能看到正式版了', | ||
date: '2022-2-2 12:22', | ||
}, | ||
{ | ||
id: 1, | ||
title: 'EnchAdmin 已经添加通知功能!', | ||
icon: 'icon-park-outline:comment-one', | ||
tagTitle: '未开始', | ||
tagType: 'success', | ||
date: '2022-2-2 12:22', | ||
}, | ||
{ | ||
id: 2, | ||
title: 'EnchAdmin 已经添加路由功能!', | ||
icon: 'icon-park-outline:message-emoji', | ||
tagTitle: '未开始', | ||
tagType: 'warning', | ||
description: '项目稳定推进中...', | ||
date: '2022-2-5 18:32', | ||
}, | ||
{ | ||
id: 3, | ||
title: | ||
'EnchAdmin 已经添加菜单导航功能!EnchAdmin 已经添加菜单导航功能!EnchAdmin 已经添加菜单导航功能!EnchAdmin 已经添加菜单导航功能!', | ||
icon: 'icon-park-outline:tips-one', | ||
tagTitle: '未开始', | ||
tagType: 'error', | ||
description: | ||
'项目稳定推进中...项目稳定推进中...项目稳定推进中...项目稳定推进中...项目稳定推进中...项目稳定推进中...项目稳定推进中...', | ||
date: '2022-2-5 18:32', | ||
}, | ||
{ | ||
id: 4, | ||
title: 'EnchAdmin开始启动了!', | ||
icon: 'icon-park-outline:tips-one', | ||
tagTitle: '未开始', | ||
description: '项目稳定推进中...', | ||
date: '2022-2-5 18:32', | ||
}, | ||
], | ||
}, | ||
{ | ||
key: 1, | ||
name: '消息', | ||
badgeProps: { type: 'info' }, | ||
list: [ | ||
{ | ||
id: 0, | ||
title: '相见恨晚??', | ||
icon: 'icon-park-outline:comment', | ||
description: '项目稳定推进中,很快就能看到正式版了', | ||
date: '2022-2-2 12:22', | ||
}, | ||
{ | ||
id: 1, | ||
title: '动态路由已完成!', | ||
icon: 'icon-park-outline:comment', | ||
description: '项目稳定推进中,很快就能看到正式版了', | ||
date: '2022-2-25 12:22', | ||
}, | ||
], | ||
}, | ||
{ | ||
key: 2, | ||
name: '待办', | ||
badgeProps: { type: 'error' }, | ||
list: [ | ||
{ | ||
id: 0, | ||
title: '接下来需要完善一些', | ||
icon: 'icon-park-outline:beach-umbrella', | ||
tagTitle: '未开始', | ||
description: '项目稳定推进中,很快就能看到正式版了', | ||
date: '2022-2-2 12:22', | ||
}, | ||
], | ||
}, | ||
]); | ||
const currentTab = ref(0); | ||
function handleRead(index: number) { | ||
MassageData.value[currentTab.value].list[index].isRead = true; | ||
} | ||
const massageCount = computed(() => { | ||
return MassageData.value.reduce((pre, cur) => { | ||
return pre + cur.list.filter((item) => !item.isRead).length; | ||
}, 0); | ||
}); | ||
</script> | ||
|
||
<style scoped></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,3 @@ | ||
export * from './api/test'; | ||
export * from './api/login'; | ||
export * from './api/mock'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
// generated by unplugin-vue-components | ||
// We suggest you to commit this file into source control | ||
// Read more: https://github.com/vuejs/core/pull/3399 | ||
import '@vue/runtime-core'; | ||
|
||
export {}; | ||
|
||
declare module '@vue/runtime-core' { | ||
export interface GlobalComponents { | ||
EIcon: typeof import('./../components/custom/EIcon.vue')['default']; | ||
ErrorTip: typeof import('./../components/common/ErrorTip.vue')['default']; | ||
NaiveProvider: typeof import('./../components/common/NaiveProvider.vue')['default']; | ||
Pagination: typeof import('./../components/custom/Pagination.vue')['default']; | ||
RouterLink: typeof import('vue-router')['RouterLink']; | ||
RouterView: typeof import('vue-router')['RouterView']; | ||
SvgIcon: typeof import('./../components/custom/SvgIcon.vue')['default']; | ||
} | ||
} |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.