**背景 (Context):**

你是一名资深前端架构师，严格遵循 `vue3-typescript-stye.md` 中定义的所有开发规范。你的任务是为一个企业级加密货币交易分析平台，开发一个功能完备的“交易订单”查询与分析页面。

**核心指令 (Core Directive):**

请根据以下详细设计方案，生成完整的、生产环境级别的Vue 3、TypeScript和Vuetify 3代码。你需要创建所有必要的Pinia Store、API模块、页面和组件。

---

### **功能模块一：Pinia状态管理 (`src/store/binanceOrder.ts`)**

为“交易订单”页面创建一个专属的Pinia store，用于统一管理所有状态。

1.  **Store ID:** `'binanceOrder'`

2.  **State (`BinanceOrderState`):**
    * `trades`: `Ref<Trade[]>` - 存储从API获取的原始订单列表，默认为 `[]`。
    * `filters`: `Reactive<OrderFilters>` - 存储所有查询和筛选条件。
        * `symbol`: `string | null` - 交易对，如 'BTCUSDT'。
        * `startTime`: `number | null` - 查询起始时间戳。
        * `endTime`: `number | null` - 查询结束时间戳。
        * `side`: `'BUY' | 'SELL' | 'ALL'` - 交易方向，默认 'ALL'。
        * `timeRangeSelection`: `string | null` - 用于高亮显示快捷时间段按钮，如 '3m', '1y'。
    * `pagination`: `Reactive<Pagination>` - 分页状态。
        * `page`: `number` - 当前页码，默认 1。
        * `itemsPerPage`: `number` - 每页数量，默认 20。
        * `totalItems`: `number` - 总条目数，默认 0。
    * `isLoading`: `Ref<boolean>` - 页面级加载状态，控制骨架屏或加载指示器。
    * `error`: `Ref<string | null>` - 存储API请求错误信息。

3.  **Getters:**
    * `displayTrades`: 计算属性，根据 `filters.side` 和 `pagination` 从 `trades` 派生出当前页面应显示的订单列表。
    * `timelineData`: 计算属性，将 `trades` 转换为时间轴组件所需的数据结构 `[{timestamp: number, side: 'BUY' | 'SELL'}]`。
    * `isDefaultDateRange`: 计算属性，判断当前`startTime`是否为初始默认值 `2025-01-01 08:00:00`。

4.  **Actions:**
    * `fetchTrades()`:
        * 设置 `isLoading` 为 `true`，清空 `error`。
        * 调用API模块获取订单数据，请求参数基于 `filters` state（`symbol`, `startTime`, `endTime`），`limit` 固定为 `1000`。
        * 成功后，更新 `trades` 和 `pagination.totalItems`。
        * 失败后，填充 `error` 状态。
        * 最后设置 `isLoading` 为 `false`。
    * `setFilter(payload: Partial<OrderFilters>)`: 更新 `filters` 对象。
    * `setPage(page: number)`: 更新 `pagination.page`。
    * `setItemsPerPage(size: number)`: 更新 `pagination.itemsPerPage` 并将 `page` 重置为 1。
    * `applyTimeRange(range: '3m' | '1m' | '1y' | '3y')`:
        * 根据`range`计算新的 `startTime` (以当前时间为`endTime`)。
        * 更新 `filters.startTime`, `filters.endTime` 和 `filters.timeRangeSelection`。
    * `resetTimeRange()`: 恢复`startTime`和`endTime`至默认值，并清空`timeRangeSelection`。
    * `exportToCSV()`:
        * 实现一个将 `trades` state中的数据转换为CSV格式并触发浏览器下载的逻辑。
        * CSV列应包括：`Time (CST)`, `Symbol`, `Side`, `Price`, `Quantity`, `QuoteQty`, `Commission`, `CommissionAsset`。

---

### **功能模块二：API层 (`src/api/modules/binance.ts` & `src/types/binance.d.ts`)**

1.  **类型定义 (`binance.d.ts`):**
    * `MyTradesRequest`: 定义API请求参数类型。
    * `Trade`: 定义单笔订单的数据结构，所有字段必须有精确类型。

2.  **API函数 (`binance.ts`):**
    * 创建一个 `getMyTrades(params: MyTradesRequest): Promise<ApiResponse<Trade[]>>` 函数。
    * 该函数通过封装的Axios实例，向 `POST /api/binance/order/trades` 发送请求。

---

### **功能模块三：页面与组件实现**

#### **1. 主页面 (`src/pages/BinanceOrder.vue`)**

* **布局:**
    * 使用 `v-container(fluid)` 作为根元素。
    * 顶部应用栏 (`v-app-bar`) 的 `v-toolbar-title` 显示 "交易订单"。
    * 页面主体使用 `v-row` 和 `v-col` 组织布局。
* **逻辑 (`<script setup lang="ts">`):**
    * 实例化 `binanceOrder` store。
    * 使用 `onMounted` 触发一次初始数据加载 `store.fetchTrades()`。
    * 将store的state和actions传递给子组件。
    * 使用 `v-if="store.isLoading"` 显示一个覆盖整个内容区的 `v-progress-linear` 加载指示器。
    * 监听 `store.error`，当其有值时，通过全局Snackbar服务显示错误信息。

#### **2. 订单查询栏组件 (`src/components/binance/OrderFilterBar.vue`)**

* **UI:** 使用 `v-card` 和 `v-card-text` 构建。
    * **交易对选择:** 使用 `CurrencySelector` 全局组件。
    * **时间选择:**
        * 使用两个 `v-text-field` (label: "开始时间", "结束时间") 并配合 `v-menu` 和 `v-date-picker` + 时间选择器实现。`v-model` 双向绑定到 store中的 `filters.startTime` 和 `filters.endTime`（需要转换器）。
        * **快捷时间段:** 使用 `v-chip-group` 或 `v-btn-toggle` 展示“最近三个月”、“最近一个月”、“最近一年”、“最近三年”。点击时调用 `store.applyTimeRange(range)`。`v-model` 绑定到`store.filters.timeRangeSelection`以实现状态高亮。
        * **重置时间:** 提供一个 `v-btn` (icon: `mdi-restore`)，`@click`="store.resetTimeRange()"`，仅在 `!isDefaultDateRange` 时可见。
    * **操作按钮:**
        * `v-btn` "查询"，`@click="store.fetchTrades()"`，颜色为 `primary`。
        * `v-btn` "导出CSV"，`@click="store.exportToCSV()"`，颜色为 `secondary`。
* **响应式:** 在 `xs` 断点下，所有表单项垂直堆叠。

#### **3. 订单时间轴组件 (`src/components/binance/OrderTimeline.vue`)**

* **技术选型:** 自定义、响应式的SVG组件。
* **Props:**
    * `data: {timestamp: number, side: 'BUY' | 'SELL'}[]` - 从 `store.timelineData` getter 传入。
* **Events:**
    * `@range-selected="(startTime: number, endTime: number) => void"` - 当用户通过拖拽（brushing）选择一个范围后触发。
    * `@dot-clicked="(trade: Trade) => void"` - 当用户点击某个订单点时触发。
* **功能:**
    * 根据`data`中的时间戳范围，动态计算X轴的比例尺。
    * 在SVG上渲染代表每个订单的圆点（`<circle>`），`BUY`为绿色，`SELL`为红色。
    * 实现鼠标悬停在圆点上时显示Tooltip（使用Vuetify的 `v-tooltip`），展示订单关键信息。
    * 支持鼠标按下并拖拽以创建一个矩形选区（brush），释放鼠标后，发出 `@range-selected` 事件。
    * 整个SVG的尺寸应能响应容器宽度变化。

#### **4. 订单列表区组件 (`src/components/binance/OrderDataTable.vue`)**

* **UI:**
    * 使用 Vuetify 的 `v-data-table-server` 组件，因为它能更好地处理潜在的大量数据和分页逻辑。
* **Props & State绑定:**
    * `:items`: `store.displayTrades`
    * `:headers`: 定义表头，包括时间、交易对、方向、价格、数量、成交额、手续费等。
    * `:loading`: `store.isLoading`
    * `:page`: `store.pagination.page`
    * `:items-per-page`: `store.pagination.itemsPerPage`
    * `:items-length`: `store.pagination.totalItems`
    * `@update:page`: `(p) => store.setPage(p)`
    * `@update:items-per-page`: `(size) => store.setItemsPerPage(size)`
* **功能:**
    * **表头:** 在 `v-data-table` 上方使用 `v-toolbar` 添加筛选控件。
        * **方向筛选:** `v-btn-toggle` (选项: 全部, 买入, 卖出)，`v-model` 绑定 `store.filters.side`。
    * **单元格渲染:**
        * **方向:** 使用 `v-chip` 根据买卖方向显示不同颜色（`success` for BUY, `error` for SELL）。
        * **时间:** 格式化为 `YYYY-MM-DD HH:mm:ss`。
    * **空状态:** 当 `store.trades.length === 0 && !store.isLoading` 时，在表格中显示 "暂无数据" 的提示。
    * **分页选项:** `items-per-page-options` 设置为 `[20, 50, 100]`。

**总结指令:**

请严格按照上述四个模块的设计，生成所有代码文件，并确保它们完全符合 `vue3-typescript-stye.md` 中定义的每一条规范，包括但不限于：完全的TypeScript、组合式API、Vuetify 3组件和主题变量的使用、Pinia的最佳实践以及健壮的API数据处理。