Skip to content

GitLab

S
Starter Web Vue
Commit e93b692c authored by shuiluo's avatar shuiluo
Browse files
Options

feat: 优化路由和国际化

parent d5048795
Hide whitespace changes
Inline Side-by-side
Showing with 100 additions and 71 deletions
src/components/upload/index.vue
View file @ e93b692c
<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>
......
src/local/index.js
View file @ e93b692c
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 };
src/local/table.js
View file @ e93b692c
......@@ -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'],
};
src/local/user.js 0 → 100644
View file @ e93b692c
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'],
};
src/pages/frame/components/header/LayoutTopHeaderAvatar.vue
View file @ e93b692c
......@@ -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() {
......
src/pages/frame/components/header/LayoutTopHeaderNotice.vue
View file @ e93b692c
......@@ -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,
......
src/pages/frame/components/header/i18n.js deleted 100644 → 0
View file @ d5048795
export default {
messages: {
zh_CN: {
profile: '个人中心',
setting: '个人设置',
loginOut: '退出登录',
tabNotice: '通知',
tabTodo: '待办',
},
en_US: {
profile: 'Profile',
setting: 'Setting',
loginOut: 'Login Out',
tabNotice: 'Notice',
tabTodo: 'Todo',
},
},
};
src/pages/user/components/ToDo.vue deleted 100644 → 0
View file @ d5048795
<template>
<h1>TODO</h1>
</template>
src/pages/user/components/info.vue
View file @ e93b692c
<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"
/>
......
src/pages/user/components/message.vue
View file @ e93b692c
<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
src/pages/user/components/page_todo.vue 0 → 100644
View file @ e93b692c
<template>
<h1>ToDo</h1>
</template>
\ No newline at end of file
src/pages/user/components/todo.vue deleted 100644 → 0
View file @ d5048795
<template>
<h1>TODO</h1>
</template>
src/pages/user/index.vue
View file @ e93b692c
<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 = {
......
src/router/config.js
View file @ e93b692c
......@@ -239,7 +239,7 @@ const hasAuthorityRoutes = [
],
},
{
path: 'user',
path: 'profile/accout',
name: '个人中心',
meta: { icon: 'user' },
component: () => import('@/pages/user/index.vue'),
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment