st-comp 0.0.244 → 0.0.246

package/packages/VarietySearch/components/CompositeOrder/index.vue

@@ -1,16 +1,15 @@
 <script setup>
-import { actionStat } from "st-func";
 import { Close, Plus } from "@element-plus/icons-vue";
 import { ref, watch, computed, inject } from "vue";
 
 const clearRow = inject("clearRow");
 
 const data = defineModel("data", { default: [] });
+const emit = defineEmits(["actionState"]);
 const props = defineProps({
   config: { type: Object, default: () => {} },
   varietyMarket: { type: null || Number, default: () => null }, // 已选品种市场
   commonOption: { type: Array, default: () => [] }, // 已选常用选项
-  pageName: { type: String, default: "" },
 });
 const visible = ref(false);
 const compositeOrderForm = ref({
@@ -60,8 +59,7 @@ const handleAction = (action, index) => {
     }
     // 窗口确认
     case "submit": {
-      props.pageName && actionStat(props.pageName, "组合排序");
-
+      emit("actionState", "组合排序");
       const { id, name, value } = compositeOrderForm.value;
       if (!name) return ElMessage.warning("请选择需要排序的条件");
       const { label } = compositeOrderOptions.value.find((item) => item.key === name);

package/packages/VarietySearch/components/FactorScreen/index.vue

@@ -1,6 +1,5 @@
 <!-- 因子筛选组件 -->
 <script setup name="FactorScreen">
-import { actionStat } from "st-func";
 import { nextTick, ref, watch, inject, reactive } from "vue";
 import { Close, Plus, CircleCloseFilled, InfoFilled, Document } from "@element-plus/icons-vue";
 import { handleVerifyScore, extractConditionDetails, extractVariables, sendToAi } from "./tools.js";
@@ -9,6 +8,7 @@ import MonacoEditor from "../../../MonacoEditor/index.vue";
 
 const { request } = inject("stConfig"); // 组件库全局配置
 
+const emit = defineEmits(["actionState"]);
 const props = defineProps({
   config: {
     type: Object,
@@ -21,7 +21,6 @@ const props = defineProps({
       factorDescriptions: [], // 因子使用说明数据源
     },
   },
-  pageName: { type: String, default: "" },
 });
 const data = defineModel("data", {
   default: {
@@ -324,7 +323,7 @@ const handleScriptCopy = async () => {
     ElMessage.success("脚本内容已经成功复制到粘贴板");
   } finally {
     scriptCopyLoading.value = false;
-    props.pageName && actionStat(props.pageName, "因子筛选", "复制");
+    emit("actionState", "因子筛选", "复制");
   }
 };
 
@@ -376,7 +375,7 @@ const handleScriptTest = async (action) => {
         }
       } finally {
         scriptTestLoading.value = false;
-        props.pageName && actionStat(props.pageName, "因子筛选", "测试");
+        emit("actionState", "因子筛选", "测试");
       }
       break;
     }
@@ -391,7 +390,7 @@ const handleScriptTest = async (action) => {
 };
 // 测试: AI分析
 const handleTestAi = () => {
-  props.pageName && actionStat(props.pageName, "因子筛选", "AI分析");
+  emit("actionState", "因子筛选", "AI分析");
   const appId = "87be17ecc84d4d2ea3108d7155bec2ac";
   const apiKey = "sk-d995eb26a4334bdeb2ccb4cbfaf51de8";
   scriptAILoading.value = true;
@@ -402,7 +401,6 @@ const handleTestAi = () => {
       return;
     }
     scriptTestResult.ai = scriptTestResult.ai + res;
-    console.log(scriptTestResult.ai);
   });
 };
 
@@ -574,7 +572,7 @@ watch(
                 v-show="factorType === '脚本'"
                 size="small"
                 @insert="handleInsertCustomFunction"
-                :pageName="pageName"
+                @actionState="(...args) => emit('actionState', ...args)"
               />
               <el-button
                 type="primary"

package/packages/VarietySearch/index.vue

@@ -6,10 +6,8 @@ import CommonIndicator from "./components/CommonIndicator/index.vue";
 import CompositeOrder from "./components/CompositeOrder/index.vue";
 import AddTag from "./components/AddTag/index.vue";
 
-const props = defineProps({
-  config: { type: Object, default: {} },
-  pageName: { type: String, default: "" },
-});
+const emit = defineEmits(["actionState"]);
+const props = defineProps({ config: { type: Object, default: {} } });
 const searchData = defineModel("searchData");
 searchData.value = Object.assign(searchData.value, {
   // 品种市场
@@ -600,7 +598,7 @@ defineExpose({
         <FactorScreen
           v-model:data="searchData.factorScreen"
           :config="config.factorScreen"
-          :pageName="pageName"
+          @actionState="(...args) => emit('actionState', ...args)"
         />
       </div>
     </template>
@@ -617,7 +615,7 @@ defineExpose({
       :varietyMarket="searchData.varietyMarket"
       :commonOption="searchData.commonOption"
       :config="config.compositeOrder"
-      :pageName="pageName"
+      @actionState="(...args) => emit('actionState', ...args)"
     />
   </div>
 </template>

package/src/pages/KlineBasic/api.js

@@ -1,7 +1,12 @@
 import axios from "axios";
 
-const token = "8461980aa5ae69587e642326d4c030a2";
-const host = "http://192.168.12.38:5173";
+// 测试环境
+// 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 () => {
@@ -21,7 +26,6 @@ export const getConfig = async () => {
   });
   return res.data;
 }
-
 // 设置配置
 export const setConfig = async (data) => {
   const res = await axios({
@@ -32,7 +36,6 @@ export const setConfig = async (data) => {
   });
   return res.data;
 }
-
 // 获取周期列表
 export const getCycleList = async () => {
   const res = await axios({

package/src/pages/KlineBasic/index.vue

@@ -1,76 +1,366 @@
 <template>
-  <div style="width: 100%;height: 100%;">
-    <div style="height: 42px">
-      <el-input v-model="variety" style="width: 120px; margin-right: 12px;" />
-      <el-input v-model="varietyName" style="width: 120px; margin-right: 12px;" />
-      <el-input v-model="featureId" style="width: 120px; margin-right: 12px;" />
-      <el-input v-model="featureType" style="width: 120px; margin-right: 12px;" />
-      <el-select v-model="cycle" style="width: 120px; margin-right: 12px;" >
-        <el-option
-          v-for="item in cycleOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
+  <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-select>
-      <el-select v-model="mainIndicator" style="width: 120px;" >
-        <el-option
-          v-for="(item, index) in indicatorStore.mainIndicatorList"
-          :key="index"
-          :label="item.label"
-          :value="item.value"
+        <el-input 
+          v-model="singleConfig.varietyName" 
+          placeholder="品种名称" 
+          size="small"
+          style="width: 120px;"
         />
-      </el-select>
+        <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 style="height: calc(100% - 42px);" v-if="show">
-      <st-klineBasic
-        :variety="variety"
-        :varietyName="varietyName"
-        :featureId="featureId"
-        :featureType="featureType"
-        :cycle="cycle"
-        :mainIndicator="mainIndicator"
-        :indicatorStore="indicatorStore"
-        :config="config"
-        :env="{ VITE_BASE_URL: 'http://192.168.12.38:5173' }"
-        :brushRange="['2025-06-03 00:00:00', '2025-06-05 23:59:59']"
-      />
+    
+    <!-- 图表展示区域 -->
+    <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, onMounted } from 'vue';
+import { ref, reactive, computed, onMounted, watch } from 'vue';
 import useIndicatorStore from './indicator';
-import { getCycleList } from './api';
-
-const freqOptions = ['1m', '5m', '15m', '30m', '60m', '1d', '1w', '1mon']
+import { getCycleList, host } from './api';
 
 const indicatorStore = useIndicatorStore();
 
-const show = ref(false)
-const variety = ref('000001');
-const varietyName = ref('平安银行');
-const featureId = ref('88')
-const featureType = ref('3')
+// 显示模式
+const displayMode = ref('single'); // single: 单周期, multi: 多周期
+const show = ref(false);
+
+// 周期映射
+const cycleMap = {
+  '15m': { value: '1', label: '15分钟' },
+  '30m': { value: '2', label: '30分钟' },
+  '60m': { value: '3', label: '60分钟' },
+  '1d': { value: '6', label: '日线' },
+  '1w': { value: '7', label: '周线' },
+  '1mon': { value: '8', label: '月线' }
+};
+
+// 多周期展示的周期列表
+const multiCycleList = [
+  { cycle: '1', cycleLabel: '15分钟' },   // 15m
+  { cycle: '2', cycleLabel: '30分钟' },   // 30m
+  { cycle: '3', cycleLabel: '60分钟' },   // 60m
+  { cycle: '6', cycleLabel: '日线' },     // 1d
+  { cycle: '7', cycleLabel: '周线' },     // 1w
+  { cycle: '8', cycleLabel: '月线' }      // 1mon
+];
+
+// 周期选项
 const cycleOptions = ref([]);
-const cycle = ref('');
-const mainIndicator = ref('DKX_EMA')
-const config = ref({
-  defaultShowCounts: 500, // 默认展示条数
-  maxShowCounts: 5000, // 单页最大展示条数
-  showSubChart: true, // 是否展示副图
-})
 
+// 单周期配置
+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 }))
-  cycle.value = cycleOptions.value[1].value
-  show.value = true
-})
+  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%;
+}
 
-</style>
+// 多周期模式 - 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/VarietySearch/index.vue

@@ -48,7 +48,7 @@ const getTableData = async () => {
    * @description: 根据用户最后一次操作交互的时机, 决定排序使用哪个维度
    * 常规排序字段: orderByInfo
    * 表头的orderByInfo和预警组的orderByInfo为顺序互斥, 谁最后操作就用谁
-   * 
+   *
    * 组合排序字段: compositeOrder
    * 表头的orderByInfo与compositeOrder为顺序互斥, 谁最后操作就用谁
    * 预警组的orderByInfo与compositeOrder为强制互斥, compositeOrder有值就一定优先使用compositeOrder
@@ -105,6 +105,10 @@ const sortChange = ({ column, prop, order }) => {
   getTableData();
 };
 
+const actionState = (...args) => {
+  console.log(...args);
+};
+
 onMounted(async () => {
   const dicAlar = await getAlarDict();
   const dicCycle = await getAlarFreq();
@@ -181,7 +185,7 @@ watch(
   },
   {
     deep: true,
-  }
+  },
 );
 </script>
 
@@ -191,6 +195,7 @@ watch(
       ref="varietySearchRef"
       v-model:searchData="varietySearchData"
       :config="varietySearchConfig"
+      @actionState="actionState"
     />
     <div>品种池组件接口参数: {{ apiParams }}</div>
     <el-button