hs-admin-ui 1.0.0 → 1.0.2

package/src/components/config/uploadAttrConfig/config.ts

@@ -1,250 +0,0 @@
-export const uploadAttrConfig = [
-	{
-		prop: 'attrs',
-		label: 'uploadAttrs',
-		tooltip: 'uploadAttrs',
-		type: 'object',
-		el: 'title',
-		children: [
-			{
-				prop: 'action',
-				label: '请求 URL',
-				tooltip: '请求 URL',
-				type: 'string',
-				el: 'hs-input',
-			},
-			{
-				prop: 'headers',
-				label: '设置上传的请求头',
-				tooltip: '设置上传的请求头部',
-				type: 'object',
-				el: 'hs-input',
-			},
-			{
-				prop: 'method',
-				label: '设置上传请求方法',
-				tooltip: '设置上传请求方法',
-				type: 'string',
-				el: 'hs-select',
-				op: [{ label: 'post', value: 'post' }],
-				cel: 'hs-option',
-			},
-			{
-				prop: 'multiple',
-				label: '是否支持多选文件',
-				tooltip: '是否支持多选文件',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'data',
-				label: '额外参数',
-				tooltip: '上传时附带的额外参数 从 v2.3.13 支持 Awaitable 数据，和 Function',
-				type: 'object / Function',
-				el: 'hs-input',
-			},
-			{
-				prop: 'name',
-				label: '上传文件字段名',
-				tooltip: '上传的文件字段名',
-				type: 'string',
-				el: 'hs-input',
-			},
-			{
-				prop: 'isBase64',
-				label: '是否是base64',
-				tooltip: '是否是base64文件',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'isShowCapture',
-				label: '是否显示高拍仪',
-				tooltip: '是否显示高拍仪控件',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'with-credentials',
-				label: '支持发送cookie',
-				tooltip: '支持发送 cookie 凭证信息',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'show-file-list',
-				label: 'show-file-list',
-				tooltip: '是否显示已上传文件列表',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'drag',
-				label: '是否启用拖拽上传',
-				tooltip: '是否启用拖拽上传',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'accept',
-				label: '上传的文件类型',
-				tooltip: '接受上传的文件类型（thumbnail-mode 模式下此参数无效）',
-				type: 'string',
-				el: 'hs-input',
-			},
-			{
-				prop: 'on-preview',
-				label: '已上传的钩子',
-				tooltip: '点击文件列表中已上传的文件时的钩子',
-				type: 'Function',
-				el: 'hs-input',
-			},
-			{
-				prop: 'on-remove',
-				label: '移除文件的钩子',
-				tooltip: '文件列表移除文件时的钩子',
-				type: 'Function',
-				el: 'hs-input',
-			},
-			{
-				prop: 'on-success',
-				label: '上传成功的钩子',
-				tooltip: '文件上传成功时的钩子',
-				type: 'Function',
-				el: 'hs-input',
-			},
-			{
-				prop: 'on-error',
-				label: '上传失败的钩子',
-				tooltip: '文件上传失败时的钩子',
-				type: 'Function',
-				el: 'hs-input',
-			},
-			{
-				prop: 'on-progress',
-				label: '上传时的钩子',
-				tooltip: '文件上传时的钩子',
-				type: 'Function',
-				el: 'hs-input',
-			},
-			{
-				prop: 'on-change',
-				label: '状态改变时的钩子',
-				tooltip: '文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用',
-				type: 'Function',
-				el: 'hs-input',
-			},
-			{
-				prop: 'on-exceed',
-				label: '超出限制时的钩子',
-				tooltip: '当超出限制时，执行的钩子函数',
-				type: 'Function',
-				el: 'hs-input',
-			},
-			{
-				prop: 'before-upload',
-				label: '上传之前的钩子',
-				tooltip: '上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。',
-				type: 'Function',
-				el: 'hs-input',
-			},
-			{
-				prop: 'before-remove',
-				label: '删除之前的钩子',
-				tooltip: '删除文件之前的钩子，参数为上传的文件和文件列表， 若返回 false 或者返回 Promise 且被 reject，则停止删除。',
-				type: 'Function',
-				el: 'hs-input',
-			},
-			{
-				prop: 'file-list',
-				label: '默认上传文件',
-				tooltip: '默认上传文件',
-				type: 'object',
-				el: 'hs-input',
-			},
-			{
-				prop: 'list-type',
-				label: '文件列表的类型',
-				tooltip: '文件列表的类型',
-				type: 'enum',
-				el: 'hs-select',
-				op: [
-					{ label: 'text', value: 'text' },
-					{ label: 'picture', value: 'picture' },
-					{ label: 'picture-card', value: 'picture-card' },
-				],
-				cel: 'hs-option',
-			},
-			{
-				prop: 'auto-upload',
-				label: '是否自动上传文件',
-				tooltip: '是否自动上传文件',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'http-request',
-				label: '覆盖默认的Xhr',
-				tooltip: '覆盖默认的 Xhr 行为，允许自行实现上传文件的请求',
-				type: 'Function',
-				el: 'hs-input',
-			},
-			{
-				prop: 'disabled',
-				label: '是否禁用上传',
-				tooltip: '是否禁用上传',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			{
-				prop: 'limit',
-				label: '最大数量',
-				tooltip: '允许上传文件的最大数量',
-				type: 'number',
-				el: 'hs-input-number',
-			},
-		],
-	},
-	{
-		prop: 'rules',
-		label: 'rules',
-		tooltip: 'rules',
-		type: 'object',
-		el: 'title',
-		children: [
-			{
-				prop: 'required',
-				label: '是否必填',
-				tooltip: '是否必填',
-				type: 'boolean',
-				el: 'hs-switch',
-			},
-			// 必填项规则
-			{
-				prop: 'rules',
-				label: '必填项规则',
-				tooltip: '必填项规则',
-				type: 'array',
-				el: 'hs-input',
-				attrs: {
-					type: 'textarea',
-				},
-			},
-		],
-	},
-];
-export const uploadAttrConfigMap = {
-	// 默认配置项
-	attrs: {
-		method: 'post', // 设置上传请求方法
-		multiple: false, // 是否支持多选文件
-		name: 'file', // 上传的文件字段名
-		'with-credentials': false, // 支持发送 cookie 凭证信息
-		'show-file-list': true, // 是否显示已上传文件列表
-		drag: false, // 是否启用拖拽上传
-		'list-type': 'text', // 文件列表的类型
-		'auto-upload': true, // 是否自动上传文件
-		disabled: false, // 是否禁用上传
-	},
-	rules: {},
-};

package/src/components/config/uploadAttrConfig/uploadAttrConfig.vue

@@ -1,26 +0,0 @@
-<template>
-	<div class="p-[10px] h-full">
-		<base-form v-model:data="data" :config="uploadAttrConfig" :isVModel="isVModel"></base-form>
-	</div>
-</template>
-
-<script setup lang="ts" name="uploadAttrConfig">
-import baseForm from '../baseForm.vue';
-import { ref } from 'vue';
-import { uploadAttrConfig, uploadAttrConfigMap } from './config';
-import _ from 'lodash';
-const props = defineProps({
-	data: {
-		type: Object,
-		default: () => {},
-	},
-	isVModel: {
-		type: Boolean,
-		default: false,
-	},
-});
-// lodash判断对象是否为空
-const data = ref(_.isEmpty(props.data) ? Object.assign(props.data, _.cloneDeep(uploadAttrConfigMap)) : props.data);
-</script>
-
-<style scoped lang="scss"></style>

package/src/components/iconSelector/index.vue

@@ -1,247 +0,0 @@
-<template>
-	<div class="icon-selector w100 h100">
-		<el-input
-			v-model="state.fontIconSearch"
-			:placeholder="state.fontIconPlaceholder"
-			:clearable="clearable"
-			:disabled="disabled"
-			:size="size"
-			ref="inputWidthRef"
-			@clear="onClearFontIcon"
-			@focus="onIconFocus"
-			@blur="onIconBlur"
-		>
-			<template v-if="isShowPrepend" #prepend>
-				<SvgIcon
-					:name="state.fontIconPrefix === '' ? prepend : state.fontIconPrefix"
-					class="font14"
-					v-if="state.fontIconPrefix === '' ? prepend?.indexOf('ele-') > -1 : state.fontIconPrefix?.indexOf('ele-') > -1"
-				/>
-				<i v-else :class="state.fontIconPrefix === '' ? prepend : state.fontIconPrefix" class="font14"></i>
-			</template>
-		</el-input>
-		<el-popover
-			placement="bottom"
-			:width="state.fontIconWidth"
-			transition="el-zoom-in-top"
-			popper-class="icon-selector-popper"
-			trigger="click"
-			:virtual-ref="inputWidthRef"
-			virtual-triggering
-		>
-			<template #default>
-				<div class="icon-selector-warp">
-					<div class="icon-selector-warp-title">{{ title }}</div>
-					<el-tabs v-model="state.fontIconTabActive" @tab-click="onIconClick">
-						<el-tab-pane lazy label="ali" name="ali">
-							<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
-						</el-tab-pane>
-						<el-tab-pane lazy label="ele" name="ele">
-							<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
-						</el-tab-pane>
-						<el-tab-pane lazy label="awe" name="awe">
-							<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
-						</el-tab-pane>
-					</el-tabs>
-				</div>
-			</template>
-		</el-popover>
-	</div>
-</template>
-
-<script setup lang="ts" name="iconSelector">
-import { defineAsyncComponent, ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
-import type { TabsPaneContext } from 'element-plus';
-import initIconfont from '/@/utils/getStyleSheets';
-import '/@/theme/iconSelector.scss';
-
-// 定义父组件传过来的值
-const props = defineProps({
-	// 输入框前置内容
-	prepend: {
-		type: String,
-		default: () => 'ele-Pointer',
-	},
-	// 输入框占位文本
-	placeholder: {
-		type: String,
-		default: () => '请输入内容搜索图标或者选择图标',
-	},
-	// 输入框占位文本
-	size: {
-		type: String,
-		default: () => 'default',
-	},
-	// 弹窗标题
-	title: {
-		type: String,
-		default: () => '请选择图标',
-	},
-	// 禁用
-	disabled: {
-		type: Boolean,
-		default: () => false,
-	},
-	// 是否可清空
-	clearable: {
-		type: Boolean,
-		default: () => true,
-	},
-	// 自定义空状态描述文字
-	emptyDescription: {
-		type: String,
-		default: () => '无相关图标',
-	},
-	isShowPrepend: {
-		type: Boolean,
-		default: true,
-	},
-	// 双向绑定值，默认为 modelValue，
-	// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
-	// 参考：https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%9A%E4%B8%AA-v-model-%E7%BB%91%E5%AE%9A
-	modelValue: String,
-});
-
-// 定义子组件向父组件传值/事件
-const emit = defineEmits(['update:modelValue', 'get', 'clear']);
-
-// 引入组件
-const IconList = defineAsyncComponent(() => import('/@/components/iconSelector/list.vue'));
-
-// 定义变量内容
-const inputWidthRef = ref();
-const state = reactive({
-	fontIconPrefix: '',
-	fontIconWidth: 0,
-	fontIconSearch: '',
-	fontIconPlaceholder: '',
-	fontIconTabActive: 'ali',
-	fontIconList: {
-		ali: [],
-		ele: [],
-		awe: [],
-	},
-});
-
-// 处理 input 获取焦点时，modelValue 有值时，改变 input 的 placeholder 值
-const onIconFocus = () => {
-	if (!props.modelValue) return false;
-	state.fontIconSearch = '';
-	state.fontIconPlaceholder = props.modelValue;
-};
-// 处理 input 失去焦点时，为空将清空 input 值，为点击选中图标时，将取原先值
-const onIconBlur = () => {
-	const list = fontIconTabNameList();
-	setTimeout(() => {
-		const icon = list.filter((icon: string) => icon === state.fontIconSearch);
-		if (icon.length <= 0) state.fontIconSearch = '';
-	}, 300);
-};
-// 图标搜索及图标数据显示
-const fontIconSheetsFilterList = computed(() => {
-	const list = fontIconTabNameList();
-	if (!state.fontIconSearch) return list;
-	let search = state.fontIconSearch.trim().toLowerCase();
-	return list.filter((item: string) => {
-		if (item.toLowerCase().indexOf(search) !== -1) return item;
-	});
-});
-// 根据 tab name 类型设置图标
-const fontIconTabNameList = () => {
-	let iconList: any = [];
-	if (state.fontIconTabActive === 'ali') iconList = state.fontIconList.ali;
-	else if (state.fontIconTabActive === 'ele') iconList = state.fontIconList.ele;
-	else if (state.fontIconTabActive === 'awe') iconList = state.fontIconList.awe;
-	return iconList;
-};
-// 处理 icon 双向绑定数值回显
-const initModeValueEcho = () => {
-	if (props.modelValue === '') return ((<string | undefined>state.fontIconPlaceholder) = props.placeholder);
-	(<string | undefined>state.fontIconPlaceholder) = props.modelValue;
-	(<string | undefined>state.fontIconPrefix) = props.modelValue;
-};
-// 处理 icon 类型，用于回显时，tab 高亮与初始化数据
-const initFontIconName = () => {
-	let name = 'ali';
-	// 如果不存在值，则返回默认值
-	if (!props.modelValue) return name;
-	if (props.modelValue!.indexOf('iconfont') > -1) name = 'ali';
-	else if (props.modelValue!.indexOf('ele-') > -1) name = 'ele';
-	else if (props.modelValue!.indexOf('fa') > -1) name = 'awe';
-	// 初始化 tab 高亮回显
-	state.fontIconTabActive = name;
-	return name;
-};
-// 初始化数据
-const initFontIconData = async (name: string) => {
-	if (name === 'ali') {
-		// 阿里字体图标使用 `iconfont xxx`
-		if (state.fontIconList.ali.length > 0) return;
-		await initIconfont.ali().then((res: any) => {
-			state.fontIconList.ali = res.map((i: string) => `iconfont ${i}`);
-		});
-	} else if (name === 'ele') {
-		// element plus 图标
-		if (state.fontIconList.ele.length > 0) return;
-		await initIconfont.ele().then((res: any) => {
-			state.fontIconList.ele = res;
-		});
-	} else if (name === 'awe') {
-		// fontawesome字体图标使用 `fa xxx`
-		if (state.fontIconList.awe.length > 0) return;
-		await initIconfont.awe().then((res: any) => {
-			state.fontIconList.awe = res.map((i: string) => `fa ${i}`);
-		});
-	}
-	// 初始化 input 的 placeholder
-	// 参考（单项数据流）：https://cn.vuejs.org/v2/guide/components-props.html?#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
-	state.fontIconPlaceholder = props.placeholder;
-	// 初始化双向绑定回显
-	initModeValueEcho();
-};
-// 图标点击切换
-const onIconClick = (pane: TabsPaneContext) => {
-	initFontIconData(pane.paneName as string);
-	inputWidthRef.value.focus();
-};
-// 获取当前点击的 icon 图标
-const onColClick = (v: string) => {
-	state.fontIconPlaceholder = v;
-	state.fontIconPrefix = v;
-	emit('get', state.fontIconPrefix);
-	emit('update:modelValue', state.fontIconPrefix);
-	inputWidthRef.value.focus();
-};
-// 清空当前点击的 icon 图标
-const onClearFontIcon = () => {
-	state.fontIconPrefix = '';
-	emit('clear', state.fontIconPrefix);
-	emit('update:modelValue', state.fontIconPrefix);
-};
-// 获取 input 的宽度
-const getInputWidth = () => {
-	nextTick(() => {
-		state.fontIconWidth = inputWidthRef.value.$el?.offsetWidth;
-	});
-};
-// 监听页面宽度改变
-const initResize = () => {
-	window.addEventListener('resize', () => {
-		getInputWidth();
-	});
-};
-// 页面加载时
-onMounted(() => {
-	initFontIconData(initFontIconName());
-	initResize();
-	getInputWidth();
-});
-// 监听双向绑定 modelValue 的变化
-watch(
-	() => props.modelValue,
-	() => {
-		initModeValueEcho();
-		initFontIconName();
-	}
-);
-</script>

package/src/components/iconSelector/list.vue

@@ -1,84 +0,0 @@
-<template>
-	<div class="icon-selector-warp-row">
-		<el-scrollbar ref="selectorScrollbarRef">
-			<el-row :gutter="10" v-if="props.list.length > 0">
-				<el-col :xs="6" :sm="4" :md="4" :lg="4" :xl="4" v-for="(v, k) in list" :key="k" @click="onColClick(v)">
-					<div class="icon-selector-warp-item" :class="{ 'icon-selector-active': prefix === v }">
-						<SvgIcon :name="v" />
-					</div>
-				</el-col>
-			</el-row>
-			<el-empty :image-size="100" v-if="list.length <= 0" :description="empty"></el-empty>
-		</el-scrollbar>
-	</div>
-</template>
-
-<script setup lang="ts" name="iconSelectorList">
-// 定义父组件传过来的值
-const props = defineProps({
-	// 图标列表数据
-	list: {
-		type: Array,
-		default: () => [],
-	},
-	// 自定义空状态描述文字
-	empty: {
-		type: String,
-		default: () => '无相关图标',
-	},
-	// 高亮当前选中图标
-	prefix: {
-		type: String,
-		default: () => '',
-	},
-});
-
-// 定义子组件向父组件传值/事件
-const emit = defineEmits(['get-icon']);
-
-// 当前 icon 图标点击时
-const onColClick = (v: unknown | string) => {
-	emit('get-icon', v);
-};
-</script>
-
-<style scoped lang="scss">
-.icon-selector-warp-row {
-	height: 230px;
-	overflow: hidden;
-	.el-row {
-		padding: 15px;
-	}
-	.el-scrollbar__bar.is-horizontal {
-		display: none;
-	}
-	.icon-selector-warp-item {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		border: 1px solid var(--el-border-color);
-		border-radius: 5px;
-		margin-bottom: 10px;
-		height: 30px;
-		i {
-			font-size: 20px;
-			color: var(--el-text-color-regular);
-		}
-		&:hover {
-			cursor: pointer;
-			background-color: var(--el-color-primary-light-9);
-			border: 1px solid var(--el-color-primary-light-5);
-			i {
-				color: var(--el-color-primary);
-			}
-		}
-	}
-	.icon-selector-active {
-		background-color: var(--el-color-primary-light-9);
-		border: 1px solid var(--el-color-primary-light-5);
-		i {
-			color: var(--el-color-primary);
-		}
-	}
-}
-</style>

package/src/components/svgIcon/index.vue

@@ -1,61 +0,0 @@
-<template>
-	<i v-if="isShowIconSvg" class="el-icon" :style="setIconSvgStyle">
-		<component :is="getIconName" />
-	</i>
-	<div v-else-if="isShowIconImg" :style="setIconImgOutStyle">
-		<img :src="getIconName" :style="setIconSvgInsStyle" />
-	</div>
-	<i v-else :class="getIconName" :style="setIconSvgStyle" />
-</template>
-
-<script setup lang="ts" name="svgIcon">
-import { computed } from 'vue';
-
-// 定义父组件传过来的值
-const props = defineProps({
-	// svg 图标组件名字
-	name: {
-		type: String,
-	},
-	// svg 大小
-	size: {
-		type: Number,
-		default: () => 14,
-	},
-	// svg 颜色
-	color: {
-		type: String,
-	},
-});
-
-// 在线链接、本地引入地址前缀
-const linesString = ['https', 'http', '/src', '/assets', 'data:image', import.meta.env.VITE_PUBLIC_PATH];
-
-// 获取 icon 图标名称
-const getIconName = computed(() => {
-	return props?.name;
-});
-// 用于判断 element plus 自带 svg 图标的显示、隐藏
-const isShowIconSvg = computed(() => {
-	return props?.name?.startsWith('ele-');
-});
-// 用于判断在线链接、本地引入等图标显示、隐藏
-const isShowIconImg = computed(() => {
-	return linesString.find((str) => props.name?.startsWith(str));
-});
-// 设置图标样式
-const setIconSvgStyle = computed(() => {
-	return `font-size: ${props.size}px;color: ${props.color};`;
-});
-// 设置图片样式
-const setIconImgOutStyle = computed(() => {
-	return `width: ${props.size}px;height: ${props.size}px;display: inline-block;overflow: hidden;`;
-});
-// 设置图片样式
-const setIconSvgInsStyle = computed(() => {
-	const filterStyle: string[] = [];
-	const compatibles: string[] = ['-webkit', '-ms', '-o', '-moz'];
-	compatibles.forEach((j) => filterStyle.push(`${j}-filter: drop-shadow(${props.color} 30px 0);`));
-	return `width: ${props.size}px;height: ${props.size}px;position: relative;left: -${props.size}px;${filterStyle.join('')}`;
-});
-</script>