hs-admin-ui 1.0.0 → 1.0.2

package/src/layout/lockScreen/index.vue

@@ -1,352 +0,0 @@
-<template>
-	<div v-show="state.isShowLockScreen">
-		<div class="layout-lock-screen-mask"></div>
-		<div class="layout-lock-screen-img" :class="{ 'layout-lock-screen-filter': state.isShowLoockLogin }"></div>
-		<div class="layout-lock-screen">
-			<div
-				class="layout-lock-screen-date"
-				ref="layoutLockScreenDateRef"
-				@mousedown="onDownPc"
-				@mousemove="onMovePc"
-				@mouseup="onEnd"
-				@touchstart.stop="onDownApp"
-				@touchmove.stop="onMoveApp"
-				@touchend.stop="onEnd"
-			>
-				<div class="layout-lock-screen-date-box">
-					<div class="layout-lock-screen-date-box-time">
-						{{ state.time.hm }}<span class="layout-lock-screen-date-box-minutes">{{ state.time.s }}</span>
-					</div>
-					<div class="layout-lock-screen-date-box-info">{{ state.time.mdq }}</div>
-				</div>
-				<div class="layout-lock-screen-date-top">
-					<SvgIcon name="ele-Top" />
-					<div class="layout-lock-screen-date-top-text">上滑解锁</div>
-				</div>
-			</div>
-			<transition name="el-zoom-in-center">
-				<div v-show="state.isShowLoockLogin" class="layout-lock-screen-login">
-					<div class="layout-lock-screen-login-box">
-						<div class="layout-lock-screen-login-box-img">
-							<img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
-						</div>
-						<div class="layout-lock-screen-login-box-name">Administrator</div>
-						<div class="layout-lock-screen-login-box-value">
-							<el-input
-								placeholder="请输入密码"
-								ref="layoutLockScreenInputRef"
-								v-model="state.lockScreenPassword"
-								@keyup.enter.native.stop="onLockScreenSubmit()"
-							>
-								<template #append>
-									<el-button @click="onLockScreenSubmit">
-										<el-icon class="el-input__icon">
-											<ele-Right />
-										</el-icon>
-									</el-button>
-								</template>
-							</el-input>
-						</div>
-					</div>
-					<div class="layout-lock-screen-login-icon">
-						<SvgIcon name="ele-Microphone" :size="20" />
-						<SvgIcon name="ele-AlarmClock" :size="20" />
-						<SvgIcon name="ele-SwitchButton" :size="20" />
-					</div>
-				</div>
-			</transition>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts" name="layoutLockScreen">
-import { nextTick, onMounted, reactive, ref, onUnmounted } from 'vue';
-import { formatDate } from '/@/utils/formatTime';
-import { systemStore } from '/@/utils/storage';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-
-// 定义变量内容
-const layoutLockScreenDateRef = ref<HtmlType>();
-const layoutLockScreenInputRef = ref();
-const storesThemeConfig = useThemeConfig();
-const { themeConfig } = storeToRefs(storesThemeConfig);
-const state = reactive({
-	transparency: 1,
-	downClientY: 0,
-	moveDifference: 0,
-	isShowLoockLogin: false,
-	isFlags: false,
-	querySelectorEl: '' as HtmlType,
-	time: {
-		hm: '',
-		s: '',
-		mdq: '',
-	},
-	setIntervalTime: 0,
-	isShowLockScreen: false,
-	isShowLockScreenIntervalTime: 0,
-	lockScreenPassword: '',
-});
-
-// 鼠标按下 pc
-const onDownPc = (down: MouseEvent) => {
-	state.isFlags = true;
-	state.downClientY = down.clientY;
-};
-// 鼠标按下 app
-const onDownApp = (down: TouchEvent) => {
-	state.isFlags = true;
-	state.downClientY = down.touches[0].clientY;
-};
-// 鼠标移动 pc
-const onMovePc = (move: MouseEvent) => {
-	state.moveDifference = move.clientY - state.downClientY;
-	onMove();
-};
-// 鼠标移动 app
-const onMoveApp = (move: TouchEvent) => {
-	state.moveDifference = move.touches[0].clientY - state.downClientY;
-	onMove();
-};
-// 鼠标移动事件
-function onMove() {
-	if (state.isFlags) {
-		const el = <HTMLElement>state.querySelectorEl;
-		const opacitys = (state.transparency -= 1 / 200);
-		if (state.moveDifference >= 0) return false;
-		el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`);
-		if (state.moveDifference < -400) {
-			el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
-			state.moveDifference = -el.clientHeight;
-			setTimeout(() => {
-				el && el.parentNode?.removeChild(el);
-			}, 300);
-		}
-		if (state.moveDifference === -el.clientHeight) {
-			state.isShowLoockLogin = true;
-			layoutLockScreenInputRef.value.focus();
-		}
-	}
-}
-// 鼠标松开
-const onEnd = () => {
-	state.isFlags = false;
-	state.transparency = 1;
-	if (state.moveDifference >= -400) {
-		(<HTMLElement>state.querySelectorEl).setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
-	}
-};
-// 获取要拖拽的初始元素
-const initGetElement = () => {
-	nextTick(() => {
-		state.querySelectorEl = layoutLockScreenDateRef.value;
-	});
-};
-// 时间初始化
-const initTime = () => {
-	state.time.hm = formatDate(new Date(), 'HH:MM');
-	state.time.s = formatDate(new Date(), 'SS');
-	state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW');
-};
-// 时间初始化定时器
-const initSetTime = () => {
-	initTime();
-	state.setIntervalTime = window.setInterval(() => {
-		initTime();
-	}, 1000);
-};
-// 锁屏时间定时器
-const initLockScreen = () => {
-	if (themeConfig.value.isLockScreen) {
-		state.isShowLockScreenIntervalTime = window.setInterval(async () => {
-			if (themeConfig.value.lockScreenTime <= 1) {
-				state.isShowLockScreen = true;
-				await setLocalThemeConfig();
-				return false;
-			}
-			themeConfig.value.lockScreenTime--;
-		}, 1000);
-	} else {
-		clearInterval(state.isShowLockScreenIntervalTime);
-	}
-};
-// 存储布局配置
-async function setLocalThemeConfig() {
-	themeConfig.value.isDrawer = false;
-	await systemStore.set('themeConfig', themeConfig.value);
-}
-// 密码输入点击事件
-async function onLockScreenSubmit() {
-	themeConfig.value.isLockScreen = false;
-	themeConfig.value.lockScreenTime = 30;
-	await setLocalThemeConfig();
-}
-// 页面加载时
-onMounted(() => {
-	initGetElement();
-	initSetTime();
-	initLockScreen();
-});
-// 页面卸载时
-onUnmounted(() => {
-	window.clearInterval(state.setIntervalTime);
-	window.clearInterval(state.isShowLockScreenIntervalTime);
-});
-</script>
-
-<style scoped lang="scss">
-.layout-lock-screen-fixed {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-.layout-lock-screen-filter {
-	filter: blur(1px);
-}
-.layout-lock-screen-mask {
-	background: var(--el-color-white);
-	@extend .layout-lock-screen-fixed;
-	z-index: 9999990;
-}
-.layout-lock-screen-img {
-	@extend .layout-lock-screen-fixed;
-	background-image: url('https://i.hd-r.cn/e4a19d84364f185266666765ac21a5db.jpg');
-	background-size: 100% 100%;
-	z-index: 9999991;
-}
-.layout-lock-screen {
-	@extend .layout-lock-screen-fixed;
-	z-index: 9999992;
-	&-date {
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		color: var(--el-color-white);
-		z-index: 9999993;
-		user-select: none;
-		&-box {
-			position: absolute;
-			left: 30px;
-			bottom: 50px;
-			&-time {
-				font-size: 100px;
-				color: var(--el-color-white);
-			}
-			&-info {
-				font-size: 40px;
-				color: var(--el-color-white);
-			}
-			&-minutes {
-				font-size: 16px;
-			}
-		}
-		&-top {
-			width: 40px;
-			height: 40px;
-			line-height: 40px;
-			border-radius: 100%;
-			border: 1px solid var(--el-border-color-light, #ebeef5);
-			background: rgba(255, 255, 255, 0.1);
-			color: var(--el-color-white);
-			opacity: 0.8;
-			position: absolute;
-			right: 30px;
-			bottom: 50px;
-			text-align: center;
-			overflow: hidden;
-			transition: all 0.3s ease;
-			i {
-				transition: all 0.3s ease;
-			}
-			&-text {
-				opacity: 0;
-				position: absolute;
-				top: 150%;
-				font-size: 12px;
-				color: var(--el-color-white);
-				left: 50%;
-				line-height: 1.2;
-				transform: translate(-50%, -50%);
-				transition: all 0.3s ease;
-				width: 35px;
-			}
-			&:hover {
-				border: 1px solid rgba(255, 255, 255, 0.5);
-				background: rgba(255, 255, 255, 0.2);
-				box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.5);
-				color: var(--el-color-white);
-				opacity: 1;
-				transition: all 0.3s ease;
-				i {
-					transform: translateY(-40px);
-					transition: all 0.3s ease;
-				}
-				.layout-lock-screen-date-top-text {
-					opacity: 1;
-					top: 50%;
-					transition: all 0.3s ease;
-				}
-			}
-		}
-	}
-	&-login {
-		position: relative;
-		z-index: 9999994;
-		width: 100%;
-		height: 100%;
-		left: 0;
-		top: 0;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		color: var(--el-color-white);
-		&-box {
-			text-align: center;
-			margin: auto;
-			&-img {
-				width: 180px;
-				height: 180px;
-				margin: auto;
-				img {
-					width: 100%;
-					height: 100%;
-					border-radius: 100%;
-				}
-			}
-			&-name {
-				font-size: 26px;
-				margin: 15px 0 30px;
-			}
-		}
-		&-icon {
-			position: absolute;
-			right: 30px;
-			bottom: 30px;
-			i {
-				font-size: 20px;
-				margin-left: 15px;
-				cursor: pointer;
-				opacity: 0.8;
-				&:hover {
-					opacity: 1;
-				}
-			}
-		}
-	}
-}
-:deep(.el-input-group__append) {
-	background: var(--el-color-white);
-	padding: 0px 15px;
-}
-:deep(.el-input__inner) {
-	border-right-color: var(--el-border-color-extra-light);
-	&:hover {
-		border-color: var(--el-border-color-extra-light);
-	}
-}
-</style>

package/src/layout/logo/index.vue

@@ -1,75 +0,0 @@
-<template>
-	<div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
-		<img :src="logoMini" class="layout-logo-medium-img" />
-		<span>{{ themeConfig.globalTitle }}</span>
-	</div>
-	<div class="layout-logo-size" v-else @click="onThemeConfigChange">
-		<img :src="logoMini" class="layout-logo-size-img" />
-	</div>
-</template>
-
-<script setup lang="ts" name="layoutLogo">
-import { computed } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import logoMini from '/@/assets/logo-mini.svg';
-
-// 定义变量内容
-const storesThemeConfig = useThemeConfig();
-const { themeConfig } = storeToRefs(storesThemeConfig);
-
-// 设置 logo 的显示。classic 经典布局默认显示 logo
-const setShowLogo = computed(() => {
-	let { isCollapse, layout } = themeConfig.value;
-	return !isCollapse || layout === 'classic' || document.body.clientWidth < 1000;
-});
-// logo 点击实现菜单展开/收起
-const onThemeConfigChange = () => {
-	if (themeConfig.value.layout === 'transverse') return false;
-	themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
-};
-</script>
-
-<style scoped lang="scss">
-.layout-logo {
-	width: 220px;
-	height: 50px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
-	color: var(--el-color-primary);
-	font-size: 16px;
-	cursor: pointer;
-	animation: logoAnimation 0.3s ease-in-out;
-	span {
-		white-space: nowrap;
-		display: inline-block;
-	}
-	&:hover {
-		span {
-			color: var(--color-primary-light-2);
-		}
-	}
-	&-medium-img {
-		width: 20px;
-		margin-right: 5px;
-	}
-}
-.layout-logo-size {
-	width: 100%;
-	height: 50px;
-	display: flex;
-	cursor: pointer;
-	animation: logoAnimation 0.3s ease-in-out;
-	&-img {
-		width: 20px;
-		margin: auto;
-	}
-	&:hover {
-		img {
-			animation: logoAnimation 0.3s ease-in-out;
-		}
-	}
-}
-</style>

package/src/layout/main/classic.vue

@@ -1,73 +0,0 @@
-<template>
-	<el-container class="layout-container flex-center">
-		<LayoutHeader />
-		<el-container class="layout-mian-height-50">
-			<LayoutAside />
-			<div class="flex-center layout-backtop">
-				<LayoutTagsView v-if="isTagsview" />
-				<LayoutMain ref="layoutMainRef" />
-			</div>
-		</el-container>
-	</el-container>
-</template>
-
-<script setup lang="ts" name="layoutClassic">
-import { defineAsyncComponent, computed, ref, watch, nextTick, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-
-// 引入组件
-const LayoutAside = defineAsyncComponent(() => import('/@/layout/component/aside.vue'));
-const LayoutHeader = defineAsyncComponent(() => import('/@/layout/component/header.vue'));
-const LayoutMain = defineAsyncComponent(() => import('/@/layout/component/main.vue'));
-const LayoutTagsView = defineAsyncComponent(() => import('/@/layout/navBars/tagsView/tagsView.vue'));
-
-// 定义变量内容
-const layoutMainRef = ref<InstanceType<typeof LayoutMain>>();
-const route = useRoute();
-const storesThemeConfig = useThemeConfig();
-const { themeConfig } = storeToRefs(storesThemeConfig);
-
-// 判断是否显示 tasgview
-const isTagsview = computed(() => {
-	return themeConfig.value.isTagsview;
-});
-// 重置滚动条高度，更新子级 scrollbar
-const updateScrollbar = () => {
-	layoutMainRef.value?.layoutMainScrollbarRef.update();
-};
-// 重置滚动条高度，由于组件是异步引入的
-const initScrollBarHeight = () => {
-	nextTick(() => {
-		setTimeout(() => {
-			updateScrollbar();
-			// '!' not null 断言操作符，不执行运行时检查
-			if (layoutMainRef.value) layoutMainRef.value!.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
-		}, 500);
-	});
-};
-// 页面加载时
-onMounted(() => {
-	initScrollBarHeight();
-});
-// 监听路由的变化，切换界面时，滚动条置顶
-watch(
-	() => route.path,
-	() => {
-		initScrollBarHeight();
-	}
-);
-// 监听 themeConfig  isTagsview 配置文件的变化，更新菜单 el-scrollbar 的高度
-watch(
-	() => themeConfig.value.isTagsview,
-	() => {
-		nextTick(() => {
-			updateScrollbar();
-		});
-	},
-	{
-		deep: true,
-	}
-);
-</script>

package/src/layout/main/columns.vue

@@ -1,73 +0,0 @@
-<template>
-	<el-container class="layout-container">
-		<ColumnsAside />
-		<el-container class="layout-columns-warp layout-container-view h100">
-			<LayoutAside />
-			<el-scrollbar ref="layoutScrollbarRef" class="layout-backtop">
-				<LayoutHeader />
-				<LayoutMain ref="layoutMainRef" />
-			</el-scrollbar>
-		</el-container>
-	</el-container>
-</template>
-
-<script setup lang="ts" name="layoutColumns">
-import { defineAsyncComponent, watch, onMounted, nextTick, ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-
-// 引入组件
-const LayoutAside = defineAsyncComponent(() => import('/@/layout/component/aside.vue'));
-const LayoutHeader = defineAsyncComponent(() => import('/@/layout/component/header.vue'));
-const LayoutMain = defineAsyncComponent(() => import('/@/layout/component/main.vue'));
-const ColumnsAside = defineAsyncComponent(() => import('/@/layout/component/columnsAside.vue'));
-
-// 定义变量内容
-const layoutScrollbarRef = ref<RefType>('');
-const layoutMainRef = ref<InstanceType<typeof LayoutMain>>();
-const route = useRoute();
-const storesThemeConfig = useThemeConfig();
-const { themeConfig } = storeToRefs(storesThemeConfig);
-
-// 重置滚动条高度
-const updateScrollbar = () => {
-	// 更新父级 scrollbar
-	layoutScrollbarRef.value.update();
-	// 更新子级 scrollbar
-	layoutMainRef.value && layoutMainRef.value!.layoutMainScrollbarRef.update();
-};
-// 重置滚动条高度，由于组件是异步引入的
-const initScrollBarHeight = () => {
-	nextTick(() => {
-		setTimeout(() => {
-			updateScrollbar();
-			layoutScrollbarRef.value.wrapRef.scrollTop = 0;
-			layoutMainRef.value!.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
-		}, 500);
-	});
-};
-// 页面加载时
-onMounted(() => {
-	initScrollBarHeight();
-});
-// 监听路由的变化，切换界面时，滚动条置顶
-watch(
-	() => route.path,
-	() => {
-		initScrollBarHeight();
-	}
-);
-// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
-watch(
-	() => [themeConfig.value.isTagsview, themeConfig.value.isFixedHeader],
-	() => {
-		nextTick(() => {
-			updateScrollbar();
-		});
-	},
-	{
-		deep: true,
-	}
-);
-</script>

package/src/layout/main/defaults.vue

@@ -1,73 +0,0 @@
-<template>
-	<el-container class="layout-container">
-		<LayoutAside />
-		<el-container class="layout-container-view h100">
-			<el-scrollbar ref="layoutScrollbarRef" class="layout-backtop">
-				<LayoutHeader />
-				<LayoutMain ref="layoutMainRef" />
-			</el-scrollbar>
-		</el-container>
-	</el-container>
-</template>
-
-<script setup lang="ts" name="layoutDefaults">
-import { defineAsyncComponent, watch, onMounted, nextTick, ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import { NextLoading } from '/@/utils/loading';
-
-// 引入组件
-const LayoutAside = defineAsyncComponent(() => import('/@/layout/component/aside.vue'));
-const LayoutHeader = defineAsyncComponent(() => import('/@/layout/component/header.vue'));
-const LayoutMain = defineAsyncComponent(() => import('/@/layout/component/main.vue'));
-
-// 定义变量内容
-const layoutScrollbarRef = ref<RefType>('');
-const layoutMainRef = ref<InstanceType<typeof LayoutMain>>();
-const route = useRoute();
-const storesThemeConfig = useThemeConfig();
-const { themeConfig } = storeToRefs(storesThemeConfig);
-
-// 重置滚动条高度
-const updateScrollbar = () => {
-	// 更新父级 scrollbar
-	layoutScrollbarRef.value.update();
-	// 更新子级 scrollbar
-	layoutMainRef.value!.layoutMainScrollbarRef.update();
-};
-// 重置滚动条高度，由于组件是异步引入的
-const initScrollBarHeight = () => {
-	nextTick(() => {
-		setTimeout(() => {
-			updateScrollbar();
-			layoutScrollbarRef.value.wrapRef.scrollTop = 0;
-			layoutMainRef.value!.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
-		}, 500);
-	});
-};
-// 页面加载时
-onMounted(() => {
-	initScrollBarHeight();
-	NextLoading.done(600);
-});
-// 监听路由的变化，切换界面时，滚动条置顶
-watch(
-	() => route.path,
-	() => {
-		initScrollBarHeight();
-	}
-);
-// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
-watch(
-	() => [themeConfig.value.isTagsview, themeConfig.value.isFixedHeader],
-	() => {
-		nextTick(() => {
-			updateScrollbar();
-		});
-	},
-	{
-		deep: true,
-	}
-);
-</script>

package/src/layout/main/transverse.vue

@@ -1,60 +0,0 @@
-<template>
-	<el-container class="layout-container flex-center layout-backtop">
-		<LayoutHeader />
-		<LayoutMain ref="layoutMainRef" />
-	</el-container>
-</template>
-
-<script setup lang="ts" name="layoutTransverse">
-import { defineAsyncComponent, ref, watch, nextTick, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-
-// 引入组件
-const LayoutHeader = defineAsyncComponent(() => import('/@/layout/component/header.vue'));
-const LayoutMain = defineAsyncComponent(() => import('/@/layout/component/main.vue'));
-
-// 定义变量内容
-const layoutMainRef = ref<InstanceType<typeof LayoutMain>>();
-const storesThemeConfig = useThemeConfig();
-const { themeConfig } = storeToRefs(storesThemeConfig);
-const route = useRoute();
-
-// 重置滚动条高度，更新子级 scrollbar
-const updateScrollbar = () => {
-	layoutMainRef.value!.layoutMainScrollbarRef.update();
-};
-// 重置滚动条高度，由于组件是异步引入的
-const initScrollBarHeight = () => {
-	nextTick(() => {
-		setTimeout(() => {
-			updateScrollbar();
-			layoutMainRef.value!.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
-		}, 500);
-	});
-};
-// 页面加载时
-onMounted(() => {
-	initScrollBarHeight();
-});
-// 监听路由的变化，切换界面时，滚动条置顶
-watch(
-	() => route.path,
-	() => {
-		initScrollBarHeight();
-	}
-);
-// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
-watch(
-	() => themeConfig.value.isTagsview,
-	() => {
-		nextTick(() => {
-			updateScrollbar();
-		});
-	},
-	{
-		deep: true,
-	}
-);
-</script>