feat: add accountSetting page (#85)

mock/demo/account.ts

+import { MockMethod } from 'vite-plugin-mock';
+import { resultSuccess } from '../_util';
+
+const userInfo = {
+  name: 'Serati Ma',
+  userid: '00000001',
+  email: 'antdesign@alipay.com',
+  signature: '海纳百川，有容乃大',
+  introduction: '微笑着，努力着，欣赏着',
+  title: '交互专家',
+  group: '蚂蚁集团－某某某事业群－某某平台部－某某技术部－UED',
+  tags: [
+    {
+      key: '0',
+      label: '很有想法的',
+    },
+    {
+      key: '1',
+      label: '专注设计',
+    },
+    {
+      key: '2',
+      label: '辣~',
+    },
+    {
+      key: '3',
+      label: '大长腿',
+    },
+    {
+      key: '4',
+      label: '川妹子',
+    },
+    {
+      key: '5',
+      label: '海纳百川',
+    },
+  ],
+  notifyCount: 12,
+  unreadCount: 11,
+  country: 'China',
+  province: {
+    label: '浙江省',
+    value: '330000',
+  },
+  city: {
+    label: '杭州市',
+    value: '330100',
+  },
+  address: '西湖区工专路 77 号',
+  phone: '0752-268888888',
+};
+
+export default [
+  {
+    url: '/api/account/getAccountInfo',
+    timeout: 1000,
+    method: 'get',
+    response: () => {
+      return resultSuccess(userInfo);
+    },
+  },
+] as MockMethod[];

src/api/demo/account.ts

+import { defHttp } from '/@/utils/http/axios';
+import { GetAccountInfoModel } from './model/accountModel';
+
+enum Api {
+  ACCOUNT_INFO = '/account/getAccountInfo',
+  SECURE_LIST = '/account/getSecureList',
+}
+
+// 获取个人中心--基础设置内容
+export function accountInfoApi(params: any) {
+  return defHttp.request<GetAccountInfoModel>({
+    url: Api.ACCOUNT_INFO,
+    method: 'GET',
+    params,
+  });
+}

src/api/demo/model/accountModel.ts

+export interface GetAccountInfoModel {
+  email: string;
+  name: string;
+  introduction: string;
+  phone: string;
+  address: string;
+}

src/router/menus/modules/demo/page.ts

@@ -51,6 +51,19 @@ const menu: MenuModule = {
           },
         ],
       },
+      {
+        path: 'account',
+        name: '个人页',
+        tag: {
+          content: 'new',
+        },
+        children: [
+          {
+            path: 'setting',
+            name: '个人设置',
+          },
+        ],
+      },
     ],
   },
 };

src/router/routes/modules/demo/page.ts

@@ -116,6 +116,27 @@ const page: AppRouteModule = {
       ],
     },
     // =============================exception end=============================
+
+    // =============================account start=============================
+    {
+      path: '/account',
+      name: 'AccountPage',
+      redirect: '/page-demo/account/setting',
+      meta: {
+        title: '个人页',
+      },
+      children: [
+        {
+          path: 'setting',
+          name: 'AccountSettingPage',
+          component: () => import('/@/views/demo/page/account/setting/index.vue'),
+          meta: {
+            title: '个人设置',
+          },
+        },
+      ],
+    },
+    // =============================account end=============================
   ],
 };
 

src/views/demo/page/account/setting/AccountBind.vue

+<template>
+  <CollapseContainer title="账号绑定" :canExpan="false">
+    <List>
+      <template v-for="item in list" :key="item.key">
+        <ListItem>
+          <ListItemMeta>
+            <template #avatar>
+              <Icon v-if="item.avatar" class="avatar" :icon="item.avatar" :color="item.color" />
+            </template>
+            <template #title>
+              {{ item.title }}
+              <div v-if="item.extra" class="extra"> {{ item.extra }} </div>
+            </template>
+            <template #description>
+              <div>{{ item.description }} </div>
+            </template>
+          </ListItemMeta>
+        </ListItem>
+      </template>
+    </List>
+  </CollapseContainer>
+</template>
+<script lang="ts">
+  import { List } from 'ant-design-vue';
+  import { defineComponent, onMounted } from 'vue';
+  import { CollapseContainer } from '/@/components/Container/index';
+  import Icon from '/@/components/Icon/index';
+
+  import { accountBindList } from './data';
+
+  export default defineComponent({
+    components: {
+      CollapseContainer,
+      List,
+      ListItem: List.Item,
+      ListItemMeta: List.Item.Meta,
+      Icon,
+    },
+    setup() {
+      return {
+        list: accountBindList,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .avatar {
+    font-size: 40px !important;
+  }
+
+  .extra {
+    float: right;
+    margin-top: 10px;
+    margin-right: 30px;
+    font-weight: normal;
+    color: #1890ff;
+    cursor: pointer;
+  }
+</style>

src/views/demo/page/account/setting/BaseSetting.vue

+<template>
+  <CollapseContainer title="基本设置" :canExpan="false">
+    <BasicForm @register="register" />
+    <Button type="primary" @click="handleSubmit">更新基本信息</Button>
+  </CollapseContainer>
+</template>
+<script lang="ts">
+  import { Button } from 'ant-design-vue';
+  import { defineComponent, onMounted } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { CollapseContainer } from '/@/components/Container/index';
+
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  import { accountInfoApi } from '/@/api/demo/account';
+  import { baseSetschemas } from './data';
+
+  export default defineComponent({
+    components: { BasicForm, CollapseContainer, Button },
+    setup() {
+      const { createMessage } = useMessage();
+
+      const [register, { setFieldsValue }] = useForm({
+        labelWidth: 120,
+        schemas: baseSetschemas,
+        showActionButtonGroup: false,
+      });
+
+      onMounted(async () => {
+        const data = await accountInfoApi();
+        setFieldsValue(data);
+      });
+
+      return {
+        register,
+        handleSubmit: () => {
+          createMessage.success('更新成功！');
+        },
+      };
+    },
+  });
+</script>

src/views/demo/page/account/setting/MsgNotify.vue

+<template>
+  <CollapseContainer title="新消息通知" :canExpan="false">
+    <List>
+      <template v-for="item in list" :key="item.key">
+        <ListItem>
+          <ListItemMeta>
+            <template #title>
+              {{ item.title }}
+              <Switch
+                class="extra"
+                checked-children="开"
+                un-checked-children="关"
+                default-checked
+              />
+            </template>
+            <template #description>
+              <div>{{ item.description }} </div>
+            </template>
+          </ListItemMeta>
+        </ListItem>
+      </template>
+    </List>
+  </CollapseContainer>
+</template>
+<script lang="ts">
+  import { List, Switch } from 'ant-design-vue';
+  import { defineComponent, onMounted } from 'vue';
+  import { CollapseContainer } from '/@/components/Container/index';
+
+  import { msgNotifyList } from './data';
+
+  export default defineComponent({
+    components: {
+      CollapseContainer,
+      List,
+      ListItem: List.Item,
+      ListItemMeta: List.Item.Meta,
+      Switch,
+    },
+    setup() {
+      return {
+        list: msgNotifyList,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .extra {
+    float: right;
+    margin-top: 10px;
+    margin-right: 30px;
+  }
+</style>

src/views/demo/page/account/setting/SecureSetting.vue

+<template>
+  <CollapseContainer title="安全设置" :canExpan="false">
+    <List>
+      <template v-for="item in list" :key="item.key">
+        <ListItem>
+          <ListItemMeta>
+            <template #title>
+              {{ item.title }}
+              <div class="extra" v-if="item.extra"> {{ item.extra }} </div>
+            </template>
+            <template #description>
+              <div>{{ item.description }} </div>
+            </template>
+          </ListItemMeta>
+        </ListItem>
+      </template>
+    </List>
+  </CollapseContainer>
+</template>
+<script lang="ts">
+  import { List } from 'ant-design-vue';
+  import { defineComponent, onMounted } from 'vue';
+  import { CollapseContainer } from '/@/components/Container/index';
+
+  import { secureSettingList } from './data';
+
+  export default defineComponent({
+    components: { CollapseContainer, List, ListItem: List.Item, ListItemMeta: List.Item.Meta },
+    setup() {
+      return {
+        list: secureSettingList,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .extra {
+    float: right;
+    margin-top: 10px;
+    margin-right: 30px;
+    font-weight: normal;
+    color: #1890ff;
+    cursor: pointer;
+  }
+</style>

src/views/demo/page/account/setting/data.ts

+import { FormSchema } from '/@/components/Form/index';
+
+export interface ListItem {
+  key: string;
+  title: string;
+  description: string;
+  extra?: string;
+  avatar?: string;
+  color?: string;
+}
+
+// tab的list
+export const settingList = [
+  {
+    key: '1',
+    name: '基本设置',
+    component: 'BaseSetting',
+  },
+  {
+    key: '2',
+    name: '安全设置',
+    component: 'SecureSetting',
+  },
+  {
+    key: '3',
+    name: '账号绑定',
+    component: 'AccountBind',
+  },
+  {
+    key: '4',
+    name: '新消息通知',
+    component: 'MsgNotify',
+  },
+];
+
+// 基础设置 form
+export const baseSetschemas: FormSchema[] = [
+  {
+    field: 'email',
+    component: 'Input',
+    label: '邮箱',
+    colProps: { span: 18 },
+  },
+  {
+    field: 'name',
+    component: 'Input',
+    label: '昵称',
+    colProps: { span: 18 },
+  },
+  {
+    field: 'introduction',
+    component: 'InputTextArea',
+    label: '个人简介',
+    colProps: { span: 18 },
+  },
+  {
+    field: 'phone',
+    component: 'Input',
+    label: '联系电话',
+    colProps: { span: 18 },
+  },
+  {
+    field: 'address',
+    component: 'Input',
+    label: '所在地区',
+    colProps: { span: 18 },
+  },
+];
+
+// 安全设置 list
+export const secureSettingList: ListItem[] = [
+  {
+    key: '1',
+    title: '账户密码',
+    description: '当前密码强度：：强',
+    extra: '修改',
+  },
+  {
+    key: '2',
+    title: '密保手机',
+    description: '已绑定手机：：138****8293',
+    extra: '修改',
+  },
+  {
+    key: '3',
+    title: '密保问题',
+    description: '未设置密保问题，密保问题可有效保护账户安全',
+    extra: '修改',
+  },
+  {
+    key: '4',
+    title: '备用邮箱',
+    description: '已绑定邮箱：：ant***sign.com',
+    extra: '修改',
+  },
+  {
+    key: '5',
+    title: 'MFA 设备',
+    description: '未绑定 MFA 设备，绑定后，可以进行二次确认',
+    extra: '修改',
+  },
+];
+
+// 账号绑定 list
+export const accountBindList: ListItem[] = [
+  {
+    key: '1',
+    title: '绑定淘宝',
+    description: '当前未绑定淘宝账号',
+    extra: '绑定',
+    avatar: 'ant-design:taobao-outlined',
+    color: '#ff4000',
+  },
+  {
+    key: '2',
+    title: '绑定支付宝',
+    description: '当前未绑定支付宝账号',
+    extra: '绑定',
+    avatar: 'ant-design:alipay-outlined',
+    color: '#2eabff',
+  },
+  {
+    key: '3',
+    title: '绑定钉钉',
+    description: '当前未绑定钉钉账号',
+    extra: '绑定',
+    avatar: 'ri:dingding-fill',
+    color: '#2eabff',
+  },
+];
+
+// 新消息通知 list
+export const msgNotifyList: ListItem[] = [
+  {
+    key: '1',
+    title: '账户密码',
+    description: '其他用户的消息将以站内信的形式通知',
+  },
+  {
+    key: '2',
+    title: '系统消息',
+    description: '系统消息将以站内信的形式通知',
+  },
+  {
+    key: '3',
+    title: '待办任务',
+    description: '待办任务将以站内信的形式通知',
+  },
+];

src/views/demo/page/account/setting/index.vue

+<template>
+  <ScrollContainer>
+    <div ref="wrapperRef" class="m-4 account">
+      <Tabs tab-position="left">
+        <template v-for="item in settingList" :key="item.key">
+          <TabPane :tab="item.name">
+            <component :is="item.component" />
+          </TabPane>
+        </template>
+      </Tabs>
+    </div>
+  </ScrollContainer>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Tabs } from 'ant-design-vue';
+
+  import { ScrollContainer } from '/@/components/Container/index';
+  import { settingList } from './data';
+
+  import BaseSetting from './BaseSetting.vue';
+  import SecureSetting from './SecureSetting.vue';
+  import AccountBind from './AccountBind.vue';
+  import MsgNotify from './MsgNotify.vue';
+
+  export default defineComponent({
+    components: {
+      ScrollContainer,
+      Tabs,
+      TabPane: Tabs.TabPane,
+      BaseSetting,
+      SecureSetting,
+      AccountBind,
+      MsgNotify,
+    },
+    setup() {
+      return { settingList };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .account {
+    background: #fff;
+
+    /deep/ .base-title {
+      padding-left: 0;
+    }
+
+    /deep/ .ant-tabs {
+      padding: 16px 0;
+    }
+
+    /deep/ .ant-tabs-tab-active {
+      background-color: #e6f7ff;
+    }
+  }
+</style>