HarmonyOS 6基于ArkTS状态驱动开发，实现多Tab页面切换与组件刷新，通过变量管控弹窗、动画、列表数据，适配鸿蒙标准交互渲染逻辑

qq63160596

90人浏览 · 2026-08-27 16:31:22

qq63160596 · 2026-08-27 16:31:22 发布

从电商APP开发到企业官网建设，从数据大屏可视化到AI对话机器人，从微信小程序商城到区块链DAPP——本文以一套完整的ArkTS代码外包集市应用为例，深度解析HarmonyOS ArkTS API 24在极客代码风外包接单场景下的双Tab嵌套架构、14粒子漂浮动效、S/A/B/C四级项目分级、深空黑终端绿详情头、技术栈接单帖等核心技术实现。

一、引言

程序员接单、外包服务、需求发布、技术成果展示——这些承载着开发者自由职业梦想的服务，在远程办公浪潮下反而焕发了新的热潮。从电商APP开发到企业官网建设，从数据大屏可视化到AI对话机器人，从微信小程序商城到区块链DAPP，代码外包已经成为一个庞大的自由职业市场。然而外包接单长期依赖猪八戒、一品威客等泛平台，缺乏针对程序员的专业化功能——项目等级评级、技术栈区分（Flutter/Vue3/ECharts/uni-app/Python/Java/React/Go/Unity/Solidity）、技术栈接单、技能图鉴等核心需求无法得到满足。

本应用（代码外包集市）以"深空黑+终端绿"极客代码风为视觉基调，打造集接单广场、项目接单、技能图鉴、个人中心四大模块于一体的极客代码风外包接单与技术展示社区。18个需求覆盖前端/后端/小程序/UI设计/算法全品类，8条接单帖覆盖技术栈接单场景，5套教程覆盖Vue3/Python爬虫/Flutter/Go后端/大模型Prompt工程，9款外包工具覆盖开发周边，6套技术栈收藏记录技能进度，3条甲方点评提供真实评价。

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

二、整体架构

本应用采用单组件双Tab嵌套架构——@Entry @Component struct Index作为唯一入口组件，通过@State currentBottomTab控制四大底部Tab（接单/项目/图鉴/我的），接单Tab内部再通过@State currentTopTab控制六大顶部分类Tab（全部/前端/后端/小程序/UI设计/算法），形成双层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嵌套是本应用的架构特色——接单作为主品类，内部再按前端/后端/小程序/UI设计/算法细分，开发者可以快速切换品类浏览。

三、色彩系统：深空黑+终端绿极客代码风

极客代码风的视觉语言应该是"深邃、科技、有终端的黑客感"。本应用采用深空黑+终端绿配色：

主色体系：

#0D1117 深空黑：应用根背景、深色卡片背景、弹框头部——代表GitHub风格的深邃科技感
#161B22 深灰蓝：卡片背景、弹框背景、底部Tab背景——代表层次
#00D26A 终端绿：主高亮色、Tab选中态、按钮、标签、渐变——代表终端的成功输出与代码运行
#010409 纯黑：头部渐变终点、最深背景——代表深邃
#58A6FF 科技蓝：分类色、统计数字、发布时间——代表链接与科技
#F0B72F 复古金：价格、等级标签、统计数字——代表价值与珍贵
#FF6B6B 珊瑚红：删除按钮、点赞、警告——代表热情与警告
#8B949E 烟灰：辅助文字、未选中Tab、说明文字——代表素雅
#30363D 深灰：分割线、进度条背景——代表层次

浅色背景层次（深色主题下的层次）：

#0D1117 深空黑：应用根背景
#161B22 深灰蓝：卡片背景、弹框背景
#1C2333 深蓝灰：高亮卡片背景、Banner背景、教程步骤背景、选中态背景
#010409 纯黑：头部渐变终点、最深背景

渐变设计：

头部：linearGradient angle 135 从#0D1117到#010409——深空黑到纯黑的深邃渐变

深空黑+终端绿的配色通过深空黑根背景+深灰蓝卡片+深蓝灰高亮背景营造GitHub风格的科技空间感，终端绿#00D26A作为主高亮和按钮色，复古金#F0B72F作为价格和等级色，科技蓝#58A6FF作为分类和发布时间色，确保视觉一致性和极客代码风韵味。

四、数据模型

应用定义了7个接口，覆盖外包接单全链路：

TaskItem需求（id/name/eng/cat/price/rarity/year/rating/starStr/seller/tag/desc/want/sales/emoji/tech）——18个，含中英文名称、分类、项目等级0-100、发布年份、技术栈（Flutter/Vue3/ECharts/uni-app/Python/Java/Figma/TensorFlow/React/Go/Unity/H5/云开发/Solidity/iOS等）、付款方式等外包特色字段
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套技术栈，含已学/总数/进度百分比
TaskReview甲方点评（id/user/setName/starStr/content）——3条点评
ColorPalette配色（bg/card/green/black/deep/blue/yellow/sub/line）——9色配色常量

rarity项目等级字段是外包的特色设计——0-100数值，通过rarityLabel函数映射为四级（S级≥95/A级≥80/B级≥60/C级<60），通过rarityColor函数映射为四色（复古金/橙/科技蓝/终端绿），在等级柱状图和需求详情中直接渲染。tech技术栈字段区分Flutter/Vue3/ECharts/uni-app/Python/Java/Figma/TensorFlow/React/Go/Unity/H5/云开发/Solidity/iOS等不同技术栈，want付款方式字段支持外包交易场景。

五、Tab0 接单广场（双Tab嵌套）

接单页是应用的核心，采用底部Tab+顶部Tab双层嵌套架构。顶部6个分类Tab（全部/前端/后端/小程序/UI设计/算法），每个Tab有独立的布局风格：

全部Tab：Banner+双列瀑布

深蓝灰Banner：开发者接单节春季专场+高薪项目3天限时平台担保+S级项目/AI需求标签
全城新接单：双列瀑布布局，左列2件（APP上架服务/Python脚本），右列1件（区块链DAPP，深蓝灰高亮背景），每件含emoji/中文名/英文名/描述/价格/标签

前端Tab：横滑大卡+等级柱状图+捡漏榜

S级项目专区：3件横滑大卡（电商APP开发/企业官网建设/数据大屏可视化），深灰蓝背景160宽，含emoji/名称/英文+年份/价格+等级标签
项目等级排行：3根柱状图（92/75/88），第三根企业官网用珊瑚红高亮，底部说明"电商APP开发以92分等级登顶，市面最紧缺"
今日捡漏榜：3件排行列表，第1名复古金数字，含排名/emoji/名称+等级+付款方式/价格

后端Tab：技术教程时间轴

5套教程时间轴布局（Vue3快速入门/Python爬虫实战/Flutter跨平台开发/Go后端开发/大模型Prompt工程），左侧emoji+终端绿竖线连接，右侧卡片含名称/下载数/作者+类型+页数/步骤列表（带序号圆点）/点赞+教程可下载

小程序Tab：三列格子+交换建议

外包工具三列网格（9款工具，31%宽度），每件含emoji/名称/系列/价格
工具交换行情：偶数ID工具的交换列表，含emoji/名称+品相/描述/价格（终端绿）

UI设计Tab：对决卡+侧栏统计

需求对决：电商APP VS 游戏开发，两张深灰蓝对决卡中间VS标识
左侧3件需求列表（后台管理系统/物联网网关/游戏开发），右侧3格统计（12本周高薪成交终端绿/12.5万总交易额复古金/98%好评率终端绿）

算法Tab：标签云+紧凑列表

技术栈标签云：6套技术栈（前端框架/后端语言/移动开发/数据库/AI算法/云服务），深蓝灰背景chip
3件紧凑列表（公众号开发/视频网站开发/小程序云开发），第3件深蓝灰高亮背景，含等级彩色标签
底部提示：集齐三大技术栈可召唤隐藏福利：前端+后端+数据库

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

六、Tab1 项目接单

项目页是外包接单的特色功能——技术栈接单。由两个层次构成：

1. 统计条+发接单按钮：四格统计（156在接单终端绿/42今日成交复古金/98%好评终端绿）+右侧发接单按钮（终端绿底，触发提交方案弹框）。

2. 接单帖列表：8条接单帖卡片，每帖含：

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

项目页解决了外包接单中"技术栈接单"的核心需求——开发者可以用自己的技术栈（Vue3/Flutter/Python/Go/UI设计/爬虫/小程序/物联网）接单心仪的项目，通过地点标签支持远程办公和线下驻场，通过热度标签筛选热门接单帖。

七、Tab2 技能图鉴

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

1. 标题+登记按钮：我的技术栈图鉴标题+记录每一项技能的学习进度+右侧✚登记按钮（终端绿底，触发发布需求弹框复用）。

2. 技术栈进度列表：6套技术栈（前端框架/后端语言/移动开发/数据库/AI算法/云服务），每套含：

头部：emoji+名称+英文系列名+已学X/总数+右侧进度百分比（通过rateColor函数动态着色：≥55终端绿/≥40复古金/<40珊瑚红）
进度条：双色进度条（已学部分rateColor色+未学部分深灰），宽度通过百分比动态计算

3. 技能成就墙：4个成就标签（🎖️全栈工程师/🏆接单大神/🤖AI算法专家/⚙️架构大师），不同颜色文字。

图鉴页让开发者可以系统化管理自己的技术栈学习进度，通过进度条和百分比直观看到每套技术栈的完成度，通过成就墙增加学习的趣味性和成就感。

八、Tab3 个人中心

我的页是开发者个人信息管理。由三个层次构成：

1. 会员信息卡：深灰蓝背景，含🚀头像+程序员阿乐+LV.10资深外包·信用分990+右侧＞箭头+三格统计（38在接项目终端绿/12待交付终端绿/¥25.8万累计接单额终端绿）。

2. 我的接单清单：3件在接需求（公众号开发/区块链DAPP/Python脚本），每件含emoji/名称+预算+付款方式/右侧进行中标签（复古金底深蓝灰背景）。

3. 常驻办公区：5个地点列表（光谷软件园/金融港/江汉路/楚河汉街/线上接单），每个含不同emoji（🚇/🏬/🚌/🏪/📦）+地点名+右侧站点说明。

我的页通过接单清单和常驻办公区两个特色功能，将外包接单的线下场景融入个人中心，让开发者可以管理自己的在接项目和常驻办公地点。

九、弹框体系

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

1. 发布需求弹框（新增）：88%宽76%高，深空黑头部（💻发布需求+高薪悬赏坐等接单），滚动内容含：需求类型（8个需求chip选择，选中终端绿底深空黑字）+交付标准（5档chip：全新需求/待审核/开发中/已上线/有纠纷，选中复古金底深空黑字）+项目预算（−/¥价格/＋步进器，步进10元，价格>20000显示"高薪项目建议走对公"否则"实惠项目更容易成交"）+需求描述（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. S/A/B/C四级项目分级：rarity字段0-100数值，通过rarityLabel映射为四级标签（S级≥95/A级≥80/B级≥60/C级<60），通过rarityColor映射为四色（复古金/橙/科技蓝/终端绿），在柱状图、需求详情、紧凑列表中统一渲染，数据驱动UI。

4. 深空黑终端绿头部设计：头部使用深空黑#0D1117到纯黑#010409的linearGradient渐变，终端绿#00D26A文字和标签在深色背景上形成鲜明对比，营造GitHub风格的极客代码感。

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/detailTech/detailRarity/detailYear/detailSeller/detailTag/detailStar/detailRating/detailDesc/detailWant）通过遍历TASKS数组查找selectedTaskId对应的需求字段，在详情弹框中调用，避免在Builder中写复杂的查找逻辑。

9. 步进器预算输入：发布需求弹框的预算采用−/¥价格/＋步进器设计，步进10元，通过@State sellPrice控制，价格>20000时动态显示"高薪项目建议走对公"提示，交互友好。

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

十一、同类对比

维度	通用外包平台	本应用（代码外包集市）
主题	浅色/蓝色为主	深空黑+终端绿极客代码风
架构	单Tab或简单分类	双Tab嵌套（底部4+顶部6）
动效	无或简单	14个粒子漂浮动效
项目分级	无或简单星级	0-100数值+S/A/B/C四级+四色映射
技术栈接单	无或简单留言	接单帖+我擅长⇄我想接对称布局
技术教程	无或外部链接	5套时间轴布局教程+步骤列表
技能图鉴	无或简单收藏	6套技术栈+进度条+成就墙
接单清单	无	3件在接项目+预算+付款方式+进行中
常驻办公区	无	5个地点+站点说明
弹框	2-3种	4种（发布需求/提交方案/删除/详情）

十二、完整代码结构总览

1308.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/selectedTaskId/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 运行应用

运行应用界面

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

13.6 预览调试

预览调试界面

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

十四、总结展望

本文完整解析了基于HarmonyOS ArkTS API 24的代码外包集市应用，从深空黑+终端绿极客代码配色系统、双Tab嵌套架构、需求数据模型（含项目等级0-100/技术栈/付款方式等特色字段）、接单广场六大品类独立布局（全部双列瀑布/前端横滑大卡+等级柱状图+捡漏榜/后端技术教程时间轴/小程序三列网格/UI设计对决卡+侧栏统计/算法标签云+紧凑列表）、项目技术栈接单帖、技能图鉴进度条、个人中心接单清单+常驻办公区，到4种弹框体系、14粒子漂浮动效、S/A/B/C四级项目分级、深空黑终端绿头部、全局纯函数工具集、详情数据取值方法，展现了ArkTS在极客代码风外包接单场景下的完整工程实践。

核心价值：

深空黑+终端绿极客配色：GitHub风格的深邃科技感，终端绿高亮营造代码运行氛围
双Tab嵌套架构：底部4Tab+顶部6Tab，双层分类浏览体验
14粒子漂浮动效：setInterval驱动emoji粒子漂浮，aboutToDisappear清理定时器
S/A/B/C四级项目分级：0-100数值→四级标签→四色映射，数据驱动UI
技术栈接单帖：我擅长⇄我想接对称布局+热度标签动态生成+远程办公驻场
技能图鉴进度管理：6套技术栈+双色进度条+成就墙，学习系统化
全局纯函数工具集：10+纯函数抽离数据到UI映射逻辑，代码可维护

未来可扩展：

接入真实外包需求数据库，自动识别项目类型和技术栈，替代手动分类
粒子动效接入设备陀螺仪，随手机倾斜方向漂移，增强沉浸感
项目分级接入真实成交数据和市场行情，动态更新项目等级评分
技术栈接单接入智能匹配算法，根据技术栈和项目需求推荐接单对象
技能图鉴接入LeetCode/GitHub数据同步，自动更新技术栈学习进度
接入代码评审功能，开发者可以展示自己的GitHub项目请圈友在线评审
接单清单接入推送通知，有匹配项目时自动提醒开发者

代码外包集市，让每一行代码都找到懂它的甲方，让深空流转、终端生香。

附录：完整源码

// ============================================================
// 1308.ets - 代码外包集市
// 场景：程序员接单/外包服务/需求发布/技术成果展示的社区（极客风）
// 风格：深空黑 #0D1117 + 终端绿 #00D26A 极客代码风
// 底部Tab：接单 / 项目 / 图鉴 / 我的
// 顶部Tab：全部 / 前端 / 后端 / 小程序 / UI设计 / 算法
// 弹框：发布需求(新增) / 提交方案(新增) / 删除需求(删除) / 需求详情(详情)
// ============================================================
// ---------------- 配色 ----------------
interface ColorPalette {
bg: string;
card: string;
green: string;
black: string;
deep: string;
blue: string;
yellow: string;
sub: string;
line: string;
}
const PALETTE: ColorPalette = {
bg: '#0D1117',
card: '#161B22',
green: '#00D26A',
black: '#0D1117',
deep: '#010409',
blue: '#58A6FF',
yellow: '#F0B72F',
sub: '#8B949E',
line: '#30363D'
};
// ---------------- 通用结构 ----------------
interface TabItem { label: string; icon: string; }
interface ParticleItem { x: number; emoji: string; size: number; speed: number; opacity: number; }
// ---------------- 需求条目 ----------------
interface TaskItem {
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; tech: 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 TaskReview {
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: 'UI设计', icon: '🖌️' }, { label: '算法', icon: '🧠' }
];
// ---------------- 需求数据（18款写死） ----------------
const TASKS: TaskItem[] = [
{ id: 1, name: '电商APP 开发', eng: 'E-commerce App', cat: 'retired', price: 50000, rarity: 92, year: 2024, rating: 5.0, starStr: '⭐⭐⭐⭐⭐', seller: '王老板', tag: '全栈开发', desc: '需要一个完整的电商APP，支持商品展示、购物车、支付功能，预算5万起，要求有成熟案例。', want: '合同签完付款50%', sales: 3, emoji: '🛒', tech: 'Flutter' },
{ id: 2, name: '企业官网 建设', eng: 'Corporate Website', cat: 'retired', price: 15000, rarity: 75, year: 2024, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '李总', tag: '响应式', desc: '需要做一个企业展示官网，支持PC和移动端，包含新闻发布系统，预算1.5万。', want: '要求代码规范', sales: 8, emoji: '🏢', tech: 'Vue3' },
{ id: 3, name: '数据大屏 可视化', eng: 'Data Dashboard', cat: 'retired', price: 28000, rarity: 88, year: 2024, rating: 4.9, starStr: '⭐⭐⭐⭐⭐', seller: '赵经理', tag: 'ECharts', desc: '需要开发一个智慧城市数据大屏，包含实时数据图表，要求动效流畅，预算2.8万。', want: '需要驻场3天', sales: 2, emoji: '📊', tech: 'ECharts' },
{ id: 4, name: '微信小程序 商城', eng: 'WeChat Mini Program', cat: 'moc', price: 12000, rarity: 50, year: 2025, rating: 4.9, starStr: '⭐⭐⭐⭐⭐', seller: '张老板', tag: '拼团功能', desc: '需要开发一个微信小程序商城，支持拼团、秒杀功能，预算1.2万，要求有成功案例。', want: '可提供源码', sales: 12, emoji: '📱', tech: 'uni-app' },
{ id: 5, name: 'AI 对话机器人', eng: 'AI Chatbot', cat: 'moc', price: 36000, rarity: 80, year: 2025, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '周总', tag: '大模型', desc: '需要开发一个基于大模型的客服机器人，支持知识库定制，预算3.6万，急招。', want: '需签订保密协议', sales: 4, emoji: '🤖', tech: 'Python' },
{ id: 6, name: '爬虫采集系统', eng: 'Crawler System', cat: 'moc', price: 8000, rarity: 45, year: 2025, rating: 4.7, starStr: '⭐⭐⭐⭐', seller: '陈老板', tag: '数据处理', desc: '需要开发一个爬虫系统，抓取行业公开数据，要求代理IP池和去重策略，预算8千。', want: '需符合法律', sales: 10, emoji: '🕷️', tech: 'Scrapy' },
{ id: 7, name: 'CRM系统 定制', eng: 'CRM System', cat: 'fig', price: 20000, rarity: 55, year: 2024, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '刘总', tag: '客户管理', desc: '需要开发一个CRM系统，支持客户管理、跟进记录、报表导出，预算2万。', want: '需要驻场开发', sales: 5, emoji: '👥', tech: 'Java' },
{ id: 8, name: 'APP UI设计', eng: 'App UI Design', cat: 'fig', price: 6000, rarity: 30, year: 2025, rating: 4.9, starStr: '⭐⭐⭐⭐⭐', seller: '设计师小美', tag: '全套交付', desc: '需要为一个社交APP设计全套UI，包含原型图和切图，预算6千，要求有作品集。', want: '提供AI文件', sales: 15, emoji: '🎨', tech: 'Figma' },
{ id: 9, name: '算法优化 服务', eng: 'Algorithm Service', cat: 'fig', price: 12000, rarity: 40, year: 2024, rating: 4.7, starStr: '⭐⭐⭐⭐', seller: '算法专家', tag: '性能提升', desc: '需要为一个推荐系统做算法优化，提升点击率，预算1.2万，要求有相关论文。', want: '面议', sales: 3, emoji: '🧠', tech: 'TensorFlow' },
{ id: 10, name: '后台管理系统', eng: 'Admin System', cat: 'tech', price: 18000, rarity: 45, year: 2024, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '孙总', tag: 'RBAC权限', desc: '需要开发一个后台管理系统，包含用户管理、角色权限、日志审计，预算1.8万。', want: '要求TypeScript', sales: 6, emoji: '🖥️', tech: 'React' },
{ id: 11, name: '物联网 网关', eng: 'IoT Gateway', cat: 'tech', price: 15000, rarity: 35, year: 2024, rating: 4.7, starStr: '⭐⭐⭐⭐', seller: '硬件厂商', tag: 'MQTT协议', desc: '需要开发一个物联网网关，支持MQTT协议和云端通信，预算1.5万。', want: '需提供硬件', sales: 4, emoji: '📡', tech: 'Go' },
{ id: 12, name: '游戏 开发', eng: 'Game Development', cat: 'tech', price: 45000, rarity: 75, year: 2024, rating: 4.9, starStr: '⭐⭐⭐⭐⭐', seller: '游戏公司', tag: 'Unity', desc: '需要开发一个休闲小游戏，包含排行榜和分享功能，预算4.5万。', want: '需签合同', sales: 2, emoji: '🎮', tech: 'Unity' },
{ id: 13, name: '公众号 开发', eng: 'WeChat Official', cat: 'street', price: 4000, rarity: 20, year: 2025, rating: 4.6, starStr: '⭐⭐⭐⭐', seller: '自媒体人', tag: '活动页面', desc: '需要开发一个公众号活动页面，支持抽奖和报名功能，预算4千。', want: '需提供文案', sales: 20, emoji: '📱', tech: 'H5' },
{ id: 14, name: '视频网站 开发', eng: 'Video Platform', cat: 'street', price: 30000, rarity: 60, year: 2023, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '传媒公司', tag: '视频流', desc: '需要开发一个视频网站，支持视频上传、播放、弹幕功能，预算3万。', want: '需驻场', sales: 3, emoji: '🎬', tech: 'Vue3' },
{ id: 15, name: '小程序 云开发', eng: 'Cloud Development', cat: 'street', price: 9000, rarity: 30, year: 2024, rating: 4.7, starStr: '⭐⭐⭐⭐', seller: '创业公司', tag: '免服务器', desc: '需要开发一个微信小程序，使用云开发，免服务器运维，预算9千。', want: '需提供云环境', sales: 8, emoji: '☁️', tech: '云开发' },
{ id: 16, name: '区块链 DAPP', eng: 'Blockchain DApp', cat: 'classic', price: 25000, rarity: 70, year: 2024, rating: 4.9, starStr: '⭐⭐⭐⭐⭐', seller: '币圈大佬', tag: '智能合约', desc: '需要开发一个区块链DAPP，包含智能合约和钱包功能，预算2.5万。', want: '需海外公司', sales: 2, emoji: '⛓️', tech: 'Solidity' },
{ id: 17, name: 'APP 上架服务', eng: 'App Store Release', cat: 'classic', price: 3000, rarity: 15, year: 2024, rating: 4.5, starStr: '⭐⭐⭐⭐', seller: '个人开发者', tag: '合规审核', desc: '需要协助APP上架应用商店，包含版权和隐私协议，预算3千。', want: '需提供证书', sales: 15, emoji: '📲', tech: 'iOS' },
{ id: 18, name: 'Python 脚本', eng: 'Python Script', cat: 'classic', price: 2000, rarity: 10, year: 2025, rating: 4.6, starStr: '⭐⭐⭐⭐', seller: '自动化需求', tag: '办公自动化', desc: '需要开发一个Python自动化脚本，处理Excel表格，预算2千。', want: '需提供模板', sales: 30, emoji: '🐍', tech: 'Python' }
];
// ---------------- 接单帖数据（8条写死） ----------------
const SWAPS: SwapItem[] = [
{ id: 1, user: '全栈开发者', avatar: '💻', offer: '电商APP开发', want: '后端架构', time: '今天 13:20', likes: 46, content: '专业全栈开发，精通Flutter和Java，有成功案例，希望接一个长期项目，可驻场。', place: '远程办公' },
{ id: 2, user: '前端工程师', avatar: '🎨', offer: 'Vue3开发', want: 'UI设计', time: '今天 11:05', likes: 38, content: '资深前端，精通Vue3和React，希望能接到管理系统和大屏需求，可试稿。', place: '武汉光谷' },
{ id: 3, user: '算法专家', avatar: '🧠', offer: '算法优化', want: '高薪项目', time: '昨天 18:42', likes: 61, content: 'AI领域专家，精通深度学习，希望接到算法优化和模型训练项目，可签协议。', place: '远程办公' },
{ id: 4, user: 'UI设计师', avatar: '🖌️', offer: 'APP设计', want: '前端合作', time: '昨天 15:30', likes: 29, content: '高级UI设计师，提供全套Figma源文件，寻求长期合作的前端团队。', place: '线上合作' },
{ id: 5, user: '爬虫工程师', avatar: '🕷️', offer: '爬虫开发', want: '数据处理', time: '前天 20:15', likes: 22, content: '精通Scrapy和反爬策略，可承接数据采集项目，保证合法合规。', place: '远程办公' },
{ id: 6, user: '小程序专家', avatar: '📱', offer: '小程序开发', want: '前后端', time: '前天 09:50', likes: 41, content: '精通uni-app，开发过多个商城，希望接到有挑战性的项目。', place: '武汉江汉' },
{ id: 7, user: '硬件工程师', avatar: '📡', offer: '物联网开发', want: '高薪', time: '3天前 22:08', likes: 55, content: '精通Go和MQTT，有丰富硬件对接经验，希望接到物联网项目。', place: '武汉洪山' },
{ id: 8, user: '大学生程序员', avatar: '👨‍🎓', offer: 'Python脚本', want: '入门项目', time: '4天前 14:26', likes: 17, content: '计算机专业大四学生，精通Python，希望能接到小项目积累经验。', place: '线上接单' }
];
// ---------------- 技术/教程数据（5条写死） ----------------
const GUIDES: GuideItem[] = [
{ id: 1, name: 'Vue3 快速入门', type: '前端', pages: 80, author: '前端工程师', likes: 342, downloads: 2100, emoji: '🎨', steps: ['基础语法讲解 1-20页', '组件化开发 21-50页', '路由与状态管理 51-80页'] },
{ id: 2, name: 'Python 爬虫实战', type: '爬虫', pages: 60, author: '爬虫工程师', likes: 276, downloads: 1580, emoji: '🕷️', steps: ['Requests库基础 1-15页', 'Scrapy框架入门 16-40页', '反爬策略应对 41-60页'] },
{ id: 3, name: 'Flutter 跨平台开发', type: '前端', pages: 100, author: '全栈开发者', likes: 415, downloads: 3300, emoji: '💻', steps: ['Dart语言基础 1-30页', 'Widget组件 31-70页', '打包发布 71-100页'] },
{ id: 4, name: 'Go 后端开发', type: '后端', pages: 75, author: '后端架构师', likes: 198, downloads: 1260, emoji: '⚙️', steps: ['Go语法速成 1-25页', 'Gin框架实战 26-55页', '微服务架构 56-75页'] },
{ id: 5, name: '大模型 Prompt 工程', type: 'AI', pages: 40, author: '算法专家', likes: 233, downloads: 1420, emoji: '🤖', steps: ['Prompt设计原则 1-10页', '常见场景应用 11-30页', '成本控制 31-40页'] }
];
// ---------------- 外包/工具数据（9条写死） ----------------
const ACCESSORIES: AccessoryItem[] = [
{ id: 1, name: '代码托管服务', series: 'Git', price: 100, condition: '全年', seller: '开源社区', emoji: '🌐', desc: '私有仓库不限量' },
{ id: 2, name: '云服务器', series: '2C4G', price: 120, condition: '月付', seller: '云厂商', emoji: '☁️', desc: '稳定低延迟' },
{ id: 3, name: '域名注册', series: '.com', price: 60, condition: '一年', seller: '域名商', emoji: '🌐', desc: '免费SSL证书' },
{ id: 4, name: '数据库服务', series: 'MySQL', price: 200, condition: '月付', seller: '云厂商', emoji: '🗄️', desc: '自动备份' },
{ id: 5, name: 'ChatGPT API', series: '调用', price: 50, condition: '按量', seller: 'OpenAI', emoji: '🤖', desc: '按token计费' },
{ id: 6, name: 'UI素材库', series: 'SVG', price: 30, condition: '年费', seller: '设计网站', emoji: '🎨', desc: '海量图标' },
{ id: 7, name: '代理IP池', series: '500个', price: 80, condition: '月付', seller: '服务商', emoji: '🕷️', desc: '高匿HTTP' },
{ id: 8, name: '代码编辑器', series: 'VS Code', price: 0, condition: '免费', seller: '微软', emoji: '💻', desc: '插件丰富' },
{ id: 9, name: '设计协作工具', series: 'Figma', price: 0, condition: '免费', seller: 'Figma', emoji: '🖌️', desc: '多人协作' }
];
// ---------------- 技术栈收藏数据（6条写死） ----------------
const COLLECTIONS: CollectionItem[] = [
{ id: 1, name: '前端框架', series: 'Frontend', owned: 5, total: 12, rate: 42, emoji: '🎨' },
{ id: 2, name: '后端语言', series: 'Backend', owned: 4, total: 10, rate: 40, emoji: '⚙️' },
{ id: 3, name: '移动开发', series: 'Mobile', owned: 3, total: 8, rate: 38, emoji: '📱' },
{ id: 4, name: '数据库', series: 'Database', owned: 6, total: 12, rate: 50, emoji: '🗄️' },
{ id: 5, name: 'AI/算法', series: 'AI', owned: 2, total: 8, rate: 25, emoji: '🤖' },
{ id: 6, name: '云服务', series: 'Cloud', owned: 5, total: 10, rate: 50, emoji: '☁️' }
];
// ---------------- 评价数据（3条写死） ----------------
const TASK_REVIEWS: TaskReview[] = [
{ id: 1, user: '甲方王总', setName: '电商APP', starStr: '⭐⭐⭐⭐⭐', content: '开发效率很高，交付质量很好，沟通顺畅，下次还会继续合作。' },
{ id: 2, user: '产品经理', setName: '数据大屏', starStr: '⭐⭐⭐⭐✨', content: '可视化效果非常惊艳，数据对接及时，项目上线后好评如潮。' },
{ id: 3, user: '运营人员', setName: '微信小程序', starStr: '⭐⭐⭐⭐⭐', content: '拼团功能稳定，上线后用户转化率提升了30%，非常满意。' }
];
// ---------------- 全城周交易量图表数据 ----------------
const TRADE_LABELS: string[] = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const TRADE_BARS: number[] = [86, 64, 72, 58, 112, 156, 138];
// ---------------- 弹框选项 ----------------
const CONDITION_OPTIONS: string[] = ['全新需求', '待审核', '开发中', '已上线', '有纠纷'];
const PLACES: string[] = ['光谷软件园', '金融港', '江汉路', '楚河汉街', '线上接单'];
// ---------------- 全局纯函数 ----------------
function catColor(cat: string): string {
if (cat === 'retired') return '#F0B72F';
if (cat === 'moc') return '#58A6FF';
if (cat === 'fig') return '#00D26A';
if (cat === 'tech') return '#F0B72F';
if (cat === 'street') return '#FF6B6B';
return '#58A6FF';
}
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 'S级';
if (r >= 80) return 'A级';
if (r >= 60) return 'B级';
return 'C级';
}
function rarityColor(r: number): string {
if (r >= 95) return '#F0B72F';
if (r >= 80) return '#FF8A00';
if (r >= 60) return '#58A6FF';
return '#00D26A';
}
function tradeBarHeight(v: number): string {
return Math.round(v / 156 * 96).toString() + 'vp';
}
function rateColor(r: number): string {
if (r >= 55) return '#00D26A';
if (r >= 40) return '#F0B72F';
return '#FF6B6B';
}
function retiredSets(): TaskItem[] { return [TASKS[0], TASKS[1], TASKS[2]]; }
function mocSets(): TaskItem[] { return [TASKS[3], TASKS[4], TASKS[5]]; }
function figSets(): TaskItem[] { return [TASKS[6], TASKS[7], TASKS[8]]; }
function techSets(): TaskItem[] { return [TASKS[9], TASKS[10], TASKS[11]]; }
function streetSets(): TaskItem[] { return [TASKS[12], TASKS[13], TASKS[14]]; }
function classicSets(): TaskItem[] { return [TASKS[15], TASKS[16], TASKS[17]]; }
function cityLeft(): TaskItem[] { return [TASKS[16], TASKS[17]]; }
function cityRight(): TaskItem[] { return [TASKS[15]]; }
function hotSets(): TaskItem[] { return [TASKS[3], TASKS[5], TASKS[16], TASKS[17], TASKS[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 selectedTaskId: number = 1;
@State showSellModal: boolean = false;
@State showSwapModal: boolean = false;
@State showDeleteModal: boolean = false;
@State showDetailModal: boolean = false;
@State sellTaskIdx: 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 < TASKS.length; i++) if (TASKS[i].id === this.selectedTaskId) return TASKS[i].name; return ''; }
detailEng(): string { for (let i = 0; i < TASKS.length; i++) if (TASKS[i].id === this.selectedTaskId) return TASKS[i].eng; return ''; }
detailEmoji(): string { for (let i = 0; i < TASKS.length; i++) if (TASKS[i].id === this.selectedTaskId) return TASKS[i].emoji; return '💻'; }
detailPrice(): string { for (let i = 0; i < TASKS.length; i++) if (TASKS[i].id === this.selectedTaskId) return '¥' + TASKS[i].price.toString(); return ''; }
detailTech(): string { for (let i = 0; i < TASKS.length; i++) if (TASKS[i].id === this.selectedTaskId) return TASKS[i].tech; return ''; }
detailRarity(): string { for (let i = 0; i < TASKS.length; i++) if (TASKS[i].id === this.selectedTaskId) return TASKS[i].rarity.toString(); return ''; }
detailYear(): string { for (let i = 0; i < TASKS.length; i++) if (TASKS[i].id === this.selectedTaskId) return TASKS[i].year.toString(); return ''; }
detailSeller(): string { for (let i = 0; i < TASKS.length; i++) if (TASKS[i].id === this.selectedTaskId) return TASKS[i].seller; return ''; }
detailTag(): string { for (let i = 0; i < TASKS.length; i++) if (TASKS[i].id === this.selectedTaskId) return TASKS[i].tag; return ''; }
detailStar(): string { for (let i = 0; i < TASKS.length; i++) if (TASKS[i].id === this.selectedTaskId) return TASKS[i].starStr; return ''; }
detailRating(): string { for (let i = 0; i < TASKS.length; i++) if (TASKS[i].id === this.selectedTaskId) return TASKS[i].rating.toFixed(1) + '分'; return ''; }
detailDesc(): string { for (let i = 0; i < TASKS.length; i++) if (TASKS[i].id === this.selectedTaskId) return TASKS[i].desc; return ''; }
detailWant(): string { for (let i = 0; i < TASKS.length; i++) if (TASKS[i].id === this.selectedTaskId) return TASKS[i].want; return ''; }
// ---------------- 头部 ----------------
@Builder
headerBuilder() {
Column() {
Row() {
Column() {
Text('💻 代码外包集市').fontSize(22).fontWeight(FontWeight.Bold).fontColor('#00D26A')
Text('接单 · 外包 · 自由职业').fontSize(11).fontColor('#8B949E').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('#0D1117').backgroundColor('#00D26A').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('🔍 搜索：电商 / 小程序 / AI').fontSize(12).fontColor('#8B949E').layoutWeight(1)
Text('🧰 我的接单').fontSize(11).fontColor('#0D1117').backgroundColor('#00D26A').borderRadius(10).padding({ left: 10, right: 10, top: 4, bottom: 4 })
}.width('100%').padding({ left: 16, right: 16, bottom: 12 })
}
.linearGradient({ angle: 135, colors: [['#0D1117', 0], ['#010409', 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 ? '#00D26A' : '#8B949E').fontWeight(this.currentTopTab === idx ? FontWeight.Bold : FontWeight.Normal).margin({ top: 2 })
if (this.currentTopTab === idx) {
Divider().width(16).strokeWidth(3).color('#00D26A').borderRadius(2).margin({ top: 4 })
} else {
Divider().width(16).strokeWidth(3).color('#0D1117').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('#161B22').borderRadius(14).margin({ top: 10 })
}
// ---------------- 全部Tab：banner + 双列瀑布 ----------------
@Builder
cityContent() {
Column({ space: 12 }) {
Column() {
Text('👨‍💻 开发者接单节 · 春季专场').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#00D26A')
Text('高薪项目 3天限时 · 平台担保').fontSize(12).fontColor('#8B949E').margin({ top: 6 })
Row({ space: 10 }) {
Text('🏆 S级项目').fontSize(11).fontColor('#00D26A').backgroundColor('#161B22').borderRadius(12).padding({ left: 10, right: 10, top: 4, bottom: 4 })
Text('🤖 AI需求').fontSize(11).fontColor('#00D26A').backgroundColor('#161B22').borderRadius(12).padding({ left: 10, right: 10, top: 4, bottom: 4 })
}.margin({ top: 10 })
}.width('100%').padding(18).alignItems(HorizontalAlign.Start).backgroundColor('#1C2333').borderRadius(16)
Text('✨ 全城新接单').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#00D26A').width('100%')
Row({ space: 10 }) {
Column({ space: 10 }) {
ForEach(cityLeft(), (t: TaskItem) => {
Column() {
Text(t.emoji).fontSize(34).margin({ top: 16 })
Text(t.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ top: 8 })
Text(t.eng).fontSize(9).fontColor('#8B949E').margin({ top: 2 })
Text(t.desc).fontSize(11).fontColor('#8B949E').margin({ top: 8 }).maxLines(3).textOverflow({ overflow: TextOverflow.Ellipsis })
Row({ space: 6 }) {
Text('¥' + t.price.toString()).fontSize(15).fontWeight(FontWeight.Bold).fontColor('#F0B72F')
Text(t.tag).fontSize(9).fontColor('#00D26A').backgroundColor('#1C2333').borderRadius(8).padding({ left: 6, right: 6, top: 2, bottom: 2 })
}.margin({ top: 10, bottom: 14 })
}.width('100%').backgroundColor('#161B22').borderRadius(14).alignItems(HorizontalAlign.Start).padding({ left: 14, right: 14 })
.onClick(() => { this.selectedTaskId = t.id; this.showDetailModal = true; })
}, (t: TaskItem) => 'cl' + t.id.toString())
}.layoutWeight(1)
Column({ space: 10 }) {
ForEach(cityRight(), (t: TaskItem) => {
Column() {
Text(t.emoji).fontSize(34).margin({ top: 24 })
Text(t.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ top: 8 })
Text(t.eng).fontSize(9).fontColor('#8B949E').margin({ top: 2 })
Text(t.desc).fontSize(11).fontColor('#8B949E').margin({ top: 10 }).maxLines(4).textOverflow({ overflow: TextOverflow.Ellipsis })
Row({ space: 6 }) {
Text('¥' + t.price.toString()).fontSize(15).fontWeight(FontWeight.Bold).fontColor('#F0B72F')
Text(t.starStr).fontSize(10)
}.margin({ top: 12, bottom: 20 })
}.width('100%').backgroundColor('#1C2333').borderRadius(14).alignItems(HorizontalAlign.Start).padding({ left: 14, right: 14 })
.onClick(() => { this.selectedTaskId = t.id; this.showDetailModal = true; })
}, (t: TaskItem) => '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('🏆 S级项目专区').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#00D26A').width('100%')
Scroll() {
Row({ space: 12 }) {
ForEach(retiredSets(), (t: TaskItem) => {
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('#8B949E').margin({ top: 4 })
Row({ space: 6 }) {
Text('¥' + t.price.toString()).fontSize(16).fontWeight(FontWeight.Bold).fontColor('#F0B72F')
Text(rarityLabel(t.rarity)).fontSize(10).fontColor('#0D1117').backgroundColor('#00D26A').borderRadius(8).padding({ left: 6, right: 6, top: 2, bottom: 2 })
}.margin({ top: 10, bottom: 18 })
}.width(160).backgroundColor('#161B22').borderRadius(16).alignItems(HorizontalAlign.Center)
.onClick(() => { this.selectedTaskId = t.id; this.showDetailModal = true; })
}, (t: TaskItem) => '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('#00D26A').width('100%')
Row({ space: 6 }) {
ForEach(retiredSets(), (t: TaskItem, i: number) => {
Column({ space: 5 }) {
Text(t.rarity.toString()).fontSize(9).fontColor('#F0B72F')
Column().width(34).height((t.rarity).toString() + 'vp').backgroundColor(i === 2 ? '#FF6B6B' : '#00D26A').borderRadius({ topLeft: 5, topRight: 5 })
Text(t.year.toString() + '年').fontSize(9).fontColor('#8B949E')
}.alignItems(HorizontalAlign.Center).layoutWeight(1)
}, (t: TaskItem, i: number) => 'rb' + i.toString() + t.id.toString())
}.width('100%').justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Bottom).padding({ top: 12 })
Text('电商APP开发以92分等级登顶，市面最紧缺').fontSize(10).fontColor('#8B949E').margin({ top: 8 })
}.width('100%').backgroundColor('#161B22').borderRadius(14).padding(14).margin({ left: 14, right: 14 })
Column() {
Text('🕵️ 今日捡漏榜').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#00D26A').width('100%').margin({ bottom: 8 })
ForEach(retiredSets(), (t: TaskItem, i: number) => {
Row({ space: 10 }) {
Text((i + 1).toString()).fontSize(14).fontWeight(FontWeight.Bold).fontColor(i === 0 ? '#F0B72F' : '#8B949E').width(20)
Text(t.emoji).fontSize(18)
Column() {
Text(t.name).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Text(rarityLabel(t.rarity) + ' · ' + t.want).fontSize(10).fontColor('#8B949E').margin({ top: 2 })
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('¥' + t.price.toString()).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#F0B72F')
}.width('100%').padding({ top: 8, bottom: 8 }).onClick(() => { this.selectedTaskId = t.id; this.showDetailModal = true; })
}, (t: TaskItem, i: number) => 'pck' + i.toString() + t.id.toString())
}.width('100%').backgroundColor('#161B22').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('#00D26A').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('#00D26A').margin({ top: 4 })
}
}.width(40).alignItems(HorizontalAlign.Center)
Column({ space: 6 }) {
Row({ space: 8 }) {
Text(m.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').layoutWeight(1)
Text('⬇ ' + m.downloads.toString()).fontSize(10).fontColor('#00D26A')
}.width('100%')
Text('by ' + m.author + ' · ' + m.type + ' · ' + m.pages.toString() + '页').fontSize(10).fontColor('#8B949E')
Column({ space: 5 }) {
ForEach(m.steps, (s: string, si: number) => {
Row({ space: 8 }) {
Text((si + 1).toString()).fontSize(9).fontWeight(FontWeight.Bold).fontColor('#00D26A').backgroundColor('#1C2333').borderRadius(9).width(18).height(18).textAlign(TextAlign.Center)
Text(s).fontSize(10).fontColor('#8B949E').layoutWeight(1)
}.width('100%')
}, (s: string, si: number) => 'ms' + si.toString() + m.id.toString())
}.width('100%').backgroundColor('#1C2333').borderRadius(10).padding(10)
Row({ space: 8 }) {
Text('❤️ ' + m.likes.toString()).fontSize(10).fontColor('#FF6B6B')
Text(m.emoji + ' 教程可下载').fontSize(10).fontColor('#00D26A').layoutWeight(1).textAlign(TextAlign.End)
}.width('100%')
}.layoutWeight(1).backgroundColor(i === 1 ? '#1C2333' : '#161B22').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('#00D26A').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('#FFFFFF').margin({ top: 6 }).maxLines(1)
Text(f.series).fontSize(8).fontColor('#8B949E').margin({ top: 2 })
Text('¥' + f.price.toString()).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#F0B72F').margin({ top: 4, bottom: 12 })
}.width('31%').backgroundColor('#161B22').borderRadius(12).alignItems(HorizontalAlign.Center).margin({ bottom: 8 })
.onClick(() => { this.selectedTaskId = 7 + f.id % 3; this.showDetailModal = true; })
}, (f: AccessoryItem) => 'fg' + f.id.toString())
}.width('100%')
Column() {
Text('🤝 工具交换行情').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#00D26A').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('#FFFFFF')
Text(f.desc).fontSize(10).fontColor('#8B949E')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('¥' + f.price.toString()).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#00D26A')
}.width('100%').padding({ top: 8, bottom: 8 })
}
}, (f: AccessoryItem) => 'fgx' + f.id.toString())
}.width('100%').backgroundColor('#161B22').borderRadius(14).padding(14)
}.width('100%').padding({ left: 14, right: 14, top: 10, bottom: 16 })
}
// ---------------- UI设计Tab：对决卡 + 侧栏统计 ----------------
@Builder
techContent() {
Column({ space: 14 }) {
Text('🖌️ 需求对决 · 高薪诱惑').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#00D26A').width('100%')
Row({ space: 10 }) {
Column() {
Text('🛒').fontSize(34).margin({ top: 14 })
Text('电商APP').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ top: 6 })
Text('2024年 · 现价¥50000').fontSize(10).fontColor('#8B949E').margin({ top: 4, bottom: 14 })
}.layoutWeight(1).backgroundColor('#161B22').borderRadius(14).alignItems(HorizontalAlign.Center)
Column() {
Text('VS').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#00D26A')
Text('本周').fontSize(9).fontColor('#8B949E')
}.alignItems(HorizontalAlign.Center)
Column() {
Text('🎮').fontSize(34).margin({ top: 14 })
Text('游戏开发').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ top: 6 })
Text('2024年 · 现价¥45000').fontSize(10).fontColor('#8B949E').margin({ top: 4, bottom: 14 })
}.layoutWeight(1).backgroundColor('#1C2333').borderRadius(14).alignItems(HorizontalAlign.Center)
}.width('100%')
Row({ space: 10 }) {
Column({ space: 10 }) {
ForEach(techSets(), (t: TaskItem) => {
Row({ space: 10 }) {
Text(t.emoji).fontSize(22)
Column({ space: 2 }) {
Text(t.name).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Text(t.tag + ' · ' + t.tech).fontSize(10).fontColor('#8B949E')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('¥' + t.price.toString()).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#F0B72F')
}.width('100%').backgroundColor('#161B22').borderRadius(12).padding(12).onClick(() => { this.selectedTaskId = t.id; this.showDetailModal = true; })
}, (t: TaskItem) => 'tc' + t.id.toString())
}.layoutWeight(1)
Column({ space: 10 }) {
Column({ space: 4 }) {
Text('12').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#00D26A')
Text('本周高薪成交').fontSize(9).fontColor('#8B949E')
}.width('100%').backgroundColor('#1C2333').borderRadius(12).padding({ top: 10, bottom: 10 }).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) {
Text('12.5万').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#F0B72F')
Text('总交易额').fontSize(9).fontColor('#8B949E')
}.width('100%').backgroundColor('#1C2333').borderRadius(12).padding({ top: 10, bottom: 10 }).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) {
Text('98%').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#00D26A')
Text('好评率').fontSize(9).fontColor('#8B949E')
}.width('100%').backgroundColor('#161B22').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('#00D26A').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('#00D26A').backgroundColor('#1C2333').borderRadius(12).padding({ left: 10, right: 10, top: 6, bottom: 6 }).margin(4)
}, (c: CollectionItem) => 'ccoll' + c.id.toString())
}.width('100%')
ForEach(streetSets(), (t: TaskItem) => {
Row({ space: 12 }) {
Text(t.emoji).fontSize(24)
Column({ space: 2 }) {
Row({ space: 6 }) {
Text(t.name).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
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('#8B949E').maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('¥' + t.price.toString()).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#F0B72F')
}.width('100%').backgroundColor(t.id === 15 ? '#1C2333' : '#161B22').borderRadius(12).padding(12).onClick(() => { this.selectedTaskId = t.id; this.showDetailModal = true; })
}, (t: TaskItem) => 'st' + t.id.toString())
Text('💬 集齐三大技术栈可召唤隐藏福利：前端+后端+数据库').fontSize(10).fontColor('#8B949E').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('#00D26A'); Text('在接单').fontSize(10).fontColor('#8B949E') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) { Text('42').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#F0B72F'); Text('今日成交').fontSize(10).fontColor('#8B949E') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) { Text('98%').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#00D26A'); Text('好评').fontSize(10).fontColor('#8B949E') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 6 }) { Text('🤝 发接单').fontSize(12).fontColor('#0D1117').backgroundColor('#00D26A').borderRadius(14).padding({ left: 12, right: 12, top: 6, bottom: 6 }).onClick(() => { this.showSwapModal = true; }) }.alignItems(HorizontalAlign.Center)
}.width('100%').backgroundColor('#161B22').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('#FFFFFF')
Text(swapBadge(s.likes)).fontSize(8).fontColor('#F0B72F').backgroundColor('#1C2333').borderRadius(6).padding({ left: 5, right: 5, top: 1, bottom: 1 })
}
Text(s.time + ' · ' + s.place).fontSize(9).fontColor('#8B949E')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('⋯').fontSize(16).fontColor('#8B949E').onClick(() => { this.showDeleteModal = true; })
}.width('100%')
Row({ space: 10 }) {
Column({ space: 4 }) { Text('我擅长').fontSize(9).fontColor('#00D26A'); Text(s.offer).fontSize(11).fontWeight(FontWeight.Bold).fontColor('#FFFFFF') }.layoutWeight(1).backgroundColor('#1C2333').borderRadius(10).padding(8).alignItems(HorizontalAlign.Center)
Text('⇄').fontSize(14).fontColor('#00D26A')
Column({ space: 4 }) { Text('我想接').fontSize(9).fontColor('#F0B72F'); Text(s.want).fontSize(11).fontWeight(FontWeight.Bold).fontColor('#FFFFFF') }.layoutWeight(1).backgroundColor('#1C2333').borderRadius(10).padding(8).alignItems(HorizontalAlign.Center)
}.width('100%')
Text(s.content).fontSize(11).fontColor('#8B949E').lineHeight(16).width('100%')
Row({ space: 8 }) {
Text('📍 ' + s.place).fontSize(10).fontColor('#00D26A').backgroundColor('#0D1117').borderRadius(10).padding({ left: 8, right: 8, top: 4, bottom: 4 })
Text('❤️ ' + s.likes.toString()).fontSize(10).fontColor('#FF6B6B').layoutWeight(1).textAlign(TextAlign.End)
}.width('100%')
}.width('100%').backgroundColor('#161B22').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('#00D26A')
Text('记录每一项技能的学习进度').fontSize(10).fontColor('#8B949E')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('✚ 登记').fontSize(12).fontColor('#0D1117').backgroundColor('#00D26A').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('#FFFFFF')
Text(c.series + ' · 已学 ' + c.owned.toString() + '/' + c.total.toString()).fontSize(10).fontColor('#8B949E')
}.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('#30363D').borderRadius(3)
}.width('100%')
}.width('100%').backgroundColor(c.id === 5 ? '#1C2333' : '#161B22').borderRadius(14).padding(14)
}, (c: CollectionItem) => 'coll' + c.id.toString())
Column() {
Text('🏅 技能成就墙').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#00D26A').width('100%').margin({ bottom: 8 })
Flex({ wrap: FlexWrap.Wrap }) {
Text('🎖️ 全栈工程师').fontSize(10).fontColor('#00D26A').backgroundColor('#1C2333').borderRadius(10).padding({ left: 8, right: 8, top: 5, bottom: 5 }).margin(4)
Text('🏆 接单大神').fontSize(10).fontColor('#F0B72F').backgroundColor('#1C2333').borderRadius(10).padding({ left: 8, right: 8, top: 5, bottom: 5 }).margin(4)
Text('🤖 AI算法专家').fontSize(10).fontColor('#FF6B6B').backgroundColor('#1C2333').borderRadius(10).padding({ left: 8, right: 8, top: 5, bottom: 5 }).margin(4)
Text('⚙️ 架构大师').fontSize(10).fontColor('#58A6FF').backgroundColor('#1C2333').borderRadius(10).padding({ left: 8, right: 8, top: 5, bottom: 5 }).margin(4)
}.width('100%')
}.width('100%').backgroundColor('#161B22').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('#00D26A')
Text('LV.10 资深外包 · 信用分 990').fontSize(10).fontColor('#8B949E')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('＞').fontSize(18).fontColor('#8B949E')
}.width('100%')
Row({ space: 0 }) {
Column({ space: 3 }) { Text('38').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#00D26A'); Text('在接项目').fontSize(9).fontColor('#8B949E') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 3 }) { Text('12').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#00D26A'); Text('待交付').fontSize(9).fontColor('#8B949E') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 3 }) { Text('¥25.8万').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#00D26A'); Text('累计接单额').fontSize(9).fontColor('#8B949E') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
}.width('100%').margin({ top: 16 })
}.width('100%').padding(18).backgroundColor('#161B22').borderRadius(16).margin({ top: 10 })
Column() {
Text('🔨 我的接单清单').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#00D26A').width('100%').margin({ bottom: 6 })
ForEach(TASKS, (t: TaskItem) => {
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('#FFFFFF')
Text('预算 ¥' + t.price.toString() + ' 内 · ' + t.want).fontSize(9).fontColor('#8B949E')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('进行中').fontSize(10).fontColor('#F0B72F').backgroundColor('#1C2333').borderRadius(10).padding({ left: 8, right: 8, top: 3, bottom: 3 })
}.width('100%').padding({ top: 9, bottom: 9 })
}
}, (t: TaskItem) => 'wish' + t.id.toString())
}.width('100%').backgroundColor('#161B22').borderRadius(14).padding(14)
Column() {
Text('📍 常驻办公区').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#00D26A').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('#FFFFFF').layoutWeight(1)
Text(['光谷软件园', '金融港', '洪山广场', '楚河汉街', '线上开会'][i]).fontSize(9).fontColor('#8B949E')
}.width('100%').padding({ top: 9, bottom: 9 })
}, (p: string, i: number) => 'pl' + i.toString() + p)
}.width('100%').backgroundColor('#161B22').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 ? '#00D26A' : '#8B949E').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('#161B22').borderRadius({ topLeft: 18, topRight: 18 })
}
// ---------------- 弹框1：发布需求（新增·黑绿渐变头） ----------------
@Builder
sellModalBuilder() {
Column() {
Column() {
Text('💻 发布需求').fontSize(17).fontWeight(FontWeight.Bold).fontColor('#00D26A').margin({ top: 16 })
Text('高薪悬赏，坐等接单').fontSize(11).fontColor('#8B949E').margin({ top: 4, bottom: 16 })
}.width('100%').backgroundColor('#0D1117').borderRadius({ topLeft: 18, topRight: 18 })
Scroll() {
Column({ space: 14 }) {
Column({ space: 8 }) {
Text('需求类型').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#00D26A').width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(TASKS, (t: TaskItem, i: number) => {
if (i < 8) {
Text(t.emoji + ' ' + t.name).fontSize(10).fontColor(this.sellTaskIdx === i ? '#0D1117' : '#00D26A').backgroundColor(this.sellTaskIdx === i ? '#00D26A' : '#1C2333').borderRadius(12).padding({ left: 9, right: 9, top: 5, bottom: 5 }).margin(4).onClick(() => { this.sellTaskIdx = i; })
}
}, (t: TaskItem, 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('#00D26A').width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(CONDITION_OPTIONS, (c: string, i: number) => {
Text(c).fontSize(10).fontColor(this.sellCondIdx === i ? '#0D1117' : '#F0B72F').backgroundColor(this.sellCondIdx === i ? '#F0B72F' : '#1C2333').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('#00D26A')
Row({ space: 0 }) {
Text('−').fontSize(16).fontColor('#00D26A').backgroundColor('#1C2333').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('#FFFFFF').backgroundColor('#0D1117').height(30).textAlign(TextAlign.Center).padding({ left: 14, right: 14 })
Text('＋').fontSize(16).fontColor('#0D1117').backgroundColor('#00D26A').borderRadius({ topRight: 10, bottomRight: 10 }).width(34).height(30).textAlign(TextAlign.Center).onClick(() => { if (this.sellPrice < 99999) { this.sellPrice += 10; } })
}.borderRadius(10)
Text(this.sellPrice > 20000 ? '💰 高薪项目建议走对公' : '实惠项目更容易成交').fontSize(9).fontColor(this.sellPrice > 20000 ? '#F0B72F' : '#8B949E').layoutWeight(1).textAlign(TextAlign.End)
}.width('100%')
Column({ space: 8 }) {
Text('需求描述').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#00D26A').width('100%')
TextInput({ placeholder: '详细描述需求、技术要求、交付时间…', text: this.sellWords }).fontSize(12).fontColor('#FFFFFF').backgroundColor('#0D1117').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('#8B949E').backgroundColor('#0D1117').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showSellModal = false; })
Text('发布需求').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#0D1117').backgroundColor('#00D26A').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('#161B22').borderRadius(18).clip(true)
}
// ---------------- 弹框2：提交方案（新增·黑头） ----------------
@Builder
swapModalBuilder() {
Column() {
Column() {
Row({ space: 8 }) { Text('🤝').fontSize(22); Text('提交方案').fontSize(17).fontWeight(FontWeight.Bold).fontColor('#00D26A') }.margin({ top: 16 })
Text('亮出你的技术栈，拿下高薪单').fontSize(11).fontColor('#8B949E').margin({ top: 4, bottom: 14 })
}.width('100%').backgroundColor('#0D1117').borderRadius({ topLeft: 18, topRight: 18 })
Scroll() {
Column({ space: 14 }) {
Column({ space: 8 }) {
Text('我的技术栈').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#00D26A').width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(TASKS, (t: TaskItem, i: number) => {
if (i % 3 === 0 && i < 15) {
Text(t.emoji + ' ' + t.tech).fontSize(10).fontColor(this.swapOfferIdx === i ? '#0D1117' : '#00D26A').backgroundColor(this.swapOfferIdx === i ? '#00D26A' : '#1C2333').borderRadius(12).padding({ left: 9, right: 9, top: 5, bottom: 5 }).margin(4).onClick(() => { this.swapOfferIdx = i; })
}
}, (t: TaskItem, 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('#00D26A').width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(TASKS, (t: TaskItem, i: number) => {
if (i % 3 === 2 && i < 15) {
Text((this.pickedWant(i) ? '✓ ' : '') + t.emoji + ' ' + t.name).fontSize(10).fontColor(this.pickedWant(i) ? '#0D1117' : '#F0B72F').backgroundColor(this.pickedWant(i) ? '#F0B72F' : '#1C2333').borderRadius(12).padding({ left: 9, right: 9, top: 5, bottom: 5 }).margin(4).onClick(() => { this.toggleWant(i); })
}
}, (t: TaskItem, 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('#00D26A').width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(PLACES, (p: string, i: number) => {
Text(p).fontSize(10).fontColor(this.swapPlaceIdx === i ? '#0D1117' : '#00D26A').backgroundColor(this.swapPlaceIdx === i ? '#00D26A' : '#1C2333').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('#8B949E').lineHeight(15).layoutWeight(1)
}.width('100%').backgroundColor('#1C2333').borderRadius(10).padding(10)
Row({ space: 12 }) {
Text('再想想').fontSize(13).fontColor('#8B949E').backgroundColor('#0D1117').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showSwapModal = false; })
Text('提交方案').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#0D1117').backgroundColor('#00D26A').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('#161B22').borderRadius(18).clip(true)
}
// ---------------- 弹框3：删除需求 ----------------
@Builder
deleteModalBuilder() {
Column({ space: 14 }) {
Text('🗑️').fontSize(36)
Text('下架这个需求？').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#00D26A')
Text('下架后接单者将无法搜索到这条信息，\n提交的方案会一并清空，可重新发布。').fontSize(11).fontColor('#8B949E').textAlign(TextAlign.Center).lineHeight(17)
Row({ space: 12 }) {
Text('留着').fontSize(13).fontColor('#00D26A').backgroundColor('#1C2333').borderRadius(20).layoutWeight(1).height(40).textAlign(TextAlign.Center).onClick(() => { this.showDeleteModal = false; })
Text('确认下架').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#0D1117').backgroundColor('#FF6B6B').borderRadius(20).layoutWeight(1).height(40).textAlign(TextAlign.Center).onClick(() => { this.showDeleteModal = false; })
}.width('100%').margin({ top: 6 })
}.width('72%').backgroundColor('#161B22').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('#00D26A').margin({ top: 8 })
Text(this.detailEng()).fontSize(10).fontColor('#8B949E').margin({ top: 2 })
Row({ space: 8 }) {
Text(this.detailTag()).fontSize(9).fontColor('#0D1117').backgroundColor('#00D26A').borderRadius(8).padding({ left: 7, right: 7, top: 2, bottom: 2 })
Text(rarityLabel(Number(this.detailRarity()))).fontSize(9).fontColor('#0D1117').backgroundColor('#F0B72F').borderRadius(8).padding({ left: 7, right: 7, top: 2, bottom: 2 })
}.margin({ top: 10, bottom: 18 })
}.width('100%').backgroundColor('#1C2333').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('#F0B72F'); Text('预算').fontSize(9).fontColor('#8B949E') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) { Text(this.detailTech()).fontSize(17).fontWeight(FontWeight.Bold).fontColor('#00D26A'); Text('技术栈').fontSize(9).fontColor('#8B949E') }.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('#8B949E') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) { Text(this.detailYear()).fontSize(17).fontWeight(FontWeight.Bold).fontColor('#58A6FF'); Text('发布时间').fontSize(9).fontColor('#8B949E') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
}.width('100%').backgroundColor('#0D1117').borderRadius(12).padding({ top: 12, bottom: 12 })
Column({ space: 8 }) {
Text('🧾 需求描述').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#00D26A').width('100%')
Text(this.detailDesc()).fontSize(11).fontColor('#8B949E').lineHeight(18)
Row({ space: 8 }) {
Text('👤 ' + this.detailSeller()).fontSize(10).fontColor('#00D26A')
Text(this.detailStar() + ' ' + this.detailRating()).fontSize(10).fontColor('#F0B72F').layoutWeight(1).textAlign(TextAlign.End)
}.width('100%')
}.width('100%').alignItems(HorizontalAlign.Start)
Row({ space: 8 }) {
Text('🤝').fontSize(14)
Text('付款方式：' + this.detailWant()).fontSize(11).fontColor('#F0B72F').layoutWeight(1)
}.width('100%').backgroundColor('#1C2333').borderRadius(10).padding(10)
Column({ space: 10 }) {
Text('💬 甲方点评').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#00D26A').width('100%')
ForEach(TASK_REVIEWS, (r: TaskReview) => {
Column({ space: 5 }) {
Row({ space: 8 }) { Text('👤').fontSize(14); Text(r.user).fontSize(11).fontWeight(FontWeight.Bold).fontColor('#FFFFFF'); Text(r.starStr).fontSize(9).layoutWeight(1).textAlign(TextAlign.End) }.width('100%')
Text(r.content).fontSize(10).fontColor('#8B949E').lineHeight(15)
}.width('100%').backgroundColor('#0D1117').borderRadius(10).padding(10)
}, (r: TaskReview) => 'rv' + r.id.toString())
}.width('100%').alignItems(HorizontalAlign.Start)
Row({ space: 12 }) {
Text('💬 咨询一下').fontSize(13).fontColor('#00D26A').backgroundColor('#1C2333').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showDetailModal = false; })
Text('🎯 立即接单').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#0D1117').backgroundColor('#00D26A').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('#161B22').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)
}
}

nt.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)
}
}