st-comp 0.0.247 → 0.0.249

package/package.json

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

package/packages/KlinePlus/index.vue

@@ -11,7 +11,6 @@ import SliderChart from "./components/SliderChart.vue";
 const { round, formatValue } = stMath;
 const { request } = inject("stConfig"); // 组件库全局配置
 
-const sliderChartRef = ref();
 const loading = ref(false);
 const isHover = ref(false);
 const props = defineProps({
@@ -53,8 +52,9 @@ let isloadAllHistory = false;
 let resizeRo = null;
 let subChartIns = null;
 let mainChartIns = null;
-const subChartRef = ref(null);
 const mainChartRef = ref(null);
+const subChartRef = ref(null);
+const sliderChartRef = ref(null);
 
 // K线数据
 const klineData = ref({
@@ -112,57 +112,73 @@ const subIndicatorTips = computed(() => {
 
 // 图表: 初始化
 const initChart = () => {
-  if (mainChartIns) return;
+  // 检查DOM元素是否存在
+  if (!mainChartRef.value) {
+    console.warn("[K线] 主图DOM元素不存在，取消初始化");
+    return false;
+  }
+  if (mainChartIns) return true;
 
-  // 主图
-  mainChartIns = echarts.init(mainChartRef.value);
-  mainChartIns.on(
-    "highlight",
-    debounce((params) => {
-      if (params.dataIndex) {
-        activeIndex.value = params.dataIndex;
-      } else {
-        activeIndex.value = params.batch?.[0].dataIndex ?? -1;
+  try {
+    // 主图
+    mainChartIns = echarts.init(mainChartRef.value);
+    mainChartIns.on(
+      "highlight",
+      debounce((params) => {
+        if (params.dataIndex) {
+          activeIndex.value = params.dataIndex;
+        } else {
+          activeIndex.value = params.batch?.[0].dataIndex ?? -1;
+        }
+      }, 10),
+    );
+    mainChartIns.on(
+      "datazoom",
+      debounce(async () => {
+        const { loadCheckCount } = loadKlineConfig;
+        const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
+        // 当前开始索引 < 阈值边界, 触发加载更多数据
+        if (isLoadHistory === false && isloadAllHistory === false && startValue < loadCheckCount) await getMoreData("history");
+        // 当前结束索引 > 阈值边界, 触发加载更多数据
+        if (isLoadNew === false && isloadAllNew === false && endValue > klineData.value.time.length - loadCheckCount) await getMoreData("new");
+        getScreenTimeRange();
+        drawScreenMaxPrice();
+      }),
+    );
+    mainChartIns.on("globalout", () => {
+      if (mainChartIns) {
+        const option = mainChartIns.getOption();
+        activeIndex.value = option.dataZoom[0].endValue;
       }
-    }, 10)
-  );
-  mainChartIns.on(
-    "datazoom",
-    debounce(async () => {
-      const { loadCheckCount } = loadKlineConfig;
-      const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
-      // 当前开始索引 < 阈值边界, 触发加载更多数据
-      if (isLoadHistory === false && isloadAllHistory === false && startValue < loadCheckCount) await getMoreData("history");
-      // 当前结束索引 > 阈值边界, 触发加载更多数据
-      if (isLoadNew === false && isloadAllNew === false && endValue > klineData.value.time.length - loadCheckCount) await getMoreData("new");
-      getScreenTimeRange();
-      drawScreenMaxPrice();
-    })
-  );
-  mainChartIns.on("globalout", () => {
-    const option = mainChartIns.getOption();
-    activeIndex.value = option.dataZoom[0].endValue;
-  });
-  mainChartIns.getZr().on("contextmenu", () => {
-    contextmenuKlineTime.value = klineData.value?.time[activeIndex.value];
-  });
-  window.addEventListener("keydown", handleKeyDownEvent);
+    });
+    mainChartIns.getZr().on("contextmenu", () => {
+      contextmenuKlineTime.value = klineData.value?.time[activeIndex.value];
+    });
+    window.addEventListener("keydown", handleKeyDownEvent);
 
-  // 副图
-  if (props.userKlineConfig.enable_subChart) {
-    subChartIns = echarts.init(subChartRef.value);
-    echarts.connect([mainChartIns, subChartIns]);
-  }
+    // 副图
+    if (props.userKlineConfig.enable_subChart && subChartRef.value) {
+      subChartIns = echarts.init(subChartRef.value);
+      echarts.connect([mainChartIns, subChartIns]);
+    }
 
-  // DOM缩放
-  resizeRo = addResizeListener(mainChartRef.value);
-  resizeRo.listen(() => {
-    requestAnimationFrame(() => {
-      mainChartIns.resize();
-      subChartIns?.resize();
-      sliderChartRef.value?.resize();
-    });
-  });
+    // DOM缩放
+    if (mainChartRef.value) {
+      resizeRo = addResizeListener(mainChartRef.value);
+      resizeRo.listen(() => {
+        requestAnimationFrame(() => {
+          mainChartIns?.resize();
+          subChartIns?.resize();
+          sliderChartRef.value?.resize();
+        });
+      });
+    }
+
+    return true;
+  } catch (error) {
+    console.error("[st-klinePlus]: 初始化异常:", error);
+    return false;
+  }
 };
 // 图表: 获取数据 [首屏]
 const getMainData = async ({ startTime, endTime }) => {
@@ -312,7 +328,16 @@ const getScreenTimeRange = () => {
 
 // 图表: 绘制(主流程)
 const draw = (params = { startValue: 0, endValue: 0 }) => {
-  initChart();
+  const isInitialized = initChart();
+  // 确保图表存在
+  if (!isInitialized || !mainChartIns) {
+    return console.warn("[st-klinePlus]: 图表未准备就绪, 跳过绘制");
+  }
+  // 检查数据是否存在
+  if (!klineData.value.time.length) {
+    return console.warn("[st-klinePlus]: 图表无数据, 跳过绘制");
+  }
+
   const { maxValueSpan } = loadKlineConfig;
   const { time, data, mainIndicator } = klineData.value;
 
@@ -570,7 +595,7 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
         },
       },
     },
-    true
+    true,
   );
   if (props.userKlineConfig.enable_subChart) {
     subChartIns.setOption(getSubOptions(klineData.value, startValue, endValue), true);
@@ -712,7 +737,7 @@ const drawScreenMaxPrice = () => {
     {
       notMerge: false, // 合并模式
       replaceMerge: [], // 不替换任何配置
-    }
+    },
   );
 };
 
@@ -727,6 +752,7 @@ const handleSliderChange = (params) => {
 };
 // 键盘控制 [↑↓←→缩放平移]
 const handleKeyDownEvent = ({ code, ctrlKey }) => {
+  if (!mainChartIns) return;
   if (!(ctrlKey || isHover.value)) return;
   const { xAxis, dataZoom } = mainChartIns.getOption();
   const { data: xAxisData } = xAxis?.[0] ?? { data: [] };
@@ -801,7 +827,7 @@ watch(
     const [startTime, endTime] = props.initTimeRange;
     getMainData({ startTime, endTime });
   },
-  { deep: true }
+  { deep: true },
 );
 // 监控: [周期选项] => 重加载K线 (缩放不变+校验时间间隔)
 watch(
@@ -816,7 +842,7 @@ watch(
     });
     getMainData({ startTime, endTime });
   },
-  { deep: true }
+  { deep: true },
 );
 // 监控: [主指标, 副指标, 指标配置, 复权选项, 常用选项] => 重加载K线 (缩放不变)
 watch(
@@ -826,7 +852,7 @@ watch(
     const [startTime, endTime] = [klineData.value.time[startValue], klineData.value.time[endValue]];
     getMainData({ startTime, endTime });
   },
-  { deep: true }
+  { deep: true },
 );
 // 监控: [成交点类型, 成交数据, 净值数据, 收益计算类型, 成交收益率数据] => 重绘K线 (缩放不变)
 watch(
@@ -835,19 +861,19 @@ watch(
     const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
     draw({ startValue, endValue });
   },
-  { deep: true }
+  { deep: true },
 );
 onUnmounted(() => {
   // 解绑
-  mainChartIns.off("highlight");
-  mainChartIns.off("globalout");
-  mainChartIns.off("datazoom");
-  mainChartIns.getZr().off("contextmenu");
+  mainChartIns?.off("highlight");
+  mainChartIns?.off("globalout");
+  mainChartIns?.off("datazoom");
+  mainChartIns?.getZr()?.off("contextmenu");
   window.removeEventListener("keydown", handleKeyDownEvent);
   // 销毁
-  mainChartIns.dispose();
+  mainChartIns?.dispose();
   subChartIns?.dispose();
-  resizeRo.dispose();
+  resizeRo?.dispose();
   resizeRo = null;
 });
 defineExpose({

package/packages/VarietyAiHelper/index.ts

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

package/packages/VarietyAiHelper/index.vue

@@ -0,0 +1,430 @@
+<script setup>
+import dayjs from "dayjs";
+import { ElMessage } from "element-plus";
+import { ref, nextTick, watch } from "vue";
+import { sendToBaiLianAppNonStreaming } from "../../public/aiTools";
+import { UserFilled, Service, Promotion } from "@element-plus/icons-vue";
+
+const emit = defineEmits(["callBack"]);
+
+const visible = ref(false);
+const isSending = ref(false);
+const isThinking = ref(false);
+
+const messageListRef = ref(null);
+const messages = ref([
+  {
+    role: "assistant",
+    time: dayjs().format("HH:mm"),
+    content: "你好呀！我是你的品种池AI助手，会根据您的自然语言去进行品种的条件查询\n\n示例: \n帮我查找A股，总市值1000亿，流通股本大于等于1000万",
+  },
+]);
+const inputMessage = ref("");
+
+// 发送消息
+const sendMessage = async () => {
+  // 校验输入内容是否为空
+  const content = inputMessage.value.trim();
+  if (!content) return ElMessage.warning("请输入消息内容");
+  // 校验是否正在处理消息
+  if (isSending.value) return;
+
+  // 记录用户消息
+  messages.value.push({
+    role: "user",
+    time: dayjs().format("HH:mm"),
+    content: content,
+  });
+  inputMessage.value = "";
+  await scrollToBottom();
+
+  // 发送请求至百炼应用AI
+  isSending.value = true;
+  isThinking.value = true;
+  let apiRes = "{}";
+  try {
+    const appId = "9e54d112acfe4531bd1fc4fee8827fef";
+    const apiKey = "sk-d995eb26a4334bdeb2ccb4cbfaf51de8";
+    apiRes = await sendToBaiLianAppNonStreaming({ appId, apiKey, value: content });
+    messages.value.push({
+      role: "assistant",
+      time: dayjs().format("HH:mm"),
+      content: apiRes,
+    });
+    await scrollToBottom();
+  } catch (error) {
+    ElMessage.error(`AI响应异常: ${error}`);
+    console.error("AI响应异常:", error);
+  } finally {
+    isSending.value = false;
+    isThinking.value = false;
+  }
+  emit("callBack", JSON.parse(apiRes));
+};
+// 滚动到底部
+const scrollToBottom = async () => {
+  await nextTick();
+  if (messageListRef.value) {
+    messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
+  }
+};
+watch(
+  () => messages.value,
+  () => {
+    scrollToBottom();
+  },
+  { deep: true },
+);
+defineExpose({
+  open: (data) => {
+    visible.value = true;
+    // 自动滚动到底部
+    nextTick(() => {
+      scrollToBottom();
+    });
+  },
+});
+</script>
+
+<template>
+  <el-dialog
+    class="ai-dialog"
+    v-model="visible"
+    title="✨ 品种池参数解析AI助手"
+    width="500px"
+    center
+    draggable
+    overflow
+    :modal="false"
+    :modal-penetrable="true"
+  >
+    <div class="chat-container">
+      <!-- 消息列表 -->
+      <div
+        ref="messageListRef"
+        class="message-list"
+      >
+        <div
+          v-for="(message, index) in messages"
+          :key="index"
+          class="message-item"
+          :class="message.role"
+        >
+          <div class="avatar">
+            <el-avatar
+              :size="32"
+              :icon="message.role === 'user' ? UserFilled : Service"
+            />
+          </div>
+          <div class="message-content">
+            <div class="message-text">{{ message.content }}</div>
+            <div class="message-time">{{ message.time }}</div>
+          </div>
+        </div>
+
+        <!-- AI 思考状态 -->
+        <div
+          v-if="isThinking"
+          class="message-item assistant"
+        >
+          <div class="avatar">
+            <el-avatar
+              :size="32"
+              :icon="Service"
+            />
+          </div>
+          <div class="message-content">
+            <div class="typing-indicator">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 输入区域 -->
+      <div class="input-area">
+        <el-input
+          class="message-input"
+          v-model="inputMessage"
+          type="textarea"
+          :rows="4"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+          placeholder="输入您想查询的品种条件..."
+          @keydown.ctrl.enter="sendMessage"
+        />
+        <div class="input-actions">
+          <div class="input-hint">
+            <span>Ctrl + Enter 发送</span>
+          </div>
+          <el-button
+            class="send-btn"
+            type="primary"
+            :icon="Promotion"
+            :loading="isSending"
+            @click="sendMessage"
+            round
+          >
+            发送
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.ai-dialog {
+  :deep(.el-dialog) {
+    border-radius: 24px;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
+    box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+
+    .el-dialog__header {
+      padding: 20px 24px 12px;
+      margin: 0;
+      border-bottom: 1px solid rgba(102, 126, 234, 0.1);
+      background: rgba(255, 255, 255, 0.8);
+      backdrop-filter: blur(10px);
+
+      .el-dialog__title {
+        font-size: 18px;
+        font-weight: 600;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+
+    .el-dialog__body {
+      padding: 0;
+    }
+
+    .el-dialog__footer {
+      display: none;
+    }
+  }
+}
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 380px;
+  background: transparent;
+}
+.message-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+  scroll-behavior: smooth;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 3px;
+
+    &:hover {
+      background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+    }
+  }
+}
+.message-item {
+  display: flex;
+  margin-bottom: 20px;
+  animation: fadeInUp 0.3s ease-out;
+
+  &.user {
+    flex-direction: row-reverse;
+
+    .avatar {
+      margin-left: 12px;
+      margin-right: 0;
+    }
+
+    .message-content {
+      align-items: flex-end;
+
+      .message-text {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border-radius: 18px 18px 4px 18px;
+      }
+
+      .message-time {
+        text-align: right;
+      }
+    }
+  }
+
+  &.assistant {
+    .avatar {
+      margin-right: 12px;
+    }
+
+    .message-content {
+      align-items: flex-start;
+
+      .message-text {
+        background: white;
+        color: #2c3e50;
+        border-radius: 18px 18px 18px 4px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        border: 1px solid rgba(102, 126, 234, 0.1);
+      }
+    }
+  }
+
+  .avatar {
+    flex-shrink: 0;
+
+    :deep(.el-avatar) {
+      background: linear-gradient(135deg, #f0f2ff 0%, #e8ecff 100%);
+      color: #667eea;
+
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+
+  .message-content {
+    display: flex;
+    flex-direction: column;
+    max-width: 70%;
+
+    .message-text {
+      padding: 10px 16px;
+      font-size: 14px;
+      line-height: 1.5;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+    }
+
+    .message-time {
+      font-size: 11px;
+      color: #9ca3af;
+      margin-top: 6px;
+      padding: 0 4px;
+    }
+  }
+}
+.typing-indicator {
+  display: flex;
+  gap: 4px;
+  padding: 10px 16px;
+  background: white;
+  border-radius: 18px;
+  border: 1px solid rgba(102, 126, 234, 0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+  span {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    animation: typing 1.4s infinite ease-in-out;
+
+    &:nth-child(1) {
+      animation-delay: -0.32s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: -0.16s;
+    }
+  }
+}
+.input-area {
+  padding: 16px 24px 24px;
+  border-top: 1px solid rgba(102, 126, 234, 0.1);
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+
+  .message-input {
+    :deep(.el-textarea__inner) {
+      border-radius: 16px;
+      border: 1px solid rgba(102, 126, 234, 0.2);
+      background: #ffffff;
+      font-size: 14px;
+      padding: 12px 16px;
+      transition: all 0.3s ease;
+
+      &:focus {
+        border-color: #667eea;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+      }
+
+      &::placeholder {
+        color: #cbd5e0;
+      }
+    }
+  }
+
+  .input-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 12px;
+
+    .input-hint {
+      font-size: 12px;
+      color: #9ca3af;
+
+      span {
+        background: rgba(102, 126, 234, 0.1);
+        padding: 4px 8px;
+        border-radius: 12px;
+        font-size: 11px;
+      }
+    }
+
+    .send-btn {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border: none;
+      padding: 8px 20px;
+      font-weight: 500;
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+    }
+  }
+}
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes typing {
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  30% {
+    transform: translateY(-8px);
+    opacity: 1;
+  }
+}
+</style>

package/packages/index.ts

@@ -19,6 +19,7 @@ import StPie from "./Pie/index.ts"
 import StTable from "./Table/index.ts"
 import StTreeMap from "./TreeMap/index.ts"
 import StUser from "./User/index.ts"
+import StVarietyAiHelper from "./VarietyAiHelper/index.ts"
 import StVarietyAutoComplete from "./VarietyAutoComplete/index.ts"
 import StVarietySearch from "./VarietySearch/index.ts"
 import StVarietyTextCopy from "./VarietyTextCopy/index.ts"
@@ -47,6 +48,7 @@ export default {
     StTable.install(app)
     StTreeMap.install(app)
     StUser.install(app)
+    StVarietyAiHelper.install(app)
     StVarietyAutoComplete.install(app)
     StVarietySearch.install(app)
     StVarietyTextCopy.install(app)