hs-admin-ui 1.0.8 → 1.0.9

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,67 +0,0 @@
-<template>
-	<div class="system-menu-container layout-padding">
-		<div class="h-full bg-white flex flex-col p-2">
-			<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 border-top-1">
-				<el-scrollbar style="width: 200px" class="border-right-1 h-full">
-					<hs-tree
-						style="width: 192px"
-						ref="treeRef"
-						highlight-current
-						show-checkbox
-						node-key="id"
-						empty-text="暂无数据"
-						:data="configList.menu"
-						@node-click="nodeClick"
-					>
-						<template #default="{ data }">
-							<bc-icon class="mr-1" :icon="data.meta.icon" />
-							<span>{{ data.meta.title }}</span>
-						</template>
-					</hs-tree>
-				</el-scrollbar>
-				<el-scrollbar class="flex-1 flex flex-col p-2">
-					<div class="grid grid-cols-2 gap-2">
-						<span class="border-1 h-10">字典项权限</span>
-						<span class="border-1 h-10">数据权限</span>
-					</div>
-					<div>
-						<hs-tabs v-model="activeName">
-							<hs-tab-pane label="表格" name="table">table</hs-tab-pane>
-							<hs-tab-pane label="表单" name="form">form</hs-tab-pane>
-						</hs-tabs>
-					</div>
-				</el-scrollbar>
-			</main>
-		</div>
-	</div>
-</template>
-<script lang="ts" setup name="authComponent">
-import { useAuth } from './useAuth';
-
-const { treeRef, configList, configData, activeName, nodeClick } = useAuth();
-</script>
-<style scoped lang="scss">
-.el-tree {
-	--el-tree-node-content-height: 30px;
-}
-:deep(.el-form-item--small) {
-	margin-bottom: 10px;
-}
-</style>

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

@@ -1,72 +0,0 @@
-import { ref, onMounted, reactive } from 'vue';
-import { IAuthData } from '/@/types';
-import { ElTree } from 'element-plus';
-import { useMenuController, type GetMenuList, useBusinessController, type GetBusinessFieldConfig } from '/@/api';
-import { getMenuTree } from './utils';
-import _ from 'lodash';
-
-export type ActiveName = 'menu' | 'table' | 'form';
-
-export interface ConfigList {
-	active: string;
-	menu: GetMenuList['data'];
-	form: GetBusinessFieldConfig['data'];
-	table: GetBusinessFieldConfig['data'];
-}
-
-export function useAuth() {
-	const treeRef = ref<Record<'getInstance', () => InstanceType<typeof ElTree>>>();
-	const configList = reactive<ConfigList>({
-		active: '',
-		menu: [],
-		table: [],
-		form: [],
-	});
-	const configData = ref<IAuthData.Auth>({
-		config_type: '',
-		config_unique_id: '',
-		btns: [],
-		tables: [],
-		form: [],
-	});
-	const menu = useMenuController();
-	const business = useBusinessController();
-
-	onMounted(() => {
-		getMneuList();
-	});
-
-	/** 获取菜单数据 */
-	function getMneuList() {
-		menu.getMenuList<GetMenuList>().then((res) => {
-			const { menu, menuIds } = getMenuTree(res.data);
-			configList.menu = menu;
-			treeRef.value!.getInstance().setCheckedKeys(menuIds, false);
-		});
-	}
-
-	/** 获取当前菜单所有配置信息 */
-	function nodeClick(data: any) {
-		if (!_.isEmpty(data.children)) return;
-		Promise.all(
-			['1', '2'].map((i) => {
-				return business.getBusinessFieldConfig<GetBusinessFieldConfig>({
-					config_type: i,
-					menu_id: data.id,
-					project_code: 'scmp',
-				});
-			})
-		).then(([table, form]) => {
-			configList.table = table.data;
-			configList.form = form.data;
-		});
-	}
-
-	return {
-		treeRef,
-		configList,
-		configData,
-		activeName,
-		nodeClick,
-	};
-}

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

@@ -1,25 +0,0 @@
-import { GetMenuList } from '/@/api/menuController/type';
-
-interface Result {
-	menu: GetMenuList['data'];
-	menuIds: string[];
-}
-/** 获取树形菜单数据 */
-export function getMenuTree(data: GetMenuList['data']): Result {
-	const menuIds: string[] = [];
-	const getChild = (params: GetMenuList['data']) => {
-		params.forEach((i) => {
-			menuIds.push(i.id);
-			if (i.children && i.children.length) {
-				i.disabled = true;
-				getChild(i.children);
-			}
-		});
-	};
-	getChild(data);
-
-	return {
-		menu: data,
-		menuIds,
-	};
-}