export const meta = {
  name: 'build-chanlun-views',
  description: '并行构建缠论阅读站的 5 个页面视图并评审',
  phases: [
    { title: 'Build', detail: '5 个页面视图并行构建' },
    { title: 'Review', detail: '设计一致性与暗色/响应式评审' },
  ],
}

// ============================================================
// 共享约定契约：所有构建 agent 必须遵守
// ============================================================
const CONV = `
你在为一个名为「缠论研习社」的 Vue 3 + Vite + Tailwind v4 + TypeScript 阅读站构建页面。
站点用途：展示缠中说禅《教你炒股票》原文与杂文的沉浸式阅读。设计风格=「现代融合」：玄鉴克制 UI + 衬线正文阅读优化，亮/暗双主题。

## 硬性规范
- 仅写你被分配的那一个 .vue 文件，用 Write 工具写到指定绝对路径。不要创建或修改其它文件。
- 不要运行 pnpm install / build / typecheck / dev 等命令（共享目录会冲突）。只写文件。
- 用 <script setup lang="ts">。类型导入必须用 import type。不要留未使用的变量/导入（会被 vue-tsc 拒绝）。
- UI 文案禁止 emoji。中文标点正确。语义化 HTML（用 <section><article><h1> 等）。
- 颜色/间距/圆角全部用下方语义 Token，禁止写死任意 hex/rgb 颜色值。

## 设计 Token（Tailwind 工具类，已全局定义）
背景：bg-app(应用底色) bg-background(卡片) bg-surface(次级面板) bg-surface-2(更浅悬浮) bg-hover
文本：text-foreground(主) text-muted(次) text-subtle(辅) text-faint(占位/禁用)
品牌/语义：text-primary bg-primary bg-primary-soft(浅蓝底) text-success/warning/danger，及 bg-success/10 等 /10 透明
边框：border-line(默认弱) border-line-strong(分割) border-line-card(卡片描边)
圆角：rounded-sm(8) rounded-md(12) rounded-lg(16) rounded-xl(20) rounded-2xl(24) rounded-full
阴影：shadow-xs shadow-sm shadow-soft shadow-md shadow-lg shadow-xl
字体：font-sans(默认) font-serif(衬线，正文/标题点缀) font-mono
过渡缓动：transition 配合 duration-150/200/300
留白要克制、克制、克制——玄鉴美学核心是「安静、轻、可信」：大量留白、弱边框、柔和阴影。

## 中文图标：lucide-vue-next，按名导入，例如
import { BookOpen, Clock, ArrowRight, Search, ChevronRight } from 'lucide-vue-next'
用 <BookOpen class="size-5" /> 渲染（size-4/5/[18px]）。

## 数据访问：useArticles()（@/composables/useArticles）
返回：{ chanlun, essaysList, latest, featured, all, totalCount, find, neighbors, search }
- chanlun / essaysList / latest / featured 都是 computed（用 .value 在 script 内，模板内直接用）。
- find(category, slug) → Article | undefined
- neighbors(article) → { prev?: ArticleMeta, next?: ArticleMeta }
- search(query) → ArticleMeta[]
调用方式：const { chanlun, latest } = useArticles()

## 类型（@/types/article）
ArticleMeta: { id, slug, category:'chanlun'|'essay'|'notes', title, subtitle?, lesson?, date(ISO字符串), tags:string[], excerpt, readingTime(分钟) }
Article 继承 ArticleMeta 并含 content(markdown字符串)。

## 路由（@/router）
首页 '/'(name:'home')、缠论列表 '/chanlun'(name:'chanlun')、杂谈 '/articles'(name:'articles')、关于 '/about'(name:'about')。
阅读页：name 'reader'，路径 '/read/:category/:slug'，用 <RouterLink :to="{ name:'reader', params:{ category, slug } }">。
用 useRouter()/useRoute() 获取路由。RouterLink 从 'vue-router' 导入。

## 已有组件（按需导入使用，不要重造）
- @/components/ui/BaseButton.vue: props variant('primary'|'outline'|'surface'|'ghost'|'danger'), size('sm'|'md'|'lg'), block(bool), disabled(bool)；默认 slot
- @/components/ui/Badge.vue: props tone('primary'|'neutral'|'success'|'warning'|'danger')；默认 slot
- @/components/ui/Card.vue: props hover(bool), padded(bool,默认true)；默认 slot
- @/components/ui/SearchInput.vue: v-model(modelValue) + placeholder
- @/components/ArticleCard.vue: props article(ArticleMeta), showExcerpt(bool,默认true)——已是 RouterLink 包裹的卡片，直接循环渲染
- @/components/TableOfContents.vue: props items(TocItem[])，TocItem={id,text,level:2|3}

## 工具
- @/utils/cn: cn(...classes), formatDate(iso)->'YYYY年M月D日', formatDateShort(iso)->'MM-DD'
- @/composables/useMarkdown: renderMarkdown(mdString)->htmlString, extractToc(mdString)->TocItem[]
- @/stores/reading: useReadingStore() → { fontSize, fontFamily, showToc, focusMode, toggleToc()... }
- @/stores/theme: useThemeStore()

## 布局说明（重要）
- 首页/缠论列表/杂谈/关于 这 4 个视图，运行在 DefaultLayout 内——该布局已提供 AppHeader(顶栏)+AppSidebar(侧栏)+AppFooter。所以你的视图只写主体内容，不要再加顶栏/侧栏/页脚。
- 阅读视图运行在 ReaderLayout 内——该布局已提供极简顶栏(返回/主题/阅读设置/目录开关)+ReadingProgress。所以阅读视图只写：[目录 | 正文] 网格 + 文章头部 + 正文 + 上下篇导航。
`

const BUILD_SCHEMA = {
  type: 'object',
  additionalProperties: false,
  properties: {
    file: { type: 'string', description: '写入的文件绝对路径' },
    summary: { type: 'string', description: '一句话说明你实现了什么' },
    components_used: { type: 'array', items: { type: 'string' } },
    notes: { type: 'string', description: '任何需要主流程注意的点' },
  },
  required: ['file', 'summary'],
}

// ============================================================
// 各页面规格
// ============================================================
const HOME_SPEC = `${CONV}

## 你的任务：构建首页 HomeView
写入文件：D:/code/chan/src/views/HomeView.vue

首页是站点的门面，要精致、有呼吸感。包含以下区块（用 <section> 组织）：

1. Hero 区（顶部，克制而有气质）：
   - 大标题「缠论研习社」(font-serif, text-4xl~5xl, font-semibold)。
   - 副标题：一句简介，如「缠中说禅《教你炒股票》原文与杂文 · 沉浸式系统性研习」。
   - 两个按钮：BaseButton variant=primary「开始阅读」→ 跳转 featured 文章(用 useArticles().featured 的 category/slug)；BaseButton variant=outline「了解缠论」→ /about。
   - 可加极淡的装饰（如右上角半透明走势曲线 SVG，opacity 很低，不抢戏）。
   - Hero 下方可放一行小统计：文章总数(totalCount)、分类数等，text-subtle。

2. 缠论体系概览（4 个概念卡片）：分型 / 笔与线段 / 走势中枢 / 背驰与买卖点。每个卡片：lucide 图标(在 bg-primary-soft 圆角方块里)+ 标题 + 一句话。整组用 grid（sm:grid-cols-2 lg:grid-cols-4）。卡片用 Card 或自定义 div(bg-background border rounded-lg p-5)。点击可跳转第一课 /read/chanlun/ke-02-fenxing 之类（用 featured 或第一篇 chanlun）。

3. 分类入口（用 @/data/categories 的 categories 数组，3 个）：缠论108课 / 杂谈随笔 / 我的理解。每个卡片显示 label、description、文章数(chanlun.length / essaysList.length / 0)。点击跳转对应路由。notes 分类显示「即将上线」徽标且不可点(或点向 /about)。
   分类数据导入：import { categories } from '@/data/categories'

4. 最新文章：取 useArticles().latest（computed，最多6篇），用 ArticleCard 渲染（grid sm:grid-cols-2）。标题旁有「查看全部 →」链接到 /chanlun。

5. 页尾引言条：一句大字衬线引言「走势无须预测，只需应对。」居中，bg-surface 或带 primary 左边框的引用样式。

区块之间用 py-12 / py-16 等充足纵向留白分隔。整体 max-w 容器用 mx-auto max-w-[1200px] px-4。
`

const CHANLUN_SPEC = `${CONV}

## 你的任务：构建缠论列表页 ChanlunListView
写入文件：D:/code/chan/src/views/ChanlunListView.vue

这是「缠论 108 课」系列的文章列表页。

1. 页头：标题「缠论 108 课」(font-serif, text-3xl, font-semibold) + 副标题描述（取 categories 里 key='chanlun' 的 description）+ 右侧或下方显示文章数「共 N 课」。
2. 搜索栏：用 SearchInput（v-model 一个 query ref），placeholder「搜索课程…」。过滤逻辑：const filtered = computed(() => query.value ? search(query.value) : chanlun.value)。注意 search 返回 ArticleMeta[]。
3. 列表：用 ArticleCard 渲染 filtered。布局用 flex flex-col gap-3（单列堆叠卡片，适合课程列表的顺序阅读感）。
4. 空状态：filtered 为空时显示一个居中提示（图标 + 「未找到相关课程」+ 清除按钮）。
5. 顶部可加一个简短的「学习路径」提示卡（可选）：用 bg-primary-soft 或 bg-surface，说明建议按课次顺序学习。

用 useArticles() 取 chanlun 与 search。用 @/data/categories 取描述。注意：模板里直接用 chanlun（computed 在模板自动解包）；script 里用 chanlun.value。
`

const READER_SPEC = `${CONV}

## 你的任务：构建阅读视图 ArticleReaderView（最核心页面）
写入文件：D:/code/chan/src/views/ArticleReaderView.vue

这是沉浸式阅读页。运行在 ReaderLayout 内（已提供顶栏+进度条，不要再加）。

数据获取：
- const route = useRoute(); const { find, neighbors } = useArticles()
- const article = computed(() => find(route.params.category as ArticleCategory, route.params.slug as string))
- 文章切换时要滚回顶部：watch(() => route.params.slug, () => window.scrollTo({top:0})) （或 watch article）

找不到文章时：渲染一个居中的「未找到文章」状态 + 返回首页/列表的 RouterLink。

找到文章时，布局（网格）：
<div class="mx-auto grid max-w-[1180px] gap-8 px-4 py-10 sm:px-6 lg:grid-cols-[220px_minmax(0,1fr)] lg:py-14">
  <!-- 目录列：桌面端且 reading.showToc 为真时显示 -->
  <aside class="hidden lg:block"> <div class="sticky top-20"> <TableOfContents :items="toc" v-if="toc.length"/> </div> </aside>
  <!-- 正文列 -->
  <article class="min-w-0 mx-auto w-full max-w-[760px]"> ... </article>
</div>
注意：目录列的显隐 = reading.showToc（lg 才显示）。当 reading.showToc 为 false 时，整个 aside 用 hidden；为 true 时 hidden lg:block。可用 :class="reading.showToc ? 'hidden lg:block' : 'hidden'"。

文章头部（在 <article> 内，正文之前）：
- 分类 Badge（chanlun→「第 N 课」primary；essay→「杂谈」neutral）。
- 标题：article.title，font-serif text-3xl sm:text-4xl font-semibold，leading-tight。
- 副标题 article.subtitle（若有）：text-muted。
- meta 行：formatDate(article.date) · 阅读时间 article.readingTime 分钟 · 标签（#tag）。用 text-subtle text-sm，lucide Clock 图标。
- 一条分割线 border-t border-line mt-6。

正文渲染（关键）：
- const html = computed(() => renderMarkdown(article.value.content))
- const toc = computed(() => extractToc(article.value.content))
- 容器：<div class="prose-chan mt-8" :data-font="reading.fontFamily" :data-size="reading.fontSize" v-html="html"></div>
  （prose-chan 的样式与 data-font/data-size 已在 style.css 定义，会驱动衬线/字号）

底部（正文之后）：
- 标签云（如有）。
- 分割线。
- 上一篇/下一篇导航：neighbors(article.value) → { prev, next }。两个卡片横向排列（grid sm:grid-cols-2 gap-4），每张显示「上一篇/下一篇」小标 + 标题，用 RouterLink 指向对应 reader 路由。缺失的一侧显示占位「已是第一篇/最后一篇」(text-subtle)。
- 一个返回列表的链接（返回 /chanlun 或 /articles，依据 article.category）。

务必：导入 ArticleCategory 类型用 import type。watch、computed 从 vue 导入。useRoute 从 vue-router 导入。
`

const ESSAYS_SPEC = `${CONV}

## 你的任务：构建杂谈列表页 OtherArticlesView
写入文件：D:/code/chan/src/views/OtherArticlesView.vue

这是「杂谈随笔」的文章列表页（结构可参考缠论列表页，但气质更"随笔"）。

1. 页头：标题「杂谈随笔」(font-serif text-3xl font-semibold) + 描述（categories 里 key='essay' 的 description）+ 文章数「共 N 篇」。
2. 搜索栏：SearchInput v-model query，过滤 essaysList。
3. 列表：用 ArticleCard 渲染。可用 flex flex-col gap-3 单列，或 grid sm:grid-cols-2 双列（杂谈更适合双列卡片网格）。自行选择更美观的。
4. 空状态：无结果提示。
5. 顶部可加一段引言卡片（可选）：关于缠论作者或市场哲学的短引，bg-surface + primary 左边框引用样式。

用 useArticles() 取 essaysList 与 search。模板内直接用 essaysList；script 内用 essaysList.value。
`

const ABOUT_SPEC = `${CONV}

## 你的任务：构建关于页 AboutView
写入文件：D:/code/chan/src/views/AboutView.vue

关于本站页面。运行在 DefaultLayout 内（已有顶栏侧栏页脚）。

用居中窄栏（max-w-[760px] mx-auto）+ 衬线正文风格组织，分几个 <section>：

1. 页头：标题「关于缠论研习社」(font-serif text-3xl font-semibold) + 一句定位。
2. 「什么是缠论」：用 2-3 段说明缠论是缠中说禅创立的市场分析体系，核心是形态学(分型/笔/线段/中枢/走势类型)+动力学(背驰/买卖点)，强调"无须预测、只需应对"。可用 .prose-chan 排版或自定义段落样式。
3. 「关于缠中说禅」：简述作者（匿名网络ID，2006-2008博客连载《教你炒股票》108课）。提醒可点击「杂谈随笔」看相关文章——放一个 RouterLink。
4. 「关于本站」：说明本站用途（系统研习缠论原文与杂文）、内容来源（抓取整理，仅供学习）、后续计划（结合当下股市的个人理解与实战笔记，即「我的理解」分区即将上线）。
5. 免责声明：用一个小卡片(bg-surface rounded-lg p-4 text-sm text-muted) 说明「本站内容仅供学习研究，不构成任何投资建议；市场有风险，入市需谨慎。」

可以适当用 lucide 图标点缀小标题。排版要克制、有书卷气。不要 emoji。
`

// ============================================================
// 评审规格
// ============================================================
const REVIEW_SPEC = `${CONV}

## 你的任务：评审刚构建的 5 个页面视图
用 Read 工具逐一阅读这 5 个文件：
- D:/code/chan/src/views/HomeView.vue
- D:/code/chan/src/views/ChanlunListView.vue
- D:/code/chan/src/views/ArticleReaderView.vue
- D:/code/chan/src/views/OtherArticlesView.vue
- D:/code/chan/src/views/AboutView.vue

逐一检查并报告问题（不要修改文件，只报告）：
1. TypeScript 正确性：是否有未使用的导入/变量（vue-tsc noUnusedLocals 会报错）、import type 是否用于纯类型导入、props 类型是否正确、computed/watch 用法是否正确。
2. 组件 API 用法：BaseButton/Badge/Card/SearchInput/ArticleCard/TableOfContents 的 props 是否传对（尤其 ArticleCard 的 article 是 ArticleMeta；TableOfContents 的 items 是 TocItem[]）。
3. 设计一致性：是否只用了语义 Token（无写死颜色）、留白是否克制、圆角/阴影是否合规、是否符合玄鉴"安静克制"美学。
4. 暗色模式：所有颜色是否都用语义 Token（能自动适配暗色），有无硬编码深浅色。
5. 响应式：移动端(<lg)与桌面端布局是否合理（grid 断点、hidden/sm:block 等）。
6. 数据访问：useArticles 返回的 computed 在 script 中是否用 .value、模板中是否正确解包。
7. 路由：RouterLink 的 :to 是否正确（reader 用 {name,params}）。
8. 可访问性：按钮有无 aria-label、语义化标签、标题层级。

按严重度 high/medium/low 报告，每条给出 file + issue + 具体修复建议(可粘贴代码)。最后给 overall 总评。
`

const REVIEW_SCHEMA = {
  type: 'object',
  additionalProperties: false,
  properties: {
    findings: {
      type: 'array',
      items: {
        type: 'object',
        additionalProperties: false,
        properties: {
          file: { type: 'string' },
          severity: { type: 'string', enum: ['high', 'medium', 'low'] },
          issue: { type: 'string' },
          suggestion: { type: 'string' },
        },
        required: ['file', 'severity', 'issue', 'suggestion'],
      },
    },
    overall: { type: 'string' },
  },
  required: ['findings', 'overall'],
}

// ============================================================
// 执行
// ============================================================
phase('Build')

const builds = await parallel([
  () => agent(HOME_SPEC, { label: 'build:home', phase: 'Build', schema: BUILD_SCHEMA }),
  () => agent(CHANLUN_SPEC, { label: 'build:chanlun', phase: 'Build', schema: BUILD_SCHEMA }),
  () => agent(READER_SPEC, { label: 'build:reader', phase: 'Build', schema: BUILD_SCHEMA }),
  () => agent(ESSAYS_SPEC, { label: 'build:essays', phase: 'Build', schema: BUILD_SCHEMA }),
  () => agent(ABOUT_SPEC, { label: 'build:about', phase: 'Build', schema: BUILD_SCHEMA }),
])

const ok = builds.filter(Boolean)
log(`已构建 ${ok.length}/5 个视图：${ok.map((b) => b?.file?.split('/').pop()).join(', ')}`)

phase('Review')

const review = await agent(REVIEW_SPEC, { label: 'review:views', phase: 'Review', schema: REVIEW_SCHEMA })

return {
  built: ok.map((b) => ({ file: b.file, summary: b.summary })),
  review,
}