@neatui/nuxt 0.1.0 → 1.0.1

package/src/components/loader/FormLoader/FormRender@v3.vue.backup

@@ -0,0 +1,4 @@
+<template>
+  <div></div>
+</template>
+<script setup lang="ts"></script>

package/src/components/loader/FormLoader/NodeLoader.vue

@@ -0,0 +1,85 @@
+<template>
+  <template v-for="(item, index) in $nodes" :key="item.paths">
+    <div class="fekit-node-loader" :data-level="level" :data-index="index" :data-paths="item.paths" v-bind="item.attrs" v-on="item.$events" v-html="item.value"></div>
+    <NodeLoader v-if="item.child" :nodes="item.child" :level="$level" :index="index" :paths="item.paths" />
+  </template>
+</template>
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import NodeLoader from './NodeLoader.vue';
+
+  interface NodeProps {
+    label?: string | ((data: any) => string);
+    field?: string | ((data: any) => string);
+    model?: string | ((data: any) => string);
+    attrs?: Record<string, any> | ((data: any) => Record<string, any>);
+    clear?: boolean | ((data: any) => boolean);
+    media?: string | ((data: any) => string);
+    value?: any | ((data: any) => any);
+    event?: Record<string, any> | ((data: any) => Record<string, any>);
+    child?: NodeProps[];
+  }
+
+  interface Props {
+    nodes: NodeProps[];
+    level?: number;
+    index?: number;
+    paths?: string;
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    nodes: () => [],
+    level: 0,
+    index: 0,
+    paths: '',
+  });
+
+  const $nodes = computed(() => {
+    return props.nodes.map((item, index) => {
+      const paths = props.paths ? `${props.paths}-${index}` : `${index}`;
+      const context = { node: item, level: props.level, index, paths } as const;
+
+      let attrs: any = item.attrs;
+      if (typeof attrs === 'function') {
+        try {
+          attrs = attrs(context);
+        } catch {
+          /* noop */
+        }
+      }
+
+      let value: any = (item as any).value;
+      if (typeof value === 'function') {
+        try {
+          value = value(context);
+        } catch {
+          /* noop */
+        }
+      }
+
+      let ev: any = (item as any).event;
+      if (typeof ev === 'function') {
+        try {
+          ev = ev(context);
+        } catch {
+          ev = undefined;
+        }
+      }
+
+      const $events: Record<string, any> = {};
+      if (ev && typeof ev === 'object') {
+        for (const key in ev) {
+          const fn = ev[key];
+          if (typeof fn === 'function') {
+            $events[key] = (...args: any[]) => fn(context, ...args);
+          }
+        }
+      }
+
+      return { ...item, index, paths, attrs, value, $events } as any;
+    });
+  });
+
+  const $level = computed(() => {
+    return props.level + 1;
+  });
+</script>

package/src/components/loader/FormLoader@v1/FormLoader.vue

@@ -170,7 +170,7 @@
         <div v-for="(item, idx) in node.other.suffix" v-html="item.value" v-bind="item.attrs" :key="idx"></div>
       </div>
     </div>
-    <div v-if="$slots.submit" class="full-x" ui-flex="row lm">
+    <div v-if="$slots.submit" class="w-full" ui-flex="row lm">
       <div class="flex-fixed" :style="labelcss(node)">&nbsp;</div>
       <div class="flex-block"><slot name="submit"></slot></div>
     </div>

package/src/components/loader/FormLoader@v1/FormRender.vue

@@ -2,12 +2,19 @@
   <div class="flex-block pr">
     <template v-if="mode === 'view'">
       <slot :name="`${node.field}-value`" :data="data" :node="node" :bind.sync="bind">
-        <div class="nt-ss"><div v-html="value" style="padding-top: 2px;"></div></div>
+        <div class="nt-ss"><div v-html="value" style="padding-top: 2px"></div></div>
       </slot>
     </template>
     <template v-else>
-      <el-input v-if="node.model[0] === 'Input'" v-model="value" class="full-w" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted" />
-      <el-input v-if="node.model[0] === 'TextArea'" v-model="value" class="full-w" v-bind="{ ...(node.model[1] || {}, { type: 'textarea', rows: 3 }) }" @input="setInteracted" @blur="setInteracted" />
+      <el-input v-if="node.model[0] === 'Input'" v-model="value" class="w-full" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted" />
+      <el-input
+        v-if="node.model[0] === 'Textarea'"
+        v-model="value"
+        class="w-full"
+        v-bind="{ ...(node.model[1] || {}, { type: 'textarea', rows: 3 }) }"
+        @input="setInteracted"
+        @blur="setInteracted"
+      />
       <el-select v-else-if="node.model[0] === 'Select'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted">
         <el-option v-for="item in node.enums" :key="item.value" :label="item.label" :value="item.value"> </el-option>
       </el-select>
@@ -19,17 +26,35 @@
       </el-checkbox-group>
       <el-checkbox v-else-if="node.model[0] === 'Checkbox'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-checkbox>
       <el-switch v-else-if="node.model[0] === 'Switch'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-switch>
-      <el-time-select v-else-if="node.model[0] === 'TimeSelect'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-time-select>
-      <el-time-picker v-else-if="node.model[0] === 'TimePicker'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-time-picker>
-      <el-date-picker v-else-if="node.model[0] === 'DatePicker'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-date-picker>
-      <el-date-picker v-else-if="node.model[0] === 'DateTimePicker'" v-model="value" type="datetime" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted"> </el-date-picker>
-      <el-cascader v-else-if="node.model[0] === 'Cascader'" v-model="value" :options="node.enums" v-bind="{ ...node.model[1] }" @input="setInteracted" @blur="setInteracted"></el-cascader>
+      <el-time-select v-else-if="node.model[0] === 'TimeSelect'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted">
+      </el-time-select>
+      <el-time-picker v-else-if="node.model[0] === 'TimePicker'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted">
+      </el-time-picker>
+      <el-date-picker v-else-if="node.model[0] === 'DatePicker'" v-model="value" v-bind="{ ...(node.model[1] || {}) }" @input="setInteracted" @blur="setInteracted">
+      </el-date-picker>
+      <el-date-picker
+        v-else-if="node.model[0] === 'DateTimePicker'"
+        v-model="value"
+        type="datetime"
+        v-bind="{ ...(node.model[1] || {}) }"
+        @input="setInteracted"
+        @blur="setInteracted"
+      >
+      </el-date-picker>
+      <el-cascader
+        v-else-if="node.model[0] === 'Cascader'"
+        v-model="value"
+        :options="node.enums"
+        v-bind="{ ...node.model[1] }"
+        @input="setInteracted"
+        @blur="setInteracted"
+      ></el-cascader>
       <gallery-value v-else-if="node.model[0] === 'SelectImg'" :form="data" :node="node" v-bind="{ ...node.model[1] }"></gallery-value>
       <!-- 自定义组件插槽 -->
       <slot v-else-if="node.model[0]" :name="node.model[0]" :data="data" :node="node" :bind.sync="bind"></slot>
       <!-- 自定义字段插槽 -->
       <slot v-else :name="`${node.field}-value`" :data="data" :node="node" :bind.sync="bind">
-        <div class="nt-ss"><div v-html="value" style="padding-top: 2px;"></div></div>
+        <div class="nt-ss"><div v-html="value" style="padding-top: 2px"></div></div>
       </slot>
       <p v-show="error.verify === 'no'" class="form-loader-verify" :data-verify-type="error.co">{{ error.tips }}</p>
     </template>
@@ -44,28 +69,28 @@
     props: {
       mode: {
         type: String,
-        default: 'edit'
+        default: 'edit',
       },
       node: {
         type: Object,
-        default: () => ({})
+        default: () => ({}),
       },
       data: {
         type: Object,
-        default: () => ({})
+        default: () => ({}),
       },
       interacted: {
         type: Boolean,
-        default: false
-      }
+        default: false,
+      },
     },
     data() {
       return {
         _interacted: false,
         bind: {
-          value: null
+          value: null,
         },
-        error: {}
+        error: {},
       };
     },
     created() {},
@@ -99,8 +124,8 @@
             this.$set(this.data, this.node.field, value);
           }
           this.validate();
-        }
-      }
+        },
+      },
     },
     methods: {
       async validate() {
@@ -166,7 +191,7 @@
             this.validate();
           }, 50);
         }
-      }
+      },
     },
     watch: {
       bind: {
@@ -183,22 +208,22 @@
           this.$set(this.data, this.node.field, value);
           this.$set(this.bind, 'value', value);
         },
-        deep: true
+        deep: true,
       },
       interacted: {
         handler(val) {
           this._interacted = val;
           this.validate();
         },
-        deep: true
+        deep: true,
       },
       value: {
         handler() {
           this.validate();
         },
-        deep: true
-      }
-    }
+        deep: true,
+      },
+    },
   };
 </script>
 <style>

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 { useBasicStore, useWorksStore, storeToRefs } from '@/stores';
+  import { deepcopy } from '@fekit/utils';
+  import scrollto from '@fekit/scrollto';
+
+  // 事件定义
+  const store: any = useWorksStore();
+  const base: any = useBasicStore();
+  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;
+  }
+}