agilebuilder-ui 1.1.46 → 1.1.48

package/lib/{tab-content-iframe-index-39745d49.js → tab-content-iframe-index-0a36be80.js}

@@ -1,5 +1,5 @@
 import { openBlock as r, createElementBlock as t, createCommentVNode as o } from "vue";
-import { _ as s } from "./index-465b0d69.js";
+import { _ as s } from "./index-5c1112e8.js";
 const u = ["src"], f = s({ data: () => ({ src: null }), watch: { $route(n, c) {
   this.src = this.$route.query.src;
 } }, mounted() {

package/lib/{tab-content-index-65696e56.js → tab-content-index-9a271908.js}

@@ -1,4 +1,4 @@
-import { _ as f, c as _, g as x, b as P, s as h, m as M, M as O, i as I } from "./index-465b0d69.js";
+import { _ as f, c as _, g as x, b as P, s as h, m as M, M as O, i as I } from "./index-5c1112e8.js";
 import { resolveComponent as u, openBlock as l, createBlock as b, withCtx as g, createVNode as v, TransitionGroup as L, createElementBlock as p, Fragment as C, renderList as T, createElementVNode as m, toDisplayString as w, normalizeClass as S, createCommentVNode as y } from "vue";
 const k = { class: "no-redirect" }, A = f({ name: "Breadcrumb", data: () => ({ levelList: null }), computed: { levelListWithTitle() {
   return this.levelList.filter((e) => e.meta.title !== void 0 && e.meta.title !== null);

package/lib/{tache-subprocess-history-ef943f95.js → tache-subprocess-history-93d013b2.js}

@@ -1,5 +1,5 @@
 import { resolveComponent as t, openBlock as a, createElementBlock as s, createElementVNode as y, createVNode as l, withCtx as r, createTextVNode as n, toDisplayString as p, createCommentVNode as c, createBlock as h } from "vue";
-import { _ as I } from "./index-465b0d69.js";
+import { _ as I } from "./index-5c1112e8.js";
 const g = { style: { "padding-bottom": "10px" } }, k = { key: 0, class: "graphDiv" }, N = I({ name: "TacheSubprocessHistory", data: () => ({ type: "graph", workflowId: null }), created() {
   const o = this.$route.query.workflowId;
   o && (this.workflowId = parseInt(o));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agilebuilder-ui",
-  "version": "1.1.46",
+  "version": "1.1.48",
   "type": "module",
   "private": false,
   "main": "./lib/super-ui.js",
@@ -24,14 +24,19 @@
     "path-to-regexp": "6.2.1",
     "sortablejs": "^1.15.0",
     "tinymce": "5.8.2",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "vue-element-plus-x": "1.3.7"
   },
   "devDependencies": {
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/state": "^6.4.1",
     "@element-plus/icons-vue": "^2.1.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "axios": "^1.5.1",
+    "codemirror": "^6.0.1",
     "element-plus": "^2.4.1",
     "nprogress": "^0.2.0",
+    "pinia": "^2.1.7",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "1.69.4",
     "vite": "^4.4.5",

package/packages/chat-embed/index.ts

@@ -0,0 +1,6 @@
+import ChatEmbed from './src/index.vue'
+ChatEmbed.install = function (Vue) {
+  window.$vueApp.component('ChatEmbed', ChatEmbed)
+}
+
+export default ChatEmbed

package/packages/chat-embed/src/chat-embed-message.ts

@@ -0,0 +1,79 @@
+import { BubbleProps } from 'vue-element-plus-x/types/Bubble'
+interface chatMessageType extends BubbleProps {
+  isRecommend: boolean
+  key: number
+  role: string
+  content: string
+  loading: boolean
+  isMarkdown: boolean
+  typing: boolean
+  avatar: string
+  avatarSize: string
+  noStyle: boolean
+  statusValue: string
+  recommendations: any
+  thinkingContent: string | null
+  thinkingStatus?: string
+  showThinkingContent: boolean
+  placement: 'start' | 'end'
+  additionalData: any
+  additionalDataLabel?: string
+  menuName?: string
+}
+function getMessageTemplate(type: string, content: string, isRecommend: boolean): chatMessageType {
+  const role = type === 'ai' ? 'ai' : 'user'
+  const placement = role === 'ai' ? 'start' : 'end'
+  const key = new Date().getTime()
+  const loading = false
+  const shape = 'corner'
+  const variant = role === 'ai' ? 'filled' : 'outlined'
+  const isMarkdown = false
+  const typing = role === 'ai' ? true : false
+  const avatar =
+    role === 'ai'
+      ? 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
+      : '../../src/assets/chat-embed/avatar.png'
+  const message: chatMessageType = {
+    isRecommend: isRecommend,
+    key,
+    role,
+    placement,
+    content,
+    thinkingContent: null,
+    showThinkingContent: false,
+    loading,
+    shape,
+    variant,
+    isMarkdown,
+    typing,
+    avatar,
+    noStyle: role === 'ai' ? true : false,
+    statusValue: 'end',
+    recommendations: [],
+    avatarSize: '24px'
+  }
+  if (role === 'ai') {
+    message.maxWidth = 'calc(100% - 60px)'
+    message.thinkingContent = ''
+    message.thinkingStatus = 'thinking'
+    message.showThinkingContent = true
+  }
+  return message
+}
+
+const defaultMessage = getMessageTemplate('ai', '😊 您好，我是平台小助手，您可以向我提出关于平台使用问题', true)
+// const recommendation1 = getMessageTemplate('ai', '组件的详细介绍', true)
+// recommendation1.thinkingStatus
+// const recommendation2 = getMessageTemplate('ai', '如何进行前后端二次开发？', true)
+// defaultMessage.recommendations = [
+//   recommendation1,
+//   recommendation2,
+//   recommendation1,
+//   recommendation2,
+//   recommendation1,
+//   recommendation2,
+//   recommendation1,
+//   recommendation2
+// ]
+
+export { chatMessageType, getMessageTemplate, defaultMessage }

package/packages/chat-embed/src/chat-embed.css

@@ -0,0 +1,117 @@
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+}
+
+/**
+ * 聊天窗口的样式设置
+ */
+.chat-container {
+  --header-height: 56px;
+  --chat-padding: 12px;
+  --bubble-content-max-width: 0px;
+  position: fixed;
+  right: 12px; /* 距离浏览器右边框12px */
+  bottom: 12px; /* 距离浏览器下边框12px */
+  background: white;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  overflow: hidden;
+  z-index: 100;
+}
+/* 聊天窗口的头部样式设置
+ */
+.chat-embed__header_container {
+  display: flex;
+  align-items: center;
+  background: linear-gradient(90deg, #ebf1ff 24.34%, #e5fbf8 56.18%, #f2ebfe 90.18%);
+  height: var(--header-height);
+  line-height: var(--header-height);
+  overflow: hidden;
+  position: relative;
+}
+/* 聊天窗口的头部图标样式设置
+ */
+.chat-embed__header_avatar {
+  margin-left: calc(var(--chat-padding) * 2);
+  margin-right: var(--chat-padding);
+}
+
+.chat-embed__header_tool_icon {
+  right: 15px;
+  position: absolute;
+}
+
+.chat-embed__main {
+  padding: var(--chat-padding);
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.chat-embed__main_content {
+  flex: 1;
+  box-sizing: border-box;
+  min-height: 0;
+  margin-bottom: 10px; /* 与输入框保持10px间距 */
+  /* overflow-y: auto;
+  margin-bottom: 12px; */
+}
+
+.chat-embed__input_container {
+  flex-shrink: 0; /* 不允许收缩 */
+  margin-bottom: 50px; /* 距离底部10px */
+}
+
+.header-icon {
+  cursor: pointer;
+}
+
+.header-icon + .header-icon {
+  margin-left: 12px;
+}
+
+/* 聊天默认推荐内容样式
+ */
+.chat-embed__recommendation + .chat-embed__recommendation {
+  margin-top: 12px;
+}
+
+.content-container {
+  padding: 12px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+
+.content-container-header {
+  font-size: 12px;
+  color: #909399;
+}
+
+.content-borderless-container {
+  user-select: none;
+  padding: 12px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  &:hover {
+    background-color: #ebeef5;
+  }
+}
+
+.footer-container {
+  :deep(.el-button + .el-button) {
+    margin-left: 8px;
+  }
+}
+
+.el-bubble-content-wrapper .el-bubble-content {
+  padding: 0;
+}

package/packages/chat-embed/src/chat-sender.vue

@@ -0,0 +1,240 @@
+<template>
+  <el-button text @click="newChatSession">
+    <el-icon><Plus /></el-icon>{{ t('chatEmbed.newChat') }}
+  </el-button>
+
+  <Sender
+    v-model="senderValue"
+    variant="updown"
+    :auto-size="{ minRows: 2, maxRows: 5 }"
+    clearable
+    allow-speech
+    placeholder=""
+  >
+    <template #prefix>
+      <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap">
+        <!-- 是自定义 操作列表 -->
+        <!-- <el-button round plain color="#626aef">
+                    <el-icon><Paperclip /></el-icon>
+                  </el-button> -->
+        <el-tag type="primary" v-if="showAdditionalData">
+          <template #default>
+            <div
+              style="
+                display: flex;
+                align-items: center;
+                flex-shrink: 0;
+                min-width: max-content;
+                margin-left: auto;
+                gap: 10px;
+              "
+            >
+              <el-icon><Paperclip /></el-icon>
+              {{ additionalDataLabel }}
+              <el-tooltip content="预览">
+                <super-icon iconValue="amb-color-icon-yulan" style="cursor: pointer" @click="viewJson" />
+              </el-tooltip>
+              <el-tooltip content="下载">
+                <super-icon iconValue="amb-color-icon-xiazai" style="cursor: pointer" @click="downloadJsonData" />
+              </el-tooltip>
+              <el-tooltip content="移除">
+                <super-icon iconValue="amb-color-icon-shanchu" style="cursor: pointer" @click="removeAdditionalData" />
+              </el-tooltip>
+            </div>
+          </template>
+        </el-tag>
+      </div>
+    </template>
+    <template #action-list>
+      <div style="display: flex; align-items: center">
+        <el-tooltip content="附加页面数据">
+          <el-button text circle round @click="addPageData">
+            <el-icon><Paperclip /></el-icon>
+          </el-button>
+        </el-tooltip>
+        <el-button
+          v-if="loading"
+          :disabled="!senderValue || !senderValue.trim()"
+          type="primary"
+          plain
+          circle
+          @click="handleCancel"
+        >
+          <el-icon class="is-loaidng">
+            <Loading />
+          </el-icon>
+        </el-button>
+        <el-button v-else circle :disabled="!senderValue || !senderValue.trim()" plain round @click="handleSubmit">
+          <el-icon><Promotion /></el-icon>
+        </el-button>
+      </div>
+    </template>
+  </Sender>
+</template>
+<script setup lang="ts">
+import { ref, defineProps, defineEmits, onMounted, watch } from 'vue'
+import ChatAiStore from '../../../src/store/modules/chat-ai-store.ts'
+import { Sender } from 'vue-element-plus-x'
+import { generateFileName, downloadJsonFile } from './util.ts'
+import { createPinia, setActivePinia, getActivePinia } from 'pinia'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
+let chataiStore: any = null
+
+onMounted(() => {
+  initializePiniaAndStore()
+  initializeStore()
+})
+function initializePiniaAndStore() {
+  try {
+    // 检查是否已有 Pinia 实例
+    let pinia = getActivePinia()
+
+    if (!pinia) {
+      // 没有 Pinia 实例时创建一个
+      pinia = createPinia()
+      setActivePinia(pinia)
+      // 如果有 Vue 应用实例，也注册到应用上
+      if (window.$vueApp) {
+        window.$vueApp.use(pinia)
+      }
+      console.log('Pinia initialized in chat-sender component')
+    }
+    // 初始化 store
+    chataiStore = ChatAiStore()
+    console.log('ChatAiStore initialized successfully')
+  } catch (error) {
+    console.error('Failed to initialize Pinia or ChatAiStore:', error)
+  }
+}
+
+function initializeStore() {
+  try {
+    // 确保 Store 正确挂载到全局
+    if (window.parent && window.parent !== window) {
+      // 在 iframe 中
+      window.parent.ChatAiStore = chataiStore
+    }
+    if (window.top && window.top !== window) {
+      // 挂载到顶层窗口
+      window.top.ChatAiStore = chataiStore
+    }
+    // 同时挂载到当前窗口
+    window.ChatAiStore = chataiStore
+  } catch (error) {
+    console.error('Failed to initialize ChatAiStore:', error)
+  }
+}
+const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+const emits = defineEmits(['new-chat-session', 'submit-question', 'handle-cancel', 'view-json'])
+const showAdditionalData = ref(false)
+const additionalDataLabel = ref('')
+const additionalData = ref([])
+const senderValue = ref('')
+
+onMounted(() => {
+  initializeStore()
+})
+
+function newChatSession() {
+  // 清空输入框
+  senderValue.value = ''
+  // Emit an event to start a new chat session
+  emits('new-chat-session')
+}
+
+function handleSubmit() {
+  const question = senderValue.value.trim()
+  const activeMenu = chataiStore.getActiveMenu()
+  emits('submit-question', {
+    question: question,
+    additionalData: additionalData.value,
+    additionalDataLabel: additionalDataLabel.value,
+    menuName: activeMenu?.menuName || ''
+  })
+  senderValue.value = ''
+  removeAdditionalData()
+}
+
+function handleCancel() {
+  emits('handle-cancel')
+}
+
+function addPageData() {
+  const activeMenu = chataiStore.getActiveMenu()
+  const pageInfo = chataiStore.getActiveMenuPageInfo()
+  if (pageInfo.pageType === 'list') {
+    const listRef = pageInfo.listRefs[0].ref
+    debugger
+    const visibleColumns = listRef.visibleColumns
+    const listData = chataiStore.getPageData()
+    if (listData && listData.length > 0) {
+      additionalData.value = formatListData(listData, visibleColumns)
+    } else {
+      const tableDatas = listRef.tableDatas
+      if (tableDatas) {
+        additionalData.value = formatListData(tableDatas, visibleColumns)
+      }
+    }
+    if (additionalData.value?.length > 0) {
+      additionalDataLabel.value = `已附加【${activeMenu.menuName}】表格数据 (${additionalData.value.length} 条记录)`
+      showAdditionalData.value = true
+    }
+  }
+}
+function formatListData(data, visibleColumns) {
+  const result: any = []
+  data.forEach((item) => {
+    const formattedItem = {}
+    Object.keys(item).forEach((key) => {
+      const column = visibleColumns.find((col) => col.orgProp === key)
+      if (column) {
+        formattedItem[column.label] = item[key]
+      }
+    })
+    result.push(formattedItem)
+  })
+  return result
+}
+
+function removeAdditionalData() {
+  additionalData.value = []
+  additionalDataLabel.value = ''
+  showAdditionalData.value = false
+}
+
+function viewJson() {
+  emits('view-json', additionalData.value)
+}
+
+function downloadJsonData() {
+  try {
+    const activeMenu = chataiStore.getActiveMenu()
+    const fileName = generateFileName(activeMenu?.menuName || 'data')
+    downloadJsonFile(additionalData.value, fileName)
+  } catch (error) {
+    console.error('下载失败:', error)
+  }
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+@import url('./chat-embed.css');
+h4 {
+  font-size: 16px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+:deep(.el-bubble-content-wrapper .el-bubble-content) {
+  padding: 0 !important;
+}
+:deep(.el-divider--horizontal) {
+  margin: 5px 0;
+}
+</style>

package/packages/chat-embed/src/header.vue

@@ -0,0 +1,50 @@
+<template>
+  <div ref="chatHeaderRef" class="chat-embed__header_container">
+    <el-avatar class="chat-embed__header_avatar" :src="aiAvatar" />
+    <h4>{{ $t('chatEmbed.name') }}</h4>
+    <div class="chat-embed__header_tool_icon">
+      <el-tooltip class="box-item" effect="dark" :content="$t('chatEmbed.history')">
+        <span class="header-icon"><SuperIcon iconValue="fa-history" /></span>
+      </el-tooltip>
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        :content="dialogFullScreen ? $t('chatEmbed.minimize') : $t('chatEmbed.fullscreen')"
+      >
+        <span class="header-icon">
+          <SuperIcon iconValue="fa-expand" @click="expandDialog" />
+        </span>
+      </el-tooltip>
+      <el-tooltip class="box-item" effect="dark" :content="$t('chatEmbed.close')">
+        <span class="header-icon">
+          <SuperIcon @click="showChatDialog" iconValue="fa-close" />
+        </span>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue'
+const props = defineProps({
+  aiAvatar: {
+    type: String,
+    default: 'https://example.com/default-avatar.png'
+  },
+  dialogFullScreen: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['showChatDialog', 'expandDialog'])
+
+function expandDialog() {
+  emit('expandDialog')
+}
+
+function showChatDialog() {
+  emit('showChatDialog')
+}
+</script>
+<style scoped>
+@import url('./chat-embed.css');
+</style>