npmapps 1.0.25 → 1.0.27

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>

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

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

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

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

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

@@ -1,72 +0,0 @@
-<script lang="jsx">
-import { defineComponent, ref, h, Fragment, getCurrentInstance } from "vue";
-import PropsView from "./props.vue";
-import openDialog from "./dialog.jsx";
-import ComView from "./com.vue";
-import BtnSelect from "./btnSelect/index.vue";
-export default defineComponent({
-  name: "JsxView",
-  setup() {
-    const count = ref(0);
-    const propsViewRef = ref(null);
-    const countAdd = () => {
-      propsViewRef.value.countAdd();
-    };
-    const comCount = ref(0);
-    const open = () => {
-      const { appContext } = getCurrentInstance() || {};
-      let dialog = {};
-      const options = {
-        props: {
-          title: "hello dialog",
-        },
-        events: {
-          onClose: () => {
-            console.log("close11");
-          },
-        },
-        slots: {
-          default: () => <ComView count={comCount.value} dialog={dialog} />,
-          title: () => <div>title slot</div>,
-          footer: () => <div>footer slot</div>,
-        },
-      };
-      dialog.close = openDialog(options, appContext).close;
-    };
-    const activeTab = ref("btnSelect");
-    return () => (
-      <>
-        <el-tabs v-model={activeTab.value} type="border-card">
-          <el-tab-pane label="首页" name="first">   <div>
-            123
-            <span>
-              <el-button type="primary" onClick={open}>
-                open dialog
-              </el-button>
-              <el-button type="primary" onClick={countAdd}>
-                props countAdd
-              </el-button>
-              <div>count: {count.value}</div>
-              <PropsView
-                ref={propsViewRef}
-                msg="hello props"
-                onMyEvent={() => {
-                  count.value++;
-                }}
-              >
-                {{
-                  default: () => <div>default slot</div>,
-                }}
-              </PropsView>
-            </span>
-          </div></el-tab-pane>
-          <el-tab-pane label="按钮下拉框" name="btnSelect">
-            <BtnSelect />
-          </el-tab-pane>
-        </el-tabs>
-
-      </>
-    );
-  },
-});
-</script>

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

@@ -1,33 +0,0 @@
-<script lang="jsx">
-import { defineComponent, ref, h, Fragment } from 'vue'
-
-export default defineComponent({
-  name: 'PropsView',
-  emits: ['myEvent'],
-  setup(props, { attrs, emit ,slots ,expose }) {
-    console.log(props, 'props');
-    console.log(attrs, 'attrs');  
-    console.log(emit, 'emit');
-    console.log(slots, 'slots');  
-    console.log(expose, 'expose');
-    const count = ref(0);
-    const countAdd = () => {
-      count.value++;
-    }
-    expose({
-      countAdd,
-    })
-    return () => <>
-      <div>
-      {attrs.msg}
-      <div>props count: {count.value}</div>
-      {slots.default()}
-      <el-button type="primary" onClick={() => {
-        console.log('myEvent');
-        
-        emit('myEvent')
-      }}>countAdd</el-button>
-      </div></>
-  }
-})
-</script>