st-comp 0.0.246 → 0.0.248

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.246",
+  "version": "0.0.248",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/packages/KlineBasic/components/KlineSub/index.vue

@@ -37,22 +37,23 @@ import { formatIndicatorNumber } from "../../utils"
 import { stMath } from "st-func";
 const { round } = stMath;
 
-let subChart;
-let resizeRo; // dom元素监听事件
+let subChart = null;
+let resizeRo = null;
+const isAlive = ref(true); // 组件活跃状态
 
 const emit = defineEmits(["update:modelValue"]);
 const props = defineProps({
   cycle: {
     type: [String, Number],
     default: () => null,
-  }, // 周期id
+  },
   data: { type: Object, require: true },
   activeIndex: { type: [Number, String], require: true },
-  modelValue: { type: String, required: true }, // 副图指标
-  subIndicatorList: { type: Array, required: true }, // 副图指标列表
+  modelValue: { type: String, required: true },
+  subIndicatorList: { type: Array, required: true },
 });
 
-const subChartRef = ref(); // 拖动轴
+const subChartRef = ref();
 const subIndicator = computed({
   get() {
     return props.modelValue;
@@ -63,27 +64,41 @@ const subIndicator = computed({
 });
 
 const subIndicatorTips = computed(() => {
+  if (!isAlive.value) return [];
   const { data, activeIndex } = props;
   return data?.subIndicator?.map((item) => ({ label: item.key, color: item.color, value: formatIndicatorNumber(item.data[activeIndex]) })) || [];
 });
+
 onMounted(() => {
+  isAlive.value = true;
+  if (!subChartRef.value) return;
+  
   subChart = echarts.init(subChartRef.value);
-  // 绑定resize事件
+  
   let isFirst = true;
   resizeRo = new ResizeObserver(() => {
     if (isFirst) {
-      isFirst = null;
+      isFirst = false;
       return;
     }
-    subChart.resize();
+    if (isAlive.value && subChart && !subChart.isDisposed()) {
+      subChart.resize();
+    }
   });
   resizeRo.observe(subChartRef.value);
 });
 
 onUnmounted(() => {
-  subChart.dispose();
-  resizeRo.disconnect();
-  resizeRo = null;
+  isAlive.value = false;
+  
+  if (subChart && !subChart.isDisposed()) {
+    subChart.dispose();
+    subChart = null;
+  }
+  if (resizeRo) {
+    resizeRo.disconnect();
+    resizeRo = null;
+  }
 });
 
 // 获取副图颜色
@@ -113,10 +128,15 @@ const getSubBarStyle = (data, index) => {
 
 defineExpose({
   connect: (chart) => {
+    if (!isAlive.value || !subChart || subChart.isDisposed()) return;
     echarts.connect([chart, subChart]);
-  }, // 联动
+  },
   draw: (drawConfig, config) => {
+    if (!isAlive.value || !subChart || subChart.isDisposed()) return;
+    
     nextTick(() => {
+      if (!isAlive.value || !subChart || subChart.isDisposed()) return;
+      
       const { startValue, endValue, maxValueSpan } = drawConfig;
       const { leftYAxisRange, rightYAxisRange } = props.data.subIndicator[0];
       const series = props.data.subIndicator.map((item) => {
@@ -271,7 +291,7 @@ defineExpose({
         true
       );
     });
-  }, // 重置
+  },
 });
 </script>
 
@@ -309,4 +329,4 @@ defineExpose({
     height: calc(100% - 26px);
   }
 }
-</style>
+</style>

package/packages/KlineBasic/components/KlineTips/index.vue

@@ -32,13 +32,13 @@ const close = ref(null);
 
 watch(() => props.activeIndex, () => { 
   if (close.value === null) {
-    close.value = props.data.data[props.activeIndex][1]
+    close.value = props.data.data[props.activeIndex]?.[1] ?? 0
   }
 });
 
 watch(() => props.data, () => { 
   if (close.value === null) {
-    close.value = props.data.data[props.activeIndex][1]
+    close.value = props.data.data[props.activeIndex]?.[1] ?? 0
   }
 });
 

package/packages/KlineBasic/index.vue

@@ -3,7 +3,7 @@ import dayjs from "dayjs";
 import * as echarts from "echarts";
 import { onMounted, onUnmounted, ref, watch, computed, nextTick } from "vue";
 import { initRequestByEnv, getKlineBasic, getKline, getWarningLine, addWarningLine, updateWarningLine, deleteWarningLine } from "./api";
-import { addResizeListener } from "st-func";
+import { addResizeListener, debounce } from "st-func";
 import { getMainOptions, getWarningLineOptions } from "./utils";
 import KlineTips from "./components/KlineTips/index.vue";
 import KlineSub from "./components/KlineSub/index.vue";
@@ -17,9 +17,6 @@ let renderFrameId = null; // 渲染帧ID
 let drawLineFrameId = null; // 绘线帧ID
 let brushFrameId = null; // 区域框选帧ID
 
-let highlightTimer; // 高亮事件定时器
-let mainDataZoomTimer; // datazoom事件定时器
-
 let isLoadHistory = false; // 是否正在加载历史数据
 let isloadAllHistory = false; // 是否加载完全部历史数据
 
@@ -103,10 +100,10 @@ const config = computed(() => {
     addCounts: 2000,
     maxShowCounts: 5000,
     loadCheckCounts: 500,
-    showSubChart: true,
     gridTop: 48,
     gridLeft: 80,
     gridRight: 50,
+    showSubChart: true,
     showWarningLine: true,
     getFactorData: true,
     ...props.config,
@@ -359,13 +356,13 @@ const getMainData = async () => {
       params.endTime = endTime;
     } else if (startTime) {
       params.startTime = startTime;
-      params.limit = defaultShowCounts + addCounts;
+      params.limit = addCounts;
     } else if (endTime) {
       params.endTime = endTime;
-      params.limit = defaultShowCounts + addCounts;
+      params.limit = addCounts;
     } else {
       params.endTime = dayjs().add(1, "hour").format("YYYY-MM-DD HH:mm:ss");
-      params.limit = defaultShowCounts + addCounts;
+      params.limit = addCounts;
     }
 
     const res = await getKlineBasic(params);
@@ -496,9 +493,9 @@ const handleKeyDownEvent = ({ code, ctrlKey }) => {
 };
 // 图表事件
 const addEventListener = () => {
-  mainChartIns?.on("datazoom", (params) => {
-    clearTimeout(mainDataZoomTimer);
-    mainDataZoomTimer = setTimeout(() => {
+  mainChartIns?.on(
+    "datazoom",
+    debounce((params) => {
       const { loadCheckCounts } = config.value;
       if (mainChartIns?.getOption()?.dataZoom?.[0]) {
         const { startValue } = mainChartIns?.getOption()?.dataZoom?.[0];
@@ -508,33 +505,33 @@ const addEventListener = () => {
         }
         drawLine(); // 使用RAF优化的绘线
       }
-      clearTimeout(mainDataZoomTimer);
-    }, 100);
-  });
-
-  mainChartIns?.on("highlight", (data) => {
-    let index = data.dataIndex || -1;
-    if (data.batch) {
-      index = typeof data?.batch[0]?.dataIndex === "number" ? data?.batch[0]?.dataIndex : -1;
-    }
-    clearTimeout(highlightTimer);
-    highlightTimer = setTimeout(() => {
-      activeIndex.value = index;
-      clearTimeout(highlightTimer);
-    }, 20);
-  });
-
-  mainChartIns?.on("globalout", () => {
-    const timer = setTimeout(() => {
-      clearTimeout(timer);
-      const index = mainChartIns?.getOption()?.dataZoom?.[0]?.endValue;
+    }, 100),
+  );
+
+  mainChartIns?.on(
+    "highlight",
+    debounce((data) => {
+      let index = data.dataIndex || -1;
+      if (data.batch) {
+        index = typeof data?.batch[0]?.dataIndex === "number" ? data?.batch[0]?.dataIndex : -1;
+      }
       activeIndex.value = index;
-    }, 30);
-  });
+    }, 20),
+  );
+
+  mainChartIns?.on(
+    "globalout",
+    debounce(() => {
+      if (mainChartIns) {
+        const index = mainChartIns?.getOption()?.dataZoom?.[0]?.endValue;
+        activeIndex.value = index;
+      }
+    }, 30),
+  );
 
-  let echartsContextMenuTimer = null;
-  mainChartIns?.on("contextmenu", (params) => {
-    echartsContextMenuTimer = setTimeout(() => {
+  mainChartIns?.on(
+    "contextmenu",
+    debounce((params) => {
       if (params.componentType === "graphic") {
         warningItem.value = params.info;
         menuData.value = [
@@ -542,10 +539,8 @@ const addEventListener = () => {
           { label: "修改画线", key: "changeWarningLine" },
         ];
       }
-      clearTimeout(echartsContextMenuTimer);
-      echartsContextMenuTimer = null;
-    });
-  });
+    }, 0),
+  );
 };
 
 // 预警线相关辅助函数
@@ -686,7 +681,10 @@ defineExpose({
     @mousemove="isHover = true"
     @mouseout="isHover = false"
   >
-    <div class="klineBasic-tips">
+    <div
+      v-if="chartData.time?.length"
+      class="klineBasic-tips"
+    >
       <KlineTips
         :variety="variety"
         :data="chartData"

package/packages/KlinePlus/index.vue

@@ -11,7 +11,6 @@ import SliderChart from "./components/SliderChart.vue";
 const { round, formatValue } = stMath;
 const { request } = inject("stConfig"); // 组件库全局配置
 
-const sliderChartRef = ref();
 const loading = ref(false);
 const isHover = ref(false);
 const props = defineProps({
@@ -53,8 +52,9 @@ let isloadAllHistory = false;
 let resizeRo = null;
 let subChartIns = null;
 let mainChartIns = null;
-const subChartRef = ref(null);
 const mainChartRef = ref(null);
+const subChartRef = ref(null);
+const sliderChartRef = ref(null);
 
 // K线数据
 const klineData = ref({
@@ -112,57 +112,73 @@ const subIndicatorTips = computed(() => {
 
 // 图表: 初始化
 const initChart = () => {
-  if (mainChartIns) return;
+  // 检查DOM元素是否存在
+  if (!mainChartRef.value) {
+    console.warn("[K线] 主图DOM元素不存在，取消初始化");
+    return false;
+  }
+  if (mainChartIns) return true;
 
-  // 主图
-  mainChartIns = echarts.init(mainChartRef.value);
-  mainChartIns.on(
-    "highlight",
-    debounce((params) => {
-      if (params.dataIndex) {
-        activeIndex.value = params.dataIndex;
-      } else {
-        activeIndex.value = params.batch?.[0].dataIndex ?? -1;
+  try {
+    // 主图
+    mainChartIns = echarts.init(mainChartRef.value);
+    mainChartIns.on(
+      "highlight",
+      debounce((params) => {
+        if (params.dataIndex) {
+          activeIndex.value = params.dataIndex;
+        } else {
+          activeIndex.value = params.batch?.[0].dataIndex ?? -1;
+        }
+      }, 10),
+    );
+    mainChartIns.on(
+      "datazoom",
+      debounce(async () => {
+        const { loadCheckCount } = loadKlineConfig;
+        const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
+        // 当前开始索引 < 阈值边界, 触发加载更多数据
+        if (isLoadHistory === false && isloadAllHistory === false && startValue < loadCheckCount) await getMoreData("history");
+        // 当前结束索引 > 阈值边界, 触发加载更多数据
+        if (isLoadNew === false && isloadAllNew === false && endValue > klineData.value.time.length - loadCheckCount) await getMoreData("new");
+        getScreenTimeRange();
+        drawScreenMaxPrice();
+      }),
+    );
+    mainChartIns.on("globalout", () => {
+      if (mainChartIns) {
+        const option = mainChartIns.getOption();
+        activeIndex.value = option.dataZoom[0].endValue;
       }
-    }, 10)
-  );
-  mainChartIns.on(
-    "datazoom",
-    debounce(async () => {
-      const { loadCheckCount } = loadKlineConfig;
-      const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
-      // 当前开始索引 < 阈值边界, 触发加载更多数据
-      if (isLoadHistory === false && isloadAllHistory === false && startValue < loadCheckCount) await getMoreData("history");
-      // 当前结束索引 > 阈值边界, 触发加载更多数据
-      if (isLoadNew === false && isloadAllNew === false && endValue > klineData.value.time.length - loadCheckCount) await getMoreData("new");
-      getScreenTimeRange();
-      drawScreenMaxPrice();
-    })
-  );
-  mainChartIns.on("globalout", () => {
-    const option = mainChartIns.getOption();
-    activeIndex.value = option.dataZoom[0].endValue;
-  });
-  mainChartIns.getZr().on("contextmenu", () => {
-    contextmenuKlineTime.value = klineData.value?.time[activeIndex.value];
-  });
-  window.addEventListener("keydown", handleKeyDownEvent);
+    });
+    mainChartIns.getZr().on("contextmenu", () => {
+      contextmenuKlineTime.value = klineData.value?.time[activeIndex.value];
+    });
+    window.addEventListener("keydown", handleKeyDownEvent);
 
-  // 副图
-  if (props.userKlineConfig.enable_subChart) {
-    subChartIns = echarts.init(subChartRef.value);
-    echarts.connect([mainChartIns, subChartIns]);
-  }
+    // 副图
+    if (props.userKlineConfig.enable_subChart && subChartRef.value) {
+      subChartIns = echarts.init(subChartRef.value);
+      echarts.connect([mainChartIns, subChartIns]);
+    }
 
-  // DOM缩放
-  resizeRo = addResizeListener(mainChartRef.value);
-  resizeRo.listen(() => {
-    requestAnimationFrame(() => {
-      mainChartIns.resize();
-      subChartIns?.resize();
-      sliderChartRef.value?.resize();
-    });
-  });
+    // DOM缩放
+    if (mainChartRef.value) {
+      resizeRo = addResizeListener(mainChartRef.value);
+      resizeRo.listen(() => {
+        requestAnimationFrame(() => {
+          mainChartIns?.resize();
+          subChartIns?.resize();
+          sliderChartRef.value?.resize();
+        });
+      });
+    }
+
+    return true;
+  } catch (error) {
+    console.error("[st-klinePlus]: 初始化异常:", error);
+    return false;
+  }
 };
 // 图表: 获取数据 [首屏]
 const getMainData = async ({ startTime, endTime }) => {
@@ -312,7 +328,16 @@ const getScreenTimeRange = () => {
 
 // 图表: 绘制(主流程)
 const draw = (params = { startValue: 0, endValue: 0 }) => {
-  initChart();
+  const isInitialized = initChart();
+  // 确保图表存在
+  if (!isInitialized || !mainChartIns) {
+    return console.warn("[st-klinePlus]: 图表未准备就绪, 跳过绘制");
+  }
+  // 检查数据是否存在
+  if (!klineData.value.time.length) {
+    return console.warn("[st-klinePlus]: 图表无数据, 跳过绘制");
+  }
+
   const { maxValueSpan } = loadKlineConfig;
   const { time, data, mainIndicator } = klineData.value;
 
@@ -570,7 +595,7 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
         },
       },
     },
-    true
+    true,
   );
   if (props.userKlineConfig.enable_subChart) {
     subChartIns.setOption(getSubOptions(klineData.value, startValue, endValue), true);
@@ -712,7 +737,7 @@ const drawScreenMaxPrice = () => {
     {
       notMerge: false, // 合并模式
       replaceMerge: [], // 不替换任何配置
-    }
+    },
   );
 };
 
@@ -727,6 +752,7 @@ const handleSliderChange = (params) => {
 };
 // 键盘控制 [↑↓←→缩放平移]
 const handleKeyDownEvent = ({ code, ctrlKey }) => {
+  if (!mainChartIns) return;
   if (!(ctrlKey || isHover.value)) return;
   const { xAxis, dataZoom } = mainChartIns.getOption();
   const { data: xAxisData } = xAxis?.[0] ?? { data: [] };
@@ -801,7 +827,7 @@ watch(
     const [startTime, endTime] = props.initTimeRange;
     getMainData({ startTime, endTime });
   },
-  { deep: true }
+  { deep: true },
 );
 // 监控: [周期选项] => 重加载K线 (缩放不变+校验时间间隔)
 watch(
@@ -816,7 +842,7 @@ watch(
     });
     getMainData({ startTime, endTime });
   },
-  { deep: true }
+  { deep: true },
 );
 // 监控: [主指标, 副指标, 指标配置, 复权选项, 常用选项] => 重加载K线 (缩放不变)
 watch(
@@ -826,7 +852,7 @@ watch(
     const [startTime, endTime] = [klineData.value.time[startValue], klineData.value.time[endValue]];
     getMainData({ startTime, endTime });
   },
-  { deep: true }
+  { deep: true },
 );
 // 监控: [成交点类型, 成交数据, 净值数据, 收益计算类型, 成交收益率数据] => 重绘K线 (缩放不变)
 watch(
@@ -835,19 +861,19 @@ watch(
     const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
     draw({ startValue, endValue });
   },
-  { deep: true }
+  { deep: true },
 );
 onUnmounted(() => {
   // 解绑
-  mainChartIns.off("highlight");
-  mainChartIns.off("globalout");
-  mainChartIns.off("datazoom");
-  mainChartIns.getZr().off("contextmenu");
+  mainChartIns?.off("highlight");
+  mainChartIns?.off("globalout");
+  mainChartIns?.off("datazoom");
+  mainChartIns?.getZr()?.off("contextmenu");
   window.removeEventListener("keydown", handleKeyDownEvent);
   // 销毁
-  mainChartIns.dispose();
+  mainChartIns?.dispose();
   subChartIns?.dispose();
-  resizeRo.dispose();
+  resizeRo?.dispose();
   resizeRo = null;
 });
 defineExpose({

package/src/App.vue

@@ -39,14 +39,25 @@ import routes from "./router/routes.ts";
 const route = useRoute();
 
 // const VITE_RUN_ENV = import.meta.env; // 正常使用
+// const VITE_RUN_ENV = {
+//   VITE_PROJECT_NAME: "动量回测",
+//   VITE_PROJECT_CLIENTID: "7",
+//   VITE_BASE_URL: "http://192.168.12.38:5173",
+//   BASE_URL: "/",
+//   MODE: "test49",
+//   DEV: true,
+//   PROD: false,
+//   SSR: false,
+// };
+
 const VITE_RUN_ENV = {
   VITE_PROJECT_NAME: "动量回测",
   VITE_PROJECT_CLIENTID: "7",
-  VITE_BASE_URL: "http://192.168.12.38:5173",
+  VITE_BASE_URL: "//investapi.hzyotoy.com",
   BASE_URL: "/",
-  MODE: "test49",
-  DEV: true,
-  PROD: false,
+  MODE: "production",
+  DEV: false,
+  PROD: true,
   SSR: false,
 };
 </script>

package/src/pages/KlineBasic/index.vue

@@ -178,14 +178,14 @@ import { getCycleList, host } from './api';
 const indicatorStore = useIndicatorStore();
 
 // 显示模式
-const displayMode = ref('single'); // single: 单周期, multi: 多周期
+const displayMode = ref('multi'); // single: 单周期, multi: 多周期
 const show = ref(false);
 
 // 周期映射
 const cycleMap = {
-  '15m': { value: '1', label: '15分钟' },
-  '30m': { value: '2', label: '30分钟' },
-  '60m': { value: '3', label: '60分钟' },
+  '15m': { value: '3', label: '15分钟' },
+  '30m': { value: '4', label: '30分钟' },
+  '60m': { value: '5', label: '60分钟' },
   '1d': { value: '6', label: '日线' },
   '1w': { value: '7', label: '周线' },
   '1mon': { value: '8', label: '月线' }
@@ -193,9 +193,9 @@ const cycleMap = {
 
 // 多周期展示的周期列表
 const multiCycleList = [
-  { cycle: '1', cycleLabel: '15分钟' },   // 15m
-  { cycle: '2', cycleLabel: '30分钟' },   // 30m
-  { cycle: '3', cycleLabel: '60分钟' },   // 60m
+  { cycle: '3', cycleLabel: '15分钟' },   // 15m
+  { cycle: '4', cycleLabel: '30分钟' },   // 30m
+  { cycle: '5', cycleLabel: '60分钟' },   // 60m
   { cycle: '6', cycleLabel: '日线' },     // 1d
   { cycle: '7', cycleLabel: '周线' },     // 1w
   { cycle: '8', cycleLabel: '月线' }      // 1mon

package/src/pages/KlineNew/components/KlineAction/mockApi/index.js

@@ -6,7 +6,7 @@ export const getKlineDataApi = async(params) => {
     headers: {
       token: '041fd377d5d5efc7e08e2ed5b61b0c8d',
     },
-    url: 'http://invest.hzyotoy.com/common/qt/getSingleCycleSingleVariety',
+    url: 'http://invest.hzyotoy.com/common/webjars/qt/getSingleCycleSingleVariety',
     data: params,
   })
   return res.data.body

package/src/pages/KlineNew/components/KlineBasic/utils.js

@@ -38,7 +38,7 @@ export const getKlineDataApi = async(params) => {
     headers: {
       token: '36cbbea2e76aff9d99f88d50669c009c',
     },
-    url: 'http://invest.hzyotoy.com/common/qt/getSingleCycleSingleVariety',
+    url: 'http://invest.hzyotoy.com/common/webjars/qt/getSingleCycleSingleVariety',
     data: params,
   })
   getKlineNew(params)

package/src/pages/KlineNew/components/KlineSlide/utils.js

@@ -71,7 +71,7 @@ export const getKlineDataApi = async(params) => {
     headers: {
       token: 'ee08db9f1b8085e3c84fa22b60835951',
     },
-    url: 'http://invest.hzyotoy.com/common/qt/getSingleCycleSingleVariety',
+    url: 'http://invest.hzyotoy.com/common/webjars/qt/getSingleCycleSingleVariety',
     data: params,
   })
   return res.data.body