feat(web): router with auth guard, AppShell, login + home views

web/src/App.vue

@@ -1,9 +1,15 @@
 <template>
-  <div class="min-h-screen flex items-center justify-center">
+  <NConfigProvider :theme="ui.effectiveDark ? darkTheme : null">
-    <p class="text-lg">Agent Coding Workflow — scaffolding ready.</p>
+    <NMessageProvider>
-  </div>
+      <NDialogProvider>
+        <RouterView />
+      </NDialogProvider>
+    </NMessageProvider>
+  </NConfigProvider>
 </template>
 
 <script setup lang="ts">
-// 占位组件：I5 接入 router 后改写为 RouterView + NConfigProvider。
+import { NConfigProvider, NMessageProvider, NDialogProvider, darkTheme } from 'naive-ui'
+import { useUIStore } from '@/stores/ui'
+const ui = useUIStore()
 </script>

web/src/components/layout/NavBar.vue

@@ -0,0 +1,36 @@
+<template>
+  <header class="border-b border-gray-200 dark:border-gray-700 px-4 py-2 flex items-center gap-4">
+    <h1 class="text-lg font-semibold flex-1">Agent Coding Workflow</h1>
+    <NotificationBell v-if="auth.isAuthenticated" />
+    <NDropdown v-if="auth.user" :options="menu" @select="onSelect">
+      <NButton text>{{ auth.user.display_name }}</NButton>
+    </NDropdown>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NButton, NDropdown } from 'naive-ui'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { authApi } from '@/api/auth'
+import NotificationBell from './NotificationBell.vue'
+
+const auth = useAuthStore()
+const router = useRouter()
+
+const menu = computed(() => [
+  { label: '退出登录', key: 'logout' },
+])
+
+async function onSelect(key: string) {
+  if (key === 'logout') {
+    try {
+      await authApi.logout()
+    } finally {
+      auth.clearSession()
+      router.replace({ name: 'login' })
+    }
+  }
+}
+</script>

web/src/components/layout/NotificationBell.vue

@@ -0,0 +1,7 @@
+<template>
+  <span class="text-sm text-gray-400">🔔</span>
+</template>
+
+<script setup lang="ts">
+// I6 占位：真实未读轮询 + 弹层在 I6 实现。
+</script>

web/src/layouts/AppShell.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="min-h-screen flex flex-col">
+    <NavBar />
+    <main class="flex-1 p-6">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import NavBar from '@/components/layout/NavBar.vue'
+</script>

web/src/main.ts

@@ -2,10 +2,13 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
 import App from './App.vue'
+import router, { bindAuthToApi } from './router'
 
 import './styles/tailwind.css'
 import './styles/tokens.css'
 
 const app = createApp(App)
 app.use(createPinia())
+app.use(router)
+bindAuthToApi()
 app.mount('#app')

web/src/router/index.ts

@@ -0,0 +1,48 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { configure } from '@/api/client'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('@/views/auth/LoginView.vue'),
+    meta: { layout: 'none' },
+  },
+  {
+    path: '/',
+    name: 'home',
+    component: () => import('@/views/HomeView.vue'),
+    meta: { layout: 'app', requiresAuth: true },
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+router.beforeEach((to) => {
+  const auth = useAuthStore()
+  if (to.meta.requiresAuth && !auth.isAuthenticated) {
+    return { name: 'login', query: { next: to.fullPath } }
+  }
+  if (to.name === 'login' && auth.isAuthenticated) {
+    return { name: 'home' }
+  }
+  return true
+})
+
+export default router
+
+// 把 auth store 注入 api client（在 router 模块顶层晚于 pinia 安装可能未就绪，所以用懒访问）
+export function bindAuthToApi() {
+  const auth = useAuthStore()
+  configure({
+    tokenProvider: () => auth.token,
+    onUnauthorized: () => {
+      auth.clearSession()
+      router.replace({ name: 'login' })
+    },
+  })
+}

web/src/views/HomeView.vue

@@ -0,0 +1,14 @@
+<template>
+  <AppShell>
+    <div class="space-y-4">
+      <h2 class="text-xl font-semibold">欢迎，{{ auth.user?.display_name }}</h2>
+      <p>这是占位 dashboard。后续 plan 会接入项目/工作区/Issue。</p>
+    </div>
+  </AppShell>
+</template>
+
+<script setup lang="ts">
+import AppShell from '@/layouts/AppShell.vue'
+import { useAuthStore } from '@/stores/auth'
+const auth = useAuthStore()
+</script>

web/src/views/auth/LoginView.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="min-h-screen flex items-center justify-center p-4">
+    <div class="w-full max-w-sm space-y-4">
+      <h1 class="text-2xl font-semibold">登录</h1>
+      <NForm @submit.prevent="onSubmit">
+        <NFormItem label="邮箱">
+          <NInput v-model:value="email" placeholder="admin@local" />
+        </NFormItem>
+        <NFormItem label="密码">
+          <NInput v-model:value="password" type="password" show-password-on="click" />
+        </NFormItem>
+        <NButton type="primary" attr-type="submit" :loading="loading" block>
+          登录
+        </NButton>
+      </NForm>
+      <p v-if="error" class="text-red-500 text-sm">{{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NForm, NFormItem, NInput, NButton } from 'naive-ui'
+import { useRouter } from 'vue-router'
+import { authApi } from '@/api/auth'
+import { useAuthStore } from '@/stores/auth'
+import { ApiException } from '@/api/types'
+
+const email = ref('')
+const password = ref('')
+const loading = ref(false)
+const error = ref('')
+
+const auth = useAuthStore()
+const router = useRouter()
+
+async function onSubmit() {
+  loading.value = true
+  error.value = ''
+  try {
+    const out = await authApi.login(email.value, password.value)
+    auth.setSession(out.token, out.user)
+    const next = (router.currentRoute.value.query.next as string) || '/'
+    await router.replace(next)
+  } catch (e) {
+    error.value = e instanceof ApiException ? e.body.message : '登录失败'
+  } finally {
+    loading.value = false
+  }
+}
+</script>