n20-project-component 1.0.0 → 1.0.3

package/dist/n20-project-component.umd.min.js

@@ -1 +1 @@
-(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["n20-project-component"]=e():t["n20-project-component"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"00be":function(t,e,n){},"021e":function(t,e,n){"use strict";n("f14e")},d72c:function(t,e,n){"use strict";n("00be")},f14e:function(t,e,n){},fb15:function(t,e,n){"use strict";if(n.r(e),n.d(e,"DemoButton",(function(){return d})),n.d(e,"N20CopyText",(function(){return h})),"undefined"!==typeof window){var o=window.document.currentScript,i=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}var r=function(){var t=this,e=t._self._c;return e("el-button",{staticClass:"n20-demo-button",attrs:{type:t.type,size:t.size,disabled:t.disabled,loading:t.loading,icon:t.icon},on:{click:t.handleClick}},[t._t("default",(function(){return[t._v(t._s(t.text))]}))],2)},c=[],s={name:"N20DemoButton",props:{text:{type:String,default:"按钮"},type:{type:String,default:"primary"},size:{type:String,default:""},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},icon:{type:String,default:""}},methods:{handleClick(t){this.$emit("click",t)}}},a=s;n("021e");function l(t,e,n,o,i,r,c,s){var a,l="function"===typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=n,l._compiled=!0),o&&(l.functional=!0),r&&(l._scopeId="data-v-"+r),c?(a=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(c)},l._ssrRegister=a):i&&(a=s?function(){i.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:i),a)if(l.functional){l._injectStyles=a;var u=l.render;l.render=function(t,e){return a.call(e),u(t,e)}}else{var d=l.beforeCreate;l.beforeCreate=d?[].concat(d,a):[a]}return{exports:t,options:l}}var u=l(a,r,c,!1,null,"1c0b7107",null),d=u.exports,f=function(){var t=this,e=t._self._c;return e("span",{staticClass:"n20-copy-text",on:{click:function(e){return e.stopPropagation(),t.handleCopy.apply(null,arguments)}}},[e("span",{ref:"content",staticClass:"n20-copy-text__content"},[t._t("default",(function(){return[t._v(t._s(t.text))]}))],2),t.showIcon?e("i",{class:["n20-copy-text__icon",t.copied?"el-icon-check":"el-icon-document-copy"],style:{order:"left"===t.iconPosition?-1:1}}):t._e(),e("transition",{attrs:{name:"n20-copy-fade"}},[t.copied?e("span",{staticClass:"n20-copy-text__tip"},[t._v(t._s(t.successTip))]):t._e()])],1)},p=[],y={name:"N20CopyText",props:{text:{type:[String,Number],default:""},successTip:{type:String,default:"已复制"},showIcon:{type:Boolean,default:!0},iconPosition:{type:String,default:"right",validator:t=>["left","right"].includes(t)},disabled:{type:Boolean,default:!1}},data(){return{copied:!1,timer:null}},beforeDestroy(){clearTimeout(this.timer)},methods:{async handleCopy(){if(this.disabled||this.copied)return;const t=this.text||this.$refs.content&&this.$refs.content.innerText||"";if(t)try{if(navigator.clipboard&&window.isSecureContext)await navigator.clipboard.writeText(String(t));else{const e=document.createElement("textarea");e.value=String(t),e.style.position="fixed",e.style.left="-9999px",document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e)}this.copied=!0,this.$emit("copy",String(t)),this.timer=setTimeout(()=>{this.copied=!1},2e3)}catch(e){this.$emit("error",e)}}}},m=y,_=(n("d72c"),l(m,f,p,!1,null,"540c418a",null)),h=_.exports;const b={DemoButton:d,N20CopyText:h},x=t=>{x.installed||(x.installed=!0,Object.values(b).forEach(e=>{t.component(e.name,e)}))};"undefined"!==typeof window&&window.Vue&&x(window.Vue);var v={install:x,...b};e["default"]=v}})}));
+(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["n20-project-component"]=e():t["n20-project-component"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"021e":function(t,e,n){"use strict";n("f14e")},"141c":function(t,e,n){},"3f46":function(t,e,n){"use strict";n("c5db")},b006:function(t,e,n){"use strict";n("141c")},b553:function(t,e,n){},c5db:function(t,e,n){},e863:function(t,e,n){"use strict";n("b553")},f14e:function(t,e,n){},fb15:function(t,e,n){"use strict";if(n.r(e),n.d(e,"DemoButton",(function(){return u})),n.d(e,"N20CopyText",(function(){return y})),n.d(e,"N20FloatingToolbar",(function(){return w})),n.d(e,"N20BatchInput",(function(){return j})),"undefined"!==typeof window){var i=window.document.currentScript,o=i&&i.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);o&&(n.p=o[1])}var s=function(){var t=this,e=t._self._c;return e("el-button",{staticClass:"n20-demo-button",attrs:{type:t.type,size:t.size,disabled:t.disabled,loading:t.loading,icon:t.icon},on:{click:t.handleClick}},[t._t("default",(function(){return[t._v(t._s(t.text))]}))],2)},a=[],l={name:"N20DemoButton",props:{text:{type:String,default:"按钮"},type:{type:String,default:"primary"},size:{type:String,default:""},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},icon:{type:String,default:""}},methods:{handleClick(t){this.$emit("click",t)}}},r=l;n("021e");function c(t,e,n,i,o,s,a,l){var r,c="function"===typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),i&&(c.functional=!0),s&&(c._scopeId="data-v-"+s),a?(r=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},c._ssrRegister=r):o&&(r=l?function(){o.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:o),r)if(c.functional){c._injectStyles=r;var d=c.render;c.render=function(t,e){return r.call(e),d(t,e)}}else{var u=c.beforeCreate;c.beforeCreate=u?[].concat(u,r):[r]}return{exports:t,options:c}}var d=c(r,s,a,!1,null,"1c0b7107",null),u=d.exports,p=function(){var t=this,e=t._self._c;return e("span",{staticClass:"n20-copy-text",on:{click:function(e){return e.stopPropagation(),t.handleCopy.apply(null,arguments)}}},[e("span",{ref:"content",staticClass:"n20-copy-text__content"},[t._t("default",(function(){return[t._v(t._s(t.text))]}))],2),t.showIcon?e("i",{class:["n20-copy-text__icon",t.copied?"el-icon-check":"el-icon-document-copy"],style:{order:"left"===t.iconPosition?-1:1}}):t._e()])},f=[],h={name:"N20CopyText",props:{text:{type:[String,Number],default:""},successTip:{type:String,default:"已复制"},showIcon:{type:Boolean,default:!0},iconPosition:{type:String,default:"right",validator:t=>["left","right"].includes(t)},disabled:{type:Boolean,default:!1}},data(){return{copied:!1,timer:null}},beforeDestroy(){clearTimeout(this.timer)},methods:{async handleCopy(){if(this.disabled||this.copied)return;const t=this.text||this.$refs.content&&this.$refs.content.innerText||"";if(t)try{if(navigator.clipboard&&window.isSecureContext)await navigator.clipboard.writeText(String(t));else{const e=document.createElement("textarea");e.value=String(t),e.style.position="fixed",e.style.left="-9999px",document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e)}this.copied=!0,this.$message.success(this.successTip),this.$emit("copy",String(t)),this.timer=setTimeout(()=>{this.copied=!1},2e3)}catch(e){this.$message.error("复制失败"),this.$emit("error",e)}}}},m=h,b=(n("3f46"),c(m,p,f,!1,null,"35583176",null)),y=b.exports,_=function(){var t=this,e=t._self._c;return e("div",{ref:"wrapper",staticClass:"n20-floating-toolbar-wrapper",on:{mouseup:t.handleMouseUp}},[t._t("default"),e("transition",{attrs:{name:"n20-toolbar-fade"}},[t.visible?e("div",{ref:"toolbar",staticClass:"n20-floating-toolbar",style:t.toolbarStyle,on:{mousedown:function(t){t.preventDefault()}}},[e("div",{staticClass:"n20-floating-toolbar__arrow"}),e("div",{staticClass:"n20-floating-toolbar__body"},[t._l(t.actions,(function(n,i){return e("button",{key:i,staticClass:"n20-floating-toolbar__btn",attrs:{title:n.label},on:{click:function(e){return e.stopPropagation(),t.handleAction(n,i)}}},[n.icon?e("i",{class:n.icon}):t._e(),n.label&&t.showLabel?e("span",[t._v(t._s(n.label))]):t._e()])})),t._t("toolbar",null,{selectedText:t.selectedText})],2)]):t._e()])],2)},g=[],v={name:"N20FloatingToolbar",props:{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:!0},offset:{type:Number,default:8},disabled:{type:Boolean,default:!1},minLength:{type:Number,default:1}},data(){return{visible:!1,selectedText:"",toolbarStyle:{top:"0px",left:"0px"}}},mounted(){this._onDocClick=t=>{this.visible&&this.$refs.toolbar&&!this.$refs.toolbar.contains(t.target)&&this.hide()},this._onScroll=()=>{this.visible&&this.hide()},document.addEventListener("mousedown",this._onDocClick,!0),window.addEventListener("scroll",this._onScroll,!0)},beforeDestroy(){document.removeEventListener("mousedown",this._onDocClick,!0),window.removeEventListener("scroll",this._onScroll,!0)},methods:{handleMouseUp(){this.disabled||this.$nextTick(()=>{setTimeout(()=>{this.checkSelection()},0)})},checkSelection(){const t=window.getSelection();if(!t||t.isCollapsed||!t.toString().trim())return void this.hide();const e=t.toString().trim();if(e.length<this.minLength)return void this.hide();const n=this.$refs.wrapper;if(!n)return;const i=t.getRangeAt(0);n.contains(i.commonAncestorContainer)?(this.selectedText=e,this.positionToolbar(i),this.visible=!0):this.hide()},positionToolbar(t){const e=t.getBoundingClientRect(),n=this.$refs.wrapper.getBoundingClientRect(),i=e.left+e.width/2-n.left,o=e.top-n.top-this.offset;this.toolbarStyle={left:i+"px",top:o+"px"}},handleAction(t,e){this.$emit("action",{command:t.command||t.label,label:t.label,index:e,text:this.selectedText}),"copy"===t.command&&this.doCopy(this.selectedText),this.hide()},async doCopy(t){try{if(navigator.clipboard&&window.isSecureContext)await navigator.clipboard.writeText(t);else{const e=document.createElement("textarea");e.value=t,e.style.position="fixed",e.style.left="-9999px",document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e)}this.$message&&this.$message.success("已复制")}catch(e){this.$message&&this.$message.error("复制失败")}},hide(){this.visible=!1,this.selectedText=""},show(){this.checkSelection()}}},x=v,C=(n("e863"),c(x,_,g,!1,null,"1b434c24",null)),w=C.exports,T=function(){var t=this,e=t._self._c;return e("div",{staticClass:"n20-batch-input"},[e("el-input",{staticClass:"n20-batch-input__trigger",attrs:{value:t.displayValue,placeholder:t.placeholder,disabled:t.disabled,readonly:""},nativeOn:{click:function(e){return t.handleOpen.apply(null,arguments)}}},[e("template",{slot:"suffix"},[e("span",{staticClass:"n20-batch-input__suffix"},[t.value&&!t.disabled?e("i",{staticClass:"el-icon-circle-close n20-batch-input__clear",on:{click:function(e){return e.stopPropagation(),t.handleClear.apply(null,arguments)}}}):t._e(),e("i",{staticClass:"el-icon-edit-outline n20-batch-input__edit",on:{click:function(e){return e.stopPropagation(),t.handleOpen.apply(null,arguments)}}})])])],2),e("el-dialog",{attrs:{title:t.dialogTitle,visible:t.dialogVisible,width:"520px","close-on-click-modal":!1},on:{"update:visible":function(e){t.dialogVisible=e},open:t.handleDialogOpen,closed:t.handleDialogClosed}},[e("div",{staticClass:"n20-batch-input__body"},[e("el-input",{attrs:{type:"textarea",rows:10,placeholder:t.textareaPlaceholder},on:{input:t.handleTextareaInput},model:{value:t.draftText,callback:function(e){t.draftText=e},expression:"draftText"}}),e("div",{staticClass:"n20-batch-input__counter",class:{"is-over":t.isOverLimit}},[t.isOverLimit?e("span",{staticClass:"n20-batch-input__error"},[t._v(" 已超出最大条数 "+t._s(t.max)+"，请删减后提交 ")]):t._e(),e("span",{staticClass:"n20-batch-input__count"},[t._v(" 当前 "+t._s(t.parsedItems.length)+" 条 / 最大 "+t._s(t.max)+" 条 ")])])],1),e("div",{attrs:{slot:"footer"},slot:"footer"},[e("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("取 消")]),e("el-button",{attrs:{type:"primary",disabled:t.isOverLimit},on:{click:t.handleConfirm}},[t._v(" 确 认 ")])],1)])],1)},S=[],$={name:"N20BatchInput",model:{prop:"value",event:"input"},props:{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:!1}},data(){return{dialogVisible:!1,draftText:"",parsedItems:[]}},computed:{displayValue(){return this.value||""},isOverLimit(){return this.parsedItems.length>this.max}},methods:{handleOpen(){this.disabled||(this.dialogVisible=!0)},handleDialogOpen(){if(this.value){const t=this.value.split(",").map(t=>t.trim()).filter(Boolean);this.draftText=t.join("\n"),this.parsedItems=t}else this.draftText="",this.parsedItems=[]},handleDialogClosed(){this.draftText="",this.parsedItems=[]},handleTextareaInput(t){const e=t.split(/[\n\r\t,，]+/).map(t=>t.trim()).filter(Boolean);this.parsedItems=e},handleConfirm(){if(this.isOverLimit)return;const t=this.parsedItems.join(",");this.$emit("input",t),this.$emit("change",t),this.dialogVisible=!1},handleClear(){this.$emit("input",""),this.$emit("change","")}}},k=$,O=(n("b006"),c(k,T,S,!1,null,"081f8b8a",null)),j=O.exports;const B={DemoButton:u,N20CopyText:y,N20FloatingToolbar:w,N20BatchInput:j},I=t=>{I.installed||(I.installed=!0,Object.values(B).forEach(e=>{t.component(e.name,e)}))};"undefined"!==typeof window&&window.Vue&&I(window.Vue);var N={install:I,...B};e["default"]=N}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-project-component",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "PC 端 Vue 2 + Element UI 组件库",
   "main": "dist/n20-project-component.umd.min.js",
   "module": "dist/n20-project-component.common.js",

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/N20CopyText/index.vue

@@ -8,9 +8,6 @@
       :class="['n20-copy-text__icon', copied ? 'el-icon-check' : 'el-icon-document-copy']"
       :style="{ order: iconPosition === 'left' ? -1 : 1 }"
     />
-    <transition name="n20-copy-fade">
-      <span v-if="copied" class="n20-copy-text__tip">{{ successTip }}</span>
-    </transition>
   </span>
 </template>
 
@@ -18,7 +15,7 @@
 /**
  * N20CopyText - 点击复制文本组件
  *
- * 点击后将指定文本复制到剪贴板，显示成功反馈。
+ * 点击后将指定文本复制到剪贴板，通过 Element Message 显示成功反馈。
  *
  * @example
  * <N20CopyText :text="row.billNo">{{ row.billNo }}</N20CopyText>
@@ -89,12 +86,14 @@ export default {
         }
 
         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)
       }
     }
@@ -108,7 +107,6 @@ export default {
   align-items: center;
   gap: 4px;
   cursor: pointer;
-  position: relative;
 
   &:hover {
     .n20-copy-text__icon {
@@ -131,41 +129,5 @@ export default {
       opacity: 1;
     }
   }
-
-  &__tip {
-    position: absolute;
-    top: -28px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: #67C23A;
-    color: #fff;
-    font-size: 12px;
-    padding: 2px 8px;
-    border-radius: 4px;
-    white-space: nowrap;
-    pointer-events: none;
-
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: -4px;
-      left: 50%;
-      transform: translateX(-50%);
-      border-left: 4px solid transparent;
-      border-right: 4px solid transparent;
-      border-top: 4px solid #67C23A;
-    }
-  }
-}
-
-.n20-copy-fade-enter-active,
-.n20-copy-fade-leave-active {
-  transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
-.n20-copy-fade-enter,
-.n20-copy-fade-leave-to {
-  opacity: 0;
-  transform: translateX(-50%) translateY(4px);
 }
 </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>