初始化

mokee-gateway-web/src/main.ts

@@ -0,0 +1,43 @@
+/**
+ * 应用入口 — 最小化启动引导
+ *
+ * 启动流程：
+ * 1. 创建 Vue 应用实例
+ * 2. 注册 Pinia 状态管理（在 Router 之前，因为路由守卫可能用到 store）
+ * 3. 注册 Vue Router（路由守卫在此处理登录态和权限）
+ * 4. 注册 v-permission 自定义指令（用于按钮级权限控制）
+ * 5. 挂载到 #app
+ *
+ * 注意：不在此处加载 Element Plus 全局样式 — 由 vite.config.ts 中的 unplugin-vue-components 按需导入
+ */
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+// 全局 CSS 变量和基础样式
+import './styles/global.css'
+// 显式引入命令式组件 CSS（ElMessage/ElMessageBox/ElNotification 通过 JS 调用时
+// unplugin-vue-components 无法检测，需手动导入，否则弹窗无样式显示在页面底部）
+import 'element-plus/theme-chalk/el-message.css'
+import 'element-plus/theme-chalk/el-message-box.css'
+import 'element-plus/theme-chalk/el-notification.css'
+// v-permission 自定义指令 — 根据用户权限控制元素显隐
+import { permission } from './directives/permission'
+
+const app = createApp(App)
+
+// Pinia 必须先于 Router 注册，因为路由守卫可能访问 user/permission store
+app.use(createPinia())
+app.use(router)
+// 注册 v-permission 指令：<el-button v-permission="'system:user:add'">新增</el-button>
+app.directive('permission', permission)
+app.mount('#app')
+
+// 手机端分页切换后自动滚回顶部（避免看到上一页的底部位置）
+document.addEventListener('click', (e) => {
+  const el = e.target as HTMLElement
+  if (el.closest('.el-pager') || el.closest('.el-pagination__next') || el.closest('.el-pagination__prev')) {
+    setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 250)
+  }
+})
+