n20-project-component 1.0.1 → 1.0.3

package/src/components/N20BatchInput/index.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="n20-batch-input">
+    <el-input
+      :value="displayValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      readonly
+      class="n20-batch-input__trigger"
+      @click.native="handleOpen"
+    >
+      <template slot="suffix">
+        <span class="n20-batch-input__suffix">
+          <i
+            v-if="value && !disabled"
+            class="el-icon-circle-close n20-batch-input__clear"
+            @click.stop="handleClear"
+          />
+          <i
+            class="el-icon-edit-outline n20-batch-input__edit"
+            @click.stop="handleOpen"
+          />
+        </span>
+      </template>
+    </el-input>
+
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="520px"
+      :close-on-click-modal="false"
+      @open="handleDialogOpen"
+      @closed="handleDialogClosed"
+    >
+      <div class="n20-batch-input__body">
+        <el-input
+          v-model="draftText"
+          type="textarea"
+          :rows="10"
+          :placeholder="textareaPlaceholder"
+          @input="handleTextareaInput"
+        />
+        <div
+          class="n20-batch-input__counter"
+          :class="{ 'is-over': isOverLimit }"
+        >
+          <span v-if="isOverLimit" class="n20-batch-input__error">
+            已超出最大条数 {{ max }}，请删减后提交
+          </span>
+          <span class="n20-batch-input__count">
+            当前 {{ parsedItems.length }} 条 / 最大 {{ max }} 条
+          </span>
+        </div>
+      </div>
+      <div slot="footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button
+          type="primary"
+          :disabled="isOverLimit"
+          @click="handleConfirm"
+        >
+          确 认
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+/**
+ * N20BatchInput - 批量输入组件
+ *
+ * 点击输入框打开弹窗，支持从 Excel 粘贴内容，自动按换行/制表符/逗号拆分为多个条目。
+ * v-model 绑定逗号分隔的字符串。
+ *
+ * @example
+ * <N20BatchInput v-model="batchValue" :max="50" />
+ */
+export default {
+  name: 'N20BatchInput',
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+  props: {
+    /** v-model 绑定值，逗号分隔字符串 */
+    value: {
+      type: String,
+      default: '',
+    },
+    /** 最大条数限制 */
+    max: {
+      type: Number,
+      default: 100,
+    },
+    /** 输入框占位符 */
+    placeholder: {
+      type: String,
+      default: '请输入',
+    },
+    /** 弹窗标题 */
+    dialogTitle: {
+      type: String,
+      default: '批量输入',
+    },
+    /** 文本域占位符 */
+    textareaPlaceholder: {
+      type: String,
+      default: '支持从 Excel 粘贴，每行 / 逗号 / Tab 自动识别为一条',
+    },
+    /** 是否禁用 */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      draftText: '',
+      parsedItems: [],
+    }
+  },
+  computed: {
+    displayValue() {
+      return this.value || ''
+    },
+    isOverLimit() {
+      return this.parsedItems.length > this.max
+    },
+  },
+  methods: {
+    handleOpen() {
+      if (this.disabled) return
+      this.dialogVisible = true
+    },
+    handleDialogOpen() {
+      // 将当前 value 还原为每行一条
+      if (this.value) {
+        const items = this.value.split(',').map(s => s.trim()).filter(Boolean)
+        this.draftText = items.join('\n')
+        this.parsedItems = items
+      } else {
+        this.draftText = ''
+        this.parsedItems = []
+      }
+    },
+    handleDialogClosed() {
+      this.draftText = ''
+      this.parsedItems = []
+    },
+    handleTextareaInput(val) {
+      const items = val
+        .split(/[\n\r\t,，]+/)
+        .map(s => s.trim())
+        .filter(Boolean)
+      this.parsedItems = items
+    },
+    handleConfirm() {
+      if (this.isOverLimit) return
+      const result = this.parsedItems.join(',')
+      this.$emit('input', result)
+      this.$emit('change', result)
+      this.dialogVisible = false
+    },
+    handleClear() {
+      this.$emit('input', '')
+      this.$emit('change', '')
+    },
+  },
+}
+</script>
+
+<style scoped>
+.n20-batch-input {
+  display: inline-block;
+  width: 100%;
+}
+
+.n20-batch-input__trigger {
+  cursor: pointer;
+}
+
+.n20-batch-input__trigger /deep/ .el-input__inner {
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 52px;
+}
+
+.n20-batch-input__suffix {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  gap: 4px;
+}
+
+.n20-batch-input__clear:hover {
+  color: #909399;
+}
+
+.n20-batch-input__edit {
+  color: #c0c4cc;
+  cursor: pointer;
+}
+
+.n20-batch-input__edit:hover {
+  color: #409eff;
+}
+
+.n20-batch-input__body {
+  padding: 0 4px;
+}
+
+.n20-batch-input__counter {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 8px;
+  font-size: 13px;
+  color: #909399;
+  gap: 12px;
+}
+
+.n20-batch-input__counter.is-over {
+  color: #f56c6c;
+}
+
+.n20-batch-input__error {
+  flex: 1;
+  color: #f56c6c;
+}
+
+.n20-batch-input__count {
+  white-space: nowrap;
+}
+</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/index.js

@@ -6,17 +6,23 @@
 // ========== 组件导入 ==========
 import DemoButton from './components/DemoButton/index.vue'
 import N20CopyText from './components/N20CopyText/index.vue'
+import N20FloatingToolbar from './components/N20FloatingToolbar/index.vue'
+import N20BatchInput from './components/N20BatchInput/index.vue'
 
 // ========== 组件列表 ==========
 const components = {
   DemoButton,
   N20CopyText,
+  N20FloatingToolbar,
+  N20BatchInput,
 }
 
 // ========== 按需导出 ==========
 export {
   DemoButton,
   N20CopyText,
+  N20FloatingToolbar,
+  N20BatchInput,
 }
 
 // ========== 全量注册（Vue.use）==========