@jx3box/jx3box-ui 2.0.12 → 2.0.16

package/src/single/Creators.vue

@@ -128,6 +128,7 @@ export default {
 </script>
 
 <style lang="less">
+/* src/single/Creators.vue */
 .w-creators {
     display: flex;
     border: 1px solid #ddd;

package/src/single/PostCollection.vue

@@ -77,6 +77,7 @@ export default {
 };
 </script>
 <style lang="less">
+/* src/single/PostCollection.vue */
 .c-post-collection {
     .m-title {
         .flex;

package/src/single/PostGuide.vue

@@ -47,6 +47,7 @@ export default {
 </script>
 
 <style lang="less">
+/* src/single/PostGuide.vue */
 .w-post-guide {
     .flex;
     align-items: center;

package/src/single/PostHeader.vue

@@ -205,6 +205,7 @@ export default {
 </script>
 
 <style lang="less">
+/* src/single/PostHeader.vue */
 .i-client-all {
     border: 1px solid #a26ef7;
     color: #a26ef7;

package/src/single/PostTopic.vue

@@ -81,6 +81,7 @@ export default {
 </script>
 
 <style lang="less">
+/* src/single/PostTopic.vue */
 .c-post-topic {
     margin-bottom: 20px;
 }

package/src/single/PostVersion.vue

@@ -126,6 +126,7 @@ export default {
 };
 </script>
 <style lang="less">
+/* src/single/PostVersion.vue */
 .c-post-version {
     .m-title {
         .flex;

package/src/single/RightAffix.vue

@@ -91,6 +91,7 @@ export default {
 </script>
 
 <style lang="less">
+/* src/single/RightAffix.vue */
 .closeLeftSidebar() {
     transition: 0.2s ease-in-out;
     transform: translateX(100%);

package/src/single/SimpleThx.vue

@@ -215,5 +215,6 @@ export default {
 </script>
 
 <style lang="less">
+/* src/single/SimpleThx.vue */
 @import "../../assets/css/single/thx.less";
 </style>

package/src/single/Thx.vue

@@ -286,5 +286,6 @@ export default {
 </script>
 
 <style lang="less">
+/* src/single/Thx.vue */
 @import "../../assets/css/single/thx.less";
 </style>

package/src/single/VersionDialog.vue

@@ -188,6 +188,7 @@ export default {
 </script>
 
 <style lang="less">
+/* src/single/VersionDialog.vue */
 .m-version-contrast-dialog {
     .el-dialog__body {
         padding: 0 20px 20px;

package/src/stories/components/StoryPropsTable.vue

@@ -57,6 +57,7 @@ export default {
 </script>
 
 <style lang="less">
+/* src/stories/components/StoryPropsTable.vue */
 .story-props-table {
     border-radius: 20px;
     background: rgba(255, 255, 255, 0.92);

package/src/stories/layout/StorybookShell.vue

@@ -193,6 +193,7 @@ export default {
 </script>
 
 <style lang="less">
+/* src/stories/layout/StorybookShell.vue */
 .sb-shell {
     min-height: 100vh;
     background:

package/src/stories/layout/SuspendCommonStage.vue

@@ -31,6 +31,7 @@ export default {
 </script>
 
 <style lang="less">
+/* src/stories/layout/SuspendCommonStage.vue */
 .suspend-stage {
     min-height: 100vh;
     display: flex;

package/src/stories/single/AuthorStoryStage.vue

@@ -33,6 +33,7 @@ export default {
 </script>
 
 <style lang="less">
+/* src/stories/single/AuthorStoryStage.vue */
 .story-author-stage {
     display: grid;
     gap: 24px;

package/src/stories/single/CmsSingleStoryStage.vue

@@ -37,6 +37,7 @@ export default {
 </script>
 
 <style lang="less">
+/* src/stories/single/CmsSingleStoryStage.vue */
 .story-cmssingle-stage {
     display: grid;
     gap: 24px;

package/src/upload/UploadBanner.vue

@@ -0,0 +1,159 @@
+<template>
+    <div class="c-upload-banner">
+        <el-alert class="u-tip" :title="info" type="info" show-icon></el-alert>
+        <div v-if="data" class="u-upload" :style="uploadStyle">
+            <img :src="preview" />
+            <i class="u-upload-mask"></i>
+            <i class="u-upload-delete el-icon-delete" title="移除" @click="remove"></i>
+        </div>
+        <div v-else class="u-upload el-upload el-upload--picture-card" @click="select">
+            <i class="el-icon-plus"></i>
+        </div>
+        <input
+            class="u-upload-input"
+            type="file"
+            @change="upload"
+            ref="uploadInput"
+            accept=".jpg, .jpeg, .png, .gif, .bmp,.webp"
+        />
+    </div>
+</template>
+
+<script>
+import { getThumbnail } from "@jx3box/jx3box-common/js/utils";
+import { upload } from "../../service/cms.js";
+export default {
+    name: "UploadBanner",
+    props: {
+        modelValue: {
+            type: String,
+            default: "",
+        },
+        content: {
+            type: String,
+            default: "",
+        },
+        info: {
+            type: String,
+            default: "用于展示tips",
+        },
+        size: {
+            type: [Array, Number],
+            default: 148,
+        },
+        maxSize: {
+            type: Number,
+            default: 10,
+        },
+    },
+    data() {
+        return {
+            data: this.modelValue || this.content || "",
+        };
+    },
+    emits: ["update:modelValue", "input"],
+    watch: {
+        modelValue(val) {
+            this.data = val;
+        },
+        content(val) {
+            this.data = val;
+        },
+        data(val) {
+            this.$emit("update:modelValue", val);
+            this.$emit("input", val);
+        },
+    },
+    computed: {
+        fileInput: function () {
+            return this.$refs.uploadInput;
+        },
+        preview() {
+            let size = Array.isArray(this.size) ? this.size : [this.size, this.size];
+            return getThumbnail(this.data, size, true);
+        },
+        uploadStyle() {
+            let size = Array.isArray(this.size) ? this.size : [this.size, this.size];
+            return {
+                width: size[0] + "px",
+                height: size[1] + "px",
+            };
+        },
+    },
+    methods: {
+        select() {
+            this.fileInput.dispatchEvent(
+                new MouseEvent("click", {
+                    bubbles: true,
+                    cancelable: true,
+                    view: window,
+                })
+            );
+        },
+        upload() {
+            const file = this.fileInput.files[0];
+            if (!file) return;
+            if (file.size > this.maxSize * 1024 * 1024) {
+                this.$message.error("图片大小不能超过" + this.maxSize + "M");
+                return;
+            }
+            const formData = new FormData();
+            formData.append("file", file);
+            upload(formData).then((res) => {
+                this.data = res.data.data[0];
+                this.$message({
+                    message: "上传成功",
+                    type: "success",
+                });
+            });
+        },
+        remove() {
+            this.data = "";
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-upload-banner {
+    .u-tip {
+        padding: 5px 15px;
+    }
+    .u-upload {
+        .pr;
+        .size(148px);
+        .mt(10px);
+        img {
+            .size(100%);
+            .y(bottom);
+        }
+        .u-upload-mask {
+            .none;
+            .pa;
+            .lt(0);
+            .size(100%);
+            background-color: rgba(0, 0, 0, 0.6);
+        }
+        .u-upload-delete {
+            .pa;
+            .lt(50%);
+            .size(24px);
+            .fz(24px);
+            padding: 40px;
+            transform: translate(-50%, -50%);
+            color: #fff;
+            .pointer;
+            .none;
+        }
+        &:hover {
+            .u-upload-mask,
+            .u-upload-delete {
+                .db;
+            }
+        }
+    }
+    .u-upload-input {
+        .none;
+    }
+}
+</style>

package/src/wiki/GamePrice.vue

@@ -65,6 +65,7 @@ export default {
 </script>
 
 <style lang="less">
+/* src/wiki/GamePrice.vue */
 .c-game-price {
     display: inline-flex;
     align-items: center;

package/src/wiki/WikiComments.vue

@@ -12,7 +12,7 @@
                     <span v-if="comments && !comments.length">💧 暂无评论</span>
                 </div>
                 <!-- 递归评论组件 -->
-                <Comment :comments="comments" :source-id="sourceId" />
+                <wiki-comment :comments="comments" :source-id="sourceId" />
                 <el-pagination
                     class="u-pagination-box"
                     background
@@ -188,7 +188,7 @@ export default {
     },
     components: {
         WikiPanel,
-        Comment,
+        "wiki-comment": Comment,
     },
     watch: {
         sourceId: {
@@ -202,5 +202,6 @@ export default {
 </script>
 
 <style lang="less">
+/* src/wiki/WikiComments.vue */
 @import "../../assets/css/wiki/wiki-comments.less";
 </style>

package/src/wiki/WikiPanel.vue

@@ -117,5 +117,6 @@ export default {
 </script>
 
 <style lang="less">
+/* src/wiki/WikiPanel.vue */
 @import "../../assets/css/wiki/wiki-panel.less";
 </style>

package/src/wiki/WikiRevisions.vue

@@ -123,5 +123,6 @@ export default {
 </script>
 
 <style lang="less">
+/* src/wiki/WikiRevisions.vue */
 @import "../../assets/css/wiki/wiki-revisions.less";
 </style>

package/vue.config.js

@@ -2,7 +2,6 @@ const path = require("path");
 const commonDomains = require("@jx3box/jx3box-common/data/jx3box.json");
 
 module.exports = {
-
     //❤️ define path for static files ~
     publicPath: process.env.NODE_ENV === "development" ? "/" : process.env.STATIC_PATH,
 
@@ -16,7 +15,6 @@ module.exports = {
         },
     },
 
-
     //⚛️ Proxy ~
     devServer: {
         host: "localhost",
@@ -25,6 +23,13 @@ module.exports = {
         proxy: buildEnvProxy(),
         allowedHosts: "all",
         port: process.env.DEV_PORT || 12028,
+        client: {
+            overlay: {
+                warnings: false,
+                errors: false,
+                runtimeErrors: false,
+            },
+        },
     },
 
     // 依赖包（element-plus/theme-chalk 等）会输出大量 Sass deprecation 警告
@@ -53,7 +58,6 @@ module.exports = {
 
     //❤️ Webpack configuration
     chainWebpack: (config) => {
-
         //💝 in-line small imgs ~
         config.module.rule("images").set("parser", {
             dataUrlCondition: {
@@ -70,7 +74,7 @@ module.exports = {
 
         config.externals = {
             tinyMCE: "tinyMCE",
-        }
+        };
     },
 };
 
@@ -84,14 +88,13 @@ function addStyleResource(rule) {
         path.resolve(__dirname, "./node_modules/@jx3box/jx3box-common/css/mixin.less"),
         path.resolve(__dirname, "./assets/css/var.less"),
         path.resolve(__dirname, "./assets/css/mixin.less"),
-        path.resolve(__dirname, "./node_modules/csslab/base.less"),
+        path.resolve(__dirname, "./node_modules/csslab/base.less")
     );
     rule.use("style-resource").loader("style-resources-loader").options({
         patterns: preload_styles,
     });
 }
 
-
 function normalizeTarget(value) {
     if (!value) return "";
     const trimmed = String(value).trim();