SCHISANDRA/schisandra-cloud-album-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ add internationalization / dynamic themes

Browse Source
This commit is contained in:
landaiqing
2024-08-09 19:51:56 +08:00
parent c13613ec07
commit 438965f2a2
28 changed files with 402 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -3,5 +3,5 @@
</template>
<script setup lang="ts">
import LayOut from "@/layout/default/Layout.vue";
import LayOut from "@/layout/default/DefaultLayout.vue";
</script>

19
src/assets/styles/global.scss Normal file
View File

@@ -0,0 +1,19 @@
@import "theme";
body {
position: relative;
transition: background-color 0.3s,
color 0.3s;
@include useTheme {
background-color: getModeVar('bgColor');
color: getModeVar('infoColor');
}
}
#nprogress .bar {
background: #48c453 !important; //自定义颜色
}
#nprogress .peg {
box-shadow: 0 0 10px cyan, 0 0 5px cyan !important;
}

12
src/assets/styles/scroll-bar.scss
View File

@@ -1,4 +1,4 @@
@import "theme";
::-webkit-scrollbar {
width: 6px;
height: 8px;
@@ -21,13 +21,3 @@
::-webkit-resizer {
display: none;
}
body {
position: relative;
transition: background-color 0.3s,
color 0.3s;
@include useTheme {
background-color: getModeVar('bgColor');
color: getModeVar('infoColor');
}
}

1
src/assets/vue.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 496 B

23
src/layout/default/DefaultLayout.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<AConfigProvider
:locale="lang.getLang() === 'en' ? enUS : zhCN"
:theme="app.themeConfig"
>
<router-view v-slot="{ Component, route }">
<transition name="animation" mode="out-in">
<component :is="Component" :key="route.path"/>
</transition>
</router-view>
</AConfigProvider>
</template>
<script setup lang="ts">
import enUS from 'ant-design-vue/es/locale/en_US';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import useStore from "@/store/index.ts";
const app = useStore().theme;
const lang = useStore().lang;
</script>
<style scoped lang="scss">
</style>

25
src/layout/default/Layout.vue
View File

@@ -1,25 +0,0 @@
<template>
<AConfigProvider
:theme="{
token: {
colorPrimary: '#00b96b',
},
}"
>
<router-view v-slot="{ Component, route }">
<transition name="animation" mode="out-in">
<component :is="Component" :key="route.path"/>
</transition>
</router-view>
</AConfigProvider>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
name: "LayOut"
});
</script>
<style scoped>
</style>

23
src/locales/index.ts Normal file
View File

@@ -0,0 +1,23 @@
// index.ts
import {createI18n} from 'vue-i18n';
import zh from './language/zh.ts';
import en from './language/en.ts';
const messages = {
en,
zh
};
const language = (navigator.language || 'en').toLocaleLowerCase(); // 这是获取浏览器的语言
const i18n = createI18n({
legacy: false,
globalInjection: true,
silentTranslationWarn: true,
locale: JSON.parse(localStorage.getItem("lang") as string).lang || language.split('-')[0] || 'zh', // 首先从缓存里拿，没有的话就用浏览器语言，
silentFallbackWarn: true,
missingWarn: true,
fallbackWarn: false,
messages
});
export default i18n;

6
src/locales/language/en.ts Normal file
View File

@@ -0,0 +1,6 @@
// en.ts
export default {
login: {
test: 'login',
}
};

9
src/locales/language/zh.ts Normal file
View File

@@ -0,0 +1,9 @@
// zh.ts
export default {
login: {
test: '登录',
}
};

18
src/main.ts
View File

@@ -1,15 +1,13 @@
import {createApp} from 'vue';
import App from './App.vue';
import '@/assets/styles/scroll-bar.scss';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
//Pinia
import {createPinia, Pinia} from 'pinia';
import '@/assets/styles/global.scss';
import i18n from "@/locales/index.ts";
import {setupStore} from "@/store/pinia.ts";
import router from "@/router/router.ts";
const pinia: Pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
createApp(App)
.use(router)
.use(pinia)
.mount('#app');
const app = createApp(App);
setupStore(app);
app.use(router);
app.use(i18n);
app.mount('#app');

2
src/router/modules/test.ts
View File

@@ -4,7 +4,7 @@ export default [
name: 'test',
component: () => import('@/views/TestTheme.vue'),
meta: {
requiresAuth: true,
requiresAuth: false,
title: '测试'
}
}

4
src/store/index.ts
View File

@@ -1,9 +1,11 @@
import {useAuthStore} from '@/store/modules/userStore.ts';
import {useThemeStore} from "@/store/modules/themeStore.ts";
import {langStore} from "@/store/modules/langStore.ts";
export default function useStore() {
return {
user: useAuthStore(),
theme: useThemeStore()
theme: useThemeStore(),
lang: langStore()
};
}

37
src/store/modules/langStore.ts Normal file
View File

@@ -0,0 +1,37 @@
import {defineStore} from 'pinia';
import {ref} from 'vue';
import pinia from "@/store/pinia.ts";
export const langStore = defineStore(
'lang',
() => {
const lang = ref<string>('');
function setLang(value: string) {
lang.value = value;
}
function getLang() {
return lang.value;
}
return {
lang,
setLang,
getLang,
};
},
{
// 开启数据持久化
persistedState: {
key: 'lang',
storage: localStorage,
includePaths: ["lang"],
overwrite: true,
}
}
);
export function useLangStoreWithOut() {
return langStore(pinia);
}

13
src/store/modules/themeStore.ts
View File

@@ -2,8 +2,6 @@ import {defineStore} from 'pinia';
import {computed, ref} from 'vue';
import {theme} from 'ant-design-vue';
import variables from '@/assets/styles/colors.module.scss';
import {handleLocalforage} from "@/utils/localforage";
import {parse, stringify} from "zipson/lib";
/**
* theme 配置 开启持久化
@@ -41,14 +39,11 @@ export const useThemeStore = defineStore(
return {themeName, themeConfig, darkMode, darkModeComp, setThemeName, toggleDarkMode};
},
{
persist: {
persistedState: {
key: 'theme',
paths: ['themeName','darkMode'],
storage: handleLocalforage,
serializer: {
deserialize: parse,
serialize: stringify,
},
storage: localStorage,
includePaths: ["themeName", "darkMode"],
overwrite: true,
}
}
);

13
src/store/modules/userStore.ts
View File

@@ -1,8 +1,6 @@
import {defineStore} from 'pinia';
import {ref} from 'vue';
import {User} from "@/types/user";
import {parse, stringify} from "zipson/lib";
import {handleLocalforage} from "@/utils/localforage";
export const useAuthStore = defineStore(
@@ -31,14 +29,11 @@ export const useAuthStore = defineStore(
},
{
// 开启数据持久化
persist: {
persistedState: {
key: 'user',
paths: ['user'],
storage: handleLocalforage,
serializer: {
deserialize: parse,
serialize: stringify,
},
storage: localStorage,
includePaths: ["user"],
overwrite: true,
}
}
);

17
src/store/pinia.ts Normal file
View File

@@ -0,0 +1,17 @@
import {createPinia, Pinia} from "pinia";
import {createPersistedStatePlugin} from "pinia-plugin-persistedstate-2";
import stringify from 'json-stringify-safe';
import {App} from "vue";
const pinia: Pinia = createPinia();
const installPersistedStatePlugin = createPersistedStatePlugin({
serialize: (value) => stringify(value),
deserialize: (value) => JSON.parse(value),
});
pinia.use((context) => installPersistedStatePlugin(context));
export function setupStore(app: App<Element>) {
app.use(pinia);
}
export default pinia;

20
src/utils/alova/adapter/localforageStorageAdapter.ts
View File

@@ -1,17 +1,25 @@
import {handleLocalforage} from "@/utils/localforage";
import localforage from "localforage";
export const localforageStorageAdapter = {
set(key: string, value: any) {
handleLocalforage.setItem(key, value);
localforage.setItem(key, value).then();
},
get(key: string) {
const data: string = handleLocalforage.getItem(key);
return data ? JSON.parse(data) : data;
let value;
localforage.getItem(key).then((res: any) => {
if (res === null || res === undefined) {
value = "";
} else {
value = res;
}
});
return value ? JSON.parse(value) : value;
},
remove(key: any) {
handleLocalforage.removeItem(key);
localforage.removeItem(key).then();
},
clear() {
handleLocalforage.clear().then();
localforage.clear().then();
}
};

103
src/utils/alova/service.ts
View File

@@ -6,6 +6,8 @@ import {axiosRequestAdapter} from "@alova/adapter-axios";
import {AxiosError, AxiosResponse} from "axios";
import {message} from "ant-design-vue";
import {localforageStorageAdapter} from "@/utils/alova/adapter/localforageStorageAdapter.ts";
import {handleCode} from "@/utils/errorCode/errorCodeHandler.ts";
export const service = createAlova({
timeout: 5000,
@@ -51,103 +53,4 @@ export const service = createAlova({
}
});
function handleCode(code: number): void {
switch (code) {
case 400:
message
.open({
content: "请求错误(400)",
type: "error",
})
.then();
break;
case 401:
message
.open({
content: "未授权，请重新登录(401)",
type: "error",
})
.then();
break;
case 403:
message
.open({
content: "拒绝访问(403)",
type: "error",
})
.then();
break;
case 404:
message
.open({
content: "请求出错(404)",
type: "error",
})
.then();
break;
case 408:
message
.open({
content: "请求超时(408)",
type: "error",
})
.then();
break;
case 500:
message
.open({
content: "服务器错误(500)",
type: "error",
})
.then();
break;
case 501:
message
.open({
content: "服务未实现(501)",
type: "error",
})
.then();
break;
case 502:
message
.open({
content: "网络错误(502)",
type: "error",
})
.then();
break;
case 503:
message
.open({
content: "服务不可用(503)",
type: "error",
})
.then();
break;
case 504:
message
.open({
content: "网络超时(504)",
type: "error",
})
.then();
break;
case 505:
message
.open({
content: "HTTP版本不受支持(505)",
type: "error",
})
.then();
break;
default:
message
.open({
content: `连接出错(${code})!`,
type: "error",
})
.then();
break;
}
}

104
src/utils/axios/request.ts
View File

@@ -3,6 +3,7 @@
import axios, {AxiosInstance, AxiosRequestConfig} from "axios";
import {message} from "ant-design-vue";
import useStore from "@/store";
import {handleCode} from "@/utils/errorCode/errorCodeHandler.ts";
class Request {
private instance: AxiosInstance | undefined;
@@ -36,7 +37,7 @@ class Request {
(error) => {
const {response} = error;
if (response) {
this.handleCode(response.status);
handleCode(response.status);
}
if (!window.navigator.onLine) {
message.error("网络连接失败");
@@ -46,107 +47,6 @@ class Request {
);
}
handleCode(code: number): void {
switch (code) {
case 400:
message
.open({
content: "请求错误(400)",
type: "error",
})
.then();
break;
case 401:
message
.open({
content: "未授权，请重新登录(401)",
type: "error",
})
.then();
break;
case 403:
message
.open({
content: "拒绝访问(403)",
type: "error",
})
.then();
break;
case 404:
message
.open({
content: "请求出错(404)",
type: "error",
})
.then();
break;
case 408:
message
.open({
content: "请求超时(408)",
type: "error",
})
.then();
break;
case 500:
message
.open({
content: "服务器错误(500)",
type: "error",
})
.then();
break;
case 501:
message
.open({
content: "服务未实现(501)",
type: "error",
})
.then();
break;
case 502:
message
.open({
content: "网络错误(502)",
type: "error",
})
.then();
break;
case 503:
message
.open({
content: "服务不可用(503)",
type: "error",
})
.then();
break;
case 504:
message
.open({
content: "网络超时(504)",
type: "error",
})
.then();
break;
case 505:
message
.open({
content: "HTTP版本不受支持(505)",
type: "error",
})
.then();
break;
default:
message
.open({
content: `连接出错(${code})!`,
type: "error",
})
.then();
break;
}
}
request<T>(config: AxiosRequestConfig<T>): Promise<T> {
return new Promise<T>((resolve, reject) => {
this.instance

102
src/utils/errorCode/errorCodeHandler.ts Normal file
View File

@@ -0,0 +1,102 @@
import {message} from "ant-design-vue";
export function handleCode(code: number): void {
switch (code) {
case 400:
message
.open({
content: "请求错误(400)",
type: "error",
})
.then();
break;
case 401:
message
.open({
content: "未授权，请重新登录(401)",
type: "error",
})
.then();
break;
case 403:
message
.open({
content: "拒绝访问(403)",
type: "error",
})
.then();
break;
case 404:
message
.open({
content: "请求出错(404)",
type: "error",
})
.then();
break;
case 408:
message
.open({
content: "请求超时(408)",
type: "error",
})
.then();
break;
case 500:
message
.open({
content: "服务器错误(500)",
type: "error",
})
.then();
break;
case 501:
message
.open({
content: "服务未实现(501)",
type: "error",
})
.then();
break;
case 502:
message
.open({
content: "网络错误(502)",
type: "error",
})
.then();
break;
case 503:
message
.open({
content: "服务不可用(503)",
type: "error",
})
.then();
break;
case 504:
message
.open({
content: "网络超时(504)",
type: "error",
})
.then();
break;
case 505:
message
.open({
content: "HTTP版本不受支持(505)",
type: "error",
})
.then();
break;
default:
message
.open({
content: `连接出错(${code})!`,
type: "error",
})
.then();
break;
}
}

65
src/utils/localforage/index.ts
View File

@@ -1,65 +0,0 @@
/** @format */
import localforage from "localforage";
import CryptoJS from "crypto-js";
const SECRET_KEY = CryptoJS.enc.Utf8.parse("3333e6e143439161"); //十六位十六进制数作为密钥
const SECRET_IV = CryptoJS.enc.Utf8.parse("e3bbe7e3ba84431a"); //十六位十六进制数作为密钥偏移量
/**
* 加密
* @param data
* @param output
*/
export const encrypt = (data: string, output?: undefined) => {
const dataHex = CryptoJS.enc.Utf8.parse(data);
const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
iv: SECRET_IV,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
});
return encrypted.ciphertext.toString(output);
};
/**
* 解密
* @param data
*/
export const decrypt = (data: string | unknown) => {
if (data === null) {
return;
}
const encryptedHex = CryptoJS.enc.Hex.parse(data as string);
const encryptedHexStr = CryptoJS.enc.Base64.stringify(encryptedHex);
const decrypted = CryptoJS.AES.decrypt(encryptedHexStr, SECRET_KEY, {
iv: SECRET_IV,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
});
const decryptedStr = decrypted.toString(CryptoJS.enc.Utf8);
return decryptedStr.toString();
};
export const handleLocalforage = {
config: async (options?: LocalForageOptions) => localforage.config(options || {}),
setItem: (key: string, value: any) => {
localforage.setItem(key, encrypt(value));
},
getItem: (key: string) => {
let value: unknown = null;
localforage.getItem(key).then((res: unknown) => {
value = res;
});
return decrypt(value) as string;
},
removeItem: (key: string) => {
localforage.removeItem(key);
},
clear: async () => {
return await localforage.clear();
},
createInstance: async (name: string) => {
return localforage.createInstance({
name,
});
},
};

2
src/utils/nprogress/nprogress.ts
View File

@@ -5,7 +5,7 @@ import 'nprogress/nprogress.css';
NProgress.configure({
easing: 'ease', // 动画方式
speed: 300, // 递增进度条的速度
showSpinner: false, // 是否显示加载ico
showSpinner: true, // 是否显示加载ico
trickleSpeed: 200, // 自动递增间隔
minimum: 0.3, // 更改启动时使用的最小百分比
parent: 'body' //指定进度条的父容器

44
src/views/Login/LoginPage.vue
View File

@@ -1,20 +1,36 @@
<template>
<AButton> alvoa</AButton>
<div>
<AButton @click="handleClick"> {{ t('login.test') }}</AButton>
<AButton @click="changeLang('zh')"> 切换中文</AButton>
<AButton @click="changeLang('en')"> 切换英文</AButton>
<ADatePicker/>
<ATimePicker/>
{{ data }}
</div>
</template>
<script setup lang="ts">
// import {getUserInfo} from "@/api/user";
// import {useRequest} from "alova/client";
//
// const {loading, data, send} = useRequest(getUserInfo, {
// immediate: true,
// throttle: 3000,
// });
// const handleClick = () => {
// send();
// console.log(loading.value);
// console.log(data.value);
//
// };
import {useRequest} from "alova/client";
import {getUserInfo} from "@/api/user";
import {useI18n} from "vue-i18n";
import useStore from "@/store";
const {t, locale} = useI18n();
const {data, send} = useRequest(getUserInfo, {
immediate: false
});
const handleClick = () => {
send();
};
const lang = useStore().lang;
async function changeLang(language: any) {
lang.setLang(language);
locale.value = language;
}
</script>
<style src="./index.scss" scoped>
</style>

39
src/views/TestTheme.vue
View File

@@ -1,28 +1,33 @@
<template>
<AConfigProvider :theme="app.themeConfig">
<ASelect v-model:value="app.themeName" style="width: 240px">
<ASelectOption v-for="(color, name) in variables" :key="color" :value="name"> {{ name }}:{{
color
}}
</ASelectOption>
</ASelect>
<ASelect v-model:value="app.darkMode" style="width: 120px">
<ASelectOption value="dark">dark</ASelectOption>
<ASelectOption value="light">light</ASelectOption>
</ASelect>
<AButtonGroup>
<AButton type="primary">切换主题- {{ app.themeName }}</AButton>
<AButton @click="app.toggleDarkMode">切换模式{{ app.darkModeComp }}</AButton>
</AButtonGroup>
<div class="test">test</div>
</AConfigProvider>
<div>
<AConfigProvider :theme="app.themeConfig">
<ASelect v-model:value="app.themeName" style="width: 240px">
<ASelectOption v-for="(color, name) in variables" :key="color" :value="name"> {{ name }}:{{
color
}}
</ASelectOption>
</ASelect>
<ASelect v-model:value="app.darkMode" style="width: 120px">
<ASelectOption value="dark">dark</ASelectOption>
<ASelectOption value="light">light</ASelectOption>
</ASelect>
<AButtonGroup>
<AButton type="primary">切换主题- {{ app.themeName }}</AButton>
<AButton @click="app.toggleDarkMode">切换模式{{ app.darkModeComp }}</AButton>
</AButtonGroup>
<div class="test">test</div>
</AConfigProvider>
</div>
</template>
<script setup>
import variables from "@/assets/styles/colors.module.scss";
import useStore from "@/store/index.ts";
const app = useStore().theme;
</script>
<style lang="scss" scoped>
@import "@/assets/styles/theme.scss";