npmapps 1.0.21 → 1.0.23

package/app/wujie-vue3-child/src/views/aiCoach/reportDetail/components/SubDimensionItem/index.module.scss

@@ -0,0 +1,101 @@
+// 子维度项样式
+.subDimensionItem {
+    background: #fafafa;
+    padding: 16px 20px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.name {
+    font-size: 14px;
+    font-weight: 600;
+    color: #52c41a;
+}
+
+.score {
+    font-size: 14px;
+    font-weight: 600;
+    color: #52c41a;
+    background: #f6ffed;
+    padding: 3px 14px;
+    border-radius: 12px;
+}
+
+// 进度条
+.progressBar {
+    margin-bottom: 12px;
+}
+
+.progressTrack {
+    width: 100%;
+    height: 8px;
+    background: #e8e8e8;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 6px;
+}
+
+// 进度条填充 - 低分（红色）
+.progressFillLow {
+    height: 100%;
+    background: linear-gradient(90deg, #f5222d 0%, #ff4d4f 100%);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+}
+
+// 进度条填充 - 中等（黄色/橙色）
+.progressFillMedium {
+    height: 100%;
+    background: linear-gradient(90deg, #fa8c16 0%, #ffa940 100%);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+}
+
+// 进度条填充 - 高分（绿色）
+.progressFillHigh {
+    height: 100%;
+    background: linear-gradient(90deg, #52c41a 0%, #73d13d 100%);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+}
+
+.progressLabels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #8c8c8c;
+}
+
+// 评价内容
+.comment {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px 14px;
+    background: #fff;
+    border-radius: 6px;
+    border-left: 3px solid #52c41a;
+}
+
+.commentIcon {
+    font-size: 16px;
+    flex-shrink: 0;
+}
+
+.commentText {
+    flex: 1;
+    font-size: 13px;
+    color: #595959;
+    line-height: 1.7;
+}

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

@@ -0,0 +1,50 @@
+import { defineComponent, ref } from 'vue'
+import styles from './index.module.scss'
+import ReportHeader from './components/ReportHeader/index.jsx'
+import CoachReport from './components/CoachReport/index.jsx'
+import DialogueRecord from './components/DialogueRecord/index.jsx'
+
+/**
+ * 报告详情页面
+ * @description 显示练习报告的完整详情，包括总览和各维度的详细评分
+ */
+export default defineComponent({
+    name: 'ReportDetail',
+
+    setup() {
+        // 报告头部数据
+        const headerData = ref({
+            title: '银行理财推荐',
+            isQuit: true, // 是否中途退出
+            practiceTime: '2025-08-20 12:12',
+            rounds: 2,
+            duration: "23'23\"",
+            score: 55,
+            isPassed: false, // 是否达标
+        })
+
+        // 当前激活的标签页
+        const activeTab = ref('coachReport')
+
+        return () => {
+            return (
+                <div class={styles.reportDetail}>
+                    {/* 报告头部 */}
+                    <ReportHeader {...headerData.value} />
+
+                    {/* 标签页 */}
+                    <div class={styles.tabsContainer}>
+                        <el-tabs v-model={activeTab.value} class={styles.tabs}>
+                            <el-tab-pane label="陪练报告" name="coachReport">
+                                <CoachReport />
+                            </el-tab-pane>
+                            <el-tab-pane label="对话记录" name="dialogueRecord">
+                                <DialogueRecord />
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
+                </div>
+            )
+        }
+    },
+})

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

@@ -0,0 +1,25 @@
+// 报告详情页面样式
+.reportDetail {
+    padding: 20px;
+    background: #fff;
+    min-height: 100vh;
+}
+
+// 标签页容器
+.tabsContainer {
+    margin-top: 24px;
+}
+
+.tabs {
+    :global {
+        .el-tabs__header {
+            margin-bottom: 24px;
+        }
+
+        .el-tabs__item {
+            font-size: 16px;
+            font-weight: 500;
+        }
+    }
+}
+

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

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

@@ -0,0 +1,53 @@
+// 主页
+<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

@@ -0,0 +1,169 @@
+<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/wujie-vue3-child/src/views/jsx/btnSelect/index.vue

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

package/app/wujie-vue3-child/src/views/jsx/com.vue

@@ -0,0 +1,44 @@
+<script lang="jsx">
+import { defineComponent, Fragment } from 'vue'
+import { ElButton } from 'element-plus'
+import { useRouter, useRoute } from 'vue-router'
+
+export default defineComponent({
+  name: 'ComView',
+  setup(props, { slots, emit ,attrs}) {
+    console.log(props, 'props');
+    console.log(attrs, 'attrs');
+    const router = useRouter()
+    console.log(router, 'router');
+    const goHome = () => {
+      router.push('/')
+    }
+    const route = useRoute()
+    console.log(route, 'route');
+    
+    return () => (
+      <>
+        <div>ComView</div>
+        <div>props: {attrs.count}</div>
+        <ElButton
+          type="primary"
+          onClick={() => {
+           attrs.dialog.close()
+          }}
+        >
+          close dialog
+        </ElButton>
+        <ElButton
+          type="primary"
+          onClick={() => {
+            goHome()
+            attrs.dialog.close()
+          }}
+        >
+          go home
+        </ElButton>
+      </>
+    )
+  }
+})
+</script>

package/app/wujie-vue3-child/src/views/jsx/dialog.jsx

@@ -0,0 +1,66 @@
+import { defineComponent, ref, h, render } from 'vue'
+import { ElDialog, ElButton } from 'element-plus'
+
+export const openDialog = (options = {}, appContext) => {
+  const {
+    props = {},
+    events = {},
+    slots = {}
+  } = options
+  
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+
+  let vnode
+  const visible = ref(true)
+  const DialogHost = defineComponent({
+    name: 'FunctionDialogHost',
+    setup(props,{expose}) {
+      const handleSlot = () => {
+        const slotList = {}
+        for (const slotName in slots) {
+          if (slots.hasOwnProperty(slotName)) {
+            const slot = slots[slotName]
+            if (slot) {
+              slotList[slotName] = slot()
+            }
+          }
+        }
+        return slotList
+      }
+      const cleanup = () => {
+        try {
+          render(null, container)
+        } catch {}
+        if (container && container.parentNode) {
+          container.parentNode.removeChild(container)
+        }
+      }
+
+      // 返回 JSX 渲染函数
+      return () => (
+        <ElDialog
+          modelValue={visible.value}
+          onUpdate:modelValue={(v) => { visible.value = v }}
+          {...props}
+          {...events}
+          destroyOnClose={true}
+          onClosed={cleanup}
+        >
+          {handleSlot()}
+        </ElDialog>
+      )
+    }
+  })
+  vnode = h(DialogHost)
+  if (appContext) vnode.appContext = appContext
+  render(vnode, container)
+  const close = () => {
+    visible.value = false
+  }
+  return {
+    close,
+  }
+}
+
+export default openDialog