@jx3box/jx3box-common-ui 8.9.18 → 8.9.20

package/assets/img/header/check.svg

@@ -0,0 +1 @@
+<svg t="1726565101981" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10379" width="200" height="200"><path d="M544.234145 146.178267c-202.342428 0-366.335433 163.993005-366.335433 366.335433 0 202.343451 163.993005 366.332363 366.335433 366.332363 202.366987 0 366.331339-163.988912 366.331339-366.332363C910.565485 310.171272 746.577596 146.178267 544.234145 146.178267L544.234145 146.178267zM475.964272 690.441065 312.25984 526.736633l37.042661-37.042661L475.964272 616.355743l263.221983-263.225053 37.042661 37.042661L475.964272 690.441065 475.964272 690.441065zM475.964272 690.441065" fill="#67C23A" p-id="10380"></path></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-common-ui",
-    "version": "8.9.18",
+    "version": "8.9.20",
     "description": "JX3BOX UI",
     "main": "index.js",
     "scripts": {
@@ -31,7 +31,7 @@
     ],
     "dependencies": {
         "@jx3box/jx3box-comment-ui": "^1.9.3",
-        "@jx3box/jx3box-common": "^8.2.18",
+        "@jx3box/jx3box-common": "^8.3.5",
         "@jx3box/jx3box-data": "^3.5.8",
         "@jx3box/jx3box-editor": "^2.1.9",
         "@jx3box/reporter": "^0.0.4",

package/src/bread/CommunityAdmin.vue

@@ -144,7 +144,7 @@
                     >
                 </div>
                 <div class="c-community-buttons_right">
-                    <el-button type="primary" size="small" @click="submit" :loading="pushing">提交修改</el-button>
+                    <el-button type="primary" size="small" @click="submit" :loading="pushing">提交</el-button>
                     <el-button type="plain" size="small" @click="close">取消</el-button>
                 </div>
             </div>
@@ -253,7 +253,7 @@ export default {
                 this.$message.error("ID不存在!");
                 return;
             }
-            this.$confirm(`此操作将该数据转为 待审核 状态, 是否继续?`, "提示", {
+            this.$confirm(`此操作将该数据转为【待审核】状态, 是否继续?`, "提示", {
                 confirmButtonText: "确定",
                 cancelButtonText: "取消",
                 type: "warning",
@@ -337,7 +337,7 @@ export default {
                 this.$message.error("ID不存在!");
                 return;
             }
-            this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
+            this.$confirm("此操作将【删除】该数据, 是否继续?", "提示", {
                 confirmButtonText: "确定",
                 cancelButtonText: "取消",
                 type: "warning",
@@ -492,11 +492,13 @@ export default {
 @media screen and (max-width: @phone) {
     .c-community-admin {
         .c-community-buttons {
-            // width: unset !important;
+            width: 100%;
             justify-content: space-between;
+            .pr;
+            bottom: 0;
         }
 
-        .u-delete {
+        .u-delete, .u-check {
             span {
                 display: none !important;
             }

package/src/header/alternate.vue

@@ -0,0 +1,261 @@
+<template>
+    <el-dialog
+        append-to-body
+        :visible.sync="visible"
+        custom-class="c-alternate"
+        width="320px"
+        :show-close="false"
+        title="切换马甲"
+    >
+        <div class="c-alternate__content">
+            <div
+                class="c-alternate-item"
+                :class="{ 'is-active': profile.uid == item.uid, 'is-expired': isExpired(item.created_at) }"
+                v-for="item in alternate"
+                :key="item.uid"
+                @click="onSelectAlternate(item)"
+            >
+                <div class="m-avatar">
+                    <img
+                        class="u-active"
+                        v-if="profile.uid == item.uid"
+                        src="../../assets/img/header/check.svg"
+                        alt=""
+                    />
+                    <img class="u-avatar" :src="showAvatar(item.avatar)" alt="" />
+                </div>
+                <div class="m-misc">
+                    <span class="u-name"><span class="u-label">用户昵称：</span>{{ item.name }}</span>
+                    <span class="u-time">
+                        <span class="u-label">上次登录：</span>{{ getFormatTime(item.created_at) }}
+                        <span class="u-extra" v-if="isExpired(item.created_at)">(已过期)</span>
+                    </span>
+                </div>
+
+                <div class="u-remove" @click.stop="onRemoveAlternate(item)">
+                    <i class="el-icon-close"></i>
+                </div>
+            </div>
+            <div class="c-alternate-btn" :class="{'is-disabled': overLength}" @click="onAddAlternate">+</div>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import Bus from "../../service/bus";
+import { showAvatar } from "@jx3box/jx3box-common/js/utils";
+import dayjs from "dayjs";
+import User from "@jx3box/jx3box-common/js/user";
+import { __Links } from "@jx3box/jx3box-common/data/jx3box.json";
+export default {
+    name: "alternate",
+    data() {
+        return {
+            visible: false,
+
+            alternate: [
+                // {
+                //     uid: 100,
+                //     name: "马甲1",
+                //     avatar: "https://avatar.jx3box.com/avatar/1",
+                //     created_at: 1620000000000,
+                // },
+            ],
+        };
+    },
+    computed: {
+        profile() {
+            return User.getInfo();
+        },
+        overLength() {
+            return this.alternate.length > 5;
+        },
+    },
+    mounted() {
+        Bus.$on("showAlternate", () => {
+            this.visible = true;
+        });
+        this.init();
+    },
+    methods: {
+        init() {
+            // 获取localStorage中以jx3box-alternate-开头的数据
+            try {
+                let keys = Object.keys(localStorage);
+                let alternate = keys.filter((key) => key.startsWith("jx3box-alternate-"));
+
+                this.alternate = alternate.map((key) => {
+                    return JSON.parse(localStorage.getItem(key));
+                });
+
+                // 当前激活的排在第一
+                this.alternate.sort((a, b) => {
+                    return a.uid == this.profile.uid ? -1 : 1;
+                });
+            } catch (error) {
+                console.error(error);
+            }
+        },
+        showAvatar,
+        getFormatTime(time) {
+            return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
+        },
+        // 判断是否已过期
+        isExpired(time) {
+            return User.isExpired(time);
+        },
+        // 选择马甲
+        onSelectAlternate(item) {
+            if (this.isExpired(item.created_at)) {
+                this.$message.error("该马甲已过期，请重新登录");
+                return;
+            }
+            this.$confirm("确定要切换到该马甲吗？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    User.update(item).then(() => {
+                        localStorage.setItem(
+                            "jx3box-alternate-" + item.uid,
+                            JSON.stringify({
+                                ...item,
+                                created_at: Number(localStorage.getItem("created_at")),
+                            })
+                        );
+                        location.reload();
+                        this.visible = false;
+                    });
+                })
+                .catch(() => {});
+        },
+        // 删除马甲
+        onRemoveAlternate(item) {
+            this.$confirm("确定要删除该马甲吗？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    localStorage.removeItem("jx3box-alternate-" + item.uid);
+
+                    this.alternate = this.alternate.filter((alt) => alt.uid != item.uid);
+                })
+                .catch(() => {});
+        },
+        // 新增马甲
+        onAddAlternate() {
+            if (this.overLength) {
+                this.$message.error("最多只能添加5个马甲");
+                return;
+            }
+            // 跳转至登录页
+            location.href = __Links.account.login + "?alternate=1";
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-alternate {
+    .el-dialog__title{
+        .fz(12px);
+    }
+    .el-dialog__body {
+        padding: 0;
+    }
+    .el-dialog__header {
+        padding: 10px;
+        border-bottom: #dcdfe6 1px solid;
+
+    }
+    .c-alternate__content {
+        max-height: 600px;
+        overflow-y: auto;
+    }
+    .c-alternate-item {
+        .flex;
+        gap: 10px;
+        .pointer;
+        padding: 10px;
+        .pr;
+        border-bottom: 1px solid #eee;
+
+        &:hover {
+            background-color: @bg-light;
+
+            .u-remove {
+                display: block;
+            }
+        }
+    }
+
+    .u-remove {
+        .pa;
+        right: 10px;
+        top: 5px;
+        color: #999;
+        .pointer;
+        font-size: 16px;
+
+        &:hover {
+            color: #333;
+        }
+        .none;
+    }
+
+    .m-avatar {
+        .pr;
+    }
+    .u-avatar {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+    }
+    .u-active {
+        .pa;
+        right: -2px;
+        top: -6px;
+        width: 20px;
+        height: 20px;
+        fill: #fff;
+    }
+
+    .m-misc {
+        .flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+    .u-label {
+        font-size: 12px;
+        color: #999;
+    }
+
+    .u-extra {
+        font-size: 12px;
+        color: #999;
+    }
+
+    .is-expired {
+        .u-time {
+            color: #c00;
+        }
+    }
+
+    .c-alternate-btn {
+        // padding: 10px;
+        text-align: center;
+        .pointer;
+        // width: 100%;
+        // border-radius: 0;
+        .size(100%,74px);
+        .fz(40px,74px);
+        color:#999;
+        &:hover{
+            background-color:@bg-light;
+            color:#888;
+        }
+    }
+}
+</style>

package/src/header/userInfo.vue

@@ -68,7 +68,7 @@
 
                     <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" @click="changeAlternate">切换马甲</a>
                         <a class="el-button el-button--default is-plain" href="/dashboard/frame">主题风格</a>
                     </el-button-group>
 
@@ -89,6 +89,8 @@
                 </div>
             </template>
         </div>
+
+        <alternate></alternate>
     </div>
 </template>
 
@@ -100,10 +102,16 @@ import { showDate } from "@jx3box/jx3box-common/js/moment";
 import { __Links, __Root, __imgPath, __OriginRoot } from "@jx3box/jx3box-common/data/jx3box.json";
 import { copyText } from "../../assets/js/utils";
 import { getMenu } from "../../service/header";
+import Bus from "../../service/bus";
+
+import alternate from "./alternate.vue";
 export default {
     name: "info",
     props: ["asset"],
     emits: ["update"],
+    components: {
+        alternate,
+    },
     data() {
         return {
             isPhone: window.innerWidth < 768,
@@ -215,6 +223,9 @@ export default {
                 console.log("loadPanel error", e);
             }
         },
+        changeAlternate: function() {
+            Bus.$emit("showAlternate");
+        }
     },
 };
 </script>