feat: 首页课程预览改为卡片书架（WIP），新增设计参考图库

- 新增 CourseShelf 组件：title/desc/done/relations 卡片，hover 轮播预期成果 GIF - static/gifs 占位动图 6 张（同名替换即成片） - design-refs/pinterest 设计稿参考 13 张，含出处与版权说明 - .gitignore 忽略 .zcodeignore 工具本地配置
2026-10-02 07:30:09 +08:00
1 parent 54990b3dfc
commit 3637129fd5
@@ -0,0 +1,44 @@
+# Pinterest 设计稿参考（教程网站重构）
+
+来源：Pinterest 调研（2026-10-02），每张图已溯源到原始出处。版权状况见文末。
+逐项元数据见 [sources.json](./sources.json)。
+
+## 学习面板（靶子区 + 步骤验收）
+
+| 文件 | 设计稿 | 原始出处 |
+|---|---|---|
+| `00-e-learning-platform---learning-plan-dash.jpg` | E-learning Learning Plan Dashboard（Bogdan Nikitin） | [Dribbble](https://dribbble.com/shots/23956256) / [pin](https://www.pinterest.com/pin/8162843069852607/) |
+| `04-coursue-learning-platform-dashboard.jpg` | Coursue Dashboard（Fireart） | [Dribbble](https://dribbble.com/shots/23027887-Coursue-Learning-Platform-Dashboard) / [pin](https://www.pinterest.com/pin/coursue-learning-platform-dashboard--628815166755740834/) |
+| `02-education-platform.jpg` | W-Power Courses Dashboard（Awsmd） | [Dribbble](https://dribbble.com/shots/20197120-W-Power-Courses-Dashboar) / [pin](https://in.pinterest.com/pin/education-platform--104286547617862574/) |
+| `01-online-course-platform-concept.jpg` | Online Course Platform Concept（Petr Dudchenko） | [Dribbble](https://dribbble.com/shots/10858901-Online-Course-Platform-Concept) / [pin](https://www.pinterest.com/pin/online-course-platform-concept--178525572723551326/) |
+| `03-learnify---uxui-design-of-the-online-cou.jpg` | Learnify 在线课程平台（Outright） | [Dribbble](https://dribbble.com/shots/24454737-Learnify-UX-UI-design-of) / [pin](https://in.pinterest.com/pin/482800022571266106/) |
+
+## 清单 / 任务（步骤卡 + 验收产物）
+
+| 文件 | 设计稿 | 原始出处 |
+|---|---|---|
+| `06-task-management-app-ui-design.jpg` | Taskique 任务管理（Rifat）——含子任务勾选清单，重点参考 | [Dribbble](https://dribbble.com/shots/17982564-Task-Management-App-UI-Design-To-d) / [pin](https://in.pinterest.com/pin/task-management-app-ui-design--2674081025197797/) |
+| `07-checklist-design---curated-list-for-ui-c.jpg` | Checklist Design 清单资源站 | [checklist.design](https://www.checklist.design/) / [pin](https://br.pinterest.com/pin/232357662016396948/) |
+
+## 引导流（指派学习 + 脱靶提醒）
+
+| 文件 | 设计稿 | 原始出处 |
+|---|---|---|
+| `08-onboarding-steps--untitled-ui.jpg` | Onboarding steps（Untitled UI / Jordan Hughes） | [Dribbble](https://dribbble.com/shots/23081995-Onboarding-steps-Untitled-UI) / [pin](https://www.pinterest.com/pin/569494315400426794/) |
+| `09-onboarding-progress-designs-themes-templ.jpg` | Dashboard Onboarding 进度引导 | [Dribbble](https://dribbble.com/shots/18975440-Dashboard-Onboarding) / [pin](https://www.pinterest.com/pin/onboarding-progress-designs-themes-templates-on-dribbble--93309023522230046/) |
+
+## 教程站整体气质
+
+| 文件 | 设计稿 | 原始出处 |
+|---|---|---|
+| `10-minidil-website-on-behance.jpg` | Minidil 教育网站（Behance） | [pin](https://www.pinterest.com/pin/828803137701519210/)（Behance 原项目未在 pin 页标注外链） |
+| `11-how-does-scroll-into-view-work.jpg` | How it works - Scroll into view（Webflow 模板） | [Webflow](https://webflow.com/website/How-it-works-Scroll-into-view) / [pin](https://www.pinterest.com/pin/how-it-works-scroll-into-view-webflow--22166223162567510/) |
+| `12-tutorials-templates-figma--constructor-u.jpg` | Constructor UI Kit 教程页（Spline） | [constructor.spline.one](https://constructor.spline.one/startups/tutorials) / [pin](https://www.pinterest.com/pin/tutorials--635007616233735559/) |
+| `05-edtech---online-learning-startup-web-ui-.jpg` | EdTech 学习站 UI Kit | [UI8](https://ui8.net/dhuhacreative/products/edtech---online-learning-startu) / [pin](https://www.pinterest.com/pin/edtech-online-learning-startup-web-ui-kit--951807702477768443/) |
+
+## 版权状况
+
+- ✅ **可直接使用**：Untitled UI 免费版组件（[license](https://www.untitledui.com/license)：无限个人/商用、无需署名，禁止转售与用于竞争性 UI kit；部分 React 组件 MIT）。
+- ⚠️ **仅作灵感参考，禁止复刻/搬图**：所有 Dribbble shots、Behance（Minidil）、Pinterest 上的一切 re-pin 图（Pinterest 不授予再利用权，以原始出处为准）。checklist.design 未声明内容再利用条款，参考其组织方式、不照抄条目文案。
+- 💰 **需付费**：UI8 EdTech Kit、Constructor（Spline）、Untitled UI PRO。
+- 落地建议：借鉴信息架构与布局思想，用 shadcn/ui + Untitled UI 免费版等可商用组件库重新实现。
@@ -0,0 +1,93 @@
+[
+ {
+  "file": "00-e-learning-platform---learning-plan-dash.jpg",
+  "title": "E-learning Platform - Learning Plan Dashboard by Bogdan Nikitin for Nixtio on Dribbble | Modern learning dashboard design, Digital learning platform dashboard, E-learning ui",
+  "pin": "https://www.pinterest.com/pin/8162843069852607/",
+  "source": "https://dribbble.com/shots/23956256-E-learning-Platform-Learning-Plan-Dashboard",
+  "description": "E-learning Platform - Learning Plan Dashboard by Bogdan Nikitin for Nixtio on Dribbble | User experience, App design, Application design"
+ },
+ {
+  "file": "01-online-course-platform-concept.jpg",
+  "title": "Online Course Platform Concept by Petr Dudchenko | Digital learning platform dashboard, E learning platform design, E-learning dashboard design",
+  "pin": "https://www.pinterest.com/pin/online-course-platform-concept--178525572723551326/",
+  "source": "https://dribbble.com/shots/10858901-Online-Course-Platform-Concept",
+  "description": "Explore this innovative Online Course Platform Concept designed by Petr Dudchenko for Mind Studios. Get inspired by the latest trends in online learning website design and UI design courses. Ui design user interface, Module ui, App design"
+ },
+ {
+  "file": "02-education-platform.jpg",
+  "title": "Education Platform by Awsmd on Dribbble | Online education dashboard, Digital learning platform dashboard, E learning platform design",
+  "pin": "https://in.pinterest.com/pin/education-platform--104286547617862574/",
+  "source": "https://dribbble.com/shots/20197120-W-Power-Courses-Dashboard",
+  "description": "A digital dashboard interface for an online learning platform. The main section displays a course titled \"Introduction to Motion Design\" by Gordon Palmen, featuring a video thumbnail of a man speaking. Online education platform, E-learning, Web design course"
+ },
+ {
+  "file": "03-learnify---uxui-design-of-the-online-cou.jpg",
+  "title": "Learnify - UX/UI design of the online courses platform | Digital learning platform dashboard, Okr task management interface, Educational dashboard interface designs",
+  "pin": "https://in.pinterest.com/pin/482800022571266106/",
+  "source": "https://dribbble.com/shots/24454737-Learnify-UX-UI-design-of-the-online-courses-platform",
+  "description": "Learnify - UX/UI design of the online courses platform designed by Outcrowd . Connect with them on Dribbble; the global community for designers and creative professionals. User interface, Dashboard ui, Web app development"
+ },
+ {
+  "file": "04-coursue-learning-platform-dashboard.jpg",
+  "title": "Coursue Learning Platform Dashboard by Fireart UI/UX for Fireart Studio on Dribbble | Digital learning platform dashboard, Online course dashboard, Web design inspiration",
+  "pin": "https://www.pinterest.com/pin/coursue-learning-platform-dashboard--628815166755740834/",
+  "source": "https://dribbble.com/shots/23027887-Coursue-Learning-Platform-Dashboard",
+  "description": "Coursue Learning Platform Dashboard by Fireart UI/UX for Fireart Studio on Dribbble | Interface design, Web app design, Web admin"
+ },
+ {
+  "file": "05-edtech---online-learning-startup-web-ui-.jpg",
+  "title": "EdTech - Online Learning Startup Web UI Kit | ウェブデザイン, ウェブサイトのテンプレート",
+  "pin": "https://www.pinterest.com/pin/edtech-online-learning-startup-web-ui-kit--951807702477768443/",
+  "source": "https://ui8.net/dhuhacreative/products/edtech---online-learning-startup-web-ui-kit?rel=timer",
+  "description": "EdTech: Web UI Kit for any online learning, edutech startup, academic portal, etc."
+ },
+ {
+  "file": "06-task-management-app-ui-design.jpg",
+  "title": "Task Management App UI Design | To-do list | Task | Schedule by Rifat Sarkar | Business ui design, To do list app ui design, App interface",
+  "pin": "https://in.pinterest.com/pin/task-management-app-ui-design--2674081025197797/",
+  "source": "https://dribbble.com/shots/17982564-Task-Management-App-UI-Design-To-do-list-Task-Schedule?utm_source=extension\\u0026utm_medium=click\\u0026utm_campaign=muzli",
+  "description": "Explore a stunning Task Management App UI Design showcasing a To-do list, Task, and Schedule by Rifat Sarkar for Rinex on Dribbble. Get inspired by the creativity and functionality of this design! | App design inspiration"
+ },
+ {
+  "file": "07-checklist-design---curated-list-for-ui-c.jpg",
+  "title": "Checklist Design - Curated List for UI Components and Branding Assets | Checklist design element, Simple checklist design inspiration, Workflow",
+  "pin": "https://br.pinterest.com/pin/232357662016396948/",
+  "source": "https://www.checklist.design/",
+  "description": "Discover a curated list of checklists for website pages, UI components, and branding assets on Checklist Design. Enhance your design practices with this collection. Purposes, User experience, Templates dashboard"
+ },
+ {
+  "file": "08-onboarding-steps--untitled-ui.jpg",
+  "title": "Onboarding steps — Untitled UI | Onboarding website design, Onboarding sheet, Onboarding schedule",
+  "pin": "https://www.pinterest.com/pin/569494315400426794/",
+  "source": "https://dribbble.com/shots/23081995-Onboarding-steps-Untitled-UI?utm_source=Clipboard_Shot\\u0026utm_campaign=jordanhughes\\u0026utm_content=Onboarding%20steps%20%E2%80%94%20Untitled%20UI\\u0026utm_medium=Social_Share\\u0026utm_source=Pinterest_Shot\\u0026utm_campaign=jordanhughes\\u0026utm_content=Onboarding%20steps%20%E2%80%94%20Untitled%20UI\\u0026utm_medium=Social_Share",
+  "description": "Onboarding steps — Untitled UI designed by Jordan Hughes®. Connect with them on Dribbble; the global community for designers and creative professionals. Sign up ui, App design layout, Ui examples"
+ },
+ {
+  "file": "09-onboarding-progress-designs-themes-templ.jpg",
+  "title": "Onboarding Progress Designs, Themes, Templates on Dribbble | Employee dashboard design, How to design a user dashboard, Approval dashboard",
+  "pin": "https://www.pinterest.com/pin/onboarding-progress-designs-themes-templates-on-dribbble--93309023522230046/",
+  "source": "https://dribbble.com/shots/18975440-Dashboard-Onboarding",
+  "description": "Explore high-quality onboarding images for web and app design. Get inspired and connect with designers worldwide. Dashboard web, Web design, Admin dashboard ui design"
+ },
+ {
+  "file": "10-minidil-website-on-behance.jpg",
+  "title": "Minidil Website on Behance | Web design colorful, Design educational website graphics, Interface design",
+  "pin": "https://www.pinterest.com/pin/828803137701519210/",
+  "source": "",
+  "description": "A colorful and vibrant website design featuring a variety of sections. The top section includes an image of two animated characters, with text in another language. Web design trends, Creative web design, Web design ideas"
+ },
+ {
+  "file": "11-how-does-scroll-into-view-work.jpg",
+  "title": "How Does Scroll Into View Work? | How it works section ui design, Step by step ui design, Scroll ui design",
+  "pin": "https://www.pinterest.com/pin/how-it-works-scroll-into-view-webflow--22166223162567510/",
+  "source": "https://webflow.com/website/How-it-works-Scroll-into-view#liked",
+  "description": "Learn the simple animation for the &#x27;How it works&#x27; section. This animation is applied to the class, making it easy to add new steps. Just duplicate the last step and edit its content. Websites, Ui project, Webflow"
+ },
+ {
+  "file": "12-tutorials-templates-figma--constructor-u.jpg",
+  "title": "Tutorials Templates Figma – Constructor UI Kit for Figma Download | Nouvelles coiffures, Design, Kit d&#x27;interface",
+  "pin": "https://www.pinterest.com/pin/tutorials--635007616233735559/",
+  "source": "https://constructor.spline.one/startups/tutorials",
+  "description": "Découvrez vos propres épingles sur Pinterest, et enregistrez-les !"
+ }
+]