npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/wujie-vue2-child/src/views/Extend/tableMouseHorizontalWheel.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <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 { tableMouseHorizontalWheel } from "@/components/EllTable/index";
+Vue.component("ell-table", tableMouseHorizontalWheel);
+export default {
+  name: "TableMouseHorizontalWheel",
+  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/wujie-wk/wujie-vue2-child/src/views/Home.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="home">
+        <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>
+export default {
+    name: 'Home'
+}
+</script>

package/app/wujie-wk/wujie-vue2-child/src/views/RouterJump.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="router-jump-page">
+    <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>
+export default {
+  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/wujie-wk/wujie-vue2-child/src/views/calendar/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <EventCalendarExample />
+</template>
+
+<script>
+/**
+ * 日程日历示例页
+ * ------------------------------------------------------------------
+ * 页面本身只是一层薄壳，所有示例都在
+ * src/components/EventCalendar/example.vue 里，
+ * 这样组件文件夹整体拷贝到别的项目时，示例也一并带走。
+ */
+import EventCalendarExample from '@/components/EventCalendar/example.vue'
+
+export default {
+  name: 'CalendarView',
+  components: { EventCalendarExample }
+}
+</script>

package/app/wujie-wk/wujie-vue2-child/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/wujie-wk/wujie-vue2-child/src/views/cssComponents/EllipsisText.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="ellipsis-text-page">
+    <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>
+export default {
+  name: 'EllipsisText',
+  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/wujie-wk/wujie-vue2-child/src/views/cssComponents/HoverCard.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="hover-card-page">
+        <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>
+export default {
+    name: 'HoverCard'
+}
+</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>

package/app/wujie-wk/wujie-vue2-child/src/views/cssComponents/TableHover.vue

@@ -0,0 +1,130 @@
+<template>
+    <div class="table-hover-page">
+        <el-table
+            :data="data"
+            style="width: 100%"
+            :span-method="objectSpanMethod"
+            :row-class-name="tableRowClassName"
+            :cell-style="cellStyle"
+            @cell-mouse-enter="handleCellMouseEnter"
+            @cell-mouse-leave="handleCellMouseLeave"
+            border>
+            <el-table-column prop="service" label="服务" width="180">
+            </el-table-column>
+            <el-table-column prop="name" label="实现变量" width="280">
+            </el-table-column>
+            <el-table-column prop="value" label="总配额">
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TableHover',
+    data() {
+        return {
+            data: [
+                { service: 'ActiveMQ连接数', name: 'ActiveMQ队列数', value: '11' },
+                { service: 'ActiveMQ连接数', name: 'ActiveMQ流控配额', value: '111112' },
+                { service: 'ActiveMQ连接数', name: 'ActiveMQ连接配额', value: '111111' },
+                { service: 'ActiveMQ连接数', name: 'ActiveMQ存储配额', value: '111111' },
+                { service: '服务内类', name: 'westest00005activeMQ', value: '0' },
+                { service: '服务内类', name: '服务内类配额', value: '111111' },
+                { service: '测试公司内网', name: '配额测试配额测试配额测试配额测试配额测试配额测试', value: '0' },
+                { service: '测试公司内网', name: '测试公司内网(个/人)', value: '111111' },
+                { service: '测试公司内网', name: '测试公司内网配额', value: '111111' },
+                { service: '测试公司内网', name: 'test111165', value: '0' },
+                { service: '测试公司内网', name: 'sss', value: '111111' },
+                { service: '测试公司内网', name: 'westest001测试', value: '0' }
+            ],
+            currentIndex: '', // 当前悬浮行的标识
+            currentColumnIndex: '' // 当前悬浮列的标识
+        }
+    },
+    methods: {
+        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+            // 获取表格数据
+            const tableData = this.data;
+
+            // 只处理第一列的合并
+            if (columnIndex === 0) {
+                // 获取当前行的值
+                const currentValue = row.service; // 假设要根据 service 来合并
+
+                // 向上查找相同值的行数
+                let count = 1; // 至少包含当前行
+                for (let i = rowIndex - 1; i >= 0; i--) {
+                    if (tableData[i].service === currentValue) {
+                        count++;
+                    } else {
+                        break;
+                    }
+                }
+
+                // 如果是相同值的第一行，则合并
+                if (rowIndex === 0 || tableData[rowIndex - 1].service !== currentValue) {
+                    // 向下查找相同值的行数
+                    for (let i = rowIndex + 1; i < tableData.length; i++) {
+                        if (tableData[i].service === currentValue) {
+                            count++;
+                        } else {
+                            break;
+                        }
+                    }
+                    return {
+                        rowspan: count,
+                        colspan: 1
+                    };
+                } else {
+                    // 不是第一行则隐藏
+                    return {
+                        rowspan: 0,
+                        colspan: 0
+                    };
+                }
+            }
+
+            // 其他列保持不变
+            return {
+                rowspan: 1,
+                colspan: 1
+            };
+        },
+        handleCellMouseEnter(row, column, cell, event) {
+            this.currentIndex = row.service; // 记录当前悬浮行的 service 值
+            this.currentColumnIndex = column.label;
+        },
+
+        handleCellMouseLeave() {
+            this.currentIndex = '';
+            this.currentColumnIndex = '';
+        },
+
+        // 行的样式类名
+        tableRowClassName({ row }) {
+            let flag = row.service === this.currentIndex &&
+                      this.currentColumnIndex === '服务'; // 根据实际的第一列标题修改
+            return flag ? 'table-hover-row' : '';
+        },
+
+        // 单元格样式
+        cellStyle({ row, column, rowIndex, columnIndex }) {
+            let flag = row.service === this.currentIndex &&
+                      this.currentColumnIndex &&
+                      this.currentColumnIndex !== '服务' &&
+                      columnIndex === 0;
+            return flag ? 'background: #f4f6fa' : '';
+        }
+    }
+}
+</script>
+
+<style>
+.el-table .table-hover-row {
+    background: #f4f6fa !important;
+}
+.el-table td {
+    padding: 8px 0;
+}
+</style>