文艺手帐控的宝藏社区：基于HarmonyOS 6.1.1与ArkTS声明式UI的文具社，从奶油白背景到粉紫渐变详情头的二手文具交易全链路开发实战解析

从百乐74金尖钢笔到万宝龙大班149，从初代限量手帐本到和风和纸胶带，从盐系贴纸到火漆印章——本文以一套完整的ArkTS文具社应用为例，深度解析HarmonyOS 6.1.1在文艺手帐文具二手交易场景下的双Tab嵌套架构、14粒子漂浮动效、稀有度四级分级、粉紫渐变详情头、以物换货交换帖等核心技术实现。

一、引言

手帐本、钢笔、胶带、贴纸、工具——这些承载着文艺青年日常创作与记录的文具，在数字时代反而焕发了新的收藏热潮。从百乐74金尖钢笔到万宝龙大班149，从初代限量手帐本到和风和纸胶带，从盐系贴纸到火漆印章，文艺文具收藏已经成为一个庞大的文化市场。然而文艺文具交易长期依赖闲鱼、贴吧等泛平台，缺乏针对手帐文具的专业化功能——稀有度评级、规格区分（F尖/M尖/A5/B5/15mm/30mm）、以物换货、收藏图鉴等核心需求无法得到满足。

本应用（文具社）以"莫兰迪紫+奶油白"文艺手帐风为视觉基调，打造集文具交易、换货交换、收藏图鉴、个人中心四大模块于一体的文艺手帐文具二手交易与收藏社区。18款文具覆盖手帐/钢笔/胶带/贴纸/工具全品类，8条换货交换帖覆盖以物换物场景，5套教程覆盖手帐排版/钢笔保养/胶带拼贴/彩铅上色/火漆制作，9款配件周边覆盖收藏周边，6套图鉴收藏记录收藏进度，3条圈友点评提供真实评价。

本文将从架构设计、色彩系统、数据模型、四大Tab页面、弹框体系、核心技术特性等维度，完整解析这套应用的ArkTS实现。

二、整体架构

本应用采用单组件双Tab嵌套架构——@Entry @Component struct Index作为唯一入口组件，通过@State currentBottomTab控制四大底部Tab（文具/换货/图鉴/我的），文具Tab内部再通过@State currentTopTab控制六大顶部分类Tab（全部/手帐/钢笔/胶带/贴纸/工具），形成双层Tab嵌套。

架构层次：

• 入口层：Index，负责双层Tab切换、头部、底部导航、粒子动效、弹框管理
• 页面层：4个底部Tab对应的Builder方法（bazaarContent/swapContent/collectionContent/mineContent），文具Tab内含6个顶部Tab对应的Builder方法（cityContent/retiredContent/mocContent/figContent/techContent/streetContent）
• 数据层：8个全局const数组（18文具+8换货帖+5教程+9配件周边+6图鉴收藏+3点评+2图表数据+2弹框选项）+1个配色常量PALETTE
• 工具函数层：10+全局纯函数（catColor/catLabel/rarityLabel/rarityColor/tradeBarHeight/rateColor/6个分类筛选函数/swapBadge）
• 弹框层：4种弹框（发布出售/发起交换/下架删除/文具详情），均通过@State布尔值控制显隐

单组件架构的优势在于状态集中管理、数据共享方便、弹框统一调度，适合中等复杂度的应用。双层Tab嵌套是本应用的架构特色——文具作为主品类，内部再按手帐/钢笔/胶带/贴纸/工具细分，用户可以快速切换品类浏览。

三、色彩系统：莫兰迪紫+奶油白文艺手帐风

文艺手帐的视觉语言应该是"温柔、治愈、有手帐本的纸张质感"。本应用采用莫兰迪紫+奶油白配色：

主色体系：

• #9B8AA6 莫兰迪紫：主高亮色、Tab选中态、按钮、标签、渐变——代表文艺与温柔
• #F9F6F0 奶油白：应用根背景、卡片背景、教程步骤背景——代表手帐纸张的温暖质感
• #3B3B3B 深灰：主文字色、深色卡片背景——代表沉稳
• #D58A9F 豆沙粉：Tab指示条、Banner渐变、标签、统计数字、价格——代表少女心与温柔
• #7A9E7E 鼠尾草绿：辅助色、好评率、交换价格、成就标签——代表清新自然
• #8A8A8A 烟灰：辅助文字、未选中Tab、说明文字——代表素雅
• #E5E1DB 浅米灰：分割线、进度条背景——代表层次

浅色背景层次：

• #F9F6F0 奶油白：应用根背景、教程步骤背景
• #FFFFFF 纯白：卡片背景、弹框背景
• #F0ECF3 浅紫：标签背景、选中态背景、高亮卡片背景、我提供背景
• #F2EAF2 浅粉紫：想换物品背景、求购出价中标签、第2件教程高亮
• #EDC4D2 浅粉：Banner渐变终点、稀有度标签背景
• #F5EFE0 浅金：提示背景、热度标签背景
• #E8F7EF 浅绿：成就标签背景

渐变设计：

• 头部：linearGradient angle 135 从#9B8AA6到#6C5B78——莫兰迪紫到深紫的文艺渐变
• 文具节Banner：linearGradient angle 120 从#D58A9F到#EDC4D2——豆沙粉到浅粉的温柔渐变
• 绝版收藏大卡：linearGradient angle 160 从#D58A9F到#9B8AA6——豆沙粉到莫兰迪紫的文艺渐变
• 文具详情头部：linearGradient angle 135 从#D58A9F到#F0ECF3——豆沙粉到浅紫的明快渐变
• 发布出售弹框头部：linearGradient angle 120 从#9B8AA6到#6C5B78——与头部一致的紫渐变
• 我的页会员卡：linearGradient angle 120 从#9B8AA6到#6C5B78——与头部一致的紫渐变

莫兰迪紫+奶油白的配色通过奶油白根背景+纯白卡片+浅紫/浅粉高亮背景营造手帐纸张的温暖空间感，豆沙粉#D58A9F作为Tab指示条和Banner色，莫兰迪紫#9B8AA6作为主高亮和按钮色，深灰#3B3B3B作为主文字色，确保视觉一致性和文艺手帐韵味。

四、数据模型

应用定义了7个接口，覆盖文艺文具交易全链路：

• StationeryItem文具（id/name/eng/cat/price/rarity/year/rating/starStr/seller/tag/desc/want/sales/emoji/size）——18款，含中英文名称、分类、稀有度0-100、发行年份、规格（F尖/M尖/A5/B5/15mm/30mm/48色/电子版等）、想换物品等文具特色字段
• SwapItem换货帖（id/user/avatar/offer/want/time/likes/content/place）——8条交换帖，含我提供/我想换/地点/点赞数
• GuideItem教程指南（id/name/type/pages/author/likes/downloads/emoji/steps）——5套教程，含步骤数组
• AccessoryItem配件周边（id/name/series/price/condition/seller/emoji/desc）——9款配件
• CollectionItem图鉴收藏（id/name/series/owned/total/rate/emoji）——6套图鉴，含已收/总数/进度百分比
• StationeryReview点评（id/user/setName/starStr/content）——3条点评
• ColorPalette配色（bg/card/purple/cream/deep/pink/green/sub/line）——9色配色常量

rarity稀有度字段是文具藏品的特色设计——0-100数值，通过rarityLabel函数映射为四级（传世级≥95/稀有级≥80/紧俏级≥60/流通级<60），通过rarityColor函数映射为四色（豆沙粉/橙/蓝/鼠尾草绿），在稀有度柱状图和文具详情中直接渲染。size规格字段区分F尖/M尖/A5/B5/15mm/30mm/48色等不同规格，want想换物品字段支持以物换货场景。

五、Tab0 文具交易（双Tab嵌套）

文具页是应用的核心，采用底部Tab+顶部Tab双层嵌套架构。顶部6个分类Tab（全部/手帐/钢笔/胶带/贴纸/工具），每个Tab有独立的布局风格：

全部Tab：Banner+双列瀑布

• 豆沙粉渐变Banner：文具节春季专场+精美文具3天限时+绝版收藏/精美胶带标签
• 全城新上架：双列瀑布布局，左列2件（金属直尺/绘图橡皮），右列1件（刻刀专用工具，浅粉紫高亮背景），每件含emoji/中文名/英文名/描述/价格/标签

手帐Tab：横滑大卡+稀有度柱状图+捡漏榜

• 绝版收藏专区：3件横滑大卡（百乐74钢笔/万宝龙大班149/初代手帐本），粉紫渐变背景160宽，含emoji/名称/英文+年份/价格+稀有度标签
• 稀有度排行：3根柱状图（85/95/88），第三根初代手帐本用浅粉高亮，底部说明"万宝龙大班149以95分稀有度登顶，市面流通不足十支"
• 今日捡漏榜：3件排行列表，第1名豆沙粉数字，含排名/emoji/名称+稀有度+想换/价格

钢笔Tab：教程时间轴

• 5套教程时间轴布局（手帐排版基础教程/钢笔保养指南/胶带拼贴技巧/彩铅上色技巧/火漆印章制作指南），左侧emoji+豆沙粉竖线连接，右侧卡片含名称/下载数/作者+类型+页数/步骤列表（带序号圆点）/点赞+教程可下载

胶带Tab：三列格子+交换建议

• 配件周边三列网格（9款配件，31%宽度），每件含emoji/名称/系列/价格
• 配件交换行情：偶数ID配件的交换列表，含emoji/名称+品相/描述/价格（鼠尾草绿）

贴纸Tab：对决卡+侧栏统计

• 贴纸对决：百乐74 VS 和风胶带，两张粉紫渐变对决卡中间VS标识
• 左侧3件文具列表（辉柏嘉彩铅/无印良品凝胶笔/得力修正带），右侧3格统计（12本周文具成交豆沙粉/1.8万文具总交易额复古金/94%好评率鼠尾草绿）

工具Tab：标签云+紧凑列表

• 收藏标签云：6套图鉴（钢笔/手帐本/胶带/贴纸/墨水/工具），浅紫背景chip
• 3件紧凑列表（复古邮戳印章/墨水色彩雫/本子便签本），第3件浅紫高亮背景，含稀有度彩色标签
• 底部提示：集齐三大文具可召唤隐藏福利：钢笔+手帐+胶带

双层Tab嵌套让用户可以在文具主Tab内快速切换6大品类，每个品类有独立的视觉布局和数据展示方式，避免单一布局的单调感。

六、Tab1 换货交换

换货页是文艺文具交易的特色功能——以物换货。由两个层次构成：

1. 统计条+发交换按钮：四格统计（156在交换中豆沙粉/42今日成交复古金/98%面交好评鼠尾草绿）+右侧发交换按钮（豆沙粉底，触发发起交换弹框）。

2. 换货帖列表：8条交换帖卡片，每帖含：

• 头部：头像emoji+用户名+热度标签（🔥热门≥50/👍热度≥30/🌱新帖<30，通过swapBadge函数动态生成）+时间+地点+右侧⋯菜单（触发下架删除弹框）
• 交换区：我提供（浅紫背景）⇄ 我想换（浅粉紫背景），左右对称布局
• 内容：帖文描述
• 底部：📍地点标签+❤️点赞数

换货页解决了文艺文具交易中"以物换货"的核心需求——文具控可以用自己的闲置钢笔/手帐/胶带交换心仪的宝贝，通过地点标签支持线下面交，通过热度标签筛选热门交换帖。

七、Tab2 收藏图鉴

图鉴页是收藏进度管理功能。由三个层次构成：

1. 标题+登记按钮：我的文具图鉴标题+记录每一件心头好的收藏进度+右侧✚登记按钮（莫兰迪紫底，触发发布出售弹框复用）。

2. 图鉴进度列表：6套图鉴（钢笔/手帐本/胶带/贴纸/墨水/工具），每套含：

• 头部：emoji+名称+英文系列名+已收X/总数+右侧进度百分比（通过rateColor函数动态着色：≥55鼠尾草绿/≥40复古金/<40豆沙粉）
• 进度条：双色进度条（已收部分rateColor色+未收部分浅米灰），宽度通过百分比动态计算

3. 图鉴成就墙：4个成就标签（🎖️钢笔收藏家/🏆手帐达人/🎀胶带控/✂️手工大触），不同颜色背景。

图鉴页让文具控可以系统化管理自己的收藏进度，通过进度条和百分比直观看到每套图鉴的完成度，通过成就墙增加收藏的趣味性和成就感。

八、Tab3 个人中心

我的页是文具控个人信息管理。由三个层次构成：

1. 会员信息卡：紫渐变背景（与头部一致），含📚头像+文具收藏家小楠+LV.10资深文具控·信用分990+右侧＞箭头+三格统计（38在售文具浅紫/12求购中浅紫/¥2.8万累计成交额浅紫）。

2. 我的求购清单：3件求购文具（复古邮戳印章/刻刀专用工具/绘图橡皮），每件含emoji/名称+预算+想换/右侧出价中标签（豆沙粉底浅粉紫背景）。

3. 常去面交点：5个地点列表（光谷广场站/江汉路站/洪山广场站/楚河汉街站/线上互换），每个含不同emoji（🚇/🏬/🚌/🏪/📦）+地点名+右侧站点说明。

我的页通过求购清单和常去面交点两个特色功能，将文艺文具交易的线下场景融入个人中心，让文具控可以管理自己的求购需求和常去的线下交易地点。

九、弹框体系

本应用有4种弹框，均通过@State布尔值控制显隐，zIndex通过Stack层叠实现：

1. 发布出售弹框（新增）：88%宽76%高，紫渐变头部（📚发布出售+闲置回血好物不愁卖），滚动内容含：要出售的文具（8款文具chip选择，选中莫兰迪紫底白字）+成色说明（5档chip：全新未拆/仅拆封/9成新/8成新/有瑕疵，选中豆沙粉底白字）+出售价格（−/¥价格/＋步进器，步进10元，价格>2000显示"高价好物建议包邮"否则"实惠价更容易出手"）+宝贝描述（TextInput输入）+取消/上架出售双按钮。

2. 发起交换弹框（新增）：88%宽72%高，豆沙粉纯色头部（🤝发起交换+用闲置换心头好文具控互助），滚动内容含：我提供（5款文具chip选择，选中深灰底白字）+我想换可多选（5款文具chip，选中豆沙粉底白字带✓）+面交地点（5个地点chip，选中莫兰迪紫底白字）+安全提示（💡交换双方可自行协商补差价，面交请选择人流密集的公共场所，注意安全）+再想想/发布交换帖双按钮。

3. 下架删除弹框：72%宽居中，🗑️图标+下架这件文具？+说明文字（下架后买家将无法搜索到这条信息，收藏和留言会一并清空，可重新上架）+留着（莫兰迪紫底浅紫背景）/确认下架（豆沙粉底白字）双按钮。

4. 文具详情弹框：88%宽78%高，豆沙粉到浅紫渐变头部（emoji+中文名+英文名+标签+稀有度标签），滚动内容含：四格数据（售价豆沙粉/规格莫兰迪紫/稀有度动态色/年份复古金）+宝贝描述（描述文字+卖家+星级评分）+卖家想换（🤝+想换物品，浅粉紫背景）+圈友点评（3条点评卡片）+留言问问（莫兰迪紫底浅紫背景）/立即购买（豆沙粉底白字）双按钮。

所有弹框均通过Stack层叠+半透明黑色背景（99000000）+居中布局实现，点击背景区域关闭弹框。

十、核心技术特性

1. 双Tab嵌套架构：底部4Tab+文具Tab内部顶部6Tab，通过两个@State（currentBottomTab/currentTopTab）独立控制，if-else链分发到对应的Builder方法，实现双层分类浏览。

2. 14粒子漂浮动效：aboutToAppear生命周期中buildParticles生成14个粒子（🖊️/📔/🎀/✨/✂️五种emoji随机，大小12-22px，速度0.6-2.0，透明度0.2-0.6），setInterval每80ms调用driftParticles更新x坐标（超出360重置为-20），通过position绝对定位漂浮在页面上，营造手帐文具店氛围。aboutToDisappear中clearInterval清理定时器避免内存泄漏。

3. 稀有度四级分级：rarity字段0-100数值，通过rarityLabel映射为四级标签（传世级≥95/稀有级≥80/紧俏级≥60/流通级<60），通过rarityColor映射为四色（豆沙粉/橙/蓝/鼠尾草绿），在柱状图、文具详情、紧凑列表中统一渲染，数据驱动UI。

4. 粉紫渐变头部设计：头部、绝版收藏大卡、发布出售弹框头部、我的页会员卡均使用莫兰迪紫#9B8AA6到深紫#6C5B78或豆沙粉#D58A9F的linearGradient渐变，豆沙粉#D58A9F文字和标签在深色背景上形成温柔对比，营造文艺手帐感。

5. 以物换货交换帖：换货页每条帖子采用我提供（浅紫背景）⇄我想换（浅粉紫背景）的对称布局，通过swapBadge函数根据点赞数动态生成热度标签（🔥热门/👍热度/🌱新帖），支持线下面交，解决文艺文具交易中的以物换货需求。

6. 全局纯函数工具集：10+全局纯函数（catColor/catLabel/rarityLabel/rarityColor/tradeBarHeight/rateColor/6个分类筛选函数/swapBadge），将数据到UI的映射逻辑抽离为纯函数，便于复用和维护，符合函数式编程思想。

7. 分类筛选函数：6个函数（retiredSets/mocSets/figSets/techSets/streetSets/classicSets）通过数组切片返回对应分类的3件文具，cityLeft/cityRight返回全部Tab的双列数据，hotSets返回热门文具，数据筛选逻辑清晰。

8. 详情数据取值方法：14个detailXxx方法（detailName/detailEng/detailEmoji/detailPrice/detailSize/detailRarity/detailYear/detailSeller/detailTag/detailStar/detailRating/detailDesc/detailWant）通过遍历STATIONERIES数组查找selectedStationeryId对应的文具字段，在详情弹框中调用，避免在Builder中写复杂的查找逻辑。

9. 步进器价格输入：发布出售弹框的价格采用−/¥价格/＋步进器设计，步进10元，通过@State sellPrice控制，价格>2000时动态显示"高价好物建议包邮"提示，交互友好。

10. Stack层叠弹框管理：4种弹框通过Stack层叠+@State布尔值控制，半透明黑色背景99000000，点击背景关闭，弹框内容居中，zIndex自动由Stack层叠顺序决定，无需手动管理zIndex。

十一、同类对比

维度	通用二手文具App	本应用（文具社）
主题	浅色/红色为主	莫兰迪紫+奶油白文艺手帐风
架构	单Tab或简单分类	双Tab嵌套（底部4+顶部6）
动效	无或简单	14个粒子漂浮动效
稀有度	无或简单星级	0-100数值+四级分级+四色映射
以物换货	无或简单留言	交换帖+我提供⇄我想换对称布局
教程指南	无或外部链接	5套时间轴布局教程+步骤列表
收藏图鉴	无或简单收藏	6套图鉴+进度条+成就墙
求购清单	无	3件求购+预算+想换+出价中
常去面交点	无	5个地点+站点说明
弹框	2-3种	4种（发布出售/发起交换/下架/详情）

十二、完整代码结构总览

1305.ets
├── 数据结构（7个interface）
├── 静态配置（PALETTE配色 + 2个Tab配置 + 2个弹框选项 + 2个图表数据）
├── 静态数据（8个数组：18文具+8换货帖+5教程+9配件周边+6图鉴+3点评）
├── 全局纯函数（10+个：catColor/catLabel/rarityLabel/rarityColor/rateColor/6分类筛选/swapBadge）
├── Index入口组件（@Entry @Component）
│   ├── 状态（currentBottomTab/currentTopTab/selectedStationeryId/4个弹框显隐/出售表单/交换表单/particles粒子）
│   ├── 生命周期（aboutToAppear生成粒子+启动定时器/aboutToDisappear清理定时器）
│   ├── 粒子方法（buildParticles/driftParticles）
│   ├── 详情取值方法（14个detailXxx）
│   ├── 头部Builder
│   ├── 顶部Tab Builder
│   ├── 6个顶部Tab内容Builder（city/retired/moc/fig/tech/street）
│   ├── 文具首页Builder（bazaarContent）
│   ├── 换货页Builder（swapContent）
│   ├── 图鉴页Builder（collectionContent）
│   ├── 我的页Builder（mineContent）
│   ├── 底部Tab Builder
│   ├── 4种弹框Builder（sellModal/swapModal/deleteModal/detailModal）
│   ├── 交换多选辅助方法（pickedWant/toggleWant）
│   └── build主布局（Stack层叠+Column内容+粒子+4弹框）

十三、开发环境搭建

13.1 环境要求

DevEco Studio 5.0+（支持HarmonyOS 6.1.1）、HarmonyOS SDK API 24、Node.js 18+、至少8GB内存。

13.2 安装DevEco Studio

从华为开发者官网下载最新版本，运行安装包，选择安装路径，勾选创建桌面快捷方式，点击安装。

13.3 配置SDK

首次启动后进入File > Settings > HarmonyOS SDK，勾选API 24及以上版本，点击Apply等待下载完成。

13.4 创建项目

选择Create Project > Empty Ability，配置项目名称、包名、保存路径，选择Compile SDK为API 24，点击Finish。

13.5 运行应用

将1305.ets代码替换到entry/src/main/ets/pages/Index.ets，连接HarmonyOS设备或启动模拟器，点击运行按钮预览。

13.6 预览调试

DevEco Studio提供实时预览功能，编辑器右侧打开Previewer面板，支持多设备尺寸预览、深色模式切换、组件树inspect等调试能力。

十四、总结展望

本文完整解析了基于HarmonyOS 6.1.1的文具社应用，从莫兰迪紫+奶油白文艺手帐配色系统、双Tab嵌套架构、文具藏品数据模型（含稀有度0-100/规格/想换物品等特色字段）、文具交易六大品类独立布局（全部双列瀑布/手帐横滑大卡+稀有度柱状图+捡漏榜/钢笔教程时间轴/胶带三列网格/贴纸对决卡+侧栏统计/工具标签云+紧凑列表）、换货以物换物交换帖、收藏图鉴进度条、个人中心求购清单+常去面交点，到4种弹框体系、14粒子漂浮动效、稀有度四级分级、粉紫渐变头部、全局纯函数工具集、详情数据取值方法，展现了ArkTS在文艺手帐文具二手交易场景下的完整工程实践。

核心价值：

1. 莫兰迪紫+奶油白文艺配色：6处linearGradient渐变营造手帐本的温柔纸张质感
2. 双Tab嵌套架构：底部4Tab+顶部6Tab，双层分类浏览体验
3. 14粒子漂浮动效：setInterval驱动emoji粒子漂浮，aboutToDisappear清理定时器
4. 稀有度四级分级：0-100数值→四级标签→四色映射，数据驱动UI
5. 以物换货交换帖：我提供⇄我想换对称布局+热度标签动态生成+线下面交
6. 收藏图鉴进度管理：6套图鉴+双色进度条+成就墙，收藏系统化
7. 全局纯函数工具集：10+纯函数抽离数据到UI映射逻辑，代码可维护

未来可扩展：

• 接入真实文具数据库，自动识别钢笔型号和稀有度，替代手动评级
• 粒子动效接入设备陀螺仪，随手机倾斜方向漂移，增强沉浸感
• 稀有度接入真实拍卖数据和市场行情，动态更新稀有度评分
• 以物换货接入智能匹配算法，根据文具品类和价值推荐交换对象
• 图鉴接入NFC扫码登记，扫描文具NFC标签自动添加到图鉴
• 接入手帐排版直播功能，手帐达人可以直播展示排版技巧请圈友在线学习
• 求购清单接入推送通知，有匹配文具时自动提醒文具控

文具社，让每一支笔都找到懂它的手，让笔尖流转、纸间生花。

---

附录：完整源码

// ============================================================
// 1305.ets - 文具社
// 场景：手帐本/钢笔/胶带/贴纸/工具的二手交易与收藏社区（文艺风）
// 风格：莫兰迪紫 #9B8AA6 + 奶油白 #F9F6F0 文艺手帐风
// 底部Tab：文具 / 换货 / 图鉴 / 我的
// 顶部Tab：全部 / 手帐 / 钢笔 / 胶带 / 贴纸 / 工具
// 弹框：发布出售(新增) / 发起交换(新增) / 下架(删除) / 文具详情(详情)
// ============================================================

// ---------------- 配色 ----------------
interface ColorPalette {
  bg: string;
  card: string;
  purple: string;
  cream: string;
  deep: string;
  pink: string;
  green: string;
  sub: string;
  line: string;
}

const PALETTE: ColorPalette = {
  bg: '#F9F6F0',
  card: '#FFFFFF',
  purple: '#9B8AA6',
  cream: '#F9F6F0',
  deep: '#3B3B3B',
  pink: '#D58A9F',
  green: '#7A9E7E',
  sub: '#8A8A8A',
  line: '#E5E1DB'
};

// ---------------- 通用结构 ----------------
interface TabItem { label: string; icon: string; }
interface ParticleItem { x: number; emoji: string; size: number; speed: number; opacity: number; }

// ---------------- 文具条目 ----------------
interface StationeryItem {
  id: number; name: string; eng: string; cat: string; price: number;
  rarity: number; year: number; rating: number; starStr: string; seller: string;
  tag: string; desc: string; want: string; sales: number; emoji: string; size: string;
}

// ---------------- 交换帖 ----------------
interface SwapItem {
  id: number; user: string; avatar: string; offer: string; want: string;
  time: string; likes: number; content: string; place: string;
}

// ---------------- 教程/指南 ----------------
interface GuideItem {
  id: number; name: string; type: string; pages: number; author: string;
  likes: number; downloads: number; emoji: string; steps: string[];
}

// ---------------- 配件/周边 ----------------
interface AccessoryItem {
  id: number; name: string; series: string; price: number; condition: string;
  seller: string; emoji: string; desc: string;
}

// ---------------- 图鉴收藏 ----------------
interface CollectionItem {
  id: number; name: string; series: string; owned: number; total: number; rate: number; emoji: string;
}

// ---------------- 点评 ----------------
interface StationeryReview {
  id: number; user: string; setName: string; starStr: string; content: string;
}

// ---------------- Tab 配置 ----------------
const BOTTOM_TABS: TabItem[] = [
  { label: '文具', icon: '🖊️' }, { label: '换货', icon: '🤝' }, { label: '图鉴', icon: '📖' }, { label: '我的', icon: '📚' }
];

const TOP_TABS: TabItem[] = [
  { label: '全部', icon: '🧿' }, { label: '手帐', icon: '📓' }, { label: '钢笔', icon: '🖋️' },
  { label: '胶带', icon: '🎀' }, { label: '贴纸', icon: '✨' }, { label: '工具', icon: '✂️' }
];

// ---------------- 文具数据（18款写死） ----------------
const STATIONERIES: StationeryItem[] = [
  { id: 1, name: '百乐 74 钢笔', eng: 'Pilot 74 Fountain Pen', cat: 'retired', price: 1200, rarity: 85, year: 1974, rating: 5.0, starStr: '⭐⭐⭐⭐⭐', seller: '钢笔收藏家', tag: '14K金尖', desc: '百乐经典14K金尖，书写顺滑，笔身树脂透亮，F尖适合日常书写，品相极佳。', want: '换 写乐21K', sales: 3, emoji: '🖋️', size: 'F尖' },
  { id: 2, name: '万宝龙 大班149', eng: 'Montblanc 149', cat: 'retired', price: 8800, rarity: 95, year: 1980, rating: 5.0, starStr: '⭐⭐⭐⭐⭐', seller: '老钢笔玩家', tag: '限量版', desc: '万宝龙大班149，18K金笔尖，笔身树脂饱满，书写感极佳，收藏价值极高。', want: '换 百利金', sales: 1, emoji: '💎', size: 'M尖' },
  { id: 3, name: '初代 手帐本', eng: 'First Journal', cat: 'retired', price: 580, rarity: 88, year: 2015, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '手帐控小楠', tag: '绝版限量', desc: '初代限量款手帐本，扉页有编号，纸张顺滑，可平铺，收藏价值高。', want: '换 新款手帐', sales: 5, emoji: '📔', size: 'A5' },
  { id: 4, name: '手帐排版教程', eng: 'Journal Layout Guide', cat: 'moc', price: 39, rarity: 30, year: 2025, rating: 4.9, starStr: '⭐⭐⭐⭐⭐', seller: '手帐排版师', tag: '入门必学', desc: '超详细手帐排版教程，从基础布局到进阶拼贴，适合新手快速上手。', want: '可换胶带', sales: 156, emoji: '📐', size: '电子版' },
  { id: 5, name: '胶带 和纸胶带', eng: 'Washi Tape', cat: 'moc', price: 89, rarity: 45, year: 2024, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '胶带收藏控', tag: '和风系列', desc: '日本和风胶带，图案精美，可手撕，适合各种拼贴，超值。', want: '换 贴纸', sales: 98, emoji: '🎀', size: '15mm' },
  { id: 6, name: '复古 火漆印章', eng: 'Vintage Wax Seal', cat: 'moc', price: 160, rarity: 55, year: 2019, rating: 4.9, starStr: '⭐⭐⭐⭐⭐', seller: '复古工艺师', tag: '铜头木质', desc: '复古火漆印章，铜头工艺，搭配蜡烛，制作的封印特别有仪式感。', want: '换 钢笔', sales: 12, emoji: '📮', size: '25mm' },
  { id: 7, name: '斑马 复古中性笔', eng: 'Zebra Sarasa', cat: 'fig', price: 25, rarity: 30, year: 2022, rating: 4.7, starStr: '⭐⭐⭐⭐', seller: '文具批发商', tag: '复古5色', desc: '斑马复古中性笔，5色套装，书写流畅，颜色复古高级。', want: '换 其他颜色', sales: 30, emoji: '🖊️', size: '0.5mm' },
  { id: 8, name: '国誉 活页本', eng: 'Kokuyo Binder', cat: 'fig', price: 45, rarity: 25, year: 2021, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '文具控', tag: '可替换内页', desc: '国誉活页本，可替换内页，纸张顺滑，适合做笔记和手帐，超实用。', want: '换 贴纸', sales: 20, emoji: '📓', size: 'B5' },
  { id: 9, name: '盐系 贴纸包', eng: 'Salt Stickers', cat: 'fig', price: 35, rarity: 40, year: 2023, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '贴纸贩卖机', tag: '盐系清新', desc: '盐系贴纸，图案可爱清新，适合装饰手帐、信封和卡片。', want: '换 胶带', sales: 40, emoji: '✨', size: '100张' },
  { id: 10, name: '辉柏嘉 彩铅', eng: 'Faber-Castell Pencils', cat: 'tech', price: 180, rarity: 35, year: 2020, rating: 4.9, starStr: '⭐⭐⭐⭐⭐', seller: '画画爱好者', tag: '水溶性', desc: '辉柏嘉水溶性彩铅，色彩丰富，易上色，可干湿两用，超好用。', want: '换 马克笔', sales: 15, emoji: '🎨', size: '48色' },
  { id: 11, name: '无印良品 凝胶笔', eng: 'MUJI Gel Pen', cat: 'tech', price: 30, rarity: 20, year: 2023, rating: 4.7, starStr: '⭐⭐⭐⭐', seller: '极简主义者', tag: '按动式', desc: '无印良品凝胶笔，按动式设计，书写流畅，笔杆磨砂，手感极佳。', want: '换 其他笔', sales: 50, emoji: '🖊️', size: '0.38mm' },
  { id: 12, name: '得力 修正带', eng: 'Deli Correction Tape', cat: 'tech', price: 15, rarity: 15, year: 2024, rating: 4.5, starStr: '⭐⭐⭐⭐', seller: '文具杂货铺', tag: '大容量', desc: '得力修正带，顺滑不断带，透明外壳，方便观察余量。', want: '换 橡皮', sales: 35, emoji: '📏', size: '30m' },
  { id: 13, name: '复古 邮戳印章', eng: 'Vintage Postmark', cat: 'street', price: 78, rarity: 45, year: 2018, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '复古店主', tag: '榉木材质', desc: '复古邮戳印章，榉木把手，图案精美，适合用于手帐和信封。', want: '换 火漆', sales: 10, emoji: '📮', size: '30mm' },
  { id: 14, name: '墨水 色彩雫', eng: 'Iroshizuku Ink', cat: 'street', price: 120, rarity: 50, year: 2017, rating: 4.9, starStr: '⭐⭐⭐⭐⭐', seller: '墨水控', tag: '玻璃瓶装', desc: '百乐色彩雫墨水，玻璃瓶装，颜色丰富，适合用于钢笔画画。', want: '换 墨水', sales: 18, emoji: '💧', size: '50ml' },
  { id: 15, name: '本子 便签本', eng: 'Sticky Notes', cat: 'street', price: 20, rarity: 30, year: 2023, rating: 4.7, starStr: '⭐⭐⭐⭐', seller: '文具小店', tag: '多色', desc: '便签本，多色可选，可粘贴，方便记事情，高颜值。', want: '换 贴纸', sales: 60, emoji: '📝', size: 'N次贴' },
  { id: 16, name: '刻刀 专用工具', eng: 'Precision Knife', cat: 'classic', price: 45, rarity: 25, year: 2022, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '手作工具', tag: '手工必备', desc: '刻刀工具，可替换刀片，适合裁剪纸张和制作模型。', want: '换 尺子', sales: 25, emoji: '🔪', size: '标准' },
  { id: 17, name: '尺子 金属直尺', eng: 'Metal Ruler', cat: 'classic', price: 18, rarity: 20, year: 2024, rating: 4.6, starStr: '⭐⭐⭐⭐', seller: '文具基础', tag: '不锈钢', desc: '金属直尺，刻度清晰，材质坚固，适合画线使用。', want: '换 铅笔', sales: 45, emoji: '📏', size: '30cm' },
  { id: 18, name: '橡皮 绘图橡皮', eng: 'Drawing Eraser', cat: 'classic', price: 12, rarity: 15, year: 2024, rating: 4.5, starStr: '⭐⭐⭐⭐', seller: '文具消耗品', tag: '不伤纸张', desc: '绘图橡皮，擦拭干净，不伤纸张，适合画图和写字。', want: '换 铅笔', sales: 50, emoji: '🧼', size: '标准' }
];

// ---------------- 交换帖数据（8条写死） ----------------
const SWAPS: SwapItem[] = [
  { id: 1, user: '钢笔收藏家', avatar: '🖋️', offer: '百乐74', want: '写乐21K', time: '今天 13:20', likes: 46, content: '14K金尖钢笔换21K，都是好笔，可补差价，面交地铁站。', place: '光谷广场站' },
  { id: 2, user: '手帐控小楠', avatar: '📔', offer: '初代手帐本', want: '新款手帐本', time: '今天 11:05', likes: 38, content: '绝版手帐换新款，可补差价，成色好，喜欢手帐的朋友来。', place: '江汉路站' },
  { id: 3, user: '胶带收藏控', avatar: '🎀', offer: '和风胶带', want: '盐系贴纸', time: '昨天 18:42', likes: 61, content: '日本和风胶带换贴纸，多换一好商量，诚心换。', place: '洪山广场站' },
  { id: 4, user: '手帐排版师', avatar: '📐', offer: '排版教程', want: '任意胶带', time: '昨天 15:30', likes: 29, content: '电子版教程免费换，换取任意有缘的胶带，学生党优先。', place: '线上交换' },
  { id: 5, user: '墨水控', avatar: '💧', offer: '色彩雫墨水', want: '复古墨水瓶', time: '前天 20:15', likes: 22, content: '墨水换墨水，都是好墨水，可补差价，诚心换。', place: '楚河汉街站' },
  { id: 6, user: '文具杂货铺', avatar: '📏', offer: '修正带套装', want: '便签本', time: '前天 09:50', likes: 41, content: '修正带换便签本，都是实用文具，补差价换，可聊聊看。', place: '线上互换' },
  { id: 7, user: '复古工艺师', avatar: '📮', offer: '火漆印章', want: '邮戳印章', time: '3天前 22:08', likes: 55, content: '火漆印章换邮戳印章，都是复古好物，愿补差价，面交优先。', place: '武昌火车站' },
  { id: 8, user: '学生文具党', avatar: '✂️', offer: '刻刀套装', want: '橡皮', time: '4天前 14:26', likes: 17, content: '刻刀换橡皮，都是实用件，学生党不容易，大家帮帮忙。', place: '线上交换' }
];

// ---------------- 教程/指南数据（5条写死） ----------------
const GUIDES: GuideItem[] = [
  { id: 1, name: '手帐排版基础教程', type: '排版', pages: 20, author: '手帐排版师', likes: 342, downloads: 2100, emoji: '📐', steps: ['基础布局设计 1-8页', '配色技巧 9-14页', '边框装饰 15-20页'] },
  { id: 2, name: '钢笔保养指南', type: '保养', pages: 15, author: '钢笔收藏家', likes: 276, downloads: 1580, emoji: '🖋️', steps: ['拆笔清洗方法 1-5页', '上墨注意事项 6-10页', '日常收纳保养 11-15页'] },
  { id: 3, name: '胶带拼贴技巧', type: '拼贴', pages: 30, author: '胶带收藏控', likes: 415, downloads: 3300, emoji: '🎀', steps: ['胶带分类 1-10页', '撕贴手法 11-20页', '创意拼贴案例 21-30页'] },
  { id: 4, name: '彩铅上色技巧', type: '绘画', pages: 45, author: '画画爱好者', likes: 198, downloads: 1260, emoji: '🎨', steps: ['笔触练习 1-15页', '叠加技法 16-30页', '水溶效果 31-45页'] },
  { id: 5, name: '火漆印章制作指南', type: '手工', pages: 18, author: '复古工艺师', likes: 233, downloads: 1420, emoji: '📮', steps: ['材料准备 1-6页', '融蜡浇铸 7-12页', '印章脱模 13-18页'] }
];

// ---------------- 配件/周边数据（9条写死） ----------------
const ACCESSORIES: AccessoryItem[] = [
  { id: 1, name: '笔袋', series: '帆布', price: 30, condition: '全新', seller: '文具杂货铺', emoji: '👝', desc: '帆布材质，大容量' },
  { id: 2, name: '笔记本收纳盒', series: '亚克力', price: 45, condition: '9成新', seller: '收纳控', emoji: '📦', desc: '透明设计，防尘防潮' },
  { id: 3, name: '钢笔墨水套装', series: '礼盒', price: 120, condition: '全新', seller: '钢笔玩家', emoji: '💧', desc: '多色墨水，送礼佳品' },
  { id: 4, name: '和纸胶带套装', series: '烫金', price: 60, condition: '全新', seller: '胶带控', emoji: '🎀', desc: '精美烫金工艺，超值' },
  { id: 5, name: '桌垫', series: '大号', price: 35, condition: '9成新', seller: '文具控', emoji: '🧻', desc: '防滑防水，书写顺滑' },
  { id: 6, name: '印章收纳盒', series: '木质', price: 50, condition: '全新', seller: '复古工艺师', emoji: '📮', desc: '多格设计，防碰撞' },
  { id: 7, name: '贴纸收纳册', series: '透明', price: 25, condition: '全新', seller: '贴纸贩卖机', emoji: '📖', desc: '可插页设计，方便整理' },
  { id: 8, name: '桌面置物架', series: '木质', price: 80, condition: '9成新', seller: '桌面收纳', emoji: '🪑', desc: '多层结构，节省空间' },
  { id: 9, name: '手帐工具套装', series: '基础', price: 55, condition: '全新', seller: '手帐控', emoji: '✂️', desc: '含剪刀、胶棒、尺子' }
];

// ---------------- 图鉴收藏数据（6条写死） ----------------
const COLLECTIONS: CollectionItem[] = [
  { id: 1, name: '钢笔', series: 'Fountain Pen', owned: 5, total: 12, rate: 42, emoji: '🖋️' },
  { id: 2, name: '手帐本', series: 'Journal', owned: 8, total: 20, rate: 40, emoji: '📔' },
  { id: 3, name: '胶带', series: 'Washi Tape', owned: 15, total: 30, rate: 50, emoji: '🎀' },
  { id: 4, name: '贴纸', series: 'Sticker', owned: 10, total: 25, rate: 40, emoji: '✨' },
  { id: 5, name: '墨水', series: 'Ink', owned: 6, total: 15, rate: 40, emoji: '💧' },
  { id: 6, name: '工具', series: 'Tools', owned: 8, total: 10, rate: 80, emoji: '✂️' }
];

// ---------------- 点评数据（3条写死） ----------------
const STATIONERY_REVIEWS: StationeryReview[] = [
  { id: 1, user: '钢笔爱好者', setName: '百乐74', starStr: '⭐⭐⭐⭐⭐', content: '手感一流，笔尖顺滑，书写体验极佳，是入门钢笔画的不二之选。' },
  { id: 2, user: '手帐排版师', setName: '排版教程', starStr: '⭐⭐⭐⭐✨', content: '教程非常详细，跟着做就能设计出好看的手帐，新手友好，超推荐。' },
  { id: 3, user: '胶带控', setName: '和风胶带', starStr: '⭐⭐⭐⭐⭐', content: '图案真的很漂亮，纸张质量很好，贴在纸上很有高级感，值得入手。' }
];

// ---------------- 全城周交易量图表数据 ----------------
const TRADE_LABELS: string[] = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const TRADE_BARS: number[] = [56, 64, 52, 78, 92, 136, 128];

// ---------------- 弹框选项 ----------------
const CONDITION_OPTIONS: string[] = ['全新未拆', '仅拆封', '9成新', '8成新', '有瑕疵'];
const PLACES: string[] = ['光谷广场站', '江汉路站', '洪山广场站', '楚河汉街站', '线上互换'];

// ---------------- 全局纯函数 ----------------
function catColor(cat: string): string {
  if (cat === 'retired') return '#D58A9F';
  if (cat === 'moc') return '#7C4DFF';
  if (cat === 'fig') return '#7A9E7E';
  if (cat === 'tech') return '#C9A24B';
  if (cat === 'street') return '#1E88E5';
  return '#9B8AA6';
}

function catLabel(cat: string): string {
  if (cat === 'retired') return '绝版收藏';
  if (cat === 'moc') return '精美教程';
  if (cat === 'fig') return '实用文具';
  if (cat === 'tech') return '进阶好物';
  if (cat === 'street') return '精美周边';
  return '基础工具';
}

function rarityLabel(r: number): string {
  if (r >= 95) return '传世级';
  if (r >= 80) return '稀有级';
  if (r >= 60) return '紧俏级';
  return '流通级';
}

function rarityColor(r: number): string {
  if (r >= 95) return '#D58A9F';
  if (r >= 80) return '#FF8A00';
  if (r >= 60) return '#1E88E5';
  return '#7A9E7E';
}

function tradeBarHeight(v: number): string {
  return Math.round(v / 136 * 96).toString() + 'vp';
}

function rateColor(r: number): string {
  if (r >= 55) return '#7A9E7E';
  if (r >= 40) return '#C9A24B';
  return '#D58A9F';
}

function retiredSets(): StationeryItem[] { return [STATIONERIES[0], STATIONERIES[1], STATIONERIES[2]]; }
function mocSets(): StationeryItem[] { return [STATIONERIES[3], STATIONERIES[4], STATIONERIES[5]]; }
function figSets(): StationeryItem[] { return [STATIONERIES[6], STATIONERIES[7], STATIONERIES[8]]; }
function techSets(): StationeryItem[] { return [STATIONERIES[9], STATIONERIES[10], STATIONERIES[11]]; }
function streetSets(): StationeryItem[] { return [STATIONERIES[12], STATIONERIES[13], STATIONERIES[14]]; }
function classicSets(): StationeryItem[] { return [STATIONERIES[15], STATIONERIES[16], STATIONERIES[17]]; }
function cityLeft(): StationeryItem[] { return [STATIONERIES[16], STATIONERIES[17]]; }
function cityRight(): StationeryItem[] { return [STATIONERIES[15]]; }
function hotSets(): StationeryItem[] { return [STATIONERIES[3], STATIONERIES[5], STATIONERIES[16], STATIONERIES[17], STATIONERIES[9]]; }

function swapBadge(likes: number): string {
  if (likes >= 50) return '🔥热门';
  if (likes >= 30) return '👍热度';
  return '🌱新帖';
}

// ============================================================
// 主页面
// ============================================================
@Entry
@Component
struct Index {
  @State currentBottomTab: number = 0;
  @State currentTopTab: number = 0;
  @State selectedStationeryId: number = 1;
  @State showSellModal: boolean = false;
  @State showSwapModal: boolean = false;
  @State showDeleteModal: boolean = false;
  @State showDetailModal: boolean = false;
  @State sellStationeryIdx: number = 0;
  @State sellCondIdx: number = 2;
  @State sellPrice: number = 100;
  @State sellWords: string = '';
  @State swapOfferIdx: number = 0;
  @State swapWantIdx: number = 1;
  @State swapPlaceIdx: number = 0;
  @State particles: ParticleItem[] = [];
  private timerId: number = -1;

  aboutToAppear(): void {
    this.buildParticles();
    this.timerId = setInterval(() => { this.driftParticles(); }, 80);
  }

  aboutToDisappear(): void {
    if (this.timerId !== -1) { clearInterval(this.timerId); this.timerId = -1; }
  }

  buildParticles(): void {
    const emojis: string[] = ['🖊️', '📔', '🎀', '✨', '✂️'];
    const list: ParticleItem[] = [];
    for (let i = 0; i < 14; i++) {
      list.push({ x: Math.random() * 340, emoji: emojis[i % emojis.length], size: 12 + Math.random() * 10, speed: 0.6 + Math.random() * 1.4, opacity: 0.2 + Math.random() * 0.4 });
    }
    this.particles = list;
  }

  driftParticles(): void {
    for (let i = 0; i < this.particles.length; i++) {
      this.particles[i].x += this.particles[i].speed;
      if (this.particles[i].x > 360) { this.particles[i].x = -20; }
    }
    this.particles = this.particles.slice();
  }

  // 详情弹框数据取值
  detailName(): string { for (let i = 0; i < STATIONERIES.length; i++) if (STATIONERIES[i].id === this.selectedStationeryId) return STATIONERIES[i].name; return ''; }
  detailEng(): string { for (let i = 0; i < STATIONERIES.length; i++) if (STATIONERIES[i].id === this.selectedStationeryId) return STATIONERIES[i].eng; return ''; }
  detailEmoji(): string { for (let i = 0; i < STATIONERIES.length; i++) if (STATIONERIES[i].id === this.selectedStationeryId) return STATIONERIES[i].emoji; return '🖊️'; }
  detailPrice(): string { for (let i = 0; i < STATIONERIES.length; i++) if (STATIONERIES[i].id === this.selectedStationeryId) return '¥' + STATIONERIES[i].price.toString(); return ''; }
  detailSize(): string { for (let i = 0; i < STATIONERIES.length; i++) if (STATIONERIES[i].id === this.selectedStationeryId) return STATIONERIES[i].size; return ''; }
  detailRarity(): string { for (let i = 0; i < STATIONERIES.length; i++) if (STATIONERIES[i].id === this.selectedStationeryId) return STATIONERIES[i].rarity.toString(); return ''; }
  detailYear(): string { for (let i = 0; i < STATIONERIES.length; i++) if (STATIONERIES[i].id === this.selectedStationeryId) return STATIONERIES[i].year.toString(); return ''; }
  detailSeller(): string { for (let i = 0; i < STATIONERIES.length; i++) if (STATIONERIES[i].id === this.selectedStationeryId) return STATIONERIES[i].seller; return ''; }
  detailTag(): string { for (let i = 0; i < STATIONERIES.length; i++) if (STATIONERIES[i].id === this.selectedStationeryId) return STATIONERIES[i].tag; return ''; }
  detailStar(): string { for (let i = 0; i < STATIONERIES.length; i++) if (STATIONERIES[i].id === this.selectedStationeryId) return STATIONERIES[i].starStr; return ''; }
  detailRating(): string { for (let i = 0; i < STATIONERIES.length; i++) if (STATIONERIES[i].id === this.selectedStationeryId) return STATIONERIES[i].rating.toFixed(1) + '分'; return ''; }
  detailDesc(): string { for (let i = 0; i < STATIONERIES.length; i++) if (STATIONERIES[i].id === this.selectedStationeryId) return STATIONERIES[i].desc; return ''; }
  detailWant(): string { for (let i = 0; i < STATIONERIES.length; i++) if (STATIONERIES[i].id === this.selectedStationeryId) return STATIONERIES[i].want; return ''; }

  // ---------------- 头部 ----------------
  @Builder
  headerBuilder() {
    Column() {
      Row() {
        Column() {
          Text('📚 文具社').fontSize(22).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
          Text('淘好物 · 换心头好').fontSize(11).fontColor('#E4D9E8').margin({ top: 3 })
        }.alignItems(HorizontalAlign.Start).layoutWeight(1)
        Row({ space: 14 }) {
          Text('🔎').fontSize(20)
          Text('📦').fontSize(20)
          Column() {
            Text('🎒').fontSize(20)
            Text('3').fontSize(9).fontColor('#9B8AA6').backgroundColor('#FFFFFF').borderRadius(6).padding({ left: 4, right: 4 }).margin({ top: -6 })
          }.alignItems(HorizontalAlign.End)
        }
      }.width('100%').padding({ left: 16, right: 16, top: 14, bottom: 10 })

      Row({ space: 8 }) {
        Text('🔍 搜索：钢笔 / 手帐 / 胶带').fontSize(12).fontColor('#CBBAD3').layoutWeight(1)
        Text('🧰 我的求购').fontSize(11).fontColor('#9B8AA6').backgroundColor('#FFFFFF').borderRadius(10).padding({ left: 10, right: 10, top: 4, bottom: 4 })
      }.width('100%').padding({ left: 16, right: 16, bottom: 12 })
    }
    .linearGradient({ angle: 135, colors: [['#9B8AA6', 0], ['#6C5B78', 1]] })
    .borderRadius({ bottomLeft: 18, bottomRight: 18 })
  }

  // ---------------- 顶部Tab ----------------
  @Builder
  topTabsBuilder() {
    Row() {
      ForEach(TOP_TABS, (t: TabItem, idx: number) => {
        Column() {
          Text(t.icon).fontSize(17)
          Text(t.label).fontSize(12).fontColor(this.currentTopTab === idx ? '#9B8AA6' : '#8A8A8A').fontWeight(this.currentTopTab === idx ? FontWeight.Bold : FontWeight.Normal).margin({ top: 2 })
          if (this.currentTopTab === idx) {
            Divider().width(16).strokeWidth(3).color('#D58A9F').borderRadius(2).margin({ top: 4 })
          } else {
            Divider().width(16).strokeWidth(3).color('#F9F6F0').borderRadius(2).margin({ top: 4 })
          }
        }.layoutWeight(1).alignItems(HorizontalAlign.Center).padding({ top: 10, bottom: 6 }).onClick(() => { this.currentTopTab = idx; })
      }, (t: TabItem, idx: number) => 'top' + idx.toString() + t.label)
    }.width('100%').backgroundColor('#FFFFFF').borderRadius(14).margin({ top: 10 })
  }

  // ---------------- 全部Tab：banner + 双列瀑布 ----------------
  @Builder
  cityContent() {
    Column({ space: 12 }) {
      Column() {
        Text('📚 文具节 · 春季专场').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#3B3B3B')
        Text('精美文具 3天限时 · 卖家免服务费').fontSize(12).fontColor('#5B6B7F').margin({ top: 6 })
        Row({ space: 10 }) {
          Text('🏆 绝版收藏').fontSize(11).fontColor('#3B3B3B').backgroundColor('#FFFFFF').borderRadius(12).padding({ left: 10, right: 10, top: 4, bottom: 4 })
          Text('🎀 精美胶带').fontSize(11).fontColor('#3B3B3B').backgroundColor('#FFFFFF').borderRadius(12).padding({ left: 10, right: 10, top: 4, bottom: 4 })
        }.margin({ top: 10 })
      }.width('100%').padding(18).alignItems(HorizontalAlign.Start).linearGradient({ angle: 120, colors: [['#D58A9F', 0], ['#EDC4D2', 1]] }).borderRadius(16)

      Text('✨ 全城新上架').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%')

      Row({ space: 10 }) {
        Column({ space: 10 }) {
          ForEach(cityLeft(), (t: StationeryItem) => {
            Column() {
              Text(t.emoji).fontSize(34).margin({ top: 16 })
              Text(t.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').margin({ top: 8 })
              Text(t.eng).fontSize(9).fontColor('#8A8A8A').margin({ top: 2 })
              Text(t.desc).fontSize(11).fontColor('#8A8A8A').margin({ top: 8 }).maxLines(3).textOverflow({ overflow: TextOverflow.Ellipsis })
              Row({ space: 6 }) {
                Text('¥' + t.price.toString()).fontSize(15).fontWeight(FontWeight.Bold).fontColor('#D58A9F')
                Text(t.tag).fontSize(9).fontColor('#9B8AA6').backgroundColor('#F0ECF3').borderRadius(8).padding({ left: 6, right: 6, top: 2, bottom: 2 })
              }.margin({ top: 10, bottom: 14 })
            }.width('100%').backgroundColor('#FFFFFF').borderRadius(14).alignItems(HorizontalAlign.Start).padding({ left: 14, right: 14 })
            .onClick(() => { this.selectedStationeryId = t.id; this.showDetailModal = true; })
          }, (t: StationeryItem) => 'cl' + t.id.toString())
        }.layoutWeight(1)

        Column({ space: 10 }) {
          ForEach(cityRight(), (t: StationeryItem) => {
            Column() {
              Text(t.emoji).fontSize(34).margin({ top: 24 })
              Text(t.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').margin({ top: 8 })
              Text(t.eng).fontSize(9).fontColor('#8A8A8A').margin({ top: 2 })
              Text(t.desc).fontSize(11).fontColor('#8A8A8A').margin({ top: 10 }).maxLines(4).textOverflow({ overflow: TextOverflow.Ellipsis })
              Row({ space: 6 }) {
                Text('¥' + t.price.toString()).fontSize(15).fontWeight(FontWeight.Bold).fontColor('#D58A9F')
                Text(t.starStr).fontSize(10)
              }.margin({ top: 12, bottom: 20 })
            }.width('100%').backgroundColor('#F2EAF2').borderRadius(14).alignItems(HorizontalAlign.Start).padding({ left: 14, right: 14 })
            .onClick(() => { this.selectedStationeryId = t.id; this.showDetailModal = true; })
          }, (t: StationeryItem) => 'cr' + t.id.toString())
        }.layoutWeight(1)
      }.width('100%').alignItems(VerticalAlign.Top)
    }.width('100%').padding({ left: 14, right: 14, top: 10, bottom: 16 })
  }

  // ---------------- 手帐Tab：横滑大卡 + 稀有度柱状图 + 捡漏榜 ----------------
  @Builder
  retiredContent() {
    Column({ space: 14 }) {
      Text('🏆 绝版收藏专区').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%')
      Scroll() {
        Row({ space: 12 }) {
          ForEach(retiredSets(), (t: StationeryItem) => {
            Column() {
              Text(t.emoji).fontSize(40).margin({ top: 18 })
              Text(t.name).fontSize(15).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ top: 8 })
              Text(t.eng + ' · ' + t.year.toString() + '年').fontSize(9).fontColor('#E4D9E8').margin({ top: 4 })
              Row({ space: 6 }) {
                Text('¥' + t.price.toString()).fontSize(16).fontWeight(FontWeight.Bold).fontColor('#E4D9E8')
                Text(rarityLabel(t.rarity)).fontSize(10).fontColor('#3B3B3B').backgroundColor('#EDC4D2').borderRadius(8).padding({ left: 6, right: 6, top: 2, bottom: 2 })
              }.margin({ top: 10, bottom: 18 })
            }.width(160).linearGradient({ angle: 160, colors: [['#D58A9F', 0], ['#9B8AA6', 1]] }).borderRadius(16).alignItems(HorizontalAlign.Center)
            .onClick(() => { this.selectedStationeryId = t.id; this.showDetailModal = true; })
          }, (t: StationeryItem) => 'rt' + t.id.toString())
        }.padding({ left: 14, right: 14 })
      }.scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).width('100%')

      Column() {
        Text('📈 稀有度排行').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%')
        Row({ space: 6 }) {
          ForEach(retiredSets(), (t: StationeryItem, i: number) => {
            Column({ space: 5 }) {
              Text(t.rarity.toString()).fontSize(9).fontColor('#D58A9F')
              Column().width(34).height((t.rarity).toString() + 'vp').backgroundColor(i === 2 ? '#EDC4D2' : '#D58A9F').borderRadius({ topLeft: 5, topRight: 5 })
              Text(t.year.toString() + '年').fontSize(9).fontColor('#8A8A8A')
            }.alignItems(HorizontalAlign.Center).layoutWeight(1)
          }, (t: StationeryItem, i: number) => 'rb' + i.toString() + t.id.toString())
        }.width('100%').justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Bottom).padding({ top: 12 })
        Text('万宝龙大班149以95分稀有度登顶，市面流通不足十支').fontSize(10).fontColor('#8A8A8A').margin({ top: 8 })
      }.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14).margin({ left: 14, right: 14 })

      Column() {
        Text('🕵️ 今日捡漏榜').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%').margin({ bottom: 8 })
        ForEach(retiredSets(), (t: StationeryItem, i: number) => {
          Row({ space: 10 }) {
            Text((i + 1).toString()).fontSize(14).fontWeight(FontWeight.Bold).fontColor(i === 0 ? '#D58A9F' : '#8A8A8A').width(20)
            Text(t.emoji).fontSize(18)
            Column() {
              Text(t.name).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#3B3B3B')
              Text(rarityLabel(t.rarity) + ' · ' + t.want).fontSize(10).fontColor('#8A8A8A').margin({ top: 2 })
            }.alignItems(HorizontalAlign.Start).layoutWeight(1)
            Text('¥' + t.price.toString()).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#D58A9F')
          }.width('100%').padding({ top: 8, bottom: 8 }).onClick(() => { this.selectedStationeryId = t.id; this.showDetailModal = true; })
        }, (t: StationeryItem, i: number) => 'pck' + i.toString() + t.id.toString())
      }.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14).margin({ left: 14, right: 14, bottom: 16 })
    }.width('100%').alignItems(HorizontalAlign.Start).padding({ top: 10 })
  }

  // ---------------- 钢笔Tab：教程时间轴 ----------------
  @Builder
  mocContent() {
    Column({ space: 0 }) {
      Text('📖 文具教程 · 灵感指南').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%').margin({ top: 10, bottom: 12 })
      ForEach(GUIDES, (m: GuideItem, i: number) => {
        Row({ space: 12 }) {
          Column({ space: 4 }) {
            Text(m.emoji).fontSize(20)
            if (i < GUIDES.length - 1) {
              Column().width(2).layoutWeight(1).backgroundColor('#D58A9F').margin({ top: 4 })
            }
          }.width(40).alignItems(HorizontalAlign.Center)
          Column({ space: 6 }) {
            Row({ space: 8 }) {
              Text(m.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').layoutWeight(1)
              Text('⬇ ' + m.downloads.toString()).fontSize(10).fontColor('#9B8AA6')
            }.width('100%')
            Text('by ' + m.author + ' · ' + m.type + ' · ' + m.pages.toString() + '页').fontSize(10).fontColor('#8A8A8A')
            Column({ space: 5 }) {
              ForEach(m.steps, (s: string, si: number) => {
                Row({ space: 8 }) {
                  Text((si + 1).toString()).fontSize(9).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').backgroundColor('#F9F6F0').borderRadius(9).width(18).height(18).textAlign(TextAlign.Center)
                  Text(s).fontSize(10).fontColor('#4A5A6E').layoutWeight(1)
                }.width('100%')
              }, (s: string, si: number) => 'ms' + si.toString() + m.id.toString())
            }.width('100%').backgroundColor('#F9F6F0').borderRadius(10).padding(10)
            Row({ space: 8 }) {
              Text('❤️ ' + m.likes.toString()).fontSize(10).fontColor('#D58A9F')
              Text(m.emoji + ' 教程可下载').fontSize(10).fontColor('#9B8AA6').layoutWeight(1).textAlign(TextAlign.End)
            }.width('100%')
          }.layoutWeight(1).backgroundColor(i === 1 ? '#F2EAF2' : '#FFFFFF').borderRadius(14).padding(12).margin({ bottom: 14 })
        }.width('100%').alignItems(VerticalAlign.Top)
      }, (m: GuideItem, i: number) => 'moc' + i.toString() + m.id.toString())
    }.width('100%').padding({ left: 14, right: 14, bottom: 16 })
  }

  // ---------------- 胶带Tab：三列格子 + 交换建议 ----------------
  @Builder
  figContent() {
    Column({ space: 14 }) {
      Text('🎀 胶带交易 · 拼贴必备').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%')
      Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
        ForEach(ACCESSORIES, (f: AccessoryItem) => {
          Column() {
            Text(f.emoji).fontSize(26).margin({ top: 12 })
            Text(f.name).fontSize(11).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').margin({ top: 6 }).maxLines(1)
            Text(f.series).fontSize(8).fontColor('#8A8A8A').margin({ top: 2 })
            Text('¥' + f.price.toString()).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#D58A9F').margin({ top: 4, bottom: 12 })
          }.width('31%').backgroundColor('#FFFFFF').borderRadius(12).alignItems(HorizontalAlign.Center).margin({ bottom: 8 })
          .onClick(() => { this.selectedStationeryId = 7 + f.id % 3; this.showDetailModal = true; })
        }, (f: AccessoryItem) => 'fg' + f.id.toString())
      }.width('100%')

      Column() {
        Text('🤝 配件交换行情').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%').margin({ bottom: 6 })
        ForEach(ACCESSORIES, (f: AccessoryItem) => {
          if (f.id % 2 === 0) {
            Row({ space: 10 }) {
              Text(f.emoji).fontSize(20)
              Column({ space: 2 }) {
                Text(f.name + ' · ' + f.condition).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B3B3B')
                Text(f.desc).fontSize(10).fontColor('#8A8A8A')
              }.alignItems(HorizontalAlign.Start).layoutWeight(1)
              Text('¥' + f.price.toString()).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#7A9E7E')
            }.width('100%').padding({ top: 8, bottom: 8 })
          }
        }, (f: AccessoryItem) => 'fgx' + f.id.toString())
      }.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14)
    }.width('100%').padding({ left: 14, right: 14, top: 10, bottom: 16 })
  }

  // ---------------- 贴纸Tab：对决卡 + 侧栏统计 ----------------
  @Builder
  techContent() {
    Column({ space: 14 }) {
      Text('✨ 贴纸对决 · 颜值担当').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%')
      Row({ space: 10 }) {
        Column() {
          Text('🖋️').fontSize(34).margin({ top: 14 })
          Text('百乐74').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ top: 6 })
          Text('1974年 · 现价¥1200').fontSize(10).fontColor('#E4D9E8').margin({ top: 4, bottom: 14 })
        }.layoutWeight(1).linearGradient({ angle: 150, colors: [['#D58A9F', 0], ['#9B8AA6', 1]] }).borderRadius(14).alignItems(HorizontalAlign.Center)
        Column() {
          Text('VS').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#D58A9F')
          Text('本周').fontSize(9).fontColor('#8A8A8A')
        }.alignItems(HorizontalAlign.Center)
        Column() {
          Text('🎀').fontSize(34).margin({ top: 14 })
          Text('和风胶带').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ top: 6 })
          Text('2024年 · 现价¥89').fontSize(10).fontColor('#E4D9E8').margin({ top: 4, bottom: 14 })
        }.layoutWeight(1).linearGradient({ angle: 150, colors: [['#8A8A8A', 0], ['#9B8AA6', 1]] }).borderRadius(14).alignItems(HorizontalAlign.Center)
      }.width('100%')

      Row({ space: 10 }) {
        Column({ space: 10 }) {
          ForEach(techSets(), (t: StationeryItem) => {
            Row({ space: 10 }) {
              Text(t.emoji).fontSize(22)
              Column({ space: 2 }) {
                Text(t.name).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B3B3B')
                Text(t.tag + ' · ' + t.size).fontSize(10).fontColor('#8A8A8A')
              }.alignItems(HorizontalAlign.Start).layoutWeight(1)
              Text('¥' + t.price.toString()).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#D58A9F')
            }.width('100%').backgroundColor('#FFFFFF').borderRadius(12).padding(12).onClick(() => { this.selectedStationeryId = t.id; this.showDetailModal = true; })
          }, (t: StationeryItem) => 'tc' + t.id.toString())
        }.layoutWeight(1)
        Column({ space: 10 }) {
          Column({ space: 4 }) {
            Text('12').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#D58A9F')
            Text('本周文具成交').fontSize(9).fontColor('#8A8A8A')
          }.width('100%').backgroundColor('#F0ECF3').borderRadius(12).padding({ top: 10, bottom: 10 }).alignItems(HorizontalAlign.Center)
          Column({ space: 4 }) {
            Text('1.8万').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#C9A24B')
            Text('文具总交易额').fontSize(9).fontColor('#8A8A8A')
          }.width('100%').backgroundColor('#F5EFE0').borderRadius(12).padding({ top: 10, bottom: 10 }).alignItems(HorizontalAlign.Center)
          Column({ space: 4 }) {
            Text('94%').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#7A9E7E')
            Text('好评率').fontSize(9).fontColor('#8A8A8A')
          }.width('100%').backgroundColor('#FFFFFF').borderRadius(12).padding({ top: 10, bottom: 10 }).alignItems(HorizontalAlign.Center)
        }.width(86)
      }.width('100%').alignItems(VerticalAlign.Top)
    }.width('100%').padding({ left: 14, right: 14, top: 10, bottom: 16 })
  }

  // ---------------- 工具Tab：标签云 + 紧凑列表 ----------------
  @Builder
  streetContent() {
    Column({ space: 14 }) {
      Text('✂️ 工具收藏 · 实用至上').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%')
      Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Start }) {
        ForEach(COLLECTIONS, (c: CollectionItem) => {
          Text(c.emoji + ' ' + c.name + ' ' + c.owned.toString() + '/' + c.total.toString()).fontSize(11).fontColor('#3B3B3B').backgroundColor('#F0ECF3').borderRadius(12).padding({ left: 10, right: 10, top: 6, bottom: 6 }).margin(4)
        }, (c: CollectionItem) => 'ccoll' + c.id.toString())
      }.width('100%')

      ForEach(streetSets(), (t: StationeryItem) => {
        Row({ space: 12 }) {
          Text(t.emoji).fontSize(24)
          Column({ space: 2 }) {
            Row({ space: 6 }) {
              Text(t.name).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#3B3B3B')
              Text(rarityLabel(t.rarity)).fontSize(8).fontColor('#FFFFFF').backgroundColor(rarityColor(t.rarity)).borderRadius(6).padding({ left: 5, right: 5, top: 1, bottom: 1 })
            }
            Text(t.desc).fontSize(10).fontColor('#8A8A8A').maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
          }.alignItems(HorizontalAlign.Start).layoutWeight(1)
          Text('¥' + t.price.toString()).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#D58A9F')
        }.width('100%').backgroundColor(t.id === 15 ? '#F0ECF3' : '#FFFFFF').borderRadius(12).padding(12).onClick(() => { this.selectedStationeryId = t.id; this.showDetailModal = true; })
      }, (t: StationeryItem) => 'st' + t.id.toString())

      Text('💬 集齐三大文具可召唤隐藏福利：钢笔+手帐+胶带').fontSize(10).fontColor('#8A8A8A').width('100%')
    }.width('100%').padding({ left: 14, right: 14, top: 10, bottom: 16 })
  }

  // ---------------- 文具首页 ----------------
  @Builder
  bazaarContent() {
    Column() {
      this.topTabsBuilder()
      if (this.currentTopTab === 0) { this.cityContent() }
      else if (this.currentTopTab === 1) { this.retiredContent() }
      else if (this.currentTopTab === 2) { this.mocContent() }
      else if (this.currentTopTab === 3) { this.figContent() }
      else if (this.currentTopTab === 4) { this.techContent() }
      else { this.streetContent() }
    }.width('100%')
  }

  // ---------------- 换货页 ----------------
  @Builder
  swapContent() {
    Column({ space: 12 }) {
      Row({ space: 0 }) {
        Column({ space: 4 }) { Text('156').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#D58A9F'); Text('在交换中').fontSize(10).fontColor('#8A8A8A') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
        Column({ space: 4 }) { Text('42').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#C9A24B'); Text('今日成交').fontSize(10).fontColor('#8A8A8A') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
        Column({ space: 4 }) { Text('98%').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#7A9E7E'); Text('面交好评').fontSize(10).fontColor('#8A8A8A') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
        Column({ space: 6 }) { Text('🤝 发交换').fontSize(12).fontColor('#FFFFFF').backgroundColor('#D58A9F').borderRadius(14).padding({ left: 12, right: 12, top: 6, bottom: 6 }).onClick(() => { this.showSwapModal = true; }) }.alignItems(HorizontalAlign.Center)
      }.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding({ top: 14, bottom: 14 })

      ForEach(SWAPS, (s: SwapItem) => {
        Column({ space: 8 }) {
          Row({ space: 10 }) {
            Text(s.avatar).fontSize(26)
            Column({ space: 2 }) {
              Row({ space: 6 }) {
                Text(s.user).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#3B3B3B')
                Text(swapBadge(s.likes)).fontSize(8).fontColor('#C9A24B').backgroundColor('#F5EFE0').borderRadius(6).padding({ left: 5, right: 5, top: 1, bottom: 1 })
              }
              Text(s.time + ' · ' + s.place).fontSize(9).fontColor('#8A8A8A')
            }.alignItems(HorizontalAlign.Start).layoutWeight(1)
            Text('⋯').fontSize(16).fontColor('#8A8A8A').onClick(() => { this.showDeleteModal = true; })
          }.width('100%')

          Row({ space: 10 }) {
            Column({ space: 4 }) { Text('我提供').fontSize(9).fontColor('#9B8AA6'); Text(s.offer).fontSize(11).fontWeight(FontWeight.Bold).fontColor('#3B3B3B') }.layoutWeight(1).backgroundColor('#F0ECF3').borderRadius(10).padding(8).alignItems(HorizontalAlign.Center)
            Text('⇄').fontSize(14).fontColor('#D58A9F')
            Column({ space: 4 }) { Text('我想换').fontSize(9).fontColor('#D58A9F'); Text(s.want).fontSize(11).fontWeight(FontWeight.Bold).fontColor('#3B3B3B') }.layoutWeight(1).backgroundColor('#F2EAF2').borderRadius(10).padding(8).alignItems(HorizontalAlign.Center)
          }.width('100%')

          Text(s.content).fontSize(11).fontColor('#4A5A6E').lineHeight(16).width('100%')
          Row({ space: 8 }) {
            Text('📍 ' + s.place).fontSize(10).fontColor('#9B8AA6').backgroundColor('#F9F6F0').borderRadius(10).padding({ left: 8, right: 8, top: 4, bottom: 4 })
            Text('❤️ ' + s.likes.toString()).fontSize(10).fontColor('#D58A9F').layoutWeight(1).textAlign(TextAlign.End)
          }.width('100%')
        }.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14)
      }, (s: SwapItem) => 'sw' + s.id.toString())
    }.width('100%').padding({ left: 14, right: 14, top: 10, bottom: 16 })
  }

  // ---------------- 图鉴页 ----------------
  @Builder
  collectionContent() {
    Column({ space: 12 }) {
      Row({ space: 10 }) {
        Column({ space: 4 }) {
          Text('📖 我的文具图鉴').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#3B3B3B')
          Text('记录每一件心头好的收藏进度').fontSize(10).fontColor('#8A8A8A')
        }.alignItems(HorizontalAlign.Start).layoutWeight(1)
        Text('✚ 登记').fontSize(12).fontColor('#FFFFFF').backgroundColor('#9B8AA6').borderRadius(14).padding({ left: 14, right: 14, top: 7, bottom: 7 }).onClick(() => { this.showSellModal = true; })
      }.width('100%').margin({ top: 10 })

      ForEach(COLLECTIONS, (c: CollectionItem) => {
        Column({ space: 8 }) {
          Row({ space: 10 }) {
            Text(c.emoji).fontSize(28)
            Column({ space: 3 }) {
              Text(c.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#3B3B3B')
              Text(c.series + ' · 已收 ' + c.owned.toString() + '/' + c.total.toString()).fontSize(10).fontColor('#8A8A8A')
            }.alignItems(HorizontalAlign.Start).layoutWeight(1)
            Text(c.rate.toString() + '%').fontSize(15).fontWeight(FontWeight.Bold).fontColor(rateColor(c.rate))
          }.width('100%')
          Row({ space: 0 }) {
            Column().width(c.rate.toString() + '%').height(6).backgroundColor(rateColor(c.rate)).borderRadius(3)
            Column().width((100 - c.rate).toString() + '%').height(6).backgroundColor('#E5E1DB').borderRadius(3)
          }.width('100%')
        }.width('100%').backgroundColor(c.id === 5 ? '#F5EFE0' : '#FFFFFF').borderRadius(14).padding(14)
      }, (c: CollectionItem) => 'coll' + c.id.toString())

      Column() {
        Text('🏅 图鉴成就墙').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%').margin({ bottom: 8 })
        Flex({ wrap: FlexWrap.Wrap }) {
          Text('🎖️ 钢笔收藏家').fontSize(10).fontColor('#9B8AA6').backgroundColor('#F0ECF3').borderRadius(10).padding({ left: 8, right: 8, top: 5, bottom: 5 }).margin(4)
          Text('🏆 手帐达人').fontSize(10).fontColor('#D58A9F').backgroundColor('#F2EAF2').borderRadius(10).padding({ left: 8, right: 8, top: 5, bottom: 5 }).margin(4)
          Text('🎀 胶带控').fontSize(10).fontColor('#C9A24B').backgroundColor('#F5EFE0').borderRadius(10).padding({ left: 8, right: 8, top: 5, bottom: 5 }).margin(4)
          Text('✂️ 手工大触').fontSize(10).fontColor('#7A9E7E').backgroundColor('#E8F7EF').borderRadius(10).padding({ left: 8, right: 8, top: 5, bottom: 5 }).margin(4)
        }.width('100%')
      }.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14)
    }.width('100%').padding({ left: 14, right: 14, bottom: 16 })
  }

  // ---------------- 我的页 ----------------
  @Builder
  mineContent() {
    Column({ space: 14 }) {
      Column() {
        Row({ space: 12 }) {
          Text('📚').fontSize(40)
          Column({ space: 4 }) {
            Text('文具收藏家小楠').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
            Text('LV.10 资深文具控 · 信用分 990').fontSize(10).fontColor('#E4D9E8')
          }.alignItems(HorizontalAlign.Start).layoutWeight(1)
          Text('＞').fontSize(18).fontColor('#E4D9E8')
        }.width('100%')
        Row({ space: 0 }) {
          Column({ space: 3 }) { Text('38').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#E4D9E8'); Text('在售文具').fontSize(9).fontColor('#E4D9E8') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
          Column({ space: 3 }) { Text('12').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#E4D9E8'); Text('求购中').fontSize(9).fontColor('#E4D9E8') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
          Column({ space: 3 }) { Text('¥2.8万').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#E4D9E8'); Text('累计成交额').fontSize(9).fontColor('#E4D9E8') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
        }.width('100%').margin({ top: 16 })
      }.width('100%').padding(18).linearGradient({ angle: 120, colors: [['#9B8AA6', 0], ['#6C5B78', 1]] }).borderRadius(16).margin({ top: 10 })

      Column() {
        Text('🔨 我的求购清单').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%').margin({ bottom: 6 })
        ForEach(STATIONERIES, (t: StationeryItem) => {
          if (t.id === 13 || t.id === 16 || t.id === 18) {
            Row({ space: 10 }) {
              Text(t.emoji).fontSize(20)
              Column({ space: 2 }) {
                Text(t.name).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B3B3B')
                Text('预算 ¥' + t.price.toString() + ' 内 · ' + t.want).fontSize(9).fontColor('#8A8A8A')
              }.alignItems(HorizontalAlign.Start).layoutWeight(1)
              Text('出价中').fontSize(10).fontColor('#D58A9F').backgroundColor('#F2EAF2').borderRadius(10).padding({ left: 8, right: 8, top: 3, bottom: 3 })
            }.width('100%').padding({ top: 9, bottom: 9 })
          }
        }, (t: StationeryItem) => 'wish' + t.id.toString())
      }.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14)

      Column() {
        Text('📍 常去面交点').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%').margin({ bottom: 6 })
        ForEach(PLACES, (p: string, i: number) => {
          Row({ space: 10 }) {
            Text(['🚇', '🏬', '🚌', '🏪', '📦'][i]).fontSize(16)
            Text(p).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').layoutWeight(1)
            Text(['光谷站台', '江汉路天桥', '洪山转盘', '楚河入口', '顺丰网点'][i]).fontSize(9).fontColor('#8A8A8A')
          }.width('100%').padding({ top: 9, bottom: 9 })
        }, (p: string, i: number) => 'pl' + i.toString() + p)
      }.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14)
    }.width('100%').padding({ left: 14, right: 14, bottom: 16 })
  }

  // ---------------- 底部Tab ----------------
  @Builder
  bottomTabsBuilder() {
    Row() {
      ForEach(BOTTOM_TABS, (t: TabItem, idx: number) => {
        Column({ space: 3 }) {
          Text(t.icon).fontSize(20)
          Text(t.label).fontSize(10).fontColor(this.currentBottomTab === idx ? '#9B8AA6' : '#8A8A8A').fontWeight(this.currentBottomTab === idx ? FontWeight.Bold : FontWeight.Normal)
        }.layoutWeight(1).alignItems(HorizontalAlign.Center).padding({ top: 8, bottom: 8 }).onClick(() => { this.currentBottomTab = idx; })
      }, (t: TabItem, idx: number) => 'bt' + idx.toString() + t.label)
    }.width('100%').backgroundColor('#FFFFFF').borderRadius({ topLeft: 18, topRight: 18 })
  }

  // ---------------- 弹框1：发布出售（新增·紫渐变头） ----------------
  @Builder
  sellModalBuilder() {
    Column() {
      Column() {
        Text('📚 发布出售').fontSize(17).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ top: 16 })
        Text('闲置回血，好物不愁卖').fontSize(11).fontColor('#E4D9E8').margin({ top: 4, bottom: 16 })
      }.width('100%').linearGradient({ angle: 120, colors: [['#9B8AA6', 0], ['#6C5B78', 1]] }).borderRadius({ topLeft: 18, topRight: 18 })

      Scroll() {
        Column({ space: 14 }) {
          Column({ space: 8 }) {
            Text('要出售的文具').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%')
            Flex({ wrap: FlexWrap.Wrap }) {
              ForEach(STATIONERIES, (t: StationeryItem, i: number) => {
                if (i < 8) {
                  Text(t.emoji + ' ' + t.name).fontSize(10).fontColor(this.sellStationeryIdx === i ? '#FFFFFF' : '#3B3B3B').backgroundColor(this.sellStationeryIdx === i ? '#9B8AA6' : '#F0ECF3').borderRadius(12).padding({ left: 9, right: 9, top: 5, bottom: 5 }).margin(4).onClick(() => { this.sellStationeryIdx = i; })
                }
              }, (t: StationeryItem, i: number) => 'st' + i.toString() + t.id.toString())
            }.width('100%')
          }.width('100%').alignItems(HorizontalAlign.Start)

          Column({ space: 8 }) {
            Text('成色说明').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%')
            Flex({ wrap: FlexWrap.Wrap }) {
              ForEach(CONDITION_OPTIONS, (c: string, i: number) => {
                Text(c).fontSize(10).fontColor(this.sellCondIdx === i ? '#FFFFFF' : '#D58A9F').backgroundColor(this.sellCondIdx === i ? '#D58A9F' : '#F2EAF2').borderRadius(12).padding({ left: 10, right: 10, top: 5, bottom: 5 }).margin(4).onClick(() => { this.sellCondIdx = i; })
              }, (c: string, i: number) => 'sd' + i.toString() + c)
            }.width('100%')
          }.width('100%').alignItems(HorizontalAlign.Start)

          Row({ space: 12 }) {
            Text('出售价格').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B3B3B')
            Row({ space: 0 }) {
              Text('−').fontSize(16).fontColor('#9B8AA6').backgroundColor('#F0ECF3').borderRadius({ topLeft: 10, bottomLeft: 10 }).width(34).height(30).textAlign(TextAlign.Center).onClick(() => { if (this.sellPrice > 10) { this.sellPrice -= 10; } })
              Text('¥' + this.sellPrice.toString()).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').backgroundColor('#FFFFFF').height(30).textAlign(TextAlign.Center).padding({ left: 14, right: 14 })
              Text('＋').fontSize(16).fontColor('#FFFFFF').backgroundColor('#9B8AA6').borderRadius({ topRight: 10, bottomRight: 10 }).width(34).height(30).textAlign(TextAlign.Center).onClick(() => { if (this.sellPrice < 9999) { this.sellPrice += 10; } })
            }.borderRadius(10)
            Text(this.sellPrice > 2000 ? '💰 高价好物建议包邮' : '实惠价更容易出手').fontSize(9).fontColor(this.sellPrice > 2000 ? '#D58A9F' : '#8A8A8A').layoutWeight(1).textAlign(TextAlign.End)
          }.width('100%')

          Column({ space: 8 }) {
            Text('宝贝描述').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%')
            TextInput({ placeholder: '成色、瑕疵、配件情况如实描述…', text: this.sellWords }).fontSize(12).fontColor('#3B3B3B').backgroundColor('#F9F6F0').borderRadius(10).height(40).padding({ left: 12, right: 12 }).onChange((v: string) => { this.sellWords = v; })
          }.width('100%').alignItems(HorizontalAlign.Start)

          Row({ space: 12 }) {
            Text('取消').fontSize(13).fontColor('#8A8A8A').backgroundColor('#F9F6F0').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showSellModal = false; })
            Text('上架出售').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').backgroundColor('#9B8AA6').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showSellModal = false; })
          }.width('100%').margin({ top: 4, bottom: 18 })
        }.width('100%').padding({ left: 16, right: 16, top: 16 })
      }.scrollBar(BarState.Off).layoutWeight(1).align(Alignment.Top)
    }.width('88%').height('76%').backgroundColor('#FFFFFF').borderRadius(18).clip(true)
  }

  // ---------------- 弹框2：发起交换（新增·粉头） ----------------
  @Builder
  swapModalBuilder() {
    Column() {
      Column() {
        Row({ space: 8 }) { Text('🤝').fontSize(22); Text('发起交换').fontSize(17).fontWeight(FontWeight.Bold).fontColor('#3B3B3B') }.margin({ top: 16 })
        Text('用闲置换心头好，文具控互助').fontSize(11).fontColor('#5B6B7F').margin({ top: 4, bottom: 14 })
      }.width('100%').backgroundColor('#D58A9F').borderRadius({ topLeft: 18, topRight: 18 })

      Scroll() {
        Column({ space: 14 }) {
          Column({ space: 8 }) {
            Text('我提供').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%')
            Flex({ wrap: FlexWrap.Wrap }) {
              ForEach(STATIONERIES, (t: StationeryItem, i: number) => {
                if (i % 3 === 0 && i < 15) {
                  Text(t.emoji + ' ' + t.name).fontSize(10).fontColor(this.swapOfferIdx === i ? '#FFFFFF' : '#3B3B3B').backgroundColor(this.swapOfferIdx === i ? '#3B3B3B' : '#F9F6F0').borderRadius(12).padding({ left: 9, right: 9, top: 5, bottom: 5 }).margin(4).onClick(() => { this.swapOfferIdx = i; })
                }
              }, (t: StationeryItem, i: number) => 'wo' + i.toString() + t.id.toString())
            }.width('100%')
          }.width('100%').alignItems(HorizontalAlign.Start)

          Column({ space: 8 }) {
            Text('我想换（可多选）').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%')
            Flex({ wrap: FlexWrap.Wrap }) {
              ForEach(STATIONERIES, (t: StationeryItem, i: number) => {
                if (i % 3 === 2 && i < 15) {
                  Text((this.pickedWant(i) ? '✓ ' : '') + t.emoji + ' ' + t.name).fontSize(10).fontColor(this.pickedWant(i) ? '#FFFFFF' : '#D58A9F').backgroundColor(this.pickedWant(i) ? '#D58A9F' : '#F2EAF2').borderRadius(12).padding({ left: 9, right: 9, top: 5, bottom: 5 }).margin(4).onClick(() => { this.toggleWant(i); })
                }
              }, (t: StationeryItem, i: number) => 'ww' + i.toString() + t.id.toString())
            }.width('100%')
          }.width('100%').alignItems(HorizontalAlign.Start)

          Column({ space: 8 }) {
            Text('面交地点').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%')
            Flex({ wrap: FlexWrap.Wrap }) {
              ForEach(PLACES, (p: string, i: number) => {
                Text(p).fontSize(10).fontColor(this.swapPlaceIdx === i ? '#FFFFFF' : '#9B8AA6').backgroundColor(this.swapPlaceIdx === i ? '#9B8AA6' : '#F0ECF3').borderRadius(12).padding({ left: 10, right: 10, top: 5, bottom: 5 }).margin(4).onClick(() => { this.swapPlaceIdx = i; })
              }, (p: string, i: number) => 'wp' + i.toString() + p)
            }.width('100%')
          }.width('100%').alignItems(HorizontalAlign.Start)

          Row({ space: 8 }) {
            Text('💡').fontSize(14)
            Text('交换双方可自行协商补差价，面交请选择人流密集的公共场所，注意安全。').fontSize(10).fontColor('#8A8A8A').lineHeight(15).layoutWeight(1)
          }.width('100%').backgroundColor('#F2EAF2').borderRadius(10).padding(10)

          Row({ space: 12 }) {
            Text('再想想').fontSize(13).fontColor('#8A8A8A').backgroundColor('#F9F6F0').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showSwapModal = false; })
            Text('发布交换帖').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').backgroundColor('#9B8AA6').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showSwapModal = false; })
          }.width('100%').margin({ top: 4, bottom: 18 })
        }.width('100%').padding({ left: 16, right: 16, top: 16 })
      }.scrollBar(BarState.Off).layoutWeight(1).align(Alignment.Top)
    }.width('88%').height('72%').backgroundColor('#FFFFFF').borderRadius(18).clip(true)
  }

  // ---------------- 弹框3：下架/删除 ----------------
  @Builder
  deleteModalBuilder() {
    Column({ space: 14 }) {
      Text('🗑️').fontSize(36)
      Text('下架这件文具？').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#3B3B3B')
      Text('下架后买家将无法搜索到这条信息，\n收藏和留言会一并清空，可重新上架。').fontSize(11).fontColor('#8A8A8A').textAlign(TextAlign.Center).lineHeight(17)
      Row({ space: 12 }) {
        Text('留着').fontSize(13).fontColor('#9B8AA6').backgroundColor('#F0ECF3').borderRadius(20).layoutWeight(1).height(40).textAlign(TextAlign.Center).onClick(() => { this.showDeleteModal = false; })
        Text('确认下架').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').backgroundColor('#D58A9F').borderRadius(20).layoutWeight(1).height(40).textAlign(TextAlign.Center).onClick(() => { this.showDeleteModal = false; })
      }.width('100%').margin({ top: 6 })
    }.width('72%').backgroundColor('#FFFFFF').borderRadius(18).padding({ left: 20, right: 20, top: 24, bottom: 22 }).alignItems(HorizontalAlign.Center)
  }

  // ---------------- 弹框4：文具详情（粉紫渐变头） ----------------
  @Builder
  detailModalBuilder() {
    Column() {
      Column() {
        Text(this.detailEmoji()).fontSize(40).margin({ top: 18 })
        Text(this.detailName()).fontSize(18).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').margin({ top: 8 })
        Text(this.detailEng()).fontSize(10).fontColor('#5B6B7F').margin({ top: 2 })
        Row({ space: 8 }) {
          Text(this.detailTag()).fontSize(9).fontColor('#FFFFFF').backgroundColor('#9B8AA6').borderRadius(8).padding({ left: 7, right: 7, top: 2, bottom: 2 })
          Text(rarityLabel(Number(this.detailRarity()))).fontSize(9).fontColor('#3B3B3B').backgroundColor('#D58A9F').borderRadius(8).padding({ left: 7, right: 7, top: 2, bottom: 2 })
        }.margin({ top: 10, bottom: 18 })
      }.width('100%').linearGradient({ angle: 135, colors: [['#D58A9F', 0], ['#F0ECF3', 1]] }).borderRadius({ topLeft: 18, topRight: 18 }).alignItems(HorizontalAlign.Center)

      Scroll() {
        Column({ space: 14 }) {
          Row({ space: 0 }) {
            Column({ space: 4 }) { Text(this.detailPrice()).fontSize(17).fontWeight(FontWeight.Bold).fontColor('#D58A9F'); Text('售价').fontSize(9).fontColor('#8A8A8A') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
            Column({ space: 4 }) { Text(this.detailSize()).fontSize(17).fontWeight(FontWeight.Bold).fontColor('#9B8AA6'); Text('规格').fontSize(9).fontColor('#8A8A8A') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
            Column({ space: 4 }) { Text(this.detailRarity()).fontSize(17).fontWeight(FontWeight.Bold).fontColor(rarityColor(Number(this.detailRarity()))); Text('稀有度').fontSize(9).fontColor('#8A8A8A') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
            Column({ space: 4 }) { Text(this.detailYear()).fontSize(17).fontWeight(FontWeight.Bold).fontColor('#C9A24B'); Text('年份').fontSize(9).fontColor('#8A8A8A') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
          }.width('100%').backgroundColor('#F9F6F0').borderRadius(12).padding({ top: 12, bottom: 12 })

          Column({ space: 8 }) {
            Text('🧾 宝贝描述').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%')
            Text(this.detailDesc()).fontSize(11).fontColor('#4A5A6E').lineHeight(18)
            Row({ space: 8 }) {
              Text('👤 ' + this.detailSeller()).fontSize(10).fontColor('#9B8AA6')
              Text(this.detailStar() + ' ' + this.detailRating()).fontSize(10).fontColor('#D58A9F').layoutWeight(1).textAlign(TextAlign.End)
            }.width('100%')
          }.width('100%').alignItems(HorizontalAlign.Start)

          Row({ space: 8 }) {
            Text('🤝').fontSize(14)
            Text('卖家想换：' + this.detailWant()).fontSize(11).fontColor('#D58A9F').layoutWeight(1)
          }.width('100%').backgroundColor('#F2EAF2').borderRadius(10).padding(10)

          Column({ space: 10 }) {
            Text('💬 圈友点评').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B3B3B').width('100%')
            ForEach(STATIONERY_REVIEWS, (r: StationeryReview) => {
              Column({ space: 5 }) {
                Row({ space: 8 }) { Text('👤').fontSize(14); Text(r.user).fontSize(11).fontWeight(FontWeight.Bold).fontColor('#3B3B3B'); Text(r.starStr).fontSize(9).layoutWeight(1).textAlign(TextAlign.End) }.width('100%')
                Text(r.content).fontSize(10).fontColor('#8A8A8A').lineHeight(15)
              }.width('100%').backgroundColor('#F9F6F0').borderRadius(10).padding(10)
            }, (r: StationeryReview) => 'rv' + r.id.toString())
          }.width('100%').alignItems(HorizontalAlign.Start)

          Row({ space: 12 }) {
            Text('💬 留言问问').fontSize(13).fontColor('#9B8AA6').backgroundColor('#F0ECF3').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showDetailModal = false; })
            Text('🛒 立即购买').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').backgroundColor('#D58A9F').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showDetailModal = false; })
          }.width('100%').margin({ top: 2, bottom: 18 })
        }.width('100%').padding({ left: 16, right: 16, top: 14 })
      }.scrollBar(BarState.Off).layoutWeight(1).align(Alignment.Top)
    }.width('88%').height('78%').backgroundColor('#FFFFFF').borderRadius(18).clip(true)
  }

  // 交换多选辅助
  pickedWant(i: number): boolean { return (i % 2) === 0; }
  toggleWant(i: number): void { this.swapWantIdx = i; }

  // ---------------- 主布局 ----------------
  build() {
    Stack() {
      Column() {
        this.headerBuilder()
        Scroll() {
          Column() {
            if (this.currentBottomTab === 0) { this.bazaarContent() }
            else if (this.currentBottomTab === 1) { this.swapContent() }
            else if (this.currentBottomTab === 2) { this.collectionContent() }
            else { this.mineContent() }
          }.width('100%')
        }.layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top)
        this.bottomTabsBuilder()
      }.width('100%').height('100%')

      ForEach(this.particles, (p: ParticleItem, i: number) => {
        Text(p.emoji).fontSize(p.size).opacity(p.opacity).position({ x: p.x, y: 80 + (i % 5) * 118 })
      }, (p: ParticleItem, i: number) => 'pt' + i.toString())

      if (this.showDetailModal) {
        Column() { this.detailModalBuilder() }.width('100%').height('100%').backgroundColor('99000000').justifyContent(FlexAlign.Center).onClick(() => { this.showDetailModal = false; })
      }
      if (this.showSellModal) {
        Column() { this.sellModalBuilder() }.width('100%').height('100%').backgroundColor('99000000').justifyContent(FlexAlign.Center).onClick(() => { this.showSellModal = false; })
      }
      if (this.showSwapModal) {
        Column() { this.swapModalBuilder() }.width('100%').height('100%').backgroundColor('99000000').justifyContent(FlexAlign.Center).onClick(() => { this.showSwapModal = false; })
      }
      if (this.showDeleteModal) {
        Column() { this.deleteModalBuilder() }.width('100%').height('100%').backgroundColor('99000000').justifyContent(FlexAlign.Center).onClick(() => { this.showDeleteModal = false; })
      }
    }.width('100%').height('100%').backgroundColor(PALETTE.bg)
  }
}
TabsBuilder()
      }.width('100%').height('100%')

      ForEach(this.particles, (p: ParticleItem, i: number) => {
        Text(p.emoji).fontSize(p.size).opacity(p.opacity).position({ x: p.x, y: 80 + (i % 5) * 118 })
      }, (p: ParticleItem, i: number) => 'pt' + i.toString())

      if (this.showDetailModal) {
        Column() { this.detailModalBuilder() }.width('100%').height('100%').backgroundColor('99000000').justifyContent(FlexAlign.Center).onClick(() => { this.showDetailModal = false; })
      }
      if (this.showSellModal) {
        Column() { this.sellModalBuilder() }.width('100%').height('100%').backgroundColor('99000000').justifyContent(FlexAlign.Center).onClick(() => { this.showSellModal = false; })
      }
      if (this.showSwapModal) {
        Column() { this.swapModalBuilder() }.width('100%').height('100%').backgroundColor('99000000').justifyContent(FlexAlign.Center).onClick(() => { this.showSwapModal = false; })
      }
      if (this.showDeleteModal) {
        Column() { this.deleteModalBuilder() }.width('100%').height('100%').backgroundColor('99000000').justifyContent(FlexAlign.Center).onClick(() => { this.showDeleteModal = false; })
      }
    }.width('100%').height('100%').backgroundColor(PALETTE.bg)
  }
}