基本框架

index.html

@@ -20,6 +20,10 @@
     if (dark) {
         document.documentElement.classList.add("dark")
     }
+	var weak = window.localStorage.getItem('APP_WEAK');
+	if (weak) {
+		document.documentElement.classList.add("weak")
+	}
 </script>
 <div id="app" class="pi">
     <div class="app-loading">

src/App.vue

@@ -6,22 +6,38 @@
 
 <script setup>
 import {useI18n} from 'vue-i18n'
-import {computed} from 'vue'
+import {computed, ref} from 'vue'
+import tools from "@/utils/tools.js";
+import colorTool from '@/utils/color'
+
 const {locale, messages} = useI18n()
 
-const config = {
+const config = ref({
 	size: "default",
 	zIndex: 2000,
 	button: {
 		autoInsertSpace: false
 	}
-}
+})
+
+//设置主题颜色
+const app_color = tools.data.get('APP_COLOR') || "#409EFF"
 
 const locale2 = computed(() => {
 	return messages.value[locale.value]
 })
 
 console.log('%c SAAS %c 里派提供技术支持', 'background:#4caf50;color:#fff;border-radius:3px;', '')
+if(app_color){
+	document.documentElement.style.setProperty('--el-color-primary', app_color);
+	for (let i = 1; i <= 9; i++) {
+		document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(app_color,i/10));
+	}
+	for (let i = 1; i <= 9; i++) {
+		document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(app_color,i/10));
+	}
+}
+
 </script>
 
 <style lang="scss">

src/config/index.ts

@@ -15,4 +15,7 @@ export default {
     TOKEN_NAME: "Authorization",
     //Token前缀，注意最后有个空格，如不需要需设置空字符串
     TOKEN_PREFIX: "Bearer ",
+	//布局 默认：default | 通栏：header | 经典：menu | 功能坞：dock
+	//dock将关闭标签和面包屑栏
+	APP_LAYOUT: 'header',
 }

src/layout/components/setting.vue

@@ -1,7 +1,7 @@
 <template>
 	<el-form ref="form" label-width="120px" label-position="left" style="padding:0 20px;">
 		<el-divider></el-divider>
-		<el-form-item :label="$t('user.nightmode')">
+		<el-form-item :label="t('user.nightmode')">
 			<el-switch v-model="dark"></el-switch>
 		</el-form-item>
 		<el-form-item :label="$t('user.language')">
@@ -11,84 +11,103 @@
 			</el-select>
 		</el-form-item>
 		<el-divider></el-divider>
-		<el-form-item label="主题颜色">
+		<el-form-item :label="t('system.primaryColor')">
-			<el-color-picker v-model="colorPrimary" :predefine="colorList">></el-color-picker>
+			<el-color-picker v-model="colorPrimary" :predefine="colorList"></el-color-picker>
+		</el-form-item>
+		<el-form-item :label="t('system.weakMode')">
+			<el-switch v-model="weakMode"></el-switch>
 		</el-form-item>
 		<el-divider></el-divider>
-		<el-form-item label="框架布局">
+		<el-form-item :label="t('system.layout')">
-			<el-select v-model="layout" placeholder="请选择">
+			<el-select v-model="layout" :placeholder="t('system.pleaseSelect')">
-				<el-option label="默认" value="default"></el-option>
+				<el-option :label="t('system.default')" value="default"></el-option>
-				<el-option label="通栏" value="header"></el-option>
+				<el-option :label="t('system.fullWidth')" value="header"></el-option>
-				<el-option label="经典" value="menu"></el-option>
+				<el-option :label="t('system.classic')" value="menu"></el-option>
-				<el-option label="功能坞" value="dock"></el-option>
+				<el-option :label="t('system.dock')" value="dock"></el-option>
 			</el-select>
 		</el-form-item>
-		<el-form-item label="折叠菜单">
+		<el-form-item :label="t('system.collapseMenu')">
 			<el-switch v-model="menuIsCollapse"></el-switch>
 		</el-form-item>
-		<el-form-item label="标签栏">
+		<el-form-item :label="t('system.showLabels')">
 			<el-switch v-model="layoutTags"></el-switch>
 		</el-form-item>
 		<el-divider></el-divider>
 	</el-form>
 </template>
 
-<script>
+<script setup>
+import {ref, watch} from "vue";
 import colorTool from '@/utils/color'
+import tools from "@/utils/tools";
+import config from "@/config";
+import store from '@/store'
+import {useI18n} from "vue-i18n";
 
-export default {
+const {t, locale} = useI18n()
-	data(){
+
-		return {
+let layout = ref(tools.data.get('APP_LAYOUT') || store.state.global.layout);
-			layout: this.$TOOL.data.get('APP_LAYOUT') || this.$store.state.global.layout,
+let menuIsCollapse = ref(store.state.global.menuIsCollapse);
-			menuIsCollapse: this.$store.state.global.menuIsCollapse,
+let layoutTags = ref(store.state.global.layoutTags);
-			layoutTags: this.$store.state.global.layoutTags,
+let lang = ref(tools.data.get('APP_LANG') || config.LANG);
-			lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
+let dark = ref(tools.data.get('APP_DARK') || false);
-			dark: this.$TOOL.data.get('APP_DARK') || false,
+let colorList = ref(['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d']);
-			colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
+let colorPrimary = ref(tools.data.get('APP_COLOR') || '#409EFF');
-			colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR || '#409EFF'
+let weakMode = ref(tools.data.get('APP_WEAK') || false)
-		}
+
-	},
+watch(layout, (val) => {
-	watch: {
+	tools.data.set("APP_LAYOUT", val);
-		layout(val) {
+	store.commit("SET_layout", val)
-			this.$TOOL.data.set("APP_LAYOUT", val);
+})
-			this.$store.commit("SET_layout", val)
+
-		},
+watch(menuIsCollapse, () => {
-		menuIsCollapse(){
+	store.commit("TOGGLE_menuIsCollapse")
-			this.$store.commit("TOGGLE_menuIsCollapse")
+})
-		},
+
-		layoutTags(){
+watch(layoutTags, () => {
-			this.$store.commit("TOGGLE_layoutTags")
+	store.commit("TOGGLE_layoutTags")
-		},
+})
-		dark(val){
+
-			if(val){
+watch(dark, (val) => {
-				document.documentElement.classList.add("dark")
+	if (val) {
-				this.$TOOL.data.set("APP_DARK", val)
+		document.documentElement.classList.add("dark")
-			}else{
+		tools.data.set("APP_DARK", val)
-				document.documentElement.classList.remove("dark")
+	} else {
-				this.$TOOL.data.remove("APP_DARK")
+		document.documentElement.classList.remove("dark")
-			}
+		tools.data.remove("APP_DARK")
-		},
-		lang(val){
-			this.$i18n.locale = val
-			this.$TOOL.data.set("APP_LANG", val);
-		},
-		colorPrimary(val){
-			if(!val){
-				val = '#409EFF'
-				this.colorPrimary = '#409EFF'
-			}
-			document.documentElement.style.setProperty('--el-color-primary', val);
-			for (let i = 1; i <= 9; i++) {
-				document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val,i/10));
-			}
-			for (let i = 1; i <= 9; i++) {
-				document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(val,i/10));
-			}
-			this.$TOOL.data.set("APP_COLOR", val);
-		}
 	}
-}
+})
+
+watch(weakMode, (val) => {
+	if (val) {
+		document.documentElement.classList.add("weak")
+		tools.data.set("APP_WEAK", val)
+	} else {
+		document.documentElement.classList.remove("weak")
+		tools.data.remove("APP_WEAK")
+	}
+})
+
+watch(lang, (val) => {
+	locale.value = val
+	tools.data.set("APP_LANG", val);
+})
+
+watch(colorPrimary, (val) => {
+	if (!val) {
+		val = '#409EFF'
+		colorPrimary = '#409EFF'
+	}
+	document.documentElement.style.setProperty('--el-color-primary', val);
+	for (let i = 1; i <= 9; i++) {
+		document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val, i / 10));
+	}
+	for (let i = 1; i <= 9; i++) {
+		document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(val, i / 10));
+	}
+	tools.data.set("APP_COLOR", val);
+})
 </script>
 
-<style>
+<style scoped>
 </style>

src/layout/components/tags.vue

@@ -174,15 +174,15 @@ function closeSelectedTag(tag, autoPushLatestView = true) {
 function openContextMenu(e, tag) {
 	contextMenuItem = tag;
 	contextMenuVisible = true;
-	left = e.clientX + 1;
+	left.value = e.clientX + 1;
-	top = e.clientY + 1;
+	top.value = e.clientY + 1;
 
 	//FIX 右键菜单边缘化位置处理
 	nextTick(() => {
 		let sp = document.getElementById("contextmenu");
 		if (document.body.offsetWidth - e.clientX < sp.offsetWidth) {
-			left = document.body.offsetWidth - sp.offsetWidth + 1;
+			left.value = document.body.offsetWidth - sp.offsetWidth + 1;
-			top = e.clientY + 1;
+			top.value = e.clientY + 1;
 		}
 	})
 }
@@ -190,13 +190,13 @@ function openContextMenu(e, tag) {
 //关闭右键菜单
 function closeMenu() {
 	contextMenuItem = null;
-	contextMenuVisible = false
+	contextMenuVisible.value = false
 }
 
 //TAB 刷新
 function refreshTab() {
 	const nowTag = contextMenuItem;
-	contextMenuVisible = false
+	contextMenuVisible.value = false
 	//判断是否当前路由，否的话跳转
 	if (route.fullPath != nowTag.fullPath) {
 		router.push({
@@ -220,7 +220,7 @@ function closeTabs() {
 	var nowTag = contextMenuItem;
 	if (!nowTag.meta.affix) {
 		closeSelectedTag(nowTag)
-		contextMenuVisible = false
+		contextMenuVisible.value = false
 	}
 }
 
@@ -242,13 +242,13 @@ function closeOtherTabs() {
 			closeSelectedTag(tag, false)
 		}
 	})
-	contextMenuVisible = false
+	contextMenuVisible.value = false
 }
 
 //TAB 最大化
 function maximize() {
 	var nowTag = contextMenuItem;
-	contextMenuVisible = false
+	contextMenuVisible.value = false
 	//判断是否当前路由，否的话跳转
 	if (route.fullPath != nowTag.fullPath) {
 		router.push({

src/layout/components/userbar.vue

@@ -51,7 +51,7 @@
 			<el-icon>
 				<pi-icon-brush/>
 			</el-icon>
-			<el-drawer title="页面布局" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
+			<el-drawer :title="t('system.pageLayout')" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
 				<setting></setting>
 			</el-drawer>
 		</div>
@@ -64,8 +64,8 @@
 	</el-drawer>
 </template>
 
-<script setup>
+<script setup name="userbar">
-import {ref, onMounted} from "vue";
+import {ref, onMounted, getCurrentInstance} from "vue";
 import search from './search.vue'
 import message from './message.vue'
 import setting from './setting.vue'
@@ -74,12 +74,18 @@ import websocket from "@/utils/websocket";
 import {ElNotification} from 'element-plus';
 import tools from "@/utils/tools.js";
 import api from "@/api/index.js";
+import {useRouter} from "vue-router";
+import {useI18n} from "vue-i18n";
+
+const {proxy} = getCurrentInstance()
+const router = useRouter()
+const {t} = useI18n()
 
 let searchVisible = ref(false)
 let msg = ref(false)
 let msgNum = ref(0)
 const tasksVisible = ref(false)
-const taskNum = ref(0)
+let taskNum = ref(0)
 const settingDialog = ref(false)
 const userInfo = tools.data.get("USER_INFO");
 
@@ -119,9 +125,9 @@ function messageHandle(message) {
 		})
 	}
 	if (data.type == "message") {
-		this.msgNum++
+		msgNum.value++
 	} else if (data.type == "task") {
-		this.taskNum++
+		taskNum.value++
 	}
 	return;
 }
@@ -135,38 +141,40 @@ function closeHandle() {
 //个人信息
 function handleUser(command) {
 	if (command === "uc") {
-		this.$router.push({path: '/usercenter'});
+		router.push({path: '/usercenter'});
 	}
 	if (command === "cmd") {
-		this.$router.push({path: '/cmd'});
+		router.push({path: '/cmd'});
 	}
 	if (command === "clearCache") {
-		this.$confirm('清除缓存会将系统初始化，包括登录状态、主题、语言设置等，是否继续？', '提示', {
+		proxy.$confirm('清除缓存会将系统初始化，包括登录状态、主题、语言设置等，是否继续？', '提示', {
 			type: 'info',
 		}).then(async () => {
-			const loading = this.$loading()
+			const loading = proxy.$loading()
 			tools.data.clear()
 			const [res, err] = await tools.go(api.auth.logout())
 			if (!err) {
 				loading.close()
 				location.reload()
-				this.$message.success(res.msg)
+				proxy.$message.success(res.msg)
-				this.$router.replace({path: '/login'});
+				router.replace({path: '/login'});
 			}
-		})
+		}).catch(() => {
+		});
 	}
 	if (command === "outLogin") {
-		this.$confirm('确认是否退出当前用户？', '提示', {
+		proxy.$confirm('确认是否退出当前用户？', '提示', {
 			type: 'warning',
-			confirmButtonText: '退出',
+			confirmButtonText: t("system.logout"),
 			confirmButtonClass: 'el-button--danger'
 		}).then(async () => {
 			const [res, err] = await tools.go(api.auth.logout())
 			if (!err) {
-				this.$message.success(res.msg)
+				proxy.$message.success(res.msg)
-				this.$router.replace({path: '/login'});
+				router.replace({path: '/login'});
 			}
-		})
+		}).catch(() => {
+		});
 	}
 }
 
@@ -177,14 +185,14 @@ function screen() {
 
 //显示短消息
 function showMsg() {
-	msg = true
+	msg.value = true
 }
 
 function closeMsg(num) {
 	if (num > -1) {
-		msgNum = num
+		msgNum.value = num
 	}
-	msg = false
+	msg.value = false
 }
 
 async function loadData() {

src/layout/index.vue

@@ -289,3 +289,9 @@ function onLayoutResize() {
 	store.commit("SET_ismobile", document.body.clientWidth < 992)
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.el-menu--horizontal) {
+	height: auto;
+}
+</style>

src/locales/index.ts

@@ -4,16 +4,16 @@ import el_en from 'element-plus/dist/locale/en'
 
 import config from "@/config"
 import tools from '@/utils/tools'
-import zh_cn from './lang/zh-cn.js'
+import zh_cn from './lang/zh-cn'
-import en from './lang/en.js'
+import en from './lang/en'
 
 const messages = {
     'zh-cn': {
-        el: el_zh_cn,
+        ...el_zh_cn,
         ...zh_cn
     },
     'en': {
-        el: el_en,
+        ...el_en,
         ...en
     }
 }

src/locales/lang/en.ts

@@ -2,10 +2,21 @@ export default {
     system: {
         webTitleDev: 'Property Management System (Testing)',
         webTitle: 'Property Management System',
+		logout: 'Log out',
+		cancel: 'Cancel',
+		primaryColor: 'Primary Color',
+		weakMode: 'Weak Mode',
+		layout: 'Layout',
+		pageLayout: 'Page Layout',
+		pleaseSelect: 'Please Select',
+		default: 'Default',
+		fullWidth: 'Full-width',
+		classic: 'Classic',
+		dock: 'Dock',
+		collapseMenu: 'Collapse Menu',
+		showLabels: 'Show Labels',
     },
 	login: {
-		slogan: 'SpringCloud Alibaba Microservices Architecture',
-		describe: 'The community group',
 		signInTitle: 'Sign in',
 		accountLogin: 'Account sign in',
 		rememberMe: 'Remember me',
@@ -18,18 +29,15 @@ export default {
 		codePlaceholder: 'Please input a code',
 		PWError: 'Please input a password',
 		codeError: 'Please input a code',
-		wechatLoginTitle: 'QR code sign in',
-		wechatLoginMsg: 'Please use wechat to scan and log in | Auto scan after 3 seconds of simulation',
-		wechatLoginResult: 'Scanned | Please click authorize login in the device',
 		backLogin: 'Return to Login'
 	},
 	user: {
 		dynamic: 'Dynamic',
 		info: 'User Info',
 		settings: 'Settings',
-		nightmode: 'night mode',
+		nightmode: 'Night Mode',
 		nightmode_msg: 'Suitable for low light environment,The current night mode is beta',
-		language: 'language',
+		language: 'Language',
 		language_msg: 'Translation in progress,Temporarily translated the text of this view',
 	}
 }

src/locales/lang/zh-cn.ts

@@ -2,10 +2,21 @@ export default {
     system: {
         webTitleDev: '物业管理系统（测试）',
         webTitle: '物业管理系统',
+		logout: '退出',
+		cancel: '取消',
+		primaryColor: '主题颜色',
+		weakMode: '色弱模式',
+		layout: '框架布局',
+		pageLayout: '页面布局',
+		pleaseSelect: '请选择',
+		default: '默认',
+		fullWidth: '通栏',
+		classic: '经典',
+		dock: '功能坞',
+		collapseMenu: '折叠菜单',
+		showLabels: '显示标签',
     },
 	login: {
-		slogan: 'SpringCloud Alibaba 微服务架构',
-		describe: '便民服务',
 		signInTitle: '用户登录',
 		accountLogin: '账号登录',
 		rememberMe: '记住密码',
@@ -18,9 +29,6 @@ export default {
 		codePlaceholder: '请输入验证码',
 		PWError: '请输入密码',
 		codeError: '请输入验证码',
-		wechatLoginTitle: '二维码登录',
-		wechatLoginMsg: '请使用微信扫一扫登录 | 模拟3秒后自动扫描',
-		wechatLoginResult: '已扫描 | 请点击授权登录',
 		backLogin: '返回登录'
 	},
 	user: {

src/store/model/global.ts

@@ -1,11 +1,12 @@
 import tools from "@/utils/tools";
+import config from "@/config";
 
 export default {
 	state: {
 		//移动端布局
 		ismobile: false,
 		//布局
-		layout: tools.data.get('APP_LAYOUT') || 'default',
+		layout: tools.data.get('APP_LAYOUT') || config.APP_LAYOUT || 'header',
 		//菜单是否折叠 toggle
 		menuIsCollapse: false,
 		//多标签栏

src/style/dark.scss

@@ -35,3 +35,6 @@ html.dark {
 	.el-table .el-table__body-wrapper {background: var(--el-bg-color);}
 	.el-table th.is-sortable:hover {background: #111;}
 }
+
+// 色弱模式
+html.weak {-webkit-filter: invert(80%);filter: invert(80%);}

src/utils/errorHandler.ts

@@ -21,8 +21,7 @@ export default (error, vm)=>{
 	// }
 	// var errorName = errorMap[error.name] || "未知错误"
 
-	console.warn(`[PI error]: ${error}`);
+	console.error(`[PI error]: ${error}`);
-	console.error(error);
 	//throw error;
 
 	vm.$nextTick(() => {

src/views/system/login/index.vue

@@ -36,17 +36,17 @@
 					</div>
 				</div>
 				<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large">
-					<el-form-item prop="user">
+					<el-form-item prop="username">
 						<el-input v-model="form.username" prefix-icon="el-icon-user" clearable
-								  :placeholder="t('login.userPlaceholder')"></el-input>
+								  :placeholder="t('login.userPlaceholder')" @keyup.enter="login"></el-input>
 					</el-form-item>
 					<el-form-item prop="password">
 						<el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password
-								  :placeholder="t('login.PWPlaceholder')"></el-input>
+								  :placeholder="t('login.PWPlaceholder')" @keyup.enter="login"></el-input>
 					</el-form-item>
-					<el-form-item prop="veryCode">
+					<el-form-item prop="code">
 						<el-input v-model="form.code" prefix-icon="el-icon-iphone" clearable
-								  :placeholder="t('login.codePlaceholder')">
+								  :placeholder="t('login.codePlaceholder')" @keyup.enter="login">
 							<template #append>
 								<el-image :src="verImage" @click="getCode" style="padding: 1px;"/>
 							</template>
@@ -159,8 +159,7 @@ async function getCode() {
 
 async function login() {
 	// 校验登录
-	const validate = await proxy.$refs.loginForm.validate().catch(() => {
+	const validate = await proxy.$refs.loginForm.validate().catch(() => {});
-	});
 	if (!validate) {
 		return false
 	}