{
}
// fig.2 — 关于这个项目,问点别的
问关于「千问大模型 · Qwen UI Design」的细节 —— 技术选型 / 踩坑 / 部署。
试试下面的问题,或直接输入。
AI 时代的操作系统，助力千行百业的 AI 应用创新实现
一套围绕「千问大模型」品牌打造的多页面产品站演示项目，使用 Vue 3 + TypeScript + Vite 构建。设计参考 Vercel / Linear / Framer 风格，主题为 Immersive Dark Platform，让 AI 能力以图像说话。
在线访问：https://project.zxbdwy.online/qwen-ui
@vue-flow/core 构建，包含 Trigger / LLM / Condition / Code / Output 五类自定义节点。@/ 全局直达。/mobile 入口的移动端体验展示。以下截图均从线上部署地址 https://project.zxbdwy.online/qwen-ui 实时截取，并通过自建对象存储托管。
/）品牌主张、Hero 区、Bento Grid 能力矩阵、合作伙伴 Marquee、CTA。
/coding）千问编程助手的代码补全、对话式编程、终端 Agent 演示。
/workflow）基于 Vue Flow 的可视化编排，支持触发器、LLM、条件分支、代码节点与输出节点。
/chat）多轮对话界面、历史会话面板、Markdown 渲染。
/vision）文生图、图像理解、风格化作品画廊。
/showcase）文本 / 图像 / 视频 / 语音的多模态能力组合呈现。
/industries）教育、金融、医疗、制造等行业落地案例与解决方案。
/price）阶梯式订阅、API 计费、企业版方案对比。
/about）品牌故事、团队介绍、联系方式。
| 类型 | 选型 |
|---|---|
| 框架 | Vue 3.5 + TypeScript 5.6 |
| 构建工具 | Vite 6 |
| 路由 | Vue Router 4（History 模式，VITE_BASE_PATH 可配置） |
| 状态管理 | Pinia 2 |
| 样式方案 | Tailwind CSS 3.4 + 自定义 CSS 变量（src/styles/variables.css） |
| 工作流引擎 | @vue-flow/core @vue-flow/background @vue-flow/controls |
| 动效 |
# 克隆仓库
git clone <repository-url>
cd qwen-ui-design
# 安装依赖（必须使用 pnpm）
pnpm install
# 启动开发服务器（默认 http://localhost:5173）
pnpm dev
# 类型检查 + 生产构建
pnpm build
# 预览构建产物
pnpm preview
pnpm lint # ESLint 自动修复
pnpm lint:check # 仅检查
pnpm format # Prettier 格式化 src/
pnpm format:check # Prettier 校验
| 变量 | 说明 | 默认值 |
|---|---|---|
VITE_BASE_PATH | Vite base 与 Router 公共前缀，部署到子路径时使用 | / |
qwen-ui-design/
├─ src/
│ ├─ assets/ # 媒体与图片资源
│ ├─ components/
│ │ ├─ landing/ # 首页区块：Hero / Bento / Marquee / CTA
│ │ ├─ ui/ # 通用 UI：AppNavbar / AppFooter
│ │ └─ workflow/ # 工作流节点：Trigger / LLM / Condition / Code / Output
│ ├─ composables/ # 通用组合式逻辑（use 前缀，如 useCountUp）
│ ├─ layouts/
│ │ └─ DefaultLayout.vue # 12 个路由共用布局
│ ├─ pages/ # 12 个业务页面
│ ├─ router/index.ts # 懒加载路由配置 + 动态 title
│ ├─ styles/
│ │ ├─ reset.css
│ │ ├─ variables.css # 设计 Token（颜色 / 间距 / 渐变）
│ │ └─ global.css
│ ├─ App.vue
│ └─ main.ts # Pinia + Router 注册入口
├─ index.html
├─ vite.config.ts # 别名 @ → src，base 由 VITE_BASE_PATH 决定
├─ tailwind.config.js
├─ tsconfig.json
└─ package.json
// 一律使用 @/，避免相对路径穿透
import HeroSection from '@/components/landing/HeroSection.vue'
import { useCountUp } from '@/composables/useCountUp'
详见
Design.md，以下为核心摘录。
| Token | 值 | 用途 |
|---|---|---|
--color-primary | #2563EB | 电光蓝主品牌色 |
--color-cta | #F97316 | 能量橙 CTA |
--color-success | #22C55E | 成功 / 工作流节点 |
--bg-base | #000000 | OLED 黑底 |
Space Grotesk · DM Sans · JetBrains Mono（Google Fonts，已在 index.html 中预连接加载）。
| 路径 | 名称 | 标题 |
|---|---|---|
/ | Landing | 千问 — 千问大模型 |
/coding | Coding | AI 编程助手 — 千问 |
/workflow | Workflow | AI 工作流 — 千问 |
/chat | Chat | 千问对话 — 千问 |
/vision | Vision | 万相图像 — 千问 |
所有页面通过 router.afterEach 自动应用 meta.title 到 document.title。
<script setup lang="ts">，Props 必须 TypeScript 类型声明，优先 Composition APIuse 前缀，置于 src/composables/src/styles/variables.css 中的 CSS 变量，避免硬编码pnpm lint:check 与 pnpm format:check 通过构建产物位于 dist/，是纯静态 SPA，可托管于任意静态服务器 / CDN。
部署到子路径时，先设置环境变量：
VITE_BASE_PATH=/qwen-ui/ pnpm build
Nginx 示例（History 模式回退）：
location /qwen-ui/ {
alias /var/www/qwen-ui/;
try_files $uri $uri/ /qwen-ui/index.html;
}
本项目为毕业设计 / 演示作品，仅供学习参考。
| GSAP 3.12（滚动 / 入场 / 计数） |
| 工具库 | @vueuse/core、marked、lucide-vue-next |
| 包管理器 | pnpm（锁定 esbuild / vue-demi 构建脚本） |
| 代码规范 | ESLint + Prettier（单引号、无分号、2 空格缩进、行宽 100） |
--bg-surface | #0A0A0A | 卡片 / 模块表面 |
--text-primary | #FFFFFF | 主文字 |
--text-secondary | #A1A1AA | 次级文字 |
/showcase| Showcase |
| 多模态展示 — 千问 |
/industries | Industries | 千行百业 — 千问 |
/price | Price | 产品定价 — 千问 |
/mobile | Mobile | 移动端体验 — 千问 |
/brand | Brand | 品牌物料 — 千问 |
/miniapp | Miniapp | 小程序入口 — 千问 |
/about | About | 关于我们 — 千问 |