st-comp 0.0.248 → 0.0.249

package/package.json

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

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)

package/public/aiTools.js

@@ -0,0 +1,36 @@
+/**
+ * 发送非流式请求到百炼 AI 应用
+ * @param {Object} options
+ * @param {string} options.appId - 应用ID
+ * @param {string} options.apiKey - API Key
+ * @param {string} options.value - 用户输入
+ * @returns {Promise<string>} 返回 AI 输出的完整文本（JSON 字符串）
+ */
+export const sendToBaiLianAppNonStreaming = async ({ appId, apiKey, value }) => {
+  try {
+    const response = await fetch(`https://dashscope.aliyuncs.com/api/v1/apps/${appId}/completion`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        input: { prompt: value },
+        parameters: {
+          incremental_output: false, // 非流式
+        },
+      }),
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+    const data = await response.json();
+    const outputText = data?.output?.text;
+    return outputText;
+  } catch (error) {
+    if (error.name === "AbortError") {
+      throw new Error("请求超时");
+    }
+    throw error;
+  }
+};

package/src/App.vue

@@ -38,28 +38,38 @@ import routes from "./router/routes.ts";
 
 const route = useRoute();
 
+/**
+ * @description: 项目使用实例
+ */
 // const VITE_RUN_ENV = import.meta.env; // 正常使用
-// const VITE_RUN_ENV = {
-//   VITE_PROJECT_NAME: "动量回测",
-//   VITE_PROJECT_CLIENTID: "7",
-//   VITE_BASE_URL: "http://192.168.12.38:5173",
-//   BASE_URL: "/",
-//   MODE: "test49",
-//   DEV: true,
-//   PROD: false,
-//   SSR: false,
-// };
 
+/**
+ * @description: 组件库Demo测试
+ */
 const VITE_RUN_ENV = {
   VITE_PROJECT_NAME: "动量回测",
   VITE_PROJECT_CLIENTID: "7",
-  VITE_BASE_URL: "//investapi.hzyotoy.com",
+  VITE_BASE_URL: "http://192.168.12.38:5173",
   BASE_URL: "/",
-  MODE: "production",
-  DEV: false,
-  PROD: true,
+  MODE: "test49",
+  DEV: true,
+  PROD: false,
   SSR: false,
 };
+
+/**
+ * @description: 组件库Demo线上
+ */
+// const VITE_RUN_ENV = {
+//   VITE_PROJECT_NAME: "动量回测",
+//   VITE_PROJECT_CLIENTID: "7",
+//   VITE_BASE_URL: "//investapi.hzyotoy.com",
+//   BASE_URL: "/",
+//   MODE: "production",
+//   DEV: false,
+//   PROD: true,
+//   SSR: false,
+// };
 </script>
 
 <style>

package/src/pages/VarietyAiHelper/index.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { ref } from "vue";
+
+const VarietyAiHelperRef = ref(null);
+
+const handleClick = () => {
+  VarietyAiHelperRef.value.open();
+};
+</script>
+
+<template>
+  <div>
+    <el-button
+      type="primary"
+      @click="handleClick"
+      >AI查询助手</el-button
+    >
+    <st-varietyAiHelper ref="VarietyAiHelperRef" />
+  </div>
+</template>