diff --git a/src/layouts/default/LayoutHeader.tsx b/src/layouts/default/LayoutHeader.tsx
index 6f7c0d11b7787c8d987f70c0bb2a324839f25984..dad20dccafb8f6bb9143d1b357d432cc09d1b710 100644
--- a/src/layouts/default/LayoutHeader.tsx
+++ b/src/layouts/default/LayoutHeader.tsx
@@ -22,6 +22,7 @@ import { useModal } from '/@/components/Modal/index';
import { errorStore } from '/@/store/modules/error';
import { useGo } from '/@/hooks/web/usePage';
import { useWindowSizeFn } from '/@/hooks/event/useWindowSize';
+import NoticeAction from './actions/notice/NoticeActionItem.vue';
export default defineComponent({
name: 'DefaultLayoutHeader',
@@ -85,7 +86,14 @@ export default defineComponent({
const {
useErrorHandle,
showLogo,
- headerSetting: { theme: headerTheme, useLockPage, showRedo, showGithub, showFullScreen },
+ headerSetting: {
+ theme: headerTheme,
+ useLockPage,
+ showRedo,
+ showGithub,
+ showFullScreen,
+ showNotice,
+ },
menuSetting: { mode, type: menuType, split: splitMenu, topMenuAlign },
showBreadCrumb,
} = getProjectConfig;
@@ -163,6 +171,20 @@ export default defineComponent({
}}
)}
+ {showNotice && (
+
+
+ {{
+ title: () => '消息中心',
+ default: () => (
+
+ ),
+ }}
+
+
+ )}
{showRedo && (
{{
diff --git a/src/layouts/default/actions/notice/NoticeActionItem.tsx b/src/layouts/default/actions/notice/NoticeActionItem.tsx
deleted file mode 100644
index 96715fe10efa8baad48f5b369196c886541d625a..0000000000000000000000000000000000000000
--- a/src/layouts/default/actions/notice/NoticeActionItem.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { defineComponent } from 'vue';
-import { Popover, Tabs } from 'ant-design-vue';
-
-import NoticeList from './NoticeList';
-import { NoticeTabItem, NoticeListItem, noticeTabListData, noticeListData } from './data';
-import './index.less';
-
-const prefixCls = 'notice-popover';
-export default defineComponent({
- name: 'NoticePopover',
- props: {
- visible: {
- type: Boolean,
- default: false,
- },
- },
- setup(props, { attrs }) {
- // 渲染卡片内容
- function renderContent() {
- return (
-
- {() => {
- return noticeTabListData.map((item: NoticeTabItem) => {
- const { key, name } = item;
- return (
-
- {() => }
-
- );
- });
- }}
-
- );
- }
-
- // tab标题渲染
- function renderTab(key: string, name: string) {
- const list = getListData(key);
- const unreadlist = list.filter((item: NoticeListItem) => !item.read);
- return (
-
- {name}
- {unreadlist.length > 0 && ({unreadlist.length})}
-
- );
- }
-
- // 获取数据
- function getListData(type: string) {
- return noticeListData.filter((item: NoticeListItem) => item.type === type);
- }
-
- return () => {
- const { visible } = props;
- return (
-
- );
- };
- },
-});
diff --git a/src/layouts/default/actions/notice/NoticeActionItem.vue b/src/layouts/default/actions/notice/NoticeActionItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..03bdc33c5e1d13d78e0f554cdc7e3bf8364c124b
--- /dev/null
+++ b/src/layouts/default/actions/notice/NoticeActionItem.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.name }}
+ ({{ item.list.length }})
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/default/actions/notice/NoticeList.tsx b/src/layouts/default/actions/notice/NoticeList.tsx
deleted file mode 100644
index 3b0ab9844147883f1d743b978b1e2df22ff5adbe..0000000000000000000000000000000000000000
--- a/src/layouts/default/actions/notice/NoticeList.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { defineComponent } from 'vue';
-import { List, Avatar, Tag } from 'ant-design-vue';
-
-import { NoticeListItem } from './data';
-import './index.less';
-
-const prefixCls = 'notice-popover';
-export default defineComponent({
- name: 'NoticeList',
- props: {
- list: {
- type: Array,
- default: () => [],
- },
- },
- setup(props) {
- // 头像渲染
- function renderAvatar(avatar: string) {
- return avatar ? : {avatar};
- }
-
- // 描述渲染
- function renderDescription(description: string, datetime: string) {
- return (
-
-
{description}
-
{datetime}
-
- );
- }
-
- // 标题渲染
- function renderTitle(title: string, extra?: string, color?: string) {
- return (
-
- {title}
- {extra && (
-
- )}
-
- );
- }
-
- return () => {
- const { list } = props;
- return (
-
- {() => {
- return list.map((item: NoticeListItem) => {
- const { id, avatar, title, description, datetime, extra, read, color } = item;
- return (
-
- {() => (
-
- )}
-
- );
- });
- }}
-
- );
- };
- },
-});
diff --git a/src/layouts/default/actions/notice/NoticeList.vue b/src/layouts/default/actions/notice/NoticeList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dfc566f2ae59f964abb63c6f3dbac2aa78a1c767
--- /dev/null
+++ b/src/layouts/default/actions/notice/NoticeList.vue
@@ -0,0 +1,102 @@
+
+
+
+
+
+
+
+ {{ item.title }}
+
+
+
+
+
+ {{ item.avatar }}
+
+
+
+
{{ item.description }}
+
{{ item.datetime }}
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/default/actions/notice/data.ts b/src/layouts/default/actions/notice/data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1764a95fcd310975b34ccffb72f5f8fd062080dd
--- /dev/null
+++ b/src/layouts/default/actions/notice/data.ts
@@ -0,0 +1,148 @@
+export interface ListItem {
+ id: string;
+ avatar: string;
+ title: string;
+ datetime: string;
+ type: string;
+ read?: boolean;
+ description: string;
+ clickClose?: boolean;
+ extra?: string;
+ color?: string;
+}
+
+export interface TabItem {
+ key: string;
+ name: string;
+ list: ListItem[];
+ unreadlist?: ListItem[];
+}
+
+export const tabListData: TabItem[] = [
+ {
+ key: '1',
+ name: '通知',
+ list: [
+ {
+ id: '000000001',
+ avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+ title: '你收到了 14 份新周报',
+ description: '',
+ datetime: '2017-08-09',
+ type: '1',
+ },
+ {
+ id: '000000002',
+ avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
+ title: '你推荐的 曲妮妮 已通过第三轮面试',
+ description: '',
+ datetime: '2017-08-08',
+ type: '1',
+ },
+ {
+ id: '000000003',
+ avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
+ title: '这种模板可以区分多种通知类型',
+ description: '',
+ datetime: '2017-08-07',
+ // read: true,
+ type: '1',
+ },
+ {
+ id: '000000004',
+ avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+ title: '左侧图标用于区分不同的类型',
+ description: '',
+ datetime: '2017-08-07',
+ type: '1',
+ },
+ // {
+ // id: '000000005',
+ // avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+ // title: '内容不要超过两行字,超出时自动截断',
+ // description: '',
+ // datetime: '2017-08-07',
+ // type: '1',
+ // },
+ ],
+ },
+ {
+ key: '2',
+ name: '消息',
+ list: [
+ {
+ id: '000000006',
+ avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+ title: '曲丽丽 评论了你',
+ description: '描述信息描述信息描述信息',
+ datetime: '2017-08-07',
+ type: '2',
+ clickClose: true,
+ },
+ {
+ id: '000000007',
+ avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+ title: '朱偏右 回复了你',
+ description: '这种模板用于提醒谁与你发生了互动',
+ datetime: '2017-08-07',
+ type: '2',
+ clickClose: true,
+ },
+ {
+ id: '000000008',
+ avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+ title: '标题',
+ description: '这种模板用于提醒谁与你发生了互动',
+ datetime: '2017-08-07',
+ type: '2',
+ clickClose: true,
+ },
+ ],
+ },
+ {
+ key: '3',
+ name: '待办',
+ list: [
+ {
+ id: '000000009',
+ avatar: '',
+ title: '任务名称',
+ description: '任务需要在 2017-01-12 20:00 前启动',
+ datetime: '',
+ extra: '未开始',
+ color: '',
+ type: '3',
+ },
+ {
+ id: '000000010',
+ avatar: '',
+ title: '第三方紧急代码变更',
+ description: '冠霖 需在 2017-01-07 前完成代码变更任务',
+ datetime: '',
+ extra: '马上到期',
+ color: 'red',
+ type: '3',
+ },
+ {
+ id: '000000011',
+ avatar: '',
+ title: '信息安全考试',
+ description: '指派竹尔于 2017-01-09 前完成更新并发布',
+ datetime: '',
+ extra: '已耗时 8 天',
+ color: 'gold',
+ type: '3',
+ },
+ {
+ id: '000000012',
+ avatar: '',
+ title: 'ABCD 版本发布',
+ description: '指派竹尔于 2017-01-09 前完成更新并发布',
+ datetime: '',
+ extra: '进行中',
+ color: 'blue',
+ type: '3',
+ },
+ ],
+ },
+];
diff --git a/src/settings/projectSetting.ts b/src/settings/projectSetting.ts
index bcd48f0b1cfe8d40c044ac8cb3088b172ac17cba..1f016d71e584037822288a6b5f1c91958d38ab14 100644
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -39,6 +39,8 @@ const setting: ProjectConfig = {
showDoc: true,
// 是否显示github
showGithub: true,
+ // 显示消息中心按钮
+ showNotice: true,
},
// 菜单配置
menuSetting: {
diff --git a/src/types/config.d.ts b/src/types/config.d.ts
index a5d40a99b9933ab9466cf89a78c93d22f3e1a724..8684048eb5e0937fd3cd3121b5ea5e87dd3d42c6 100644
--- a/src/types/config.d.ts
+++ b/src/types/config.d.ts
@@ -47,6 +47,8 @@ export interface HeaderSetting {
// 显示文档按钮
showDoc: boolean;
showGithub: boolean;
+ // 显示消息中心按钮
+ showNotice: boolean;
}
export interface ProjectConfig {
// 是否显示配置按钮