npmapps 1.0.25 → 1.0.26

package/app/src/views/Extend/tableMouseHorizontalWheel.vue

@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <PageHeader
+      title="鼠标滚轮横向滚动"
+      description="监听 el-table 鼠标滚轮事件，实现表格横向滚动效果"
+      usage="&lt;ell-table :data=&quot;tableData&quot; border height=&quot;400&quot;&gt; 配合 fixed=&quot;left/right&quot; 固定列使用"
+    />
+    <ell-table :data="tableData" border style="width: 100%" height="400">
+      <el-table-column
+        prop="date"
+        label="日期"
+        width="180"
+        fixed="left"
+      ></el-table-column>
+      <el-table-column label="合并列" width="660">
+        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
+        <el-table-column
+          prop="nickname"
+          label="昵称"
+          width="180"
+        ></el-table-column>
+        <el-table-column
+          prop="address"
+          label="地址"
+          width="300"
+        ></el-table-column>
+      </el-table-column>
+      <el-table-column prop="phone" label="电话" width="180"></el-table-column>
+      <el-table-column prop="gender" label="性别" width="180"></el-table-column>
+      <el-table-column prop="age" label="年龄" width="180"></el-table-column>
+      <el-table-column prop="hobby" label="爱好" width="180"></el-table-column>
+      <el-table-column
+        prop="favorite"
+        label="爱好"
+        width="180"
+      ></el-table-column>
+      <el-table-column prop="remark" label="备注" width="180"></el-table-column>
+      <el-table-column prop="price" label="价格" width="180"></el-table-column>
+      <el-table-column
+        prop="quantity"
+        label="数量"
+        width="180"
+      ></el-table-column>
+      <el-table-column prop="total" label="合计" width="180"></el-table-column>
+      <el-table-column prop="status" label="状态" width="180"></el-table-column>
+    </ell-table>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import PageHeader from "@/components/PageHeader/index.vue";
+import { tableMouseHorizontalWheel } from "@/components/EllTable/index";
+Vue.component("ell-table", tableMouseHorizontalWheel);
+export default {
+  name: "TableMouseHorizontalWheel",
+  components: {
+    PageHeader,
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          nickname: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+          phone: "13800000000",
+          gender: "男",
+          age: 25,
+          hobby: "游泳",
+          favorite: "外套",
+          remark: "无",
+          price: 100,
+          quantity: 1,
+          total: 100,
+          status: "已完成",
+        },
+        {
+          date: "2016-05-041",
+          name: "王小虎1",
+          nickname: "王小虎1",
+          address: "上海市普陀区金沙江路 1517 弄1",
+          phone: "138000000001",
+          gender: "男1",
+          age: 25,
+          hobby: "游泳1",
+          favorite: "外套1",
+          remark: "无1",
+          price: 100,
+          quantity: 1,
+          total: 100,
+          status: "已完成1",
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎2",
+          nickname: "王小虎2",
+          address: "上海市普陀区金沙江路 1519 弄2",
+          phone: "138000000002",
+          gender: "男2",
+          age: 25,
+          hobby: "游泳2",
+          favorite: "外套2",
+          remark: "无2",
+          price: 100,
+          quantity: 1,
+          total: 100,
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎3",
+          nickname: "王小虎3",
+          address: "上海市普陀区金沙江路 1519 弄3",
+          phone: "138000000003",
+          gender: "男3",
+          age: 25,
+          hobby: "游泳3",
+          favorite: "外套3",
+          remark: "无3",
+          price: 100,
+          quantity: 1,
+          total: 100,
+          status: "已完成3",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          nickname: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+          phone: "13800000000",
+          gender: "男",
+          age: 25,
+          hobby: "游泳",
+          favorite: "外套",
+          remark: "无",
+          price: 100,
+          quantity: 1,
+          total: 100,
+          status: "已完成",
+        },
+        {
+          date: "2016-05-041",
+          name: "王小虎1",
+          nickname: "王小虎1",
+          address: "上海市普陀区金沙江路 1517 弄1",
+          phone: "138000000001",
+          gender: "男1",
+          age: 25,
+          hobby: "游泳1",
+          favorite: "外套1",
+          remark: "无1",
+          price: 100,
+          quantity: 1,
+          total: 100,
+          status: "已完成1",
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎2",
+          nickname: "王小虎2",
+          address: "上海市普陀区金沙江路 1519 弄2",
+          phone: "138000000002",
+          gender: "男2",
+          age: 25,
+          hobby: "游泳2",
+          favorite: "外套2",
+          remark: "无2",
+          price: 100,
+          quantity: 1,
+          total: 100,
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎3",
+          nickname: "王小虎3",
+          address: "上海市普陀区金沙江路 1519 弄3",
+          phone: "138000000003",
+          gender: "男3",
+          age: 25,
+          hobby: "游泳3",
+          favorite: "外套3",
+          remark: "无3",
+          price: 100,
+          quantity: 1,
+          total: 100,
+          status: "已完成3",
+        },
+      ],
+    };
+  },
+};
+</script>

package/app/src/views/Home.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="home">
+        <PageHeader
+            title="Vue2 子应用"
+            description="本项目是 Vue2 子应用，集成 Element UI 组件库展示，支持微前端框架 WuJie 的路由跳转和通信机制"
+            usage="作为 Vue2 子应用运行，通过 WuJie 框架与主应用集成，支持路由跳转和跨应用通信"
+        />
+        <h1 style="">Vue2子应用</h1>
+    </div>
+</template>
+
+<style scoped>
+.home {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f0f0f0;
+}
+
+h1 {
+    color: #42b983;
+    font-family: 'Arial', sans-serif;
+    font-size: 18px;
+}
+</style>
+
+<script>
+import PageHeader from '@/components/PageHeader/index.vue'
+
+export default {
+    name: 'Home',
+    components: {
+        PageHeader
+    }
+}
+</script>

package/app/src/views/RouterJump.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="router-jump-page">
+    <PageHeader
+      title="微前端路由跳转"
+      description="用于在子应用中跳转到主应用，支持传递路径和参数，实现微前端间的路由跳转"
+      usage="填写目标路径、姓名、年龄，选择目标应用，点击'跳转到主应用'按钮触发跳转"
+    />
+    <div class="flex-container">
+      <div class="container">
+        <h1>vue2子应用路由跳转</h1>
+        <el-input v-model="url" placeholder="请输入地址" class="input-field"></el-input>
+        <el-input v-model="name" placeholder="请输入姓名" class="input-field"></el-input>
+        <el-input
+          v-model="age"
+          placeholder="请输入年龄"
+          type="number"
+          class="input-field"
+        ></el-input>
+        <el-select v-model="selectedApp" placeholder="请选择应用" class="input-field">
+          <el-option label="main" value="main"></el-option>
+          <el-option label="vue3-child-copy" value="vue3-child-copy"></el-option>
+        </el-select>
+        <el-button type="primary" @click="jumpToMain" class="action-button" v-if="isShow"
+          >跳转到主应用</el-button
+        >
+      </div>
+      <div class="route-params">
+        <h1>接收到的路由参数：</h1>
+        <p>路径: {{ $route.path }}</p>
+        <p v-for="(item, key) in $route.query" :key="item">{{ key }}:{{ item }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PageHeader from '@/components/PageHeader/index.vue'
+
+export default {
+  components: {
+    PageHeader,
+  },
+  data() {
+    return {
+      url: "/router-jump",
+      name: "name",
+      age: "age",
+      selectedApp: "main",
+      isShow: true,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (!window.$wujie) {
+        this.isShow = false;
+      }
+    });
+  },
+  methods: {
+    jumpToMain() {
+      window.$wujie?.bus.$emit("router-jump-to-main", {
+        app: this.selectedApp,
+        path: this.url,
+        query: {
+          name: this.name,
+          age: this.age,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.router-jump-page {
+  padding: 20px;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+  background-color: #f8f8f8;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  width: 45%;
+  margin: 0;
+  transition: box-shadow 0.3s ease-in-out;
+}
+
+h1 {
+  color: #333;
+  margin-bottom: 20px;
+  font-family: "Helvetica Neue", Arial, sans-serif;
+}
+
+.input-field {
+  width: 100%;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 10px;
+  transition: border-color 0.3s ease-in-out;
+}
+
+.input-field:focus {
+  border-color: #007bff;
+}
+
+.action-button {
+  width: 100%;
+  height: 40px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  transition: background-color 0.3s ease-in-out;
+}
+
+.action-button:hover {
+  background-color: #0056b3;
+}
+
+.route-params {
+  padding: 20px;
+  background-color: #eef2f7;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  width: 45%;
+  margin: 0;
+}
+
+.route-params h1 {
+  color: #007bff;
+  font-size: 24px;
+}
+
+.route-params p {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 10px;
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+
+.flex-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+  padding: 20px;
+  gap: 20px;
+}
+</style>

package/app/src/views/css.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="css-page">
+    <el-tabs type="border-card">
+      <el-tab-pane label="中间显示省略号...">
+        <div>
+          <EllipsisText text="你好，我是中间显示省略号，我是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26" />
+          <EllipsisText text="你好，我是中间显示省略号，我是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26" />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="表格悬浮效果">
+        <div>
+          <TableHover />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="悬浮卡片效果">
+        <div>
+          <HoverCard />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="el-input slot对不齐问题">
+        <div>
+          <InputSlo />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="el-table fixed 问题">
+        <div>
+          <TableFixed />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import EllipsisText from '@/views/cssComponents/EllipsisText.vue'
+import TableHover from '@/views/cssComponents/TableHover.vue'
+import HoverCard from '@/views/cssComponents/HoverCard.vue'
+import InputSlo from './cssComponents/inputSlo.vue'
+import TableFixed from './cssComponents/tableFixed.vue'
+
+export default {
+  name: 'CssPage',
+  components: {
+    EllipsisText,
+    TableHover,
+    HoverCard,
+    InputSlo,
+    TableFixed,
+  },
+}
+</script>
+
+<style scoped>
+.css-page {
+  padding: 20px;
+}
+</style>

package/app/src/views/cssComponents/EllipsisText.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="ellipsis-text-page">
+    <PageHeader
+      title="中间省略号"
+      description="长文本在中间位置截断并显示省略号，鼠标悬浮显示完整内容"
+      usage="&lt;EllipsisText text=&quot;长文本内容&quot; /&gt;"
+    />
+    <div class="ellipsis-text">
+      <ul class="con">
+        <li class="wrap">
+          <span class="txt">{{ text }}</span>
+          <span class="title" :title="text">{{ text }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import PageHeader from '@/components/PageHeader/index.vue'
+
+export default {
+  name: 'EllipsisText',
+  components: {
+    PageHeader
+  },
+  props: {
+    text: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.con {
+    font-size: 14px;
+    color: #666;
+    width: 600px;
+    border-radius: 8px;
+    padding: 4px;
+    overflow: hidden;
+    resize: horizontal;
+    border: 1px solid #ccc;
+}
+
+.wrap {
+    position: relative;
+    line-height: 2;
+    height: 2em;
+    padding: 0 10px;
+    overflow: hidden;
+    background: #fff;
+}
+
+
+
+.title {
+    display: block;
+    position: relative;
+    background: inherit;
+    text-align: justify;
+    height: 2em;
+    overflow: hidden;
+    top: -4em;
+}
+
+.txt {
+    display: block;
+    max-height: 4em;
+}
+
+.title::before {
+    content: attr(title);
+    width: 50%;
+    float: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    direction: rtl;
+}
+</style>

package/app/src/views/cssComponents/HoverCard.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="hover-card-page">
+        <PageHeader
+            title="悬浮卡片"
+            description="鼠标悬浮时卡片上移并增强阴影，提供交互反馈"
+            usage="&lt;HoverCard /&gt; 在 el-card 外层包裹即可"
+        />
+        <div class="card-container">
+            <div class="card">
+                <div class="card-content">
+                    <h3>悬浮卡片</h3>
+                    <p>将鼠标悬浮在卡片上查看效果</p>
+                    <button class="card-btn">了解更多</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import PageHeader from '@/components/PageHeader/index.vue'
+
+export default {
+    name: 'HoverCard',
+    components: {
+        PageHeader
+    }
+}
+</script>
+
+<style scoped>
+.card-container {
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+}
+
+.card {
+    width: 300px;
+    background: white;
+    border-radius: 15px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 12px 24px rgba(0,0,0,0.2);
+}
+
+.card-content {
+    text-align: center;
+}
+
+.card-content h3 {
+    color: #333;
+    margin-bottom: 15px;
+}
+
+.card-content p {
+    color: #666;
+    margin-bottom: 20px;
+}
+
+.card-btn {
+    background: #409EFF;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+}
+
+.card-btn:hover {
+    background: #66b1ff;
+}
+</style>