hs-admin-ui 1.0.0

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

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

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

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

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

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