效率提升 45%！TRAE 辅助下的 uni-app 跨端小程序工程化开发实践

{  "mcpServers": {    "Figma Dev Mode MCP": {      "type": "sse",      "url": "http://127.0.0.1:3845/mcp"    }  }}

# 项目开发规则## 项目概述本项目是基于 uni-app + Vue 3 + TypeScript 的跨平台应用，使用 wot-design-uni 组件库构建。## 核心技术栈- **框架**: uni-app (Vue 3 + TypeScript)- **UI组件库**: wot-design-uni- **请求库**: alova- **路由**: uni-mini-router + @uni-helper/vite-plugin-uni-pages (文件路由)- **状态管理**: pinia- **样式**: UnoCSS + @uni-helper/unocss-preset-uni- **构建工具**: Vite- **代码规范**: ESLint + Prettier + husky## 目录结构规范### src/api/ - API管理- `core/` - Alova核心配置  - [instance.ts](mdc:src/api/core/instance.ts) - Alova实例配置  - [handlers.ts](mdc:src/api/core/handlers.ts) - 请求处理器  - [middleware.ts](mdc:src/api/core/middleware.ts) - 中间件- `mock/` - Mock数据  - `modules/` - 按模块分类的Mock数据  - `utils/` - Mock工具函数- [createApis.ts](mdc:src/api/createApis.ts) - API生成配置- [index.ts](mdc:src/api/index.ts) - API导出### src/components/ - 全局组件- 全局通用组件目录- 包含 GlobalToast、GlobalLoading、GlobalMessage 等全局交互组件### src/composables/ - 组合式函数- 可复用的逻辑函数- 命名格式: `use[功能名称].ts`### src/layouts/ - 布局模板- [default.vue](mdc:src/layouts/default.vue) - 默认布局- [tabbar.vue](mdc:src/layouts/tabbar.vue) - 底部导航布局### src/pages/ - 页面文件- 基于文件的路由系统- 每个页面目录包含 `index.vue` 文件- 支持 `<route>` 自定义块配置路由元数据### src/store/ - 状态管理- Pinia store 文件- [persist.ts](mdc:src/store/persist.ts) - 持久化配置### src/utils/ - 工具函数- 通用工具函数库## 配置文件- [pages.config.ts](mdc:pages.config.ts) - 页面和tabbar配置- [alova.config.ts](mdc:alova.config.ts) - Alova配置- [uno.config.ts](mdc:uno.config.ts) - UnoCSS配置- [theme.json](mdc:src/theme.json) - 主题配置- [vite.config.ts](mdc:vite.config.ts) - Vite构建配置## 开发规范1. 页面文件必须放在 `src/pages/` 目录下2. 组件按通用性分类存放在 `src/components/` 或 `src/business/`3. API 接口使用 Alova 生成，通过 `pnpm alova-gen` 命令生成4. 样式优先使用 UnoCSS，支持响应式设计和主题切换5. 使用 TypeScript 提供完整的类型定义

src/├── components/              # 通用基础组件├── business/               # 业务组件├── composables/            # 组合式 API├── store/                  # Pinia 状态管理├── utils/                  # 工具函数├── api/                    # API 层（Alova 自动生成）├── pages/                  # 主包页面├── pagesBase/             # 基础功能页面（子包）├── pagesSubA/             # 模块A功能页面（子包）├── pagesSubB/              # 模块B功能页面（子包）└── static/                # 静态资源

<script setup lang="ts">interface Props {  type?: 'default' | 'primary' | 'success' | 'warning' | 'danger'  size?: 'small' | 'medium' | 'large'  title?: string  subtitle?: string  shadow?: boolean  bordered?: boolean}withDefaults(defineProps<Props>(), {  type: 'default',  size: 'medium',  shadow: true,  bordered: false})</script><template>  <view    class="base-card"    :class="[      `card--${type}`,      `card--${size}`,      { 'card--shadow': shadow },      { 'card--bordered': bordered },    ]"  >    <view v-if="$slots.header || title" class="card-header">      <slot name="header">        <text class="card-title">          {{ title }}        </text>        <text v-if="subtitle" class="card-subtitle">          {{ subtitle }}        </text>      </slot>    </view>    <view class="card-content">      <slot />    </view>    <view v-if="$slots.footer" class="card-footer">      <slot name="footer" />    </view>  </view></template><style scoped>.base-card {  @apply bg-white rounded-lg overflow-hidden;}.card--shadow {  @apply shadow-sm;}.card--bordered {  @apply border border-gray-200;}</style>

// alova.config.tsexportdefault {  generator: [{    input: 'http://your-api-domain/v2/api-docs',    platform: 'swagger',    output: 'src/api',    responseMediaType: 'application/json',    bodyMediaType: 'application/json',    version: 3,    type: 'typescript',    global: 'Apis',    handleApi: (apiDescriptor) => {      // 过滤废弃的 API      if (apiDescriptor.deprecated) {        return undefined      }      return apiDescriptor    }  }],  autoUpdate: {    launchEditor: true,    interval: 5 * 60 * 1000// 每5分钟检查更新  }}

import { usePagination, useRequest } from 'alova'import { Apis } from '@/api'// 单次请求 - 自动类型推导const { data: userInfo, loading: userLoading } = useRequest(  Apis.user.getUserInfo())// 分页请求 - 支持参数类型检查const {  data: orderList,  loading: listLoading,  loadNext,  refresh} = usePagination(  (page, size) => Apis.order.getOrderList({    params: {      page,      size,      status: 'pending'// TypeScript 自动检查状态值    }  }),  {    initialData: [],    initialPageSize: 20  })

<script setup lang="ts">import { usePagination } from 'alova'import { Apis } from '@/api'const searchText = ref('')const activeTab = ref('all')// 使用 Alova 进行分页请求const {  data: orderList,  loading,  loadNext} = usePagination(  (page, size) => Apis.getOrderList({    page,    size,    status: activeTab.value,    keyword: searchText.value  }),  {    initialData: [],    initialPageSize: 20  })</script><template>  <view class="order-list-page">    <!-- TRAE 优先推荐项目组件 -->    <NavSearchBar      v-model="searchText"      placeholder="搜索订单号"      @search="handleSearch"    />    <!-- 自动推荐合适的组件库组件 -->    <wd-tabs v-model="activeTab">      <wd-tab title="全部" name="all" />      <wd-tab title="待付款" name="pending" />      <wd-tab title="已完成" name="completed" />    </wd-tabs>    <!-- 智能组合业务组件 -->    <view class="order-list">      <template v-if="!loading">        <view          v-for="order in orderList"          :key="order.id"          class="order-item"          @click="navigateToDetail(order.id)"        >          <!-- 订单内容 -->        </view>      </template>      <SalesListSkeleton v-else />    </view>    <!-- 空状态处理 -->    <EmptyStatus v-if="!loading && !orderList.length" />  </view></template>

/** * 订单管理模块功能总结 (AI 辅助生成) * * 核心功能： * 1. 订单列表查询和筛选 * 2. 订单详情查看 * 3. 订单状态变更 * 4. 订单统计分析 * * 主要组件： * - OrderList.vue: 订单列表页面 * - OrderDetail.vue: 订单详情页面 * - OrderStats.vue: 订单统计组件 */