@jx3box/jx3box-editor 1.4.4 → 1.4.7

package/assets/css/module/icon.less

@@ -10,10 +10,12 @@
     }
 
     .e-jx3-emotion {
-        .size(80px, 80px);
-        .mr(10px);
-        box-shadow: 0 0 1px inset rgba(0, 0, 0, 0.2);
-        //border: 1px solid #d2d2d2;
+        
+        max-width: 320px;
         vertical-align: middle;
+        &:hover{
+            box-shadow:none !important;
+        }
+        .e-jx3-emotion-img{border:none !important}
     }
 }

package/assets/css/resource.less

@@ -1,5 +1,5 @@
 .c-resource {
-    margin-right:5px;
+    margin-right: 5px;
     .u-switch {
         .u-icon {
             .size(14px);
@@ -18,8 +18,9 @@
         .lh(28px);
 
         .pr;
-        .u-mode{
-            .pa;.rt(0);
+        .u-mode {
+            .pa;
+            .rt(0);
         }
     }
 
@@ -70,7 +71,7 @@
             .rt(10px);
             .x(right);
         }
-        .u-detach{
+        .u-detach {
             .mt(4px);
             .db;
         }
@@ -97,8 +98,9 @@
             .mb(5px);
             .db;
 
-            .u-map, .u-life {
-                .mr(20px)
+            .u-map,
+            .u-life {
+                .mr(20px);
             }
         }
         .u-remark {
@@ -150,7 +152,8 @@
         }
     }
 
-    .m-resource-iconlist {
+    .m-resource-iconlist,
+    .m-resource-emotion {
         list-style: none;
         padding: 0;
         margin: 0;
@@ -174,18 +177,24 @@
             border: 2px solid transparent;
             &.on {
                 border: 2px solid #49c10f;
-                float: left;
-                margin-right: 10px;
-                margin-bottom: 10px;
                 border-radius: 6px;
             }
+        }
+    }
 
-            .e-jx3-emotion {
-                .size(80px, 80px);
-                .mr(10px);
-                box-shadow: 0 0 1px inset rgba(0, 0, 0, 0.2);
-                //border: 1px solid #d2d2d2;
-                vertical-align: middle;
+    .m-resource-emotion {
+        .u-item {
+            .mr(20px);
+            .mb(20px);
+        }
+        .e-jx3-emotion {
+            .size(80px, 80px);
+            vertical-align: middle;
+            .e-jx3-emotion-img {
+                border: none !important;
+            }
+            &:hover {
+                box-shadow: none !important;
             }
         }
     }
@@ -219,23 +228,23 @@
         position: sticky;
         z-index: 100;
         top: 0;
-        padding:10px 20px 10px 20px;
-        background-color:#fff;
+        padding: 10px 20px 10px 20px;
+        background-color: #fff;
         .pr;
 
-        .u-client{
+        .u-client {
             // .pa;.lt(20px,10px);
-            margin-right:15px;
+            margin-right: 15px;
         }
-        .u-input{
-            flex:1;
+        .u-input {
+            flex: 1;
         }
         display: flex;
     }
 
     .m-database-tabs {
         // .mt(10px);
-        padding:10px 20px 20px 20px;
+        padding: 10px 20px 20px 20px;
         user-select: none;
         .u-icon {
             .size(20px);
@@ -305,7 +314,7 @@
     // 加载更多
     .m-archive-more {
         .none;
-        margin:0 20px 10px 20px;
+        margin: 0 20px 10px 20px;
         box-sizing: border-box;
         width: calc(100% - 40px);
     }
@@ -316,7 +325,7 @@
     // 分页
     .m-archive-pages {
         overflow-x: auto;
-        margin:0 20px;
+        margin: 0 20px;
         .x;
     }
 }

package/assets/js/jx3_element.js

@@ -16,6 +16,8 @@ function renderItem(vm, selector = ".w-jx3-element") {
             vm.item.client = $(e.target).attr("data-client") == 'origin' ? 2 : 1;
         } else if (type === 'author') {
             vm.author.id = $(e.target).attr("data-id");
+        } else if (type === 'emotion') {
+            vm.emotion.id = $(e.target).attr("data-id");
         } else {
             vm[type].client = $(e.target).attr("data-client");
             vm[type].id = $(e.target).attr("data-id");

package/assets/js/renderImgPreview.js

@@ -6,6 +6,7 @@ function renderImgPreview(vm, selector='.c-article img'){
         vm.images.push($(ele).attr('src'))
         // 绑定事件挂钩索引位置
         $(ele).on('click', (e) => {
+            if (e.target.classList.contains('e-jx3-emotion-img')) return
             vm.$hevueImgPreview({
                 multiple: true,
                 nowImgIndex: i,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-editor",
-  "version": "1.4.4",
+  "version": "1.4.7",
   "description": "JX3BOX Article & Editor",
   "main": "index.js",
   "scripts": {

package/service/author.js

@@ -21,9 +21,14 @@ async function getUserPublicTeams(uid) {
     return res.data.data;
 }
 
+// 获取指定表情
+function getEmotion(id) {
+    return $cms().get(`/api/cms/post/emotion/${id}`);
+}
 
 export {
     getUserMedals,
     getUserInfo,
     getUserPublicTeams,
+    getEmotion
 }

package/src/Article.vue

@@ -55,6 +55,7 @@
             />
             <jx3-npc :client="npc.client" :id="npc.id" v-show="jx3_element.type === 'npc'" />
             <jx3-author :uid="author.id" v-show="jx3_element.type === 'author'" />
+            <jx3-emotion-author :id="emotion.id" v-show="jx3_element.type === 'emotion'" />
         </div>
         <!-- <gallery :images="images" :index="gallery_index" @close="index = null"></gallery> -->
     </div>
@@ -99,7 +100,8 @@ import Item from "./Item";
 import Buff from "./Buff";
 import Skill from "./Skill";
 import Npc from "./Npc";
-import Author from "./Author";
+import Author from "./components/Author";
+import PostAuthor from './components/PostAuthor.vue'
 import renderJx3Element from "../assets/js/jx3_element";
 
 export default {
@@ -149,6 +151,9 @@ export default {
             author: {
                 id: '',
             },
+            emotion: {
+                id: ''
+            },
             // COMMON
             jx3_element: {
                 style: {
@@ -280,6 +285,7 @@ export default {
         "jx3-skill": Skill,
         "jx3-npc": Npc,
         "jx3-author": Author,
+        'jx3-emotion-author': PostAuthor,
         // "gallery":gallery,
         // VueViewer
     },

package/src/BoxResource.vue

@@ -38,21 +38,21 @@
                         </ul>
                         <el-alert v-if="!authors.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
                     </el-tab-pane>
-                    <!-- <el-tab-pane label="表情" name="emotions">
+                    <el-tab-pane label="表情" name="emotions">
                         <span slot="label" class="u-tab-label">
-                            <i class="el-icon-sugar"></i>
+                            <i class="el-icon-sugar" style="margin-right: 5px;"></i> 
                             <b>表情</b>
                         </span>
                         <p v-if="total && done" class="m-resource-count">
                             <i class="el-icon-s-data"></i> 共找到 <b>{{ total }}</b> 条记录
                         </p>
-                        <ul class="m-resource-iconlist">
-                            <li v-for="(o, i) in emotions" class="u-item" :key="i" :class="{ on: !!o.isSelected }" @click="selectEmotion(o)" ref="emotion">
-                                <img class="e-jx3-emotion" :src="userAvatar(o.url)" :alt="query" />
+                        <ul class="m-resource-emotion">
+                            <li v-for="o in emotions" class="u-item" :key="o.id" :class="{ on: !!o.isSelected }" @click="selectEmotion(o)" ref="emotion">
+                                <img class="e-jx3-emotion" :src="resolveImagePath(o.url)" :alt="query" />
                             </li>
                         </ul>
                         <el-alert v-if="!emotions.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
-                    </el-tab-pane> -->
+                    </el-tab-pane>
                 </el-tabs>
 
                 <template v-if="multipage">
@@ -90,10 +90,10 @@ import { loadStat, } from "../service/database";
 import { loadAuthors, loadEmotions } from "../service/cms";
 import { getUserInfo } from "../service/author";
 import { __iconPath, __Root, __OriginRoot, __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
-import { getLink, showAvatar } from "@jx3box/jx3box-common/js/utils";
+import { getLink, showAvatar, resolveImagePath } from "@jx3box/jx3box-common/js/utils";
 import User from "@jx3box/jx3box-common/js/user";
 export default {
-    name: "Resource",
+    name: "BoxResource",
     props: {
         enable: {
             type: Boolean,
@@ -183,8 +183,6 @@ export default {
     },
     methods: {
         getData: function(page = 1, append = false) {
-            if (!this.query) return;
-
             this.loading = true;
             this.per = 10;
             this.done = false;
@@ -198,6 +196,11 @@ export default {
 
             // 图标
             if (this.type === 'authors') {
+                if (!this.query) {
+                    this.loading = false;
+                    return;
+                };
+
                 params = {
                     ...params,
                     name: query,
@@ -216,7 +219,7 @@ export default {
                     });
 
             } else if (this.type === 'emotions') {
-                this.per = 30;
+                this.per = 24;
                 params = {
                     per: this.per,
                     page: page,
@@ -301,7 +304,7 @@ export default {
         selectEmotion: function (o){
             this.resetItems();
             o.isSelected = true;
-            this.html = `<img class="e-jx3-emotion" style="width:80px;" src="${o.url}" alt="${o.id}"/>`
+            this.html = `<a data-type="emotion" class="e-jx3-emotion w-jx3-element" data-id="${o.id}" target="_blank" href="/emotion/${o.id}"><img class="e-jx3-emotion-img" data-type="emotion" data-id="${o.id}" style="width:80px;" src="${o.url}" alt="${o.id}"/></a>`
         },
         resetItems: function() {
             let data = this[this.type];
@@ -335,6 +338,7 @@ export default {
                 });
             }
         },
+        resolveImagePath
     },
     created: function() {
         this.loadUserInfo();

package/src/{Author.vue → components/Author.vue}

@@ -12,7 +12,7 @@
                             </a>
                         </el-tooltip>
                     </a>
-                    <div class="u-extend" v-if="isVip">
+                    <div class="u-extend">
                         <el-tooltip class="item" effect="dark" placement="top">
                             <div slot="content">
                                 <span class="u-tips">经验值：{{ data.experience }}</span>
@@ -44,12 +44,12 @@
 
 <script>
 import { authorLink, getLink, getThumbnail } from "@jx3box/jx3box-common/js/utils";
-import { getUserInfo, getUserMedals, getUserPublicTeams } from "../service/author";
+import { getUserInfo, getUserMedals, getUserPublicTeams } from "../../service/author";
 import { __server, __imgPath,__userLevelColor } from "@jx3box/jx3box-common/data/jx3box.json";
 import User from "@jx3box/jx3box-common/js/user";
 import { __userLevel } from "@jx3box/jx3box-common/data/jx3box.json";
-import Avatar from "./components/Avatar.vue"
-import medal from "./components/medal.vue"
+import Avatar from "./Avatar.vue"
+import medal from "./medal.vue"
 export default {
     name: "Author",
     components: {
@@ -145,7 +145,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../assets/css/module/author.less";
+@import "../../assets/css/module/author.less";
 .w-author {
     .w-author-wrapper {
         .u-author{

package/src/components/PostAuthor.vue

@@ -0,0 +1,101 @@
+<!--
+ * @Author: iRuxu
+ * @Date: 2022-07-17 00:13:35
+ * @LastEditTime: 2022-07-17 00:40:25
+ * @Description: 
+-->
+<template>
+    <div class="w-author w-author__post" v-loading="loading">
+        <div class="w-author-wrapper el-popover" v-if="data">
+            <div class="u-meta">
+                <span class="u-meta-label">作者</span>
+                <span class="u-meta-value">
+                    <a class="u-user" :href="authorLink(data.user_id)" target="_blank">
+                        <Avatar class="u-user-avatar" :uid="data.user_id" :url="data.user_info.user_avatar" :size="32" />
+                        <span class="u-user-name">{{ data.user_info.display_name }}</span>
+                    </a>
+                </span>
+            </div>
+            <div class="u-meta">
+                <div class="u-meta-label">更新</div>
+                <div class="u-meta-value">
+                    {{ formatTime(data.created_at) }}
+                </div>
+            </div>
+            <div class="u-meta">
+                <div class="u-meta-label">信息</div>
+                <div class="u-meta-value">{{ data.desc }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { authorLink } from "@jx3box/jx3box-common/js/utils";
+import { getEmotion } from "../../service/author";
+import { __server, __imgPath, __userLevelColor } from "@jx3box/jx3box-common/data/jx3box.json";
+import dayjs from "dayjs";
+import Avatar from "./Avatar.vue";
+export default {
+    name: "PostAuthor",
+    components: {
+        Avatar,
+    },
+    props: ["id"],
+    data: () => ({
+        data: null,
+        loading: false,
+    }),
+    computed: {},
+    watch: {
+        id: {
+            immediate: true,
+            handler(val) {
+                if (val) {
+                    this.loadData();
+                }
+            },
+        },
+    },
+    methods: {
+        authorLink,
+        loadData() {
+            this.loading = true;
+            getEmotion(this.id).then((res) => {
+                this.data = res.data.data;
+                this.loading = false;
+            });
+        },
+        formatTime(val) {
+            return val && dayjs(val).format("YYYY-MM-DD HH:mm:ss") || "";
+        }
+    },
+};
+</script>
+
+<style scoped lang="less">
+@import "../../assets/css/module/author.less";
+.w-author {
+    
+    .u-meta{
+        display: flex;
+        align-items: center;
+        .fz(12px,24px);
+        .h(24px);
+        .mb(5px);
+    }
+    .u-meta-label{
+        .mr(10px);
+        background-color: @bg-gray;
+        padding:0 8px;
+        .r(2px);
+    }
+    .u-meta-value,.u-user{
+display: flex;
+        align-items: center;
+    }
+    .u-user-avatar{
+        .size(24px);
+    }
+}
+</style>