npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/scriptTable/index.jsx

@@ -0,0 +1,196 @@
+import { defineComponent, ref, computed, watch, onUnmounted, nextTick } from 'vue'
+import styles from './index.module.scss'
+import { Expand, DeleteFilled } from '@element-plus/icons-vue'
+import InputColumn from './inputColumn/index.jsx'
+import Sortable from 'sortablejs'
+export default defineComponent({
+    // 脚本表格组件
+    name: 'ScriptTable',
+    props: {
+        scripts: {
+            type: Object,
+            default: () => { },
+        },
+    },
+    setup(props, { emit, attrs, slots }) {
+        console.log(props.scripts);
+        const labelEmu = {
+            qaScripts: '问答脚本',
+            proactiveScript: '主动脚本',
+        }
+        const type = ref('all')
+        const activeName = ref('qaScripts')
+
+        const tabs = computed(() => {
+            const lsit = []
+            for (const key in props.scripts) {
+                lsit.push({
+                    label: labelEmu[key],
+                    value: props.scripts[key],
+                    key: key,
+                })
+            }
+            return lsit
+        })
+
+        watch(() => props.scripts, (newVal, oldVal) => {
+            console.log(newVal, oldVal, 'scripts变化');
+
+        }, {
+            deep: true,
+        })
+
+        const tableRef = ref(null)
+        let sortable = null
+        watch(() => tableRef.value, async (newVal, oldVal) => {
+            if (newVal) {
+                await nextTick()
+                const tbody = tableRef.value?.$el.querySelector('.el-table__body-wrapper tbody')
+                if (!tbody) return
+                sortable?.destroy()
+                sortable = Sortable.create(tbody, {
+                    animation: 150,
+                    handle: '.drag-cell',          // 只有手柄能拖
+                    onEnd: evt => {
+                        const { oldIndex, newIndex } = evt
+                        if (oldIndex === undefined || newIndex === undefined) return
+                        const [removed] = props.scripts[activeName.value].splice(oldIndex, 1)
+                        props.scripts[activeName.value].splice(newIndex, 0, removed)
+                    },
+                })
+            }
+        })
+        onUnmounted(() => sortable?.destroy())
+        return () => (
+            <div class={styles.scriptTable}>
+                {/* <el-button type="primary" size="small" onClick={() => {
+                    console.log(props.scripts[activeName.value]);
+                }}>测试 </el-button> */}
+                <div class={[styles.header]}>
+                    <div class={[styles.tabs]}>
+                        {
+                            tabs.value.map((item) => (
+                                <div
+                                    class={[styles.tab, { [styles.active]: item.key === activeName.value }]}
+                                    key={item.key}
+                                    onClick={() => activeName.value = item.key}
+                                >
+                                    {item.label} {item.value.length}
+                                </div>
+                            ))
+                        }
+                    </div>
+                    <div class={[styles.right]}>
+                        <span>学员需练习</span>
+                        <el-select size="small" v-model={type.value} style={{ width: '60px', marginLeft: '10px', marginRight: '10px' }}>
+                            {
+                                {
+                                    default: () => (
+                                        <>
+                                            <el-option label="全部" value="all" />
+                                            <el-option label="部分" value="partial" />
+                                        </>
+                                    ),
+                                }
+                            }
+                        </el-select>
+                        <span>话术</span>
+                    </div>
+                </div>
+                <div>
+                    <el-table
+                        ref={tableRef}
+                        data={props.scripts[activeName.value]}
+                        style={{ width: '100%' }}
+                        border
+                        size="small"
+                        row-key="id"
+                        headerCellStyle={{
+                            background: '#F8F8F8',
+                            color: '#303133',
+                            fontWeight: 'bold',
+                        }}
+                    >
+                        {{
+                            default: (scope) => (
+                                <>
+                                {
+                                    attrs.isDraggable &&
+                                
+                                    <el-table-column prop="order" label="排序" width="50px">
+                                        {{
+                                            default: (scope) => (
+                                                <div class="drag-cell" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                                                    <el-icon style={{ cursor: 'grab' }} class={'drag-icon'} size={20}><Expand /></el-icon>
+                                                </div>
+                                            )
+                                        }}
+                                    </el-table-column>
+                                    }
+                                     <el-table-column prop="problemDesc" label="问题描述">
+                                        {{
+                                            default: (scope) => (
+                                                <InputColumn scope={scope} tableColumn={{
+                                                    prop: 'problemDesc',
+                                                    label: '问题描述',
+                                                }} />
+                                            )
+                                        }}
+                                    </el-table-column>
+                                     <el-table-column prop="standardScript" label="标准话术">
+                                        {{
+                                            default: (scope) => (
+                                                <InputColumn scope={scope} tableColumn={{
+                                                    prop: 'standardScript',
+                                                    label: '标准话术',
+                                                }} />
+                                            )
+                                        }}
+                                    </el-table-column>
+                                     <el-table-column prop="keyword" label="关键词">
+                                        {{
+                                            default: (scope) => (
+                                                <InputColumn scope={scope} tableColumn={{
+                                                    prop: 'keyword',
+                                                    label: '关键词',
+                                                    placeholder: '请输入请输入请输入关键词，多个关键词用逗号分隔',
+                                                    tag: true,
+                                                    split: ',',
+                                                    noAiGenerate: true,
+                                                }} />
+                                            )
+                                        }}
+                                    </el-table-column>
+                                    <el-table-column prop="aiScript" label="操作" width="50px">
+                                        {{
+                                            default: (scope) => (
+                                              <el-icon style={{ cursor: 'pointer' }} ><DeleteFilled /></el-icon>
+                                            )
+                                        }}
+                                    </el-table-column>
+                                    {/* <InputColumn tableColumn={{
+                                        prop: 'standardScript',
+                                        label: '标准话术',
+                                    }} />
+                                    <InputColumn tableColumn={{
+                                        prop: 'keyword',
+                                        label: '关键词',
+                                    }} /> */}
+                                </>
+                            ),
+                        }}
+                    </el-table>
+                </div>
+                <div>
+                    {
+                        attrs.footer && attrs.footer({
+                            labelEmu,
+                            activeName: activeName.value,
+                            type: type.value,
+                        })
+                    }
+                </div>
+            </div>
+        )
+    }
+})

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/scriptTable/index.module.scss

@@ -0,0 +1,41 @@
+.scriptTable{
+    .header{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #F8F8F8;
+        border: 1px solid #EBEEF5;
+        border-bottom: none;
+        padding: 10px;
+        .tabs{
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+        }
+        .tab{
+            padding: 5px 10px;
+            cursor: pointer;
+        }
+        .tab.active{
+            color: #FC6506;
+            font-weight: bold;
+            position: relative;
+            &::after{
+                content: '';
+                position: absolute;
+                bottom: -10px;
+                left: 0;
+                display: block;
+                transform: translateX(50%);
+                width: 50%;
+                height: 2px;
+                background-color: #FC6506;
+            }
+        }
+        .right{
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+        }
+    }
+}

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/scriptTable/inputColumn/index.jsx

@@ -0,0 +1,183 @@
+import { defineComponent, ref, nextTick, watch, Teleport } from 'vue'
+import styles from './index.module.scss'
+import { Close } from '@element-plus/icons-vue'
+export default defineComponent({
+  // 输入列组件
+  name: 'InputColumn',
+  props: {
+
+  },
+
+
+  setup(props, { attrs }) {
+    const showInput = ref(false)
+
+    const inputColumnnRef = ref(null)
+    const textareaRef = ref(null)
+    const aiGenerateRef = ref(null)
+    const showAiGenerate = ref(false)
+    const aiGenerateValue = ref('你好，我想咨询一下关于高品质跑步机的选购问题。 你好，我想咨询一下关于高品质跑步机的选购问题。')
+    const onClickOutside = (element, handler) => {
+      const listener = (e) => {
+        if (!element || element.contains(e.target)) return;
+        handler(e);
+      };
+      document.addEventListener('click', listener, false);
+      // 返回取消函数，想停就调它
+      return () => document.removeEventListener('click', listener, false);
+    }
+    watch(() => showInput.value, (newVal) => {
+      console.log(attrs, 'attrs');
+
+      if (newVal) {
+        const cell = inputColumnnRef.value.parentNode
+        if (!cell) return
+        const column = cell.parentNode
+        console.log(column, 'column');
+        if (!column) return
+        const elTable__cell = column.parentNode
+        if (!elTable__cell) return
+        const width = elTable__cell.offsetWidth
+        const rect = elTable__cell.getBoundingClientRect()  // 相对于视口
+        const x = rect.left + window.scrollX
+        const y = rect.top + window.scrollY
+        nextTick(() => {
+          const textarea = textareaRef.value
+          if (!textarea) return
+          textarea.style.width = `${width}px`
+          document.body.style.position = 'relative'
+          textarea.style.top = `${y}px`
+          textarea.style.left = `${x}px`
+
+        })
+
+
+      }
+    })
+
+    watch(() => textareaRef.value, (newVal, _, onCleanup) => {
+      if (newVal) {
+        setTimeout(() => {
+          const removeClickOutside = onClickOutside(newVal, () => {
+            showInput.value = false
+            showAiGenerate.value = false
+          })
+          onCleanup(() => {
+            removeClickOutside()
+          })
+          const elTextareaInner = textareaRef.value.querySelector('.el-textarea__inner')
+          if (elTextareaInner) {
+            elTextareaInner.focus()
+          }
+        }, 0)
+
+      }
+    })
+
+
+    watch(() => showAiGenerate.value, async (newVal) => {
+      if (newVal) {
+        await nextTick()
+        const width = textareaRef.value.offsetWidth
+        const rect = textareaRef.value.getBoundingClientRect()  // 相对于视口
+        const left = rect.left
+        if (left > width) {
+          aiGenerateRef.value.style.left = `${-width}px`
+        } else {
+          aiGenerateRef.value.style.left = `${width}px`
+        }
+
+      }
+    })
+
+    return () => {
+      return <div class={[styles.inputColumn]}>
+        <div ref={inputColumnnRef} >
+          {
+            showInput.value && (
+              <Teleport to="body">
+                <div class={[styles.inputColumnTextarea]} ref={textareaRef}>
+                  <div>
+                    <el-input maxlength={500} type="textarea" rows={4} v-model={attrs.scope.row[attrs.tableColumn.prop]} />
+                    <div class={[styles.aiGenerateBtnContainer]}>
+                     {
+                       !attrs.tableColumn.noAiGenerate ?(
+                        <span class={[styles.aiGenerateBtn]} onClick={() => {
+                          showAiGenerate.value = true
+                        }}>
+                          AI润色
+                        </span>
+                       )
+                       :
+                       <span>  </span>
+                     }
+                      <span>
+                        {attrs.scope.row[attrs.tableColumn.prop].length}/<span style={{ color: '#999' }}>500</span>
+                      </span>
+                    </div>
+                  </div>
+                  {
+                    showAiGenerate.value &&
+
+                    <div class={[styles.aiGenerate]} ref={aiGenerateRef}>
+                      <div class={[styles.header]}>
+                        <div class={[styles.title]}>
+                          AI生成
+                        </div>
+                        <el-icon class={[styles.close]} onClick={(e) => {
+                          showAiGenerate.value = false
+                          e.stopPropagation()
+                        }}>
+                          <Close />
+                        </el-icon>
+                      </div>
+                      <el-scrollbar>
+                        <div class={[styles.content]}>
+                          {aiGenerateValue.value || 'AI润色后的脚本'}
+                        </div>
+                      </el-scrollbar>
+                      <div class={[styles.footer]} >
+                        <span onClick={(e) => {
+                          attrs.scope.row[attrs.tableColumn.prop] = aiGenerateValue.value
+                          showAiGenerate.value = false
+                          e.stopPropagation()
+                        }}>
+                          一键使用
+                        </span>
+                        <span onClick={(e) => {
+                          e.stopPropagation()
+                        }}>
+                          重新生成
+                        </span>
+                      </div>
+                    </div>
+                  }
+                </div>
+              </Teleport >
+            )}
+          <div onClick={(e) => {
+            console.log(e.target, attrs.scope.row[attrs.tableColumn.prop], '点击了输入框');
+            showInput.value = true
+            // e.stopPropagation()
+          }}>
+            {
+              attrs.scope.row[attrs.tableColumn.prop] ?
+                (attrs.tableColumn.tag ?
+                  <div class={[styles.tagContainer]} title={attrs.scope.row[attrs.tableColumn.prop]}>
+
+                    {attrs.scope.row[attrs.tableColumn.prop].split(attrs.tableColumn.split).map((item, index) => (
+                     item.trim() ? <div class={[styles.tag]} key={index}>{item}</div> : null
+                    ))}
+                  </div>
+                  :
+                  <div class={[styles.inputColumnTextareaValue]} title={attrs.scope.row[attrs.tableColumn.prop]}>{attrs.scope.row[attrs.tableColumn.prop]}111</div>
+                )
+                :
+                <div class={[styles.inputColumnTextareaValue]}>{attrs.tableColumn.placeholder || '请输入'}</div>
+            }
+          </div>
+        </div>
+      </div>
+    }
+  }
+})

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/scriptTable/inputColumn/index.module.scss

@@ -0,0 +1,115 @@
+.inputColumn {
+  .inputColumnTextareaValue {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    /* 想几行就写几 */
+    text-overflow: ellipsis;
+    word-break: break-all;
+    /* 可选，英文长单词截断 */
+    line-height: 18px;
+  }
+
+  .tagContainer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    .tag {
+      padding: 2px 8px;
+      background-color: #F5F5F5;
+      border-radius: 4px;
+      font-size: 12px;
+    }
+  }
+
+}
+
+.inputColumnTextarea {
+  border: 1px solid #D9D9D9;
+  background-color: #fff;
+  border-radius: 8px;
+
+  .aiGenerateBtnContainer {
+    background-color: #fff;
+    padding: 0 10px 6px;
+    display: flex;
+    justify-content: space-between;
+    border-radius: 8px;
+
+    .aiGenerateBtn {
+      color: #4F8BFF;
+      cursor: pointer;
+    }
+  }
+
+  :global {
+    .el-textarea__inner {
+      box-shadow: none;
+      border-radius: 8px;
+    }
+
+    .el-textarea {
+      box-shadow: none;
+      border-radius: 8px;
+    }
+  }
+
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999999;
+
+  .aiGenerate {
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    position: absolute;
+    top: 0;
+    left: -100%;
+    z-index: 999999;
+    background-color: #F2F4FA;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 12px;
+      color: #222222;
+      font-weight: bold;
+
+      .close {
+        cursor: pointer;
+      }
+    }
+
+    .content {
+      font-size: 12px;
+      color: #222222;
+      flex: 1;
+    }
+
+    .footer {
+      display: flex;
+      height: 12px;
+      gap: 10px;
+
+      span {
+        cursor: pointer;
+        font-size: 12px;
+        color: #4F8BFF;
+
+        &:hover {
+          color: #3A73E8;
+        }
+      }
+    }
+  }
+}

package/app/wujie-wk/wujie-vue3-child/src/views/child-to-parent.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="child-to-parent">
+    <h1>子应用消息发送</h1>
+    <div class="form-container">
+      <div class="form-item">
+        <label>标题：</label>
+        <input type="text" v-model="formData.title" placeholder="请输入标题">
+      </div>
+      <div class="form-item">
+        <label>消息：</label>
+        <input type="text" v-model="formData.message" placeholder="请输入消息内容">
+      </div>
+      <div class="form-item">
+        <label>类型：</label>
+        <select v-model="formData.type">
+          <option value="success">成功</option>
+          <option value="warning">警告</option>
+          <option value="error">错误</option>
+          <option value="info">信息</option>
+        </select>
+      </div>
+      <div class="form-item">
+        <label>持续时间：</label>
+        <input type="number" v-model="formData.duration" placeholder="持续时间(ms)">
+      </div>
+      <button class="submit-btn" @click="sendToParent">发送消息</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+
+const formData = reactive({
+  title: 'vue3子应用测试title',
+  message: 'vue3子应用测试消息',
+  type: 'success',
+  duration: 3000
+})
+
+const sendToParent = () => {
+  window.$wujie?.bus.$emit('child-event', {
+    message: formData.message,
+    type: formData.type,
+    duration: formData.duration,
+    title: formData.title
+  },'vue3子应用')
+}
+</script>
+
+<style scoped>
+.child-to-parent {
+  padding: 20px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+h1 {
+  color: #333;
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.form-container {
+  background: #fff;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.form-item {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
+
+label {
+  width: 100px;
+  text-align: right;
+  padding-right: 12px;
+  color: #606266;
+}
+
+input, select {
+  flex: 1;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  transition: border-color 0.2s;
+}
+
+input:focus, select:focus {
+  outline: none;
+  border-color: #409eff;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 40px;
+  background-color: #409eff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.submit-btn:hover {
+  background-color: #66b1ff;
+}
+
+.submit-btn:active {
+  background-color: #3a8ee6;
+}
+</style>