t20-common-lib 0.5.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "t20-common-lib",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "T20",
   "private": false,
   "main": "dist/index.js",

package/packages/statis-card/index.js

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

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

@@ -0,0 +1,192 @@
+<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>
+            <div v-if="conItem.amountFormat" class="content-item-val"  @click="$emit('click', conItem)">{{ conItem.value | cardFormatAmount('value') }}<span class="content-item-unit">{{ conItem.value | cardFormatAmount('unit') }}</span></div>
+            <div v-else class="content-item-val"  @click="$emit('click', conItem)">{{ conItem.value }}<span class="content-item-unit">{{ conItem.unit }}</span></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 = localStorage.getItem('pageLang')
+      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 '';
+      }
+    }
+  }
+}
+</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;
+        }
+        
+        &-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-pane/src/main.vue

@@ -85,7 +85,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 .tooltip {
   position: absolute;
   top: 100%;

package/src/index.js

@@ -6,13 +6,14 @@ import { getColumnWidth, getCellAlign } from './utils/tableCellUtils'
 import MainPage from '../packages/main-page/index.js'
 import TablePage from '../packages/table-page/index.js'
 import TabPane from '../packages/tab-pane/index.js'
-
+import StatisCard from '../packages/statis-card/index.js'
 
 // 存储组件列表
 const components = [
   MainPage,
   TablePage,
-  TabPane
+  TabPane,
+  StatisCard
 ]
 
 // 定义 install 方法，接收 Vue 作为参数
@@ -43,6 +44,8 @@ export {
   // 以下是具体的组件列表
   MainPage,
   TablePage,
+  StatisCard,
+  TabPane,
   repairEl,
   getColumnWidth,
   getCellAlign