st-comp 0.0.200 → 0.0.202

package/package.json

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

package/packages/KlineConfig/config.js

@@ -13,6 +13,8 @@ export const getDefaultUserKlineConfig = () => {
     mainIndicator: "MA",
     // 成交点默认展示
     sellBuy: 1,
+    // 成交点默认按照实际价格标记
+    sellBuyByPrice: 1,
     // 单周期默认展示
     singelCycle: "6",
     // 多周期布局 2 4 6

package/packages/KlineConfig/index.vue

@@ -113,6 +113,14 @@ defineExpose({
             />
           </el-select>
         </div>
+        <div class="setting-item">
+          <span class="label">开平点按价格标: </span>
+          <el-checkbox
+            v-model="form.sellBuyByPrice"
+            :true-value="1"
+            :false-value="0"
+          />
+        </div>
         <div class="setting-item">
           <span class="label">单周期: </span>
           <el-select
@@ -240,6 +248,7 @@ defineExpose({
     color: var(--el-text-color-primary);
     height: calc(100% - 80px);
     box-sizing: border-box;
+    padding-right: 10px;
     // 单行控制项
     .setting-item {
       width: 100%;

package/packages/KlinePlus/index.vue

@@ -341,7 +341,7 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
   // 配置数据: 成交收益率曲线
   const { tradeIncomeRateLineData } = handleTradeIncomeRateLine(props.tradeIncomeRateData, props.cycle, props.incomeType, time);
   // 配置数据: 成交点位 + 连线
-  const { tradePointData, tradeLineData } = handleMarkPointTradeLog(props.tradeLog, props.cycle, props.sellBuy, time, data);
+  const { tradePointData, tradeLineData } = handleMarkPointTradeLog(props.tradeLog, props.cycle, props.sellBuy, time, data, props.userKlineConfig);
 
   /**
    * @description: 渲染图表
@@ -643,22 +643,27 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
 // 图表: 绘制(当屏最高价)
 const drawScreenMaxPrice = () => {
   if (!props.userKlineConfig.enable_showScreenMaxPrice || !klineData.value.time.length) return;
+
   const { data } = klineData.value;
-  const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
+  const originOption = mainChartIns.getOption();
+  const { startValue, endValue } = originOption?.dataZoom[0] ?? {};
+
   let maxPrice = 0;
   let maxPriceIndex = startValue;
+
   for (let i = startValue; i <= endValue; i++) {
     if (Number(data[i][3]) >= maxPrice) {
       maxPrice = Number(data[i][3]);
       maxPriceIndex = i;
     }
   }
-  const originOption = mainChartIns.getOption();
+
   const filterSeries = originOption.series?.filter((item) => item.name !== "maxPrice") || [];
   const dataLength = endValue - startValue;
   const positionInView = (maxPriceIndex - startValue) / dataLength;
   let position = "right";
   let formatter = `←${maxPrice}`;
+
   if (positionInView > 0.7) {
     position = "left";
     formatter = `${round(maxPrice)}→`;
@@ -666,24 +671,26 @@ const drawScreenMaxPrice = () => {
     position = "right";
     formatter = `←${round(maxPrice)}`;
   }
+
+  // 关键：只更新 series，不更新其他配置
   mainChartIns?.setOption(
     {
-      ...originOption,
       series: [
         ...filterSeries,
         {
           type: "line",
           name: "maxPrice",
+          data: [],
+          lineStyle: { opacity: 0 },
           markPoint: {
-            // 点位原本样式通过透明去进行隐藏, 从而仅展示文案
             symbol: "circle",
             symbolSize: 1,
             itemStyle: {
               color: "transparent",
               borderColor: "transparent",
             },
-            z: 100, // 设置较高的 z 值，确保在最上层
-            zlevel: 10, // 设置较高的 zlevel
+            z: 100,
+            zlevel: 10,
             label: {
               show: true,
               position,
@@ -702,7 +709,10 @@ const drawScreenMaxPrice = () => {
         },
       ],
     },
-    true
+    {
+      notMerge: false, // 合并模式
+      replaceMerge: [], // 不替换任何配置
+    }
   );
 };
 

package/packages/KlinePlus/utils.js

@@ -258,6 +258,30 @@ export const binarySearch = (arr, target, type = "strict") => {
   return type === "strict" ? -1 : result;
 };
 
+/**
+ * @description: 统一兼容处理标记点Y轴偏移量问题
+ */
+export const handleMarkPointOffset = (markPointData) => {
+  const data = [];
+  markPointData.reduce((result, item) => {
+    // 1. 找到当前标记的位置
+    const key = `${item.coord[0]}+${item.label.position}`;
+    const baseOffset = item.label.position === "top" ? -16 : 16;
+    // 2. 找到先前处于相同位置 [key] 标记的数量
+    const sameNum = result.get(key);
+    if (sameNum) {
+      result.set(key, sameNum + 1);
+      item.symbolOffset[1] = baseOffset * (sameNum + 1);
+    } else {
+      result.set(key, 1);
+      item.symbolOffset[1] = item.label.position === "top" ? -7 : 7;
+    }
+    data.push(item);
+    return result;
+  }, new Map());
+  return data;
+};
+
 // K线数据合并
 export const mergeklineData = (leftData, rightData) => {
   return {
@@ -490,7 +514,7 @@ export const normalizeToKlineTimeByMatch = (klineTimeArray, timeRange, cycle) =>
 };
 
 // 生成图表配置所需数据: 成交点位, 成交点位连线
-export const handleMarkPointTradeLog = (tradeLog, cycle, sellBuy, klineTimeArray, klineDataArray) => {
+export const handleMarkPointTradeLog = (tradeLog, cycle, sellBuy, klineTimeArray, klineDataArray, userKlineConfig) => {
   // 获取交易类型
   const handleTradeType = (data, type) => {
     const { direction = "", tradeAction = "", tradeType = "" } = data;
@@ -558,15 +582,22 @@ export const handleMarkPointTradeLog = (tradeLog, cycle, sellBuy, klineTimeArray
       return result;
     }, []);
   };
-  // 交易点: 开平配置数据
+  // 交易点: 开平配置数据 (如果是价格, 则无需偏移, 如果是K线高低价, 则需要偏移)
   const handleOpenCloseConfig = (data, baseLineData, klineTimeAry, klineDataAry) => {
-    return data.reduce((result, next, index) => {
+    const { sellBuyByPrice } = userKlineConfig;
+    const result = data.reduce((result, next, index) => {
       // 1.交易类型
       const tradeType = handleTradeType(next, 1);
       // 2.图标位置 [开在K线上方,平在K线下方]
       const position = ["开多", "开空"].includes(tradeType) ? "top" : "bottom";
-      // 3.获取对应Y轴值
-      const yAxisValue = position === "top" ? (next.openPriceAll / next.amount)?.toFixed(2) : (next.closePriceAll / next.amount)?.toFixed(2);
+      // 3.获取对应Y轴值 [根据自定义配置判断, 是按价格还是直接用K线的最高低价]
+      let yAxisValue = null;
+      if (sellBuyByPrice) {
+        yAxisValue = position === "top" ? (next.openPriceAll / next.amount)?.toFixed(2) : (next.closePriceAll / next.amount)?.toFixed(2);
+      } else {
+        const klineIndex = binarySearch(klineTimeAry, next.klineTime);
+        yAxisValue = position === "top" ? klineDataAry[klineIndex]?.[3] : klineDataAry[klineIndex]?.[2];
+      }
       // 4.将Y轴值存到连线的数据中, 提供给连线配置使用
       baseLineData.forEach((item) => {
         const rangeTime = position === "top" ? item.range[0] : item.range[1];
@@ -598,6 +629,11 @@ export const handleMarkPointTradeLog = (tradeLog, cycle, sellBuy, klineTimeArray
       });
       return result;
     }, []);
+    if (sellBuyByPrice) {
+      return result;
+    } else {
+      return handleMarkPointOffset(result);
+    }
   };
   // 交易点: 生成基础点位, 连线数据
   const handleTradePointLineData = (tradeLog, cycle, klineTimeArray) => {

package/src/pages/KlinePlus/index.vue

@@ -79,6 +79,7 @@ const varietyCode = ref("Z000012");
 const varietyStock = ref(1); // 0: 期货, 1: 股票, 2: 期权
 const tradeLog = ref(tradeLogMock);
 const netPositionData = ref([]);
+const pageType = ref(1);
 const cycle = ref("5");
 const sellBuy = ref(1);
 const rightType = ref(1);
@@ -172,7 +173,7 @@ const handleUserKlineConfig = async (action, formJson) => {
       // 更新配置数据
       Object.assign(userKlineConfig, JSON.parse(formJson));
       // 默认值 [自定义配置]
-      // pageType.value = userKlineConfig.pageType;
+      pageType.value = userKlineConfig.pageType;
       cycle.value = userKlineConfig.singelCycle;
       sellBuy.value = userKlineConfig.sellBuy;
       mainIndicator.value = userKlineConfig.mainIndicator;
@@ -195,10 +196,10 @@ onMounted(async () => {
   initTimeRange.value = getTimeRange(params);
 
   // 默认值 [自定义配置]
-  // pageType.value = userKlineConfig.pageType;
-  // cycle.value = userKlineConfig.singelCycle;
-  // sellBuy.value = userKlineConfig.sellBuy;
-  // mainIndicator.value = userKlineConfig.mainIndicator;
+  pageType.value = userKlineConfig.pageType;
+  cycle.value = userKlineConfig.singelCycle;
+  sellBuy.value = userKlineConfig.sellBuy;
+  mainIndicator.value = userKlineConfig.mainIndicator;
 
   setTimeout(() => {
     loading.value = false;

package/es/el-autocomplete-86c0d989.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),K=require("./use-form-common-props-d8866dc6.cjs"),M=require("./index-1fb95601.cjs"),S=require("./el-input-6c5ac889.cjs"),se=require("./index-680be212.cjs"),u=require("./el-popper-b962125f.cjs"),n=require("./base-ef747d02.cjs"),re=require("./index-9780a537.cjs"),ae=require("./el-scrollbar-139aa96d.cjs"),ue=n.buildProps({...S.inputProps,valueKey:{type:String,default:"value"},modelValue:{type:[String,Number],default:""},debounce:{type:Number,default:300},placement:{type:n.definePropType(String),values:["top","top-start","top-end","bottom","bottom-start","bottom-end"],default:"bottom-start"},fetchSuggestions:{type:n.definePropType([Function,Array]),default:n.NOOP},popperClass:{type:String,default:""},triggerOnFocus:{type:Boolean,default:!0},selectWhenUnmatched:Boolean,hideLoading:Boolean,teleported:u.useTooltipContentProps.teleported,appendTo:u.useTooltipContentProps.appendTo,highlightFirstItem:Boolean,fitInputWidth:Boolean}),ie={[u.UPDATE_MODEL_EVENT]:s=>n.isString(s)||n.isNumber(s),[u.INPUT_EVENT]:s=>n.isString(s)||n.isNumber(s),[u.CHANGE_EVENT]:s=>n.isString(s)||n.isNumber(s),focus:s=>s instanceof FocusEvent,blur:s=>s instanceof FocusEvent,clear:()=>!0,select:s=>n.isObject(s)},U="ElAutocomplete",ce=e.defineComponent({name:U,inheritAttrs:!1}),de=e.defineComponent({...ce,props:ue,emits:ie,setup(s,{expose:z,emit:d}){const a=s,L=e.computed(()=>u.pick(a,Object.keys(S.inputProps))),R=e.useAttrs(),T=K.useFormDisabled(),i=n.useNamespace("autocomplete"),f=e.ref(),$=e.ref(),b=e.ref(),A=e.ref();let P=!1,C=!1;const p=e.ref([]),r=e.ref(-1),V=e.ref(""),v=e.ref(!1),E=e.ref(!1),m=e.ref(!1),h=re.useId(),W=e.computed(()=>R.style),g=e.computed(()=>(p.value.length>0||m.value)&&v.value),I=e.computed(()=>!a.hideLoading&&m.value),H=e.computed(()=>f.value?Array.from(f.value.$el.querySelectorAll("input")):[]),x=()=>{g.value&&(V.value=`${f.value.$el.offsetWidth}px`)},G=()=>{r.value=-1},_=async t=>{if(E.value)return;const o=l=>{m.value=!1,!E.value&&(n.isArray(l)?(p.value=l,r.value=a.highlightFirstItem?0:-1):u.throwError(U,"autocomplete suggestions must be an array"))};if(m.value=!0,n.isArray(a.fetchSuggestions))o(a.fetchSuggestions);else{const l=await a.fetchSuggestions(t,o);n.isArray(l)&&o(l)}},B=ae.debounce(_,a.debounce),j=t=>{const o=!!t;if(d(u.INPUT_EVENT,t),d(u.UPDATE_MODEL_EVENT,t),E.value=!1,v.value||(v.value=o),!a.triggerOnFocus&&!t){E.value=!0,p.value=[];return}B(t)},J=t=>{var o;T.value||(((o=t.target)==null?void 0:o.tagName)!=="INPUT"||H.value.includes(document.activeElement))&&(v.value=!0)},Q=t=>{d(u.CHANGE_EVENT,t)},X=t=>{var o;if(C)C=!1;else{v.value=!0,d("focus",t);const l=(o=a.modelValue)!=null?o:"";a.triggerOnFocus&&!P&&B(String(l))}},Y=t=>{setTimeout(()=>{var o;if((o=b.value)!=null&&o.isFocusInsideContent()){C=!0;return}v.value&&y(),d("blur",t)})},Z=()=>{v.value=!1,d(u.UPDATE_MODEL_EVENT,""),d("clear")},D=async()=>{var t;(t=f.value)!=null&&t.isComposing||(g.value&&r.value>=0&&r.value<p.value.length?w(p.value[r.value]):a.selectWhenUnmatched&&(d("select",{value:a.modelValue}),p.value=[],r.value=-1))},ee=t=>{g.value&&(t.preventDefault(),t.stopPropagation(),y())},y=()=>{v.value=!1},te=()=>{var t;(t=f.value)==null||t.focus()},oe=()=>{var t;(t=f.value)==null||t.blur()},w=async t=>{d(u.INPUT_EVENT,t[a.valueKey]),d(u.UPDATE_MODEL_EVENT,t[a.valueKey]),d("select",t),p.value=[],r.value=-1},k=t=>{var o,l;if(!g.value||m.value)return;if(t<0){r.value=-1;return}t>=p.value.length&&(t=p.value.length-1);const c=$.value.querySelector(`.${i.be("suggestion","wrap")}`),ne=c.querySelectorAll(`.${i.be("suggestion","list")} li`)[t],O=c.scrollTop,{offsetTop:q,scrollHeight:N}=ne;q+N>O+c.clientHeight&&(c.scrollTop+=N),q<O&&(c.scrollTop-=N),r.value=t,(l=(o=f.value)==null?void 0:o.ref)==null||l.setAttribute("aria-activedescendant",`${h.value}-item-${r.value}`)},F=K.onClickOutside(A,()=>{var t;(t=b.value)!=null&&t.isFocusInsideContent()||g.value&&y()});return e.onBeforeUnmount(()=>{F==null||F()}),e.onMounted(()=>{var t;const o=(t=f.value)==null?void 0:t.ref;o&&([{key:"role",value:"textbox"},{key:"aria-autocomplete",value:"list"},{key:"aria-controls",value:"id"},{key:"aria-activedescendant",value:`${h.value}-item-${r.value}`}].forEach(({key:l,value:c})=>o.setAttribute(l,c)),P=o.hasAttribute("readonly"))}),z({highlightedIndex:r,activated:v,loading:m,inputRef:f,popperRef:b,suggestions:p,handleSelect:w,handleKeyEnter:D,focus:te,blur:oe,close:y,highlight:k,getData:_}),(t,o)=>(e.openBlock(),e.createBlock(e.unref(u.ElTooltip),{ref_key:"popperRef",ref:b,visible:e.unref(g),placement:t.placement,"fallback-placements":["bottom-start","top-start"],"popper-class":[e.unref(i).e("popper"),t.popperClass],teleported:t.teleported,"append-to":t.appendTo,"gpu-acceleration":!1,pure:"","manual-mode":"",effect:"light",trigger:"click",transition:`${e.unref(i).namespace.value}-zoom-in-top`,persistent:"",role:"listbox",onBeforeShow:x,onHide:G},{content:e.withCtx(()=>[e.createElementVNode("div",{ref_key:"regionRef",ref:$,class:e.normalizeClass([e.unref(i).b("suggestion"),e.unref(i).is("loading",e.unref(I))]),style:e.normalizeStyle({[t.fitInputWidth?"width":"minWidth"]:V.value,outline:"none"}),role:"region"},[t.$slots.header?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(i).be("suggestion","header")),onClick:e.withModifiers(()=>{},["stop"])},[e.renderSlot(t.$slots,"header")],10,["onClick"])):e.createCommentVNode("v-if",!0),e.createVNode(e.unref(se.ElScrollbar),{id:e.unref(h),tag:"ul","wrap-class":e.unref(i).be("suggestion","wrap"),"view-class":e.unref(i).be("suggestion","list"),role:"listbox"},{default:e.withCtx(()=>[e.unref(I)?(e.openBlock(),e.createElementBlock("li",{key:0},[e.renderSlot(t.$slots,"loading",{},()=>[e.createVNode(e.unref(M.ElIcon),{class:e.normalizeClass(e.unref(i).is("loading"))},{default:e.withCtx(()=>[e.createVNode(e.unref(M.loading_default))]),_:1},8,["class"])])])):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(p.value,(l,c)=>(e.openBlock(),e.createElementBlock("li",{id:`${e.unref(h)}-item-${c}`,key:c,class:e.normalizeClass({highlighted:r.value===c}),role:"option","aria-selected":r.value===c,onClick:le=>w(l)},[e.renderSlot(t.$slots,"default",{item:l},()=>[e.createTextVNode(e.toDisplayString(l[t.valueKey]),1)])],10,["id","aria-selected","onClick"]))),128))]),_:3},8,["id","wrap-class","view-class"]),t.$slots.footer?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(i).be("suggestion","footer")),onClick:e.withModifiers(()=>{},["stop"])},[e.renderSlot(t.$slots,"footer")],10,["onClick"])):e.createCommentVNode("v-if",!0)],6)]),default:e.withCtx(()=>[e.createElementVNode("div",{ref_key:"listboxRef",ref:A,class:e.normalizeClass([e.unref(i).b(),t.$attrs.class]),style:e.normalizeStyle(e.unref(W)),role:"combobox","aria-haspopup":"listbox","aria-expanded":e.unref(g),"aria-owns":e.unref(h)},[e.createVNode(e.unref(S.ElInput),e.mergeProps({ref_key:"inputRef",ref:f},e.mergeProps(e.unref(L),t.$attrs),{"model-value":t.modelValue,disabled:e.unref(T),onInput:j,onChange:Q,onFocus:X,onBlur:Y,onClear:Z,onKeydown:[e.withKeys(e.withModifiers(l=>k(r.value-1),["prevent"]),["up"]),e.withKeys(e.withModifiers(l=>k(r.value+1),["prevent"]),["down"]),e.withKeys(D,["enter"]),e.withKeys(y,["tab"]),e.withKeys(ee,["esc"])],onMousedown:J}),e.createSlots({_:2},[t.$slots.prepend?{name:"prepend",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"prepend")])}:void 0,t.$slots.append?{name:"append",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"append")])}:void 0,t.$slots.prefix?{name:"prefix",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"prefix")])}:void 0,t.$slots.suffix?{name:"suffix",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"suffix")])}:void 0]),1040,["model-value","disabled","onKeydown"])],14,["aria-expanded","aria-owns"])]),_:3},8,["visible","placement","popper-class","teleported","append-to","transition"]))}});var pe=n._export_sfc(de,[["__file","autocomplete.vue"]]);const fe=n.withInstall(pe);exports.ElAutocomplete=fe;