Stooland Docs

Appearance

项目总览与架构说明（迁移自 web/README.md） ​

本项目是一个基于 Vue 3 + Vite 的管理与创作平台，核心能力包括素材管理、文章管理、系统设置，以及 AIGC 分镜创作与生成任务编排。本文档从技术架构与功能架构两个维度清晰阐述项目整体设计，并提供快速开始与配置指南。

开发环境注意事项 ​

npm 执行错误解决方案 ​

如果遇到以下错误：

Error: Cannot find module @rollup/rollup-darwin-x64. npm has a bug related to optional dependencies ( https://github.com/npm/cli/issues/4828 )

解决方法：

  • 删除 package-lock.json 与 node_modules 目录
  • 重新执行 npm i

或使用 yarn 解决：

yarn add @dcloudio/uts-darwin-x64 --ignore-platform

技术架构 ​

  • 前端框架：Vue 3、Vue Router、Vuex、Element Plus、vue-i18n
  • 构建与开发：Vite，支持 dev/build/preview 脚本
  • 样式与资源：SCSS 全局样式、Tailwind（按需）、iconfont、normalize.css
  • 权限与导航：路由动态加载、角色鉴权、登录态校验、nprogress 交互
  • 媒资与上传：阿里云 OSS、七牛、内置上传组件与富文本上传适配
  • AIGC 能力：分镜生成（LLM/Ark）、视频合成编排（ICE 工作流接口与前端编排）、语音合成（Azure/GSV）
  • 工具与集成：常用工具页、OSS 管理器、Iconfont 对照表

代码入口与核心模块：

  • src/main.js：应用初始化，注册路由、状态、国际化与 Element Plus 组件
  • src/router/index.js：静态/动态路由与模块导航，包含素材、文章、AIGC、设置、工具等子路由
  • src/permission.js：路由守卫、角色鉴权、开发模式降级与最近访问记录
  • src/store/：状态管理（用户、权限、设置等）
  • src/views/：各业务页面与 AIGC 分镜组件

功能架构 ​

控制台与通用页面 ​

  • dashboard：概览与快捷入口
  • profile/message/log/setting：个人信息、消息中心、操作日志、系统设置

素材管理（src/views/material/） ​

  • Type.vue：素材类型管理
  • Creation.vue：作品库管理
  • Topic.vue：素材主题与话题配置（含提示词/AI设定）
  • Image.vue：图片素材上传、转存、合规检查、检索与分页
  • 统一的表格、搜索、分页交互与上传适配（阿里云/七牛/本地）

文章管理（src/views/article/） ​

  • 列表与分类管理，集成富文本编辑与图片上传

AIGC 分镜与生成任务（src/views/aigc/） ​

  • component/StoryBoard.vue：分镜管理与配置，调用 LLM 生成分镜；清洗台词、保存与下载
  • component/StoryBoardItem.vue：分镜项编辑（标题、描述、台词、人物、特效、提示词、媒体素材）
  • component/components/VideoSynthesis.vue：前端编排合成流程（素材上传、工程创建、任务提交与状态查询、下载）
  • component/components/VoiceDialog.vue：语音合成（GSV/Azure）对话框与试听导出
  • aigc/Mission.vue：生成任务管理与进度查看
  • aigc/Train.vue：智能体训练与集成

系统设置与工具 ​

  • setting/User.vue、setting/Role.vue、setting/Access.vue：用户与角色权限管理
  • tool/index.vue、tool/OssManager.vue、tool/IconfontCatalog.vue、tool/HTMLImageExtractor.vue：常用工具与 OSS 文件管理

关键能力与接口映射 ​

分镜生成（LLM） ​

  • 接口：src/api/volcengine-api.js（sendMessagesArk 等）
  • 组件：src/views/aigc/component/StoryBoard.vue 调用 LLM 并生成统一 JSON 结构分镜数据
  • 数据结构（建议统一）：{ title, description, line, name, effect, prompt, videoUrl, audioUrl, thumbUrl }

视频合成编排（ICE/工作流） ​

  • 接口：src/api/aigc.js（上传、工程创建、任务提交、状态查询、预签名下载）
  • 组件：src/views/aigc/component/components/VideoSynthesis.vue 执行端到端流程并下载结果

语音合成（TTS） ​

  • Azure：src/api/azure-speech-api.js、src/utils/azure-speech-sdk.js、src/views/aigc/component/components/VoiceGeneraterAzure.vue
  • GSV：src/utils/gsv-lib.js、src/views/aigc/component/components/VoiceGeneraterGsv.vue
  • 统一入口：src/views/aigc/component/components/VoiceDialog.vue

上传与媒资 ​

  • 七牛：src/utils/sdk/qiniu.js
  • 阿里 OSS：src/utils/ali-oss.js（若存在）与上传组件 src/components/Upload/
  • 富文本与附件：src/api/common-api.js、src/views/article/index.vue

快速开始 ​

环境准备 ​

  • Node.js 18+，npm 或 yarn
  • 配置必要的环境变量（见下文）

安装与启动 ​

  • 安装依赖：npm i
  • 开发启动：npm run dev（默认本地开发环境，支持 DEV 降级鉴权预览）
  • 生产构建：npm run build
  • 本地预览构建产物：npm run preview

配置指南（环境变量） ​

通用后端与上传：

  • VITE_BASE_API：后端 API 基地址
  • VITE_UPLOAD_PATH：上传路径（与后端约定）
  • UPLOAD_FORM_NAME：上传表单字段名（用于通用上传组件）
  • API_HOST：资源访问根路径（富文本/附件）

对象存储与图片服务：

  • VITE_QINIU_IMAGE_HOST：七牛图片访问域名
  • 可选：QINIU_IMAGE_HOST_PUBLIC（公共访问域，用于生成缩略图）

AIGC/智能体与外部服务：

  • VITE_DID_API.url、DID_API.url 与 DID_API.key：DID 服务地址与授权

Azure 语音合成：

  • VITE_AZURE_AUDIO_KEY：Azure 语音密钥
  • VITE_AZURE_AUDIO_AREA：Azure 区域（例如 eastasia）
  • VITE_AZURE_AUDIO_URL（可选）：自定义端点；为空则按区域生成默认端点

其他：

  • VITE_NODE_ENV：用于判断是否开发环境
  • 运行时 import.meta.env.DEV 用于权限降级与演示模式

分镜功能设计与实现概述 ​

（以下保留原文内容，略）