/**
 * 应用入口 — 最小化启动引导
 *
 * 启动流程：
 * 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)
  }
})