Documentation Index
Fetch the complete documentation index at: https://mintlify.com/HNU-himematsu/HNU-TimeLetter/llms.txt
Use this file to discover all available pages before exploring further.
The Creation Board (/creation) is the community layer of HNU-TimeLetter — a public display wall where any member can see, browse, and extend the pool of shared galgame scene proposals that feed the project’s AIGC pipeline. Unlike the main exhibition on the homepage, the Creation Board is not about finished works; it is a living draft table of creative impulses, continuously growing as the community adds new ideas on top of existing ones. The design reflects this: sticky notes on grid paper rather than a polished gallery.
Page Goal
The board serves three concrete purposes:
- Aggregate inspiration — surface proposals that would otherwise stay buried in chat history.
- Enable extension — let any visitor directly add a new idea to an existing card thread without re-explaining context.
- Lower coordination cost — the production team can pick up, cross-reference, and build on proposals without running a separate collection round.
The page is a read-and-extend experience, not a submission form. The Feishu multi-dimensional table remains the single source for data entry.
Page Structure
The layout is deliberately minimal: a compact title zone, then an uninterrupted sticky-note waterfall filling the rest of the viewport.
Title Zone
- Page title: 创作公示板
- Sub-caption: one line explaining “these are community-contributed ideas — feel free to add on top of any existing card.”
- The title zone is deliberately shallow — it must not push the first row of cards below the fold.
Sticky-Note Waterfall
The main body is a masonry / waterfall grid with a lightweight grid-line background. The grid lines evoke a draft sketchpad or planning board. They must be subtle enough not to compete with card content.
Responsive column counts:
| Viewport | Columns |
|---|
| Desktop (≥ 1280 px) | 4–5 |
| Tablet (768 px – 1279 px) | 3 |
| Mobile (< 768 px) | 1–2 |
Data Model
CardID Aggregation
All raw records from the Feishu table are keyed by CardID (e.g., CARD001). Multiple records sharing the same CardID belong to the same “idea thread” and are grouped into a single CreationCard for display. This is intentional design — repeated CardID values are not duplicate data.
The aggregation happens at the page-rendering layer after reading src/data/creation-board.json.
TypeScript Types
/** The primary render unit in the waterfall — one card per CardID */
interface CreationCard {
/** Unique card identifier, sourced from CardID field */
id: string
/** Business-facing card number (e.g. "CARD001") */
cardId: string
/** Pre-assembled "新增创意" Feishu form URL with CardID pre-filled */
addIdeaUrl: string
/** All stacked entries belonging to this CardID, in submission order */
entries: CreationEntry[]
}
/** One raw record from the Feishu table, displayed as a single stacked item */
interface CreationEntry {
/** Feishu record_id */
id: string
/** Parent card's CardID */
cardId: string
/** Display author: prefers 你的昵称; falls back to 提交人.name */
author: string
/** Single capsule tag: 灵感 | 故事 | 画面描述 | 参考图 | 其他 */
tags: string
/** Text content (文本 field); also holds OSS URLs when tag = 参考图 */
content: string
/** Image URLs (OSS-hosted); populated when tag = 参考图 */
images: string[]
/** ISO timestamp from 提交时间 */
createdAt: string
}
Entry Display Rules
if (tags === "参考图" && images.length > 0)
→ render images grid
else if (tags === "参考图" && images.length === 0)
→ fall back to content text
else
→ render content text
Card Design
Overall Visual
Each card looks like a sticky note taped to a draft sketchpad, not a polished information panel. Key visual properties:
| Property | Value |
|---|
| Corner radius | 0 — square corners, no border-radius |
| Background | Random low-saturation macaron color (one hue per card, consistent across all entries inside) |
| Shadow | Light drop shadow at rest; slightly heavier on hover to convey lift |
| Slight tilt | Cards may have a very small random rotation (kept within ±1–2 deg) for the bulletin-board feel, but must not impair readability |
CardID and does not change between page loads (derive it deterministically from the cardId string).
”新增创意” Button
Every card carries a persistent white 新增创意 button in the top-right corner:
- Always visible — does not appear only on hover.
- Occupies its own reserved space; it must never overlap the first entry’s tag pill.
- Style: white background, neutral border,
Ink Strong text — deliberately not the primary red, to avoid competing with entry content.
- Click action: opens the Feishu form in a new tab with
CardID pre-filled.
URL template:
https://himematsu.feishu.cn/share/base/form/shrcnhSnlbEAclIwPC770VdOmWf?hide_CardID=1&prefill_CardID={{CardID}}
Entry Layout (Stacked Items)
Inside each card, entries are stacked vertically in submission order with a clear but understated divider between them. Each entry has a fixed anatomy:
┌─────────────────────────────────────────┐
│ author (top-left) [tag pill] (top-right) │
│ │
│ content text —or— images grid │
└─────────────────────────────────────────┘
author: plain text, Ink Muted color, small size.tags: a single pill capsule. Use Neutral Light or Surface Strong as background; Primary Deep or Ink Strong as text. The pill uses --radius-pill (999 px).content / images: full width within the entry; images display in a responsive grid.
All entries within a card are visible by default — no collapse in the first release.
Interaction Principles
Default Mode: Scan-read
The waterfall is primarily a scanning surface. Visitors should be able to extract the key idea from each card at a glance, without clicking anything.
Click to Full-read
Clicking a card transitions it to an expanded full-read state. If the implementation cost of a modal is high in the initial release, an inline expand (card grows to show all content) is an acceptable MVP alternative.
Animation Constraints
| Interaction | Animation |
|---|
| Card hover | Light lift (translate Y −2 to −4 px), shadow deepens — no spring bounce |
| Card click / expand | Smooth height expand; opacity in for newly visible content |
| Entry divider | Static; no animated separators |
| Page load | Cards stagger-fade in from below (small y offset, opacity 0→1), entry delay ~40 ms per card |
Data Source and API
Local Static File
src/data/creation-board.json ← flat array of CreationEntry records
/creation page reads creation-board.json directly and aggregates records by CardID at render time into CreationCard[]. There are no runtime Feishu API calls from the page.
Sync Flow
Feishu 揭示板 table
→ sync script (extends existing sync-feishu.ts or new dedicated script,
reusing existing Feishu auth and request helpers)
→ downloads image attachments
→ uploads to Alibaba Cloud OSS
→ writes OSS URLs back to 文本 field
→ writes src/data/creation-board.json
→ /creation page reads local file and renders cards
Component Architecture
Suggested component split under src/components/creation/:
| Component | Responsibility |
|---|
CreationBoardPage | Page root, fetches data, passes CreationCard[] to masonry |
CreationBoardHeader | Title zone with page title and sub-caption |
CreationMasonry | Waterfall/masonry grid container, handles responsive column count |
CreationNoteCard | Single sticky-note card — renders header info, “新增创意” button, and stacked entries |
CreationNoteEntry | Single stacked entry — author, tag pill, content or images |
src/app/creation/page.tsx
State Design
| State | Handling |
|---|
| Loading | Paper-texture skeleton placeholders — not generic gray bars |
| Empty | Clear message: “当前还没有公开灵感，欢迎先在群内发起第一条共创提案” |
| Extra-long content | Either card auto-expands (waterfall recalculates) or content truncates with an expand control; waterfall layout must remain stable either way |
