✨ add internationalization / dynamic themes
This commit is contained in:
4
components.d.ts
vendored
4
components.d.ts
vendored
@@ -10,8 +10,12 @@ declare module 'vue' {
|
||||
AButton: typeof import('ant-design-vue/es')['Button']
|
||||
AButtonGroup: typeof import('ant-design-vue/es')['ButtonGroup']
|
||||
AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
|
||||
ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
|
||||
ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
|
||||
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
|
||||
ASelect: typeof import('ant-design-vue/es')['Select']
|
||||
ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
|
||||
ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
|
||||
LoginPage: typeof import('./src/views/Login/LoginPage.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
|
@@ -12,6 +12,7 @@
|
||||
"@alova/adapter-axios": "^2.0.5",
|
||||
"@ant-design/icons-vue": "^7.0.1",
|
||||
"@types/crypto-js": "^4.2.2",
|
||||
"@types/json-stringify-safe": "^5.0.3",
|
||||
"@types/node": "^22.1.0",
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"alova": "^3.0.5",
|
||||
@@ -19,18 +20,19 @@
|
||||
"axios": "^1.7.3",
|
||||
"crypto-js": "^4.2.0",
|
||||
"eslint": "9.x",
|
||||
"json-stringify-safe": "^5.0.1",
|
||||
"less": "^4.2.0",
|
||||
"localforage": "^1.10.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.2.1",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"pinia-plugin-persistedstate-2": "^2.0.23",
|
||||
"unplugin-auto-import": "^0.18.2",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-html": "^3.2.2",
|
||||
"vite-plugin-node-polyfills": "^0.22.0",
|
||||
"vue": "^3.4.31",
|
||||
"vue-router": "^4.4.3",
|
||||
"zipson": "^0.2.12"
|
||||
"vue-i18n": "^10.0.0-beta.5",
|
||||
"vue-router": "^4.4.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.8.0",
|
||||
|
@@ -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
19
src/assets/styles/global.scss
Normal 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;
|
||||
}
|
@@ -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 +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>
|
Before Width: | Height: | Size: 496 B |
23
src/layout/default/DefaultLayout.vue
Normal file
23
src/layout/default/DefaultLayout.vue
Normal 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>
|
@@ -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
23
src/locales/index.ts
Normal 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
6
src/locales/language/en.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
// en.ts
|
||||
export default {
|
||||
login: {
|
||||
test: 'login',
|
||||
}
|
||||
};
|
9
src/locales/language/zh.ts
Normal file
9
src/locales/language/zh.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
// zh.ts
|
||||
export default {
|
||||
|
||||
login: {
|
||||
test: '登录',
|
||||
}
|
||||
|
||||
|
||||
};
|
18
src/main.ts
18
src/main.ts
@@ -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');
|
||||
|
@@ -4,7 +4,7 @@ export default [
|
||||
name: 'test',
|
||||
component: () => import('@/views/TestTheme.vue'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
requiresAuth: false,
|
||||
title: '测试'
|
||||
}
|
||||
}
|
||||
|
@@ -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
37
src/store/modules/langStore.ts
Normal 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);
|
||||
}
|
@@ -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,
|
||||
}
|
||||
}
|
||||
);
|
||||
|
@@ -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
17
src/store/pinia.ts
Normal 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;
|
@@ -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();
|
||||
}
|
||||
};
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -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
102
src/utils/errorCode/errorCodeHandler.ts
Normal 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;
|
||||
}
|
||||
}
|
@@ -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,
|
||||
});
|
||||
},
|
||||
};
|
@@ -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' //指定进度条的父容器
|
||||
|
@@ -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>
|
||||
|
@@ -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";
|
||||
|
@@ -23,7 +23,7 @@ export default defineConfig(({mode}: { mode: string }): object => {
|
||||
dirs: ['src/components', 'src/views'],
|
||||
resolvers: [
|
||||
AntDesignVueResolver({
|
||||
importStyle: "css-in-js",
|
||||
importStyle: false,
|
||||
resolveIcons: true
|
||||
}),
|
||||
],
|
||||
@@ -33,7 +33,10 @@ export default defineConfig(({mode}: { mode: string }): object => {
|
||||
imports: ['vue', 'vue-router', 'pinia'],
|
||||
dts: 'auto-import.d.ts',
|
||||
//ant-design-vue
|
||||
resolvers: [AntDesignVueResolver()],
|
||||
resolvers: [AntDesignVueResolver({
|
||||
importStyle: false,
|
||||
resolveIcons: true
|
||||
})],
|
||||
eslintrc: {
|
||||
enabled: false // 1、改为true用于生成eslint配置。2、生成后改回false,避免重复生成消耗
|
||||
}
|
||||
@@ -74,6 +77,9 @@ export default defineConfig(({mode}: { mode: string }): object => {
|
||||
scss: {
|
||||
javascriptEnabled: true,
|
||||
},
|
||||
less: {
|
||||
javascriptEnabled: true,
|
||||
},
|
||||
},
|
||||
modules: {
|
||||
// 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义
|
||||
@@ -102,8 +108,8 @@ export default defineConfig(({mode}: { mode: string }): object => {
|
||||
output: {
|
||||
chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
|
||||
entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
|
||||
assetFileNames: '[ext]/[name]-[hash].[ext]' ,// 资源文件像 字体,图片等
|
||||
manualChunks(id: string){
|
||||
assetFileNames: '[ext]/[name]-[hash].[ext]',// 资源文件像 字体,图片等
|
||||
manualChunks(id: string) {
|
||||
if (id.includes('node_modules')) {
|
||||
return "vendor";
|
||||
}
|
||||
|
64
yarn.lock
64
yarn.lock
@@ -258,6 +258,27 @@
|
||||
resolved "https://registry.npmmirror.com/@humanwhocodes/retry/-/retry-0.3.0.tgz#6d86b8cb322660f03d3f0aa94b99bdd8e172d570"
|
||||
integrity sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==
|
||||
|
||||
"@intlify/core-base@10.0.0-beta.5":
|
||||
version "10.0.0-beta.5"
|
||||
resolved "https://registry.npmmirror.com/@intlify/core-base/-/core-base-10.0.0-beta.5.tgz#6a04ecbe2ed346fd8f0d10acbbd6813c24a8f36d"
|
||||
integrity sha512-XWLOYbHz5QMJ1lGxjnSr3lTLB+kJqEaf507NCnqAG2X0Ffz/W6h/o7dDlvsPZ668FhnAlXc2/eQzqq5kC+NF6g==
|
||||
dependencies:
|
||||
"@intlify/message-compiler" "10.0.0-beta.5"
|
||||
"@intlify/shared" "10.0.0-beta.5"
|
||||
|
||||
"@intlify/message-compiler@10.0.0-beta.5":
|
||||
version "10.0.0-beta.5"
|
||||
resolved "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-10.0.0-beta.5.tgz#0a8d5ebc2e509a8baa419c066e3ba55339afc664"
|
||||
integrity sha512-hLLchnM1dmtSEruerkzvU9vePsLqBXz3RU85SCx/Vd12fFQiymP+/5Rn9MJ8MyfLmIOLDEx4PRh+/GkIQP6oog==
|
||||
dependencies:
|
||||
"@intlify/shared" "10.0.0-beta.5"
|
||||
source-map-js "^1.0.2"
|
||||
|
||||
"@intlify/shared@10.0.0-beta.5":
|
||||
version "10.0.0-beta.5"
|
||||
resolved "https://registry.npmmirror.com/@intlify/shared/-/shared-10.0.0-beta.5.tgz#4b87237ba2091f53275368a7ecacc321b37cf258"
|
||||
integrity sha512-g9bq5Y1bOcC9qxtNk4UWtF3sXm6Wh0fGISb7vD5aLyF7yQv7ZFjxQjJzBP2GqG/9+PAGYutqjP1GGadNqFtyAQ==
|
||||
|
||||
"@jridgewell/gen-mapping@^0.3.5":
|
||||
version "0.3.5"
|
||||
resolved "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
|
||||
@@ -443,6 +464,11 @@
|
||||
resolved "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
|
||||
integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
|
||||
|
||||
"@types/json-stringify-safe@^5.0.3":
|
||||
version "5.0.3"
|
||||
resolved "https://registry.npmmirror.com/@types/json-stringify-safe/-/json-stringify-safe-5.0.3.tgz#7eea481de6f248249c1452b5e056ca55df537f1e"
|
||||
integrity sha512-oNOjRxLfPeYbBSQ60maucaFNqbslVOPU4WWs5t/sHvAh6tyo/CThXSG+E24tEzkgh/fzvxyDrYdOJufgeNy1sQ==
|
||||
|
||||
"@types/node@^22.1.0":
|
||||
version "22.1.0"
|
||||
resolved "https://registry.npmmirror.com/@types/node/-/node-22.1.0.tgz#6d6adc648b5e03f0e83c78dc788c2b037d0ad94b"
|
||||
@@ -612,7 +638,7 @@
|
||||
de-indent "^1.0.2"
|
||||
he "^1.2.0"
|
||||
|
||||
"@vue/devtools-api@^6.6.3":
|
||||
"@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.6.3":
|
||||
version "6.6.3"
|
||||
resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz#b23a588154cba8986bba82b6e1d0248bde3fd1a0"
|
||||
integrity sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==
|
||||
@@ -2040,6 +2066,11 @@ json-stable-stringify-without-jsonify@^1.0.1:
|
||||
resolved "https://registry.npmmirror.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
|
||||
integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
|
||||
|
||||
json-stringify-safe@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.npmmirror.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
|
||||
integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
|
||||
|
||||
jsonfile@^6.0.1:
|
||||
version "6.1.0"
|
||||
resolved "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
|
||||
@@ -2506,10 +2537,12 @@ pify@^4.0.1:
|
||||
resolved "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
|
||||
integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
|
||||
|
||||
pinia-plugin-persistedstate@^3.2.1:
|
||||
version "3.2.1"
|
||||
resolved "https://registry.npmmirror.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.1.tgz#66780602aecd6c7b152dd7e3ddc249a1f7a13fe5"
|
||||
integrity sha512-MK++8LRUsGF7r45PjBFES82ISnPzyO6IZx3CH5vyPseFLZCk1g2kgx6l/nW8pEBKxxd4do0P6bJw+mUSZIEZUQ==
|
||||
pinia-plugin-persistedstate-2@^2.0.23:
|
||||
version "2.0.23"
|
||||
resolved "https://registry.npmmirror.com/pinia-plugin-persistedstate-2/-/pinia-plugin-persistedstate-2-2.0.23.tgz#503eb7254230de531cfe2c815ae492f770b09c2e"
|
||||
integrity sha512-m2Py5Ntp1uyISTMpJsl30HCuOzhEuhVd2aYaVEZvd8wPMoHzbUoP80zoIgoKthQKj/NpvyfWXoM1T+s1EpPUiQ==
|
||||
dependencies:
|
||||
shvl "^3.0.0"
|
||||
|
||||
pinia@^2.2.1:
|
||||
version "2.2.1"
|
||||
@@ -2837,6 +2870,11 @@ shebang-regex@^3.0.0:
|
||||
resolved "https://registry.npmmirror.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
|
||||
integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
|
||||
|
||||
shvl@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.npmmirror.com/shvl/-/shvl-3.0.0.tgz#63b8e888730c24a779f8c574305924a144efc35e"
|
||||
integrity sha512-5IomAM3ykE/g9K9L6lhODc+TpCuN03rrhlboegeKyyfh66DDdpRD5JN37DYhNHH+RaYjiIDx64K/Ms/xQYOR5w==
|
||||
|
||||
side-channel@^1.0.6:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
|
||||
@@ -2852,7 +2890,7 @@ slash@^3.0.0:
|
||||
resolved "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
|
||||
integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
|
||||
|
||||
"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.0:
|
||||
"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
|
||||
integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
|
||||
@@ -3197,6 +3235,15 @@ vue-eslint-parser@^9.4.3:
|
||||
lodash "^4.17.21"
|
||||
semver "^7.3.6"
|
||||
|
||||
vue-i18n@^10.0.0-beta.5:
|
||||
version "10.0.0-beta.5"
|
||||
resolved "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-10.0.0-beta.5.tgz#3645a9559c32884df2ac5c5b557ce161559e1070"
|
||||
integrity sha512-P5TUo4Ux/NgQLP1OGGRnHGxkh3CPiUt4W2RcDUeoYj+26GGz9H736DY3gw5fyFdiNT9JSXhuLK7yB49pk062Yw==
|
||||
dependencies:
|
||||
"@intlify/core-base" "10.0.0-beta.5"
|
||||
"@intlify/shared" "10.0.0-beta.5"
|
||||
"@vue/devtools-api" "^6.5.0"
|
||||
|
||||
vue-router@^4.4.3:
|
||||
version "4.4.3"
|
||||
resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.4.3.tgz#58a39dc804632bfb6d26f052aa8f6718bd130299"
|
||||
@@ -3285,8 +3332,3 @@ yocto-queue@^0.1.0:
|
||||
version "0.1.0"
|
||||
resolved "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
|
||||
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
|
||||
|
||||
zipson@^0.2.12:
|
||||
version "0.2.12"
|
||||
resolved "https://registry.npmmirror.com/zipson/-/zipson-0.2.12.tgz#501f92e93f1c602ff908ad2c1c602e72746ecebb"
|
||||
integrity sha512-+u+fyZQXJUJDTf4NGCChW+LoWGqCrhwHAfvtCtcmE0e40KmQt4YSP4l3TOay1WjRNv+VfODgBD/vNwaSSGnDwA==
|
||||
|
Reference in New Issue
Block a user