perf: macro lottie

JX3BOX · Jul 13, 2024 · 62cdfe8 · 62cdfe8
1 parent 9d85de4
commit 62cdfe8
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
         "@jx3box/jx3box-emotion": "^1.2.8",
         "@jx3box/jx3box-facedat": "^2.6.1",
         "@jx3box/jx3box-talent": "^1.2.7",
+        "@vueuse/core": "^10.11.0",
         "axios": "^0.19.2",
         "core-js": "^3.16.2",
         "dayjs": "^1.11.5",

diff --git a/src/components/cms_banner.vue b/src/components/cms_banner.vue
@@ -52,7 +52,7 @@ export default {
         height: 100px !important;
         .pr;
     }
-    i {
+    .el-icon-plus {
         .pa;
         top: 50%;
         left: 50%;

diff --git a/src/components/publish_macro.vue b/src/components/publish_macro.vue
@@ -41,6 +41,7 @@
                             </a>
                         </h5>
                         <div class="u-group">
+                            <publish-mark :value="item.mark" @change="onMarkChange"></publish-mark>
                             <div class="u-subblock m-macro-icon">
                                 <el-input
                                     v-model="item.icon"
@@ -185,6 +186,7 @@ import { sterilizer } from "sterilizer/index.js";
 import { __iconPath } from "@jx3box/jx3box-common/data/jx3box.json";
 import isEmptyMeta from "@/utils/isEmptyMeta.js";
 import cloneDeep from 'lodash/cloneDeep'
+import publish_mark from "./publish_mark.vue";
 
 import Sortable from 'sortablejs'
 // META空模板
@@ -199,13 +201,16 @@ const default_meta = {
             equip: "",
             equip_type: "jx3box",
             desc: "",
+            mark: "",
         },
     ],
 };
 export default {
     name: "publishMacro",
     props: ["data", "client"],
-    components: {},
+    components: {
+        "publish-mark": publish_mark,
+    },
     data: function () {
         return {
             macros: this.data,
@@ -269,6 +274,7 @@ export default {
                 equip: "",
                 equip_type: "",
                 desc: "",
+                mark: "",
             });
             this.activeIndex = index;
         },
@@ -332,6 +338,11 @@ export default {
             this.$set(item, "icon", id);
             return __iconPath + "icon/" + id + ".png";
         },
+
+        // 标记
+        onMarkChange: function (val) {
+            this.$set(this.macros.data[this.activeIndex - 1], "mark", val);
+        },
     },
     filters: {},
     created: function () {},

diff --git a/src/components/publish_mark.vue b/src/components/publish_mark.vue
@@ -0,0 +1,113 @@
+<template>
+    <el-popover ref="publish_mark" trigger="manual" v-model="visible" popper-class="m-publish-mark_popover">
+        <div class="m-publish-marks">
+            <div v-for="star in stars" class="m-publish-mark" :key="star" @click="onStarClick(star)">
+                <img :src="imgPath(star)" alt="" svg-inline>
+            </div>
+        </div>
+        <div slot="reference" class="m-mark-content" @click="onVisibleChange">
+            <img v-if="star" :src="imgPath(star)" class="u-mark-img" alt="" svg-inline>
+            <span v-else class="u-mark-empty">/</span>
+        </div>
+    </el-popover>
+</template>
+
+<script>
+const stars = ["star", "star_red", "star_green", "star_blue"];
+import { onClickOutside } from '@vueuse/core'
+export default {
+    name: 'publish_mark',
+    props: {
+        value: {
+            type: String,
+            default: ""
+        }
+    },
+    data() {
+        return {
+            visible: false,
+
+            stars: stars,
+
+            star: ""
+        }
+    },
+    watch: {
+        value: {
+            immediate: true,
+            handler(val) {
+                this.star = val;
+            }
+        }
+    },
+    mounted() {
+        onClickOutside(this.$refs.publish_mark.$el, () => {
+            this.visible = false;
+        })
+    },
+    methods: {
+        handleVisibleChange(visible) {
+            this.visible = visible;
+        },
+        imgPath(star) {
+            return require(`../assets/img/macro/${star}.svg`);
+        },
+        onStarClick(star) {
+            if (this.star === star) {
+                this.star = "";
+            } else {
+                this.star = star;
+            }
+            this.visible = false;
+            this.$emit("change", this.star);
+        },
+        onVisibleChange() {
+            this.visible = !this.visible;
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.m-publish-mark_popover {
+    .m-publish-marks {
+        .flex;
+        align-items: center;
+        // justify-content: center;
+        gap: 10px;
+    }
+    .m-publish-mark {
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+        img {
+            width: 20px;
+            height: 20px;
+        }
+    }
+}
+.m-mark-content {
+    height: 40px;
+    width: 40px;
+    .flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #dcdfe6;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin-right: 10px;
+    .pointer;
+    .u-mark-img {
+        width: 20px;
+        height: 20px;
+    }
+    .u-mark-empty {
+        color: #c0c4cc;
+    }
+
+    &:hover {
+        background-color: #e6f7ff;
+    }
+}
+</style>
diff --git a/src/post/macro.vue b/src/post/macro.vue
@@ -222,7 +222,8 @@ export default {
                             equip: "",
                             equip_type: "jx3box",
                             desc: "",
-                            sq: []
+                            sq: [],
+                            mark: "",
                         },
                     ],
                 },