n20-project-component 1.0.1 → 1.0.5

package/package.json

@@ -1,65 +1,69 @@
-{
-  "name": "n20-project-component",
-  "version": "1.0.1",
-  "description": "PC 端 Vue 2 + Element UI 组件库",
-  "main": "dist/n20-project-component.umd.min.js",
-  "module": "dist/n20-project-component.common.js",
-  "style": "dist/n20-project-component.css",
-  "files": [
-    "dist",
-    "src",
-    "README.md"
-  ],
-  "scripts": {
-    "dev": "vue-cli-service serve --open",
-    "build": "vue-cli-service build --target lib --name n20-project-component src/index.js",
-    "lint": "vue-cli-service lint",
-    "prepublishOnly": "npm run build"
-  },
-  "peerDependencies": {
-    "vue": "^2.6.0",
-    "element-ui": "^2.15.0"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "babel-eslint": "^10.1.0",
-    "core-js": "^3.6.5",
-    "element-ui": "^2.15.14",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "sass": "1.26.2",
-    "sass-loader": "8.0.2",
-    "vue": "^2.6.11",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
-  "keywords": [
-    "vue2",
-    "element-ui",
-    "component-library",
-    "n20"
-  ],
-  "author": "",
-  "license": "MIT"
-}
+{
+  "name": "n20-project-component",
+  "version": "1.0.5",
+  "description": "PC 端 Vue 2 + Element UI 组件库",
+  "main": "dist/n20-project-component.umd.min.js",
+  "module": "dist/n20-project-component.common.js",
+  "style": "dist/n20-project-component.css",
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vue-cli-service serve --open",
+    "build": "vue-cli-service build --target lib --name n20-project-component src/index.js",
+    "lint": "vue-cli-service lint",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.0",
+    "element-ui": "^2.15.0"
+  },
+  "dependencies": {
+    "n20-common-lib": "^2.22.39"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "core-js": "^3.6.5",
+    "element-ui": "^2.15.14",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "sass": "1.26.2",
+    "sass-loader": "8.0.2",
+    "vue": "^2.6.11",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "keywords": [
+    "vue2",
+    "element-ui",
+    "component-library",
+    "n20"
+  ],
+  "author": "",
+  "license": "MIT"
+}

package/src/components/DemoButton/index.vue

@@ -1,74 +1,74 @@
-<template>
-  <el-button
-    :type="type"
-    :size="size"
-    :disabled="disabled"
-    :loading="loading"
-    :icon="icon"
-    class="n20-demo-button"
-    @click="handleClick"
-  >
-    <slot>{{ text }}</slot>
-  </el-button>
-</template>
-
-<script>
-/**
- * DemoButton - 示例按钮组件
- *
- * 用于验证组件库构建流程。实际开发时可删除此组件，替换为业务组件。
- *
- * @example
- * <DemoButton type="primary" text="提交" @click="handleSubmit" />
- */
-export default {
-  name: 'N20DemoButton',
-  props: {
-    /** 按钮文本 */
-    text: {
-      type: String,
-      default: '按钮',
-    },
-    /** 按钮类型：primary / success / warning / danger / info / text */
-    type: {
-      type: String,
-      default: 'primary',
-    },
-    /** 按钮尺寸：medium / small / mini */
-    size: {
-      type: String,
-      default: '',
-    },
-    /** 是否禁用 */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    /** 是否加载中 */
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    /** 图标类名 */
-    icon: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    handleClick(e) {
-      this.$emit('click', e)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~@/styles/variables.scss';
-
-.n20-demo-button {
-  // 自定义样式示例 —— 在 Element UI 基础上扩展
-  border-radius: $--n20-border-radius;
-  font-size: $--n20-font-size-base;
-}
-</style>
+<template>
+  <el-button
+    :type="type"
+    :size="size"
+    :disabled="disabled"
+    :loading="loading"
+    :icon="icon"
+    class="n20-demo-button"
+    @click="handleClick"
+  >
+    <slot>{{ text }}</slot>
+  </el-button>
+</template>
+
+<script>
+/**
+ * DemoButton - 示例按钮组件
+ *
+ * 用于验证组件库构建流程。实际开发时可删除此组件，替换为业务组件。
+ *
+ * @example
+ * <DemoButton type="primary" text="提交" @click="handleSubmit" />
+ */
+export default {
+  name: 'N20DemoButton',
+  props: {
+    /** 按钮文本 */
+    text: {
+      type: String,
+      default: '按钮',
+    },
+    /** 按钮类型：primary / success / warning / danger / info / text */
+    type: {
+      type: String,
+      default: 'primary',
+    },
+    /** 按钮尺寸：medium / small / mini */
+    size: {
+      type: String,
+      default: '',
+    },
+    /** 是否禁用 */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /** 是否加载中 */
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    /** 图标类名 */
+    icon: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    handleClick(e) {
+      this.$emit('click', e)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/styles/variables.scss';
+
+.n20-demo-button {
+  // 自定义样式示例 —— 在 Element UI 基础上扩展
+  border-radius: $--n20-border-radius;
+  font-size: $--n20-font-size-base;
+}
+</style>

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>