|
|
@@ -1,80 +0,0 @@
|
|
|
-# 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';`
|
