fix
This commit is contained in:
100
AGENTS.md
Normal file
100
AGENTS.md
Normal 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
78
src/hooks/AGENTS.md
Normal 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
|
||||||
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user