forked from mengyxu/noob-components
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
4.8 KiB
116 lines
4.8 KiB
3 months ago
|
# Fill plugs/composables spec
|
||
|
|
|
||
|
|
## Goal
|
||
|
|
Analyze the `plugs/composables/` directory and fill the coding spec with real code patterns, examples, and anti-patterns from the actual codebase.
|
||
|
|
|
||
|
|
## Context
|
||
|
|
|
||
|
|
### Project Overview
|
||
|
|
- **Type**: Vue 3 Component Library (Element Plus based)
|
||
|
|
- **Framework**: Vue 3 + TypeScript + Vite
|
||
|
|
- **Key Patterns**: Composables, API Layer, Store Pattern, Element UI Wrappers
|
||
|
|
|
||
|
|
### Architecture
|
||
|
|
This is a Vue 3 component library built on Element Plus. The `plugs/composables/` directory contains reusable Vue composition API functions that encapsulate complex stateful logic.
|
||
|
|
|
||
|
|
### Key Composables (from GitNexus analysis)
|
||
|
|
| Composable | File | Purpose |
|
||
|
|
|------------|------|---------|
|
||
|
|
| `useListTable` | plugs/composables/useListTable.ts | List/table management with pagination |
|
||
|
|
| `useModifyForm` | plugs/composables/useModifyForm.ts | Form open/edit/add flow |
|
||
|
|
| `useLoading` | plugs/composables/useLoading.ts | Loading state management |
|
||
|
|
| `useActionPers` | plugs/composables/useActionPers.ts | Action permissions |
|
||
|
|
| `useRefreshFlags` | plugs/composables/useRefreshFlags.ts | Refresh flag management for auto-refresh |
|
||
|
|
| `useSysDict` | plugs/composables/useSysDict.ts | System dictionary |
|
||
|
|
| `useWatchOnce` | plugs/composables/useWatchOnce.ts | One-time watch utility |
|
||
|
|
|
||
|
|
### Execution Flows (from GitNexus)
|
||
|
|
- `OpenAdd → NormalizeValue → ClearObject` (useModifyForm flow)
|
||
|
|
- `OpenEdit → NormalizeValue → ClearObject` (useModifyForm flow)
|
||
|
|
- `DeleteById → Loading → Close` (CRUD flow)
|
||
|
|
|
||
|
|
## Tools Available
|
||
|
|
|
||
|
|
You have two MCP servers configured — use both for accurate specs:
|
||
|
|
|
||
|
|
### GitNexus MCP (architecture-level: clusters, execution flows, impact)
|
||
|
|
| Tool | Purpose | Example |
|
||
|
|
|------|---------|---------|
|
||
|
|
| `gitnexus_query` | Find execution flows by concept | `gitnexus_query({query: "useListTable"})` |
|
||
|
|
| `gitnexus_context` | 360-degree symbol view | `gitnexus_context({name: "useListTable"})` |
|
||
|
|
| `gitnexus_impact` | Blast radius analysis | `gitnexus_impact({target: "useListTable", direction: "upstream"})` |
|
||
|
|
| `gitnexus_cypher` | Direct graph queries | `gitnexus_cypher({query: "MATCH (f:Function) WHERE f.name STARTS WITH 'use' RETURN f.name, f.filePath"})` |
|
||
|
|
|
||
|
|
### ABCoder MCP (symbol-level: AST nodes, signatures, cross-file deps)
|
||
|
|
| Tool | Purpose | Example |
|
||
|
|
|------|---------|---------|
|
||
|
|
| `get_repo_structure` | Full file listing | `get_repo_structure({repo_name: "noob-components"})` |
|
||
|
|
| `get_file_structure` | All nodes in a file | `get_file_structure({repo_name: "noob-components", file_path: "plugs/composables/useListTable.ts"})` |
|
||
|
|
| `get_ast_node` | Code + deps + refs | `get_ast_node({repo_name: "noob-components", node_ids: [...]})` |
|
||
|
|
|
||
|
|
### Recommended Workflow
|
||
|
|
1. GitNexus first — find relevant execution flows and clusters
|
||
|
|
2. ABCoder second — get exact code patterns and signatures
|
||
|
|
3. Read source files — for full context where needed
|
||
|
|
4. Write specs — with real code examples from steps 2-3
|
||
|
|
|
||
|
|
## Files to Fill
|
||
|
|
|
||
|
|
### Primary files to analyze and document:
|
||
|
|
1. **plugs/composables/useListTable.ts** - Main list/table composable
|
||
|
|
- Pagination handling
|
||
|
|
- Table data management
|
||
|
|
- Search/filter integration
|
||
|
|
|
||
|
|
2. **plugs/composables/useModifyForm.ts** - Form manipulation
|
||
|
|
- OpenAdd, OpenEdit, ClearObject flow
|
||
|
|
- Form state normalization
|
||
|
|
- Props interface: `FormProp`, `Options`
|
||
|
|
|
||
|
|
3. **plugs/composables/useLoading.ts** - Loading state
|
||
|
|
- Simple boolean toggle
|
||
|
|
- Async operation wrapping
|
||
|
|
|
||
|
|
4. **plugs/composables/useRefreshFlags.ts** - Auto-refresh flags
|
||
|
|
- Flag-based refresh triggers
|
||
|
|
- Timer management
|
||
|
|
|
||
|
|
5. **plugs/composables/useActionPers.ts** - Action permissions
|
||
|
|
- Permission checking integration
|
||
|
|
|
||
|
|
6. **plugs/composables/useSysDict.ts** - System dictionary
|
||
|
|
- Dictionary data fetching
|
||
|
|
|
||
|
|
7. **plugs/composables/useWatchOnce.ts** - One-time watcher
|
||
|
|
- Watch logic that auto-unmonuts
|
||
|
|
|
||
|
|
### Supporting files:
|
||
|
|
- **plugs/composables/index.ts** - Public exports
|
||
|
|
|
||
|
|
## Important Rules
|
||
|
|
|
||
|
|
### Spec files are NOT fixed — adapt to reality
|
||
|
|
- Delete template files that don't apply
|
||
|
|
- Create new files for patterns templates don't cover
|
||
|
|
- Rename files if template names don't fit
|
||
|
|
- Update index.md to reflect the final set
|
||
|
|
|
||
|
|
### Parallel agents — stay in your lane
|
||
|
|
- ONLY modify files under your assigned spec directory
|
||
|
|
- DO NOT modify source code, other spec directories, or task files
|
||
|
|
- DO NOT run git commands
|
||
|
|
- You may read any file for analysis
|
||
|
|
|
||
|
|
## Acceptance Criteria
|
||
|
|
- [ ] Real code examples from the actual codebase (with file paths)
|
||
|
|
- [ ] Each composable has documented: purpose, signature, usage pattern
|
||
|
|
- [ ] Anti-patterns documented (if any found)
|
||
|
|
- [ ] No placeholder text remaining
|
||
|
|
- [ ] index.md reflects actual file set
|
||
|
|
|
||
|
|
## Technical Notes
|
||
|
|
- Language: TypeScript
|
||
|
|
- Framework: Vue 3 Composition API
|
||
|
|
- Related: Element Plus, VueUse patterns
|
||
|
|
- Imports often from: `plugs/http/axios`, `plugs/element/message`, `plugs/api/*`
|