st-comp 0.0.164 → 0.0.166

package/package.json

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

package/packages/KlineConfig/config.js

@@ -0,0 +1,39 @@
+export const sellBuyOptions = [
+  { label: "买卖", value: 0 },
+  { label: "开平", value: 1 },
+];
+
+// 默认K线用户自定义配置
+export const getDefaultUserKlineConfig = () => {
+  return {
+    /**
+     * @description: 偏好设置
+     */
+    // 主图指标默认展示
+    mainIndicator: "MA",
+    // 成交点默认展示
+    sellBuy: 1,
+    // 单周期默认展示
+    singelCycle: "6",
+    // 多周期布局 2 4 6
+    multiCycleNum: 6,
+    // 多周期N宫格周期
+    multiCycleList: ["1", "2", "3", "4", "5", "6"],
+    // 默认展示模块
+    pageType: 1, // 展示模块 1-单周期, 2-多周期
+
+    /**
+     * @description: 功能配置
+     */
+    enable_subChart: true, // 是否启用副图
+    enable_sliderChart: true, // 是否启用拖拽轴
+    enable_tradeLogBrush: true, // 是否开启交易范围高亮
+    enable_dbClickOpenSingel: true, // 是否开启双击打开单周期
+    enable_showScreenTimeRange: true, // 是否开启显示K线当屏时间范围
+  };
+};
+
+// 字典文案映射
+export const formatLabel = (value, options) => {
+  return options.find((item) => item.value === value)?.label ?? "-";
+};

package/packages/KlineConfig/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import StKlineConfig from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("st-klineConfig", StKlineConfig);
+  },
+}

package/packages/KlineConfig/index.vue

@@ -0,0 +1,315 @@
+<!-- 用户K线自定义配置 -->
+<script setup>
+import { ref, reactive, onMounted, inject } from "vue";
+import { getDefaultUserKlineConfig, sellBuyOptions, formatLabel } from "./config";
+
+const { request } = inject("stConfig"); // 组件库全局配置
+
+const emit = defineEmits("callBack");
+const props = defineProps({
+  indicatorStore: { type: Object, default: () => ({}) }, // 指标配置Store
+});
+
+const visible = ref(false);
+const form = reactive({});
+
+const cycleOptions = ref([]);
+const mainIndicatorOptions = ref([]);
+
+// 配置: 恢复默认
+const handleReset = () => {
+  Object.assign(form, getDefaultUserKlineConfig());
+};
+// 配置: 保存配置
+const handleSubmit = async () => {
+  const json = JSON.stringify(form);
+  await request.post("/common/qt/updateUserConfig", { appId: 1, json });
+  emit("callBack", json);
+  visible.value = false;
+};
+
+// 获取配置数据
+const getKlineConfig = async () => {
+  const { body } = await request.post("/common/qt/getUserConfig", { appId: 1 });
+  Object.assign(form, getDefaultUserKlineConfig(), body ? JSON.parse(body) : {});
+};
+// 获取周期选项
+const getCycleOptions = async () => {
+  const { body } = await request.post("/common/qt/getDict", { dictIds: [1002] });
+  cycleOptions.value = body[1002].map((item) => {
+    return {
+      label: item.dictName,
+      value: item.dictCode,
+    };
+  });
+};
+
+onMounted(() => {
+  getCycleOptions();
+  mainIndicatorOptions.value = props.indicatorStore.mainIndicatorList ?? [];
+});
+defineExpose({
+  // 打开
+  open: async () => {
+    await getKlineConfig();
+    visible.value = true;
+  },
+  // 获取默认配置
+  getDefaultUserKlineConfig,
+});
+</script>
+
+<template>
+  <div class="kline-config element-dark">
+    <!-- 自定义配置 -->
+    <el-drawer
+      v-model="visible"
+      title="K线自定义配置"
+      :size="320"
+    >
+      <el-scrollbar class="setting-main">
+        <!-- 偏好设置 -->
+        <el-divider style="margin-top: 8px">偏好设置</el-divider>
+        <div class="setting-item">
+          <span class="label">默认主图指标: </span>
+          <el-select
+            v-model="form.mainIndicator"
+            popper-class="element-dark"
+          >
+            <el-option
+              v-for="(item, index) in mainIndicatorOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div class="setting-item">
+          <span class="label">成交点显示模式: </span>
+          <el-select
+            v-model="form.sellBuy"
+            popper-class="element-dark"
+          >
+            <el-option
+              v-for="(item, index) in sellBuyOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div class="setting-item">
+          <span class="label">单周期默认展示: </span>
+          <el-select
+            v-model="form.singelCycle"
+            popper-class="element-dark"
+          >
+            <el-option
+              v-for="(item, index) in cycleOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div class="setting-item">
+          <span class="label">多周期默认展示: </span>
+          <el-segmented
+            size="small"
+            v-model="form.multiCycleNum"
+            :options="[
+              { label: '二图', value: 2 },
+              { label: '四图', value: 4 },
+              { label: '六图', value: 6 },
+            ]"
+            style="height: 26px"
+          />
+        </div>
+        <div :class="`setting-multi-box grid-${form.multiCycleNum}`">
+          <template v-for="(item, index) in form.multiCycleList.slice(0, form.multiCycleNum)">
+            <div class="mode">
+              <div class="cycleName">
+                <span>{{ formatLabel(form.multiCycleList[index], cycleOptions) }}</span>
+                <el-select
+                  v-model="form.multiCycleList[index]"
+                  popper-class="element-dark"
+                >
+                  <el-option
+                    v-for="(item, index) in cycleOptions"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </div>
+              <span class="content">{{ index + 1 }}号位K线</span>
+            </div>
+          </template>
+        </div>
+        <div class="setting-item">
+          <span class="label">默认展示模块: </span>
+          <el-segmented
+            size="small"
+            v-model="form.pageType"
+            :options="[
+              { label: '单周期', value: 1 },
+              { label: '多周期', value: 2 },
+            ]"
+            style="height: 26px"
+          />
+        </div>
+        <!-- 功能配置 -->
+        <el-divider style="margin-top: 44px">功能配置</el-divider>
+        <div class="setting-item">
+          <span class="label">启用副图: </span>
+          <el-switch v-model="form.enable_subChart" />
+        </div>
+        <div class="setting-item">
+          <span class="label">启用拖拽轴: </span>
+          <el-switch v-model="form.enable_sliderChart" />
+        </div>
+        <div class="setting-item">
+          <span class="label">交易范围高亮: </span>
+          <el-switch v-model="form.enable_tradeLogBrush" />
+        </div>
+        <div class="setting-item">
+          <span class="label">双击跳转单周期: </span>
+          <el-switch v-model="form.enable_dbClickOpenSingel" />
+        </div>
+        <div class="setting-item">
+          <span class="label">显示K线当屏时间范围: </span>
+          <el-switch v-model="form.enable_showScreenTimeRange" />
+        </div>
+      </el-scrollbar>
+      <div class="setting-footer">
+        <!-- 恢复默认 -->
+        <el-button @click="handleReset"> 恢复默认 </el-button>
+        <el-button
+          type="primary"
+          @click="handleSubmit"
+        >
+          保存配置
+        </el-button>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.kline-config {
+  cursor: default;
+  height: 20px;
+  :deep(.el-drawer__header) {
+    margin-bottom: 0;
+    background-color: #141414;
+  }
+  :deep(.el-drawer__body) {
+    background-color: #141414;
+  }
+  // 配置入口
+  .setting-icon {
+    cursor: pointer;
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+  // 配置内容
+  .setting-main {
+    font-size: 14px;
+    color: var(--el-text-color-primary);
+    height: calc(100% - 80px);
+    box-sizing: border-box;
+    // 单行控制项
+    .setting-item {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+      .el-select {
+        width: 130px;
+      }
+    }
+    // 多周期布局
+    .setting-multi-box {
+      margin-top: 13px;
+      margin-bottom: 18px;
+      .cycleName {
+        color: white;
+        font-size: 10px;
+        padding: 1px 2px;
+        padding-left: 4px;
+        background-color: var(--el-color-primary);
+        display: flex;
+        align-items: center;
+        border-bottom-left-radius: 4px;
+        position: absolute;
+        z-index: 999;
+        right: 0px;
+        top: 0px;
+        :deep(.el-select) {
+          margin-left: 4px;
+          width: 12px;
+          .el-select__icon {
+            margin-left: 0;
+            color: black;
+            width: 12px;
+            height: 12px;
+          }
+          .el-select__wrapper {
+            border-radius: 50%;
+            background: #ccc;
+            padding: 0;
+            gap: 0;
+            min-height: 12px;
+            line-height: 12px;
+            box-shadow: none;
+          }
+          .el-select__input {
+            min-width: 0 !important;
+            width: 0 !important;
+          }
+        }
+      }
+      .mode {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        border: 1px solid var(--el-border-color);
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .grid-2 {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(1, minmax(80px, 1fr));
+      grid-gap: 2px;
+    }
+    .grid-4 {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, minmax(80px, 1fr));
+      grid-gap: 2px;
+    }
+    .grid-6 {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-rows: repeat(2, minmax(80px, 1fr));
+      grid-gap: 2px;
+    }
+  }
+  // 底部按钮
+  .setting-footer {
+    height: 80px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .el-button {
+      margin-left: 0;
+    }
+  }
+}
+</style>

package/packages/KlinePlus/components/SliderChart.vue

@@ -0,0 +1,218 @@
+<!-- 图表: 拖拽轴 -->
+<script setup>
+import dayjs from "dayjs";
+import * as echarts from "echarts";
+import { debounce } from "st-func";
+import { ref, onMounted, onUnmounted, watch, nextTick, inject } from "vue";
+
+const { request } = inject("stConfig"); // 组件库全局配置
+
+let sliderChartIns = null;
+const sliderChartRef = ref(null);
+
+const emit = defineEmits(["change"]);
+const props = defineProps({
+  // K线当屏时间范围
+  screenTimeRange: { type: Array, required: true },
+  // 品种代码
+  varietyCode: { type: String, required: true },
+  // 品种市场类型: 0-期货, 1-股票, 2-期权
+  varietyStock: { type: Number, required: true },
+  // 复权选项 [股票]
+  rightType: { type: Number, required: true },
+  // 常用选项 [期货]
+  klineType: { type: Number, required: true },
+});
+const klineData = ref({
+  data: [], // <[开 收 低 高 成交额 涨跌值 涨跌百分比]>
+  mainIndicator: [],
+  subIndicator: [],
+  time: [],
+});
+
+// 获取日线数据
+const getData = async () => {
+  const params = {
+    varietyCode: props.varietyCode,
+    cycle: "6",
+    startTime: "1999-01-01 00:00:00",
+    endTime: dayjs().format("YYYY-MM-DD 23:59:59"),
+    deleteFirstNumber: 1, // 后端要求标识
+  };
+  // 参数加工
+  switch (props.varietyStock) {
+    // 期货
+    case 0: {
+      Object.assign(params, {
+        contractType: props.klineType,
+      });
+      break;
+    }
+    // 股票
+    case 1: {
+      Object.assign(params, {
+        right: props.rightType,
+      });
+      break;
+    }
+  }
+  const { body } = await request.post("/middleLayer/kline/getKline", params);
+  if (body) {
+    klineData.value = body;
+  } else {
+    klineData.value = { data: [], mainIndicator: [], subIndicator: [], time: [] };
+  }
+
+  draw("init");
+};
+// 拖动拖拽轴事件
+const handleDataZoomChange = debounce((params) => {
+  if (!params.dataZoomId) return;
+  const option = sliderChartIns.getOption();
+  if (option?.dataZoom[0]) {
+    const { startValue, endValue } = sliderChartIns.getOption().dataZoom[0];
+    const { time } = klineData.value;
+    const startTime = `${time[startValue].split(" ")[0]} 00:00:00`;
+    const endTime = `${time[endValue].split(" ")[0]} 23:59:59`;
+    console.log(`检测到拖拽轴被拖动, 时间区间: ${startTime} - ${endTime}`);
+    emit("change", { startTime, endTime });
+  } else {
+    // 未检测到, 便不执行后续逻辑
+  }
+}, 200);
+// 重置拖拽轴位置
+const reset = debounce(({ startTime, endTime }) => {
+  draw("reset", { startTime, endTime });
+}, 100);
+
+// 绘制
+const draw = (type, params) => {
+  switch (type) {
+    // 重渲染
+    case "init": {
+      const { data, time } = klineData.value;
+      const { xAxisData, lineData } = data.reduce(
+        (result, item, index) => {
+          result.xAxisData.push(time[index].split(" ")[0]);
+          result.lineData.push(item[1]);
+          return result;
+        },
+        { xAxisData: [], lineData: [] }
+      );
+      const option = {
+        grid: {
+          height: 0,
+          left: "100px",
+          right: "80px",
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          show: false,
+        },
+        yAxis: {
+          type: "value",
+        },
+        dataZoom: [
+          {
+            show: true,
+            startValue: 0,
+            endValue: 0,
+            textStyle: {
+              color: "#ccc",
+            },
+          },
+          {
+            type: "inside",
+            startValue: 0,
+            endValue: 0,
+          },
+        ],
+        series: [
+          {
+            data: lineData,
+            type: "line",
+          },
+        ],
+      };
+      sliderChartIns.setOption(option, true);
+
+      // 避免K线主体数据加载快于拖拽轴, 在这里检测一下, 如果K线已加载了那么就重定位一下
+      if (props.screenTimeRange.length) {
+        const [startTime, endTime] = props.screenTimeRange;
+        reset({ startTime, endTime });
+      }
+      break;
+    }
+    // 根据时间, 更新拖拽轴定位
+    case "reset": {
+      const { time } = klineData.value;
+      const startTime = dayjs(params.startTime).format("YYYY-MM-DD");
+      const endTime = dayjs(params.endTime).format("YYYY-MM-DD");
+      let startValue = -1;
+      let endValue = -1;
+      for (let index = 0; index < time.length; index++) {
+        const day = dayjs(time[index]).format("YYYY-MM-DD");
+        // 跳出循环
+        if (startValue !== -1 && endValue !== -1) break;
+        // 找寻对应开始时间的索引
+        if (startValue === -1) {
+          if (new Date(day) === new Date(startTime)) startValue = index;
+          else if (new Date(day) > new Date(startTime)) startValue = index - 1;
+        }
+        // 找寻对应结束时间的索引
+        if (endValue === -1) {
+          if (new Date(day) === new Date(endTime)) endValue = index;
+          else if (new Date(day) > new Date(endTime)) endValue = index - 1;
+        }
+      }
+      // 如果没找到结束索引, 直接拉到最后
+      if (endValue === -1) endValue = time.length - 1;
+      sliderChartIns.dispatchAction({
+        type: "dataZoom",
+        startValue,
+        endValue,
+      });
+      break;
+    }
+  }
+};
+
+onMounted(() => {
+  nextTick(() => {
+    sliderChartIns = echarts.init(sliderChartRef.value);
+    sliderChartIns.on("datazoom", handleDataZoomChange);
+    getData();
+  });
+});
+// 监控: [当屏首末时间] => 拖拽轴重定位
+watch(
+  () => props.screenTimeRange,
+  (newValue) => {
+    const [startTime, endTime] = newValue;
+    reset({ startTime, endTime });
+  },
+  { deep: true }
+);
+onUnmounted(() => {
+  sliderChartIns.off("datazoom");
+  sliderChartIns.dispose();
+});
+defineExpose({
+  resize: debounce(() => sliderChartIns.resize(), 100),
+});
+</script>
+
+<template>
+  <div
+    class="chart"
+    ref="sliderChartRef"
+  />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/packages/KlinePlus/components/Tips.vue

@@ -0,0 +1,36 @@
+<script setup>
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <div class="tips">
+    <span
+      v-for="(item, index) in data"
+      :key="index"
+      class="item"
+      :style="{ color: item.color }"
+    >
+      {{ item.label }} {{ item.value }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tips {
+  color: white;
+  font-size: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  .item {
+    display: flex;
+    align-items: center;
+    margin-right: 6px;
+  }
+}
+</style>

package/packages/KlinePlus/images/buy.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683703238725" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2625" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M198.016 109.738667A77.866667 77.866667 0 0 0 170.666667 167.68l0.512 418.944c0 22.869333 6.4 48 19.029333 75.306667 12.672 27.221333 27.989333 48.938667 45.952 64.938666l211.157333 188.202667c17.066667 15.488 40.576 23.978667 64.938667 23.594667 25.685333-0.085333 47.36-7.936 64.981333-23.594667l211.2-188.202667c17.92-16 33.194667-37.632 45.866667-64.938666 12.672-27.306667 18.773333-52.224 18.517333-74.922667L853.333333 167.253333c0-22.272-8.96-41.472-26.837333-57.472-17.578667-15.616-39.338667-23.893333-64.938667-24.405333l-499.029333 0.469333a93.312 93.312 0 0 0-64.512 23.893334z" fill="#FF0000" p-id="2626"></path><path d="M170.709333 167.722667c0.128-21.76 9.984-42.666667 27.392-57.941334a93.312 93.312 0 0 1 64.469334-23.893333L761.6 85.333333c25.6 0.554667 47.36 8.789333 64.938667 24.405334 17.92 16 26.88 35.2 26.88 57.472l-0.554667 419.84c0.298667 22.698667-5.845333 47.616-18.517333 74.922666-12.629333 27.306667-27.946667 48.896-45.824 64.896l-211.242667 188.202667c-17.578667 15.701333-39.253333 23.509333-64.938667 23.594667a94.72 94.72 0 0 1-64.981333-23.594667l-211.157333-188.16c-17.92-16.042667-33.28-37.717333-45.909334-64.981333-12.672-27.306667-19.029333-52.394667-19.029333-75.306667L170.666667 167.722667z m42.666667 0.256l0.554667 418.688c0 16.213333 4.821333 35.328 15.018666 57.344 10.368 22.272 22.357333 39.210667 35.626667 51.072l211.413333 188.416c8.96 8.106667 21.888 12.8 36.224 12.544 15.530667-0.042667 27.093333-4.266667 36.693334-12.8l211.157333-188.117334c13.312-11.946667 25.301333-28.842667 35.584-51.072 10.112-21.845333 14.762667-40.576 14.506667-57.045333l0.554666-419.754667c0-9.898667-3.584-17.621333-12.458666-25.6a54.698667 54.698667 0 0 0-36.608-13.610666l-499.626667 0.469333a51.328 51.328 0 0 0-35.754667 13.312 36.565333 36.565333 0 0 0-12.501333 21.461333l-0.426667 4.693334z" fill="#AE0000" p-id="2627"></path><path d="M384 654.122667h153.514667c96.768 0 142.762667-48.981333 142.762666-117.077334 0-59.733333-33.450667-88.405333-84.821333-97.962666v-1.792c48.981333-15.530667 66.901333-46.592 66.901333-89.6 0-65.109333-40.618667-103.338667-134.997333-103.338667H384v409.770667z m72.874667-54.954667v-131.413333h66.304c51.968 0 80.042667 17.92 80.042666 65.109333 0 44.8-26.282667 66.304-75.861333 66.304h-70.485333z m0-180.394667V298.709333h60.330666c47.189333 0 72.277333 14.933333 72.277334 59.136 0 46.592-32.256 60.928-75.264 60.928h-57.344z" fill="#FFFFFF" p-id="2628"></path></svg>

package/packages/KlinePlus/images/sell.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683703241664" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2777" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M198.016 109.738667A77.866667 77.866667 0 0 0 170.666667 167.68l0.512 418.944c0 22.869333 6.4 48 19.029333 75.306667 12.672 27.221333 27.989333 48.938667 45.952 64.938666l211.157333 188.202667c17.066667 15.488 40.576 23.978667 64.938667 23.594667 25.685333-0.085333 47.36-7.936 64.981333-23.594667l211.2-188.202667c17.92-16 33.194667-37.632 45.866667-64.938666 12.672-27.306667 18.773333-52.224 18.517333-74.922667L853.333333 167.253333c0-22.272-8.96-41.472-26.837333-57.472-17.578667-15.616-39.338667-23.893333-64.938667-24.405333l-499.029333 0.469333a93.312 93.312 0 0 0-64.512 23.893334z" fill="#54AB30" p-id="2778"></path><path d="M170.666667 167.68c0.128-21.76 9.941333-42.666667 27.349333-57.941333a93.312 93.312 0 0 1 64.512-23.893334L761.557333 85.333333c25.6 0.554667 47.36 8.789333 64.938667 24.405334 17.92 16 26.837333 35.2 26.837333 57.472l-0.512 419.84c0.298667 22.656-5.845333 47.616-18.517333 74.88-12.672 27.306667-27.946667 48.938667-45.866667 64.938666l-211.2 188.202667c-17.621333 15.658667-39.253333 23.509333-64.981333 23.594667a94.72 94.72 0 0 1-64.938667-23.594667l-211.2-188.202667c-17.92-16-33.237333-37.717333-45.909333-64.938666-12.629333-27.306667-19.029333-52.437333-19.029333-75.306667L170.666667 167.68z m42.624 0.256l0.554666 418.688c0 16.170667 4.864 35.328 15.061334 57.344 10.368 22.272 22.314667 39.168 35.626666 51.029333l211.413334 188.416c8.96 8.106667 21.888 12.8 36.224 12.586667 15.530667-0.042667 27.093333-4.266667 36.693333-12.8l211.114667-188.16c13.354667-11.946667 25.301333-28.842667 35.626666-51.072 10.112-21.76 14.762667-40.533333 14.506667-57.002667L810.666667 167.210667c0-9.898667-3.584-17.621333-12.501334-25.6A54.698667 54.698667 0 0 0 761.6 128l-499.626667 0.469333a51.328 51.328 0 0 0-35.754666 13.269334 36.565333 36.565333 0 0 0-12.501334 21.504l-0.426666 4.693333z" fill="#388D14" p-id="2779"></path><path d="M506.453333 674.730667c99.157333 0 146.346667-48.384 146.346667-126.037334 0-72.874667-38.826667-99.754667-103.338667-118.272l-38.229333-11.946666c-40.618667-11.349333-52.565333-25.088-52.565333-57.344 0-32.853333 23.893333-50.773333 66.901333-50.773334 45.397333 0 78.848 9.557333 104.533333 20.309334V273.322667c-22.698667-11.946667-51.968-22.101333-105.728-22.101334-92.586667 0-137.386667 47.189333-137.386666 116.48 0 69.290667 35.242667 100.352 93.184 116.48l38.826666 10.752c44.8 13.738667 59.733333 26.88 59.733334 60.928 0 37.034667-23.296 59.733333-78.250667 59.733334-44.8 0-83.626667-10.752-116.48-25.088v57.941333c28.074667 14.933333 68.693333 26.282667 122.453333 26.282667z" fill="#FFFFFF" p-id="2780"></path></svg>

package/packages/KlinePlus/images/t.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683703228202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3078" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M198.016 109.738667A77.866667 77.866667 0 0 0 170.666667 167.68l0.512 418.944c0 22.869333 6.4 48 19.029333 75.306667 12.672 27.221333 27.989333 48.938667 45.952 64.938666l211.157333 188.202667c17.066667 15.488 40.576 23.978667 64.938667 23.594667 25.685333-0.085333 47.36-7.936 64.981333-23.594667l211.2-188.202667c17.92-16 33.194667-37.632 45.866667-64.938666 12.672-27.306667 18.773333-52.224 18.517333-74.922667L853.333333 167.253333c0-22.272-8.96-41.472-26.837333-57.472-17.578667-15.616-39.338667-23.893333-64.938667-24.405333l-499.029333 0.469333a93.312 93.312 0 0 0-64.512 23.893334z" fill="#C880FF" p-id="3079"></path><path d="M170.666667 167.68c0.128-21.76 9.941333-42.666667 27.349333-57.941333a93.312 93.312 0 0 1 64.512-23.893334L761.557333 85.333333c25.6 0.554667 47.36 8.789333 64.938667 24.405334 17.92 16 26.837333 35.2 26.837333 57.472l-0.512 419.84c0.298667 22.656-5.845333 47.616-18.517333 74.88-12.672 27.306667-27.946667 48.938667-45.866667 64.938666l-211.2 188.202667c-17.621333 15.658667-39.253333 23.509333-64.981333 23.594667a94.72 94.72 0 0 1-64.938667-23.594667l-211.2-188.202667c-17.92-16-33.237333-37.717333-45.909333-64.938666-12.629333-27.306667-19.029333-52.437333-19.029333-75.306667L170.666667 167.68z m42.624 0.256l0.554666 418.688c0 16.170667 4.864 35.328 15.061334 57.344 10.368 22.272 22.314667 39.168 35.626666 51.029333l211.413334 188.416c8.96 8.106667 21.888 12.8 36.224 12.586667 15.530667-0.042667 27.093333-4.266667 36.693333-12.8l211.114667-188.16c13.354667-11.946667 25.301333-28.842667 35.626666-51.072 10.112-21.76 14.762667-40.533333 14.506667-57.002667L810.666667 167.210667c0-9.898667-3.584-17.621333-12.501334-25.6A54.698667 54.698667 0 0 0 761.6 128l-499.626667 0.469333a51.328 51.328 0 0 0-35.754666 13.269334 36.565333 36.565333 0 0 0-12.501334 21.504l-0.426666 4.693333z" fill="#AE44FF" p-id="3080"></path><path d="M475.306667 658.218667h73.472V306.389333h116.48V248.448h-307.626667v57.941333h117.674667z" fill="#FFFFFF" p-id="3081"></path></svg>

package/packages/KlinePlus/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import StKlinePlus from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("st-klinePlus", StKlinePlus);
+  },
+}