hs-admin-ui 1.0.0

package/src/views/login/component/account.vue

@@ -0,0 +1,172 @@
+<template>
+	<el-form size="large" class="login-content-form">
+		<el-form-item class="login-animation1">
+			<el-input text placeholder="用户名 admin 或不输均为 common" v-model="state.ruleForm.userName" clearable autocomplete="off">
+				<template #prefix>
+					<el-icon class="el-input__icon"><ele-User /></el-icon>
+				</template>
+			</el-input>
+		</el-form-item>
+		<el-form-item class="login-animation2">
+			<el-input :type="state.isShowPassword ? 'text' : 'password'" placeholder="密码：123456" v-model="state.ruleForm.password" autocomplete="off">
+				<template #prefix>
+					<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
+				</template>
+				<template #suffix>
+					<i
+						class="iconfont el-input__icon login-content-password"
+						:class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
+						@click="state.isShowPassword = !state.isShowPassword"
+					>
+					</i>
+				</template>
+			</el-input>
+		</el-form-item>
+		<el-form-item class="login-animation3">
+			<el-col :span="15">
+				<el-input text maxlength="4" placeholder="请输入验证码" v-model="state.ruleForm.code" clearable autocomplete="off" @keydown.enter="onSignIn">
+					<template #prefix>
+						<el-icon class="el-input__icon"><ele-Position /></el-icon>
+					</template>
+				</el-input>
+			</el-col>
+			<el-col :span="1"></el-col>
+			<el-col :span="8">
+				<!-- <el-text class="login-content-code">1234</el-text> -->
+				<img
+					:src="srcCod"
+					alt="加载失败"
+					style="width: 130px; height: 30px; position: relative; bottom: 0px"
+					@click="srcCodFn"
+					class="cursor-pointer"
+				/>
+			</el-col>
+		</el-form-item>
+		<el-form-item class="login-animation4">
+			<el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="state.loading.signIn">
+				<span>登 录</span>
+			</el-button>
+		</el-form-item>
+	</el-form>
+</template>
+
+<script setup lang="ts" name="loginAccount">
+import { reactive, computed, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import { formatAxis } from '/@/utils/formatTime';
+import { NextLoading } from '/@/utils/loading';
+import { Md5 } from 'ts-md5';
+import { useLoginController } from '/@/api/loginController/index';
+import { useUserInfo } from '/@/stores/userInfo';
+
+const userInfo = useUserInfo();
+const login = useLoginController();
+const srcCod = ref('');
+const srcCodFn = () => {
+	srcCod.value = '/scmp-web/validateCode?date=' + new Date().getTime();
+};
+srcCodFn();
+const route = useRoute();
+const router = useRouter();
+const state = reactive({
+	isShowPassword: false,
+	ruleForm: {
+		userName: 'admin',
+		password: '123456',
+		code: '',
+	},
+	loading: {
+		signIn: false,
+	},
+});
+
+// 时间获取
+const currentTime = computed(() => {
+	return formatAxis(new Date());
+});
+
+// 登录成功后的跳转
+const signInSuccess = (isNoPower: boolean | undefined) => {
+	if (isNoPower) {
+		ElMessage.warning('抱歉，您没有登录权限');
+		userInfo.clear();
+	} else {
+		// 初始化登录成功时间问候语
+		let currentTimeInfo = currentTime.value;
+		// 登录成功，跳到转首页
+		// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
+		if (route.query?.redirect) {
+			router.push({
+				path: <string>route.query?.redirect,
+				query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
+			});
+		} else {
+			// 跳转到首页
+			router.push({ path: '/' });
+		}
+		// 登录成功提示
+		const signInText = '欢迎回来！';
+		ElMessage.success(`${currentTimeInfo}，${signInText}`);
+		// 添加 loading，防止第一次进入界面时出现短暂空白
+		NextLoading.start();
+	}
+};
+// 登录
+const onSignIn = async () => {
+	state.loading.signIn = true;
+	login
+		.postAjaxLogin({
+			account: state.ruleForm.userName,
+			pwd: Md5.hashStr(state.ruleForm.password),
+			code: state.ruleForm.code,
+		})
+		.then(async (res) => {
+			if (res.code === 1) {
+				await userInfo.setUserInfo(res.data);
+				signInSuccess(false);
+			}
+			state.loading.signIn = false;
+		})
+		.catch(() => {
+			state.loading.signIn = false;
+			srcCodFn();
+			signInSuccess(true);
+		});
+};
+</script>
+
+<style scoped lang="scss">
+.login-content-form {
+	margin-top: 20px;
+	@for $i from 1 through 4 {
+		.login-animation#{$i} {
+			opacity: 0;
+			animation-name: error-num;
+			animation-duration: 0.5s;
+			animation-fill-mode: forwards;
+			animation-delay: calc($i/10) + s;
+		}
+	}
+	.login-content-password {
+		display: inline-block;
+		width: 20px;
+		cursor: pointer;
+		&:hover {
+			color: #909399;
+		}
+	}
+	.login-content-code {
+		width: 100%;
+		padding: 0;
+		font-weight: bold;
+		letter-spacing: 5px;
+	}
+	.login-content-submit {
+		width: 100%;
+		letter-spacing: 2px;
+		font-weight: 300;
+		margin-top: 15px;
+	}
+}
+</style>

package/src/views/login/component/mobile.vue

@@ -0,0 +1,72 @@
+<template>
+	<el-form size="large" class="login-content-form">
+		<el-form-item class="login-animation1">
+			<el-input text placeholder="请输入手机号" v-model="state.ruleForm.userName" clearable autocomplete="off">
+				<template #prefix>
+					<i class="iconfont icon-dianhua el-input__icon"></i>
+				</template>
+			</el-input>
+		</el-form-item>
+		<el-form-item class="login-animation2">
+			<el-col :span="15">
+				<el-input text maxlength="4" placeholder="请输入验证码" v-model="state.ruleForm.code" clearable autocomplete="off">
+					<template #prefix>
+						<el-icon class="el-input__icon"><ele-Position /></el-icon>
+					</template>
+				</el-input>
+			</el-col>
+			<el-col :span="1"></el-col>
+			<el-col :span="8">
+				<el-button class="login-content-code">获取验证码</el-button>
+			</el-col>
+		</el-form-item>
+		<el-form-item class="login-animation3">
+			<el-button round type="primary" class="login-content-submit">
+				<span>登 录</span>
+			</el-button>
+		</el-form-item>
+		<div class="font12 mt30 login-animation4 login-msg">
+			* 温馨提示：建议使用谷歌、Microsoft Edge，版本 79.0.1072.62 及以上浏览器，360浏览器请使用极速模式
+		</div>
+	</el-form>
+</template>
+
+<script setup lang="ts" name="loginMobile">
+import { reactive } from 'vue';
+
+// 定义变量内容
+const state = reactive({
+	ruleForm: {
+		userName: '',
+		code: '',
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.login-content-form {
+	margin-top: 20px;
+	@for $i from 1 through 4 {
+		.login-animation#{$i} {
+			opacity: 0;
+			animation-name: error-num;
+			animation-duration: 0.5s;
+			animation-fill-mode: forwards;
+			animation-delay: calc($i/10) + s;
+		}
+	}
+	.login-content-code {
+		width: 100%;
+		padding: 0;
+	}
+	.login-content-submit {
+		width: 100%;
+		letter-spacing: 2px;
+		font-weight: 300;
+		margin-top: 15px;
+	}
+	.login-msg {
+		color: var(--el-text-color-placeholder);
+	}
+}
+</style>

package/src/views/login/component/scan.vue

@@ -0,0 +1,63 @@
+<template>
+	<div class="login-scan-container">
+		<div ref="qrcodeRef"></div>
+		<div class="font12 mt20 login-msg">
+			<i class="iconfont icon-saoyisao mr5"></i>
+			<span>打开手机扫一扫，快速登录/注册</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="loginScan">
+import { ref, onMounted, nextTick } from 'vue';
+import QRCode from 'qrcodejs2-fixes';
+
+// 定义变量内容
+const qrcodeRef = ref<HTMLElement | null>(null);
+
+// 初始化生成二维码
+const initQrcode = () => {
+	nextTick(() => {
+		(<HTMLElement>qrcodeRef.value).innerHTML = '';
+		new QRCode(qrcodeRef.value, {
+			text: `https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi`,
+			width: 260,
+			height: 260,
+			colorDark: '#000000',
+			colorLight: '#ffffff',
+		});
+	});
+};
+// 页面加载时
+onMounted(() => {
+	initQrcode();
+});
+</script>
+
+<style scoped lang="scss">
+.login-scan-animation {
+	opacity: 0;
+	animation-name: error-num;
+	animation-duration: 0.5s;
+	animation-fill-mode: forwards;
+}
+.login-scan-container {
+	padding: 0 20px 20px;
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+	@extend .login-scan-animation;
+	animation-delay: 0.1s;
+	:deep(img) {
+		margin: auto;
+	}
+	.login-msg {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--el-text-color-placeholder);
+		@extend .login-scan-animation;
+		animation-delay: 0.2s;
+	}
+}
+</style>

package/src/views/login/index.vue

@@ -0,0 +1,254 @@
+<template>
+	<div class="login-container flex">
+		<div class="login-left">
+			<div class="login-left-logo">
+				<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" /> -->
+			</div>
+			<!-- <img :src="loginBg" class="login-left-waves" /> -->
+		</div>
+		<div class="login-right flex">
+			<div class="login-right-warp flex-margin">
+				<span class="login-right-warp-one"></span>
+				<span class="login-right-warp-two"></span>
+				<div class="login-right-warp-mian">
+					<div class="login-right-warp-main-title">{{ getThemeConfig.globalTitle }} 欢迎您！</div>
+					<div class="login-right-warp-main-form">
+						<div v-if="!state.isScan">
+							<el-tabs v-model="state.tabsActiveName">
+								<el-tab-pane label="账号密码登录" name="account">
+									<Account />
+								</el-tab-pane>
+								<!-- <el-tab-pane label="手机号登录" name="mobile">
+									<Mobile />
+								</el-tab-pane> -->
+							</el-tabs>
+						</div>
+						<Scan v-if="state.isScan" />
+						<!-- <div class="login-content-main-sacn" @click="state.isScan = !state.isScan">
+							<i class="iconfont" :class="state.isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
+							<div class="login-content-main-sacn-delta"></div>
+						</div> -->
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="loginIndex">
+import { defineAsyncComponent, onMounted, reactive, computed } from 'vue';
+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';
+
+// 引入组件
+const Account = defineAsyncComponent(() => import('/@/views/login/component/account.vue'));
+// const Mobile = defineAsyncComponent(() => import('/@/views/login/component/mobile.vue'));
+const Scan = defineAsyncComponent(() => import('/@/views/login/component/scan.vue'));
+
+// 定义变量内容
+const storesThemeConfig = useThemeConfig();
+const { themeConfig } = storeToRefs(storesThemeConfig);
+const state = reactive({
+	tabsActiveName: 'account',
+	isScan: false,
+});
+
+// 获取布局配置信息
+const getThemeConfig = computed(() => {
+	return themeConfig.value;
+});
+// 页面加载时
+onMounted(() => {
+	NextLoading.done();
+});
+</script>
+
+<style scoped lang="scss">
+.login-container {
+	height: 100%;
+	background: var(--el-color-white);
+	.login-left {
+		flex: 1;
+		position: relative;
+		background-color: rgba(211, 239, 255, 1);
+		margin-right: 100px;
+		.login-left-logo {
+			display: flex;
+			align-items: center;
+			position: absolute;
+			top: 50px;
+			left: 80px;
+			z-index: 1;
+			animation: logoAnimation 0.3s ease;
+			img {
+				width: 52px;
+				height: 52px;
+			}
+			.login-left-logo-text {
+				display: flex;
+				flex-direction: column;
+				span {
+					margin-left: 10px;
+					font-size: 28px;
+					color: #26a59a;
+				}
+				.login-left-logo-text-msg {
+					font-size: 12px;
+					color: #32a99e;
+				}
+			}
+		}
+		.login-left-img {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			width: 100%;
+			height: 52%;
+			img {
+				width: 100%;
+				height: 100%;
+				animation: error-num 0.6s ease;
+			}
+		}
+		.login-left-waves {
+			position: absolute;
+			top: 0;
+			right: -100px;
+		}
+	}
+	.login-right {
+		width: 700px;
+		.login-right-warp {
+			border: 1px solid var(--el-color-primary-light-3);
+			border-radius: 3px;
+			width: 500px;
+			height: 500px;
+			position: relative;
+			overflow: hidden;
+			background-color: var(--el-color-white);
+			.login-right-warp-one,
+			.login-right-warp-two {
+				position: absolute;
+				display: block;
+				width: inherit;
+				height: inherit;
+				&::before,
+				&::after {
+					content: '';
+					position: absolute;
+					z-index: 1;
+				}
+			}
+			.login-right-warp-one {
+				&::before {
+					filter: hue-rotate(0deg);
+					top: 0px;
+					left: 0;
+					width: 100%;
+					height: 3px;
+					background: linear-gradient(90deg, transparent, var(--el-color-primary));
+					animation: loginLeft 3s linear infinite;
+				}
+				&::after {
+					filter: hue-rotate(60deg);
+					top: -100%;
+					right: 2px;
+					width: 3px;
+					height: 100%;
+					background: linear-gradient(180deg, transparent, var(--el-color-primary));
+					animation: loginTop 3s linear infinite;
+					animation-delay: 0.7s;
+				}
+			}
+			.login-right-warp-two {
+				&::before {
+					filter: hue-rotate(120deg);
+					bottom: 2px;
+					right: -100%;
+					width: 100%;
+					height: 3px;
+					background: linear-gradient(270deg, transparent, var(--el-color-primary));
+					animation: loginRight 3s linear infinite;
+					animation-delay: 1.4s;
+				}
+				&::after {
+					filter: hue-rotate(300deg);
+					bottom: -100%;
+					left: 0px;
+					width: 3px;
+					height: 100%;
+					background: linear-gradient(360deg, transparent, var(--el-color-primary));
+					animation: loginBottom 3s linear infinite;
+					animation-delay: 2.1s;
+				}
+			}
+			.login-right-warp-mian {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+				.login-right-warp-main-title {
+					height: 130px;
+					line-height: 130px;
+					font-size: 27px;
+					text-align: center;
+					letter-spacing: 3px;
+					animation: logoAnimation 0.3s ease;
+					animation-delay: 0.3s;
+					color: var(--el-text-color-primary);
+				}
+				.login-right-warp-main-form {
+					flex: 1;
+					padding: 0 50px 50px;
+					.login-content-main-sacn {
+						position: absolute;
+						top: 0;
+						right: 0;
+						width: 50px;
+						height: 50px;
+						overflow: hidden;
+						cursor: pointer;
+						transition: all ease 0.3s;
+						color: var(--el-color-primary);
+						&-delta {
+							position: absolute;
+							width: 35px;
+							height: 70px;
+							z-index: 2;
+							top: 2px;
+							right: 21px;
+							background: var(--el-color-white);
+							transform: rotate(-45deg);
+						}
+						&:hover {
+							opacity: 1;
+							transition: all ease 0.3s;
+							color: var(--el-color-primary) !important;
+						}
+						i {
+							width: 47px;
+							height: 50px;
+							display: inline-block;
+							font-size: 48px;
+							position: absolute;
+							right: 1px;
+							top: 0px;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>

package/src/views/system/auth/index.vue

@@ -0,0 +1,48 @@
+<template>
+	<div class="system-menu-container layout-padding">
+		<div class="h-full bg-white flex flex-col p-4">
+			<hs-form size="small" class="grid grid-cols-4 gap-4">
+				<hs-form-item label="门店">
+					<hs-select v-model="configData.config_unique_id" placeholder="请选择" filterable clearable>
+						<hs-option label="Zone one" value="shanghai" />
+						<hs-option label="Zone two" value="beijing" />
+					</hs-select>
+				</hs-form-item>
+				<hs-form-item label="角色">
+					<hs-select v-model="configData.config_type" placeholder="请选择" filterable clearable>
+						<hs-option label="Zone one" value="shanghai" />
+						<hs-option label="Zone two" value="beijing" />
+					</hs-select>
+				</hs-form-item>
+				<div class="col-span-2 flex justify-end">
+					<hs-button type="primary">全局设置</hs-button>
+				</div>
+			</hs-form>
+			<main class="flex-1 flex">
+				<el-tree
+					ref="treeRef"
+					class="w-[200px] border-right-1"
+					:props="defaultProps"
+					:data="data"
+					show-checkbox
+					node-key="id"
+					:default-expanded-keys="[2, 3]"
+					:default-checked-keys="[5]"
+					@check-change="treeCheckChange"
+				/>
+				<section class="flex-1">表体内容区域</section>
+			</main>
+		</div>
+	</div>
+</template>
+<script lang="ts" setup name="authComponent">
+import { useAuth } from './useAuth';
+import { data } from './list';
+
+const { defaultProps, treeRef, configData, treeCheckChange } = useAuth();
+</script>
+<style scoped lang="scss">
+.el-tree {
+	--el-tree-node-content-height: 30px;
+}
+</style>

package/src/views/system/auth/list.ts

@@ -0,0 +1,50 @@
+export const data = [
+	{
+		id: 1,
+		label: 'Level one 1',
+		children: [
+			{
+				id: 4,
+				label: 'Level two 1-1',
+				children: [
+					{
+						id: 9,
+						label: 'Level three 1-1-1',
+					},
+					{
+						id: 10,
+						label: 'Level three 1-1-2',
+					},
+				],
+			},
+		],
+	},
+	{
+		id: 2,
+		label: 'Level one 2',
+		children: [
+			{
+				id: 5,
+				label: 'Level two 2-1',
+			},
+			{
+				id: 6,
+				label: 'Level two 2-2',
+			},
+		],
+	},
+	{
+		id: 3,
+		label: 'Level one 3',
+		children: [
+			{
+				id: 7,
+				label: 'Level two 3-1',
+			},
+			{
+				id: 8,
+				label: 'Level two 3-2',
+			},
+		],
+	},
+];

package/src/views/system/auth/useAuth.ts

@@ -0,0 +1,34 @@
+import { ref } from 'vue';
+import IAuthData from '/@/types/auth';
+import { ElTree } from 'element-plus';
+import type Node from 'element-plus/es/components/tree/src/model/node';
+
+export function useAuth() {
+	const defaultProps = {
+		children: 'children',
+		label: 'label',
+	};
+	const treeRef = ref<InstanceType<typeof ElTree>>();
+	const configData = ref<IAuthData.Auth>({
+		config_type: '',
+		config_unique_id: '',
+		btns: [],
+		tables: [],
+		form: [],
+	});
+
+	const setCheckedKeys = () => {
+		treeRef.value!.setCheckedKeys([3], false);
+	};
+
+	function treeCheckChange(data: any) {
+		console.log(data);
+	}
+
+	return {
+		treeRef,
+		defaultProps,
+		configData,
+		treeCheckChange,
+	};
+}