befly-admin 3.0.1

package/src/api/auth.ts

@@ -0,0 +1,60 @@
+// 登录表单类型
+export interface LoginForm {
+    email?: string;
+    password?: string;
+    phone?: string;
+    code?: string;
+}
+
+// 注册表单类型
+export interface RegisterForm {
+    name: string;
+    email: string;
+    password: string;
+}
+
+// 登录响应类型
+export interface LoginResponse {
+    token: string;
+    userInfo?: {
+        id: number;
+        name: string;
+        email: string;
+        [key: string]: any;
+    };
+}
+
+/**
+ * 用户登录
+ */
+export const loginApi = (data: LoginForm) => {
+    return $Http<LoginResponse>('/addon/admin/login', data);
+};
+
+/**
+ * 用户注册
+ */
+export const registerApi = (data: RegisterForm) => {
+    return $Http('/addon/admin/register', data);
+};
+
+/**
+ * 发送短信验证码
+ */
+export const sendSmsCodeApi = (phone: string) => {
+    return $Http('/addon/admin/sendSmsCode', { phone });
+};
+
+/**
+ * 获取用户信息
+ */
+export function getUserInfo() {
+    return $Http('/addon/admin/adminInfo');
+}
+
+/**
+ * 退出登录
+ */
+export const logoutApi = () => {
+    return $Http('/addon/admin/logout');
+};

package/src/components/Icon.vue

@@ -0,0 +1,41 @@
+<template>
+    <component :is="iconComponent" :size="size" :color="color" :stroke-width="strokeWidth" style="margin-right: 8px; vertical-align: middle" v-bind="$attrs" />
+</template>
+
+<script setup>
+import * as LucideIcons from 'lucide-vue-next';
+import { computed, markRaw } from 'vue';
+
+const props = defineProps({
+    name: {
+        type: String,
+        required: true
+    },
+    size: {
+        type: Number,
+        default: 16
+    },
+    color: {
+        type: String,
+        default: 'currentColor'
+    },
+    strokeWidth: {
+        type: Number,
+        default: 2
+    }
+});
+
+// 动态获取图标组件
+const iconComponent = computed(() => {
+    const iconName = props.name;
+    const icon = LucideIcons[iconName];
+
+    if (!icon) {
+        console.warn(`Icon "${props.name}" not found in lucide-vue-next`);
+        return null;
+    }
+
+    // 使用 markRaw 避免响应式包装
+    return markRaw(icon);
+});
+</script>

package/src/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_API_BASE_URL: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}

package/src/layouts/0.vue

@@ -0,0 +1,207 @@
+<template>
+    <div class="layout-0-wrapper">
+        <!-- 顶部导航栏 -->
+        <div class="layout-header">
+            <div class="logo">
+                <h2>野蜂飞舞后台管理</h2>
+            </div>
+            <div class="header-right">
+                <tiny-dropdown title="管理员" trigger="click" border type="info" @item-click="$Method.handleUserMenu">
+                    <template #dropdown>
+                        <tiny-dropdown-menu>
+                            <tiny-dropdown-item :item-data="{ value: 'clearCache' }">刷新缓存</tiny-dropdown-item>
+                            <tiny-dropdown-item :item-data="{ value: 'logout' }" divided>退出登录</tiny-dropdown-item>
+                        </tiny-dropdown-menu>
+                    </template>
+                </tiny-dropdown>
+            </div>
+        </div>
+
+        <!-- 菜单栏 -->
+        <div class="layout-menu">
+            <tiny-tree-menu :data="$Data.userMenus" :props="{ label: 'name' }" node-key="id" :node-height="40" :show-filter="false" :default-expanded-keys="$Data.expandedKeys" :default-expanded-keys-highlight="$Data.currentNodeKey" style="height: 100%" only-check-children width-adapt @node-click="$Method.onMenuClick">
+                <template #default="{ data }">
+                    <span class="menu-item">
+                        <Icon :name="data.icon || 'Squircle'" :size="16" style="margin-right: 8px; vertical-align: middle" />
+                        <span>{{ data.name }}</span>
+                    </span>
+                </template>
+            </tiny-tree-menu>
+        </div>
+
+        <!-- 内容区域 -->
+        <div class="layout-main">
+            <RouterView />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { arrayToTree } from '../util';
+
+const router = useRouter();
+const route = useRoute();
+
+// 响应式数据
+const $Data = $ref({
+    userMenus: [],
+    expandedKeys: [],
+    currentNodeKey: 0
+});
+
+// 方法
+const $Method = {
+    // 获取用户菜单权限
+    async fetchUserMenus() {
+        try {
+            const { data } = await $Http('/addon/admin/menuAll');
+            // 将一维数组转换为树形结构（最多2级）
+            $Data.userMenus = arrayToTree(data);
+            $Method.setActiveMenu();
+        } catch (error) {
+            console.error('获取用户菜单失败:', error);
+        }
+    },
+
+    // 设置当前激活的菜单（2级菜单专用）
+    setActiveMenu() {
+        const currentPath = route.path;
+
+        // 遍历父级菜单
+        for (const parent of $Data.userMenus) {
+            // 检查父级菜单
+            if (parent.path === currentPath) {
+                $Data.currentNodeKey = parent.id;
+                $Data.expandedKeys = [parent.id];
+                return;
+            }
+
+            // 检查子级菜单
+            if (parent.children?.length) {
+                for (const child of parent.children) {
+                    if (child.path === currentPath) {
+                        nextTick(() => {
+                            $Data.currentNodeKey = child.id;
+                            $Data.expandedKeys = [parent.id];
+                        });
+                        return;
+                    }
+                }
+            }
+        }
+    },
+
+    // 处理菜单点击
+    onMenuClick(data) {
+        if (data.path) {
+            router.push(data.path);
+        }
+    },
+
+    // 处理用户菜单点击
+    handleUserMenu(data) {
+        const value = data.itemData?.value || data.value;
+        if (value === 'logout') {
+            localStorage.removeItem('token');
+            router.push('/login');
+            Modal.message({ message: '退出成功', status: 'success' });
+        } else if (value === 'clearCache') {
+            console.log('刷新缓存');
+            Modal.message({ message: '缓存刷新成功', status: 'success' });
+        }
+    }
+};
+
+$Method.fetchUserMenus();
+</script>
+
+<style scoped lang="scss">
+.layout-0-wrapper {
+    $menu-width: 240px;
+    $head-height: 64px;
+    $gap: 16px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    background: #f5f7fa;
+    overflow: hidden;
+
+    .layout-header {
+        position: absolute;
+        top: $gap;
+        left: $gap;
+        right: $gap;
+        height: $head-height;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 15px;
+        background: #ffffff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+        border: 1px solid #e8eaed;
+        z-index: 100;
+
+        .logo {
+            h2 {
+                margin: 0;
+                font-size: 22px;
+                font-weight: 700;
+                color: #1f2329;
+                letter-spacing: 0.5px;
+                background: linear-gradient(135deg, #0052d9 0%, #0084f4 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                background-clip: text;
+            }
+        }
+
+        .header-right {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+    }
+
+    .layout-menu {
+        position: absolute;
+        top: calc($head-height + $gap * 2);
+        left: $gap;
+        bottom: $gap;
+        width: $menu-width;
+        background: #ffffff;
+        border-radius: 8px;
+        z-index: 99;
+        padding: 16px 12px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+        border: 1px solid #e8eaed;
+
+        .tiny-tree-menu:before {
+            display: none;
+        }
+
+        .menu-item {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            padding: 2px 0;
+            transition: all 0.2s ease;
+
+            &:hover {
+                color: #0052d9;
+            }
+        }
+    }
+
+    .layout-main {
+        position: absolute;
+        top: calc($head-height + $gap * 2);
+        left: calc($menu-width + $gap * 2);
+        right: $gap;
+        bottom: $gap;
+        background: #f5f7fa;
+    }
+}
+</style>

package/src/layouts/1.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="layout-container">
+        <RouterView />
+    </div>
+</template>
+
+<script setup>
+const router = useRouter();
+const route = useRoute();
+
+// 响应式数据
+const $Data = $ref({});
+
+// 方法
+const $Method = {};
+</script>
+
+<style scoped lang="scss">
+.layout-container {
+    height: 100vh;
+}
+</style>

package/src/layouts/2.vue

@@ -0,0 +1,166 @@
+<template>
+    <div class="layout-container">
+        <RouterView />
+    </div>
+</template>
+
+<script setup>
+const router = useRouter();
+const route = useRoute();
+
+// 响应式数据
+const $Data = $ref({
+    collapsed: localStorage.getItem('sidebar-collapsed') === 'true',
+    expandedKeys: [],
+    menuItems: []
+});
+
+// 方法
+const $Method = {
+    // 切换折叠状态
+    toggleCollapse() {
+        $Data.collapsed = !$Data.collapsed;
+        localStorage.setItem('sidebar-collapsed', String($Data.collapsed));
+    }
+};
+
+// 当前激活菜单
+const activeMenu = computed(() => route.name);
+const currentTitle = computed(() => route.meta.title || '');
+
+// 图标映射（根据路由名称首段匹配）
+const iconMap = {
+    index: DashboardIcon,
+    user: UserIcon,
+    news: FileIcon,
+    system: SettingIcon,
+    default: AppIcon
+};
+
+// 从路由构建菜单结构
+function buildMenuFromRoutes() {
+    const routes = router.getRoutes();
+    // 过滤掉布局路由和登录页
+    const pageRoutes = routes.filter((r) => r.name && r.name !== 'layout0' && r.name !== 'login' && !String(r.name).startsWith('layout'));
+    const menuTree = {};
+    for (const r of pageRoutes) {
+        const name = String(r.name);
+        const segments = name.split('-');
+        const firstSeg = segments[0];
+        // 一级菜单
+        if (!menuTree[firstSeg]) {
+            menuTree[firstSeg] = {
+                value: segments.length === 1 ? name : firstSeg,
+                label: firstSeg.charAt(0).toUpperCase() + firstSeg.slice(1),
+                icon: iconMap[firstSeg] || iconMap.default,
+                children: []
+            };
+        }
+        // 多级路由加入子菜单
+        if (segments.length > 1) {
+            menuTree[firstSeg].children.push({
+                value: name,
+                label: segments.slice(1).join(' / ')
+            });
+        }
+    }
+    $Data.menuItems = Object.values(menuTree).sort((a, b) => {
+        if (a.value === 'index') return -1;
+        if (b.value === 'index') return 1;
+        return a.label.localeCompare(b.label);
+    });
+    // 默认展开所有包含子菜单的项
+    $Data.expandedKeys = $Data.menuItems.filter((m) => m.children && m.children.length).map((m) => m.value);
+}
+
+// 组件挂载时构建菜单
+onMounted(() => {
+    buildMenuFromRoutes();
+});
+
+const userMenuOptions = [
+    { content: '个人中心', value: 'profile' },
+    { content: '退出登录', value: 'logout' }
+];
+
+const handleMenuChange = (value) => {
+    router.push({ name: value });
+};
+
+const handleUserMenu = (data) => {
+    if (data.value === 'logout') {
+        localStorage.removeItem('token');
+        router.push('/login');
+        MessagePlugin.success('退出成功');
+    }
+};
+</script>
+
+<style scoped lang="scss">
+.layout-container {
+    height: 100vh;
+}
+
+.sidebar {
+    transition: width 0.3s ease;
+}
+
+.logo {
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid $border-color;
+}
+
+.logo h2 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.logo-short {
+    font-size: 24px;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24px;
+    background: $bg-color-container;
+    border-bottom: 1px solid $border-color;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.header-left h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.collapse-btn {
+    font-size: 20px;
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.ml-2 {
+    margin-left: 8px;
+}
+
+.content {
+    padding: 24px;
+    background: $bg-color-page;
+    overflow-y: auto;
+}
+</style>

package/src/main.ts

@@ -0,0 +1,19 @@
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import App from './App.vue';
+
+// 引入全局样式
+import './styles/index.scss';
+
+// 引入路由实例
+import { router } from './plugins/router';
+
+const app = createApp(App);
+
+// 安装基础插件
+app.use(createPinia());
+
+// 使用路由
+app.use(router);
+
+app.mount('#app');

package/src/plugins/http.ts

@@ -0,0 +1,94 @@
+import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios';
+import { Modal } from '@opentiny/vue';
+
+// API 响应格式
+interface ApiResponse<T = any> {
+    code: 0 | 1;
+    msg: string;
+    data: T;
+}
+
+// 创建 axios 实例
+const request: AxiosInstance = axios.create({
+    baseURL: import.meta.env.VITE_API_BASE_URL,
+    timeout: 10000,
+    headers: {
+        'Content-Type': 'application/json'
+    }
+});
+
+// 请求拦截器
+request.interceptors.request.use(
+    (config) => {
+        // 添加 token
+        const token = localStorage.getItem('token');
+        if (token) {
+            config.headers.Authorization = `Bearer ${token}`;
+            // 开发环境下打印 token 信息
+            if (import.meta.env.DEV) {
+                console.log('[HTTP] 请求携带 token:', token.substring(0, 20) + '...');
+            }
+        } else {
+            if (import.meta.env.DEV) {
+                console.log('[HTTP] 请求未携带 token');
+            }
+        }
+        return config;
+    },
+    (error) => {
+        console.error('[Request] 请求错误:', error);
+        return Promise.reject(error);
+    }
+);
+
+// 响应拦截器
+request.interceptors.response.use(
+    (response: AxiosResponse<ApiResponse>) => {
+        const res = response.data;
+
+        // 如果code不是0,说明业务失败
+        if (res.code !== 0) {
+            Modal.message({
+                message: res.msg || '请求失败',
+                status: 'error'
+            });
+            return Promise.reject(res.data);
+        }
+
+        return res;
+    },
+    (error) => {
+        Modal.message({ message: '网络连接失败', status: 'error' });
+        return Promise.reject(error);
+    }
+);
+
+/**
+ * 统一的 HTTP 请求方法（仅支持 GET 和 POST）
+ * @param url - 请求路径
+ * @param data - 请求数据，默认为空对象
+ * @param method - 请求方法，默认为 'post'，可选 'get' | 'post'
+ * @param config - axios 请求配置
+ * @returns Promise<ApiResponse<T>>
+ *
+ * @example
+ * // POST 请求（默认）
+ * await $Http('/addon/admin/login', { email, password });
+ *
+ * // GET 请求
+ * await $Http('/addon/admin/info', {}, 'get');
+ */
+export function $Http<T = any>(url: string, data: any = {}, method: 'get' | 'post' = 'post', config?: AxiosRequestConfig): Promise<ApiResponse<T>> {
+    const methodLower = method.toLowerCase() as 'get' | 'post';
+
+    // GET 请求将 data 作为 params
+    if (methodLower === 'get') {
+        return request.get(url, {
+            ...config,
+            params: data
+        });
+    }
+
+    // POST 请求将 data 作为 body
+    return request.post(url, data, config);
+}

package/src/plugins/router.ts

@@ -0,0 +1,47 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+import autoRoutes from 'virtual:auto-routes';
+
+/**
+ * 创建并导出路由实例
+ * 可直接在 main.ts 中使用 app.use(router)
+ */
+export const router = createRouter({
+    history: createWebHashHistory(import.meta.env.BASE_URL),
+    routes: autoRoutes
+});
+
+// 路由守卫 - 基础验证
+router.beforeEach(async (to, from, next) => {
+    // 设置页面标题
+    const titlePrefix = 'Befly Admin';
+    if (to.meta?.title) {
+        document.title = `${titlePrefix} - ${to.meta.title}`;
+    } else {
+        document.title = titlePrefix;
+    }
+
+    const token = localStorage.getItem('token');
+
+    // 判断是否为公开路由：使用 layout0 的需要登录，其他 layout 为公开路由
+    const isProtectedRoute = to.matched.some((record) => record.name === 'layout0');
+
+    // 1. 未登录且访问受保护路由 → 跳转登录
+    if (!token && isProtectedRoute) {
+        return next('/login');
+    }
+
+    // 2. 已登录访问登录页 → 跳转首页
+    if (token && to.path === '/login') {
+        return next('/');
+    }
+
+    next();
+});
+
+// 路由就绪后处理
+router.afterEach((to) => {
+    // 可以在这里添加页面访问统计等
+    if (import.meta.env.DEV) {
+        console.log(`[Router] 导航到: ${to.path}`);
+    }
+});

package/src/plugins/store.ts

@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia';
+
+/**
+ * 全局状态管理
+ * 集中管理所有全局数据，避免分散到多个 store 文件
+ */
+export const useGlobal = defineStore('global', () => {
+    // ==================== 全局状态 ====================
+
+    // 可以在这里添加全局状态，例如：
+    // - 用户信息
+    // - 主题配置
+    // - 应用设置
+    // - 等等
+
+    return {
+        // 暂时没有状态和方法
+    };
+});