Z-Image-Turbo-辉夜巫女项目实战用Vue构建模型管理系统如果你正在寻找一个能快速上手、功能全面的AI图像生成项目来练手或者你的团队需要一个内部工具来管理AI绘图任务那么你来对地方了。今天我们来聊聊如何用Vue.js技术栈为Z-Image-Turbo-辉夜巫女这类图像生成模型搭建一个专属的管理系统。想象一下你的团队里有多个成员在使用同一个AI绘图服务大家各自为战生成的图片散落在各处参数设置五花八门想找一张上周生成的图得翻半天聊天记录。更头疼的是你根本不知道这个月谁用了多少算力哪些参数组合最受欢迎。一个集中式的管理系统就能把这些烦恼一扫而空。这个系统将包含用户管理、任务提交与队列、生成历史画廊、常用参数模板、以及可视化的用量统计。我们将使用Vue 3的组合式API、Vue Router进行页面导航、Pinia来管理全局状态并用Element Plus组件库来快速搭建美观的界面。整个项目结构清晰代码可维护性强非常适合作为中大型前端项目的入门实战。1. 项目规划与环境搭建在动手写代码之前我们先花点时间把项目蓝图和开发环境准备好。一个好的开始是成功的一半。1.1 系统功能与技术栈选型我们这个管理系统核心目标是让AI图像生成任务变得井井有条。主要功能模块包括用户认证与权限不同用户登录后只能看到和管理自己的任务与历史记录。管理员则可以查看全局数据。任务提交与队列用户可以提交新的图像生成任务系统会将其加入队列并实时反馈任务状态等待中、生成中、完成、失败。历史画廊所有成功生成的图片都会在这里归档支持按时间、模型、关键词等条件筛选和浏览并且可以一键复用参数再次生成。参数模板管理用户可以将常用的参数组合如“二次元人物特写”、“风景油画风格”保存为模板下次直接选用无需重复填写。数据统计看板用图表展示个人或团队的用量趋势、热门模型、常用参数等让资源消耗一目了然。为了实现这些功能我们选择以下技术栈Vue 3使用组合式API代码更简洁逻辑复用更灵活。Vite作为构建工具启动和热更新速度极快开发体验爽快。Vue Router管理单页面应用的路由实现页面间的无缝跳转。Pinia新一代的Vue状态管理库比Vuex更简单直观TypeScript支持也好。Element Plus基于Vue 3的桌面端UI组件库组件丰富设计优雅能极大提升开发效率。Axios用于向后端API发送HTTP请求处理任务提交、数据获取等。ECharts一个强大的图表库用来绘制用量统计的折线图、柱状图等。1.2 初始化Vue项目与依赖安装首先确保你的电脑上安装了Node.js建议版本16以上和npm。然后打开终端我们使用Vite官方模板来快速创建项目。# 使用npm创建项目项目名设为 z-image-manager npm create vuelatest z-image-manager # 创建过程中命令行会交互式地询问你配置选项 # 这里是我们推荐的选择 # √ Add TypeScript? ... No (根据团队习惯可选Yes) # √ Add JSX Support? ... No # √ Add Vue Router for Single Page Application development? ... Yes # √ Add Pinia for state management? ... Yes # √ Add Vitest for Unit Testing? ... No (可选) # √ Add an End-to-End Testing Solution? » No # √ Add ESLint for code quality? ... Yes (推荐) # 创建完成后进入项目目录并安装依赖 cd z-image-manager npm install # 安装额外的UI库和图表库 npm install element-plus axios echarts # 安装Element Plus的图标库可选但推荐 npm install element-plus/icons-vue项目创建好后我们来简单清理和调整一下目录结构让它更符合我们的管理系统的需求。你可以在src目录下看到类似这样的结构src/ ├── assets/ # 静态资源 ├── components/ # 可复用组件 ├── router/ # 路由配置 ├── stores/ # Pinia状态管理 ├── views/ # 页面级组件 ├── App.vue └── main.js接下来我们需要在main.js中全局引入Element Plus和它的样式。// src/main.js import { createApp } from vue import App from ./App.vue import router from ./router import { createPinia } from pinia // 引入Element Plus import ElementPlus from element-plus import element-plus/dist/index.css // 如果使用了图标也需要引入这里以部分图标为例 import * as ElementPlusIconsVue from element-plus/icons-vue const app createApp(App) const pinia createPinia() // 注册所有图标或按需注册 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.use(pinia) app.use(router) app.use(ElementPlus) app.mount(#app)现在运行npm run dev你的第一个Vue 3管理系统骨架就已经在本地跑起来了。2. 核心功能模块开发环境搭好了我们来逐一实现系统的核心功能。我们会从状态管理入手然后构建页面最后将它们连接起来。2.1 使用Pinia构建全局状态管理状态管理是这类应用的核心用户信息、任务队列、历史记录等数据需要在多个组件间共享。我们在src/stores目录下创建几个Store。首先是一个用户Store用于管理登录状态和用户信息。// src/stores/user.js import { defineStore } from pinia import { ref, computed } from vue import { loginApi, getUserInfoApi } from /api/auth // 假设的API export const useUserStore defineStore(user, () { // 状态 const token ref(localStorage.getItem(token) || ) const userInfo ref({}) // 用户信息对象 // Getter (计算属性) const isLoggedIn computed(() !!token.value) const isAdmin computed(() userInfo.value.role admin) // Action (方法) async function login(credentials) { const res await loginApi(credentials) token.value res.data.token userInfo.value res.data.user localStorage.setItem(token, token.value) return res } function logout() { token.value userInfo.value {} localStorage.removeItem(token) } async function fetchUserInfo() { if (!token.value) return const res await getUserInfoApi() userInfo.value res.data } // 暴露给模板使用 return { token, userInfo, isLoggedIn, isAdmin, login, logout, fetchUserInfo } })接着创建一个任务Store用于管理当前用户的任务列表和队列状态。// src/stores/task.js import { defineStore } from pinia import { ref } from vue import { submitTaskApi, getTaskListApi } from /api/task export const useTaskStore defineStore(task, () { const taskList ref([]) // 当前用户的所有任务 const pendingTasks ref([]) // 等待中和运行中的任务 const historyTasks ref([]) // 已完成和失败的任务 async function submitNewTask(taskParams) { // 1. 调用API提交任务 const res await submitTaskApi(taskParams) // 2. 将新任务添加到列表头部 taskList.value.unshift(res.data) // 3. 可以在这里触发轮询更新任务状态后续实现 startPollingTaskStatus(res.data.id) return res } async function fetchTaskList() { const res await getTaskListApi() taskList.value res.data // 简单分类 pendingTasks.value taskList.value.filter(t [pending, running].includes(t.status)) historyTasks.value taskList.value.filter(t [success, failed].includes(t.status)) } // 轮询任务状态简化版 function startPollingTaskStatus(taskId) { const intervalId setInterval(async () { // 调用获取单个任务状态的API // 如果任务完成或失败清除定时器并更新store }, 3000) } return { taskList, pendingTasks, historyTasks, submitNewTask, fetchTaskList } })2.2 基于Vue Router的页面路由设计我们的应用有多个页面路由配置在src/router/index.js中。我们需要设计登录、主页、任务提交、历史画廊、统计等路由。// src/router/index.js import { createRouter, createWebHistory } from vue-router import { useUserStore } from /stores/user const router createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /login, name: login, component: () import(/views/LoginView.vue), meta: { requiresGuest: true } // 只有未登录用户可访问 }, { path: /, name: home, component: () import(/views/HomeView.vue), meta: { requiresAuth: true } // 需要登录 }, { path: /generate, name: generate, component: () import(/views/GenerateView.vue), meta: { requiresAuth: true } }, { path: /gallery, name: gallery, component: () import(/views/GalleryView.vue), meta: { requiresAuth: true } }, { path: /templates, name: templates, component: () import(/views/TemplatesView.vue), meta: { requiresAuth: true } }, { path: /stats, name: stats, component: () import(/views/StatsView.vue), meta: { requiresAuth: true, requiresAdmin: true } // 需要管理员权限 }, ] }) // 全局路由守卫处理权限 router.beforeEach((to, from, next) { const userStore useUserStore() const isLoggedIn userStore.isLoggedIn const isAdmin userStore.isAdmin if (to.meta.requiresAuth !isLoggedIn) { // 需要登录但未登录跳转到登录页 next(/login) } else if (to.meta.requiresGuest isLoggedIn) { // 要求是游客但已登录跳转到首页 next(/) } else if (to.meta.requiresAdmin !isAdmin) { // 需要管理员权限但不是管理员跳转到首页或无权限页面 next(/) } else { // 放行 next() } }) export default router2.3 任务提交与队列管理界面这是用户最常使用的页面。我们使用Element Plus的表单、按钮和表格组件来构建。!-- src/views/GenerateView.vue -- template div classgenerate-page el-page-header backgoBack title返回 template #content span classtext-large font-600 mr-3 提交新任务 /span /template /el-page-header el-row :gutter20 classmt-6 !-- 左侧参数表单 -- el-col :span16 el-card template #header div classcard-header span生成参数/span el-button typeprimary link clicksaveAsTemplate保存为模板/el-button /div /template el-form :modelform label-width100px :rulesrules refformRef el-form-item label提示词 propprompt el-input v-modelform.prompt typetextarea :rows3 placeholder详细描述你想要生成的画面... show-word-limit maxlength500 / /el-form-item el-row :gutter20 el-col :span12 el-form-item label模型 propmodel el-select v-modelform.model placeholder请选择模型 el-option labelZ-Image-Turbo (标准版) valuez-image-turbo / el-option label辉夜巫女 (动漫风格) valuekaguya-miko / /el-select /el-form-item /el-col el-col :span12 el-form-item label图片尺寸 propsize el-select v-modelform.size el-option label512x512 value512x512 / el-option label768x768 value768x768 / el-option label1024x1024 value1024x1024 / /el-select /el-form-item /el-col /el-row el-form-item label生成数量 propbatch_size el-slider v-modelform.batch_size :min1 :max4 show-input / /el-form-item el-form-item el-button typeprimary :loadingsubmitting clicksubmitTask提交生成任务/el-button el-button clickresetForm重置/el-button /el-form-item /el-form /el-card /el-col !-- 右侧任务队列 -- el-col :span8 el-card template #header div classcard-header span任务队列/span el-tag typewarning运行中: {{ runningCount }}/el-tag /div /template div v-ifpendingTasks.length 0 classempty-queue el-empty description暂无进行中的任务 / /div el-timeline v-else el-timeline-item v-fortask in pendingTasks :keytask.id :timestampformatTime(task.created_at) :typegetTaskTimelineType(task.status) placementtop el-card shadowhover pstrongID:/strong {{ task.id.slice(0, 8) }}.../p p classprompt-preview{{ task.prompt }}/p el-tag :typegetTaskTagType(task.status) sizesmall{{ task.statusText }}/el-tag /el-card /el-timeline-item /el-timeline /el-card /el-col /el-row /div /template script setup import { ref, computed, onMounted } from vue import { useRouter } from vue-router import { ElMessage } from element-plus import { useTaskStore } from /stores/task const router useRouter() const taskStore useTaskStore() const formRef ref() const submitting ref(false) // 表单数据 const form ref({ prompt: , model: z-image-turbo, size: 512x512, batch_size: 1, }) // 表单验证规则 const rules { prompt: [{ required: true, message: 请输入提示词, trigger: blur }], model: [{ required: true, message: 请选择模型, trigger: change }], } // 计算属性运行中的任务数量 const runningCount computed(() { return taskStore.pendingTasks.filter(t t.status running).length }) // 获取待处理任务列表 const pendingTasks computed(() taskStore.pendingTasks) onMounted(() { taskStore.fetchTaskList() }) function goBack() { router.push(/) } async function submitTask() { // 表单验证 await formRef.value.validate() submitting.value true try { await taskStore.submitNewTask(form.value) ElMessage.success(任务提交成功已加入队列) // 提交后可以清空表单或跳转 // resetForm() } catch (error) { ElMessage.error(任务提交失败 error.message) } finally { submitting.value false } } function resetForm() { formRef.value.resetFields() } function saveAsTemplate() { // 保存模板的逻辑 ElMessage.info(模板保存功能开发中...) } // 一些工具函数 function formatTime(timestamp) { return new Date(timestamp).toLocaleTimeString() } function getTaskTimelineType(status) { const map { pending: primary, running: warning, success: success, failed: danger } return map[status] || info } function getTaskTagType(status) { const map { pending: info, running: warning, success: success, failed: danger } return map[status] || } /script2.4 历史画廊与参数模板管理历史画廊页面需要展示图片并提供筛选和操作功能。我们使用Element Plus的el-image和el-row/el-col来构建一个瀑布流画廊。!-- src/views/GalleryView.vue (部分代码) -- template div classgallery-page div classfilter-bar el-input v-modelsearchKeyword placeholder搜索提示词... stylewidth: 300px clearable / el-select v-modelselectedModel placeholder所有模型 clearable el-option labelZ-Image-Turbo valuez-image-turbo / el-option label辉夜巫女 valuekaguya-miko / /el-select el-date-picker v-modeldateRange typedaterange range-separator至 start-placeholder开始日期 end-placeholder结束日期 / /div !-- 图片画廊 -- div v-iffilteredList.length 0 classimage-grid el-row :gutter20 el-col v-foritem in filteredList :keyitem.id :xs24 :sm12 :md8 :lg6 classimage-col el-card shadowhover :body-style{ padding: 10px } el-image :srcitem.image_url :preview-src-list[item.image_url] fitcover classgallery-image lazy / div stylepadding: 10px 0; p classimage-prompt{{ truncatePrompt(item.prompt) }}/p div classimage-meta span{{ item.model }}/span span{{ formatDate(item.created_at) }}/span /div div classaction-buttons el-button typeprimary sizesmall clickregenerate(item)再次生成/el-button el-button sizesmall clickdownloadImage(item)下载/el-button /div /div /el-card /el-col /el-row /div el-empty v-else description暂无生成历史 / /div /template script setup import { ref, computed, onMounted } from vue import { useTaskStore } from /stores/task import { ElMessage } from element-plus const taskStore useTaskStore() const searchKeyword ref() const selectedModel ref() const dateRange ref([]) // 计算属性根据筛选条件过滤历史任务 const filteredList computed(() { let list taskStore.historyTasks.filter(t t.status success) if (searchKeyword.value) { list list.filter(t t.prompt.toLowerCase().includes(searchKeyword.value.toLowerCase())) } if (selectedModel.value) { list list.filter(t t.model selectedModel.value) } // 日期筛选逻辑略 return list }) onMounted(() { taskStore.fetchTaskList() }) function truncatePrompt(prompt, length 50) { return prompt.length length ? prompt.substring(0, length) ... : prompt } function formatDate(timestamp) { return new Date(timestamp).toLocaleDateString() } function regenerate(item) { // 将历史任务的参数填充到提交表单并跳转到生成页 ElMessage.info(跳转到生成页并填充参数...) } function downloadImage(item) { // 实现图片下载逻辑 ElMessage.success(开始下载图片...) } /script参数模板管理页面则相对简单主要是一个列表支持创建、编辑、删除和套用模板。3. 数据可视化与项目优化一个完整的管理系统数据可视化能极大提升体验。同时我们也要考虑项目的可维护性和性能。3.1 使用ECharts集成统计图表在统计页面我们使用ECharts来展示用量趋势和模型分布。!-- src/views/StatsView.vue (部分代码) -- template div classstats-page el-row :gutter20 el-col :span12 el-card template #header span月度生成量趋势/span /template div refusageChartRef stylewidth: 100%; height: 300px;/div /el-card /el-col el-col :span12 el-card template #header span模型使用分布/span /template div refmodelChartRef stylewidth: 100%; height: 300px;/div /el-card /el-col /el-row /div /template script setup import { ref, onMounted, onUnmounted } from vue import * as echarts from echarts const usageChartRef ref() const modelChartRef ref() let usageChart null let modelChart null onMounted(() { // 初始化图表 usageChart echarts.init(usageChartRef.value) modelChart echarts.init(modelChartRef.value) // 模拟数据 const usageOption { xAxis: { type: category, data: [1月, 2月, 3月, 4月, 5月, 6月] }, yAxis: { type: value }, series: [{ data: [120, 200, 150, 80, 70, 110], type: line }] } const modelOption { tooltip: { trigger: item }, series: [ { type: pie, radius: 50%, data: [ { value: 335, name: Z-Image-Turbo }, { value: 310, name: 辉夜巫女 }, ], } ] } usageChart.setOption(usageOption) modelChart.setOption(modelOption) // 监听窗口变化重绘图表 window.addEventListener(resize, handleResize) }) onUnmounted(() { window.removeEventListener(resize, handleResize) usageChart?.dispose() modelChart?.dispose() }) function handleResize() { usageChart?.resize() modelChart?.resize() } /script3.2 项目结构与代码组织建议随着功能增多良好的代码组织至关重要。这里有一些建议API请求统一管理在src/api目录下按模块创建文件如auth.js,task.js,template.js使用Axios实例并配置拦截器处理token和错误。组件按需引入对于Element Plus可以使用按需导入来减小打包体积。环境变量在项目根目录创建.env.development和.env.production文件管理不同环境的后端API地址。工具函数将日期格式化、字符串截断等常用函数放在src/utils目录下。样式管理可以使用Sass/Scss并将全局样式、变量定义在src/assets/styles目录中。3.3 部署与后续迭代思路开发完成后你可以使用npm run build命令来构建生产版本。生成的dist目录可以部署到任何静态文件服务器如Nginx、Apache或云服务商的对象存储。后续迭代可以考虑加入更多功能WebSocket实时通知当任务状态变化时主动推送消息给前端替代轮询。图片高级筛选与标签为用户生成的图片打上AI自动生成的标签方便搜索。团队协作功能支持创建项目组共享任务队列和画廊。性能优化对于历史画廊实现图片懒加载和虚拟滚动应对大量数据。4. 总结走完这一趟一个功能清晰的Z-Image-Turbo-辉夜巫女模型管理系统前端部分就初具雏形了。整个过程下来Vue 3的组合式API让逻辑组织变得非常清晰Pinia管理状态也比以前更轻快Element Plus则帮我们省去了大量重复的UI开发工作。这个项目麻雀虽小但五脏俱全涵盖了现代前端单页面应用SPA的核心概念路由、状态管理、组件化、API交互和数据可视化。你可以把它当作一个模板根据实际的后端API接口进行调整和扩展。比如任务状态轮询可以升级为WebSocket实现真正的实时更新画廊的图片加载也可以加入懒加载优化体验。最重要的是通过亲手搭建这样一个与实际业务场景紧密结合的项目你对Vue技术栈的理解会从“知道怎么用”深入到“知道怎么用好”。接下来你可以尝试连接真实的后端服务或者为它添加更多你感兴趣的功能模块。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
Z-Image-Turbo-辉夜巫女项目实战：用Vue构建模型管理系统
发布时间：2026/5/19 5:16:52
Z-Image-Turbo-辉夜巫女项目实战用Vue构建模型管理系统如果你正在寻找一个能快速上手、功能全面的AI图像生成项目来练手或者你的团队需要一个内部工具来管理AI绘图任务那么你来对地方了。今天我们来聊聊如何用Vue.js技术栈为Z-Image-Turbo-辉夜巫女这类图像生成模型搭建一个专属的管理系统。想象一下你的团队里有多个成员在使用同一个AI绘图服务大家各自为战生成的图片散落在各处参数设置五花八门想找一张上周生成的图得翻半天聊天记录。更头疼的是你根本不知道这个月谁用了多少算力哪些参数组合最受欢迎。一个集中式的管理系统就能把这些烦恼一扫而空。这个系统将包含用户管理、任务提交与队列、生成历史画廊、常用参数模板、以及可视化的用量统计。我们将使用Vue 3的组合式API、Vue Router进行页面导航、Pinia来管理全局状态并用Element Plus组件库来快速搭建美观的界面。整个项目结构清晰代码可维护性强非常适合作为中大型前端项目的入门实战。1. 项目规划与环境搭建在动手写代码之前我们先花点时间把项目蓝图和开发环境准备好。一个好的开始是成功的一半。1.1 系统功能与技术栈选型我们这个管理系统核心目标是让AI图像生成任务变得井井有条。主要功能模块包括用户认证与权限不同用户登录后只能看到和管理自己的任务与历史记录。管理员则可以查看全局数据。任务提交与队列用户可以提交新的图像生成任务系统会将其加入队列并实时反馈任务状态等待中、生成中、完成、失败。历史画廊所有成功生成的图片都会在这里归档支持按时间、模型、关键词等条件筛选和浏览并且可以一键复用参数再次生成。参数模板管理用户可以将常用的参数组合如“二次元人物特写”、“风景油画风格”保存为模板下次直接选用无需重复填写。数据统计看板用图表展示个人或团队的用量趋势、热门模型、常用参数等让资源消耗一目了然。为了实现这些功能我们选择以下技术栈Vue 3使用组合式API代码更简洁逻辑复用更灵活。Vite作为构建工具启动和热更新速度极快开发体验爽快。Vue Router管理单页面应用的路由实现页面间的无缝跳转。Pinia新一代的Vue状态管理库比Vuex更简单直观TypeScript支持也好。Element Plus基于Vue 3的桌面端UI组件库组件丰富设计优雅能极大提升开发效率。Axios用于向后端API发送HTTP请求处理任务提交、数据获取等。ECharts一个强大的图表库用来绘制用量统计的折线图、柱状图等。1.2 初始化Vue项目与依赖安装首先确保你的电脑上安装了Node.js建议版本16以上和npm。然后打开终端我们使用Vite官方模板来快速创建项目。# 使用npm创建项目项目名设为 z-image-manager npm create vuelatest z-image-manager # 创建过程中命令行会交互式地询问你配置选项 # 这里是我们推荐的选择 # √ Add TypeScript? ... No (根据团队习惯可选Yes) # √ Add JSX Support? ... No # √ Add Vue Router for Single Page Application development? ... Yes # √ Add Pinia for state management? ... Yes # √ Add Vitest for Unit Testing? ... No (可选) # √ Add an End-to-End Testing Solution? » No # √ Add ESLint for code quality? ... Yes (推荐) # 创建完成后进入项目目录并安装依赖 cd z-image-manager npm install # 安装额外的UI库和图表库 npm install element-plus axios echarts # 安装Element Plus的图标库可选但推荐 npm install element-plus/icons-vue项目创建好后我们来简单清理和调整一下目录结构让它更符合我们的管理系统的需求。你可以在src目录下看到类似这样的结构src/ ├── assets/ # 静态资源 ├── components/ # 可复用组件 ├── router/ # 路由配置 ├── stores/ # Pinia状态管理 ├── views/ # 页面级组件 ├── App.vue └── main.js接下来我们需要在main.js中全局引入Element Plus和它的样式。// src/main.js import { createApp } from vue import App from ./App.vue import router from ./router import { createPinia } from pinia // 引入Element Plus import ElementPlus from element-plus import element-plus/dist/index.css // 如果使用了图标也需要引入这里以部分图标为例 import * as ElementPlusIconsVue from element-plus/icons-vue const app createApp(App) const pinia createPinia() // 注册所有图标或按需注册 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.use(pinia) app.use(router) app.use(ElementPlus) app.mount(#app)现在运行npm run dev你的第一个Vue 3管理系统骨架就已经在本地跑起来了。2. 核心功能模块开发环境搭好了我们来逐一实现系统的核心功能。我们会从状态管理入手然后构建页面最后将它们连接起来。2.1 使用Pinia构建全局状态管理状态管理是这类应用的核心用户信息、任务队列、历史记录等数据需要在多个组件间共享。我们在src/stores目录下创建几个Store。首先是一个用户Store用于管理登录状态和用户信息。// src/stores/user.js import { defineStore } from pinia import { ref, computed } from vue import { loginApi, getUserInfoApi } from /api/auth // 假设的API export const useUserStore defineStore(user, () { // 状态 const token ref(localStorage.getItem(token) || ) const userInfo ref({}) // 用户信息对象 // Getter (计算属性) const isLoggedIn computed(() !!token.value) const isAdmin computed(() userInfo.value.role admin) // Action (方法) async function login(credentials) { const res await loginApi(credentials) token.value res.data.token userInfo.value res.data.user localStorage.setItem(token, token.value) return res } function logout() { token.value userInfo.value {} localStorage.removeItem(token) } async function fetchUserInfo() { if (!token.value) return const res await getUserInfoApi() userInfo.value res.data } // 暴露给模板使用 return { token, userInfo, isLoggedIn, isAdmin, login, logout, fetchUserInfo } })接着创建一个任务Store用于管理当前用户的任务列表和队列状态。// src/stores/task.js import { defineStore } from pinia import { ref } from vue import { submitTaskApi, getTaskListApi } from /api/task export const useTaskStore defineStore(task, () { const taskList ref([]) // 当前用户的所有任务 const pendingTasks ref([]) // 等待中和运行中的任务 const historyTasks ref([]) // 已完成和失败的任务 async function submitNewTask(taskParams) { // 1. 调用API提交任务 const res await submitTaskApi(taskParams) // 2. 将新任务添加到列表头部 taskList.value.unshift(res.data) // 3. 可以在这里触发轮询更新任务状态后续实现 startPollingTaskStatus(res.data.id) return res } async function fetchTaskList() { const res await getTaskListApi() taskList.value res.data // 简单分类 pendingTasks.value taskList.value.filter(t [pending, running].includes(t.status)) historyTasks.value taskList.value.filter(t [success, failed].includes(t.status)) } // 轮询任务状态简化版 function startPollingTaskStatus(taskId) { const intervalId setInterval(async () { // 调用获取单个任务状态的API // 如果任务完成或失败清除定时器并更新store }, 3000) } return { taskList, pendingTasks, historyTasks, submitNewTask, fetchTaskList } })2.2 基于Vue Router的页面路由设计我们的应用有多个页面路由配置在src/router/index.js中。我们需要设计登录、主页、任务提交、历史画廊、统计等路由。// src/router/index.js import { createRouter, createWebHistory } from vue-router import { useUserStore } from /stores/user const router createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /login, name: login, component: () import(/views/LoginView.vue), meta: { requiresGuest: true } // 只有未登录用户可访问 }, { path: /, name: home, component: () import(/views/HomeView.vue), meta: { requiresAuth: true } // 需要登录 }, { path: /generate, name: generate, component: () import(/views/GenerateView.vue), meta: { requiresAuth: true } }, { path: /gallery, name: gallery, component: () import(/views/GalleryView.vue), meta: { requiresAuth: true } }, { path: /templates, name: templates, component: () import(/views/TemplatesView.vue), meta: { requiresAuth: true } }, { path: /stats, name: stats, component: () import(/views/StatsView.vue), meta: { requiresAuth: true, requiresAdmin: true } // 需要管理员权限 }, ] }) // 全局路由守卫处理权限 router.beforeEach((to, from, next) { const userStore useUserStore() const isLoggedIn userStore.isLoggedIn const isAdmin userStore.isAdmin if (to.meta.requiresAuth !isLoggedIn) { // 需要登录但未登录跳转到登录页 next(/login) } else if (to.meta.requiresGuest isLoggedIn) { // 要求是游客但已登录跳转到首页 next(/) } else if (to.meta.requiresAdmin !isAdmin) { // 需要管理员权限但不是管理员跳转到首页或无权限页面 next(/) } else { // 放行 next() } }) export default router2.3 任务提交与队列管理界面这是用户最常使用的页面。我们使用Element Plus的表单、按钮和表格组件来构建。!-- src/views/GenerateView.vue -- template div classgenerate-page el-page-header backgoBack title返回 template #content span classtext-large font-600 mr-3 提交新任务 /span /template /el-page-header el-row :gutter20 classmt-6 !-- 左侧参数表单 -- el-col :span16 el-card template #header div classcard-header span生成参数/span el-button typeprimary link clicksaveAsTemplate保存为模板/el-button /div /template el-form :modelform label-width100px :rulesrules refformRef el-form-item label提示词 propprompt el-input v-modelform.prompt typetextarea :rows3 placeholder详细描述你想要生成的画面... show-word-limit maxlength500 / /el-form-item el-row :gutter20 el-col :span12 el-form-item label模型 propmodel el-select v-modelform.model placeholder请选择模型 el-option labelZ-Image-Turbo (标准版) valuez-image-turbo / el-option label辉夜巫女 (动漫风格) valuekaguya-miko / /el-select /el-form-item /el-col el-col :span12 el-form-item label图片尺寸 propsize el-select v-modelform.size el-option label512x512 value512x512 / el-option label768x768 value768x768 / el-option label1024x1024 value1024x1024 / /el-select /el-form-item /el-col /el-row el-form-item label生成数量 propbatch_size el-slider v-modelform.batch_size :min1 :max4 show-input / /el-form-item el-form-item el-button typeprimary :loadingsubmitting clicksubmitTask提交生成任务/el-button el-button clickresetForm重置/el-button /el-form-item /el-form /el-card /el-col !-- 右侧任务队列 -- el-col :span8 el-card template #header div classcard-header span任务队列/span el-tag typewarning运行中: {{ runningCount }}/el-tag /div /template div v-ifpendingTasks.length 0 classempty-queue el-empty description暂无进行中的任务 / /div el-timeline v-else el-timeline-item v-fortask in pendingTasks :keytask.id :timestampformatTime(task.created_at) :typegetTaskTimelineType(task.status) placementtop el-card shadowhover pstrongID:/strong {{ task.id.slice(0, 8) }}.../p p classprompt-preview{{ task.prompt }}/p el-tag :typegetTaskTagType(task.status) sizesmall{{ task.statusText }}/el-tag /el-card /el-timeline-item /el-timeline /el-card /el-col /el-row /div /template script setup import { ref, computed, onMounted } from vue import { useRouter } from vue-router import { ElMessage } from element-plus import { useTaskStore } from /stores/task const router useRouter() const taskStore useTaskStore() const formRef ref() const submitting ref(false) // 表单数据 const form ref({ prompt: , model: z-image-turbo, size: 512x512, batch_size: 1, }) // 表单验证规则 const rules { prompt: [{ required: true, message: 请输入提示词, trigger: blur }], model: [{ required: true, message: 请选择模型, trigger: change }], } // 计算属性运行中的任务数量 const runningCount computed(() { return taskStore.pendingTasks.filter(t t.status running).length }) // 获取待处理任务列表 const pendingTasks computed(() taskStore.pendingTasks) onMounted(() { taskStore.fetchTaskList() }) function goBack() { router.push(/) } async function submitTask() { // 表单验证 await formRef.value.validate() submitting.value true try { await taskStore.submitNewTask(form.value) ElMessage.success(任务提交成功已加入队列) // 提交后可以清空表单或跳转 // resetForm() } catch (error) { ElMessage.error(任务提交失败 error.message) } finally { submitting.value false } } function resetForm() { formRef.value.resetFields() } function saveAsTemplate() { // 保存模板的逻辑 ElMessage.info(模板保存功能开发中...) } // 一些工具函数 function formatTime(timestamp) { return new Date(timestamp).toLocaleTimeString() } function getTaskTimelineType(status) { const map { pending: primary, running: warning, success: success, failed: danger } return map[status] || info } function getTaskTagType(status) { const map { pending: info, running: warning, success: success, failed: danger } return map[status] || } /script2.4 历史画廊与参数模板管理历史画廊页面需要展示图片并提供筛选和操作功能。我们使用Element Plus的el-image和el-row/el-col来构建一个瀑布流画廊。!-- src/views/GalleryView.vue (部分代码) -- template div classgallery-page div classfilter-bar el-input v-modelsearchKeyword placeholder搜索提示词... stylewidth: 300px clearable / el-select v-modelselectedModel placeholder所有模型 clearable el-option labelZ-Image-Turbo valuez-image-turbo / el-option label辉夜巫女 valuekaguya-miko / /el-select el-date-picker v-modeldateRange typedaterange range-separator至 start-placeholder开始日期 end-placeholder结束日期 / /div !-- 图片画廊 -- div v-iffilteredList.length 0 classimage-grid el-row :gutter20 el-col v-foritem in filteredList :keyitem.id :xs24 :sm12 :md8 :lg6 classimage-col el-card shadowhover :body-style{ padding: 10px } el-image :srcitem.image_url :preview-src-list[item.image_url] fitcover classgallery-image lazy / div stylepadding: 10px 0; p classimage-prompt{{ truncatePrompt(item.prompt) }}/p div classimage-meta span{{ item.model }}/span span{{ formatDate(item.created_at) }}/span /div div classaction-buttons el-button typeprimary sizesmall clickregenerate(item)再次生成/el-button el-button sizesmall clickdownloadImage(item)下载/el-button /div /div /el-card /el-col /el-row /div el-empty v-else description暂无生成历史 / /div /template script setup import { ref, computed, onMounted } from vue import { useTaskStore } from /stores/task import { ElMessage } from element-plus const taskStore useTaskStore() const searchKeyword ref() const selectedModel ref() const dateRange ref([]) // 计算属性根据筛选条件过滤历史任务 const filteredList computed(() { let list taskStore.historyTasks.filter(t t.status success) if (searchKeyword.value) { list list.filter(t t.prompt.toLowerCase().includes(searchKeyword.value.toLowerCase())) } if (selectedModel.value) { list list.filter(t t.model selectedModel.value) } // 日期筛选逻辑略 return list }) onMounted(() { taskStore.fetchTaskList() }) function truncatePrompt(prompt, length 50) { return prompt.length length ? prompt.substring(0, length) ... : prompt } function formatDate(timestamp) { return new Date(timestamp).toLocaleDateString() } function regenerate(item) { // 将历史任务的参数填充到提交表单并跳转到生成页 ElMessage.info(跳转到生成页并填充参数...) } function downloadImage(item) { // 实现图片下载逻辑 ElMessage.success(开始下载图片...) } /script参数模板管理页面则相对简单主要是一个列表支持创建、编辑、删除和套用模板。3. 数据可视化与项目优化一个完整的管理系统数据可视化能极大提升体验。同时我们也要考虑项目的可维护性和性能。3.1 使用ECharts集成统计图表在统计页面我们使用ECharts来展示用量趋势和模型分布。!-- src/views/StatsView.vue (部分代码) -- template div classstats-page el-row :gutter20 el-col :span12 el-card template #header span月度生成量趋势/span /template div refusageChartRef stylewidth: 100%; height: 300px;/div /el-card /el-col el-col :span12 el-card template #header span模型使用分布/span /template div refmodelChartRef stylewidth: 100%; height: 300px;/div /el-card /el-col /el-row /div /template script setup import { ref, onMounted, onUnmounted } from vue import * as echarts from echarts const usageChartRef ref() const modelChartRef ref() let usageChart null let modelChart null onMounted(() { // 初始化图表 usageChart echarts.init(usageChartRef.value) modelChart echarts.init(modelChartRef.value) // 模拟数据 const usageOption { xAxis: { type: category, data: [1月, 2月, 3月, 4月, 5月, 6月] }, yAxis: { type: value }, series: [{ data: [120, 200, 150, 80, 70, 110], type: line }] } const modelOption { tooltip: { trigger: item }, series: [ { type: pie, radius: 50%, data: [ { value: 335, name: Z-Image-Turbo }, { value: 310, name: 辉夜巫女 }, ], } ] } usageChart.setOption(usageOption) modelChart.setOption(modelOption) // 监听窗口变化重绘图表 window.addEventListener(resize, handleResize) }) onUnmounted(() { window.removeEventListener(resize, handleResize) usageChart?.dispose() modelChart?.dispose() }) function handleResize() { usageChart?.resize() modelChart?.resize() } /script3.2 项目结构与代码组织建议随着功能增多良好的代码组织至关重要。这里有一些建议API请求统一管理在src/api目录下按模块创建文件如auth.js,task.js,template.js使用Axios实例并配置拦截器处理token和错误。组件按需引入对于Element Plus可以使用按需导入来减小打包体积。环境变量在项目根目录创建.env.development和.env.production文件管理不同环境的后端API地址。工具函数将日期格式化、字符串截断等常用函数放在src/utils目录下。样式管理可以使用Sass/Scss并将全局样式、变量定义在src/assets/styles目录中。3.3 部署与后续迭代思路开发完成后你可以使用npm run build命令来构建生产版本。生成的dist目录可以部署到任何静态文件服务器如Nginx、Apache或云服务商的对象存储。后续迭代可以考虑加入更多功能WebSocket实时通知当任务状态变化时主动推送消息给前端替代轮询。图片高级筛选与标签为用户生成的图片打上AI自动生成的标签方便搜索。团队协作功能支持创建项目组共享任务队列和画廊。性能优化对于历史画廊实现图片懒加载和虚拟滚动应对大量数据。4. 总结走完这一趟一个功能清晰的Z-Image-Turbo-辉夜巫女模型管理系统前端部分就初具雏形了。整个过程下来Vue 3的组合式API让逻辑组织变得非常清晰Pinia管理状态也比以前更轻快Element Plus则帮我们省去了大量重复的UI开发工作。这个项目麻雀虽小但五脏俱全涵盖了现代前端单页面应用SPA的核心概念路由、状态管理、组件化、API交互和数据可视化。你可以把它当作一个模板根据实际的后端API接口进行调整和扩展。比如任务状态轮询可以升级为WebSocket实现真正的实时更新画廊的图片加载也可以加入懒加载优化体验。最重要的是通过亲手搭建这样一个与实际业务场景紧密结合的项目你对Vue技术栈的理解会从“知道怎么用”深入到“知道怎么用好”。接下来你可以尝试连接真实的后端服务或者为它添加更多你感兴趣的功能模块。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
