From e93b692c9709afb2db6f34bd0391252290b18e12 Mon Sep 17 00:00:00 2001
From: shuiluo <lzi.love@icloud.com>
Date: Sat, 17 Jul 2021 20:26:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E5=92=8C=E5=9B=BD=E9=99=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/upload/index.vue               |  2 +-
 src/local/index.js                            |  2 +
 src/local/table.js                            |  4 ++
 src/local/user.js                             | 21 +++++++++
 .../header/LayoutTopHeaderAvatar.vue          |  2 -
 .../header/LayoutTopHeaderNotice.vue          | 32 +++++++++----
 src/pages/frame/components/header/i18n.js     | 20 --------
 src/pages/user/components/ToDo.vue            |  3 --
 src/pages/user/components/info.vue            | 20 ++++----
 src/pages/user/components/message.vue         | 47 +++++++++++--------
 src/pages/user/components/page_todo.vue       |  3 ++
 src/pages/user/components/todo.vue            |  3 --
 src/pages/user/index.vue                      | 10 ++--
 src/router/config.js                          |  2 +-
 14 files changed, 100 insertions(+), 71 deletions(-)
 create mode 100644 src/local/user.js
 delete mode 100644 src/pages/frame/components/header/i18n.js
 delete mode 100644 src/pages/user/components/ToDo.vue
 create mode 100644 src/pages/user/components/page_todo.vue
 delete mode 100644 src/pages/user/components/todo.vue

diff --git a/src/components/upload/index.vue b/src/components/upload/index.vue
index 55368c4..2b9f805 100644
--- a/src/components/upload/index.vue
+++ b/src/components/upload/index.vue
@@ -1,7 +1,7 @@
 <template>
     <a-upload :customRequest="customRequest" :showUploadList="showUploadList" v-bind="$attrs">
         <slot>
-            <a-button> <a-icon type="upload" /> 上传 </a-button>
+            <a-button> <a-icon type="upload" />{{ $t('user.upload') }}</a-button>
         </slot>
     </a-upload>
 </template>
diff --git a/src/local/index.js b/src/local/index.js
index 5cd2aea..14d8a52 100644
--- a/src/local/index.js
+++ b/src/local/index.js
@@ -1,5 +1,6 @@
 import selectLang from './select';
 import TableLang from './table';
+import UserLang from './user';
 
 const zh_CN = {};
 const en_US = {};
@@ -14,5 +15,6 @@ function formatLang(langObject) {
 
 formatLang(selectLang);
 formatLang(TableLang);
+formatLang(UserLang);
 
 export { en_US, zh_CN };
diff --git a/src/local/table.js b/src/local/table.js
index ac6eb36..8b5e324 100644
--- a/src/local/table.js
+++ b/src/local/table.js
@@ -14,4 +14,8 @@ export default {
     'table.pleaseSelect': ['请选择需要导出的数据', 'Please select the data to export'],
     'table.taskDetail': ['任务明细', 'Task Detail'],
     'table.taskProgress': ['任务进度', 'Task Progress'],
+    title: ['标题', 'Title'],
+    content: ['内容', 'Content'],
+    sender: ['发送者', 'Sender'],
+    recipient: ['接受者', 'Recipient'],
 };
diff --git a/src/local/user.js b/src/local/user.js
new file mode 100644
index 0000000..5e57422
--- /dev/null
+++ b/src/local/user.js
@@ -0,0 +1,21 @@
+export default {
+    profile: ['个人中心', 'Profile'],
+    setting: ['个人设置', 'Setting'],
+    loginOut: ['退出登录', 'Login Out'],
+    tabNotice: ['通知', 'Notice'],
+    tabTodo: ['待办', 'Todo'],
+    'user.modifyPassword': ['修改密码', 'ModifyPassword'],
+    'user.account': ['用户账户', 'Account'],
+    'user.name': ['姓名', 'Name'],
+    'user.email': ['电子邮箱', 'Email'],
+    'user.fixedPhone': ['固定电话', 'Fixed Telephone'],
+    'user.mobilePhone': ['移动电话', 'Mobile Phone'],
+    'user.updateInfo': ['更新信息', 'Update Info'],
+    'user.avator': ['头像', 'Avator'],
+    'user.upload': ['上传', 'Upload'],
+    'table.createTime': ['创建时间', 'Create Time'],
+    'table.hasRead': ['是否已读', 'hasRead'],
+    'table.read': ['已读', 'Read'],
+    'table.unread': ['未读', 'Unread'],
+    'user.readTime': ['已读时间', 'Read Time'],
+};
diff --git a/src/pages/frame/components/header/LayoutTopHeaderAvatar.vue b/src/pages/frame/components/header/LayoutTopHeaderAvatar.vue
index ac2d690..a2c445a 100644
--- a/src/pages/frame/components/header/LayoutTopHeaderAvatar.vue
+++ b/src/pages/frame/components/header/LayoutTopHeaderAvatar.vue
@@ -20,12 +20,10 @@
 
 <script>
 import { logout } from '@/pages/frame/services/accountService';
-import layoutTopHeaderI18n from './i18n';
 import { getUserInfo } from '@/utils';
 
 export default {
     name: 'LayoutTopHeaderAvatar',
-    i18n: layoutTopHeaderI18n,
     data: () => ({ userInfo: {} }),
     computed: {
         userAvatar() {
diff --git a/src/pages/frame/components/header/LayoutTopHeaderNotice.vue b/src/pages/frame/components/header/LayoutTopHeaderNotice.vue
index a06fb02..b1eed49 100644
--- a/src/pages/frame/components/header/LayoutTopHeaderNotice.vue
+++ b/src/pages/frame/components/header/LayoutTopHeaderNotice.vue
@@ -2,22 +2,41 @@
     <a-dropdown :trigger="['click']" v-model="show">
         <div slot="overlay">
             <a-spin :spinning="loading">
-                <a-tabs class="dropdown-tabs" :tabBarStyle="{textAlign: 'center'}" :style="{width: '297px'}">
+                <a-tabs
+                    class="dropdown-tabs"
+                    :tabBarStyle="{ textAlign: 'center' }"
+                    :style="{ width: '297px' }"
+                >
                     <a-tab-pane :tab="tabNoticeTitle" key="1">
                         <a-list class="tab-pane">
                             <a-list-item>
                                 <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
-                                    <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png" />
+                                    <a-avatar
+                                        style="background-color: white"
+                                        slot="avatar"
+                                        src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"
+                                    />
                                 </a-list-item-meta>
                             </a-list-item>
                             <a-list-item>
-                                <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
-                                    <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png" />
+                                <a-list-item-meta
+                                    title="你推荐的 曲妮妮 已通过第三轮面试"
+                                    description="一年前"
+                                >
+                                    <a-avatar
+                                        style="background-color: white"
+                                        slot="avatar"
+                                        src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"
+                                    />
                                 </a-list-item-meta>
                             </a-list-item>
                             <a-list-item>
                                 <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
-                                    <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png" />
+                                    <a-avatar
+                                        style="background-color: white"
+                                        slot="avatar"
+                                        src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"
+                                    />
                                 </a-list-item-meta>
                             </a-list-item>
                         </a-list>
@@ -37,11 +56,8 @@
 </template>
 
 <script>
-import layoutTopHeaderI18n from './i18n';
-
 export default {
     name: 'LayoutTopHeaderNotice',
-    i18n: layoutTopHeaderI18n,
     data() {
         return {
             loading: false,
diff --git a/src/pages/frame/components/header/i18n.js b/src/pages/frame/components/header/i18n.js
deleted file mode 100644
index 4173ced..0000000
--- a/src/pages/frame/components/header/i18n.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export default {
-    messages: {
-        zh_CN: {
-            profile: '个人中心',
-            setting: '个人设置',
-            loginOut: '退出登录',
-            tabNotice: '通知',
-            tabTodo: '待办',
-        },
-        en_US: {
-            profile: 'Profile',
-            setting: 'Setting',
-            loginOut: 'Login Out',
-            tabNotice: 'Notice',
-            tabTodo: 'Todo',
-        },
-    },
-};
-
- 
diff --git a/src/pages/user/components/ToDo.vue b/src/pages/user/components/ToDo.vue
deleted file mode 100644
index e29d93f..0000000
--- a/src/pages/user/components/ToDo.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    <h1>TODO</h1>
-</template>
diff --git a/src/pages/user/components/info.vue b/src/pages/user/components/info.vue
index 576be63..c05bc14 100644
--- a/src/pages/user/components/info.vue
+++ b/src/pages/user/components/info.vue
@@ -1,29 +1,31 @@
 <template>
     <div class="tw-flex">
         <a-form-model layout="vertical" style="flex: 0 0 400px">
-            <a-form-model-item label="用户账户">
+            <a-form-model-item :label="$t('user.account')">
                 <a-input disabled :value="loginId" />
             </a-form-model-item>
-            <a-form-model-item label="姓名">
+            <a-form-model-item :label="$t('user.name')">
                 <a-input v-model="form.userName" />
             </a-form-model-item>
-            <a-form-model-item label="固定电话">
+            <a-form-model-item :label="$t('user.fixedPhone')">
                 <a-input v-model="form.fixedPhone" />
             </a-form-model-item>
-            <a-form-model-item label="移动电话">
+            <a-form-model-item :label="$t('user.mobilePhone')">
                 <a-input v-model="form.mobilePhone" />
             </a-form-model-item>
-            <a-form-model-item label="电子邮箱">
+            <a-form-model-item :label="$t('user.email')">
                 <a-input v-model="form.userEmail" />
             </a-form-model-item>
             <a-form-model-item>
-                <a-button type="primary" :loading="loading" @click="update">更新信息</a-button>
+                <a-button type="primary" :loading="loading" @click="update">
+                    {{ $t('user.updateInfo') }}
+                </a-button>
             </a-form-model-item>
         </a-form-model>
-        <div style="flex: 0 0 300px" class="tw-flex tw-flex-col tw-items-center ">
-            <div>头像</div>
+        <div style="flex: 0 0 300px" class="tw-flex tw-flex-col tw-items-center">
+            <div>{{ $t('user.avator') }}</div>
             <img
-                style="width: 100px;height: 100px"
+                style="width: 100px; height: 100px"
                 class="tw-max-w-full tw-max-h-full tw-rounded-full tw-my-4"
                 :src="userAvatar"
             />
diff --git a/src/pages/user/components/message.vue b/src/pages/user/components/message.vue
index e3be9be..8c07980 100644
--- a/src/pages/user/components/message.vue
+++ b/src/pages/user/components/message.vue
@@ -1,36 +1,45 @@
 <template>
-    <my-table url="/api/v1/messages/notices">
-        <template #search="{query}">
-            <my-form-item label="开始时间">
+    <Table url="/api/v1/messages/notices" noMargin>
+        <template #search="{ query }">
+            <MoreItem :label="$t('select.startTime')">
                 <a-date-picker
                     class="tw-w-full"
                     show-time
                     v-model="query.startTime"
                     valueFormat="YYYY-MM-DD HH:mm:ss"
                 />
-            </my-form-item>
-            <my-form-item label="结束时间">
+            </MoreItem>
+            <MoreItem :label="$t('select.endTime')">
                 <a-date-picker
                     class="tw-w-full"
                     show-time
                     v-model="query.endTime"
                     valueFormat="YYYY-MM-DD HH:mm:ss"
                 />
-            </my-form-item>
-            <my-form-item label="是否已读">
-                <a-select v-model="query.isRead" allowClear>
-                    <a-select-option :value="1">已读</a-select-option>
-                    <a-select-option :value="0">未读</a-select-option>
+            </MoreItem>
+            <MoreItem :label="$t('table.hasRead')">
+                <a-select v-model="query.isRead" allowClear :placeholder="$t('input.placeholder')">
+                    <a-select-option :value="1">{{ $t('table.read') }}</a-select-option>
+                    <a-select-option :value="0">{{ $t('table.unread') }}</a-select-option>
                 </a-select>
-            </my-form-item>
+            </MoreItem>
         </template>
 
-        <a-table-column title="标题" data-index="noticeTitle" />
-        <a-table-column title="内容" data-index="noticeContent" />
-        <a-table-column title="创建时间" data-index="createTime" />
-        <a-table-column title="发送者" data-index="noticeSenderName" />
-        <a-table-column title="接受者" data-index="noticeReceiverName" />
-        <a-table-column title="是否已读" data-index="isReadName" />
-        <a-table-column title="已读时间" data-index="readTime" />
-    </my-table>
+        <a-table-column :title="$t('title')" data-index="noticeTitle" />
+        <a-table-column :title="$t('content')" data-index="noticeContent" />
+        <a-table-column :title="$t('table.createTime')" data-index="createTime" />
+        <a-table-column :title="$t('sender')" data-index="noticeSenderName" />
+        <a-table-column :title="$t('recipient')" data-index="noticeReceiverName" />
+        <a-table-column :title="$t('user.read')" data-index="isReadName" />
+        <a-table-column :title="$t('user.readTime')" data-index="readTime" />
+    </Table>
 </template>
+
+<script>
+import MoreItem from '@/components/table/more_item.vue';
+import Table from '@/components/table/table.vue';
+
+export default {
+    components: { MoreItem, Table },
+};
+</script>
\ No newline at end of file
diff --git a/src/pages/user/components/page_todo.vue b/src/pages/user/components/page_todo.vue
new file mode 100644
index 0000000..2f82f85
--- /dev/null
+++ b/src/pages/user/components/page_todo.vue
@@ -0,0 +1,3 @@
+<template>
+    <h1>ToDo</h1>
+</template>
\ No newline at end of file
diff --git a/src/pages/user/components/todo.vue b/src/pages/user/components/todo.vue
deleted file mode 100644
index e29d93f..0000000
--- a/src/pages/user/components/todo.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    <h1>TODO</h1>
-</template>
diff --git a/src/pages/user/index.vue b/src/pages/user/index.vue
index 89f7aa6..7397875 100644
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@@ -1,10 +1,10 @@
 <template>
     <my-card class="tw-flex">
         <a-menu style="flex: 0 0 100px" v-model="selectKeys">
-            <a-menu-item key="UserInfo">个人信息</a-menu-item>
-            <a-menu-item key="ModifyPassword">修改密码</a-menu-item>
-            <a-menu-item key="MessageCenter">消息中心</a-menu-item>
-            <a-menu-item key="ToDo">代办事宜</a-menu-item>
+            <a-menu-item key="UserInfo">{{ $t('profile') }}</a-menu-item>
+            <a-menu-item key="ModifyPassword">{{ $t('user.modifyPassword') }}</a-menu-item>
+            <a-menu-item key="MessageCenter">{{ $t('tabNotice') }}</a-menu-item>
+            <a-menu-item key="ToDo">{{ $t('tabTodo') }}</a-menu-item>
         </a-menu>
         <div class="tw-flex-1 tw-ml-6">
             <component :is="currentCom" />
@@ -15,7 +15,7 @@
 <script>
 import UserInfo from './components/info.vue';
 import MessageCenter from './components/message.vue';
-import ToDo from './components/todo.vue';
+import ToDo from './components/page_todo.vue';
 import ModifyPassword from './components/modify_password.vue';
 
 const components = {
diff --git a/src/router/config.js b/src/router/config.js
index ec8fd77..2713b6c 100644
--- a/src/router/config.js
+++ b/src/router/config.js
@@ -239,7 +239,7 @@ const hasAuthorityRoutes = [
                 ],
             },
             {
-                path: 'user',
+                path: 'profile/accout',
                 name: '个人中心',
                 meta: { icon: 'user' },
                 component: () => import('@/pages/user/index.vue'),
-- 
GitLab