首页优化

刘淇
1 parent cf70629b
Showing 3 changed files with 128 additions and 75 deletions
components/uni-charts/uni-charts.vue
pages/index/index.vue
pages/workbench/index.vue
@@ -38,7 +38,11 @@ export default {
     option: {
       type: Object,
       default () {
-        return {}
+        return {
+          yAxis: {
+            tickCount: 5 // 默认5个刻度，可通过option自定义，无上限
+          }
+        }
       }
     },
     width: {
@@ -88,7 +92,41 @@ export default {
         this.drawLine()
       }
     },
-    // 折线图绘制（移除平滑过渡，改为纯直线）
+    // 核心：自适应计算Y轴整数刻度（无任何数值限制）
+    calculateYAxisTicks (minVal, maxVal, tickCount = 5) {
+      // 1. 确保是整数，且最大值>最小值（无数值范围限制）
+      minVal = parseInt(minVal, 10)
+      maxVal = parseInt(maxVal, 10)
+
+      // 边界处理：极值相等时自动扩展范围（避免刻度重复）
+      if (maxVal <= minVal) {
+        maxVal = minVal + tickCount // 扩展范围，保证刻度不重复
+      }
+
+      // 2. 动态计算整数步长（完全自适应，无固定值限制）
+      const totalRange = maxVal - minVal
+      let step = Math.ceil(totalRange / (tickCount - 1)) // 关键：按刻度数算步长
+      step = step < 1 ? 1 : step // 步长至少为1，保证整数刻度
+
+      // 3. 生成连续不重复的整数刻度（无数值上限）
+      const ticks = []
+      for (let i = 0; i < tickCount; i++) {
+        ticks.push(minVal + i * step)
+      }
+
+      // 4. 确保最大值能覆盖数据（无限制）
+      if (ticks[ticks.length - 1] < maxVal) {
+        ticks.push(maxVal)
+      }
+
+      return {
+        ticks: ticks, // 最终刻度数组（纯整数、不重复、无限制）
+        min: minVal,
+        max: Math.max(...ticks),
+        step: step
+      }
+    },
+    // 折线图绘制（无限制版）
     drawLine () {
       if (!this.data.length || !this.categories.length) return;
@@ -106,7 +144,7 @@ export default {
       // 清空画布
       ctx.clearRect(0, 0, width, height)
-      // 调整Grid布局，彻底解决重叠
+      // Grid布局（自适应，无固定值）
       const gridTop = grid.top ? (typeof grid.top === 'string' ? parseFloat(grid.top) / 100 * height : grid.top) : 60
       const gridLeft = grid.left ? (typeof grid.left === 'string' ? parseFloat(grid.left) / 100 * width : grid.left) : 70
       const gridRight = grid.right ? (typeof grid.right === 'string' ? parseFloat(grid.right) / 100 * width : grid.right) : 20
@@ -115,61 +153,58 @@ export default {
       const drawWidth = width - gridLeft - gridRight
       const drawHeight = height - gridTop - gridBottom
-      // Y轴最大值自适应（无小数点）
+      // 收集所有Y轴数据（无数值限制）
       let allValues = []
       this.data.forEach(series => {
         allValues = allValues.concat(series.data)
       })
       if (allValues.length === 0) return;
-      // 动态计算Y轴极值（保留10%顶部余量，转为整数）
+      // 基础极值（完全按数据来，无任何限制）
       const rawMaxVal = Math.max(...allValues)
       const rawMinVal = Math.min(...allValues)
-      const maxVal = yAxis.max || Math.ceil(rawMaxVal * 1.1) // 向上取整，保证能容纳最大值
-      const minVal = yAxis.min || (rawMinVal < 0 ? Math.floor(rawMinVal * 1.1) : 0) // 向下取整（负数），默认0
-      const valRange = maxVal - minVal || 1
-
-      // 计算X轴每个点的宽度
+      // 用户可通过yAxis.min/max自定义极值，否则用数据极值（无限制）
+      const maxVal = yAxis.max !== undefined ? yAxis.max : rawMaxVal
+      const minVal = yAxis.min !== undefined ? yAxis.min : rawMinVal
+      // 刻度数量自定义（默认5个，可传任意数，无上限）
+      const tickCount = yAxis.tickCount || 5
+
+      // 核心：计算无限制、不重复的整数刻度
+      const yAxisConfig = this.calculateYAxisTicks(minVal, maxVal, tickCount)
+      const { ticks: yTicks, min: alignedMinVal, max: alignedMaxVal } = yAxisConfig
+      const valRange = alignedMaxVal - alignedMinVal || 1
+
+      // X轴步长（自适应）
       const xStep = drawWidth / (this.categories.length - 1 || 1)
-      // X轴标签防拥挤
+      // X轴标签防拥挤（自适应，无限制）
       const minLabelWidth = 30
       const maxShowLabels = Math.floor(drawWidth / minLabelWidth)
       const labelInterval = maxShowLabels < this.categories.length
           ? Math.ceil(this.categories.length / maxShowLabels)
           : 1
-      // 绘制网格线 + Y轴整数刻度
+      // 绘制网格线 + Y轴整数刻度（无数值限制）
       ctx.setStrokeStyle(yAxis.splitLine?.lineStyle?.color || '#f5f5f7')
       ctx.setLineWidth(1)
-      const yTickCount = 5
-      const yTickStep = valRange / yTickCount
-      for (let i = 0; i <= yTickCount; i++) {
-        const y = gridTop + drawHeight - (i * drawHeight / yTickCount)
+      yTicks.forEach((tickVal, i) => {
+        const y = gridTop + drawHeight - (i * drawHeight / (yTicks.length - 1))
         // 绘制网格线
         ctx.beginPath()
         ctx.moveTo(gridLeft, y)
         ctx.lineTo(width - gridRight, y)
         ctx.stroke()
-        // Y轴显示整数（无小数点）
+        // Y轴显示纯整数（无小数点、无任何数值限制）
         ctx.setFillStyle(yAxis.axisLabel?.color || '#666')
         ctx.setFontSize(yAxis.axisLabel?.fontSize || 12)
-        const val = minVal + (i * yTickStep)
-        // 转为整数（四舍五入），彻底去掉小数点
-        const intVal = Math.round(val)
-        let valText = intVal.toString()
-        // 长数字处理（仍为整数格式）
-        if (valText.length > 6) {
-          valText = intVal.toLocaleString() // 用千分位显示长整数，如 1234567 → 1,234,567
-        }
-        // 文字右对齐，避免折叠
+        const valText = tickVal.toString() // 纯整数，直接转字符串
         const textWidth = ctx.measureText(valText).width
         ctx.fillText(valText, gridLeft - 10 - textWidth, y + 5)
-      }
+      })
-      // 绘制X轴标签
+      // 绘制X轴标签（自适应）
       ctx.setFillStyle(xAxis.axisLabel?.color || '#666')
       ctx.setFontSize(xAxis.axisLabel?.fontSize || 12)
       this.categories.forEach((text, index) => {
@@ -180,7 +215,6 @@ export default {
             labelText = text.slice(0, 6) + '...'
           }
           const textLines = labelText.split('\n')
-
           textLines.forEach((line, lineIdx) => {
             const textWidth = ctx.measureText(line).width
             ctx.fillText(line, x - textWidth / 2, height - gridBottom + 20 + (lineIdx * 12))
@@ -188,29 +222,45 @@ export default {
         }
       })
-      // 优化图例间距
+      // 绘制图例（核心修复：颜色块和文字垂直居中对齐）
       if (legend.show) {
-        ctx.setFontSize(legend.textStyle?.fontSize || 12)
+        // 获取图例文字大小（统一基准）
+        const legendFontSize = legend.textStyle?.fontSize || 12
+        ctx.setFontSize(legendFontSize)
+        // 定义颜色块尺寸（和文字高度匹配）
+        const legendBlockSize = legendFontSize * 0.8 // 颜色块大小 = 文字大小的80%，视觉更协调
+        const legendBlockMargin = 5 // 颜色块和文字的间距
         let legendX = gridLeft + 10
+        // 计算垂直居中基准线
+        const legendYBase = gridTop - 30
+
         this.data.forEach((series, idx) => {
           let seriesName = series.name || `系列${idx + 1}`
           if (seriesName.length > 8) {
             seriesName = seriesName.slice(0, 8) + '...'
           }
           const textWidth = ctx.measureText(seriesName).width
-          const legendItemWidth = textWidth + 25
-          const legendY = gridTop - 30
+          // 核心：计算颜色块和文字的垂直居中位置
+          // 颜色块Y坐标 = 基准线 - 颜色块高度/2（居中）
+          const legendBlockY = legendYBase - legendBlockSize / 2
+          // 文字Y坐标 = 基准线 + 文字高度/4（canvas文字居中的黄金比例）
+          const legendTextY = legendYBase + legendFontSize / 4
+
+          // 绘制颜色块（居中对齐）
           ctx.setFillStyle(series.color || color[idx % color.length])
-          ctx.fillRect(legendX, legendY, 10, 10)
+          ctx.fillRect(legendX, legendBlockY, legendBlockSize, legendBlockSize)
+
+          // 绘制文字（和颜色块垂直居中）
           ctx.setFillStyle('#666')
-          ctx.fillText(seriesName, legendX + 15, legendY + 8)
+          ctx.fillText(seriesName, legendX + legendBlockSize + legendBlockMargin, legendTextY)
-          legendX += Math.max(80, legendItemWidth + 10)
+          // 更新下一个图例的X坐标（包含间距）
+          legendX += legendBlockSize + legendBlockMargin + textWidth + 10
         })
       }
-      // ========== 核心修改：移除平滑曲线，改为纯直线连接 ==========
+      // 绘制折线（纯直线，无数值限制）
       this.data.forEach((series, seriesIdx) => {
         const seriesColor = series.color || color[seriesIdx % color.length]
@@ -220,12 +270,12 @@ export default {
         series.data.forEach((value, index) => {
           const x = gridLeft + index * xStep
-          const y = gridTop + drawHeight - ((value - minVal) / valRange) * drawHeight
+          // 自适应计算Y坐标（无数值限制）
+          const y = gridTop + drawHeight - ((value - alignedMinVal) / valRange) * drawHeight
           if (index === 0) {
             ctx.moveTo(x, y)
           } else {
-            // 直接直线连接，移除所有贝塞尔曲线平滑逻辑
             ctx.lineTo(x, y)
           }
         })
@@ -235,7 +285,7 @@ export default {
       ctx.draw()
     },
-    // K线图绘制（同步修改Y轴为整数，K线本身无平滑逻辑，保持原样）
+    // K线图绘制（同步无限制逻辑 + 图例对齐修复）
     drawKline () {
       const ctx = uni.createCanvasContext('uni-charts', this)
       this.ctx = ctx
@@ -244,7 +294,7 @@ export default {
       ctx.clearRect(0, 0, width, height)
-      // 调整Grid布局
+      // Grid布局（自适应）
       const gridTop = grid.top ? (typeof grid.top === 'string' ? parseFloat(grid.top) / 100 * height : grid.top) : 50
       const gridLeft = grid.left ? (typeof grid.left === 'string' ? parseFloat(grid.left) / 100 * width : grid.left) : 70
       const gridRight = grid.right ? (typeof grid.right === 'string' ? parseFloat(grid.right) / 100 * width : grid.right) : 20
@@ -253,44 +303,47 @@ export default {
       const drawWidth = width - gridLeft - gridRight
       const drawHeight = height - gridTop - gridBottom
-      // Y轴自适应极值（整数）
+      // 收集所有Y轴数据（无限制）
       let allValues = []
       this.data.forEach(item => {
         allValues = allValues.concat([item.open, item.high, item.low, item.close])
       })
       if (allValues.length === 0) return;
+      // 基础极值（无限制）
       const rawMaxVal = Math.max(...allValues)
       const rawMinVal = Math.min(...allValues)
-      const maxVal = yAxis.max || Math.ceil(rawMaxVal * 1.1)
-      const minVal = yAxis.min || (rawMinVal < 0 ? Math.floor(rawMinVal * 1.1) : 0)
-      const valRange = maxVal - minVal || 1
+      const maxVal = yAxis.max !== undefined ? yAxis.max : rawMaxVal
+      const minVal = yAxis.min !== undefined ? yAxis.min : rawMinVal
+      const tickCount = yAxis.tickCount || 5
+
+      // 核心：无限制整数刻度计算
+      const yAxisConfig = this.calculateYAxisTicks(minVal, maxVal, tickCount)
+      const { ticks: yTicks, min: alignedMinVal, max: alignedMaxVal } = yAxisConfig
+      const valRange = alignedMaxVal - alignedMinVal || 1
       const xStep = drawWidth / (this.data.length || 1)
-      // 绘制网格线和Y轴整数刻度
+      // 绘制网格线和Y轴刻度（无限制）
       ctx.setStrokeStyle('#f5f5f7')
       ctx.setLineWidth(1)
-      const yTickCount = 5
-      for (let i = 0; i <= yTickCount; i++) {
-        const y = gridTop + drawHeight - (i * drawHeight / yTickCount)
+
+      yTicks.forEach((tickVal, i) => {
+        const y = gridTop + drawHeight - (i * drawHeight / (yTicks.length - 1))
         ctx.beginPath()
         ctx.moveTo(gridLeft, y)
         ctx.lineTo(width - gridRight, y)
         ctx.stroke()
-        // Y轴显示整数
+        // 纯整数显示（无限制）
         ctx.setFillStyle(yAxis.axisLabel?.color || '#666')
         ctx.setFontSize(yAxis.axisLabel?.fontSize || 12)
-        const val = minVal + (i * valRange / yTickCount)
-        const intVal = Math.round(val)
-        let valText = intVal.toString()
-        if (valText.length > 6) valText = intVal.toLocaleString()
+        const valText = tickVal.toString()
         const textWidth = ctx.measureText(valText).width
         ctx.fillText(valText, gridLeft - 10 - textWidth, y + 5)
-      }
+      })
-      // X轴标签（防拥挤）
+      // X轴标签（自适应）
       ctx.setFillStyle(xAxis.axisLabel?.color || '#666')
       ctx.setFontSize(xAxis.axisLabel?.fontSize || 12)
       const minLabelWidth = 30
@@ -308,16 +361,17 @@ export default {
         }
       })
-      // 绘制K线（K线本身就是直线，无平滑逻辑）
+      // 绘制K线（无数值限制）
       this.data.forEach((item, index) => {
         const { open, high, low, close } = item
         const x = gridLeft + index * xStep + xStep / 2
-        const yOpen = gridTop + drawHeight - ((open - minVal) / valRange) * drawHeight
-        const yClose = gridTop + drawHeight - ((close - minVal) / valRange) * drawHeight
-        const yHigh = gridTop + drawHeight - ((high - minVal) / valRange) * drawHeight
-        const yLow = gridTop + drawHeight - ((low - minVal) / valRange) * drawHeight
+        // 自适应坐标计算
+        const yOpen = gridTop + drawHeight - ((open - alignedMinVal) / valRange) * drawHeight
+        const yClose = gridTop + drawHeight - ((close - alignedMinVal) / valRange) * drawHeight
+        const yHigh = gridTop + drawHeight - ((high - alignedMinVal) / valRange) * drawHeight
+        const yLow = gridTop + drawHeight - ((low - alignedMinVal) / valRange) * drawHeight
-        // 绘制高低线（直线）
+        // 绘制高低线
         ctx.setStrokeStyle(close >= open ? color[0] : color[1])
         ctx.setLineWidth(1)
         ctx.beginPath()
@@ -347,7 +401,7 @@ export default {
       this.touchInfo.y = e.changedTouches[0].y
     },
     touchEnd (e) {
-      // 可扩展点击交互逻辑
+      // 可扩展交互逻辑，无限制
     }
   }
 }
@@ -10,8 +10,8 @@
       </view>
       <view class="msg-icon" @click="handleMsgClick" hover-class="msg-icon--hover">
         <up-icon name="chat" color="#fff" size="24"/>
-        <view class="msg-badge" v-if="msgCount > 0">
-          <up-badge type="error" max="999" :value="msgCount"></up-badge>
+        <view class="msg-badge" >
+          <up-badge type="error" showZero="true" max="999" :value="msgCount"></up-badge>
         </view>
       </view>
     </view>
@@ -55,11 +55,10 @@
           active-color="#0A86F4"
           inactive-color="#666"
           font-size="14px"
-          line-width="40"
-          line-height="3"
+          lineWidth="60"
           @change="handleTabChange"
           class="task-tab-container"
-          scrollable="false"
+          :scrollable="false"
       ></up-tabs>
       <!-- z-paging分页列表 -->
@@ -150,9 +149,9 @@ const klineChartData = ref([
 const klineOption = ref({
   grid: {
     top: '25%',
-    left: '15%',
+    left: '12%',
     right: '8%',
-    bottom: '20%'
+    bottom: '16%'
   },
   xAxis: {
     axisLabel: {fontSize: 12, color: '#666'}
@@ -372,7 +371,7 @@ $border-color: #e5e5e5; // 新增边框颜色变量
 .user-info-bar {
   background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
   background-size: 100% 100%;
-  padding: 100px $spacing-lg 135px;
+  padding: 90px $spacing-lg 135px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -393,8 +392,8 @@ $border-color: #e5e5e5; // 新增边框颜色变量
   .msg-icon {
     position: relative;
     padding: 5px;
+    top:10px;
     border-radius: 50%;
-    transition: background-color 0.2s;
     &--hover {
       background-color: rgba(255, 255, 255, 0.2);
@@ -413,7 +412,7 @@ $border-color: #e5e5e5; // 新增边框颜色变量
   border-radius: $border-radius $border-radius 0 0;
   background-color: $bg-color;
   position: relative;
-  z-index: 2;
+  z-index: 999;
   overflow: hidden;
   padding-bottom: $spacing-lg;
 }
@@ -166,7 +166,7 @@ const handleMenuClick = (item: MenuItem) =&gt; {
   top: 0;
   left: 0;
   width: 100%;
-  padding: 90px 15px 135px;
+  padding: 80px 15px 125px;
   background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
   background-size: 100% 100%;
   z-index: 1;
@@ -191,7 +191,7 @@ const handleMenuClick = (item: MenuItem) =&gt; {
 .content-wrap {
   position: relative;
   z-index: 2;
-  padding: 150px 0 0;
+  padding: 135px 0 0;
   display: flex;
   flex-direction: column;
   gap: 10px;