npmapps 1.0.24 → 1.0.26

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>

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

@@ -1,225 +0,0 @@
-<template>
-  <div class="parent-to-child">
-    <h2 class="page-title">消息接收中心</h2>
-    
-    <div class="message-container">
-      <div class="message-section">
-        <div class="section-header">
-          <h3>全局广播消息</h3>
-          <el-button type="primary" size="small" @click="clearGlobalMessages">
-            清空消息
-          </el-button>
-        </div>
-        <div class="message-list" v-if="globalMessages.length">
-          <div v-for="(msg, index) in globalMessages" 
-               :key="index" 
-               class="message-item">
-            <div class="message-header">
-              <span class="message-time">{{ msg.time }}</span>
-              <span class="message-type" :class="msg.type">{{ msg.type }}</span>
-            </div>
-            <h4 class="message-title">{{ msg.title }}</h4>
-            <p class="message-content">{{ msg.message }}</p>
-          </div>
-        </div>
-        <div v-else class="empty-message">
-          暂无消息
-        </div>
-      </div>
-
-      <div class="message-section">
-        <div class="section-header">
-          <h3>定向消息</h3>
-          <el-button type="primary" size="small" @click="clearDirectMessages">
-            清空消息
-          </el-button>
-        </div>
-        <div class="message-list" v-if="directMessages.length">
-          <div v-for="(msg, index) in directMessages" 
-               :key="index" 
-               class="message-item">
-            <div class="message-header">
-              <span class="message-time">{{ msg.time }}</span>
-              <span class="message-type" :class="msg.type">{{ msg.type }}</span>
-            </div>
-            <h4 class="message-title">{{ msg.title }}</h4>
-            <p class="message-content">{{ msg.message }}</p>
-          </div>
-        </div>
-        <div v-else class="empty-message">
-          暂无消息
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-
-const globalMessages = ref([])
-const directMessages = ref([])
-
-const formatTime = () => {
-  const now = new Date()
-  return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
-}
-
-const clearGlobalMessages = () => {
-  globalMessages.value = []
-}
-
-const clearDirectMessages = () => {
-  directMessages.value = []
-}
-
-onMounted(() => {
-  // 监听全局广播消息
-  window.$wujie?.bus.$on('global-message', (data) => {
-    globalMessages.value.unshift({
-      ...data,
-      time: formatTime()
-    })
-  })
-
-  // 监听定向消息
-  window.$wujie?.bus.$on('vue3-child-message', (data) => {
-    directMessages.value.unshift({
-      ...data,
-      time: formatTime()
-    })
-  })
-})
-</script>
-
-<style scoped>
-.parent-to-child {
-  padding: 24px;
-  background-color: #f5f7fa;
-  min-height: 100vh;
-}
-
-.page-title {
-  color: #303133;
-  margin-bottom: 24px;
-  font-size: 24px;
-}
-
-.message-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 24px;
-}
-
-.message-section {
-  background: white;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #ebeef5;
-}
-
-.section-header h3 {
-  margin: 0;
-  color: #303133;
-  font-size: 18px;
-}
-
-.message-list {
-  max-height: 500px;
-  overflow-y: auto;
-}
-
-.message-item {
-  padding: 12px;
-  border-bottom: 1px solid #ebeef5;
-  transition: background-color 0.3s;
-}
-
-.message-item:hover {
-  background-color: #f5f7fa;
-}
-
-.message-time {
-  font-size: 12px;
-  color: #909399;
-}
-
-.message-content {
-  margin: 8px 0 0;
-  color: #606266;
-  line-height: 1.5;
-}
-
-.empty-message {
-  text-align: center;
-  color: #909399;
-  padding: 30px 0;
-}
-
-/* 滚动条样式 */
-.message-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.message-list::-webkit-scrollbar-thumb {
-  background: #c0c4cc;
-  border-radius: 3px;
-}
-
-.message-list::-webkit-scrollbar-track {
-  background: #f5f7fa;
-}
-
-.message-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.message-type {
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 12px;
-}
-
-.message-type.info {
-  background-color: #ecf5ff;
-  color: #409eff;
-}
-
-.message-type.success {
-  background-color: #f0f9eb;
-  color: #67c23a;
-}
-
-.message-type.warning {
-  background-color: #fdf6ec;
-  color: #e6a23c;
-}
-
-.message-type.error {
-  background-color: #fef0f0;
-  color: #f56c6c;
-}
-
-.message-title {
-  margin: 8px 0;
-  font-size: 14px;
-  color: #303133;
-}
-
-.message-content {
-  margin: 8px 0 0;
-  color: #606266;
-  line-height: 1.5;
-}
-</style>