hs-admin-ui 1.0.0

package/src/components/base/hsGetApi/src/hsGetApis.vue

@@ -0,0 +1,231 @@
+<template>
+	<hs-button @click="getDocApi">获取API信息</hs-button>
+	<hs-input
+		placeholder="搜索API"
+		v-model="state.search"
+		style="border: 1rpx solid rgb(171, 178, 191); height: 3.5vh; padding-left: 12rpx; border-radius: 12rpx"
+		@keyup.enter="onSearch"
+	/>
+	<hs-input ref="textareaRef" type="textarea" autosize v-model="state.result" placeholder="请输入返回接口参数获取类型声明" @keyup.enter="onResult" />
+	<el-scrollbar height="70vh" class="hs-api__body" v-if="state.searchApi.length > 0">
+		<!-- 引用 请求地址 -->
+		<div class="hs-api__body-quote">
+			<el-text>import</el-text>&nbsp; <el-text>request</el-text>&nbsp; <el-text>from</el-text>&nbsp; <el-text>'/@/utils/request';</el-text><br />
+		</div>
+		<div class="hs-api__body-explain">
+			<el-text>/**</el-text><br />
+			<el-text>&nbsp;* 追加标题到参数对象中</el-text><br />
+			<el-text>&nbsp;*/</el-text>
+		</div>
+		<div>
+			<el-text class="const">const&nbsp;</el-text>
+			<el-text class="variable">assign&nbsp;</el-text>
+			<el-text class="equal-sign">=&nbsp;</el-text>
+			<el-text class="parentheses">(</el-text>
+			<el-text class="parameter">params</el-text>
+			<el-text class="equal-sign">:&nbsp;</el-text>
+			<el-text class="type">object</el-text>
+			<el-text class="equal-sign">,&nbsp;</el-text>
+			<el-text class="parameter">title</el-text>
+			<el-text class="equal-sign">:&nbsp;</el-text>
+			<el-text class="type">string</el-text>
+			<el-text class="parentheses">)</el-text>
+			<el-text class="const">&nbsp;=>&nbsp;</el-text>
+			<el-text class="parentheses">{</el-text><br />
+			<el-text class="return">&nbsp;&nbsp;&nbsp;&nbsp;return</el-text>
+			<el-text class="object">&nbsp;&nbsp;Object</el-text>
+			<el-text class="equal-sign">.</el-text>
+			<el-text class="variable">assign</el-text>
+			<el-text class="return">(</el-text>
+			<el-text class="parameter">params</el-text>
+			<el-text class="equal-sign">,&nbsp;</el-text>
+			<el-text class="const">{</el-text>
+			<el-text class="parameter">&nbsp;&nbsp;other_log_info:&nbsp;</el-text>
+			<el-text class="const">{</el-text>
+			<el-text class="parameter">&nbsp;&nbsp;title&nbsp;&nbsp;</el-text>
+			<el-text class="const">}&nbsp;</el-text>
+			<el-text class="const">}&nbsp;</el-text>
+			<el-text class="return">)</el-text>
+			<el-text class="equal-sign">;</el-text><br />
+			<el-text class="parentheses">};</el-text><br />
+		</div>
+		<div v-for="(api, index) in state.searchApi" :key="index">
+			<!-- 描述说明 -->
+			<el-text class="explain">/**</el-text><br />
+			<el-text class="explain">* 接口分类: {{ api.description }} - {{ api.tags }}</el-text
+			><br />
+			<el-text class="explain">* 接口名称: {{ api.title }} - 接口地址: {{ api.url }}</el-text
+			><br />
+			<el-text class="explain">* 请求方式: {{ api.method }}</el-text
+			><br />
+			<el-text class="explain" v-for="(parame, idx) in api.parameters" :key="idx">
+				* <el-text class="const">@param&nbsp;</el-text>
+				<el-text class="parentheses">
+					{<el-text class="return"
+						>[<el-text class="object">{{ parame.type }}</el-text
+						>]</el-text
+					>}&nbsp;
+				</el-text>
+				<el-text class="parameter">{{ parame.name }}&nbsp;&nbsp;</el-text>
+				<el-text class="explain"
+					>[{{ parame.description }}]
+					<el-text class="explain"> 是否必填:{{ parame.required ? '是' : '否' }}&nbsp;&nbsp;</el-text>
+				</el-text>
+				<br />
+			</el-text>
+			<el-text class="explain"
+				>* <el-text class="const">@return&nbsp;&nbsp;&nbsp;</el-text>
+				<el-text class="parentheses"
+					>{<el-text class="return">[<el-text class="object">type</el-text>]</el-text>}&nbsp;</el-text
+				>[description]</el-text
+			><br />
+			<el-text class="explain">*/</el-text><br />
+			<!-- 方法体 -->
+			<div>
+				<!-- 第一行方法体定义开始 -->
+				<el-text class="const">const&nbsp;</el-text>
+				<el-text class="variable">{{ api.className }}</el-text>
+				<el-text class="equal-sign">=</el-text>
+				<el-text class="parentheses">&lt;</el-text>
+				<el-text class="parentheses">T</el-text>
+				<el-text class="parentheses">&gt;</el-text>
+				<el-text class="parentheses">(</el-text>
+				<el-text class="parameter">{{ api.method == 'get' ? 'params' : 'data' }}</el-text>
+				<el-text class="equal-sign">:&nbsp;</el-text>
+				<el-text class="type">object</el-text>
+				<el-text class="equal-sign">&nbsp;=&nbsp;</el-text>
+				<el-text class="return">{</el-text>
+				<el-text class="return">}&nbsp;</el-text>
+				<el-text class="parentheses">)</el-text>
+				<el-text class="parentheses">:</el-text>
+				<el-text class="parentheses">Promise&lt;T&gt;</el-text>
+				<el-text class="const">&nbsp;=>&nbsp;</el-text>
+				<el-text class="parentheses">{</el-text><br />
+				<!-- 第一行方法体定义结束 -->
+
+				<!-- 参数自定义开始 -->
+				<!-- params = assign(params, '后台api获取接口'); -->
+				<el-text class="parameter">
+					&nbsp;&nbsp;&nbsp;&nbsp;{{ api.method == 'get' ? 'params' : 'data' }}
+					<el-text class="equal-sign">&nbsp;=&nbsp;</el-text>
+					<el-text class="variable">assign</el-text>
+					<el-text class="parentheses">(</el-text>
+					<el-text class="parameter">{{ api.method == 'get' ? 'params' : 'data' }}</el-text>
+					<el-text class="equal-sign">,&nbsp;</el-text>
+					<el-text class="str">'{{ api.title }}'</el-text>
+					<el-text class="parentheses">)</el-text>
+					<el-text class="equal-sign">;</el-text> </el-text
+				><br />
+				<!-- 参数自定义结束 -->
+				<el-text class="return">&nbsp;&nbsp;&nbsp;&nbsp;return</el-text>
+				<el-text class="object">&nbsp;&nbsp;request</el-text>
+				<el-text class="return">(</el-text>
+				<el-text class="const">{</el-text><br />
+				<el-text>
+					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+					<el-text class="parameter"> url:&nbsp;&nbsp;</el-text>
+					<el-text class="str">'{{ api.url }}'</el-text>
+					<el-text class="equal-sign">,</el-text> </el-text
+				><br />
+				<el-text>
+					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+					<el-text class="parameter"> method:&nbsp;&nbsp;</el-text>
+					<el-text class="str">'{{ api.method }}'</el-text>
+					<el-text class="equal-sign">,</el-text> </el-text
+				><br />
+				<el-text>
+					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+					<el-text class="parameter"> {{ api.method == 'get' ? 'params' : 'data' }}</el-text>
+					<el-text class="equal-sign">,</el-text> </el-text
+				><br />
+				<el-text class="const">&nbsp;&nbsp;&nbsp;&nbsp;}</el-text>
+				<el-text class="return">)</el-text>
+				<el-text class="equal-sign">;</el-text><br />
+				<el-text class="parentheses">};</el-text><br />
+			</div>
+		</div>
+		<!-- 暴露方法 -->
+		<div>
+			<el-text>
+				<el-text class="return"
+					>export&nbsp;
+					<el-text class="const">function&nbsp;</el-text>
+					<el-text class="variable">use{{ state.searchApi[0].tags }}</el-text>
+					<el-text class="parentheses">()&nbsp;&nbsp;{</el-text> </el-text
+				><br />
+				<el-text class="return">&nbsp;&nbsp;return {</el-text><br />
+				<el-text class="variable" v-for="(fun, index) in state.returnFun" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ fun }},<br /></el-text>
+				<el-text class="return">&nbsp;&nbsp;}</el-text>
+				<el-text class="equal-sign">;</el-text>
+				<br />
+				<el-text class="parentheses">}</el-text><br />
+			</el-text>
+		</div>
+	</el-scrollbar>
+</template>
+<script setup lang="ts" name="hsGetApis">
+import { getDocApi, onSearch, onResult, state, textareaRef } from '../useGetApis';
+</script>
+<style scoped lang="scss">
+.hs-api__body {
+	background-color: rgb(30, 30, 30);
+	padding: 12px;
+	// 导入
+	&-quote {
+		.el-text {
+			// margin-right: 8px;
+		}
+		.el-text:nth-child(2) {
+			color: rgb(156, 220, 254);
+		}
+		.el-text:nth-child(odd) {
+			color: rgb(197, 106, 119);
+		}
+	}
+	// 类的说明
+	&-explain {
+		.el-text {
+			color: rgb(106, 153, 85);
+		}
+	}
+	// 定义声明
+	.const {
+		color: rgb(86, 156, 214);
+	}
+	// 变量
+	.variable {
+		color: rgb(220, 220, 170);
+	}
+	// 等号
+	.equal-sign {
+		color: rgb(255, 255, 255);
+	}
+	// 括号
+	.parentheses {
+		color: rgb(255, 255, 0);
+	}
+	// 参数
+	.parameter {
+		color: rgb(156, 220, 254);
+	}
+	// 返回
+	.return {
+		color: rgb(187, 134, 192);
+	}
+	// Object
+	.object {
+		color: rgb(78, 201, 176);
+	}
+	.type {
+		color: rgb(78, 201, 176);
+	}
+	// 说明
+	.explain {
+		color: rgb(106, 153, 85);
+	}
+	// 名称 url 请求方式
+	.str {
+		color: rgb(206, 145, 120);
+	}
+}
+</style>

package/src/components/base/hsGetApi/useGetApis.ts

@@ -0,0 +1,158 @@
+import { reactive, ref } from 'vue';
+import _ from 'lodash';
+import { usePostMan } from '/@/api/test/index';
+import { ElMessage } from 'element-plus';
+import { getDataType } from '/@/utils/getDataType';
+
+const postMan = usePostMan();
+interface apisType {
+	description: string;
+	tags: string;
+	title: string;
+	url: string;
+	method: string;
+	parameters: string;
+	proxy: string;
+	className: string;
+}
+
+interface stateType {
+	show: boolean;
+	index: number;
+	result: string;
+	searchApi: Array<T>;
+	search: string;
+	ids: Array<number>;
+	apis: Array<apisType>;
+	returnFun: Array<String>;
+}
+let textareaRef = ref();
+let state = reactive<stateType>({
+	show: false,
+	index: 0,
+	result: '',
+	searchApi: [],
+	search: '',
+	ids: [],
+	apis: [],
+	returnFun: [],
+});
+
+/**
+ * 获取类名
+ */
+const getClassName = (method: string, path: string) => {
+	// 获取路径地址的最后一级
+	let _path = path.split('/').pop();
+	// 以下划线分割地址
+	let list = (_path as string).split('_');
+	let majuscule = '';
+	list.map((item, index) => {
+		if (index == 0) {
+			majuscule = item;
+		} else {
+			majuscule += item.charAt(0).toUpperCase() + item.slice(1);
+		}
+	});
+	if (majuscule.substring(0, 3) === 'get' || majuscule.substring(0, 3) === 'post' || majuscule.substring(0, 3) === 'Put') {
+		return majuscule;
+	} else {
+		return method + majuscule.charAt(0).toUpperCase() + majuscule.slice(1);
+	}
+};
+/**
+ * 获取API信息
+ */
+const getDocApi = () => {
+	postMan
+		.getApiDocs()
+		.then((res) => {
+			_.forEach(res.paths, function (value, key) {
+				let val;
+				let method = '';
+				if (value.get) {
+					val = value.get;
+					method = 'get';
+				} else if (value.post) {
+					val = value.post;
+					method = 'post';
+				} else if (value.put) {
+					val = value.put;
+					method = 'put';
+				}
+				let tag = _.filter(res.tags, {
+					name: val.tags[0],
+				});
+				if (val) {
+					state.apis.push({
+						description: tag[0]['description'],
+						tags: val.tags[0],
+						title: val.summary,
+						url: '/' + res.basePath.split('/')[1] + key,
+						method: method,
+						parameters: val.parameters,
+						proxy: res.basePath.split('/')[1],
+						className: getClassName(method, key),
+					});
+				}
+			});
+		})
+		.catch((err) => {
+			console.debug('获取API信息错误', err);
+		});
+};
+/**
+ * 模糊查询
+ * @param {Object} list
+ * @param {Object} keyWord
+ */
+const onFuzzyQuery = function (list: Array<apisType>, keyWord: string) {
+	let api = [];
+	for (let i = 0; i < list.length; i++) {
+		if (list[i].title.split(keyWord).length > 1) {
+			api.push(list[i]);
+		}
+		if (list[i].description.split(keyWord).length > 1 && _.indexOf(_.map(api, 'url'), list[i].url) === -1) {
+			api.push(list[i]);
+		}
+		if (list[i].tags.split(keyWord).length > 1 && _.indexOf(_.map(api, 'url'), list[i].url) === -1) {
+			api.push(list[i]);
+		}
+		if (list[i].url.split(keyWord).length > 1 && _.indexOf(_.map(api, 'url'), list[i].url) === -1) {
+			api.push(list[i]);
+		}
+	}
+	return api;
+};
+/**
+ * 搜索
+ */
+const onSearch = function () {
+	state.searchApi = [];
+	if (state.search.trim()) {
+		state.searchApi = onFuzzyQuery(state.apis, state.search.trim());
+		state.returnFun = _.map(state.searchApi, 'className');
+		console.debug('returnFun:', state.returnFun);
+		if (state.searchApi.length === 0) {
+			ElMessage({
+				message: '未搜索到接口数据',
+				type: 'success',
+			});
+		}
+	} else {
+		ElMessage({
+			message: '搜索的数据不能为空',
+			type: 'error',
+		});
+	}
+};
+
+function onResult() {
+	const fun = new Function('return ' + state.result);
+	state.result = getDataType(fun());
+	setTimeout(() => {
+		textareaRef.value?.select();
+	}, 1000);
+}
+
+export { getDocApi, onSearch, onResult, state, textareaRef };

package/src/components/base/hsInput/src/hsInput.vue

@@ -0,0 +1,40 @@
+<template>
+	<el-input v-model="innerValue" ref="inputRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-input>
+</template>
+
+<script setup lang="ts" name="hsInput">
+import { ref, onMounted, Ref, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [String, Number],
+		default: '',
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<string | number>(
+	() => props.value,
+	(val: string | number) => emit('update:value', val)
+);
+// 获取ref
+const inputRef: Ref<HTMLInputElement | null> = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(inputRef, instance);
+});
+
+function activeElement() {
+	return inputRef.value?.ref;
+}
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed, activeElement });
+</script>

package/src/components/base/hsInput/useInputEvents.ts

@@ -0,0 +1,52 @@
+/**
+ * 
+ * @param emit 
+ * @returns 
+ * 1. 向外暴露一个函数（useInputEvents），函数接收一个emit函数
+ */
+export function useInputEvents(emit: (event: "input" | "update:value" | "blur" | "focus" | "change" | "clear", data?: unknown) => void) {
+  /**
+   * 
+   * @param event 
+   * 1. Define the event blur
+   */
+  const handleBlur = (event: Event) => {
+    emit('blur', event);
+  };
+  /**
+ * 
+ * @param event 
+ * 2. Define the event focus
+ */
+  const handleFocus = (event: Event) => {
+    emit('focus', event);
+  };
+  /**
+ * 
+ * 3. Define the event change
+ */
+  const handleChange = (value: string | number) => {
+    emit('change', value);
+  };
+  /**
+* 
+* 4. Define the event input
+*/
+  const handleInput = (value: string | number) => {
+    emit('input', value);
+  };
+  /**
+* 
+* 5. Define the event clear
+*/
+  const handleClear = () => {
+    emit('clear');
+  };
+  return {
+    handleBlur,
+    handleFocus,
+    handleChange,
+    handleInput,
+    handleClear,
+  };
+}

package/src/components/base/hsInputNumber/src/hsInputNumber.vue

@@ -0,0 +1,31 @@
+<template>
+	<el-input-number v-model="innerValue" ref="inputNumberRef"> </el-input-number>
+</template>
+
+<script setup lang="ts" name="hsInputNumber">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+
+const props = defineProps({
+	value: {
+		type: [Number],
+		default: 0,
+	},
+});
+
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<number>(
+	() => props.value,
+	(val: number) => emit('update:value', val)
+);
+
+const inputNumberRef = ref<HTMLInputElement | null>(null);
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(inputNumberRef, instance);
+});
+
+defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsPopconfirm/src/hsPopconfirm.vue

@@ -0,0 +1,15 @@
+<template>
+	<el-popconfirm ref="popconfirmRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-popconfirm>
+</template>
+
+<script setup lang="ts" name="hsPopconfirm">
+import { ref } from 'vue';
+// 获取ref
+const popconfirmRef = ref(null);
+// 暴露给外部的 ref
+defineExpose({ popconfirmRef });
+</script>

package/src/components/base/hsPopover/src/hsPopover.vue

@@ -0,0 +1,22 @@
+<template>
+	<el-popover ref="popoverRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-popover>
+</template>
+
+<script setup lang="ts" name="hsPopover">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+// 获取ref
+const popoverRef = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(popoverRef, instance);
+});
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsProgress/src/hsProgress.vue

@@ -0,0 +1,15 @@
+<template>
+	<el-progress ref="progressRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-progress>
+</template>
+
+<script setup lang="ts" name="hsProgress">
+import { ref } from 'vue';
+// 获取ref
+const progressRef = ref(null);
+// 暴露给外部的 ref
+defineExpose({ progressRef });
+</script>

package/src/components/base/hsRadio/src/hsRadio.vue

@@ -0,0 +1,32 @@
+<template>
+	<el-radio v-model="innerValue" ref="radioRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-radio>
+</template>
+
+<script setup lang="ts" name="hsRadio">
+import { ref } from 'vue';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [String, Number, Boolean],
+		default: '',
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<string | number | boolean>(
+	() => props.value,
+	(val: string | number | boolean) => emit('update:value', val)
+);
+// 获取ref
+const radioRef = ref<HTMLElement | null>(null);
+// 获取实例方法
+// const instance = getCurrentInstance();
+
+// 暴露给外部的 ref
+defineExpose({ radioRef });
+</script>

package/src/components/base/hsRadio/src/hsRadioButton.vue

@@ -0,0 +1,18 @@
+<template>
+	<el-radio-button ref="radioButtonRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-radio-button>
+</template>
+
+<script setup lang="ts" name="hsRadioButton">
+import { ref } from 'vue';
+// 获取ref
+const radioButtonRef = ref<HTMLElement | null>(null);
+// 获取实例方法
+// const instance = getCurrentInstance();
+
+// 暴露给外部的 ref
+defineExpose({ radioButtonRef });
+</script>

package/src/components/base/hsRadio/src/hsRadioGroup.vue

@@ -0,0 +1,32 @@
+<template>
+	<el-radio-group v-model="innerValue" ref="radioGroupRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-radio-group>
+</template>
+
+<script setup lang="ts" name="hsRadioGroup">
+import { ref } from 'vue';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [String, Number, Boolean],
+		default: '',
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<string | number | boolean>(
+	() => props.value,
+	(val: string | number | boolean) => emit('update:value', val)
+);
+// 获取ref
+const radioGroupRef = ref<HTMLElement | null>(null);
+// 获取实例方法
+// const instance = getCurrentInstance();
+
+// 暴露给外部的 ref
+defineExpose({ radioGroupRef });
+</script>

package/src/components/base/hsRate/src/hsRate.vue

@@ -0,0 +1,33 @@
+<template>
+	<el-rate v-model="innerValue" ref="rateRef">
+	</el-rate>
+</template>
+
+<script setup lang="ts" name="hsRate">
+import { ref, onMounted, Ref, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [Number],
+		default: 0,
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<number>(
+	() => props.value,
+	(val: number) => emit('update:value', val)
+);
+// 获取ref
+const rateRef: Ref<HTMLInputElement | null> = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(rateRef, instance);
+});
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed });
+</script>