# Trae Project Coding Rules

## 1. List Page Architecture
All list pages must follow this standard structure:

```vue
<template>
  <ele-page flex-table>
    <!-- 1. Search Section -->
    <page-search @search="reload" />

    <!-- 2. Table Section -->
    <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns" :tools="false">
      <!-- Custom Slots -->
      <template #status="{ row }">
        <dict-data code="user_info_status" type="tag" :model-value="row.status" />
      </template>
      
      <!-- Action Column -->
      <template #action="{ row }">
         <el-button link type="primary" v-permission="'module:action'" @click="handleAction(row)">
           [Action Name]
         </el-button>
      </template>
    </common-table>

    <!-- 3. Modals/Drawers -->
    <page-edit ref="editRef" @success="reload()" />
  </ele-page>
</template>
```

## 2. Component Specifications

### A. Search Component (`components/page-search.vue`)
*   **Wrapper**: Must use `<ele-card :body-style="{ paddingBottom: '8px' }">`.
*   **Core Component**: Use `<ProSearch>` or `<ProSearch2>`.
*   **Configuration**:
    *   `formItems`: Reactive array defining fields (`type`, `label`, `prop`).
    *   `initKeys`: Object defining default values.
*   **Interaction**: Emit `search` event with query parameters.

### B. Table Configuration (`index.vue`)
*   **`pageConfig` Object**:
    *   `pageUrl`: Backend API endpoint for pagination (Required).
    *   `rowKey`: Unique identifier (usually `'id'`).
    *   `fileName`: Default filename for exports.
    *   `cacheKey`: Unique key for column caching.
*   **`columns` Array**:
    *   Standard props: `label`, `prop`, `align: 'center'`, `width/minWidth`.
    *   Action column: `{ columnKey: 'action', label: '操作', width: 200, fixed: 'right', slot: 'action' }`.

## 3. Common Patterns & Best Practices

### A. Data Dictionary
*   Use `<dict-data>` component for status/enum fields.
*   Example: `<dict-data code="dict_code" type="tag" :model-value="row.status" />`

### B. User Interface
*   **Avatars**: Combine `<el-avatar>` with `<ele-text>` in a flex column.
*   **Icons**: Import from `@/components/icons` (e.g., `DownloadOutlined`, `PlusOutlined`).

### C. Interaction Logic
*   **Refresh**: `pageRef.value?.reload(where)`.
*   **Confirmations**: Use built-in table methods:
    ```javascript
    pageRef.value?.messageBoxConfirm({
        message: 'Confirm text?',
        fetch: () => request.post('/api/path', { id: row.id })
    });
    ```
*   **Batch Operations**: Use `pageRef.value?.operatBatch({...})`.

## 4. Permissions
*   Use `v-permission` directive on all action buttons.
*   Format: `'module:submodule:action'` (e.g., `'customer:blacklist:remove'`).

## 5. Dependencies
*   **Request Utility**: `import request from '@/utils/request';`
*   **Common Table**: `import CommonTable from '@/components/CommonPage/CommonTable.vue';`