**角色 (Role):** 你是一位精通 Vue 3、TypeScript 和 Vuetify 的资深前端架构师。你的任务是构建基础布局框架。

**背景 (Context):** 你必须严格遵守所提供的 `vue3-typescript-stye.md` 风格指南中的所有原则。最终目标是产出一个健壮、可维护、生产就绪的应用外壳，它将作为未来所有页面的实现蓝图。此布局必须是完全响应式、支持主题切换，并完全基于 Vue 3 组合式 API 和 Vuetify 3 组件构建。

**核心任务 (Core Task):**

在 `src/layouts/` 目录下，创建一个名为 `Default.vue` 的主应用布局组件。该组件需实现一个经典的三段式结构：一个持久化的导航抽屉、一个顶部应用栏和一个用于承载路由视图的主内容区。所有与布局 UI 相关的状态（例如，侧边栏的收缩状态、当前的主题）必须在一个专用的 Pinia store 中进行集中管理。

---

### **1. 状态管理：布局 Store (Pinia)**

在创建组件之前，首先定义状态管理模块。

* **文件位置:** `src/store/layout.ts`
* **Store 名称:** `useLayoutStore`
* **State:**
    * `isSidebarMini: Ref<boolean>`: 管理导航抽屉的收缩/展开状态，默认为 `false`。
    * `theme: Ref<'light' | 'dark'>`: 存储当前的主题名称，默认为 `'light'`。
* **Actions:**
    * `toggleSidebar()`: 用于翻转 `isSidebarMini`布尔值的 action。
    * `setTheme(newTheme: 'light' | 'dark')`: 用于更新 `theme` 状态的 action。

**约束:** 所有的 state 属性和函数签名都必须拥有精确的 TypeScript 类型。

### **2. 组件拆解: `Default.vue`**

#### **a. Script 部分 (`<script setup lang="ts">`)**

* **导入:**
    * 从 Vue 和 Vue Router 中导入必要的模块 (`ref`, `watch`, `useRoute`)。
    * 从 `@/store/layout.ts` 中导入 `useLayoutStore`。
    * 从 Vuetify 中导入 `useTheme` 和 `useDisplay` 组合式函数。
* **Store 实例化:**
    * 实例化布局 store: `const layoutStore = useLayoutStore();`
    * 实例化 Vuetify theme 组合式函数: `const theme = useTheme();`
    * 实例化 Vuetify display 组合式函数: `const display = useDisplay();`
* **响应式逻辑:**
    * 为导航抽屉的可见性创建一个本地 `ref`，`const drawer = ref(true);`。
    * 使用 `watch` 监听 `useDisplay` 返回的 `display.mobile`。如果视口变为移动端 (`display.mobile.value` 为 `true`)，则默认将导航抽屉设置为临时隐藏 (`drawer.value = false`)。
    * 实现一个 `toggleTheme()` 函数，该函数调用 Pinia store 中的 `setTheme` action，并通过 `theme.global.name.value = layoutStore.theme;` 来更新 Vuetify 的主题。此函数将绑定到一个 UI 控件上。

#### **b. 模板部分 (`<template>`)**

* **根元素:** 使用 `<v-layout>` 组件作为最外层包裹容器。
* **导航抽屉 (`<v-navigation-drawer>`):**
    * 将其可见性与 `drawer` ref 进行双向绑定 (`v-model="drawer"`)。
    * 将其“图标模式”状态与 Pinia store 中的 `isSidebarMini` 进行绑定 (`:rail="layoutStore.isSidebarMini"`)。
    * 实现一个占位用的 `<v-list>`，包含数个 `<v-list-item>` 用于导航。确保其中一个项目拥有 `active` 属性，以展示单页应用中高亮当前路由的样式。
    * 在抽屉底部，添加一个 `<template v-slot:append>` 区块。在其中放置一个 `<v-btn>` 用于切换主题。该按钮的图标应根据当前主题变化（例如，暗色主题下为 'mdi-weather-sunny'，明亮主题下为 'mdi-weather-night'）。将其 `@click` 事件绑定到 `toggleTheme()` 方法。
* **应用栏 (`<v-app-bar>`):**
    * 包含一个 `<v-app-bar-nav-icon>` 按钮，用于切换 `drawer` ref 的值 (`@click="drawer = !drawer"`)。
    * 包含一个 `<v-toolbar-title>`，用于动态显示当前页面的标题占位符。
    * 在最右侧添加一个按钮，其图标为 `mdi-dots-vertical`。
* **主内容区 (`<v-main>`):**
    * 主内容区必须是流式的，能自适应剩余空间。
    * 在 `<v-main>` 内部，渲染 `<router-view />` 组件，使得该布局能够根据当前路由托管不同的页面组件。
    * **页面 Header:** 在 `<v-main>` 内部，但在 `<router-view>` 之前，添加一个容器（例如，一个带有特定 class 的 `div`）作为页面 Header。在此处显示当前路由的名称作为占位符（例如，使用 `useRoute().name`）。

### **3. 样式与主题**

* **禁止硬编码样式:** 绝不使用任何硬编码的颜色值 (例如 `#FFF`, `rgb(0,0,0)`)。
* **Vuetify 主题变量:** 所有的自定义样式（如有）必须使用 Vuetify 的主题系统。例如，使用 CSS 变量 `background-color: rgb(var(--v-theme-surface));` 或 SASS 函数 `color: v-theme(on-surface);`。
* **主题响应:** 整个布局，包括所有文本、图标和表面，都必须在明亮和暗色主题之间无缝切换，不能有任何视觉瑕疵。

### **4. 响应式设计**

* **移动端:** 在移动端视口（由 `useDisplay` 判断），导航抽屉应默认关闭，并以临时/模态模式运行。`<v-app-bar-nav-icon>` 成为打开它的主要方式。
* **平板/桌面端:** 在更大的屏幕上，导航抽屉应默认可见。用于切换其 `rail` 状态（完整模式与图标模式）的按钮应位于 `<v-app-bar>` 中。为此，在 `<v-app-bar-nav-icon>` 之后添加一个 `<v-btn icon="mdi-menu" @click.stop="layoutStore.toggleSidebar()"></v-btn>`。