n20-project-component 1.0.0

package/src/components/DemoButton/index.vue

@@ -0,0 +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>

package/src/components/N20CopyText/index.vue

@@ -0,0 +1,171 @@
+<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 }"
+    />
+    <transition name="n20-copy-fade">
+      <span v-if="copied" class="n20-copy-text__tip">{{ successTip }}</span>
+    </transition>
+  </span>
+</template>
+
+<script>
+/**
+ * N20CopyText - 点击复制文本组件
+ *
+ * 点击后将指定文本复制到剪贴板，显示成功反馈。
+ *
+ * @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.$emit('copy', String(copyText))
+
+        this.timer = setTimeout(() => {
+          this.copied = false
+        }, 2000)
+      } catch (err) {
+        this.$emit('error', err)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.n20-copy-text {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  position: relative;
+
+  &: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;
+    }
+  }
+
+  &__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/index.js

@@ -0,0 +1,39 @@
+/**
+ * n20-project-component
+ * PC 端 Vue 2 + Element UI 组件库
+ */
+
+// ========== 组件导入 ==========
+import DemoButton from './components/DemoButton/index.vue'
+import N20CopyText from './components/N20CopyText/index.vue'
+
+// ========== 组件列表 ==========
+const components = {
+  DemoButton,
+  N20CopyText,
+}
+
+// ========== 按需导出 ==========
+export {
+  DemoButton,
+  N20CopyText,
+}
+
+// ========== 全量注册（Vue.use）==========
+const install = (Vue) => {
+  if (install.installed) return
+  install.installed = true
+  Object.values(components).forEach((component) => {
+    Vue.component(component.name, component)
+  })
+}
+
+// 支持通过 <script> 标签直接引入时自动注册
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  install,
+  ...components,
+}

package/src/styles/variables.scss

@@ -0,0 +1,30 @@
+// ========== n20-project-component 共享变量 ==========
+
+// 主色
+$--n20-primary-color: #409EFF;
+$--n20-success-color: #67C23A;
+$--n20-warning-color: #E6A23C;
+$--n20-danger-color: #F56C6C;
+$--n20-info-color: #909399;
+
+// 文字颜色
+$--n20-text-primary: #303133;
+$--n20-text-regular: #606266;
+$--n20-text-secondary: #909399;
+$--n20-text-placeholder: #C0C4CC;
+
+// 边框
+$--n20-border-color: #DCDFE6;
+$--n20-border-radius: 4px;
+
+// 间距
+$--n20-spacing-xs: 4px;
+$--n20-spacing-sm: 8px;
+$--n20-spacing-md: 16px;
+$--n20-spacing-lg: 24px;
+
+// 字体
+$--n20-font-size-sm: 12px;
+$--n20-font-size-base: 14px;
+$--n20-font-size-lg: 16px;
+$--n20-font-size-xl: 18px;