mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-22 12:58:55 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 配置项抽取至ENV 环境变量中维护

Browse Source
This commit is contained in:
lbw 2023-02-14 13:03:22 +08:00
parent d67eefb708
commit 6114c3d6c5
7 changed files with 101 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
.env
View File

@ -1,5 +1,14 @@
# port 端口号
VITE_PORT = 8888
# 前端加密密钥
VITE_PWD_ENC_KEY='pigxpigxpigxpigx'
# OAUTH2 密码模式客户端信息
VITE_OAUTH2_PASSWORD_CLIENT='pig:pig'
# OAUTH2 短信客户端信息
VITE_OAUTH2_MOBILE_CLIENT='app:app'
# OAUTH2 社交登录客户端信息
VITE_OAUTH2_SOCIAL_CLIENT='social:social'
# ADMIN 服务地址
VITE_ADMIN_PROXY_PATH = http://localhost:9999
@ -7,5 +16,12 @@ VITE_ADMIN_PROXY_PATH = http://localhost:9999
# 代码生成服务地址
VITE_GEN_PROXY_PATH = http://localhost:5003
# 是否开启websocket 消息接受,
VITE_WEBSOCKET_ENABLE = false
# 是否开启注册
VITE_REGISTER_ENABLE = false
# 代码代码前缀
VITE_PUBLIC_PATH = /

13
src/api/login/index.ts
View File

@ -8,7 +8,8 @@ import { useUserInfo } from "/@/stores/userInfo";
* @param data
*/
export const login = (data: any) => {
let basicAuth = 'Basic ' + window.btoa('pig:pig')
const basicAuth = 'Basic ' + window.btoa(import.meta.env.VITE_OAUTH2_PASSWORD_CLIENT)
Session.set('basicAuth', basicAuth)
return request({
url: '/admin/oauth2/token',
method: 'post',
@ -24,7 +25,8 @@ export const login = (data: any) => {
export const loginByMobile = (mobile: any, code: any) => {
const grant_type = 'mobile'
const scope = 'server'
let basicAuth = 'Basic ' + window.btoa('app:app')
const basicAuth = 'Basic ' + window.btoa(import.meta.env.VITE_OAUTH2_MOBILE_CLIENT)
Session.set('basicAuth', basicAuth)
return request({
url: '/admin/oauth2/token',
@ -41,7 +43,8 @@ export const loginByMobile = (mobile: any, code: any) => {
export const loginBySocial = (state: string, code: string) => {
const grant_type = 'mobile'
const scope = 'server'
let basicAuth = 'Basic ' + window.btoa('social:social')
const basicAuth = 'Basic ' + window.btoa(import.meta.env.VITE_OAUTH2_SOCIAL_CLIENT)
Session.set('basicAuth', basicAuth)
return request({
url: '/admin/oauth2/token',
@ -66,7 +69,7 @@ export const refreshTokenApi = (refresh_token: string) => {
const grant_type = 'refresh_token'
const scope = 'server'
// 获取当前选中的 basic 认证信息
let basicAuth = 'Basic ' + window.btoa('pig:pig')
const basicAuth = Session.get('basicAuth')
return request({
url: '/admin/oauth2/token',
@ -85,7 +88,7 @@ export const refreshTokenApi = (refresh_token: string) => {
* @param refreshLock
*/
export const checkToken = (refreshTime: number, refreshLock: boolean) => {
let basicAuth = 'Basic ' + window.btoa('pig:pig')
const basicAuth = Session.get('basicAuth')
request({
url: '/admin/token/check_token',
headers: {

99
src/layout/navBars/breadcrumb/user.vue
View File

@ -7,27 +7,24 @@
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">{{
$t('user.dropdownLarge')
}}
$t('user.dropdownLarge')
}}
</el-dropdown-item>
<el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">{{
$t('user.dropdownDefault')
}}
$t('user.dropdownDefault')
}}
</el-dropdown-item>
<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">{{
$t('user.dropdownSmall')
}}
$t('user.dropdownSmall')
}}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
<div class="layout-navbars-breadcrumb-user-icon">
<i
class="iconfont"
:class="state.disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'"
:title="$t('user.title1')"
></i>
<i class="iconfont" :class="state.disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'"
:title="$t('user.title1')"></i>
</div>
<template #dropdown>
<el-dropdown-menu>
@ -38,7 +35,7 @@
</el-dropdown>
<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
<el-icon :title="$t('user.title2')">
<ele-Search/>
<ele-Search />
</el-icon>
</div>
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
@ -49,30 +46,27 @@
<template #reference>
<el-badge :is-dot="isDot">
<el-icon :title="$t('user.title4')">
<ele-Bell/>
<ele-Bell />
</el-icon>
</el-badge>
</template>
<template #default>
<UserNews ref="newsRef"/>
<UserNews ref="newsRef" />
</template>
</el-popover>
</div>
<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
<i
class="iconfont"
:title="state.isScreenfull ? $t('user.title6') : $t('user.title5')"
:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
></i>
<i class="iconfont" :title="state.isScreenfull ? $t('user.title6') : $t('user.title5')"
:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
</div>
<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
<span class="layout-navbars-breadcrumb-user-link">
<img :src="userInfos.user.avatar" class="layout-navbars-breadcrumb-user-link-photo mr5"/>
{{ userInfos.user.username }}
<el-icon class="el-icon--right">
<ele-ArrowDown/>
</el-icon>
</span>
<span class="layout-navbars-breadcrumb-user-link">
<img :src="userInfos.user.avatar" class="layout-navbars-breadcrumb-user-link-photo mr5" />
{{ userInfos.user.username }}
<el-icon class="el-icon--right">
<ele-ArrowDown />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="/home">{{ $t('user.dropdown1') }}</el-dropdown-item>
@ -81,25 +75,25 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<Search ref="searchRef"/>
<global-websocket uri="/admin/ws/info" v-if="themeConfig.isWebsocket" @rollback="rollback"/>
<Search ref="searchRef" />
<global-websocket uri="/admin/ws/info" v-if="websocketEnable" @rollback="rollback" />
</div>
</template>
<script setup lang="ts" name="layoutBreadcrumbUser">
import {defineAsyncComponent, ref, computed, reactive, onMounted} from 'vue';
import {useRouter} from 'vue-router';
import {ElMessageBox, ElMessage} from 'element-plus';
import { defineAsyncComponent, ref, computed, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import screenfull from 'screenfull';
import {useI18n} from 'vue-i18n';
import {storeToRefs} from 'pinia';
import {useUserInfo} from '/@/stores/userInfo';
import {useThemeConfig} from '/@/stores/themeConfig';
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
import { useThemeConfig } from '/@/stores/themeConfig';
import other from '/@/utils/other';
import mittBus from '/@/utils/mitt';
import {Session, Local} from '/@/utils/storage';
import {formatAxis} from "/@/utils/formatTime";
import {useMsg} from "/@/stores/msg";
import { Session, Local } from '/@/utils/storage';
import { formatAxis } from "/@/utils/formatTime";
import { useMsg } from "/@/stores/msg";
// 引入组件
const GlobalWebsocket = defineAsyncComponent(() => import('/@/components/Websocket/index.vue'))
@ -107,12 +101,12 @@ const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb
const Search = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/search.vue'));
// 定义变量内容
const {locale, t} = useI18n();
const { locale, t } = useI18n();
const router = useRouter();
const stores = useUserInfo();
const storesThemeConfig = useThemeConfig();
const {userInfos} = storeToRefs(stores);
const {themeConfig} = storeToRefs(storesThemeConfig);
const { userInfos } = storeToRefs(stores);
const { themeConfig } = storeToRefs(storesThemeConfig);
const searchRef = ref();
const newsRef = ref();
@ -122,10 +116,13 @@ const state = reactive({
disabledSize: 'large',
});
// 是否开启websocket
const websocketEnable = ref(import.meta.env.VITE_WEBSOCKET_ENABLE === 'true')
// 设置分割样式
const layoutUserFlexNum = computed(() => {
let num: string | number = '';
const {layout, isClassicSplitMenu} = themeConfig.value;
const { layout, isClassicSplitMenu } = themeConfig.value;
const layoutArr: string[] = ['defaults', 'columns'];
if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
else num = '';
@ -174,14 +171,14 @@ const onHandleCommandClick = (path: string) => {
}
},
})
.then(async () => {
// 清除缓存/token等
Session.clear();
// 使用 reload 时，不需要调用 resetRoute() 重置路由
window.location.reload();
})
.catch(() => {
});
.then(async () => {
// 清除缓存/token等
Session.clear();
// 使用 reload 时，不需要调用 resetRoute() 重置路由
window.location.reload();
})
.catch(() => {
});
} else if (path === 'wareHouse') {
window.open('https://gitee.com/lyt-top/vue-next-admin');
} else {
@ -216,7 +213,7 @@ const initI18nOrSize = (value: string, attr: string) => {
// 获取到消息
const rollback = (msg: string) => {
useMsg().setMsg({label: 'websocket消息', value: msg, time: formatAxis(new Date())})
useMsg().setMsg({ label: 'websocket消息', value: msg, time: formatAxis(new Date()) })
}
const isDot = computed(() => {

6
src/stores/themeConfig.ts
View File

@ -141,11 +141,7 @@ export const useThemeConfig = defineStore('themeConfig', {
// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
globalI18n: 'zh-cn',
// 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'
globalComponentSize: 'large',
// 是否开启websocket 消息接受,
isWebsocket: false,
// 是否开启注册
isRegister: true
globalComponentSize: 'large'
},
}),

8
src/stores/userInfo.ts
View File

@ -1,6 +1,6 @@
import {defineStore} from 'pinia';
import {Session} from '/@/utils/storage';
import {getUserInfo, login, loginByMobile, loginBySocial, refreshTokenApi} from '/@/api/login/index'
import { defineStore } from 'pinia';
import { Session } from '/@/utils/storage';
import { getUserInfo, login, loginByMobile, loginBySocial, refreshTokenApi } from '/@/api/login/index'
import other from '/@/utils/other'
/**
@ -24,7 +24,7 @@ export const useUserInfo = defineStore('userInfo', {
// 密码加密
const user = other.encryption({
data: data,
key: 'pigxpigxpigxpigx',
key: import.meta.env.VITE_PWD_ENC_KEY,
param: ['password']
})
return new Promise((resolve, reject) => {

2
src/types/pinia.d.ts vendored
View File

@ -82,8 +82,6 @@ declare interface ThemeConfigState {
columnsAsideLayout: string;
layout: string;
isRequestRoutes: boolean;
isWebsocket: boolean;
isRegister: boolean,
globalTitle: string;
globalViceTitle: string;
globalViceTitleMsg: string;

41
src/views/login/index.vue
View File

@ -2,16 +2,16 @@
<div class="login-container flex">
<div class="login-left">
<div class="login-left-logo">
<img :src="logoMini"/>
<img :src="logoMini" />
<div class="login-left-logo-text">
<span>{{ getThemeConfig.globalViceTitle }}</span>
<span class="login-left-logo-text-msg">{{ getThemeConfig.globalViceTitleMsg }}</span>
</div>
</div>
<div class="login-left-img">
<img :src="loginMain"/>
<img :src="loginMain" />
</div>
<img :src="loginBg" class="login-left-waves"/>
<img :src="loginBg" class="login-left-waves" />
</div>
<div class="login-right flex">
<div class="login-right-warp flex-margin">
@ -20,23 +20,23 @@
<div class="login-right-warp-main-form">
<div>
<!-- 租户选择 -->
<tenant/>
<tenant />
<el-tabs v-model="tabsActiveName">
<!-- 用户名密码登录 -->
<el-tab-pane :label="$t('label.one1')" name="account">
<Password @signInSuccess="signInSuccess"/>
<Password @signInSuccess="signInSuccess" />
</el-tab-pane>
<!-- 手机号登录 -->
<el-tab-pane :label="$t('label.two2')" name="mobile">
<Mobile @signInSuccess="signInSuccess"/>
<Mobile @signInSuccess="signInSuccess" />
</el-tab-pane>
<!-- 社交登录 -->
<el-tab-pane :label="$t('label.three3')" name="social">
<Social @signInSuccess="signInSuccess"/>
<Social @signInSuccess="signInSuccess" />
</el-tab-pane>
<!-- 注册 -->
<el-tab-pane :label="$t('label.register')" name="register" v-if="getThemeConfig.isRegister">
<Register @afterSuccess="tabsActiveName = 'account'"/>
<el-tab-pane :label="$t('label.register')" name="register" v-if="registerEnable">
<Register @afterSuccess="tabsActiveName = 'account'" />
</el-tab-pane>
</el-tabs>
</div>
@ -48,17 +48,17 @@
</template>
<script setup lang="ts" name="loginIndex">
import {storeToRefs} from 'pinia';
import {useThemeConfig} from '/@/stores/themeConfig';
import {NextLoading} from '/@/utils/loading';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
import logoMini from '/@/assets/logo-mini.svg';
import loginMain from '/@/assets/login-main.svg';
import loginBg from '/@/assets/login-bg.svg';
import {useI18n} from 'vue-i18n';
import {formatAxis} from '/@/utils/formatTime';
import {useMessage} from '/@/hooks/message';
import {Session} from '/@/utils/storage';
import {initBackEndControlRoutes} from '/@/router/backEnd';
import { useI18n } from 'vue-i18n';
import { formatAxis } from '/@/utils/formatTime';
import { useMessage } from '/@/hooks/message';
import { Session } from '/@/utils/storage';
import { initBackEndControlRoutes } from '/@/router/backEnd';
// 引入组件
const Password = defineAsyncComponent(() => import('./component/password.vue'));
@ -69,11 +69,14 @@ const Tenant = defineAsyncComponent(() => import('./component/tenant.vue'));
// 定义变量内容
const storesThemeConfig = useThemeConfig()
const {themeConfig} = storeToRefs(storesThemeConfig)
const {t} = useI18n()
const { themeConfig } = storeToRefs(storesThemeConfig)
const { t } = useI18n()
const route = useRoute()
const router = useRouter()
// 是否开启注册
const registerEnable = ref(import.meta.env.VITE_REGISTER_ENABLE === 'true')
// 默认选择账号密码登录方式
const tabsActiveName = ref('account')