雾非雾の

关注

这个人很神秘

粉丝

文章

获赞

如何在华为云平台使用CCE高可用部署与性能监控：构建稳健云架构的最佳实践

正文目录

文章摘要

【一】智谱AI平台介绍

（1）简介

（2）能力支持

（3）权威认可

【二】项目一：股票新闻聚合网页

（1）打开智谱AI平台

（2）配置模型环境

（3）提示词准备

（4）输入提示词

（4）模型对话结果

网页搜索内容展示：

模型需求捕捉展示：

网页源码展示：

核心功能实现展示：

核心功能实现

（5）项目效果展示

【三】项目二：电商订单管理网页

（1）Trae开发平台介绍

（1）获取KEY

（2）接入GLM4.6模型

（3）提示词准备

（4）Trae生成过程

网页源码展示：

（5）项目效果展示：

网页效果展示：

【四】GLM 4.6大模型体验心得

（1）谈直接对话体验

（2）谈MCP Server调用体验

（3）总结

《GLM4.6 多模态生成实践：股票数据 - 资讯联动系统与 Trae 电商订单管理网页》

2025-11-14 11:38:26

文章摘要

前引：在程序员的世界里，“效率” 与 “难题” 永远是共生的命题 —— 重复的模板代码消耗精力，冷门语法的查阅耗时费力，复杂 Bug 的排查更是如同 “大海捞针”。而智谱AI 平台的模型GLM-4.6，以 355B 总参数、200K 上下文窗口的硬核实力，在 Coding 场景中交出了一份惊艳答卷!

前引：在程序员的世界里，“效率” 与 “难题” 永远是共生的命题 —— 重复的模板代码消耗精力，冷门语法的查阅耗时费力，复杂 Bug 的排查更是如同 “大海捞针”。而智谱AI 平台的模型GLM-4.6，以 355B 总参数、200K 上下文窗口的硬核实力，在 Coding 场景中交出了一份惊艳答卷：它不仅是国内已知 “最强编码大模型”，更以对齐 Claude Sonnet 4 的代码能力，成为开发者手中的 “智能协作利刃”。当我们将其投入真实编码场景，会发现它绝非简单的 “代码生成器”，而是从需求落地到系统优化的全流程 “效率引擎”以下，让我们通过具体实例，拆解 GLM-4.6 如何重塑编码范式！通过本文,你将收获智谱AI GLM-4.6模型从“0”到“1”的开发能力与直观效率展示！

本文精选两个项目形成体验：直接对话代码生成（股票新闻聚合网页）

Trae MCP集成开发调用（电商订单管理网页）

【一】智谱AI平台介绍

（1）简介

大家可以打开智谱AI平台网页直接体验：https://bigmodel.cn/trialcenter/modeltrial/text

智谱 AI 开放平台是智谱公司打造的大模型服务平台，能让开发者、企业甚至普通用户，轻松调用前沿的人工智能能力，去做开发、搞创新、解决实际问题：

高级编码能力：在公开基准与真实编程任务中，GLM-4.6 的代码能力对齐 ClaudeSonnet 4，是国内已知的最好的 Coding 模型

上下文长度：上下文窗口由 128K→200K，适应更长的代码和智能体任务

推理能力：推理能力提升，并支持在推理过程中调用工具

搜索能力：增强了模型在工具调用和搜索智能体上的表现，在智能体框架中表现更好。

写作能力：在文风、可读性与角色扮演场景中更符合人类偏好

多语言翻译：进一步增强跨语种任务的处理效果

（2）能力支持

写代码一把好手：要是你想做个小程序、写个数据分析脚本，哪怕只是问问编程难题，它的编码能力在国内都是顶尖的，能直接把你的自然语言需求变成可运行的代码

处理长内容不在话下：它的 “记忆” 特别好，能一次性处理 20 万字级的长文本（比如整份合同、长篇报告），不管是梳理逻辑还是提炼重点，都能轻松应对

推理和探索能力强：遇到复杂问题，它不仅能分析推理，还能自己调用工具找资料

多场景都能打：写文章、做翻译、搞创作，甚至模拟角色聊天，它的文风、可读性都很贴近人类习惯，多语言翻译也很地道

（3）权威认可

在 8 大权威基准：AIME 25、GPQA、LCB v6、HLE、SWE-Bench Verified、BrowseComp、Terminal-Bench、τ^2-Bench、GPQA 模型通用能力的评估中，GLM-4.6 在大部分权威榜单表现对齐 Claude Sonnet 4，稳居国产模型首位

在平均token消耗上，GLM-4.6 比 GLM-4.5 节省 30% 以上，为同类模型最低

下面我们通过智谱AI平台教学来从“0”到“1”完成： GLM-4.6 大模型在 Coding 场景使用！

【二】项目一：股票新闻聚合网页

（1）打开智谱AI平台

打开网页，完成登录，目前登录就送对话Token！https://bigmodel.cn/console/overview

（2）配置模型环境

（1）打开模型广场，选择GLM 4.6大模型体验

（2）点击“智能搜索标准版”在右边设置联网搜索的功能（我选择切换为Pro版进行体验！）

随后选择“智能编程”，让对话更加的专业化！

（3）提示词准备

这是我事先准备好的提示词，可以参考：我这里采用的是新浪的股票信息获取

` 请生成一个股票新闻聚合网页源码，风格为 “专业金融资讯平台”。包含：

组件：股票行情卡片（含多组数据、涨跌色标）、新闻瀑布流（带股票标签标识）、搜索栏、自选股导航栏、舆情标签云；

布局：顶部导航栏（含 logo、搜索、用户入口），中间双栏（左行情、右新闻），底部资讯分类页脚；

视觉细节：

股票卡片 hover 时出现 “数据波动微动效”，新闻卡片点击时有 “资讯展开过渡动画”；

采用深色模式适配（可切换），行情数据用动态数字递增 / 递减效果；

加入金融元素点缀（如 K 线图轮廓、货币符号图标），字体选 Inter（现代无衬线，确保数据可读性）；

交付：提供完整的界面设计稿（含移动端适配）、色彩规范、交互说明，需体现 “数据权威性” 与 “阅读流畅性” 的平衡。`

（4）输入提示词

将提示词输入在对话框（注意：提示词直接影响后面项目效果，追求项目效果的需要仔细准备！）

（4）模型对话结果

网页搜索内容展示：

大模型顺着我提供的新浪股票信息，已经自动按顺序列出了搜索结果：

模型需求捕捉展示：

这是模型捕捉到的的项目需求，以及项目展现形式（比如颜色、动画、卡片格式....）：

用户需要我生成一个股票新闻聚合网页源码，要求是专业金融资讯平台风格。让我根据提供的参考信息和用户需求来生成一个完整的HTML页面。

从参考信息中，我可以看到：

新浪财经提供了股票数据接口，可以通过http://hq.sinajs.cn获取实时股票数据

接口需要Referer头：https://finance.sina.com.cn

返回的是字符串格式的结构化数据

用户要求包含股票行情卡片、新闻瀑布流、搜索栏、自选股导航栏、舆情标签云等组件

要求深色模式、动画效果、响应式设计

我需要创建一个专业的金融资讯平台，包含所有要求的组件和功能。

网页源码展示：

下面我将模型生成的网页源码展现出来：

核心功能实现展示：

模型最后告诉了我已经实现了的核心功能，全部一一列出：

核心功能实现

股票行情卡片

实时价格显示，带涨跌颜色标识（绿涨红跌）

Hover时数据波动微动效

动态数字递增/递减效果

迷你K线图展示

新闻瀑布流

点击展开/收起过渡动画

股票标签标识系统

时间戳显示

标签过滤功能

搜索与导航

实时搜索功能

自选股快速切换

深色/浅色主题切换

舆情标签云

三种情感分类（正面/负面/中性）

悬浮动画效果

点击筛选功能

视觉设计特色

深色模式优先：专业的金融平台视觉风格

动态数据效果：实时价格更新动画

响应式布局：完美适配桌面和移动设备

金融元素：K线图轮廓、货币符号图标

交互细节

数据实时更新模拟（每3秒）

平滑的过渡动画

通知提示系统

键盘快捷键支持（Enter搜索）

技术实现

使用CSS Grid和Flexbox实现复杂布局

CSS动画实现微交互效果

JavaScript实现数据动态更新

LocalStorage保存主题偏好

这个设计充分体现了"数据权威性"与"阅读流畅性"的平衡，提供了专业级的金融资讯平台体验。

（5）项目效果展示

现在我们导入新的文本，替换为模型生成的HTML源码并打开：

可以自由切换主题，左边的数据也是实时更改的，做到了完全动态化：

下面的功能点击后会显示“正在加载”“加载完成”效果：总体来说达到网页效果和视觉感，很满意！

【三】项目二：电商订单管理网页

（1）Trae开发平台介绍

Trae 是字节跳动于 2025 年发布的AI 原生集成开发环境（AI IDE），定位为「智能协作 AI 工程师」，专为提升开发者效率而设计。它通过自然语言交互、智能代码生成、多模态开发支持等核心能力，重新定义了编程范式，尤其在中文开发场景中展现出显著优势Trae国际版官网：https://www.trae.ai/solo

（1）获取KEY

首先我们打开智谱AI文档，按照操作获取API KEY：

https://docs.bigmodel.cn/cn/guide/tools/web-search#mcp-server

接着在“联网搜索”获取MCP Server调用的代码片段：

{

"mcpServers": {

"zhipu-web-search-sse": {

"url": "https://open.bigmodel.cn/api/mcp-broker/proxy/web-search/mcp?Authorization=Your Zhipu API Key"

}

（2）接入GLM4.6模型

通过MCP复制替换上面调用代码中的的API KEY，点击确认完成添加：

（3）提示词准备

输入提前准备好的提示词，完成对话：

「用 Trae 生成电商订单管理网页，供运营处理订单全流程，需求如下：

核心功能

订单列表：显示订单号、用户、时间、金额、支付 / 发货状态，支持按时间 / 状态 / 金额筛选，搜索订单号 / 用户名，表格可排序、分页。

详情弹窗：点击查看用户信息（电话、地址）、商品明细（名称、单价、数量）、支付 / 物流信息，按状态显示操作按钮（如 “标记发货”）。

数据概览：顶部统计今日订单数、成交额、待处理单量，配近 7 天订单趋势图和状态占比图。

技术与交互

技术栈：HTML+CSS+JS（可集成 Vue3），Tailwind 样式，ECharts 图表。

模拟 20 条不同状态的订单数据（带结构注释），筛选实时更新，操作需二次确认，适配移动端。

交付完整项目结构（含依赖配置），代码加关键注释，风格用深蓝色系，状态标签色区分（待付 - 橙、已付 - 蓝、已发 - 绿）。

生成可直接运行的代码，优先保证功能完整。」

（4）Trae生成过程

下面详细展示对话结果：

技术栈与项目结构展示：

下面为图片中的完整内容：

# 电商订单管理前端（HTML+CSS+JS+Vue3+Tailwind+ECharts）

本项目为运营处理订单全流程的管理页面，包含：

- 数据概览：今日订单数、成交额、待处理单量，近 7 天趋势图、状态占比图

- 订单列表：筛选（时间/状态/金额）、搜索（订单号/用户名）、排序、分页

- 详情弹窗：用户信息、商品明细、支付/物流信息；按状态显示操作按钮（如“标记发货”），操作带二次确认

- 适配移动端；深蓝主题；状态标签色区分：待付-橙、已付-蓝、已发-绿

## 技术栈

- HTML + CSS + JS（集成 Vue 3）

- Tailwind CSS（CDN）

- Apache ECharts（CDN）

## 本地运行

1. 安装依赖

```

npm install

```

2. 启动本地服务器

```

npm run start

```

3. 浏览器访问 `http://localhost:5173/`

无需构建，直接运行。也可直接双击 `index.html` 打开（但图表/某些交互在本地文件协议下可能受限，推荐使用本地服务器）。

## 项目结构

```

├─ index.html # 入口页面

├─ package.json # 依赖与脚本配置

├─ README.md # 使用说明

└─ src/

├─ data.js # 模拟订单数据（20 条，含结构注释）

├─ main.js # 逻辑与交互（Vue3 + ECharts）

└─ styles.css # 额外样式（深蓝主题及细节）

```

## 说明

- 关键位置已加注释，便于二次开发与对接真实接口。

- 图表与概览、列表均随筛选条件实时联动更新。

- 操作按钮按状态显示，“标记发货”带二次确认，更新后会刷新统计与图表。

核心功能实现展示：

下面为图片中的完整内容：

以下是交付说明与使用要点：

功能概览

- 数据概览：统计今日订单数、GMV、待处理单量；图表区展示最近 7 天订单趋势与状态占比，随筛选实时联动。

- 列表管理：支持按时间、状态、金额筛选；搜索订单号 / 用户名；表格列点击排序；分页切换。

- 详情弹窗：展示用户信息、商品明细、支付与物流信息；当状态为“已付”时显示“标记发货”按钮，操作含二次确认并实时更新统计与图表。

- 主题与适配：深蓝色系界面，状态标签颜色区分（待付-橙、已付-蓝、已发-绿）；移动端布局自适应，表格可横向滚动。

项目结构

- index.html ：页面结构与 UI（集成 Tailwind/Vue3/ECharts）

- src/data.js ：20 条模拟订单数据（包含结构注释）

- src/main.js ：筛选/搜索/排序/分页、详情弹窗、二次确认、图表联动逻辑

- src/styles.css ：深蓝主题细节、滚动条与标签样式

- package.json ：本地预览依赖与脚本

- README.md ：运行与说明文档

运行方式

- 已帮你安装依赖并启动本地服务器。

- 若你需要重新运行：

- 在项目目录执行 npm.cmd install

- 启动 npm.cmd run start

- 访问 http://127.0.0.1:5173/

交互说明

- 筛选条件变化时，列表、统计与图表都会联动刷新。

- 表头点击排序，当前列会显示排序方向提示。

- “详情”中“标记发货”操作仅在状态为“已付”时显示，确认后状态变为“已发”并更新视图。

- 分页支持每页 10/20 条切换，切换后回到第 1 页。

定制与扩展建议

- 替换 src/data.js 为后端接口时，保持字段结构一致即可。

- 若需要更严格的金额/日期校验，可在 main.js 的筛选逻辑中补充校验。

- Tailwind 配色目前通过 CDN 配置扩展，可在 index.html 的 tailwind.config 中修改深蓝主色或状态色。

如果你希望我接入真实接口（如分页、筛选在后端完成）或补充导出 CSV/批量操作等功能，告诉我你的后端 API 约定即可，我会继续完善。

网页源码展示：

这是Trae MCP Server调用GLM4.6模型生成的网页源码：

<!doctype html>

<head>

<title>电商订单管理</title>

tailwind.config = {

theme: {

extend: {

colors: {

primary: '#0a2540', // 深蓝主题主色

primaryDark: '#071a30',

orangeStatus: '#f59e0b', // 待付

blueStatus: '#3b82f6', // 已付

greenStatus: '#10b981' // 已发

}

</script>

</head>

<h1 class="text-2xl font-semibold mb-4">订单数据概览</h1>

<div class="text-sm text-gray-300">今日订单数</div>

<div class="text-2xl font-bold">{{ stats.todayOrders }}</div>

</div>

<div class="text-sm text-gray-300">今日成交额</div>

<div class="text-2xl font-bold">¥ {{ formatAmount(stats.todayGMV) }}</div>

</div>

<div class="text-sm text-gray-300">待处理单量</div>

<div class="text-2xl font-bold">{{ stats.pendingCount }}</div>

</div>

</header>

<h2 class="font-medium">近 7 天订单趋势</h2>

<span class="text-xs text-gray-400">按当前筛选联动</span>

</div>

</div>

<span class="text-xs text-gray-400">按当前筛选联动</span>

</div>

</div>

</section>

<div>

</div>

<div>

</div>

<div>

</select>

</div>

<div>

</div>

</div>

</div>

</section>

<thead>

</tr>

</thead>

<tbody>

<td class="px-3 py-2">{{ o.orderNo }}</td>

<td class="px-3 py-2">{{ o.user.username }}</td>

<td class="px-3 py-2">{{ formatDateTime(o.createdAt) }}</td>

<td class="px-3 py-2">¥ {{ formatAmount(o.amount) }}</td>

<span :class="statusClass(o.status)" class="inline-block px-2 py-1 rounded text-xs">{{ o.status }}</span>

</td>

</td>

</tr>

</tbody>

</table>

</div>

<div class="text-gray-300">共 {{ filteredOrders.length }} 条，当前第 {{ pagination.page }} / {{ totalPages }} 页</div>

</select>

</div>

</section>

<h3 class="font-semibold">订单详情 - {{ detail.order.orderNo }}</h3>

</div>

<div>

<div>用户名：{{ detail.order.user.username }}</div>

<div>电话：{{ detail.order.user.phone }}</div>

<div class="sm:col-span-2">地址：{{ detail.order.user.address }}</div>

</div>

<div>

<thead>

</tr>

</thead>

<tbody>

<td class="px-2 py-1">¥ {{ formatAmount(it.unitPrice) }}</td>

<td class="px-2 py-1">{{ it.quantity }}</td>

</tr>

</tbody>

</table>

</div>

<div>

<div class="text-sm">方式：{{ detail.order.payment.method }}</div>

<div class="text-sm">交易号：{{ detail.order.payment.transactionId }}</div>

</div>

<div>

<div class="text-sm">承运商：{{ detail.order.logistics.carrier }}</div>

<div class="text-sm">运单号：{{ detail.order.logistics.trackingNo }}</div>

</div>

</div>

</body>

</html>

（5）项目效果展示：

Trae已经帮你把网页生成出来了，不用另外在文档替换源码再打开

我们找到Trae生成的网页并打开：http://127.0.0.1:5173/

网页效果展示：

【四】GLM 4.6大模型体验心得

（1）谈直接对话体验

在智谱 AI GLM4.6 生成股票新闻聚合网页的体验中，我最深的感触是：它对金融场景的专业细节把控，细腻到超出预期，作为金融资讯类网页的原型，它已经能直接承载 “行情跟踪 + 资讯阅读” 的核心需求。更关键的是，它不是简单的界面拼接，而是真的理解了金融领域 “数据要准、交互要顺、视觉要专业” 的底层逻辑 —— 用 AI 做专业场景的网页原型，这效率和质感，确实超出了我的期待！

（2）谈MCP Server调用体验

结果真是惊到我了，不到十分钟，一个功能齐全的页面框架就生成了，连模拟数据都给准备好了。我随手试了下筛选，选了“近7天”和“已付款”，数据瞬间就刷新了，翻页也特别顺滑，一点不卡。点开详情看，信息排得清清楚楚，连“标记发货”都加了二次确认，这种小细节最怕误操作了，它给考虑到了。最绝的是那个数据图表，我点了一下饼图的“已发货”，列表竟然真的跟着筛选了，这交互太智能了。

这活儿要是搁以前，光是前端页面加图表起码得两天，现在我喝了杯咖啡的时间就搞定了。而且代码注释也特别给力，像订单状态的标签颜色都写清楚了，后面接真实数据时一看就懂，省了不少沟通成本~