From 78d4d41c85f5341bb5dfd2a1cbb6e60d6858b084 Mon Sep 17 00:00:00 2001
From: chen-xt <1250548605@qq.com>
Date: 星期日, 15 十一月 2020 12:47:59 +0800
Subject: [PATCH] feat: add account center page (#86)
---
src/views/demo/page/account/setting/SecureSetting.vue | 2
src/views/demo/page/account/center/data.tsx | 133 +++++++++++++
src/views/demo/page/account/setting/AccountBind.vue | 2
src/views/demo/page/account/center/Application.vue | 93 +++++++++
src/router/menus/modules/demo/page.ts | 11 +
src/views/demo/page/account/center/Article.vue | 90 +++++++++
src/views/demo/page/account/center/index.vue | 149 ++++++++++++++
src/views/demo/page/account/center/Project.vue | 69 ++++++
mock/demo/account.ts | 2
src/assets/images/demo.png | 0
src/router/routes/modules/demo/page.ts | 8
src/views/demo/page/account/setting/MsgNotify.vue | 2
12 files changed, 557 insertions(+), 4 deletions(-)
diff --git a/mock/demo/account.ts b/mock/demo/account.ts
index 40dc7af..3c7d1fd 100644
--- a/mock/demo/account.ts
+++ b/mock/demo/account.ts
@@ -2,7 +2,7 @@
import { resultSuccess } from '../_util';
const userInfo = {
- name: 'Serati Ma',
+ name: 'Vben',
userid: '00000001',
email: 'antdesign@alipay.com',
signature: '娴风撼鐧惧窛锛屾湁瀹逛箖澶�',
diff --git a/src/assets/images/demo.png b/src/assets/images/demo.png
new file mode 100644
index 0000000..0687c7b
--- /dev/null
+++ b/src/assets/images/demo.png
Binary files differ
diff --git a/src/router/menus/modules/demo/page.ts b/src/router/menus/modules/demo/page.ts
index 11b5af2..c911914 100644
--- a/src/router/menus/modules/demo/page.ts
+++ b/src/router/menus/modules/demo/page.ts
@@ -1,3 +1,10 @@
+/*
+ * @description: Do not edit
+ * @author: cxiaoting
+ * @Date: 2020-11-13 14:00:37
+ * @LastEditors: cxiaoting
+ * @LastEditTime: 2020-11-13 18:07:11
+ */
import type { MenuModule } from '/@/router/types.d';
const menu: MenuModule = {
orderNo: 20,
@@ -59,6 +66,10 @@
},
children: [
{
+ path: 'center',
+ name: '涓汉涓績',
+ },
+ {
path: 'setting',
name: '涓汉璁剧疆',
},
diff --git a/src/router/routes/modules/demo/page.ts b/src/router/routes/modules/demo/page.ts
index 0318c65..004c683 100644
--- a/src/router/routes/modules/demo/page.ts
+++ b/src/router/routes/modules/demo/page.ts
@@ -127,6 +127,14 @@
},
children: [
{
+ path: 'center',
+ name: 'AccountCenterPage',
+ component: () => import('/@/views/demo/page/account/center/index.vue'),
+ meta: {
+ title: '涓汉涓績',
+ },
+ },
+ {
path: 'setting',
name: 'AccountSettingPage',
component: () => import('/@/views/demo/page/account/setting/index.vue'),
diff --git a/src/views/demo/page/account/center/Application.vue b/src/views/demo/page/account/center/Application.vue
new file mode 100644
index 0000000..d9c3496
--- /dev/null
+++ b/src/views/demo/page/account/center/Application.vue
@@ -0,0 +1,93 @@
+<template>
+ <List :class="prefixCls">
+ <Row :gutter="16">
+ <template v-for="(item, index) in list" :key="index">
+ <Col :span="6">
+ <ListItem>
+ <Card :hoverable="true" :class="`${prefixCls}__card`">
+ <div :class="`${prefixCls}__card-title`">
+ <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
+ {{ item.title }}
+ </div>
+ <div :class="`${prefixCls}__card-num`">
+ 娲昏穬鐢ㄦ埛锛�<span>{{ item.active }}</span> 涓�
+ </div>
+ <div :class="`${prefixCls}__card-num`">
+ 鏂板鐢ㄦ埛锛�<span>{{ item.new }}</span>
+ </div>
+ <Icon
+ :class="`${prefixCls}__card-download`"
+ v-if="item.download"
+ :icon="item.download"
+ />
+ </Card>
+ </ListItem>
+ </Col>
+ </template>
+ </Row>
+ </List>
+</template>
+<script lang="ts">
+ import { defineComponent } from 'vue';
+ import { List, Card, Row, Col } from 'ant-design-vue';
+ import Icon from '/@/components/Icon/index';
+ import { applicationList } from './data';
+
+ export default defineComponent({
+ components: {
+ List,
+ ListItem: List.Item,
+ Card,
+ Row,
+ Col,
+ Icon,
+ },
+ setup() {
+ return {
+ prefixCls: 'account-center-application',
+ list: applicationList,
+ };
+ },
+ });
+</script>
+<style lang="less" scoped>
+ .account-center-application {
+ &__card {
+ width: 100%;
+
+ /deep/ .ant-card-body {
+ padding: 16px;
+ }
+
+ &-title {
+ margin-bottom: 5px;
+ font-size: 16px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.85);
+
+ .icon {
+ margin-top: -5px;
+ font-size: 22px;
+ }
+ }
+
+ &-num {
+ margin-left: 24px;
+ line-height: 36px;
+ color: #7d7a7a;
+
+ span {
+ margin-left: 5px;
+ font-size: 18px;
+ color: #000;
+ }
+ }
+
+ &-download {
+ float: right;
+ font-size: 20px !important;
+ color: #1890ff;
+ }
+ }
+ }
+</style>
diff --git a/src/views/demo/page/account/center/Article.vue b/src/views/demo/page/account/center/Article.vue
new file mode 100644
index 0000000..89d5355
--- /dev/null
+++ b/src/views/demo/page/account/center/Article.vue
@@ -0,0 +1,90 @@
+<template>
+ <List item-layout="vertical" :class="prefixCls">
+ <template v-for="(item, index) in list" :key="index">
+ <ListItem>
+ <ListItemMeta>
+ <template #description>
+ <div :class="`${prefixCls}__content`">{{ item.content }}</div>
+ </template>
+ <template #title>
+ <p :class="`${prefixCls}__title`"> {{ item.title }}</p>
+ <div>
+ <template v-for="(tag, index) in item.description" :key="index">
+ <Tag class="mb-2">{{ tag }}</Tag>
+ </template>
+ </div>
+ </template>
+ </ListItemMeta>
+ <div>
+ <template v-for="(action, index) in actions" :key="index">
+ <div :class="`${prefixCls}__action`">
+ <Icon
+ v-if="action.icon"
+ :class="`${prefixCls}__action-icon`"
+ :icon="action.icon"
+ :color="action.color"
+ />
+ {{ action.text }}
+ </div>
+ </template>
+ <span :class="`${prefixCls}__time`">{{ item.time }}</span>
+ </div>
+ </ListItem>
+ </template>
+ </List>
+</template>
+<script lang="ts">
+ import { defineComponent } from 'vue';
+ import { List, Tag } from 'ant-design-vue';
+ import Icon from '/@/components/Icon/index';
+ import { actions, articleList } from './data';
+
+ export default defineComponent({
+ components: {
+ List,
+ ListItem: List.Item,
+ ListItemMeta: List.Item.Meta,
+ Tag,
+ Icon,
+ },
+ setup() {
+ return {
+ prefixCls: 'account-center-article',
+ list: articleList,
+ actions,
+ };
+ },
+ });
+</script>
+<style lang="less" scoped>
+ .account-center-article {
+ &__title {
+ margin-bottom: 12px;
+ font-size: 18px;
+ }
+
+ &__content {
+ color: rgba(0, 0, 0, 0.65);
+ }
+
+ &__action {
+ display: inline-block;
+ padding: 0 16px;
+ color: rgba(0, 0, 0, 0.45);
+
+ &:not(:last-child) {
+ border-right: 1px solid rgba(206, 206, 206, 0.4);
+ }
+
+ &-icon {
+ margin-right: 3px;
+ }
+ }
+
+ &__time {
+ position: absolute;
+ right: 20px;
+ color: rgba(0, 0, 0, 0.45);
+ }
+ }
+</style>
diff --git a/src/views/demo/page/account/center/Project.vue b/src/views/demo/page/account/center/Project.vue
new file mode 100644
index 0000000..223368a
--- /dev/null
+++ b/src/views/demo/page/account/center/Project.vue
@@ -0,0 +1,69 @@
+<template>
+ <List :class="prefixCls">
+ <Row :gutter="16">
+ <template v-for="(item, index) in list" :key="index">
+ <Col :span="6">
+ <ListItem>
+ <Card :hoverable="true" :class="`${prefixCls}__card`">
+ <img :src="demoImg" />
+ <div :class="`${prefixCls}__card-title`">
+ {{ item.title }}
+ </div>
+ <div :class="`${prefixCls}__card-content`"> {{ item.content }}</div>
+ </Card>
+ </ListItem>
+ </Col>
+ </template>
+ </Row>
+ </List>
+</template>
+<script lang="ts">
+ import { defineComponent } from 'vue';
+ import { List, Card, Row, Col } from 'ant-design-vue';
+ import demoImg from '/@/assets/images/demo.png';
+ import { projectList } from './data';
+
+ export default defineComponent({
+ components: {
+ List,
+ ListItem: List.Item,
+ Card,
+ Row,
+ Col,
+ },
+ setup() {
+ return {
+ prefixCls: 'account-center-project',
+ list: projectList,
+ demoImg,
+ };
+ },
+ });
+</script>
+<style lang="less" scoped>
+ .account-center-project {
+ &__card {
+ width: 100%;
+
+ /deep/ .ant-card-body {
+ padding: 0 0 24px 0;
+ }
+
+ img {
+ width: 100%;
+ height: 100px;
+ }
+
+ &-title {
+ margin: 5px 10px;
+ font-size: 16px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.85);
+ }
+
+ &-content {
+ margin: 5px 10px;
+ }
+ }
+ }
+</style>
diff --git a/src/views/demo/page/account/center/data.tsx b/src/views/demo/page/account/center/data.tsx
new file mode 100644
index 0000000..e071492
--- /dev/null
+++ b/src/views/demo/page/account/center/data.tsx
@@ -0,0 +1,133 @@
+export interface ListItem {
+ title: string;
+ icon: string;
+ color?: string;
+}
+
+export interface TabItem {
+ key: string;
+ name: string;
+ component: string;
+}
+
+export const tags: string[] = [
+ '寰堟湁鎯虫硶鐨�',
+ '涓撴敞璁捐',
+ '宸濆瀛�',
+ '澶ч暱鑵�',
+ '娴风撼鐧惧窛',
+ '鍓嶇寮�鍙�',
+ 'vue3',
+];
+
+export const teams: ListItem[] = [
+ {
+ icon: 'ant-design:alipay-circle-outlined',
+ title: '绉戝鎼爾缁�',
+ color: '#ff4000',
+ },
+ {
+ icon: 'emojione-monotone:letter-a',
+ title: '涓簩灏戝勾鍥�',
+ color: '#7c51b8',
+ },
+ {
+ icon: 'ant-design:alipay-circle-outlined',
+ title: '楂橀�兼牸璁捐',
+ color: '#00adf7',
+ },
+ {
+ icon: 'ant-design:codepen-circle-filled',
+ title: '绋嬪簭鍛樻棩甯�',
+ color: '#00adf7',
+ },
+ {
+ icon: 'ant-design:dribbble-circle-filled',
+ title: '绉戝鎼爾缁�',
+ color: '#ff4000',
+ },
+ {
+ icon: 'ant-design:behance-square-filled',
+ title: '绋嬪簭鍛樻棩甯�',
+ color: '#7c51b8',
+ },
+];
+
+export const details: ListItem[] = [
+ {
+ icon: 'ant-design:contacts-outlined',
+ title: '浜や簰涓撳',
+ },
+ {
+ icon: 'ant-design:cluster-outlined',
+ title: '铓傝殎閲戞湇锛嶆煇鏌愭煇浜嬩笟缇�',
+ },
+ {
+ icon: 'ant-design:home-outlined',
+ title: '绂忓缓鐪佸帵闂ㄥ競',
+ },
+];
+
+export const achieveList: TabItem[] = [
+ {
+ key: '1',
+ name: '鏂囩珷',
+ component: 'Article',
+ },
+ {
+ key: '2',
+ name: '搴旂敤',
+ component: 'Application',
+ },
+ {
+ key: '3',
+ name: '椤圭洰',
+ component: 'Project',
+ },
+];
+
+export const actions: any[] = [
+ { icon: 'ant-design:star-outlined', text: '156', color: '#018ffb' },
+ { icon: 'ant-design:like-filled', text: '156', color: '#459ae8' },
+ { icon: 'ant-design:message-filled', text: '2', color: '#42d27d' },
+];
+
+export const articleList = (() => {
+ const result: any[] = [];
+ for (let i = 0; i < 4; i++) {
+ result.push({
+ title: 'Ant Design',
+ description: ['Ant Design', '璁捐璇█', '铓傝殎閲戞湇'],
+ content:
+ '娈佃惤绀烘剰锛氳殏铓侀噾鏈嶈璁″钩鍙� ant.design锛岀敤鏈�灏忕殑宸ヤ綔閲忥紝鏃犵紳鎺ュ叆铓傝殎閲戞湇鐢熸�侊紝鎻愪緵璺ㄨ秺璁捐涓庡紑鍙戠殑浣撻獙瑙ｅ喅鏂规銆傝殏铓侀噾鏈嶈璁″钩鍙� ant.design锛岀敤鏈�灏忕殑宸ヤ綔閲忥紝鏃犵紳鎺ュ叆铓傝殎閲戞湇鐢熸�侊紝鎻愪緵璺ㄨ秺璁捐涓庡紑鍙戠殑浣撻獙瑙ｅ喅鏂规',
+ time: '2020-11-14 11:20',
+ });
+ }
+ return result;
+})();
+
+export const applicationList = (() => {
+ const result: any[] = [];
+ for (let i = 0; i < 8; i++) {
+ result.push({
+ title: 'Ant Design',
+ icon: 'emojione-monotone:letter-a',
+ color: '#7c51b8',
+ active: '100',
+ new: '1,799',
+ download: 'bx:bx-download',
+ });
+ }
+ return result;
+})();
+
+export const projectList = (() => {
+ const result: any[] = [];
+ for (let i = 0; i < 8; i++) {
+ result.push({
+ title: 'Angular',
+ content: '閭ｆ槸涓�绉嶅唴鍦ㄧ殑涓滆タ锛� 浠栦滑鍒拌揪涓嶄簡锛�',
+ });
+ }
+ return result;
+})();
diff --git a/src/views/demo/page/account/center/index.vue b/src/views/demo/page/account/center/index.vue
new file mode 100644
index 0000000..24ca27f
--- /dev/null
+++ b/src/views/demo/page/account/center/index.vue
@@ -0,0 +1,149 @@
+<template>
+ <div :class="prefixCls">
+ <Row :class="`${prefixCls}-top`">
+ <Col :span="9" :class="`${prefixCls}-col`">
+ <Row>
+ <Col :span="8">
+ <div :class="`${prefixCls}-top__avatar`">
+ <img width="70" :src="headerImg" />
+ <span>Serati Ma</span>
+ <div>娴风撼鐧惧窛锛屾湁瀹逛箖澶�</div>
+ </div>
+ </Col>
+ <Col :span="16">
+ <div :class="`${prefixCls}-top__detail`">
+ <template v-for="(detail, index) in details" :key="index">
+ <p>
+ <Icon :icon="detail.icon" />
+ {{ detail.title }}
+ </p>
+ </template>
+ </div>
+ </Col>
+ </Row>
+ </Col>
+ <Col :span="7" :class="`${prefixCls}-col`">
+ <CollapseContainer title="鏍囩" :canExpan="false">
+ <template v-for="(tag, index) in tags" :key="index">
+ <Tag class="mb-2">{{ tag }}</Tag>
+ </template>
+ </CollapseContainer>
+ </Col>
+ <Col :span="8" :class="`${prefixCls}-col`">
+ <CollapseContainer :class="`${prefixCls}-top__team`" title="鍥㈤槦" :canExpan="false">
+ <div v-for="(team, index) in teams" :key="index" :class="`${prefixCls}-top__team-item`">
+ <Icon :icon="team.icon" :color="team.color" />
+ <span>{{ team.title }}</span>
+ </div>
+ </CollapseContainer>
+ </Col>
+ </Row>
+ <div :class="`${prefixCls}-bottom`">
+ <Tabs>
+ <template v-for="item in achieveList" :key="item.key">
+ <TabPane :tab="item.name">
+ <component :is="item.component" />
+ </TabPane>
+ </template>
+ </Tabs>
+ </div>
+ </div>
+</template>
+
+<script lang="ts">
+ import { Row, Col, Tag, Tabs } from 'ant-design-vue';
+ import { defineComponent } from 'vue';
+ import { CollapseContainer } from '/@/components/Container/index';
+ import Icon from '/@/components/Icon/index';
+ import Article from './Article.vue';
+ import Application from './Application.vue';
+ import Project from './Project.vue';
+
+ import headerImg from '/@/assets/images/header.jpg';
+ import { tags, teams, details, achieveList } from './data';
+
+ export default defineComponent({
+ components: {
+ CollapseContainer,
+ Icon,
+ Row,
+ Col,
+ Tag,
+ Tabs,
+ TabPane: Tabs.TabPane,
+ Article,
+ Application,
+ Project,
+ },
+ setup() {
+ return {
+ prefixCls: 'account-center',
+ headerImg,
+ tags,
+ teams,
+ details,
+ achieveList,
+ };
+ },
+ });
+</script>
+<style lang="less" scoped>
+ .account-center {
+ &-col:not(:last-child) {
+ padding: 0 10px;
+
+ &:not(:last-child) {
+ border-right: 1px dashed rgb(206, 206, 206, 0.5);
+ }
+ }
+
+ &-top {
+ padding: 10px;
+ margin: 16px 16px 12px 16px;
+ background: #fff;
+ border-radius: 3px;
+
+ &__avatar {
+ text-align: center;
+
+ img {
+ border-radius: 50%;
+ }
+
+ span {
+ display: block;
+ font-size: 20px;
+ font-weight: 500;
+ }
+
+ div {
+ margin-top: 3px;
+ font-size: 12px;
+ }
+ }
+
+ &__detail {
+ padding-left: 20px;
+ margin-top: 15px;
+ }
+
+ &__team {
+ &-item {
+ display: inline-block;
+ padding: 4px 18px;
+ }
+
+ span {
+ margin-left: 3px;
+ }
+ }
+ }
+
+ &-bottom {
+ padding: 10px;
+ margin: 0 16px 16px 16px;
+ background: #fff;
+ border-radius: 3px;
+ }
+ }
+</style>
diff --git a/src/views/demo/page/account/setting/AccountBind.vue b/src/views/demo/page/account/setting/AccountBind.vue
index 6144101..481ebbf 100644
--- a/src/views/demo/page/account/setting/AccountBind.vue
+++ b/src/views/demo/page/account/setting/AccountBind.vue
@@ -22,7 +22,7 @@
</template>
<script lang="ts">
import { List } from 'ant-design-vue';
- import { defineComponent, onMounted } from 'vue';
+ import { defineComponent } from 'vue';
import { CollapseContainer } from '/@/components/Container/index';
import Icon from '/@/components/Icon/index';
diff --git a/src/views/demo/page/account/setting/MsgNotify.vue b/src/views/demo/page/account/setting/MsgNotify.vue
index dbd935f..6ca6e34 100644
--- a/src/views/demo/page/account/setting/MsgNotify.vue
+++ b/src/views/demo/page/account/setting/MsgNotify.vue
@@ -24,7 +24,7 @@
</template>
<script lang="ts">
import { List, Switch } from 'ant-design-vue';
- import { defineComponent, onMounted } from 'vue';
+ import { defineComponent } from 'vue';
import { CollapseContainer } from '/@/components/Container/index';
import { msgNotifyList } from './data';
diff --git a/src/views/demo/page/account/setting/SecureSetting.vue b/src/views/demo/page/account/setting/SecureSetting.vue
index e384757..3d31f92 100644
--- a/src/views/demo/page/account/setting/SecureSetting.vue
+++ b/src/views/demo/page/account/setting/SecureSetting.vue
@@ -19,7 +19,7 @@
</template>
<script lang="ts">
import { List } from 'ant-design-vue';
- import { defineComponent, onMounted } from 'vue';
+ import { defineComponent } from 'vue';
import { CollapseContainer } from '/@/components/Container/index';
import { secureSettingList } from './data';
--
Gitblit v1.8.0