Skip to content

Commit bae68db

Browse files
TreeLinTreeLin
committed
feat: add Qwen Code compatibility module to homepage
1 parent 62f425b commit bae68db

1 file changed

Lines changed: 256 additions & 0 deletions

File tree

‎_layouts/home.html‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,70 @@
140140
.step-card a { color: var(--link); text-decoration: none; font-size: 13px; font-weight: 500; }
141141
.step-card a:hover { text-decoration: underline; }
142142

143+
/* Qwen Code compatibility */
144+
.qwen-integration { padding: 72px 24px 80px; background: #f7f7f5; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); position: relative; overflow: hidden; }
145+
.qwen-integration::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(23,23,23,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(23,23,23,.035) 1px,transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(to bottom,transparent,black 18%,black 82%,transparent); mask-image: linear-gradient(to bottom,transparent,black 18%,black 82%,transparent); pointer-events: none; }
146+
.qwen-integration-inner { max-width: 1100px; margin: 0 auto; position: relative; }
147+
.qwen-head { display: grid; grid-template-columns: 1.12fr .88fr; gap: 64px; align-items: start; margin-bottom: 36px; }
148+
.qwen-eyebrow { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; color: #4e4e4e; letter-spacing: .9px; text-transform: uppercase; margin-bottom: 16px; }
149+
.qwen-eyebrow::before { content: ""; width: 24px; height: 2px; background: #615ced; }
150+
.qwen-integration h2 { font-size: 38px; line-height: 1.2; letter-spacing: -1.6px; margin-bottom: 16px; }
151+
.qwen-lead { font-size: 16px; line-height: 1.75; color: var(--body); max-width: 620px; }
152+
.qwen-project-pair { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
153+
.qwen-project-pair a { display: block; flex: 0 0 auto; }
154+
.qwen-project-logo { width: 52px; height: 52px; border-radius: 12px; border: 1px solid #dfdfdf; background: #fff; object-fit: cover; display: block; }
155+
.qwen-project-plus { font-family: var(--font-mono); font-size: 18px; color: #999; }
156+
.qwen-project-caption { font-size: 12px; color: var(--mute); line-height: 1.5; }
157+
.qwen-project-caption strong { display: block; color: var(--ink); font-size: 14px; margin-bottom: 2px; }
158+
.qwen-note { border-left: 2px solid #d0d0d0; padding-left: 20px; color: #666; font-size: 13px; line-height: 1.7; }
159+
.qwen-note strong { color: var(--ink); font-weight: 600; }
160+
.qwen-architecture { display: grid; grid-template-columns: 1fr 58px 1fr 58px 1.12fr; border: 1px solid #dedede; background: #fff; margin-bottom: 24px; }
161+
.qwen-layer { padding: 26px 22px; min-height: 184px; }
162+
.qwen-layer-number { font-family: var(--font-mono); font-size: 11px; color: #999; letter-spacing: .7px; margin-bottom: 22px; }
163+
.qwen-layer-mark { width: 34px; height: 34px; border: 1px solid #cfcfcf; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; margin-bottom: 14px; background: #fff; }
164+
.qwen-layer h3 { font-size: 16px; letter-spacing: -.3px; margin-bottom: 7px; }
165+
.qwen-layer p { font-size: 13px; color: var(--body); line-height: 1.65; }
166+
.qwen-layer small { display: block; color: var(--mute); font-size: 11px; margin-top: 11px; }
167+
.qwen-layer-agent { background: #fbfbff; }
168+
.qwen-layer-agent .qwen-layer-mark { border-color: #bdb9ff; color: #615ced; background: #f2f1ff; }
169+
.qwen-layer-capability { background: #fbfdff; }
170+
.qwen-layer-capability .qwen-layer-mark { border-color: #acd2ff; color: #0070f3; background: #f1f7ff; }
171+
.qwen-arrow { display: flex; align-items: center; justify-content: center; border-left: 1px solid #ededed; border-right: 1px solid #ededed; color: #aaa; background: #fbfbfb; }
172+
.qwen-arrow svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; }
173+
.qwen-proof { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; border: 1px solid #dfdfdf; background: #fff; padding: 17px 20px; margin-bottom: 24px; }
174+
.qwen-proof-copy { font-size: 13px; color: var(--body); line-height: 1.65; min-width: 0; }
175+
.qwen-proof-copy strong { display: block; color: var(--ink); font-size: 14px; margin-bottom: 3px; }
176+
.qwen-proof-copy code { font-family: var(--font-mono); font-size: 12px; color: #555; overflow-wrap: anywhere; }
177+
.qwen-proof-link { font-size: 13px; text-decoration: none; color: var(--link-deep); font-weight: 600; white-space: nowrap; }
178+
.qwen-proof-link:hover { text-decoration: underline; }
179+
.qwen-demo-grid { display: grid; grid-template-columns: 1.03fr .97fr; gap: 22px; }
180+
.qwen-prompt-card, .qwen-scope-card { background: #fff; border: 1px solid #dedede; padding: 24px; }
181+
.qwen-card-label { font-family: var(--font-mono); font-size: 11px; color: var(--mute); letter-spacing: .6px; margin-bottom: 16px; text-transform: uppercase; }
182+
.qwen-prompt-shell { background: #15151d; padding: 20px; color: #d8d8e5; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; min-height: 132px; overflow-wrap: anywhere; }
183+
.qwen-prompt-shell .comment { color: #828294; }
184+
.qwen-prompt-shell .prompt { color: #9be6c8; }
185+
.qwen-copy-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 12px; }
186+
.qwen-copy-hint { font-size: 12px; color: var(--mute); }
187+
.qwen-copy-btn { height: 34px; padding: 0 13px; border: 1px solid #d7d7d7; background: #fff; color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
188+
.qwen-copy-btn:hover { border-color: #999; }
189+
.qwen-copy-btn.copied { background: #edf9f4; border-color: #b5dfcd; color: #176b4f; }
190+
.qwen-scope-title { font-size: 16px; margin-bottom: 14px; }
191+
.qwen-scope-tabs { display: flex; gap: 0; border-bottom: 1px solid #e3e3e3; margin-bottom: 18px; }
192+
.qwen-scope-tab { border: 0; background: transparent; padding: 9px 12px 10px 0; margin-right: 18px; font-size: 12px; color: var(--mute); cursor: pointer; border-bottom: 2px solid transparent; }
193+
.qwen-scope-tab.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
194+
.qwen-scope-list { display: grid; gap: 10px; }
195+
.qwen-scope-item { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
196+
.qwen-scope-item .mark { width: 18px; height: 18px; border: 1px solid #cfcfcf; font-family: var(--font-mono); font-size: 10px; display: flex; align-items: center; justify-content: center; color: #615ced; }
197+
.qwen-scope-item h4 { font-size: 13px; margin-bottom: 2px; }
198+
.qwen-scope-item p { font-size: 12px; color: var(--mute); line-height: 1.5; }
199+
.qwen-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
200+
.qwen-cta-row .btn { border-radius: 6px; }
201+
.qwen-btn-primary { background: #615ced; color: #fff; }
202+
.qwen-btn-secondary { border-color: #cfcfcf; background: #fff; }
203+
.qwen-compatible { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid #ddd; }
204+
.qwen-compatible-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--mute); text-transform: uppercase; margin-right: 6px; }
205+
.qwen-compatible span { font-family: var(--font-mono); font-size: 12px; color: #555; }
206+
143207
/* Playbook entry */
144208
.playbook-entry { padding: 56px 24px 24px; background: var(--canvas-soft, #fafafa); }
145209
.playbook-entry-inner { max-width: 1100px; margin: 0 auto; }
@@ -210,6 +274,7 @@
210274
.playbook-grid { grid-template-columns: repeat(3, 1fr); }
211275
.eco-grid { grid-template-columns: repeat(2, 1fr); }
212276
.steps h2, .playbook-entry h2, .ecosystem h2, .devwall h2, .docs-section h2 { font-size: 24px; }
277+
.qwen-integration h2 { font-size: 32px; }
213278
}
214279

215280
/* Mobile */
@@ -231,6 +296,20 @@
231296
.steps-grid, .eco-grid { grid-template-columns: 1fr; }
232297
.docs-grid { grid-template-columns: 1fr; }
233298
.playbook-grid { grid-template-columns: repeat(2, 1fr); }
299+
.qwen-integration { padding: 56px 18px 64px; }
300+
.qwen-head { grid-template-columns: 1fr; gap: 28px; }
301+
.qwen-integration h2 { font-size: 28px; letter-spacing: -1px; }
302+
.qwen-lead { font-size: 14px; }
303+
.qwen-architecture { grid-template-columns: 1fr; }
304+
.qwen-layer { min-height: auto; }
305+
.qwen-arrow { height: 44px; border-left: 0; border-right: 0; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; }
306+
.qwen-arrow svg { transform: rotate(90deg); }
307+
.qwen-proof { grid-template-columns: 1fr; }
308+
.qwen-proof-link { white-space: normal; }
309+
.qwen-demo-grid { grid-template-columns: 1fr; }
310+
.qwen-prompt-card, .qwen-scope-card { padding: 18px; }
311+
.qwen-prompt-shell { font-size: 11px; }
312+
.qwen-copy-row { align-items: flex-start; }
234313
}
235314

236315
@media (prefers-reduced-motion: reduce) {
@@ -298,6 +377,100 @@ <h3>运行一个 Skill</h3>
298377
</div>
299378
</section>
300379

380+
<section class="qwen-integration" id="qwen-code">
381+
<div class="qwen-integration-inner">
382+
<div class="qwen-head">
383+
<div>
384+
<div class="qwen-eyebrow">Compatible ecosystem</div>
385+
<h2>在 Qwen Code 中，直接使用百炼的多模态与云上能力</h2>
386+
<p class="qwen-lead">Qwen Code 是独立的开源 AI Coding Agent。安装 ModelStudio CLI 后，它可以调用图像与视频生成、知识检索、应用编排和模型部署等阿里云百炼能力；再配合 ModelStudio Skills，把这些能力组合成可复用工作流。</p>
387+
</div>
388+
<aside>
389+
<div class="qwen-project-pair">
390+
<a href="https://github.com/QwenLM" target="_blank" rel="noopener" aria-label="QwenLM GitHub Organization">
391+
<img class="qwen-project-logo" src="https://avatars.githubusercontent.com/u/141221163?v=4" alt="QwenLM GitHub 组织头像" width="52" height="52" loading="lazy">
392+
</a>
393+
<span class="qwen-project-plus">+</span>
394+
<a href="https://github.com/modelstudioai" target="_blank" rel="noopener" aria-label="ModelStudioAI GitHub Organization">
395+
<img class="qwen-project-logo" src="https://avatars.githubusercontent.com/u/283556804?v=4" alt="ModelStudioAI GitHub 组织头像" width="52" height="52" loading="lazy">
396+
</a>
397+
<div class="qwen-project-caption"><strong>独立项目，能力互补</strong>不暗示隶属或联合共建</div>
398+
</div>
399+
<p class="qwen-note"><strong>公开依据：</strong>Qwen Code 官方 README 的 Ecosystem 已收录 Aliyun Model Studio CLI，并明确说明它可扩展图像/视频生成、知识检索、应用编排与模型部署能力。</p>
400+
</aside>
401+
</div>
402+
403+
<div class="qwen-architecture" aria-label="Qwen Code 与 ModelStudio CLI 的分层关系">
404+
<article class="qwen-layer qwen-layer-agent">
405+
<div class="qwen-layer-number">LAYER 01 · AGENT</div>
406+
<div class="qwen-layer-mark">Q</div>
407+
<h3>Qwen Code</h3>
408+
<p>理解需求、读取代码与文件、制定计划，并调用工具完成任务。</p>
409+
<small>Independent open-source coding agent</small>
410+
</article>
411+
<div class="qwen-arrow" aria-hidden="true">
412+
<svg viewBox="0 0 24 24"><path d="M5 12h14M14 7l5 5-5 5"/></svg>
413+
</div>
414+
<article class="qwen-layer qwen-layer-capability">
415+
<div class="qwen-layer-number">LAYER 02 · CAPABILITY</div>
416+
<div class="qwen-layer-mark">M</div>
417+
<h3>ModelStudio CLI</h3>
418+
<p>把百炼的模型、搜索、多模态、应用编排与部署能力暴露为结构化工具。</p>
419+
<small>Official CLI for Aliyun Model Studio</small>
420+
</article>
421+
<div class="qwen-arrow" aria-hidden="true">
422+
<svg viewBox="0 0 24 24"><path d="M5 12h14M14 7l5 5-5 5"/></svg>
423+
</div>
424+
<article class="qwen-layer">
425+
<div class="qwen-layer-number">LAYER 03 · WORKFLOW</div>
426+
<div class="qwen-layer-mark">S</div>
427+
<h3>ModelStudio Skills</h3>
428+
<p>把底层能力组织成短片制作、媒体处理、模型选型、金融分析等任务流程。</p>
429+
<small>Reusable workflows for real tasks</small>
430+
</article>
431+
</div>
432+
433+
<div class="qwen-proof">
434+
<div class="qwen-proof-copy">
435+
<strong>Qwen Code 官方 Ecosystem 已收录 ModelStudio CLI</strong>
436+
<code>“Extends Qwen Code with image/video generation, knowledge retrieval, app orchestration, and model deployment.”</code>
437+
</div>
438+
<a class="qwen-proof-link" href="https://github.com/QwenLM/qwen-code#ecosystem" target="_blank" rel="noopener">查看官方 Ecosystem &rarr;</a>
439+
</div>
440+
441+
<div class="qwen-demo-grid">
442+
<article class="qwen-prompt-card">
443+
<div class="qwen-card-label">Install with your agent</div>
444+
<div class="qwen-prompt-shell" id="qwen-install-prompt"><span class="comment"># Paste this into Qwen Code</span><br><span class="prompt">Please read https://bailian.aliyun.com/cli/install.md<br>and install the Aliyun Model Studio CLI for me.<br>After installation, verify it and show me the<br>capabilities available in this environment.</span></div>
445+
<div class="qwen-copy-row">
446+
<span class="qwen-copy-hint">把安装说明交给 Agent，它会检测环境并完成验证。</span>
447+
<button class="qwen-copy-btn" id="qwen-copy-btn" type="button">复制 Prompt</button>
448+
</div>
449+
</article>
450+
451+
<article class="qwen-scope-card">
452+
<div class="qwen-card-label">What the combination adds</div>
453+
<h3 class="qwen-scope-title">从 Coding Agent 到完整 AI 工作流</h3>
454+
<div class="qwen-scope-tabs" role="tablist" aria-label="组合能力分类">
455+
<button class="qwen-scope-tab active" data-qwen-tab="build" type="button" role="tab" aria-selected="true">开发</button>
456+
<button class="qwen-scope-tab" data-qwen-tab="create" type="button" role="tab" aria-selected="false">创作</button>
457+
<button class="qwen-scope-tab" data-qwen-tab="operate" type="button" role="tab" aria-selected="false">编排与运维</button>
458+
</div>
459+
<div class="qwen-scope-list" id="qwen-scope-list" aria-live="polite"></div>
460+
<div class="qwen-cta-row">
461+
<a class="btn qwen-btn-primary" href="https://bailian.aliyun.com/cli/install.md" target="_blank" rel="noopener">安装 ModelStudio CLI</a>
462+
<a class="btn qwen-btn-secondary" href="https://github.com/QwenLM/qwen-code" target="_blank" rel="noopener">查看 Qwen Code</a>
463+
</div>
464+
</article>
465+
</div>
466+
467+
<div class="qwen-compatible">
468+
<span class="qwen-compatible-label">Works with</span>
469+
<span>Qwen Code</span><span>Cursor</span><span>Cline</span><span>Windsurf</span><span>Claude Code</span><span>MCP clients</span>
470+
</div>
471+
</div>
472+
</section>
473+
301474
<section class="devwall">
302475
<div class="devwall-inner">
303476
<h2>96 位开发者，98 个真实案例</h2>
@@ -454,6 +627,89 @@ <h2>文档与资源</h2>
454627
document.addEventListener('keydown', function(e) { if (e.key === 'Escape') setMenu(false); });
455628
window.addEventListener('resize', function() { if (window.innerWidth > 768) setMenu(false); });
456629
});
630+
631+
(function() {
632+
var scopes = {
633+
build: [
634+
['R', '知识与检索', '在代码工作流中查询百炼文档、知识库与联网结果。'],
635+
['M', '模型选型', '根据场景比较模型能力、价格与接口，并生成可运行示例。'],
636+
['T', '工具调用', '把百炼 CLI 命令作为结构化工具交给 Qwen Code。']
637+
],
638+
create: [
639+
['I', '图像与视频', '通过百炼模型完成文生图、图像编辑与视频生成。'],
640+
['A', '音频与语音', '完成语音识别、说话人分离、TTS 与媒体处理。'],
641+
['S', '场景化 Skills', '一句话运行短片制作、会议清洗等多步骤流程。']
642+
],
643+
operate: [
644+
['A', '应用编排', '调用百炼上的 Agent、工作流、知识库与 MCP 工具。'],
645+
['D', '模型部署', '管理训练数据、微调任务与专属模型部署。'],
646+
['O', '账号运维', '查询用量、配额、限流与团队席位等控制台能力。']
647+
]
648+
};
649+
650+
function renderQwenScope(key) {
651+
var root = document.getElementById('qwen-scope-list');
652+
if (!root || !scopes[key]) return;
653+
root.innerHTML = scopes[key].map(function(item) {
654+
return '<div class="qwen-scope-item"><div class="mark">' + item[0] + '</div><div><h4>' + item[1] + '</h4><p>' + item[2] + '</p></div></div>';
655+
}).join('');
656+
}
657+
658+
document.addEventListener('DOMContentLoaded', function() {
659+
var tabs = document.querySelectorAll('.qwen-scope-tab');
660+
if (!tabs.length) return;
661+
renderQwenScope('build');
662+
tabs.forEach(function(btn) {
663+
btn.addEventListener('click', function() {
664+
tabs.forEach(function(tab) {
665+
var active = tab === btn;
666+
tab.classList.toggle('active', active);
667+
tab.setAttribute('aria-selected', String(active));
668+
});
669+
renderQwenScope(btn.getAttribute('data-qwen-tab'));
670+
});
671+
});
672+
673+
var copyBtn = document.getElementById('qwen-copy-btn');
674+
var prompt = document.getElementById('qwen-install-prompt');
675+
if (!copyBtn || !prompt) return;
676+
copyBtn.addEventListener('click', async function() {
677+
var text = 'Please read https://bailian.aliyun.com/cli/install.md and install the Aliyun Model Studio CLI for me. After installation, verify it and show me the capabilities available in this environment.';
678+
var copied = false;
679+
if (navigator.clipboard && window.isSecureContext) {
680+
try { await navigator.clipboard.writeText(text); copied = true; } catch (e) {}
681+
}
682+
if (!copied) {
683+
try {
684+
var area = document.createElement('textarea');
685+
area.value = text;
686+
area.setAttribute('readonly', '');
687+
area.style.position = 'fixed';
688+
area.style.left = '-9999px';
689+
document.body.appendChild(area);
690+
area.select();
691+
copied = document.execCommand('copy');
692+
area.remove();
693+
} catch (e) {}
694+
}
695+
if (copied) {
696+
copyBtn.textContent = '已复制';
697+
copyBtn.classList.add('copied');
698+
} else {
699+
var range = document.createRange();
700+
range.selectNodeContents(prompt);
701+
var selection = window.getSelection();
702+
selection.removeAllRanges();
703+
selection.addRange(range);
704+
copyBtn.textContent = '已选中，请复制';
705+
}
706+
window.setTimeout(function() {
707+
copyBtn.textContent = '复制 Prompt';
708+
copyBtn.classList.remove('copied');
709+
}, 1800);
710+
});
711+
});
712+
})();
457713
</script>
458714

459715
</body>

0 commit comments

Comments
 (0)