t20-common-lib 0.9.13 → 0.10.0

package/packages/statis-card/src/main.vue

@@ -1,251 +1,251 @@
-<template>
-  <div class="statis-card flex-box">
-    <div class="card-item flex-column" v-for="(item, index) in cardList" :key="item.id" :style="{
-        '--bg': cardConfig[index].background,
-        '--flex': cardConfig[index].flex
-      }">
-      <div class="header flex-box flex-lr">
-        <!-- 动态判断：如果是图片路径则用 img，否则用 iconfont -->
-        <div class="flex-box flex-v">
-          <img 
-            class="icon"
-            v-if="isImagePath(item.icon)" 
-            :src="resolveImagePath(item.icon)" 
-            alt="icon"
-          >
-          <i class="icon" v-else :class="item.icon"></i>
-          <div class="title">{{ item.title }}</div>
-          <div class="slot-dropdown">
-            <slot :name="item.slotName" :item="item"></slot>
-          </div>
-        </div>
-        <div class="slot-tab">
-          <slot :name="item.slotTabName" :item="item"></slot>
-        </div>
-      </div>
-      <div class="content flex-box">
-        <template v-for="(conItem, index) in item.subList">
-          <div class="content-item" :key="conItem.subId">
-            <div class="content-item-title">{{ conItem.title }}
-              <i v-if="conItem.tips" v-title="conItem.tips" class="n20-icon-xinxitishi"></i>
-            </div>
-            <!-- 支持三种情况：
-                 1) 同时存在金额和笔数（优先使用 conItem.amount，如无则使用 conItem.value） -> 在一行显示：金额（格式化） / 笔数（单位）
-                 2) 只有金额（conItem.amountFormat 为 true 或 amount/value 为数字） -> 使用过滤器格式化
-                 3) 只有普通值 -> 直接显示 value + unit
-            -->
-            <div class="content-item-val" @click="$emit('click', conItem)">
-              <template v-if="hasAmountAndCount(conItem)">
-                <span class="count-val">{{ conItem.count }}<span class="content-item-unit">{{ conItem.countUnit || conItem.unit || '笔' }}</span></span>
-                <span class="divider-inline"></span>
-                {{ formatAmount(conItem, 'value') }}<span class="content-item-unit">{{ formatAmount(conItem, 'unit') }}</span>
-              </template>
-              <template v-else-if="conItem.amountFormat">
-                {{ formatAmount(conItem, 'value') }}<span class="content-item-unit">{{ formatAmount(conItem, 'unit') }}</span>
-              </template>
-              <template v-else>
-                {{ conItem.value }}<span class="content-item-unit">{{ conItem.unit }}</span>
-              </template>
-            </div>
-          </div>
-          <div 
-            v-if="index !== item.subList.length - 1" 
-            class="divider"
-            :key="'divider-' + conItem.subId">
-          </div>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'StatisCard',
-  props: {
-    cardList: {
-      type: Array,
-      default: () => []
-    },
-    cardConfig: {
-      type: Array,
-      default: () => []
-    }
-  },
-  filters: {
-    /**
-     * 格式化金额或返回原始值
-     * @param {Number|String} value - 原始值
-     * @param {String} type - 'value' 或 'unit'
-     * @param {Boolean} isAmount - 是否作为金额处理
-     */
-    cardFormatAmount(value, type = 'value') {
-      const language = 'zh'
-      const unitMap = {
-        'en': {
-          'thousand': 'K',
-          'million': 'M',
-        },
-        'zh': {
-          'thousand': '万元',
-          'million': '亿元',
-        }
-      }
-    
-      // 非数字直接返回原值（单位返回空字符串）
-      if (typeof value !== 'number' || isNaN(value)) {
-        return type === 'value' ? value || 0 : unitMap[language].thousand;
-      }
-      
-      const amountInTenThousand = value / 10000;
-      
-      if (type === 'value') {
-        // 返回格式化后的数值
-        return amountInTenThousand >= 1000 
-          ? parseFloat((amountInTenThousand / 10000).toFixed(2))
-          : parseFloat(amountInTenThousand.toFixed(2));
-      } else {
-        // 返回单位
-        return amountInTenThousand >= 1000 ? unitMap[language].million : unitMap[language].thousand;
-      }
-    }
-  },
-  data() {
-    return {
-      
-    }
-  },
-  methods: {
-    isImagePath(icon) {
-      return typeof icon === 'string' && 
-             (icon.endsWith('.png') || icon.endsWith('.jpg') || icon.startsWith('@/') || icon.endsWith('.svg'));
-    },
-    // 解析Webpack别名路径（需配合require或import）
-    resolveImagePath(path) {
-      try {
-        return require(`@/assets/${path}`);
-      } catch (e) {
-        console.warn('图片加载失败', path);
-        return '';
-      }
-    }
-    ,
-    /**
-     * 判断是否同时包含金额和笔数
-     * 支持两种字段表示：优先使用 item.amount，其次使用 item.value
-     */
-    hasAmountAndCount(item) {
-      if (!item) return false;
-      const amount = item.amount !== undefined && item.amount !== null ? item.amount : item.value;
-      // amount 必须是数字（或能被转为数字），count 存在（0 也认为有效）
-      const hasAmount = amount !== undefined && amount !== null && !isNaN(Number(amount));
-      const hasCount = item.count !== undefined && item.count !== null;
-      return hasAmount && hasCount;
-    },
-    /**
-     * 统一走过滤器来格式化金额/单位（保持与现有过滤器行为一致）
-     */
-    formatAmount(item, type = 'value') {
-      const amount = item.amount !== undefined && item.amount !== null ? item.amount : item.value;
-      // 通过 this.$options.filters 调用组件内定义的过滤器
-      // 如果是请求单位并且调用方显式传了 unit 且标记了 amountFormat，优先返回该 unit（恢复原先逻辑）
-      if (type === 'unit' && item && item.amountFormat && item.unit) {
-        return item.unit;
-      }
-
-      if (this.$options && this.$options.filters && typeof this.$options.filters.cardFormatAmount === 'function') {
-        try {
-          return this.$options.filters.cardFormatAmount(amount, type);
-        } catch (e) {
-          // 兜底返回原值或空字符串
-          return type === 'value' ? amount : '';
-        }
-      }
-      return type === 'value' ? amount : '';
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.statis-card {
-  width: 100%;
-  gap: 10px;
-  .card-item {
-    padding: 16px; 
-    border-radius: 4px;
-    position: relative;
-    box-sizing: border-box;
-    overflow: hidden;
-    flex: var(--flex);
-    background: var(--bg);
-    .header {
-      display: flex;
-      align-items: center;
-      margin-bottom: 16px;
-
-      .icon {
-        width: 14px;
-        height: 14px;
-        margin-right: 8px;
-      }
-
-      .title {
-        font-size: 16px;
-        color: #fff;
-        white-space: nowrap;
-      }
-      .slot-dropdown {
-        white-space: nowrap;
-        cursor: pointer;
-        ::v-deep .el-dropdown {
-          font-size: 12px !important;
-          color: #fff !important;
-        }
-        
-      }
-    }
-
-    .content {
-      padding: 0 22px;
-      color: #fff;
-      .content-item {
-        &-title {
-          font-size: 14px;
-          margin-block: 8px;
-        }
-        
-        &-val {
-          cursor: pointer;
-          font-size: 20px;
-          text-align: center;
-        }
-
-        .divider-inline {
-          margin: 0 6px;
-          color: rgba(255,255,255,0.9);
-        }
-
-        .count-val {
-          font-size: 20px;
-        }
-        
-        &-unit {
-          font-size: 14px;
-          margin-left: 4px;
-        }
-      }
-      .divider {
-        height: 32px;
-        width: 1px;;
-        background-color: #fff;
-        margin: auto;
-      }
-    }
-  }
-  .n20-icon-xinxitishi {
-    color: #fff;
-  }
-}
-
+<template>
+  <div class="statis-card flex-box">
+    <div class="card-item flex-column" v-for="(item, index) in cardList" :key="item.id" :style="{
+        '--bg': cardConfig[index].background,
+        '--flex': cardConfig[index].flex
+      }">
+      <div class="header flex-box flex-lr">
+        <!-- 动态判断：如果是图片路径则用 img，否则用 iconfont -->
+        <div class="flex-box flex-v">
+          <img 
+            class="icon"
+            v-if="isImagePath(item.icon)" 
+            :src="resolveImagePath(item.icon)" 
+            alt="icon"
+          >
+          <i class="icon" v-else :class="item.icon"></i>
+          <div class="title">{{ item.title }}</div>
+          <div class="slot-dropdown">
+            <slot :name="item.slotName" :item="item"></slot>
+          </div>
+        </div>
+        <div class="slot-tab">
+          <slot :name="item.slotTabName" :item="item"></slot>
+        </div>
+      </div>
+      <div class="content flex-box">
+        <template v-for="(conItem, index) in item.subList">
+          <div class="content-item" :key="conItem.subId">
+            <div class="content-item-title">{{ conItem.title }}
+              <i v-if="conItem.tips" v-title="conItem.tips" class="n20-icon-xinxitishi"></i>
+            </div>
+            <!-- 支持三种情况：
+                 1) 同时存在金额和笔数（优先使用 conItem.amount，如无则使用 conItem.value） -> 在一行显示：金额（格式化） / 笔数（单位）
+                 2) 只有金额（conItem.amountFormat 为 true 或 amount/value 为数字） -> 使用过滤器格式化
+                 3) 只有普通值 -> 直接显示 value + unit
+            -->
+            <div class="content-item-val" @click="$emit('click', conItem)">
+              <template v-if="hasAmountAndCount(conItem)">
+                <span class="count-val">{{ conItem.count }}<span class="content-item-unit">{{ conItem.countUnit || conItem.unit || '笔' }}</span></span>
+                <span class="divider-inline"></span>
+                {{ formatAmount(conItem, 'value') }}<span class="content-item-unit">{{ formatAmount(conItem, 'unit') }}</span>
+              </template>
+              <template v-else-if="conItem.amountFormat">
+                {{ formatAmount(conItem, 'value') }}<span class="content-item-unit">{{ formatAmount(conItem, 'unit') }}</span>
+              </template>
+              <template v-else>
+                {{ conItem.value }}<span class="content-item-unit">{{ conItem.unit }}</span>
+              </template>
+            </div>
+          </div>
+          <div 
+            v-if="index !== item.subList.length - 1" 
+            class="divider"
+            :key="'divider-' + conItem.subId">
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StatisCard',
+  props: {
+    cardList: {
+      type: Array,
+      default: () => []
+    },
+    cardConfig: {
+      type: Array,
+      default: () => []
+    }
+  },
+  filters: {
+    /**
+     * 格式化金额或返回原始值
+     * @param {Number|String} value - 原始值
+     * @param {String} type - 'value' 或 'unit'
+     * @param {Boolean} isAmount - 是否作为金额处理
+     */
+    cardFormatAmount(value, type = 'value') {
+      const language = 'zh'
+      const unitMap = {
+        'en': {
+          'thousand': 'K',
+          'million': 'M',
+        },
+        'zh': {
+          'thousand': '万元',
+          'million': '亿元',
+        }
+      }
+    
+      // 非数字直接返回原值（单位返回空字符串）
+      if (typeof value !== 'number' || isNaN(value)) {
+        return type === 'value' ? value || 0 : unitMap[language].thousand;
+      }
+      
+      const amountInTenThousand = value / 10000;
+      
+      if (type === 'value') {
+        // 返回格式化后的数值
+        return amountInTenThousand >= 1000 
+          ? parseFloat((amountInTenThousand / 10000).toFixed(2))
+          : parseFloat(amountInTenThousand.toFixed(2));
+      } else {
+        // 返回单位
+        return amountInTenThousand >= 1000 ? unitMap[language].million : unitMap[language].thousand;
+      }
+    }
+  },
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    isImagePath(icon) {
+      return typeof icon === 'string' && 
+             (icon.endsWith('.png') || icon.endsWith('.jpg') || icon.startsWith('@/') || icon.endsWith('.svg'));
+    },
+    // 解析Webpack别名路径（需配合require或import）
+    resolveImagePath(path) {
+      try {
+        return require(`@/assets/${path}`);
+      } catch (e) {
+        console.warn('图片加载失败', path);
+        return '';
+      }
+    }
+    ,
+    /**
+     * 判断是否同时包含金额和笔数
+     * 支持两种字段表示：优先使用 item.amount，其次使用 item.value
+     */
+    hasAmountAndCount(item) {
+      if (!item) return false;
+      const amount = item.amount !== undefined && item.amount !== null ? item.amount : item.value;
+      // amount 必须是数字（或能被转为数字），count 存在（0 也认为有效）
+      const hasAmount = amount !== undefined && amount !== null && !isNaN(Number(amount));
+      const hasCount = item.count !== undefined && item.count !== null;
+      return hasAmount && hasCount;
+    },
+    /**
+     * 统一走过滤器来格式化金额/单位（保持与现有过滤器行为一致）
+     */
+    formatAmount(item, type = 'value') {
+      const amount = item.amount !== undefined && item.amount !== null ? item.amount : item.value;
+      // 通过 this.$options.filters 调用组件内定义的过滤器
+      // 如果是请求单位并且调用方显式传了 unit 且标记了 amountFormat，优先返回该 unit（恢复原先逻辑）
+      if (type === 'unit' && item && item.amountFormat && item.unit) {
+        return item.unit;
+      }
+
+      if (this.$options && this.$options.filters && typeof this.$options.filters.cardFormatAmount === 'function') {
+        try {
+          return this.$options.filters.cardFormatAmount(amount, type);
+        } catch (e) {
+          // 兜底返回原值或空字符串
+          return type === 'value' ? amount : '';
+        }
+      }
+      return type === 'value' ? amount : '';
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.statis-card {
+  width: 100%;
+  gap: 10px;
+  .card-item {
+    padding: 16px; 
+    border-radius: 4px;
+    position: relative;
+    box-sizing: border-box;
+    overflow: hidden;
+    flex: var(--flex);
+    background: var(--bg);
+    .header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 16px;
+
+      .icon {
+        width: 14px;
+        height: 14px;
+        margin-right: 8px;
+      }
+
+      .title {
+        font-size: 16px;
+        color: #fff;
+        white-space: nowrap;
+      }
+      .slot-dropdown {
+        white-space: nowrap;
+        cursor: pointer;
+        ::v-deep .el-dropdown {
+          font-size: 12px !important;
+          color: #fff !important;
+        }
+        
+      }
+    }
+
+    .content {
+      padding: 0 22px;
+      color: #fff;
+      .content-item {
+        &-title {
+          font-size: 14px;
+          margin-block: 8px;
+        }
+        
+        &-val {
+          cursor: pointer;
+          font-size: 20px;
+          text-align: center;
+        }
+
+        .divider-inline {
+          margin: 0 6px;
+          color: rgba(255,255,255,0.9);
+        }
+
+        .count-val {
+          font-size: 20px;
+        }
+        
+        &-unit {
+          font-size: 14px;
+          margin-left: 4px;
+        }
+      }
+      .divider {
+        height: 32px;
+        width: 1px;;
+        background-color: #fff;
+        margin: auto;
+      }
+    }
+  }
+  .n20-icon-xinxitishi {
+    color: #fff;
+  }
+}
+
 </style>

package/packages/tab-page/index.js

@@ -1,8 +1,8 @@
-import TabPage from './src/main';
-
-/* istanbul ignore next */
-TabPage.install = function(Vue) {
-  Vue.component(TabPage.name, TabPage);
-};
-
-export default TabPage;
+import TabPage from './src/main';
+
+/* istanbul ignore next */
+TabPage.install = function(Vue) {
+  Vue.component(TabPage.name, TabPage);
+};
+
+export default TabPage;