|
|
@@ -9,7 +9,7 @@ import { SYSTEMS, COURSE, CASES } from './showcase-content.js';
|
|
|
const shortId = (id) => String(id || '').replace(/^DEMO-/, '');
|
|
|
const systemPath = (key) => key === 'overview' ? '/showcase' : `/showcase/${key}`;
|
|
|
|
|
|
-/** One read-only introduction shell; the five operational views remain separate. */
|
|
|
+/** Read-only system introductions with shared sample data. */
|
|
|
export class ViewShowcase extends LitElement {
|
|
|
static properties = {
|
|
|
system: { type: String }, routeQuery: { type: Object },
|
|
|
@@ -76,10 +76,10 @@ export class ViewShowcase extends LitElement {
|
|
|
const m = this._model;
|
|
|
return html`<section class="hero">
|
|
|
<div>
|
|
|
- <p class="eyebrow">${system ? `${system.letter} / ${system.name}` : '康师傅 · 产品创新工作坊'}</p>
|
|
|
+ <p class="eyebrow">${system ? system.name : '康师傅 · 产品创新工作坊'}</p>
|
|
|
<h1>${system ? system.title : html`让每个产品方向，<br><em>都有证据、协作与下一步。</em>`}</h1>
|
|
|
- <p class="intro">${system?.intro || '三个半天，多人并行探索多个产品。从创意、资料搜集到机会卡，再将评估和取舍带进产品概念。五个工作视图，共用一条产品线。'}</p>
|
|
|
- <div class="hero-actions">${system ? this._demo(system) : html`<button class="button primary" @click=${() => this._jump('systems')}>了解五个工作视图 ↓</button>`}
|
|
|
+ <p class="intro">${system?.intro || '三个半天，多人并行探索多个产品。从创意、资料搜集到机会卡，再将评估和取舍带进产品概念。资料与协作围绕同一产品持续衔接。'}</p>
|
|
|
+ <div class="hero-actions">${system ? this._demo(system) : html`<button class="button primary" @click=${() => this._jump('systems')}>了解系统功能 ↓</button>`}
|
|
|
<button class="button secondary" @click=${() => this._jump('stories')}>跟随产品案例 ↓</button>
|
|
|
</div>
|
|
|
<p class="caption">${system?.audience || '负责人看全局 · 小组做产品 · 专家看依据 · 教练追过程'}</p>
|
|
|
@@ -102,7 +102,7 @@ export class ViewShowcase extends LitElement {
|
|
|
<img src=${this._image(system)} width="3840" height="2160" loading="lazy" alt=${system.preview}>
|
|
|
<span class="zoom-label">放大预览 ↗</span>
|
|
|
</button>
|
|
|
- <figcaption><span>${system.letter} · ${system.name}</span><span>HTML / CDP 设计预览 · 数据为模拟 · 点击放大</span></figcaption>
|
|
|
+ <figcaption><span>${system.name}</span><span>HTML / CDP 设计预览 · 数据为模拟 · 点击放大</span></figcaption>
|
|
|
</figure>`;
|
|
|
}
|
|
|
|
|
|
@@ -116,8 +116,8 @@ export class ViewShowcase extends LitElement {
|
|
|
<section class="section" id="flow">${this._heading('一条产品链', '从一个想法，到一份能追问的方案', '资料、机会、项目和成果相互关联，判断可以回到依据，未解决的问题继续跟着产品走。')}
|
|
|
<ol class="flow">${['创意', '搜集', '洞察', '机会卡', '验证', '概念', '路演'].map((label, i) => html`<li><span>${String(i + 1).padStart(2, '0')}</span><strong>${label}</strong></li>`)}</ol>
|
|
|
</section>
|
|
|
- <section class="section" id="systems">${this._heading('五个工作视图', '各自回答一个问题，接力同一个产品')}
|
|
|
- <div class="system-grid">${SYSTEMS.map((s) => html`<article class="system-card"><span class="letter">${s.letter}</span>
|
|
|
+ <section class="section" id="systems">${this._heading('系统能力', '按工作环节组织资料与协作')}
|
|
|
+ <div class="system-grid">${SYSTEMS.map((s) => html`<article class="system-card">
|
|
|
<p class="card-audience">${s.audience}</p><h3>${s.name}</h3><p class="question">${s.question}</p>
|
|
|
<p>${s.intro}</p>${this._link(systemPath(s.key), '了解这个系统 →', 'text-link')}</article>`)}</div>
|
|
|
</section>`;
|
|
|
@@ -232,7 +232,7 @@ export class ViewShowcase extends LitElement {
|
|
|
_handoff(system) {
|
|
|
return html`<section class="section handoff">${this._heading('上下游怎样衔接', '一个方向，在不同角色之间接力')}
|
|
|
<ol>${system.handoff.map((line, i) => html`<li><span>${i + 1}</span>${line}</li>`)}</ol>
|
|
|
- <div class="related">${system.related.map((key) => { const s = SYSTEMS.find((x) => x.key === key); return this._link(systemPath(key), `${s.letter} ${s.name} →`, 'text-link'); })}</div>
|
|
|
+ <div class="related">${system.related.map((key) => { const s = SYSTEMS.find((x) => x.key === key); return this._link(systemPath(key), `${s.name} →`, 'text-link'); })}</div>
|
|
|
</section>`;
|
|
|
}
|
|
|
|
|
|
@@ -247,7 +247,7 @@ export class ViewShowcase extends LitElement {
|
|
|
${!system || system.key === 'classroom' ? this._course() : nothing}
|
|
|
${system ? this._handoff(system) : nothing}
|
|
|
${this._scope()}
|
|
|
- <section class="final-cta"><div><p class="eyebrow">让下一步更清楚</p><h2>${system ? '带着同一套依据，继续做产品。' : '先看全局，再顺着一个产品走一遍。'}</h2><p>五个角色视图，同一份资料和产品关系。</p></div>${system ? this._demo(system) : this._link('/showcase/collaboration', '了解产品共创工作台 →', 'button primary')}</section>
|
|
|
+ <section class="final-cta"><div><p class="eyebrow">让下一步更清楚</p><h2>${system ? '带着同一套依据，继续做产品。' : '先看全局，再顺着一个产品走一遍。'}</h2><p>各环节共享同一份资料和产品关系。</p></div>${system ? this._demo(system) : this._link('/showcase/collaboration', '了解产品共创工作台 →', 'button primary')}</section>
|
|
|
`}
|
|
|
</main><footer><span>康师傅 · 产品创新工作坊</span><div>${this._link('/showcase', '方案总览')}${this._link('/showcase/classroom', '课堂与成果')}${this._link('/', '现有看板')}</div><p>设计预览与模拟数据用于流程展示；课堂完成不代表需求已验证。</p></footer>
|
|
|
<dialog aria-label="系统设计预览大图" @close=${() => { this._preview = null; }}><div class="dialog-toolbar"><strong>${this._preview?.name || ''}</strong><button class="button secondary small" @click=${() => this.shadowRoot.querySelector('dialog').close()}>关闭 ×</button></div>${this._preview ? html`<img src=${this._image(this._preview)} alt=${this._preview.preview}>` : nothing}<p>设计预览 · 模拟数据 · 可按 Esc 关闭</p></dialog>`;
|
