hs-admin-ui 1.0.0

package/src/theme/waves.scss

@@ -0,0 +1,101 @@
+/* Waves v0.6.0
+* http://fian.my.id/Waves
+*
+* Copyright 2014 Alfiana E. Sibuea and other contributors
+* Released under the MIT license
+* https://github.com/fians/Waves/blob/master/LICENSE
+*/
+.waves-effect {
+	position: relative;
+	cursor: pointer;
+	display: inline-block;
+	overflow: hidden;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	-webkit-tap-highlight-color: transparent;
+	vertical-align: middle;
+	z-index: 1;
+	will-change: opacity, transform;
+	transition: all 0.3s ease-out;
+}
+.waves-effect .waves-ripple {
+	position: absolute;
+	border-radius: 50%;
+	width: 20px;
+	height: 20px;
+	margin-top: -10px;
+	margin-left: -10px;
+	opacity: 0;
+	background: rgba(0, 0, 0, 0.2);
+	transition: all 0.7s ease-out;
+	transition-property: opacity, -webkit-transform;
+	transition-property: transform, opacity;
+	transition-property: transform, opacity, -webkit-transform;
+	-webkit-transform: scale(0);
+	transform: scale(0);
+	pointer-events: none;
+}
+.waves-effect.waves-light .waves-ripple {
+	background-color: rgba(255, 255, 255, 0.45);
+}
+.waves-effect.waves-red .waves-ripple {
+	background-color: rgba(244, 67, 54, 0.7);
+}
+.waves-effect.waves-yellow .waves-ripple {
+	background-color: rgba(255, 235, 59, 0.7);
+}
+.waves-effect.waves-orange .waves-ripple {
+	background-color: rgba(255, 152, 0, 0.7);
+}
+.waves-effect.waves-purple .waves-ripple {
+	background-color: rgba(156, 39, 176, 0.7);
+}
+.waves-effect.waves-green .waves-ripple {
+	background-color: rgba(76, 175, 80, 0.7);
+}
+.waves-effect.waves-teal .waves-ripple {
+	background-color: rgba(0, 150, 136, 0.7);
+}
+.waves-effect input[type='button'],
+.waves-effect input[type='reset'],
+.waves-effect input[type='submit'] {
+	border: 0;
+	font-style: normal;
+	font-size: inherit;
+	text-transform: inherit;
+	background: none;
+}
+.waves-notransition {
+	transition: none !important;
+}
+.waves-circle {
+	-webkit-transform: translateZ(0);
+	transform: translateZ(0);
+	-webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%);
+}
+.waves-input-wrapper {
+	border-radius: 0.2em;
+	vertical-align: bottom;
+}
+.waves-input-wrapper .waves-button-input {
+	position: relative;
+	top: 0;
+	left: 0;
+	z-index: 1;
+}
+.waves-circle {
+	text-align: center;
+	width: 2.5em;
+	height: 2.5em;
+	line-height: 2.5em;
+	border-radius: 50%;
+	-webkit-mask-image: none;
+}
+.waves-block {
+	display: block;
+}
+a.waves-effect .waves-ripple {
+	z-index: -1;
+}

package/src/types/auth.d.ts

@@ -0,0 +1,44 @@
+import ICustomData from './customData';
+
+declare namespace IAuthData {
+	type Data = Record<string, ICustomData.ANY>;
+
+	interface Field {
+		/** 字段名称 */
+		fieldName: string;
+		/** 字段显示名称 */
+		showName: string;
+		/** 字段值 */
+		fieldProp: string;
+		/** 字段是否显示 */
+		fieldShow: boolean;
+	}
+
+	interface ColumnData extends Field {
+		/** 列按钮配置 */
+		option: Field[];
+	}
+
+	interface Table {
+		id: string;
+		/** 表格名称 */
+		tableName: string;
+		/** 表格列字段配置 */
+		data: ColumnData[];
+	}
+
+	interface Auth {
+		/** 配置角色类型 */
+		config_type: string;
+		/** 配置门店唯一id */
+		config_unique_id: string;
+		/** 按钮权限配置 */
+		btns: Field[];
+		/** 表格权限配置 */
+		tables: Table[];
+		/** 表单权限配置 */
+		form: Field[];
+	}
+}
+
+export default IAuthData;

package/src/types/axios.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import * as axios from 'axios';
+
+// 扩展 axios 数据返回类型，可自行扩展
+declare module 'axios' {
+	export interface AxiosResponse<T = any> {
+		code: number;
+		data: T;
+		message: string;
+		type?: string;
+		[key: string]: T;
+	}
+}

package/src/types/components.d.ts

@@ -0,0 +1,30 @@
+import type { Component, VNodeProps, AllowedComponentProps } from 'vue';
+
+declare namespace ComponentAttr {
+	/** 获取Vue组件的props类型 */
+	type Props<T extends Component> = {
+		-readonly [K in keyof Omit<InstanceType<T>['$props'], keyof VNodeProps | keyof AllowedComponentProps>]: InstanceType<T>['$props'][K];
+	};
+
+	/** 类型递归调用可选 */
+	type RecursivePartial<T> = {
+		-readonly [K in keyof T]?: RecursivePartial<T[K]>;
+	};
+
+	/** 类型递归调用必填 */
+	type RecursiveRequired<T> = {
+		-readonly [K in keyof T]-?: RecursiveRequired<T[K]>;
+	};
+
+	/** 让部分属性可选 */
+	type CustomPartial<T, K extends keyof T> = {
+		[P in K]?: T[P];
+	} & Omit<T, K>;
+
+	/** 让部分属性变为必填 */
+	type CustomRequired<T, K extends keyof T> = {
+		[P in K]-?: T[P];
+	} & Omit<T, K>;
+}
+
+export default ComponentAttr;

package/src/types/customData.d.ts

@@ -0,0 +1,163 @@
+import { VxePagerProps, VxeTableProps, VxeColumnProps } from 'vxe-table';
+import { Component } from '/@/components/component';
+import { FormProps, FormRules } from 'element-plus';
+import { Input } from '/@/types/formItem/input';
+import { InputNumber } from '/@/types/formItem/inputNumber';
+import { Autocomplete } from '/@/types/formItem/autocomplete';
+import { Selelct } from '/@/types/formItem/selelct';
+import { TreeSelect } from '/@/types/formItem/treeSelect';
+import { ButtonAttr } from './formItem/button';
+
+declare namespace ICustomData {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	type ANY = any;
+	type Data = Record<string, ANY>;
+
+	/** 表单配置项 */
+	interface FormBaseConfig extends FormProps {
+		/** 是否取字典项的默认值 */
+		isSetDictDefaultValue?: boolean;
+		/** 是否支持表单回车快捷功能 */
+		isSupportShortcutKey?: boolean;
+		/** 提交表单的请求api */
+		submitUrl?: string;
+		/** 表单提交成功的提示信息 */
+		submitSuccessMsg?: string;
+	}
+
+	/** 表单配置规则 */
+	interface Rules {
+		required: boolean;
+		rules: FormRules<Data>[];
+	}
+
+	type ElData = Selelct | TreeSelect | Input | InputNumber | Autocomplete;
+
+	/** 表单项配置接口 */
+	interface FormItemConfigData {
+		baseData: {
+			label: string;
+			prop: string;
+			el: Component;
+			isSlot: boolean;
+			isAuth: boolean;
+			isApply: boolean;
+			isShow: boolean;
+			labelWidth: number;
+			/** 字段联合类型 */
+			complexType?: string;
+			/** 字段类型 */
+			baseType?: string;
+		};
+		elData: ElData;
+	}
+
+	interface FormItemConfig {
+		id: string;
+		data: FormItemConfigData;
+	}
+
+	interface Form {
+		baseData: FormBaseConfig;
+		formData: Data;
+		formConfig: Array<FormItemConfig>;
+	}
+
+	interface TableBaseData extends VxeTableProps {
+		/** 表格配置属性id */
+		id: string;
+		/** 表格配置名称 */
+		tableName: string;
+		/** 是否自定义加载中模板 */
+		is_slot_loading?: boolean;
+		/** 是否自定义空数据模板 */
+		is_slot_empty?: boolean;
+		/** 是否分页 */
+		is_apply_page?: boolean;
+		/** 表格分页配置 */
+		table_page_data?: VxePagerProps;
+	}
+
+	interface TableItemData extends VxeColumnProps {
+		/** 是否启用插槽 */
+		isSlot: boolean;
+		/** 是否启用 */
+		isApply: boolean;
+		/** 是否配置权限 */
+		isAuth: boolean;
+		/** 是否显示 */
+		isShow: boolean;
+		/** 返回值类型 */
+		returnValueType: string;
+	}
+
+	interface BtnData extends Partial<ButtonAttr> {
+		name: string;
+		key: string;
+		isApply: Boolean; // 是否启用
+		isSlot: Boolean; // 是否使用插槽
+		isAuth: Boolean; // 是否配置权限
+		isShow: Boolean; // 是否显示
+		/** 图标位置 */
+		iconPosition: 'left' | 'right';
+		/** 按钮图标 */
+		btnIcon: string;
+		/** 按钮文本颜色 */
+		textColor: string;
+		/** 方法 */
+		fnName: string;
+		/** 方法参数 */
+		param: string;
+	}
+	interface TableItem {
+		/** 表格列id */
+		id: string;
+		/** 表格列配置数据 */
+		data: TableItemData;
+		/** 表格列中按钮配置 */
+		btnData: BtnData[];
+	}
+
+	interface Table {
+		/** 表单配置id */
+		id: string;
+		baseData: TableBaseData;
+		tableData: Data[];
+		tableConfig: TableItem[];
+	}
+
+	interface Btns {
+		/** 按钮唯一标识配置 */
+		id: string;
+		/** 按钮配置数据 */
+		data: BtnData;
+	}
+
+	/** 权限数据 */
+	interface AuthItem {
+		/** 权限字段 */
+		code: string;
+		/** 权限字段 */
+		name: string;
+		/** 是否显示 */
+		show: false;
+		/** 导出时是否导出该字段 */
+		is_export: boolean;
+	}
+
+	interface FormTable {
+		btns: Btns[];
+		/** 配置唯一标识 */
+		config_unique_id: string;
+		/** 配置名称 */
+		config_name: string;
+		/** 表单配置 */
+		form?: Form;
+		/** 表格配置数据 */
+		tables: Array<Table>;
+		/** 权限数据 */
+		auth?: Record<'btns' | 'form' | 'tables', AuthItem>;
+	}
+}
+
+export default ICustomData;

package/src/types/form.ts

@@ -0,0 +1,68 @@
+import ICustomData from './customData';
+import { FormProps } from 'element-plus';
+
+declare namespace IFormData {
+	type Data = Record<string, ICustomData.ANY>;
+
+	interface ConfigFormItem {
+		/** 字段值 */
+		prop: string;
+		/** 字段名 */
+		label: string;
+		/** 单个布局跨行/列数属性 */
+		layoutData: {
+			rowSpan: number;
+			colSpan: number;
+			labelBg: string;
+			labelColor: string;
+		};
+		config: ICustomData.FormItemConfigData[];
+	}
+
+	interface ConfigSlotItem {
+		/** 插槽名称 */
+		name: string;
+	}
+
+	interface ConfigComponentItem {
+		/** 组件名称 */
+		name: string;
+	}
+
+	interface FormAttr extends FormProps {
+		/** 背景色 */
+		bg: string;
+		/** 行间隔 */
+		rowGap: string;
+		/** 列间隔 */
+		columnGap: string;
+	}
+
+	interface FormConfig {
+		/** 表单名称 */
+		label: string;
+		/** 布局格子数 */
+		grid: number;
+		/** 表单类型字段对应值 */
+		fieldID: string;
+		/** 表单类型 */
+		formItemType: 'form' | 'slot' | 'component';
+		/** 表单属性 */
+		attrs: FormAttr;
+		config: ConfigFormItem[] | ConfigSlotItem | ConfigComponentItem;
+	}
+
+	interface Form {
+		/** 表单项配置数据 */
+		data: Data;
+		/** 标题名称 */
+		config_name: string;
+		/** 标题单元格id */
+		config_unique_id: string;
+		/** 表单属性 */
+		attrs: FormAttr;
+		form: FormConfig[];
+	}
+}
+
+export default IFormData;

package/src/types/formItem/autocomplete.ts

@@ -0,0 +1,43 @@
+import IFormTable from '../formTable';
+
+/** 自动补全输入框 */
+export interface AutocompleteAttr {
+	/** 占位文本 */
+	placeholder: string;
+	/** 是否可清空 */
+	clearable: boolean;
+	/** 自动补全组件是否被禁用 */
+	disabled: boolean;
+	/** 输入建议对象中用于显示的键名 */
+	'value-key': string;
+	/** 获取输入建议的防抖延时，单位为毫秒 */
+	debounce: number;
+	/** 菜单弹出位置 */
+	placement: string;
+	/** 获取输入建议的方法 */
+	'fetch-suggestions': Function;
+	/** whether show suggestions when input focus */
+	'trigger-on-focus': boolean;
+	/** 在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件 */
+	'select-when-unmatched': boolean;
+	/** 等价于原生 input name 属性 */
+	name: string;
+	/** 输入框关联的 label 文字 */
+	label: string;
+	/** 是否隐藏远程加载时的加载图标 */
+	'hide-loading': boolean;
+	/** 下拉列表的类名 */
+	'popper-class': string;
+	/** 是否将下拉列表插入至 body 元素 */
+	'popper-append-to-body': boolean;
+	/** 是否将下拉列表元素插入 append-to 指向的元素下 */
+	teleported: string;
+	/** 是否默认高亮远程搜索结果的第一项 */
+	'highlight-first-item': boolean;
+	/** 下拉框的宽度是否与输入框相同 */
+	'fit-input-width': boolean;
+}
+export interface Autocomplete {
+	attrs: AutocompleteAttr;
+	rules: IFormTable.Rules;
+}

package/src/types/formItem/button.ts

@@ -0,0 +1,39 @@
+/** 按钮属性配置 */
+export interface ButtonAttr {
+	/** 尺寸 */
+	size: 'large' | 'default' | 'small';
+	/** 类型 */
+	type: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
+	/** 是否为朴素按钮 */
+	plain: boolean;
+	/** 是否为文字按钮 */
+	text: boolean;
+	/** 是否显示文字按钮背景颜色 */
+	bg: boolean;
+	/** 是否为链接按钮 */
+	link: boolean;
+	/** 是否为圆角按钮 */
+	round: boolean;
+	/** 是否为圆形按钮 */
+	circle: boolean;
+	/** 是否为加载中状态 */
+	loading: boolean;
+	/** 自定义加载中状态图标组件 */
+	'loading-icon': string;
+	/** 按钮是否为禁用状态 */
+	disabled: boolean;
+	/** 图标组件 */
+	icon: string;
+	/** 原生 autofocus 属性 */
+	autofocus: boolean;
+	/** 原生 type 属性 */
+	'native-type': string;
+	/** 自动在两个中文字符之间插入空格 */
+	'auto-insert-space': boolean;
+	/** 自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色 */
+	color: string;
+	/** dark 模式, 意味着自动设置 color 为 dark 模式的颜色 */
+	dark: boolean;
+	/** 自定义元素标签 */
+	tag: string;
+}

package/src/types/formItem/input.ts

@@ -0,0 +1,66 @@
+import IFormTable from '../formTable';
+
+/** 输入框属性配置 */
+export interface InputAttr {
+	/** 类型 */
+	type: string;
+	/** 最大长度 */
+	maxlength: string | number;
+	/** 最小长度 */
+	minlength: string | number;
+	/** 是否显示字数统计 */
+	'show-word-limit': boolean;
+	/** 是否显示清空按钮 */
+	placeholder: string;
+	/** 是否显示清空按钮 */
+	clearable: boolean;
+	/** 是否显示密码 */
+	formatter: Function;
+	/** 是否显示密码 */
+	parser: Function;
+	/** 是否显示密码 */
+	'show-password': boolean;
+	/** 是否禁用 */
+	disabled: boolean;
+	/** 尺寸 */
+	size: string;
+	/** 前缀图标 */
+	'prefix-icon': string;
+	/** 后缀图标 */
+	'suffix-icon': string;
+	/** 行数 */
+	rows: number;
+	/** 是否自适应 */
+	autosize: boolean | object;
+	/** 自动完成 */
+	autocomplete: string;
+	/** 等价于原生 input name */
+	name: string;
+	/** 原生 readonly 属性，是否只读 */
+	readonly: boolean;
+	/** 原生 max 属性，设置最大值 */
+	max: string | number;
+	/** 原生 min 属性，设置最小值 */
+	min: string | number;
+	/** 原生属性，设置输入字段的合法数字间隔 */
+	step: string | number;
+	/** 原生属性，自动获取焦点 */
+	autofocus: boolean;
+	/** 控制是否能被用户缩放 */
+	resize: 'none' | 'both' | 'horizontal' | 'vertical';
+	/** 原生属性 */
+	form: string;
+	/** 等价于原生 input aria-label 属性 */
+	label: string;
+	/** 输入框的 tabindex */
+	tabindex: string | number;
+	/** 输入时是否触发表单的校验 */
+	'validate-event': boolean;
+	/** input 元素或 textarea 元素的 style */
+	'input-style': string | object;
+}
+
+export interface Input {
+	attrs: InputAttr;
+	rules: IFormTable.Rules;
+}

package/src/types/formItem/inputNumber.ts

@@ -0,0 +1,42 @@
+import IFormTable from '../formTable';
+
+/** 数字输入框属性配置 */
+export interface InputNumberAttr {
+	/** 计数器允许的最小值 */
+	min: number;
+	/** 计数器允许的最大值 */
+	max: number;
+	/** 计数器步长 */
+	step: number;
+	/** 是否只能输入 step 的倍数 */
+	'step-strictly': boolean;
+	/** 数值精度 */
+	precision: number;
+	/** 计数器尺寸 */
+	size: 'large' | 'default' | 'small';
+	/** 原生 readonly 属性，是否只读 */
+	readonly: boolean;
+	/** 是否禁用状态 */
+	disabled: boolean;
+	/** 是否使用控制按钮 */
+	controls: boolean;
+	/** 控制按钮位置 */
+	'controls-position': string;
+	/** 等价于原生 input name 属性 */
+	name: string;
+	/** 等价于原生 input label 属性 */
+	label: string;
+	/** 等价于原生 input placeholder 属性 */
+	placeholder: string;
+	/** 等价于原生 input id 属性 */
+	id: string;
+	/** 当输入框被清空时显示的值 */
+	'value-on-clear': number | null | 'min' | 'max';
+	/** 是否触发表单验证 */
+	'validate-event': boolean;
+}
+
+export interface InputNumber {
+	attrs: InputNumberAttr;
+	rules: IFormTable.Rules;
+}

package/src/types/formItem/selelct.ts

@@ -0,0 +1,54 @@
+import IFormTable from '../formTable';
+
+export interface SelelctAttr {
+	/** 是否多选 */
+	multiple: boolean;
+	/** 是否允许编辑 */
+	disabled: boolean;
+	/** 唯一键值 */
+	'value-key': string;
+	/** 是否清除 */
+	clearable: boolean;
+	'collapse-tags': boolean;
+	'collapse-tags-tooltip': boolean;
+	'multiple-limit': number;
+	effect: IFormTable.Effect;
+	autocomplete: string;
+	filterable: boolean;
+	'allow-create': boolean;
+	remote: boolean;
+	'remote-show-suffix': boolean;
+	loading: boolean;
+	'reserve-keyword': boolean;
+	'default-first-option': boolean;
+	teleported: boolean;
+	persistent: boolean;
+	'automatic-dropdown': boolean;
+	'clear-icon': string;
+	'fit-input-width': boolean;
+	'suffix-icon': string;
+	'tag-type': IFormTable.TagType;
+	'validate-event': boolean;
+	placement: IFormTable.Placement;
+	'max-collapse-tags': number;
+	options: string;
+}
+
+interface SelelctGroupAttrs {
+	/** 是否禁用分组 */
+	disabled: boolean;
+	/** 是否启用分组 */
+	isGroupEnabled: boolean;
+}
+interface SelelctOptionAttrs {
+	value: string;
+	label: string;
+	disabled: boolean;
+}
+
+export interface Selelct {
+	attrs: SelelctAttr;
+	groupAttrs: SelelctGroupAttrs;
+	optionAttrs: SelelctOptionAttrs;
+	rules: IFormTable.Rules;
+}