st-comp 0.0.277 → 0.0.279

package/src/pages/KlineBasic/api.js

@@ -1,48 +0,0 @@
-import axios from "axios";
-
-// 测试环境
-// const token = "dc4eb64816effa53ccee0de7a02e777b";
-// export const host = "http://192.168.12.38:5173";
-
-// 线上环境
-const token = "10831ed6ce9ff2652a732f63c5d79c5c";
-export const host = "//investapi.hzyotoy.com";
-
-// 获取指标线配置
-export const getIndicator = async () => {
-  const res = await axios({
-    method: "post",
-    headers: { token },
-    url: `${host}/middleLayer/kline/getIndicator`,
-  });
-  return res.data;
-}
-// 获取配置
-export const getConfig = async () => {
-  const res = await axios({
-    method: "get",
-    headers: { token },
-    url: `${host}/middleLayer/get/invest/sys/frontconfig/info`,
-  });
-  return res.data;
-}
-// 设置配置
-export const setConfig = async (data) => {
-  const res = await axios({
-    method: "post",
-    headers: { token },
-    url: `${host}/middleLayer/post/invest/sys/frontconfig/save`,
-    data,
-  });
-  return res.data;
-}
-// 获取周期列表
-export const getCycleList = async () => {
-  const res = await axios({
-    method: "post",
-    headers: { token },
-    url: `${host}/middleLayer/post/common/qt/getDict`,
-    data: { dictIds: [1002] },
-  });
-  return res.data;
-}

package/src/pages/KlineBasic/index.vue

@@ -1,366 +0,0 @@
-<template>
-  <div style="width: 100%;height: 100%; display: flex; flex-direction: column;">
-    <!-- 工具栏 -->
-    <div style="height: 42px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 12px; flex-shrink: 0;">
-      <el-radio-group v-model="displayMode" size="small" @change="handleModeChange">
-        <el-radio-button value="single">单周期</el-radio-button>
-        <el-radio-button value="multi">多周期</el-radio-button>
-      </el-radio-group>
-      
-      <el-divider direction="vertical" />
-      
-      <!-- 单周期模式下的配置 -->
-      <template v-if="displayMode === 'single'">
-        <el-input 
-          v-model="singleConfig.variety" 
-          placeholder="品种代码" 
-          size="small"
-          style="width: 120px;"
-        />
-        <el-input 
-          v-model="singleConfig.varietyName" 
-          placeholder="品种名称" 
-          size="small"
-          style="width: 120px;"
-        />
-        <el-input 
-          v-model="singleConfig.featureId" 
-          placeholder="合约ID" 
-          size="small"
-          style="width: 120px;"
-        />
-        <el-input 
-          v-model="singleConfig.featureType" 
-          placeholder="合约类型" 
-          size="small"
-          style="width: 120px;"
-        />
-        <el-select 
-          v-model="singleConfig.cycle" 
-          placeholder="周期" 
-          size="small"
-          style="width: 120px;"
-        >
-          <el-option
-            v-for="item in cycleOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <el-select 
-          v-model="singleConfig.mainIndicator" 
-          placeholder="主图指标" 
-          size="small"
-          style="width: 120px;"
-        >
-          <el-option
-            v-for="(item, index) in indicatorStore.mainIndicatorList"
-            :key="index"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </template>
-      
-      <!-- 多周期模式下的配置（共用基础信息） -->
-      <template v-if="displayMode === 'multi'">
-        <el-input 
-          v-model="multiBaseConfig.variety" 
-          placeholder="品种代码" 
-          size="small"
-          style="width: 120px;"
-          @change="refreshMultiCharts"
-        />
-        <el-input 
-          v-model="multiBaseConfig.varietyName" 
-          placeholder="品种名称" 
-          size="small"
-          style="width: 120px;"
-          @change="refreshMultiCharts"
-        />
-        <el-input 
-          v-model="multiBaseConfig.featureId" 
-          placeholder="合约ID" 
-          size="small"
-          style="width: 120px;"
-          @change="refreshMultiCharts"
-        />
-        <el-input 
-          v-model="multiBaseConfig.featureType" 
-          placeholder="合约类型" 
-          size="small"
-          style="width: 120px;"
-          @change="refreshMultiCharts"
-        />
-        <el-select 
-          v-model="multiBaseConfig.mainIndicator" 
-          placeholder="主图指标" 
-          size="small"
-          style="width: 120px;"
-          @change="refreshMultiCharts"
-        >
-          <el-option
-            v-for="(item, index) in indicatorStore.mainIndicatorList"
-            :key="index"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </template>
-    </div>
-    
-    <!-- 图表展示区域 -->
-    <div 
-      class="charts-container" 
-      :style="{
-        height: 'calc(100% - 42px)',
-        overflow: 'auto'
-      }"
-    >
-      <!-- 单周期模式：单个图表 -->
-      <div 
-        v-if="displayMode === 'single' && show"
-        class="single-chart"
-      >
-        <st-klineBasic
-          :key="singleChartKey"
-          :variety="singleConfig.variety"
-          :varietyName="singleConfig.varietyName"
-          :featureId="singleConfig.featureId"
-          :featureType="singleConfig.featureType"
-          :cycle="singleConfig.cycle"
-          :mainIndicator="singleConfig.mainIndicator"
-          :indicatorStore="indicatorStore"
-          :env="{ VITE_BASE_URL: host }"
-          :brushRange="['2025-06-03 00:00:00', '2025-06-05 23:59:59']"
-        />
-      </div>
-      
-      <!-- 多周期模式：6个图表网格布局 -->
-      <div 
-        v-if="displayMode === 'multi' && show"
-        class="multi-charts-grid"
-      >
-        <div 
-          v-for="(chart, index) in multiCharts" 
-          :key="`${chart.cycle}-${multiBaseConfig.variety}`"
-          class="multi-chart-item"
-        >
-          <div class="multi-chart-header">
-            <span class="multi-chart-title">{{ chart.cycleLabel }}</span>
-          </div>
-          <div class="multi-chart-content">
-            <st-klineBasic
-              :ref="(el) => setChartRef(el, chart.cycle)"
-              :variety="multiBaseConfig.variety"
-              :varietyName="multiBaseConfig.varietyName"
-              :featureId="multiBaseConfig.featureId"
-              :featureType="multiBaseConfig.featureType"
-              :cycle="chart.cycle"
-              :mainIndicator="multiBaseConfig.mainIndicator"
-              :indicatorStore="indicatorStore"
-              :env="{ VITE_BASE_URL: host }"
-              :brushRange="['2025-06-03 00:00:00', '2025-06-05 23:59:59']"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, computed, onMounted, watch } from 'vue';
-import useIndicatorStore from './indicator';
-import { getCycleList, host } from './api';
-
-const indicatorStore = useIndicatorStore();
-
-// 显示模式
-const displayMode = ref('multi'); // single: 单周期, multi: 多周期
-const show = ref(false);
-
-// 周期映射
-const cycleMap = {
-  '15m': { value: '3', label: '15分钟' },
-  '30m': { value: '4', label: '30分钟' },
-  '60m': { value: '5', label: '60分钟' },
-  '1d': { value: '6', label: '日线' },
-  '1w': { value: '7', label: '周线' },
-  '1mon': { value: '8', label: '月线' }
-};
-
-// 多周期展示的周期列表
-const multiCycleList = [
-  { cycle: '3', cycleLabel: '15分钟' },   // 15m
-  { cycle: '4', cycleLabel: '30分钟' },   // 30m
-  { cycle: '5', cycleLabel: '60分钟' },   // 60m
-  { cycle: '6', cycleLabel: '日线' },     // 1d
-  { cycle: '7', cycleLabel: '周线' },     // 1w
-  { cycle: '8', cycleLabel: '月线' }      // 1mon
-];
-
-// 周期选项
-const cycleOptions = ref([]);
-
-// 单周期配置
-const singleConfig = reactive({
-  variety: '000001',
-  varietyName: '平安银行',
-  featureId: 88,
-  featureType: '3',
-  cycle: '',
-  mainIndicator: 'DKX_EMA'
-});
-
-// 多周期基础配置（共用）
-const multiBaseConfig = reactive({
-  variety: '000001',
-  varietyName: '平安银行',
-  featureId: 88,
-  featureType: '3',
-  mainIndicator: 'DKX_EMA'
-});
-
-// 多周期图表数据
-const multiCharts = ref(multiCycleList);
-
-// 存储图表实例引用（用于需要时手动刷新）
-const chartRefs = ref({});
-
-// 单图表刷新key
-const singleChartKey = ref(0);
-
-// 设置图表引用
-const setChartRef = (el, cycle) => {
-  if (el) {
-    chartRefs.value[cycle] = el;
-  }
-};
-
-// 刷新多周期图表
-const refreshMultiCharts = () => {
-  // 通过重新生成key来强制刷新
-  multiCharts.value = [...multiCycleList];
-};
-
-// 模式切换处理
-const handleModeChange = () => {
-  // 切换模式时不需要额外操作，Vue会自动重新渲染
-};
-
-// 监听单周期配置变化，刷新图表
-watch(
-  () => [singleConfig.variety, singleConfig.cycle, singleConfig.mainIndicator],
-  () => {
-    if (displayMode.value === 'single') {
-      singleChartKey.value++;
-    }
-  }
-);
-
-// 监听多周期基础配置变化，刷新所有图表
-watch(
-  () => [multiBaseConfig.variety, multiBaseConfig.mainIndicator],
-  () => {
-    if (displayMode.value === 'multi') {
-      refreshMultiCharts();
-    }
-  }
-);
-
-// 初始化
-onMounted(async () => {
-  await indicatorStore.init();
-  const res = await getCycleList();
-  cycleOptions.value = res?.body?.[1002].map(item => ({ 
-    label: item.dictName, 
-    value: item.dictCode 
-  }));
-  
-  // 设置默认周期（取第二个选项，通常是日线）
-  if (cycleOptions.value.length > 1) {
-    singleConfig.cycle = cycleOptions.value[1].value;
-  } else if (cycleOptions.value.length > 0) {
-    singleConfig.cycle = cycleOptions.value[0].value;
-  }
-  
-  show.value = true;
-});
-</script>
-
-<style lang="scss" scoped>
-.charts-container {
-  flex: 1;
-  overflow: auto;
-  padding: 12px;
-  background: #f5f5f5;
-}
-
-// 单周期模式
-.single-chart {
-  width: 100%;
-  height: 100%;
-  min-height: 600px;
-  background: #000;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-// 多周期模式 - 网格布局
-.multi-charts-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-  width: 100%;
-}
-
-// 多周期模式 - 6宫格布局
-.multi-charts-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr); // 3列
-  grid-template-rows: repeat(2, 1fr); // 2行，每行占满剩余空间
-  gap: 12px;
-  width: 100%;
-  height: 100%; // 占满父容器高度
-  min-height: 0; // 确保grid可以正确收缩
-  
-  .multi-chart-item {
-    background: #000;
-    border-radius: 4px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    min-height: 0; // 确保flex子项可以正确收缩
-    height: 100%; // 占满grid单元格高度
-    
-    .multi-chart-header {
-      height: 32px;
-      padding: 0 12px;
-      background: #1a1a1a;
-      display: flex;
-      align-items: center;
-      border-bottom: 1px solid #333;
-      flex-shrink: 0; // 头部固定高度，不收缩
-      
-      .multi-chart-title {
-        font-size: 14px;
-        font-weight: 500;
-        color: #fff;
-      }
-    }
-    
-    .multi-chart-content {
-      flex: 1; // 占满剩余空间
-      min-height: 0; // 确保内容区域可以正确收缩
-      position: relative;
-      
-      // 确保K线组件占满容器
-      :deep(.klineBasic) {
-        height: 100%;
-      }
-    }
-  }
-}
-</style>

package/src/pages/KlineBasic/indicator.js

@@ -1,114 +0,0 @@
-import { defineStore } from 'pinia'
-import { getConfig, setConfig, getIndicator } from './api'
-
-const useIndicatorStore = defineStore(
-  'indicator',
-  {
-    state: () => ({
-      visible: false, // 是否显示配置弹窗
-      originConfig: {}, // 原始配置
-      filterIndicator: {}, // 内置指标过滤配置
-      customIndicator: [], // 自定义指标配置
-      mainSystemIndicatorList: [], // 内置主图指标配置
-      subIndicatorList: [], // 副图指标配置
-      indicatorItemList: [], // 指标项配置
-    }),
-    getters: {
-      mainIndicatorList: state => { // 主图指标列表（过滤隐藏的指标）
-        return [
-          ...state.mainSystemIndicatorList,
-          ...state.customIndicator,
-        ]
-      },
-      // 获取指标项配置
-      getIndicatorParams: state => {
-        return (mainIndicator) => {
-          let indicatorParams = []
-          state.mainSystemIndicatorList.forEach(item => {
-            if (item.label === mainIndicator) {
-              const filterConfig = state.filterIndicator[mainIndicator] || []
-              indicatorParams = item.config.filter(i => !filterConfig.includes(i.key)).map(i => i.key)
-            }
-          })
-          state.customIndicator.forEach(item => {
-            if (item.label === mainIndicator) {
-              indicatorParams = item.config.map(i => i.key)
-            }
-          })
-          return indicatorParams
-        }
-      },
-    },
-    actions: {
-      // 初始化配置
-      async init() {
-        const indicatorRes = await getIndicator()
-        this.mainSystemIndicatorList = indicatorRes?.body?.mainIndicatorList || []
-        this.subIndicatorList = indicatorRes?.body?.subIndicatorList || []
-        this.indicatorItemList = indicatorRes?.body?.indicatorItemList || []
-        const res = await getConfig()
-        let originConfig = {}
-        let filterIndicator = {}
-        let customIndicator = []
-        if (res.data) {
-          originConfig = JSON.parse(res.data)
-          filterIndicator = originConfig.filterIndicator || {}
-          customIndicator = originConfig.customIndicator || []
-        }
-        this.originConfig = originConfig
-        this.filterIndicator = filterIndicator
-        this.customIndicator = customIndicator
-      },
-      // 代开配置弹窗
-      config() {
-        this.visible = true
-      },
-      // 更新内置指标过滤配置
-      async setFilterIndicator(key, filterIndicatorList) {
-        await setConfig({
-          data: JSON.stringify({
-            ...this.originConfig,
-            filterIndicator: {
-              ...this.filterIndicator,
-              [key]: filterIndicatorList
-            }
-          })
-        })
-        this.filterIndicator[key] = filterIndicatorList
-      },
-      // 更新自定义指标配置配置
-      async setCustomIndicator({ label, config, originLabel, type }) {
-        let newCustomIndicator = [...this.customIndicator]
-        if (type === 'add') {
-          // 新增指标
-          newCustomIndicator = [...newCustomIndicator, { label, value: label, config: [], type: 'custom' }]
-        } else if (type === 'editLabel') {
-          // 编辑指标名称
-          newCustomIndicator = newCustomIndicator.map(item => {
-            if (item.label === originLabel) {
-              return { ...item, label, value: label }
-            }
-            return item
-          })
-        } else if (type === 'editConfig') {
-          // 编辑指标配置
-          newCustomIndicator = newCustomIndicator.map(item => {
-            if (item.label === label) {
-              return { ...item, config }
-            }
-            return item
-          })
-        } else if (type === 'delete') {
-          // 删除指标
-          newCustomIndicator = newCustomIndicator.filter(item => item.label !== label)
-        }
-        await setConfig({
-          data: JSON.stringify({ ...this.originConfig, customIndicator: newCustomIndicator })
-        })
-        this.customIndicator = newCustomIndicator
-      },
-    }
-  }
-)
-
-export default useIndicatorStore

package/src/pages/KlineConfig/index.vue

@@ -1,20 +0,0 @@
-<template>
-  <div>
-    <el-button @click="stKlineConfigRef?.open">打开K线自定义配置</el-button>
-    <st-klineConfig
-      ref="stKlineConfigRef"
-      :indicatorStore="indicatorStore"
-      @callBack="(formJson) => console.log(formJson)"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-const stKlineConfigRef = ref(null);
-const indicatorStore = {
-  mainIndicatorList: [{ label: "MA", value: "MA" }],
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/pages/KlineNew/components/KlineAction/components/ContextMenu/index.vue

@@ -1,91 +0,0 @@
-<!-- 提供右键菜单的父级DOM组件 -->
-<template>
-  <div ref="contextmenuRef" class="contextmenu" @contextmenu="handleContextMenu" @mouseleave="handleMouseLeave">
-    <!-- 主DOM插槽 -->
-    <slot />
-    <!-- 自定义菜单插槽 -->
-    <div ref="menuRef" v-if="menuStyle.display !== 'none'" class="contextmenu-popover" :style="menuStyle">
-      <slot name="popover" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, nextTick } from "vue";
-// 自定义事件函数: 关闭悬浮菜单回调
-const emits = defineEmits(["closeMenuCallBack"]);
-// 组件Ref
-const contextmenuRef = ref();
-// 悬浮菜单Ref
-const menuRef = ref();
-// 悬浮菜单样式
-const menuStyle = ref({
-  display: "none", // 是否展示
-  top: "0px", // 位置:上边距
-  left: "0px", // 位置:左边距
-});
-
-// 打开悬浮菜单
-const handleContextMenu = (el) => {
-  // 1.阻止默认事件 + 冒泡
-  el.preventDefault();
-  el.stopPropagation();
-  // @todo: 解决: 右键菜单项,重复触发本函数导致菜单位置异常问题
-  if (menuStyle.value.display === "block") {
-    // 判断鼠标位置是否在悬浮菜单内,如果是,则return,否则继续执行在新的位置打开
-    const { offsetX, offsetY } = el; // 鼠标
-    const { offsetWidth, offsetHeight } = menuRef.value;
-    if (offsetX <= offsetWidth && offsetY <= offsetHeight) {
-      return;
-    }
-  }
-  contextmenuRef.value.click();
-  // 2.初始化展示悬浮菜单位置
-  menuStyle.value = {
-    display: "block",
-    top: `${el.offsetY}px`,
-    left: `${el.offsetX}px`,
-  };
-  // 3.计算悬浮菜单是否超出范围
-  nextTick(() => {
-    const { bottom, height, right, width } = menuRef.value.getBoundingClientRect();
-    if (bottom > window.innerHeight) {
-      // 高度超出
-      menuStyle.value = {
-        display: "block",
-        top: `${el.offsetY - height}px`,
-        left: `${el.offsetX}px`,
-      };
-    } else if (right > window.innerWidth) {
-      // 宽度超出
-      menuStyle.value = {
-        display: "block",
-        top: `${el.offsetY}px`,
-        left: `${el.offsetX - width}px`,
-      };
-    }
-  });
-  // 4.监听点击事件 -> 调用关闭悬浮菜单事件
-  document.addEventListener("click", handleMouseLeave);
-};
-
-// 关闭悬浮菜单
-const handleMouseLeave = () => {
-  menuStyle.value.display = "none";
-  emits("closeMenuCallBack");
-  document.removeEventListener("click", handleMouseLeave);
-};
-</script>
-
-<style lang="scss" scoped>
-.contextmenu {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  &-popover {
-    position: absolute;
-    z-index: 10;
-    display: none;
-  }
-}
-</style>