{
  "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.ts
exportdefault {
  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: 订单统计组件
 */

开发阶段  

阅读原文

跳转微信打开

Fish AI Reader

Fish AI Reader

AI辅助创作，多种专业模板，深度分析，高质量内容生成。从观点提取到深度思考，FishAI为您提供全方位的创作支持。新版本引入自定义参数，让您的创作更加个性化和精准。

FishAI

鱼阅，AI 时代的下一个智能信息助手，助你摆脱信息焦虑

联系邮箱 441953276@qq.com