bi-element-ui 1.4.4 → 1.6.0

package/src/App.vue

@@ -1,16 +1,52 @@
 <template>
   <div id="app">
     <el-container id="example">
-      <el-aside width="150px">
-        <div id="nav">
-          <router-link to="/">例子展示</router-link>
-          <router-link to="/date">date</router-link>
-          <router-link to="/scene">场景使用</router-link>
-          <router-link to="/table">Table</router-link>
-          <router-link to="/showData">Data</router-link>
-          <router-link to="/layout">布局</router-link>
-          <router-link to="/log">日志</router-link>
-        </div>
+      <el-aside
+        width="200px"
+        class="sidebar-container"
+      >
+        <el-menu
+          :default-active="$route.path"
+          class="el-menu-vertical"
+          router
+        >
+          <el-menu-item index="/">
+            <i class="el-icon-s-home"></i>
+            <span>例子展示</span>
+          </el-menu-item>
+          <el-menu-item index="/date">
+            <i class="el-icon-date"></i>
+            <span>date</span>
+          </el-menu-item>
+          <el-menu-item index="/scene">
+            <i class="el-icon-menu"></i>
+            <span>场景使用</span>
+          </el-menu-item>
+          <el-menu-item index="/table">
+            <i class="el-icon-document"></i>
+            <span>Table</span>
+          </el-menu-item>
+          <el-menu-item index="/showData">
+            <i class="el-icon-data-line"></i>
+            <span>Data</span>
+          </el-menu-item>
+          <el-menu-item index="/layout">
+            <i class="el-icon-s-grid"></i>
+            <span>布局</span>
+          </el-menu-item>
+          <el-menu-item index="/log">
+            <i class="el-icon-notebook-2"></i>
+            <span>日志</span>
+          </el-menu-item>
+          <el-menu-item index="/textEditor">
+            <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>
         <router-view />
@@ -26,20 +62,73 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
+  height: 100vh;
 }
 
-#nav {
+#example {
+  height: 100%;
+}
+
+.sidebar-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  background-color: #fff;
+  z-index: 1001;
+  overflow-y: auto;
+  transition: width 0.28s;
+}
+
+.el-menu-vertical {
+  height: 100%;
   margin-top: 30px;
+  border-right: none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
 
-  a {
-    display: block;
-    padding: 20px 25px;
+  .el-menu-item {
     font-weight: bold;
     color: #2c3e50;
+    margin: 4px;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    display: flex;
+    align-items: center;
+
+    i {
+      margin-right: 10px;
+      font-size: 18px;
+      transition: all 0.3s ease;
+      margin-top: -8px;
+    }
 
-    &.router-link-exact-active {
+    &.is-active {
       color: #42b983;
+      background-color: #f0f9f4;
+      transform: translateX(4px);
+
+      i {
+        color: #42b983;
+        transform: scale(1.2);
+      }
+    }
+
+    &:hover {
+      background-color: #f5f7fa;
+      transform: translateX(4px);
+
+      i {
+        transform: scale(1.2);
+      }
     }
   }
 }
+
+.el-main {
+  margin-left: 200px;
+  padding: 20px;
+}
 </style>

package/src/main.js

@@ -15,7 +15,7 @@ Vue.use(BiUi, {
   env: process.env.NODE_ENV,
   // env: 'release',
   needIcon: true,
-  system: 'compass'
+  system: 'pigeon'
 })
 
 Vue.config.productionTip = false

package/src/router/index.js

@@ -39,6 +39,16 @@ const routes = [
     path: '/log',
     name: 'log',
     component: () => import(/* webpackChunkName: "about" */ '../views/Log.vue')
+  },
+  {
+    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/index.js

@@ -294,3 +294,18 @@ export function pathResolve(...paths) {
   // 3. 返回最终的绝对路径
   return '/' + stack.join('/')
 }
+// base64toFile
+export function base64toFile(dataurl, filename = 'file') {
+  const arr = dataurl.split(',')
+  const mime = arr[0].match(/:(.*?);/)[1]
+  const suffix = mime.split('/')[1]
+  const bstr = atob(arr[1])
+  let n = bstr.length
+  const u8arr = new Uint8Array(n)
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n)
+  }
+  return new File([u8arr], `${filename}.${suffix}`, {
+    type: mime
+  })
+}

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/Date.vue

@@ -2,29 +2,73 @@
   <div class="free-table">
     <div class="example-table-box">
       <p>基础日期-{{ date }}</p>
-      <BiDatePicker v-model="date" type="date" placeholder="选择日期"></BiDatePicker>
+      <BiSuperDate
+        v-model="superDate"
+        type="date"
+        placeholder="选择日期"
+      ></BiSuperDate>
+    </div>
+    <div class="example-table-box">
+      <p>基础日期-{{ date }}</p>
+      <BiDatePicker
+        v-model="date"
+        type="date"
+        placeholder="选择日期"
+      ></BiDatePicker>
     </div>
     <div class="example-table-box">
       <p>基础周-{{ date1 }}</p>
-      <BiDatePicker v-model="date1" type="week" placeholder="选择周"></BiDatePicker>
+      <BiDatePicker
+        v-model="date1"
+        type="week"
+        placeholder="选择周"
+      ></BiDatePicker>
     </div>
     <div class="example-table-box">
       <p>基础月-{{ date2 }}</p>
-      <BiDatePicker v-model="date2" type="month" placeholder="选择周"></BiDatePicker>
+      <BiDatePicker
+        v-model="date2"
+        type="month"
+        placeholder="选择周"
+      ></BiDatePicker>
     </div>
     <div class="example-table-box">
       <p>范围日期-{{ date3 }}</p>
-      <BiDatePicker v-model="date3" type="daterange" placeholder="选择日期1" :picker-option="pickerOptions1"></BiDatePicker>
+      <BiDatePicker
+        v-model="date3"
+        type="daterange"
+        placeholder="选择日期1"
+        :picker-option="pickerOptions1"
+      ></BiDatePicker>
       <p>范围日期-{{ date7 }}</p>
-      <BiDatePicker v-model="date7" type="daterange" placeholder="选择日期2" :picker-option="pickerOptions2"></BiDatePicker>
+      <BiDatePicker
+        v-model="date7"
+        type="daterange"
+        placeholder="选择日期2"
+        :picker-option="pickerOptions2"
+      ></BiDatePicker>
     </div>
     <div class="example-table-box">
       <p>范围月-{{ date5 }}</p>
-      <BiDatePicker v-model="date5" type="monthrange" placeholder="选择日期" format="yyyy-MM"></BiDatePicker>
+      <BiDatePicker
+        v-model="date5"
+        type="monthrange"
+        placeholder="选择日期"
+        format="yyyy-MM"
+      ></BiDatePicker>
     </div>
     <div class="example-table-box">
       <p>范围日期时间-{{ date6 }}</p>
-      <BiDatePicker v-model="date6" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></BiDatePicker>
+      <BiDatePicker
+        v-model="date6"
+        type="datetimerange"
+        format="yyyy-MM-dd HH:mm:ss"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        :default-time="['00:00:00', '23:59:59']"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      ></BiDatePicker>
     </div>
   </div>
 </template>
@@ -39,6 +83,7 @@ export default {
   },
   data() {
     return {
+      superDate: [],
       date: '',
       date1: '',
       date2: '',

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> 

package/src/views/textEditor.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <BiTextEditor
+      :remark.sync="ruleForm.content"
+      domid="textEditor33"
+      :contenteditable="true"
+      @resultReamrk="resultReamrk"
+    />
+    <BiTextEditor
+      :remark.sync="ruleForm.remark"
+      domid="textEditor55"
+      :contenteditable="true"
+      @resultReamrk="resultReamrk"
+    />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      ruleForm: {
+        content: '',
+        remark: ''
+      }
+    }
+  },
+  methods: {
+    resultReamrk(val) {
+      console.log(val)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

package/dist/css/about.f927ac1d.css

@@ -1 +0,0 @@
-.example-table-box[data-v-49a6bb0c]{margin:25px 50px}.example-table-box p[data-v-49a6bb0c]{text-align:left;font-weight:700}.box[data-v-ac1da312]{background:#ccc;height:200px;padding:10px 50px}header[data-v-ac1da312]{height:50px;background:#fff}.bi-column-container[data-v-3ffbf407]{display:flex;justify-content:space-between}.bi-column-container .checkbox-container .checkbox-title[data-v-3ffbf407]{cursor:pointer;height:34px;line-height:22px;font-size:14px;font-weight:500;background-color:#f5f5f5;color:#333;position:relative;padding-left:12px;margin-bottom:12px;border-radius:4px;align-items:center;display:flex}.bi-column-container .checkbox-container .el-checkbox-group[data-v-3ffbf407]{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:0;padding-left:12px}.bi-column-container .checkbox-container .el-checkbox-group .el-checkbox[data-v-3ffbf407]{width:210px!important;display:block;float:left;margin:0!important;min-height:32px;max-height:52px;line-height:20px}.bi-column-container .column-container[data-v-3ffbf407]{margin-left:20px;width:230px;flex:0 0 230px}.bi-column-container .column-container .column-title[data-v-3ffbf407]{display:flex;justify-content:space-between}.bi-column-container .column-container .column-title .el-button[data-v-3ffbf407]{padding:0}.bi-column-container .column-container .column-group-title[data-v-3ffbf407]{font-size:14px;color:#8c8c8c;margin:5px 0}.bi-column-container .column-container .column-configurable .selected-column-item[data-v-3ffbf407]{cursor:move;height:26px;background:#f0f0f0;border-radius:4px;line-height:28px;padding:0 8px;margin-top:0;display:flex;align-items:center;color:#666;font-size:14px}.bi-column-container .column-container .column-configurable .selected-column-item[data-v-3ffbf407]:not(:first-child){margin-top:8px}.bi-column-container .column-container .column-configurable .selected-column-item .column-name[data-v-3ffbf407]{flex-grow:2;margin-left:8px}.bi-column-container .column-container .column-configurable .selected-column-item .column-close[data-v-3ffbf407]{cursor:pointer}.bi-column-dialog .el-card__header{background-color:#f8f9fa;box-sizing:border-box;line-height:22px;padding:8px 12px;font-weight:600;color:#333}.bi-column-dialog .el-card__body{padding:12px 16px;height:395px;box-sizing:border-box;overflow-y:auto}.example-table-box[data-v-3caabf88]{margin:25px 50px;position:relative}.example-table-box p[data-v-3caabf88]{text-align:left;font-weight:700}