shuhi-ui/.trae/rules/book-hi-admin.md

---

alwaysApply: false

description:

Trae Project Coding Rules

1. List Page Architecture

All list pages must follow this standard structure:

<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:

  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';