Skip to content

GitLab

S
Starter Web Vue
Commit e7671869 authored by 水落(YangLei)'s avatar 水落(YangLei)
Browse files
Options

feat: 国际化代码优化，动画去掉，去掉其他无用的逻辑代码

parent ac7b0e9f
Show whitespace changes
Inline Side-by-side
Showing with 123 additions and 455 deletions
.env
View file @ e7671869
VUE_APP_PUBLIC_PATH=/
VUE_APP_NAME=Admin
VUE_APP_NAME=Karote
VUE_APP_ROUTES_KEY=admin.routes
VUE_APP_PERMISSIONS_KEY=admin.permissions
VUE_APP_ROLES_KEY=admin.roles
......
src/config/global.config.js
View file @ e7671869
// 全部的配置数据
const globalConfig = {
//支持语言
langs: [
{key: 'zh_CN', name: '简体中文', alias: '简体'},
{key: 'en_US', name: 'English', alias: 'English'}
],
//调色板 颜色
palettes: ["#f5222d", "#fa541c", "#fadb14", "#3eaf7c", "#13c2c2", "#1890ff", "#722ed1", "#eb2f96"],
palettes: ['#f5222d', '#fa541c', '#fadb14', '#3eaf7c', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96'],
//tab出入动画效果
animates: {
preset: [
//参考Animate.css 各种特效的css命名，default对应没有 direction的情况
{ name: "back", alias: "渐近", directions: ["Left", "Right"] },
{ name: "bounce", alias: "弹跳", directions: ["Left", "Right", "Default"] },
{ name: 'back', alias: '渐近', directions: ['Left', 'Right'] },
{ name: 'bounce', alias: '弹跳', directions: ['Left', 'Right', 'Default'] },
{
name: "fade",
alias: "淡化",
directions: ["Left", "LeftBig", "Right", "RightBig", "Default"],
name: 'fade',
alias: '淡化',
directions: ['Left', 'LeftBig', 'Right', 'RightBig', 'Default'],
},
{ name: "lightSpeed", alias: "光速", directions: ["Left", "Right"] },
{ name: "slide", alias: "滑动", directions: ["Left", "Right"] },
{ name: 'lightSpeed', alias: '光速', directions: ['Left', 'Right'] },
{ name: 'slide', alias: '滑动', directions: ['Left', 'Right'] },
],
},
//当前主色调 + 3个功能颜色 + 3个模式菜单颜色
primary: {
color: "#3eaf7c",
warning: "#faad14",
success: "#52c41a",
error: "#f5222d",
color: '#3eaf7c',
warning: '#faad14',
success: '#52c41a',
error: '#f5222d',
light: {
menuColors: ["#000c17", "#001529", "#002140"],
menuColors: ['#000c17', '#001529', '#002140'],
},
dark: {
menuColors: ["#000c17", "#001529", "#002140"],
menuColors: ['#000c17', '#001529', '#002140'],
},
night: {
menuColors: ["#151515", "#1f1f1f", "#1e1e1e"],
menuColors: ['#151515', '#1f1f1f', '#1e1e1e'],
},
},
//主题
theme: {
mode: {
DARK: "dark",
LIGHT: "light",
NIGHT: "night",
DARK: 'dark',
LIGHT: 'light',
NIGHT: 'night',
},
dark: {
"layout-body-background": "#f0f2f5",
"body-background": "#fff",
"component-background": "#fff",
"heading-color": "rgba(0, 0, 0, 0.85)",
"text-color": "rgba(0, 0, 0, 0.65)",
"text-color-inverse": "#fff",
"text-color-secondary": "rgba(0, 0, 0, 0.45)",
"shadow-color": "rgba(0, 0, 0, 0.15)",
"border-color-split": "#f0f0f0",
"background-color-light": "#fafafa",
"background-color-base": "#f5f5f5",
"table-selected-row-bg": "#fafafa",
"table-expanded-row-bg": "#fbfbfb",
"checkbox-check-color": "#fff",
"disabled-color": "rgba(0, 0, 0, 0.25)",
"menu-dark-color": "rgba(254, 254, 254, 0.65)",
"menu-dark-highlight-color": "#fefefe",
"menu-dark-arrow-color": "#fefefe",
"btn-primary-color": "#fff",
'layout-body-background': '#f0f2f5',
'body-background': '#fff',
'component-background': '#fff',
'heading-color': 'rgba(0, 0, 0, 0.85)',
'text-color': 'rgba(0, 0, 0, 0.65)',
'text-color-inverse': '#fff',
'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
'shadow-color': 'rgba(0, 0, 0, 0.15)',
'border-color-split': '#f0f0f0',
'background-color-light': '#fafafa',
'background-color-base': '#f5f5f5',
'table-selected-row-bg': '#fafafa',
'table-expanded-row-bg': '#fbfbfb',
'checkbox-check-color': '#fff',
'disabled-color': 'rgba(0, 0, 0, 0.25)',
'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
'menu-dark-highlight-color': '#fefefe',
'menu-dark-arrow-color': '#fefefe',
'btn-primary-color': '#fff',
},
light: {
"layout-body-background": "#f0f2f5",
"body-background": "#fff",
"component-background": "#fff",
"heading-color": "rgba(0, 0, 0, 0.85)",
"text-color": "rgba(0, 0, 0, 0.65)",
"text-color-inverse": "#fff",
"text-color-secondary": "rgba(0, 0, 0, 0.45)",
"shadow-color": "rgba(0, 0, 0, 0.15)",
"border-color-split": "#f0f0f0",
"background-color-light": "#fafafa",
"background-color-base": "#f5f5f5",
"table-selected-row-bg": "#fafafa",
"table-expanded-row-bg": "#fbfbfb",
"checkbox-check-color": "#fff",
"disabled-color": "rgba(0, 0, 0, 0.25)",
"menu-dark-color": "rgba(1, 1, 1, 0.65)",
"menu-dark-highlight-color": "#fefefe",
"menu-dark-arrow-color": "#fefefe",
"btn-primary-color": "#fff",
'layout-body-background': '#f0f2f5',
'body-background': '#fff',
'component-background': '#fff',
'heading-color': 'rgba(0, 0, 0, 0.85)',
'text-color': 'rgba(0, 0, 0, 0.65)',
'text-color-inverse': '#fff',
'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
'shadow-color': 'rgba(0, 0, 0, 0.15)',
'border-color-split': '#f0f0f0',
'background-color-light': '#fafafa',
'background-color-base': '#f5f5f5',
'table-selected-row-bg': '#fafafa',
'table-expanded-row-bg': '#fbfbfb',
'checkbox-check-color': '#fff',
'disabled-color': 'rgba(0, 0, 0, 0.25)',
'menu-dark-color': 'rgba(1, 1, 1, 0.65)',
'menu-dark-highlight-color': '#fefefe',
'menu-dark-arrow-color': '#fefefe',
'btn-primary-color': '#fff',
},
night: {
"layout-body-background": "#000",
"body-background": "#141414",
"component-background": "#141414",
"heading-color": "rgba(255, 255, 255, 0.85)",
"text-color": "rgba(255, 255, 255, 0.85)",
"text-color-inverse": "#141414",
"text-color-secondary": "rgba(255, 255, 255, 0.45)",
"shadow-color": "rgba(255, 255, 255, 0.15)",
"border-color-split": "#303030",
"background-color-light": "#ffffff0a",
"background-color-base": "#2a2a2a",
"table-selected-row-bg": "#ffffff0a",
"table-expanded-row-bg": "#ffffff0b",
"checkbox-check-color": "#141414",
"disabled-color": "rgba(255, 255, 255, 0.25)",
"menu-dark-color": "rgba(254, 254, 254, 0.65)",
"menu-dark-highlight-color": "#fefefe",
"menu-dark-arrow-color": "#fefefe",
"btn-primary-color": "#141414",
'layout-body-background': '#000',
'body-background': '#141414',
'component-background': '#141414',
'heading-color': 'rgba(255, 255, 255, 0.85)',
'text-color': 'rgba(255, 255, 255, 0.85)',
'text-color-inverse': '#141414',
'text-color-secondary': 'rgba(255, 255, 255, 0.45)',
'shadow-color': 'rgba(255, 255, 255, 0.15)',
'border-color-split': '#303030',
'background-color-light': '#ffffff0a',
'background-color-base': '#2a2a2a',
'table-selected-row-bg': '#ffffff0a',
'table-expanded-row-bg': '#ffffff0b',
'checkbox-check-color': '#141414',
'disabled-color': 'rgba(255, 255, 255, 0.25)',
'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
'menu-dark-highlight-color': '#fefefe',
'menu-dark-arrow-color': '#fefefe',
'btn-primary-color': '#141414',
},
},
layout: {
SIDE: "side",
HEAD: "head",
SIDE: 'side',
HEAD: 'head',
},
};
module.exports = globalConfig;
\ No newline at end of file
src/main.js
View file @ e7671869
......@@ -8,17 +8,16 @@ import VueI18n from 'vue-i18n';
import { accountModule, settingModule } from './pages/frame/store';
import globalStore from '@/store';
import App from './App.vue';
import 'tailwindcss/tailwind.css';
import 'animate.css/source/animate.css';
import './theme/index.less';
import Plugins from './plugins';
import { loadRoutes, loadGuards, setAppOptions } from './utils/routerUtil';
import guards from './router/guards';
import { loadResponseInterceptor } from './utils/requestUtil';
import langUtils from '@/utils/langUtils';
import 'tailwindcss/tailwind.css';
import 'animate.css/source/animate.css';
import './theme/index.less';
// import '@/mock';
import 'moment/locale/zh-cn';
//设置为非生产提示
......@@ -40,13 +39,12 @@ const router = new Router(options);
//装载vue-i18n控件 如果语言优先级 请直接修改这里localeLang和fallbackLang
Vue.use(VueI18n);
//defalt 'CN'
const localeLang = store.state.settingModule.lang;
//default'EN'
const fallbackLang = store.state.settingModule.fallbackLang;
const localeLang = langUtils.get();
const i18n = new VueI18n({
locale: localeLang,
fallbackLocale: fallbackLang,
fallbackLocale: langUtils.fallbackLocale,
silentFallbackWarn: true,
});
......
src/pages/frame/components/header/LayoutTopHeaderLang.vue
View file @ e7671869
<template>
<a-dropdown class="lang header-item">
<div><a-icon type="global" /> {{ langAlias }}</div>
<a-menu @click="val => setLang(val.key)" :selected-keys="[lang]" slot="overlay">
<a-menu @click="changeLang" :selected-keys="[lang]" slot="overlay">
<a-menu-item v-for="lang in langList" :key="lang.key">
{{ lang.key.toLowerCase() + ' ' + lang.name }}
</a-menu-item>
......@@ -10,26 +10,28 @@
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { globalConfig } from '@/config';
import langUtils from '@/utils/langUtils';
export default {
name: 'LayoutTopHeaderLang',
data() {
return {
langList: globalConfig.langs,
langList: langUtils.langList,
lang: langUtils.get(),
};
},
computed: {
...mapState('settingModule', ['lang']),
langAlias() {
let lang = this.langList.find(item => item.key == this.lang);
const lang = this.langList.find(item => item.key == this.lang);
return lang.alias;
},
},
methods: {
...mapMutations('settingModule', ['setLang']),
change(langKey) {
this.$i18n.locale = langKey;
this.lang = langKey;
langUtils.set(langKey);
},
},
};
</script>
src/pages/frame/view/template/BlankTemplateView.vue
View file @ e7671869
<template>
<page-toggle-transition
:disabled="animate.disabled"
:animate="animate.name"
:direction="animate.direction"
>
<router-view />
</page-toggle-transition>
</template>
<script>
import PageToggleTransition from '@/components/transition/PageToggleTransition.vue';
import { mapState } from 'vuex';
export default {
name: 'BlankTemplateView',
components: { PageToggleTransition },
computed: {
...mapState('settingModule', ['multiPage', 'animate']),
...mapState('settingModule', ['multiPage']),
},
};
</script>
src/pages/frame/view/template/PageTemplateView.vue
View file @ e7671869
<template>
<page-layout :desc="desc" :linkList="linkList">
<div v-if="this.extraImage && !isMobile" slot="extra" class="extraImg">
<div v-if="this.extraImage && !isMobile" slot="extra" :class="$style.extraImg">
<img :src="extraImage" />
</div>
<page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
<router-view ref="page" />
</page-toggle-transition>
</page-layout>
</template>
<script>
import PageLayout from '../../layouts/PageLayout.vue';
import PageToggleTransition from '@/components/transition/PageToggleTransition';
import { mapState } from 'vuex';
export default {
name: 'PageTemplateView',
components: { PageToggleTransition, PageLayout },
components: { PageLayout },
data() {
return {
page: {},
};
},
computed: {
...mapState('settingModule', ['isMobile', 'multiPage', 'animate']),
...mapState('settingModule', ['isMobile', 'multiPage']),
desc() {
return this.page.desc;
},
......@@ -43,7 +40,7 @@ export default {
};
</script>
<style lang="less" scoped>
<style lang="less" modle>
.extraImg {
margin-top: -60px;
text-align: center;
......
src/pages/frame/view/template/TabsTemplateView.vue
View file @ e7671869
......@@ -13,17 +13,11 @@
<div
:class="['tabs-view-content', layout, pageWidth]"
:style="`margin-top: ${multiPage ? -20 : 0}px`"
>
<page-toggle-transition
:disabled="animate.disabled"
:animate="animate.name"
:direction="animate.direction"
>
<a-keep-alive :exclude-keys="excludeKeys" v-if="multiPage && cachePage" v-model="clearCaches">
<router-view v-if="!refreshing" ref="tabContent" :key="$route.fullPath" />
</a-keep-alive>
<router-view ref="tabContent" v-else-if="!refreshing" />
</page-toggle-transition>
</div>
</admin-layout>
</template>
......@@ -31,7 +25,6 @@
<script>
import AdminLayout from '../../layouts/AdminLayout';
import Contextmenu from '@/components/menu/Contextmenu.vue';
import PageToggleTransition from '@/components/transition/PageToggleTransition';
import { mapState, mapMutations } from 'vuex';
import { getI18nKey } from '@/utils/routerUtil';
import AKeepAlive from '@/components/cache/AKeepAlive';
......@@ -41,7 +34,7 @@ import templateI18n from './i18n';
export default {
name: 'TabsTemplateView',
i18n: templateI18n,
components: { LayoutTabsHeader, PageToggleTransition, Contextmenu, AdminLayout, AKeepAlive },
components: { LayoutTabsHeader, Contextmenu, AdminLayout, AKeepAlive },
data() {
return {
clearCaches: [],
......@@ -53,7 +46,7 @@ export default {
};
},
computed: {
...mapState('settingModule', ['multiPage', 'cachePage', 'animate', 'layout', 'pageWidth']),
...mapState('settingModule', ['multiPage', 'cachePage', 'layout', 'pageWidth']),
menuItemList() {
return [
......
src/utils/demo.js deleted 100644 → 0
View file @ ac7b0e9f
import { notification } from 'antd';
import { getLocale, history } from 'umi';
import config from '@/config';
import { clearLoginStatus, getLocaleText } from '@/utils';
import HttpRequest from './kim-request';
import store from 'store';
// const codeMessage = {
// 200: getLocaleText('kim.system.request.200'),
// 201: getLocaleText('kim.system.request.201'),
// 202: getLocaleText('kim.system.request.202'),
// 204: getLocaleText('kim.system.request.204'),
// 400: getLocaleText('kim.system.request.400'),
// 401: getLocaleText('kim.system.request.401'),
// 403: getLocaleText('kim.system.request.403'),
// 404: getLocaleText('kim.system.request.404'),
// 406: getLocaleText('kim.system.request.406'),
// 410: getLocaleText('kim.system.request.410'),
// 422: getLocaleText('kim.system.request.422'),
// 500: getLocaleText('kim.system.request.500'),
// 502: getLocaleText('kim.system.request.502'),
// 503: getLocaleText('kim.system.request.503'),
// 504: getLocaleText('kim.system.request.504'),
// };
const {
request: {
baseUrl,
apiPrefix,
resCodeKey,
resMessageKey,
successCode,
isThrowError = true,
authCodes = ['error.system.authc'],
},
} = config;
/**
* 组装url
* @param {url} url
* @param {{}} more
*/
const merge = (url: string, more: any) => {
if (more && more.apiPrefix && typeof more.apiPrefix === 'string') {
return `${config.apiPrefix}${url}`;
}
if (apiPrefix && typeof apiPrefix === 'string') {
return `${config.apiPrefix}${url}`;
}
return url;
};
const headers = () => ({
Authorization: store.get('token'),
'X-Access-Lang': getLocale().replace(/-/, '_'),
});
const axios = new HttpRequest({
baseUrl,
headers: headers || {},
});
/**
* 正常返回结果处理
* @param {返回请求数据} response
* @param {配置项} more
*/
const handleResponse = (response) => {
const { data } = response;
console.log('response', response);
//
if (`${data[resCodeKey]}` !== `${successCode}`) {
if (isThrowError) {
const errorMessage =
data[resMessageKey] || getLocaleText('kim.system.request.default.message');
let error = new Error();
error = { ...error, ...data };
error.code = data[resCodeKey];
error.message = errorMessage;
return Promise.reject(error);
}
}
// success
return data;
};
const handleError = (error, more) => {
const codeMessage = {
200: getLocaleText('kim.system.request.200'),
201: getLocaleText('kim.system.request.201'),
202: getLocaleText('kim.system.request.202'),
204: getLocaleText('kim.system.request.204'),
400: getLocaleText('kim.system.request.400'),
401: getLocaleText('kim.system.request.401'),
403: getLocaleText('kim.system.request.403'),
404: getLocaleText('kim.system.request.404'),
406: getLocaleText('kim.system.request.406'),
410: getLocaleText('kim.system.request.410'),
422: getLocaleText('kim.system.request.422'),
500: getLocaleText('kim.system.request.500'),
502: getLocaleText('kim.system.request.502'),
503: getLocaleText('kim.system.request.503'),
504: getLocaleText('kim.system.request.504'),
};
const { response } = error;
const options = { isThrowError, ...more };
// status
if (response && response.status) {
const errorText = codeMessage[response.status] || response.statusText;
const {
status,
config: { url },
} = response;
notification.error({
message: `${getLocaleText('kim.system.request.dialog.title')} ${status}`,
description: `${url}${errorText}`,
});
// 跳转到404页面
if (status >= 404 && status < 422) {
history.push('/exception/404');
}
if (status <= 504 && status >= 500) {
history.push('/exception/500');
}
// 跳转到登录页面 可能原因:token 失效
if (status === 403 && status === 401) {
clearLoginStatus();
history.push('/user/login');
}
} else {
// code
const { code, message } = error;
notification.error({
key: `notification_${code ? message : code}`,
message: getLocaleText('kim.system.request.dialog.title'),
description: message,
});
// 跳转到登录页面 可能原因:token 失效
if (authCodes && authCodes.includes(code)) {
// 清空相关信息
clearLoginStatus();
history.push('/user/login');
}
}
if (options.isThrowError) {
throw error;
} else {
return error;
}
};
export default function request(url, options = {}, more = {}, handle = false) {
let newOptions = options;
newOptions.url = url;
if (more.headers) {
newOptions = { ...options, headers: more.headers };
}
if (handle) {
return axios.request(newOptions);
}
return axios
.request(newOptions)
.then((response) => handleResponse(response, more))
.catch((error) => handleError(error, more));
}
/**
* get请求
* @param url
* @param data
* @param more
* @returns {AxiosPromise<any>|Promise<Promise<never> | 返回请求数据.data | *>}
*/
const get = (url, data, more = {}) => {
if (data?.current && !data?.pageNum) {
// eslint-disable-next-line no-param-reassign
data.pageNum = data.current;
}
return request(
`${merge(url, more)}`,
{
method: 'get', // default
params: data,
},
more,
);
};
/**
* post请求
* @param url
* @param data
* @param more
* @returns {AxiosPromise<any>|Promise<Promise<never> | 返回请求数据.data | *>}
*/
const post = (url, data, more = {}) =>
request(
`${merge(url, more)}`,
{
method: 'post', // default
data,
},
more,
);
/**
* put请求
* @param url
* @param data
* @param more
* @returns {AxiosPromise<any>|Promise<Promise<never> | 返回请求数据.data | *>}
*/
const put = (url, data, more = {}) =>
request(
`${merge(url, more)}`,
{
method: 'put', // default
data,
},
more,
);
/**
* delete请求
* @param url
* @param data
* @param more
* @returns {AxiosPromise<any>|Promise<Promise<never> | 返回请求数据.data | *>}
*/
const del = (url, data, more = {}) =>
request(
`${merge(url, more)}`,
{
method: 'delete', // default
data,
},
more,
);
/**
* patch请求
* @param url
* @param data
* @param more
* @returns {AxiosPromise<any>|Promise<Promise<never> | 返回请求数据.data | *>}
*/
const patch = (url, data, more = {}) =>
request(
`${merge(url, more)}`,
{
method: 'patch', // default
data,
...more,
},
more,
);
const downloadFile = (url, data, more = {}) => {
console.log('xiazai');
return request(
`${merge(url, more)}`,
{
method: 'get', // default
params: data,
responseType: 'blob',
},
more,
true,
).then((response) => {
return new Blob([response.data]);
});
};
const formDataUpload = (url, options, more = {}) => {
const formData = new FormData();
if (options) {
Object.keys(options).forEach((key) => {
formData.append(key, options[key]);
});
}
return post(`${merge(url, more)}`, formData, {
headers: {
'Content-Type': 'multipart/form-data',
Authorization: store.get('token'),
},
...more,
}).then((res) => {
const { code } = res;
if (code === 'sys.success' && typeof options.onSuccess) {
return options.onSuccess(res);
}
return res;
});
};
/**
* 上传文件
* @param {url} url
* @param {data} data
* @param {type} type
* @param {more} more
*/
const uploadFile = (url, data, type = 'formData', more = {}) => {
if (type === 'formData') {
return formDataUpload(url, data, more);
}
return null;
};
export { request, get, post, put, del, patch, uploadFile, downloadFile };
src/utils/langUtils.js
View file @ e7671869
const LANG_KEY = 'LANG_KEY';
// 假如 第一语言没有， 就使用这个配置的语言
const fallbackLocale = 'zh_CN';
// 支持的语言列表
const langList = [
{ key: 'zh_CN', name: '简体中文', alias: '简体' },
{ key: 'en_US', name: 'English', alias: 'English' },
];
function setLang(val) {
window.sessionStorage.setItem(LANG_KEY, val);
window.localStorage.setItem(LANG_KEY, val);
}
function getLang() {
return window.sessionStorage.getItem(LANG_KEY);
return window.localStorage.getItem(LANG_KEY) || 'zh_CN';
}
export default {
get: getLang,
set: setLang,
fallbackLocale,
langList,
};
src/utils/requestUtil.js
View file @ e7671869
......@@ -21,7 +21,7 @@ function loadResponseInterceptor({ router }) {
config.headers = {
...config.headers,
Authorization: getToken(),
'X-Access-Lang': langUtil.get() || 'zh_CN',
'X-Access-Lang': langUtil.get(),
};
return config;
},
......
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