@skyfox2000/webui 0.1.0

package/src/components/common/icon/index.vue

@@ -0,0 +1,426 @@
+<script setup lang="ts">
+/**
+ * 图标组件
+ * @component
+ * @name Icon
+ * @summary 提供一个可点击的图标按钮，支持自动切换图标，发送点击事件等功能。
+ */
+
+import { ref, computed, inject, watch, useAttrs } from 'vue';
+import Tooltip from '../tooltip/index.vue';
+import { getIconTransform } from '@skyfox2000/webbase';
+
+// 关闭自动继承属性到根元素
+defineOptions({
+   inheritAttrs: false,
+});
+const attrs = useAttrs(); // 手动获取 $attrs
+
+const props = defineProps({
+   /**
+    * 点击后自动切换
+    * @props
+    * @name autoSwitch
+    * @type {boolean}
+    * @default true
+    */
+   autoSwitch: {
+      type: Boolean,
+      default: true,
+   },
+   /**
+    * 提示标题
+    * @props
+    * @name tiptext
+    * @type {string}
+    */
+   tiptext: {
+      type: String,
+   },
+   /**
+    * 提示尺寸
+    * @props
+    * @name tipsize
+    * @type {string}
+    */
+   tipsize: {
+      type: String,
+   },
+   /**
+    * 提示背景色
+    * @props
+    * @name tipcolor
+    * @type {string}
+    */
+   tipcolor: {
+      type: String,
+   },
+   /**
+    * 提示显示位置
+    * @props
+    * @name placement
+    * @type {string}
+    * @default 'top'
+    */
+   placement: {
+      type: String,
+      default: 'top',
+   },
+   /**
+    * IconFont图标
+    * @props
+    * @name icon
+    * @type {string}
+    * @summary IconFont图标显示，使用sym-开头的使用svg模式显示
+    */
+   icon: {
+      type: String,
+   },
+   /**
+    * IconFont图标组
+    * @props
+    * @name icons
+    * @type {Array<string>}
+    * @summary IconFont图标组显示，使用sym-开头的使用svg模式显示
+    * @default []
+    */
+   icons: {
+      type: Array<string>,
+      default: () => [],
+   },
+   /**
+    * 图标索引
+    * @props
+    * @name iconIndex
+    * @type {number}
+    * @default 0
+    */
+   iconIndex: {
+      type: Number,
+      default: 0,
+   },
+   /**
+    * 可点击，鼠标手
+    * @props
+    * @name clickable
+    * @type {boolean}
+    * @default false
+    */
+   clickable: {
+      type: Boolean,
+      default: false,
+   },
+   /**
+    * 点击事件
+    * @props
+    * @name clickEvent
+    * @summary 格式 "空间名#事件名"，空间名和事件名用#分隔，事件名用.分隔
+    * @type {string}
+    */
+   clickEvent: {
+      type: String,
+   },
+   /**
+    * 点击传输数据
+    * @props
+    * @name data
+    * @summary 点击事件传输的默认数据
+    * @type {object|string}
+    */
+   data: {
+      type: [Object, String],
+   },
+   /**
+    * 字体大小
+    * @props
+    * @name size
+    * @summary 字体大小
+    * @type {string}
+    * @default 20px
+    */
+   fontsize: {
+      type: String, // 大小
+      default: '20px',
+   },
+   /**
+    * 空间大小
+    * @props
+    * @name size
+    * @summary 空间大小
+    * @type {string, [string, string]}
+    * @default 20px
+    */
+   size: {
+      type: [String, Array<String>], // 大小
+      default: () => ['20px', '20px'],
+   },
+   /**
+    * 图标位置
+    * @props
+    * @name position
+    * @summary 图标位置
+    * @type {[string|number, string|number]}
+    */
+   position: {
+      type: Array<string | number>, // 图标位置
+   },
+   /**
+    * 旋转中心
+    * @props
+    * @name center
+    * @summary 旋转中心
+    * @type {string}
+    */
+   center: {
+      type: String, // 旋转中心
+   },
+   /**
+    * 指定角度
+    * @props
+    * @name angle
+    * @summary 指定角度
+    * @type {number}
+    */
+   angle: {
+      type: Number, // 指定角度
+   },
+   /**
+    * 颜色
+    * @props
+    * @name color
+    * @summary 颜色
+    * @type {string}
+    */
+   color: {
+      type: String, // 颜色
+      default: '',
+   },
+   /**
+    * 样式
+    * @props
+    * @name hovercolor
+    * @summary 样式
+    * @type {string}
+    */
+   className: {
+      type: String, // 样式
+      default: '',
+   },
+   /**
+    * 水平翻转
+    * @props
+    * @name flip
+    * @summary 水平翻转
+    * @type {boolean}
+    * @default false
+    */
+   flip: {
+      type: Boolean, // 水平翻转
+      default: false,
+   },
+   /**
+    * 自动旋转
+    * @props
+    * @name spin
+    * @summary 自动旋转
+    * @type {boolean}
+    * @default false
+    */
+   spin: {
+      type: Boolean, // 自动旋转
+      default: false,
+   },
+});
+
+// 定义组件发出的事件
+const emits = defineEmits([
+   /**
+    * 点击事件
+    * @emits
+    * @name click
+    * @summary 图标按钮点击时触发的事件
+    */
+   'click',
+   /**
+    * 图标索引更新
+    * @emits
+    * @name update:iconIndex
+    * @summary 图标索引发生变化时触发的事件
+    * @param {number} index - 新的图标索引
+    */
+   'update:iconIndex',
+]);
+
+const boxSize = computed(() => {
+   if (Array.isArray(props.size)) return props.size;
+   else {
+      let size = props.size;
+      return [size, size];
+   }
+});
+
+const curIcon = ref(props.icon);
+const curIndex = ref(props.iconIndex);
+
+watch(
+   () => props.icon,
+   (newVal) => {
+      curIcon.value = newVal;
+   },
+);
+
+watch(
+   () => props.iconIndex,
+   (newVal) => {
+      curIndex.value = newVal;
+      curIcon.value = props.icons[newVal];
+   },
+);
+
+const iconIndex = computed<number>({
+   get() {
+      return curIndex.value;
+   },
+   set(val) {
+      curIndex.value = val;
+      emits('update:iconIndex', curIndex.value);
+   },
+});
+
+if (props.icons.length > 0) {
+   iconIndex.value = iconIndex.value >= props.icons.length ? 0 : iconIndex.value;
+   curIcon.value = props.icons[curIndex.value];
+} else {
+   curIcon.value = props.icon;
+}
+
+const onClicked = (e: MouseEvent) => {
+   e.stopPropagation();
+   if (props.clickEvent) {
+      const eventNames = props.clickEvent.split('#');
+      if (eventNames.length === 2) {
+         const $Bus = inject('$' + eventNames[0]) as any;
+         $Bus.$emit(eventNames[1], props.data);
+      }
+   }
+   if (props.autoSwitch && props.icons.length > 0) {
+      iconIndex.value = (iconIndex.value + 1) % props.icons.length;
+      curIcon.value = props.icons[curIndex.value];
+   }
+
+   emits('click');
+};
+
+const getIconClass = (): string => {
+   let className = '';
+   if (props.spin) {
+      className += 'rotate';
+   }
+   if (props.flip) {
+      className += ' flip';
+   }
+   return className;
+};
+</script>
+<template>
+   <Tooltip
+      :title="props.tiptext"
+      :disabled="props.tiptext ? undefined : 'disabled'"
+      :color="tipcolor"
+      :placement="placement"
+      :size="tipsize"
+   >
+      <div
+         class="re-icon-container"
+         v-if="curIcon"
+         :style="{
+            width: boxSize[0].toString(),
+            height: boxSize[1].toString(),
+         }"
+      >
+         <!--
+      使用动态 class 绑定，通过 icon-class 控制图标样式，curIcon 是计算属性，
+      可以根据 iconIndex 控制图标显示，点击图标时执行 onClicked 方法
+    -->
+         <i
+            v-bind="attrs"
+            v-if="!curIcon?.startsWith('sym-')"
+            class="re-icon iconfont fontclass"
+            :class="[props.clickable ? 'clickable' : '', 'icon-' + curIcon, getIconClass(), props.className]"
+            :style="{
+               top: props.position ? props.position[1] : 1,
+               left: props.position ? props.position[0] : 0,
+               fontSize: props.fontsize,
+               transformOrigin: props.center ?? 'center center',
+               transform: getIconTransform(props.angle, props.flip),
+               color: props.color,
+            }"
+            aria-hidden="true"
+            @click="onClicked"
+         ></i>
+         <svg
+            v-else
+            v-bind="attrs"
+            class="re-icon symbol"
+            aria-hidden="true"
+            :class="[props.clickable ? 'clickable' : '', getIconClass(), props.className]"
+            :style="{
+               top: props.position ? props.position[1] : 0,
+               left: props.position ? props.position[0] : 0,
+               fontSize: props.fontsize,
+               transformOrigin: props.center ?? 'center center',
+               transform: getIconTransform(),
+               color: props.color,
+            }"
+         >
+            <use :xlink:href="'#icon-' + curIcon.replace('sym-', '')"></use>
+         </svg>
+      </div>
+   </Tooltip>
+</template>
+<style scoped>
+.re-icon-container {
+   position: relative;
+   display: inline-flex;
+   vertical-align: middle;
+   justify-content: center;
+   align-items: center;
+   overflow: hidden;
+}
+
+.re-icon.symbol {
+   position: relative;
+   margin: 5px 0;
+   width: 1em;
+   height: 1em;
+   vertical-align: -0.15em;
+   fill: currentColor;
+   overflow: hidden;
+}
+
+.re-icon.fontclass {
+   position: relative;
+   font-style: normal;
+   -webkit-font-smoothing: antialiased;
+   -webkit-text-stroke-width: 0.2px;
+   -moz-osx-font-smoothing: grayscale;
+}
+
+.re-icon[disabled] {
+   pointer-events: none;
+   cursor: not-allowed;
+   color: #666;
+}
+
+.clickable {
+   cursor: pointer;
+}
+
+.rotate {
+   animation: rotate 2s linear infinite;
+}
+
+.flip {
+   transform: scaleX(-1);
+}
+</style>

package/src/components/common/icon/layoutIcon.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { SERVER_HOST } from '@skyfox2000/fapi';
+import { createFromIconfont } from '@skyfox2000/webbase';
+
+const props = defineProps({
+   icon: {
+      type: String,
+   },
+   icons: {
+      type: Array<string>,
+   },
+});
+/**
+ * 基座图标加载
+ * @returns 基座图标集
+ */
+const LayoutIcon = () => {
+   return createFromIconfont({
+      iconUrl: `${SERVER_HOST.MICROLAYOUT_ICONS}`,
+      monoColor: true,
+      icon: props.icon,
+      icons: props.icons,
+   });
+};
+
+/**
+ * 基座图标集
+ */
+const LayoutIcons = LayoutIcon();
+</script>
+<template>
+   <LayoutIcons v-if="icon || icons" :icon="icon" :icons="icons" v-bind="$attrs" />
+</template>

package/src/components/common/icon/projectIcon.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { SERVER_HOST } from '@skyfox2000/fapi';
+import { createFromIconfont } from '@skyfox2000/webbase';
+
+const props = defineProps({
+   icon: {
+      type: String,
+   },
+   icons: {
+      type: Array<string>,
+   },
+   iconUrl: {
+      type: String,
+   },
+   monoColor: {
+      type: Boolean,
+      default: true,
+   },
+});
+
+/**
+ * 项目图标加载
+ * @returns 项目图标集
+ */
+const ProjectIcon = () => {
+   return createFromIconfont({
+      iconUrl: `${props.iconUrl ?? SERVER_HOST.PROJECT_ICONS ?? SERVER_HOST.TOOL_ICONS}`,
+      monoColor: props.monoColor,
+      icon: props.icon,
+      icons: props.icons,
+   });
+};
+
+/**
+ * 加载全部项目图标
+ */
+const ProjectIcons = ProjectIcon();
+</script>
+<template>
+   <ProjectIcons v-if="icon || icons" :icon="icon" :icons="icons" v-bind="$attrs" />
+</template>

package/src/components/common/icon/toolIcon.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { SERVER_HOST } from '@skyfox2000/fapi';
+import { createFromIconfont } from '@skyfox2000/webbase';
+
+const props = defineProps({
+   icon: {
+      type: String,
+   },
+   icons: {
+      type: Array<string>,
+   },
+});
+/**
+ * 表格工具图标加载
+ * @returns 表格工具图标加载
+ */
+const ToolIcon = () => {
+   return createFromIconfont({
+      iconUrl: `${SERVER_HOST.TOOL_ICONS}`,
+      monoColor: true,
+      icon: props.icon,
+      icons: props.icons,
+   });
+};
+
+/**
+ * 表格工具图标集
+ */
+const ToolIcons = ToolIcon();
+</script>
+<template>
+   <ToolIcons v-if="icon || icons" :icon="icon" :icons="icons" v-bind="$attrs" />
+</template>

package/src/components/common/index.ts

@@ -0,0 +1,19 @@
+import Button from './button/index.vue';
+export { Button };
+import Tooltip from './tooltip/index.vue';
+export { Tooltip };
+
+import AppIcon from './icon/appicon.vue';
+export { AppIcon };
+import Fullscreen from './icon/fullscreen.vue';
+export { Fullscreen };
+import Helper from './icon/helper.vue';
+export { Helper };
+import Icon from './icon/index.vue';
+export { Icon };
+import LayoutIcon from './icon/layoutIcon.vue';
+export { LayoutIcon };
+import ProjectIcon from './icon/projectIcon.vue';
+export { ProjectIcon };
+import ToolIcon from './icon/toolIcon.vue';
+export { ToolIcon };

package/src/components/common/tooltip/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { CSSProperties } from 'vue';
+import { Tooltip } from 'ant-design-vue';
+const props = defineProps<{
+  size?: string;
+}>();
+
+const overlayStyle: CSSProperties = {
+}
+
+const overlayInnerStyle: CSSProperties = {
+}
+
+if (props.size === 'small') {
+  overlayInnerStyle.fontSize = '12px';
+  overlayInnerStyle.padding = '4px 6px';
+  overlayInnerStyle.minHeight = '26px';
+  overlayStyle.height = '30px';
+}
+</script>
+<template>
+  <Tooltip :overlayInnerStyle="overlayInnerStyle" :overlayStyle="overlayStyle">
+    <slot />
+  </Tooltip>
+</template>