@scx-js/scx-admin 0.0.3

package/layout/scx-menu-item.vue

@@ -0,0 +1,47 @@
+<template>
+
+    <el-sub-menu v-if="isSubMenu() && routeCanShowInMenu(data)" :index="data.name">
+        <template #title>
+            <scx-icon v-if="data.meta && data.meta.icon" :icon="data.meta.icon"/>
+            <span>{{ getRouteTitle(data) }}</span>
+        </template>
+        <scx-menu-item v-for="i in canAccessRoutes" :data="i"/>
+    </el-sub-menu>
+
+    <el-menu-item v-else-if="routeCanShowInMenu(data)" :index="data.name" :route="data">
+        <scx-icon v-if="data.meta && data.meta.icon" :icon="data.meta.icon"/>
+        <span>{{ getRouteTitle(data) }}</span>
+    </el-menu-item>
+
+</template>
+
+<script>
+import {getRouteTitle, routeCanShowInMenu, useScxRouter} from "../scx/index.js";
+import {computed} from "vue";
+
+export default {
+    name: "scx-menu-item",
+    methods: {getRouteTitle},
+    props: {
+        data: {}
+    },
+    setup(props, ctx) {
+
+        const scxRouter = useScxRouter();
+
+        const allRoutes = props.data.children ? props.data.children : [];
+
+        const canAccessRoutes = computed(() => allRoutes.filter((c) => scxRouter.canAccessThisRoute(c)));
+
+        function isSubMenu() {
+            return canAccessRoutes.value.length > 0;
+        }
+
+        return {
+            isSubMenu,
+            routeCanShowInMenu,
+            canAccessRoutes
+        };
+    }
+};
+</script>

package/layout/scx-menu-toggle.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="scx-menu-toggle" @click="changeMenuCollapse()">
+        <scx-icon :class="{'isOpened':userConfig.menuCollapse}" class="scx-menu-toggle-icon" icon="outlined-menu-fold"/>
+    </div>
+</template>
+
+<script>
+import {useScxConfigManager, useScxUserConfig} from "../scx/index.js";
+
+export default {
+    name: "scx-menu-toggle",
+    setup() {
+
+        const userConfig = useScxUserConfig();
+        const scxConfigManager = useScxConfigManager();
+
+        function changeMenuCollapse() {
+            userConfig.menuCollapse = !userConfig.menuCollapse;
+            scxConfigManager.updateUserConfig({menuCollapse: userConfig.menuCollapse});
+        }
+
+        return {
+            userConfig,
+            changeMenuCollapse
+        };
+
+    }
+};
+</script>
+<style>
+.scx-menu-toggle {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    cursor: pointer;
+    transition: all 200ms;
+    width: 54px;
+    flex-shrink: 0;
+    justify-content: center;
+}
+
+.scx-menu-toggle:hover {
+    background-color: var(--scx-theme-bg);
+}
+
+.scx-menu-toggle-icon {
+    display: inline-block;
+    vertical-align: middle;
+    transition: all 200ms;
+    width: 40%;
+    height: 40%;
+}
+
+.scx-menu-toggle:hover > .scx-menu-toggle-icon {
+    fill: var(--scx-theme);
+}
+
+.scx-menu-toggle > .scx-menu-toggle-icon.isOpened {
+    transform: rotateY(180deg);
+}
+
+.scx-menu-toggle:active > .scx-menu-toggle-icon {
+    transform: scale(0.9);
+}
+
+.scx-menu-toggle:active > .scx-menu-toggle-icon.isOpened {
+    transform: rotateY(180deg) scale(0.9);
+}
+</style>

package/layout/scx-menu.vue

@@ -0,0 +1,122 @@
+<template>
+
+    <el-menu :collapse="userConfig.menuCollapse" :collapse-transition="false" :default-active="activeMenu"
+             :router="true">
+        <scx-menu-item v-for="i in canAccessRoutes" :data="i"/>
+    </el-menu>
+
+</template>
+<script>
+import {getRouteTitle, useScxRouter, useScxSystemConfig, useScxUserConfig} from "../scx/index.js";
+import {useRoute} from "vue-router";
+import {computed} from "vue";
+import ScxMenuItem from "./scx-menu-item.vue";
+
+export default {
+    name: "scx-menu",
+    components: {
+        ScxMenuItem,
+    },
+    setup() {
+        const systemConfig = useScxSystemConfig();
+        const userConfig = useScxUserConfig();
+        const scxRouter = useScxRouter();
+
+        const route = useRoute();
+
+        //所有能够被展示的路由 1, 是最终节点(没有 children) 2, 没有开启 hiddenInLauncher
+        const appRoute = scxRouter.getRoutes().find(c => c.name === "app");
+
+        const allRoutes = appRoute.children;
+
+        //当前路由
+        const activeMenu = computed(() => route.name);
+        //用户可以访问的路由
+        const canAccessRoutes = computed(() => allRoutes.filter((c) => scxRouter.canAccessThisRoute(c)));
+
+        return {
+            systemConfig,
+            activeMenu,
+            getRouteTitle,
+            scxRouter,
+            allRoutes,
+            userConfig,
+            canAccessRoutes
+        };
+    }
+};
+</script>
+<style>
+.el-menu .scx-icon {
+    fill: currentColor;
+    flex-shrink: 0;
+}
+
+.collapse .el-menu {
+    width: 54px;
+}
+
+.el-sub-menu__title {
+    padding-right: 0;
+}
+
+.el-menu {
+    box-sizing: border-box;
+    border-right: unset;
+    width: 200px;
+
+    --el-menu-active-color: var(--scx-theme);
+    --el-menu-hover-text-color: var(--scx-theme);
+    --el-menu-bg-color: var(--scx-overlay-bg);
+    --el-menu-hover-bg-color: var(--scx-theme-bg);
+    --el-menu-item-height: 40px;
+    --el-menu-sub-item-height: 40px;
+    --el-menu-horizontal-sub-item-height: 36px;
+}
+
+.el-menu-item.is-active {
+    background-color: var(--scx-theme-bg);
+}
+
+.el-sub-menu .el-menu {
+    background-color: var(--scx-bg);
+}
+
+.el-sub-menu.is-active > .el-sub-menu__title,
+.el-menu-item.is-active {
+    font-weight: 600;
+    color: var(--scx-theme);
+}
+
+/* 菜单文字 */
+.el-sub-menu__title,
+.el-menu-item {
+    transition: background-color 100ms;
+    column-gap: 20px;
+}
+
+/* 左侧火柴条 */
+.el-sub-menu__title::before,
+.el-menu-item::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 0;
+    height: 0;
+    width: 100%;
+    transition: all 150ms;
+}
+
+/* 左侧火柴条 */
+.el-menu-item.is-active::before,
+    /* 父菜单展开时 不需要有火柴条 */
+.el-sub-menu.is-active:not(.is-opened) > .el-sub-menu__title::before,
+    /* 处理折叠时展开 */
+.el-menu--collapse .el-sub-menu.is-active > .el-sub-menu__title::before,
+.el-sub-menu__title:hover::before,
+.el-menu-item:hover::before {
+    top: 0;
+    border-left: 2px solid var(--scx-theme);
+    height: 100%;
+}
+</style>

package/layout/scx-navbar.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="scx-navbar">
+        <div class="scx-navbar-left">
+            <slot name="left"/>
+        </div>
+        <div class="scx-navbar-right">
+            <slot name="right"/>
+        </div>
+    </div>
+</template>
+<script>
+
+export default {
+    name: "scx-navbar",
+    components: {},
+    setup() {
+
+    }
+};
+</script>
+<style>
+.scx-navbar {
+    height: 50px;
+    width: 100%;
+    top: 0;
+    flex-shrink: 0;
+    box-shadow: var(--scx-box-shadow-bottom);
+    z-index: 4;
+    background-color: var(--scx-overlay-bg);
+    display: flex;
+    justify-content: space-between;
+}
+
+.scx-navbar-left {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+.scx-navbar-right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    column-gap: 20px;
+}
+</style>

package/layout/scx-notice.vue

@@ -0,0 +1,211 @@
+<template>
+
+    <div v-drag="dragEvent" :class="{'show-notice':showNotice}" class="scx-notice-button-wrapper">
+        <div class="scx-notice-button">
+            <scx-icon :icon="showNotice?'outlined-close':'outlined-bell'"/>
+            <div v-if="$slots['tip']" class="tip">
+                <slot name="tip"></slot>
+            </div>
+        </div>
+    </div>
+
+    <div :class="{'show-notice':showNotice}" class="scx-notice">
+        <slot name="default"></slot>
+    </div>
+
+</template>
+
+<script>
+import {ref, watch} from "vue";
+
+export default {
+    name: "scx-notice",
+    setup() {
+
+        const showNotice = ref(false);
+
+        function closeSidebar(evt) {
+            const parentA = evt.target.closest(".scx-notice");
+            const parentB = evt.target.closest(".scx-notice-button");
+            if (!parentA && !parentB) {
+                showNotice.value = false;
+                window.removeEventListener("click", closeSidebar);
+            }
+        }
+
+        const dragEvent = {
+            bounds: (e) => {
+                if (showNotice.value) {
+                    e.right = e.right - 260;
+                }
+                return e;
+            },
+            onClick: (el) => {
+                showNotice.value = !showNotice.value;
+            },
+            onDrag: (el) => {
+                el.classList.add("dragging");
+            },
+            onDragEnd: (el) => {
+                el.classList.add("drag-moving");
+                let nowMatrix = new DOMMatrix(window.getComputedStyle(el).transform);
+                //清除我们不需要的坐标
+                nowMatrix = nowMatrix.translate(-nowMatrix.e, 0);
+                el.style.transform = nowMatrix.toString();
+                el.addEventListener("transitionend", (e) => {
+                    if (e.target === el) {
+                        el.classList.remove("drag-moving");
+                        el.classList.remove("dragging");
+                    }
+                });
+            }
+        };
+
+        watch(showNotice, (value) => {
+            value && window.addEventListener("click", closeSidebar);
+        });
+
+        return {
+            dragEvent,
+            showNotice,
+        };
+    }
+};
+</script>
+<style>
+.scx-notice-button-wrapper {
+    z-index: 10;
+    height: 48px;
+    width: 48px;
+    position: fixed;
+    right: 0;
+    top: 35%;
+    transition: right 0.25s cubic-bezier(0.7, 0.3, 0.1, 1)
+}
+
+/*右侧操作按钮*/
+.scx-notice-button-wrapper.show-notice {
+    right: 260px;
+}
+
+/*右侧操作按钮*/
+.scx-notice-button {
+    height: 100%;
+    width: 100%;
+    border-radius: 2px 0 0 2px;
+    pointer-events: auto;
+    cursor: pointer;
+    color: #fff;
+    transition: background 0.3s ease-in, transform 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
+    background: var(--scx-theme-bg, #3a8ee6);
+    display: flex;
+    user-select: none;
+    justify-content: center;
+    z-index: 300;
+}
+
+.dragging {
+    transition: unset;
+}
+
+.dragging .scx-notice-button {
+    transform: scale(0.9);
+    border-radius: 2px;
+    cursor: move;
+}
+
+:not(.show-notice) .scx-notice-button:hover svg {
+    animation: ringing 2500ms ease infinite;
+}
+
+.show-notice .scx-notice-button:hover svg {
+    animation: rotating 1700ms linear infinite;
+}
+
+.scx-notice-button:hover {
+    background: var(--scx-theme, #ffaaff);
+}
+
+.scx-notice-button svg {
+    pointer-events: none;
+    fill: whitesmoke;
+    margin-top: 25%;
+    font-size: 24px;
+}
+
+.scx-notice {
+    position: fixed;
+    width: 260px;
+    height: 100%;
+    top: 0;
+    right: 0;
+    transform: translateX(260px);
+    background: var(--scx-glass-bg);
+    transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
+    backdrop-filter: var(--scx-glass-bg-filter);
+    display: flex;
+    padding: 16px;
+    justify-content: center;
+    align-items: center;
+    word-wrap: break-word;
+    box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
+    z-index: 5;
+}
+
+.scx-notice.show-notice {
+    transform: translateX(0);
+    box-shadow: var(--scx-box-shadow-left);
+}
+
+.drag-moving {
+    transition: transform 600ms ease-out;
+}
+
+/* 旋转动画 */
+@keyframes rotating {
+    0% {
+        transform: rotate(0)
+    }
+    100% {
+        transform: rotate(360deg)
+    }
+}
+
+/* 铃铛动画 */
+@keyframes ringing {
+    0%, 50%, 100% {
+        transform: rotate(0deg);
+    }
+    5%, 10%, 15%, 20%, 30%, 35%, 40% {
+        transform: rotate(6deg);
+    }
+    45% {
+        transform: rotate(4deg);
+    }
+    7.5%, 12.5%, 17.5%, 22.5%, 27.5%, 32.5%, 37.5%, 42.5% {
+        transform: rotate(-6deg);
+    }
+    47.5% {
+        transform: rotate(-2deg);
+    }
+}
+
+.tip {
+    position: absolute;
+    top: -10px;
+    right: 4px;
+    font-size: 10px;
+    width: 22px;
+    height: 22px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #ff5454;
+    border-radius: 50%;
+    box-sizing: border-box;
+    padding: 2px;
+    border: 2px solid #ff8888;
+}
+</style>

package/layout/scx-sidebar.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="scx-sidebar">
+        <!-- 顶部 -->
+        <div v-if="$slots['top']" class="scx-sidebar-top">
+            <slot name="top"/>
+        </div>
+        <!-- 中心 -->
+        <div class="scx-sidebar-center">
+            <slot/>
+        </div>
+        <!-- 底部 -->
+        <div v-if="$slots['bottom']" class="scx-sidebar-bottom">
+            <slot name="bottom"/>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "scx-sidebar",
+    components: {}
+};
+</script>
+
+<style>
+.scx-sidebar {
+    z-index: 5;
+    flex-shrink: 0;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    overflow: hidden;
+    user-select: none;
+    box-shadow: var(--scx-box-shadow-right);
+    background: var(--scx-overlay-bg);
+    /*使切换主题时颜色过渡平滑一些*/
+    transition: background-color 100ms;
+}
+
+.scx-sidebar-top {
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: background 0.3s;
+    flex-shrink: 0;
+    justify-content: center;
+    box-shadow: var(--scx-box-shadow-bottom);
+    width: 100%;
+}
+
+.scx-sidebar-center {
+    height: 100%;
+    overflow: hidden;
+}
+
+.scx-sidebar-center:hover {
+    overflow-y: auto;
+}
+
+.scx-sidebar-bottom {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--scx-box-shadow-top);
+}
+</style>

package/layout/scx-theme-switch.vue

@@ -0,0 +1,54 @@
+<template>
+    <scx-switch v-model="userConfig.dark" class="scx-theme-switch" @change="onChange">
+        <template #icon>
+            <scx-icon :icon="userConfig.dark ? 'filled-moon':'filled-sun'"/>
+        </template>
+        <template #label>
+            {{ userConfig.dark ? "黑暗" : "明亮" }}
+        </template>
+    </scx-switch>
+</template>
+
+<script>
+import {changeTheme} from "@scx-js/scx-ui/style/changeTheme.js";
+import {useScxConfigManager, useScxUserConfig} from "../scx/index.js";
+
+export default {
+    name: "scx-theme-switch",
+    setup() {
+        const userConfig = useScxUserConfig();
+        const scxConfigManager = useScxConfigManager();
+
+        changeTheme(userConfig.dark);
+
+        function onChange(v) {
+            changeTheme(v);
+            scxConfigManager.updateUserConfig({dark: v});
+        }
+
+        return {
+            userConfig,
+            onChange
+        };
+    }
+};
+</script>
+
+<style>
+.scx-theme-switch {
+    flex-shrink: 0;
+    width: 60px;
+}
+
+.scx-theme-switch.scx-switch {
+    background: var(--scx-bg);
+}
+
+.scx-theme-switch.scx-switch > .scx-switch-icon {
+    background: var(--scx-overlay-bg);
+}
+
+.scx-theme-switch.scx-switch > .scx-switch-icon > .scx-icon {
+    fill: var(--scx-text-color);
+}
+</style>