feat: 新增Ellipsis组件

src/components/Ellipsis/index.vue

@@ -0,0 +1,168 @@
+<template>
+  <Tooltip ref="tooltipRef" placement="top" v-bind="props.tooltip">
+    <template v-if="props.tooltip" #title>
+      <slot></slot>
+      <slot name="tooltip"></slot>
+    </template>
+    <span
+      ref="triggerRef"
+      v-bind="triggerAttrs()"
+      @click="handleClickRef"
+      @mouseenter="
+                [
+                    props.expandTrigger === 'click'
+                        ? getTooltipDisabled()
+                        : undefined,
+                ]
+            "
+    >
+            <slot></slot>
+        </span>
+  </Tooltip>
+</template>
+
+<script lang="ts" setup>
+import { Tooltip, TooltipProps } from 'ant-design-vue';
+
+import { computed, mergeProps, PropType, ref, useAttrs } from 'vue';
+
+// define class name
+const jEllipsis = 'j-ellipsis';
+const jEllipsisCursorClass = 'j-ellipsis-cursor';
+const jEllipsisLineClampClass = 'j-ellipsis-line-clamp';
+
+const props = defineProps({
+  /** expand by */
+  expandTrigger: {
+    type: String as PropType<'click'>,
+    default: undefined,
+  },
+  /** multiline ellipsis */
+  lineClamp: {
+    type: [Number, String] as PropType<string | number>,
+    default: 1,
+  },
+  /** a-tooltip props */
+  tooltip: {
+    type: [Boolean, Object] as PropType<TooltipProps | boolean>,
+    default: true,
+  },
+});
+
+const attrs = useAttrs();
+
+function triggerAttrs() {
+  return {
+    ...mergeProps(attrs, {
+      class: [
+        jEllipsis,
+        props.lineClamp !== undefined
+          ? jEllipsisLineClampClass
+          : undefined,
+        props.expandTrigger === 'click'
+          ? jEllipsisCursorClass
+          : undefined,
+      ],
+      style: ellipsisStyleRef.value,
+    }),
+  };
+}
+
+const expandedRef = ref(false);
+const tooltipRef = ref<HTMLElement | null>(null);
+const triggerRef = ref<HTMLElement | null>(null);
+
+const ellipsisStyleRef = computed(() => {
+  const { lineClamp } = props;
+  const { value: expanded } = expandedRef;
+  if (lineClamp !== undefined) {
+    return {
+      textOverflow: '',
+      '-webkit-line-clamp': expanded ? '' : lineClamp,
+    };
+  } else {
+    return {
+      textOverflow: expanded ? '' : 'ellipsis',
+      '-webkit-line-clamp': '',
+    };
+  }
+});
+
+function syncCursorStyle(trigger: HTMLElement, tooltipDisabled: boolean): void {
+  if (props.expandTrigger === 'click' && !tooltipDisabled) {
+    syncTriggerClass(trigger, jEllipsisCursorClass, 'add');
+  } else {
+    syncTriggerClass(trigger, jEllipsisCursorClass, 'remove');
+  }
+}
+
+function getTooltipDisabled(): boolean {
+  let tooltipDisabled = false;
+  const { value: expanded } = expandedRef;
+  if (expanded) return true;
+  const { value: trigger } = triggerRef;
+  if (trigger) {
+    syncEllipsisStyle(trigger);
+    tooltipDisabled = trigger.scrollHeight <= trigger.offsetHeight;
+
+    syncCursorStyle(trigger, tooltipDisabled);
+  }
+  return tooltipDisabled;
+}
+
+const handleClickRef = computed(() => {
+  return props.expandTrigger === 'click'
+    ? () => {
+      const { value: expanded } = expandedRef;
+      expandedRef.value = !expanded;
+    }
+    : undefined;
+});
+
+function syncEllipsisStyle(trigger: HTMLElement): void {
+  if (!trigger) return;
+  const latestStyle = ellipsisStyleRef.value;
+  const lineClampClass = jEllipsisLineClampClass;
+  if (props.lineClamp !== undefined) {
+    syncTriggerClass(trigger, lineClampClass, 'add');
+  } else {
+    syncTriggerClass(trigger, lineClampClass, 'remove');
+  }
+  for (const key in latestStyle) {
+    if ((trigger.style as any)[key] !== (latestStyle as any)[key]) {
+      (trigger.style as any)[key] = (latestStyle as any)[key];
+    }
+  }
+}
+
+function syncTriggerClass(
+  trigger: HTMLElement,
+  styleClass: string,
+  action: 'add' | 'remove',
+): void {
+  if (action === 'add') {
+    if (!trigger.classList.contains(styleClass)) {
+      trigger.classList.add(styleClass);
+    }
+  } else {
+    if (trigger.classList.contains(styleClass)) {
+      trigger.classList.remove(styleClass);
+    }
+  }
+}
+</script>
+<style scoped lang='less'>
+.j-ellipsis {
+  overflow: hidden;
+  vertical-align: bottom;
+}
+
+.j-ellipsis-cursor {
+  cursor: pointer;
+}
+
+.j-ellipsis-line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+</style>

src/components/index.ts

@@ -10,6 +10,7 @@ import NormalUpload from './NormalUpload/index.vue'
 import FileFormat from './FileFormat/index.vue'
 import JUpload from './JUpload/index.vue'
 import { BasicLayoutPage, BlankLayoutPage, PageContainer } from './Layout'
+import Ellipsis from './Ellipsis/index.vue'
 
 export default  {
     install(app: App) {
@@ -26,5 +27,6 @@ export default  {
             .component('BasicLayoutPage', BasicLayoutPage)
             .component('BlankLayoutPage', BlankLayoutPage)
             .component('PageContainer', PageContainer)
+            .component('Ellipsis', Ellipsis)
     }
 }

src/views/rule-engine/Scene/Save/asstes.ts

@@ -0,0 +1,14 @@
+import { getImage } from '@/utils/comm'
+
+export const TriggerHeaderIcon = {
+  time: getImage('/scene/trigger-type-icon/timing.png'),
+  manual: getImage('/scene/trigger-type-icon/manual.png'),
+  device: getImage('/scene/trigger-type-icon/device.png')
+}
+
+export const TriggerListIcon = {
+  time: getImage('/scene/scene-timer.png'),
+  manual: getImage('/scene/scene-hand.png'),
+  device: getImage('/scene/scene-device.png')
+}
+

src/views/rule-engine/Scene/Save/index.vue

@@ -1,7 +1,13 @@
 <template>
   <page-container>
     <div class='scene-warp'>
-      <div></div>
+      <div class='header'>
+
+        <div class='type'>
+          <img :src='TriggerHeaderIcon[data.triggerType]' />
+          {{ keyByLabel[data.triggerType] }}
+        </div>
+      </div>
       <a-form ref='sceneForm' :model='data'>
 
       </a-form>
@@ -18,6 +24,8 @@
 
 <script setup lang='ts' name='Scene'>
 import { useSceneStore } from '@/store/scene'
+import { TriggerHeaderIcon } from './asstes'
+import { keyByLabel } from '../typings'
 
 const { getDetail, data } = useSceneStore()
 const route = useRoute();
@@ -31,5 +39,24 @@ getDetail(route.query.id as string)
 .scene-warp {
   padding: 24px;
   background-color: #fff;
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 16px;
+
+    .type {
+      display: flex;
+      align-items: center;
+      min-width: 100px;
+      margin-left: 16px;
+      padding: 4px 8px;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 14px;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      border-radius: 2px;
+    }
+  }
 }
 </style>

src/views/rule-engine/Scene/typings.ts

@@ -1,3 +1,9 @@
+export const keyByLabel = {
+  manual: '手动触发',
+  timer: '定时触发',
+  device: '设备触发',
+}
+
 type State = {
   value: string;
   text: string;