npmapps 1.0.24 → 1.0.26

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

@@ -1,183 +0,0 @@
-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-vue3-child/src/views/aiCoach/scriptTable/inputColumn/index.module.scss

@@ -1,115 +0,0 @@
-.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-vue3-child/src/views/child-to-parent.vue

@@ -1,117 +0,0 @@
-<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>

package/app/wujie-vue3-child/src/views/home.vue

@@ -1,53 +0,0 @@
-// 主页
-<template>
-  <div class="home-container">
-    <h1 class="home-title">vue3子应用主页</h1>
-    <div class="home-content">
-      <p class="welcome-text">欢迎使用无界微前端框架</p>
-      <el-button @click="jumpToChild">跳转到测试页面</el-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useRoute, useRouter } from 'vue-router'
-
-// 可以在这里添加组件逻辑
-// 获取路由参数
-const router = useRouter()
-const route = useRoute()
-const jumpToChild = () => {
-  router.push('/test'+ '?name=123' )
-}
-</script>
-
-<style scoped>
-.home-container {
-  padding: 2rem;
-  max-width: 1200px;
-  margin: 0 auto;
-  min-height: 80vh;
-}
-
-.home-title {
-  color: #2c3e50;
-  font-size: 2.5rem;
-  margin-bottom: 2rem;
-  text-align: center;
-}
-
-.home-content {
-  background-color: #f8f9fa;
-  border-radius: 8px;
-  padding: 2rem;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-}
-
-.welcome-text {
-  font-size: 1.2rem;
-  color: #666;
-  text-align: center;
-  line-height: 1.6;
-}
-</style>
-

package/app/wujie-vue3-child/src/views/jsx/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>