pro/im_manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 移除锁屏功能相关代码

Browse Source
This commit is contained in:
Austin
2026-09-23 17:39:18 +08:00
parent abadcceb19
commit e002e45f82
10 changed files with 1 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/App.vue
+1 -41
View File
@@ -1,6 +1,5 @@
<template> <template>
<NConfigProvider <NConfigProvider
v-if="!isLock"
:locale="zhCN" :locale="zhCN"
:theme="getDarkTheme" :theme="getDarkTheme"
:theme-overrides="getThemeOverrides" :theme-overrides="getThemeOverrides"
@@ -10,27 +9,16 @@
<RouterView /> <RouterView />
</AppProvider> </AppProvider>
</NConfigProvider> </NConfigProvider>
<transition v-if="isLock && $route.name !== 'login'" name="slide-up">
<LockScreen />
</transition>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, onMounted, onUnmounted } from 'vue'; import { computed } from 'vue';
import { zhCN, dateZhCN, darkTheme } from 'naive-ui'; import { zhCN, dateZhCN, darkTheme } from 'naive-ui';
import { LockScreen } from '@/components/Lockscreen';
import { AppProvider } from '@/components/Application'; import { AppProvider } from '@/components/Application';
import { useLockscreenStore } from '@/store/modules/lockscreen';
import { useRoute } from 'vue-router';
import { useDesignSettingStore } from '@/store/modules/designSetting'; import { useDesignSettingStore } from '@/store/modules/designSetting';
import { lighten } from '@/utils'; import { lighten } from '@/utils';
const route = useRoute();
const useLockscreen = useLockscreenStore();
const designStore = useDesignSettingStore(); const designStore = useDesignSettingStore();
const isLock = computed(() => useLockscreen.isLock);
const lockTime = computed(() => useLockscreen.lockTime);
/** /**
* @type import('naive-ui').GlobalThemeOverrides * @type import('naive-ui').GlobalThemeOverrides
@@ -55,34 +43,6 @@
}); });
const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined)); const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));
let timer;
const timekeeping = () => {
clearInterval(timer);
if (route.name == 'login' || isLock.value) return;
// 设置不锁屏
useLockscreen.setLock(false);
// 重置锁屏时间
useLockscreen.setLockTime();
timer = setInterval(() => {
// 锁屏倒计时递减
useLockscreen.setLockTime(lockTime.value - 1);
if (lockTime.value <= 0) {
// 设置锁屏
useLockscreen.setLock(true);
return clearInterval(timer);
}
}, 1000);
};
onMounted(() => {
document.addEventListener('mousedown', timekeeping);
});
onUnmounted(() => {
document.removeEventListener('mousedown', timekeeping);
});
</script> </script>
<style lang="less"> <style lang="less">
web/src/components/Lockscreen/Lockscreen.vue
-315
View File
@@ -1,315 +0,0 @@
<template>
<div
:class="{ onLockLogin: showLogin }"
class="lockscreen"
@keyup="onLockLogin(true)"
@mousedown.stop
@contextmenu.prevent
>
<template v-if="!showLogin">
<div class="lock-box">
<div class="lock">
<span class="lock-icon" title="解锁屏幕" @click="onLockLogin(true)">
<n-icon>
<lock-outlined />
</n-icon>
</span>
</div>
</div>
<!--充电-->
<recharge
:battery="battery"
:battery-status="batteryStatus"
:calc-discharging-time="calcDischargingTime"
:calc-charging-time="calcChargingTime"
/>
<div class="local-time">
<div class="time">{{ hour }}:{{ minute }}</div>
<div class="date">{{ month }}月{{ day }}号，星期{{ week }}</div>
</div>
<div class="computer-status">
<span :class="{ offline: !online }" class="network">
<wifi-outlined class="network" />
</span>
<api-outlined />
</div>
</template>
<!--登录-->
<template v-if="showLogin">
<div class="login-box">
<n-avatar :size="128">
<n-icon>
<user-outlined />
</n-icon>
</n-avatar>
<div class="username">{{ loginParams.username }}</div>
<n-input
type="password"
autofocus
v-model:value="loginParams.password"
@keyup.enter="onLogin"
placeholder="请输入登录密码"
>
<template #suffix>
<n-icon @click="onLogin" style="cursor: pointer">
<LoadingOutlined v-if="loginLoading" />
<arrow-right-outlined v-else />
</n-icon>
</template>
</n-input>
<div class="w-full flex" v-if="isLoginError">
<span class="text-red-500">{{ errorMsg }}</span>
</div>
<div class="w-full mt-1 flex justify-around">
<div><a @click="showLogin = false">返回</a></div>
<div><a @click="goLogin">重新登录</a></div>
<div><a @click="onLogin">进入系统</a></div>
</div>
</div>
</template>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { ResultEnum } from '@/enums/httpEnum';
import recharge from './Recharge.vue';
import {
LockOutlined,
LoadingOutlined,
UserOutlined,
ApiOutlined,
ArrowRightOutlined,
WifiOutlined,
} from '@vicons/antd';
import { useRouter, useRoute } from 'vue-router';
import { useOnline } from '@/hooks/useOnline';
import { useTime } from '@/hooks/useTime';
import { useBattery } from '@/hooks/useBattery';
import { useLockscreenStore } from '@/store/modules/lockscreen';
import { useUserStore } from '@/store/modules/user';
import { aesEcb } from '@/utils/encrypt';
import { TABS_ROUTES } from '@/store/mutation-types';
export default defineComponent({
name: 'Lockscreen',
components: {
LockOutlined,
LoadingOutlined,
UserOutlined,
ArrowRightOutlined,
ApiOutlined,
WifiOutlined,
recharge,
},
setup() {
const useLockscreen = useLockscreenStore();
const userStore = useUserStore();
// 获取时间
const { month, day, hour, minute, second, week } = useTime();
const { online } = useOnline();
const router = useRouter();
const route = useRoute();
const { battery, batteryStatus, calcDischargingTime, calcChargingTime } = useBattery();
const userInfo: object = userStore.getUserInfo || {};
const username = userInfo['username'] || '';
const state = reactive({
showLogin: false,
loginLoading: false, // 正在登录
isLoginError: false, //密码错误
errorMsg: '密码错误',
loginParams: {
username: username || '',
password: '',
},
});
// 解锁登录
const onLockLogin = (value: boolean) => (state.showLogin = value);
// 登录
const onLogin = async () => {
if (!state.loginParams.password.trim()) {
return;
}
const params = {
isLock: true,
username: state.loginParams.username,
password: aesEcb.encrypt(state.loginParams.password),
};
state.loginLoading = true;
const { code, message } = await userStore.login(params);
if (code === ResultEnum.SUCCESS) {
onLockLogin(false);
useLockscreen.setLock(false);
window.location.reload();
} else {
state.errorMsg = message;
state.isLoginError = true;
}
state.loginLoading = false;
};
//重新登录
const goLogin = () => {
onLockLogin(false);
useLockscreen.setLock(false);
userStore.logout().then(() => {
// 移除标签页
localStorage.removeItem(TABS_ROUTES);
router
.replace({
name: 'Login',
query: {
redirect: route.fullPath,
},
})
.finally(() => location.reload());
});
};
return {
...toRefs(state),
online,
month,
day,
hour,
minute,
second,
week,
battery,
batteryStatus,
calcDischargingTime,
calcChargingTime,
onLockLogin,
onLogin,
goLogin,
};
},
});
</script>
<style lang="less" scoped>
.lockscreen {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
background: #000;
color: white;
overflow: hidden;
z-index: 9999;
&.onLockLogin {
background-color: rgba(25, 28, 34, 0.88);
backdrop-filter: blur(7px);
}
.login-box {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
> * {
margin-bottom: 14px;
}
.username {
font-size: 30px;
}
}
.lock-box {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 34px;
z-index: 100;
.tips {
color: white;
cursor: text;
}
.lock {
display: flex;
justify-content: center;
.lock-icon {
cursor: pointer;
.anticon-unlock {
display: none;
}
&:hover .anticon-unlock {
display: initial;
}
&:hover .anticon-lock {
display: none;
}
}
}
}
.local-time {
position: absolute;
bottom: 60px;
left: 60px;
font-family: helvetica;
.time {
font-size: 70px;
}
.date {
font-size: 40px;
}
}
.computer-status {
position: absolute;
bottom: 60px;
right: 60px;
font-size: 24px;
> * {
margin-left: 14px;
}
.network {
position: relative;
&.offline::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 28px;
transform: translate(-50%, -50%) rotate(45deg);
background-color: red;
z-index: 10;
}
}
}
}
</style>
web/src/components/Lockscreen/Recharge.vue
-164
View File
@@ -1,164 +0,0 @@
<template>
<div class="container">
<div class="number">{{ battery.level }}%</div>
<div class="contrast">
<div class="circle"></div>
<ul class="bubbles">
<li v-for="i in 15" :key="i"></li>
</ul>
</div>
<div class="charging">
<div>{{ batteryStatus }}</div>
<div v-show="Number.isFinite(battery.dischargingTime) && battery.dischargingTime != 0">
剩余可使用时间：{{ calcDischargingTime }}
</div>
<span v-show="Number.isFinite(battery.chargingTime) && battery.chargingTime != 0">
距离电池充满需要：{{ calcChargingTime }}
</span>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'HuaweiCharge',
// props: ['batteryStatus', 'battery', 'calcDischargingTime'],
props: {
battery: {
// 电池对象
type: Object,
default: () => ({}),
},
calcDischargingTime: {
// 电池剩余时间可用时间
type: String,
default: '',
},
calcChargingTime: {
type: String,
default: '',
},
batteryStatus: {
// 电池状态
type: String,
validator: (val: string) => ['充电中', '已充满', '已断开电源'].includes(val),
},
},
});
</script>
<style lang="less" scoped>
.container {
position: absolute;
bottom: 20vh;
left: 50vw;
width: 300px;
height: 500px;
transform: translateX(-50%);
.number {
position: absolute;
top: 20%;
z-index: 10;
width: 300px;
font-size: 32px;
color: #fff;
text-align: center;
}
.contrast {
width: 300px;
height: 400px;
overflow: hidden;
background-color: #000;
filter: contrast(15) hue-rotate(0);
animation: hueRotate 10s infinite linear;
.circle {
position: relative;
width: 300px;
height: 300px;
filter: blur(8px);
box-sizing: border-box;
&::after {
position: absolute;
top: 40%;
left: 50%;
width: 200px;
height: 200px;
background-color: #00ff6f;
border-radius: 42% 38% 62% 49% / 45%;
content: '';
transform: translate(-50%, -50%) rotate(0);
animation: rotate 10s infinite linear;
}
&::before {
position: absolute;
top: 40%;
left: 50%;
z-index: 10;
width: 176px;
height: 176px;
background-color: #000;
border-radius: 50%;
content: '';
transform: translate(-50%, -50%);
}
}
.bubbles {
position: absolute;
bottom: 0;
left: 50%;
width: 100px;
height: 40px;
background-color: #00ff6f;
border-radius: 100px 100px 0 0;
filter: blur(5px);
transform: translate(-50%, 0);
li {
position: absolute;
background: #00ff6f;
border-radius: 50%;
}
}
}
.charging {
font-size: 20px;
text-align: center;
}
}
@keyframes rotate {
50% {
border-radius: 45% / 42% 38% 58% 49%;
}
100% {
transform: translate(-50%, -50%) rotate(720deg);
}
}
@keyframes moveToTop {
90% {
opacity: 1;
}
100% {
opacity: 0.1;
transform: translate(-50%, -180px);
}
}
@keyframes hueRotate {
100% {
filter: contrast(15) hue-rotate(360deg);
}
}
</style>
web/src/components/Lockscreen/index.ts
-3
View File
@@ -1,3 +0,0 @@
import LockScreen from './Lockscreen.vue';
export { LockScreen };
web/src/layout/components/Header/index.vue
-9
View File
@@ -216,7 +216,6 @@
} from 'naive-ui'; } from 'naive-ui';
import { TABS_ROUTES } from '@/store/mutation-types'; import { TABS_ROUTES } from '@/store/mutation-types';
import { useUserStore } from '@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
import { useLockscreenStore } from '@/store/modules/lockscreen';
import ProjectSetting from './ProjectSetting.vue'; import ProjectSetting from './ProjectSetting.vue';
import { AsideMenu } from '@/layout/components/Menu'; import { AsideMenu } from '@/layout/components/Menu';
import { useProjectSetting } from '@/hooks/setting/useProjectSetting'; import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
@@ -249,7 +248,6 @@
const i18nStore = useI18nStore(); const i18nStore = useI18nStore();
const userStore = useUserStore(); const userStore = useUserStore();
const notificationStore = notificationStoreWidthOut(); const notificationStore = notificationStoreWidthOut();
const useLockscreen = useLockscreenStore();
const message = useMessage(); const message = useMessage();
const dialog = useDialog(); const dialog = useDialog();
const { const {
@@ -396,13 +394,6 @@
icon: 'BellOutlined', icon: 'BellOutlined',
tips: '我的消息', tips: '我的消息',
}, },
{
icon: 'LockOutlined',
tips: '锁屏',
eventObject: {
click: () => useLockscreen.setLock(true),
},
},
]; ];
function renderCustomHeader() { function renderCustomHeader() {
web/src/store/modules/index.ts
-3
View File
@@ -14,8 +14,6 @@ import user from './user';
// @ts-ignore // @ts-ignore
import tabsView from './tabs-view'; import tabsView from './tabs-view';
// @ts-ignore // @ts-ignore
import lockscreen from './lockscreen';
// @ts-ignore
import dict from './dict'; import dict from './dict';
// @ts-ignore // @ts-ignore
import i18n from './i18n'; import i18n from './i18n';
@@ -24,7 +22,6 @@ export default {
asyncRoute, asyncRoute,
user, user,
tabsView, tabsView,
lockscreen,
dict, dict,
i18n, i18n,
}; };
web/src/store/modules/lockscreen.ts
-31
View File
@@ -1,31 +0,0 @@
import { defineStore } from 'pinia';
import { IS_LOCKSCREEN } from '@/store/mutation-types';
import { storage } from '@/utils/Storage';
// 长时间不操作默认锁屏时间
const initTime = 60 * 60;
const isLock = storage.get(IS_LOCKSCREEN, false);
export type ILockscreenState = {
isLock: boolean; // 是否锁屏
lockTime: number;
};
export const useLockscreenStore = defineStore({
id: 'app-lockscreen',
state: (): ILockscreenState => ({
isLock: isLock === true, // 是否锁屏
lockTime: isLock == 'true' ? initTime : 0,
}),
getters: {},
actions: {
setLock(payload) {
this.isLock = payload;
storage.set(IS_LOCKSCREEN, this.isLock);
},
setLockTime(payload = initTime) {
this.lockTime = payload;
},
},
});
web/src/store/modules/user.ts
-2
View File
@@ -7,7 +7,6 @@ import {
CURRENT_DICT, CURRENT_DICT,
CURRENT_LOGIN_CONFIG, CURRENT_LOGIN_CONFIG,
CURRENT_USER, CURRENT_USER,
IS_LOCKSCREEN,
} from '@/store/mutation-types'; } from '@/store/mutation-types';
import { ResultEnum } from '@/enums/httpEnum'; import { ResultEnum } from '@/enums/httpEnum';
import { import {
@@ -177,7 +176,6 @@ export const useUserStore = defineStore({
const ex = 30 * 24 * 60 * 60 * 1000; const ex = 30 * 24 * 60 * 60 * 1000;
storage.set(ACCESS_TOKEN, data.token, ex); storage.set(ACCESS_TOKEN, data.token, ex);
storage.set(CURRENT_USER, data, ex); storage.set(CURRENT_USER, data, ex);
storage.set(IS_LOCKSCREEN, false);
this.setToken(data.token); this.setToken(data.token);
this.setUserInfo(data); this.setUserInfo(data);
} }
web/src/store/mutation-types.ts
-1
View File
@@ -2,7 +2,6 @@ export const ACCESS_TOKEN = 'ACCESS-TOKEN'; // 用户token
export const CURRENT_USER = 'CURRENT-USER'; // 当前用户信息 export const CURRENT_USER = 'CURRENT-USER'; // 当前用户信息
export const CURRENT_CONFIG = 'CURRENT-CONFIG'; // 当前基础配置 export const CURRENT_CONFIG = 'CURRENT-CONFIG'; // 当前基础配置
export const CURRENT_LOGIN_CONFIG = 'CURRENT-LOGIN-CONFIG'; // 当前登录配置 export const CURRENT_LOGIN_CONFIG = 'CURRENT-LOGIN-CONFIG'; // 当前登录配置
export const IS_LOCKSCREEN = 'IS-LOCKSCREEN'; // 是否锁屏
export const TABS_ROUTES = 'TABS-ROUTES'; // 标签页 export const TABS_ROUTES = 'TABS-ROUTES'; // 标签页
export const CURRENT_DICT = 'CURRENT-DICT'; // 当前用户字典配置 export const CURRENT_DICT = 'CURRENT-DICT'; // 当前用户字典配置
export const CurrentLocale = 'Current-Locale'; // 当前语言 export const CurrentLocale = 'Current-Locale'; // 当前语言
web/src/store/types.ts
-2
View File
@@ -1,6 +1,5 @@
import { IAsyncRouteState } from '@/store/modules/asyncRoute'; import { IAsyncRouteState } from '@/store/modules/asyncRoute';
import { IUserState } from '@/store/modules/user'; import { IUserState } from '@/store/modules/user';
import { ILockscreenState } from '@/store/modules/lockscreen';
import { ITabsViewState } from '@/store/modules/tabsView'; import { ITabsViewState } from '@/store/modules/tabsView';
import { INotificationStore } from '@/store/modules/notification'; import { INotificationStore } from '@/store/modules/notification';
import { IDictState } from '@/store/modules/dict'; import { IDictState } from '@/store/modules/dict';
@@ -8,7 +7,6 @@ import { IDictState } from '@/store/modules/dict';
export interface IStore { export interface IStore {
asyncRoute: IAsyncRouteState; asyncRoute: IAsyncRouteState;
user: IUserState; user: IUserState;
lockscreen: ILockscreenState;
tabsView: ITabsViewState; tabsView: ITabsViewState;
dict: IDictState; dict: IDictState;
notification: INotificationStore; notification: INotificationStore;