@neatui/vue 2.4.0 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "2.4.0",
+  "version": "2.5.1",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^11.1.6",
+    "@types/sortablejs": "^1.15.8",
     "postcss-scss": "^4.0.9",
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
@@ -36,8 +37,8 @@
     "rollup": "^4.18.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-vue": "^6.0.0",
+    "sortablejs": "^1.15.6",
     "swiper": "^11.0.4",
-    "vue-cropper": "^0.6.4",
-    "vuedraggable": "^4.1.0"
+    "vue-cropper": "^0.6.4"
   }
 }

package/src/components/basic/IDraggable.vue

@@ -1,84 +1,106 @@
 <template>
-  <ul>
-    <li
-      v-for="(item, idx) in list || []"
-      :key="idx"
-      class="pr drag-page-move n-sm"
-      draggable="true"
-      @dragstart.self="fMoveSta($event, list, idx)"
-      @dragend.self="fMoveEnd($event, list, idx)"
-      @dragenter.self="fMoveInt($event, list, idx)"
-      @dragover.prevent="fMoveIng($event)"
-      @dragleave="fMoveOut($event)"
-    >
+  <ul ref="listRef" class="drag-list">
+    <li v-for="(item, idx) in props.lists" :key="item.id ?? item.field ?? idx" class="pr drag-page-move">
       <slot :item="item" :idx="idx">{{ item.label }}</slot>
     </li>
   </ul>
 </template>
 
 <script setup lang="ts">
-  import { reactive, PropType } from 'vue';
+  import { ref, PropType, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+  import Sortable, { SortableEvent } from 'sortablejs';
+
   const props = defineProps({
-    list: {
+    lists: {
       type: Array as PropType<any[]>,
       default: () => []
     }
   });
-  const state: any = reactive({});
+  const emit = defineEmits(['update:lists']);
 
-  // 按下
-  const fMoveSta = (e: any, arr: any, idx: any) => {
-    state.__page_moveing = 1;
-    state.__page_moveStaNode = { e, arr, idx };
-  };
-  // 移动
-  const fMoveIng = (e: any) => {
-    if (state.__page_moveing) {
-      const _h = e?.target?.getBoundingClientRect()?.height || 0;
-      const _v = _h / 2 > 0 ? _h / 2 : 0;
-      state.__page_moveEndNodeIsNext = e?.layerY > _v ? 1 : 0;
-      console.log(40, e, _v, e?.layerY > _v ? 'next' : 'prev');
-      e?.target?.setAttribute('data-ins', e?.layerY > _v ? 'next' : 'prev');
-    }
-  };
-  // 移入
-  const fMoveInt = (e: any, arr: any, idx: any, page: any = '') => {
-    if (state.__page_moveing) {
-      state.__page_moveEndNode = { e, arr, idx, page };
-    }
-  };
-  // 移出
-  const fMoveOut = (e: any) => {
-    if (state.__page_moveing) {
-      e?.target?.removeAttribute('data-ins');
-    }
-  };
-  // 松开
-  const fMoveEnd = (_e: any, arr: any, i2: any) => {
-    if (state.__page_moveing) {
-      if (state.__page_moveEndNode) {
-        const [item] = arr.splice(i2, 1);
-        let idx = state.__page_moveEndNode?.idx || 0;
-        if (state.__page_moveEndNodeIsNext && i2 >= idx) {
-          idx = idx + 1;
-        }
-        if (!state.__page_moveEndNodeIsNext && i2 < idx) {
-          idx = idx - 1;
-        }
-        state.__page_moveEndNode?.arr?.splice(idx, 0, item);
-        fMoveOut(state.__page_moveEndNode?.e);
+  const listRef = ref<HTMLElement | null>(null);
+  let sortable: Sortable | null = null;
+
+  // 添加调试日志
+  watch(
+    () => props.lists,
+    (newVal, oldVal) => {
+      console.log('IDraggable props.lists changed:', {
+        newLength: newVal?.length,
+        oldLength: oldVal?.length,
+        newVal: newVal?.map((item) => item.label || item.field),
+        oldVal: oldVal?.map((item) => item.label || item.field)
+      });
+    },
+    { deep: true }
+  );
+
+  onMounted(() => {
+    nextTick(() => {
+      if (listRef.value) {
+        sortable = Sortable.create(listRef.value, {
+          animation: 200,
+          ghostClass: 'drag-ghost',
+          chosenClass: 'drag-chosen',
+          dragClass: 'drag-dragging',
+          onEnd(evt: SortableEvent) {
+            console.log('Sortable onEnd:', { oldIndex: evt.oldIndex, newIndex: evt.newIndex });
+
+            if (evt.oldIndex !== undefined && evt.newIndex !== undefined && evt.oldIndex !== evt.newIndex) {
+              // 创建新的数组顺序
+              const newList = [...props.lists];
+              const moved = newList.splice(evt.oldIndex, 1)[0];
+              newList.splice(evt.newIndex, 0, moved);
+
+              console.log(
+                'Emitting new list:',
+                newList.map((item) => item.label || item.field)
+              );
+
+              // 通知父组件更新数据
+              emit('update:lists', newList);
+            }
+          }
+        });
       }
-      state.__page_moveing = 0;
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (sortable) {
+      sortable.destroy();
+      sortable = null;
     }
-  };
+  });
 </script>
+
 <style lang="scss">
+  .drag-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
   .drag-page-move {
-    &[data-ins='prev'] {
-      box-shadow: inset 0 1px 0 0 #000;
-    }
-    &[data-ins='next'] {
-      box-shadow: inset 0 -1px 0 0 #000;
+    cursor: move;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.02);
     }
   }
+  .drag-ghost {
+    opacity: 0.4;
+    background: rgba(0, 0, 0, 0.05);
+    border: 2px dashed #ddd;
+  }
+  .drag-chosen {
+    background: rgba(24, 144, 255, 0.08);
+  }
+  .drag-dragging {
+    opacity: 0.8;
+    background: #fff;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    z-index: 1000;
+  }
 </style>

package/src/components/basic/IFollowView.vue

@@ -3,24 +3,24 @@
     <slot>
       <button ui-btn="@a s case :border"><i class="icon icon-dropdown"></i></button>
     </slot>
-  </div>
-  <Teleport to="#ifollow" v-if="$slots.tips">
-    <div
-      ref="tip"
-      :class="tipClass"
-      :style="`position: fixed; pointer-events: none; ${tipStyle}`"
-      ui-tips="@a"
-      :ui-tips-view="state.show ? 1 : 0"
-      @mouseover="hovershow"
-      @mouseout="hoverhide"
-      @click="clickhide"
-    >
-      <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle" @mousedown="downdom">
-        <slot name="tips"></slot>
-        <div v-if="arrow" ui-tips-arrow="" v-bind="arrow"></div>
+    <Teleport to="#ifollow" v-if="$slots.tips">
+      <div
+        ref="tip"
+        :class="tipClass"
+        :style="`position: fixed; pointer-events: none; ${tipStyle}`"
+        ui-tips="@a"
+        :ui-tips-view="state.show ? 1 : 0"
+        @mouseover="hovershow"
+        @mouseout="hoverhide"
+        @click="clickhide"
+      >
+        <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle" @mousedown="downdom">
+          <slot name="tips"></slot>
+          <div v-if="arrow" ui-tips-arrow="" v-bind="arrow"></div>
+        </div>
       </div>
-    </div>
-  </Teleport>
+    </Teleport>
+  </div>
 </template>
 <script setup lang="ts">
   import { reactive, ref, onMounted, onUnmounted, watch } from 'vue';

package/src/components/form/ImgUpload.vue

@@ -1,13 +1,13 @@
 <template>
   <div ui-flex="row" class="mc-upload">
     <template v-if="files && files.length > 0">
-      <draggable :list="files" @update="update" :force-fallback="false" item-key="name" chosen-class="chosen" animation="200" class="mc-upload-img">
-        <template #item="{ element, index }">
+      <IDraggable v-model:lists="files" @update:lists="update" class="mc-upload-img">
+        <template #default="{ item: element, idx: index }">
           <div class="mc-upload-img-item">
             <Image :src="element" :files="files" :initialSlide="index" v-bind="$attrs" @delImg="delImg" />
           </div>
         </template>
-      </draggable>
+      </IDraggable>
     </template>
     <template v-if="(!multiple && files && files.length === 0) || (multiple && (!limit || (limit && files && files.length < limit)))">
       <slot>
@@ -33,7 +33,7 @@
 <script setup lang="ts">
   import { ref, watch } from 'vue';
   import { Image, PhotoEditor } from '../display';
-  import draggable from 'vuedraggable';
+  import IDraggable from '../basic/IDraggable.vue';
   import Compressor from 'compressorjs';
   import { Layer, LayerById } from '../basic';
   import { isArray } from '@fekit/utils';

package/src/components/loader/LayerLoader/LayerLoader.vue

@@ -0,0 +1,318 @@
+<template>
+  <div id="layer-loader-root" :path="path" :class="`${!path ? '' : 'pr nl-ms'}`" :ui-lines="path ? line : null">
+    <template v-for="(item, idx) in data" :key="idx">
+      <div
+        ui-flex="row xm"
+        class="fekit-layer-loader-item ux-hover nx-ss r-ss pr z1"
+        :data-move="item._move"
+        :class="`${store.active === paths(idx) ? (store.error ? 'bg-risk+o-ss co-risk' : 'bg-main+o-ss co-main fekit-layer-node-active') : ''}${item?.attrs?.hide ? ' o-mm' : ''}`"
+        @mousedown="fMoveSta($event, data, idx, paths(idx))"
+        @mousemove="fMoveIng($event, item, paths(idx), false, item.child?.length && !item.__folding)"
+        @mouseout="fMoveOut($event, paths(idx))"
+        @mouseup="fMoveEnd($event, data, item, idx, paths(idx))"
+      >
+        <div class="hover:co-main" :ui-arrow="`${item.child ? '1' : '0'}`" :ui-folding="item.__folding" @click="item.__folding = item.child && !item.__folding"></div>
+        <div :id="`LID${path.replace(/\./g, '')}-${idx}`" :path="paths(idx)" ui-flex="row lt" class="flex-block ny-ss" @click="store.active = paths(idx)">
+          <slot name="prefix" :item="item" :path="paths(idx)">
+            <i :class="`ml-ss mr-xs o-ms icon icon-model-${!path ? 'label' : item.model || (item.child ? 'area' : 'null')}`"></i>
+          </slot>
+          <slot name="item" :item="item" :path="paths(idx)">
+            <span class="ux-none" ui-omit="1">
+              {{ (item.model === 'text' || (!item.model && !item.child) ? item.value : null) || item.label || word(label(item.model)) || '‐‐' }}{{ item.__folding ? ' ⋯' : '' }}
+            </span>
+          </slot>
+          <slot name="suffix" :item="item" :path="paths(idx)"></slot>
+        </div>
+        <slot name="tools" :data="data" :item="item" :path="paths(idx)">
+          <div ui-flex="row rm" class="layer-loader-tool parent-hover:show fs-xs" :data-model="item.model">
+            <div ui-tips="@a co:well ux:hover">
+              <button ui-btn="@a none s :square">
+                <i class="icon icon-add"></i>
+              </button>
+              <div ui-tips-box="bl">
+                <div class="n-sm nowrap fs-ss">
+                  <ul class="nx-sm-sub ny-ss-sub">
+                    <li class="r-sm ux-hover" @click="fAddArea(item, data, path, idx)">用容器包裹</li>
+                    <li class="b-solid bk-line bb-xs n-no my-ss" v-if="isBoxNode(item.model)"></li>
+                    <li class="r-sm ux-hover" v-if="isBoxNode(item.model)" @click="fAddNode(item, data, path, idx)">添加到内部</li>
+                    <li class="b-solid bk-line bb-xs n-no my-ss"></li>
+                    <li class="r-sm ux-hover" @click="fAddNode(item, data, path, idx, 'prev')">添加到前面</li>
+                    <li class="r-sm ux-hover" @click="fAddNode(item, data, path, idx, 'next')">添加到后面</li>
+                    <li class="b-solid bk-line bb-xs n-no my-ss"></li>
+                    <li class="r-sm ux-hover" @click="fAddNode(item, data, path, idx, 'prev', 1)">复制到前面</li>
+                    <li class="r-sm ux-hover" @click="fAddNode(item, data, path, idx, 'next', 1)">复制到后面</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <button ui-btn="@a none s :square" @click="fDelNode(item, data, idx)"><i class="icon icon-delete"></i></button>
+          </div>
+          <button ui-btn="@a none s :square" class="layer-loader-tool fs-xs" :class="item?.attrs?.hide ? '' : 'parent-hover:show'" @click="fhideNode(item)">
+            <i class="icon" :class="item?.attrs?.hide ? 'icon-hide' : 'icon-view'"></i>
+          </button>
+        </slot>
+      </div>
+      <LayerLoader v-if="item.child && !item.__folding" :data="item.child" :path="paths(idx)" :class="`${item?.attrs?.hide ? ' o-mm' : ''}`">
+        <template #prefix="{ item = {}, path = '' }: any = {}"><slot name="prefix" :item="item" :path="path"></slot></template>
+        <template #item="{ item = {}, path = '' }: any = {}"><slot name="item" :item="item" :path="path"></slot></template>
+        <template #suffix="{ item = {}, path = '' }: any = {}"><slot name="suffix" :item="item" :path="path"></slot></template>
+        <template #tools="{ item = {}, path = '' }: any = {}"><slot name="tools" :item="item" :path="path"></slot></template>
+      </LayerLoader>
+      <div
+        v-if="item.child?.length && !item.__folding"
+        ui-flex="row lm"
+        class="pr z1"
+        style="height: 0.5em"
+        :data-label="(item.model === 'text' || (!item.model && !item.child) ? item.value : null) || item.label || item.model || '‐‐'"
+        :data-move="item._move"
+        @mousemove="fMoveIng($event, item, paths(idx), true)"
+        @mouseout="fMoveOut($event, paths(idx))"
+        @mouseup="fMoveEnd($event, data, item, idx, paths(idx))"
+      ></div>
+    </template>
+  </div>
+</template>
+<script setup lang="ts">
+  import { nextTick, reactive, ref, watch, onMounted } from 'vue';
+  import LayerLoader from './LayerLoader.vue';
+  import { useBaseStore, useWorksStore, storeToRefs } from '@/store';
+  import { deepcopy } from '@fekit/utils';
+  import scrollto from '@fekit/scrollto';
+
+  // 事件定义
+  const store: any = useWorksStore();
+  const base: any = useBaseStore();
+  const { word } = base;
+
+  // 类型定义
+  interface Props {
+    data?: Array<any>;
+    path?: string;
+    line?: boolean;
+  }
+  // 外部入参
+  const props: any = withDefaults(defineProps<Props>(), {
+    data: () => [],
+    path: '',
+    line: true,
+  });
+
+  // 内部状态
+  const state: any = reactive({});
+  const tools: any = ref(null);
+
+  const ph = ref(0);
+  onMounted(() => {
+    const side = document.getElementById('side-layerloader');
+    ph.value = side?.clientHeight || 0;
+  });
+
+  // 计算路径
+  const paths = (idx: number) => {
+    return props.path ? `${props.path}-${idx}` : `${idx}`;
+  };
+
+  function unfoldActivePath(data: any, activePath: any) {
+    if (!activePath) return;
+    const indices = activePath.split('-').map(Number);
+    let cur = data;
+    for (let i = 0; i < indices.length; i++) {
+      const idx = indices[i];
+      if (!cur || !cur[idx]) break;
+      cur[idx].__folding = false;
+      cur = cur[idx].child;
+    }
+  }
+
+  if (!props.path) {
+    watch(
+      () => store.active,
+      (newActive) => {
+        unfoldActivePath(props.data, newActive);
+
+        nextTick(() => {
+          const el = document.getElementById(`LID${newActive.replace(/\./g, '')}`);
+          if (el && !store.isMouseInLayer) {
+            scrollto({
+              el: '#side-layerloader',
+              to: {
+                y: el,
+              },
+              offset: {
+                y: -(ph.value / 2.5),
+              },
+              time: 600,
+            });
+          }
+        });
+      },
+    );
+  }
+
+  // 查找枚举
+  const label = (item: any) => {
+    return base.enums?.sys_models?.find((e: any) => e.value === item)?.label || item;
+  };
+
+  // 是容器节点
+  const isBoxNode = (model: string) => {
+    return !['data', 'text', 'icon', 'code', 'draw'].includes(model);
+  };
+
+  // 添加节点
+  const fAddNode = async (item: any = {}, _data: any = [], _path: any = '', _idx: number = 0, pos: any = null, copy: any = 0) => {
+    if (pos) {
+      if (pos === 'prev') {
+        // 加到前面
+        _data.splice(
+          _idx,
+          0,
+          copy
+            ? deepcopy(item)
+            : {
+                label: '',
+                model: '',
+                value: '',
+                attrs: {},
+              },
+        );
+        store.active = `${_path}-${_idx}`;
+      } else if (pos === 'next') {
+        // 加到后面
+        _data.splice(
+          _idx + 1,
+          0,
+          copy
+            ? deepcopy(item)
+            : {
+                label: '',
+                model: '',
+                value: '',
+                attrs: {},
+              },
+        );
+        store.active = `${_path}-${_idx + 1}`;
+      }
+    } else {
+      if (!item.child) {
+        item.child = [];
+      }
+      await item.child.push({
+        label: '',
+        model: '',
+        value: '',
+        attrs: {},
+      });
+      store.active = `${_path}-${_idx}-${item.child.length - 1}`;
+    }
+  };
+
+  // 包裹容器
+  const fAddArea = (item: any = {}, data: any = [], path: any = '', idx: number = 0, pos: any = null, copy: any = 0) => {
+    // 1. 构造新的 area 节点
+    const areaNode = {
+      model: 'area',
+      attrs: {},
+      child: [item],
+      param: {},
+    };
+    // 2. 替换 data 中的当前节点
+    data.splice(idx, 1, areaNode);
+    // 3. 设置 active 到新节点
+    store.active = path ? `${path}-${idx}` : `${idx}`;
+  };
+
+  // 删除节点
+  const fDelNode = (_item: any = {}, data: any = [], idx: number = 0) => {
+    if (data.length > 0) {
+      data.splice(idx, 1);
+    }
+  };
+  const fhideNode = (_item: any = {}) => {
+    _item.attrs.hide = _item.attrs.hide ? 0 : 1;
+  };
+
+  // 是否同祖
+  function inform(from: string, data: string) {
+    const _form = from.split('.');
+    const _data = data.split('.');
+    return _form.every((part, index) => part === _data[index]);
+  }
+
+  // 按住
+  const fMoveSta = (ev: any, data: any, idx: number, paths: any) => {
+    if (paths.length > 1) {
+      store.layer.moveing = true;
+      store.layer.from = { data, idx, dom: ev?.currentTarget, y: ev.clientY, paths };
+    }
+  };
+  const fMoveIng = (ev: any, item: any, paths: any, isend: boolean = false, ischildandnofold: boolean = false) => {
+    if (!store.layer.moveing || paths.length <= 1) return;
+    const dom = ev?.currentTarget;
+    if (!dom || dom === store.layer.from.dom) return;
+    const rect = dom.getBoundingClientRect();
+    const thirdHeight = rect.height / 3 || 1;
+    const offsetY = ev?.layerY ?? ev?.offsetY ?? 0;
+    let mode = 'prev';
+    if (offsetY > thirdHeight * 2 || isend) {
+      mode = ischildandnofold ? 'inset' : 'next';
+    } else if (offsetY > thirdHeight && offsetY < thirdHeight * 2) {
+      if (isBoxNode(item.model)) {
+        mode = 'inset';
+      }
+    }
+    store.layer.correct = mode;
+    dom.setAttribute('data-ins', mode);
+  };
+  // 移出
+  const fMoveOut = (ev: any, paths: any) => {
+    if (store.layer.moveing && paths.length > 1) {
+      ev?.currentTarget?.removeAttribute('data-ins');
+    }
+  };
+  // 松开
+  const fMoveEnd = (ev: any, data: any, item: any, idx: number, paths: any) => {
+    console.log(207, data, item);
+    if (store.layer.moveing && paths.length > 1 && !inform(store.layer.from.paths, paths)) {
+      const from = store.layer.from;
+      if (from.data && from.dom !== ev?.currentTarget) {
+        const isAdjacent =
+          (store.layer.correct === 'prev' && from.dom?.nextElementSibling === ev?.currentTarget) ||
+          (store.layer.correct === 'next' && from.dom?.previousElementSibling === ev?.currentTarget) ||
+          (store.layer.correct === 'inset' && (from.dom?.contains(ev?.currentTarget) || ev?.currentTarget?.contains(from.dom)));
+
+        if (!isAdjacent) {
+          const [node] = from.data.splice(from.idx, 1);
+          let newPath = paths;
+
+          // Adjust target index if it's after the removed item in the same array
+          let targetIdx = idx;
+          if (from.data === data && from.idx < idx) {
+            targetIdx -= 1;
+          }
+
+          if (store.layer.correct === 'prev') {
+            data.splice(targetIdx, 0, node);
+            newPath = props.path ? `${props.path}-${targetIdx}` : `${targetIdx}`;
+          } else if (store.layer.correct === 'next') {
+            const insertIndex = targetIdx + 1;
+            data.splice(insertIndex, 0, node);
+            newPath = props.path ? `${props.path}-${insertIndex}` : `${insertIndex}`;
+          } else if (store.layer.correct === 'inset') {
+            if (!item.child) item.child = [];
+            const targetIndex = item.child.length;
+            item.child.push(node);
+            newPath = paths + '-' + targetIndex;
+          }
+
+          requestAnimationFrame(() => {
+            store.active = newPath;
+          });
+        }
+      }
+    }
+
+    ev?.currentTarget?.removeAttribute('data-ins');
+    store.layer.moveing = false;
+  };
+</script>

package/src/components/loader/LayerLoader/index.ts

@@ -0,0 +1,2 @@
+import LayerLoader from './LayerLoader.vue';
+export default LayerLoader;

package/src/components/loader/LayerLoader/style.scss

@@ -0,0 +1,77 @@
+.fekit-layer-loader-item {
+  user-select: none;
+  line-height: 1.2;
+}
+
+// 箭头
+[ui-arrow] {
+  position: relative;
+  width: 1em;
+  height: 1em;
+  left: 0.1em;
+
+  // &[ui-arrow~='0'] {
+  //   &::before {
+  //     position: absolute;
+  //     display: inline-block;
+  //     content: '';
+  //     width: 0.5em;
+  //     height: 0.5em;
+  //     border: 1px solid currentColor;
+  //     top: 0.25em;
+  //     left: 0.3em;
+  //     border-radius: 50%;
+  //   }
+  // }
+  &[ui-arrow~='0'] {
+    height: 1px;
+    border-bottom: 1px dotted var(--co-case);
+    position: relative;
+    left: -5px;
+  }
+
+  &[ui-arrow~='1'] {
+    &::before {
+      position: absolute;
+      display: inline-block;
+      content: '';
+      width: 0;
+      height: 0;
+      border-width: 0.35em 0 0.35em 0.35em;
+      border-style: solid;
+      border-color: transparent;
+      border-left-color: transparent;
+      border-left-color: currentColor;
+      top: 0.2em;
+      left: 0.35em;
+      transform: rotate(90deg);
+      border-radius: 25%;
+    }
+  }
+
+  &[ui-folding~='true']::before {
+    transform: rotate(0deg);
+  }
+}
+
+// 线条
+[ui-lines] {
+  position: relative;
+  &::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 5px;
+    height: 100%;
+    left: 0.85em;
+
+    border-left: 1px dotted var(--co-case);
+    border-bottom: 1px dotted var(--co-case);
+  }
+}
+
+.fekit-layer-node-active {
+  .layer-loader-tool {
+    opacity: 1;
+  }
+}