n20-project-component 1.0.1 → 1.0.3

package/README.md

@@ -8,9 +8,8 @@ PC 端 Vue 2 + Element UI 通用组件库，公司内部项目复用。
 |------|------|------|
 | N20CopyText | 点击复制文本，弹出「已复制」反馈 | ✅ 已完成 |
 | N20FloatingToolbar | 选中文字后浮现操作工具条 | 🔲 待开发 |
-| N20Marquee | 滚动通知条（水平/垂直） | 🔲 待开发 |
 | N20FrequentWords | 常用词输入，自动记录到本地缓存 | 🔲 待开发 |
-| N20BatchInput | 批量输入，粘贴自动拆分为多个标签 | 🔲 待开发 |
+| N20BatchInput | 批量输入，粘贴自动拆分为多个标签 | ✅ 已完成 |
 
 ---
 
@@ -117,47 +116,6 @@ export default {
 
 ---
 
-## 组件文档
-
-### N20CopyText
-
-点击复制文本到剪贴板，显示「已复制」反馈气泡。
-
-#### 基础用法
-
-```vue
-<N20CopyText text="需要复制的内容">显示的文字</N20CopyText>
-```
-
-#### 在表格中使用
-
-```vue
-<el-table-column label="单据编号">
-  <template slot-scope="{ row }">
-    <N20CopyText :text="row.billNo">{{ row.billNo }}</N20CopyText>
-  </template>
-</el-table-column>
-```
-
-#### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| text | 要复制的文本，留空则取 slot 内容 | String / Number | '' |
-| successTip | 复制成功提示 | String | '已复制' |
-| showIcon | 是否显示复制图标 | Boolean | true |
-| iconPosition | 图标位置 left / right | String | 'right' |
-| disabled | 是否禁用 | Boolean | false |
-
-#### Events
-
-| 事件名 | 说明 | 参数 |
-|--------|------|------|
-| copy | 复制成功 | (text) |
-| error | 复制失败 | (error) |
-
----
-
 ## 本地开发
 
 ```bash

package/dist/n20-project-component.common.js

@@ -96,6 +96,13 @@ module.exports =
 /* unused harmony reexport * */
 
 
+/***/ }),
+
+/***/ "141c":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
 /***/ }),
 
 /***/ "3f46":
@@ -107,6 +114,24 @@ module.exports =
 /* unused harmony reexport * */
 
 
+/***/ }),
+
+/***/ "b006":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_081f8b8a_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("141c");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_081f8b8a_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_081f8b8a_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
+/***/ }),
+
+/***/ "b553":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
 /***/ }),
 
 /***/ "c5db":
@@ -114,6 +139,17 @@ module.exports =
 
 // extracted by mini-css-extract-plugin
 
+/***/ }),
+
+/***/ "e863":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_1b434c24_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("b553");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_1b434c24_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_1b434c24_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "f14e":
@@ -133,6 +169,8 @@ __webpack_require__.r(__webpack_exports__);
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, "DemoButton", function() { return /* reexport */ DemoButton; });
 __webpack_require__.d(__webpack_exports__, "N20CopyText", function() { return /* reexport */ N20CopyText; });
+__webpack_require__.d(__webpack_exports__, "N20FloatingToolbar", function() { return /* reexport */ N20FloatingToolbar; });
+__webpack_require__.d(__webpack_exports__, "N20BatchInput", function() { return /* reexport */ N20BatchInput; });
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 // This file is imported into lib/wc client bundles.
@@ -150,7 +188,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"733de36c-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DemoButton/index.vue?vue&type=template&id=1c0b7107&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"45186dc4-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DemoButton/index.vue?vue&type=template&id=1c0b7107&scoped=true
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -174,7 +212,7 @@ var staticRenderFns = [];
 
 // CONCATENATED MODULE: ./src/components/DemoButton/index.vue?vue&type=template&id=1c0b7107&scoped=true
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DemoButton/index.vue?vue&type=script&lang=js
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DemoButton/index.vue?vue&type=script&lang=js
 /**
  * DemoButton - 示例按钮组件
  *
@@ -347,7 +385,7 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ var DemoButton = (component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"733de36c-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/N20CopyText/index.vue?vue&type=template&id=35583176&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"45186dc4-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/N20CopyText/index.vue?vue&type=template&id=35583176&scoped=true
 var N20CopyTextvue_type_template_id_35583176_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -375,7 +413,7 @@ var N20CopyTextvue_type_template_id_35583176_scoped_true_staticRenderFns = [];
 
 // CONCATENATED MODULE: ./src/components/N20CopyText/index.vue?vue&type=template&id=35583176&scoped=true
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/N20CopyText/index.vue?vue&type=script&lang=js
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/N20CopyText/index.vue?vue&type=script&lang=js
 /**
  * N20CopyText - 点击复制文本组件
  *
@@ -485,6 +523,504 @@ var N20CopyText_component = normalizeComponent(
 )
 
 /* harmony default export */ var N20CopyText = (N20CopyText_component.exports);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"45186dc4-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/N20FloatingToolbar/index.vue?vue&type=template&id=1b434c24&scoped=true
+var N20FloatingToolbarvue_type_template_id_1b434c24_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    ref: "wrapper",
+    staticClass: "n20-floating-toolbar-wrapper",
+    on: {
+      "mouseup": _vm.handleMouseUp
+    }
+  }, [_vm._t("default"), _c('transition', {
+    attrs: {
+      "name": "n20-toolbar-fade"
+    }
+  }, [_vm.visible ? _c('div', {
+    ref: "toolbar",
+    staticClass: "n20-floating-toolbar",
+    style: _vm.toolbarStyle,
+    on: {
+      "mousedown": function ($event) {
+        $event.preventDefault();
+      }
+    }
+  }, [_c('div', {
+    staticClass: "n20-floating-toolbar__arrow"
+  }), _c('div', {
+    staticClass: "n20-floating-toolbar__body"
+  }, [_vm._l(_vm.actions, function (btn, idx) {
+    return _c('button', {
+      key: idx,
+      staticClass: "n20-floating-toolbar__btn",
+      attrs: {
+        "title": btn.label
+      },
+      on: {
+        "click": function ($event) {
+          $event.stopPropagation();
+          return _vm.handleAction(btn, idx);
+        }
+      }
+    }, [btn.icon ? _c('i', {
+      class: btn.icon
+    }) : _vm._e(), btn.label && _vm.showLabel ? _c('span', [_vm._v(_vm._s(btn.label))]) : _vm._e()]);
+  }), _vm._t("toolbar", null, {
+    "selectedText": _vm.selectedText
+  })], 2)]) : _vm._e()])], 2);
+};
+var N20FloatingToolbarvue_type_template_id_1b434c24_scoped_true_staticRenderFns = [];
+
+// CONCATENATED MODULE: ./src/components/N20FloatingToolbar/index.vue?vue&type=template&id=1b434c24&scoped=true
+
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/N20FloatingToolbar/index.vue?vue&type=script&lang=js
+/**
+ * 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>
+ */
+/* harmony default export */ var N20FloatingToolbarvue_type_script_lang_js = ({
+  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();
+    }
+  }
+});
+// CONCATENATED MODULE: ./src/components/N20FloatingToolbar/index.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_N20FloatingToolbarvue_type_script_lang_js = (N20FloatingToolbarvue_type_script_lang_js); 
+// EXTERNAL MODULE: ./src/components/N20FloatingToolbar/index.vue?vue&type=style&index=0&id=1b434c24&prod&lang=scss&scoped=true
+var N20FloatingToolbarvue_type_style_index_0_id_1b434c24_prod_lang_scss_scoped_true = __webpack_require__("e863");
+
+// CONCATENATED MODULE: ./src/components/N20FloatingToolbar/index.vue
+
+
+
+
+
+
+/* normalize component */
+
+var N20FloatingToolbar_component = normalizeComponent(
+  components_N20FloatingToolbarvue_type_script_lang_js,
+  N20FloatingToolbarvue_type_template_id_1b434c24_scoped_true_render,
+  N20FloatingToolbarvue_type_template_id_1b434c24_scoped_true_staticRenderFns,
+  false,
+  null,
+  "1b434c24",
+  null
+  
+)
+
+/* harmony default export */ var N20FloatingToolbar = (N20FloatingToolbar_component.exports);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"45186dc4-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/N20BatchInput/index.vue?vue&type=template&id=081f8b8a&scoped=true
+var N20BatchInputvue_type_template_id_081f8b8a_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "n20-batch-input"
+  }, [_c('el-input', {
+    staticClass: "n20-batch-input__trigger",
+    attrs: {
+      "value": _vm.displayValue,
+      "placeholder": _vm.placeholder,
+      "disabled": _vm.disabled,
+      "readonly": ""
+    },
+    nativeOn: {
+      "click": function ($event) {
+        return _vm.handleOpen.apply(null, arguments);
+      }
+    }
+  }, [_c('template', {
+    slot: "suffix"
+  }, [_c('span', {
+    staticClass: "n20-batch-input__suffix"
+  }, [_vm.value && !_vm.disabled ? _c('i', {
+    staticClass: "el-icon-circle-close n20-batch-input__clear",
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.handleClear.apply(null, arguments);
+      }
+    }
+  }) : _vm._e(), _c('i', {
+    staticClass: "el-icon-edit-outline n20-batch-input__edit",
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.handleOpen.apply(null, arguments);
+      }
+    }
+  })])])], 2), _c('el-dialog', {
+    attrs: {
+      "title": _vm.dialogTitle,
+      "visible": _vm.dialogVisible,
+      "width": "520px",
+      "close-on-click-modal": false
+    },
+    on: {
+      "update:visible": function ($event) {
+        _vm.dialogVisible = $event;
+      },
+      "open": _vm.handleDialogOpen,
+      "closed": _vm.handleDialogClosed
+    }
+  }, [_c('div', {
+    staticClass: "n20-batch-input__body"
+  }, [_c('el-input', {
+    attrs: {
+      "type": "textarea",
+      "rows": 10,
+      "placeholder": _vm.textareaPlaceholder
+    },
+    on: {
+      "input": _vm.handleTextareaInput
+    },
+    model: {
+      value: _vm.draftText,
+      callback: function ($$v) {
+        _vm.draftText = $$v;
+      },
+      expression: "draftText"
+    }
+  }), _c('div', {
+    staticClass: "n20-batch-input__counter",
+    class: {
+      'is-over': _vm.isOverLimit
+    }
+  }, [_vm.isOverLimit ? _c('span', {
+    staticClass: "n20-batch-input__error"
+  }, [_vm._v(" 已超出最大条数 " + _vm._s(_vm.max) + "，请删减后提交 ")]) : _vm._e(), _c('span', {
+    staticClass: "n20-batch-input__count"
+  }, [_vm._v(" 当前 " + _vm._s(_vm.parsedItems.length) + " 条 / 最大 " + _vm._s(_vm.max) + " 条 ")])])], 1), _c('div', {
+    attrs: {
+      "slot": "footer"
+    },
+    slot: "footer"
+  }, [_c('el-button', {
+    on: {
+      "click": function ($event) {
+        _vm.dialogVisible = false;
+      }
+    }
+  }, [_vm._v("取 消")]), _c('el-button', {
+    attrs: {
+      "type": "primary",
+      "disabled": _vm.isOverLimit
+    },
+    on: {
+      "click": _vm.handleConfirm
+    }
+  }, [_vm._v(" 确 认 ")])], 1)])], 1);
+};
+var N20BatchInputvue_type_template_id_081f8b8a_scoped_true_staticRenderFns = [];
+
+// CONCATENATED MODULE: ./src/components/N20BatchInput/index.vue?vue&type=template&id=081f8b8a&scoped=true
+
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/N20BatchInput/index.vue?vue&type=script&lang=js
+/**
+ * N20BatchInput - 批量输入组件
+ *
+ * 点击输入框打开弹窗，支持从 Excel 粘贴内容，自动按换行/制表符/逗号拆分为多个条目。
+ * v-model 绑定逗号分隔的字符串。
+ *
+ * @example
+ * <N20BatchInput v-model="batchValue" :max="50" />
+ */
+/* harmony default export */ var N20BatchInputvue_type_script_lang_js = ({
+  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', '');
+    }
+  }
+});
+// CONCATENATED MODULE: ./src/components/N20BatchInput/index.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_N20BatchInputvue_type_script_lang_js = (N20BatchInputvue_type_script_lang_js); 
+// EXTERNAL MODULE: ./src/components/N20BatchInput/index.vue?vue&type=style&index=0&id=081f8b8a&prod&scoped=true&lang=css
+var N20BatchInputvue_type_style_index_0_id_081f8b8a_prod_scoped_true_lang_css = __webpack_require__("b006");
+
+// CONCATENATED MODULE: ./src/components/N20BatchInput/index.vue
+
+
+
+
+
+
+/* normalize component */
+
+var N20BatchInput_component = normalizeComponent(
+  components_N20BatchInputvue_type_script_lang_js,
+  N20BatchInputvue_type_template_id_081f8b8a_scoped_true_render,
+  N20BatchInputvue_type_template_id_081f8b8a_scoped_true_staticRenderFns,
+  false,
+  null,
+  "081f8b8a",
+  null
+  
+)
+
+/* harmony default export */ var N20BatchInput = (N20BatchInput_component.exports);
 // CONCATENATED MODULE: ./src/index.js
 /**
  * n20-project-component
@@ -495,10 +1031,14 @@ var N20CopyText_component = normalizeComponent(
 
 
 
+
+
 // ========== 组件列表 ==========
 const components = {
   DemoButton: DemoButton,
-  N20CopyText: N20CopyText
+  N20CopyText: N20CopyText,
+  N20FloatingToolbar: N20FloatingToolbar,
+  N20BatchInput: N20BatchInput
 };
 
 // ========== 按需导出 ==========

package/dist/n20-project-component.css

@@ -1 +1 @@
-.n20-demo-button[data-v-1c0b7107]{border-radius:4px;font-size:14px}.n20-copy-text[data-v-35583176]{display:inline-flex;align-items:center;gap:4px;cursor:pointer}.n20-copy-text:hover .n20-copy-text__icon[data-v-35583176]{opacity:1}.n20-copy-text__content[data-v-35583176]{display:inline}.n20-copy-text__icon[data-v-35583176]{font-size:14px;color:#909399;opacity:.4;transition:all .2s ease}.n20-copy-text__icon.el-icon-check[data-v-35583176]{color:#67c23a;opacity:1}
+.n20-demo-button[data-v-1c0b7107]{border-radius:4px;font-size:14px}.n20-copy-text[data-v-35583176]{display:inline-flex;align-items:center;gap:4px;cursor:pointer}.n20-copy-text:hover .n20-copy-text__icon[data-v-35583176]{opacity:1}.n20-copy-text__content[data-v-35583176]{display:inline}.n20-copy-text__icon[data-v-35583176]{font-size:14px;color:#909399;opacity:.4;transition:all .2s ease}.n20-copy-text__icon.el-icon-check[data-v-35583176]{color:#67c23a;opacity:1}.n20-floating-toolbar-wrapper[data-v-1b434c24]{position:relative;display:inline-block;width:100%}.n20-floating-toolbar[data-v-1b434c24]{position:absolute;z-index:9999;transform:translateX(-50%) translateY(-100%);pointer-events:auto}.n20-floating-toolbar__arrow[data-v-1b434c24]{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:#1f2937;border-radius:0 0 2px 0}.n20-floating-toolbar__body[data-v-1b434c24]{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,.24),inset 0 0 0 1px hsla(0,0%,100%,.06);white-space:nowrap}.n20-floating-toolbar__btn[data-v-1b434c24]{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 .15s ease,color .15s ease;outline:none}.n20-floating-toolbar__btn i[data-v-1b434c24]{font-size:14px}.n20-floating-toolbar__btn[data-v-1b434c24]:hover{background:hsla(0,0%,100%,.12);color:#fff}.n20-floating-toolbar__btn[data-v-1b434c24]:active{background:hsla(0,0%,100%,.18)}.n20-floating-toolbar__btn+.n20-floating-toolbar__btn[data-v-1b434c24]{margin-left:1px}.n20-toolbar-fade-enter-active[data-v-1b434c24]{transition:opacity .18s ease,transform .18s ease}.n20-toolbar-fade-leave-active[data-v-1b434c24]{transition:opacity .12s ease,transform .12s ease}.n20-toolbar-fade-enter[data-v-1b434c24],.n20-toolbar-fade-leave-to[data-v-1b434c24]{opacity:0;transform:translateX(-50%) translateY(-100%) scale(.92)}.n20-batch-input[data-v-081f8b8a]{display:inline-block;width:100%}.n20-batch-input__trigger[data-v-081f8b8a]{cursor:pointer}.n20-batch-input__trigger[data-v-081f8b8a] .el-input__inner{cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:52px}.n20-batch-input__suffix[data-v-081f8b8a]{display:inline-flex;align-items:center;height:100%;gap:4px}.n20-batch-input__clear[data-v-081f8b8a]:hover{color:#909399}.n20-batch-input__edit[data-v-081f8b8a]{color:#c0c4cc;cursor:pointer}.n20-batch-input__edit[data-v-081f8b8a]:hover{color:#409eff}.n20-batch-input__body[data-v-081f8b8a]{padding:0 4px}.n20-batch-input__counter[data-v-081f8b8a]{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[data-v-081f8b8a]{color:#f56c6c}.n20-batch-input__error[data-v-081f8b8a]{flex:1;color:#f56c6c}.n20-batch-input__count[data-v-081f8b8a]{white-space:nowrap}