🚀 SkillGo: 技能到家 (SkillGo UI-Kit)

"让每一份技能，在毫秒级匹配中闪耀价值。" SkillGo 是一款基于 LBS 地理位置的本地技能服务移动撮合平台。本项目文档专注于展示平台极致的 UI 交互设计 与 流畅动效实现方案。

✨ 核心视觉语言 (Visual Language)

我们为 Z 世代 用户打造了“有温度”的邻里互助生态，视觉风格定义为：轻量、通透、高频反馈。

• 色彩体系：采用“活力紫”作为主色调，象征技能的创造力；配合“呼吸绿”作为成功反馈色。
• 磨砂玻璃 (Glassmorphism)：在卡片层级大量应用毛玻璃材质，提升界面空间感。
• 非线性动效：全站采用 Standard Easing 曲线，模拟物理世界的惯性滑动。

📱 关键 UI 模块与动效设计

1. 智能撮合 - 脉冲波匹配 (Smart Match Animation)

场景：用户点击“即时寻人”时触发。

• 动效描述：以用户头像为中心，向外扩散三层半透明波纹（LBS 探测模拟）。
• 交互逻辑：当匹配到附近技能者时，卡片从波纹边缘以 Spring 弹性动效飞入屏幕中心。

2. 技能标签云 - 悬浮交互 (Tag Cloud Interaction)

场景：技能者端编辑个人擅长领域。

• 动效描述*：1500+ 维度的技能标签以“浮动气泡”形式排列。
• 交互逻辑：鼠标悬停或手指长按时，气泡产生微小的放大及果冻抖动感，点击后标签平滑收缩至顶部的“已选栏”。

3. 信用勋章 - 3D 翻转 (Credit Badge 3D Flip)

场景：展示技能者的“数字化职业勋章”。

• 动效描述：通过 CSS 3D Transform 实现，勋章表面具有随陀螺仪转动的金属光泽。
• 交互逻辑：点击勋章可平滑翻转至背面，展示具体的服务好评率及区块链存证编号。

4. 服务流程 - 步进轨迹动画 (Service Flow Tracker)

场景：从下单、上门到签到的实时追踪。

• 动效描述：地图上的图标采用路径描边动画（SVG Path Animation），实时显示技能者的行进轨迹。
• 交互逻辑：状态切换时（如“已到达”），底部状态栏向上弹起，并伴随触感反馈模拟。

🛠 技术方案 (Frontend Stack)

为了实现“毫秒级匹配”与“极致交互”：

模块	技术选型	实现目的
核心框架	Vue 3 / React	响应式状态管理，支撑复杂的用户画像实时更新。
动效引擎	Framer Motion / GSAP	负责复杂的路径动画与物理引擎模拟。
地图渲染	Mapbox GL JS	实现高精度的 LBS 定位展示与 3D 社区建模。
即时通讯	WebSocket + Protobuf	确保需求方与技能方的即时图纹交互无延迟。

📐 界面架构预览 (UI Architecture)

SkillGo-App/
├── Components/
│   ├── FloatingActionButton (核心即时匹配按钮)
│   ├── SkillCard (带有 3D 悬浮效果的技能者卡片)
│   └── TrustShield (基于区块链存证的信用公示组件)
├── Layouts/
│   ├── LBS-Explorer (基于地理位置的探索层)
│   └── Profile-Mirror (侧重个人品牌化的技能者主页)
└── Animations/
    ├── ShimmerLoader (骨架屏加载动效)
    └── RouteTransition (基于共享元素的跨页面平滑过渡)

🎨 开发者快速上手

# 克隆前端 UI 库
git clone https://github.com/Vesper6/SkillGo-Frontend.git
# 安装依赖
npm install
# 启动动效预览 Storybook
npm run storybook

项目愿景：通过极致的 UI 交互，让邻里间的专业互助回归生活，让每一份技能都能转化为社会价值。