n20-common-lib 3.1.11 → 3.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/css/element-variables.scss

@@ -1070,3 +1070,37 @@ $--breakpoints-spec: (
     min-width: $--xl
   )
 );
+
+// chart
+$--charts-blue: #007aff !default;
+$--charts-red: #ff3b30 !default;
+$--charts-orange: #f77234 !default;
+$--charts-warn: #ff9933 !default;
+$--charts-yellow: #f7ba1e !default;
+$--charts-bright-yellow: #fadc19 !default;
+$--charts-lime: #9fdb1d !default;
+$--charts-teal: #0fc6c2 !default;
+$--charts-green: #2db185 !default;
+$--charts-light-blue: #3491fa !default;
+$--charts-purple: #722ed1 !default;
+$--charts-magenta: #d91ad9 !default;
+$--charts-pink: #f5319d !default;
+
+// echarts 不支持scss，使用css 包裹
+:root {
+  --charts-blue: #{$--charts-blue};
+  --charts-red: #{$--charts-red};
+  --charts-orange: #{$--charts-orange};
+  --charts-warn: #{$--charts-warn};
+  --charts-yellow: #{$--charts-yellow};
+  --charts-bright-yellow: #{$--charts-bright-yellow};
+  --charts-lime: #{$--charts-lime};
+  --charts-teal: #{$--charts-teal};
+  --charts-green: #{$--charts-green};
+  --charts-light-blue: #{$--charts-light-blue};
+  --charts-purple: #{$--charts-purple};
+  --charts-magenta: #{$--charts-magenta};
+  --charts-pink: #{$--charts-pink};
+  --color-text-regular: #{$--color-text-regular};
+  --color-text-primary: #{$--color-text-primary};
+}

package/src/assets/css/pivot.scss

@@ -40,10 +40,11 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  transition: width 0.3s ease;
+  transition: width 0.3s ease, min-width 0.3s ease;
 
   &.collapsed {
-    width: 8px;
+    width: 20px;
+    min-width: 20px;
 
     .sidebar-header,
     .report-list {
@@ -69,6 +70,7 @@
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
+    white-space: nowrap;
   }
 }
 
@@ -106,6 +108,8 @@
 
 .report-item {
   display: flex;
+  height: 38px;
+  box-sizing: border-box;
   align-items: center;
   padding: 7px 8px;
   border-radius: 4px;
@@ -137,6 +141,28 @@
   &.editing {
     background: var(--bg-white, #fff);
   }
+
+  .report-more {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin-left: 4px;
+    border-radius: 4px;
+    cursor: pointer;
+    color: #86909c;
+    position: relative;
+
+    &.visible {
+      display: flex;
+    }
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+      color: #4e5969;
+    }
+  }
 }
 
 .report-name-input {
@@ -150,28 +176,6 @@
   outline: none;
 }
 
-.report-more {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin-left: 4px;
-  border-radius: 4px;
-  cursor: pointer;
-  color: #86909c;
-  position: relative;
-
-  &.visible {
-    display: flex;
-  }
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.04);
-    color: #4e5969;
-  }
-}
-
 .report-menu {
   position: absolute;
   top: 100%;
@@ -215,6 +219,8 @@
   height: 16px;
   margin-right: 8px;
   color: #4e5969;
+  display: flex;
+  align-items: center;
 }
 
 .report-name {
@@ -266,14 +272,6 @@
   padding: 16px;
   gap: 16px;
   transition: margin-left 0.3s ease, margin-right 0.3s ease;
-
-  &.left-collapsed {
-    margin-left: 8px;
-  }
-
-  &.right-collapsed {
-    margin-right: 8px;
-  }
 }
 
 .main-toolbar {
@@ -495,8 +493,14 @@
   height: 100%;
   position: relative;
   display: flex;
+  box-sizing: border-box;
   flex-direction: column;
   padding: 16px;
+  background-image: radial-gradient(circle, #e5e6eb 1px, transparent 1px),
+    radial-gradient(circle, #e5e6eb 1px, transparent 1px);
+  background-size: 20px 20px;
+  background-position: 0 0, 10px 10px;
+  background-color: #ffffff;
 }
 
 .chart-header {
@@ -550,10 +554,11 @@
   border-left: 1px solid #e5e6eb;
   display: flex;
   flex-direction: column;
-  transition: width 0.3s ease;
+  transition: width 0.3s ease, min-width 0.3s ease;
 
   &.collapsed {
-    width: 8px;
+    width: 0px;
+    min-width: 0px;
 
     .sidebar-header,
     .config-form {
@@ -601,7 +606,8 @@
 .config-form {
   flex: 1;
   padding: 0 16px;
-  overflow-y: auto;
+  padding-right: 10px;
+  overflow-y: scroll;
 
   .form-item:first-child {
     margin-top: 16px;

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

@@ -1,5 +1,7 @@
 /* v3 版本 TablePro 样式 - 使用独特前缀实现样式隔离 */
 .v3-table-pro-wrapper {
+  overflow-y: hidden;
+
   /* Element UI 表格基础样式 */
   .el-table--small {
     font-size: 14px;

package/src/components/Pivot/ChartView.vue

@@ -12,9 +12,15 @@
 </template>
 
 <script>
-import importG from '../../utils/importGlobal.js'
+import { BarChart, LineChart, PieChart } from 'echarts/charts'
+import { GridComponent, GraphicComponent, LegendComponent, TooltipComponent } from 'echarts/components'
+import * as echarts from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+
 import Empty from '../Empty/index.vue'
 
+echarts.use([GridComponent, GraphicComponent, TooltipComponent, LineChart, PieChart, BarChart, CanvasRenderer, LegendComponent])
+
 export default {
   name: 'ChartView',
   components: {
@@ -63,14 +69,18 @@ export default {
       }
     }
   },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    this.destroyChart()
+  },
   methods: {
     // 初始化图表
     async initChart() {
       if (!this.$refs.chartContainer) return
       if (!this.hasData) return
 
-      const echarts = await importG('echarts', () => import(/*webpackChunkName "echarts"*/ 'echarts'))
-
       if (!this.chartInstance) {
         this.chartInstance = echarts.init(this.$refs.chartContainer)
       }
@@ -94,12 +104,6 @@ export default {
         this.chartInstance = null
       }
     }
-  },
-  mounted() {
-    this.initChart()
-  },
-  beforeDestroy() {
-    this.destroyChart()
   }
 }
 </script>

package/src/components/Pivot/ConfigSidebar.vue

@@ -18,12 +18,7 @@
       <div class="form-item">
         <label class="form-label">统计类型</label>
         <div class="radio-group">
-          <ViewToggle
-            :value="statType"
-            :itemWidth="120"
-            :options="statTypeOptions"
-            @change="handleStatTypeChange"
-          />
+          <ViewToggle :value="statType" :item-width="120" :options="statTypeOptions" @change="handleStatTypeChange" />
         </div>
       </div>
 
@@ -392,8 +387,7 @@ export default {
       const iconMap = {
         bar: 'v3-icon-chart-histogram',
         line: 'v3-icon-chart-line',
-        pie: 'v3-icon-chart-pie',
-        horizontalBar: 'v3-icon-histogram'
+        pie: 'v3-icon-chart-pie'
       }
       return iconMap[type] || 'v3-icon-chart-histogram'
     },
@@ -515,4 +509,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/src/components/Pivot/MainToolbar.vue

@@ -30,10 +30,10 @@
       />
       <span class="toolbar-divider"></span>
       <div class="action-buttons">
-        <div class="action-btn" @click="handleRefresh" title="刷新">
+        <div class="action-btn" title="刷新" @click="handleRefresh">
           <i class="n20-icon-shuaxin"></i>
         </div>
-        <div class="action-btn more-btn" :class="{ active: showMoreMenu }" @click="toggleMoreMenu" title="更多">
+        <div class="action-btn more-btn" :class="{ active: showMoreMenu }" title="更多" @click="toggleMoreMenu">
           <i class="v3-icon-more"></i>
           <div v-if="showMoreMenu" class="more-dropdown-menu" @click.stop>
             <div v-if="isRightSidebarCollapsed" class="dropdown-menu-item" @click="handleConfig">
@@ -157,4 +157,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/src/components/Pivot/ReportSidebar.vue

@@ -3,7 +3,7 @@
   <div class="pivot-sidebar-left" :class="{ collapsed: isCollapsed }">
     <div class="sidebar-header">
       <span class="sidebar-title">我的报表清单</span>
-      <div class="add-report-btn" @click="handleAddReport" title="新建">
+      <div class="add-report-btn" title="新建" @click="handleAddReport">
         <i class="v3-icon-plus"></i>
       </div>
     </div>
@@ -54,11 +54,7 @@
     </div>
 
     <!-- 折叠/展开指示器 -->
-    <div
-      class="scroll-bar-indicator"
-      :class="{ collapsed: isCollapsed }"
-      @click="handleToggleCollapse"
-    >
+    <div class="scroll-bar-indicator" :class="{ collapsed: isCollapsed }" @click="handleToggleCollapse">
       <i :class="isCollapsed ? 'v3-icon-right' : 'v3-icon-left'"></i>
     </div>
   </div>
@@ -102,8 +98,7 @@ export default {
       const iconMap = {
         bar: 'v3-icon-chart-histogram',
         line: 'v3-icon-chart-line',
-        pie: 'v3-icon-chart-pie',
-        horizontalBar: 'v3-icon-histogram'
+        pie: 'v3-icon-chart-pie'
       }
       return iconMap[type] || 'v3-icon-chart-histogram'
     },
@@ -169,4 +164,4 @@ export default {
     }
   }
 }
-</script>
+</script>