Init frontend: Vue 3 + Vite member.ose.tw

建立完整前端架構：
- 配置 Vite + Vue 3 + Element Plus + Tailwind
- 實作 API 模層（axios interceptor + Bearer/Key 認證）
- 狀態管理：auth store（用戶登入狀態）、permission store（權限快照 & Admin 認證）
- 路由守衛：/me* 需 Bearer token，/admin* 不強制
- 完成三個頁面：登入、我的資料、我的權限快照、權限 grant/revoke 管理
- 全面錯誤處理與 UI 提示（401/403/404/503 對應訊息）

Checklist 完成度：
✓ A.初始化（http.js、auth/permission store、.env）
✓ B.API 對接（/me、/me/permissions/snapshot、grant、revoke）
✓ C.頁面三組件
✓ D.行為驗證（Token 過期、自動刷新、錯誤提示）
✓ E.交付條件（獨立刷新、錯誤 UI、loading/success 狀態）

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/pages/permissions/PermissionSnapshotPage.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div class="flex items-center justify-between mb-6">
+      <h2 class="text-xl font-bold text-gray-800">我的權限快照</h2>
+      <el-button :loading="loading" @click="load" :icon="Refresh" size="small">重新整理</el-button>
+    </div>
+
+    <el-alert
+      v-if="error"
+      :title="errorMessage"
+      type="error"
+      show-icon
+      :closable="false"
+      class="mb-4"
+    />
+
+    <el-skeleton v-if="loading && !snapshot" :rows="4" animated />
+
+    <template v-if="snapshot">
+      <p class="text-sm text-gray-500 mb-3">
+        Sub：<span class="font-mono">{{ snapshot.authentik_sub }}</span>
+      </p>
+
+      <el-empty
+        v-if="snapshot.permissions.length === 0"
+        description="目前沒有任何權限"
+      />
+
+      <el-table
+        v-else
+        :data="snapshot.permissions"
+        stripe
+        border
+        class="w-full shadow-sm"
+      >
+        <el-table-column prop="scope_type" label="Scope 類型" width="130" />
+        <el-table-column prop="scope_id" label="Scope ID" min-width="160" />
+        <el-table-column prop="module" label="模組" width="140" />
+        <el-table-column prop="action" label="操作" width="100" />
+      </el-table>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { Refresh } from '@element-plus/icons-vue'
+import { usePermissionStore } from '@/stores/permission'
+
+const permissionStore = usePermissionStore()
+
+const snapshot = ref(null)
+const loading = ref(false)
+const error = ref(null)
+const errorMessage = ref('')
+
+async function load() {
+  loading.value = true
+  error.value = null
+  try {
+    await permissionStore.fetchMySnapshot()
+    snapshot.value = permissionStore.snapshot
+  } catch (err) {
+    error.value = err
+    const status = err.response?.status
+    const detail = err.response?.data?.detail
+    if (status === 401) {
+      errorMessage.value = 'Token 已過期，請重新登入'
+    } else if (detail) {
+      errorMessage.value = `錯誤：${detail}`
+    } else {
+      errorMessage.value = '載入失敗，請稍後再試'
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+</script>