t20-common-lib 0.9.2 → 0.9.4

package/package.json

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

package/packages/main-page/src/main.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="flex-column" :class="$slots.header ? 'main-page' : ''">
+  <div class="flex-column main-page">
     <div v-if="$slots.header" class="header">
       <slot name="header"></slot>
     </div>
     <div v-if="$slots.card || $slots.tab" style="position: relative;">
       <slot name="card"></slot>
-      <div :class="$slots.card ? 'tab1' : 'tab2'" v-if="$slots.tab">
+      <div class="tab" v-if="$slots.tab">
         <slot name="tab"></slot>
       </div>
     </div>
@@ -22,15 +22,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.tab1 {
+.tab {
   position: absolute;
   bottom: -40px;
   left: 8px;
 }
-.tab2 {
-  position: absolute;
-  bottom: -34px;
-}
 
 .bg-white {
   background-color: #fff !important;

package/packages/tab-page/index.js

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

package/packages/tab-page/src/main.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="flex-column" :class="rootClasses">
+    <div v-if="hasHeader" class="header">
+      <slot name="back"></slot>
+      <slot name="unit"></slot>
+    </div>
+    <div v-if="$slots.tab" class="tab-container">
+      <div class="tab" :class="tabClasses">
+        <slot name="tab"></slot>
+      </div>
+    </div>
+    <div class="content-wrapper flex-1 overflow" :class="contentClasses">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TabPage',
+  props: {
+    level: {
+      type: Number,
+      default: 1
+    }
+  },
+  computed: {
+    hasUnitSlot() {
+      return !!this.$slots.unit;
+    },
+    hasHeader() {
+      return !!this.$slots.back || this.hasUnitSlot;
+    },
+    rootClasses() {
+      return {
+        tabPage: this.hasUnitSlot,
+        'level2-content': this.level === 2
+      };
+    },
+    tabClasses() {
+      return {
+        level1: this.level === 1 && this.hasUnitSlot,
+        level2: !(this.level === 1 && this.hasUnitSlot)
+      };
+    },
+    contentClasses() {
+      return {
+        'px-8': this.hasUnitSlot,
+        'bg-white': true
+      };
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tabPage {
+  padding: 0 !important; // 建议审查 !important 的必要性，优先通过提升选择器权重解决样式覆盖问题
+  background: #f0f2f5;
+}
+
+.header {
+  height: 32px;
+  line-height: 32px;
+}
+
+.tab-container {
+  position: relative;
+  height: 0; // 容器不占位
+}
+
+.tab {
+  position: absolute;
+  bottom: -34px;
+  z-index: 1; // 确保 tab 在内容区域之上
+}
+
+.tabPage .tab {
+  bottom: -42px;
+}
+
+.level1 {
+  padding-left: 8px;
+}
+
+.level2 {
+  // 可以保留为空或添加 level2 的特定样式
+}
+
+.content-wrapper {
+  position: relative; // 确保内容在 tab 下方
+}
+
+.level2-content {
+  height: calc(100% - 34px);
+  margin-top: 34px;
+}
+
+.bg-white {
+  background-color: #fff !important; // 建议审查 !important 的必要性
+}
+</style>

package/src/index.js

@@ -13,6 +13,7 @@ import PageHeader from '../packages/page-header/index.js'
 import CommonCollapse from '../packages/common-collapse/index.js'
 import MultiCurrencyStatistics from '../packages/multi-currency-statistics/index.js'
 import BranchBankSelect from '../packages/branch-bank-select/index.js'
+import TabPage from '../packages/tab-page/index.js'
 
 // 存储组件列表
 const components = [
@@ -24,7 +25,8 @@ const components = [
   CommonCollapse,
   PageHeader,
   MultiCurrencyStatistics,
-  BranchBankSelect
+  BranchBankSelect,
+  TabPage
 ]
 
 // 定义 install 方法，接收 Vue 作为参数
@@ -60,6 +62,7 @@ export {
   CommonCollapse,
   TabPane,
   PageHeader,
+  TabPage,
   MultiCurrencyStatistics,
   BranchBankSelect,
   repairEl,