@scx-js/scx-admin 0.0.3

package/layout/scx-user-panel.vue

@@ -0,0 +1,193 @@
+<template>
+
+    <!-- 用户面板按钮 -->
+    <div class="scx-user-panel-btn" @click="changeUserPanel()">
+        <el-avatar :src="getAvatar()" class="scx-user-panel-btn-avatar" shape="circle">
+            <img :src="defaultAvatar"/>
+        </el-avatar>
+        <span class="scx-user-panel-btn-label">
+        {{ userInfo.username }}
+        </span>
+    </div>
+
+    <!-- 用户面板 -->
+    <scx-panel v-model="showUserPanelDialog" class='scx-user-panel' transition-type="top">
+
+        <scx-panel-item v-for="i in userPanelItemList" :active="activeMenu===i.name" @click="handleGoToRoute(i.name)">
+            <scx-icon v-if="i.meta && i.meta.icon" :icon="i.meta.icon"/>
+            <span>{{ getRouteTitle(i) }}</span>
+        </scx-panel-item>
+
+        <!-- 分割线 -->
+        <div v-if="userPanelItemList.length > 0" style="border-bottom: 2px solid #9a9696;"></div>
+
+        <scx-panel-item class="scx-dialog-item" @click="logout">
+            <scx-icon icon="outlined-poweroff"/>
+            <span>退出登录</span>
+        </scx-panel-item>
+    </scx-panel>
+
+</template>
+
+<script>
+import {computed, ref, watch} from "vue";
+import {useRoute, useRouter} from "vue-router";
+import defaultAvatar from "./img/default-avatar.gif";
+import {ElMessage} from "element-plus";
+import {ScxPanel, ScxPanelItem,} from "@scx-js/scx-ui";
+import {useScxFSS} from "@scx-js/scx-app-x";
+import {getRouteTitle, routeNoNeedLogin, useScxAuth, useScxRouter, useScxUserInfo} from "../scx/index.js";
+
+export default {
+    name: "scx-user-panel",
+    components: {
+        ScxPanel,
+        ScxPanelItem
+    },
+    setup() {
+        //获取路由对象
+        const route = useRoute();
+        const router = useRouter();
+
+        const auth = useScxAuth();
+        const fss = useScxFSS();
+        const userInfo = useScxUserInfo();
+        const scxRouter = useScxRouter();
+        //当前路由
+        const activeMenu = computed(() => route.name);
+
+        //在用户面板中显示的菜单
+        const userPanelItemList = scxRouter.getRoutes().filter(s => s.children.length === 0 && (s.meta && s.meta.showInUserPanel));
+        //是否显示用户面板弹窗
+        const showUserPanelDialog = ref(false);
+
+        //点击 跳转路由
+        function handleGoToRoute(item) {
+            showUserPanelDialog.value = false;
+            router.push({name: item});
+        }
+
+        /**
+         * 退出登录
+         */
+        function logout() {
+            auth.logout().then(() => {
+                debugger;
+                ElMessage.success("退出登录成功 !!!");
+                //查看当前页面是否在未登录即可访问的白名单中 , 在的话不做任何处理 , 不在的话重定向到登录
+                if (!routeNoNeedLogin(route)) {
+                    //再退出到登录页面时 携带当前页面的参数
+                    router.push(scxRouter.getLoginRoute(route));
+                }
+            }).catch(error => {
+                console.error(error);
+            }).finally(() => {
+                showUserPanelDialog.value = false;
+            });
+        }
+
+        /**
+         * 关闭 用户面板
+         * @param evt
+         */
+        function closeUserPanelDialog(evt) {
+            const parentA = evt.target.closest(".scx-user-panel-btn");
+            const parentB = evt.target.closest(".scx-user-panel");
+            if (!parentA && !parentB) {
+                showUserPanelDialog.value = false;
+            }
+        }
+
+        function changeUserPanel() {
+            showUserPanelDialog.value = !showUserPanelDialog.value;
+        }
+
+        //监听
+        watch(showUserPanelDialog, (value) => {
+            if (value) {
+                window.addEventListener("click", closeUserPanelDialog);
+            } else {
+                window.removeEventListener("click", closeUserPanelDialog);
+            }
+        });
+
+        function getAvatar() {
+            if (userInfo.avatar) {
+                return fss.joinImageURL(userInfo.avatar, {
+                    w: 200,
+                    h: 200
+                });
+            } else {
+                return defaultAvatar;
+            }
+        }
+
+        return {
+            userInfo,
+            userPanelItemList,
+            showUserPanelDialog,
+            defaultAvatar,
+            activeMenu,
+            logout,
+            handleGoToRoute,
+            getAvatar,
+            changeUserPanel,
+            getRouteTitle
+        };
+
+    }
+
+};
+</script>
+<style>
+
+/*用户面板按钮*/
+.scx-user-panel-btn {
+    position: relative;
+    display: flex;
+    height: 48px;
+    align-items: center;
+    justify-content: start;
+    transition: background 0.3s;
+    user-select: none;
+    cursor: pointer;
+    column-gap: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    min-width: 80px;
+    max-width: 150px;
+    margin-right: 10px;
+}
+
+.scx-user-panel-btn:hover {
+    background: var(--scx-theme-bg);
+}
+
+.scx-user-panel-btn-label {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis
+}
+
+.scx-user-panel-btn-avatar {
+    transition: transform 200ms;
+    flex-shrink: 0;
+}
+
+.scx-user-panel-btn-avatar:active {
+    transform: scale(0.9);
+}
+
+/*弹窗*/
+.scx-user-panel {
+    position: fixed;
+    z-index: 200;
+    top: calc(50px + 6px);
+    right: 10px;
+    width: 150px;
+    display: grid;
+    grid-row-gap: 10px;
+}
+
+</style>

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@scx-js/scx-admin",
+  "version": "0.0.3",
+  "description": "SCX Admin",
+  "license": "MIT",
+  "author": "scx567888",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "dev:test": "vite _test --host",
+    "build:test": "vite build _test",
+    "preview:test": "vite preview _test --host"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scx567888/scx-js.git"
+  },
+  "dependencies": {
+    "@scx-js/scx-app-x": "0.0.3",
+    "@scx-js/scx-common": "0.0.3",
+    "@scx-js/scx-dom": "0.0.3",
+    "element-plus": "^2.9.3",
+    "nprogress": "^0.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^6.0.0",
+    "vue-router": "^4.0.0"
+  }
+}

package/routes.js

@@ -0,0 +1,57 @@
+const PathMatchRoute = {
+    path: "/:pathMatch(.*)*",
+    redirect: {name: "not-found"},
+    meta: {
+        hiddenInLauncher: true,
+    },
+};
+
+const NotFoundRoute = {
+    path: "/not-found",
+    name: "not-found",
+    component: () => import("./views/not-found.vue"),
+    meta: {
+        title: "页面未找到",
+        hiddenInLauncher: true,
+        noNeedLogin: true,
+    },
+};
+
+const NoPermRoute = {
+    path: "/no-perm",
+    name: "no-perm",
+    component: () => import("./views/no-perm.vue"),
+    meta: {
+        hiddenInLauncher: true,
+        noNeedPerm: true,
+    },
+};
+
+
+const LoginAndRegisterRoute = {
+    path: "/login",
+    name: "login",
+    component: () => import("./views/login/login-and-register.vue"),
+    meta: {
+        title: "登录",
+        icon: "dashboard",
+        hiddenInLauncher: true,
+        noNeedLogin: true,
+    },
+};
+
+
+const LoginRoute = {
+    path: "/login",
+    name: "login",
+    component: () => import("./views/login/login.vue"),
+    meta: {
+        title: "登录",
+        icon: "dashboard",
+        hiddenInLauncher: true,
+        noNeedLogin: true,
+    },
+};
+
+
+export {PathMatchRoute, NotFoundRoute, NoPermRoute, LoginRoute, LoginAndRegisterRoute};

package/scx/ali-oss.js

@@ -0,0 +1,87 @@
+import {formatFileSize, getChunkAndHash} from "@scx-js/scx-app-x";
+import dayjs from "dayjs/esm/index.js";
+import {inject} from "vue";
+
+class AliOSS {
+
+    aliOssClient;
+
+    baseURL;
+
+    constructor(baseURL, aliOssClient) {
+        this.baseURL = baseURL;
+        this.aliOssClient = aliOssClient;
+    }
+
+    upload(needUploadFile, progress) {
+        const onProgress = (state, value) => {
+            //前 50% 是校验 md5 后 50% 才是真正的文件上传
+            if (state === "checking") {
+                progress(value * 0.5, "校验中");
+            } else if (state === "uploading") {
+                progress(50 + value * 0.5, "上传中");
+            }
+        };
+        return new Promise((resolve, reject) => {
+            if (needUploadFile == null || !(needUploadFile instanceof File)) {
+                reject("文件不能为空并且类型必须为文件 !!!");
+                return;
+            }
+            getChunkAndHash(needUploadFile, onProgress, needUploadFile.size).then(chunkAndMD5 => {
+                const now = new Date();
+                const path = []; //这里路径和 scx-fss 保持一致 年+月+日+MD5+真实文件名
+                path.push(now.getFullYear());
+                path.push(now.getMonth() + 1);
+                path.push(now.getDate());
+                path.push(chunkAndMD5.hash);
+                path.push(needUploadFile.name);
+                onProgress("uploading", 0);
+                this.aliOssClient.put(path.join("/"), needUploadFile)
+                        .then(res => {
+                            onProgress("uploading", 100);
+                            resolve(res.name);
+                        });
+            }).catch(e => reject(e));
+        });
+    }
+
+    info(fileID) {
+        const previewURL = this.joinURL(fileID) + "?x-oss-process=image/resize,w_150";
+        const downloadURL = this.joinURL(fileID);
+        const fileName = fileID.substring(fileID.lastIndexOf("/") + 1);
+
+        return new Promise((resolve, reject) => {
+            this.aliOssClient.getObjectMeta(fileID).then(m => {
+                const headers = m.res.headers;
+                const fileSizeDisplay = formatFileSize(headers["content-length"]);
+                const uploadTime = dayjs(headers["last-modified"]).format("YYYY-MM-DD HH:mm:ss");
+                resolve({fileName, previewURL, downloadURL, uploadTime, fileSizeDisplay});
+            });
+        });
+    }
+
+    joinURL(fileName) {
+        return joinURL(this.baseURL, fileName);
+    }
+
+    install(app) {
+        app.provide(aliOSSKey, this);
+    }
+
+}
+
+/**
+ *
+ * @type {string}
+ */
+const aliOSSKey = "ali-oss";
+
+/**
+ *
+ * @returns {AliOSS}
+ */
+function useAliOSS() {
+    return inject(aliOSSKey);
+}
+
+export {AliOSS, useAliOSS};

package/scx/auth-fetch.js

@@ -0,0 +1,68 @@
+import {ResponseNotOKError, ScxFetch, ScxFetchResponseType} from "@scx-js/scx-http";
+import {ElMessage, ElMessageBox} from "element-plus";
+
+class AuthFetch extends ScxFetch {
+
+    scxAuth;
+
+    /**
+     * 防止弹出多个提示框
+     */
+    messageLock;
+
+    constructor(baseURL, scxAuth) {
+        super(baseURL);
+        this.scxAuth = scxAuth;
+        this.defaultOptions.responseType = ScxFetchResponseType.JSON;
+        this.defaultOptions.usePreInterceptor = true;
+        this.defaultOptions.usePostInterceptor = true;
+    }
+
+    /**
+     * 这里重写前置拦截器以便传送请求头
+     * @param request
+     * @returns {RequestInit}
+     */
+    preInterceptor(request) {
+        const authHeaders = this.scxAuth.AuthHeaders();
+        for (let key in authHeaders) {
+            request.headers.set(key, authHeaders[key]);
+        }
+        return request;
+    }
+
+    postInterceptor(response) {
+        return new Promise((resolve, reject) => response.then(v => resolve(v)).catch(error => {
+            if (error instanceof ResponseNotOKError) {
+                //此处针对一些常见的 错误进行处理 例如 权限问题
+                const status = error.cause.status;
+                if (status === 401) {
+                    if (!this.messageLock) {
+                        this.messageLock = true;
+                        ElMessageBox.confirm("您已经被登出 !!!", "您已经被登出 !!!", {
+                            confirmButtonText: "重新登录", cancelButtonText: "取消", type: "warning",
+                        }).then(() => {
+                            this.scxAuth.removeToken();
+                            this.scxAuth.resetUserInfo();
+                            location.reload();
+                        }).catch(e => {
+                            console.error(e);
+                        }).finally(() => {
+                            this.messageLock = false;
+                        });
+                    }
+                } else if (status === 403) {
+                    ElMessage.warning("您没有权限进行该操作 !!!");
+                } else if (status === 500) {
+                    ElMessage.error("服务器端发生错误 !!!");
+                }
+            }
+            reject(error);
+        }));
+    }
+
+}
+
+export {
+    AuthFetch,
+};