hs-admin-ui 1.0.0 → 1.0.2

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

@@ -1,172 +0,0 @@
-<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

@@ -1,72 +0,0 @@
-<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

@@ -1,63 +0,0 @@
-<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

@@ -1,254 +0,0 @@
-<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

@@ -1,48 +0,0 @@
-<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

@@ -1,50 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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,
-	};
-}