feat: 第一阶段基础框架搭建

后端 (Laravel 10 + Sanctum): - RBAC 四层权限系统 (users→roles→permissions→menus) - 门店隔离中间件 (BelongsToStore Trait + StoreIsolation Middleware) - 操作日志中间件 (自动记录写操作) - 权限检查中间件 (CheckPermission) - 16张数据库表迁移 (系统基础+RBAC+字典+配置) - 11个 Eloquent Model - Auth API (登录/登出/用户信息) - 系统设置模块 CRUD (门店/部门/职务/用户/角色/菜单/权限/字典/日志) - 45条 RESTful API 路由 - InitSeeder 初始数据 (超管/角色/76权限/31菜单) 前端 (Vue 3 + Element Plus + Vite): - Axios 请求封装 + Token 注入 - Pinia 状态管理 (user + permission store) - 动态路由 (服务端菜单→前端路由自动生成) - 后台布局 (侧边栏+顶栏+主内容区) - 登录页 + 仪表盘首页 - 系统设置 7 个 CRUD 页面技术方案文档 (7卷): - 技术总览/数据库设计/API规范/RBAC设计/模块详设/小程序设计/部署方案
2026-03-13 19:52:09 +08:00
commit 11c177a432
144 changed files with 25209 additions and 0 deletions
@@ -0,0 +1,198 @@
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useUserStore } from '@/stores/user.js'
+
+const props = defineProps({
+  collapsed: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const route = useRoute()
+const userStore = useUserStore()
+
+const activeMenu = computed(() => route.path)
+
+const menus = computed(() => userStore.menus)
+
+function resolveIcon(iconName) {
+  return iconName || 'Menu'
+}
+</script>
+
+<template>
+  <div class="sidebar-wrapper" :class="{ collapsed }">
+    <!-- Logo -->
+    <div class="sidebar-logo">
+      <el-icon :size="28" color="#E8A87C"><House /></el-icon>
+      <span v-if="!collapsed" class="logo-text">宫中有喜</span>
+    </div>
+
+    <!-- Menu -->
+    <el-scrollbar class="sidebar-scrollbar">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="collapsed"
+        :collapse-transition="false"
+        router
+        class="sidebar-menu"
+        background-color="#2D1B0E"
+        text-color="#C8B09A"
+        active-text-color="#E8A87C"
+      >
+        <!-- Always show Dashboard first -->
+        <el-menu-item index="/dashboard">
+          <el-icon><Odometer /></el-icon>
+          <template #title>工作台</template>
+        </el-menu-item>
+
+        <!-- Dynamic menu items from server -->
+        <template v-for="menu in menus" :key="menu.id || menu.path">
+          <!-- Has children → sub-menu -->
+          <el-sub-menu
+            v-if="menu.children && menu.children.length > 0 && menu.visible !== 0"
+            :index="menu.path"
+          >
+            <template #title>
+              <el-icon>
+                <component :is="resolveIcon(menu.icon)" />
+              </el-icon>
+              <span>{{ menu.title }}</span>
+            </template>
+            <template v-for="child in menu.children" :key="child.id || child.path">
+              <el-sub-menu
+                v-if="child.children && child.children.length > 0 && child.visible !== 0"
+                :index="child.path"
+              >
+                <template #title>
+                  <el-icon>
+                    <component :is="resolveIcon(child.icon)" />
+                  </el-icon>
+                  <span>{{ child.title }}</span>
+                </template>
+                <el-menu-item
+                  v-for="grandchild in child.children"
+                  :key="grandchild.id || grandchild.path"
+                  :index="grandchild.path"
+                >
+                  <el-icon>
+                    <component :is="resolveIcon(grandchild.icon)" />
+                  </el-icon>
+                  <template #title>{{ grandchild.title }}</template>
+                </el-menu-item>
+              </el-sub-menu>
+
+              <el-menu-item
+                v-else-if="child.visible !== 0"
+                :index="child.path"
+              >
+                <el-icon>
+                  <component :is="resolveIcon(child.icon)" />
+                </el-icon>
+                <template #title>{{ child.title }}</template>
+              </el-menu-item>
+            </template>
+          </el-sub-menu>
+
+          <!-- No children → single item -->
+          <el-menu-item
+            v-else-if="menu.visible !== 0"
+            :index="menu.path"
+          >
+            <el-icon>
+              <component :is="resolveIcon(menu.icon)" />
+            </el-icon>
+            <template #title>{{ menu.title }}</template>
+          </el-menu-item>
+        </template>
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.sidebar-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: var(--sidebar-width);
+  height: 100%;
+  background-color: #2D1B0E;
+  transition: width 0.25s ease;
+  overflow: hidden;
+
+  &.collapsed {
+    width: var(--sidebar-collapsed-width);
+  }
+}
+
+.sidebar-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  height: var(--header-height);
+  padding: 0 16px;
+  background-color: #1E1108;
+  flex-shrink: 0;
+  overflow: hidden;
+  white-space: nowrap;
+
+  .logo-text {
+    font-size: 18px;
+    font-weight: 700;
+    color: #E8A87C;
+    letter-spacing: 2px;
+  }
+}
+
+.sidebar-scrollbar {
+  flex: 1;
+}
+
+.sidebar-menu {
+  border-right: none;
+  height: 100%;
+
+  :deep(.el-menu-item),
+  :deep(.el-sub-menu__title) {
+    height: 48px;
+    line-height: 48px;
+    font-size: 14px;
+
+    &:hover {
+      background-color: #4A2E1A !important;
+      color: #E8A87C !important;
+    }
+  }
+
+  :deep(.el-menu-item.is-active) {
+    background-color: #4A2E1A !important;
+    color: #E8A87C !important;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 3px;
+      background: #E8A87C;
+      border-radius: 0 2px 2px 0;
+    }
+  }
+
+  :deep(.el-sub-menu .el-menu) {
+    background-color: #241509 !important;
+  }
+
+  :deep(.el-menu--collapse) {
+    .el-sub-menu__title span,
+    .el-menu-item span {
+      display: none;
+    }
+  }
+}
+</style>