befly-admin-ui 1.8.16 → 1.8.18

package/layouts/default.vue

@@ -0,0 +1,489 @@
+<template>
+    <div class="layout-wrapper">
+        <!-- 左侧边栏：Logo + 菜单 + 底部操作 -->
+        <div class="layout-sidebar">
+            <!-- Logo 区域 -->
+            <div class="sidebar-logo">
+                <div class="logo-icon">
+                    <AppIcon style="width: 24px; height: 24px; color: var(--primary-color)" />
+                </div>
+                <h2>{{ $Config.appTitle }}</h2>
+            </div>
+
+            <!-- 菜单区域 -->
+            <div class="sidebar-menu">
+                <t-menu v-model:value="$Data.currentMenuKey" v-model:expanded="$Data.expandedKeys" width="220px" @change="onMenuClick">
+                    <template v-for="menu in $Data.userMenus" :key="menu.id">
+                        <!-- 无子菜单 -->
+                        <t-menu-item v-if="!menu.children || menu.children.length === 0" :value="menu.path">
+                            <template #icon>
+                                <LinkIcon v-if="menu.path === '/dashboard' || menu.path === '/core/' || menu.path === '/core'" style="margin-right: 8px" />
+                                <ControlPlatformIcon v-else style="margin-right: 8px" />
+                            </template>
+                            {{ menu.name }}
+                        </t-menu-item>
+                        <!-- 有子菜单 -->
+                        <t-submenu v-else :value="String(menu.id)" :title="menu.name">
+                            <template #icon>
+                                <AppIcon style="margin-right: 8px" />
+                            </template>
+                            <t-menu-item v-for="child in menu.children" :key="child.id" :value="child.path">
+                                <template #icon>
+                                    <ControlPlatformIcon style="margin-right: 8px" />
+                                </template>
+                                {{ child.name }}
+                            </t-menu-item>
+                        </t-submenu>
+                    </template>
+                </t-menu>
+            </div>
+
+            <!-- 底部操作区域 -->
+            <div class="sidebar-footer">
+                <div class="footer-item" @click="handleSettings">
+                    <SettingIcon style="width: 18px; height: 18px" />
+                    <span>系统设置</span>
+                </div>
+                <div class="footer-user">
+                    <t-upload :action="$Config.uploadUrl" :headers="uploadHeaders" :show-upload-list="false" accept="image/*" @success="onAvatarUploadSuccess">
+                        <div class="user-avatar" :class="{ 'has-avatar': $Data.userInfo.avatar }">
+                            <img v-if="$Data.userInfo.avatar" :src="$Data.userInfo.avatar" alt="avatar" />
+                            <UserIcon v-else style="width: 16px; height: 16px; color: #fff" />
+                            <div class="avatar-overlay">
+                                <CloudIcon style="width: 14px; height: 14px; color: #fff" />
+                            </div>
+                        </div>
+                    </t-upload>
+                    <div class="user-info">
+                        <span class="user-name">{{ $Data.userInfo.nickname || "管理员" }}</span>
+                        <span class="user-role">{{ $Data.userInfo.role || "超级管理员" }}</span>
+                    </div>
+                    <t-button theme="default" variant="text" size="small" @click="handleLogout">
+                        <template #icon>
+                            <CloseCircleIcon style="width: 16px; height: 16px" />
+                        </template>
+                    </t-button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 右侧内容区域 -->
+        <div class="layout-main">
+            <RouterView />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { arrayToTree } from "befly-admin-ui/utils/arrayToTree";
+import { Button as TButton, DialogPlugin, Menu as TMenu, MenuItem as TMenuItem, MessagePlugin, Submenu as TSubmenu, Upload as TUpload } from "tdesign-vue-next";
+import { CloudIcon, CloseCircleIcon, CodeIcon, LinkIcon, MenuIcon, SettingIcon, UserIcon, ControlPlatformIcon, AppIcon } from "tdesign-icons-vue-next";
+
+import { reactive, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { $Config } from "@/plugins/config.js";
+import { $Http } from "@/plugins/http.js";
+
+const router = useRouter();
+const route = useRoute();
+const uploadHeaders = { Authorization: localStorage.getItem("yicode-token") || "" };
+
+const loginPath = "/core/login";
+
+function isString(value) {
+    return typeof value === "string";
+}
+
+const normalizePath = (path) => {
+    if (!isString(path)) {
+        return path;
+    }
+
+    const normalized = path.replace(/\/+$/, "");
+    return normalized.length === 0 ? "/" : normalized;
+};
+
+// parentPath 的归一化规则与 path 不同：
+// - parentPath 为空/"/" 视为根节点（空字符串）
+// - 避免把所有一级菜单挂到 "/"（首页）下面
+const normalizeParentPath = (parentPath) => {
+    if (!isString(parentPath)) {
+        return "";
+    }
+
+    const normalized = parentPath.replace(/\/+$/, "");
+    if (normalized.length === 0) {
+        return "";
+    }
+
+    if (normalized === "/") {
+        return "";
+    }
+
+    return normalized;
+};
+
+// 响应式数据
+const $Data = reactive({
+    userMenus: [],
+    userMenusFlat: [], // 一维菜单数据
+    expandedKeys: [],
+    currentMenuKey: "",
+    userInfo: {
+        nickname: "管理员",
+        role: "超级管理员",
+        avatar: "" // 用户头像
+    }
+});
+
+async function fetchUserMenus() {
+    try {
+        const { data } = await $Http.json("/core/menu/all");
+        const lists = Array.isArray(data?.lists) ? data.lists : [];
+
+        const normalizedLists = lists.map((menu) => {
+            const menuPath = normalizePath(menu?.path);
+            const menuParentPath = normalizeParentPath(menu?.parentPath);
+            return Object.assign({}, menu, { path: menuPath, parentPath: menuParentPath });
+        });
+
+        const treeResult = arrayToTree(normalizedLists, "path", "parentPath", "children", "sort");
+
+        $Data.userMenusFlat = treeResult.flat;
+        $Data.userMenus = treeResult.tree;
+        setActiveMenu();
+    } catch (error) {
+        MessagePlugin.error(error.msg || error.message || "获取用户菜单失败");
+    }
+}
+
+function setActiveMenu() {
+    const currentPath = route.path;
+    const normalizedCurrentPath = normalizePath(currentPath);
+
+    const currentMenu = $Data.userMenusFlat.find((menu) => {
+        const menuPath = menu.path;
+        const normalizedMenuPath = normalizePath(menuPath);
+        return normalizedMenuPath === normalizedCurrentPath;
+    });
+
+    if (!currentMenu) {
+        return;
+    }
+
+    const expandedKeys = [];
+    let menu = currentMenu;
+
+    while (isString(menu.parentPath) && menu.parentPath.length > 0) {
+        const parent = $Data.userMenusFlat.find((m) => {
+            const parentMenuPath = normalizePath(m?.path);
+            const currentParentPath = normalizeParentPath(menu?.parentPath);
+            return parentMenuPath === currentParentPath;
+        });
+
+        if (parent) {
+            expandedKeys.unshift(String(parent.id));
+            menu = parent;
+            continue;
+        }
+
+        break;
+    }
+
+    $Data.expandedKeys = expandedKeys;
+    $Data.currentMenuKey = currentPath;
+}
+
+function onMenuClick(path) {
+    if (isString(path) && path.startsWith("/")) {
+        router.push(path);
+    }
+}
+
+async function handleLogout() {
+    let dialog = null;
+    let destroyed = false;
+
+    const destroy = () => {
+        if (destroyed) return;
+        destroyed = true;
+        if (dialog && typeof dialog.destroy === "function") {
+            dialog.destroy();
+        }
+    };
+
+    dialog = DialogPlugin.confirm({
+        header: "确认退出登录",
+        body: "确定要退出登录吗？",
+        status: "warning",
+        onConfirm: async () => {
+            if (dialog && typeof dialog.setConfirmLoading === "function") {
+                dialog.setConfirmLoading(true);
+            }
+
+            try {
+                localStorage.removeItem("yicode-token");
+                await router.push(loginPath);
+                MessagePlugin.success("退出成功");
+                destroy();
+            } catch (error) {
+                MessagePlugin.error("退出失败");
+                destroy();
+            } finally {
+                if (dialog && typeof dialog.setConfirmLoading === "function") {
+                    dialog.setConfirmLoading(false);
+                }
+            }
+        },
+        onClose: () => {
+            destroy();
+        }
+    });
+}
+
+function handleSettings() {
+    router.push("/core/settings");
+}
+
+function onAvatarUploadSuccess(res) {
+    if (res.response?.code === 0 && res.response?.data?.url) {
+        $Data.userInfo.avatar = res.response.data.url;
+        MessagePlugin.success("头像上传成功");
+    }
+}
+
+fetchUserMenus();
+
+watch(
+    () => route.path,
+    () => {
+        setActiveMenu();
+    }
+);
+</script>
+
+<style scoped lang="scss">
+.layout-wrapper {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+    background: var(--bg-color-page);
+    padding: var(--layout-gap);
+    gap: var(--layout-gap);
+    overflow: hidden;
+
+    // 左侧边栏
+    .layout-sidebar {
+        width: var(--sidebar-width);
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        background: var(--bg-color-container);
+        border-radius: var(--border-radius-large);
+        box-shadow: var(--shadow-1);
+        overflow: hidden;
+
+        // Logo 区域
+        .sidebar-logo {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-sm);
+            padding: var(--spacing-md) var(--spacing-md);
+            border-bottom: 1px solid var(--border-color-light);
+
+            .logo-icon {
+                width: 36px;
+                height: 36px;
+                min-width: 36px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: var(--primary-color-light);
+                border-radius: var(--border-radius);
+            }
+
+            h2 {
+                margin: 0;
+                font-size: var(--font-size-md);
+                font-weight: var(--font-weight-semibold);
+                color: var(--text-primary);
+                white-space: nowrap;
+                overflow: hidden;
+            }
+        }
+
+        // 菜单区域
+        .sidebar-menu {
+            flex: 1;
+            overflow-y: auto;
+            padding: var(--spacing-xs) 0;
+
+            :deep(.t-menu) {
+                border-right: none;
+                background: transparent;
+
+                // 子菜单项（非父级的菜单项）
+                .t-menu__item {
+                    margin: 2px var(--spacing-sm);
+                    border-radius: var(--border-radius);
+                    transition: all var(--transition-fast);
+                    position: relative;
+
+                    &:hover {
+                        background-color: var(--bg-color-hover);
+                    }
+
+                    &.t-is-active {
+                        background-color: var(--primary-color-light);
+                        color: var(--primary-color);
+                        font-weight: var(--font-weight-medium);
+
+                        &::before {
+                            content: "";
+                            position: absolute;
+                            left: 0;
+                            top: 50%;
+                            transform: translateY(-50%);
+                            width: var(--menu-active-indicator);
+                            height: 60%;
+                            background-color: var(--primary-color);
+                            border-radius: 0 2px 2px 0;
+                        }
+                    }
+                }
+
+                // 父级菜单样式（有子菜单的）
+                .t-submenu {
+                    // 父级菜单的 header（不显示指示条）
+                    > .t-menu__item,
+                    > .t-submenu__header {
+                        margin: 2px var(--spacing-sm);
+                        border-radius: var(--border-radius);
+                        transition: all var(--transition-fast);
+                        position: relative;
+
+                        &:hover {
+                            background-color: var(--bg-color-hover);
+                        }
+
+                        // 父级菜单不显示指示条和背景
+                        &::before {
+                            display: none !important;
+                        }
+
+                        &.t-is-active {
+                            background-color: transparent !important;
+                        }
+                    }
+                }
+            }
+        }
+
+        // 底部操作区域
+        .sidebar-footer {
+            border-top: 1px solid var(--border-color-light);
+            padding: var(--spacing-sm);
+
+            .footer-item {
+                display: flex;
+                align-items: center;
+                gap: var(--spacing-sm);
+                padding: var(--spacing-sm) var(--spacing-md);
+                border-radius: var(--border-radius);
+                color: var(--text-secondary);
+                cursor: pointer;
+                transition: all var(--transition-fast);
+
+                &:hover {
+                    background-color: var(--bg-color-hover);
+                    color: var(--text-primary);
+                }
+
+                span {
+                    font-size: var(--font-size-sm);
+                    white-space: nowrap;
+                }
+            }
+
+            .footer-user {
+                display: flex;
+                align-items: center;
+                gap: var(--spacing-sm);
+                padding: var(--spacing-sm);
+                margin-top: var(--spacing-xs);
+                background: var(--bg-color-secondarycontainer);
+                border-radius: var(--border-radius);
+
+                .user-avatar {
+                    width: 32px;
+                    height: 32px;
+                    min-width: 32px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background: var(--primary-color);
+                    border-radius: 50%;
+                    flex-shrink: 0;
+                    cursor: pointer;
+                    position: relative;
+                    overflow: hidden;
+
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                    }
+
+                    .avatar-overlay {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
+                        background: rgba(0, 0, 0, 0.5);
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        opacity: 0;
+                        transition: opacity var(--transition-fast);
+                    }
+
+                    &:hover .avatar-overlay {
+                        opacity: 1;
+                    }
+                }
+
+                .user-info {
+                    flex: 1;
+                    min-width: 0;
+                    display: flex;
+                    flex-direction: column;
+
+                    .user-name {
+                        font-size: var(--font-size-sm);
+                        font-weight: var(--font-weight-medium);
+                        color: var(--text-primary);
+                        line-height: 1.3;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+
+                    .user-role {
+                        font-size: var(--font-size-xs);
+                        color: var(--text-placeholder);
+                        line-height: 1.3;
+                    }
+                }
+            }
+        }
+    }
+
+    // 右侧主内容区域
+    .layout-main {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+    }
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "befly-admin-ui",
-    "version": "1.8.16",
-    "gitHead": "964aa96007544f0f7a0f129bbe1d234a5ea59a08",
+    "version": "1.8.18",
+    "gitHead": "3fab09ac346b6d336a2f60b123d4856d077f8c7d",
     "private": false,
     "description": "Befly - 管理后台功能组件",
     "keywords": [
@@ -22,6 +22,8 @@
         "package.json",
         "README.md",
         "jsconfig.json",
+        "components/",
+        "layouts/",
         "views/",
         "styles/",
         "utils/"
@@ -30,6 +32,8 @@
     "main": "package.json",
     "exports": {
         ".": "./package.json",
+        "./components/*": "./components/*",
+        "./layouts/*": "./layouts/*",
         "./styles/*": "./styles/*",
         "./utils/*": "./utils/*.js"
     },
@@ -44,8 +48,5 @@
     },
     "peerDependencies": {
         "tdesign-icons-vue-next": "^0.4.0"
-    },
-    "devDependencies": {
-        "tdesign-icons-vue-next": "^0.4.0"
     }
 }

package/views/config/dict/components/edit.vue

@@ -26,7 +26,7 @@
 import { computed, reactive, ref } from "vue";
 
 import { Form as TForm, FormItem as TFormItem, Input as TInput, Select as TSelect, Option as TOption, Textarea as TTextarea, InputNumber as TInputNumber, MessagePlugin } from "tdesign-vue-next";
-import PageDialog from "@/components/pageDialog.vue";
+import PageDialog from "befly-admin-ui/components/pageDialog.vue";
 import { $Http } from "@/plugins/http";
 
 const props = defineProps({

package/views/config/dict/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <PagedTableDetail class="page-dict page-table" :columns="$Data.columns" :endpoints="$Data.endpoints">
+    <PageTableDetail class="page-dict page-table" :columns="$Data.columns" :endpoints="$Data.endpoints">
         <template #toolLeft>
             <TButton theme="primary" @click="onAdd">
                 <template #icon>
@@ -46,7 +46,7 @@
         <template #dialogs="scope">
             <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" :type-list="$Data.typeList" @success="onDialogSuccess(scope.reload)" />
         </template>
-    </PagedTableDetail>
+    </PageTableDetail>
 </template>
 
 <script setup>
@@ -56,7 +56,7 @@ import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem
 import { AddIcon, ChevronDownIcon, DeleteIcon, EditIcon, RefreshIcon, SearchIcon } from "tdesign-icons-vue-next";
 import EditDialog from "./components/edit.vue";
 import { $Http } from "@/plugins/http";
-import PagedTableDetail from "@/components/pagedTableDetail.vue";
+import PageTableDetail from "befly-admin-ui/components/pagedTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 
 const $Data = reactive({

package/views/config/dictType/components/edit.vue

@@ -21,7 +21,7 @@
 import { computed, reactive, ref } from "vue";
 
 import { Form as TForm, FormItem as TFormItem, Input as TInput, Textarea as TTextarea, InputNumber as TInputNumber, MessagePlugin } from "tdesign-vue-next";
-import PageDialog from "@/components/pageDialog.vue";
+import PageDialog from "befly-admin-ui/components/pageDialog.vue";
 import { $Http } from "@/plugins/http";
 
 const props = defineProps({

package/views/config/dictType/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <PagedTableDetail class="page-dict-type page-table" :columns="$Data.columns" :endpoints="$Data.endpoints">
+    <PageTableDetail class="page-dict-type page-table" :columns="$Data.columns" :endpoints="$Data.endpoints">
         <template #toolLeft>
             <TButton theme="primary" @click="onAdd">
                 <template #icon>
@@ -43,7 +43,7 @@
         <template #dialogs="scope">
             <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="onDialogSuccess(scope.reload)" />
         </template>
-    </PagedTableDetail>
+    </PageTableDetail>
 </template>
 
 <script setup>
@@ -51,7 +51,7 @@ import { reactive } from "vue";
 import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Input as TInput } from "tdesign-vue-next";
 import { AddIcon, ChevronDownIcon, DeleteIcon, EditIcon, RefreshIcon, SearchIcon } from "tdesign-icons-vue-next";
 import EditDialog from "./components/edit.vue";
-import PagedTableDetail from "@/components/pagedTableDetail.vue";
+import PageTableDetail from "befly-admin-ui/components/pagedTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 
 const $Data = reactive({

package/views/config/system/components/edit.vue

@@ -44,7 +44,7 @@
 import { computed, reactive, ref } from "vue";
 
 import { Form as TForm, FormItem as TFormItem, Input as TInput, Textarea as TTextarea, InputNumber as TInputNumber, Select as TSelect, Option as TOption, RadioGroup as TRadioGroup, Radio as TRadio, MessagePlugin } from "tdesign-vue-next";
-import PageDialog from "@/components/pageDialog.vue";
+import PageDialog from "befly-admin-ui/components/pageDialog.vue";
 import { $Http } from "@/plugins/http";
 
 const $Prop = defineProps({

package/views/config/system/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <PagedTableDetail class="page-sys-config page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['isSystem', 'valueType', 'state']">
+    <PageTableDetail class="page-sys-config page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['isSystem', 'valueType', 'state']">
         <template #toolLeft="scope">
             <TButton theme="primary" @click="onAdd">
                 <template #icon>
@@ -71,7 +71,7 @@
         <template #dialogs="scope">
             <EditDialog v-if="$Data.editVisible" v-model="$Data.editVisible" :action-type="$Data.actionType" :row-data="$Data.rowData" @success="onDialogSuccess(scope.reload)" />
         </template>
-    </PagedTableDetail>
+    </PageTableDetail>
 </template>
 
 <script setup>
@@ -79,8 +79,8 @@ import { reactive } from "vue";
 import { Button as TButton, Dropdown as TDropdown, DropdownItem as TDropdownItem, DropdownMenu as TDropdownMenu, Option as TOption, Select as TSelect, Tag as TTag } from "tdesign-vue-next";
 import { AddIcon, ChevronDownIcon, DeleteIcon, EditIcon, RefreshIcon } from "tdesign-icons-vue-next";
 import EditDialog from "./components/edit.vue";
-import DetailPanel from "@/components/detailPanel.vue";
-import PagedTableDetail from "@/components/pagedTableDetail.vue";
+import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
+import PageTableDetail from "befly-admin-ui/components/pagedTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 
 // 响应式数据

package/views/index/components/addonList.vue

@@ -25,6 +25,7 @@
 
 <script setup>
 import { reactive } from "vue";
+import { Tag as TTag } from "tdesign-vue-next";
 import { MenuIcon, SystemStorageIcon } from "tdesign-icons-vue-next";
 import { $Http } from "@/plugins/http";
 

package/views/index/components/operationLogs.vue

@@ -35,6 +35,7 @@
 
 <script setup>
 import { reactive } from "vue";
+import { Tag as TTag } from "tdesign-vue-next";
 import { CodeIcon } from "tdesign-icons-vue-next";
 
 // 组件内部数据

package/views/log/email/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <PagedTableDetail class="page-email page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['sendResult', 'sendTime']">
+    <PageTableDetail class="page-email page-table" :columns="$Data.columns" :endpoints="$Data.endpoints" :table-slot-names="['sendResult', 'sendTime']">
         <template #toolLeft>
             <TButton theme="primary" @click="openSendDialog">
                 <template #icon>
@@ -65,17 +65,17 @@
                 </TForm>
             </PageDialog>
         </template>
-    </PagedTableDetail>
+    </PageTableDetail>
 </template>
 
 <script setup>
 import { reactive, ref } from "vue";
 import { Button as TButton, Form as TForm, FormItem as TFormItem, Input as TInput, MessagePlugin, Space as TSpace, Tag as TTag, Textarea as TTextarea } from "tdesign-vue-next";
 import { CheckCircleIcon, RefreshIcon, SendIcon } from "tdesign-icons-vue-next";
-import PageDialog from "@/components/pageDialog.vue";
-import DetailPanel from "@/components/detailPanel.vue";
+import PageDialog from "befly-admin-ui/components/pageDialog.vue";
+import DetailPanel from "befly-admin-ui/components/detailPanel.vue";
 import { $Http } from "@/plugins/http";
-import PagedTableDetail from "@/components/pagedTableDetail.vue";
+import PageTableDetail from "befly-admin-ui/components/pagedTableDetail.vue";
 import { withDefaultColumns } from "befly-admin-ui/utils/withDefaultColumns";
 const sendFormRef = ref(null);