Spaces:

Bread-F
/

Intelligent-Medical-Guidance-Large-Model

Running

App Files Files Community

FAYO commited on 13 days ago

Commit

77b0e0f

1 Parent(s): 460d4ca

model

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

docker/Dockerfile +25 -0
frontend/.env +1 -0
frontend/.eslintrc.cjs +15 -0
frontend/.gitignore +30 -0
frontend/.prettierrc.json +8 -0
frontend/env.d.ts +1 -0
frontend/index.html +13 -0
frontend/package-lock.json +0 -0
frontend/package.json +50 -0
frontend/public/favicon.ico +0 -0
frontend/src/App.vue +11 -0
frontend/src/api/base.ts +16 -0
frontend/src/api/dashboard.ts +29 -0
frontend/src/api/digitalHuman.ts +12 -0
frontend/src/api/llm.ts +28 -0
frontend/src/api/product.ts +120 -0
frontend/src/api/streamerInfo.ts +87 -0
frontend/src/api/streamingRoom.ts +253 -0
frontend/src/api/system.ts +18 -0
frontend/src/api/user.ts +56 -0
frontend/src/assets/github.svg +1 -0
frontend/src/assets/logo.png +0 -0
frontend/src/components/AslideComponent.vue +132 -0
frontend/src/components/BarChartComponent.vue +64 -0
frontend/src/components/BreadCrumb.vue +35 -0
frontend/src/components/FileUpload.vue +169 -0
frontend/src/components/InfoDialogComponents.vue +328 -0
frontend/src/components/LineChartComponent.vue +127 -0
frontend/src/components/MessageComponent.vue +88 -0
frontend/src/components/NavbarComponent.vue +78 -0
frontend/src/components/StreamerInfoComponent.vue +231 -0
frontend/src/components/VideoComponent.vue +103 -0
frontend/src/layouts/BaseLayout.vue +41 -0
frontend/src/main.ts +29 -0
frontend/src/router/index.ts +183 -0
frontend/src/stores/userToken.ts +26 -0
frontend/src/style/index.scss +17 -0
frontend/src/utils/navbar.ts +4 -0
frontend/src/views/digital-human/DigitalHumanEditDialogView.vue +96 -0
frontend/src/views/digital-human/DigitalHumanView.vue +155 -0
frontend/src/views/error/NotFound.vue +7 -0
frontend/src/views/home/HomeView.vue +160 -0
frontend/src/views/login/LoginView.vue +170 -0
frontend/src/views/order/OrderView.vue +90 -0
frontend/src/views/product/ProductEditView.vue +284 -0
frontend/src/views/product/ProductListView.vue +250 -0
frontend/src/views/streaming/StreamingOnAirView.vue +433 -0
frontend/src/views/streaming/StreamingRoomListView.vue +160 -0
frontend/src/views/streaming/StreamingRoomeEditView.vue +544 -0
frontend/src/views/system/SystemPluginsView.vue +89 -0

docker/Dockerfile ADDED Viewed

	@@ -0,0 +1,25 @@

+FROM pytorch/pytorch:2.1.2-cuda12.1-cudnn8-devel
+LABEL MAINTAINER="HinGwen.Wong"
+# 设置时区
+RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && \
+    echo 'Asia/Shanghai' > /etc/timezone
+# 切换阿里源并安装必须的系统库
+RUN sed -i s/archive.ubuntu.com/mirrors.aliyun.com/g /etc/apt/sources.list \
+    && sed -i s/security.ubuntu.com/mirrors.aliyun.com/g /etc/apt/sources.list \
+    && apt-get update -y \
+    && apt-get install -y --no-install-recommends wget git libgl1 libglib2.0-0 unzip libpq-dev \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+COPY . /workspace/Streamer-Sales
+WORKDIR /workspace/Streamer-Sales
+ENV HF_ENDPOINT="https://hf-mirror.com"
+ENV LANG="en_US.UTF-8"
+# 安装必备依赖环境
+RUN pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple \
+    && pip install --no-cache-dir -r requirements.txt

frontend/.env ADDED Viewed

	@@ -0,0 +1 @@


1	+ VITE_BASE_SERVER_URL = 'http://127.0.0.1:8000/api/v1'

frontend/.eslintrc.cjs ADDED Viewed

	@@ -0,0 +1,15 @@

+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

frontend/.gitignore ADDED Viewed

	@@ -0,0 +1,30 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+/cypress/videos/
+/cypress/screenshots/
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.tsbuildinfo

frontend/.prettierrc.json ADDED Viewed

	@@ -0,0 +1,8 @@

+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

frontend/env.d.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ /// <reference types="vite/client" />

frontend/index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>销冠——卖货主播大模型</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

frontend/package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

frontend/package.json ADDED Viewed

	@@ -0,0 +1,50 @@

+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@vueuse/core": "^11.0.1",
+    "axios": "^1.7.7",
+    "echarts": "^5.5.1",
+    "element-plus": "^2.7.8",
+    "md-editor-v3": "^4.18.1",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "sass": "^1.77.8",
+    "vue": "^3.4.29",
+    "vue-router": "^4.3.3",
+    "xgplayer": "^3.0.19"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^20.14.5",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "jsdom": "^24.1.0",
+    "npm-run-all2": "^6.2.0",
+    "prettier": "^3.2.5",
+    "typescript": "~5.4.0",
+    "vite": "^5.3.1",
+    "vite-plugin-vue-devtools": "^7.3.1",
+    "vitest": "^1.6.0",
+    "vue-tsc": "^2.0.21"
+  }
+}

frontend/public/favicon.ico ADDED Viewed

frontend/src/App.vue ADDED Viewed

	@@ -0,0 +1,11 @@

+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+<style lang="scss" scoped></style>

frontend/src/api/base.ts ADDED Viewed

	@@ -0,0 +1,16 @@

+import axios from 'axios'
+const request_handler = axios.create({
+  // baseURL: import.meta.env.BASE_SERVER_URL
+})
+interface ResultPackage<T> {
+  success: boolean
+  code: number
+  message: string
+  data: T
+  timestamp: number
+}
+export { request_handler }
+export { type ResultPackage }

frontend/src/api/dashboard.ts ADDED Viewed

	@@ -0,0 +1,29 @@

+import { request_handler, type ResultPackage } from '@/api/base'
+interface DashboardItem {
+  registeredBrandNum: number //入驻品牌方
+  productNum: number //商品数
+  dailyActivity: number //日活
+  todayOrder: number //订单量
+  totalSales: number //销售额
+  conversionRate: number //转化率
+  orderNumList: number[] // 订单量
+  totalSalesList: number[] // 销售额
+  newUserList: number[] // 新增用户
+  activityUserList: number[] // 活跃用户
+  knowledgeBasesNum: number // 知识库数量
+  digitalHumanNum: number // 数字人数量
+  LiveRoomNum: number // 直播间数量
+}
+// 获取主控大屏信息
+const getDashboardInfoRequest = () => {
+  return request_handler<ResultPackage<DashboardItem>>({
+    method: 'GET',
+    url: '/dashboard'
+  })
+}
+export { getDashboardInfoRequest, type DashboardItem }

frontend/src/api/digitalHuman.ts ADDED Viewed

	@@ -0,0 +1,12 @@

+import { request_handler } from '@/api/base'
+// 生成数字人视频接口
+const genDigitalHuamnVideoRequest = (streamerId_: number, salesDoc_: string) => {
+  return request_handler({
+    method: 'POST',
+    url: '/digital-human/gen',
+    data: { streamerId: streamerId_, salesDoc: salesDoc_ }
+  })
+}
+export { genDigitalHuamnVideoRequest }

frontend/src/api/llm.ts ADDED Viewed

	@@ -0,0 +1,28 @@

+import { request_handler, type ResultPackage } from '@/api/base'
+import { header_authorization } from '@/api/user'
+// 获取后端主播信息
+const genSalesDocRequest = (productId: number, streamerId: number) => {
+  return request_handler<ResultPackage<string>>({
+    method: 'GET',
+    url: '/llm/gen_sales_doc',
+    params: { streamer_id: streamerId, product_id: productId },
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 使用说明书总结生成商品信息接口
+const genProductInfoByLlmRequest = (productId: number) => {
+  return request_handler({
+    method: 'GET',
+    url: '/llm/gen_product_info',
+    params: { product_id: productId },
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+export { genSalesDocRequest, genProductInfoByLlmRequest }

frontend/src/api/product.ts ADDED Viewed

	@@ -0,0 +1,120 @@

+import { request_handler, type ResultPackage } from '@/api/base'
+import type { StreamerInfo } from '@/api/streamerInfo'
+import { header_authorization } from '@/api/user'
+// 调用商品信息接口数据结构定义
+type ProductListType = {
+  currentPage?: number // 当前页号
+  pageSize?: number // 每页记录数
+  productName?: string // 商品名称
+  product_class?: string // 商品分类
+}
+interface ProductItem {
+  user_id: number // User 识别号，用于区分不用的用户
+  request_id: string // 请求 ID
+  product_id: number
+  product_name: string
+  product_class: string
+  heighlights: string
+  image_path: string
+  instruction: string
+  departure_place: string
+  delivery_company: string
+  selling_price: number
+  amount: number
+  upload_date: string
+  delete: boolean
+}
+interface ProductData {
+  product_list: ProductItem[]
+  currentPage: number
+  pageSize: number
+  totalSize: number
+}
+// 查询接口
+const productListRequest = (params_: ProductListType) => {
+  return request_handler<ResultPackage<ProductData>>({
+    method: 'GET',
+    url: '/products/list',
+    params: params_,
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 查询指定商品的信息接口
+const getProductByIdRequest = async (productId: string) => {
+  return request_handler<ResultPackage<ProductItem>>({
+    method: 'GET',
+    url: `/products/info/${productId}`,
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 添加或者更新商品接口
+const productCreadeOrEditRequest = (params: ProductItem) => {
+  if (params.product_id === 0) {
+    // 新增商品
+    return request_handler<ResultPackage<ProductData>>({
+      method: 'POST', // 新增
+      url: '/products/create',
+      data: params,
+      headers: {
+        Authorization: header_authorization.value
+      }
+    })
+  } else {
+    // 修改商品
+    return request_handler<ResultPackage<ProductData>>({
+      method: 'PUT', // 新增
+      url: `/products/edit/${params.product_id}`,
+      data: params,
+      headers: {
+        Authorization: header_authorization.value
+      }
+    })
+  }
+}
+// 删除商品接口
+const deleteProductByIdRequest = async (productId: number) => {
+  return request_handler<ResultPackage<string>>({
+    method: 'DELETE',
+    url: `/products/delete/${productId}`,
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 根据 ID 获取说明书内容
+const genProductInstructionContentRequest = (instructionPath_: string) => {
+  // TODO 后续直接使用 axios 获取
+  return request_handler({
+    method: 'POST',
+    url: '/products/instruction',
+    data: { instructionPath: instructionPath_ },
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+export {
+  type ProductItem,
+  type StreamerInfo,
+  type ProductListType,
+  type ProductData,
+  productListRequest,
+  productCreadeOrEditRequest,
+  getProductByIdRequest,
+  deleteProductByIdRequest,
+  genProductInstructionContentRequest
+}

frontend/src/api/streamerInfo.ts ADDED Viewed

	@@ -0,0 +1,87 @@

+import { request_handler, type ResultPackage } from '@/api/base'
+import { header_authorization } from '@/api/user'
+interface StreamerInfo {
+  user_id: number
+  streamer_id: number
+  name: string
+  value: string
+  character: string
+  avatar: string
+  tts_weight_tag: string
+  tts_reference_audio: string
+  tts_reference_sentence: string
+  poster_image: string
+  base_mp4_path: string
+  delete: boolean
+}
+// 获取后端主播信息
+const streamerInfoListRequest = () => {
+  return request_handler<ResultPackage<StreamerInfo[]>>({
+    method: 'GET',
+    url: '/streamer/list',
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 获取特定主播信息
+const streamerDetailInfoRequest = (streamerId: number) => {
+  return request_handler<ResultPackage<StreamerInfo>>({
+    method: 'GET',
+    url: `/streamer/info/${streamerId}`,
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 更新特定主播信息
+const streamerEditDetailRequest = async (streamerItem: StreamerInfo) => {
+  if (typeof streamerItem.streamer_id != 'number' || streamerItem.streamer_id === 0) {
+    // 新建
+    console.info(streamerItem)
+    return request_handler<ResultPackage<number>>({
+      method: 'POST',
+      url: '/streamer/create',
+      data: streamerItem,
+      headers: {
+        Authorization: header_authorization.value
+      }
+    })
+  } else {
+    return request_handler<ResultPackage<number>>({
+      method: 'PUT',
+      url: `/streamer/edit/${streamerItem.streamer_id}`,
+      data: streamerItem,
+      headers: {
+        Authorization: header_authorization.value
+      }
+    })
+  }
+}
+// 删除特定主播信息
+const deleteStreamerByIdRequest = (streamerId: number) => {
+  return request_handler<ResultPackage<string>>({
+    method: 'DELETE',
+    url: `/streamer/delete/${streamerId}`,
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+export {
+  type StreamerInfo,
+  streamerInfoListRequest,
+  streamerDetailInfoRequest,
+  streamerEditDetailRequest,
+  deleteStreamerByIdRequest
+}

frontend/src/api/streamingRoom.ts ADDED Viewed

	@@ -0,0 +1,253 @@

+import { request_handler, type ResultPackage } from '@/api/base'
+import type { StreamerInfo, ProductItem } from '@/api/product'
+import { header_authorization } from '@/api/user'
+interface StreamingRoomProductList {
+  product_id: number
+  product_info: ProductItem
+  start_time: string
+  sales_doc: string
+  start_video: string
+  selected: boolean
+}
+interface messageItem {
+  role: string
+  userId: number
+  userName: string
+  avatar: string
+  message: string
+  send_time: string
+}
+interface StreamingRoomStatusItem {
+  streamerInfo: StreamerInfo
+  conversation: messageItem[]
+  currentProductInfo: ProductItem
+  currentStreamerVideo: string
+  currentProductIndex: number
+  start_time: string
+  currentPoductStartTime: string
+  finalProduct: boolean
+  live_status: number
+}
+interface StreamingRoomInfo {
+  room_id: number
+  room_poster: string
+  name: string
+  streamer_id: number
+  background_image: string
+  prohibited_words_id: number
+  product_list: StreamingRoomProductList[]
+  streamer_info: StreamerInfo
+  status: StreamingRoomStatusItem
+}
+interface RoomProductData {
+  currentPage: number
+  pageSize: number
+  totalSize: number
+  product_list: StreamingRoomProductList[]
+}
+interface RoomProductItem {
+  name: string
+  id: number
+  image_path: string
+  sales_doc: string
+  start_video: string
+  start_time: string
+  selected: boolean
+  heighlights: string
+  selling_price: number
+}
+interface RoomDetailItem {
+  currentPage: number
+  pageSize: number
+  totalSize: number
+  product_list: StreamingRoomProductList[]
+  streamer_info: StreamerInfo
+  room_id: number
+  name: string
+  room_poster: string
+  streamer_id: number
+  background_image: string
+  prohibited_words_id: number
+  status: StreamingRoomStatusItem
+}
+// 获取后端主播信息
+const streamerRoomListRequest = () => {
+  return request_handler<ResultPackage<StreamingRoomInfo[]>>({
+    method: 'GET',
+    url: '/streaming-room/list',
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 获取特定直播间的详情
+const roomDetailRequest = (roomId_: string, currentPage_: number, pageSize_: number) => {
+  return request_handler<ResultPackage<RoomDetailItem>>({
+    method: 'GET',
+    url: `/streaming-room/info/${roomId_}`,
+    params: { currentPage: currentPage_, pageSize: pageSize_ },
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 添加商品的时候，获取所有商品，内含选中商品
+const roomPorductAddListRequest = (roomId_: number, currentPage_: number, pageSize_: number) => {
+  return request_handler<ResultPackage<RoomProductData>>({
+    method: 'GET',
+    url: `/streaming-room/product-edit-list/${roomId_}`,
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 添加或者更新直播间接口
+const RoomCreadeOrEditRequest = async (params: RoomDetailItem) => {
+  if (params.room_id === 0) {
+    // 新建
+    return request_handler<ResultPackage<number>>({
+      method: 'POST',
+      url: '/streaming-room/create',
+      data: params,
+      headers: {
+        Authorization: header_authorization.value
+      }
+    })
+  } else {
+    // 编辑
+    return request_handler<ResultPackage<number>>({
+      method: 'PUT',
+      url: `/streaming-room/edit/${params.room_id}`,
+      data: params,
+      headers: {
+        Authorization: header_authorization.value
+      }
+    })
+  }
+}
+// 获取直播间实时信息：主播目前的视频地址，目前讲述的商品信息，聊天信息
+const onAirRoomStartRequest = (roomId_: number) => {
+  return request_handler<ResultPackage<StreamingRoomStatusItem>>({
+    method: 'POST',
+    url: `/streaming-room/online/${roomId_}`,
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 获取直播间实时信息：主播目前的视频地址，目前讲述的商品信息，聊天信息
+const onAirRoomInfoRequest = (roomId: number) => {
+  return request_handler<ResultPackage<StreamingRoomStatusItem>>({
+    method: 'GET',
+    url: `/streaming-room/live-info/${roomId}`,
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 用户发起对话
+const onAirRoomChatRequest = async (roomId_: number, message_: string) => {
+  return request_handler<ResultPackage<messageItem>>({
+    method: 'PUT',
+    url: '/streaming-room/chat',
+    data: { roomId: roomId_, message: message_ },
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 下一个商品
+const onAirRoomNextProductRequest = async (roomId_: number) => {
+  return request_handler<ResultPackage<StreamingRoomStatusItem>>({
+    method: 'POST',
+    url: `/streaming-room/next-product/${roomId_}`,
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 删除特定直播间信息
+const deleteStreamingRoomByIdRequest = (roomId: number) => {
+  return request_handler<ResultPackage<string>>({
+    method: 'DELETE',
+    url: `/streaming-room/delete/${roomId}`,
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 发送浏览器录音音频文件到服务器，用于 ASR
+const sendAudioToServer = async (blob: Blob) => {
+  const formData = new FormData()
+  formData.append('file', blob, 'recording.webm')
+  return request_handler<ResultPackage<string>>({
+    method: 'POST',
+    url: '/upload/file',
+    data: formData,
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 获取 ASR 结果
+const genAsrResult = async (roomId_: number, asrFileUrl_: string) => {
+  return request_handler<ResultPackage<string>>({
+    method: 'POST',
+    url: '/streaming-room/asr',
+    data: { roomId: roomId_, asrFileUrl: asrFileUrl_ },
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+// 下播
+const streamRoomOffline = (roomId_: number) => {
+  return request_handler<ResultPackage<string>>({
+    method: 'PUT',
+    url: `/streaming-room/offline/${roomId_}`,
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+export {
+  type StreamingRoomInfo,
+  type RoomProductItem,
+  type RoomProductData,
+  type RoomDetailItem,
+  type StreamingRoomStatusItem,
+  type StreamingRoomProductList,
+  streamerRoomListRequest,
+  roomDetailRequest,
+  roomPorductAddListRequest,
+  RoomCreadeOrEditRequest,
+  onAirRoomInfoRequest,
+  onAirRoomChatRequest,
+  onAirRoomNextProductRequest,
+  deleteStreamingRoomByIdRequest,
+  sendAudioToServer,
+  streamRoomOffline,
+  genAsrResult,
+  onAirRoomStartRequest
+}

frontend/src/api/system.ts ADDED Viewed

	@@ -0,0 +1,18 @@

+import { request_handler, type ResultPackage } from '@/api/base'
+interface SystemPluginsInfo {
+  plugin_name: string
+  describe: string
+  avatar_color: string
+  enabled: boolean
+}
+// 删除特定主播信息
+const getSystemPluginsInfoRequest = () => {
+  return request_handler<ResultPackage<SystemPluginsInfo[]>>({
+    method: 'GET',
+    url: '/plugins_info'
+  })
+}
+export { type SystemPluginsInfo, getSystemPluginsInfoRequest }

frontend/src/api/user.ts ADDED Viewed

	@@ -0,0 +1,56 @@

+import { computed } from 'vue'
+import { request_handler, type ResultPackage } from '@/api/base'
+import { type TokenItem, useTokenStore } from '@/stores/userToken'
+// 调用登录接口数据结构定义
+type loginFormType = {
+  username: string
+  password: string
+  vertify_code?: string
+}
+interface UserInfo {
+  user_id: number
+  username: string
+  avatar: string
+  email: string
+  create_time: string
+}
+// pinia 保存的 token
+const tokenStore = useTokenStore()
+// jwt
+const header_authorization = computed(() => {
+  console.log('Update token')
+  return `${tokenStore.token.token_type} ${tokenStore.token.access_token}`
+})
+// 登录接口
+const loginRequest = (loginForm: loginFormType) => {
+  const formData = new FormData()
+  formData.append('username', loginForm.username)
+  formData.append('password', loginForm.password)
+  return request_handler<TokenItem>({
+    method: 'POST',
+    url: '/user/login',
+    data: formData,
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    }
+  })
+}
+// 获取用户信息接口
+const getUserInfoRequest = async () => {
+  return request_handler<ResultPackage<UserInfo>>({
+    method: 'GET',
+    url: '/user/me',
+    headers: {
+      Authorization: header_authorization.value
+    }
+  })
+}
+export { loginRequest, header_authorization, getUserInfoRequest, type UserInfo }

frontend/src/assets/github.svg ADDED Viewed

frontend/src/assets/logo.png ADDED Viewed

frontend/src/components/AslideComponent.vue ADDED Viewed

	@@ -0,0 +1,132 @@

+<script lang="ts" setup>
+import { Menu as Present, User, Mic, Setting, House, ShoppingCart } from '@element-plus/icons-vue'
+import { useRoute } from 'vue-router'
+import { isCollapse } from '@/utils/navbar'
+const route = useRoute()
+</script>
+<template>
+  <div>
+    <el-aside>
+      <el-menu :router="true" :default-active="route.fullPath" :collapse="isCollapse">
+        <!-- logo -->
+        <div class="logo">
+          <a herf="/">
+            <img src="@/assets/logo.png" alt="" />
+          </a>
+        </div>
+        <div class="logo">
+          <h1>销冠 - AI 卖货主播大模型</h1>
+        </div>
+        <div class="logo" style="line-height: 0">
+          <a href="https://github.com/PeterH0323/Streamer-Sales">
+            <img src="@/assets/github.svg" alt="github repo" class="github-img" />
+          </a>
+        </div>
+        <el-menu-item index="/home">
+          <el-icon> <House /> </el-icon> <span>首页</span>
+        </el-menu-item>
+        <el-sub-menu index="/product">
+          <template #title>
+            <el-icon> <present /> </el-icon><span>商品管理</span>
+          </template>
+          <el-menu-item index="/product/list"><span>商品列表</span></el-menu-item>
+        </el-sub-menu>
+        <el-sub-menu index="/digital_human">
+          <template #title>
+            <el-icon> <User /> </el-icon><span>数字人管理</span>
+          </template>
+          <el-menu-item index="/digital_human/list"><span>角色管理</span></el-menu-item>
+        </el-sub-menu>
+        <el-sub-menu index="/streaming">
+          <template #title>
+            <el-icon> <Mic /> </el-icon><span>直播管理</span>
+          </template>
+          <el-menu-item index="/streaming/overview">直播间管理<span></span></el-menu-item>
+        </el-sub-menu>
+        <el-sub-menu index="/order">
+          <template #title>
+            <el-icon> <ShoppingCart /> </el-icon><span>订单管理</span>
+          </template>
+          <el-menu-item index="/order/overview"><span>订单总览</span></el-menu-item>
+        </el-sub-menu>
+        <el-sub-menu index="/system">
+          <template #title>
+            <el-icon> <setting /> </el-icon><span>系统配置</span>
+          </template>
+          <el-menu-item index="/system/plugins"><span>组件状态</span></el-menu-item>
+        </el-sub-menu>
+      </el-menu>
+    </el-aside>
+  </div>
+</template>
+<style lang="scss" scoped>
+// logo 样式
+.logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // text-decoration: none;
+  color: #000000;
+  h1 {
+    font-size: 15px;
+  }
+  img {
+    width: 50px;
+    height: 50px;
+  }
+  .github-img {
+    width: 30px;
+    height: 30px;
+  }
+}
+/* 菜单样式 */
+.el-menu {
+  width: 200px;
+  background-color: #ffffff;
+  border-right: none; // 右边边界线取消
+  // 折叠侧边栏样式
+  // &.el-menu--collapse -> el-menu.el-menu--collapse
+  &.el-menu--collapse {
+    width: 60px; // 将宽度变小
+    & h1 {
+      display: none; // 折叠的时候隐藏 logo 隔壁的 h1 文字
+    }
+  }
+}
+/* 设置选中菜单项的背景色 */
+.el-menu-item.is-active {
+  background-color: #337ecc !important;
+  color: #ffffff;
+  /* 圆角的半径 */
+  border-radius: 10px;
+}
+/* 修改菜单项的形状 */
+.el-menu-item {
+  border-radius: 10px; /* 例如，增加圆角 */
+  background-color: #ffffff;
+}
+/* 在 hover 状态下应用 */
+.el-menu-item:hover {
+  border-radius: 10px; /* 保持一致的圆角 */
+  background-color: #dedfe0;
+}
+/* 侧边栏样式配置 */
+.el-aside {
+  background-color: #ffffff;
+  height: 98.5vh;
+  width: auto;
+}
+</style>

frontend/src/components/BarChartComponent.vue ADDED Viewed

	@@ -0,0 +1,64 @@

+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+// 创建一个引用来存储图表的 DOM 容器
+const chartRef = ref(null)
+const props = defineProps({
+  knowledgeBasesNum: {
+    type: Number,
+    default: 0
+  },
+  digitalHumanNum: {
+    type: Number,
+    default: 0
+  },
+  LiveRoomNum: {
+    type: Number,
+    default: 0
+  }
+})
+// 初始化图表的函数
+const initChart = () => {
+  const chart = echarts.init(chartRef.value)
+  // 配置图表的选项
+  const option = {
+    title: {
+      text: '系统配置'
+    },
+    tooltip: {},
+    xAxis: {
+      data: ['知识库数量', '数字人数量', '直播间数量']
+    },
+    yAxis: {},
+    series: [
+      {
+        name: '数量',
+        type: 'bar',
+        data: [props.knowledgeBasesNum, props.digitalHumanNum, props.LiveRoomNum]
+      }
+    ]
+  }
+  // 使用设置的配置项渲染图表
+  chart.setOption(option)
+}
+// 在组件挂载后初始化图表
+onMounted(() => {
+  initChart()
+})
+</script>
+<template>
+  <div ref="chartRef" style="width: auto; height: 400px"></div>
+</template>
+<style scoped>
+/* 可以根据需要调整图表容器的样式 */
+</style>

frontend/src/components/BreadCrumb.vue ADDED Viewed

	@@ -0,0 +1,35 @@

+<script setup lang="ts">
+import { useRoute, useRouter, type RouteRecordNormalized, type RouteLocationRaw } from 'vue-router'
+const route = useRoute()
+const router = useRouter()
+const handleLink = (item: RouteRecordNormalized) => {
+  const { redirect, name, path } = item
+  if (redirect) {
+    router.push(redirect as RouteLocationRaw)
+  } else {
+    if (name) {
+      router.push({ name })
+    } else {
+      router.push({ path })
+    }
+  }
+}
+</script>
+<template>
+  <el-breadcrumb separator="/">
+    <el-breadcrumb-item
+      v-for="(item, index) in route.matched"
+      :key="index"
+      :to="{ path: item.path }"
+    >
+      <a @click.prevent="handleLink(item)">
+        {{ item.meta.title }}
+      </a>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+<style lang="scss" scoped></style>

frontend/src/components/FileUpload.vue ADDED Viewed

	@@ -0,0 +1,169 @@

+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import { ElMessage, type UploadProps, type UploadProgressEvent } from 'element-plus'
+import { Plus, Document } from '@element-plus/icons-vue'
+import { header_authorization } from '@/api/user'
+// 定义组件入参
+const props = defineProps({
+  fileType: {
+    type: String,
+    default: 'image'
+  }
+})
+// 定义 和父组件通信的双向绑定 model
+const modelFilePath = defineModel({ default: '' })
+// 上传文件，上传后为本机内存地址，方便加载
+const fileUrl = ref('')
+watchEffect(() => {
+  // 用于在编辑模式下显示图片
+  fileUrl.value = modelFilePath.value
+})
+// 是否显示进度条
+const isShowProgress = ref(false)
+// 文件上传成功后的 callback
+const handleFileUploadSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
+  // fileUrl.value = URL.createObjectURL(uploadFile.raw!) // 生成内存地址，方便加载
+  fileUrl.value = response.data
+  console.info(fileUrl.value)
+  modelFilePath.value = response.data // 更新父组件双向绑定的值
+  isShowProgress.value = false
+}
+// 文件上传前的校验 callback
+const beforeFileUploadUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  console.log(rawFile)
+  if (props.fileType === 'image' && rawFile.type !== 'image/png' && rawFile.type !== 'image/jpeg') {
+    ElMessage.error('商品图片必须是 PNG / JPG 格式!')
+    return false
+  } else if (props.fileType === 'doc' && !rawFile.name.endsWith('.md')) {
+    ElMessage.error('商品说明书必须是 markdown 格式!')
+    return false
+  } else if (props.fileType === 'video' && rawFile.type !== 'video/mp4') {
+    ElMessage.error('主播视频必须是 mp4 格式!')
+    return false
+  } else if (props.fileType === 'audio' && rawFile.type !== 'audio/wav') {
+    ElMessage.error('主播音频必须是 wav 格式!')
+    return false
+  }
+  if (props.fileType === 'video' && rawFile.size / 1024 / 1024 > 20) {
+    ElMessage.error('主播视频文件大小不能超过 20MB!')
+    return false
+  } else if (props.fileType !== 'video' && rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('文件大小不能超过 2MB!')
+    return false
+  }
+  isShowProgress.value = true
+  return true
+}
+// 文件上传成功后的 callback
+const handleFileUploadFail: UploadProps['onError'] = (error: Error) => {
+  ElMessage.error('上传文件失败')
+  console.error(error)
+  isShowProgress.value = false
+}
+// 文件上传进度条
+const uploadPercentage = ref(0)
+// 文件上传进度回调
+const handleUploadProgress = (evt: UploadProgressEvent) => {
+  uploadPercentage.value = Math.floor(evt.percent)
+}
+</script>
+<template>
+  <div>
+    <el-progress v-show="isShowProgress" type="circle" :percentage="uploadPercentage" />
+    <!-- TODO 长时间上传后端会断开？ -->
+    <el-upload
+      v-show="!isShowProgress"
+      class="avatar-uploader"
+      action="/upload/file"
+      :headers="{
+        Authorization: header_authorization
+      }"
+      method="post"
+      :drag="props.fileType !== 'video' && props.fileType !== 'audio'"
+      :multiple="false"
+      :show-file-list="false"
+      :on-success="handleFileUploadSuccess"
+      :before-upload="beforeFileUploadUpload"
+      :on-progress="handleUploadProgress"
+      :on-error="handleFileUploadFail"
+    >
+      <!-- 图片 -->
+      <img
+        v-if="fileUrl && props.fileType === 'image'"
+        :src="fileUrl"
+        class="avatar"
+        @load="isShowProgress = false"
+      />
+      <!-- markdown 文档 -->
+      <el-icon
+        v-else-if="fileUrl && props.fileType === 'doc'"
+        :size="50"
+        class="avatar-uploader-icon"
+      >
+        <Document />
+      </el-icon>
+      <!-- 视频上传 -->
+      <el-button v-else-if="props.fileType === 'video' || props.fileType === 'audio'" type="danger">
+        {{ fileUrl === '' ? '上传' : '更换' }}{{ props.fileType === 'video' ? '视频' : '音频' }}
+      </el-button>
+      <!-- 拖动上传框 -->
+      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+    </el-upload>
+  </div>
+</template>
+<style lang="scss" scoped>
+// 上传图片
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+<style lang="scss">
+// 上传图片全局 css
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+// 进度条
+.el-progress--circle {
+  margin-right: 15px;
+}
+</style>

frontend/src/components/InfoDialogComponents.vue ADDED Viewed

	@@ -0,0 +1,328 @@

+<script setup lang="ts">
+import { ref, onBeforeUnmount } from 'vue'
+import { ElMessage } from 'element-plus'
+import { MdPreview } from 'md-editor-v3'
+import 'md-editor-v3/lib/preview.css'
+import { genProductInstructionContentRequest } from '@/api/product'
+import { genSalesDocRequest } from '@/api/llm'
+import VideoComponent from '@/components/VideoComponent.vue'
+import { genDigitalHuamnVideoRequest } from '@/api/digitalHuman'
+import { type StreamingRoomProductList } from '@/api/streamingRoom'
+import { AxiosError } from 'axios'
+const dialogFormVisible = ref(false)
+// AI 生成后的 文案 or 数字人视频 值双向绑定
+const modelGenValue = defineModel<StreamingRoomProductList[]>({
+  default: [] as StreamingRoomProductList[]
+})
+// 定义标题
+const titleMap = { SalesDoc: '主播文案', Instruction: '说明书', DigitalHuman: '数字人视频' }
+const title = ref('')
+const titleName = ref('')
+const infoValue = ref('')
+const itemType = ref('')
+const productId = ref(0)
+const streamerId = ref(0)
+const salesDoc = ref('')
+const showItemInfoDialog = async (
+  titleName_: string,
+  itemType_: keyof typeof titleMap,
+  itemValue: string,
+  productId_: number,
+  streamerId_: number = 0,
+  salesDoc_: string = ''
+) => {
+  title.value = titleMap[itemType_]
+  titleName.value = titleName_ + ' - '
+  itemType.value = itemType_
+  productId.value = productId_
+  streamerId.value = streamerId_
+  salesDoc.value = salesDoc_
+  dialogFormVisible.value = true
+  if (itemType_ === 'Instruction') {
+    // 请求接口获取说明书数据
+    try {
+      const { data } = await genProductInstructionContentRequest(itemValue)
+      if (data.code === 0) {
+        infoValue.value = data.data
+      } else {
+        ElMessage.error('获取说明书失败：' + data.message)
+      }
+    } catch (error: unknown) {
+      if (error instanceof AxiosError) {
+        ElMessage.error('获取说明书失败：' + error.message)
+      } else {
+        ElMessage.error('未知错误：' + error)
+      }
+    }
+  } else {
+    infoValue.value = itemValue
+  }
+}
+const handleSaveClick = () => {
+  // 更新双向绑定的值
+  dialogFormVisible.value = false
+  updateGenValue(infoValue.value)
+}
+// 是否正在生成文案标识
+const isGenerating = ref(false)
+const updateGenValue = (newValue: string) => {
+  let index = -1
+  // 更新与父组件双向绑定的值
+  for (let i = 0; i < modelGenValue.value.length; i++) {
+    // 根据返回数据继续添加商品
+    if (modelGenValue.value[i].product_id === productId.value) {
+      index = i
+      break
+    }
+  }
+  if (itemType.value === 'SalesDoc') {
+    modelGenValue.value[index].sales_doc = newValue
+  } else if (itemType.value === 'DigitalHuman') {
+    modelGenValue.value[index].start_video = newValue
+  }
+}
+// 生成进度条
+const genPercentage = ref(0)
+// 定义计时器句柄
+let timerId: number | null = null
+let totalGenSec: number = 1 // 生成时间
+// 开始/停止生成进度条
+const startGenProgress = () => {
+  genPercentage.value = 0
+  if (timerId) {
+    // 如果计时器正在运行，则清除计时器
+    clearInterval(timerId)
+  }
+  if (itemType.value === 'DigitalHuman') {
+    // 数字人生成时间
+    totalGenSec = 5 * 60
+  } else {
+    // 文案生成时间
+    totalGenSec = 10
+  }
+  // 启动计时器
+  timerId = window.setInterval(() => {
+    if (genPercentage.value < 99) {
+      genPercentage.value += parseFloat((100 / totalGenSec).toFixed(2))
+    }
+    if (genPercentage.value > 99) {
+      genPercentage.value = 99
+    }
+  }, 1000)
+}
+const stopGenProgress = () => {
+  if (timerId) {
+    // 如果计时器正在运行，则清除计时器
+    clearInterval(timerId)
+  }
+}
+// 生成数据人视频
+const getDigitalHumanVideo = async () => {
+  if (salesDoc.value === '') {
+    ElMessage.error('需先生成文案')
+    return
+  }
+  isGenerating.value = true
+  ElMessage.success('正在生成，预计 3 分钟，请稍候')
+  ElMessage.warning('若未生成完成，请不要离开页面！')
+  startGenProgress()
+  try {
+    const { data } = await genDigitalHuamnVideoRequest(streamerId.value, salesDoc.value)
+    console.log(data)
+    if (data.code === 0) {
+      infoValue.value = data.data
+      updateGenValue(infoValue.value)
+      genPercentage.value = 100
+      ElMessage.success('生成数字人视频成功')
+    } else {
+      ElMessage.error('生成数字人视频失败：' + data.message)
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('生成数字人视频失败：' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+  isGenerating.value = false
+  stopGenProgress()
+}
+// 生成解说文案
+const handleGenSalesDocClick = async () => {
+  isGenerating.value = true
+  ElMessage.success('正在生成，请稍候')
+  ElMessage.warning('若未生成完成，请不要离开页面！')
+  try {
+    startGenProgress()
+    const { data } = await genSalesDocRequest(Number(productId.value), Number(streamerId.value))
+    console.log(data)
+    if (data.code === 0) {
+      infoValue.value = data.data
+      updateGenValue(infoValue.value) // 更新与父组件双向绑定的值
+      ElMessage.success('生成文案成功')
+    } else {
+      ElMessage.error('生成文案失败：' + data.message)
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('生成文案失败：' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+  isGenerating.value = false
+  stopGenProgress()
+}
+// 在组件卸载前确保计时器被清除
+onBeforeUnmount(() => {
+  if (timerId) {
+    clearInterval(timerId)
+  }
+})
+defineExpose({ showItemInfoDialog })
+</script>
+<template>
+  <div>
+    <!-- 显示说明书 or 文案 or 数字人视频-->
+    <el-dialog
+      v-model="dialogFormVisible"
+      :title="titleName + title"
+      width="1000"
+      top="5vh"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <!-- 说明书 -->
+      <template v-if="itemType === 'Instruction'">
+        <div style="text-align: left">
+          <MdPreview editorId="preview-SalesDoc" :modelValue="infoValue" />
+        </div>
+      </template>
+      <!-- 主播文案  -->
+      <template v-else-if="itemType === 'SalesDoc'">
+        <div>
+          <el-input
+            type="textarea"
+            v-model="infoValue"
+            maxlength="2000"
+            :autosize="{ minRows: 20 }"
+            show-word-limit
+          />
+          <div class="progress-item">
+            <el-progress v-show="isGenerating" :text-inside="true" :percentage="genPercentage" />
+          </div>
+          <div class="bottom-gen-btn">
+            <el-button @click="handleGenSalesDocClick" :loading="isGenerating" type="primary">
+              AI 生成
+            </el-button>
+          </div>
+        </div>
+      </template>
+      <!-- 数字人视频 -->
+      <template v-else-if="itemType === 'DigitalHuman'">
+        <div class="make-center">
+          <VideoComponent :src="infoValue" :key="infoValue" :height="600" />
+        </div>
+        <div class="progress-item">
+          <el-progress v-show="isGenerating" :text-inside="true" :percentage="genPercentage" />
+        </div>
+        <div class="bottom-gen-btn">
+          <el-button @click="getDigitalHumanVideo" :loading="isGenerating" type="primary">
+            AI 生成数字人视频
+          </el-button>
+        </div>
+      </template>
+      <template #footer>
+        <div class="dialog-footer bottom-gen-btn">
+          <!-- <el-button type="primary" @click="handelEditClick"> 编辑 </el-button> -->
+          <el-button
+            v-show="itemType !== 'Instruction'"
+            @click="handleSaveClick"
+            type="success"
+            :disabled="isGenerating"
+          >
+            保存
+          </el-button>
+          <el-button @click="dialogFormVisible = false" :disabled="isGenerating">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<style lang="scss" scoped>
+// 每个表单底部 AI 生成按钮
+.bottom-gen-btn {
+  margin-top: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+// 进度条
+.progress-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  ::v-deep(.el-progress) {
+    height: 30px;
+    width: 80%;
+    margin: 10px;
+  }
+  ::v-deep(.el-progress-bar__outer) {
+    height: 16px !important;
+  }
+}
+.make-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+::v-deep(.el-input__wrapper) {
+  border-radius: 14px;
+}
+// 使用 ::v-deep 选择器来覆盖 el-dialog 的默认样式。
+::v-deep(.el-dialog) {
+  border-radius: 10px;
+  padding: 20px;
+  --el-dialog-bg-color: #f7f8fa;
+  --el-dialog-title-font-size: 20px;
+}
+</style>

frontend/src/components/LineChartComponent.vue ADDED Viewed

	@@ -0,0 +1,127 @@

+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+// 创建一个引用来存储图表的 DOM 容器
+const chartRef = ref(null)
+const props = defineProps({
+  orderNumList: {
+    type: Array
+  },
+  totalSalesList: {
+    type: Array
+  },
+  newUserList: {
+    type: Array
+  },
+  activityUserList: {
+    type: Array
+  }
+})
+// 初始化图表的函数
+const initChart = () => {
+  const chart = echarts.init(chartRef.value)
+  // 配置图表的选项
+  const option = {
+    title: {
+      text: '订单和用户数量'
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    legend: {
+      data: ['订单量', '销售额', '新增用户', '活跃用户']
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {}
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: '订单量',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        data: props.orderNumList
+      },
+      {
+        name: '销售额',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        data: props.totalSalesList
+      },
+      {
+        name: '新增用户',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        data: props.newUserList
+      },
+      {
+        name: '活跃用户',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        data: props.activityUserList
+      }
+    ]
+  }
+  // 使用设置的配置项渲染图表
+  chart.setOption(option)
+}
+// 在组件挂载后初始化图表
+onMounted(() => {
+  initChart()
+})
+</script>
+<template>
+  <div ref="chartRef" style="width: auto; height: 400px"></div>
+</template>
+<style scoped>
+/* 可以根据需要调整图表容器的样式 */
+</style>

frontend/src/components/MessageComponent.vue ADDED Viewed

	@@ -0,0 +1,88 @@

+<script setup lang="ts">
+import { MdPreview } from 'md-editor-v3'
+import 'md-editor-v3/lib/preview.css'
+// 定义组件入参
+const props = defineProps({
+  avatar: {
+    type: String,
+    default: ''
+  },
+  role: {
+    type: String,
+    default: ''
+  },
+  userName: {
+    type: String,
+    default: ''
+  },
+  message: {
+    type: String,
+    default: ''
+  },
+  datetime: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+<template>
+  <div class="message-block">
+    <el-row :gutter="0">
+      <el-col :span="2">
+        <div>
+          <el-avatar :src="props.avatar" />
+        </div>
+      </el-col>
+      <el-col :span="22">
+        <div class="user-info">
+          <!-- 标签 -->
+          <template v-if="props.role === 'streamer'">
+            <el-tag type="success" style="margin-right: 5px">主播</el-tag>
+          </template>
+          <!-- 用户名 -->
+          <div class="message-title">{{ props.userName }}</div>
+          <!-- 发送时间 -->
+          <div class="message-title">{{ props.datetime }}</div>
+        </div>
+        <div class="message-content">
+          <!-- 内容 -->
+          <template v-if="props.role === 'streamer'">
+            <MdPreview
+              style="background-color: aquamarine"
+              editorId="preview-SalesDoc"
+              :modelValue="props.message"
+            />
+          </template>
+          <template v-else>
+            <p>{{ props.message }}</p>
+          </template>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<style scoped lang="scss">
+.message-block {
+  margin-top: 20px;
+}
+.message-content {
+  background-color: aquamarine;
+  border-radius: 20px;
+  padding: 15px;
+  width: 600px; // 聊天信息的宽度
+}
+.user-info {
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+  .message-title {
+    margin-left: 8px;
+  }
+}
+</style>

frontend/src/components/NavbarComponent.vue ADDED Viewed

	@@ -0,0 +1,78 @@

+<script lang="ts" setup>
+import { Fold, Expand } from '@element-plus/icons-vue'
+import { ref, onMounted } from 'vue'
+import { isCollapse } from '@/utils/navbar'
+import BreadCrumb from '@/components/BreadCrumb.vue'
+import { getUserInfoRequest, type UserInfo } from '@/api/user'
+import { ElMessage } from 'element-plus'
+import { AxiosError } from 'axios'
+const userInfoItem = ref({} as UserInfo)
+onMounted(async () => {
+  try {
+    const { data } = await getUserInfoRequest()
+    if (data.code === 0) {
+      userInfoItem.value = data.data
+    } else {
+      ElMessage.error('获取用户信息失败: ' + data.message)
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('获取用户信息失败: ' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+})
+</script>
+<template>
+  <el-header>
+    <!-- 菜单折叠图标 -->
+    <el-icon @click="isCollapse = !isCollapse">
+      <Fold v-show="isCollapse" />
+      <Expand v-show="!isCollapse" />
+    </el-icon>
+    <!-- 导航栏左侧 -->
+    <!-- 面包屑 -->
+    <BreadCrumb />
+    <!-- <div> -->
+    <!-- 导航栏右边 -->
+    <!-- 退出登录 -->
+    <el-dropdown trigger="click">
+      <el-avatar :src="userInfoItem.avatar" />
+      <template #dropdown>
+        <el-dropdown-menu class="logout">
+          <el-dropdown-item>{{ userInfoItem.username }}</el-dropdown-item>
+          <el-dropdown-item>用户配置</el-dropdown-item>
+          <el-dropdown-item>
+            <!-- <el-dropdown-item @click="logout"> -->
+            <!-- <IconifyIconOffline :icon="LogoutCircleRLine" style="margin: 5px" /> -->
+            退出系统
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </el-header>
+</template>
+<style lang="scss" scoped>
+.el-header {
+  display: flex; // 水平显示
+  align-items: center;
+  background-color: #ffffff; // 背景颜色
+  .el-icon {
+    margin-right: 15px; // 折叠按钮右边预留空隙
+  }
+}
+.el-dropdown {
+  margin-left: auto; //让头像往右边靠
+}
+</style>

frontend/src/components/StreamerInfoComponent.vue ADDED Viewed

	@@ -0,0 +1,231 @@

+<script lang="ts" setup>
+import { nextTick, ref, watch } from 'vue'
+import { ElInput } from 'element-plus'
+import type { InputInstance } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import VideoComponent from '@/components/VideoComponent.vue'
+import { type StreamerInfo } from '@/api/streamerInfo'
+import FileUpload from '@/components/FileUpload.vue'
+// 定义 和父组件通信的双向绑定 model
+const modelSteamerInfo = defineModel({ default: {} as StreamerInfo })
+// 定义组件入参类型以及默认值
+export interface Props {
+  disableChange: boolean
+  optionList: StreamerInfo[]
+}
+const props = withDefaults(defineProps<Props>(), {
+  disableChange: false,
+  optionList: () => [] as StreamerInfo[]
+})
+// 性格操作
+const inputCharacterValue = ref('')
+const inputCharacterVisible = ref(false)
+const InputCharacterRef = ref<InputInstance>()
+modelSteamerInfo.value.character = ''
+let characterList = ref([] as string[])
+watch(
+  modelSteamerInfo,
+  (newValue) => {
+    console.log(`性格：更新为: ${newValue}`)
+    if (
+      typeof modelSteamerInfo.value.character === 'string' &&
+      modelSteamerInfo.value.character !== ''
+    ) {
+      characterList.value = modelSteamerInfo.value.character.split(';')
+    }
+  },
+  { immediate: true }
+)
+const handleCharacterClose = (tag: string) => {
+  // 删除性格操作
+  characterList.value.splice(characterList.value.indexOf(tag), 1)
+  modelSteamerInfo.value.character = characterList.value.join(';')
+}
+const showCharacterInput = () => {
+  inputCharacterVisible.value = true
+  nextTick(() => {
+    InputCharacterRef.value!.input!.focus()
+  })
+}
+const handleCharacterInputConfirm = () => {
+  if (inputCharacterValue.value) {
+    characterList.value.push(inputCharacterValue.value)
+    modelSteamerInfo.value.character = characterList.value.join(';')
+  }
+  inputCharacterVisible.value = false
+  inputCharacterValue.value = ''
+}
+const formLabelWidth = ref(120)
+const labelPosition = ref('top')
+</script>
+<template>
+  <div>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-card shadow="never" v-if="props.optionList.length >= 1">
+          <h2>选择主播</h2>
+          <el-divider />
+          <el-select
+            v-model="modelSteamerInfo"
+            placeholder="选择主播"
+            size="large"
+            style="width: 240px"
+          >
+            <el-option
+              v-for="item in props.optionList"
+              :key="item.streamer_id"
+              :label="item.name"
+              :value="item"
+            />
+          </el-select>
+        </el-card>
+        <el-card shadow="never">
+          <h2>基本信息</h2>
+          <el-divider />
+          <el-form :label-position="labelPosition" :label-width="formLabelWidth">
+            <el-form-item label="姓名">
+              <el-input
+                v-model="modelSteamerInfo.name"
+                size="large"
+                :disabled="props.disableChange"
+              />
+            </el-form-item>
+            <el-form-item label="主播性格">
+              <el-tag
+                v-for="(characterItem, index) in characterList"
+                :key="index"
+                :closable="!props.disableChange"
+                :disable-transitions="false"
+                @close="handleCharacterClose(characterItem)"
+                round
+                size="large"
+                style="margin: 3px"
+              >
+                {{ characterItem }}
+              </el-tag>
+              <el-input
+                v-if="inputCharacterVisible"
+                ref="InputCharacterRef"
+                v-model="inputCharacterValue"
+                class="w-20"
+                @keyup.enter="handleCharacterInputConfirm"
+                @blur="handleCharacterInputConfirm"
+                size="large"
+              />
+              <el-button
+                v-else
+                @click="showCharacterInput"
+                circle
+                :icon="Plus"
+                v-show="!props.disableChange"
+              >
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+        <el-card shadow="never">
+          <h2>TTS 配置</h2>
+          <el-divider />
+          <el-form :label-position="labelPosition" :label-width="formLabelWidth">
+            <el-form-item label="音频文件">
+              <div class="make-center">
+                <audio
+                  v-if="modelSteamerInfo.tts_reference_audio"
+                  :src="modelSteamerInfo.tts_reference_audio"
+                  controls
+                  style="margin-right: 20px"
+                ></audio>
+                <el-tag v-else size="large" type="danger"> 未找到音频 </el-tag>
+                <FileUpload
+                  v-show="!props.disableChange"
+                  v-model="modelSteamerInfo.tts_reference_audio"
+                  file-type="audio"
+                />
+              </div>
+            </el-form-item>
+            <el-form-item label="音频对应文字">
+              <el-input
+                v-model="modelSteamerInfo.tts_reference_sentence"
+                size="large"
+                :disabled="props.disableChange"
+              />
+            </el-form-item>
+            <!-- TODO 支持用户上传自己的权重 -->
+            <!-- <el-form-item label="TTS 权重" :label-width="formLabelWidth">
+              <el-input
+                v-model="modelSteamerInfo.tts_weight_tag"
+                size="large"
+                :disabled="props.disableChange"
+              />
+            </el-form-item> -->
+          </el-form>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="never">
+          <div class="make-center">
+            <!-- 数字人视频 -->
+            <VideoComponent
+              :src="modelSteamerInfo.base_mp4_path"
+              :key="modelSteamerInfo.base_mp4_path"
+              :height="600"
+              :autoplay="true"
+              :loop="true"
+            />
+          </div>
+          <div class="make-center" style="margin-top: 10px">
+            <FileUpload
+              v-show="!props.disableChange"
+              v-model="modelSteamerInfo.base_mp4_path"
+              file-type="video"
+            />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<style lang="scss" scoped>
+.make-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.el-form-item {
+  align-items: center;
+}
+::v-deep(.el-input__wrapper) {
+  border-radius: 14px;
+}
+.el-card {
+  margin-top: 10px;
+  border-radius: 10px;
+}
+::v-deep(.el-form-item__label) {
+  font-weight: 600;
+  font-size: 15px;
+}
+</style>

frontend/src/components/VideoComponent.vue ADDED Viewed

	@@ -0,0 +1,103 @@

+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import type PresetPlayer from 'xgplayer'
+import Player, { type IPlayerOptions } from 'xgplayer'
+// 定义组件入参
+const props = defineProps({
+  src: {
+    type: String,
+    default: 'player'
+  },
+  autoplay: {
+    type: Boolean,
+    default: false
+  },
+  loop: {
+    type: Boolean,
+    default: false
+  },
+  width: {
+    type: Number,
+    default: 600
+  },
+  height: {
+    type: Number,
+    default: 337.5
+  },
+  videoAfterEnd: {
+    type: String,
+    default: ''
+  }
+})
+const player_id = ref(props.src !== '' ? props.src : 'video_player')
+const playerOpts: IPlayerOptions = {
+  id: player_id.value, //元素id
+  url: props.src, //视频地址
+  width: props.width, // 播放器宽度
+  height: props.height, //播放器高度
+  poster: '@/assets/logo.png', //封面图
+  lang: 'zh-cn', //设置中文
+  closeVideoClick: false, // true - 禁止pc端单击暂停
+  videoInit: true, // 是否默认初始化video，当autoplay为true时，该配置为false无效
+  fluid: false, //是否启用流式布局，启用流式布局时根据width、height计算播放器宽高比，若width和height不是Number类型，默认使用16:9比例
+  autoplay: props.autoplay, //自动播放
+  loop: props.loop, //循环播放
+  autoplayMuted: false, // 是否自动静音自动播放，如果autoplay为false，则该属性的作用为默认静音播放
+  pip: false, //是否使用画中画插件,
+  closeVideoDblclick: true, // 是否关闭双击播放器进入全屏的能力
+  volume: 1, //音量 0 -  1
+  // playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
+  // 删除插件，插件文档: https://h5player.bytedance.com/plugins/internalplugins/controls.html
+  ignores: [
+    'volume',
+    'cssFullScreen',
+    'fullscreen',
+    'enter',
+    'play',
+    'replay',
+    'start',
+    'playbackrate'
+  ]
+}
+//  播放器
+let player: Player | null = null
+// 必须在onMounted 或 nextTick实例Xgplayer播放器
+onMounted(() => {
+  player = new Player(playerOpts)
+  player.on('ended', () => {
+    // 播放结束后的切换为 videoAfterEnd 的视频
+    console.log('视频播放结束')
+    if (props.videoAfterEnd !== '') {
+      playerOpts.autoplay = true // 自动播放
+      playerOpts.loop = true // 循环播放
+      playerOpts.autoplayMuted = true // 静音
+      playerOpts.url = props.videoAfterEnd // 新的视频地址
+      // player.playNext(playerOpts) // 使用 playnext 之后不能触发 loop ，需要重新实例化
+      if (player) {
+        player.destroy()
+      }
+      player = null
+      player = new Player(playerOpts)
+    }
+  })
+})
+onBeforeUnmount(() => {
+  if (player) {
+    player.destroy()
+    player = null
+  }
+})
+</script>
+<template>
+  <div :id="player_id"></div>
+</template>

frontend/src/layouts/BaseLayout.vue ADDED Viewed

	@@ -0,0 +1,41 @@

+<script lang="ts" setup>
+import AslideComponent from '@/components/AslideComponent.vue'
+import NavbarComponent from '@/components/NavbarComponent.vue'
+import { RouterView } from 'vue-router'
+</script>
+<template>
+  <el-container>
+    <!-- 侧边栏 -->
+    <el-scrollbar>
+      <AslideComponent />
+    </el-scrollbar>
+    <el-container class="header-and-context-container">
+      <!-- 导航栏 -->
+      <NavbarComponent />
+      <!-- 信息页 -->
+      <el-main>
+        <el-scrollbar>
+          <router-view v-slot="{ Component }">
+            <transition name="slide-fade" mode="out-in">
+              <component :is="Component" />
+            </transition>
+          </router-view>
+        </el-scrollbar>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+<style lang="scss" scoped>
+.header-and-context-container {
+  flex-direction: column;
+}
+.el-main {
+  background-color: #f6f8fe;
+}
+</style>

frontend/src/main.ts ADDED Viewed

	@@ -0,0 +1,29 @@

+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import 'xgplayer/dist/index.min.css'
+import '@/style/index.scss'
+import App from './App.vue'
+import router from './router'
+const app = createApp(App)
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate) // 持久化储存插件
+app.use(pinia)
+app.use(router)
+app.use(ElementPlus, {
+  locale: zhCn
+})
+app.mount('#app')

frontend/src/router/index.ts ADDED Viewed

	@@ -0,0 +1,183 @@

+import { createRouter, createWebHistory } from 'vue-router'
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/login',
+      name: 'Login',
+      component: () => import('@/views/login/LoginView.vue'),
+      meta: {
+        title: '登录页' // 面包屑显示标题
+      }
+    },
+    {
+      path: '/',
+      redirect: { name: 'Home' },
+      component: () => import('@/layouts/BaseLayout.vue'),
+      meta: {
+        requiresAuth: true // 是否需要登录验证，配置根路由即可，子路由会继承
+      },
+      children: [
+        {
+          path: '/home',
+          name: 'Home',
+          component: () => import('@/views/home/HomeView.vue'),
+          meta: { title: '主页' }
+        },
+        // ---------------------
+        //       商品
+        // ---------------------
+        {
+          path: '/product',
+          name: 'Product',
+          redirect: { name: 'ProductList' },
+          meta: { title: '商品管理' },
+          children: [
+            {
+              path: '/product/list',
+              name: 'ProductList',
+              component: () => import('@/views/product/ProductListView.vue'),
+              meta: { title: '商品列表' }
+            },
+            {
+              path: '/product/create',
+              name: 'ProductCreate',
+              component: () => import('@/views/product/ProductEditView.vue'),
+              meta: { title: '新增商品' }
+            },
+            {
+              path: '/product/:productId/edit',
+              name: 'ProductEdit',
+              component: () => import('@/views/product/ProductEditView.vue'),
+              meta: { title: '商品修改' },
+              props: true
+            }
+          ]
+        },
+        // ---------------------
+        //       数字人管理
+        // ---------------------
+        {
+          path: '/digital_human',
+          name: 'DigitalHuman',
+          redirect: { name: 'DigitalHumanList' },
+          meta: { title: '数字人管理' },
+          children: [
+            {
+              path: '/digital_human/list',
+              name: 'DigitalHumanList',
+              component: () => import('@/views/digital-human/DigitalHumanView.vue'),
+              meta: { title: '角色管理' }
+            }
+          ]
+        },
+        // ---------------------
+        //       直播管理
+        // ---------------------
+        {
+          path: '/streaming',
+          name: 'Streaming',
+          redirect: { name: 'StreamingOverview' },
+          meta: { title: '直播管理' },
+          children: [
+            {
+              path: '/streaming/overview',
+              name: 'StreamingOverview',
+              component: () => import('@/views/streaming/StreamingRoomListView.vue'),
+              meta: { title: '直播间管理' }
+            },
+            {
+              path: '/streaming/create',
+              name: 'StreamingCreate',
+              component: () => import('@/views/streaming/StreamingRoomeEditView.vue'),
+              meta: { title: '新建直播间' }
+            },
+            {
+              path: '/streaming/:roomId/edit',
+              name: 'StreamingEdit',
+              component: () => import('@/views/streaming/StreamingRoomeEditView.vue'),
+              meta: { title: '编辑直播间' },
+              props: true
+            },
+            {
+              path: '/streaming/:roomId/on-air',
+              name: 'StreamingOnAir',
+              component: () => import('@/views/streaming/StreamingOnAirView.vue'),
+              meta: { title: '直播间' },
+              props: true
+            }
+          ]
+        },
+        // ---------------------
+        //       订单管理
+        // ---------------------
+        {
+          path: '/order',
+          name: 'Order',
+          redirect: { name: 'OrderOverview' },
+          meta: { title: '订单管理' },
+          children: [
+            {
+              path: '/order/overview',
+              name: 'OrderOverview',
+              component: () => import('@/views/order/OrderView.vue'),
+              meta: { title: '订单管理' }
+            }
+          ]
+        },
+        // ---------------------
+        //       系统配置
+        // ---------------------
+        {
+          path: '/system',
+          name: 'System',
+          redirect: { name: 'SystemPlugins' },
+          meta: { title: '系统配置' },
+          children: [
+            {
+              path: '/system/plugins',
+              name: 'SystemPlugins',
+              component: () => import('@/views/system/SystemPluginsView.vue'),
+              meta: { title: '组件状态' }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
+      component: () => import('@/views/error/NotFound.vue'),
+      meta: { title: '404' }
+    }
+  ]
+})
+import { useTokenStore } from '@/stores/userToken'
+router.beforeEach((to, from, next) => {
+  if (to.matched.some((r) => r.meta?.requiresAuth)) {
+    // 登录状态缓存
+    const tokenStore = useTokenStore()
+    if (!tokenStore.token.access_token) {
+      // 没有登录，跳转登录页面，同时记录 想去的地址 to.fullPath，方便执行登陆后跳转回去
+      next({ name: 'Login', query: { redirect: to.fullPath } })
+      return
+    }
+  }
+  // 动态更改页面 title
+  to.matched.some((item) => {
+    if (!item.meta.title) return ''
+    const Title = '销冠——卖货主播大模型'
+    if (Title) document.title = `${item.meta.title} | ${Title}`
+    else document.title = item.meta.title as string
+  })
+  next()
+})
+export default router

frontend/src/stores/userToken.ts ADDED Viewed

	@@ -0,0 +1,26 @@

+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+interface TokenItem {
+  access_token: string
+  token_type: string
+}
+const useTokenStore = defineStore('user-token', {
+  state: () => {
+    const token = ref({} as TokenItem)
+    function saveToken(data: TokenItem) {
+      token.value = data
+    }
+    return { token, saveToken }
+  },
+  persist: {
+    paths: ['token'], // 需要持久化保存的字段名
+    storage: localStorage
+  }
+})
+export { type TokenItem, useTokenStore }

frontend/src/style/index.scss ADDED Viewed

	@@ -0,0 +1,17 @@

+/*
+  进入和离开动画可以使用不同
+  持续时间和速度曲线。
+*/
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+.slide-fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}

frontend/src/utils/navbar.ts ADDED Viewed

	@@ -0,0 +1,4 @@

+import { ref } from 'vue'
+// 侧边栏是否折叠
+export const isCollapse = ref(false) // TODO 是否可以用 Pinia ？

frontend/src/views/digital-human/DigitalHumanEditDialogView.vue ADDED Viewed

	@@ -0,0 +1,96 @@

+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import StreamerInfoComponent from '@/components/StreamerInfoComponent.vue'
+import {
+  streamerDetailInfoRequest,
+  streamerEditDetailRequest,
+  type StreamerInfo
+} from '@/api/streamerInfo'
+import { AxiosError } from 'axios'
+const dialogInfoVisible = ref(false)
+const saveLoading = ref(false)
+const steamerInfo = ref({} as StreamerInfo)
+steamerInfo.value.streamer_id = 0
+const showItemInfoDialog = async (streamerId: number) => {
+  console.log('streamerId = ', streamerId)
+  dialogInfoVisible.value = true
+  if (streamerId === 0) {
+    steamerInfo.value = {} as StreamerInfo
+    return
+  }
+  try {
+    // 请求接口获取主播数据
+    const { data } = await streamerDetailInfoRequest(streamerId)
+    if (data.code === 0) {
+      steamerInfo.value = data.data
+    } else {
+      ElMessage.error('获取主播数据失败: ' + data.message)
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('获取主播数据失败: ' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+}
+const handelSaveClick = async () => {
+  try {
+    saveLoading.value = true
+    const { data } = await streamerEditDetailRequest(steamerInfo.value)
+    if (data.code === 0) {
+      steamerInfo.value.streamer_id = data.data
+      ElMessage.success('保存成功')
+      saveLoading.value = false
+    } else {
+      saveLoading.value = false
+      ElMessage.error('保存失败: ' + data.message)
+    }
+  } catch (error: unknown) {
+    saveLoading.value = false
+    if (error instanceof AxiosError) {
+      ElMessage.error('保存失败: ' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+}
+defineExpose({ showItemInfoDialog })
+</script>
+<template>
+  <div class="dialog-container">
+    <el-dialog v-model="dialogInfoVisible" title="主播详情" width="80%" destroy-on-close>
+      <StreamerInfoComponent v-model="steamerInfo" :disable-change="false" />
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handelSaveClick" :loading="saveLoading">
+            保存
+          </el-button>
+          <el-button @click="dialogInfoVisible = false" :disabled="saveLoading"> 关闭 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<style lang="scss" scoped>
+// 使用 ::v-deep 选择器来覆盖 el-dialog 的默认样式。
+::v-deep(.el-dialog) {
+  border-radius: 10px;
+  padding: 20px;
+  --el-dialog-bg-color: #f7f8fa;
+  --el-dialog-title-font-size: 24px;
+}
+</style>

frontend/src/views/digital-human/DigitalHumanView.vue ADDED Viewed

	@@ -0,0 +1,155 @@

+<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus/es'
+import { Plus, Delete } from '@element-plus/icons-vue'
+import {
+  streamerInfoListRequest,
+  deleteStreamerByIdRequest,
+  type StreamerInfo
+} from '@/api/streamerInfo'
+import showItemInfoDialog from '@/views/digital-human/DigitalHumanEditDialogView.vue'
+import { AxiosError } from 'axios'
+// 获取主播信息
+const streamerNameOptions = ref([] as StreamerInfo[])
+const DeleteDigitalHuman = async (id: number, name: string) => {
+  ElMessageBox.confirm(`确定要删除 "${name}" 吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(async () => {
+      const { data } = await deleteStreamerByIdRequest(id)
+      if (data.code === 0) {
+        ElMessage.success('删除成功')
+        // 获取主播信息
+        const { data } = await streamerInfoListRequest()
+        if (data.code === 0) {
+          streamerNameOptions.value = data.data
+          ElMessage.success('获取主播信息成功')
+        }
+      } else {
+        ElMessage.error('删除失败')
+      }
+    })
+    .catch((error) => {
+      ElMessage.error('删除失败: ' + error.message)
+    })
+}
+onMounted(async () => {
+  // 获取主播信息
+  try {
+    const { data } = await streamerInfoListRequest()
+    if (data.code === 0) {
+      streamerNameOptions.value = data.data
+      ElMessage.success('获取主播信息成功')
+    } else {
+      ElMessage.error('获取主播信息失败：' + data.message)
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('获取主播信息失败：' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+})
+const chunkArray = (array: StreamerInfo[], chunkSize: number) => {
+  // 切割每 n 个为一行（即一个数组），方便后续进行 v-for 遍历
+  const result = []
+  for (let i = 0; i < array.length; i += chunkSize) {
+    result.push(array.slice(i, i + chunkSize))
+  }
+  return result
+}
+const chunkedArray = computed(() => chunkArray(streamerNameOptions.value, 4))
+// 信息弹窗显示标识
+const ShowItemInfo = ref()
+</script>
+<template>
+  <div>
+    <div>
+      <el-button
+        type="primary"
+        style="margin-bottom: 10px"
+        size="large"
+        @click="ShowItemInfo.showItemInfoDialog(0)"
+      >
+        <el-icon style="margin-right: 5px">
+          <Plus />
+        </el-icon>
+        新增主播
+      </el-button>
+    </div>
+    <div v-for="(row, rowIndex) in chunkedArray" :key="rowIndex" class="row">
+      <el-row :gutter="20">
+        <el-col v-for="(item, index) in row" :key="index" :span="6">
+          <el-card style="max-width: 500px">
+            <img :src="item.poster_image" style="width: 100%" />
+            <div class="streamer-info">
+              <p class="title">{{ item.name }}</p>
+              <p class="content">
+                {{ item.character }}
+              </p>
+            </div>
+            <div class="bottom-button">
+              <el-button type="primary" @click="ShowItemInfo.showItemInfoDialog(item.streamer_id)">
+                详情
+              </el-button>
+              <el-button
+                type="danger"
+                @click="DeleteDigitalHuman(item.streamer_id, item.name)"
+                :icon="Delete"
+              />
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <showItemInfoDialog ref="ShowItemInfo" />
+  </div>
+</template>
+<style lang="scss" scoped>
+.row {
+  margin-bottom: 20px;
+}
+.bottom-button {
+  margin-top: 10px; // 距离上面的控件有一定的距离
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.el-card {
+  border-radius: 20px;
+}
+.streamer-info {
+  display: flex;
+  flex-direction: column; /* 将子元素垂直排列 */
+  justify-content: center; /* 垂直居中 */
+  align-items: center; /* 水平居中 */
+  .title {
+    font-size: 20px;
+    font-weight: 600;
+  }
+  .content {
+    font-size: 15px;
+    color: #b1b3b8;
+    margin: 15px;
+  }
+}
+</style>

frontend/src/views/error/NotFound.vue ADDED Viewed

	@@ -0,0 +1,7 @@

+<script setup lang="ts"></script>
+<template>
+  <div>404 Not Found</div>
+</template>
+<style lang="scss" scoped></style>

frontend/src/views/home/HomeView.vue ADDED Viewed

	@@ -0,0 +1,160 @@

+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useTransition } from '@vueuse/core'
+import { getDashboardInfoRequest, type DashboardItem } from '@/api/dashboard'
+import BarChartComponent from '@/components/BarChartComponent.vue'
+import LineChartComponent from '@/components/LineChartComponent.vue'
+import {
+  OfficeBuilding,
+  Present,
+  View,
+  DataAnalysis,
+  CreditCard,
+  ShoppingCartFull
+} from '@element-plus/icons-vue'
+const systemInfo = ref({} as DashboardItem)
+const registeredBrandNum = ref(0) //入驻品牌方
+const productNum = ref(0) //商品数
+const dailyActivity = ref(0) //日活
+const todayOrder = ref(0) //订单量
+const totalSales = ref(0) //销售额
+const conversionRate = ref(0) //转化率
+// 配置动画
+const registeredBrandNumTrans = useTransition(registeredBrandNum, {
+  duration: 1500
+})
+const productNumTrans = useTransition(productNum, {
+  duration: 1500
+})
+const dailyActivityTrans = useTransition(dailyActivity, {
+  duration: 1500
+})
+const todayOrderTrans = useTransition(todayOrder, {
+  duration: 1500
+})
+const totalSalesTrans = useTransition(totalSales, {
+  duration: 1500
+})
+const conversionRateTrans = useTransition(conversionRate, {
+  duration: 1500
+})
+const iconSize = ref(50)
+onMounted(async () => {
+  const { data } = await getDashboardInfoRequest()
+  if (data.code === 0) {
+    systemInfo.value = data.data
+    registeredBrandNum.value = systemInfo.value.registeredBrandNum
+    productNum.value = systemInfo.value.productNum
+    dailyActivity.value = systemInfo.value.dailyActivity
+    todayOrder.value = systemInfo.value.todayOrder
+    totalSales.value = systemInfo.value.totalSales
+    conversionRate.value = systemInfo.value.conversionRate
+  } else {
+    ElMessage.error('获取总览数据失败')
+  }
+})
+</script>
+<template>
+  <div>
+    <el-row>
+      <el-col :span="8">
+        <el-card shadow="never">
+          <el-icon :size="iconSize" color="#006382"><OfficeBuilding /></el-icon>
+          <el-statistic title="入驻品牌方数量" :value="registeredBrandNumTrans" />
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card shadow="never">
+          <el-icon :size="iconSize" color="#f0bb1f"><Present /></el-icon>
+          <el-statistic title="商品数" :value="productNumTrans" />
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card shadow="never">
+          <el-icon :size="iconSize" color="#f25a2b"><View /></el-icon>
+          <el-statistic title="日活" :value="dailyActivityTrans" />
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="8">
+        <el-card shadow="never">
+          <el-icon :size="iconSize" color="#97d1c8"><ShoppingCartFull /></el-icon>
+          <el-statistic title="今日订单数" :value="todayOrderTrans" />
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card shadow="never">
+          <el-icon :size="iconSize" color="#756bf2"><CreditCard /></el-icon>
+          <el-statistic title="销售额" :value="totalSalesTrans" />
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card shadow="never">
+          <el-icon :size="iconSize" color="#22c45d"><DataAnalysis /></el-icon>
+          <el-statistic title="转化率(%)" :value="conversionRateTrans" />
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="16">
+        <el-card shadow="never">
+          <LineChartComponent
+            :orderNumList="systemInfo.orderNumList"
+            :totalSalesList="systemInfo.totalSalesList"
+            :newUserList="systemInfo.newUserList"
+            :activityUserList="systemInfo.activityUserList"
+            :key="systemInfo.registeredBrandNum"
+          />
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card shadow="never">
+          <BarChartComponent
+            :knowledgeBasesNum="systemInfo.knowledgeBasesNum"
+            :digitalHumanNum="systemInfo.digitalHumanNum"
+            :LiveRoomNum="systemInfo.LiveRoomNum"
+            :key="systemInfo.knowledgeBasesNum"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<style lang="scss" scoped>
+.el-col {
+  text-align: center;
+}
+.el-statistic {
+  --el-statistic-title-font-size: 16px;
+  --el-statistic-title-font-weight: 400;
+  --el-statistic-content-font-size: 28px;
+  --el-statistic-content-font-weight: 800;
+}
+.el-card {
+  margin: 12px 12px 12px 12px;
+  border-radius: 22px;
+  .info-item {
+    margin: 12px 12px 12px 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

frontend/src/views/login/LoginView.vue ADDED Viewed

	@@ -0,0 +1,170 @@

+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { User, Lock } from '@element-plus/icons-vue'
+import { ElMessage, ElNotification, type FormInstance, type FormRules } from 'element-plus'
+import { loginRequest } from '@/api/user'
+import { useTokenStore, type TokenItem } from '@/stores/userToken'
+import { AxiosError } from 'axios'
+const router = useRouter()
+const route = useRoute()
+// 登录按钮点击状态
+const isLogining = ref(false)
+// 登录状态缓存
+const tokenStore = useTokenStore() // 直接解构会失去响应性
+// 表格信息保存对象
+const formRef = ref<FormInstance>()
+// 声明每个字段的类型
+interface FormType {
+  username: string
+  password: string
+  // vertify_code: string
+}
+// 双向绑定对象
+const loginForm = reactive<FormType>({
+  username: 'hingwen.wong',
+  password: '123456'
+  // vertify_code: ''
+})
+// 定义表单规则，在 el-form 中注册
+const rules = reactive<FormRules<FormType>>({
+  username: [
+    { required: true, message: '请输入登录名', trigger: 'blur' }
+    // { pattern: /^1\d{10}$/, message: '请输入正确的电话号码', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, max: 18, message: '密码长度必须 6~18 位', trigger: 'blur' }
+  ]
+})
+const onSubmit = async () => {
+  // 标记正在登录
+  isLogining.value = true
+  // 表单校验
+  await formRef.value?.validate().catch((err) => {
+    ElMessage.error('表单校验失败')
+    isLogining.value = false
+    throw err // 抛出异常
+    // return new Promise(() => ()) // 返回一个空的状态
+  })
+  // 校验成功，执行登录
+  const log_res = await loginRequest(loginForm)
+    .then((res) => {
+      console.info(res)
+      if (res.status !== 200) {
+        // 登录失败
+        ElMessage.error('账号名或密码错误')
+        isLogining.value = false
+        throw new Error('账号名或密码错误') // 抛出异常
+      }
+      // 弹窗提示
+      ElNotification({
+        title: '登录成功',
+        message: '欢迎',
+        type: 'success'
+      })
+      return res.data
+    })
+    .catch((error) => {
+      console.error(error)
+      isLogining.value = false
+      if (error.response && error.response.status === 401) {
+        ElMessage.error('账号名或密码错误')
+        throw new Error('账号名或密码错误') // 抛出异常
+      } else if (error instanceof AxiosError) {
+        ElMessage.error('登录失败：' + error.message)
+        throw new Error('登录失败：' + error.message) // 抛出异常
+      } else {
+        ElMessage.error('未知错误：' + error)
+        throw new Error('未知错误：' + error) // 抛出异常
+      }
+    })
+  console.log(log_res)
+  // 保存 token 信息
+  tokenStore.saveToken(log_res as TokenItem)
+  // 设置已经完成登录
+  isLogining.value = false
+  router.push((route.query.redirect as string) || '/') // 页面跳转，如果是被未登录拦截的话，登录成功后跳转会目标页面
+}
+</script>
+<template>
+  <div class="login">
+    <el-form
+      :model="loginForm"
+      :rules="rules"
+      label-width="120px"
+      label-position="top"
+      size="large"
+      ref="formRef"
+    >
+      <h2>销冠 —— AI 卖货主播大模型</h2>
+      <!-- 校验规则的名称 -->
+      <el-form-item label="用户名" prop="username">
+        <el-input :prefix-icon="User" v-model="loginForm.username" />
+      </el-form-item>
+      <el-form-item label="密码" prop="password">
+        <el-input :prefix-icon="Lock" v-model="loginForm.password" type="password" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" color="#626aef" @click="onSubmit" :loading="isLogining">
+          登录
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<style lang="scss" scoped>
+.login {
+  background-color: #dde5f4;
+  height: 100vh; // 满屏
+  display: flex; // 居中显示
+  justify-content: center;
+  align-items: center;
+  background-image: linear-gradient(to right, #dde5f4, #cadaf7); // 背景渐变色
+  .el-form {
+    width: 320px;
+    background-color: #f1f7fe;
+    padding: 30px; // 周围外加的 padding 像素
+    border-radius: 24px; // 边框圆角
+  }
+  .el-form-item {
+    margin-top: 20px; // 距离上方控件距离
+  }
+  .el-button {
+    width: 100%;
+    margin-top: 20px;
+    border-radius: 10px;
+  }
+}
+::v-deep(.el-input__wrapper) {
+  border-radius: 14px;
+  padding: 5px 5px 5px 5px;
+}
+</style>

frontend/src/views/order/OrderView.vue ADDED Viewed

	@@ -0,0 +1,90 @@

+<script setup lang="ts">
+const tableData = [
+  {
+    id: 1,
+    date: '2024-05-03',
+    name: '电动牙刷',
+    amount: 1,
+    address: '广东省广州市********',
+    status: '备货中'
+  },
+  {
+    id: 2,
+    date: '2024-05-02',
+    name: '平板电脑',
+    amount: 1,
+    address: '北京市朝阳区********',
+    status: '备货中'
+  },
+  {
+    id: 3,
+    date: '2024-05-01',
+    name: '唇膏',
+    amount: 1,
+    address: '浙江省杭州市********',
+    status: '已发货'
+  },
+  {
+    id: 4,
+    date: '2024-05-02',
+    name: '洗发露',
+    amount: 2,
+    address: '上海市黄浦区********',
+    status: '已完成'
+  }
+]
+</script>
+<template>
+  <div>
+    <el-card shadow="never">
+      <template #header>
+        <!-- 头部 -->
+        <div class="card-header">
+          <div>
+            <el-form :inline="true">
+              <el-form-item label="搜索">
+                <el-input style="width: 240px" placeholder="商品名称" clearable />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary"> 查询 </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </template>
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="id" label="ID" width="50" />
+        <el-table-column prop="name" label="商品名称" />
+        <el-table-column prop="amount" label="数量" />
+        <el-table-column prop="date" label="下单时间" />
+        <el-table-column prop="address" label="地址" />
+        <el-table-column label="订单状态" v-slot="{ row }" align="center" width="250px">
+          <el-tag :type="row.status === '已完成' ? 'success' : 'warning'">{{ row.status }}</el-tag>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+<style lang="scss" scoped>
+.el-card {
+  border-radius: 12px;
+}
+.box-card {
+  width: auto; // 卡片宽度
+}
+// 查询栏
+.card-header {
+  display: flex;
+  justify-content: space-between; // 将两个 div 放置在页面的两侧
+  align-items: center;
+  .el-form-item {
+    margin-bottom: 0px; // 查询框和下面的组件间隔大小
+  }
+}
+</style>

frontend/src/views/product/ProductEditView.vue ADDED Viewed

	@@ -0,0 +1,284 @@

+<script setup lang="ts">
+import { onMounted, ref, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus/es'
+import { ElInput } from 'element-plus'
+import type { InputInstance } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import FileUpload from '@/components/FileUpload.vue'
+import { type ProductItem, getProductByIdRequest, productCreadeOrEditRequest } from '@/api/product'
+import { AxiosError } from 'axios'
+const router = useRouter()
+// 定义 URL ID 传参
+const props = defineProps({
+  productId: {
+    type: String,
+    default: ''
+  }
+})
+// 步骤条ID
+const currentStep = ref(0)
+const saveLoading = ref(false)
+// 商品信息
+const productInfo = ref({} as ProductItem)
+productInfo.value.heighlights = '' // 初始化
+productInfo.value.product_id = 0 // 初始化
+const heighlights_list = ref([] as string[])
+// 商品亮点操作
+const inputHeighlightValue = ref('')
+const inputHeighlightVisible = ref(false)
+const InputHeighlightRef = ref<InputInstance>()
+const handleHeighlightClose = (tag: string) => {
+  // 删除性格操作
+  heighlights_list.value.splice(heighlights_list.value.indexOf(tag), 1)
+}
+const showHeighlightInput = () => {
+  inputHeighlightVisible.value = true
+  nextTick(() => {
+    InputHeighlightRef.value!.input!.focus()
+  })
+}
+const handleHeighlightInputConfirm = () => {
+  if (inputHeighlightValue.value) {
+    heighlights_list.value.push(inputHeighlightValue.value)
+  }
+  inputHeighlightVisible.value = false
+  inputHeighlightValue.value = ''
+}
+// 表单提交
+const onSubmit = async () => {
+  const statusInof = props.productId ? '编辑商品' : '新建商品'
+  try {
+    saveLoading.value = true
+    // 将 亮点 数组变成 ; 分割的字符串
+    productInfo.value.heighlights = heighlights_list.value.join(';')
+    const { data } = await productCreadeOrEditRequest(productInfo.value)
+    if (data.code === 0) {
+      ElMessage.success(`${statusInof}成功!`)
+      saveLoading.value = false
+      router.push({ name: 'Product' })
+    } else {
+      saveLoading.value = false
+      ElMessage.error(`${statusInof}失败, ${data.message}`)
+      throw new Error(`${statusInof}失败, ${data.message}`)
+    }
+  } catch (error: unknown) {
+    saveLoading.value = false
+    if (error instanceof AxiosError) {
+      ElMessage.error('失败:' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+}
+onMounted(async () => {
+  // 获取商品信息
+  if (props.productId) {
+    try {
+      const { data } = await getProductByIdRequest(props.productId)
+      if (data.code === 0) {
+        productInfo.value = data.data
+        heighlights_list.value = productInfo.value.heighlights.split(';')
+        ElMessage.success('获取商品信息成功')
+      } else {
+        ElMessage.error(data.message)
+      }
+    } catch (error: unknown) {
+      if (error instanceof AxiosError) {
+        ElMessage.error('失败:' + error.message)
+      } else {
+        ElMessage.error('未知错误：' + error)
+      }
+    }
+  }
+})
+</script>
+<template>
+  <div>
+    <!-- 返回栏 -->
+    <el-page-header @back="router.push({ name: 'ProductList' })" title="返回">
+      <template #content>
+        <div class="flex items-center">
+          <span class="text-large font-600 mr-3">
+            {{ props.productId ? '编辑' : '新建' }}商品
+          </span>
+        </div>
+      </template>
+      <template #extra>
+        <div class="flex items-center">
+          <el-button type="primary" class="ml-2" @click="onSubmit" :loading="saveLoading"
+            >保存</el-button
+          >
+        </div>
+      </template>
+    </el-page-header>
+    <el-card>
+      <template #header>
+        <!-- 步骤条 -->
+        <el-steps :active="currentStep" finish-status="success" align-center>
+          <el-step title="头图 & 说明书" @click="currentStep = 0" />
+          <el-step title="商品信息" @click="currentStep = 1" />
+        </el-steps>
+      </template>
+      <!-- 表单 -->
+      <!-- label-width 用于对其 el-form-item 标签 -->
+      <el-form :model="productInfo" label-width="120" size="large">
+        <div v-show="currentStep === 0">
+          <!-- 商品头图 & 说明书-->
+          <el-form-item label="商品图片">
+            <FileUpload v-model="productInfo.image_path" file-type="image" />
+          </el-form-item>
+          <el-form-item label="商品说明书">
+            <FileUpload v-model="productInfo.instruction" file-type="doc" />
+          </el-form-item>
+        </div>
+        <div v-show="currentStep === 1">
+          <!-- 商品信息 -->
+          <el-form-item label="商品名称">
+            <el-input v-model="productInfo.product_name" maxlength="50" show-word-limit />
+          </el-form-item>
+          <el-form-item label="商品分类">
+            <!-- TODO 改为下拉框 -->
+            <el-input v-model="productInfo.product_class" />
+          </el-form-item>
+          <el-form-item label="商品亮点">
+            <el-tag
+              v-for="(heighlights, index) in heighlights_list"
+              :key="index"
+              :disable-transitions="false"
+              closable
+              @close="handleHeighlightClose(heighlights)"
+              round
+              size="large"
+              style="margin: 3px"
+            >
+              {{ heighlights }}
+            </el-tag>
+            <el-input
+              v-if="inputHeighlightVisible"
+              ref="InputHeighlightRef"
+              v-model="inputHeighlightValue"
+              class="w-20"
+              @keyup.enter="handleHeighlightInputConfirm"
+              @blur="handleHeighlightInputConfirm"
+              size="large"
+            />
+            <el-button
+              v-else
+              @click="showHeighlightInput"
+              circle
+              :icon="Plus"
+              type="primary"
+              plain
+              size="small"
+              :disabled="heighlights_list.length > 7"
+            >
+            </el-button>
+          </el-form-item>
+          <el-form-item label="价格">
+            <el-input-number
+              v-model="productInfo.selling_price"
+              :min="0.01"
+              :precision="2"
+              :step="0.1"
+              :max="99999"
+              size="large"
+            />
+          </el-form-item>
+          <el-form-item label="库存数量">
+            <el-input-number
+              v-model="productInfo.amount"
+              :min="0"
+              :step="50"
+              :max="99999"
+              size="large"
+            />
+          </el-form-item>
+          <el-form-item label="发货地">
+            <!-- TODO 改为下拉框选择 ? -->
+            <el-input v-model="productInfo.departure_place" maxlength="100" show-word-limit />
+          </el-form-item>
+          <el-form-item label="快递公司">
+            <!-- TODO 改为下拉框 -->
+            <el-input v-model="productInfo.delivery_company" maxlength="50" show-word-limit />
+          </el-form-item>
+          <div class="bottom-gen-btn">
+            <el-button type="success" disabled> AI 生成 (comming soon) </el-button>
+          </div>
+        </div>
+      </el-form>
+      <template #footer>
+        <div class="form-bottom-btn">
+          <el-button v-show="currentStep > 0" @click="currentStep--" :disabled="saveLoading"
+            >上一步</el-button
+          >
+          <el-button v-show="currentStep < 1" @click="currentStep++">下一步</el-button>
+          <el-button
+            v-show="currentStep === 1"
+            type="primary"
+            @click="onSubmit"
+            :loading="saveLoading"
+            >保存</el-button
+          >
+        </div>
+      </template>
+    </el-card>
+  </div>
+</template>
+<style lang="scss" scoped>
+.el-card {
+  width: auto;
+  margin-top: 20px;
+}
+// 步骤条
+.el-step {
+  cursor: pointer; // 鼠标移动过去显示鼠标变成 pointer 手指
+}
+// 底部按钮
+.form-bottom-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+// 中间表单控件
+.el-form {
+  padding: 0px 180px 0px 100px; // 从上开始顺时针四个放心
+}
+// 每个表单底部 AI 生成按钮
+.bottom-gen-btn {
+  margin-top: 15px;
+  margin-left: 70px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/src/views/product/ProductListView.vue ADDED Viewed

	@@ -0,0 +1,250 @@

+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Plus, Delete, Edit } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import InfoDialogComponents from '@/components/InfoDialogComponents.vue'
+import {
+  productListRequest,
+  deleteProductByIdRequest,
+  type ProductListType,
+  type ProductData
+} from '@/api/product'
+import { AxiosError } from 'axios'
+const router = useRouter()
+// 信息弹窗显示标识
+const ShowItemInfo = ref()
+// 加载框
+const tableLoading = ref(true)
+// 查询 - 条件
+const queryCondition = ref<ProductListType>({
+  currentPage: 1,
+  pageSize: 10
+} as ProductListType)
+// 查询 - 结果
+const queriedResult = ref<ProductData>({} as ProductData)
+// 查询 - 方法
+const getProductList = async (params: ProductListType = {}) => {
+  tableLoading.value = true
+  Object.assign(queryCondition.value, params) // 用于外部灵活使用，传参的字典更新
+  try {
+    const { data } = await productListRequest(queryCondition.value)
+    tableLoading.value = false
+    if (data.code === 0) {
+      queriedResult.value = data.data
+    } else {
+      ElMessage.error('商品接口错误')
+      throw new Error('商品接口错误')
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('商品接口失败: ' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+}
+onMounted(() => {
+  // 获取商品信息
+  getProductList()
+})
+const isDelecting = ref(false)
+const DeleteProduct = async (id: number, productName: string) => {
+  ElMessageBox.confirm(`确定要删除 "${productName}" 吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    showClose: false
+  })
+    .then(async () => {
+      ElMessage.success(`正在删除 ${productName}，请稍候`)
+      isDelecting.value = true
+      const { data } = await deleteProductByIdRequest(id)
+      if (data.code === 0) {
+        ElMessage.success('删除成功')
+        getProductList()
+      } else {
+        ElMessage.error('删除失败')
+      }
+      isDelecting.value = false
+    })
+    .catch(() => {
+      // ElMessage({
+      //   type: 'info',
+      //   message: 'Input canceled'
+      // })
+    })
+}
+</script>
+<template>
+  <div>
+    <el-card shadow="never">
+      <template #header>
+        <!-- 头部 -->
+        <div class="card-header">
+          <div>
+            <el-form :inline="true" :model="queriedResult.product_list">
+              <el-form-item label="搜索">
+                <el-input
+                  style="width: 240px"
+                  v-model="queryCondition.productName"
+                  placeholder="商品名称"
+                  clearable
+                />
+              </el-form-item>
+              <!-- <el-form-item label="分类">
+                <el-select v-model="queriedResult.class" placeholder="">
+                  <el-option label="全部" value="" />
+                  <el-option label="电子" value="电子" />
+                </el-select>
+              </el-form-item> -->
+              <el-form-item>
+                <el-button type="primary" @click="() => getProductList({ currentPage: 1 })">
+                  查询
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div>
+            <!-- 添加商品 -->
+            <el-button type="primary" @click="router.push({ name: 'ProductCreate' })">
+              <el-icon style="margin-right: 5px">
+                <Plus />
+              </el-icon>
+              添加商品
+            </el-button>
+          </div>
+        </div>
+      </template>
+      <!-- 中部表格信息-->
+      <el-table :data="queriedResult.product_list" max-height="1000" v-loading="tableLoading">
+        <el-table-column prop="product_id" label="ID" align="center" width="50px" />
+        <el-table-column prop="image_path" label="图片" align="center">
+          <template #default="scope">
+            <div style="display: flex; align-items: center">
+              <!-- TODO 加上  :preview-src-list="[scope.row.image_path]"  -->
+              <el-image :src="scope.row.image_path" />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="product_name" label="名称" align="center" />
+        <el-table-column prop="product_class" label="分类" align="center" />
+        <el-table-column prop="heighlights" label="亮点" align="center" />
+        <el-table-column prop="selling_price" label="价格" align="center" />
+        <el-table-column prop="amount" label="库存" align="center" />
+        <el-table-column prop="departure_place" label="发货地" align="center" />
+        <el-table-column prop="delivery_company" label="快递公司" align="center" />
+        <el-table-column prop="upload_date" label="上传时��" align="center" />
+        <el-table-column label="操作" v-slot="{ row }" align="center" width="250px">
+          <div class="control-item">
+            <el-button
+              :type="row.instruction !== '' ? 'success' : 'warning'"
+              :disabled="row.instruction === ''"
+              @click="
+                ShowItemInfo.showItemInfoDialog(
+                  row.product_name,
+                  'Instruction',
+                  row.instruction,
+                  row.product_id
+                )
+              "
+            >
+              说明书
+            </el-button>
+            <!-- 编辑按钮 -->
+            <el-button
+              type="primary"
+              :icon="Edit"
+              @click="router.push({ name: 'ProductEdit', params: { productId: row.product_id } })"
+            />
+            <!-- 删除按钮 -->
+            <el-button
+              type="danger"
+              @click="DeleteProduct(row.product_id, row.product_name)"
+              :icon="Delete"
+              :id="row.product_id"
+              :disabled="isDelecting"
+            />
+          </div>
+        </el-table-column>
+      </el-table>
+      <!-- 信息弹窗 -->
+      <InfoDialogComponents ref="ShowItemInfo" />
+      <!-- 分页栏 -->
+      <template #footer>
+        <!-- TODO 保持在页面最低位置 -->
+        <el-pagination
+          v-model:current-page="queriedResult.currentPage"
+          v-model:page-size="queriedResult.pageSize"
+          :page-sizes="[5, 10, 15, 20]"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="queriedResult.totalSize || 0"
+          @size-change="(pageSize: number) => getProductList({ pageSize, currentPage: 1 })"
+          @current-change="(currentPage: number) => getProductList({ currentPage })"
+        />
+      </template>
+    </el-card>
+  </div>
+</template>
+<style lang="scss" scoped>
+.el-card {
+  border-radius: 12px;
+}
+.box-card {
+  width: auto; // 卡片宽度
+}
+// 查询栏
+.card-header {
+  display: flex;
+  justify-content: space-between; // 将两个 div 放置在页面的两侧
+  align-items: center;
+  .el-form-item {
+    margin-bottom: 0px; // 查询框和下面的组件间隔大小
+  }
+}
+// 分页框
+.el-pagination {
+  margin-top: 10px; // 距离上面的控件有一定的距离
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+// 操作栏
+.control-item {
+  display: flex;
+  align-items: center;
+}
+// 去掉表格下边框线
+:deep(.el-table__inner-wrapper::before) {
+  height: 0;
+}
+</style>

frontend/src/views/streaming/StreamingOnAirView.vue ADDED Viewed

	@@ -0,0 +1,433 @@

+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ChatDotRound, Microphone, VideoPause } from '@element-plus/icons-vue'
+import VideoComponent from '@/components/VideoComponent.vue'
+import MessageComponent from '@/components/MessageComponent.vue'
+import {
+  streamRoomOffline,
+  genAsrResult,
+  onAirRoomChatRequest,
+  onAirRoomInfoRequest,
+  onAirRoomNextProductRequest,
+  sendAudioToServer,
+  type StreamingRoomStatusItem
+} from '@/api/streamingRoom'
+import type { ProductItem, StreamerInfo } from '@/api/product'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { AxiosError } from 'axios'
+import { getUserInfoRequest, type UserInfo } from '@/api/user'
+const router = useRouter()
+// 定义传参
+const props = defineProps({
+  roomId: {
+    type: String,
+    default: '0'
+  }
+})
+// 用户信息
+const userInfoItem = ref({} as UserInfo)
+const getUserInfo = async () => {
+  try {
+    const { data } = await getUserInfoRequest()
+    if (data.code === 0) {
+      userInfoItem.value = data.data
+    } else {
+      ElMessage.error('获取用户信息失败: ' + data.message)
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('获取用户信息失败: ' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+}
+// 输入框
+const inputValue = ref('')
+const currentStatus = ref({} as StreamingRoomStatusItem)
+currentStatus.value.currentProductInfo = {} as ProductItem
+currentStatus.value.streamerInfo = {} as StreamerInfo
+const getRoomInfo = async () => {
+  // 获取主播视频地址
+  // 获取商品信息，显示在右下角的商品缩略图
+  // 获取后端对话记录 messageList ，进行渲染
+  try {
+    const { data } = await onAirRoomInfoRequest(Number(props.roomId))
+    if (data.code === 0) {
+      currentStatus.value = data.data
+      console.info(currentStatus.value)
+    } else {
+      ElMessage.error('获取直播间信息失败' + data.message)
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('获取直播间信息失败' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+}
+// 主播回答提示符
+const loadingStreamRes = ref(false)
+// 输入框使能与否
+const disableInput = ref(false)
+// 发送按钮
+const handelSendClick = async () => {
+  console.info(inputValue.value)
+  // 显示在对话框-用户
+  currentStatus.value.conversation.push({
+    role: 'user',
+    userId: userInfoItem.value.user_id,
+    userName: userInfoItem.value.username,
+    avatar: userInfoItem.value.avatar,
+    message: inputValue.value,
+    send_time: ''
+  })
+  // disable 输入框
+  disableInput.value = true
+  // 显示 loading 图标 - 主播
+  loadingStreamRes.value = true
+  // request(roomId, userId, newValue)
+  // 将对话记录更新到数据库
+  try {
+    const { data } = await onAirRoomChatRequest(Number(props.roomId), inputValue.value)
+    // 取消 loading
+    loadingStreamRes.value = false
+    if (data.code === 0) {
+      // 更新 list
+      await getRoomInfo()
+    } else {
+      ElMessage.error('更新对话信息失败' + data.message)
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('更新对话信息失败' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+  // 启动输入框
+  disableInput.value = false
+  // 在 DOM 更新后滚动到底部
+  nextTick(scrollToBottom)
+}
+// 用于滚动条
+const scrollbarRef = ref<HTMLElement | null>(null)
+const scrollToBottom = async () => {
+  // 注意：需要通过 nextTick 以等待 DOM 更新完成
+  await nextTick()
+  if (scrollbarRef.value) {
+    // scrollbarRef.value.setScrollTop(10000) // TODO 先设置一个比较大的值，后续需要获取控件的高度进行赋值
+    scrollbarRef.value.scrollTop = 10000 // TODO 先设置一个比较大的值，后续需要获取控件的高度进行赋值
+  }
+}
+// 下一个商品
+const handleNextProductClick = async () => {
+  try {
+    const { data } = await onAirRoomNextProductRequest(Number(props.roomId))
+    if (data.code === 0) {
+      console.info('Next Product')
+      await getRoomInfo()
+    } else {
+      ElMessage.error('失败' + data.message)
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('失败' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+}
+// 结束直播按钮
+const handleOffLineClick = async () => {
+  ElMessageBox.confirm(`确定要下播吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(async () => {
+      try {
+        const { data } = await streamRoomOffline(Number(props.roomId))
+        if (data.code === 0) {
+          ElMessage.success('下���成功')
+          router.push({ name: 'StreamingOverview' })
+        } else {
+          ElMessage.error('下播失败' + data.message)
+        }
+      } catch (error: unknown) {
+        if (error instanceof AxiosError) {
+          ElMessage.error('失败' + error.message)
+        } else {
+          ElMessage.error('未知错误：' + error)
+        }
+      }
+    })
+    .catch((error) => {
+      ElMessage.error('下播失败: ' + error.message)
+    })
+}
+onMounted(() => {
+  // 获取用户信息
+  getUserInfo()
+  // 获取直播间实时信息格信息
+  getRoomInfo()
+})
+// 录音
+// 状态管理
+const isRecording = ref(false)
+let mediaRecorder: MediaRecorder | null = null
+let chunks: Blob[] = []
+let stream: MediaStream | null = null
+// 开始录音
+const startRecording = () => {
+  navigator.mediaDevices
+    .getUserMedia({ audio: true })
+    .then((s) => {
+      stream = s
+      mediaRecorder = new MediaRecorder(s)
+      mediaRecorder.start()
+      mediaRecorder.addEventListener('dataavailable', handleDataAvailable)
+      mediaRecorder.addEventListener('stop', handleStop)
+    })
+    .catch((err) => {
+      ElMessage.error('无法访问麦克风: ' + err.message)
+    })
+}
+// 停止录音
+const stopRecording = () => {
+  if (mediaRecorder) {
+    mediaRecorder.stop()
+  }
+  if (stream) {
+    stream.getTracks().forEach((track) => track.stop())
+  }
+}
+// 切换录音状态
+const handleRecord = () => {
+  if (isRecording.value) {
+    stopRecording()
+  } else {
+    startRecording()
+  }
+  isRecording.value = !isRecording.value
+}
+// 处理录音数据
+const handleDataAvailable = (e: BlobEvent) => {
+  chunks.push(e.data)
+}
+// 处理录音停止事件
+const handleStop = async () => {
+  const blob = new Blob(chunks, { type: 'audio/webm' })
+  try {
+    // 将 asr 文件发送到服务器
+    const { data } = await sendAudioToServer(blob)
+    if (data.code === 0) {
+      ElMessage.success('正在进行语音转文字，请稍候！')
+      // 调取接口开始进行 asr 识别
+      console.info(data)
+      const { data: asr_data } = await genAsrResult(Number(props.roomId), data.data)
+      ElMessage.success('语音转文字成功！')
+      // 自动进行对话
+      if (asr_data.code === 0) {
+        inputValue.value = asr_data.data
+        handelSendClick()
+      }
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('语音转文字失败: ' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+  chunks = []
+}
+</script>
+<template>
+  <div>
+    <el-row :gutter="1">
+      <el-col :span="14">
+        <!-- 主播视频 -->
+        <VideoComponent
+          :src="currentStatus.currentStreamerVideo"
+          :key="currentStatus.currentStreamerVideo"
+          :autoplay="true"
+          :width="1300"
+          :height="1300"
+          :videoAfterEnd="currentStatus.streamerInfo.base_mp4_path"
+          style="display: flex; justify-content: center; align-items: center"
+        />
+      </el-col>
+      <el-col :span="10">
+        <div>
+          <el-scrollbar height="1110px" ref="scrollbarRef" id="scrollbarRef">
+            <!-- 对话记录显示在右上角 -->
+            <MessageComponent
+              v-for="(item, index) in currentStatus.conversation"
+              :key="index"
+              :role="item.role"
+              :avatar="item.avatar"
+              :userName="item.userName"
+              :message="item.message"
+              :datetime="item.send_time"
+            />
+            <!-- 加载标识 -->
+            <!-- <el-button :loading="loadingStreamRes" v-show="loadingStreamRes" /> -->
+          </el-scrollbar>
+          <!-- 聊天记录右下角商品展示 -->
+          <div class="floating-card">
+            <el-card shadow="never">
+              <div class="product-info">
+                <p class="title">当前商品</p>
+                <!-- 商品图片 -->
+                <el-image
+                  style="width: 100px; height: 100px"
+                  :src="currentStatus.currentProductInfo.image_path"
+                  fit="contain"
+                />
+                <!-- 商品信息 -->
+                <p class="title">{{ currentStatus.currentProductInfo.product_name }}</p>
+                <p class="content">{{ currentStatus.currentProductInfo.heighlights }}</p>
+                <p class="price">¥ {{ currentStatus.currentProductInfo.selling_price }}</p>
+              </div>
+            </el-card>
+          </div>
+          <!-- 对话框 -->
+          <div class="bottom-items">
+            <el-button
+              circle
+              size="large"
+              :type="isRecording ? 'danger' : 'primary'"
+              @click="handleRecord"
+            >
+              <el-icon v-if="!isRecording">
+                <Microphone />
+              </el-icon>
+              <el-icon v-else>
+                <VideoPause />
+              </el-icon>
+            </el-button>
+            <el-input
+              v-model="inputValue"
+              style="width: 100%; border-radius: 8px; margin: 0px 10px 0px 10px"
+              :autosize="{ minRows: 2, maxRows: 12 }"
+              type="textarea"
+              placeholder="向主播提问"
+              :disabled="disableInput"
+              size="large"
+            />
+            <el-button circle @click="handelSendClick" size="large">
+              <el-icon>
+                <ChatDotRound />
+              </el-icon>
+            </el-button>
+          </div>
+          <div style="margin-top: 10px">
+            <div class="bottom-button">
+              <el-button
+                type="primary"
+                @click="handleNextProductClick"
+                v-show="!currentStatus.finalProduct"
+              >
+                下一个商品
+              </el-button>
+              <el-button type="danger" @click="handleOffLineClick">下播</el-button>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<style lang="scss" scoped>
+.bottom-items {
+  margin-top: 10px; // 距离上面的控件有一定的距离
+  display: flex;
+  align-items: center;
+  width: auto;
+}
+.bottom-button {
+  display: flex;
+  margin-top: 10px;
+  float: right;
+}
+::v-deep(.el-input__wrapper) {
+  border-radius: 14px;
+}
+.el-card {
+  margin-top: 10px;
+  border-radius: 10px;
+}
+.floating-card {
+  position: absolute;
+  right: 10px; /* 调整到右边的距离 */
+  bottom: 200px; /* 调整到底部的距离 */
+  z-index: 30; /* 确保 card 显示在最上层 */
+  width: 200px; /* 可以根据需要调整 */
+  .product-info {
+    display: flex;
+    flex-direction: column; /* 将子元素垂直排列 */
+    justify-content: center; /* 垂直居中 */
+    align-items: center; /* 水平居中 */
+    .title {
+      font-size: 18px;
+      font-weight: 600;
+    }
+    .content {
+      font-size: 15px;
+      color: #b1b3b8;
+    }
+    .price {
+      font-size: 16px;
+      color: #fda100;
+    }
+  }
+}
+</style>

frontend/src/views/streaming/StreamingRoomListView.vue ADDED Viewed

	@@ -0,0 +1,160 @@

+<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus/es'
+import { Plus, Delete } from '@element-plus/icons-vue'
+import {
+  type StreamingRoomInfo,
+  streamerRoomListRequest,
+  deleteStreamingRoomByIdRequest
+} from '@/api/streamingRoom'
+import { AxiosError } from 'axios'
+// 获取主播信息
+const streamingList = ref([] as StreamingRoomInfo[])
+const router = useRouter()
+onMounted(async () => {
+  try {
+    // 获取直播间信息
+    const { data } = await streamerRoomListRequest()
+    if (data.code === 0) {
+      streamingList.value = data.data
+      ElMessage.success('获取直播间信息成功')
+    } else {
+      ElMessage.error('获取直播间信息失败' + data.message)
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('获取直播间信息失败' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+})
+const DeleteStreamingRoom = async (id: number, productName: string) => {
+  ElMessageBox.confirm(`确定要删除 "${productName}" 吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(async () => {
+      const { data } = await deleteStreamingRoomByIdRequest(id)
+      if (data.code === 0) {
+        ElMessage.success('删除成功')
+        // 获取直播间信息
+        const { data } = await streamerRoomListRequest()
+        if (data.code === 0) {
+          streamingList.value = data.data
+          ElMessage.success('获取直播间信息成功')
+        }
+      } else {
+        ElMessage.error('删除失败')
+      }
+    })
+    .catch(() => {
+      ElMessage.error('删除失败')
+    })
+}
+const chunkArray = (array: StreamingRoomInfo[], chunkSize: number) => {
+  // 切割每 n 个为一行（即一个数组），方便后续进行 v-for 遍历
+  const result = []
+  for (let i = 0; i < array.length; i += chunkSize) {
+    result.push(array.slice(i, i + chunkSize))
+  }
+  return result
+}
+const chunkedArray = computed(() => chunkArray(streamingList.value, 4))
+const tagMap = { 0: '未开播', 1: '直播中', 2: '已下播' }
+</script>
+<template>
+  <div>
+    <div style="margin-bottom: 20px">
+      <el-button @click="router.push({ name: 'StreamingCreate' })" type="primary">
+        <el-icon style="margin-right: 5px">
+          <Plus />
+        </el-icon>
+        新建直播间
+      </el-button>
+    </div>
+    <div v-for="(row, rowIndex) in chunkedArray" :key="rowIndex" class="row">
+      <el-row :gutter="20">
+        <el-col v-for="(item, index) in row" :key="index" :span="8">
+          <el-card style="max-width: 480px">
+            <img :src="item.room_poster" style="width: 100%" />
+            <div class="title">
+              <h3>{{ item.name }}</h3>
+              <el-tag type="success" effect="light">
+                {{ tagMap[item.status.live_status as keyof typeof tagMap] }}
+              </el-tag>
+            </div>
+            <div>
+              <p>主播：{{ item.streamer_info.name }}</p>
+              <p>商品数：{{ item.product_list.length }}</p>
+              <p>
+                开播时间: {{ item.status.live_status === 1 ? item.status.start_time : '未开播' }}
+              </p>
+            </div>
+            <div class="bottom-button">
+              <el-button
+                type="primary"
+                @click="router.push({ name: 'StreamingEdit', params: { roomId: item.room_id } })"
+              >
+                编辑直播间
+              </el-button>
+              <el-button
+                type="primary"
+                :disabled="item.status.live_status !== 1"
+                @click="router.push({ name: 'StreamingOnAir', params: { roomId: item.room_id } })"
+              >
+                进入直播间
+              </el-button>
+              <el-button
+                type="danger"
+                :disabled="item.status.live_status === 1"
+                :icon="Delete"
+                @click="DeleteStreamingRoom(item.room_id, item.name)"
+              />
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.row {
+  margin-bottom: 20px;
+}
+.el-card {
+  padding: 20px;
+  border-radius: 20px;
+}
+.title {
+  display: flex;
+  justify-content: space-between;
+  .h3 {
+    font-size: 50px;
+    font-weight: 600;
+    margin: 24px 0px 8px 0px;
+  }
+}
+.bottom-button {
+  margin-top: 20px; // 距离上面的控件有一定的距离
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/src/views/streaming/StreamingRoomeEditView.vue ADDED Viewed

	@@ -0,0 +1,544 @@

+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Check, Warning, Edit } from '@element-plus/icons-vue'
+import {
+  roomDetailRequest,
+  roomPorductAddListRequest,
+  RoomCreadeOrEditRequest,
+  type RoomProductData,
+  type RoomDetailItem,
+  type StreamingRoomStatusItem,
+  type StreamingRoomProductList,
+  onAirRoomStartRequest
+} from '@/api/streamingRoom'
+import type { StreamerInfo } from '@/api/streamerInfo'
+import InfoDialogComponents from '@/components/InfoDialogComponents.vue'
+import { streamerInfoListRequest } from '@/api/streamerInfo'
+import StreamerInfoComponent from '@/components/StreamerInfoComponent.vue'
+import { AxiosError } from 'axios'
+const router = useRouter()
+// 定义 URL ID 传参
+const props = defineProps({
+  roomId: {
+    type: String,
+    default: '0'
+  }
+})
+// 信息弹窗显示标识
+const ShowItemInfo = ref()
+// 侧边栏
+const DrawerProductList = ref({} as RoomProductData)
+DrawerProductList.value.product_list = [] // 设置默认值
+DrawerProductList.value.totalSize = 0
+const currentPage = ref(1)
+const pageSize = ref(-1)
+const getProductInfo = async () => {
+  try {
+    // 调用接口获取商品缩略图用于抽屉
+    const { data } = await roomPorductAddListRequest(
+      RoomDetailInfo.value.room_id,
+      currentPage.value,
+      pageSize.value
+    )
+    if (data.code === 0) {
+      DrawerProductList.value = data.data
+      // 分页获取
+      // if (DrawerProductList.value.product.length === 0) {
+      //   DrawerProductList.value = data.data
+      // } else {
+      //   for (let i of data.data.product) {
+      //     // 根据返回数据继续添加商品
+      //     DrawerProductList.value.product.push(i)
+      //   }
+      //   DrawerProductList.value.currentPage = data.data.currentPage
+      //   DrawerProductList.value.pageSize = data.data.pageSize
+      //   DrawerProductList.value.totalSize = data.data.totalSize
+      // }
+      console.info(DrawerProductList.value)
+      ElMessage.success('获取商品成功')
+    } else {
+      ElMessage.error('获取商品失败：' + data.message)
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('获取商品失败：' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+}
+// 获取商品表格信息
+const RoomDetailInfo = ref({} as RoomDetailItem)
+RoomDetailInfo.value.streamer_info = {} as StreamerInfo
+RoomDetailInfo.value.streamer_info.streamer_id = 0
+RoomDetailInfo.value.pageSize = 10
+RoomDetailInfo.value.room_id = Number(props.roomId)
+RoomDetailInfo.value.product_list = [] as StreamingRoomProductList[]
+RoomDetailInfo.value.status = {} as StreamingRoomStatusItem
+const EditProductList = ref({} as RoomDetailItem)
+const getProductListInfo = async (currentPage: number, pageSize: number) => {
+  if (RoomDetailInfo.value.room_id === 0) {
+    return
+  }
+  try {
+    const { data } = await roomDetailRequest(
+      String(RoomDetailInfo.value.room_id),
+      currentPage,
+      pageSize
+    )
+    if (data.code === 0) {
+      console.info(data.data)
+      RoomDetailInfo.value = data.data
+    } else {
+      ElMessage.error('获取直播间详情失败' + data.message)
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('获取直播间详情失败' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+}
+// 获取主播信息
+const streamerNameOptions = ref([] as StreamerInfo[])
+const getSteramerInfo = async () => {
+  try {
+    // 获取主播信息
+    const { data } = await streamerInfoListRequest()
+    if (data.code === 0) {
+      streamerNameOptions.value = data.data
+      ElMessage.success('获取主播信息成功')
+    } else {
+      ElMessage.error('获取主播信息失败' + data.message)
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('获取主播信息失败' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+}
+onMounted(() => {
+  // 获取商品表格信息
+  getProductListInfo(1, 10)
+  // 获取主播信息
+  getSteramerInfo()
+})
+// 新增商品
+const handelAddProductClick = async () => {
+  // 先保存商品，防止文案 or 数字人视频丢失
+  // onSubmit()
+  drawerShow.value = true
+  getProductInfo()
+}
+const drawerShow = ref(false)
+function cancelClick() {
+  drawerShow.value = false
+}
+async function confirmClick() {
+  EditProductList.value = RoomDetailInfo.value
+  EditProductList.value.product_list = DrawerProductList.value.product_list
+  EditProductList.value.streamer_id = RoomDetailInfo.value.streamer_info.streamer_id
+  console.log(EditProductList.value)
+  try {
+    // 调用接口更新选择的商品
+    const { data } = await RoomCreadeOrEditRequest(EditProductList.value)
+    if (data.code === 0) {
+      // 新建会返回直播间后台保存 ID
+      RoomDetailInfo.value.room_id = data.data
+      ElMessage.success('操作成功')
+    } else {
+      ElMessage.error('操作失败' + data.message)
+    }
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('操作失败' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+  drawerShow.value = false
+  // 重新获取
+  getProductListInfo(1, 10)
+}
+// 保存
+const onSubmit = async () => {
+  try {
+    // 调用接口保存商品
+    await RoomCreadeOrEditRequest(RoomDetailInfo.value)
+    ElMessage.success('保存成功')
+  } catch (error: unknown) {
+    if (error instanceof AxiosError) {
+      ElMessage.error('保存失败' + error.message)
+    } else {
+      ElMessage.error('未知错误：' + error)
+    }
+  }
+}
+const handelOnAirClick = async () => {
+  for (const entry of RoomDetailInfo.value.product_list) {
+    if (entry.start_video === '') {
+      ElMessage.error('必须将所有的商品都生成数字人视频才可以进行开播')
+      return false
+    }
+  }
+  // 保存商品信息
+  await onSubmit()
+  if (RoomDetailInfo.value.status.live_status !== 1) {
+    try {
+      // 调用接口执行开播
+      await onAirRoomStartRequest(RoomDetailInfo.value.room_id)
+      ElMessage.success('开播成功')
+    } catch (error: unknown) {
+      if (error instanceof AxiosError) {
+        ElMessage.error('开播成功' + error.message)
+      } else {
+        ElMessage.error('未知错误：' + error)
+      }
+    }
+  }
+  router.push({ name: 'StreamingOnAir', params: { roomId: String(RoomDetailInfo.value.room_id) } })
+}
+// 每个物品的点击按钮
+const handelControlClick = (
+  titleName: string,
+  itemType: string,
+  itemValue: string,
+  productId: number,
+  streamerId: number,
+  salesDoc: string
+) => {
+  console.info(itemType)
+  console.info(itemValue)
+  ShowItemInfo.value.showItemInfoDialog(
+    titleName,
+    itemType,
+    itemValue,
+    productId,
+    streamerId,
+    salesDoc
+  )
+}
+</script>
+<template>
+  <div>
+    <!-- 返回栏 -->
+    <el-page-header @back="router.push({ name: 'StreamingOverview' })" title="返回">
+      <template #content>
+        <div class="flex items-center">
+          <span class="text-large font-600 mr-3">
+            {{ RoomDetailInfo.room_id !== 0 ? '编辑' : '新建' }} 直播间
+          </span>
+        </div>
+      </template>
+    </el-page-header>
+    <!-- 新增窗口右边抽屉弹窗 -->
+    <el-drawer v-model="drawerShow" direction="rtl">
+      <template #header>
+        <h1>添加商品</h1>
+      </template>
+      <template #default>
+        <div>
+          <ul class="product-list">
+            <li
+              v-for="item in DrawerProductList.product_list"
+              :key="item.product_id"
+              style="margin-bottom: 10px"
+            >
+              <el-checkbox-button
+                v-model="item.selected"
+                size="large"
+                border
+                class="item-checkbox-button"
+              >
+                <el-card shadow="never">
+                  <el-row :gutter="0">
+                    <el-col :span="6">
+                      <el-image
+                        style="width: 80px; height: 80px"
+                        :src="item.product_info.image_path"
+                        fit="contain"
+                      />
+                    </el-col>
+                    <el-col :span="18">
+                      <div class="product-info">
+                        <p class="title">{{ item.product_info.product_name }}</p>
+                        <p class="content">{{ item.product_info.heighlights }}</p>
+                        <p class="price">￥{{ item.product_info.selling_price }}</p>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </el-card>
+              </el-checkbox-button>
+            </li>
+          </ul>
+        </div>
+      </template>
+      <template #footer>
+        <div style="flex: auto">
+          <el-button @click="cancelClick">取消</el-button>
+          <el-button type="primary" @click="confirmClick">确认</el-button>
+        </div>
+      </template>
+    </el-drawer>
+    <el-card shadow="never" style="margin-top: 10px">
+      <h2>直播间名称</h2>
+      <el-divider />
+      <el-input v-model="RoomDetailInfo.name" size="large" />
+    </el-card>
+    <el-card shadow="never">
+      <StreamerInfoComponent
+        :disable-change="true"
+        v-model="RoomDetailInfo.streamer_info"
+        :optionList="streamerNameOptions"
+      />
+    </el-card>
+    <el-card shadow="never">
+      <el-button
+        type="primary"
+        style="margin-bottom: 15px"
+        @click="handelAddProductClick"
+        size="large"
+        round
+      >
+        <el-icon style="margin-right: 5px">
+          <Edit />
+        </el-icon>
+        增删商品
+      </el-button>
+      <!-- TODO 商品表格可以做成 component 组件 -->
+      <el-table :data="RoomDetailInfo.product_list" max-height="1000" border>
+        <el-table-column prop="product_info.product_id" label="ID" align="center" width="50px" />
+        <el-table-column prop="product_info.image_path" label="图片" align="center">
+          <template #default="scope">
+            <div style="display: flex; align-items: center">
+              <!-- TODO 加上  :preview-src-list="[scope.row.image_path]"  -->
+              <el-image :src="scope.row.product_info.image_path" />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="product_info.product_name" label="名称" align="center" />
+        <el-table-column prop="product_info.product_class" label="分类" align="center" />
+        <el-table-column prop="product_info.heighlights" label="亮点" align="center" />
+        <el-table-column prop="product_info.selling_price" label="价格" align="center" />
+        <el-table-column prop="product_info.amount" label="库存" align="center" />
+        <el-table-column prop="product_info.departure_place" label="发货地" align="center" />
+        <el-table-column prop="product_info.delivery_company" label="快递公司" align="center" />
+        <el-table-column prop="product_info.upload_date" label="上传时间" align="center" />
+        <el-table-column label="操作" v-slot="{ row }" align="center" width="400px">
+          <div class="control-item">
+            <el-button
+              size="small"
+              :type="row.product_info.instruction !== '' ? 'success' : 'warning'"
+              :icon="row.product_info.instruction !== '' ? Check : Warning"
+              @click="
+                handelControlClick(
+                  row.product_info.product_name,
+                  'Instruction',
+                  row.product_info.instruction,
+                  row.product_id,
+                  RoomDetailInfo.streamer_info.streamer_id,
+                  row.sales_doc
+                )
+              "
+            >
+              说明书
+            </el-button>
+            <el-button
+              size="small"
+              v-model="row.sales_doc"
+              :type="row.sales_doc !== '' ? 'success' : 'warning'"
+              :icon="row.sales_doc !== '' ? Check : Warning"
+              @click="
+                handelControlClick(
+                  row.product_info.product_name,
+                  'SalesDoc',
+                  row.sales_doc,
+                  row.product_id,
+                  RoomDetailInfo.streamer_info.streamer_id,
+                  row.sales_doc
+                )
+              "
+            >
+              解说文案
+            </el-button>
+            <el-button
+              size="small"
+              v-model="row.start_video"
+              :type="row.start_video !== '' ? 'success' : 'warning'"
+              :icon="row.start_video !== '' ? Check : Warning"
+              @click="
+                handelControlClick(
+                  row.product_info.product_name,
+                  'DigitalHuman',
+                  row.start_video,
+                  row.product_id,
+                  RoomDetailInfo.streamer_info.streamer_id,
+                  row.sales_doc
+                )
+              "
+            >
+              数字人视频
+            </el-button>
+            <el-button
+              size="small"
+              @click="router.push({ name: 'ProductEdit', params: { productId: row.product_id } })"
+            >
+              编辑
+            </el-button>
+          </div>
+        </el-table-column>
+      </el-table>
+      <!-- 信息弹窗 -->
+      <InfoDialogComponents ref="ShowItemInfo" v-model="RoomDetailInfo.product_list" />
+      <template #footer>
+        <div class="bottom-item">
+          <el-pagination
+            v-model:current-page="RoomDetailInfo.currentPage"
+            v-model:page-size="RoomDetailInfo.pageSize"
+            :page-sizes="[5, 10, 15, 20]"
+            :background="true"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="RoomDetailInfo.totalSize || 0"
+            @size-change="(pageSize: number) => getProductListInfo(1, pageSize)"
+            @current-change="
+              (currentPage: number) => getProductListInfo(currentPage, RoomDetailInfo.pageSize)
+            "
+          />
+          <div>
+            <el-button
+              type="success"
+              @click="handelOnAirClick"
+              :disable="RoomDetailInfo.room_id === 0"
+            >
+              {{ RoomDetailInfo.status.live_status === 1 ? '进入' : '开始' }}直播</el-button
+            >
+            <el-button
+              type="primary"
+              @click="onSubmit"
+              :disabled="RoomDetailInfo.product_list.length === 0"
+              >保存</el-button
+            >
+          </div>
+        </div>
+      </template>
+    </el-card>
+  </div>
+</template>
+<style lang="scss" scoped>
+.bottom-item {
+  margin-top: 10px; // 距离上面的控件有一定的距离
+  display: flex;
+  justify-content: space-between; // 将两个 div 放置在页面的两侧
+  align-items: center;
+}
+.product-list {
+  padding-left: 0; /* 去掉默认的缩进 */
+  margin: 0; /* 去掉默认的外边距 */
+  list-style-type: none; /* 去掉列表项前的默认圆点 */
+  .ul {
+    list-style-type: none;
+    padding-left: 0; /* 去掉默认的缩进 */
+  }
+}
+.el-card {
+  margin-bottom: 20px;
+  padding: 20px;
+  border-radius: 20px;
+}
+::v-deep(.el-input__wrapper) {
+  border-radius: 14px;
+}
+.item-checkbox-button {
+  ::v-deep(.el-checkbox-button__inner) {
+    border-radius: 20px; /* 设置 checkbox button 圆角大小 */
+    line-height: 0;
+    text-align: left;
+    padding: 5px 5px;
+  }
+  .el-card__body {
+    padding: 0px !important;
+  }
+  .el-card {
+    margin: 0px;
+    width: 450px;
+    height: 120px;
+    padding: 0px;
+    .product-info {
+      display: flex;
+      flex-direction: column; /* 将子元素垂直排列 */
+      margin-left: 10px;
+      .title {
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .content {
+        font-size: 12px;
+        color: #b1b3b8;
+      }
+      .price {
+        font-size: 12px;
+        color: #fda100;
+      }
+    }
+  }
+}
+</style>

frontend/src/views/system/SystemPluginsView.vue ADDED Viewed

	@@ -0,0 +1,89 @@

+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getSystemPluginsInfoRequest, type SystemPluginsInfo } from '@/api/system'
+const pluginsInfo = ref([] as SystemPluginsInfo[])
+onMounted(async () => {
+  // 获取组件信息
+  const { data } = await getSystemPluginsInfoRequest()
+  if (data.code === 0) {
+    pluginsInfo.value = data.data
+    ElMessage.success('获取组件信息成功')
+  } else {
+    ElMessage.error(data.message)
+  }
+})
+</script>
+<template>
+  <div class="plugin-item">
+    <el-card v-for="(item, index) in pluginsInfo" :key="index" shadow="hover">
+      <el-row :gutter="5">
+        <el-col :span="4">
+          <div class="plugins-ico">
+            <el-avatar shape="square" :size="60" :style="{ backgroundColor: item.avatar_color }">
+              {{ item.plugin_name }}
+            </el-avatar>
+          </div>
+        </el-col>
+        <el-col :span="20">
+          <div class="item-content">
+            <div>
+              <p class="title">{{ item.plugin_name }}</p>
+              <p class="content">{{ item.describe }}</p>
+            </div>
+            <div>
+              <el-tag size="large" effect="dark" :type="item.enabled ? 'success' : 'danger'">
+                {{ item.enabled ? '已启动' : '未启动' }}
+              </el-tag>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+<style lang="scss" scoped>
+.el-card {
+  width: 800px;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  border-radius: 20px;
+}
+.plugin-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.plugins-ico {
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  height: 100%; /* 设置父容器的高度，可以根据需要调整 */
+  font-weight: 600;
+}
+.item-content {
+  display: flex;
+  justify-content: space-between; // 将两个 div 放置在页面的两侧
+  align-items: center;
+  .title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+  .content {
+    font-size: 15px;
+    color: #b1b3b8;
+  }
+}
+</style>