st-comp 0.0.276 → 0.0.278

package/.argus/coldstore/60094b3c17412a84.jsonl

@@ -0,0 +1,3 @@
+{"id":"t1.tool9","tool_name":"read_file","full_text":"[read_file path=D:/gitlab/st-comp/packages/KlineBasic/index.vue lines=1-840/840 bytes=24441]\n    1\t\u003cscript setup\u003e\r\n    2\timport dayjs from \"dayjs\";\r\n    3\timport * as echarts from \"echarts\";\r\n    4\timport { onMounted, onUnmounted, ref, watch, computed, nextTick } from \"vue\";\r\n    5\timport { initRequestByEnv, getKlineBasic, getKline, getWarningLine, addWarningLine, updateWarningLine, deleteWarningLine } from \"./api\";\r\n    6\timport { addResizeListener, debounce } from \"st-func\";\r\n    7\timport { getMainOptions, getWarningLineOptions } from \"./utils\";\r\n    8\timport KlineTips from \"./components/KlineTips/index.vue\";\r\n    9\timport KlineSub from \"./components/KlineSub/index.vue\";\r\n   10\timport Contextmenu from \"./components/Contextmenu/index.vue\";\r\n   11\t\r\n   12\tconst defaultMenuData = [{ label: \"画线预警\", key: \"drawWarningLine\" }];\r\n   13\t\r\n   14\tlet resizeRo = null; // dom元素监听事件\r\n   15\tlet mainChartIns = null; // 主图实例\r\n   16\tlet renderFrameId = null; // 渲染帧ID\r\n   17\tlet drawLineFrameId = null; // 绘线帧ID\r\n   18\tlet brushFrameId = null; // 区域框选帧ID\r\n   19\t\r\n   20\tlet isLoadHistory = false; // 是否正在加载历史数据\r\n   21\tlet isloadAllHistory = false; // 是否加载完全部历史数据\r\n   22\t\r\n   23\tconst emit = defineEmits([\"change\", \"getFactorData\"]);\r\n   24\t\r\n   25\tconst props = defineProps({\r\n   26\t  variety: {\r\n   27\t    type: [String, Number],\r\n   28\t    default: () =\u003e null,\r\n   29\t  },\r\n   30\t  varietyName: {\r\n   31\t    type: [String, Number],\r\n   32\t    default: () =\u003e null,\r\n   33\t  },\r\n   34\t  featureId: {\r\n   35\t    type: [String, Number],\r\n   36\t    default: () =\u003e null,\r\n   37\t  },\r\n   38\t  featureType: {\r\n   39\t    type: [String, Number],\r\n   40\t    default: () =\u003e null,\r\n   41\t  },\r\n   42\t  cycle: {\r\n   43\t    type: [String, Number],\r\n   44\t    default: () =\u003e null,\r\n   45\t  },\r\n   46\t  mainIndicator: {\r\n   47\t    type: String,\r\n   48\t    default: () =\u003e \"\",\r\n   49\t  },\r\n   50\t  indicatorStore: {\r\n   51\t    type: Object,\r\n   52\t    default: () =\u003e null,\r\n   53\t  },\r\n   54\t  startTime: {\r\n   55\t    type: String,\r\n   56\t    default: () =\u003e null,\r\n   57\t  },\r\n   58\t  endTime: {\r\n   59\t    type: String,\r\n   60\t    default: () =\u003e null,\r\n   61\t  },\r\n   62\t  right: {\r\n   63\t    type: [String, Number],\r\n   64\t    default: 1,\r\n   65\t  },\r\n   66\t  config: {\r\n   67\t    type: Object,\r\n   68\t    default: () =\u003e ({}),\r\n   69\t  },\r\n   70\t  env: {\r\n   71\t    type: Object,\r\n   72\t    default: () =\u003e ({}),\r\n   73\t  },\r\n   74\t  brushRange: {\r\n   75\t    type: [Array, null],\r\n   76\t    default: () =\u003e null,\r\n   77\t  },\r\n   78\t});\r\n   79\t\r\n   80\tconst isHover = ref(false);\r\n   81\tconst isEmpty = ref(false);\r\n   82\tconst isError = ref(false);\r\n   83\t\r\n   84\tconst klineBasicMainRef = ref(null);\r\n   85\tconst klineSubRef = ref(null);\r\n   86\tconst subIndicator = ref(\"VOL\");\r\n   87\tconst activeIndex = ref(0);\r\n   88\t\r\n   89\tconst chartData = ref({});\r\n   90\tconst warningLineData = ref([]);\r\n   91\tconst warningItem = ref({});\r\n   92\tconst warningLineChangeVisible = ref(false);\r\n   93\tconst warningLineChangeValue = ref(\"\");\r\n   94\t\r\n   95\tconst menuData = ref([...defaultMenuData]);\r\n   96\t\r\n   97\tconst config = computed(() =\u003e {\r\n   98\t  return {\r\n   99\t    defaultShowCounts: 500,\r\n  100\t    addCounts: 2000,\r\n  101\t    maxShowCounts: 5000,\r\n  102\t    loadCheckCounts: 500,\r\n  103\t    gridTop: 48,\r\n  104\t    gridLeft: 80,\r\n  105\t    gridRight: 50,\r\n  106\t    showSubChart: true,\r\n  107\t    showWarningLine: true,\r\n  108\t    getFactorData: true,\r\n  109\t    ...props.config,\r\n  110\t  };\r\n  111\t});\r\n  112\t\r\n  113\t// 初始化图表\r\n  114\tconst initChart = () =\u003e {\r\n  115\t  if (mainChartIns) return;\r\n  116\t  mainChartIns = echarts.init(klineBasicMainRef.value);\r\n  117\t  addEventListener();\r\n  118\t  if (config.value.showSubChart) {\r\n  119\t    klineSubRef.value.connect(mainChartIns);\r\n  120\t  }\r\n  121\t  resizeRo = addResizeListener(klineBasicMainRef.value);\r\n  122\t  resizeRo.listen(() =\u003e {\r\n  123\t    requestAnimationFrame(() =\u003e {\r\n  124\t      mainChartIns?.resize();\r\n  125\t      drawLine(); // resize后重绘预警线\r\n  126\t    });\r\n  127\t  });\r\n  128\t};\r\n  129\t// 隐藏loading\r\n  130\tconst hideLoading = () =\u003e {\r\n  131\t  if (mainChartIns \u0026\u0026 !mainChartIns.isDisposed()) {\r\n  132\t    mainChartIns.hideLoading();\r\n  133\t  }\r\n  134\t};\r\n  135\t\r\n  136\t// 图表渲染: 全部\r\n  137\tconst scheduleRender = (keepDataZoom = false) =\u003e {\r\n  138\t  // 取消正在进行的渲染\r\n  139\t  if (renderFrameId) {\r\n  140\t    cancelAnimationFrame(renderFrameId);\r\n  141\t    renderFrameId = null;\r\n  142\t  }\r\n  143\t  // 第一帧：渲染主图\r\n  144\t  renderFrameId = requestAnimationFrame(() =\u003e {\r\n  145\t    drawMain(keepDataZoom);\r\n  146\t    // 第二帧：渲染副图\r\n  147\t    renderFrameId = requestAnimationFrame(() =\u003e {\r\n  148\t      drawSub();\r\n  149\t      // 第三帧：渲染预警线\r\n  150\t      renderFrameId = requestAnimationFrame(() =\u003e {\r\n  151\t        drawLine();\r\n  152\t        renderFrameId = null;\r\n  153\t      });\r\n  154\t    });\r\n  155\t  });\r\n  156\t};\r\n  157\t// 图表渲染: 主图\r\n  158\tconst drawMain = (keepDataZoom = false) =\u003e {\r\n  159\t  if (!mainChartIns || mainChartIns.isDisposed()) return;\r\n  160\t\r\n  161\t  const { time } = chartData.value;\r\n  162\t  const { defaultShowCounts } = config.value;\r\n  163\t\r\n  164\t  let startValue = time.length - 1 - defaultShowCounts;\r\n  165\t  let endValue = time.length - 1;\r\n  166\t\r\n  167\t  // 保持缩放位置\r\n  168\t  if (keepDataZoom \u0026\u0026 mainChartIns) {\r\n  169\t    const originOption = mainChartIns.getOption();\r\n  170\t    const originTime = originOption?.xAxis?.[0]?.data;\r\n  171\t    const originDataZoom = originOption?.dataZoom?.[0];\r\n  172\t\r\n  173\t    if (originTime?.length \u0026\u0026 originDataZoom) {\r\n  174\t      const originStartTime = originTime[originDataZoom.startValue];\r\n  175\t      const originEndTime = originTime[originDataZoom.endValue];\r\n  176\t      if (originStartTime \u0026\u0026 originEndTime) {\r\n  177\t        // startValue: 从前往后找第一个 \u003e= 原始开始时间的索引\r\n  178\t        const foundStartIndex = time.findIndex((item) =\u003e new Date(item).getTime() \u003e= new Date(originStartTime).getTime());\r\n  179\t        // endValue: 从后往前找最后一个 \u003c= 原始结束时间的索引\r\n  180\t        const foundEndIndex = time.findLastIndex((item) =\u003e new Date(item).getTime() \u003c= new Date(originEndTime).getTime());\r\n  181\t        // 使用找到的索引，如果没找到则使用默认值\r\n  182\t        startValue = foundStartIndex !== -1 ? foundStartIndex : 0;\r\n  183\t        endValue = foundEndIndex !== -1 ? foundEndIndex : time.length - 1;\r\n  184\t        // 确保 startValue 不大于 endValue\r\n  185\t        if (startValue \u003e endValue) {\r\n  186\t          // 如果范围异常，以结束索引为准，向前取一定数量\r\n  187\t          startValue = Math.max(0, endValue - Math.min(100, time.length - 1));\r\n  188\t        }\r\n  189\t      }\r\n  190\t    }\r\n  191\t  }\r\n  192\t  const options = getMainOptions(chartData.value, config.value, startValue, endValue, props.cycle);\r\n  193\t\r\n  194\t  requestAnimationFrame(() =\u003e {\r\n  195\t    mainChartIns?.setOption(options, true);\r\n  196\t    activeIndex.value = endValue;\r\n  197\t\r\n  198\t    // 下一帧绘制brush\r\n  199\t    requestAnimationFrame(() =\u003e {\r\n  200\t      drawBrush();\r\n  201\t    });\r\n  202\t  });\r\n  203\t};\r\n  204\t// 图表渲染: 副图\r\n  205\tconst drawSub = () =\u003e {\r\n  206\t  if (!config.value.showSubChart || !klineSubRef.value) return;\r\n  207\t\r\n  208\t  const { time } = chartData.value;\r\n  209\t  const { gridLeft, gridRight, maxShowCounts, defaultShowCounts } = config.value;\r\n  210\t  let startValue = time.length - 1 - defaultShowCounts;\r\n  211\t  let endValue = time.length - 1;\r\n  212\t\r\n  213\t  // 从主图获取当前的dataZoom位置\r\n  214\t  if (mainChartIns \u0026\u0026 !mainChartIns.isDisposed()) {\r\n  215\t    const option = mainChartIns.getOption();\r\n  216\t    if (option?.dataZoom?.[0]) {\r\n  217\t      const { startValue: cacheStart, endValue: cacheEnd } = option.dataZoom[0];\r\n  218\t      if (cacheStart !== undefined \u0026\u0026 cacheEnd !== undefined) {\r\n  219\t        startValue = cacheStart;\r\n  220\t        endValue = cacheEnd;\r\n  221\t      }\r\n  222\t    }\r\n  223\t  }\r\n  224\t\r\n  225\t  requestAnimationFrame(() =\u003e {\r\n  226\t    klineSubRef.value?.draw({ startValue, endValue, maxValueSpan: maxShowCounts }, { gridLeft, gridRight });\r\n  227\t  });\r\n  228\t};\r\n  229\t// 图表渲染: 预警线\r\n  230\tconst drawLine = () =\u003e {\r\n  231\t  if (!mainChartIns) return;\r\n  232\t\r\n  233\t  // 取消正在进行的绘线\r\n  234\t  if (drawLineFrameId) {\r\n  235\t    cancelAnimationFrame(drawLineFrameId);\r\n  236\t    drawLineFrameId = null;\r\n  237\t  }\r\n  238\t\r\n  239\t  drawLineFrameId = requestAnimationFrame(() =\u003e {\r\n  240\t    const mainChartOption = mainChartIns?.getOption();\r\n  241\t    if (!mainChartOption) return;\r\n  242\t    const width = mainChartIns?.getWidth();\r\n  243\t    const height = mainChartIns?.getHeight();\r\n  244\t    if (!width || !height) return;\r\n  245\t\r\n  246\t    mainChartIns?.setOption(\r\n  247\t      {\r\n  248\t        graphic: getWarningLineOptions(mainChartIns, warningLineData.value, props, config.value, () =\u003e {\r\n  249\t          updateWarningLineAndDraw();\r\n  250\t        }),\r\n  251\t      },\r\n  252\t      {\r\n  253\t        notMerge: false,\r\n  254\t        replaceMerge: [\"graphic\"],\r\n  255\t        lazyUpdate: true,\r\n  256\t      },\r\n  257\t    );\r\n  258\t    drawLineFrameId = null;\r\n  259\t  });\r\n  260\t};\r\n  261\t// 图表渲染: 区域框选\r\n  262\tconst drawBrush = () =\u003e {\r\n  263\t  if (brushFrameId) {\r\n  264\t    cancelAnimationFrame(brushFrameId);\r\n  265\t  }\r\n  266\t\r\n  267\t  brushFrameId = requestAnimationFrame(() =\u003e {\r\n  268\t    const { time } = chartData.value;\r\n  269\t    if (!props.brushRange || !time?.length || !mainChartIns) return;\r\n  270\t\r\n  271\t    let startTime = dayjs(props.brushRange[0]).format(\"YYYY-MM-DD 00:00:00\");\r\n  272\t    let endTime = dayjs(props.brushRange[1]).format(\"YYYY-MM-DD 23:59:59\");\r\n  273\t    let brushStartTime = null;\r\n  274\t    let brushEndTime = null;\r\n  275\t\r\n  276\t    switch (String(props.cycle)) {\r\n  277\t      case \"6\": {\r\n  278\t        brushStartTime = time.find((item) =\u003e dayjs(item).format(\"YYYY-MM-DD\") === dayjs(startTime).format(\"YYYY-MM-DD\"));\r\n  279\t        brushEndTime = brushStartTime;\r\n  280\t        break;\r\n  281\t      }\r\n  282\t      case \"7\": {\r\n  283\t        brushStartTime = time.find((item) =\u003e dayjs(item).day(5).format(\"YYYY-MM-DD\") === dayjs(startTime).day(5).format(\"YYYY-MM-DD\"));\r\n  284\t        brushEndTime = time.findLast((item) =\u003e dayjs(item).day(5).format(\"YYYY-MM-DD\") === dayjs(endTime).day(5).format(\"YYYY-MM-DD\"));\r\n  285\t        break;\r\n  286\t      }\r\n  287\t      case \"8\": {\r\n  288\t        brushStartTime = time.find((item) =\u003e dayjs(item).endOf(\"month\").format(\"YYYY-MM-DD\") === dayjs(startTime).endOf(\"month\").format(\"YYYY-MM-DD\"));\r\n  289\t        brushEndTime = time.findLast((item) =\u003e dayjs(item).endOf(\"month\").format(\"YYYY-MM-DD\") === dayjs(endTime).endOf(\"month\").format(\"YYYY-MM-DD\"));\r\n  290\t        break;\r\n  291\t      }\r\n  292\t      default: {\r\n  293\t        brushStartTime = time.find((item) =\u003e {\r\n  294\t          const condition1 = dayjs(item).format(\"YYYY-MM-DD\") === dayjs(startTime).format(\"YYYY-MM-DD\");\r\n  295\t          const condition2 = new Date(item).getTime() \u003e= new Date(startTime).getTime();\r\n  296\t          return condition1 \u0026\u0026 condition2;\r\n  297\t        });\r\n  298\t        brushEndTime = time.findLast((item) =\u003e {\r\n  299\t          const condition1 = dayjs(item).format(\"YYYY-MM-DD\") === dayjs(endTime).format(\"YYYY-MM-DD\");\r\n  300\t          const condition2 = new Date(item).getTime() \u003c= new Date(endTime).getTime();\r\n  301\t          return condition1 \u0026\u0026 condition2;\r\n  302\t        });\r\n  303\t      }\r\n  304\t    }\r\n  305\t\r\n  306\t    if (brushStartTime \u0026\u0026 brushEndTime) {\r\n  307\t      mainChartIns.dispatchAction({\r\n  308\t        type: \"brush\",\r\n  309\t        areas: [\r\n  310\t          {\r\n  311\t            brushType: \"lineX\",\r\n  312\t            coordRange: [brushStartTime, brushEndTime],\r\n  313\t            xAxisIndex: 0,\r\n  314\t          },\r\n  315\t        ],\r\n  316\t      });\r\n  317\t    }\r\n  318\t    brushFrameId = null;\r\n  319\t  });\r\n  320\t};\r\n  321\t\r\n  322\t// 获取主数据\r\n  323\tconst getMainData = async () =\u003e {\r\n  324\t  try {\r\n  325\t    if (!props.variety || !props.cycle) return;\r\n  326\t\r\n  327\t    const { variety, featureId, cycle, indicatorStore, mainIndicator, right, startTime, endTime } = props;\r\n  328\t    const { defaultShowCounts, addCounts, showWarningLine, getFactorData } = config.value;\r\n  329\t\r\n  330\t    // 显示loading\r\n  331\t    initChart();\r\n  332\t\r\n  333\t    if (mainChartIns \u0026\u0026 !mainChartIns.isDisposed()) {\r\n  334\t      mainChartIns.showLoading({\r\n  335\t        text: \"加载中...\",\r\n  336\t        color: \"#409eff\",\r\n  337\t        textColor: \"#fff\",\r\n  338\t        maskColor: \"rgba(0, 0, 0, 0.7)\",\r\n  339\t        zlevel: 0,\r\n  340\t      });\r\n  341\t    }\r\n  342\t\r\n  343\t    const params = {\r\n  344\t      variety,\r\n  345\t      featureId,\r\n  346\t      cycle,\r\n  347\t      mainIndicatorList: indicatorStore.getIndicatorParams(mainIndicator),\r\n  348\t      subIndicator: subIndicator.value,\r\n  349\t      right,\r\n  350\t      showWarningLine,\r\n  351\t      getFactorData,\r\n  352\t    };\r\n  353\t\r\n  354\t    if (startTime \u0026\u0026 endTime) {\r\n  355\t      params.startTime = startTime;\r\n  356\t      params.endTime = endTime;\r\n  357\t    } else if (startTime) {\r\n  358\t      params.startTime = startTime;\r\n  359\t      params.limit = addCounts;\r\n  360\t    } else if (endTime) {\r\n  361\t      params.endTime = endTime;\r\n  362\t      params.limit = addCounts;\r\n  363\t    } else {\r\n  364\t      params.endTime = dayjs().add(1, \"hour\").format(\"YYYY-MM-DD HH:mm:ss\");\r\n  365\t      params.limit = addCounts;\r\n  366\t    }\r\n  367\t\r\n  368\t    const res = await getKlineBasic(params);\r\n  369\t\r\n  370\t    if (!res?.body?.kline?.time?.length) {\r\n  371\t      isEmpty.value = true;\r\n  372\t      isError.value = false;\r\n  373\t      hideLoading();\r\n  374\t      return;\r\n  375\t    }\r\n  376\t\r\n  377\t    isEmpty.value = false;\r\n  378\t    isError.value = false;\r\n  379\t    chartData.value = res?.body?.kline;\r\n  380\t    warningLineData.value = res?.body?.warningLine || [];\r\n  381\t\r\n  382\t    // 使用RAF链式渲染\r\n  383\t    await nextTick();\r\n  384\t    scheduleRender(false);\r\n  385\t\r\n  386\t    if (getFactorData) {\r\n  387\t      emit(\"getFactorData\", res?.body?.factor);\r\n  388\t    }\r\n  389\t\r\n  390\t    hideLoading();\r\n  391\t  } catch (err) {\r\n  392\t    hideLoading();\r\n  393\t    isError.value = true;\r\n  394\t    isEmpty.value = false;\r\n  395\t    throw new Error(err);\r\n  396\t  }\r\n  397\t};\r\n  398\t// 加载历史数据\r\n  399\tconst getMoreData = async (type) =\u003e {\r\n  400\t  const { variety, cycle, indicatorStore, mainIndicator, right } = props;\r\n  401\t  const { addCounts } = config.value;\r\n  402\t  const { time } = chartData.value;\r\n  403\t\r\n  404\t  if (type === \"history\") {\r\n  405\t    const res = await getKline({\r\n  406\t      variety,\r\n  407\t      cycle,\r\n  408\t      endTime: time[0],\r\n  409\t      limit: addCounts,\r\n  410\t      mainIndicatorList: indicatorStore.getIndicatorParams(mainIndicator),\r\n  411\t      subIndicator: subIndicator.value,\r\n  412\t      right,\r\n  413\t    });\r\n  414\t    // 合并数据\r\n  415\t    chartData.value = {\r\n  416\t      time: [...res.body.time, ...chartData.value.time.slice(1)],\r\n  417\t      data: [...res.body.data, ...chartData.value.data.slice(1)],\r\n  418\t      mainIndicator: chartData.value.mainIndicator.map((item, index) =\u003e ({\r\n  419\t        ...item,\r\n  420\t        data: [...(res.body.mainIndicator[index]?.data ?? []), ...item.data.slice(1)],\r\n  421\t      })),\r\n  422\t      subIndicator: chartData.value.subIndicator.map((item, index) =\u003e ({\r\n  423\t        ...item,\r\n  424\t        data: [...(res.body.subIndicator[index]?.data ?? []), ...item.data.slice(1)],\r\n  425\t      })),\r\n  426\t    };\r\n  427\t    console.log(\"触发了加载更多数据\");\r\n  428\t    // 使用RAF链式渲染，保持当前缩放位置\r\n  429\t    await nextTick();\r\n  430\t    scheduleRender(true);\r\n  431\t    if (res.body.data.length \u003c addCounts) {\r\n  432\t      isloadAllHistory = true;\r\n  433\t      console.log(\"历史数据已经全部加载完毕\");\r\n  434\t    }\r\n  435\t    isLoadHistory = false;\r\n  436\t  }\r\n  437\t};\r\n  438\t// 键盘事件\r\n  439\tconst handleKeyDownEvent = ({ code, ctrlKey }) =\u003e {\r\n  440\t  if (!(ctrlKey || isHover.value)) return;\r\n  441\t  const { xAxis, dataZoom } = mainChartIns.getOption();\r\n  442\t  const { data: xAxisData } = xAxis?.[0] ?? { data: [] };\r\n  443\t  let { startValue, endValue } = dataZoom?.[0] ?? {};\r\n  444\t  if (!xAxisData?.length) return;\r\n  445\t\r\n  446\t  switch (code) {\r\n  447\t    case \"ArrowUp\": {\r\n  448\t      if (endValue - startValue \u003c 5) return;\r\n  449\t      const diff = Math.floor((endValue - startValue) / 2) + 1;\r\n  450\t      startValue = startValue + diff;\r\n  451\t      if (endValue - startValue \u003c 5) startValue = endValue - 4;\r\n  452\t      break;\r\n  453\t    }\r\n  454\t    case \"ArrowDown\": {\r\n  455\t      const diff = Math.min(500, endValue - startValue);\r\n  456\t      startValue = startValue - diff - 1;\r\n  457\t      break;\r\n  458\t    }\r\n  459\t    case \"ArrowLeft\": {\r\n  460\t      if (startValue \u003e 0) {\r\n  461\t        startValue -= 1;\r\n  462\t        endValue -= 1;\r\n  463\t      }\r\n  464\t      if (activeIndex.value \u003e 0) {\r\n  465\t        activeIndex.value -= 1;\r\n  466\t      }\r\n  467\t      break;\r\n  468\t    }\r\n  469\t    case \"ArrowRight\": {\r\n  470\t      if (endValue \u003c xAxisData.length - 1) {\r\n  471\t        startValue += 1;\r\n  472\t        endValue += 1;\r\n  473\t      }\r\n  474\t      if (isHover.value \u0026\u0026 activeIndex.value \u003c xAxisData.length - 1) {\r\n  475\t        activeIndex.value += 1;\r\n  476\t      }\r\n  477\t      break;\r\n  478\t    }\r\n  479\t  }\r\n  480\t\r\n  481\t  requestAnimationFrame(() =\u003e {\r\n  482\t    mainChartIns.dispatchAction({ type: \"dataZoom\", startValue, endValue });\r\n  483\t    mainChartIns.dispatchAction({\r\n  484\t      type: \"updateAxisPointer\",\r\n  485\t      seriesIndex: 0,\r\n  486\t      dataIndex: isHover.value ? activeIndex.value : null,\r\n  487\t    });\r\n  488\t    mainChartIns.dispatchAction({\r\n  489\t      type: \"highlight\",\r\n  490\t      dataIndex: isHover.value ? activeIndex.value : endValue,\r\n  491\t    });\r\n  492\t  });\r\n  493\t};\r\n  494\t// 图表事件\r\n  495\tconst addEventListener = () =\u003e {\r\n  496\t  mainChartIns?.on(\r\n  497\t    \"datazoom\",\r\n  498\t    debounce((params) =\u003e {\r\n  499\t      const { loadCheckCounts } = config.value;\r\n  500\t      if (mainChartIns?.getOption()?.dataZoom?.[0]) {\r\n  501\t        const { startValue } = mainChartIns?.getOption()?.dataZoom?.[0];\r\n  502\t        if (startValue \u003c loadCheckCounts \u0026\u0026 !isLoadHistory \u0026\u0026 !isloadAllHistory) {\r\n  503\t          isLoadHistory = true;\r\n  504\t          getMoreData(\"history\");\r\n  505\t        }\r\n  506\t        drawLine(); // 使用RAF优化的绘线\r\n  507\t      }\r\n  508\t    }, 100),\r\n  509\t  );\r\n  510\t\r\n  511\t  mainChartIns?.on(\r\n  512\t    \"highlight\",\r\n  513\t    debounce((data) =\u003e {\r\n  514\t      let index = data.dataIndex || -1;\r\n  515\t      if (data.batch) {\r\n  516\t        index = typeof data?.batch[0]?.dataIndex === \"number\" ? data?.batch[0]?.dataIndex : -1;\r\n  517\t      }\r\n  518\t      activeIndex.value = index;\r\n  519\t    }, 20),\r\n  520\t  );\r\n  521\t\r\n  522\t  mainChartIns?.on(\r\n  523\t    \"globalout\",\r\n  524\t    debounce(() =\u003e {\r\n  525\t      if (mainChartIns) {\r\n  526\t        const index = mainChartIns?.getOption()?.dataZoom?.[0]?.endValue;\r\n  527\t        activeIndex.value = index;\r\n  528\t      }\r\n  529\t    }, 30),\r\n  530\t  );\r\n  531\t\r\n  532\t  mainChartIns?.on(\r\n  533\t    \"contextmenu\",\r\n  534\t    debounce((params) =\u003e {\r\n  535\t      if (params.componentType === \"graphic\") {\r\n  536\t        warningItem.value = params.info;\r\n  537\t        menuData.value = [\r\n  538\t          { label: \"删除画线\", key: \"deleteWarningLine\" },\r\n  539\t          { label: \"修改画线\", key: \"changeWarningLine\" },\r\n  540\t        ];\r\n  541\t      }\r\n  542\t    }, 0),\r\n  543\t  );\r\n  544\t};\r\n  545\t\r\n  546\t// 预警线相关辅助函数\r\n  547\tconst updateWarningLineAndDraw = async () =\u003e {\r\n  548\t  const res = await getWarningLine({ featureId: props.featureId });\r\n  549\t  warningLineData.value = res?.body || [];\r\n  550\t  drawLine();\r\n  551\t  emit(\"change\", \"warningLine\", warningLineData.value);\r\n  552\t};\r\n  553\tconst menuClick = async (item) =\u003e {\r\n  554\t  const { variety, varietyName, featureId, featureType } = props;\r\n  555\t\r\n  556\t  if (item.key === \"drawWarningLine\") {\r\n  557\t    const mainChartOption = mainChartIns?.getOption();\r\n  558\t    const oldTooltip = mainChartOption.tooltip[0];\r\n  559\t\r\n  560\t    mainChartIns?.setOption({\r\n  561\t      ...mainChartOption,\r\n  562\t      tooltip: {\r\n  563\t        ...oldTooltip,\r\n  564\t        axisPointer: {\r\n  565\t          ...oldTooltip.axisPointer,\r\n  566\t          lineStyle: { width: 0 },\r\n  567\t          crossStyle: { width: 2 },\r\n  568\t          label: {\r\n  569\t            ...oldTooltip.axisPointer.label,\r\n  570\t            backgroundColor: \"transparent\",\r\n  571\t            formatter: () =\u003e \"\",\r\n  572\t          },\r\n  573\t        },\r\n  574\t      },\r\n  575\t    });\r\n  576\t\r\n  577\t    const handleClick = async (el) =\u003e {\r\n  578\t      mainChartIns?.getZr().off(\"mousedown\", handleClick);\r\n  579\t      const yAxisValue = mainChartIns?.convertFromPixel({ yAxisIndex: 0 }, el.offsetY);\r\n  580\t      const newWarnPrice = Math.round(yAxisValue * 1000) / 1000;\r\n  581\t\r\n  582\t      mainChartIns?.setOption({\r\n  583\t        ...mainChartOption,\r\n  584\t        tooltip: {\r\n  585\t          ...oldTooltip,\r\n  586\t          axisPointer: {\r\n  587\t            ...oldTooltip.axisPointer,\r\n  588\t            lineStyle: { width: 1 },\r\n  589\t            crossStyle: { width: 1 },\r\n  590\t            label: {\r\n  591\t              ...oldTooltip.axisPointer.label,\r\n  592\t              backgroundColor: null,\r\n  593\t            },\r\n  594\t          },\r\n  595\t        },\r\n  596\t      });\r\n  597\t\r\n  598\t      await addWarningLine({\r\n  599\t        featureCode: variety,\r\n  600\t        featureName: varietyName,\r\n  601\t        featureId,\r\n  602\t        featureType,\r\n  603\t        warnPrice: newWarnPrice,\r\n  604\t      });\r\n  605\t      ElMessage.success(\"画线预警成功!\");\r\n  606\t      updateWarningLineAndDraw();\r\n  607\t    };\r\n  608\t\r\n  609\t    mainChartIns?.getZr().on(\"mousedown\", handleClick);\r\n  610\t  } else if (item.key === \"deleteWarningLine\") {\r\n  611\t    await deleteWarningLine({ id: warningItem.value.id });\r\n  612\t    ElMessage.success(\"画线预警删除成功\");\r\n  613\t    updateWarningLineAndDraw();\r\n  614\t  } else if (item.key === \"changeWarningLine\") {\r\n  615\t    warningLineChangeVisible.value = true;\r\n  616\t    warningLineChangeValue.value = warningItem.value.warnPrice;\r\n  617\t  }\r\n  618\t};\r\n  619\tconst changeWarningLine = async () =\u003e {\r\n  620\t  const { variety, varietyName, featureId, featureType } = props;\r\n  621\t  await updateWarningLine({\r\n  622\t    id: warningItem.value.id,\r\n  623\t    featureCode: variety,\r\n  624\t    featureName: varietyName,\r\n  625\t    featureId,\r\n  626\t    featureType,\r\n  627\t    warnPrice: warningLineChangeValue.value,\r\n  628\t  });\r\n  629\t  ElMessage.success(\"画线预警修改成功\");\r\n  630\t  updateWarningLineAndDraw();\r\n  631\t};\r\n  632\tconst closeContextMenuCallBack = () =\u003e {\r\n  633\t  menuData.value = [...defaultMenuData];\r\n  634\t};\r\n  635\t\r\n  636\tonMounted(() =\u003e {\r\n  637\t  initRequestByEnv(props.env);\r\n  638\t  getMainData();\r\n  639\t  window.addEventListener(\"keydown\", handleKeyDownEvent);\r\n  640\t});\r\n  641\twatch(\r\n  642\t  () =\u003e [props.variety, props.cycle, props.mainIndicator, subIndicator.value, props.indicatorStore?.filterIndicator, props.indicatorStore?.customIndicator],\r\n  643\t  () =\u003e {\r\n  644\t    // 重置加载状态\r\n  645\t    isLoadHistory = false;\r\n  646\t    isloadAllHistory = false;\r\n  647\t    getMainData();\r\n  648\t  },\r\n  649\t  { deep: true },\r\n  650\t);\r\n  651\tonUnmounted(() =\u003e {\r\n  652\t  // 取消所有动画帧\r\n  653\t  if (renderFrameId) {\r\n  654\t    cancelAnimationFrame(renderFrameId);\r\n  655\t    renderFrameId = null;\r\n  656\t  }\r\n  657\t  if (drawLineFrameId) {\r\n  658\t    cancelAnimationFrame(drawLineFrameId);\r\n  659\t    drawLineFrameId = null;\r\n  660\t  }\r\n  661\t  mainChartIns?.off(\"datazoom\");\r\n  662\t  mainChartIns?.off(\"highlight\");\r\n  663\t  mainChartIns?.off(\"globalout\");\r\n  664\t  mainChartIns?.dispose();\r\n  665\t  resizeRo?.dispose();\r\n  666\t  window.removeEventListener(\"keydown\", handleKeyDownEvent);\r\n  667\t});\r\n  668\tdefineExpose({\r\n  669\t  draw: (type, data) =\u003e {\r\n  670\t    if (type === \"warningLine\") {\r\n  671\t      warningLineData.value = data;\r\n  672\t      drawLine();\r\n  673\t    }\r\n  674\t  },\r\n  675\t});\r\n  676\t\u003c/script\u003e\r\n  677\t\r\n  678\t\u003ctemplate\u003e\r\n  679\t  \u003cdiv\r\n  680\t    class=\"klineBasic\"\r\n  681\t    @mousemove=\"isHover = true\"\r\n  682\t    @mouseout=\"isHover = false\"\r\n  683\t  \u003e\r\n  684\t    \u003cdiv\r\n  685\t      v-if=\"chartData.time?.length\"\r\n  686\t      class=\"klineBasic-tips\"\r\n  687\t    \u003e\r\n  688\t      \u003cKlineTips\r\n  689\t        :variety=\"variety\"\r\n  690\t        :data=\"chartData\"\r\n  691\t        :activeIndex=\"activeIndex\"\r\n  692\t      /\u003e\r\n  693\t    \u003c/div\u003e\r\n  694\t    \u003cdiv\r\n  695\t      class=\"klineBasic-main\"\r\n  696\t      :style=\"{ height: config.showSubChart ? '70%' : '100%' }\"\r\n  697\t    \u003e\r\n  698\t      \u003cContextmenu @closeContextMenuCallBack=\"closeContextMenuCallBack\"\u003e\r\n  699\t        \u003cdiv\r\n  700\t          ref=\"klineBasicMainRef\"\r\n  701\t          style=\"height: 100%\"\r\n  702\t        \u003e\u003c/div\u003e\r\n  703\t        \u003ctemplate #popover\u003e\r\n  704\t          \u003cel-menu\r\n  705\t            :style=\"{\r\n  706\t              borderRadius: '4px',\r\n  707\t              overflow: 'hidden',\r\n  708\t              background: '#fff',\r\n  709\t              borderRight: 0,\r\n  710\t            }\"\r\n  711\t          \u003e\r\n  712\t            \u003cel-menu-item\r\n  713\t              v-for=\"item in menuData\"\r\n  714\t              style=\"height: 36px\"\r\n  715\t              :key=\"item.key\"\r\n  716\t              :index=\"item.key\"\r\n  717\t              @click=\"menuClick(item)\"\r\n  718\t            \u003e\r\n  719\t              {{ item.label }}\r\n  720\t            \u003c/el-menu-item\u003e\r\n  721\t          \u003c/el-menu\u003e\r\n  722\t        \u003c/template\u003e\r\n  723\t      \u003c/Contextmenu\u003e\r\n  724\t    \u003c/div\u003e\r\n  725\t    \u003cdiv\r\n  726\t      class=\"klineBasic-sub\"\r\n  727\t      v-if=\"config.showSubChart\"\r\n  728\t    \u003e\r\n  729\t      \u003cKlineSub\r\n  730\t        ref=\"klineSubRef\"\r\n  731\t        v-model=\"subIndicator\"\r\n  732\t        :data=\"chartData\"\r\n  733\t        :cycle=\"cycle\"\r\n  734\t        :activeIndex=\"activeIndex\"\r\n  735\t        :subIndicatorList=\"indicatorStore?.subIndicatorList\"\r\n  736\t      /\u003e\r\n  737\t    \u003c/div\u003e\r\n  738\t    \u003cdiv\r\n  739\t      class=\"klineBasic-empty\"\r\n  740\t      v-if=\"isEmpty\"\r\n  741\t    \u003e\r\n  742\t      \u003cel-empty\r\n  743\t        class=\"klineBasic-empty-content\"\r\n  744\t        description=\"暂无数据\"\r\n  745\t      /\u003e\r\n  746\t    \u003c/div\u003e\r\n  747\t    \u003cdiv\r\n  748\t      class=\"klineBasic-error\"\r\n  749\t      v-if=\"isError\"\r\n  750\t    \u003e\r\n  751\t      \u003cdiv class=\"klineBasic-error-content\"\u003e加载失败，请刷新重试\u003c/div\u003e\r\n  752\t      \u003cdiv style=\"text-align: center\"\u003e\r\n  753\t        \u003cel-button @click=\"getMainData\"\u003e刷新\u003c/el-button\u003e\r\n  754\t      \u003c/div\u003e\r\n  755\t    \u003c/div\u003e\r\n  756\t  \u003c/div\u003e\r\n  757\t  \u003c!-- 画线预警-修改价格弹窗 --\u003e\r\n  758\t  \u003cel-dialog\r\n  759\t    v-model=\"warningLineChangeVisible\"\r\n  760\t    title=\"画线预警-修改价格\"\r\n  761\t    width=\"30%\"\r\n  762\t    align-center\r\n  763\t  \u003e\r\n  764\t    \u003cspan style=\"margin-right: 10px\"\u003e预警价格:\u003c/span\u003e\r\n  765\t    \u003cel-input-number\r\n  766\t      v-model=\"warningLineChangeValue\"\r\n  767\t      placeholder=\"输入预警价格\"\r\n  768\t    /\u003e\r\n  769\t    \u003ctemplate #footer\u003e\r\n  770\t      \u003cspan class=\"dialog-footer\"\u003e\r\n  771\t        \u003cel-button @click=\"warningLineChangeVisible = false\"\u003e取消\u003c/el-button\u003e\r\n  772\t        \u003cel-button\r\n  773\t          type=\"primary\"\r\n  774\t          @click=\"changeWarningLine\"\r\n  775\t          \u003e确定\u003c/el-button\r\n  776\t        \u003e\r\n  777\t      \u003c/span\u003e\r\n  778\t    \u003c/template\u003e\r\n  779\t  \u003c/el-dialog\u003e\r\n  780\t\u003c/template\u003e\r\n  781\t\r\n  782\t\u003cstyle lang=\"scss\" scoped\u003e\r\n  783\t.klineBasic {\r\n  784\t  width: 100%;\r\n  785\t  height: 100%;\r\n  786\t  position: relative;\r\n  787\t  background: #000;\r\n  788\t  \u0026-tips {\r\n  789\t    position: absolute;\r\n  790\t    width: 100%;\r\n  791\t    top: 0;\r\n  792\t  }\r\n  793\t  \u0026-main {\r\n  794\t    width: 100%;\r\n  795\t    height: 70%;\r\n  796\t  }\r\n  797\t  \u0026-sub {\r\n  798\t    width: 100%;\r\n  799\t    height: 30%;\r\n  800\t  }\r\n  801\t  \u0026-empty {\r\n  802\t    position: absolute;\r\n  803\t    top: 0;\r\n  804\t    width: 100%;\r\n  805\t    height: 100%;\r\n  806\t    background: #000;\r\n  807\t    \u0026-content {\r\n  808\t      height: 100%;\r\n  809\t      padding: 0;\r\n  810\t      --el-empty-fill-color-0: var(--el-color-black);\r\n  811\t      --el-empty-fill-color-1: #4b4b52;\r\n  812\t      --el-empty-fill-color-2: #36383d;\r\n  813\t      --el-empty-fill-color-3: #1e1e20;\r\n  814\t      --el-empty-fill-color-4: #262629;\r\n  815\t      --el-empty-fill-color-5: #202124;\r\n  816\t      --el-empty-fill-color-6: #212224;\r\n  817\t      --el-empty-fill-color-7: #1b1c1f;\r\n  818\t      --el-empty-fill-color-8: #1c1d1f;\r\n  819\t      --el-empty-fill-color-9: #18181a;\r\n  820\t    }\r\n  821\t  }\r\n  822\t  \u0026-error {\r\n  823\t    position: absolute;\r\n  824\t    top: 0;\r\n  825\t    width: 100%;\r\n  826\t    height: 100%;\r\n  827\t    background: #000;\r\n  828\t    display: flex;\r\n  829\t    flex-direction: column;\r\n  830\t    justify-content: center;\r\n  831\t    \u0026-content {\r\n  832\t      color: #fff;\r\n  833\t      font-size: 20px;\r\n  834\t      text-align: center;\r\n  835\t      margin-bottom: 12px;\r\n  836\t    }\r\n  837\t  }\r\n  838\t}\r\n  839\t\u003c/style\u003e\r\n  840\t\n","preview":"1\t\u003cscript setup\u003e\n2\timport dayjs from \"dayjs\";\n3\timport * as echarts from \"echarts\";","bytes":29575,"is_error":false,"stored_at":"2026-07-27T04:43:29.6993211Z"}
+{"id":"t1.tool14","tool_name":"read_file","full_text":"[read_file path=D:/gitlab/st-comp/packages/Kline/index.vue lines=1-892/892 bytes=27214]\n    1\t\u003cscript setup lang=\"ts\"\u003e\r\n    2\timport * as echarts from \"echarts\";\r\n    3\timport { ref, computed, watch, onMounted, onUnmounted } from \"vue\";\r\n    4\timport Tips from \"./components/Tips/index.vue\";\r\n    5\timport Contextmenu from \"./components/Contextmenu/index.vue\";\r\n    6\timport { getOption, getLineOption } from \"./option\";\r\n    7\timport { printConsole, formatValue, formatPrice } from \"./utils\";\r\n    8\timport type { EChartsType, EChartsOption, ECElementEvent, DataZoomComponentOption } from \"echarts\";\r\n    9\timport type { KlineDataType, LineDataType, InConfig, MenuDataType } from \"./type.d.ts\";\r\n   10\t\r\n   11\t/**\r\n   12\t * 组件接收参数\r\n   13\t * @param {Object} indicator 指标线\r\n   14\t * @param {KlineDataType} klineData K线数据\r\n   15\t * @param {Array} markData 标注点位数据 [开平点, 买卖点, 信号点,...]\r\n   16\t * @param {Array} lineData K线额外画线数据 [预警线, 持仓线, 条件单, ...]\r\n   17\t * @param {Array} brushRange 区域刷选范围数据\r\n   18\t * @param {Array} defaultMenuData 菜单项数据\r\n   19\t * @param {Boolean} isSelect 组件是否被选中\r\n   20\t *\r\n   21\t * @param {InConfig} config 其他配置项数据\r\n   22\t */\r\n   23\tconst props = defineProps({\r\n   24\t  indicator: {\r\n   25\t    type: Object,\r\n   26\t    default: () =\u003e ({}),\r\n   27\t  },\r\n   28\t  klineData: {\r\n   29\t    type: Array,\r\n   30\t    default: () =\u003e [],\r\n   31\t  },\r\n   32\t  markData: {\r\n   33\t    type: Array,\r\n   34\t    default: () =\u003e [],\r\n   35\t  },\r\n   36\t  lineData: {\r\n   37\t    type: Array,\r\n   38\t    default: () =\u003e [],\r\n   39\t  },\r\n   40\t  netPositionData: {\r\n   41\t    type: Array,\r\n   42\t    default: () =\u003e [],\r\n   43\t  },\r\n   44\t  relevanceData: {\r\n   45\t    type: Array,\r\n   46\t    default: () =\u003e [],\r\n   47\t  },\r\n   48\t  priceTrendData: {\r\n   49\t    type: Array,\r\n   50\t    default: () =\u003e [],\r\n   51\t  },\r\n   52\t  priceTrendPercentData: {\r\n   53\t    type: Array,\r\n   54\t    default: () =\u003e [],\r\n   55\t  },\r\n   56\t  brushRange: {\r\n   57\t    type: Array,\r\n   58\t    default: () =\u003e [],\r\n   59\t  },\r\n   60\t  defaultMenuData: {\r\n   61\t    type: Array,\r\n   62\t    default: () =\u003e [],\r\n   63\t  },\r\n   64\t  isSelect: {\r\n   65\t    type: Boolean,\r\n   66\t    default: () =\u003e false,\r\n   67\t  },\r\n   68\t  config: {\r\n   69\t    type: Object,\r\n   70\t    default: () =\u003e ({}),\r\n   71\t  },\r\n   72\t});\r\n   73\t\r\n   74\t/**\r\n   75\t * K线功能默认配置\r\n   76\t * @param {Number} totalBarCount k线总条数\r\n   77\t * @param {Number} defaultShowBarCount k线默认展示条数\r\n   78\t * @param {Number} preBarCount k线预加载条数，用于计算指标线\r\n   79\t * ---------------------------------------------------------\r\n   80\t * @param {Number} gridLeft k线组件grid: left\r\n   81\t * @param {Number} gridTop k线组件grid: top\r\n   82\t * @param {Number} gridRight k线组件grid: right\r\n   83\t * @param {Number} gridBottom k线组件grid: bottom\r\n   84\t * ---------------------------------------------------------\r\n   85\t * @param {Object} warningConfig 预警线配置\r\n   86\t * @param {Object} positionConfig 持仓线配置\r\n   87\t * @param {Object} conditionConfig 条件单配置\r\n   88\t */\r\n   89\tconst defaultConfig: InConfig = {\r\n   90\t  totalBarCount: 2000,\r\n   91\t  defaultShowBarCount: 200,\r\n   92\t  preBarCount: 800,\r\n   93\t  maxValueSpan: 10000,\r\n   94\t  gridLeft: 60,\r\n   95\t  gridTop: 0,\r\n   96\t  gridRight: 60,\r\n   97\t  gridBottom: 30,\r\n   98\t  // 预警线配置\r\n   99\t  warningConfig: {\r\n  100\t    draggable: false,\r\n  101\t    lineColor: \"#fff\",\r\n  102\t    textColor: \"#fff\",\r\n  103\t  },\r\n  104\t  // 持仓线配置\r\n  105\t  positionConfig: {\r\n  106\t    draggable: false,\r\n  107\t    lineColor: \"#e45d07\",\r\n  108\t    textColor: \"#fff\",\r\n  109\t  },\r\n  110\t  // 条件单配置\r\n  111\t  conditionConfig: {\r\n  112\t    draggable: false,\r\n  113\t    lineColor: \"#fff\",\r\n  114\t    textColor: \"#fff\",\r\n  115\t    profitLineColor: \"#b71e44\",\r\n  116\t    profitTextColor: \"#fff\",\r\n  117\t    lossLineColor: \"#749b66\",\r\n  118\t    lossTextColor: \"#fff\",\r\n  119\t  },\r\n  120\t  // Tips配置\r\n  121\t  tipsConfig: {\r\n  122\t    open: true,\r\n  123\t    heigh: true,\r\n  124\t    low: true,\r\n  125\t    close: true,\r\n  126\t    business: true,\r\n  127\t    riseAndFall: true,\r\n  128\t  },\r\n  129\t  // 动态加载配置\r\n  130\t  dynamicLoadConfig: {\r\n  131\t    historyVisible: false,\r\n  132\t    historyLoadCallBack: () =\u003e {},\r\n  133\t    futureVisible: false,\r\n  134\t    futureLoadCallBack: () =\u003e {},\r\n  135\t  },\r\n  136\t  // 是否禁用鼠标滚轮缩放K线,在开启动态后续数据加载时,建议开启,否则会引起datazoom内部缩放拖拽触发后续加载冲突\r\n  137\t  zoomLock: false,\r\n  138\t  // 是否启用计算收盘价分布统计功能\r\n  139\t  isOpenDS: false,\r\n  140\t};\r\n  141\t\r\n  142\t/**\r\n  143\t * @description: 合并后的功能配置项\r\n  144\t */\r\n  145\tconst config: { value: InConfig } = computed(() =\u003e {\r\n  146\t  return { ...defaultConfig, ...props.config };\r\n  147\t});\r\n  148\t\r\n  149\tconst option = ref\u003cany\u003e(null); // 处理后的echarts配置\r\n  150\tconst activeIndex = ref(-1); // 当前鼠标激活的数据索引\r\n  151\t\r\n  152\t// Tips: [开, 收, 低, 高, 成交额, 昨收]\r\n  153\tconst kLineTips = computed(() =\u003e {\r\n  154\t  if (option.value \u0026\u0026 option.value.dataset[0]?.source?.klineData[activeIndex.value]) {\r\n  155\t    const klineItem = option.value.dataset[0].source.klineData[activeIndex.value];\r\n  156\t    // 处理结果\r\n  157\t    const result = [];\r\n  158\t    const { open, heigh, low, close, business, riseAndFall } = config.value.tipsConfig;\r\n  159\t    open \u0026\u0026 result.push({ label: \"开\", value: klineItem[0], color: \"rgb(153, 153, 153)\" });\r\n  160\t    heigh \u0026\u0026 result.push({ label: \"高\", value: klineItem[3], color: \"rgb(153, 153, 153)\" });\r\n  161\t    low \u0026\u0026 result.push({ label: \"低\", value: klineItem[2], color: \"rgb(153, 153, 153)\" });\r\n  162\t    close \u0026\u0026 result.push({ label: \"收\", value: klineItem[1], color: \"rgb(153, 153, 153)\" });\r\n  163\t    business \u0026\u0026 result.push({ label: \"额\", value: formatPrice(klineItem[4]), color: \"rgb(153, 153, 153)\" });\r\n  164\t    if (riseAndFall) {\r\n  165\t      let ratio = (((klineItem[1] - klineItem[5]) / klineItem[1]) * 100).toFixed(2);\r\n  166\t      let ratioColor = +ratio === 0.0 ? \"white\" : +ratio \u003e 0 ? \"red\" : \"#00ff00\";\r\n  167\t      result.push({ label: \"涨跌\", value: `${ratio}%`, color: ratioColor });\r\n  168\t    }\r\n  169\t    return result;\r\n  170\t  }\r\n  171\t  return [];\r\n  172\t});\r\n  173\t// Tips: 指标\r\n  174\tconst indicatorTips = computed(() =\u003e {\r\n  175\t  if (option.value \u0026\u0026 option.value.dataset[0]?.source?.indicatorData) {\r\n  176\t    return option.value.dataset[0].source.indicatorData.reduce((result: any, next: any) =\u003e {\r\n  177\t      next.data[activeIndex.value] \u0026\u0026\r\n  178\t        result.push({\r\n  179\t          label: next.key,\r\n  180\t          value: formatValue(next.data[activeIndex.value]),\r\n  181\t          color: next.color,\r\n  182\t        });\r\n  183\t      return result;\r\n  184\t    }, []);\r\n  185\t  }\r\n  186\t  return [];\r\n  187\t});\r\n  188\t// Tips: 价格趋势[价差定制]\r\n  189\tconst priceTrendTips = computed(() =\u003e {\r\n  190\t  // 颜色配置\r\n  191\t  const colorList = [\r\n  192\t    \"#FFFFFF\",\r\n  193\t    \"#FFDD00\",\r\n  194\t    \"#FF00FF\",\r\n  195\t    \"#00FF00\",\r\n  196\t    \"#FF6000\",\r\n  197\t    \"#1677FF\",\r\n  198\t    \"#7C3CC9\",\r\n  199\t    \"#FF0000\",\r\n  200\t    \"#FB9A0E\",\r\n  201\t    \"#00B7FF\",\r\n  202\t  ];\r\n  203\t  // 价格趋势\r\n  204\t  if (props.priceTrendData.length \u003e 0) {\r\n  205\t    const result = [];\r\n  206\t    props.priceTrendData.forEach((item: any, index: number) =\u003e {\r\n  207\t      const value = item.data[activeIndex.value] ? formatValue(item.data[activeIndex.value][1]) : null;\r\n  208\t      if (value !== null) {\r\n  209\t        result.push({\r\n  210\t          label: item.name,\r\n  211\t          value: formatValue(item.data[activeIndex.value]?.[1]),\r\n  212\t          color: colorList[index],\r\n  213\t        });\r\n  214\t      }\r\n  215\t    });\r\n  216\t    return result;\r\n  217\t  }\r\n  218\t  // 价格趋势百分比\r\n  219\t  if (props.priceTrendPercentData.length \u003e 0) {\r\n  220\t    const result = [];\r\n  221\t    const chartOption = echartsInstance.getOption()\r\n  222\t    chartOption.series.filter(line =\u003e line.name.includes('二腿价格走势百分比图')).forEach((item: any, index: number) =\u003e {\r\n  223\t      const value = item.data[activeIndex.value] ? formatValue(item.data[activeIndex.value][1]) : null;\r\n  224\t      if (value !== null) {\r\n  225\t        result.push({\r\n  226\t          label: item.name.split('-')[1],\r\n  227\t          value: `${formatValue(item.data[activeIndex.value]?.[1])}%`,\r\n  228\t          color: colorList[index],\r\n  229\t        });\r\n  230\t      }\r\n  231\t    });\r\n  232\t    return result;\r\n  233\t  }\r\n  234\t  return [];\r\n  235\t});\r\n  236\t\r\n  237\t// 监视: props[klineData, indicator, markData, netPositionData, relevanceData] -\u003e 重绘全部\r\n  238\twatch(\r\n  239\t  () =\u003e [props.klineData, props.indicator, props.markData, props.netPositionData, props.relevanceData],\r\n  240\t  () =\u003e {\r\n  241\t    draw();\r\n  242\t  },\r\n  243\t  {\r\n  244\t    deep: true,\r\n  245\t  }\r\n  246\t);\r\n  247\t// 监视: props.lineData - 额外画线数据 -\u003e 重新绘制额外线\r\n  248\twatch(\r\n  249\t  () =\u003e props.lineData,\r\n  250\t  async () =\u003e {\r\n  251\t    printConsole(\"st-kline组件消息:props.lineData监控,额外画线数据发生改变,重绘-\u003eline\", {\r\n  252\t      color: \"red\",\r\n  253\t    });\r\n  254\t    draw(\"line\");\r\n  255\t  },\r\n  256\t  {\r\n  257\t    deep: true,\r\n  258\t  }\r\n  259\t);\r\n  260\t// 监视: props.brushRange - 区域刷选数据 -\u003e 重新刷选\r\n  261\twatch(\r\n  262\t  () =\u003e props.brushRange,\r\n  263\t  async () =\u003e {\r\n  264\t    printConsole(\"st-kline组件消息:props.brushRange监控,区域刷选数据发生改变,重绘-\u003ebrush\", {\r\n  265\t      color: \"red\",\r\n  266\t    });\r\n  267\t    draw(\"brush\");\r\n  268\t  },\r\n  269\t  {\r\n  270\t    deep: true,\r\n  271\t  }\r\n  272\t);\r\n  273\t// 监视: props.priceTrendData - 二腿价格趋势数据 -\u003e 重绘趋势\r\n  274\twatch(\r\n  275\t  () =\u003e props.priceTrendData,\r\n  276\t  async () =\u003e {\r\n  277\t    draw(\"priceTrend\");\r\n  278\t  },\r\n  279\t  {\r\n  280\t    deep: true,\r\n  281\t  }\r\n  282\t);\r\n  283\t// 监视: props.priceTrendPercentData - 二腿价格趋势百分比数据 -\u003e 重绘趋势百分比\r\n  284\twatch(\r\n  285\t  () =\u003e props.priceTrendPercentData,\r\n  286\t  async () =\u003e {\r\n  287\t    draw(\"priceTrendPercent\");\r\n  288\t  },\r\n  289\t  {\r\n  290\t    deep: true,\r\n  291\t  }\r\n  292\t);\r\n  293\t\r\n  294\t/**\r\n  295\t * @description: 图表绘制函数\r\n  296\t * @param {?String} type 绘制类型[Kline-K线,line-额外线条,brush-区域刷选,不传-全部]\r\n  297\t */\r\n  298\tconst draw = async (type?: string) =\u003e {\r\n  299\t  const callBackMap = new Map([\r\n  300\t    // kline-K线绘制\r\n  301\t    [\r\n  302\t      \"kline\",\r\n  303\t      async () =\u003e {\r\n  304\t        const newOption = await getOption(\r\n  305\t          props.klineData as KlineDataType,\r\n  306\t          props.markData,\r\n  307\t          props.indicator,\r\n  308\t          config.value,\r\n  309\t          props.netPositionData,\r\n  310\t          props.relevanceData\r\n  311\t        );\r\n  312\t        const { graphic } = echartsInstance.getOption() ?? { graphic: [] };\r\n  313\t        option.value = { ...newOption, graphic };\r\n  314\t        echartsInstance.setOption(option.value, true);\r\n  315\t        printConsole(\"st-kline组件消息:K线绘制完毕-draw\", { color: \"green\" });\r\n  316\t      },\r\n  317\t    ],\r\n  318\t    // line-额外线条绘制\r\n  319\t    [\r\n  320\t      \"line\",\r\n  321\t      () =\u003e {\r\n  322\t        const echartsOptions = echartsInstance.getOption();\r\n  323\t        const graphic = getLineOption(props.lineData as LineDataType, config.value, echartsInstance);\r\n  324\t        option.value = { ...echartsOptions, graphic };\r\n  325\t        echartsInstance.setOption(option.value, {\r\n  326\t          replaceMerge: [\"graphic\"],\r\n  327\t        });\r\n  328\t        printConsole(\"st-kline组件消息:额外画线绘制完毕-draw\", { color: \"green\" });\r\n  329\t      },\r\n  330\t    ],\r\n  331\t    // brush-区域刷选\r\n  332\t    [\r\n  333\t      \"brush\",\r\n  334\t      () =\u003e {\r\n  335\t        const { brushRange } = props;\r\n  336\t        if (brushRange instanceof Array \u0026\u0026 brushRange.length \u003e 0) {\r\n  337\t          echartsInstance.dispatchAction({\r\n  338\t            type: \"brush\",\r\n  339\t            areas: [\r\n  340\t              {\r\n  341\t                brushType: \"lineX\",\r\n  342\t                coordRange: [brushRange[0] + \"\", brushRange[1] + \"\"],\r\n  343\t                xAxisIndex: 0,\r\n  344\t              },\r\n  345\t            ],\r\n  346\t          });\r\n  347\t          printConsole(\"st-kline组件消息:区域刷选绘制完毕-draw\", { color: \"green\" });\r\n  348\t        }\r\n  349\t      },\r\n  350\t    ],\r\n  351\t    // 全部绘制\r\n  352\t    [\r\n  353\t      undefined,\r\n  354\t      async () =\u003e {\r\n  355\t        await draw(\"kline\");\r\n  356\t        await draw(\"line\");\r\n  357\t        await draw(\"priceTrend\");\r\n  358\t        await draw(\"priceTrendPercent\");\r\n  359\t        await draw(\"brush\");\r\n  360\t      },\r\n  361\t    ],\r\n  362\t    // history-K线历史数据绘制\r\n  363\t    [\r\n  364\t      \"history\",\r\n  365\t      async () =\u003e {\r\n  366\t        const chartOption = echartsInstance.getOption();\r\n  367\t        const newOption = await getOption(\r\n  368\t          props.klineData as KlineDataType,\r\n  369\t          props.markData,\r\n  370\t          props.indicator,\r\n  371\t          config.value,\r\n  372\t          props.netPositionData,\r\n  373\t          props.relevanceData\r\n  374\t        );\r\n  375\t        const addDataLength =\r\n  376\t          newOption.dataset.source.klineData.length - chartOption.dataset[0].source.klineData.length;\r\n  377\t        echartsInstance.setOption(\r\n  378\t          {\r\n  379\t            ...newOption,\r\n  380\t            dataZoom: [\r\n  381\t              {\r\n  382\t                type: \"inside\",\r\n  383\t                xAxisIndex: [0, 0],\r\n  384\t                zoomLock: config.value.zoomLock,\r\n  385\t                maxValueSpan: config.value.maxValueSpan,\r\n  386\t                startValue: chartOption.dataZoom[0].startValue + addDataLength,\r\n  387\t                endValue: chartOption.dataZoom[0].endValue + addDataLength,\r\n  388\t              },\r\n  389\t            ],\r\n  390\t          },\r\n  391\t          true\r\n  392\t        );\r\n  393\t        await draw(\"priceTrend\");\r\n  394\t      },\r\n  395\t    ],\r\n  396\t    // future-K线后续数据绘制\r\n  397\t    [\r\n  398\t      \"future\",\r\n  399\t      async () =\u003e {\r\n  400\t        const chartOption = echartsInstance.getOption();\r\n  401\t        const newOption = await getOption(\r\n  402\t          props.klineData as KlineDataType,\r\n  403\t          props.markData,\r\n  404\t          props.indicator,\r\n  405\t          config.value,\r\n  406\t          props.netPositionData,\r\n  407\t          props.relevanceData\r\n  408\t        );\r\n  409\t        newOption.dataZoom[0].start =\r\n  410\t          ((props.klineData.length - chartOption.dataZoom[0].endValue + chartOption.dataZoom[0].startValue) /\r\n  411\t            props.klineData.length) *\r\n  412\t          100;\r\n  413\t        echartsInstance.setOption(newOption, true);\r\n  414\t        await draw(\"priceTrend\");\r\n  415\t      },\r\n  416\t    ],\r\n  417\t    // priceTrend-二腿价格趋势绘制\r\n  418\t    [\r\n  419\t      \"priceTrend\",\r\n  420\t      () =\u003e {\r\n  421\t        if (props.priceTrendData.length === 0) return;\r\n  422\t        const echartsOptions = echartsInstance.getOption();\r\n  423\t        // 颜色配置\r\n  424\t        const colorList = [\r\n  425\t          \"#FFFFFF\",\r\n  426\t          \"#FFDD00\",\r\n  427\t          \"#FF00FF\",\r\n  428\t          \"#00FF00\",\r\n  429\t          \"#FF6000\",\r\n  430\t          \"#1677FF\",\r\n  431\t          \"#7C3CC9\",\r\n  432\t          \"#FF0000\",\r\n  433\t          \"#FB9A0E\",\r\n  434\t          \"#00B7FF\",\r\n  435\t        ];\r\n  436\t        // 格式化series配置\r\n  437\t        const priceTrendLineSeries = props.priceTrendData.reduce((result, next, index) =\u003e {\r\n  438\t          const { name, data } = next;\r\n  439\t          const line = {\r\n  440\t            name: `二腿价格走势图-${name}`,\r\n  441\t            type: \"line\",\r\n  442\t            data,\r\n  443\t            symbol: \"none\",\r\n  444\t            yAxisIndex: 1,\r\n  445\t            connectNulls: true,\r\n  446\t            itemStyle: {\r\n  447\t              color: colorList[index],\r\n  448\t            },\r\n  449\t            lineStyle: {\r\n  450\t              type: \"dashed\", // 虚线\r\n  451\t              width: 1,\r\n  452\t            },\r\n  453\t          };\r\n  454\t          result.push(line);\r\n  455\t          return result;\r\n  456\t        }, []);\r\n  457\t        option.value = { ...echartsOptions, series: [...echartsOptions.series, ...priceTrendLineSeries] };\r\n  458\t        echartsInstance.setOption(option.value, {\r\n  459\t          replaceMerge: [\"series\"],\r\n  460\t        });\r\n  461\t      },\r\n  462\t    ],\r\n  463\t    // priceTrendPercent-二腿价格趋势百分比绘制-初始绘制\r\n  464\t    [\r\n  465\t      \"priceTrendPercent\",\r\n  466\t      async () =\u003e {\r\n  467\t        if (props.priceTrendPercentData.length === 0) return;\r\n  468\t        const chartOption = echartsInstance.getOption();\r\n  469\t        // 颜色配置\r\n  470\t        const colorList = [\r\n  471\t          \"#FFFFFF\",\r\n  472\t          \"#FFDD00\",\r\n  473\t          \"#FF00FF\",\r\n  474\t          \"#00FF00\",\r\n  475\t          \"#FF6000\",\r\n  476\t          \"#1677FF\",\r\n  477\t          \"#7C3CC9\",\r\n  478\t          \"#FF0000\",\r\n  479\t          \"#FB9A0E\",\r\n  480\t          \"#00B7FF\",\r\n  481\t        ];\r\n  482\t        // 获取当屏首根K线索引\r\n  483\t        const startIndex = chartOption.dataZoom[0].startValue;\r\n  484\t        // 处理趋势数据(百分比)\r\n  485\t        const handlePriceTrendSeries = props.priceTrendPercentData.reduce((result, next, index) =\u003e {\r\n  486\t          const { name, data } = next;\r\n  487\t          const handleData = data.length \u003e config.value.totalBarCount ? data.slice(data.length - config.value.totalBarCount) : data\r\n  488\t          const priceTrendBase = handleData[startIndex][1];\r\n  489\t          const lineData = handleData.map((item) =\u003e {\r\n  490\t            return [item[0], ((item[1] - priceTrendBase) / priceTrendBase) * 100];\r\n  491\t          });\r\n  492\t          const line = {\r\n  493\t            name: `二腿价格走势百分比图-${name}`,\r\n  494\t            type: \"line\",\r\n  495\t            data: lineData,\r\n  496\t            symbol: \"none\",\r\n  497\t            yAxisIndex: 1,\r\n  498\t            connectNulls: true,\r\n  499\t            itemStyle: {\r\n  500\t              color: colorList[index],\r\n  501\t            },\r\n  502\t            lineStyle: {\r\n  503\t              type: \"dashed\", // 虚线\r\n  504\t              width: 1,\r\n  505\t            },\r\n  506\t          };\r\n  507\t          result.push(line);\r\n  508\t          return result;\r\n  509\t        }, []);\r\n  510\t        // 填充价格趋势线(避免重复)\r\n  511\t        chartOption.series = [...chartOption.series.filter(line =\u003e {\r\n  512\t          return !line.name.includes('二腿价格走势百分比图')\r\n  513\t        }), ...handlePriceTrendSeries];\r\n  514\t        echartsInstance.setOption(chartOption, true);\r\n  515\t      },\r\n  516\t    ],\r\n  517\t  ]);\r\n  518\t  const callBack = callBackMap.get(type);\r\n  519\t  if (callBack instanceof Function) {\r\n  520\t    await callBack();\r\n  521\t  }\r\n  522\t};\r\n  523\t\r\n  524\t//----------------------------右键菜单功能相关----------------------------------\r\n  525\tconst cursorPenVisible = ref(false); // 画笔模式开关\r\n  526\t\r\n  527\tconst menuData = ref\u003cMenuDataType\u003e([]);\r\n  528\t\r\n  529\t/**\r\n  530\t * @description: 点击菜单项\r\n  531\t * @param {Object} item 菜单项的数据\r\n  532\t */\r\n  533\tconst menuClick = (item: any) =\u003e {\r\n  534\t  const { callBack } = item;\r\n  535\t  callBack instanceof Function \u0026\u0026 callBack(echartsInstance, cursorPenVisible);\r\n  536\t};\r\n  537\t\r\n  538\t/**\r\n  539\t * @description: 菜单关闭的回调\r\n  540\t * @todo: 进行菜单内容的初始化\r\n  541\t */\r\n  542\tconst closeContextMenuCallBack = () =\u003e {\r\n  543\t  menuData.value = props.defaultMenuData as MenuDataType;\r\n  544\t};\r\n  545\t\r\n  546\t//----------------------------Echarts基座-------------------------------\r\n  547\tconst echartsRef = ref\u003cHTMLElement\u003e();\r\n  548\tlet echartsInstance: EChartsType; // echarts实例\r\n  549\tlet chartDomObserver: any; // 监视图表DOM变化\r\n  550\t\r\n  551\t/**\r\n  552\t * @description: echarts数据高亮回调\r\n  553\t * @param {any} data echarts数据\r\n  554\t * @param {EChartsType} chart echarts实例\r\n  555\t */\r\n  556\tconst highlight = (data: any, chart: EChartsType) =\u003e {\r\n  557\t  if (data) {\r\n  558\t    // 图表内部移动\r\n  559\t    activeIndex.value = typeof data?.batch[0]?.dataIndex === \"number\" ? data?.batch[0]?.dataIndex : -1;\r\n  560\t  } else {\r\n  561\t    // 移出图表\r\n  562\t    const chartOptions: EChartsOption = chart.getOption() as EChartsOption;\r\n  563\t    if (chartOptions.dataZoom instanceof Array) {\r\n  564\t      activeIndex.value = chartOptions.dataZoom[0].endValue as number;\r\n  565\t    }\r\n  566\t  }\r\n  567\t};\r\n  568\t\r\n  569\t/**\r\n  570\t * @description: echarts数据缩放的相关参数\r\n  571\t * @param {any} datazoomTimer 缩放回调函数的延时器\r\n  572\t * @param {Number} datazoomTime 缩放回调函数的延时器的时间\r\n  573\t * @param {Function} datazoom 数据缩放的回调函数\r\n  574\t *\r\n  575\t * 判断具体是拖拽,还是缩放的逻辑\r\n  576\t * 根据start~end的差值前后是否变动\r\n  577\t * 因为拖拽时,他们的差值是恒定的,缩放时是会变动\r\n  578\t */\r\n  579\tlet datazoomTimer: any = null;\r\n  580\tconst datazoomTime: number = 300;\r\n  581\tlet historyIsLoading = false;\r\n  582\tlet historyIsAllLoad = ref(false);\r\n  583\tlet futureIsLoading = false;\r\n  584\tlet futureIsAllLoad = ref(false);\r\n  585\tconst datazoom = async (params: any) =\u003e {\r\n  586\t  // 执行[方向键]时,返回的是startValue和endValue\r\n  587\t  // 执行[鼠标]时,返回的是batch\r\n  588\t  /**\r\n  589\t   * @description: 历史数据动态加载渲染逻辑\r\n  590\t   * 前置条件:\r\n  591\t   * 1.允许开启历史动态加载\r\n  592\t   * 2.如果剩余K线根数不足100根\r\n  593\t   * 3.没有正在加载历史数据\r\n  594\t   * 4.历史数据并未已全部获取\r\n  595\t   */\r\n  596\t  // 获取左侧剩余K线根数\r\n  597\t  const historyLength = params.batch ? params.batch[0].start * config.value.totalBarCount : params.startValue;\r\n  598\t  if (\r\n  599\t    config.value.dynamicLoadConfig.historyVisible \u0026\u0026\r\n  600\t    historyLength \u003c= 100 \u0026\u0026\r\n  601\t    !historyIsLoading \u0026\u0026\r\n  602\t    !historyIsAllLoad.value\r\n  603\t  ) {\r\n  604\t    historyIsLoading = true;\r\n  605\t    await config.value.dynamicLoadConfig.historyLoadCallBack(historyIsAllLoad);\r\n  606\t    await draw(\"history\");\r\n  607\t    historyIsLoading = false;\r\n  608\t  }\r\n  609\t  /**\r\n  610\t   * @description: 后续数据动态加载渲染逻辑\r\n  611\t   * 前置条件:\r\n  612\t   * 1.允许开启后续动态加载\r\n  613\t   * 2.右侧已为图表尽头\r\n  614\t   * 3.没有正在加载后续数据\r\n  615\t   * 4.后续数据并未已全部获取\r\n  616\t   * 5.仅仅在[鼠标拖拽,方向键左右]时\r\n  617\t   */\r\n  618\t  // 获取右侧K线是否最后一根\r\n  619\t  const nowIsEnd = params.batch\r\n  620\t    ? params.batch[0].end === 100\r\n  621\t    : params.endValue \u003e= props.klineData.length - config.value.preBarCount - 1;\r\n  622\t  const actionIsWheel = params.actionIsWheel;\r\n  623\t  if (\r\n  624\t    config.value.dynamicLoadConfig.futureVisible \u0026\u0026\r\n  625\t    nowIsEnd \u0026\u0026\r\n  626\t    !futureIsLoading \u0026\u0026\r\n  627\t    !futureIsAllLoad.value \u0026\u0026\r\n  628\t    !actionIsWheel\r\n  629\t  ) {\r\n  630\t    futureIsLoading = true;\r\n  631\t    await config.value.dynamicLoadConfig.futureLoadCallBack(futureIsAllLoad);\r\n  632\t    await draw(\"future\");\r\n  633\t    futureIsLoading = false;\r\n  634\t  }\r\n  635\t  clearTimeout(datazoomTimer);\r\n  636\t  datazoomTimer = setTimeout(() =\u003e {\r\n  637\t    draw(\"line\");\r\n  638\t    draw(\"priceTrendPercent\");\r\n  639\t    clearTimeout(datazoomTimer);\r\n  640\t    datazoomTimer = null;\r\n  641\t  }, datazoomTime);\r\n  642\t};\r\n  643\t/**\r\n  644\t * @description: echarts鼠标右击事件回调\r\n  645\t */\r\n  646\tlet echartsContextMenuTimer: any = null;\r\n  647\tconst echartsContextMenu = (params: ECElementEvent) =\u003e {\r\n  648\t  echartsContextMenuTimer = setTimeout(() =\u003e {\r\n  649\t    // 判定是否点击到的元素为额外画线\r\n  650\t    if (params.componentType === \"graphic\") {\r\n  651\t      const { oncontextmenu } = params.info?.event ?? {};\r\n  652\t      oncontextmenu instanceof Function \u0026\u0026 oncontextmenu(params, params.info, menuData);\r\n  653\t    }\r\n  654\t    clearTimeout(echartsContextMenuTimer);\r\n  655\t    echartsContextMenuTimer = null;\r\n  656\t  });\r\n  657\t};\r\n  658\t\r\n  659\t// 绑定事件\r\n  660\tconst addEventListener = () =\u003e {\r\n  661\t  echartsInstance.on(\"highlight\", (data: any) =\u003e {\r\n  662\t    highlight(data, echartsInstance);\r\n  663\t  });\r\n  664\t  echartsInstance.on(\"globalout\", () =\u003e {\r\n  665\t    highlight(null, echartsInstance);\r\n  666\t  });\r\n  667\t  echartsInstance.on(\"contextmenu\", (params: ECElementEvent) =\u003e {\r\n  668\t    echartsContextMenu(params);\r\n  669\t  });\r\n  670\t  echartsInstance.on(\"datazoom\", (params: any) =\u003e {\r\n  671\t    datazoom(params);\r\n  672\t  });\r\n  673\t};\r\n  674\t\r\n  675\t// 解绑事件\r\n  676\tconst removeEventListener = () =\u003e {\r\n  677\t  echartsInstance.off(\"highlight\");\r\n  678\t  echartsInstance.off(\"globalout\");\r\n  679\t  echartsInstance.off(\"contextmenu\");\r\n  680\t  echartsInstance.off(\"datazoom\");\r\n  681\t};\r\n  682\t\r\n  683\t// 键盘事件\r\n  684\tconst keyDownEvent = (e: KeyboardEvent) =\u003e {\r\n  685\t  if (!echartsInstance) return;\r\n  686\t  // 只有选中或者按ctrl才激活按键\r\n  687\t  if (!(e.ctrlKey || props.isSelect)) return;\r\n  688\t  const option = echartsInstance.getOption() as EChartsOption;\r\n  689\t  let { startValue, endValue, start, end } = (option.dataZoom as DataZoomComponentOption[])[0] as {\r\n  690\t    startValue: number;\r\n  691\t    endValue: number;\r\n  692\t  };\r\n  693\t  const handleLeft = () =\u003e {\r\n  694\t    // 左按键\r\n  695\t    if (startValue === 0) {\r\n  696\t      return;\r\n  697\t    }\r\n  698\t    startValue = startValue - 1;\r\n  699\t    endValue = endValue - 1;\r\n  700\t    echartsInstance.dispatchAction({\r\n  701\t      type: \"dataZoom\",\r\n  702\t      startValue,\r\n  703\t      endValue,\r\n  704\t      maxValueSpan: config.value.maxValueSpan,\r\n  705\t    });\r\n  706\t  };\r\n  707\t  const handleRight = () =\u003e {\r\n  708\t    // 右按键\r\n  709\t    // 如果开启了动态后续数据加载\r\n  710\t    if (config.value.dynamicLoadConfig.futureVisible \u0026\u0026 !futureIsLoading \u0026\u0026 !futureIsAllLoad.value) {\r\n  711\t      startValue = startValue + 1;\r\n  712\t      endValue = endValue + 1;\r\n  713\t      echartsInstance.dispatchAction({\r\n  714\t        type: \"dataZoom\",\r\n  715\t        startValue,\r\n  716\t        endValue,\r\n  717\t        maxValueSpan: config.value.maxValueSpan,\r\n  718\t      });\r\n  719\t    } else {\r\n  720\t      if (endValue === option.xAxis[0].data.length - 1) {\r\n  721\t        return;\r\n  722\t      }\r\n  723\t      startValue = startValue + 1;\r\n  724\t      endValue = endValue + 1;\r\n  725\t      echartsInstance.dispatchAction({\r\n  726\t        type: \"dataZoom\",\r\n  727\t        startValue,\r\n  728\t        endValue,\r\n  729\t        maxValueSpan: config.value.maxValueSpan,\r\n  730\t      });\r\n  731\t    }\r\n  732\t  };\r\n  733\t  const handleUp = () =\u003e {\r\n  734\t    // 上按键-放大 最少保持5条数据\r\n  735\t    if (endValue - startValue \u003c 5) {\r\n  736\t      return;\r\n  737\t    }\r\n  738\t    // 以鼠标指定的K线为中心点进行放大\r\n  739\t    const startDiff = Math.floor((activeIndex.value - startValue) / 2) + 1;\r\n  740\t    const endDiff = Math.floor((endValue - activeIndex.value) / 2) + 1;\r\n  741\t    startValue = startValue + startDiff;\r\n  742\t    endValue = endValue - endDiff;\r\n  743\t    echartsInstance.dispatchAction({\r\n  744\t      type: \"dataZoom\",\r\n  745\t      startValue,\r\n  746\t      endValue,\r\n  747\t      actionIsWheel: true, // 标记为缩放\r\n  748\t      maxValueSpan: config.value.maxValueSpan,\r\n  749\t    });\r\n  750\t  };\r\n  751\t  const handleDown = () =\u003e {\r\n  752\t    // 下按键-缩小\r\n  753\t    // const diff = Math.min(50, activeIndex.value - startValue);\r\n  754\t    // startValue = startValue - diff - 1;\r\n  755\t    start = start - (end - start) / 4;\r\n  756\t    echartsInstance.dispatchAction({\r\n  757\t      type: \"dataZoom\",\r\n  758\t      start,\r\n  759\t      end,\r\n  760\t      actionIsWheel: true, // 标记为缩放\r\n  761\t      maxValueSpan: config.value.maxValueSpan,\r\n  762\t    });\r\n  763\t  };\r\n  764\t  const callBackMap = new Map([\r\n  765\t    [\"ArrowLeft\", handleLeft],\r\n  766\t    [\"ArrowRight\", handleRight],\r\n  767\t    [\"ArrowUp\", handleUp],\r\n  768\t    [\"ArrowDown\", handleDown],\r\n  769\t  ]);\r\n  770\t  const callBack = callBackMap.get(e.code);\r\n  771\t  callBack instanceof Function \u0026\u0026 callBack();\r\n  772\t};\r\n  773\t\r\n  774\t/**\r\n  775\t * @description: K线组件初始化\r\n  776\t */\r\n  777\tconst init = async () =\u003e {\r\n  778\t  let Initializing: boolean | null = true; // 正在初始化\r\n  779\t  // 1.初始化图表\r\n  780\t  echartsInstance = echarts.init(echartsRef.value) as EChartsType;\r\n  781\t  // 2.绘制\r\n  782\t  await draw();\r\n  783\t  // 3.初始化右键菜单\r\n  784\t  menuData.value = props.defaultMenuData as MenuDataType;\r\n  785\t  // 4.初始化数据激活索引\r\n  786\t  activeIndex.value = ((echartsInstance.getOption().dataZoom as DataZoomComponentOption[])[0].endValue as number) ?? -1;\r\n  787\t  // 5.进行图表事件绑定\r\n  788\t  addEventListener();\r\n  789\t  // 6.进行DOM监控,图表重加载\r\n  790\t  chartDomObserver = new ResizeObserver(() =\u003e {\r\n  791\t    if (Initializing) {\r\n  792\t      Initializing = null;\r\n  793\t      return;\r\n  794\t    }\r\n  795\t    echartsInstance.resize();\r\n  796\t    draw(\"line\");\r\n  797\t  });\r\n  798\t  chartDomObserver.observe(echartsRef.value);\r\n  799\t  // 7.绑定键盘事件\r\n  800\t  window.addEventListener(\"keydown\", keyDownEvent);\r\n  801\t};\r\n  802\t\r\n  803\tonMounted(() =\u003e {\r\n  804\t  init();\r\n  805\t});\r\n  806\t\r\n  807\tonUnmounted(() =\u003e {\r\n  808\t  // 1.解绑\r\n  809\t  removeEventListener();\r\n  810\t  window.removeEventListener(\"keydown\", keyDownEvent);\r\n  811\t  // 2.销毁实例\r\n  812\t  echartsInstance.dispose();\r\n  813\t  // 3.取消监听图表DOM\r\n  814\t  chartDomObserver.disconnect();\r\n  815\t  chartDomObserver = null;\r\n  816\t});\r\n  817\t\u003c/script\u003e\r\n  818\t\r\n  819\t\u003ctemplate\u003e\r\n  820\t  \u003c!-- 神兔-K线组件 --\u003e\r\n  821\t  \u003cdiv class=\"st-kline\"\u003e\r\n  822\t    \u003c!-- Tips --\u003e\r\n  823\t    \u003cdiv class=\"st-kline-header\"\u003e\r\n  824\t      \u003c!-- 开, 高, 低, 收 --\u003e\r\n  825\t      \u003cTips :data=\"kLineTips\" /\u003e\r\n  826\t      \u003c!-- 指标 --\u003e\r\n  827\t      \u003cTips :data=\"indicatorTips\" /\u003e\r\n  828\t      \u003c!-- 价格趋势[价差定制] --\u003e\r\n  829\t      \u003cTips :data=\"priceTrendTips\" /\u003e\r\n  830\t    \u003c/div\u003e\r\n  831\t    \u003c!-- 图表 + 菜单 --\u003e\r\n  832\t    \u003cContextmenu class=\"st-kline-body\" @closeContextMenuCallBack=\"closeContextMenuCallBack\"\u003e\r\n  833\t      \u003c!-- 图表 --\u003e\r\n  834\t      \u003cdiv ref=\"echartsRef\" :class=\"cursorPenVisible ? 'st-kline-chart cursorPen' : 'st-kline-chart'\" /\u003e\r\n  835\t      \u003c!-- 菜单 --\u003e\r\n  836\t      \u003ctemplate #popover\u003e\r\n  837\t        \u003cel-menu class=\"menu\"\u003e\r\n  838\t          \u003cel-menu-item\r\n  839\t            v-for=\"item in menuData\"\r\n  840\t            :key=\"item.label\"\r\n  841\t            :index=\"item.label\"\r\n  842\t            class=\"menuItem\"\r\n  843\t            @click=\"menuClick(item)\"\r\n  844\t          \u003e\r\n  845\t            {{ item.label }}\r\n  846\t          \u003c/el-menu-item\u003e\r\n  847\t        \u003c/el-menu\u003e\r\n  848\t      \u003c/template\u003e\r\n  849\t    \u003c/Contextmenu\u003e\r\n  850\t  \u003c/div\u003e\r\n  851\t\u003c/template\u003e\r\n  852\t\r\n  853\t\u003cstyle lang=\"scss\"\u003e\r\n  854\t// 需要写在外面,不然会被Vue唯一标识符顶掉导致样式不生效\r\n  855\t.cursorPen canvas {\r\n  856\t  cursor: url(./images/pen.png) -30 30, auto !important;\r\n  857\t}\r\n  858\t\u003c/style\u003e\r\n  859\t\u003cstyle lang=\"scss\" scoped\u003e\r\n  860\t.st-kline {\r\n  861\t  width: 100%;\r\n  862\t  height: 100%;\r\n  863\t  background: #000;\r\n  864\t  overflow-x: hidden;\r\n  865\t  position: relative; // 配合提供给菜单定位\r\n  866\t  // K线头部区域: Tips\r\n  867\t  \u0026-header {\r\n  868\t    height: 34px;\r\n  869\t    position: absolute;\r\n  870\t    left: 66px;\r\n  871\t  }\r\n  872\t  \u0026-body {\r\n  873\t    width: 100%;\r\n  874\t    height: 100%;\r\n  875\t  }\r\n  876\t  \u0026-chart {\r\n  877\t    width: 100%;\r\n  878\t    height: 100%;\r\n  879\t  }\r\n  880\t  .menu {\r\n  881\t    border-radius: 4px;\r\n  882\t    overflow: hidden;\r\n  883\t    background-color: white;\r\n  884\t    border-right: 0;\r\n  885\t    .menuItem {\r\n  886\t      font-size: 16px;\r\n  887\t      height: 32px;\r\n  888\t    }\r\n  889\t  }\r\n  890\t}\r\n  891\t\u003c/style\u003e\r\n  892\t\n","preview":"1\t\u003cscript setup lang=\"ts\"\u003e\n2\timport * as echarts from \"echarts\";\n3\timport { ref, computed, watch, onMounted, onUnmounted } from \"vue\";","bytes":32655,"is_error":false,"stored_at":"2026-07-27T04:43:58.8846478Z"}
+{"id":"t1.tool20","tool_name":"read_file","full_text":"[read_file path=D:/gitlab/st-comp/packages/KlinePlus/index.vue lines=1-1068/1068 bytes=35463]\n    1\t\u003c!-- 单品种单周期K线业务组件 --\u003e\r\n    2\t\u003cscript setup\u003e\r\n    3\timport dayjs from \"dayjs\";\r\n    4\timport * as echarts from \"echarts\";\r\n    5\timport { stMath, debounce, addResizeListener } from \"st-func\";\r\n    6\timport { ref, watch, computed, onMounted, onUnmounted, inject } from \"vue\";\r\n    7\timport { loadKlineConfig, checkTimeInterval, getSubOptions, mergeklineData, handleMarkPointTradeLog, handleNetPositionLine, handleTradeIncomeRateLine, normalizeToKlineTimeByMatch } from \"./utils.js\";\r\n    8\timport Tips from \"./components/Tips.vue\";\r\n    9\timport SliderChart from \"./components/SliderChart.vue\";\r\n   10\t\r\n   11\tconst { round, formatValue } = stMath;\r\n   12\tconst { request } = inject(\"stConfig\"); // 组件库全局配置\r\n   13\t\r\n   14\tconst loading = ref(false);\r\n   15\tconst isHover = ref(false);\r\n   16\tconst props = defineProps({\r\n   17\t  varietyCode: { type: String, required: true },\r\n   18\t  varietyStock: { type: Number, required: true }, // 品种市场类型 0-期货, 1-股票, 2-期权\r\n   19\t  indicatorStore: { type: Object, required: true }, // 指标配置Store\r\n   20\t  userKlineConfig: { type: Object, required: true }, // 用户自定义的K线配置\r\n   21\t\r\n   22\t  // 交互选项\r\n   23\t  cycle: { type: String, required: true },\r\n   24\t  sellBuy: { type: Number, default: 1 },\r\n   25\t  rightType: { type: [Number, null], default: null }, // 复权类型\r\n   26\t  klineType: { type: [Number, null], default: null }, // 合约类型\r\n   27\t  incomeType: { type: Number, default: 0 }, // 收益计算类型 0-单利, 1-复利\r\n   28\t  initTimeRange: { type: Array, required: true },\r\n   29\t  mainIndicator: { type: String, required: true },\r\n   30\t\r\n   31\t  // 绘制数据\r\n   32\t  tradeLog: { type: Array, default: () =\u003e [] }, // 成交数据\r\n   33\t  netPositionData: { type: Array, default: () =\u003e [] }, // 净值数据\r\n   34\t  tradeIncomeRateData: { type: Array, default: () =\u003e [] }, // 成交收益率数据\r\n   35\t\r\n   36\t  // 强制定位高亮(非必填)\r\n   37\t  positionTime: { type: [String, null], default: null },\r\n   38\t  // 同步刷选范围(非必填)\r\n   39\t  syncBrushRange: { type: Object, default: () =\u003e ({ cycleList: [], startTime: null, endTime: null }) },\r\n   40\t\r\n   41\t  // 业务系统相关\r\n   42\t  deleteFirstNumber: { type: Number, default: 1 }, // 绩效标记\r\n   43\t  withoutPermission: { type: Number, default: 0 }, // 三方标记(不需要token授权)\r\n   44\t});\r\n   45\t\r\n   46\t// 加载标记\r\n   47\tlet isLoadNew = false;\r\n   48\tlet isloadAllNew = false;\r\n   49\tlet isLoadHistory = false;\r\n   50\tlet isloadAllHistory = false;\r\n   51\t\r\n   52\tlet resizeRo = null;\r\n   53\tlet subChartIns = null;\r\n   54\tlet mainChartIns = null;\r\n   55\tconst mainChartRef = ref(null);\r\n   56\tconst subChartRef = ref(null);\r\n   57\tconst sliderChartRef = ref(null);\r\n   58\t\r\n   59\t// K线数据\r\n   60\tconst klineData = ref({\r\n   61\t  data: [],\r\n   62\t  mainIndicator: [],\r\n   63\t  subIndicator: [],\r\n   64\t  time: [],\r\n   65\t});\r\n   66\tconst activeIndex = ref(0);\r\n   67\tconst screenTimeRange = ref([]); // 当屏首末时间\r\n   68\tconst contextmenuKlineTime = ref(null); // 右键点击的那一根K线时间\r\n   69\t\r\n   70\t// 指标数据\r\n   71\tconst subIndicator = ref(\"VOL\");\r\n   72\tconst mainTips = computed(() =\u003e {\r\n   73\t  const itemData = klineData.value.data[activeIndex.value];\r\n   74\t  if (!itemData) {\r\n   75\t    return [\r\n   76\t      { label: \"开\", value: \"-\" },\r\n   77\t      { label: \"高\", value: \"-\" },\r\n   78\t      { label: \"低\", value: \"-\" },\r\n   79\t      { label: \"收\", value: \"-\" },\r\n   80\t      { label: \"额\", value: \"-\" },\r\n   81\t      { label: \"涨跌\", value: \"-\" },\r\n   82\t    ];\r\n   83\t  }\r\n   84\t  const result = [\r\n   85\t    { label: \"开\", value: itemData[0] },\r\n   86\t    { label: \"高\", value: itemData[3] },\r\n   87\t    { label: \"低\", value: itemData[2] },\r\n   88\t    { label: \"收\", value: itemData[1] },\r\n   89\t  ];\r\n   90\t  // 特殊: 交易总额\r\n   91\t  itemData[4] !== null \u0026\u0026 result.push({ label: \"额\", value: formatValue(itemData[4]) });\r\n   92\t  // 特殊: 涨跌幅 公式:收盘价 - 昨收 / (昨收绝对值)\r\n   93\t  let diffColor;\r\n   94\t  if (itemData[6] \u003e 0) {\r\n   95\t    diffColor = \"red\";\r\n   96\t  } else if (itemData[6] \u003c 0) {\r\n   97\t    diffColor = \"green\";\r\n   98\t  }\r\n   99\t  result.push({ label: \"涨跌\", value: `${round(itemData[6])}%`, color: diffColor });\r\n  100\t  return result;\r\n  101\t});\r\n  102\tconst mainIndicatorTips = computed(() =\u003e {\r\n  103\t  return (\r\n  104\t    klineData.value?.mainIndicator?.map((item) =\u003e {\r\n  105\t      return { label: item.key, value: round(item.data[activeIndex.value]), color: item.color };\r\n  106\t    }) || []\r\n  107\t  );\r\n  108\t});\r\n  109\tconst subIndicatorTips = computed(() =\u003e {\r\n  110\t  return klineData.value?.subIndicator?.map((item) =\u003e ({ label: item.key, color: item.color, value: item.data[activeIndex.value] || \"-\" })) || [];\r\n  111\t});\r\n  112\t\r\n  113\t// 图表: 初始化\r\n  114\tconst initChart = () =\u003e {\r\n  115\t  // 检查DOM元素是否存在\r\n  116\t  if (!mainChartRef.value) {\r\n  117\t    console.warn(\"[K线] 主图DOM元素不存在，取消初始化\");\r\n  118\t    return false;\r\n  119\t  }\r\n  120\t  if (mainChartIns) return true;\r\n  121\t\r\n  122\t  try {\r\n  123\t    // 主图\r\n  124\t    mainChartIns = echarts.init(mainChartRef.value);\r\n  125\t    mainChartIns.on(\r\n  126\t      \"highlight\",\r\n  127\t      debounce((params) =\u003e {\r\n  128\t        if (params.dataIndex) {\r\n  129\t          activeIndex.value = params.dataIndex;\r\n  130\t        } else {\r\n  131\t          activeIndex.value = params.batch?.[0].dataIndex ?? -1;\r\n  132\t        }\r\n  133\t      }, 10),\r\n  134\t    );\r\n  135\t    mainChartIns.on(\r\n  136\t      \"datazoom\",\r\n  137\t      debounce(async () =\u003e {\r\n  138\t        const { loadCheckCount } = loadKlineConfig;\r\n  139\t        const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};\r\n  140\t        // 当前开始索引 \u003c 阈值边界, 触发加载更多数据\r\n  141\t        if (isLoadHistory === false \u0026\u0026 isloadAllHistory === false \u0026\u0026 startValue \u003c loadCheckCount) await getMoreData(\"history\");\r\n  142\t        // 当前结束索引 \u003e 阈值边界, 触发加载更多数据\r\n  143\t        if (isLoadNew === false \u0026\u0026 isloadAllNew === false \u0026\u0026 endValue \u003e klineData.value.time.length - loadCheckCount) await getMoreData(\"new\");\r\n  144\t        getScreenTimeRange();\r\n  145\t        drawScreenMaxPrice();\r\n  146\t      }),\r\n  147\t    );\r\n  148\t    mainChartIns.on(\"globalout\", () =\u003e {\r\n  149\t      if (mainChartIns) {\r\n  150\t        const option = mainChartIns.getOption();\r\n  151\t        activeIndex.value = option.dataZoom[0].endValue;\r\n  152\t      }\r\n  153\t    });\r\n  154\t    mainChartIns.getZr().on(\"contextmenu\", () =\u003e {\r\n  155\t      contextmenuKlineTime.value = klineData.value?.time[activeIndex.value];\r\n  156\t    });\r\n  157\t    window.addEventListener(\"keydown\", handleKeyDownEvent);\r\n  158\t\r\n  159\t    // 副图\r\n  160\t    if (props.userKlineConfig.enable_subChart \u0026\u0026 subChartRef.value) {\r\n  161\t      subChartIns = echarts.init(subChartRef.value);\r\n  162\t      echarts.connect([mainChartIns, subChartIns]);\r\n  163\t    }\r\n  164\t\r\n  165\t    // DOM缩放\r\n  166\t    if (mainChartRef.value) {\r\n  167\t      resizeRo = addResizeListener(mainChartRef.value);\r\n  168\t      resizeRo.listen(() =\u003e {\r\n  169\t        requestAnimationFrame(() =\u003e {\r\n  170\t          mainChartIns?.resize();\r\n  171\t          subChartIns?.resize();\r\n  172\t          sliderChartRef.value?.resize();\r\n  173\t        });\r\n  174\t      });\r\n  175\t    }\r\n  176\t\r\n  177\t    return true;\r\n  178\t  } catch (error) {\r\n  179\t    console.error(\"[st-klinePlus]: 初始化异常:\", error);\r\n  180\t    return false;\r\n  181\t  }\r\n  182\t};\r\n  183\t// 图表: 获取数据 [首屏]\r\n  184\tconst getMainData = async ({ startTime, endTime }) =\u003e {\r\n  185\t  // 加载状态初始化\r\n  186\t  isLoadHistory = false;\r\n  187\t  isloadAllHistory = false;\r\n  188\t  isLoadNew = false;\r\n  189\t  isloadAllNew = false;\r\n  190\t  try {\r\n  191\t    loading.value = true;\r\n  192\t    const params = {\r\n  193\t      varietyCode: props.varietyCode,\r\n  194\t      cycle: props.cycle, // 周期\r\n  195\t      right: props.varietyStock === 1 ? props.rightType : 0, // 复权方式\r\n  196\t      contractType: props.varietyStock ? null : props.klineType, // 合约类型\r\n  197\t      mainIndicatorList: props.indicatorStore.getIndicatorParams(props.mainIndicator),\r\n  198\t      subIndicator: subIndicator.value,\r\n  199\t      deleteFirstNumber: props.deleteFirstNumber,\r\n  200\t      withoutPermission: props.withoutPermission,\r\n  201\t    };\r\n  202\t    // Echarts如果一屏如果正好展示了所有数据, 是无法缩放触发加载更多的\r\n  203\t    // 所以在请求中需要对开始和结束时间进行延伸, 但是首屏的展示时间定位还是会以传入的开始结束时间为准\r\n  204\t    if ([\"1\", \"2\", \"3\", \"4\", \"5\"].includes(props.cycle)) {\r\n  205\t      Object.assign(params, {\r\n  206\t        startTime: dayjs(startTime).subtract(1, \"day\").format(\"YYYY-MM-DD HH:mm:ss\"),\r\n  207\t        endTime: dayjs(endTime).add(1, \"day\").format(\"YYYY-MM-DD HH:mm:ss\"),\r\n  208\t      });\r\n  209\t    } else if ([\"6\", \"7\"].includes(props.cycle)) {\r\n  210\t      Object.assign(params, {\r\n  211\t        startTime: dayjs(startTime).subtract(50, \"day\").format(\"YYYY-MM-DD HH:mm:ss\"),\r\n  212\t        endTime: dayjs(endTime).add(50, \"day\").format(\"YYYY-MM-DD HH:mm:ss\"),\r\n  213\t      });\r\n  214\t    } else {\r\n  215\t      Object.assign(params, {\r\n  216\t        startTime: dayjs(startTime).subtract(10, \"month\").format(\"YYYY-MM-DD HH:mm:ss\"),\r\n  217\t        endTime: dayjs(endTime).add(10, \"month\").format(\"YYYY-MM-DD HH:mm:ss\"),\r\n  218\t      });\r\n  219\t    }\r\n  220\t    const { body } = await request.post(\"/middleLayer/kline/getKline\", params);\r\n  221\t    klineData.value = body ?? { data: [], mainIndicator: [], subIndicator: [], time: [] };\r\n  222\t\r\n  223\t    // 找到匹配对应传入的开始, 结束时间的数据索引, 绘制图表\r\n  224\t    let startValue = -1;\r\n  225\t    let endValue = -1;\r\n  226\t    for (let index = 0; index \u003c klineData.value.time.length; index++) {\r\n  227\t      const day = dayjs(klineData.value.time[index]).format(\"YYYY-MM-DD\");\r\n  228\t      if (startValue !== -1 \u0026\u0026 endValue !== -1) break;\r\n  229\t      if (startValue === -1) {\r\n  230\t        if (new Date(day) === new Date(startTime)) startValue = index;\r\n  231\t        else if (new Date(day) \u003e new Date(startTime)) startValue = index - 1;\r\n  232\t      }\r\n  233\t      if (endValue === -1) {\r\n  234\t        if (new Date(day) === new Date(endTime)) endValue = index;\r\n  235\t        else if (new Date(day) \u003e new Date(endTime)) endValue = index - 1;\r\n  236\t      }\r\n  237\t    }\r\n  238\t    if (endValue === -1) endValue = klineData.value.time.length - 1;\r\n  239\t    // const startValue = klineData.value.time.findIndex((item) =\u003e new Date(item) \u003e= new Date(startTime));\r\n  240\t    // const endValue = klineData.value.time.findIndex((item) =\u003e new Date(item) \u003e= new Date(endTime));\r\n  241\t    draw({\r\n  242\t      startValue: startValue === -1 ? 0 : startValue,\r\n  243\t      endValue: endValue === -1 ? klineData.value.time.length - 1 : endValue,\r\n  244\t    });\r\n  245\t  } finally {\r\n  246\t    loading.value = false;\r\n  247\t  }\r\n  248\t};\r\n  249\t// 图表: 获取数据 [更多]\r\n  250\tconst getMoreData = async (type) =\u003e {\r\n  251\t  const { loadAddCount } = loadKlineConfig;\r\n  252\t  switch (type) {\r\n  253\t    case \"history\": {\r\n  254\t      isLoadHistory = true;\r\n  255\t      const params = {\r\n  256\t        varietyCode: props.varietyCode,\r\n  257\t        cycle: props.cycle,\r\n  258\t        right: props.varietyStock === 1 ? props.rightType : 0, // 复权方式\r\n  259\t        contractType: props.varietyStock ? null : props.klineType,\r\n  260\t        endTime: klineData.value.time[0],\r\n  261\t        limit: loadAddCount,\r\n  262\t        mainIndicatorList: props.indicatorStore.getIndicatorParams(props.mainIndicator),\r\n  263\t        subIndicator: subIndicator.value,\r\n  264\t        deleteFirstNumber: props.deleteFirstNumber,\r\n  265\t        withoutPermission: props.withoutPermission,\r\n  266\t      };\r\n  267\t      const { body } = await request.post(\"/middleLayer/kline/getKline\", params);\r\n  268\t      // 合并数据\r\n  269\t      klineData.value = mergeklineData(body, klineData.value);\r\n  270\t      // 判断是否加载完全部的历史数据\r\n  271\t      if (body.data.length \u003c loadAddCount) {\r\n  272\t        console.log(\"[K线] 获取更多数据: 左侧已全部获取完毕, 关闭\");\r\n  273\t        isloadAllHistory = true;\r\n  274\t      }\r\n  275\t      isLoadHistory = false;\r\n  276\t      break;\r\n  277\t    }\r\n  278\t    case \"new\": {\r\n  279\t      isLoadNew = true;\r\n  280\t      const params = {\r\n  281\t        varietyCode: props.varietyCode,\r\n  282\t        cycle: props.cycle, // 周期\r\n  283\t        right: props.varietyStock === 1 ? props.rightType : 0, // 复权方式\r\n  284\t        contractType: props.varietyStock ? null : props.klineType, // 合约类型\r\n  285\t        startTime: klineData.value.time[klineData.value.time.length - 1], // 开始时间\r\n  286\t        limit: loadAddCount, // 查询K线数量\r\n  287\t        mainIndicatorList: props.indicatorStore.getIndicatorParams(props.mainIndicator),\r\n  288\t        subIndicator: subIndicator.value,\r\n  289\t        deleteFirstNumber: props.deleteFirstNumber,\r\n  290\t        withoutPermission: props.withoutPermission,\r\n  291\t      };\r\n  292\t      const { body } = await request.post(\"/middleLayer/kline/getKline\", params);\r\n  293\t      // 合并数据\r\n  294\t      klineData.value = mergeklineData(klineData.value, body);\r\n  295\t      // 判断是否加载完全部的新数据\r\n  296\t      if (body.data.length \u003c loadAddCount) {\r\n  297\t        console.log(\"[K线] 获取更多数据: 右侧已全部获取完毕, 关闭\");\r\n  298\t        isloadAllNew = true;\r\n  299\t      }\r\n  300\t      isLoadNew = false;\r\n  301\t      break;\r\n  302\t    }\r\n  303\t  }\r\n  304\t\r\n  305\t  // 绘制图表 (更新载入更多数据后的定位索引)\r\n  306\t  const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};\r\n  307\t  const klineDataTime = mainChartIns.getOption()?.xAxis[0].data;\r\n  308\t  const newStartValue = klineData.value.time.findIndex((item) =\u003e new Date(item) \u003e= new Date(klineDataTime[startValue]));\r\n  309\t  const newEndValue = klineData.value.time.findIndex((item) =\u003e new Date(item) \u003e= new Date(klineDataTime[endValue]));\r\n  310\t  draw({\r\n  311\t    startValue: newStartValue === -1 ? 0 : newStartValue,\r\n  312\t    endValue: newEndValue === -1 ? klineData.value.time.length - 1 : newEndValue,\r\n  313\t  });\r\n  314\t};\r\n  315\t// 图表: 获取数据 [当屏首末时间范围]\r\n  316\tconst getScreenTimeRange = () =\u003e {\r\n  317\t  if (!klineData.value.time.length) return (screenTimeRange.value = []);\r\n  318\t  const { time } = klineData.value;\r\n  319\t  const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};\r\n  320\t  const startTime = time[startValue];\r\n  321\t  const endTime = time[endValue];\r\n  322\t  if ([\"6\", \"7\", \"8\"].includes(props.cycle)) {\r\n  323\t    screenTimeRange.value = [dayjs(startTime).format(\"YYYY-MM-DD\"), dayjs(endTime).format(\"YYYY-MM-DD\")];\r\n  324\t  } else {\r\n  325\t    screenTimeRange.value = [startTime, endTime];\r\n  326\t  }\r\n  327\t};\r\n  328\t\r\n  329\t// 图表: 绘制(主流程)\r\n  330\tconst draw = (params = { startValue: 0, endValue: 0 }) =\u003e {\r\n  331\t  const isInitialized = initChart();\r\n  332\t  // 确保图表存在\r\n  333\t  if (!isInitialized || !mainChartIns) {\r\n  334\t    return console.warn(\"[st-klinePlus]: 图表未准备就绪, 跳过绘制\");\r\n  335\t  }\r\n  336\t  // 检查数据是否存在\r\n  337\t  if (!klineData.value.time.length) {\r\n  338\t    return console.warn(\"[st-klinePlus]: 图表无数据, 跳过绘制\");\r\n  339\t  }\r\n  340\t\r\n  341\t  const { maxValueSpan } = loadKlineConfig;\r\n  342\t  const { time, data, mainIndicator } = klineData.value;\r\n  343\t\r\n  344\t  // 如果超过了最大根数限制, 要求endValue不变, startValue进行变换\r\n  345\t  const startValue = params.endValue - params.startValue \u003e maxValueSpan ? params.endValue - maxValueSpan : params.startValue;\r\n  346\t  const endValue = params.endValue;\r\n  347\t\r\n  348\t  // 配置: 指标线\r\n  349\t  const indicatorSeries = mainIndicator.map((item) =\u003e {\r\n  350\t    return {\r\n  351\t      name: item.key,\r\n  352\t      type: \"line\",\r\n  353\t      silent: true,\r\n  354\t      symbol: \"none\",\r\n  355\t      data: item.data,\r\n  356\t      lineStyle: {\r\n  357\t        width: item.width || 1,\r\n  358\t      },\r\n  359\t      itemStyle: {\r\n  360\t        color: item.color,\r\n  361\t      },\r\n  362\t    };\r\n  363\t  });\r\n  364\t  // 配置数据: 净值曲线\r\n  365\t  const { netPositionLineData } = handleNetPositionLine(props.netPositionData, props.cycle);\r\n  366\t  // 配置数据: 成交收益率曲线\r\n  367\t  const { tradeIncomeRateLineData } = handleTradeIncomeRateLine(props.tradeIncomeRateData, props.cycle, props.incomeType, time);\r\n  368\t  // 配置数据: 成交点位 + 连线\r\n  369\t  const { tradePointData, tradeLineData } = handleMarkPointTradeLog(props.tradeLog, props.cycle, props.sellBuy, time, data, props.userKlineConfig);\r\n  370\t\r\n  371\t  /**\r\n  372\t   * @description: 渲染图表\r\n  373\t   */\r\n  374\t  mainChartIns.setOption(\r\n  375\t    {\r\n  376\t      animation: false,\r\n  377\t      grid: {\r\n  378\t        top: \"40px\",\r\n  379\t        left: \"60px\",\r\n  380\t        right: \"20px\",\r\n  381\t        bottom: \"20px\",\r\n  382\t      },\r\n  383\t      dataZoom: [\r\n  384\t        {\r\n  385\t          type: \"inside\",\r\n  386\t          startValue,\r\n  387\t          endValue,\r\n  388\t          minValueSpan: loadKlineConfig.minValueSpan,\r\n  389\t          maxValueSpan: loadKlineConfig.maxValueSpan,\r\n  390\t        },\r\n  391\t      ],\r\n  392\t      tooltip: {\r\n  393\t        trigger: \"axis\",\r\n  394\t        appendToBody: true,\r\n  395\t        confine: true,\r\n  396\t        axisPointer: {\r\n  397\t          type: \"cross\",\r\n  398\t          label: {\r\n  399\t            rich: {},\r\n  400\t            formatter: (data) =\u003e {\r\n  401\t              const { axisDimension, value } = data;\r\n  402\t              if (axisDimension === \"x\") {\r\n  403\t                if ([\"6\", \"7\", \"8\"].includes(props.cycle)) {\r\n  404\t                  return dayjs(value).format(\"YYYY-MM-DD\");\r\n  405\t                } else {\r\n  406\t                  return value;\r\n  407\t                }\r\n  408\t              } else {\r\n  409\t                return String(round(value));\r\n  410\t              }\r\n  411\t            },\r\n  412\t          },\r\n  413\t        },\r\n  414\t        formatter: (params) =\u003e {\r\n  415\t          if (!params?.length) return null;\r\n  416\t          let body = \"\";\r\n  417\t          params.forEach((item) =\u003e {\r\n  418\t            // 资产持仓净值\r\n  419\t            if (item.seriesName === \"netPosition\" \u0026\u0026 item.data !== null) {\r\n  420\t              body += `\u003cdiv\u003e资产持仓净值: ${item.data[1]}\u003c/div\u003e`;\r\n  421\t            }\r\n  422\t            // 成交数据\r\n  423\t            if (item.componentSubType === \"candlestick\") {\r\n  424\t              // 买卖点\r\n  425\t              if (props.sellBuy === 0) {\r\n  426\t                // 买卖点渲染逻辑\r\n  427\t                const sellBuy = tradePointData.filter((i) =\u003e i?.coord[0] === item.axisValue);\r\n  428\t                let buy = 0;\r\n  429\t                let sell = 0;\r\n  430\t                sellBuy.forEach((i) =\u003e {\r\n  431\t                  const { tradeType, amount } = i.customData;\r\n  432\t                  if (tradeType === \"买\") {\r\n  433\t                    buy += amount;\r\n  434\t                  }\r\n  435\t                  if (tradeType === \"卖\") {\r\n  436\t                    sell += amount;\r\n  437\t                  }\r\n  438\t                });\r\n  439\t                if (buy) body += `\u003cdiv\u003e买: ${buy}\u003c/div\u003e`;\r\n  440\t                if (sell) body += `\u003cdiv\u003e卖: ${sell}\u003c/div\u003e`;\r\n  441\t              }\r\n  442\t              // 开平点\r\n  443\t              else {\r\n  444\t                // 开平点渲染逻辑\r\n  445\t                tradePointData.forEach((i) =\u003e {\r\n  446\t                  if (i?.coord[0] === item.axisValue) {\r\n  447\t                    const { tradeType, amount, profitAndLoss, openPriceAll, closePriceAll } = i.customData;\r\n  448\t                    let tooltip = `\u003cdiv\u003e${tradeType}: ${amount}手\u003c/div\u003e`;\r\n  449\t                    // 开仓-tooltip: 开仓价\r\n  450\t                    if (tradeType.includes(\"开\")) {\r\n  451\t                      tooltip += `\u003cdiv\u003e开仓价: ${(openPriceAll / amount)?.toFixed(2)}\u003c/div\u003e`;\r\n  452\t                    }\r\n  453\t                    // 平仓-tooltip: 平仓价, 盈亏, 盈亏比率\r\n  454\t                    if (tradeType.includes(\"平\")) {\r\n  455\t                      const openPrice = (openPriceAll / amount)?.toFixed(2);\r\n  456\t                      const closePrice = (closePriceAll / amount)?.toFixed(2);\r\n  457\t                      tooltip += `\u003cdiv\u003e平仓价: ${closePrice}\u003c/div\u003e`;\r\n  458\t                      tooltip += `\u003cdiv\u003e盈亏: ${profitAndLoss?.toFixed(2)}\u003c/div\u003e`;\r\n  459\t                      tooltip += `\u003cdiv\u003e盈亏比率: ${(((closePrice - openPrice) / openPrice) * 100)?.toFixed(2)} %\u003c/div\u003e`;\r\n  460\t                    }\r\n  461\t                    body += tooltip;\r\n  462\t                  }\r\n  463\t                });\r\n  464\t              }\r\n  465\t            }\r\n  466\t          });\r\n  467\t          if (!body) return null;\r\n  468\t          let time = params[0].axisValue;\r\n  469\t          if ([\"6\", \"7\", \"8\"].includes(props.cycle)) time = dayjs(time).format(\"YYYY-MM-DD\");\r\n  470\t          return `\r\n  471\t              \u003cdiv\u003e\r\n  472\t                \u003cspan style=\"font-weight: bold;\"\u003e${time}\u003c/span\u003e\r\n  473\t                ${body}\r\n  474\t              \u003c/div\u003e\r\n  475\t            `;\r\n  476\t        },\r\n  477\t      },\r\n  478\t      xAxis: {\r\n  479\t        show: true,\r\n  480\t        type: \"category\",\r\n  481\t        data: time,\r\n  482\t        splitLine: {\r\n  483\t          show: false,\r\n  484\t        },\r\n  485\t        axisLabel: {\r\n  486\t          formatter: (value) =\u003e {\r\n  487\t            if ([\"6\", \"7\", \"8\"].includes(props.cycle)) {\r\n  488\t              return dayjs(value).format(\"YYYY-MM-DD\");\r\n  489\t            } else {\r\n  490\t              return value;\r\n  491\t            }\r\n  492\t          },\r\n  493\t        },\r\n  494\t      },\r\n  495\t      yAxis: [\r\n  496\t        {\r\n  497\t          type: \"value\",\r\n  498\t          axisLine: {\r\n  499\t            show: true,\r\n  500\t          },\r\n  501\t          splitLine: {\r\n  502\t            show: true,\r\n  503\t            lineStyle: {\r\n  504\t              type: \"dotted\",\r\n  505\t              color: \"#333\",\r\n  506\t            },\r\n  507\t          },\r\n  508\t          min: (value) =\u003e {\r\n  509\t            const { min, max } = value;\r\n  510\t            const interval = Math.abs((max - min) / 10);\r\n  511\t            return round(min - interval);\r\n  512\t          },\r\n  513\t          max: (value) =\u003e {\r\n  514\t            const { min, max } = value;\r\n  515\t            const interval = Math.abs((max - min) / 10);\r\n  516\t            return round(max + interval);\r\n  517\t          },\r\n  518\t        },\r\n  519\t        {\r\n  520\t          show: false,\r\n  521\t          min: (value) =\u003e {\r\n  522\t            const { min, max } = value;\r\n  523\t            const interval = Math.abs((max - min) / 10);\r\n  524\t            return min - interval;\r\n  525\t          },\r\n  526\t          max: (value) =\u003e {\r\n  527\t            const { min, max } = value;\r\n  528\t            const interval = Math.abs((max - min) / 10);\r\n  529\t            return max + interval;\r\n  530\t          },\r\n  531\t        },\r\n  532\t      ],\r\n  533\t      series: [\r\n  534\t        // K线\r\n  535\t        {\r\n  536\t          type: \"candlestick\",\r\n  537\t          name: \"kLine\",\r\n  538\t          data,\r\n  539\t          markPoint: { data: [...tradePointData] },\r\n  540\t          markLine: { data: [...tradeLineData] },\r\n  541\t          itemStyle: {\r\n  542\t            color: \"transparent\",\r\n  543\t            color0: \"#00FFFF\",\r\n  544\t            borderColor: \"#FF0000\",\r\n  545\t            borderColor0: \"#00FFFF\",\r\n  546\t            borderWidth: 1,\r\n  547\t          },\r\n  548\t        },\r\n  549\t        // 净值曲线\r\n  550\t        {\r\n  551\t          type: \"line\",\r\n  552\t          name: \"netPosition\",\r\n  553\t          data: netPositionLineData,\r\n  554\t          symbol: \"none\",\r\n  555\t          yAxisIndex: 1,\r\n  556\t          connectNulls: true,\r\n  557\t          itemStyle: {\r\n  558\t            color: \"#666666\",\r\n  559\t          },\r\n  560\t          lineStyle: {\r\n  561\t            width: 2,\r\n  562\t          },\r\n  563\t        },\r\n  564\t        // 交易收益率曲线\r\n  565\t        {\r\n  566\t          type: \"line\",\r\n  567\t          name: \"tradeIncomeRate\",\r\n  568\t          data: tradeIncomeRateLineData,\r\n  569\t          symbol: \"none\",\r\n  570\t          yAxisIndex: 1,\r\n  571\t          connectNulls: false,\r\n  572\t          itemStyle: {\r\n  573\t            color: \"#666666\",\r\n  574\t          },\r\n  575\t          lineStyle: {\r\n  576\t            width: 2,\r\n  577\t          },\r\n  578\t        },\r\n  579\t        // 指标线\r\n  580\t        ...indicatorSeries,\r\n  581\t      ],\r\n  582\t      toolbox: {\r\n  583\t        show: false,\r\n  584\t      },\r\n  585\t      brush: {\r\n  586\t        xAxisIndex: \"all\",\r\n  587\t        brushLink: \"all\",\r\n  588\t        transformable: false,\r\n  589\t        outOfBrush: {\r\n  590\t          colorAlpha: 2,\r\n  591\t        },\r\n  592\t        brushStyle: {\r\n  593\t          color: \"rgba(255,255,255,0.1)\",\r\n  594\t          borderColor: \"rgba(255,255,255,0.4)\",\r\n  595\t        },\r\n  596\t      },\r\n  597\t    },\r\n  598\t    true,\r\n  599\t  );\r\n  600\t  if (props.userKlineConfig.enable_subChart) {\r\n  601\t    subChartIns.setOption(getSubOptions(klineData.value, startValue, endValue), true);\r\n  602\t  }\r\n  603\t\r\n  604\t  /**\r\n  605\t   * @description: 善后处理\r\n  606\t   */\r\n  607\t  {\r\n  608\t    getScreenTimeRange();\r\n  609\t    drawScreenMaxPrice();\r\n  610\t    activeIndex.value = endValue;\r\n  611\t  }\r\n  612\t\r\n  613\t  /**\r\n  614\t   * @description: 数据框选: brush\r\n  615\t   * 由于brush配置中, 如果有一边的X轴时间不在已载入数据中, 整个都会失效, 所以这里使用的是匹配算法\r\n  616\t   */\r\n  617\t  {\r\n  618\t    const brushAreas = [];\r\n  619\t    // 1. 成交范围 (灰白色)\r\n  620\t    if (props.userKlineConfig.enable_tradeLogBrush \u0026\u0026 tradePointData.length) {\r\n  621\t      const [startTime, endTime] = [tradePointData[0].coord[0], tradePointData.at(-1).coord[0]];\r\n  622\t      const coordRange = normalizeToKlineTimeByMatch(time, [startTime, endTime], props.cycle);\r\n  623\t      brushAreas.push({\r\n  624\t        brushId: \"开平仓范围\",\r\n  625\t        brushType: \"lineX\",\r\n  626\t        xAxisIndex: 0,\r\n  627\t        coordRange,\r\n  628\t      });\r\n  629\t    }\r\n  630\t    // 2. 同步刷选范围 (蓝色)\r\n  631\t    if (props.syncBrushRange.cycleList.includes(props.cycle)) {\r\n  632\t      const { startTime, endTime } = props.syncBrushRange;\r\n  633\t      const coordRange = normalizeToKlineTimeByMatch(time, [startTime, endTime], props.cycle);\r\n  634\t      brushAreas.push({\r\n  635\t        brushId: \"同步刷选范围\",\r\n  636\t        brushType: \"lineX\",\r\n  637\t        xAxisIndex: 0,\r\n  638\t        coordRange,\r\n  639\t        brushStyle: {\r\n  640\t          fill: \"rgba(64, 158, 255, 0.2)\",\r\n  641\t          stroke: \"rgba(64, 158, 255, 0.8)\",\r\n  642\t          lineWidth: 1,\r\n  643\t        },\r\n  644\t      });\r\n  645\t    }\r\n  646\t    // 3. 强制定位高亮 (紫色)\r\n  647\t    if (props.positionTime) {\r\n  648\t      const [startTime, endTime] = [dayjs(props.positionTime).format(\"YYYY-MM-DD 00:00:00\"), dayjs(props.positionTime).format(\"YYYY-MM-DD 23:59:59\")];\r\n  649\t      const coordRange = normalizeToKlineTimeByMatch(time, [startTime, endTime], props.cycle);\r\n  650\t      brushAreas.push({\r\n  651\t        brushId: \"强制定位高亮\",\r\n  652\t        brushType: \"lineX\",\r\n  653\t        xAxisIndex: 0,\r\n  654\t        coordRange,\r\n  655\t        brushStyle: {\r\n  656\t          fill: \"rgba(217, 179, 255, 0.2)\",\r\n  657\t          stroke: \"rgba(217, 179, 255, 0.8)\",\r\n  658\t          lineWidth: 1,\r\n  659\t        },\r\n  660\t      });\r\n  661\t    }\r\n  662\t    mainChartIns.dispatchAction({\r\n  663\t      type: \"brush\",\r\n  664\t      areas: brushAreas,\r\n  665\t    });\r\n  666\t  }\r\n  667\t};\r\n  668\t// 图表: 绘制(当屏最高价)\r\n  669\tconst drawScreenMaxPrice = () =\u003e {\r\n  670\t  if (!props.userKlineConfig.enable_showScreenMaxPrice || !klineData.value.time.length) return;\r\n  671\t\r\n  672\t  const { data } = klineData.value;\r\n  673\t  const originOption = mainChartIns.getOption();\r\n  674\t  const { startValue, endValue } = originOption?.dataZoom[0] ?? {};\r\n  675\t\r\n  676\t  let maxPrice = 0;\r\n  677\t  let maxPriceIndex = startValue;\r\n  678\t\r\n  679\t  for (let i = startValue; i \u003c= endValue; i++) {\r\n  680\t    if (Number(data[i][3]) \u003e= maxPrice) {\r\n  681\t      maxPrice = Number(data[i][3]);\r\n  682\t      maxPriceIndex = i;\r\n  683\t    }\r\n  684\t  }\r\n  685\t\r\n  686\t  const filterSeries = originOption.series?.filter((item) =\u003e item.name !== \"maxPrice\") || [];\r\n  687\t  const dataLength = endValue - startValue;\r\n  688\t  const positionInView = (maxPriceIndex - startValue) / dataLength;\r\n  689\t  let position = \"right\";\r\n  690\t  let formatter = `←${maxPrice}`;\r\n  691\t\r\n  692\t  if (positionInView \u003e 0.7) {\r\n  693\t    position = \"left\";\r\n  694\t    formatter = `${round(maxPrice)}→`;\r\n  695\t  } else {\r\n  696\t    position = \"right\";\r\n  697\t    formatter = `←${round(maxPrice)}`;\r\n  698\t  }\r\n  699\t\r\n  700\t  // 关键：只更新 series，不更新其他配置\r\n  701\t  mainChartIns?.setOption(\r\n  702\t    {\r\n  703\t      series: [\r\n  704\t        ...filterSeries,\r\n  705\t        {\r\n  706\t          type: \"line\",\r\n  707\t          name: \"maxPrice\",\r\n  708\t          data: [],\r\n  709\t          lineStyle: { opacity: 0 },\r\n  710\t          markPoint: {\r\n  711\t            symbol: \"circle\",\r\n  712\t            symbolSize: 1,\r\n  713\t            itemStyle: {\r\n  714\t              color: \"transparent\",\r\n  715\t              borderColor: \"transparent\",\r\n  716\t            },\r\n  717\t            z: 100,\r\n  718\t            zlevel: 10,\r\n  719\t            label: {\r\n  720\t              show: true,\r\n  721\t              position,\r\n  722\t              formatter,\r\n  723\t              color: \"#fff\",\r\n  724\t              fontSize: 12,\r\n  725\t              padding: [4, -4],\r\n  726\t            },\r\n  727\t            data: [\r\n  728\t              {\r\n  729\t                name: \"最高点\",\r\n  730\t                coord: [maxPriceIndex, maxPrice],\r\n  731\t              },\r\n  732\t            ],\r\n  733\t          },\r\n  734\t        },\r\n  735\t      ],\r\n  736\t    },\r\n  737\t    {\r\n  738\t      notMerge: false, // 合并模式\r\n  739\t      replaceMerge: [], // 不替换任何配置\r\n  740\t    },\r\n  741\t  );\r\n  742\t};\r\n  743\t\r\n  744\t// 拖拽轴: 拖拽回调\r\n  745\tconst handleSliderChange = (params) =\u003e {\r\n  746\t  const [startTime, endTime] = checkTimeInterval({\r\n  747\t    startTime: params.startTime,\r\n  748\t    endTime: params.endTime,\r\n  749\t    cycle: props.cycle,\r\n  750\t  });\r\n  751\t  getMainData({ startTime, endTime });\r\n  752\t};\r\n  753\t// 键盘控制 [↑↓←→缩放平移]\r\n  754\tconst handleKeyDownEvent = ({ code, ctrlKey }) =\u003e {\r\n  755\t  if (!mainChartIns) return;\r\n  756\t  if (!(ctrlKey || isHover.value)) return;\r\n  757\t  const { xAxis, dataZoom } = mainChartIns.getOption();\r\n  758\t  const { data: xAxisData } = xAxis?.[0] ?? { data: [] };\r\n  759\t  let { startValue, endValue } = dataZoom?.[0] ?? {};\r\n  760\t  if (!xAxisData?.length) return;\r\n  761\t  // 键位cb\r\n  762\t  switch (code) {\r\n  763\t    // ↑ 放大\r\n  764\t    case \"ArrowUp\": {\r\n  765\t      if (endValue - startValue \u003c 5) return;\r\n  766\t      const diff = Math.floor((endValue - startValue) / 2) + 1;\r\n  767\t      startValue = startValue + diff;\r\n  768\t      if (endValue - startValue \u003c 5) startValue = endValue - 4;\r\n  769\t      break;\r\n  770\t    }\r\n  771\t    // ↓ 缩小\r\n  772\t    case \"ArrowDown\": {\r\n  773\t      const diff = Math.min(500, endValue - startValue);\r\n  774\t      startValue = startValue - diff - 1;\r\n  775\t      break;\r\n  776\t    }\r\n  777\t    // ← 左移\r\n  778\t    case \"ArrowLeft\": {\r\n  779\t      if (startValue \u003e 0) {\r\n  780\t        startValue -= 1;\r\n  781\t        endValue -= 1;\r\n  782\t      }\r\n  783\t      if (activeIndex.value \u003e 0) {\r\n  784\t        activeIndex.value -= 1;\r\n  785\t      }\r\n  786\t      break;\r\n  787\t    }\r\n  788\t    // → 右移\r\n  789\t    case \"ArrowRight\": {\r\n  790\t      if (endValue \u003c xAxisData.length - 1) {\r\n  791\t        startValue += 1;\r\n  792\t        endValue += 1;\r\n  793\t      }\r\n  794\t      if (isHover.value \u0026\u0026 activeIndex.value \u003c xAxisData.length - 1) {\r\n  795\t        activeIndex.value += 1;\r\n  796\t      }\r\n  797\t      break;\r\n  798\t    }\r\n  799\t  }\r\n  800\t  // 1. 更新图表当屏位置\r\n  801\t  mainChartIns.dispatchAction({\r\n  802\t    type: \"dataZoom\",\r\n  803\t    startValue,\r\n  804\t    endValue,\r\n  805\t  });\r\n  806\t  // 2. 更新图表指示器位置\r\n  807\t  mainChartIns.dispatchAction({\r\n  808\t    type: \"updateAxisPointer\",\r\n  809\t    seriesIndex: 0,\r\n  810\t    dataIndex: isHover.value ? activeIndex.value : null,\r\n  811\t  });\r\n  812\t  // 3. 更新图表高亮索引\r\n  813\t  mainChartIns.dispatchAction({\r\n  814\t    type: \"highlight\",\r\n  815\t    dataIndex: isHover.value ? activeIndex.value : endValue,\r\n  816\t  });\r\n  817\t};\r\n  818\t\r\n  819\tonMounted(() =\u003e {\r\n  820\t  const [startTime, endTime] = props.initTimeRange;\r\n  821\t  getMainData({ startTime, endTime });\r\n  822\t});\r\n  823\t// 监控: [品种, 初始时间范围] =\u003e 重加载K线 (缩放初始化)\r\n  824\twatch(\r\n  825\t  () =\u003e [props.varietyCode, props.initTimeRange],\r\n  826\t  () =\u003e {\r\n  827\t    const [startTime, endTime] = props.initTimeRange;\r\n  828\t    getMainData({ startTime, endTime });\r\n  829\t  },\r\n  830\t  { deep: true },\r\n  831\t);\r\n  832\t// 监控: [周期选项] =\u003e 重加载K线 (缩放不变+校验时间间隔)\r\n  833\twatch(\r\n  834\t  () =\u003e [props.cycle],\r\n  835\t  () =\u003e {\r\n  836\t    const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};\r\n  837\t    const [startTime, endTime] = checkTimeInterval({\r\n  838\t      startTime: klineData.value.time[startValue],\r\n  839\t      endTime: klineData.value.time[endValue],\r\n  840\t      cycle: props.cycle,\r\n  841\t      type: \"middle\",\r\n  842\t    });\r\n  843\t    getMainData({ startTime, endTime });\r\n  844\t  },\r\n  845\t  { deep: true },\r\n  846\t);\r\n  847\t// 监控: [主指标, 副指标, 指标配置, 复权选项, 常用选项] =\u003e 重加载K线 (缩放不变)\r\n  848\twatch(\r\n  849\t  () =\u003e [props.mainIndicator, subIndicator.value, props.indicatorStore?.filterIndicator, props.indicatorStore?.customIndicator, props.rightType, props.klineType],\r\n  850\t  () =\u003e {\r\n  851\t    const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};\r\n  852\t    const [startTime, endTime] = [klineData.value.time[startValue], klineData.value.time[endValue]];\r\n  853\t    getMainData({ startTime, endTime });\r\n  854\t  },\r\n  855\t  { deep: true },\r\n  856\t);\r\n  857\t// 监控: [成交点类型, 成交数据, 净值数据, 收益计算类型, 成交收益率数据] =\u003e 重绘K线 (缩放不变)\r\n  858\twatch(\r\n  859\t  () =\u003e [props.sellBuy, props.tradeLog, props.netPositionData, props.incomeType, props.tradeIncomeRateData],\r\n  860\t  () =\u003e {\r\n  861\t    const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};\r\n  862\t    draw({ startValue, endValue });\r\n  863\t  },\r\n  864\t  { deep: true },\r\n  865\t);\r\n  866\tonUnmounted(() =\u003e {\r\n  867\t  // 解绑\r\n  868\t  mainChartIns?.off(\"highlight\");\r\n  869\t  mainChartIns?.off(\"globalout\");\r\n  870\t  mainChartIns?.off(\"datazoom\");\r\n  871\t  mainChartIns?.getZr()?.off(\"contextmenu\");\r\n  872\t  window.removeEventListener(\"keydown\", handleKeyDownEvent);\r\n  873\t  // 销毁\r\n  874\t  mainChartIns?.dispose();\r\n  875\t  subChartIns?.dispose();\r\n  876\t  resizeRo?.dispose();\r\n  877\t  resizeRo = null;\r\n  878\t});\r\n  879\tdefineExpose({\r\n  880\t  screenTimeRange,\r\n  881\t  contextmenuKlineTime,\r\n  882\t  reDraw: () =\u003e {\r\n  883\t    const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};\r\n  884\t    draw({ startValue, endValue });\r\n  885\t  },\r\n  886\t});\r\n  887\t\u003c/script\u003e\r\n  888\t\r\n  889\t\u003ctemplate\u003e\r\n  890\t  \u003cdiv\r\n  891\t    class=\"kline-plus\"\r\n  892\t    v-loading=\"loading\"\r\n  893\t    @mousemove=\"isHover = true\"\r\n  894\t    @mouseout=\"isHover = false\"\r\n  895\t  \u003e\r\n  896\t    \u003c!-- 主图 --\u003e\r\n  897\t    \u003cdiv class=\"main-chart\"\u003e\r\n  898\t      \u003cdiv class=\"indicator\"\u003e\r\n  899\t        \u003cTips :data=\"mainTips\" /\u003e\r\n  900\t        \u003cTips :data=\"mainIndicatorTips\" /\u003e\r\n  901\t      \u003c/div\u003e\r\n  902\t      \u003ctemplate v-if=\"userKlineConfig.enable_showScreenTimeRange\"\u003e\r\n  903\t        \u003cspan class=\"screen-time-range\"\u003e {{ screenTimeRange[0] }} - {{ screenTimeRange[1] }} \u003c/span\u003e\r\n  904\t      \u003c/template\u003e\r\n  905\t      \u003c!-- K线 --\u003e\r\n  906\t      \u003cdiv\r\n  907\t        ref=\"mainChartRef\"\r\n  908\t        class=\"chart\"\r\n  909\t      /\u003e\r\n  910\t    \u003c/div\u003e\r\n  911\t    \u003c!-- 副图 --\u003e\r\n  912\t    \u003ctemplate v-if=\"userKlineConfig.enable_subChart\"\u003e\r\n  913\t      \u003cdiv class=\"sub-chart\"\u003e\r\n  914\t        \u003cdiv class=\"indicator\"\u003e\r\n  915\t          \u003cdiv class=\"title\"\u003e\r\n  916\t            \u003cspan\u003e{{ subIndicator }}\u003c/span\u003e\r\n  917\t            \u003cel-select\r\n  918\t              v-model=\"subIndicator\"\r\n  919\t              style=\"width: 100px; margin-right: 4px; height: 25px\"\r\n  920\t              size=\"small\"\r\n  921\t              class=\"element-dark\"\r\n  922\t              popper-class=\"element-dark\"\r\n  923\t            \u003e\r\n  924\t              \u003cel-option\r\n  925\t                v-for=\"(item, index) in indicatorStore.subIndicatorList\"\r\n  926\t                :key=\"index\"\r\n  927\t                :label=\"item.label\"\r\n  928\t                :value=\"item.value\"\r\n  929\t              /\u003e\r\n  930\t            \u003c/el-select\u003e\r\n  931\t          \u003c/div\u003e\r\n  932\t          \u003cTips :data=\"subIndicatorTips\" /\u003e\r\n  933\t        \u003c/div\u003e\r\n  934\t        \u003cdiv\r\n  935\t          ref=\"subChartRef\"\r\n  936\t          class=\"chart\"\r\n  937\t        /\u003e\r\n  938\t      \u003c/div\u003e\r\n  939\t    \u003c/template\u003e\r\n  940\t    \u003c!-- 拖拽轴 --\u003e\r\n  941\t    \u003ctemplate v-if=\"userKlineConfig.enable_sliderChart\"\u003e\r\n  942\t      \u003cdiv class=\"slider-chart\"\u003e\r\n  943\t        \u003cSliderChart\r\n  944\t          ref=\"sliderChartRef\"\r\n  945\t          :screenTimeRange=\"screenTimeRange\"\r\n  946\t          :varietyCode=\"varietyCode\"\r\n  947\t          :varietyStock=\"varietyStock\"\r\n  948\t          :rightType=\"rightType\"\r\n  949\t          :klineType=\"klineType\"\r\n  950\t          :deleteFirstNumber=\"props.deleteFirstNumber\"\r\n  951\t          :withoutPermission=\"props.withoutPermission\"\r\n  952\t          @change=\"handleSliderChange\"\r\n  953\t        /\u003e\r\n  954\t      \u003c/div\u003e\r\n  955\t    \u003c/template\u003e\r\n  956\t    \u003c!-- 空数据 --\u003e\r\n  957\t    \u003cel-empty\r\n  958\t      v-if=\"!klineData.time.length\"\r\n  959\t      class=\"empty\"\r\n  960\t      description=\"暂无数据\"\r\n  961\t    /\u003e\r\n  962\t  \u003c/div\u003e\r\n  963\t\u003c/template\u003e\r\n  964\t\r\n  965\t\u003cstyle lang=\"scss\" scoped\u003e\r\n  966\t.kline-plus {\r\n  967\t  width: 100%;\r\n  968\t  height: 100%;\r\n  969\t  position: relative;\r\n  970\t  color-scheme: dark;\r\n  971\t  display: flex;\r\n  972\t  flex-direction: column;\r\n  973\t  // 主图\r\n  974\t  .main-chart {\r\n  975\t    width: 100%;\r\n  976\t    height: calc((100% - 40px) * 0.8);\r\n  977\t    background-color: black;\r\n  978\t    flex: 1;\r\n  979\t    .indicator {\r\n  980\t      height: 55px;\r\n  981\t      box-sizing: border-box;\r\n  982\t      padding-left: 10px;\r\n  983\t      padding-top: 4px;\r\n  984\t    }\r\n  985\t    .screen-time-range {\r\n  986\t      color: white;\r\n  987\t      font-size: 12px;\r\n  988\t      line-height: 12px;\r\n  989\t      position: absolute;\r\n  990\t      right: 10px;\r\n  991\t      top: 40px;\r\n  992\t    }\r\n  993\t    .chart {\r\n  994\t      width: 100%;\r\n  995\t      height: calc(100% - 55px);\r\n  996\t      box-sizing: border-box;\r\n  997\t    }\r\n  998\t  }\r\n  999\t  // 副图\r\n 1000\t  .sub-chart {\r\n 1001\t    width: 100%;\r\n 1002\t    height: calc((100% - 40px) * 0.2);\r\n 1003\t    .indicator {\r\n 1004\t      padding-left: 10px;\r\n 1005\t      display: flex;\r\n 1006\t      align-items: center;\r\n 1007\t      .title {\r\n 1008\t        display: flex;\r\n 1009\t        align-items: center;\r\n 1010\t        span {\r\n 1011\t          font-size: 12px;\r\n 1012\t          line-height: 24px;\r\n 1013\t          color: white;\r\n 1014\t        }\r\n 1015\t        :deep(.el-select) {\r\n 1016\t          width: 16px !important;\r\n 1017\t          height: 16px !important;\r\n 1018\t          margin-left: 4px;\r\n 1019\t          .el-select__icon {\r\n 1020\t            margin-left: 0;\r\n 1021\t            color: black;\r\n 1022\t            width: 16px;\r\n 1023\t            height: 16px;\r\n 1024\t          }\r\n 1025\t          .el-select__wrapper {\r\n 1026\t            border-radius: 50%;\r\n 1027\t            background: #ccc;\r\n 1028\t            padding: 0;\r\n 1029\t            gap: 0;\r\n 1030\t            min-height: 12px;\r\n 1031\t            line-height: 12px;\r\n 1032\t          }\r\n 1033\t        }\r\n 1034\t      }\r\n 1035\t    }\r\n 1036\t    .chart {\r\n 1037\t      width: 100%;\r\n 1038\t      height: calc(100% - 24px);\r\n 1039\t    }\r\n 1040\t  }\r\n 1041\t  // 拖拽轴\r\n 1042\t  .slider-chart {\r\n 1043\t    width: 100%;\r\n 1044\t    height: 40px;\r\n 1045\t  }\r\n 1046\t  // 空数据\r\n 1047\t  .empty {\r\n 1048\t    position: absolute;\r\n 1049\t    top: 0;\r\n 1050\t    left: 0;\r\n 1051\t    width: 100%;\r\n 1052\t    height: 100%;\r\n 1053\t    padding: 0;\r\n 1054\t    background-color: rgb(0, 0, 0);\r\n 1055\t    --el-empty-fill-color-0: var(--el-color-black);\r\n 1056\t    --el-empty-fill-color-1: #4b4b52;\r\n 1057\t    --el-empty-fill-color-2: #36383d;\r\n 1058\t    --el-empty-fill-color-3: #1e1e20;\r\n 1059\t    --el-empty-fill-color-4: #262629;\r\n 1060\t    --el-empty-fill-color-5: #202124;\r\n 1061\t    --el-empty-fill-color-6: #212224;\r\n 1062\t    --el-empty-fill-color-7: #1b1c1f;\r\n 1063\t    --el-empty-fill-color-8: #1c1d1f;\r\n 1064\t    --el-empty-fill-color-9: #18181a;\r\n 1065\t  }\r\n 1066\t}\r\n 1067\t\u003c/style\u003e\r\n 1068\t\n","preview":"1\t\u003c!-- 单品种单周期K线业务组件 --\u003e\n2\t\u003cscript setup\u003e\n3\timport dayjs from \"dayjs\";","bytes":41966,"is_error":false,"stored_at":"2026-07-27T04:44:32.0806656Z"}

package/.argus/coldstore/76b2ec805ca5837c.jsonl

@@ -0,0 +1 @@
+{"id":"t1.tool3","tool_name":"read_file","full_text":"[read_file path=packages/KlineConfig/index.vue lines=1-357/357 bytes=10691]\n    1\t\u003c!-- 用户K线自定义配置 --\u003e\r\n    2\t\u003cscript setup\u003e\r\n    3\timport { ref, reactive, onMounted, inject, watch } from \"vue\";\r\n    4\timport { getDefaultUserKlineConfig, sellBuyOptions, formatLabel } from \"./config\";\r\n    5\t\r\n    6\tconst { request } = inject(\"stConfig\"); // 组件库全局配置\r\n    7\t\r\n    8\tconst emit = defineEmits(\"callBack\");\r\n    9\tconst props = defineProps({\r\n   10\t  indicatorStore: { type: Object, default: () =\u003e ({}) }, // 指标配置Store\r\n   11\t  origin: { type: String, default: \"server\" }, // 数据来源: server服务器, local本地\r\n   12\t  // 如果server此项不用管, 如果local则使用此项\r\n   13\t  cycleOptions: { type: Array, default: () =\u003e [] },\r\n   14\t});\r\n   15\t\r\n   16\tconst visible = ref(false);\r\n   17\tconst form = reactive({});\r\n   18\t\r\n   19\tconst cycleOptions = ref([]);\r\n   20\tconst mainIndicatorOptions = ref([]);\r\n   21\t\r\n   22\t// 配置: 恢复默认\r\n   23\tconst handleReset = () =\u003e {\r\n   24\t  Object.assign(form, getDefaultUserKlineConfig());\r\n   25\t};\r\n   26\t// 配置: 保存配置\r\n   27\tconst handleSubmit = async () =\u003e {\r\n   28\t  const json = JSON.stringify(form);\r\n   29\t  if (props.origin === \"server\") {\r\n   30\t    await request.post(\"/common/qt/updateUserConfig\", { appId: 1, json });\r\n   31\t  } else {\r\n   32\t    localStorage.setItem(\"userKlineConfig\", json);\r\n   33\t  }\r\n   34\t  emit(\"callBack\", json);\r\n   35\t  visible.value = false;\r\n   36\t};\r\n   37\t// 获取配置数据\r\n   38\tconst getKlineConfig = async () =\u003e {\r\n   39\t  if (props.origin === \"server\") {\r\n   40\t    const { body } = await request.post(\"/common/qt/getUserConfig\", { appId: 1 });\r\n   41\t    Object.assign(form, getDefaultUserKlineConfig(), body ? JSON.parse(body) : {});\r\n   42\t  } else {\r\n   43\t    const body = localStorage.getItem(\"userKlineConfig\");\r\n   44\t    Object.assign(form, getDefaultUserKlineConfig(), body ? JSON.parse(body) : {});\r\n   45\t  }\r\n   46\t};\r\n   47\t// 获取周期选项\r\n   48\tconst getCycleOptions = async () =\u003e {\r\n   49\t  if (props.origin === \"server\") {\r\n   50\t    const { body } = await request.post(\"/common/qt/getDict\", { dictIds: [1002] });\r\n   51\t    cycleOptions.value = body[1002].map((item) =\u003e {\r\n   52\t      return {\r\n   53\t        label: item.dictName,\r\n   54\t        value: item.dictCode,\r\n   55\t      };\r\n   56\t    });\r\n   57\t  } else {\r\n   58\t    cycleOptions.value = props.cycleOptions;\r\n   59\t  }\r\n   60\t};\r\n   61\t\r\n   62\tonMounted(() =\u003e {\r\n   63\t  getCycleOptions();\r\n   64\t  mainIndicatorOptions.value = props.indicatorStore.mainIndicatorList ?? [];\r\n   65\t});\r\n   66\twatch(\r\n   67\t  () =\u003e props.indicatorStore.mainIndicatorList,\r\n   68\t  () =\u003e {\r\n   69\t    mainIndicatorOptions.value = props.indicatorStore.mainIndicatorList ?? [];\r\n   70\t  },\r\n   71\t);\r\n   72\tdefineExpose({\r\n   73\t  // 打开\r\n   74\t  open: async () =\u003e {\r\n   75\t    await getKlineConfig();\r\n   76\t    visible.value = true;\r\n   77\t  },\r\n   78\t  // 获取默认配置\r\n   79\t  getDefaultUserKlineConfig,\r\n   80\t});\r\n   81\t\u003c/script\u003e\r\n   82\t\r\n   83\t\u003ctemplate\u003e\r\n   84\t  \u003cdiv class=\"kline-config element-dark\"\u003e\r\n   85\t    \u003c!-- 自定义配置 --\u003e\r\n   86\t    \u003cel-drawer\r\n   87\t      v-model=\"visible\"\r\n   88\t      title=\"K线自定义配置\"\r\n   89\t      :size=\"320\"\r\n   90\t    \u003e\r\n   91\t      \u003cel-scrollbar class=\"setting-main\"\u003e\r\n   92\t        \u003c!-- 偏好设置 --\u003e\r\n   93\t        \u003cel-divider style=\"margin-top: 8px\"\u003e偏好设置\u003c/el-divider\u003e\r\n   94\t        \u003cdiv class=\"setting-item\"\u003e\r\n   95\t          \u003cspan class=\"label\"\u003e主图指标: \u003c/span\u003e\r\n   96\t          \u003cel-select\r\n   97\t            v-model=\"form.mainIndicator\"\r\n   98\t            popper-class=\"element-dark\"\r\n   99\t          \u003e\r\n  100\t            \u003cel-option\r\n  101\t              v-for=\"(item, index) in mainIndicatorOptions\"\r\n  102\t              :key=\"index\"\r\n  103\t              :label=\"item.label\"\r\n  104\t              :value=\"item.value\"\r\n  105\t            /\u003e\r\n  106\t          \u003c/el-select\u003e\r\n  107\t        \u003c/div\u003e\r\n  108\t        \u003cdiv class=\"setting-item\"\u003e\r\n  109\t          \u003cspan class=\"label\"\u003e交易点位: \u003c/span\u003e\r\n  110\t          \u003cel-select\r\n  111\t            v-model=\"form.sellBuy\"\r\n  112\t            popper-class=\"element-dark\"\r\n  113\t          \u003e\r\n  114\t            \u003cel-option\r\n  115\t              v-for=\"(item, index) in sellBuyOptions\"\r\n  116\t              :key=\"index\"\r\n  117\t              :label=\"item.label\"\r\n  118\t              :value=\"item.value\"\r\n  119\t            /\u003e\r\n  120\t          \u003c/el-select\u003e\r\n  121\t        \u003c/div\u003e\r\n  122\t        \u003cdiv class=\"setting-item\"\u003e\r\n  123\t          \u003cspan class=\"label\"\u003e开平点按价格标: \u003c/span\u003e\r\n  124\t          \u003cel-checkbox\r\n  125\t            v-model=\"form.sellBuyByPrice\"\r\n  126\t            :true-value=\"1\"\r\n  127\t            :false-value=\"0\"\r\n  128\t          /\u003e\r\n  129\t        \u003c/div\u003e\r\n  130\t        \u003cdiv class=\"setting-item\"\u003e\r\n  131\t          \u003cspan class=\"label\"\u003e单周期: \u003c/span\u003e\r\n  132\t          \u003cel-select\r\n  133\t            v-model=\"form.singelCycle\"\r\n  134\t            popper-class=\"element-dark\"\r\n  135\t          \u003e\r\n  136\t            \u003cel-option\r\n  137\t              v-for=\"(item, index) in cycleOptions\"\r\n  138\t              :key=\"index\"\r\n  139\t              :label=\"item.label\"\r\n  140\t              :value=\"item.value\"\r\n  141\t            /\u003e\r\n  142\t          \u003c/el-select\u003e\r\n  143\t        \u003c/div\u003e\r\n  144\t        \u003cdiv class=\"setting-item\"\u003e\r\n  145\t          \u003cspan class=\"label\"\u003e多周期: \u003c/span\u003e\r\n  146\t          \u003cel-segmented\r\n  147\t            size=\"small\"\r\n  148\t            v-model=\"form.multiCycleNum\"\r\n  149\t            :options=\"[\r\n  150\t              { label: '二图', value: 2 },\r\n  151\t              { label: '四图', value: 4 },\r\n  152\t              { label: '六图', value: 6 },\r\n  153\t            ]\"\r\n  154\t            style=\"height: 26px\"\r\n  155\t          /\u003e\r\n  156\t        \u003c/div\u003e\r\n  157\t        \u003cdiv :class=\"`setting-multi-box grid-${form.multiCycleNum}`\"\u003e\r\n  158\t          \u003ctemplate v-for=\"(item, index) in form.multiCycleList.slice(0, form.multiCycleNum)\"\u003e\r\n  159\t            \u003cdiv class=\"mode\"\u003e\r\n  160\t              \u003cdiv class=\"cycleName\"\u003e\r\n  161\t                \u003cspan\u003e{{ formatLabel(form.multiCycleList[index], cycleOptions) }}\u003c/span\u003e\r\n  162\t                \u003cel-select\r\n  163\t                  v-model=\"form.multiCycleList[index]\"\r\n  164\t                  popper-class=\"element-dark\"\r\n  165\t                \u003e\r\n  166\t                  \u003cel-option\r\n  167\t                    v-for=\"(item, index) in cycleOptions\"\r\n  168\t                    :key=\"index\"\r\n  169\t                    :label=\"item.label\"\r\n  170\t                    :value=\"item.value\"\r\n  171\t                  /\u003e\r\n  172\t                \u003c/el-select\u003e\r\n  173\t              \u003c/div\u003e\r\n  174\t              \u003cspan class=\"content\"\u003e{{ index + 1 }}号位K线\u003c/span\u003e\r\n  175\t            \u003c/div\u003e\r\n  176\t          \u003c/template\u003e\r\n  177\t        \u003c/div\u003e\r\n  178\t        \u003cdiv class=\"setting-item\"\u003e\r\n  179\t          \u003cspan class=\"label\"\u003e默认展示: \u003c/span\u003e\r\n  180\t          \u003cel-segmented\r\n  181\t            size=\"small\"\r\n  182\t            v-model=\"form.pageType\"\r\n  183\t            :options=\"[\r\n  184\t              { label: '单周期', value: 1 },\r\n  185\t              { label: '多周期', value: 2 },\r\n  186\t            ]\"\r\n  187\t            style=\"height: 26px\"\r\n  188\t          /\u003e\r\n  189\t        \u003c/div\u003e\r\n  190\t        \u003c!-- 功能配置 --\u003e\r\n  191\t        \u003cel-divider style=\"margin-top: 44px\"\u003e功能配置\u003c/el-divider\u003e\r\n  192\t        \u003cdiv class=\"setting-item\"\u003e\r\n  193\t          \u003cspan class=\"label\"\u003e高亮交易范围: \u003c/span\u003e\r\n  194\t          \u003cel-switch v-model=\"form.enable_tradeLogBrush\" /\u003e\r\n  195\t        \u003c/div\u003e\r\n  196\t        \u003cdiv class=\"setting-item\"\u003e\r\n  197\t          \u003cspan class=\"label\"\u003e展示当屏时间: \u003c/span\u003e\r\n  198\t          \u003cel-switch v-model=\"form.enable_showScreenTimeRange\" /\u003e\r\n  199\t        \u003c/div\u003e\r\n  200\t        \u003cdiv class=\"setting-item\"\u003e\r\n  201\t          \u003cspan class=\"label\"\u003e展示当屏最高价: \u003c/span\u003e\r\n  202\t          \u003cel-switch v-model=\"form.enable_showScreenMaxPrice\" /\u003e\r\n  203\t        \u003c/div\u003e\r\n  204\t        \u003cdiv class=\"setting-item\"\u003e\r\n  205\t          \u003cspan class=\"label\"\u003e多周期双击图表切换至单周期: \u003c/span\u003e\r\n  206\t          \u003cel-switch v-model=\"form.enable_dbClickOpenSingel\" /\u003e\r\n  207\t        \u003c/div\u003e\r\n  208\t        \u003c!-- 组件开关 --\u003e\r\n  209\t        \u003cel-divider style=\"margin-top: 44px\"\u003e组件开关\u003c/el-divider\u003e\r\n  210\t        \u003cdiv class=\"setting-item\"\u003e\r\n  211\t          \u003cspan class=\"label\"\u003e开启副图: \u003c/span\u003e\r\n  212\t          \u003cel-switch v-model=\"form.enable_subChart\" /\u003e\r\n  213\t        \u003c/div\u003e\r\n  214\t        \u003cdiv class=\"setting-item\"\u003e\r\n  215\t          \u003cspan class=\"label\"\u003e开启拖拽轴: \u003c/span\u003e\r\n  216\t          \u003cel-switch v-model=\"form.enable_sliderChart\" /\u003e\r\n  217\t        \u003c/div\u003e\r\n  218\t      \u003c/el-scrollbar\u003e\r\n  219\t      \u003cdiv class=\"setting-footer\"\u003e\r\n  220\t        \u003c!-- 恢复默认 --\u003e\r\n  221\t        \u003cel-button @click=\"handleReset\"\u003e 恢复默认 \u003c/el-button\u003e\r\n  222\t        \u003cel-button\r\n  223\t          type=\"primary\"\r\n  224\t          @click=\"handleSubmit\"\r\n  225\t        \u003e\r\n  226\t          保存配置\r\n  227\t        \u003c/el-button\u003e\r\n  228\t      \u003c/div\u003e\r\n  229\t    \u003c/el-drawer\u003e\r\n  230\t  \u003c/div\u003e\r\n  231\t\u003c/template\u003e\r\n  232\t\r\n  233\t\u003cstyle lang=\"scss\" scoped\u003e\r\n  234\t.kline-config {\r\n  235\t  cursor: default;\r\n  236\t  height: 20px;\r\n  237\t  :deep(.el-drawer__header) {\r\n  238\t    margin-bottom: 0;\r\n  239\t    background-color: #141414;\r\n  240\t  }\r\n  241\t  :deep(.el-drawer__body) {\r\n  242\t    background-color: #141414;\r\n  243\t  }\r\n  244\t  // 配置入口\r\n  245\t  .setting-icon {\r\n  246\t    cursor: pointer;\r\n  247\t    \u0026:hover {\r\n  248\t      color: var(--el-color-primary);\r\n  249\t    }\r\n  250\t  }\r\n  251\t  // 配置内容\r\n  252\t  .setting-main {\r\n  253\t    font-size: 14px;\r\n  254\t    color: var(--el-text-color-primary);\r\n  255\t    height: calc(100% - 80px);\r\n  256\t    box-sizing: border-box;\r\n  257\t    padding-right: 10px;\r\n  258\t    // 单行控制项\r\n  259\t    .setting-item {\r\n  260\t      width: 100%;\r\n  261\t      display: flex;\r\n  262\t      align-items: center;\r\n  263\t      justify-content: space-between;\r\n  264\t      margin-bottom: 8px;\r\n  265\t      .label {\r\n  266\t        display: flex;\r\n  267\t        align-items: center;\r\n  268\t        gap: 4px;\r\n  269\t      }\r\n  270\t      .el-select {\r\n  271\t        width: 130px;\r\n  272\t      }\r\n  273\t    }\r\n  274\t    // 多周期布局\r\n  275\t    .setting-multi-box {\r\n  276\t      margin-top: 13px;\r\n  277\t      margin-bottom: 18px;\r\n  278\t      .cycleName {\r\n  279\t        color: white;\r\n  280\t        font-size: 10px;\r\n  281\t        padding: 1px 2px;\r\n  282\t        padding-left: 4px;\r\n  283\t        background-color: var(--el-color-primary);\r\n  284\t        display: flex;\r\n  285\t        align-items: center;\r\n  286\t        border-bottom-left-radius: 4px;\r\n  287\t        position: absolute;\r\n  288\t        z-index: 999;\r\n  289\t        right: 0px;\r\n  290\t        top: 0px;\r\n  291\t        :deep(.el-select) {\r\n  292\t          margin-left: 4px;\r\n  293\t          width: 12px;\r\n  294\t          .el-select__icon {\r\n  295\t            margin-left: 0;\r\n  296\t            color: black;\r\n  297\t            width: 12px;\r\n  298\t            height: 12px;\r\n  299\t          }\r\n  300\t          .el-select__wrapper {\r\n  301\t            border-radius: 50%;\r\n  302\t            background: #ccc;\r\n  303\t            padding: 0;\r\n  304\t            gap: 0;\r\n  305\t            min-height: 12px;\r\n  306\t            line-height: 12px;\r\n  307\t            box-shadow: none;\r\n  308\t          }\r\n  309\t          .el-select__input {\r\n  310\t            min-width: 0 !important;\r\n  311\t            width: 0 !important;\r\n  312\t          }\r\n  313\t        }\r\n  314\t      }\r\n  315\t      .mode {\r\n  316\t        width: 100%;\r\n  317\t        height: 100%;\r\n  318\t        box-sizing: border-box;\r\n  319\t        border: 1px solid var(--el-border-color);\r\n  320\t        position: relative;\r\n  321\t        display: flex;\r\n  322\t        align-items: center;\r\n  323\t        justify-content: center;\r\n  324\t      }\r\n  325\t    }\r\n  326\t    .grid-2 {\r\n  327\t      display: grid;\r\n  328\t      grid-template-columns: repeat(2, 1fr);\r\n  329\t      grid-template-rows: repeat(1, minmax(80px, 1fr));\r\n  330\t      grid-gap: 2px;\r\n  331\t    }\r\n  332\t    .grid-4 {\r\n  333\t      display: grid;\r\n  334\t      grid-template-columns: repeat(2, 1fr);\r\n  335\t      grid-template-rows: repeat(2, minmax(80px, 1fr));\r\n  336\t      grid-gap: 2px;\r\n  337\t    }\r\n  338\t    .grid-6 {\r\n  339\t      display: grid;\r\n  340\t      grid-template-columns: repeat(3, 1fr);\r\n  341\t      grid-template-rows: repeat(2, minmax(80px, 1fr));\r\n  342\t      grid-gap: 2px;\r\n  343\t    }\r\n  344\t  }\r\n  345\t  // 底部按钮\r\n  346\t  .setting-footer {\r\n  347\t    height: 80px;\r\n  348\t    display: flex;\r\n  349\t    flex-direction: column;\r\n  350\t    justify-content: space-between;\r\n  351\t    .el-button {\r\n  352\t      margin-left: 0;\r\n  353\t    }\r\n  354\t  }\r\n  355\t}\r\n  356\t\u003c/style\u003e\r\n  357\t\n","preview":"1\t\u003c!-- 用户K线自定义配置 --\u003e\n2\t\u003cscript setup\u003e\n3\timport { ref, reactive, onMounted, inject, watch } from \"vue\";","bytes":12910,"is_error":false,"stored_at":"2026-07-27T07:04:10.8228472Z"}

package/.argus/coldstore/859e7008fa48fc1b.jsonl

@@ -0,0 +1 @@
+{"id":"t1.tool2","tool_name":"read_file","full_text":"[read_file path=packages/VarSelectDialog/index.vue lines=1-324/324 bytes=9466]\n    1\t\u003cscript setup\u003e\r\n    2\timport { computed, onMounted, ref, inject } from \"vue\";\r\n    3\timport { Close, InfoFilled } from \"@element-plus/icons-vue\";\r\n    4\timport VarietySelect from \"./VarietySelect.vue\";\r\n    5\t\r\n    6\tconst stConfig = inject(\"stConfig\");\r\n    7\tconst props = defineProps({\r\n    8\t  useCase: {\r\n    9\t    type: String,\r\n   10\t    default: \"1\", // 1-选股, 2-回测\r\n   11\t  },\r\n   12\t});\r\n   13\t\r\n   14\tconst editorRef = ref(null); // 编辑器Ref\r\n   15\tconst visible = ref(false);\r\n   16\t\r\n   17\tconst varName = ref(null);\r\n   18\tconst varList = ref([]);\r\n   19\tconst formatList = computed(() =\u003e {\r\n   20\t  return varList.value.find((item) =\u003e item.varName === varName.value)?.formatList ?? [];\r\n   21\t});\r\n   22\t\r\n   23\t// 格式化配置项的下拉框数据源\r\n   24\tconst handleOptionsStrToArray = (str) =\u003e {\r\n   25\t  const trimmedStr = str.replace(/^\\[|\\]$/g, \"\");\r\n   26\t  // 分割字符串为多个数组项\r\n   27\t  const items = trimmedStr.split(\"],[\");\r\n   28\t\r\n   29\t  return items.map((item) =\u003e {\r\n   30\t    // 移除每个项两端的方括号（如果有）\r\n   31\t    const cleanItem = item.replace(/\\[|\\]/g, \"\");\r\n   32\t    // 分割标签和值\r\n   33\t    const [label, value] = cleanItem.split(\",\");\r\n   34\t\r\n   35\t    return {\r\n   36\t      label: label.trim(),\r\n   37\t      value: value.trim(),\r\n   38\t    };\r\n   39\t  });\r\n   40\t};\r\n   41\t\r\n   42\t// 插入变量值\r\n   43\tconst handleInsetVarContent = (configList) =\u003e {\r\n   44\t  // 1.校验是否填写完整 + 生成输出值\r\n   45\t  const result = [];\r\n   46\t  for (let index = 0; index \u003c configList.length; index++) {\r\n   47\t    const item = configList[index];\r\n   48\t    console.log(item);\r\n   49\t    switch (item.vtype) {\r\n   50\t      case \"text\": {\r\n   51\t        result.push(item.param);\r\n   52\t        break;\r\n   53\t      }\r\n   54\t      default: {\r\n   55\t        if (!item.modelValue) return ElMessage.error(\"请检查插入格式内是否填写完整\");\r\n   56\t        let formatValue = item.modelValue;\r\n   57\t        if (item.prefix) formatValue = `${item.prefix}${formatValue}`;\r\n   58\t        if (item.suffix) formatValue = `${formatValue}${item.suffix}`;\r\n   59\t        result.push(formatValue);\r\n   60\t        break;\r\n   61\t      }\r\n   62\t    }\r\n   63\t  }\r\n   64\t  // 2.插入内容\r\n   65\t  if (!editorRef.value) return ElMessage.error(\"未检测到编辑器实例\");\r\n   66\t  const content = result.join(\"_\");\r\n   67\t\r\n   68\t  const editorIns = editorRef.value.getInstance();\r\n   69\t  const position = editorIns.getPosition();\r\n   70\t\r\n   71\t  const currentValue = editorRef.value.getValue();\r\n   72\t  const lines = currentValue.split(\"\\n\");\r\n   73\t\r\n   74\t  // 如果光标位置有效\r\n   75\t  if (position.lineNumber \u003c= lines.length) {\r\n   76\t    const lineIndex = position.lineNumber - 1;\r\n   77\t    const line = lines[lineIndex];\r\n   78\t    const columnIndex = position.column - 1;\r\n   79\t\r\n   80\t    // 获取光标前后的字符\r\n   81\t    const prevChar = columnIndex \u003e 0 ? line[columnIndex - 1] : \"\";\r\n   82\t    const nextChar = columnIndex \u003c line.length ? line[columnIndex] : \"\";\r\n   83\t\r\n   84\t    // 检测是否需要添加空格\r\n   85\t    let contentToInsert = content;\r\n   86\t\r\n   87\t    // 如果前面有内容且不是空格或行首，在前面添加空格\r\n   88\t    if (prevChar \u0026\u0026 prevChar !== \" \" \u0026\u0026 !/[\\s({[ ]/.test(prevChar)) {\r\n   89\t      contentToInsert = \" \" + contentToInsert;\r\n   90\t    }\r\n   91\t\r\n   92\t    // 如果后面有内容且不是空格或行尾，在后面添加空格\r\n   93\t    if (nextChar \u0026\u0026 nextChar !== \" \" \u0026\u0026 !/[\\s)}\\]]/.test(nextChar)) {\r\n   94\t      contentToInsert = contentToInsert + \" \";\r\n   95\t    }\r\n   96\t\r\n   97\t    // 在光标位置插入内容\r\n   98\t    const newLine = line.substring(0, columnIndex) + contentToInsert + line.substring(columnIndex);\r\n   99\t    lines[lineIndex] = newLine;\r\n  100\t\r\n  101\t    // 更新编辑器内容\r\n  102\t    const newValue = lines.join(\"\\n\");\r\n  103\t    editorRef.value.setValue(newValue);\r\n  104\t\r\n  105\t    // 将光标移动到插入内容之后\r\n  106\t    const newColumn = position.column + contentToInsert.length;\r\n  107\t    editorIns.setPosition({\r\n  108\t      lineNumber: position.lineNumber,\r\n  109\t      column: newColumn,\r\n  110\t    });\r\n  111\t    editorIns.focus();\r\n  112\t  }\r\n  113\t};\r\n  114\t\r\n  115\tonMounted(async () =\u003e {\r\n  116\t  const { body } = await stConfig.request.post(\"/common/conf/queryAllBackVariables\", { useCase: props.useCase });\r\n  117\t  varList.value = body ?? [];\r\n  118\t});\r\n  119\tdefineExpose({\r\n  120\t  /**\r\n  121\t   * @description: 打开变量选择器窗口\r\n  122\t   * @editor 脚本编辑器实例\r\n  123\t   * @newZindex Number 窗口定位层级\r\n  124\t   */\r\n  125\t  open: (editor) =\u003e {\r\n  126\t    editorRef.value = editor;\r\n  127\t    visible.value = true;\r\n  128\t  },\r\n  129\t  close: () =\u003e {\r\n  130\t    visible.value = false;\r\n  131\t  },\r\n  132\t});\r\n  133\t\u003c/script\u003e\r\n  134\t\r\n  135\t\u003ctemplate\u003e\r\n  136\t  \u003cel-dialog\r\n  137\t    modal-class=\"var-select-dialog\"\r\n  138\t    v-model=\"visible\"\r\n  139\t    align-center\r\n  140\t    append-to-body\r\n  141\t    destroy-on-close\r\n  142\t    draggable\r\n  143\t    overflow\r\n  144\t    :modal=\"false\"\r\n  145\t    :modal-penetrable=\"true\"\r\n  146\t    :show-close=\"false\"\r\n  147\t  \u003e\r\n  148\t    \u003ctemplate #header\u003e\r\n  149\t      \u003cdiv class=\"custom-header\"\u003e\r\n  150\t        \u003cdiv class=\"left\"\u003e\r\n  151\t          \u003cspan\u003e 选择变量 \u003c/span\u003e\r\n  152\t          \u003cel-select\r\n  153\t            v-model=\"varName\"\r\n  154\t            placeholder=\"选择变量\"\r\n  155\t            filterable\r\n  156\t            clearable\r\n  157\t          \u003e\r\n  158\t            \u003cel-option\r\n  159\t              v-for=\"(item, index) in varList\"\r\n  160\t              :key=\"index\"\r\n  161\t              :label=\"item.varName\"\r\n  162\t              :value=\"item.varName\"\r\n  163\t            /\u003e\r\n  164\t          \u003c/el-select\u003e\r\n  165\t        \u003c/div\u003e\r\n  166\t        \u003cdiv class=\"right\"\u003e\r\n  167\t          \u003cel-icon\r\n  168\t            class=\"el-icon--left\"\r\n  169\t            @click=\"visible = false\"\r\n  170\t          \u003e\r\n  171\t            \u003cClose /\u003e\r\n  172\t          \u003c/el-icon\u003e\r\n  173\t        \u003c/div\u003e\r\n  174\t      \u003c/div\u003e\r\n  175\t    \u003c/template\u003e\r\n  176\t    \u003cdiv class=\"custom-body\"\u003e\r\n  177\t      \u003ctemplate v-if=\"formatList.length\"\u003e\r\n  178\t        \u003cdiv\r\n  179\t          class=\"format-item\"\r\n  180\t          v-for=\"(formatItem, formatIndex) in formatList\"\r\n  181\t          :key=\"formatIndex\"\r\n  182\t        \u003e\r\n  183\t          \u003cspan\u003e格式{{ formatIndex + 1 }}:\u003c/span\u003e\r\n  184\t\r\n  185\t          \u003c!-- 配置项 --\u003e\r\n  186\t          \u003cdiv class=\"config-list\"\u003e\r\n  187\t            \u003ctemplate v-for=\"(config, configIndex) in formatItem.configList\"\u003e\r\n  188\t              \u003cdiv class=\"config-item\"\u003e\r\n  189\t                \u003c!-- 类型: 固定值 --\u003e\r\n  190\t                \u003ctemplate v-if=\"config.vtype === 'text'\"\u003e\r\n  191\t                  \u003cspan\u003e{{ config.param }}\u003c/span\u003e\r\n  192\t                \u003c/template\u003e\r\n  193\t                \u003ctemplate v-if=\"config.vtype === 'inputVariety'\"\u003e\r\n  194\t                  \u003cVarietySelect\r\n  195\t                    size=\"small\"\r\n  196\t                    :placeholder=\"config.param\"\r\n  197\t                    :selectClearEnable=\"false\"\r\n  198\t                    :labelShowEnable=\"false\"\r\n  199\t                    @select=\"({ name, code }) =\u003e (config.modelValue = code)\"\r\n  200\t                    @change=\"(value) =\u003e (config.modelValue = value)\"\r\n  201\t                    style=\"width: 100px\"\r\n  202\t                  /\u003e\r\n  203\t                \u003c/template\u003e\r\n  204\t                \u003ctemplate v-if=\"config.vtype === 'input'\"\u003e\r\n  205\t                  \u003cspan v-if=\"config.prefix\"\u003e{{ config.prefix }}\u003c/span\u003e\r\n  206\t                  \u003cel-input\r\n  207\t                    v-model=\"config.modelValue\"\r\n  208\t                    :placeholder=\"config.param\"\r\n  209\t                    size=\"small\"\r\n  210\t                  /\u003e\r\n  211\t                  \u003cspan v-if=\"config.suffix\"\u003e{{ config.suffix }}\u003c/span\u003e\r\n  212\t                \u003c/template\u003e\r\n  213\t                \u003ctemplate v-if=\"config.vtype === 'select'\"\u003e\r\n  214\t                  \u003cel-select\r\n  215\t                    v-model=\"config.modelValue\"\r\n  216\t                    :placeholder=\"config.param\"\r\n  217\t                    clearable\r\n  218\t                    size=\"small\"\r\n  219\t                  \u003e\r\n  220\t                    \u003cel-option\r\n  221\t                      v-for=\"item in handleOptionsStrToArray(config.optionsStr)\"\r\n  222\t                      :key=\"item.value\"\r\n  223\t                      :label=\"item.label\"\r\n  224\t                      :value=\"item.value\"\r\n  225\t                    /\u003e\r\n  226\t                  \u003c/el-select\u003e\r\n  227\t                \u003c/template\u003e\r\n  228\t              \u003c/div\u003e\r\n  229\t              \u003cspan v-if=\"configIndex !== formatItem.configList.length - 1\"\u003e_\u003c/span\u003e\r\n  230\t            \u003c/template\u003e\r\n  231\t          \u003c/div\u003e\r\n  232\t          \u003c!-- 插入变量 --\u003e\r\n  233\t          \u003cel-button\r\n  234\t            type=\"primary\"\r\n  235\t            plain\r\n  236\t            size=\"small\"\r\n  237\t            @click=\"handleInsetVarContent(formatItem.configList)\"\r\n  238\t          \u003e\r\n  239\t            插入变量\r\n  240\t          \u003c/el-button\u003e\r\n  241\t          \u003c!-- Tip示例 --\u003e\r\n  242\t          \u003cel-tooltip\r\n  243\t            effect=\"dark\"\r\n  244\t            placement=\"top-start\"\r\n  245\t          \u003e\r\n  246\t            \u003ctemplate #content\u003e\r\n  247\t              \u003cdiv style=\"max-width: 820px\"\u003e\r\n  248\t                \u003cspan style=\"white-space: pre-line\"\u003e{{ formatItem.tip }}\u003c/span\u003e\r\n  249\t              \u003c/div\u003e\r\n  250\t            \u003c/template\u003e\r\n  251\t            \u003cel-icon\u003e\u003cInfoFilled /\u003e\u003c/el-icon\u003e\r\n  252\t          \u003c/el-tooltip\u003e\r\n  253\t        \u003c/div\u003e\r\n  254\t      \u003c/template\u003e\r\n  255\t    \u003c/div\u003e\r\n  256\t  \u003c/el-dialog\u003e\r\n  257\t\u003c/template\u003e\r\n  258\t\u003cstyle lang=\"scss\"\u003e\r\n  259\t.var-select-dialog {\r\n  260\t  .el-dialog {\r\n  261\t    width: auto !important;\r\n  262\t    min-width: 660px;\r\n  263\t    max-width: 1000px;\r\n  264\t  }\r\n  265\t}\r\n  266\t\u003c/style\u003e\r\n  267\t\u003cstyle lang=\"scss\" scoped\u003e\r\n  268\t.var-select-dialog {\r\n  269\t  .custom-header {\r\n  270\t    display: flex;\r\n  271\t    align-items: center;\r\n  272\t    justify-content: space-between;\r\n  273\t    .left {\r\n  274\t      display: flex;\r\n  275\t      align-items: center;\r\n  276\t      flex: 1;\r\n  277\t      span {\r\n  278\t        margin-right: 10px;\r\n  279\t      }\r\n  280\t      .el-select {\r\n  281\t        width: 140px;\r\n  282\t      }\r\n  283\t    }\r\n  284\t    .right {\r\n  285\t      display: flex;\r\n  286\t      align-items: center;\r\n  287\t      .el-button {\r\n  288\t        margin-right: 10px;\r\n  289\t      }\r\n  290\t      .el-icon {\r\n  291\t        cursor: pointer;\r\n  292\t        \u0026:hover {\r\n  293\t          color: var(--el-color-primary);\r\n  294\t        }\r\n  295\t      }\r\n  296\t    }\r\n  297\t  }\r\n  298\t  .custom-body {\r\n  299\t    min-height: 160px;\r\n  300\t    box-sizing: border-box;\r\n  301\t    border-top: var(--el-border);\r\n  302\t    padding: 10px 0;\r\n  303\t    .format-item {\r\n  304\t      font-size: 12px;\r\n  305\t      display: flex;\r\n  306\t      align-items: center;\r\n  307\t      flex-wrap: wrap;\r\n  308\t      gap: 10px;\r\n  309\t      margin-bottom: 10px;\r\n  310\t      .config-list {\r\n  311\t        display: flex;\r\n  312\t        align-items: center;\r\n  313\t        .el-input {\r\n  314\t          width: 100px;\r\n  315\t        }\r\n  316\t        .el-select {\r\n  317\t          width: 100px;\r\n  318\t        }\r\n  319\t      }\r\n  320\t    }\r\n  321\t  }\r\n  322\t}\r\n  323\t\u003c/style\u003e\r\n  324\t\n","preview":"1\t\u003cscript setup\u003e\n2\timport { computed, onMounted, ref, inject } from \"vue\";\n3\timport { Close, InfoFilled } from \"@element-plus/icons-vue\";","bytes":11490,"is_error":false,"stored_at":"2026-07-28T08:47:09.8897467Z"}