bi-element-ui 1.5.2 → 1.6.0

package/src/App.vue

@@ -42,6 +42,10 @@
             <i class="el-icon-edit-outline"></i>
             <span>图文编辑</span>
           </el-menu-item>
+          <el-menu-item index="/fireworks">
+            <i class="el-icon-magic-stick"></i>
+            <span>烟花</span>
+          </el-menu-item>
         </el-menu>
       </el-aside>
       <el-main>

package/src/router/index.js

@@ -44,6 +44,11 @@ const routes = [
     path: '/textEditor',
     name: 'textEditor',
     component: () => import(/* webpackChunkName: "about" */ '../views/textEditor.vue')
+  },
+  {
+    path: '/fireworks',
+    name: 'Fireworks',
+    component: () => import(/* webpackChunkName: "fireworks" */ '../views/Fireworks.vue')
   }
 ]
 

package/src/utils/request.js

@@ -15,6 +15,7 @@ console.log(process.env.VUE_APP_BASE_API)
 service.interceptors.request.use(
   (config) => {
     // do something before request is sent
+    config.headers['Content-Type'] = 'application/json'
     config.headers['AuthKey'] = 'authtpe84dzfl3iq62'
     config.headers['Login-Env'] = getUa()
     config.headers['Login-Device'] = JSON.stringify(browserType())

package/src/views/Fireworks.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="page-content">
+    <!-- 生日蛋糕SVG动画 -->
+    <div class="birthday-cake-container">
+      <object
+        data="./img/birthday-cake.svg"
+        type="image/svg+xml"
+        width="200"
+        height="240"
+      ></object>
+    </div>
+
+    <div class="action-buttons">
+      <el-button
+        :disabled="isLaunching"
+        @click="handleSingleLaunch"
+      >
+        ✨ 放个小烟花
+      </el-button>
+      <el-button
+        :disabled="isLaunching"
+        @click="handleImageLaunch(bp)"
+      >
+        🎉 打开幸运红包
+      </el-button>
+      <el-button
+        :disabled="isLaunching"
+        @click="handleImageLaunch(yd)"
+      >
+        🎉 打开红包雨
+      </el-button>
+      <el-button
+        :disabled="isLaunching"
+        @click="handleImageLaunch(xc)"
+      >
+        🎉 打开小丑红包
+      </el-button>
+      <el-button
+        :disabled="isLaunching"
+        type="primary"
+        @click="handleBirthdayFireworks"
+      >
+        🎂 生日庆祝模式
+      </el-button>
+      <el-button
+        :disabled="isLaunching"
+        type="warning"
+        @click="handleCakeFireworks"
+      >
+        🍰 蛋糕烟花秀
+      </el-button>
+      <el-button
+        :disabled="isLaunching"
+        @click="handleMultipleLaunch('')"
+      >
+        🎆 璀璨烟火秀
+      </el-button>
+      <el-button
+        :disabled="isLaunching"
+        @click="handleImageLaunch(sd)"
+      >
+        ❄️ 飘点小雪花
+      </el-button>
+      <el-button
+        :disabled="isLaunching"
+        @click="handleMultipleLaunch(sd)"
+      >
+        ❄️ 浪漫暴风雪
+      </el-button>
+    </div>
+
+    <el-descriptions
+      title="礼花组件说明"
+      direction="vertical"
+      :column="1"
+      border
+      style="margin-top: 50px"
+    >
+      <el-descriptions-item label="显示时机">
+        礼花效果组件全局注册了，在节假日的时候，会自动显示，你可以通过配置文件来控制显示时机
+      </el-descriptions-item>
+      <el-descriptions-item label="礼花样式">
+        默认显示几何图形，可以配置图片，图片需要提前在 packages/Fireworks/imgs 文件夹中预先定义。蛋糕模式会在canvas中央显示大蛋糕背景，使用彩色几何图形作为烟花粒子。
+      </el-descriptions-item>
+      <el-descriptions-item label="节日配置">
+        可以根据项目需要配置节日和对应的礼花样式
+      </el-descriptions-item>
+      <el-descriptions-item label="快捷键">
+        command + shift + p 或者 ctrl + shift + p
+      </el-descriptions-item>
+      <el-descriptions-item label="蛋糕模式">
+        点击"🍰 蛋糕烟花秀"按钮可体验特殊的蛋糕模式：大蛋糕固定显示在屏幕中央，彩色几何图形作为烟花粒子绽放。
+      </el-descriptions-item>
+    </el-descriptions>
+
+    <!-- 烟花组件 -->
+    <BiFireworks />
+  </div>
+</template>
+
+<script>
+import bp from './img/hb.png'
+import sd from './img/sd.png'
+import yd from './img/yd.png'
+import xc from './img/xc.png'
+
+export default {
+  name: 'FireworksView',
+  data() {
+    return {
+      bp,
+      sd,
+      xc,
+      yd,
+      timerRef: null,
+      isLaunching: false
+    }
+  },
+  beforeDestroy() {
+    if (this.timerRef) {
+      clearInterval(this.timerRef)
+      this.timerRef = null
+    }
+  },
+  methods: {
+    triggerFireworks(count, src) {
+      // 清除之前的定时器
+      if (this.timerRef) {
+        clearInterval(this.timerRef)
+        this.timerRef = null
+      }
+
+      this.isLaunching = true // 开始发射时设置状态
+
+      let fired = 0
+      this.timerRef = setInterval(() => {
+        this.$root.$emit('triggerFireworks', src)
+        fired++
+
+        // 达到指定次数后清除定时器
+        if (fired >= count) {
+          clearInterval(this.timerRef)
+          this.timerRef = null
+          this.isLaunching = false // 发射完成后解除禁用
+        }
+      }, 1000)
+    },
+
+    // 简化后的处理函数
+    handleSingleLaunch() {
+      this.$root.$emit('triggerFireworks')
+    },
+
+    handleMultipleLaunch(src) {
+      this.triggerFireworks(10, src)
+    },
+
+    handleImageLaunch(src) {
+      this.$root.$emit('triggerFireworks', src)
+    },
+
+    handleBirthdayFireworks() {
+      // 生日庆祝模式：多阶段烟花表演
+      this.isLaunching = true
+
+      // 第一阶段：蛋糕烟花
+      this.$root.$emit('triggerFireworks', 'cake-mode')
+
+      // 第二阶段：红包雨
+      setTimeout(() => {
+        this.$root.$emit('triggerFireworks', this.bp)
+      }, 800)
+
+      // 第三阶段：更多蛋糕
+      setTimeout(() => {
+        this.$root.$emit('triggerFireworks', 'cake-mode')
+      }, 1600)
+
+      // 第四阶段：混合烟花
+      setTimeout(() => {
+        this.$root.$emit('triggerFireworks', this.yd)
+      }, 2400)
+
+      // 第五阶段：大结局
+      setTimeout(() => {
+        this.$root.$emit('triggerFireworks')
+        this.$root.$emit('triggerFireworks', this.xc)
+      }, 3200)
+
+      // 重置状态
+      setTimeout(() => {
+        this.isLaunching = false
+      }, 4000)
+    },
+
+    handleCakeFireworks() {
+      // 蛋糕烟花秀：专门展示蛋糕模式效果
+      this.isLaunching = true
+
+      // 连续发射多轮蛋糕烟花，展示大蛋糕背景效果
+      this.$root.$emit('triggerFireworks', 'cake-mode')
+
+      // setTimeout(() => {
+      //   this.$root.$emit('triggerFireworks', 'cake-mode')
+      // }, 1000)
+
+      // setTimeout(() => {
+      //   this.$root.$emit('triggerFireworks', 'cake-mode')
+      // }, 2000)
+
+      // 重置状态
+      setTimeout(() => {
+        this.isLaunching = false
+      }, 3000)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-content {
+  padding: 20px;
+  text-align: center;
+}
+
+.birthday-cake-container {
+  margin: 20px auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 15px;
+  padding: 20px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  max-width: 240px;
+  margin-bottom: 30px;
+
+  object {
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+  }
+}
+
+.action-buttons {
+  margin-bottom: 20px;
+}
+
+.action-buttons .el-button {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>

package/src/views/Layout.vue

@@ -4,7 +4,9 @@
 
       <BiNavbarTool
         :token="token"
+        user-id="67"
         :avatar="avatar"
+        :task-center="true"
       />
     </header>
 
@@ -19,7 +21,7 @@
 export default {
   data() {
     return {
-      token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiIxNTc1NzE4NTMyMiIsImxvZ2luX2VudiI6IiIsImlhdCI6MTc0MDQ1MDA2OCwiZXhwIjoxNzQxMDU0ODY4LCJuYmYiOjE3NDA0NTAwNjgsInN1YiI6InRva2Vu6K6k6K-BIiwianRpIjoiMjcyOTQzZGVkYzdmNWM0ODg2MzZlMzY3YjY5MWY2ZGUifQ.Pyi47Jyt_kb4gZL0pquvU5k1_mJGtkTtYWk04C3Jq-Y',
+      token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiIxNTc1NzE4NTMyMiIsImxvZ2luX2VudiI6IiIsImlhdCI6MTc0NzgwNjEyMCwiZXhwIjoxNzQ4NDEwOTIwLCJuYmYiOjE3NDc4MDYxMjAsInN1YiI6InRva2Vu6K6k6K-BIiwianRpIjoiMDA2NDE3YmVlNDQyZjU2ZTQ5YzBiNDcyM2RkMDRkOTIifQ.fzpMThSA7SoscLOk_wiymMO3NYLFgjYR_zPuS5Ar_98',
       avatar: 'https://static-legacy.dingtalk.com/media/lADPBbCc1SE7SD7NAuzNAug_744_748.jpg?imageView2/1/w/80/h/80'
     }
   },

package/src/views/img/mini-cake.svg

@@ -0,0 +1,40 @@
+<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="miniCakeGradient" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" style="stop-color:#FFB6C1;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#FF69B4;stop-opacity:1" />
+    </radialGradient>
+    <radialGradient id="miniFlameGradient" cx="50%" cy="80%" r="60%">
+      <stop offset="0%" style="stop-color:#FFF8DC;stop-opacity:1" />
+      <stop offset="30%" style="stop-color:#FFD700;stop-opacity:1" />
+      <stop offset="80%" style="stop-color:#FF8C00;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#FF4500;stop-opacity:0.9" />
+    </radialGradient>
+  </defs>
+  
+  <!-- 蛋糕底部 -->
+  <ellipse cx="15" cy="25" rx="12" ry="3" fill="#90EE90"/>
+  <rect x="3" y="22" width="24" height="6" fill="#98FB98"/>
+  
+  <!-- 蛋糕顶部 -->
+  <ellipse cx="15" cy="18" rx="8" ry="2" fill="url(#miniCakeGradient)"/>
+  <rect x="7" y="16" width="16" height="4" fill="url(#miniCakeGradient)"/>
+  
+  <!-- 蜡烛 -->
+  <rect x="14" y="12" width="2" height="6" fill="#FFE4B5" stroke="#D2691E" stroke-width="0.3"/>
+  
+  <!-- 火焰 -->
+  <ellipse cx="15" cy="9.5" rx="1.2" ry="2.5" fill="url(#miniFlameGradient)">
+    <animate attributeName="ry" values="2.5;3;2;2.5" dur="0.8s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.9;1;0.8;0.9" dur="0.8s" repeatCount="indefinite"/>
+  </ellipse>
+  
+  <!-- 火焰内核 -->
+  <ellipse cx="15" cy="10" rx="0.5" ry="1" fill="#FFD700" opacity="0.8">
+    <animate attributeName="opacity" values="0.8;0.4;0.8" dur="0.8s" repeatCount="indefinite"/>
+  </ellipse>
+  
+  <!-- 装饰点 -->
+  <circle cx="12" cy="18" r="1" fill="#DC143C"/>
+  <circle cx="18" cy="18" r="1" fill="#DC143C"/>
+</svg>