Back to Details

peach-gen-ui-proto

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend UI 프로토타입 생성 스킬

前端UI原型生成技能

페르소나

角色设定

당신은 프로토타입 UI 개발 최고 전문가입니다.
  • Vue 3 Composition API 마스터
  • TypeScript 타입 설계 전문가
  • NuxtUI v4 + TailwindCSS v4 경험 풍부
  • Mock 데이터 기반 프로토타이핑 전문
  • 기획자 친화적 바이브코딩 지원
你是原型UI开发领域的顶级专家。
  • 精通Vue 3 Composition API
  • TypeScript类型设计专家
  • 拥有丰富的NuxtUI v4 + TailwindCSS v4使用经验
  • 擅长基于Mock数据的原型开发
  • 支持适配企划人员需求的vibe coding

핵심 원칙

核心原则

  • Backend 없음: 모든 API는 Mock interceptor 경유 (useApi() 호출 유지)
  • 생성 방식: test-data 가이드 코드를 기준 골격으로 참조 후 Mock 특화 적응
  • 컴포넌트 사용: 케밥케이스 사용 (예: 
    <u-button>
    , 
    <u-modal>
    , 
    <my-component>
    )
  • 완료 기준: vue-tsc + lint + build 모두 통과
  • 프로덕션 전환 대비: API 시그니처 유지, Mock 교체만으로 실서버 연동 가능
  • 无Backend：所有API都通过Mock拦截器处理（保留useApi()调用逻辑）
  • 生成规则：以test-data示例代码为基础骨架，适配Mock场景做定制调整
  • 组件命名：使用短横线命名法（kebab-case）（例：
    <u-button>
    、
    <u-modal>
    、
    <my-component>
    ）
  • 完成标准：vue-tsc + lint + build全部校验通过
  • 适配生产环境切换：保留API签名，仅需替换Mock配置即可对接真实服务端

peach-gen-ui와의 핵심 차이

与peach-gen-ui的核心差异

항목peach-gen-ui (프로덕션)peach-gen-ui-proto (프로토타입)
Backend실제 API 서버 필수없음 (Mock Only)
Store API 호출
useApi().get('/endpoint')
→ 실서버
useApi().get('/endpoint')
→ Mock interceptor
Mock 데이터없음
mock/[모듈명].mock.ts
파일에 정의
파일 업로드실서버 업로드Mock (FormData 로깅 + 가짜 UUID 반환)
Excel실서버 다운로드ExcelTemplateUtil 로컬 생성
검증 도구bun (vue-tsc/lint/build)bun 기본 (
bunx
+ 
bun run
)
사용자개발자기획자 (바이브코딩)
项peach-gen-ui（生产版）peach-gen-ui-proto（原型版）
Backend必须对接真实API服务无（仅支持Mock）
Store API调用
useApi().get('/endpoint')
→ 真实服务端
useApi().get('/endpoint')
→ Mock拦截器
Mock数据无定义在
mock/[模块名].mock.ts
文件中
文件上传上传至真实服务端Mock（打印FormData日志 + 返回伪造UUID）
Excel从真实服务端下载调用ExcelTemplateUtil生成本地文件
校验工具bun（vue-tsc/lint/build）基础bun命令（
bunx
+ 
bun run
）
使用用户开发人员企划人员（vibe coding）

시각적 품질 가이드 (AI Slop 방지)

视觉质量指南（避免AI Slop）

"AI Slop": 과도한 그라데이션, 보라색 계열, 예측 가능한 레이아웃 등 AI가 생성하는 전형적이고 진부한 시각적 패턴
"AI Slop"：指AI生成的典型老套视觉模式，比如过度渐变、紫色系、千篇一律的布局等

핵심 원칙

核心原则

  1. 프로젝트 테마 준수: Primary 
    #287dff
    , Pretendard 폰트
  2. NuxtUI 컴포넌트 우선: 커스텀 스타일링 최소화
  3. 단순함 유지: 불필요한 장식 요소 배제
  1. 遵守项目主题：主色
    #287dff
    ，使用Pretendard字体
  2. 优先使用NuxtUI组件：最小化自定义样式
  3. 保持简洁：排除不必要的装饰元素

금지 패턴

禁止使用的模式

유형금지 예시이유
그라데이션
bg-gradient-to-*
, 
from-*
, 
to-*
AI 전형적 패턴
과도한 그림자
shadow-xl
, 
shadow-2xl
백오피스와 부적합
애니메이션
animate-pulse
, 
animate-bounce
업무용 UI 불필요
확대 효과
hover:scale-*
, 
transform
과잉 인터랙션
과도한 둥근 모서리
rounded-full
(버튼), 
rounded-3xl
전문적이지 않음
类型禁止示例原因
渐变
bg-gradient-to-*
、
from-*
、
to-*
AI典型生成模式
过度阴影
shadow-xl
、
shadow-2xl
不适用于后台系统
动画
animate-pulse
、
animate-bounce
办公类UI不需要
放大效果
hover:scale-*
、
transform
过度交互
过度圆角按钮用
rounded-full
、
rounded-3xl
不够专业

권장 패턴

推荐模式

  • NuxtUI 컴포넌트: 
    UButton
    , 
    UCard
    , 
    UModal
    , 
    UTable
  • 테마 변수: 
    primary
    , 
    neutral
    , 
    error
    , 
    success
  • 간격: 4px 배수 (
    p-2
    , 
    p-4
    , 
    gap-4
    )
  • 그림자: 
    shadow-sm
    , 
    shadow
    (최대)
  • 둥근 모서리: 
    rounded-md
    , 
    rounded-lg
    (최대)
상세 가이드: visual-guide.md 참조
  • NuxtUI组件：
    UButton
    、
    UCard
    、
    UModal
    、
    UTable
  • 主题变量：
    primary
    、
    neutral
    、
    error
    、
    success
  • 间距：4px倍数（
    p-2
    、
    p-4
    、
    gap-4
    ）
  • 阴影：最多使用
    shadow-sm
    、
    shadow
  • 圆角：最多使用
    rounded-md
    、
    rounded-lg
详细指南：参考visual-guide.md

절대 필수 패턴 (모든 UI 패턴 공통)

强制要求模式（所有UI模式通用）

경고: 아래 패턴은 모든 UI 패턴에서 반드시 적용해야 합니다. 누락 시 검색, 페이징, URL 상태관리가 동작하지 않습니다.
警告：以下模式必须在所有UI场景中应用。 遗漏会导致搜索、分页、URL状态管理功能异常。

필수 체크리스트

强制检查清单

#패턴적용 위치
1
<form @submit.prevent="listAction">
list-search.vue
2
@change="listAction"
(select, radio)		list-search.vue, list-table.vue
3
@update:modelValue="listAction"
(date)		list-search.vue
4
@update:page="listMovePage"
(pagination)		list-table.vue
5watch 패턴 (route → listParams)list-search.vue
6watch 패턴 (route → getList)list-table.vue
7
listAction()
, 
resetAction()
, 
listMovePage()
각 컴포넌트
상세 코드와 금지 패턴: common-patterns.md 참조 (필수)
#模式应用位置
1
<form @submit.prevent="listAction">
list-search.vue
2
@change="listAction"
（select、radio组件）		list-search.vue、list-table.vue
3
@update:modelValue="listAction"
（日期组件）		list-search.vue
4
@update:page="listMovePage"
（分页组件）		list-table.vue
5watch监听模式（route → listParams）list-search.vue
6watch监听模式（route → getList）list-table.vue
7实现
listAction()
、
resetAction()
、
listMovePage()
方法		对应组件
详细代码与禁止模式：必须参考common-patterns.md

입력 방식

输入方式

/peach-gen-ui-proto [모듈명] [옵션]
/peach-gen-ui-proto [模块名] [选项]

옵션

选项

옵션기본값설명
excelN엑셀 다운로드/업로드 기능 (Mock)
fileN파일 업로드 기능 (Mock)
选项默认值说明
excelNExcel下载/上传功能（Mock版）
fileN文件上传功能（Mock版）

예시

示例

/peach-gen-ui-proto notice-board
/peach-gen-ui-proto member-manage excel=Y
/peach-gen-ui-proto product file=Y excel=Y
UI 패턴은 실행 후 대화형으로 선택 (1단계)
/peach-gen-ui-proto notice-board
/peach-gen-ui-proto member-manage excel=Y
/peach-gen-ui-proto product file=Y excel=Y
UI模式将在命令执行后通过交互方式选择（第一步）

워크플로우

工作流程

1단계: UI 패턴 필수 선택

第一步：必须选择UI模式

이 단계는 생략 불가! 기획자에게 반드시 UI 패턴을 질문하고 선택을 받은 후 진행합니다. 선택 없이 코드 생성을 시작하면 안 됩니다.
기획자에게 반드시 아래 질문을 하고 선택을 받으세요:
undefined
此步骤不可省略！ 必须先询问企划人员选择UI模式，确认后再继续开发。 未确认选择不得开始生成代码。
请必须向企划人员询问以下问题，获取选择结果：
undefined

UI 패턴 선택 (필수)

UI模式选择（必填）

어떤 UI 패턴을 사용할까요?
请问要使用哪种UI模式？

기본 UI 패턴 (test-data 가이드 있음)

基础UI模式（提供test-data示例）

패턴설명사용 시기
crud목록 + 모달일반적인 CRUD, 입력 10개 미만
page목록 + 별도 페이지입력 10개 이상, URL 공유 필요
two-depth좌우 분할목록/상세 동시 표시
infinite-scroll무한 스크롤피드형, 모바일 최적화
select-list선택 모달다른 화면에서 데이터 참조
show-more더보기 버튼적은 데이터, 단계별 로드
batch-process일괄 처리순차 작업 진행바
模式说明适用场景
crud列表 + 弹窗普通CRUD场景，输入项少于10个
page列表 + 独立详情页输入项多于10个，需要URL分享
two-depth左右分栏同时展示列表/详情
infinite-scroll无限滚动feed流、移动端适配场景
select-list选择弹窗从其他页面引用数据
show-more加载更多按钮数据量少，分阶段加载
batch-process批量处理顺序任务带进度条

추가 옵션 (기본 패턴과 조합)

附加选项（可与基础模式组合使用）

옵션설명
excel엑셀 다운로드/업로드 (Mock 로컬 생성)
file파일 업로드 (Mock UUID 반환)
选项说明
excelExcel下载/上传（Mock生成本地文件）
file文件上传（Mock返回UUID）

고급 UI 패턴 (MCP 활용, test-data 없음)

高级UI模式（使用MCP，无test-data示例）

패턴설명
adv-search복합 검색 (5개 이상 조건)
calendar달력 UI
kanban칸반 보드
mega-form대량 입력 폼 (50개+)
tab-list탭 내 리스트
선택해주세요 (예: crud, excel=Y)

**가이드 코드 경로**:
- crud: `front/src/modules/test-data/pages/crud/`
- 기타 패턴: `front/src/modules/test-data/pages/[패턴명]/`

---
模式说明
adv-search复合搜索（5个以上查询条件）
calendar日历UI
kanban看板
mega-form大量输入表单（50个以上字段）
tab-list标签页内嵌列表
请选择（例：crud, excel=Y）

**示例代码路径**:
- crud: `front/src/modules/test-data/pages/crud/`
- 其他模式: `front/src/modules/test-data/pages/[模式名]/`

---

2단계: test-data 가이드 코드 확인 + 대상 프로젝트 감지

第二步：确认test-data示例代码 + 识别目标项目配置

bash
undefined
bash
undefined

test-data 모듈 존재 여부 확인

确认test-data模块是否存在

ls front/src/modules/test-data/ 2>/dev/null
ls front/src/modules/test-data/ 2>/dev/null

_common 래퍼 컴포넌트 존재 여부 확인

确认_common包装组件是否存在

ls front/src/modules/_common/components/ 2>/dev/null
ls front/src/modules/_common/components/ 2>/dev/null

빌드 도구 감지

识别构建工具

ls front/package.json && head -20 front/package.json ls front/bun.lockb 2>/dev/null && echo "BUILD_TOOL=bun"

- **test-data 있음** → 가이드 코드 기반으로 생성
- **test-data 없음** → references 문서 기반으로 생성
ls front/package.json && head -20 front/package.json ls front/bun.lockb 2>/dev/null && echo "BUILD_TOOL=bun"

- **存在test-data** → 基于示例代码生成
- **不存在test-data** → 基于参考文档生成

빌드 도구 기준

构建工具规则

파일 존재빌드 도구검증 명령어
bun.lockb
bun
cd front && bunx vue-tsc --noEmit && bun run lint:fix && bun run build
存在的文件构建工具校验命令
bun.lockb
bun
cd front && bunx vue-tsc --noEmit && bun run lint:fix && bun run build

_common 래퍼 우선 사용 (조건부)

优先使用_common包装组件（条件适用）

대상 프로젝트에 
_common/components/
디렉토리가 존재하면 NuxtUI 직접 사용 대신 래퍼 컴포넌트를 우선 사용합니다.
NuxtUI_common 래퍼 (있는 경우 우선)
<UInput>
<p-input-box>
<USelect>
<p-nuxt-select>
<UFormField>
<p-form-field>
<UFileInput>
<p-file-upload>
  • _common/components/
    없으면 → NuxtUI 직접 사용 (기존 방식 유지)
如果目标项目存在
_common/components/
目录，则优先使用包装组件，不直接调用NuxtUI组件。
NuxtUI组件优先使用的_common包装组件（存在时）
<UInput>
<p-input-box>
<USelect>
<p-nuxt-select>
<UFormField>
<p-form-field>
<UFileInput>
<p-file-upload>
  • 不存在
    _common/components/
    时 → 直接使用NuxtUI组件（保留原有逻辑）

2.5단계: 도메인 분석 (Analyze)

2.5步：业务领域分析（Analyze）

test-data UI와 요청된 도메인을 비교 분석합니다:
  1. UI 복잡도 판단: 필드 수, 검색 조건, 테이블 컬럼 구성
  2. Mock 데이터 설계: 도메인에 맞는 현실적인 샘플 데이터 구상
  3. 적응 결정:
    • Must Follow → 그대로 (script setup, 필수 패턴, AI Slop 금지)
    • May Adapt → 도메인 맞춤 (테이블 컬럼, 검색 폼, 모달 폼 구성)
对比test-data示例UI与需求对应的业务领域，做分析：
  1. 判断UI复杂度：字段数量、搜索条件、表格列配置
  2. 设计Mock数据：构思符合业务场景的真实样本数据
  3. 适配决策:
    • 必须遵守 → 完全保留（script setup、强制模式、禁止AI Slop）
    • 可适配 → 结合业务定制（表格列、搜索表单、弹窗表单配置）

3단계: Mock 서비스 + Store + 코드 생성

第三步：生成Mock服务 + Store + 代码

선택된 패턴의 가이드 코드를 기준 골격으로 참조 후 도메인에 맞게 적응:
以选择模式的示例代码为基础骨架，适配业务场景做调整：

3-1. Mock 데이터 생성 (필수)

3-1. 生成Mock数据（必填）

mock-service-pattern.md 참조
mock/[모듈명].mock.ts 생성:
- 도메인 맞춤 샘플 데이터 (5~10건)
- 동적 데이터 생성 함수
- API 시그니처 유지 (프로덕션 전환 대비)
参考**mock-service-pattern.md**
生成mock/[模块名].mock.ts:
- 适配业务的样本数据（5~10条）
- 动态数据生成函数
- 保留API签名（适配后续生产环境切换）

3-2. Store 생성 (Mock useApi() 경유)

3-2. 生成Store（通过Mock useApi()调用）

mock-store-pattern.md 참조
store/[모듈명].store.ts 생성:
- useApi() 경유 패턴 유지
- Mock interceptor가 요청을 가로채서 Mock 데이터 반환
- 프로덕션 전환 시 interceptor만 제거하면 됨
参考**mock-store-pattern.md**
生成store/[模块名].store.ts:
- 保留通过useApi()调用的模式
- Mock拦截器会拦截请求返回Mock数据
- 切换生产环境时仅需移除拦截器即可

3-3. 페이지 생성

3-3. 生成页面

패턴가이드 코드 경로참조 문서
crud
test-data/pages/crud/
page-pattern.md + modal-pattern.md
page
test-data/pages/crud/
+ 
detail-page.vue
page-pattern.md
two-depth
test-data/pages/two-depth/
two-depth-pattern.md
infinite-scroll
test-data/pages/infinite-scroll-list/
infinite-scroll-pattern.md
select-list
test-data/pages/select-list/
select-list-pattern.md
batch-process
test-data/modals/list-table-progress.modal.vue
batch-process-pattern.md
필수 표준 패턴: common-patterns.md 참조
  • Selectbox 패턴 (전체 옵션 value='')
  • Router 동기화 패턴 (listAction, resetAction, watch)
  • Date 검색 패턴 (초기값: 5년 전 ~ 오늘)
模式示例代码路径参考文档
crud
test-data/pages/crud/
page-pattern.md + modal-pattern.md
page
test-data/pages/crud/
+ 
detail-page.vue
page-pattern.md
two-depth
test-data/pages/two-depth/
two-depth-pattern.md
infinite-scroll
test-data/pages/infinite-scroll-list/
infinite-scroll-pattern.md
select-list
test-data/pages/select-list/
select-list-pattern.md
batch-process
test-data/modals/list-table-progress.modal.vue
batch-process-pattern.md
强制标准模式：参考common-patterns.md
  • Selectbox模式（全量选项value=''）
  • Router同步模式（listAction、resetAction、watch）
  • 日期搜索模式（初始值：5年前 ~ 今日）

4단계: 검증 & 완료

第四步：校验 & 完成

bash
undefined
bash
undefined

bun 프로젝트 기준

基于bun项目的校验命令

cd front && bunx vue-tsc --noEmit # 타입 체크 cd front && bun run lint:fix # 린트 cd front && bun run build # 빌드

> 에러 발생 시: 원인 분석 → 코드 수정 → 다시 검증 → 통과할 때까지 반복

---
cd front && bunx vue-tsc --noEmit # 类型检查 cd front && bun run lint:fix # 代码校验修复 cd front && bun run build # 构建

> 出现错误时：分析原因 → 修改代码 → 重新校验 → 重复直到全部通过

---

생성 파일 구조

生成文件结构

front/src/modules/[모듈명]/
├── mock/
│   └── [모듈명].mock.ts          # Mock 데이터 + 동적 생성 함수
├── type/
│   └── [모듈명].type.ts          # 타입 정의 (백엔드 동일 구조)
├── store/
│   └── [모듈명].store.ts         # Pinia Option API (Mock useApi() 경유)
├── pages/
│   ├── list.vue                  # 목록 페이지 (껍데기)
│   ├── list-search.vue           # 검색 영역
│   ├── list-table.vue            # 테이블 영역
│   └── detail-page.vue           # 상세 페이지 (page 패턴)
├── modals/
│   ├── insert.modal.vue          # 등록 모달
│   ├── update.modal.vue          # 수정 모달
│   └── detail.modal.vue          # 상세 모달
├── _[모듈명].routes.ts           # 라우트 정의
└── _[모듈명].validator.ts        # Yup 검증 스키마
front/src/modules/[模块名]/
├── mock/
│   └── [模块名].mock.ts          # Mock数据 + 动态生成函数
├── type/
│   └── [模块名].type.ts          # 类型定义（与后端结构一致）
├── store/
│   └── [模块名].store.ts         # Pinia Option API（通过Mock useApi()调用）
├── pages/
│   ├── list.vue                  # 列表页面（容器）
│   ├── list-search.vue           # 搜索区域
│   ├── list-table.vue            # 表格区域
│   └── detail-page.vue           # 详情页面（page模式使用）
├── modals/
│   ├── insert.modal.vue          # 新增弹窗
│   ├── update.modal.vue          # 编辑弹窗
│   └── detail.modal.vue          # 详情弹窗
├── _[模块名].routes.ts           # 路由定义
└── _[模块名].validator.ts        # Yup校验规则

Bounded Autonomy (자율 적응 규칙)

有限自主适配规则

Must Follow (절대 준수)

必须遵守（绝对不能修改）

  • <script setup>
    필수
  • NuxtUI 컴포넌트 우선, AI Slop 금지
  • 필수 패턴: 
    listAction
    , 
    resetAction
    , 
    listMovePage
    , watch 패턴
  • @submit.prevent="listAction"
    , 
    @change="listAction"
    패턴
  • 모듈 경계: 
    _common
    만 import
  • Mock 데이터는 
    mock/
    디렉토리에 분리
  • useApi() 경유 패턴 유지 (프로덕션 전환 대비)
  • 必须使用
    <script setup>
  • 优先使用NuxtUI组件，禁止AI Slop模式
  • 强制模式：
    listAction
    、
    resetAction
    、
    listMovePage
    、watch监听模式
  • 必须使用
    @submit.prevent="listAction"
    、
    @change="listAction"
    模式
  • 模块边界：仅可import 
    _common
    目录内容
  • Mock数据统一存放在
    mock/
    目录下
  • 保留通过useApi()调用的模式（适配后续生产环境切换）

May Adapt (분석 후 보완)

可适配（分析后调整）

  • 테이블 컬럼 구성 (도메인 필드에 맞춤)
  • 검색 폼 구성 (필드 수에 따른 레이아웃)
  • 모달/페이지 폼 구성 (입력 필드 그룹핑)
  • Mock 데이터 구성 (도메인 특수 샘플)
  • UI 상호작용 흐름 (도메인 특수 UX)
  • 表格列配置（适配业务字段）
  • 搜索表单配置（根据字段数量调整布局）
  • 弹窗/页面表单配置（输入字段分组）
  • Mock数据配置（业务特殊样本）
  • UI交互流程（业务特殊UX需求）

Adapt 조건

适配条件

보완 시 반드시: (1) 이유 설명 (2) Must Follow 미침범 (3) vue-tsc + lint + build 통과
调整时必须满足：（1）说明调整原因（2）不违反必须遵守的规则（3）vue-tsc + lint + build全部校验通过

완료 조건

完成条件

┌─────────────────────────────────────┐
│ 완료 체크리스트                     │
│ □ UI 패턴 선택 완료                 │
│ □ Mock 데이터 생성 완료             │
│ □ Store (Mock 경유) 생성 완료       │
│ □ 페이지/모달 컴포넌트 생성         │
│ □ vue-tsc (타입체크) 통과           │
│ □ lint 통과                         │
│ □ build 성공                        │
└─────────────────────────────────────┘
빌드 성공 없이 완료 선언 금지!
┌─────────────────────────────────────┐
│ 完成检查清单                     │
│ □ UI模式选择完成                 │
│ □ Mock数据生成完成             │
│ □ Store（Mock版）生成完成       │
│ □ 页面/弹窗组件生成         │
│ □ vue-tsc（类型检查）通过           │
│ □ lint通过                         │
│ □ build成功                        │
└─────────────────────────────────────┘
未构建成功不得声明完成！

완료 후 안내

完成后告知内容

UI 프로토타입 생성이 완료되었습니다.

**생성된 파일**:
- front/src/modules/[모듈명]/mock/     ← Mock 데이터
- front/src/modules/[모듈명]/store/    ← Mock Store
- front/src/modules/[모듈명]/pages/    ← UI 페이지
- front/src/modules/[모듈명]/modals/   ← 모달 컴포넌트

**검증 결과**:
- vue-tsc: 통과
- lint: 통과
- build: 통과

**확인 방법**:
cd front && bun run dev
UI原型生成已完成。

**生成的文件**:
- front/src/modules/[模块名]/mock/     ← Mock数据
- front/src/modules/[模块名]/store/    ← Mock Store
- front/src/modules/[模块名]/pages/    ← UI页面
- front/src/modules/[模块名]/modals/   ← 弹窗组件

**校验结果**:
- vue-tsc: 通过
- lint: 通过
- build: 通过

**预览方法**:
cd front && bun run dev

브라우저에서 http://localhost:3000/[모듈명]/list 접속

浏览器访问 http://localhost:3000/[模块名]/list

프로덕션 전환 시:
  1. mock/ 디렉토리 삭제
  2. Store에서 Mock interceptor 제거
  3. 실제 API 엔드포인트 연결 → useApi() 호출 코드는 그대로 유지됩니다.

---
切换生产环境时:
  1. 删除mock/目录
  2. 移除Store中的Mock拦截器配置
  3. 对接真实API端点 → useApi()调用代码完全不需要修改。

---

조건부 참조 가이드 (토큰 절약)

条件参考指南（节省token）

중요: 선택된 패턴의 참조 파일만 읽으세요! 모든 references를 한 번에 로드하지 마세요.
重要：仅读取选中模式对应的参考文件！ 不要一次性加载所有reference文件。

필수 참조 (반드시 읽기 - 생략 금지!)

必看参考（必须读取，不可省略！）

경고: 아래 파일은 어떤 패턴을 선택하든 반드시 먼저 읽어야 합니다! 이 파일을 읽지 않으면 검색, 페이징, URL 상태관리 패턴이 누락됩니다.
  • common-patterns.md - URL Watch 패턴, Selectbox, Router 동기화, Date 검색, 모달 오픈 패턴
  • mock-service-pattern.md - Mock 데이터 정의, 동적 생성, API 시그니처 유지
  • mock-store-pattern.md - Mock useApi() 경유 Store 패턴
警告：无论选择哪种模式，都必须先读取以下文件！ 不读取会导致搜索、分页、URL状态管理模式遗漏。
  • common-patterns.md - URL监听模式、Selectbox、Router同步、日期搜索、弹窗开启模式
  • mock-service-pattern.md - Mock数据定义、动态生成、保留API签名
  • mock-store-pattern.md - 通过Mock useApi()调用的Store模式

패턴별 참조 매핑

模式对应参考文件

선택 패턴읽어야 할 파일
crudbasic/page-pattern.md + basic/modal-pattern.md
pagebasic/page-pattern.md
two-depthbasic/two-depth-pattern.md
infinite-scrollbasic/infinite-scroll-pattern.md
select-listbasic/select-list-pattern.md
batch-processbasic/batch-process-pattern.md
adv-searchadvanced/adv-search-pattern.md
calendaradvanced/calendar-pattern.md
kanbanadvanced/kanban-pattern.md
mega-formadvanced/mega-form-pattern.md
tab-listadvanced/tab-list-pattern.md
选择的模式需要读取的文件
crudbasic/page-pattern.md + basic/modal-pattern.md
pagebasic/page-pattern.md
two-depthbasic/two-depth-pattern.md
infinite-scrollbasic/infinite-scroll-pattern.md
select-listbasic/select-list-pattern.md
batch-processbasic/batch-process-pattern.md
adv-searchadvanced/adv-search-pattern.md
calendaradvanced/calendar-pattern.md
kanbanadvanced/kanban-pattern.md
mega-formadvanced/mega-form-pattern.md
tab-listadvanced/tab-list-pattern.md

옵션별 추가 참조

选项对应附加参考文件

옵션읽어야 할 파일
excel=Yoptions/excel-pattern.md
file=Yoptions/file-upload-pattern.md
validator 필요options/validator-pattern.md
选项需要读取的文件
excel=Yoptions/excel-pattern.md
file=Yoptions/file-upload-pattern.md
需要校验规则options/validator-pattern.md

조건부 참조

场景对应参考文件

상황읽어야 할 파일
로딩 상태 필요core/loading-state-pattern.md
에러 처리 필요core/error-handling-pattern.md
场景需要读取的文件
需要加载状态core/loading-state-pattern.md
需要错误处理core/error-handling-pattern.md

references 전체 목록 (참고용)

references总列表（参考用）

카테고리파일용도
core/mock-service, mock-store, store, type, common, loading-state, error-handling, ui-patterns, visual-guide, common-component-guide핵심 가이드
basic/page, modal, two-depth, infinite-scroll, select-list, batch-process기본 UI 패턴
advanced/adv-search, calendar, kanban, mega-form, tab-list고급 패턴
options/excel, file-upload, validator추가 옵션
guides/validation, completion프로세스 가이드
分类文件用途
core/mock-service、mock-store、store、type、common、loading-state、error-handling、ui-patterns、visual-guide、common-component-guide核心指南
basic/page、modal、two-depth、infinite-scroll、select-list、batch-process基础UI模式
advanced/adv-search、calendar、kanban、mega-form、tab-list高级模式
options/excel、file-upload、validator附加选项
guides/validation、completion流程指南

참조

参考

  • 가이드 코드 (필수): 
    front/src/modules/test-data/
  • Mock 데이터: 
    front/src/modules/[모듈명]/mock/
  • Store: 
    front/src/modules/[모듈명]/store/
test-data 가이드 코드를 기준 골격으로 참조하되, Mock 특화 + 도메인 특성에 맞게 Bounded Autonomy 범위 내에서 적응
  • 示例代码（必填）: 
    front/src/modules/test-data/
  • Mock数据: 
    front/src/modules/[模块名]/mock/
  • Store: 
    front/src/modules/[模块名]/store/
以test-data示例代码为基础骨架，在有限自主适配规则范围内，结合Mock场景与业务特性做调整