docs: 交付文档、维护指引与端到端回归

补齐 README、开发计划、维护交接与 E2E 用例，执行最终验收。

frontend/src/__tests__/views/403.spec.ts

@@ -0,0 +1,108 @@
+/*
+Copyright 2024-2026 ChatterMate
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount, VueWrapper, flushPromises } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
+import { createPinia, setActivePinia } from 'pinia'
+import ForbiddenView from '../../views/403.vue'
+
+// Mock the DashboardLayout component
+vi.mock('@/layouts/DashboardLayout.vue', () => ({
+  default: {
+    name: 'DashboardLayout',
+    template: '<div class="dashboard-layout"><slot /></div>'
+  }
+}))
+
+describe('403 View', () => {
+  let wrapper: VueWrapper
+  let router: any
+
+  beforeEach(async () => {
+    // Create a fresh pinia instance
+    setActivePinia(createPinia())
+
+    // Create router instance
+    router = createRouter({
+      history: createWebHistory(),
+      routes: [
+        { path: '/', name: 'home', component: { template: '<div>Home</div>' } },
+        { path: '/403', name: 'forbidden', component: ForbiddenView }
+      ]
+    })
+
+    // Initialize router
+    await router.push('/403')
+    await router.isReady()
+
+    // Mount component with proper stubs and mocks
+    wrapper = mount(ForbiddenView, {
+      global: {
+        plugins: [router],
+        stubs: {
+          RouterLink: {
+            template: '<a :href="to" class="router-link"><slot /></a>',
+            props: ['to']
+          },
+          DashboardLayout: {
+            template: '<div class="dashboard-layout"><slot /></div>'
+          }
+        }
+      }
+    })
+  })
+
+  it('renders properly', () => {
+    expect(wrapper.find('.unauthorized').exists()).toBe(true)
+    expect(wrapper.find('h1').text()).toBe('Access Denied')
+    expect(wrapper.find('p').text()).toBe('You don\'t have permission to access this page.')
+  })
+
+  it('is wrapped in DashboardLayout', () => {
+    const dashboardLayout = wrapper.find('.dashboard-layout')
+    expect(dashboardLayout.exists()).toBe(true)
+  })
+
+  // Not '/': that redirects to the landing route, which for someone who was
+  // just denied is frequently another denial. With no permissions the floor is
+  // /settings/user, which requires none.
+  it('links somewhere the denied user can actually open', () => {
+    const backLink = wrapper.find('.back-link')
+    expect(backLink.exists()).toBe(true)
+    expect(backLink.attributes('href')).toBe('/settings/user')
+    expect(backLink.attributes('href')).not.toBe('/')
+  })
+
+  it('applies correct styling', () => {
+    const container = wrapper.find('.unauthorized')
+    expect(container.classes()).toContain('unauthorized')
+    
+    const backLink = wrapper.find('.back-link')
+    expect(backLink.classes()).toContain('back-link')
+  })
+
+  it('navigates to home when clicking the back link', async () => {
+    const backLink = wrapper.find('.back-link')
+    await backLink.trigger('click')
+    
+    // Simulate router navigation
+    await router.push('/')
+    await flushPromises()
+    
+    expect(router.currentRoute.value.path).toBe('/')
+  })
+})