npmapps 1.0.20 → 1.0.21

package/app/aiCoach/collapseExpand/index.jsx

@@ -0,0 +1,108 @@
+
+import { defineComponent, ref, h } from 'vue'
+import styles from './index.module.scss'
+import { Expand, DeleteFilled } from '@element-plus/icons-vue'
+import draggable from 'vuedraggable'
+import _ from 'lodash'
+export default defineComponent({
+    // 折叠展开组件 - 列表展示
+    name: 'CollapseExpand',
+    props: {
+        collapseList: {
+            type: Array,
+            default: () => [],
+        },
+        draggableDisabled: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    emits: ['update:collapseList'],
+    setup(props, { emit, attrs, slots }) {
+
+        const newCollapseList = ref(_.cloneDeep(props.collapseList))
+        const dragEnd = (e) => {
+            console.log(e)
+            attrs.dragEnd && attrs.dragEnd(e, newCollapseList.value)
+            emit('update:collapseList', newCollapseList.value)
+        }
+        const handleDelete = (item) => {
+            newCollapseList.value = newCollapseList.value.filter((i) => i.id !== item.id)
+            emit('update:collapseList', newCollapseList.value)
+        }
+        return () => (
+            <div class={styles.collapseExpand}>
+                <el-collapse
+                    {...attrs}
+                >
+                    <draggable
+                        v-model={newCollapseList.value}
+                        item-key="id"
+                        class="list"
+                        ghost-class="ghost"
+                        disabled={props.draggableDisabled}
+                        onEnd={dragEnd}
+                        animation={attrs.animation || 100}
+                        handle=".drag-icon"
+                    >
+                        {{
+                            item: (({ element: item, index }) => (
+                                <el-collapse-item class={[styles.item,
+                                index === 0 ?
+                                    styles.firstItem : '',
+                                index === props.collapseList.length - 1 ?
+                                    styles.lastItem : '']}
+                                    key={item.id}
+                                    name={item.id}>
+                                    {{
+                                        // 自定义标题栏
+                                        title: () => (
+                                            attrs.title ? attrs.title(item) :
+                                                <div class={[styles.header]}>
+                                                    <div class={[styles.headerLeft]}>
+                                                        <div>
+                                                            <el-icon style={{ cursor: 'grab' }} class={'drag-icon'} size={20}><Expand /></el-icon>
+                                                        </div>
+                                                        <div class={[styles.headerContent]}>
+                                                            <div class={[styles.title]}>{item.title}</div>
+                                                            {/* 目标描述 */}
+                                                            <div class={[styles.goal]}>
+                                                                {item.goal}
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    {/* 阻止冒泡避免触发折叠 */}
+                                                    <el-popconfirm
+                                                        title="确认删除吗？"
+                                                        confirm-button-text="确定"
+                                                        cancel-button-text="取消"
+                                                        onConfirm={(e) => {
+                                                            handleDelete(item)
+                                                            e.stopPropagation()
+                                                        }}
+                                                    >
+                                                        {{
+                                                            reference: () => (
+                                                                <el-icon onClick={(e) => e.stopPropagation()} style={{ marginRight: '8px' }}><DeleteFilled /></el-icon>
+                                                            )
+                                                        }}
+                                                      
+                                                    </el-popconfirm>
+                                                </div>
+                                        ),
+                                        // 展开的内容区域
+                                        default: () => (
+                                            <div>
+                                                {item.item ? item.item(item) : null}
+                                            </div>
+                                        )
+                                    }}
+                                </el-collapse-item>
+                            ))
+                        }}
+                    </draggable>
+                </el-collapse>
+            </div>
+        )
+    },
+})

package/app/aiCoach/collapseExpand/index.module.scss

@@ -0,0 +1,97 @@
+.collapseExpand {
+    :global(.el-collapse .el-collapse-item__header) {
+        padding-left: 10px;
+    }
+    .header {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        align-items: center;
+
+
+        .headerLeft {
+            display: flex;
+            align-items: center;
+
+            .headerContent {
+                margin-left: 10px;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+
+                .title,
+                .goal {
+                    display: flex;
+                    height: 16px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    line-height: 16px;
+                }
+
+                .goal {
+                    margin-top: 5px;
+                    color: #999;
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+
+    .item {
+        position: relative;
+        padding-left: 12px;
+    }
+
+
+    /* 画竖线 */
+    .item::before {
+        content: '';
+        position: absolute;
+        left: 0px;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background-color: #FC6506;
+    }
+
+    .firstItem::before {
+        content: '';
+        position: absolute;
+        left: 0px;
+        top: 24px;
+        bottom: 0;
+        width: 2px;
+        background-color: #FC6506;
+    }
+
+    .lastItem::before {
+        content: '';
+        position: absolute;
+        left: 0px;
+        top: 0;
+        bottom: 24px;
+        width: 2px;
+        height: 24px;
+        background-color: #FC6506;
+
+    }
+
+    /* 每个 item 的标题前加圆点 */
+    :global(.el-collapse-item__header) {
+        position: relative;
+        padding-left: 24px;
+    }
+
+    :global(.el-collapse-item__header)::before {
+        content: '';
+        position: absolute;
+        left: -15px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 8px;
+        height: 8px;
+        background-color: #FC6506;
+        border-radius: 50%;
+        z-index: 1;
+    }
+}

package/app/aiCoach/dialogueSegment/index.jsx

@@ -0,0 +1,158 @@
+
+import { defineComponent, ref, watch } from 'vue'
+import styles from './index.module.scss'
+import CollapseExpand from '../collapseExpand/index.jsx'
+import ScriptTable from '../scriptTable/index.jsx'
+
+export default defineComponent({
+    // 对话环节
+    name: 'DialogueSegment',
+
+    setup() {
+        const collapseList = ref([
+            {
+                id: '1',
+                title: '环节1：需求表达',
+                goal: '目标：顾客直接向导购表明自己想购买一台高品质跑步机',
+                scripts: {
+                    qaScripts: [
+                        {
+                            order: 1,
+                            problemDesc: '1',
+                            standardScript: '',
+                            keyword: '',
+                            id: '1',
+                        },
+                        {
+                            order: 2,
+                            problemDesc: '2',
+                            standardScript: '',
+                            keyword: '',
+                            id: '2',
+                        }
+                    ],
+                    proactiveScript: [
+                        {
+                            order: 1,
+                            problemDesc: '',
+                            standardScript: '',
+                            keyword: '',
+                            id: '1',
+                        }
+                    ]
+                }
+               
+            },
+            {
+                id: '2',
+                title: '环节2：产品介绍',
+                goal: '目标：导购根据顾客需求，详细介绍不同款式跑步机的特点、性能和价格',
+                scripts: {
+                    qaScripts: [
+                        {
+                            order: 1,
+                            problemDesc: '',
+                            standardScript: '',
+                            keyword: '',
+                            id: '1',
+                        }
+                    ],
+                    proactiveScript: [
+                        {
+                            order: 1,
+                            problemDesc: '',
+                            standardScript: '',
+                            keyword: '',
+                            id: '1',
+                        }
+                    ]
+                }
+            },
+            {
+                id: '3',
+                title: '环节3：价格确认',
+                goal: '目标：顾客确认购买价格，确认无误后，引导顾客完成支付',
+                scripts: {
+                    qaScripts: [
+                        {
+                            order: 1,
+                            problemDesc: '',
+                            standardScript: '',
+                            keyword: '',
+                            id: '1',
+                        }
+                    ],
+                    proactiveScript: [
+                        {
+                            order: 1,
+                            problemDesc: '',
+                            standardScript: '',
+                            keyword: '',
+                            id: '1',
+                        }
+                    ]
+                }
+            },
+        ])
+        const activeNames = ref(['1'])
+        const addScript = (item,props) => {
+            console.log(item,props,'添加话术');
+            item.scripts[props.activeName].push({
+                order: item.scripts[props.activeName].length + 1,
+                problemDesc: '',
+                standardScript: '',
+                keyword: '',
+                id: Date.now().toString(),
+            })
+        }
+        collapseList.value.forEach((item) => {
+            item.item = () => (
+                <div class={[styles.scriptTableContainer]}>
+                    <ScriptTable
+                        isDraggable={true}
+                        scripts={item.scripts}
+                        footer={(props) => (
+                            <div>
+                                <el-button type="text" size="small" onClick={() => {
+                                    addScript(item,props)
+                                }}>
+                                    十添加话术
+                                </el-button>
+                                <el-button type="text" size="small">
+                                    Ai生成话术
+                                </el-button>
+                            </div>
+                        )}
+                    ></ScriptTable>
+                  
+                </div>
+            )
+        })
+
+        watch(() => collapseList.value, (newVal, oldVal) => {
+            console.log(newVal, oldVal)
+        })
+        return () => {
+            return <div class={[styles.dialogueSegment]}>
+                <div class={[styles.card]}>
+                    <div class={[styles.cardHeader]}>
+                        <div class={[styles.title]}>
+                            对话环节
+                        </div>
+                        <div class={[styles.operation]}>
+                            <el-button type="text" size="small">
+                                添加环节
+                            </el-button>
+                            <el-button type="text" size="small">
+                                重新生成环节
+                            </el-button>
+                        </div>
+                    </div>
+                    <div class={[styles.cardBody]}>
+                        <CollapseExpand v-model:collapseList={collapseList.value} v-model={activeNames.value} />
+                    </div>
+                </div>
+            </div>
+        }
+    },
+})

package/app/aiCoach/dialogueSegment/index.module.scss

@@ -0,0 +1,28 @@
+.dialogueSegment {
+    width: 800px;
+   .card {
+    border-radius: 8px;
+    border: 1px solid #E5E5E5;
+    .cardHeader {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #F8F8F8;
+        padding: 12px 20px;
+    }
+    .title {
+        font-size: 16px;
+        font-weight: 500;
+    }
+    .operation {
+        font-size: 14px;
+        font-weight: 400;
+    }
+    .cardBody {
+        padding: 20px;
+    }
+    .scriptTableContainer {
+      padding: 10px 10px 0;
+    }
+   }
+}

package/app/aiCoach/index.jsx

@@ -0,0 +1,20 @@
+import { defineComponent, ref } from 'vue'
+import DialogueSegment from './dialogueSegment/index.jsx'
+
+export default defineComponent({
+    // 智能教练
+    name: 'AiCoach',
+
+    setup() {
+        const activeTab = ref('dialogue-segment')
+        return () => {
+            return <div style={{padding: '30px'}}>
+                <el-tabs v-model={activeTab.value} type="border-card">
+                    <el-tab-pane label="对话环节" name="dialogue-segment">
+                        <DialogueSegment />
+                    </el-tab-pane>
+                </el-tabs>
+            </div>
+        }
+    },
+})

package/app/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "npmapps",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "",
   "main": "index.js",
   "scripts": {

package/app/btnSelect/btnSelect.vue

@@ -1,169 +0,0 @@
-<script lang="jsx">
-import { defineComponent, ref, computed, watch } from "vue";
-import { ArrowDown } from "@element-plus/icons-vue";
-export default defineComponent({
-  name: "BtnSelect",
-  props: {
-    options: { type: Array, default: () => [] },
-    modelValue: { type: [String, Number, Array, Object, Boolean], default: null },
-    multiple: { type: Boolean, default: false },
-    searchable: { type: Boolean, default: false },
-    label: { type: String, default: "" },
-    optionKeys: { type: Object, default: () => ({ label: "label", value: "value" }) },
-    maxLabelCount: { type: Number, default: 3 },
-    disabled: { type: Boolean, default: false },
-    collapseTags: { type: Boolean, default: false },
-    itemRender: { type: Function, default: null },
-  },
-  emits: ["update:modelValue", "change"],
-  setup(props, { emit }) {
-    const keyword = ref("");
-    const internal = ref(props.multiple ? ([]).concat(props.modelValue || []) : props.modelValue);
-    watch(
-      () => props.modelValue,
-      (v) => {
-        internal.value = props.multiple ? ([]).concat(v || []) : v;
-      }
-    );
-
-    const isChecked = (val) => {
-      const cur = internal.value;
-      return Array.isArray(cur) ? cur.includes(val) : cur === val;
-    };
-
-    const toggle = (val) => {
-      const list = props.options || [];
-      const { label: labelKey, value: valueKey } = props.optionKeys || { label: "label", value: "value" };
-      const found = list.find((i) => i[valueKey] === val);
-      if (found && found.disabled) return;
-      if (props.multiple) {
-        const set = new Set(internal.value || []);
-        if (set.has(val)) set.delete(val);
-        else set.add(val);
-        const next = Array.from(set);
-        internal.value = next;
-        emit("update:modelValue", next);
-        emit("change", next);
-      } else {
-        internal.value = val;
-        emit("update:modelValue", val);
-        emit("change", val);
-      }
-    };
-
-    const filtered = computed(() => {
-      const list = props.options || [];
-      const { label: labelKey, value: valueKey } = props.optionKeys || { label: "label", value: "value" };
-      if (!props.searchable || !keyword.value) return list;
-      const k = String(keyword.value).toLowerCase();
-      return list.filter((o) => String(o[labelKey]).toLowerCase().includes(k));
-    });
-
-    const displayMeta = computed(() => {
-      const list = props.options || [];
-      const { label: labelKey, value: valueKey } = props.optionKeys || { label: "label", value: "value" };
-      if (props.multiple) {
-        const vals = internal.value || [];
-        if (!vals.length) return { text: props.label || "请选择", rest: 0 };
-        const labels = vals.map((v) => {
-          const o = list.find((i) => i[valueKey] === v);
-          return o ? o[labelKey] : v;
-        });
-        if (props.collapseTags) {
-          const first = labels[0];
-          const rest = labels.length - 1;
-          return { text: `${props.label ? props.label + ":" : ""}${first}`, rest };
-        }
-        if (labels.length > props.maxLabelCount) return { text: (props.label ? props.label + ":" : "") + labels.slice(0, props.maxLabelCount).join("、") + ` 等${labels.length}项`, rest: 0 };
-        return { text: (props.label ? props.label + ":" : "") + labels.join("、"), rest: 0 };
-      } else {
-        const v = internal.value;
-        if (v === undefined || v === null || v === "") return { text: props.label || "请选择", rest: 0 };
-        const o = list.find((i) => i[valueKey] === v);
-        const text = o ? o[labelKey] : String(v);
-        return { text: props.label ? `${props.label}:${text}` : text, rest: 0 };
-      }
-    });
-
-    const clear = () => {
-      if (props.disabled) return;
-      internal.value = props.multiple ? [] : null;
-      emit("update:modelValue", internal.value);
-      emit("change", internal.value);
-    };
-
-    const hasValue = computed(() => (Array.isArray(internal.value) ? internal.value.length > 0 : internal.value !== null && internal.value !== undefined && internal.value !== "") );
-
-    return () => (
-      <el-dropdown hideOnClick={props.multiple ? false : true} disabled={props.disabled}>
-        {{
-          default: () => (
-            <el-button>
-              <span style="display:inline-flex;align-items:center;gap:6px;">
-                <span>{displayMeta.value.text}</span>
-                {props.collapseTags && displayMeta.value.rest > 0 ? (
-                  <span style="display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:rgba(64,158,255,0.15);color:#409EFF;font-size:12px;line-height:18px;">{`+${displayMeta.value.rest}`}</span>
-                ) : null}
-                {hasValue.value ? (
-                  <span
-                    title="清除"
-                    style="display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,0.06);cursor:pointer;margin-left:4px;"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      clear();
-                    }}
-                  >
-                    ×
-                  </span>
-                ) : (
-                  <span style="margin-left:4px;opacity:0.7;">
-                    <el-icon><ArrowDown /></el-icon>
-                  </span>
-                )}
-              </span>
-            </el-button>
-          ),
-          dropdown: () => (
-            <el-dropdown-menu>
-              {props.searchable ? (
-                <div style="padding:8px 12px;">
-                  <el-input
-                    modelValue={keyword.value}
-                    onUpdate:modelValue={(v) => {
-                      keyword.value = v;
-                    }}
-                    clearable={true}
-                    placeholder="搜索"
-                    size="small"
-                  />
-                </div>
-              ) : null}
-              {filtered.value.map((opt) => (
-                <el-dropdown-item
-                  key={opt[(props.optionKeys || {}).value || "value"]}
-                  command={opt[(props.optionKeys || {}).value || "value"]}
-                  disabled={Boolean(opt.disabled)}
-                  onClick={() => toggle(opt[(props.optionKeys || {}).value || "value"])}
-                  style={isChecked(opt[(props.optionKeys || {}).value || "value"]) ? "background: rgba(64,158,255,0.08);" : ""}
-                >
-                  {props.itemRender ? (
-                    props.itemRender(opt, {
-                      checked: isChecked(opt[(props.optionKeys || {}).value || "value"]),
-                    })
-                  ) : (
-                    <div style="display:flex;align-items:center;justify-content:space-between;min-width:180px;">
-                      <span>{opt[(props.optionKeys || {}).label || "label"]}</span>
-                      {isChecked(opt[(props.optionKeys || {}).value || "value"]) ? <span style="color:#67C23A;">✓ 已选</span> : null}
-                    </div>
-                  )}
-                </el-dropdown-item>
-              ))}
-              {!filtered.value.length ? <el-dropdown-item disabled={true}>无数据</el-dropdown-item> : null}
-            </el-dropdown-menu>
-          ),
-        }}
-      </el-dropdown>
-    );
-  },
-});
-</script>

package/app/btnSelect/index.vue

@@ -1,69 +0,0 @@
-<script lang="jsx">
-import { defineComponent, ref } from "vue";
-import BtnSelect from "./btnSelect.vue";
-
-export default defineComponent({
-  name: "BtnSelectView",
-  setup() {
-    const options = ref([
-      { label: "选项一", value: "a" },
-      { label: "选项二", value: "b" },
-      { label: "选项三", value: "c" },
-      { label: "禁用项", value: "d", disabled: true },
-    ]);
-    const singleValue = ref(null);
-    const multiValue = ref([]);
-    const searchValue = ref(null);
-    return () => (
-      <>
-        <div style="display:flex; gap:16px; align-items:center; flex-wrap:wrap;">
-          <span>按钮下拉框(普通)</span>
-          <BtnSelect
-            label="名称"
-            options={options.value}
-            modelValue={singleValue.value}
-            onUpdate:modelValue={(v) => {
-              singleValue.value = v;
-            }}
-          />
-          <span>按钮下拉框(多选)</span>
-          <BtnSelect
-            label="名称"
-            options={options.value}
-            multiple={true}
-            modelValue={multiValue.value}
-            onUpdate:modelValue={(v) => {
-              multiValue.value = v;
-            }}
-          />
-          <span>按钮下拉框(带搜索)</span>
-          <BtnSelect
-            label="名称"
-            options={options.value}
-            searchable={true}
-            multiple={true}
-            collapseTags={true}
-            itemRender={(opt, { checked }) => (
-              <div style="display:flex;align-items:center;justify-content:space-between;min-width:200px;">
-                <span>
-                  {opt.label}
-                  {opt.disabled ? <span style="margin-left:8px;color:#F56C6C;">禁用</span> : null}
-                </span>
-                {checked ? (
-                  <span style="color:#67C23A;">✓ 已选</span>
-                ) : (
-                  <span style="color:#909399;">点击选择</span>
-                )}
-              </div>
-            )}
-            modelValue={searchValue.value}
-            onUpdate:modelValue={(v) => {
-              searchValue.value = v;
-            }}
-          />
-        </div>
-      </>
-    );
-  },
-});
-</script>