@jx3box/jx3box-editor 1.3.3 → 1.3.6

package/assets/css/module/author.less

@@ -28,8 +28,9 @@
             }
             .nobreak;
         }
-        .u-info{
-            .pr;top:-4px;
+        .u-info {
+            .pr;
+            top: -4px;
             .h(68px);
             display: flex;
             flex-direction: column;
@@ -49,17 +50,33 @@
             padding: 2px 8px;
             .fz(12px, 14px);
             color: #fff;
-            background-color:#aaa;
+            background-color: #aaa;
             border-radius: 2px;
 
-            &.lv-1{background-color: #32d3c4;}
-            &.lv-2{background-color: #86c0fb;}
-            &.lv-3{background-color: #33d9ff;}
-            &.lv-4{background-color: #ffdb2a;}
-            &.lv-5{background-color: #ffa739;}
-            &.lv-6{background-color: #ff70b2;}
-            &.lv-7{background-color: #ff3399;}
-            &.lv-8{background-color: #f93c3c;}
+            &.lv-1 {
+                background-color: #32d3c4;
+            }
+            &.lv-2 {
+                background-color: #86c0fb;
+            }
+            &.lv-3 {
+                background-color: #33d9ff;
+            }
+            &.lv-4 {
+                background-color: #ffdb2a;
+            }
+            &.lv-5 {
+                background-color: #ffa739;
+            }
+            &.lv-6 {
+                background-color: #ff70b2;
+            }
+            &.lv-7 {
+                background-color: #ff3399;
+            }
+            &.lv-8 {
+                background-color: #f93c3c;
+            }
         }
         .u-vip {
             .ml(5px);
@@ -125,8 +142,8 @@
             }
         }
 
-        .u-medal{
-            img{
+        .u-medal {
+            img {
                 padding: 0;
                 margin: 0;
                 .size(20px);
@@ -145,7 +162,7 @@
         }
 
         .u-teams {
-            .mt(10px);
+            .mt(5px);
             .u-team {
                 .db;
                 background-color: #f2f6fc;
@@ -155,9 +172,9 @@
                     // color:@color-link;
                 }
                 .r(3px);
-                padding:0 5px;
-    display: flex;
-    align-items: center;
+                padding: 0 5px;
+                display: flex;
+                align-items: center;
             }
             .u-team-logo {
                 .size(22px);

package/assets/css/resource.less

@@ -217,15 +217,19 @@
     .m-database-search {
         position: sticky;
         z-index: 100;
-        top: 0px;
-        padding:10px 20px 10px 200px;
+        top: 0;
+        padding:10px 20px 10px 20px;
         background-color:#fff;
         .pr;
 
         .u-client{
-            .pa;.lt(20px,10px);
+            // .pa;.lt(20px,10px);
+            margin-right:15px;
         }
-        .u-input{}
+        .u-input{
+            flex:1;
+        }
+        display: flex;
     }
 
     .m-database-tabs {

package/assets/css/tinymce/a.less

@@ -7,6 +7,18 @@
             box-shadow: 0 1px 0 #0366d6;
         }
     }
+
+    .e-jx3-author{
+        padding: 2px 5px;
+        border-radius: 3px;
+        border: 1px solid #8250df;
+        color:#8250df;
+
+        &:hover{
+            box-shadow: none;
+            background-color: #fafbfc;
+        }
+    }
 }
 // @media print {
 //     .c-article {

package/package.json

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

package/src/BoxResource.vue

@@ -0,0 +1,341 @@
+<template>
+    <div class="c-resource">
+        <!-- 上传触发按钮 -->
+        <el-button class="u-switch" type="primary" @click="openDialog" :disabled="!enable"> <img class="u-icon" svg-inline :src="boxIcon" />魔盒资源 </el-button>
+
+        <!-- 弹出界面 -->
+        <el-dialog class="c-large-dialog" title="魔盒资源库" :visible.sync="dialogVisible">
+            <div class="c-resource-content" v-loading="loading">
+                <div class="m-database-search">
+                    <el-input class="u-input" placeholder="请输入 ID 或 名称" v-model="query" @change="search" @keyup.enter.native="search">
+                        <template slot="prepend">ID ／名称</template>
+                    </el-input>
+                </div>
+
+                <el-tabs class="m-database-tabs" v-model="type" type="card" @tab-click="changeType">
+                    <el-tab-pane label="魔盒用户" name="authors">
+                        <span slot="label" class="u-tab-label">
+                            <i class="el-icon-s-custom" 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-list">
+                            <li v-for="(o, i) in authors" class="u-item" :key="i" :class="{ on: !!o.isSelected }" @click="selectAuthor(o, i)" ref="author">
+                                <span class="u-id">ID:{{ o.ID }}</span>
+                                <img class="u-pic" :title="'AuthorID:' + o.display_name" :src="userAvatar(o.user_avatar)" />
+                                <span class="u-primary">
+                                    <span class="u-name">
+                                        {{ o.display_name }}
+                                    </span>
+                                    <div class="u-remark">
+                                        {{o.user_bio}}
+                                    </div>
+                                </span>
+                            </li>
+                        </ul>
+                        <el-alert v-if="!authors.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
+                    </el-tab-pane>
+                    <!-- <el-tab-pane label="表情" name="emotions">
+                        <span slot="label" class="u-tab-label">
+                            <i class="el-icon-sugar"></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" />
+                            </li>
+                        </ul>
+                        <el-alert v-if="!emotions.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
+                    </el-tab-pane> -->
+                </el-tabs>
+
+                <template v-if="multipage">
+                    <!-- 下一页 -->
+                    <el-button class="m-archive-more" :class="{ show: hasNextPage }" type="primary" icon="el-icon-arrow-down" @click="appendPage">加载更多</el-button>
+                    <!-- 分页 -->
+                    <el-pagination
+                        class="m-archive-pages"
+                        background
+                        layout="total, prev, pager, next,jumper"
+                        :hide-on-single-page="true"
+                        :page-size="per"
+                        :total="total"
+                        :current-page.sync="page"
+                        @current-change="changePage"
+                    ></el-pagination>
+                </template>
+
+                <div class="m-database-tip" v-show="isBlank">❤ 请输入搜索条件查询</div>
+            </div>
+
+            <!-- 插入按钮 -->
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="insert">
+                    {{ buttonTXT }}
+                </el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { loadResource, loadStat, getIcons } 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 detach_types from "../assets/data/detach_type.json";
+import { iconLink, getLink, showAvatar } from "@jx3box/jx3box-common/js/utils";
+import User from "@jx3box/jx3box-common/js/user";
+export default {
+    name: "Resource",
+    props: {
+        enable: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data: function() {
+        return {
+            dialogVisible: false,
+            actived: false,
+            userInfo: {},
+
+            type: "authors",
+            query: "",
+            strict: false,
+            client: location.hostname.includes("origin") ? "origin" : "std",
+
+            skill: [],
+            buff: [],
+            item: [],
+            icon: [],
+            npc: [],
+            authors: [],
+            selectedAuthor: {},
+            emotions: [],
+
+            done: false,
+            loading: false,
+
+            isSuper: false,
+
+            html: "",
+
+            per: 10,
+            page: 1,
+            total: 1,
+            pages: 1
+        };
+    },
+    computed: {
+        buttonTXT: function() {
+            return this.selectedCount ? "插 入" : "确 定";
+        },
+        isBlank: function() {
+            return !this.query && !this[this.type]["length"];
+        },
+        selectedCount: function() {
+            return !!this.html;
+        },
+        isNumber: function() {
+            return !isNaN(this.query);
+        },
+        hasNextPage: function() {
+            return this.total > 1 && this.page < this.pages;
+        },
+        multipage: function() {
+            return this.type !== "icon" && this.done && this.pages > 1;
+        },
+        iconDir: function() {
+            return this.client === "origin" ? "origin_icon" : "icon";
+        },
+        userStatus: function (){
+            return User.getInfo().status
+        },
+        uid: function (){
+            return User.getInfo().uid
+        },
+        canInsertAuthor: function() {
+            return User.getLevel(this.userInfo && this.userInfo.experience) >= 2;
+        },
+        boxIcon: function() {
+            return __imgPath + 'image/common/jx3box_white.svg'
+        },
+    },
+    watch: {
+        html: function(newval) {
+            this.$emit("update", newval);
+        },
+    },
+    methods: {
+        getData: function(page = 1, append = false) {
+            if (!this.query) return;
+
+            this.loading = true;
+            this.per = 10;
+            this.done = false;
+            let query = this.query;
+            let params = {
+                strict: ~~this.strict,
+                per: this.per,
+                page: page,
+                client: this.client,
+            };
+
+            // 图标
+            if (this.type === 'authors') {
+                params = {
+                    ...params,
+                    name: query,
+                }
+                loadAuthors(params)
+                    .then((res) => {
+                        if (!append)  this.authors = [];
+                        let list = this.transformData(res.data.data.list)
+                        this.authors = this.authors.concat(list);
+                        this.pages = res.data.data.pages;
+                        this.total = res.data.data.total;
+                    })
+                    .finally(() => {
+                        this.done = true;
+                        this.loading = false;
+                    });
+
+            } else if (this.type === 'emotions') {
+                this.per = 30;
+                params = {
+                    per: this.per,
+                    page: page,
+                    search: query,
+                }
+                loadEmotions(params)
+                    .then((res) => {
+                        if (!append)  this.emotions = [];
+                        let list = this.transformData(res.data.data.list)
+                        this.emotions = this.emotions.concat(list);
+                        this.pages = res.data.data.pages;
+                        this.total = res.data.data.total;
+                    })
+                    .finally(() => {
+                        this.done = true;
+                        this.loading = false;
+                    });
+            }
+        },
+        search: function() {
+            this.page = 1;
+            this.getData();
+        },
+        appendPage: function() {
+            this.getData(++this.page, true);
+        },
+        changePage: function(i) {
+            this.getData(i);
+        },
+        changeType: function() {
+            this.page = 1;
+            this.getData();
+        },
+        setAuthors: function() {
+            try {
+                let author = sessionStorage.getItem("atAuthor");
+                if (author) {
+                    author = JSON.parse(author);
+                    author = author.split(',') || [];
+                    if (this.selectedAuthor.ID && !author.includes(String(this.selectedAuthor.ID))) {
+                        author.push(this.selectedAuthor.ID);
+                    }
+                    sessionStorage.setItem("atAuthor", JSON.stringify(author.join(',')));
+                } else {
+                    sessionStorage.setItem("atAuthor", JSON.stringify(String(this.selectedAuthor.ID)));
+                }
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        insert: function() {
+            if (this.type === 'authors') {
+                if (this.userStatus == 0 && this.canInsertAuthor) {
+                    this.setAuthors();
+                    this.$emit("insert", this.html);
+                    this.dialogVisible = false;
+                    this.selectedAuthor = {};
+                } else {
+                    this.$alert('您的等级不足或无权限（Lv2以上可用）', '消息');
+                }
+            } else {
+                this.$emit("insert", this.html);
+                this.dialogVisible = false;
+            }
+        },
+        transformData: function(data) {
+            data.forEach((item) => {
+                item.isSelected = false;
+            });
+            return data;
+        },
+        selectAuthor: function (o){
+            this.resetItems();
+            this.selectedAuthor = o;
+            o.isSelected = true;
+            this.html = `<a data-type="author" class="e-jx3-author w-jx3-element" data-mode="" data-id="${o.ID}" target="_blank" href="/author/${o.ID}">@${o.display_name}</a>`
+        },
+        selectEmotion: function (o){
+            this.resetItems();
+            o.isSelected = true;
+            this.html = `<img class="e-jx3-emotion" style="width:80px;" src="${o.url}" alt="${o.id}"/>`
+        },
+        resetItems: function() {
+            let data = this[this.type];
+            data.forEach((item) => {
+                item.isSelected = false;
+            });
+            this.html = "";
+        },
+        getLink : function (type,id){
+            let domain = this.client == "origin" ? __OriginRoot : __Root;
+            return domain + getLink(type,id).slice(1)
+        },
+        userAvatar: function(url) {
+            return showAvatar(url,'m');
+        },
+        loadUserInfo: function (){
+            if (!this.uid) return;
+            getUserInfo(this.uid).then(res => {
+                this.userInfo = res
+            })
+        },
+
+        // 杂项
+        // ==============================
+        openDialog: function() {
+            this.dialogVisible = true;
+            if (!this.actived) {
+                loadStat().then((data) => {
+                    this.stat = data;
+                    this.actived = true;
+                });
+            }
+        },
+    },
+    created: function() {
+        this.loadUserInfo();
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/resource.less";
+
+.m-item-pop {
+    padding: 0 !important;
+    background: none !important;
+    border: none;
+}
+</style>

package/src/Markdown.vue

@@ -5,7 +5,8 @@
 
         <div class="c-editor-header">
             <Upload v-if="attachmentEnable" @insert="insertAttachments" :enable="true" />
-            <Resource v-if="resourceEnable" @insert="insertResource" :enable="true" />
+            <Resource style="margin-right: 5px;" v-if="resourceEnable" @insert="insertResource" :enable="true" />
+            <BoxResource v-if="resourceEnable" @insert="insertResource" :enable="true" />
         </div>
 
         <slot></slot>
@@ -37,6 +38,7 @@ import { uploadFile } from "../service/cms";
 
 import Upload from "./Upload";
 import Resource from "./Resource";
+import BoxResource from "./BoxResource";
 
 // jx3
 import markdownMacro from './components/markdown/macro.vue'
@@ -69,7 +71,8 @@ export default {
         markdownEditor,
         Upload,
         Resource,
-        
+        BoxResource,
+
         markdownMacro,
         markdownPz,
         markdownKatex,
@@ -215,7 +218,6 @@ export default {
             }
         },
         insertResource: function(data) {
-            console.log(data)
             this.$md.insertText(this.$md.getTextareaDom(), {
                 prefix: data,
                 subfix: "",

package/src/Resource.vue

@@ -164,45 +164,6 @@
                         </ul>
                         <el-alert v-if="!icon.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
                     </el-tab-pane>
-                    <el-tab-pane label="魔盒用户" name="authors">
-                        <span slot="label" class="u-tab-label">
-                            <i class="el-icon-s-custom" 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-list">
-                            <li v-for="(o, i) in authors" class="u-item" :key="i" :class="{ on: !!o.isSelected }" @click="selectAuthor(o, i)" ref="author">
-                                <span class="u-id">ID:{{ o.ID }}</span>
-                                <img class="u-pic" :title="'AuthorID:' + o.display_name" :src="userAvatar(o.user_avatar)" />
-                                <span class="u-primary">
-                                    <span class="u-name">
-                                        {{ o.display_name }}
-                                    </span>
-                                    <div class="u-remark">
-                                        {{o.user_bio}}
-                                    </div>
-                                </span>
-                            </li>
-                        </ul>
-                        <el-alert v-if="!authors.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
-                    </el-tab-pane>
-                    <!-- <el-tab-pane label="表情" name="emotions">
-                        <span slot="label" class="u-tab-label">
-                            <i class="el-icon-sugar"></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" />
-                            </li>
-                        </ul>
-                        <el-alert v-if="!emotions.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
-                    </el-tab-pane> -->
                 </el-tabs>
 
                 <template v-if="multipage">
@@ -237,8 +198,7 @@
 
 <script>
 import { loadResource, loadStat, getIcons } from "../service/database";
-import { loadAuthors, loadEmotions } from "../service/cms";
-import { getUserInfo } from "../service/author";
+import { loadEmotions } from "../service/cms";
 import { __ossRoot, __iconPath, __Root, __OriginRoot } from "@jx3box/jx3box-common/data/jx3box.json";
 import detach_types from "../assets/data/detach_type.json";
 import { iconLink, getLink, showAvatar } from "@jx3box/jx3box-common/js/utils";
@@ -372,24 +332,6 @@ export default {
                     this.loading = false;
                 }
 
-            } else if (this.type === 'authors') {
-                params = {
-                    ...params,
-                    name: query,
-                }
-                loadAuthors(params)
-                    .then((res) => {
-                        if (!append)  this.authors = [];
-                        let list = this.transformData(res.data.data.list)
-                        this.authors = this.authors.concat(list);
-                        this.pages = res.data.data.pages;
-                        this.total = res.data.data.total;
-                    })
-                    .finally(() => {
-                        this.done = true;
-                        this.loading = false;
-                    });
-
             } else if (this.type === 'emotions') {
                 this.per = 30;
                 params = {
@@ -445,39 +387,10 @@ export default {
         changeType: function() {
             this.page = 1;
             this.getData();
-            if (this.type === 'authors') {
-                this.loadUserInfo();
-            }
-        },
-        setAuthors: function() {
-            try {
-                let author = sessionStorage.getItem("atAuthor");
-                if (author) {
-                    author = author.split(',') || [];
-                    author.push(this.selectedAuthor.ID);
-                    sessionStorage.setItem("atAuthor", JSON.stringify(author.join(',')));
-                } else {
-                    sessionStorage.setItem("atAuthor", JSON.stringify(this.selectedAuthor.ID));
-                }
-            } catch (error) {
-                console.log(error)
-            }
         },
         insert: function() {
-            if (this.type === 'authors') {
-                if (this.userStatus == 0 && this.canInsertAuthor) {
-                    this.setAuthors();
-                    this.$emit("insert", this.html);
-                    this.dialogVisible = false;
-                    this.selectedAuthor = {};
-                } else {
-                    this.$alert('您的等级不足或无权限（Lv2以上可用）', '消息');
-                    return;
-                }
-            } else {
-                this.$emit("insert", this.html);
-                this.dialogVisible = false;
-            }
+            this.$emit("insert", this.html);
+            this.dialogVisible = false;
         },
         transformData: function(data) {
             data.forEach((item) => {
@@ -531,12 +444,6 @@ export default {
             o.isSelected = true
             this.html = `<a data-type="npc" class="e-jx3-npc w-jx3-element" data-mode="" data-id="${o.ID}"  data-client="${this.client}" target="_blank" href="${this.getDbLink("npc", this.client, o.ID, '')}">${o.Name}]</a>`
         },
-        selectAuthor: function (o){
-            this.resetItems();
-            this.selectedAuthor = o;
-            o.isSelected = true;
-            this.html = `<a data-type="author" class="e-jx3-author w-jx3-element" data-mode="" data-id="${o.ID}" target="_blank" href="/author/${o.ID}">@${o.display_name}</a>`
-        },
         selectEmotion: function (o){
             this.resetItems();
             o.isSelected = true;
@@ -566,12 +473,6 @@ export default {
         userAvatar: function(url) {
             return showAvatar(url,'m');
         },
-        loadUserInfo: function (){
-            if (!this.uid) return;
-            getUserInfo(this.uid).then(res => {
-                this.userInfo = res
-            })
-        },
 
         // 杂项
         // ==============================

package/src/Tinymce.vue

@@ -6,6 +6,7 @@
         <div class="c-editor-header">
             <Upload v-if="attachmentEnable" @insert="insertAttachments" />
             <Resource v-if="resourceEnable" @insert="insertResource" />
+            <BoxResource v-if="resourceEnable" @insert="insertResource" />
         </div>
         <Emotion class="c-editor-emotion" @selected="emotionSelected"></Emotion>
 
@@ -36,6 +37,7 @@
 import Editor from "@tinymce/tinymce-vue";
 import Upload from "./Upload";
 import Resource from "./Resource";
+import BoxResource from "./BoxResource";
 import { __cms } from "@jx3box/jx3box-common/data/jx3box.json";
 import { __ossRoot } from "@jx3box/jx3box-common/data/jx3box.json";
 import Emotion from "@jx3box/jx3box-emotion/src/Emotion.vue"
@@ -76,10 +78,10 @@ export default {
                     "link autolink",
                     "hr lists advlist table codeinline codesample checklist foldtext latex",
                     "image emoticons media videox macro qixue talent2",
-                    "code fullscreen wordcount powerpaste pagebreak printpage pz", // template anchor jx3icon autosave 
+                    "code fullscreen wordcount powerpaste pagebreak printpage pz", // template anchor jx3icon autosave
                 ],
                 toolbar: [
-                    "undo | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough superscript subscript | link unlink | fullscreen code", //restoredraft 
+                    "undo | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough superscript subscript | link unlink | fullscreen code", //restoredraft
                     "removeformat | hr alignleft aligncenter alignright alignjustify indent outdent | bullist numlist checklist table blockquote foldtext codeinline codesample latex | emoticons image media videox | macro pz qixue talent2 pagebreak printpage", // template anchor jx3icon
                 ],
                 mobile: {
@@ -208,7 +210,8 @@ export default {
         Editor,
         Upload,
         Resource,
-        Emotion
+        Emotion,
+        BoxResource
     },
 };
 </script>