n20-common-lib 3.1.7 → 3.1.9

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "n20-common-lib",
-  "version": "3.1.7",
+  "version": "3.1.9",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
+    "prepublishOnly": "npm run build:css",
     "build": "node versionInfo.js && npm run build:css && vue-cli-service build --testTheme",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",

package/src/assets/css/page-header.scss

@@ -1,13 +1,8 @@
 .n20-page-header {
   display: flex;
   line-height: 20px;
-  padding: 12px 16px;
-
+  padding-bottom: 2px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  &__wappr {
-    display: flex;
-    flex-wrap: wrap;
-  }
 
   .page-header__left {
     display: flex;
@@ -37,23 +32,14 @@
   }
 
   .page-header__title {
-    color: var(--text-2, #4e5969);
-    /* 14/CN-Regular */
-    font-family: 'PingFang SC';
     font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 22px; /* 157.143% */
+    line-height: 20px;
+    color: #3d4a57;
   }
 
   .page-header__content {
-    color: var(--text-1, #1d2129);
-
-    /* 16/CN-Medium */
-    font-family: 'PingFang SC';
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 24px; /* 150% */
+    font-size: 14px;
+    line-height: 20px;
+    color: #3d4a57;
   }
 }

package/src/assets/css/v3/table.scss

@@ -295,6 +295,16 @@
         height: 12px;
         line-height: 12px;
       }
+      /* 纯图标按钮：与固定列 operate-icon-btn 样式一致 */
+      .hover-btn-icon-only {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border-radius: 4px;
+        font-size: 14px;
+      }
     }
 
     .hover-btns-more {

package/src/components/AdvancedFilter/formItemRender.vue

@@ -59,7 +59,7 @@ export default {
       this.$emit('enter')
     },
     handleChange(value) {
-      this.$emit('change', { field: this.item.value, value })
+      this.$emit('change', { field: this.item.value, value, item: this.item })
     },
     handleVisibleChange(value) {
       if (!value) {

package/src/components/AdvancedFilter/index.vue

@@ -136,14 +136,6 @@ export default {
     }
   },
   props: {
-    hasSaveView: {
-      type: Boolean,
-      default: false
-    },
-    isNotClose: {
-      type: Boolean,
-      default: false
-    },
     maxLength: {
       type: Number
     },

package/src/components/PageHeader/index.vue

@@ -1,24 +1,20 @@
 <template>
   <div class="n20-page-header">
-    <div class="n20-page-header__wappr">
-      <div v-if="!disable" class="page-header__left" @click="$emit('back')">
-        <i :class="icon"></i>
-        <div class="page-header__title">
-          <slot name="title">{{ title }}</slot>
-        </div>
-      </div>
-      <div class="page-header__content">
-        <slot name="content">{{ content }}</slot>
+    <div v-if="!disable" class="page-header__left" @click="$emit('back')">
+      <i :class="icon"></i>
+      <div class="page-header__title">
+        <slot name="title">{{ title }}</slot>
       </div>
     </div>
-    <div>
-      <slot></slot>
+    <div class="page-header__content">
+      <slot name="content">{{ content }}</slot>
     </div>
   </div>
 </template>
 
 <script>
 import { $lc } from '../../utils/i18n/index'
+
 export default {
   name: 'PageHeader',
   props: {

package/src/components/TableProOperateColumn/OperateBtns.vue

@@ -24,10 +24,12 @@
                   :disabled="item2.disabled | dbdBtn(row)"
                 >
                   <el-badge v-if="resolveBadge(item2)" :value="resolveBadge(item2)" :max="item2.badgeMax || 99">
+                    <i v-if="item2.icon" :class="item2.icon" class="m-r-ss" />
                     <el-link v-if="item2.type" :type="item2.type" :underline="false">{{ item2.label }}</el-link>
                     <template v-else>{{ item2.label }}</template>
                   </el-badge>
                   <template v-else>
+                    <i v-if="item2.icon" :class="item2.icon" class="m-r-ss" />
                     <el-link v-if="item2.type" :type="item2.type" :underline="false">{{ item2.label }}</el-link>
                     <template v-else>{{ item2.label }}</template>
                   </template>
@@ -37,10 +39,12 @@
           </el-dropdown-item>
           <el-dropdown-item v-else :key="item.label" :command="item.command" :disabled="item.disabled | dbdBtn(row)">
             <el-badge v-if="resolveBadge(item)" :value="resolveBadge(item)" :max="item.badgeMax || 99">
+              <i v-if="item.icon" :class="item.icon" class="m-r-ss" />
               <el-link v-if="item.type" :type="item.type" :underline="false">{{ item.label }}</el-link>
               <template v-else>{{ item.label }}</template>
             </el-badge>
             <template v-else>
+              <i v-if="item.icon" :class="item.icon" class="m-r-ss" />
               <el-link v-if="item.type" :type="item.type" :underline="false">{{ item.label }}</el-link>
               <template v-else>{{ item.label }}</template>
             </template>
@@ -63,10 +67,12 @@
             :disabled="item.disabled | dbdBtn(row)"
           >
             <el-badge v-if="resolveBadge(item)" :value="resolveBadge(item)" :max="item.badgeMax || 99">
+              <i v-if="item.icon" :class="item.icon" class="m-r-ss" />
               <el-link v-if="item.type" :type="item.type" :underline="false">{{ item.label }}</el-link>
               <template v-else>{{ item.label }}</template>
             </el-badge>
             <template v-else>
+              <i v-if="item.icon" :class="item.icon" class="m-r-ss" />
               <el-link v-if="item.type" :type="item.type" :underline="false">{{ item.label }}</el-link>
               <template v-else>{{ item.label }}</template>
             </template>
@@ -182,4 +188,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/src/components/TableProOperateColumn/OperateLink.vue

@@ -0,0 +1,80 @@
+<template>
+  <!-- 纯图标按钮：用 tooltip 提示文字 -->
+  <el-tooltip v-if="item.iconOnly && item.icon" :content="item.tip || item.label" placement="top">
+    <el-link
+      :class="index ? 'm-l-b' : ''"
+      :disabled="item.disabled | dbdBtn(row)"
+      :type="item.type || 'primary'"
+      :underline="false"
+      class="operate-icon-btn"
+      @click="$emit('click')"
+    >
+      <i :class="item.icon" />
+    </el-link>
+  </el-tooltip>
+  <!-- 图标+文字按钮 -->
+  <el-link
+    v-else-if="item.icon"
+    :class="index ? 'm-l-b' : ''"
+    :disabled="item.disabled | dbdBtn(row)"
+    :type="item.type || 'primary'"
+    :underline="false"
+    @click="$emit('click')"
+  >
+    <i :class="item.icon" class="m-r-ss" />
+    <span v-if="item.tip" v-title="`${item.tip}`">{{ item.label }}</span>
+    <span v-else>{{ item.label }}</span>
+  </el-link>
+  <!-- 纯文字按钮 -->
+  <el-link
+    v-else
+    :class="index ? 'm-l-b' : ''"
+    :disabled="item.disabled | dbdBtn(row)"
+    :type="item.type || 'primary'"
+    :underline="false"
+    @click="$emit('click')"
+  >
+    <span v-if="item.tip" v-title="`${item.tip}`">{{ item.label }}</span>
+    <span v-else>{{ item.label }}</span>
+  </el-link>
+</template>
+
+<script>
+export default {
+  name: 'OperateLink',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    row: {
+      type: Object,
+      default: () => ({})
+    },
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+  filters: {
+    dbdBtn(dbd, row) {
+      if (dbd === undefined || dbd === null) return false
+      if (typeof dbd === 'boolean') return dbd
+      if (typeof dbd === 'function') return dbd(row)
+      return false
+    }
+  }
+}
+</script>
+<style scoped>
+/* 纯图标按钮：固定尺寸、居中对齐 */
+.operate-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+</style>

package/src/components/TableProOperateColumn/childrenOperateBtn.vue

@@ -2,43 +2,19 @@
   <div class="flex-box flex-v">
     <template v-for="(item, i) in btnList">
       <template v-if="shouldShowButton(item, row)">
+        <!-- 有子级下拉 -->
         <el-dropdown
           v-if="shouldShowChildren(item.children, row)"
-          :key="item.label"
+          :key="'dd-' + i"
           class="m-l-b"
           @command="(c) => $emit('command', c)"
         >
           <div class="flex-box flex-v">
-            <el-badge
-              v-if="resolveBadge(item)"
-              :value="resolveBadge(item)"
-              :max="item.badgeMax || 99"
-              class="operate-btn-badge"
-            >
-              <el-link
-                :key="item.label"
-                :class="i ? 'm-l-b' : ''"
-                :disabled="item.disabled | dbdBtn(row)"
-                :underline="false"
-                type="primary"
-                @click="$emit('command', item.command)"
-              >
-                <span v-if="item.tip" v-title="`${item.tip}`">{{ item.label }}</span>
-                <span v-else>{{ item.label }}</span>
-              </el-link>
+            <el-badge v-if="resolveBadge(item)" :value="resolveBadge(item)" :max="item.badgeMax || 99" class="operate-btn-badge">
+              <OperateLink :item="item" :row="row" :index="i" @click="$emit('command', item.command)" />
             </el-badge>
             <template v-else>
-              <el-link
-                :key="item.label"
-                :class="i ? 'm-l-b' : ''"
-                :disabled="item.disabled | dbdBtn(row)"
-                :underline="false"
-                type="primary"
-                @click="$emit('command', item.command)"
-              >
-                <span v-if="item.tip" v-title="`${item.tip}`">{{ item.label }}</span>
-                <span v-else>{{ item.label }}</span>
-              </el-link>
+              <OperateLink :item="item" :row="row" :index="i" @click="$emit('command', item.command)" />
             </template>
             <i class="el-icon-arrow-down color-primary" />
           </div>
@@ -50,64 +26,50 @@
                 :command="childItem.command"
                 :disabled="childItem.disabled | dbdBtn(row)"
               >
-                <el-badge
-                  v-if="resolveBadge(childItem)"
-                  :value="resolveBadge(childItem)"
-                  :max="childItem.badgeMax || 99"
-                >
-                  <el-link v-if="childItem.type" :type="childItem.type" :underline="false">{{
-                    childItem.label
-                  }}</el-link>
+                <el-badge v-if="resolveBadge(childItem)" :value="resolveBadge(childItem)" :max="childItem.badgeMax || 99">
+                  <el-link v-if="childItem.type" :type="childItem.type" :underline="false">{{ childItem.label }}</el-link>
                   <template v-else>{{ childItem.label }}</template>
                 </el-badge>
                 <template v-else>
-                  <el-link v-if="childItem.type" :type="childItem.type" :underline="false">{{
-                    childItem.label
-                  }}</el-link>
+                  <el-link v-if="childItem.type" :type="childItem.type" :underline="false">{{ childItem.label }}</el-link>
                   <template v-else>{{ childItem.label }}</template>
                 </template>
               </el-dropdown-item>
             </template>
           </el-dropdown-menu>
         </el-dropdown>
+
+        <!-- 无子级，有 badge -->
         <el-badge
           v-else-if="resolveBadge(item)"
+          :key="'bd-' + i"
           :value="resolveBadge(item)"
           :max="item.badgeMax || 99"
           class="operate-btn-badge"
         >
-          <el-link
-            :key="item.label"
-            :class="i ? 'm-l-b' : ''"
-            :disabled="item.disabled | dbdBtn(row)"
-            :type="item.type || 'primary'"
-            :underline="false"
-            @click="$emit('command', item.command)"
-          >
-            <span v-if="item.tip" v-title="`${item.tip}`">{{ item.label }}</span>
-            <span v-else>{{ item.label }}</span>
-          </el-link>
+          <OperateLink :item="item" :row="row" :index="i" @click="$emit('command', item.command)" />
         </el-badge>
-        <el-link
+
+        <!-- 无子级，无 badge -->
+        <OperateLink
           v-else
-          :key="item.label"
-          :class="i ? 'm-l-b' : ''"
-          :disabled="item.disabled | dbdBtn(row)"
-          :type="item.type || 'primary'"
-          :underline="false"
+          :key="'lk-' + i"
+          :item="item"
+          :row="row"
+          :index="i"
           @click="$emit('command', item.command)"
-        >
-          <span v-if="item.tip" v-title="`${item.tip}`">{{ item.label }}</span>
-          <span v-else>{{ item.label }}</span>
-        </el-link>
+        />
       </template>
     </template>
   </div>
 </template>
 
 <script>
+import OperateLink from './OperateLink.vue'
+
 export default {
   name: 'ChildrenOperateBtn',
+  components: { OperateLink },
   props: {
     btnList: {
       type: Array,

package/src/components/v3/TablePro/index.vue

@@ -319,26 +319,66 @@
         @mouseleave="handleBtnGroupLeave"
       >
         <div class="hover-btns-wrapper">
-          <el-button
-            v-for="(btn, idx) in displayHoverBtns"
-            :key="'display-' + idx"
-            :type="btn.type || 'primary'"
-            :size="btn.size || 'mini'"
-            :icon="btn.icon"
-            :disabled="resolveDisabled(btn)"
-            :class="[btn.class]"
-            @click.stop="handleHoverBtnClick(btn, $event)"
-          >
-            <el-badge
-              v-if="resolveBadge(btn)"
-              :value="resolveBadge(btn)"
-              :max="btn.badgeMax || 99"
-              class="hover-btn-badge"
+          <template v-for="(btn, idx) in displayHoverBtns">
+            <!-- 纯图标按钮：与固定列的 el-link 图标按钮样式一致 -->
+            <el-tooltip
+              v-if="btn.iconOnly && btn.icon"
+              :key="'display-' + idx"
+              :content="btn.tip || btn.label"
+              placement="top"
+            >
+              <el-link
+                :type="btn.type || 'primary'"
+                :disabled="resolveDisabled(btn)"
+                :underline="false"
+                :class="['hover-btn-icon-only', btn.class]"
+                @click.stop="handleHoverBtnClick(btn, $event)"
+              >
+                <i :class="btn.icon" />
+              </el-link>
+            </el-tooltip>
+            <!-- 图标+文字按钮 -->
+            <el-button
+              v-else-if="btn.icon"
+              :key="'display-icon-' + idx"
+              :type="btn.type || 'primary'"
+              :size="btn.size || 'mini'"
+              :disabled="resolveDisabled(btn)"
+              :class="[btn.class]"
+              @click.stop="handleHoverBtnClick(btn, $event)"
+            >
+              <i :class="btn.icon" class="m-r-ss" />
+              <el-badge
+                v-if="resolveBadge(btn)"
+                :value="resolveBadge(btn)"
+                :max="btn.badgeMax || 99"
+                class="hover-btn-badge"
+              >
+                {{ btn.label }}
+              </el-badge>
+              <template v-else>{{ btn.label }}</template>
+            </el-button>
+            <!-- 纯文字按钮 -->
+            <el-button
+              v-else
+              :key="'display-text-' + idx"
+              :type="btn.type || 'primary'"
+              :size="btn.size || 'mini'"
+              :disabled="resolveDisabled(btn)"
+              :class="[btn.class]"
+              @click.stop="handleHoverBtnClick(btn, $event)"
             >
-              {{ btn.label }}
-            </el-badge>
-            <template v-else>{{ btn.label }}</template>
-          </el-button>
+              <el-badge
+                v-if="resolveBadge(btn)"
+                :value="resolveBadge(btn)"
+                :max="btn.badgeMax || 99"
+                class="hover-btn-badge"
+              >
+                {{ btn.label }}
+              </el-badge>
+              <template v-else>{{ btn.label }}</template>
+            </el-button>
+          </template>
           <!-- 更多按钮下拉菜单 -->
           <el-dropdown
             v-if="moreHoverBtns.length > 0"
@@ -356,6 +396,7 @@
                 :command="btn"
                 :disabled="resolveDisabled(btn)"
               >
+                <i v-if="btn.icon" :class="btn.icon" class="m-r-ss" />
                 <el-badge v-if="resolveBadge(btn)" :value="resolveBadge(btn)" :max="btn.badgeMax || 99">
                   <span :class="btn.type === 'danger' ? 'color-danger' : ''">
                     {{ btn.label }}