create-librex 1.0.1

package/template/src/main.ts

@@ -0,0 +1,60 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { computed } from 'vue'
+import router, { allConfigs, setAuthGuard } from './router'
+import App from './App.vue'
+import 'librex/styles/breathing.css'
+import { Librex, useConfig } from 'librex'
+import { flushPendingBricks } from 'librex'
+import { useUserStore } from './stores/user'
+import { useAsyncRouteStore } from './stores/asyncRoute'
+
+async function bootstrap() {
+  const app = createApp(App)
+  const pinia = createPinia()
+  app.use(pinia)
+
+  // Librex framework
+  app.use(Librex, {
+    provideUser: () => {
+      const userStore = useUserStore()
+      return {
+        displayName: computed(() => userStore.currentUser?.name || 'Not logged in'),
+        roleLabel: computed(() => userStore.roleLabel),
+        avatarUrl: computed(() => userStore.currentUser?.avatar || null),
+        logout: () => userStore.logout(),
+        changePassword: (_old: string, _new: string) => userStore.changePassword(_old, _new),
+      }
+    },
+    provideRoute: () => {
+      const asyncRouteStore = useAsyncRouteStore()
+      return { accessibleConfigs: computed(() => asyncRouteStore.accessibleConfigs) }
+    },
+  })
+
+  app.use(router)
+
+  // Register page configs
+  const configStore = useConfig()
+  flushPendingBricks()
+  for (const config of allConfigs) {
+    configStore.registerPageConfig(config)
+  }
+
+  // Auth guard
+  const userStore = useUserStore()
+  const asyncRouteStore = useAsyncRouteStore()
+  setAuthGuard({
+    isAuthenticated: () => userStore.isAuthenticated,
+    canAccess: (pageId: string) => asyncRouteStore.canAccess(pageId),
+  })
+
+  app.config.errorHandler = (err, _vm, info) => {
+    console.error('[LibreX Error]', err, info)
+  }
+
+  app.mount('#app')
+  userStore.tryRestoreSession()
+}
+
+bootstrap()

package/template/src/pages/auth/LoginPage.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="login-page">
+    <div class="login-card">
+      <h1 class="login-title">LibreX</h1>
+      <p class="login-desc">积木式后台管理系统</p>
+      <form class="login-form" @submit.prevent="handleLogin">
+        <div class="field">
+          <input v-model="form.username" type="text" placeholder="用户名" autocomplete="username" />
+        </div>
+        <div class="field">
+          <input v-model="form.password" type="password" placeholder="密码" autocomplete="current-password" />
+        </div>
+        <Transition name="fade">
+          <div v-if="error" class="login-error">{{ error }}</div>
+        </Transition>
+        <button type="submit" :disabled="loading">
+          {{ loading ? '登录中...' : '登录' }}
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+
+const router = useRouter()
+const route = useRoute()
+const userStore = useUserStore()
+
+const form = reactive({ username: '', password: '' })
+const loading = ref(false)
+const error = ref('')
+
+onMounted(() => {
+  if (userStore.isAuthenticated) {
+    router.replace((route.query.redirect as string) || '/')
+  }
+})
+
+async function handleLogin() {
+  error.value = ''
+  if (!form.username || !form.password) { error.value = '请输入用户名和密码'; return }
+  loading.value = true
+  try {
+    const ok = await userStore.login({ username: form.username, password: form.password })
+    if (ok) router.replace((route.query.redirect as string) || '/')
+    else error.value = '用户名或密码错误'
+  } catch { error.value = '登录失败' }
+  finally { loading.value = false }
+}
+</script>
+
+<style scoped>
+.login-page {
+  display: flex; align-items: center; justify-content: center;
+  width: 100vw; height: 100vh;
+  background: var(--color-bg-viewport);
+}
+.login-card {
+  width: 360px; padding: 40px;
+  background: var(--color-bg-surface); border-radius: 16px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
+}
+.login-title { margin: 0 0 4px; font-size: 28px; font-weight: 700; text-align: center; }
+.login-desc { margin: 0 0 32px; font-size: 14px; color: var(--color-text-tertiary); text-align: center; }
+.login-form { display: flex; flex-direction: column; gap: 16px; }
+.field input {
+  width: 100%; padding: 12px 14px;
+  border: 1px solid var(--color-border); border-radius: 8px;
+  background: var(--color-bg-input); color: var(--color-text-primary);
+  font-size: 14px; outline: none;
+  box-sizing: border-box;
+}
+.field input:focus { border-color: var(--color-accent); }
+.login-error {
+  padding: 10px 14px; border-radius: 8px;
+  background: color-mix(in srgb, var(--color-accent-danger, #e53e3e) 10%, transparent);
+  color: var(--color-accent-danger, #e53e3e); font-size: 13px; text-align: center;
+}
+button[type="submit"] {
+  padding: 12px; border: none; border-radius: 8px;
+  background: var(--color-accent); color: #fff;
+  font-size: 15px; font-weight: 600; cursor: pointer;
+}
+button[type="submit"]:hover { opacity: 0.9; }
+button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }
+.fade-enter-active, .fade-leave-active { transition: all .2s ease; }
+.fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(-4px); }
+</style>

package/template/src/pages/notFound/NotFound.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="not-found-page">
+    <div class="not-found-content">
+      <div class="not-found-code">404</div>
+      <h1>页面未找到</h1>
+      <p>你访问的页面不存在或已被移除</p>
+      <button class="nf-btn" @click="$router.push('/')">返回首页</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.not-found-page {
+  display: flex; align-items: center; justify-content: center;
+  min-height: calc(100vh - 44px); padding: 40px;
+}
+.not-found-content { text-align: center; }
+.not-found-code {
+  font-size: 96px; font-weight: 800; line-height: 1;
+  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-purple) 100%);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+}
+h1 { margin: 12px 0 8px; font-size: 24px; }
+p { margin: 0 0 24px; color: var(--color-text-tertiary); }
+.nf-btn {
+  padding: 10px 24px; border-radius: 10px; border: 1px solid var(--color-border);
+  background: var(--color-bg-surface); font-size: 14px; cursor: pointer;
+}
+</style>

package/template/src/router/index.ts

@@ -0,0 +1,64 @@
+/**
+ * Librex Router — 编译期路由自动发现 + 权限守卫
+ */
+
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+import type { PageConfig } from 'librex'
+import NotFound from '@/pages/notFound/NotFound.vue'
+import LoginPage from '@/pages/auth/LoginPage.vue'
+import { brickRoutes } from 'virtual:librex-routes'
+
+const allConfigs: PageConfig[] = brickRoutes
+  .map(r => r.meta?.pageConfig as PageConfig | undefined)
+  .filter(Boolean) as PageConfig[]
+
+const routes: RouteRecordRaw[] = [
+  { path: '/', redirect: '/' },
+  { path: '/login', name: 'login', component: LoginPage },
+  ...brickRoutes,
+  { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
+]
+
+const router = createRouter({ history: createWebHistory(), routes })
+
+let _canAccess: ((pageId: string) => boolean) | null = null
+let _isAuthenticated: (() => boolean) | null = null
+
+export function setAuthGuard(guards: {
+  isAuthenticated: () => boolean
+  canAccess: (pageId: string) => boolean
+}): void {
+  _isAuthenticated = guards.isAuthenticated
+  _canAccess = guards.canAccess
+}
+
+const PUBLIC_PATHS = new Set(['/login'])
+
+router.beforeEach((to, _from) => {
+  if (PUBLIC_PATHS.has(to.path) || to.name === 'not-found' || to.name === 'login') {
+    return true
+  }
+  if (!_isAuthenticated || !_canAccess) {
+    console.error('[Router Guard] 守卫未初始化')
+    return { path: '/login' }
+  }
+  if (!_isAuthenticated()) {
+    return { path: '/login', query: { redirect: to.fullPath } }
+  }
+  const pageConfig = to.meta?.pageConfig as PageConfig | undefined
+  if (!pageConfig) return { name: 'not-found' }
+  if (!_canAccess(pageConfig.id)) return { name: 'not-found' }
+  return true
+})
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    title?: string
+    icon?: string
+    pageConfig?: PageConfig
+    pageDir?: string
+  }
+}
+
+export default router
+export { allConfigs }

package/template/src/stores/asyncRoute.ts

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+import { computed } from 'vue'
+import { useConfig } from 'librex'
+import { useUserStore } from './user'
+import type { PageConfig } from 'librex'
+
+export const useAsyncRouteStore = defineStore('async-route', () => {
+  const configStore = useConfig()
+  const userStore = useUserStore()
+
+  const accessibleConfigs = computed<PageConfig[]>(() => {
+    const all = Array.from(configStore.allPageConfigs.values())
+    return all.filter((cfg) => {
+      if (!cfg.meta?.permissions || cfg.meta.permissions.length === 0) return true
+      return cfg.meta.permissions.some(p => userStore.roleLabel === p)
+    })
+  })
+
+  function canAccess(pageId: string): boolean {
+    return accessibleConfigs.value.some(c => c.id === pageId)
+  }
+
+  return { accessibleConfigs, canAccess }
+})

package/template/src/stores/user.ts

@@ -0,0 +1,100 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export interface UserInfo {
+  id: number
+  name: string
+  avatar?: string
+  role: 'admin' | 'editor' | 'viewer'
+}
+
+const TOKEN_KEY = 'librex-token'
+const USER_KEY = 'librex-user'
+
+export const useUserStore = defineStore('user', () => {
+  const token = ref<string | null>(localStorage.getItem(TOKEN_KEY))
+  const currentUser = ref<UserInfo | null>(loadUser())
+  const loading = ref(false)
+
+  const isAuthenticated = computed(() => !!token.value && !!currentUser.value)
+  const roleLabel = computed(() => currentUser.value?.role ?? '')
+
+  async function login(credentials: { username: string; password: string }): Promise<boolean> {
+    loading.value = true
+    try {
+      // TODO: 替换为实际登录 API
+      const res = await fetch('/api/admin/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ account: credentials.username, password: credentials.password }),
+      })
+      const data = await res.json()
+      if (data.code !== 1 || !data.data) return false
+
+      token.value = data.data.token || data.data.session_id
+      localStorage.setItem(TOKEN_KEY, token.value || '')
+
+      // 获取用户信息
+      const user = await fetchUserInfo()
+      if (user) {
+        currentUser.value = user
+        localStorage.setItem(USER_KEY, JSON.stringify(user))
+      }
+      return true
+    } catch {
+      return false
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function fetchUserInfo(): Promise<UserInfo | null> {
+    try {
+      const res = await fetch('/api/admin/info')
+      const data = await res.json()
+      if (data.code !== 1 || !data.data) return null
+      return {
+        id: data.data.id,
+        name: data.data.name,
+        role: data.data.type === 1 ? 'admin' : 'editor',
+      }
+    } catch {
+      return null
+    }
+  }
+
+  function logout() {
+    token.value = null
+    currentUser.value = null
+    localStorage.removeItem(TOKEN_KEY)
+    localStorage.removeItem(USER_KEY)
+    import('@/router').then(m => m.default.replace('/login'))
+  }
+
+  async function changePassword(_oldPass: string, _newPass: string): Promise<{ ok: boolean; message: string }> {
+    return { ok: false, message: '请实现修改密码 API' }
+  }
+
+  async function tryRestoreSession(): Promise<boolean> {
+    const savedToken = localStorage.getItem(TOKEN_KEY)
+    if (!savedToken) return false
+    token.value = savedToken
+    const user = await fetchUserInfo()
+    if (user) {
+      currentUser.value = user
+      return true
+    }
+    const saved = loadUser()
+    if (saved) { currentUser.value = saved; return true }
+    return false
+  }
+
+  return { token, currentUser, loading, isAuthenticated, roleLabel, login, logout, changePassword, tryRestoreSession }
+})
+
+function loadUser(): UserInfo | null {
+  try {
+    const raw = localStorage.getItem(USER_KEY)
+    return raw ? JSON.parse(raw) : null
+  } catch { return null }
+}

package/template/src/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<object, object, unknown>
+  export default component
+}
+
+declare module '*.less' {
+  const content: Record<string, string>
+  export default content
+}

package/template/tsconfig.app.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "env.d.ts"]
+}

package/template/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "env.d.ts"],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/template/tsconfig.node.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["vite.config.ts", "vite-plugin-librex.ts"]
+}