From ebc3d67f6e3b8ad40e80d575055eb3c715cee26f Mon Sep 17 00:00:00 2001 From: ringosix Date: Wed, 11 Aug 2021 14:03:42 +0800 Subject: [PATCH 1/3] feat(admin): add layout-header router & nav-tree router for center --- packages/admin/src/index.tsx | 1 + packages/admin/src/l10n/en/base.ts | 1 + packages/admin/src/l10n/zh/base.ts | 1 + .../src/layouts/components/layout-header.tsx | 25 +++++++++---------- packages/admin/src/nav-tree.ts | 7 ++++++ packages/admin/src/router.ts | 7 ++++++ 6 files changed, 29 insertions(+), 13 deletions(-) diff --git a/packages/admin/src/index.tsx b/packages/admin/src/index.tsx index 6f5762918..b1d19aab3 100644 --- a/packages/admin/src/index.tsx +++ b/packages/admin/src/index.tsx @@ -26,6 +26,7 @@ import '@omiu/icon/people-alt' import '@omiu/icon/pie-chart' import '@omiu/transition' import '@omiu/icon/edit' +import '@omiu/icon/account-box' import './index.css' diff --git a/packages/admin/src/l10n/en/base.ts b/packages/admin/src/l10n/en/base.ts index 98c8d3655..d7115abac 100644 --- a/packages/admin/src/l10n/en/base.ts +++ b/packages/admin/src/l10n/en/base.ts @@ -38,6 +38,7 @@ export const base = { ServerError: 'Server Error', MasonryList: 'Masonry List', NotificationList: 'NotificationList', + PersonalCenter: 'PersonalCenter', Introduction: 'Introduction', CustomTheme: 'Custom Theme', diff --git a/packages/admin/src/l10n/zh/base.ts b/packages/admin/src/l10n/zh/base.ts index 2bff75efa..6acdd4e91 100644 --- a/packages/admin/src/l10n/zh/base.ts +++ b/packages/admin/src/l10n/zh/base.ts @@ -39,6 +39,7 @@ export const base = { MasonryList: '瀑布流列表', NotificationList: '通知中心', + PersonalCenter: '个人中心', Introduction: '简介', CustomTheme: '自定义主题', diff --git a/packages/admin/src/layouts/components/layout-header.tsx b/packages/admin/src/layouts/components/layout-header.tsx index 0225711a1..4540ec1ca 100644 --- a/packages/admin/src/layouts/components/layout-header.tsx +++ b/packages/admin/src/layouts/components/layout-header.tsx @@ -76,20 +76,19 @@ export default class extends WeElement { goPersonalCenter = () => { // 待页面搭建完成后开放 - // const tab = this.store.tabs.find((tab) => tab.label === this.store.localeMap.base.PersonalCenter) + const tab = this.store.tabs.find((tab) => tab.label === this.store.localeMap.base.PersonalCenter) - // if (tab) { - // this.store.tabsActiveIndex = this.store.tabs.indexOf(tab) - // this.store.selectTreeNodeById(tab.id) - // location.hash = tab.href - // } else { - // const PersonalCenterTab = this.store.treeData.find((item) => item.label === this.store.localeMap.base.ManagerWorkbench).children.find((item) => item.label === this.store.localeMap.base.PersonalCenter) - // this.store.tabs.push(PersonalCenterTab) - // this.store.tabsActiveIndex = this.store.tabs.length - 1 - // this.store.selectTreeNodeById(PersonalCenterTab.id) - // location.hash = PersonalCenterTab.href - // console.log(this.store) - // } + if (tab) { + this.store.tabsActiveIndex = this.store.tabs.indexOf(tab) + this.store.selectTreeNodeById(tab.id) + location.hash = tab.href + } else { + const PersonalCenterTab = this.store.treeData.find((item) => item.label === this.store.localeMap.base.ManagerWorkbench).children.find((item) => item.label === this.store.localeMap.base.PersonalCenter) + this.store.tabs.push(PersonalCenterTab) + this.store.tabsActiveIndex = this.store.tabs.length - 1 + this.store.selectTreeNodeById(PersonalCenterTab.id) + location.hash = PersonalCenterTab.href + } } render() { diff --git a/packages/admin/src/nav-tree.ts b/packages/admin/src/nav-tree.ts index 36e1607f0..a5f3611c4 100644 --- a/packages/admin/src/nav-tree.ts +++ b/packages/admin/src/nav-tree.ts @@ -77,6 +77,13 @@ export function genNavTree(localeMap, locale) { id: genId(), href: '#/notification-list', icon: 'notifications' + }, + { + label: localeMap.base.PersonalCenter, + expanded: true, + id: genId(), + href: '#/personal-center', + icon: 'account-box' } ] }, diff --git a/packages/admin/src/router.ts b/packages/admin/src/router.ts index a996cad55..a36a3c0e5 100644 --- a/packages/admin/src/router.ts +++ b/packages/admin/src/router.ts @@ -207,6 +207,13 @@ export function registerRouting(rootEl) { ) }) + route('/personal-center', () => { + //lazy load + import('./components/account/personal-center').then(() => + rootEl.transitionTo('personal-center') + ) + }) + route('*', function () { console.log('not found') }) From 7dadd89e63b65a92aa50f16c521fcf2bec7f9cdd Mon Sep 17 00:00:00 2001 From: ringosix Date: Wed, 11 Aug 2021 18:00:01 +0800 Subject: [PATCH 2/3] feat(admin): account-center --- .../components/account/personal-center.tsx | 299 ++++++++++++++++++ .../notification/notification-list.tsx | 4 +- 2 files changed, 301 insertions(+), 2 deletions(-) create mode 100644 packages/admin/src/components/account/personal-center.tsx diff --git a/packages/admin/src/components/account/personal-center.tsx b/packages/admin/src/components/account/personal-center.tsx new file mode 100644 index 000000000..d3880ec4a --- /dev/null +++ b/packages/admin/src/components/account/personal-center.tsx @@ -0,0 +1,299 @@ +import { WeElement, h, tag } from 'omi' +import { tw, sheet } from 'omi-twind' + +import '@omiu/card' +import '@omiu/avatar' +import '@omiu/link' +import '@omiu/tooltip' +import '@omiu/icon/chat-outlined' +import '@omiu/icon/date-range' +import '@omiu/icon/call-outlined' +import '@omiu/icon/mail-outline' +import '@omiu/icon/arrow-forward-ios' +import '@omiu/icon/insert-drive-file-outlined' +import '@omiu/icon/add-box-outlined' +import '@omiu/icon/delete-outlined' +import '@omiu/toast' +import { + showLoading, + hideLoading +} from '@omiu/toast' + +interface Props { } + +const tagName = 'personal-center' +declare global { + namespace JSX { + interface IntrinsicElements { + [tagName]: Omi.Props & Props + } + } +} + +@tag(tagName) +export default class extends WeElement { + static css = sheet.target + + members = [ + { + name: '杨阳洋', + title: '部门主管', + avatar: 'https://tdesign.gtimg.com/pro-template/personal/avatar5.png', + email: 'yyy@omi.com', + tel: '13656785678' + }, + { + name: '花朵朵', + title: '客户经理', + avatar: 'https://tdesign.gtimg.com/pro-template/personal/avatar1.png', + email: 'hdd@omi.com', + tel: '19856785678' + }, + { + name: '李晓红', + title: '客户助理', + avatar: 'https://tdesign.gtimg.com/pro-template/personal/avatar2.png', + email: 'lxh@omi.com', + tel: '18656785678' + }, + { + name: '韩梅梅', + title: '客户助理', + avatar: 'https://tdesign.gtimg.com/pro-template/personal/avatar3.png', + email: 'hmm@omi.com', + tel: '17856785678' + }, + ] + + myContracts = [ + { + contractCover: 'https://tdesign.gtimg.com/pro-template/personal/contract3.png', + content: '腾讯大厦一楼改造施工项目', + time: '2021-10-10 08:00:00' + }, + { + contractCover: 'https://tdesign.gtimg.com/pro-template/personal/contract2.png', + content: '国家电网信息化建设项目', + time: '2021-10-10 08:00:00' + }, + { + contractCover: 'https://tdesign.gtimg.com/pro-template/personal/contract1.png', + content: '总部办公用品采购项目', + time: '2021-10-10 08:00:00' + }, + { + contractCover: 'https://tdesign.gtimg.com/pro-template/personal/contract4.png', + content: '深圳燃气云平台搭建项目二期', + time: '2021-10-10 08:00:00' + }, + { + contractCover: 'https://tdesign.gtimg.com/pro-template/personal/contract2.png', + content: '智慧园区私有化定制项目', + time: '2021-10-10 08:00:00' + }, + { + contractCover: 'https://tdesign.gtimg.com/pro-template/personal/contract3.png', + content: '政务云平台定制项目', + time: '2021-10-10 08:00:00' + }, + ] + + render() { + return ( +
+
+
+ +
+
+ + OMIU Admin + 市场部 客户经理 +
+
+
+
+ + 2021年1月10日入职 +
+
+ + 15812341234 +
+
+ + omiu@tencent.com +
+
+ +
+
+ +
+
+ 团队成员 + + + 更多 + + + +
+ {this.members.map((item, index) => { + return ( + (index < 4) &&
+ +
+
+ + {item.name} + {item.title} +
+
+ + + { + showLoading('正在发送email...') + setTimeout(() => { + hideLoading() + }, 1000) + }} + class={tw`text-base cursor-pointer hover:text-green-500`} + /> + + + + + { + showLoading('正在呼叫...') + setTimeout(() => { + hideLoading() + }, 1000) + }} + class={tw`text-base cursor-pointer hover:text-green-500`} + /> + + +
+
+
+
+ +
) + })} +
+
+
+ +
+ +
+ +
+
+ +
+ Hi, + Admin~下午好，今天是你加入OMIU的第 +  100  + 天~ +
+
+
+ +
+
+ +
+
+ 最近动态 + + + 更多 + + + +
+
+
+ + 新建合同【腾讯大楼一楼改造施工项目】 + 1小时前 +
+
+ + 添加客户【福来】 + 2021-10-10 08:00:00 +
+
+ + 删除产品【云服务器CVM】 + 2021-10-11 10:00:00 +
+
+
+
+
+ +
+
+ +
+
+ 待办事项 +
+
+ 清空待办的快乐~ +
+
+
+
+ +
+
+ +
+
+ 我签订的合同 + + + 更多 + + + +
+
+ {this.myContracts.map((item, index) => { + return ( + (index < 6) &&
+ +
+ +
+
+
+ {item.content} +
+
+ {item.time} +
+
+
+
+ +
+ ) + })} +
+
+
+
+ +
+
+
+ ) + } +} diff --git a/packages/admin/src/components/notification/notification-list.tsx b/packages/admin/src/components/notification/notification-list.tsx index 331f9f8b9..b1cec5088 100644 --- a/packages/admin/src/components/notification/notification-list.tsx +++ b/packages/admin/src/components/notification/notification-list.tsx @@ -152,8 +152,8 @@ export default class extends WeElement { render() { return ( -
-
+
+
Date: Wed, 11 Aug 2021 18:04:51 +0800 Subject: [PATCH 3/3] feat(admin): account-center ... --- packages/admin/src/components/account/personal-center.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/admin/src/components/account/personal-center.tsx b/packages/admin/src/components/account/personal-center.tsx index d3880ec4a..37ee8def4 100644 --- a/packages/admin/src/components/account/personal-center.tsx +++ b/packages/admin/src/components/account/personal-center.tsx @@ -100,7 +100,7 @@ export default class extends WeElement { render() { return ( -
+