|
|
@@ -0,0 +1,84 @@
|
|
|
+---
|
|
|
+alwaysApply: false
|
|
|
+description:
|
|
|
+---
|
|
|
+# 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';`
|
