This commit is contained in:
吴红兵
2026-03-03 21:39:22 +08:00
parent 6a1cc54c8b
commit 4ae5a63d97
3 changed files with 180 additions and 2 deletions

100
AGENTS.md Normal file
View File

@@ -0,0 +1,100 @@
# AGENTS.md - Vue 3 Frontend
**Generated:** 2026-03-03
**Stack:** Vue 3.4 + TypeScript 4.9 + Element Plus 2.5 + Pinia 2.0 + Vite 4.3
## Overview
Vue 3 SPA with custom composables for data fetching. Element Plus for UI.
## Structure
```
cloud-ui/src/
├── api/ # API modules (one per entity)
├── components/ # Reusable components
├── hooks/ # Composables (useDict, useTable, etc.)
├── stores/ # Pinia stores
├── router/ # Vue Router config
├── views/ # Page components (flat per module)
├── const/ # Constants (non-standard name)
├── utils/ # Utilities (request.ts for HTTP)
└── types/ # TypeScript types
```
## Key Hooks
| Hook | Purpose |
|------|---------|
| `useDict(type1, type2)` | Dictionary data with caching |
| `useTable({ pageList, queryForm })` | Table + pagination |
| `useMessage()` | Toast notifications |
| `useMessageBox()` | Confirm dialogs |
| `useParam(type)` | System parameters |
## API Pattern
```typescript
import request from '/@/utils/request';
// One file per entity: api/module/entity.ts
export const fetchList = (params) => request.get('/module/entity/page', { params });
export const addObj = (data) => request.post('/module/entity', data);
export const putObj = (data) => request.post('/module/entity/edit', data);
export const delObj = (id) => request.post('/module/entity/delete', id);
```
## Hooks Usage
```typescript
// Dictionary
const { dict } = useDict('sex', 'status');
// Access: dict.sex, dict.status
// Table
const { tableData, loading, getData, pagination } = useTable({
pageList: fetchList,
queryForm: reactive({ name: '' })
});
// Message
const { msgSuccess, msgError } = useMessage();
msgSuccess('操作成功');
// Confirm
const { msgBoxConfirm } = useMessageBox();
await msgBoxConfirm('确定删除?');
```
## Constraints
| Rule | Details |
|------|---------|
| **Hardcoding** | NO hardcoded strings. Define constants first. |
| **Line width** | 150 chars (Prettier) |
| **Indentation** | Tabs (Prettier) |
| **Quotes** | Single quotes |
| **API updates** | POST /edit (NOT PUT) |
| **API deletes** | POST /delete (NOT DELETE) |
## Commands
```bash
npm run dev # Development server
npm run build # Production build
npm run lint:eslint # Lint + fix
npm run prettier # Format code
```
## Non-Standard
| Location | Issue |
|----------|-------|
| `src/composables/` + `src/hooks/` | Both exist (prefer hooks/) |
| `src/directive/` + `src/directives/` | Both exist |
| `src/const/` | Named "const" not "constants" |
## ESLint Relaxed Rules
Many TypeScript rules are OFF:
- `@typescript-eslint/no-explicit-any`: OFF
- `@typescript-eslint/explicit-function-return-type`: OFF
- `vue/require-default-prop`: OFF
Follow existing patterns in codebase.

78
src/hooks/AGENTS.md Normal file
View File

@@ -0,0 +1,78 @@
# AGENTS.md - Vue Composables (hooks)
**Generated:** 2026-03-03
**Purpose:** Custom Vue 3 composables for data fetching and UI state
## Key Hooks
### useDict
Fetch dictionary data with automatic caching.
```typescript
const { dict } = useDict('sex', 'status', 'type');
// Access: dict.sex, dict.status, dict.type
// Automatically cached per type
```
### useTable
Table data management with pagination.
```typescript
const { tableData, loading, pagination, getData, resetQuery } = useTable({
pageList: fetchList, // API function
queryForm: reactive({ name: '' }) // Query params
});
// pagination: { current, size, total }
// getData(): refresh table
// resetQuery(): reset to defaults
```
### useMessage
Toast notifications.
```typescript
const { msgSuccess, msgError, msgWarning } = useMessage();
msgSuccess('操作成功');
msgError('操作失败');
```
### useMessageBox
Confirm/alert dialogs.
```typescript
const { msgBoxConfirm, msgBoxAlert } = useMessageBox();
// Confirm
await msgBoxConfirm('确定删除该记录?');
// Returns promise, resolves on confirm
// Alert
await msgBoxAlert('提示信息');
```
### useParam
Fetch system parameters.
```typescript
const { param } = useParam('SYSTEM_NAME');
// Access: param.SYSTEM_NAME
```
## Files
| File | Purpose |
|------|---------|
| useDict.ts | Dictionary data with caching |
| useTable.ts | Table + pagination state |
| useMessage.ts | Toast notifications |
| useMessageBox.ts | Confirm dialogs |
| useParam.ts | System parameters |
## Pattern
All hooks follow Vue 3 composition API pattern:
1. Accept reactive params
2. Return reactive state + methods
3. Handle loading/error states internally
4. Provide clean API surface

View File

@@ -173,13 +173,13 @@
:width="col.width" :width="col.width"
:min-width="col.minWidth" :min-width="col.minWidth"
:show-overflow-tooltip="col.showOverflowTooltip !== false" :show-overflow-tooltip="col.showOverflowTooltip !== false"
:align="col.align || 'center'> :align="col.align || 'center'">
<template #header> <template #header>
<el-icon v-if="col.icon"><component :is="col.icon" /></el-icon> <el-icon v-if="col.icon"><component :is="col.icon" /></el-icon>
<span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span> <span :style="{ marginLeft: col.icon ? '4px' : '0' }">{{ col.label }}</span>
</template> </template>
<!-- 上传状态列特殊模板 --> <!-- 上传状态列特殊模板 -->
<template v-else-if="col.prop === 'uploadStatus'" #default="scope"> <template v-if="col.prop === 'uploadStatus'" #default="scope">
<el-tag <el-tag
v-if="scope.row.unuploadCount === 0" v-if="scope.row.unuploadCount === 0"
size="small" size="small"