@jx3box/jx3box-vue3-ui 0.0.3

package/src/header/User.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="c-header-user" id="c-header-user">
+        <template v-if="isLogin">
+            <!-- 消息中心 -->
+            <message />
+
+            <!-- 创作中心 -->
+            <publish />
+
+            <!-- vip -->
+            <vip />
+
+            <!-- 我的资产 -->
+            <asset :asset="asset" />
+
+            <!-- manage -->
+            <manage />
+
+            <!-- user info -->
+            <user-info :asset="asset" @logout="logout" />
+        </template>
+        <template v-else>
+            <div class="c-header-login">
+                <a class="u-register u-default" :href="register_url">注册</a>
+                <em>|</em>
+                <a class="u-login u-default" :href="login_url">登录</a>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+import User from "@jx3box/jx3box-common/js/user";
+import { userSignIn } from "../../service/author";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import dayjs from "dayjs";
+import isToday from "dayjs/plugin/isToday";
+dayjs.extend(isToday);
+
+import message from "./Message.vue";
+import publish from "./Publish.vue";
+import vip from "./Vip.vue";
+import asset from "./Asset.vue";
+import manage from "./Manage.vue";
+import userInfo from "./UserInfo.vue";
+export default {
+    name: "HeaderUser",
+    components: {
+        message,
+        publish,
+        vip,
+        asset,
+        manage,
+        userInfo,
+    },
+    data: function () {
+        return {
+            // 是否折叠
+            // 登录信息
+            user: User.getInfo(),
+            isLogin: User.isLogin(),
+
+            // VIP
+            asset: {
+                expire_date: "2022-03-07T00:00:00+08:00",
+                total_day: 395,
+                was_vip: 0,
+
+                pro_expire_date: "2022-03-07T00:00:00+08:00",
+                pro_total_day: 366,
+                was_pro: 0,
+            },
+
+            // 链接
+            login_url: JX3BOX.__Links.account.login + "?redirect=" + location.href,
+            register_url: JX3BOX.__Links.account.register + "?redirect=" + location.href,
+        };
+    },
+    methods: {
+        // 签到
+        signIn: function () {
+            try {
+                let user_last_login = localStorage.getItem("user_last_login");
+                user_last_login = (user_last_login && JSON.parse(user_last_login)) || "";
+
+                if (user_last_login && dayjs(user_last_login).isToday()) {
+                    // console.log("已签到");
+                } else {
+                    // 延迟2秒执行 feedback#501
+                    const signTimer = setTimeout(() => {
+                        userSignIn()
+                            .then(() => {
+                                let msg = this.$message({
+                                    type: "success",
+                                    message: "签到成功",
+                                    customClass: "c-header-signin",
+                                    duration: 0,
+                                });
+                                // 模拟手动关闭
+                                setTimeout(() => {
+                                    msg.close();
+                                }, 3000);
+                                localStorage.setItem("user_last_login", JSON.stringify(dayjs()));
+                            })
+                            .catch(() => {
+                                localStorage.setItem("user_last_login", JSON.stringify(dayjs()));
+                                console.log(dayjs.tz.guess());
+                            })
+                            .finally(() => {
+                                clearTimeout(signTimer);
+                            });
+                    }, 2000);
+                }
+            } catch (e) {
+                console.log(e);
+            }
+        },
+        // 资产
+        loadAsset: function () {
+            User.getAsset().then((data) => {
+                this.asset = data;
+            });
+        },
+        // 初始化
+        init: function () {
+            if (this.isLogin) {
+                this.loadAsset();
+                this.signIn();
+            }
+        },
+
+        // 退出登录
+        logout: function () {
+            this.isLogin = false;
+        },
+    },
+    created: function () {
+        this.init();
+    },
+};
+</script>

package/src/header/UserInfo.vue

@@ -0,0 +1,175 @@
+<template>
+    <div class="c-header-panel c-header-info">
+        <div class="c-header-profile" id="c-header-profile">
+            <img class="u-avatar" :src="showAvatar(user.user_avatar)" />
+            <template v-if="isPhone">
+                <ul class="u-menu u-pop-content">
+                    <li>
+                        <a href="/dashboard">个人中心</a>
+                    </li>
+                    <li>
+                        <a :href="url.msg">消息中心</a>
+                    </li>
+                    <li>
+                        <a :href="url.publish">发布中心</a>
+                    </li>
+                    <hr />
+                    <li v-if="isAdmin">
+                        <a href="/admin">站点配置</a>
+                    </li>
+                    <li v-if="isEditor">
+                        <a href="https://os.jx3box.com/admin">管理平台</a>
+                    </li>
+                    <li>
+                        <a @click="logout">退出登录</a>
+                    </li>
+                </ul>
+            </template>
+            <template v-else>
+                <div class="c-header-userdata u-pop-content">
+                    <div class="u-profile">
+                        <div class="u-basic">
+                            <a class="u-displayname" :href="url.homepage" :title="user.display_name" target="_blank">{{
+                                showUserName(user.display_name)
+                            }}</a>
+                            <a class="u-sign" href="/dashboard/cooperation">
+                                <img
+                                    :src="super_author_icon"
+                                    class="u-superauthor-profile"
+                                    alt="superauthor"
+                                    title="签约作者"
+                                    :class="{ off: !isSuperAuthor }"
+                            /></a>
+                            <a
+                                class="u-vip"
+                                href="/vip/premium?from=header_usermenu"
+                                target="_blank"
+                                title="专业版账号"
+                            >
+                                <i class="i-icon-vip" :class="{ on: isPRO }">{{ vipType }}</i>
+                            </a>
+                        </div>
+                        <div class="u-id">
+                            <span
+                                >魔盒UID：<b>{{ user.ID }}</b></span
+                            >
+                            <el-icon @click.stop="copyText(user.ID)"><DocumentCopy /></el-icon>
+                        </div>
+                    </div>
+
+                    <el-button-group class="u-actions">
+                        <a class="el-button el-button--default is-plain" href="/dashboard">个人中心</a>
+                        <a class="el-button el-button--default is-plain" :href="url.profile">资料设置</a>
+                        <a class="el-button el-button--default is-plain" href="/dashboard/frame">主题风格</a>
+                    </el-button-group>
+
+                    <div class="u-other">
+                        <a href="/dashboard/fav" class="u-item"
+                            ><el-icon><Star /></el-icon>收藏订阅
+                        </a>
+                        <a href="/team/role/manage" class="u-item"
+                            ><el-icon><User /></el-icon>角色管理
+                        </a>
+                        <a href="/dashboard/purchases" class="u-item"
+                            ><el-icon><ShoppingCart /></el-icon>已购资源
+                        </a>
+                        <a href="/dashboard/mall" class="u-item"
+                            ><el-icon><ShoppingBag /></el-icon>订单中心
+                        </a>
+                        <hr />
+                        <a href="/dashboard/feedback" class="u-item"
+                            ><el-icon><Phone /></el-icon>反馈帮助
+                        </a>
+                        <hr />
+                        <div class="u-logout">
+                            <el-button @click="logout" size="small" plain>退出登录</el-button>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+import User from "@jx3box/jx3box-common/js/user";
+import { showAvatar } from "@jx3box/jx3box-common/js/utils";
+import { getMyInfo } from "../../service/author";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { copyText } from "../../utils";
+export default {
+    name: "HeaderUserInfo",
+    props: ["asset"],
+    emits: ["logout"],
+    data() {
+        return {
+            isPhone: window.innerWidth < 768,
+            // 登录信息
+            user: User.getInfo(),
+            // links
+            url: {
+                msg: JX3BOX.__Links.dashboard.msg,
+                publish: JX3BOX.__Links.dashboard.publish,
+                dashboard: JX3BOX.__Links.dashboard.home,
+                profile: JX3BOX.__Links.dashboard.profile,
+                homepage: "/author/" + User.getInfo().uid,
+            },
+
+            isSuperAuthor: false,
+        };
+    },
+    computed: {
+        siteRoot: function () {
+            return location.host.includes("origin") ? JX3BOX.__OriginRoot : JX3BOX.__Root;
+        },
+        super_author_icon: function () {
+            return JX3BOX.__imgPath + "image/user/" + "superauthor.svg";
+        },
+        vipType: function () {
+            return "PRO";
+        },
+        isPRO: function () {
+            return User._isPRO(this.asset) || false;
+        },
+        isAdmin() {
+            return User.isAdmin();
+        },
+        isEditor() {
+            return User.isEditor();
+        },
+    },
+    mounted() {
+        this.loadMyInfo();
+    },
+    methods: {
+        copyText,
+        showAvatar,
+        logout: function () {
+            User.destroy()
+                .then(() => {
+                    this.$emit("logout");
+                    if (location.pathname.startsWith("/dashboard") || location.pathname.startsWith("/publish")) {
+                        location.href = this.siteRoot;
+                    }
+                })
+                .then(() => {
+                    this.$notify({
+                        title: "成功",
+                        message: "登出成功",
+                        type: "success",
+                        duration: 1000,
+                    });
+                });
+        },
+        showUserName: function (val) {
+            return val || "匿名";
+        },
+        loadMyInfo: function () {
+            getMyInfo().then((data) => {
+                this.user = data;
+                this.isSuperAuthor = !!data.sign;
+            });
+        },
+    },
+};
+</script>

package/src/header/Vip.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="c-header-panel c-header-vip" id="c-header-vip">
+        <el-tooltip effect="dark" content="会员中心" placement="bottom" popper-class="c-header-tooltip">
+            <a class="u-post u-vip" href="/vip/premium">
+                <img class="u-add" svg-inline src="../../assets/img/header/vip.svg" />
+            </a>
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "HeaderVip",
+};
+</script>
+
+<style lang="less" scoped>
+.c-header-vip {
+    height: 100%;
+    .u-vip {
+        padding: 0 10px;
+        height: 100%;
+        .flex;
+        align-items: center;
+    }
+}
+</style>

package/src/main.js

@@ -0,0 +1,30 @@
+// 1.Create APP
+import { createApp } from "vue";
+import App from "./App.vue";
+const app = createApp(App);
+
+// 2.Components
+import { createHead } from "@vueuse/head";
+const head = createHead();
+app.use(head);
+
+// element-plus
+import ElementPlus from "element-plus";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+import "element-plus/dist/index.css";
+import "../assets/css/var.less";
+
+import "@jx3box/jx3box-common/css/normalize.css";
+
+app.use(ElementPlus, {
+    locale: zhCn,
+});
+
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component);
+}
+
+// 3.Mount DOM
+app.mount("#app");

package/utils/bus.js

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

package/utils/index.js

@@ -0,0 +1,31 @@
+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 {
+        var textArea = document.createElement("textarea");
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        try {
+            var successful = document.execCommand("copy");
+            var 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);
+    }
+}

package/vue.config.js

@@ -0,0 +1,103 @@
+const path = require("path");
+module.exports = {
+    //❤️ define path for static files ~
+    publicPath: process.env.NODE_ENV === "development" ? "/" : process.env.STATIC_PATH,
+
+    //⚛️ Proxy ~
+    devServer: {
+        proxy: {
+            "/api/vip": {
+                target: "https://pay.jx3box.com",
+                onProxyReq: function (request) {
+                    request.setHeader("origin", "");
+                },
+            },
+            "/api/inspire": {
+                target: "https://pay.jx3box.com",
+                onProxyReq: function (request) {
+                    request.setHeader("origin", "");
+                },
+            },
+            "/api/team": {
+                target: "https://team.api.jx3box.com",
+                onProxyReq: function (request) {
+                    request.setHeader("origin", "");
+                },
+            },
+            "/api/cms": {
+                target: process.env["DEV_SERVER"] == "true" ? "http://localhost:5120" : "https://cms.jx3box.com",
+            },
+            "/api/article": {
+                target: "https://next2.jx3box.com",
+            },
+            "/api/messages": {
+                target: "https://helper.jx3box.com",
+            },
+            "/api/post/favorite": {
+                target: "https://helper.jx3box.com",
+            },
+            "/api/wiki": {
+                target: "https://helper.jx3box.com",
+            },
+            "/api/personal": {
+                target: "https://pay.jx3box.com",
+                onProxyReq: function (request) {
+                    request.setHeader("origin", "");
+                },
+            },
+            "/api/cny": {
+                target: "https://pay.jx3box.com",
+                onProxyReq: function (request) {
+                    request.setHeader("origin", "");
+                },
+            },
+            "/api": {
+                target: "https://next2.jx3box.com",
+                onProxyReq: function (request) {
+                    request.setHeader("origin", "");
+                },
+            },
+        },
+    },
+
+    //❤️ Webpack configuration
+    chainWebpack: (config) => {
+        //💘 html-webpack-plugin ~
+        // Multiple pages disable the block below
+        // config.plugin("html").tap((args) => {
+        //     args[0].meta = {
+        //         //------设置SEO信息
+        //         Keywords: setting.keys,
+        //         Description: setting.desc,
+        //     };
+        //     args[0].title = setting.title; //------自动添加标题后缀
+        //     return args;
+        // });
+
+        //💝 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)));
+    },
+};
+
+function addStyleResource(rule) {
+    var preload_styles = [];
+    preload_styles.push(
+        path.resolve(__dirname, "./node_modules/@jx3box/jx3box-common/css/common.less"),
+        path.resolve(__dirname, "./node_modules/csslab/base.less"),
+        path.resolve(__dirname, "./src/assets/css/var.less")
+    );
+    rule.use("style-resource").loader("style-resources-loader").options({
+        patterns: preload_styles,
+    });
+}