Admin 布局

app/Admin/Http/Controllers/Controller.php

@@ -0,0 +1,7 @@
+<?php
+
+namespace App\Admin\Http\Controllers;
+
+abstract class Controller
+{
+}

app/Admin/Http/Controllers/HomeController.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Admin\Http\Controllers;
+
+use Inertia\Inertia;
+
+class HomeController extends Controller
+{
+    public function index(): \Inertia\Response
+    {
+        return Inertia::render('Home/Index');
+    }
+}

app/Admin/Http/Middleware/HandleInertiaRequests.php

@@ -0,0 +1,88 @@
+<?php
+
+namespace App\Admin\Http\Middleware;
+
+use Illuminate\Http\Request;
+use Inertia\Middleware;
+
+class HandleInertiaRequests extends Middleware
+{
+    /**
+     * The root template that's loaded on the first page visit.
+     *
+     * @see https://inertiajs.com/server-side-setup#root-template
+     *
+     * @var string
+     */
+    protected $rootView = 'admin.app';
+
+    /**
+     * Determines the current asset version.
+     *
+     * @see https://inertiajs.com/asset-versioning
+     */
+    public function version(Request $request): ?string
+    {
+        return parent::version($request);
+    }
+
+    /**
+     * Define the props that are shared by default.
+     *
+     * @see https://inertiajs.com/shared-data
+     *
+     * @return array<string, mixed>
+     */
+    public function share(Request $request): array
+    {
+        return array_merge(parent::share($request), [
+            'auth' => function () {
+                return [
+                    'user' => [
+                        'id' => 1,
+                        'username' => 'admin',
+                        'nickname' => 'Admin',
+                        'avatar' => 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+                    ],
+
+                    'menus' => [
+                        [
+                            'id' => 0,
+                            'title' => '主页',
+                            'path' => '/admin',
+                            'icon' => 'custom:home',
+                        ],
+                        [
+                            'id' => 1,
+                            'title' => '系统管理',
+                            'path' => '',
+                            'icon' => 'custom:gear',
+                            'children' => [
+                                [
+                                    'id' => 2,
+                                    'title' => '账号管理',
+                                    'path' => '/admin/system/users',
+                                ],
+                                [
+                                    'id' => 3,
+                                    'title' => '角色管理',
+                                    'path' => '/admin/system/roles',
+                                ],
+                                [
+                                    'id' => 4,
+                                    'title' => '权限管理',
+                                    'path' => '/admin/system/permissions',
+                                ],
+                                [
+                                    'id' => 5,
+                                    'title' => '菜单管理',
+                                    'path' => '/admin/system/menus',
+                                ],
+                            ],
+                        ],
+                    ],
+                ];
+            },
+        ]);
+    }
+}

bootstrap/app.php

@@ -3,12 +3,18 @@
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
+use Illuminate\Support\Facades\Route;
 
 return Application::configure(basePath: dirname(__DIR__))
     ->withRouting(
-        web: __DIR__.'/../routes/web.php',
         commands: __DIR__.'/../routes/console.php',
-        health: '/up',
+        using: function () {
+            Route::domain(config('admin.route.domain'))
+                ->prefix(config('admin.route.prefix'))
+                ->middleware(config('admin.route.middleware', []))
+                ->name('admin.')
+                ->group(base_path('routes/admin.php'));
+        },
     )
     ->withMiddleware(function (Middleware $middleware) {
         //

composer.json

@@ -6,8 +6,11 @@
     "license": "MIT",
     "require": {
         "php": "^8.2",
+        "inertiajs/inertia-laravel": "^1.0",
         "laravel/framework": "^11.0",
-        "laravel/tinker": "^2.9"
+        "laravel/tinker": "^2.9",
+        "tightenco/ziggy": "^2.0",
+        "tucker-eric/eloquentfilter": "^3.3"
     },
     "require-dev": {
         "fakerphp/faker": "^1.23",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "add3b7be12f0708d3ecb014455dfa358",
+    "content-hash": "efad75a0476261d63f7ccbfa5427e130",
     "packages": [
         {
             "name": "brick/math",
@@ -1045,6 +1045,81 @@
             ],
             "time": "2023-12-03T19:50:20+00:00"
         },
+        {
+            "name": "inertiajs/inertia-laravel",
+            "version": "v1.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/inertiajs/inertia-laravel.git",
+                "reference": "fcf3d6db1a259a55d8d18cf43fc971202c1f6b0d"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/inertiajs/inertia-laravel/zipball/fcf3d6db1a259a55d8d18cf43fc971202c1f6b0d",
+                "reference": "fcf3d6db1a259a55d8d18cf43fc971202c1f6b0d",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "laravel/framework": "^8.74|^9.0|^10.0|^11.0",
+                "php": "^7.3|~8.0.0|~8.1.0|~8.2.0|~8.3.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.3.3",
+                "orchestra/testbench": "^6.4|^7.0|^8.0|^9.0",
+                "phpunit/phpunit": "^8.0|^9.5.8|^10.4",
+                "roave/security-advisories": "dev-master"
+            },
+            "suggest": {
+                "ext-pcntl": "Recommended when running the Inertia SSR server via the `inertia:start-ssr` artisan command."
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Inertia\\ServiceProvider"
+                    ]
+                },
+                "branch-alias": {
+                    "dev-master": "1.x-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "./helpers.php"
+                ],
+                "psr-4": {
+                    "Inertia\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jonathan Reinink",
+                    "email": "jonathan@reinink.ca",
+                    "homepage": "https://reinink.ca"
+                }
+            ],
+            "description": "The Laravel adapter for Inertia.js.",
+            "keywords": [
+                "inertia",
+                "laravel"
+            ],
+            "support": {
+                "issues": "https://github.com/inertiajs/inertia-laravel/issues",
+                "source": "https://github.com/inertiajs/inertia-laravel/tree/v1.0.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/reinink",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-03-09T00:30:58+00:00"
+        },
         {
             "name": "laravel/framework",
             "version": "v11.0.7",
@@ -5414,6 +5489,74 @@
             ],
             "time": "2024-02-15T11:33:06+00:00"
         },
+        {
+            "name": "tightenco/ziggy",
+            "version": "v2.0.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/tighten/ziggy.git",
+                "reference": "a89c8b68575613a67fed1b20b41f576c40a7d94b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/tighten/ziggy/zipball/a89c8b68575613a67fed1b20b41f576c40a7d94b",
+                "reference": "a89c8b68575613a67fed1b20b41f576c40a7d94b",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "laravel/framework": ">=9.0",
+                "php": ">=8.1"
+            },
+            "require-dev": {
+                "orchestra/testbench": "^7.0 || ^8.0 || ^9.0",
+                "phpunit/phpunit": "^9.5 || ^10.3"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Tighten\\Ziggy\\ZiggyServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Tighten\\Ziggy\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Daniel Coulbourne",
+                    "email": "daniel@tighten.co"
+                },
+                {
+                    "name": "Jake Bathman",
+                    "email": "jake@tighten.co"
+                },
+                {
+                    "name": "Jacob Baker-Kretzmar",
+                    "email": "jacob@tighten.co"
+                }
+            ],
+            "description": "Use your Laravel named routes in JavaScript.",
+            "homepage": "https://github.com/tighten/ziggy",
+            "keywords": [
+                "Ziggy",
+                "javascript",
+                "laravel",
+                "routes"
+            ],
+            "support": {
+                "issues": "https://github.com/tighten/ziggy/issues",
+                "source": "https://github.com/tighten/ziggy/tree/v2.0.4"
+            },
+            "time": "2024-03-05T15:21:49+00:00"
+        },
         {
             "name": "tijsverkoyen/css-to-inline-styles",
             "version": "v2.2.7",
@@ -5467,6 +5610,71 @@
             },
             "time": "2023-12-08T13:03:43+00:00"
         },
+        {
+            "name": "tucker-eric/eloquentfilter",
+            "version": "3.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Tucker-Eric/EloquentFilter.git",
+                "reference": "acbfbe008b8c6b445708493b85a143f7f916c235"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Tucker-Eric/EloquentFilter/zipball/acbfbe008b8c6b445708493b85a143f7f916c235",
+                "reference": "acbfbe008b8c6b445708493b85a143f7f916c235",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/config": "~6.0|~7.0|~8.0|~9.0|~10.0|~11.0",
+                "illuminate/console": "~6.0|~7.0|~8.0|~9.0|~10.0|~11.0",
+                "illuminate/database": "~6.0|~7.0|~8.0|~9.0|~10.0|~11.0",
+                "illuminate/filesystem": "~6.0|~7.0|~8.0|~9.0|~10.0|~11.0",
+                "illuminate/pagination": "~6.0|~7.0|~8.0|~9.0|~10.0|~11.0",
+                "illuminate/support": "~6.0|~7.0|~8.0|~9.0|~10.0|~11.0",
+                "php": ">=7.2"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.3",
+                "phpunit/phpunit": "^8"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "EloquentFilter\\ServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "EloquentFilter\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Eric Tucker",
+                    "email": "tucker.ericm@gmail.com"
+                }
+            ],
+            "description": "An Eloquent way to filter Eloquent Models",
+            "keywords": [
+                "eloquent",
+                "filter",
+                "laravel",
+                "model",
+                "query",
+                "search"
+            ],
+            "support": {
+                "issues": "https://github.com/Tucker-Eric/EloquentFilter/issues",
+                "source": "https://github.com/Tucker-Eric/EloquentFilter/tree/3.3.0"
+            },
+            "time": "2024-02-08T18:03:52+00:00"
+        },
         {
             "name": "vlucas/phpdotenv",
             "version": "v5.6.0",

config/admin.php

@@ -0,0 +1,16 @@
+<?php
+
+use App\Admin\Http\Middleware\HandleInertiaRequests;
+
+return [
+    'route' => [
+        'domain' => env('ADMIN_ROUTE_DODMAIN', null),
+
+        'prefix' => env('ADMIN_ROUTE_PREFIX', 'admin'),
+
+        'middleware' => [
+            'web',
+            HandleInertiaRequests::class,
+        ],
+    ],
+];

jsconfig.json

@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@admin/*": ["resources/js/admin/*"],
+            "ziggy-js": ["vendor/tightenco/ziggy/dist/vue.m.js"]
+        }
+    },
+    "exclude": ["node_modules", "public"]
+}

package.json

@@ -0,0 +1,20 @@
+{
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build"
+    },
+    "devDependencies": {
+        "@iconify/vue": "^4.1.1",
+        "@inertiajs/vue3": "^1.0.15",
+        "@vitejs/plugin-vue": "^5.0.4",
+        "ant-design-vue": "^4.1.2",
+        "autoprefixer": "^10.4.18",
+        "axios": "^1.6.4",
+        "laravel-vite-plugin": "^1.0.0",
+        "postcss": "^8.4.36",
+        "tailwindcss": "^3.4.1",
+        "vite": "^5.0.0"
+    }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

resources/css/admin/app.css

@@ -0,0 +1,6 @@
+@config "./tailwind.config.js";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+

resources/css/admin/tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        './resources/js/admin/**/*.vue',
+        './resources/views/admin/**/*.blade.php',
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}
+
+
+

resources/js/admin/Layouts/App.vue

@@ -0,0 +1,273 @@
+<script setup>
+import { Icon } from '@iconify/vue'
+import { computed, h, ref } from 'vue'
+import { Link, router, usePage } from '@inertiajs/vue3'
+import { Grid } from 'ant-design-vue'
+import localeZhCN from 'ant-design-vue/es/locale/zh_CN'
+
+const locale = ref(localeZhCN)
+
+const screens = Grid.useBreakpoint()
+
+// 是否是桌面设备
+const isDesktopDevice = computed(() => {
+    return screens.value.lg
+})
+
+const page = usePage()
+
+// 侧边栏是否显示（非桌面设备访问时）
+const siderVisible = ref(false)
+// 侧边栏主题颜色
+const siderTheme = ref('dark')
+// 侧边栏是否收起
+const siderCollapsed = ref(false)
+// 侧边栏收起时宽度
+const siderCollapsedWidth = ref(64)
+// 侧边栏展开时宽度
+const siderWidth = ref(256)
+// 侧边栏的实际宽度
+const siderRealWidth = computed(() => {
+    return siderCollapsed.value ? siderCollapsedWidth.value : siderWidth.value
+})
+
+const toggleSiderVisible = () => {
+    siderVisible.value = !siderVisible.value
+}
+
+const toggleSiderCollapsed = () => {
+    siderCollapsed.value = !siderCollapsed.value
+}
+
+const menuWrapperStyle = computed(() => {
+    return {
+        height: `calc(100% - ${headerHeight.value}px)`,
+        overflow: 'hidden auto',
+    }
+})
+
+const menuItems = computed(() => {
+    return buildMenuItems(page.props.auth.menus)
+})
+
+const buildMenuItems = (items) => {
+    return items.map((item) => {
+        let children = undefined
+        if (item.children?.length > 0) {
+            children = buildMenuItems(item.children)
+        }
+        return {
+            key: item.path || `menu_key_${item.id}`,
+            icon: () => item.icon ? h(Icon, { icon: item.icon, class: "w-4 h-4" }) : '',
+            label: item.title,
+            title: item.title,
+            children,
+        }
+    })
+}
+
+const handleMenuClick = (item) => {
+    router.visit(item.key)
+}
+
+const headerHeight = ref(64)
+
+const headerStyle = computed(() => {
+    const width = isDesktopDevice.value
+        ? `calc(100% - ${siderRealWidth.value}px)`
+        : '100%'
+
+    return {
+        width: width,
+        height: `${headerHeight.value}px`,
+    }
+})
+
+const logout = () => {
+}
+</script>
+
+<template>
+    <a-config-provider :locale="locale">
+        <a-style-provider hash-priority="hight">
+            <div class="flex w-full min-h-screen">
+                <a-layout :hasSider="isDesktopDevice">
+                    <template v-if="isDesktopDevice">
+                        <div :style="{ width: `${siderRealWidth}px`, overflow: 'hidden', transition: 'width 0.2s ease 0s' }"></div>
+                        <a-layout-sider
+                            v-model:collapsed="siderCollapsed"
+                            :collapsedWidth="siderCollapsedWidth"
+                            :class="['app-sider-fixed']"
+                            :theme="siderTheme"
+                            :trigger="null"
+                            :width="siderWidth"
+                            collapsible
+                        >
+                            <Link href="/admin" class="sider-brand" :style="{ height: `${headerHeight}px` }">
+                                <svg viewBox="0 0 62 65" fill="none" class="w-8 h-8">
+                                    <path d="M61.8548 14.6253C61.8778 14.7102 61.8895 14.7978 61.8897 14.8858V28.5615C61.8898 28.737 61.8434 28.9095 61.7554 29.0614C61.6675 29.2132 61.5409 29.3392 61.3887 29.4265L49.9104 36.0351V49.1337C49.9104 49.4902 49.7209 49.8192 49.4118 49.9987L25.4519 63.7916C25.3971 63.8227 25.3372 63.8427 25.2774 63.8639C25.255 63.8714 25.2338 63.8851 25.2101 63.8913C25.0426 63.9354 24.8666 63.9354 24.6991 63.8913C24.6716 63.8838 24.6467 63.8689 24.6205 63.8589C24.5657 63.8389 24.5084 63.8215 24.456 63.7916L0.501061 49.9987C0.348882 49.9113 0.222437 49.7853 0.134469 49.6334C0.0465019 49.4816 0.000120578 49.3092 0 49.1337L0 8.10652C0 8.01678 0.0124642 7.92953 0.0348998 7.84477C0.0423783 7.8161 0.0598282 7.78993 0.0697995 7.76126C0.0884958 7.70891 0.105946 7.65531 0.133367 7.6067C0.152063 7.5743 0.179485 7.54812 0.20192 7.51821C0.230588 7.47832 0.256763 7.43719 0.290416 7.40229C0.319084 7.37362 0.356476 7.35243 0.388883 7.32751C0.425029 7.29759 0.457436 7.26518 0.498568 7.2415L12.4779 0.345059C12.6296 0.257786 12.8015 0.211853 12.9765 0.211853C13.1515 0.211853 13.3234 0.257786 13.475 0.345059L25.4531 7.2415H25.4556C25.4955 7.26643 25.5292 7.29759 25.5653 7.32626C25.5977 7.35119 25.6339 7.37362 25.6625 7.40104C25.6974 7.43719 25.7224 7.47832 25.7523 7.51821C25.7735 7.54812 25.8021 7.5743 25.8196 7.6067C25.8483 7.65656 25.8645 7.70891 25.8844 7.76126C25.8944 7.78993 25.9118 7.8161 25.9193 7.84602C25.9423 7.93096 25.954 8.01853 25.9542 8.10652V33.7317L35.9355 27.9844V14.8846C35.9355 14.7973 35.948 14.7088 35.9704 14.6253C35.9792 14.5954 35.9954 14.5692 36.0053 14.5405C36.0253 14.4882 36.0427 14.4346 36.0702 14.386C36.0888 14.3536 36.1163 14.3274 36.1375 14.2975C36.1674 14.2576 36.1923 14.2165 36.2272 14.1816C36.2559 14.1529 36.292 14.1317 36.3244 14.1068C36.3618 14.0769 36.3942 14.0445 36.4341 14.0208L48.4147 7.12434C48.5663 7.03694 48.7383 6.99094 48.9133 6.99094C49.0883 6.99094 49.2602 7.03694 49.4118 7.12434L61.3899 14.0208C61.4323 14.0457 61.4647 14.0769 61.5021 14.1055C61.5333 14.1305 61.5694 14.1529 61.5981 14.1803C61.633 14.2165 61.6579 14.2576 61.6878 14.2975C61.7103 14.3274 61.7377 14.3536 61.7551 14.386C61.7838 14.4346 61.8 14.4882 61.8199 14.5405C61.8312 14.5692 61.8474 14.5954 61.8548 14.6253ZM59.893 27.9844V16.6121L55.7013 19.0252L49.9104 22.3593V33.7317L59.8942 27.9844H59.893ZM47.9149 48.5566V37.1768L42.2187 40.4299L25.953 49.7133V61.2003L47.9149 48.5566ZM1.99677 9.83281V48.5566L23.9562 61.199V49.7145L12.4841 43.2219L12.4804 43.2194L12.4754 43.2169C12.4368 43.1945 12.4044 43.1621 12.3682 43.1347C12.3371 43.1097 12.3009 43.0898 12.2735 43.0624L12.271 43.0586C12.2386 43.0275 12.2162 42.9888 12.1887 42.9539C12.1638 42.9203 12.1339 42.8916 12.114 42.8567L12.1127 42.853C12.0903 42.8156 12.0766 42.7707 12.0604 42.7283C12.0442 42.6909 12.023 42.656 12.013 42.6161C12.0005 42.5688 11.998 42.5177 11.9931 42.4691C11.9881 42.4317 11.9781 42.3943 11.9781 42.3569V15.5801L6.18848 12.2446L1.99677 9.83281ZM12.9777 2.36177L2.99764 8.10652L12.9752 13.8513L22.9541 8.10527L12.9752 2.36177H12.9777ZM18.1678 38.2138L23.9574 34.8809V9.83281L19.7657 12.2459L13.9749 15.5801V40.6281L18.1678 38.2138ZM48.9133 9.14105L38.9344 14.8858L48.9133 20.6305L58.8909 14.8846L48.9133 9.14105ZM47.9149 22.3593L42.124 19.0252L37.9323 16.6121V27.9844L43.7219 31.3174L47.9149 33.7317V22.3593ZM24.9533 47.987L39.59 39.631L46.9065 35.4555L36.9352 29.7145L25.4544 36.3242L14.9907 42.3482L24.9533 47.987Z" fill="#FF2D20"></path>
+                                </svg>
+                                <span class="text-lg font-semibold ml-2" v-show="!siderCollapsed">Laravel Admin</span>
+                            </Link>
+                            <div :style="menuWrapperStyle">
+                                <a-menu :theme="siderTheme" :items="menuItems" @click="handleMenuClick" mode="inline"></a-menu>
+                            </div>
+                        </a-layout-sider>
+                    </template>
+                    <a-drawer
+                        v-else
+                        placement="left"
+                        :bodyStyle="{ padding: 0, height: '100%' }"
+                        :closable="false"
+                        :open="siderVisible"
+                        :width="siderWidth"
+                        @close="toggleSiderVisible"
+                    >
+                        <a-layout-sider
+                            class="h-full overflow-hidden"
+                            :theme="siderTheme"
+                            :width="siderWidth"
+                        >
+                            <Link href="/admin" class="sider-brand" :style="{ height: `${headerHeight}px` }">
+                                <svg viewBox="0 0 62 65" fill="none" class="w-8 h-8">
+                                    <path d="M61.8548 14.6253C61.8778 14.7102 61.8895 14.7978 61.8897 14.8858V28.5615C61.8898 28.737 61.8434 28.9095 61.7554 29.0614C61.6675 29.2132 61.5409 29.3392 61.3887 29.4265L49.9104 36.0351V49.1337C49.9104 49.4902 49.7209 49.8192 49.4118 49.9987L25.4519 63.7916C25.3971 63.8227 25.3372 63.8427 25.2774 63.8639C25.255 63.8714 25.2338 63.8851 25.2101 63.8913C25.0426 63.9354 24.8666 63.9354 24.6991 63.8913C24.6716 63.8838 24.6467 63.8689 24.6205 63.8589C24.5657 63.8389 24.5084 63.8215 24.456 63.7916L0.501061 49.9987C0.348882 49.9113 0.222437 49.7853 0.134469 49.6334C0.0465019 49.4816 0.000120578 49.3092 0 49.1337L0 8.10652C0 8.01678 0.0124642 7.92953 0.0348998 7.84477C0.0423783 7.8161 0.0598282 7.78993 0.0697995 7.76126C0.0884958 7.70891 0.105946 7.65531 0.133367 7.6067C0.152063 7.5743 0.179485 7.54812 0.20192 7.51821C0.230588 7.47832 0.256763 7.43719 0.290416 7.40229C0.319084 7.37362 0.356476 7.35243 0.388883 7.32751C0.425029 7.29759 0.457436 7.26518 0.498568 7.2415L12.4779 0.345059C12.6296 0.257786 12.8015 0.211853 12.9765 0.211853C13.1515 0.211853 13.3234 0.257786 13.475 0.345059L25.4531 7.2415H25.4556C25.4955 7.26643 25.5292 7.29759 25.5653 7.32626C25.5977 7.35119 25.6339 7.37362 25.6625 7.40104C25.6974 7.43719 25.7224 7.47832 25.7523 7.51821C25.7735 7.54812 25.8021 7.5743 25.8196 7.6067C25.8483 7.65656 25.8645 7.70891 25.8844 7.76126C25.8944 7.78993 25.9118 7.8161 25.9193 7.84602C25.9423 7.93096 25.954 8.01853 25.9542 8.10652V33.7317L35.9355 27.9844V14.8846C35.9355 14.7973 35.948 14.7088 35.9704 14.6253C35.9792 14.5954 35.9954 14.5692 36.0053 14.5405C36.0253 14.4882 36.0427 14.4346 36.0702 14.386C36.0888 14.3536 36.1163 14.3274 36.1375 14.2975C36.1674 14.2576 36.1923 14.2165 36.2272 14.1816C36.2559 14.1529 36.292 14.1317 36.3244 14.1068C36.3618 14.0769 36.3942 14.0445 36.4341 14.0208L48.4147 7.12434C48.5663 7.03694 48.7383 6.99094 48.9133 6.99094C49.0883 6.99094 49.2602 7.03694 49.4118 7.12434L61.3899 14.0208C61.4323 14.0457 61.4647 14.0769 61.5021 14.1055C61.5333 14.1305 61.5694 14.1529 61.5981 14.1803C61.633 14.2165 61.6579 14.2576 61.6878 14.2975C61.7103 14.3274 61.7377 14.3536 61.7551 14.386C61.7838 14.4346 61.8 14.4882 61.8199 14.5405C61.8312 14.5692 61.8474 14.5954 61.8548 14.6253ZM59.893 27.9844V16.6121L55.7013 19.0252L49.9104 22.3593V33.7317L59.8942 27.9844H59.893ZM47.9149 48.5566V37.1768L42.2187 40.4299L25.953 49.7133V61.2003L47.9149 48.5566ZM1.99677 9.83281V48.5566L23.9562 61.199V49.7145L12.4841 43.2219L12.4804 43.2194L12.4754 43.2169C12.4368 43.1945 12.4044 43.1621 12.3682 43.1347C12.3371 43.1097 12.3009 43.0898 12.2735 43.0624L12.271 43.0586C12.2386 43.0275 12.2162 42.9888 12.1887 42.9539C12.1638 42.9203 12.1339 42.8916 12.114 42.8567L12.1127 42.853C12.0903 42.8156 12.0766 42.7707 12.0604 42.7283C12.0442 42.6909 12.023 42.656 12.013 42.6161C12.0005 42.5688 11.998 42.5177 11.9931 42.4691C11.9881 42.4317 11.9781 42.3943 11.9781 42.3569V15.5801L6.18848 12.2446L1.99677 9.83281ZM12.9777 2.36177L2.99764 8.10652L12.9752 13.8513L22.9541 8.10527L12.9752 2.36177H12.9777ZM18.1678 38.2138L23.9574 34.8809V9.83281L19.7657 12.2459L13.9749 15.5801V40.6281L18.1678 38.2138ZM48.9133 9.14105L38.9344 14.8858L48.9133 20.6305L58.8909 14.8846L48.9133 9.14105ZM47.9149 22.3593L42.124 19.0252L37.9323 16.6121V27.9844L43.7219 31.3174L47.9149 33.7317V22.3593ZM24.9533 47.987L39.59 39.631L46.9065 35.4555L36.9352 29.7145L25.4544 36.3242L14.9907 42.3482L24.9533 47.987Z" fill="#FF2D20"></path>
+                                </svg>
+                                <span class="text-lg font-semibold ml-2">Laravel Admin</span>
+                            </Link>
+                            <div :style="menuWrapperStyle">
+                                <a-menu :theme="siderTheme" :items="menuItems" @click="handleMenuClick" mode="inline"></a-menu>
+                            </div>
+                        </a-layout-sider>
+                    </a-drawer>
+
+                    <a-layout>
+                        <a-layout-header :style="{ height: `${headerHeight}px`, background: 'transparent' }"></a-layout-header>
+                        <a-layout-header :class="['app-header', 'app-header-fixed']" :style="headerStyle">
+                            <div class="flex items-center h-full px-4 shadow leading-none bg-white">
+                                <span class="p-2 cursor-pointer" @click="toggleSiderCollapsed" v-if="isDesktopDevice">
+                                    <svg viewBox="0 0 1024 1024" class="w-7 h-7"  v-if="siderCollapsed">
+                                        <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8m-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8m0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8M142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7" fill="currentColor"></path>
+                                    </svg>
+                                    <svg viewBox="0 0 1024 1024" class="w-7 h-7" v-else>
+                                        <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8m-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8m0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8M115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 0 0 0 13.8" fill="currentColor"></path>
+                                    </svg>
+                                </span>
+                                <span class="p-2 cursor-pointer" @click="toggleSiderVisible" v-else>
+                                    <svg viewBox="0 0 1024 1024" class="w-7 h-7">
+                                        <path d="M64 128v64h832V128z m0 320v64h832V448z m0 320v64h832v-64z" fill="currentColor"></path>
+                                    </svg>
+                                </span>
+
+                                <ul class="flex ml-auto">
+                                    <li class="hover:bg-slate-100 cursor-pointer">
+                                        <a-dropdown
+                                            placement="bottomRight"
+                                            :arrow="false"
+                                            :overlayStyle="{'min-width': '8rem'}"
+                                        >
+                                            <div class="flex items-center p-2">
+                                                <div class="rounded-full w-8 h-8"><img :src="$page.props.auth.user.avatar" /></div>
+                                                <div class="ml-2">{{ $page.props.auth.user.nickname }}</div>
+                                            </div>
+                                            <template #overlay>
+                                                <a-menu>
+                                                    <a-menu-item>
+                                                        <a href="javascript:;" class="flex items-center">
+                                                            <svg viewBox="0 0 1024 1024" class="w-4 h-4 mr-1">
+                                                                <path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" fill="currentColor"></path>
+                                                            </svg>
+                                                            <span>个人中心</span>
+                                                        </a>
+                                                    </a-menu-item>
+                                                    <a-menu-divider />
+                                                    <a-menu-item>
+                                                        <a href="javascript:;" class="flex items-center" @click="logout">
+                                                            <svg viewBox="0 0 1024 1024" class="w-4 h-4 mr-1">
+                                                                <path d="M705.28 241.28v99.84l64-63.36V160l-32-32h-576l-32 32v31.104L128 192v658.56l23.04 29.44 320 110.08L512 960v-64h225.28l32-32v-115.84l-64-64V832H512V301.44l-21.12-29.44L258.304 192h446.976v49.28zM448 913.92l-256-85.76V238.08l256 85.76v590.08z m417.28-371.2H547.2v-64h315.52l-102.4-102.4 45.44-44.8 158.08 157.44v45.44l-159.36 158.72-44.8-44.8 105.6-105.6z" fill="currentColor"></path>
+                                                            </svg>
+                                                            <span>退出登录</span>
+                                                        </a>
+                                                    </a-menu-item>
+                                                </a-menu>
+                                            </template>
+                                        </a-dropdown>
+                                    </li>
+                                </ul>
+                            </div>
+                        </a-layout-header>
+
+                        <a-layout-content>
+                            <slot />
+                        </a-layout-content>
+                    </a-layout>
+                </a-layout>
+            </div>
+        </a-style-provider>
+    </a-config-provider>
+</template>
+
+<style>
+#app .app-header {
+    padding: 0;
+}
+
+#app .app-header-fixed {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    transition: width 0.2s ease 0s;
+}
+
+#app .app-sider-fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    overflow: hidden;
+}
+
+.ant-layout-sider .sider-brand {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ant-layout-sider .sider-brand span {
+    animation: fade-in;
+    animation-duration: .2s;
+}
+
+.ant-layout-sider-light .sider-brand span {
+    color: #000;
+}
+
+.ant-layout-sider-dark .sider-brand span {
+    color: #fff;
+}
+
+.ant-drawer .ant-layout-sider-dark {
+    background: #001529;
+}
+
+.ant-drawer .ant-layout-sider-children {
+    height: 100%;
+}
+
+@keyframes fade-in {
+    0% {
+        display: none;
+        opacity: 0
+    }
+
+    99% {
+        display: none;
+        opacity: 0
+    }
+
+    to {
+        display: block;
+        opacity: 1
+    }
+}
+</style>

resources/js/admin/Pages/Home/Index.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { Head } from '@inertiajs/vue3'
+import AppLayout from '@admin/Layouts/App.vue'
+
+defineOptions({
+    layout: AppLayout,
+})
+</script>
+
+<template>
+    <div class="p-6">
+        <Head title="主页" />
+
+        <h1>Welcome!</h1>
+    </div>
+</template>

resources/js/admin/Utils/http.js

@@ -0,0 +1,23 @@
+import axios from 'axios'
+
+const instance = axios.create({
+    timeout: 5000,
+})
+
+instance.interceptors.request.use((config) => {
+    return config
+}, (error) => {
+    return Promise.reject(error)
+})
+
+instance.interceptors.response.use((response) => {
+    return response
+}, (error) => {
+    if (error.response) {
+        // 异常处理
+    }
+
+    return Promise.reject(error)
+})
+
+export default instance

resources/js/admin/app.js

@@ -0,0 +1,20 @@
+import '../../css/admin/app.css'
+
+import { createApp, h } from 'vue'
+import { createInertiaApp } from '@inertiajs/vue3'
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
+import { ZiggyVue } from 'ziggy-js'
+import Antd from 'ant-design-vue'
+
+import './iconify'
+
+createInertiaApp({
+    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
+    setup({ el, App, props, plugin }) {
+        createApp({ render: () => h(App, props) })
+            .use(plugin)
+            .use(ZiggyVue)
+            .use(Antd)
+            .mount(el)
+    },
+})

resources/js/admin/iconify.js

@@ -0,0 +1,15 @@
+import { addCollection } from '@iconify/vue'
+
+addCollection({
+    prefix: 'custom',
+    icons: {
+        home: {
+            body: '<path d="M946.5 505L534.6 93.4a31.93 31.93 0 0 0-45.2 0L77.5 505c-12 12-18.8 28.3-18.8 45.3c0 35.3 28.7 64 64 64h43.4V908c0 17.7 14.3 32 32 32H448V716h112v224h265.9c17.7 0 32-14.3 32-32V614.3h43.4c17 0 33.3-6.7 45.3-18.8c24.9-25 24.9-65.5-.1-90.5" fill="currentColor" />',
+        },
+        gear: {
+            body: '<path d="M902.015 422.023h-72.728c-7.304-25.656-17.469-50.045-30.434-72.729l52.457-52.43c23.567-23.54 23.567-61.744 0-85.283l-42.678-42.656c-23.512-23.561-61.744-23.561-85.252 0l-53.397 53.365c-21.311-11.672-44.163-20.79-68.004-27.575v-72.703c0-33.152-26.807-60.011-59.985-60.011h-60.012c-33.124 0-59.985 26.86-59.985 60.011v72.703c-24.75 7.056-48.338 16.7-70.371 28.976l-54.765-54.77c-23.54-23.561-61.745-23.561-85.283 0l-42.656 42.656c-23.561 23.539-23.561 61.744 0 85.283l54.77 54.792c-12.281 22.028-21.946 45.594-28.953 70.366h-72.752c-33.126 0.005-59.985 26.865-59.985 59.989v59.985c0 33.179 26.86 60.043 59.985 60.043h72.756c6.758 23.836 15.876 46.687 27.522 67.999l-53.344 53.344c-23.561 23.561-23.561 61.744 0 85.307l42.656 42.628c23.539 23.567 61.744 23.567 85.283 0l52.43-52.403c22.717 12.906 47.047 23.071 72.702 30.322v72.782c0 33.125 26.86 59.985 59.985 59.985h60.012c33.179 0 59.985-26.86 59.985-59.985v-72.782c24.772-6.981 48.338-16.646 70.419-28.899l50.977 50.977c23.512 23.566 61.744 23.566 85.253 0l42.678-42.63c23.566-23.561 23.566-61.744 0-85.307l-51.029-51.029c12.302-22.032 21.973-45.598 29.002-70.313h72.728c33.124 0 59.985-26.866 59.985-60.043v-59.985c0.013-33.12-26.847-59.98-59.972-59.98zM512 692.008c-99.427 0-180.008-80.582-180.008-180.008 0-99.373 80.586-180.008 180.008-180.008s179.955 80.64 179.955 180.008c0 99.427-80.528 180.008-179.955 180.008z" fill="currentColor" />',
+        },
+    },
+    width: 1024,
+    height: 1024,
+})

resources/views/admin/app.blade.php

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>Laravel</title>
+
+        @routes
+
+        @vite('resources/js/admin/app.js')
+
+        @inertiaHead
+    </head>
+    <body>
+        @inertia
+    </body>
+</html>

routes/admin.php

@@ -0,0 +1,10 @@
+<?php
+
+use App\Admin\Http\Controllers\HomeController;
+use Illuminate\Support\Facades\Route;
+
+Route::group([
+    'middleware' => [],
+], function () {
+    Route::get('/', [HomeController::class, 'index'])->name('home.index');
+});

vite.config.js

@@ -0,0 +1,34 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import laravel from 'laravel-vite-plugin'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+    plugins: [
+        laravel({
+            input: ['resources/js/admin/app.js'],
+            refresh: true,
+        }),
+        vue({
+            template: {
+                transformAssetUrls: {
+                    base: null,
+                    includeAbsolute: false,
+                },
+            },
+        }),
+    ],
+    resolve: {
+        alias: {
+            '@admin': '/resources/js/admin',
+            'ziggy-js': path.resolve('vendor/tightenco/ziggy'),
+        },
+    },
+    server: {
+        host: '0.0.0.0',
+        port: 5173,
+        hmr: {
+            host: 'localhost',
+        },
+    },
+})