@jx3box/jx3box-ui 0.0.1

package/src/single/cms-single.vue

@@ -0,0 +1,235 @@
+<template>
+    <div class="m-single-box">
+        <!-- 头部 -->
+        <PostHeader :post="post" :stat="stat" :anonymous="anonymous">
+            <slot name="single-header"></slot>
+        </PostHeader>
+
+        <!-- 文章前 -->
+        <div class="m-single-prepend">
+            <!-- 联合创作者 -->
+            <Creators class="m-single-creators" :postId="id" :postType="post_type" @load-authors="loadAuthors" />
+            <!-- 文集小册 -->
+            <Collection
+                class="m-single-collection"
+                :id="collection_id"
+                :defaultVisible="collection_collapse"
+                @collectionUpdate="updateCollection"
+            />
+            <slot name="single-prepend"></slot>
+        </div>
+
+        <!-- 文章内容 -->
+        <div class="m-single-post" v-if="visible">
+            <el-divider content-position="left">JX3BOX</el-divider>
+            <div class="m-single-content">
+                <slot></slot>
+                <!-- <ArticleMarkdown v-if="isMarkdown" :content="post_content" @directoryRendered="updateDirectory" /> -->
+                <Article :content="post_content" @directoryRendered="updateDirectory" />
+            </div>
+        </div>
+        <div class="m-single-null" v-else>
+            <el-alert :title="null_tip" type="warning" show-icon></el-alert>
+        </div>
+
+        <!-- 文章后 -->
+        <div class="m-single-append">
+            <slot name="single-append"></slot>
+
+            <!-- 打赏 -->
+            <Thx
+                class="m-single-thx"
+                :postId="id"
+                :postType="post_type"
+                :postTitle="post_title"
+                :userId="author_id"
+                :adminBoxcoinEnable="true"
+                :userBoxcoinEnable="true"
+                :authors="authors"
+                :client="post_client"
+                showRss
+            />
+
+            <!-- 评论 -->
+            <div ref="commentView" class="m-single-comment">
+                <el-divider content-position="left">评论</el-divider>
+                <Comment :id="id" category="post" v-if="id && allow_comment" />
+                <el-alert title="作者没有开启评论功能" type="warning" show-icon v-else></el-alert>
+            </div>
+        </div>
+
+        <!-- 底部 -->
+        <footer class="m-single-footer">
+            <slot name="single-footer"></slot>
+        </footer>
+
+        <!-- <right-affix
+            :postId="id"
+            :postType="post_type"
+            :postTitle="post_title"
+            :showComment="id && allow_comment"
+            @toComment="toComment($event)"
+        ></right-affix> -->
+    </div>
+</template>
+
+<script>
+import PostHeader from "./PostHeader.vue";
+import Creators from "./Creators.vue";
+import Collection from "./Collection.vue";
+import Thx from "./Thx.vue";
+// import RightAffix from "./right-affix.vue";
+import Article from "../editor/Article.vue";
+// import ArticleMarkdown from "@jx3box/jx3box-editor/src/ArticleMarkdown.vue";
+import Comment from "./Comment.vue";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { getAppType } from "@jx3box/jx3box-common/js/utils";
+
+const { __visibleMap } = JX3BOX;
+
+export default {
+    name: "cms-single",
+    components: {
+        PostHeader,
+        Creators,
+        Collection,
+        Thx,
+        Article,
+        // ArticleMarkdown,
+        Comment,
+        // RightAffix,
+    },
+    props: ["post", "stat"],
+    data: function () {
+        return {
+            collection_data: "",
+            directory: false,
+
+            // 创作者
+            other_authors: [],
+            super_author: "",
+        };
+    },
+    computed: {
+        id: function () {
+            return ~~this.post?.ID || 0;
+        },
+        app_type: function () {
+            return getAppType();
+        },
+        post_type: function () {
+            return this.post?.post_type;
+        },
+        post_title: function () {
+            return this.post?.post_title;
+        },
+        author_id: function () {
+            return this.post?.post_author;
+        },
+        collection_id: function () {
+            return this.post?.post_collection;
+        },
+        collection_collapse: function () {
+            return this.post?.collection_collapse;
+        },
+        visible: function () {
+            return !!this.post?._check;
+        },
+        null_tip: function () {
+            let str = "作者设置了【";
+            str += __visibleMap[this.post?.visible];
+            str += "】";
+            return str;
+        },
+        post_content: function () {
+            return this.post?.post_content || "";
+        },
+        post_mode: function () {
+            return this.post?.post_mode || "tinymce";
+        },
+        isMarkdown: function () {
+            return this.post_mode == "markdown";
+        },
+        allow_comment: function () {
+            return !this.post?.comment;
+        },
+        extend_data: function () {
+            return {
+                collection_data: this.collection_data,
+                directory: this.directory,
+            };
+        },
+        authors: function () {
+            if (this.other_authors && this.other_authors.length) {
+                return [this.super_author, ...this.other_authors];
+            }
+            return [];
+        },
+        post_client: function () {
+            return this.post?.client || "all";
+        },
+        community_id: function () {
+            return this.post?.community_id || 0;
+        },
+        anonymous: function () {
+            return this.post?.anonymous ==1;
+        }
+    },
+    methods: {
+        updateCollection: function (val) {
+            this.collection_data = val;
+        },
+        updateDirectory: function (val) {
+            this.directory = val;
+        },
+        loadAuthors({ super_author, other_authors }) {
+            this.super_author = super_author;
+            this.other_authors = other_authors;
+        },
+        toComment() {
+            this.$refs.commentView.scrollIntoView({
+                block: "start",
+                behavior: "auto",
+            });
+        },
+    },
+    watch: {
+        extend_data: {
+            deep: true,
+            immediate: true,
+            handler: function (val) {
+                this.$emit("extendUpdate", val);
+            },
+        },
+        post_type: {
+            deep: true,
+            immediate: true,
+            handler: function (val) {
+                if (location.host.includes("localhost")) {
+                    return;
+                }
+
+                if (val && val !== this.app_type) {
+                    location.href = `/${val}/${this.id}`;
+                }
+            },
+        },
+        community_id: {
+            immediate: true,
+            handler(val) {
+                if (val && val != 0) {
+                    // 防止死循环
+                    if (location.href.includes(`/community/${val}`)) {
+                        return;
+                    }
+                    location.href = `/community/${val}`;
+                }
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/single/cms-single.less";
+</style>

package/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ["./public/**/*.html", "./src/**/*.{vue,js,ts,jsx,tsx}", "./demo/**/*.{vue,js,ts,jsx,tsx}"],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+    // 本项目已引入 normalize.css/组件库样式；关闭 preflight 避免 Tailwind 重置影响现有样式
+    corePlugins: {
+        preflight: false,
+    },
+};
+

package/utils/bus.js

@@ -0,0 +1,5 @@
+import mitt from "mitt";
+
+const emitter = mitt();
+
+export default emitter;

package/utils/emotion.js

@@ -0,0 +1,21 @@
+import JX3_EMOTION from "@jx3box/jx3box-emotion";
+function escapeHtml(str) {
+    return str.replace(/[<>"']/g, function (match) {
+        switch (match) {
+            case "<":
+                return "&lt;";
+            case ">":
+                return "&gt;";
+            case '"':
+                return "&quot;";
+            case "'":
+                return "&#39;";
+        }
+    });
+}
+async function formatContent(val) {
+    const ins = new JX3_EMOTION(escapeHtml(val));
+    return await ins._renderHTML();
+}
+
+export { formatContent };

package/utils/index.js

@@ -0,0 +1,36 @@
+import { ElNotification } from "element-plus";
+// 复制
+export function copyText(text) {
+    if (window.navigator.clipboard) {
+        window.navigator.clipboard.writeText(text).then(
+            function () {
+                ElNotification.success({
+                    title: "复制成功",
+                });
+                console.log("Async: Copying to clipboard was successful!");
+            },
+            function (err) {
+                console.error("Async: Could not copy text: ", err);
+            }
+        );
+    } else {
+        const textArea = document.createElement("textarea");
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        try {
+            const successful = document.execCommand("copy");
+            const msg = successful ? "successful" : "unsuccessful";
+            console.log("Fallback: Copying text command was " + msg);
+        } catch (err) {
+            console.error("Fallback: Oops, unable to copy", err);
+        }
+        document.body.removeChild(textArea);
+    }
+}
+
+// 去除最后的/
+export function trimSlash(str) {
+    return str.replace(/\/$/, "");
+}

package/vue.config.js

@@ -0,0 +1,158 @@
+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,
+
+    //🌈多页面配置，详见 https://cli.vuejs.org/zh/config/#pages
+    pages: {
+        index: {
+            entry: "src/main.js",
+            template: "public/index.html",
+            filename: "index.html",
+            title: "JX3BOX",
+        },
+        article: {
+            title: "Article",
+            entry: "demo/A.js",
+            template: "public/article.html",
+            filename: "article/index.html",
+        },
+        tinymce: {
+            title: "Tinymce",
+            entry: "demo/T.js",
+            template: "public/tinymce.html",
+            filename: "tinymce/index.html",
+        },
+    },
+
+
+    //⚛️ Proxy ~
+    devServer: {
+        host: "localhost",
+        // 与 @jx3box/jx3box-common/js/api.js 对齐：
+        // 本地开发开启 `VUE_APP_PROXY_ENABLE=1` 后，会把请求 baseURL 切到 `${VUE_APP_PROXY_PREFIX}/${serviceKey}`
+        proxy: buildEnvProxy(),
+        allowedHosts: "all",
+        port: process.env.DEV_PORT || 12028,
+    },
+
+    // 依赖包（element-plus/theme-chalk 等）会输出大量 Sass deprecation 警告
+    // 这些不是运行错误，开启 quietDeps 让它们不刷屏（只保留项目自身的警告）
+    css: {
+        loaderOptions: {
+            sass: {
+                sassOptions: {
+                    quietDeps: true,
+                },
+            },
+            scss: {
+                sassOptions: {
+                    quietDeps: true,
+                },
+            },
+        },
+    },
+
+    // 过滤依赖包里的已知兼容性 warning（不影响运行，但会刷屏）
+    configureWebpack: {
+        stats: {
+            warningsFilter: [/node_modules[\\\\/]+@jx3box[\\\\/]+jx3box-common[\\\\/]+/],
+        },
+    },
+
+    //❤️ Webpack configuration
+    chainWebpack: (config) => {
+
+        //💝 in-line small imgs ~
+        config.module.rule("images").set("parser", {
+            dataUrlCondition: {
+                maxSize: 4 * 1024, // 4KiB
+            },
+        });
+
+        //💝 in-line svg imgs ~
+        config.module.rule("vue").use("vue-svg-inline-loader").loader("vue-svg-inline-loader");
+
+        //💖 import common less var * mixin ~
+        const types = ["vue-modules", "vue", "normal-modules", "normal"];
+        types.forEach((type) => addStyleResource(config.module.rule("less").oneOf(type)));
+
+        config.externals = {
+            tinyMCE: "tinyMCE",
+        }
+    },
+};
+
+// 注入全局样式资源（变量、mixin 等）
+// 本地css/var.less、mixin.less会覆盖node_modules里的同名文件，方便定制化
+// 注意此类文件都是变量和mixin函数，不要写全局样式，否则可能会被重复注入多次
+function addStyleResource(rule) {
+    var preload_styles = [];
+    preload_styles.push(
+        path.resolve(__dirname, "./node_modules/@jx3box/jx3box-common/css/var.less"),
+        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"),
+    );
+    rule.use("style-resource").loader("style-resources-loader").options({
+        patterns: preload_styles,
+    });
+}
+
+
+function normalizeTarget(value) {
+    if (!value) return "";
+    const trimmed = String(value).trim();
+    if (!trimmed) return "";
+    if (/^https?:\/\//i.test(trimmed)) return trimmed;
+    return `https://${trimmed.replace(/^\/+/, "")}`;
+}
+
+function escapeRegExp(str) {
+    return String(str).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function buildEnvProxy() {
+    const nodeEnv = String(process.env.NODE_ENV || "").toLowerCase();
+    if (nodeEnv && nodeEnv !== "development") return {};
+
+    // Vue CLI 加载 .env 的时机/覆盖关系可能导致这里读不到或读到意外值：
+    // - 明确设置为 false 才禁用
+    // - 未设置/无法读取时，仍然生成代理（仅在 devServer 生效）
+    const rawEnabled = String(process.env.VUE_APP_PROXY_ENABLE || "").toLowerCase();
+    const disabled = ["0", "false", "no", "off"].includes(rawEnabled);
+    if (disabled) return {};
+
+    const prefix = process.env.VUE_APP_PROXY_PREFIX || "/__proxy";
+    const mk = (serviceKey, target) => {
+        const normalized = normalizeTarget(target);
+        if (!normalized) return {};
+        const context = `${prefix}/${serviceKey}`;
+        const contextRe = new RegExp(`^${escapeRegExp(context)}`);
+        return {
+            [context]: {
+                target: normalized,
+                changeOrigin: true,
+                secure: false,
+                cookieDomainRewrite: "",
+                pathRewrite: (p) => p.replace(contextRe, ""),
+            },
+        };
+    };
+
+    const serviceTargets = {
+        cms: process.env.VUE_APP_CMS_API || commonDomains.__cms,
+        next: process.env.VUE_APP_NEXT_API || commonDomains.__next,
+        team: process.env.VUE_APP_TEAM_API || commonDomains.__team,
+        pay: process.env.VUE_APP_PAY_API || commonDomains.__pay,
+        lua: process.env.VUE_APP_LUA_API || commonDomains.__lua,
+        node: process.env.VUE_APP_NODE_API || commonDomains.__node,
+        helper: process.env.VUE_APP_HELPER_API || commonDomains.__helperUrl,
+    };
+
+    return Object.keys(serviceTargets).reduce((acc, key) => Object.assign(acc, mk(key, serviceTargets[key])), {});
+}