n20-project-component 1.0.1 → 1.0.5

package/src/components/N20CopyText/index.vue

@@ -1,133 +1,133 @@
-<template>
-  <span class="n20-copy-text" @click.stop="handleCopy">
-    <span class="n20-copy-text__content" ref="content">
-      <slot>{{ text }}</slot>
-    </span>
-    <i
-      v-if="showIcon"
-      :class="['n20-copy-text__icon', copied ? 'el-icon-check' : 'el-icon-document-copy']"
-      :style="{ order: iconPosition === 'left' ? -1 : 1 }"
-    />
-  </span>
-</template>
-
-<script>
-/**
- * N20CopyText - 点击复制文本组件
- *
- * 点击后将指定文本复制到剪贴板，通过 Element Message 显示成功反馈。
- *
- * @example
- * <N20CopyText :text="row.billNo">{{ row.billNo }}</N20CopyText>
- *
- * @example
- * <!-- 自动获取 slot 内容 -->
- * <N20CopyText>BILL-2024-001</N20CopyText>
- */
-export default {
-  name: 'N20CopyText',
-  props: {
-    /** 要复制的文本（默认取 slot 内文本） */
-    text: {
-      type: [String, Number],
-      default: ''
-    },
-    /** 复制成功提示文字 */
-    successTip: {
-      type: String,
-      default: '已复制'
-    },
-    /** 是否显示复制图标 */
-    showIcon: {
-      type: Boolean,
-      default: true
-    },
-    /** 图标位置 */
-    iconPosition: {
-      type: String,
-      default: 'right',
-      validator: v => ['left', 'right'].includes(v)
-    },
-    /** 是否禁用 */
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      copied: false,
-      timer: null
-    }
-  },
-  beforeDestroy() {
-    clearTimeout(this.timer)
-  },
-  methods: {
-    async handleCopy() {
-      if (this.disabled || this.copied) return
-
-      const copyText = this.text || (this.$refs.content && this.$refs.content.innerText) || ''
-      if (!copyText) return
-
-      try {
-        if (navigator.clipboard && window.isSecureContext) {
-          await navigator.clipboard.writeText(String(copyText))
-        } else {
-          // fallback for HTTP or older browsers
-          const textarea = document.createElement('textarea')
-          textarea.value = String(copyText)
-          textarea.style.position = 'fixed'
-          textarea.style.left = '-9999px'
-          document.body.appendChild(textarea)
-          textarea.select()
-          document.execCommand('copy')
-          document.body.removeChild(textarea)
-        }
-
-        this.copied = true
-        this.$message.success(this.successTip)
-        this.$emit('copy', String(copyText))
-
-        this.timer = setTimeout(() => {
-          this.copied = false
-        }, 2000)
-      } catch (err) {
-        this.$message.error('复制失败')
-        this.$emit('error', err)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.n20-copy-text {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-
-  &:hover {
-    .n20-copy-text__icon {
-      opacity: 1;
-    }
-  }
-
-  &__content {
-    display: inline;
-  }
-
-  &__icon {
-    font-size: 14px;
-    color: #909399;
-    opacity: 0.4;
-    transition: all 0.2s ease;
-
-    &.el-icon-check {
-      color: #67C23A;
-      opacity: 1;
-    }
-  }
-}
-</style>
+<template>
+  <span class="n20-copy-text" @click.stop="handleCopy">
+    <span class="n20-copy-text__content" ref="content">
+      <slot>{{ text }}</slot>
+    </span>
+    <i
+      v-if="showIcon"
+      :class="['n20-copy-text__icon', copied ? 'el-icon-check' : 'el-icon-document-copy']"
+      :style="{ order: iconPosition === 'left' ? -1 : 1 }"
+    />
+  </span>
+</template>
+
+<script>
+/**
+ * N20CopyText - 点击复制文本组件
+ *
+ * 点击后将指定文本复制到剪贴板，通过 Element Message 显示成功反馈。
+ *
+ * @example
+ * <N20CopyText :text="row.billNo">{{ row.billNo }}</N20CopyText>
+ *
+ * @example
+ * <!-- 自动获取 slot 内容 -->
+ * <N20CopyText>BILL-2024-001</N20CopyText>
+ */
+export default {
+  name: 'N20CopyText',
+  props: {
+    /** 要复制的文本（默认取 slot 内文本） */
+    text: {
+      type: [String, Number],
+      default: ''
+    },
+    /** 复制成功提示文字 */
+    successTip: {
+      type: String,
+      default: '已复制'
+    },
+    /** 是否显示复制图标 */
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    /** 图标位置 */
+    iconPosition: {
+      type: String,
+      default: 'right',
+      validator: v => ['left', 'right'].includes(v)
+    },
+    /** 是否禁用 */
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      copied: false,
+      timer: null
+    }
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer)
+  },
+  methods: {
+    async handleCopy() {
+      if (this.disabled || this.copied) return
+
+      const copyText = this.text || (this.$refs.content && this.$refs.content.innerText) || ''
+      if (!copyText) return
+
+      try {
+        if (navigator.clipboard && window.isSecureContext) {
+          await navigator.clipboard.writeText(String(copyText))
+        } else {
+          // fallback for HTTP or older browsers
+          const textarea = document.createElement('textarea')
+          textarea.value = String(copyText)
+          textarea.style.position = 'fixed'
+          textarea.style.left = '-9999px'
+          document.body.appendChild(textarea)
+          textarea.select()
+          document.execCommand('copy')
+          document.body.removeChild(textarea)
+        }
+
+        this.copied = true
+        this.$message.success(this.successTip)
+        this.$emit('copy', String(copyText))
+
+        this.timer = setTimeout(() => {
+          this.copied = false
+        }, 2000)
+      } catch (err) {
+        this.$message.error('复制失败')
+        this.$emit('error', err)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.n20-copy-text {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+
+  &:hover {
+    .n20-copy-text__icon {
+      opacity: 1;
+    }
+  }
+
+  &__content {
+    display: inline;
+  }
+
+  &__icon {
+    font-size: 14px;
+    color: #909399;
+    opacity: 0.4;
+    transition: all 0.2s ease;
+
+    &.el-icon-check {
+      color: #67C23A;
+      opacity: 1;
+    }
+  }
+}
+</style>

package/src/components/N20FloatingToolbar/index.vue

@@ -0,0 +1,318 @@
+<template>
+  <div
+    class="n20-floating-toolbar-wrapper"
+    ref="wrapper"
+    @mouseup="handleMouseUp"
+  >
+    <!-- 包裹的内容区域 -->
+    <slot></slot>
+
+    <!-- 浮现工具条 -->
+    <transition name="n20-toolbar-fade">
+      <div
+        v-if="visible"
+        ref="toolbar"
+        class="n20-floating-toolbar"
+        :style="toolbarStyle"
+        @mousedown.prevent
+      >
+        <div class="n20-floating-toolbar__arrow"></div>
+        <div class="n20-floating-toolbar__body">
+          <button
+            v-for="(btn, idx) in actions"
+            :key="idx"
+            class="n20-floating-toolbar__btn"
+            :title="btn.label"
+            @click.stop="handleAction(btn, idx)"
+          >
+            <i v-if="btn.icon" :class="btn.icon"></i>
+            <span v-if="btn.label && showLabel">{{ btn.label }}</span>
+          </button>
+          <!-- 允许通过 slot 自定义工具栏内容 -->
+          <slot name="toolbar" :selectedText="selectedText"></slot>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+/**
+ * N20FloatingToolbar — 选中浮现工具栏
+ *
+ * 包裹内容区域，用户选中文字后在选区上方浮现操作按钮条。
+ * 鼠标拖选文字松开后，选区上方浮现深色工具条，
+ * 点击按钮触发事件，点其他地方消失。
+ *
+ * @example
+ * <N20FloatingToolbar
+ *   :actions="[
+ *     { label: '复制', icon: 'el-icon-document-copy' },
+ *     { label: '搜索', icon: 'el-icon-search' },
+ *     { label: '高亮', icon: 'el-icon-edit' },
+ *   ]"
+ *   @action="handleToolbarAction"
+ * >
+ *   <p>这里是一段可以被选中的文本内容...</p>
+ * </N20FloatingToolbar>
+ */
+export default {
+  name: 'N20FloatingToolbar',
+  props: {
+    /**
+     * 工具栏按钮列表
+     * 每项 { label: string, icon?: string, command?: string }
+     */
+    actions: {
+      type: Array,
+      default: () => [
+        { label: '复制', icon: 'el-icon-document-copy', command: 'copy' },
+        { label: '搜索', icon: 'el-icon-search', command: 'search' },
+        { label: '高亮', icon: 'el-icon-edit', command: 'highlight' },
+      ]
+    },
+    /** 是否在按钮中显示文字标签 */
+    showLabel: {
+      type: Boolean,
+      default: true
+    },
+    /** 工具栏与选区的垂直间距（px） */
+    offset: {
+      type: Number,
+      default: 8
+    },
+    /** 是否禁用 */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** 选中最少字符数才触发 */
+    minLength: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      selectedText: '',
+      toolbarStyle: {
+        top: '0px',
+        left: '0px'
+      }
+    }
+  },
+  mounted() {
+    // 监听全局点击 → 隐藏工具栏
+    this._onDocClick = (e) => {
+      if (this.visible && this.$refs.toolbar && !this.$refs.toolbar.contains(e.target)) {
+        this.hide()
+      }
+    }
+    // 监听滚动 → 隐藏工具栏
+    this._onScroll = () => {
+      if (this.visible) {
+        this.hide()
+      }
+    }
+    document.addEventListener('mousedown', this._onDocClick, true)
+    window.addEventListener('scroll', this._onScroll, true)
+  },
+  beforeDestroy() {
+    document.removeEventListener('mousedown', this._onDocClick, true)
+    window.removeEventListener('scroll', this._onScroll, true)
+  },
+  methods: {
+    /** 鼠标松开时判断是否有选区 */
+    handleMouseUp() {
+      if (this.disabled) return
+
+      // 延迟一帧让浏览器完成选区更新
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.checkSelection()
+        }, 0)
+      })
+    },
+
+    /** 检测当前选区 */
+    checkSelection() {
+      const selection = window.getSelection()
+      if (!selection || selection.isCollapsed || !selection.toString().trim()) {
+        this.hide()
+        return
+      }
+
+      const text = selection.toString().trim()
+      if (text.length < this.minLength) {
+        this.hide()
+        return
+      }
+
+      // 确保选区在 wrapper 内
+      const wrapper = this.$refs.wrapper
+      if (!wrapper) return
+
+      const range = selection.getRangeAt(0)
+      if (!wrapper.contains(range.commonAncestorContainer)) {
+        this.hide()
+        return
+      }
+
+      this.selectedText = text
+      this.positionToolbar(range)
+      this.visible = true
+    },
+
+    /** 根据选区 Range 定位工具栏 */
+    positionToolbar(range) {
+      const rect = range.getBoundingClientRect()
+      const wrapperRect = this.$refs.wrapper.getBoundingClientRect()
+
+      // 工具栏居中于选区上方
+      const left = rect.left + rect.width / 2 - wrapperRect.left
+      const top = rect.top - wrapperRect.top - this.offset
+
+      this.toolbarStyle = {
+        left: `${left}px`,
+        top: `${top}px`
+      }
+    },
+
+    /** 点击按钮 */
+    handleAction(btn, idx) {
+      this.$emit('action', {
+        command: btn.command || btn.label,
+        label: btn.label,
+        index: idx,
+        text: this.selectedText,
+      })
+
+      // 内置 copy 行为
+      if (btn.command === 'copy') {
+        this.doCopy(this.selectedText)
+      }
+
+      this.hide()
+    },
+
+    /** 复制文本到剪贴板 */
+    async doCopy(text) {
+      try {
+        if (navigator.clipboard && window.isSecureContext) {
+          await navigator.clipboard.writeText(text)
+        } else {
+          const textarea = document.createElement('textarea')
+          textarea.value = text
+          textarea.style.position = 'fixed'
+          textarea.style.left = '-9999px'
+          document.body.appendChild(textarea)
+          textarea.select()
+          document.execCommand('copy')
+          document.body.removeChild(textarea)
+        }
+        this.$message && this.$message.success('已复制')
+      } catch (err) {
+        this.$message && this.$message.error('复制失败')
+      }
+    },
+
+    /** 隐藏工具栏 */
+    hide() {
+      this.visible = false
+      this.selectedText = ''
+    },
+
+    /** 外部可调用：手动显示 */
+    show() {
+      this.checkSelection()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.n20-floating-toolbar-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.n20-floating-toolbar {
+  position: absolute;
+  z-index: 9999;
+  transform: translateX(-50%) translateY(-100%);
+  pointer-events: auto;
+
+  // 箭头
+  &__arrow {
+    position: absolute;
+    left: 50%;
+    bottom: -5px;
+    transform: translateX(-50%) rotate(45deg);
+    width: 10px;
+    height: 10px;
+    background: #1f2937;
+    border-radius: 0 0 2px 0;
+  }
+
+  // 主体
+  &__body {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: 4px 6px;
+    background: #1f2937;
+    border-radius: 6px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
+    white-space: nowrap;
+  }
+
+  // 按钮
+  &__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 5px 10px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: #e5e7eb;
+    font-size: 13px;
+    line-height: 1;
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease;
+    outline: none;
+
+    i {
+      font-size: 14px;
+    }
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.12);
+      color: #fff;
+    }
+
+    &:active {
+      background: rgba(255, 255, 255, 0.18);
+    }
+
+    & + & {
+      margin-left: 1px;
+    }
+  }
+}
+
+// 出现动画
+.n20-toolbar-fade-enter-active {
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.n20-toolbar-fade-leave-active {
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+.n20-toolbar-fade-enter,
+.n20-toolbar-fade-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-100%) scale(0.92);
+}
+</style>

package/src/components/ProFilterView/AdvancedFilter/filterItem.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-checkbox-group v-model="checkArrayCalc" :max="maxLength" class="popover-check-box" @change="checkChange">
+    <vue-draggable
+      :list="filterList"
+      :animation="200"
+      group="dragBox"
+      :handle="'.n20-icon-tuodong'"
+      @change="dragChange"
+    >
+      <div v-for="(item, index) in filterList" :key="index" class="n20-drag-list-item">
+        <el-checkbox :disabled="item.static" :label="item.id" :checked="item.checked">{{ item.label }}</el-checkbox
+        ><i class="n20-drag-icon n20-icon-tuodong"></i>
+      </div>
+    </vue-draggable>
+  </el-checkbox-group>
+</template>
+
+<script>
+import importGlobal from 'n20-common-lib/src/utils/importGlobal.js'
+export default {
+  name: 'FilterItem',
+  components: {
+    vueDraggable: () => importGlobal('vuedraggable', () => import(/*webpackChunkName: "vuedraggable"*/ 'vuedraggable'))
+  },
+  props: {
+    filterList: {
+      type: Array,
+      default: () => []
+    },
+    checkArray: {
+      type: Array,
+      default: () => []
+    },
+    maxLength: {
+      type: Number
+    }
+  },
+  computed: {
+    checkArrayCalc: {
+      get() {
+        return this.checkArray
+      },
+      set(value) {
+        // 处理初始化时候的报错
+        if (typeof value !== 'boolean') {
+          this.$emit('update:checkArray', value)
+        }
+        return value
+      }
+    }
+  },
+  methods: {
+    checkChange(keys) {
+      if (keys.length > this.maxLength) {
+        return this.$message.warning(`${$lc('最多只能添加')}${this.maxLength}${$lc('个')}${$lc('筛选条件!')}`)
+      }
+      this.$emit('checked', keys)
+    },
+    dragChange() {
+      this.$emit('checked', this.checkArrayCalc)
+    }
+  }
+}
+</script>