feat: 新增数字人管理

src/assets/css/text-creation-common.css

+/* 文本创作中心通用样式 */
+
+/* ========== 页面布局 ========== */
+.text-creation-page {
+  padding: 0;
+  margin-top: 0;
+  border: none;
+  border-top: none !important;
+  border-bottom: none !important;
+  box-shadow: none !important;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+  padding: 0;
+  border: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  box-shadow: none !important;
+  background-image: none !important;
+}
+
+.page-header::after,
+.page-header::before,
+.page-nav::after,
+.page-nav::before,
+.page-nav h2::after,
+.page-nav h2::before,
+.text-creation-page::after,
+.text-creation-page::before {
+  display: none !important;
+  content: none !important;
+  border: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  background: none !important;
+  background-image: none !important;
+  height: 0 !important;
+  width: 0 !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+}
+
+.page-nav {
+  border: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  background-image: none !important;
+}
+
+.page-nav h2 {
+  font-size: 22px;
+  color: #333;
+  margin: 0;
+  border: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  padding-bottom: 0;
+  position: relative;
+  background-image: none !important;
+  text-decoration: none !important;
+}
+
+.page-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ========== 主容器和布局 ========== */
+.main-container {
+  display: flex;
+  gap: 15px;
+  margin-top: 5px;
+}
+
+.input-section {
+  width: 45%;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  padding: 12px;
+}
+
+.right-column {
+  width: 55%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* ========== 通用区块 ========== */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 16px;
+  background-color: #fff;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  color: var(--primary-color, #ba003f);
+  font-size: 16px;
+  margin: 0 0 10px 0;
+  font-weight: 600;
+}
+
+.section-title i {
+  margin-right: 8px;
+  font-size: 20px;
+  color: var(--primary-color, #ba003f);
+}
+
+/* ========== 表单元素样式 ========== */
+.form-row {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.form-group {
+  flex: 1;
+  margin-bottom: 12px;
+  border-bottom: none !important;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+/* 修改这条规则，它会导致表单标签文字在悬停时变色 */
+/* .form-group:hover label {
+  color: var(--primary-color, #ba003f);
+} */
+
+/* 添加修改后的规则 */
+.form-group:hover label.form-control-label {
+  color: var(--primary-color, #ba003f);
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #444;
+  font-size: 14px;
+  transition: color 0.3s ease;
+}
+
+.required:after {
+  content: ' *';
+  color: var(--primary-color, #ba003f);
+}
+
+.form-control {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: border-color 0.3s;
+}
+
+.form-control:focus {
+  border-color: var(--primary-color, #ba003f);
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(186, 0, 63, 0.1);
+}
+
+textarea.form-control {
+  min-height: 100px;
+  resize: vertical;
+  line-height: 1.5;
+  background-color: #fafafa;
+}
+
+textarea.form-control:focus {
+  background-color: #fff;
+}
+
+/* ========== 下拉菜单样式 ========== */
+select.form-control {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
+  background-repeat: no-repeat;
+  background-position: calc(100% - 12px) center;
+  background-size: 12px;
+  padding-right: 32px;
+  cursor: pointer;
+  transition: all 0.3s;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+select.form-control:hover {
+  border-color: #bbb;
+  background-color: #f9f9f9;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
+}
+
+select.form-control:focus {
+  border-color: var(--primary-color, #ba003f);
+  box-shadow: 0 0 0 3px rgba(186, 0, 63, 0.1);
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ba003f' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
+}
+
+select.form-control option {
+  font-weight: normal;
+  background-color: white;
+  color: #333;
+  padding: 8px;
+}
+
+/* ========== 复选框样式 ========== */
+.checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 10px;
+}
+
+.checkbox-item {
+  position: relative;
+  background: #fff;
+  border-radius: 30px;
+  border: 1px solid #eee;
+  transition: all 0.2s ease;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  display: flex;
+  align-items: center;
+}
+
+.checkbox-item:hover {
+  border-color: #ddd;
+  transform: translateY(-2px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.checkbox-active {
+  background-color: var(--primary-color, #ba003f);
+  border-color: var(--primary-color, #ba003f);
+}
+
+.checkbox-active .checkbox-label {
+  color: #fff;
+}
+
+.checkbox-label {
+  display: block;
+  padding: 4px 18px;
+  margin: 0;
+  font-weight: normal;
+  cursor: pointer;
+  color: #444;
+  font-size: 14px;
+  transition: color 0.2s;
+  text-align: center;
+  line-height: 1.5;
+}
+
+/* 移除这两条规则，以防止它们被激活或干扰其他规则 */
+/* .checkbox-item:hover .checkbox-label {
+  color: #444;
+} */
+
+/* .checkbox-active:hover .checkbox-label {
+  color: #fff;
+} */
+
+/* 添加明确的规则来阻止任何颜色变化 */
+.checkbox-item:hover:not(.checkbox-active) .checkbox-label {
+  color: #444 !important; /* 使用!important确保优先级 */
+}
+
+.checkbox-active:hover .checkbox-label {
+  color: #ffffff !important; /* 使用!important确保优先级 */
+}
+
+.checkbox-item input[type='checkbox'] {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* ========== 单选框样式 ========== */
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.radio-item {
+  position: relative;
+  background-color: #fcf2f5;
+  border-radius: 20px;
+  border: 1px solid #f9e0e7;
+  transition: all 0.3s ease;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(186, 0, 63, 0.05);
+}
+
+.radio-item:hover {
+  background-color: #f9e0e7;
+  transform: translateY(-2px);
+  box-shadow: 0 3px 6px rgba(186, 0, 63, 0.1);
+}
+
+.radio-active {
+  background-color: var(--primary-color, #ba003f);
+  border-color: var(--primary-color, #ba003f);
+}
+
+.radio-active .radio-label {
+  color: #fff;
+}
+
+.radio-label {
+  display: block;
+  padding: 8px 14px;
+  margin: 0;
+  font-weight: 500;
+  cursor: pointer;
+  color: #555;
+  font-size: 14px;
+  transition: color 0.3s;
+  position: relative;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.radio-item input[type='radio'] {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* ========== 按钮样式 ========== */
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  margin-top: 15px;
+}
+
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: 54px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+}
+
+.btn i {
+  font-size: 16px;
+}
+
+/* 紧凑型按钮样式 */
+.btn-compact {
+  height: 27px;
+  padding: 0 24px;
+  font-size: 12px;
+}
+
+.btn-compact i {
+  font-size: 14px;
+}
+
+/* 紧凑型小按钮样式 */
+.btn-compact-sm {
+  height: 24px;
+  padding: 0 12px;
+  font-size: 12px;
+  min-width: 60px;
+}
+
+.btn-compact-sm i {
+  font-size: 13px;
+}
+
+.btn-primary {
+  background-color: var(--primary-color, #ba003f);
+  color: white;
+  flex: 1;
+}
+
+.btn-primary:hover {
+  background-color: #980034;
+  box-shadow: 0 4px 12px rgba(186, 0, 63, 0.2);
+  transform: translateY(-2px);
+}
+
+.btn-primary:active {
+  transform: scale(0.96);
+}
+
+.btn-primary:disabled {
+  background-color: #ddd;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  background-color: #f5f5f5;
+  color: #333;
+  border: 1px solid #eee;
+}
+
+.btn-secondary:hover {
+  background-color: #e5e5e5;
+  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.15);
+  transform: translateY(-2px);
+}
+
+.btn-secondary:active {
+  transform: scale(0.96);
+}
+
+/* ========== 功能按钮样式 ========== */
+.learn-button {
+  background-color: var(--primary-color, #ba003f);
+  color: white;
+  border: none;
+  padding: 6px 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  height: auto;
+}
+
+.learn-button:hover {
+  background-color: #980034;
+}
+
+.learn-button i {
+  font-size: 16px;
+  margin-right: 0;
+}
+
+.action-button {
+  background: none;
+  border: 1px solid #eee;
+  color: #666;
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  transition: all 0.2s ease;
+}
+
+.action-button:hover {
+  color: var(--primary-color, #ba003f);
+  background-color: #f8f8f8;
+  border-color: #ddd;
+  transform: translateY(-1px);
+}
+
+.action-button i {
+  font-size: 16px;
+}
+
+.primary-button {
+  background-color: var(--primary-color, #ba003f);
+  color: white;
+  border: none;
+  padding: 6px 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+}
+
+.primary-button:hover {
+  background-color: #980034;
+}
+
+.secondary-button {
+  background-color: #f5f5f5;
+  color: #333;
+  border: 1px solid #eee;
+  padding: 6px 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+}
+
+.secondary-button:hover {
+  background-color: #e5e5e5;
+}
+
+/* 禁用状态 */
+.primary-button:disabled,
+.secondary-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: #ccc;
+  color: #666;
+  border-color: #ccc;
+}
+
+.primary-button:disabled:hover {
+  background-color: #ccc;
+  transform: none;
+  box-shadow: none;
+}
+
+.secondary-button:disabled:hover {
+  background-color: #f5f5f5;
+  transform: none;
+}
+
+/* ========== 内容展示区域 ========== */
+.result-section {
+  flex: 1;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.result-content-wrapper {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 300px;
+}
+
+/* ========== 数据表格样式 ========== */
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.data-table th,
+.data-table td {
+  padding: 12px 16px;
+  text-align: center;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.data-table th {
+  background-color: #f9f9f9;
+  color: #333;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.data-table tr:hover {
+  background-color: #f9f9f9;
+}
+
+.data-table td .tag {
+  text-align: center;
+}
+
+.operations {
+  white-space: nowrap;
+  min-width: 200px;
+}
+
+.operation-buttons {
+  display: flex;
+  justify-content: flex-start;
+  gap: 8px;
+}
+
+.table-button {
+  margin-right: 8px;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  color: #fff;
+  background-color: #ba003f;
+}
+
+.table-button.edit {
+  background-color: #409eff;
+}
+
+.table-button.view {
+  background-color: #67c23a;
+}
+
+.table-button.delete {
+  background-color: #f56c6c;
+}
+
+.tag {
+  display: inline-block;
+  padding: 2px 6px;
+  margin-right: 6px;
+  background-color: #f0f2f5;
+  color: #606266;
+  font-size: 12px;
+  border-radius: 4px;
+}
+
+.empty-data {
+  text-align: center;
+  padding: 30px;
+  color: #909399;
+}
+
+.section-content {
+  margin-bottom: 20px;
+}
+
+/* ========== 分页样式 ========== */
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+}
+
+.pagination-button {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  color: #606266;
+  border-radius: 4px;
+  cursor: pointer;
+  margin: 0 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pagination-button:disabled {
+  cursor: not-allowed;
+  color: #c0c4cc;
+}
+
+.page-info {
+  margin: 0 10px;
+  font-size: 14px;
+  color: #606266;
+}
+
+.page-size-selector {
+  margin-left: 15px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #606266;
+}
+
+.page-size-selector select {
+  margin: 0 5px;
+  padding: 2px 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+
+/* ========== 表单宽度变体 ========== */
+.form-group-wide {
+  flex: 2;
+}
+
+.form-group-medium {
+  flex: 1.5;
+}
+
+/* ========== 按钮类型变体 ========== */
+.btn-danger {
+  background-color: #f56c6c;
+  color: white;
+  border: none;
+}
+
+.btn-danger:hover {
+  background-color: #f78989;
+  transform: translateY(-1px);
+}
+
+/* ========== 空状态样式 ========== */
+.empty-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 350px;
+  background-color: #fff;
+  border-radius: 8px;
+  color: #666;
+  text-align: center;
+}
+
+.empty-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 30px;
+}
+
+.empty-image {
+  width: 120px;
+  height: 120px;
+  margin-bottom: 20px;
+}
+
+.empty-message {
+  margin: 0 0 20px;
+  font-size: 16px;
+  color: #666;
+}
+
+/* ========== 加载状态样式 ========== */
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.8);
+  z-index: 5;
+  border-radius: 0 0 8px 8px;
+}
+
+.loading-spinner {
+  width: 50px;
+  height: 50px;
+  border: 5px solid rgba(186, 0, 63, 0.1);
+  border-radius: 50%;
+  border-top-color: var(--primary-color, #ba003f);
+  animation: spin 1s ease-in-out infinite;
+  margin: 0 auto 20px;
+}
+
+.loading-text {
+  font-size: 16px;
+  color: var(--primary-color, #ba003f);
+  font-weight: 500;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.spinning {
+  animation: spin 1.5s linear infinite;
+  display: inline-block;
+}
+
+.blur-content {
+  filter: blur(1px);
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* ========== 模态框样式 ========== */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background-color: #fff;
+  border-radius: 8px;
+  width: 80%;
+  max-width: 800px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
+  animation: modal-pop 0.3s ease-out;
+}
+
+@keyframes modal-pop {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.modal-header h3 i {
+  color: var(--primary-color, #ba003f);
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: #666;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.modal-body {
+  padding: 20px;
+  overflow-y: auto;
+  max-height: calc(80vh - 60px);
+}
+
+/* ========== 知识学习侧边栏 ========== */
+.knowledge-drawer :deep(.el-drawer__header) {
+  margin-bottom: 0;
+  padding: 15px 20px;
+  border-bottom: 1px solid #eaeaea;
+  color: #ba003f;
+  font-weight: bold;
+}
+
+.knowledge-drawer :deep(.el-drawer__title) {
+  font-size: 18px;
+  color: #ba003f;
+}
+
+.knowledge-content {
+  padding: 20px;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.knowledge-section {
+  margin-bottom: 25px;
+}
+
+.knowledge-subtitle {
+  color: #ba003f;
+  margin-top: 0;
+  margin-bottom: 12px;
+  font-size: 18px;
+  font-weight: 600;
+  border-bottom: 1px solid rgba(186, 0, 63, 0.2);
+  padding-bottom: 8px;
+  display: flex;
+  align-items: center;
+}
+
+.knowledge-text {
+  font-size: 15px;
+  line-height: 1.6;
+  color: #333;
+}
+
+.knowledge-text strong {
+  color: #ba003f;
+  font-weight: 600;
+}
+
+.knowledge-text ul {
+  padding-left: 20px;
+  margin: 10px 0;
+}
+
+.knowledge-text li {
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+
+.knowledge-icon {
+  display: inline-block;
+  margin-right: 8px;
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
+  border-radius: 50%;
+  background-color: rgba(186, 0, 63, 0.1);
+  color: #ba003f;
+  font-size: 16px;
+  vertical-align: middle;
+}
+
+/* ========== 响应式布局 ========== */
+@media (max-width: 992px) {
+  .main-container {
+    flex-direction: column;
+  }
+
+  .input-section,
+  .right-column {
+    width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .knowledge-drawer :deep(.el-drawer) {
+    width: 90% !important;
+  }
+
+  .form-row {
+    flex-direction: column;
+  }
+}
+
+/* ========== 参考案例样式 ========== */
+.examples-section {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  padding: 15px;
+  margin-bottom: 0; /* 移除底部边距 */
+}
+
+.examples-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.example-carousel {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding-bottom: 5px; /* 添加底部间距避免阴影被裁剪 */
+}
+
+.example-cards {
+  display: flex;
+  gap: 20px; /* 增加卡片间距 */
+  transition: transform 0.3s ease;
+  will-change: transform;
+  padding: 5px 0;
+  width: max-content; /* 确保足够宽以容纳所有内容 */
+}
+
+.example-card {
+  flex: 0 0 220px; /* 增加卡片宽度 */
+  height: auto; /* 改为自适应高度 */
+  min-height: 120px; /* 设置最小高度 */
+  margin-right: 10px;
+  cursor: pointer;
+  position: relative;
+  border-radius: 12px;
+  background: white;
+  transition: all 0.3s;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #eee;
+}
+
+.example-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
+  border-color: var(--primary-color, #ba003f);
+}
+
+/* 卡片头部区域 - 顶部固定部分 */
+.example-card-header {
+  position: relative;
+  background: linear-gradient(to right, rgba(186, 0, 63, 0.02), rgba(186, 0, 63, 0.08));
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  align-items: flex-start; /* 改为顶部对齐，适合多行标题 */
+  gap: 15px;
+  min-height: 85px;
+}
+
+/* 图标样式 */
+.example-icon {
+  width: 55px;
+  height: 55px;
+  min-width: 55px;
+  background-color: rgba(186, 0, 63, 0.1);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  box-shadow: 0 3px 6px rgba(186, 0, 63, 0.1);
+}
+
+.example-icon i,
+.example-icon svg {
+  font-size: 26px;
+  color: var(--primary-color, #ba003f);
+  display: inline-block; /* 确保图标可见 */
+  line-height: 1; /* 修正行高，防止图标被裁剪 */
+}
+
+/* 标题区域 */
+.example-info {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.example-title {
+  font-weight: 600;
+  font-size: 16px;
+  color: #222;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  transition: all 0.3s;
+  flex: 1;
+  min-height: 42px; /* 确保有足够的高度容纳两行文字 */
+}
+
+.example-desc {
+  font-size: 14px;
+  color: #666;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  white-space: normal;
+  line-height: 1.5;
+}
+
+/* 卡片内容区域 - 底部描述部分，无内容时隐藏 */
+.example-content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  flex: 1;
+  min-height: 60px;
+  transition: all 0.3s ease;
+}
+
+.example-content:empty {
+  display: none;
+}
+
+.example-detail {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #444;
+  display: -webkit-box;
+  -webkit-line-clamp: 3; /* 默认显示3行 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  position: relative;
+  margin-bottom: 5px; /* 添加底部边距 */
+  transition: all 0.3s ease;
+}
+
+/* 移除渐变遮罩，在文本末尾添加省略号 */
+.example-detail::after {
+  display: none; /* 移除渐变遮罩 */
+}
+
+/* 卡片悬停效果优化 */
+.example-card:hover .example-detail {
+  -webkit-line-clamp: 8; /* 悬停时显示更多行 */
+  color: #333; /* 文字颜色加深 */
+}
+
+/* 添加更好的内容展开交互 */
+.example-card:hover .example-content {
+  background-color: #fafafa; /* 轻微背景色变化 */
+}
+
+/* 当描述为空时隐藏卡片内容部分 */
+.example-detail:empty {
+  display: none;
+}
+
+/* 标签区域 */
+.example-tags {
+  padding: 0 16px 16px;
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.example-tag {
+  padding: 4px 10px;
+  background-color: rgba(186, 0, 63, 0.08);
+  color: var(--primary-color, #ba003f);
+  border-radius: 20px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+/* 标签为空时隐藏 */
+.example-tags:empty {
+  display: none;
+  padding: 0;
+}
+
+/* 鼠标悬停时的动画效果 */
+.example-card:hover .example-title {
+  color: var(--primary-color, #ba003f);
+}
+
+.example-card:hover .example-detail::after {
+  opacity: 0.5;
+}
+
+/* 轮播控制样式 */
+.example-carousel {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding-bottom: 15px; /* 增加底部边距以适应更大的卡片阴影 */
+}
+
+.example-cards {
+  display: flex;
+  gap: 25px; /* 增加间距 */
+  transition: transform 0.4s ease;
+  will-change: transform;
+  padding: 10px 0;
+  width: max-content;
+}
+
+.carousel-controls {
+  display: flex;
+  gap: 8px;
+}
+
+.carousel-control {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: white;
+  border: 1px solid #eee;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.carousel-control i {
+  font-size: 20px;
+  color: #666;
+  display: inline-block; /* 确保图标可见 */
+  line-height: 1; /* 修正行高 */
+}
+
+.carousel-control:hover {
+  background-color: rgba(186, 0, 63, 0.05);
+  border-color: var(--primary-color, #ba003f);
+}
+
+.carousel-control:hover i {
+  color: var(--primary-color, #ba003f);
+}
+
+.carousel-control.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 大尺寸示例卡片 */
+.example-card-large {
+  display: flex;
+  flex-direction: column;
+  height: 400px; /* 比标准卡片高度高一倍 */
+  min-width: 300px; /* 更宽的最小宽度 */
+  max-width: 400px;
+  background-color: white;
+  border-radius: 8px;
+  border: 1px solid #eaeaea;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.example-card-large:hover {
+  border-color: var(--primary-color, #ba003f);
+  box-shadow: 0 4px 12px rgba(186, 0, 63, 0.15);
+  height: auto; /* 悬停时可以自动调整高度 */
+}
+
+.example-card-large .example-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 30px;
+  background-color: rgba(186, 0, 63, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 15px;
+}
+
+.example-card-large .example-icon i,
+.example-card-large .example-icon svg {
+  font-size: 32px;
+}
+
+.example-card-large .example-title {
+  font-size: 18px;
+  margin-bottom: 10px;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.example-card-large .example-desc {
+  font-size: 15px;
+  white-space: normal;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.example-card-large .example-content {
+  padding: 20px;
+  max-height: 250px; /* 增加内容区域的高度 */
+}
+
+.example-card-large .example-detail {
+  -webkit-line-clamp: 8; /* 显示更多行 */
+  font-size: 15px;
+}
+
+.example-card-large .example-tags {
+  padding: 0 20px 20px;
+}
+
+.example-card-large .example-tag {
+  padding: 5px 12px;
+  font-size: 13px;
+}
+
+/* 大尺寸卡片的轮播样式调整 */
+.example-cards-large {
+  display: flex;
+  gap: 30px;
+  transition: transform 0.4s ease;
+  will-change: transform;
+  padding: 15px 0;
+  width: max-content;
+}
+
+/* ========== AI应用案例编辑特有样式 ========== */
+
+/* 标签预览区域 */
+.tags-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+
+/* 编辑表单容器 */
+.edit-form-container {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+}
+
+/* 错误信息提示 */
+.error-message {
+  color: #f56c6c;
+  font-size: 12px;
+  margin-top: 5px;
+}
+
+/* 按钮与输入框的容器样式 */
+.form-group > div {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* 案例封面上传样式 */
+.cover-upload-container {
+  margin-top: 10px;
+  width: 100%;
+}
+
+.cover-preview {
+  position: relative;
+  width: 320px;
+  height: 180px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.cover-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.cover-remove-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.6);
+  border: none;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 16px;
+  transition: all 0.2s;
+}
+
+.cover-remove-btn:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.cover-upload {
+  width: 320px;
+  height: 180px;
+  border: 2px dashed #dcdfe6;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.cover-upload-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: #909399;
+  cursor: pointer;
+}
+
+.cover-upload-button i {
+  font-size: 32px;
+}
+
+/* 文件上传样式 */
+.file-upload-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.file-input {
+  display: none;
+}
+
+.file-upload-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 8px 16px;
+  background-color: #f5f5f5;
+  color: #333;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.file-upload-button:hover {
+  background-color: #e8e8e8;
+  border-color: #ccc;
+}
+
+.file-name {
+  margin-left: 12px;
+  color: #606266;
+  font-size: 14px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.upload-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 5px;
+}
+
+.uploaded-files {
+  margin-top: 15px;
+}
+
+.uploaded-file {
+  display: flex;
+  align-items: center;
+  background-color: #f9f9f9;
+  padding: 8px 12px;
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.file-icon {
+  margin-right: 10px;
+  color: #409eff;
+  font-size: 18px;
+}
+
+.file-info {
+  flex: 1;
+  font-size: 14px;
+  color: #606266;
+}
+
+/* 红色危险按钮样式 */
+.btn-danger {
+  background-color: #f56c6c;
+  color: white;
+  border: none;
+}
+
+.btn-danger:hover {
+  background-color: #f78989;
+}
+
+/* 绿色成功按钮样式 */
+.btn-success {
+  background-color: #67c23a;
+  color: white;
+  border: none;
+}
+
+.btn-success:hover {
+  background-color: #73d13d;
+}
+
+/* AI设计案例提示词工程样式 */
+.prompt-section {
+  margin-bottom: 20px;
+}
+
+.prompt-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.radio-group {
+  display: flex;
+  gap: 10px;
+}
+
+.radio-label {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+/* 紫荆红色单选框样式 */
+.radio-label input[type='radio'] {
+  accent-color: #c10055;
+  width: 16px;
+  height: 16px;
+}
+
+.radio-label input[type='radio']:checked + span {
+  color: #c10055;
+  font-weight: 500;
+}
+
+.prompt-content {
+  margin-bottom: 10px;
+}
+
+.prompt-content.file-content {
+  padding: 10px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+}
+
+.file-placeholder {
+  color: #909399;
+  font-size: 12px;
+}
+
+.prompt-actions {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.generated-prompt {
+  margin-top: 20px;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.prompt-controls {
+  display: flex;
+  gap: 10px;
+}
+
+.prompt-editor {
+  margin-top: 10px;
+}
+
+.prompt-editor textarea {
+  height: auto !important;
+  min-height: 300px;
+}
+
+/* 一键创建案例按钮样式 */
+.create-case-action {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.create-case-action .btn-lg {
+  padding: 12px 30px;
+  font-size: 16px;
+  transition: all 0.3s ease;
+}
+
+.create-case-action .btn-lg:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.create-case-action .btn-lg:active {
+  transform: translateY(0);
+}
+
+/* 案例创建进度样式 */
+.case-creation-progress {
+  margin-top: 20px;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.progress-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.progress-header h4 {
+  margin-right: 15px;
+  min-width: 120px;
+}
+
+.progress-bar-container {
+  flex: 1;
+  height: 10px;
+  background-color: #f0f0f0;
+  border-radius: 5px;
+  overflow: hidden;
+  margin-right: 10px;
+}
+
+.progress-bar {
+  height: 100%;
+  background-color: #c10055; /* 紫荆红色进度条 */
+  transition: width 0.3s ease;
+}
+
+.progress-percentage {
+  font-size: 14px;
+  font-weight: 500;
+  color: #c10055;
+  min-width: 45px;
+  text-align: right;
+}
+
+.creation-steps {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border-left: 2px solid #f0f0f0;
+  padding-left: 20px;
+}
+
+.creation-step {
+  position: relative;
+  padding: 15px 0;
+  transition: all 0.3s ease;
+}
+
+.creation-step:not(:last-child) {
+  border-bottom: 1px dashed #f0f0f0;
+}
+
+.step-indicator {
+  position: absolute;
+  left: -31px;
+  top: 15px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border: 2px solid #f0f0f0;
+  transition: all 0.3s ease;
+}
+
+.step-indicator i {
+  font-size: 12px;
+}
+
+.step-current .step-indicator {
+  border-color: #c10055;
+  background-color: #fff;
+}
+
+.step-current .step-indicator i.fa-spinner {
+  color: #c10055;
+  animation: rotate 1s infinite linear;
+}
+
+.step-completed .step-indicator {
+  border-color: #c10055;
+  background-color: #c10055;
+}
+
+.step-completed .step-indicator i {
+  color: #fff;
+}
+
+.step-content {
+  padding-left: 10px;
+}
+
+.step-name {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 5px;
+  color: #303133;
+  transition: all 0.3s ease;
+}
+
+.step-current .step-name {
+  color: #c10055;
+  font-weight: 600;
+}
+
+.step-description {
+  font-size: 14px;
+  color: #606266;
+  margin-bottom: 10px;
+}
+
+.creation-complete-actions {
+  margin-top: 20px;
+  text-align: center;
+  padding-top: 20px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.creation-complete-actions .action-btn {
+  margin: 0 10px;
+  padding: 12px 30px;
+  font-size: 16px;
+  transition: all 0.3s ease;
+  min-width: 180px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.creation-complete-actions .action-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.creation-complete-actions .action-btn:active {
+  transform: translateY(0);
+}
+
+.creation-complete-actions .action-btn i {
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+/* 图标样式补充 */
+.icon-left {
+  margin-right: 5px;
+}
+
+.btn .icon-left {
+  margin-right: 8px;
+}
+
+/* 旋转动画 */
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 确保优化按钮高度匹配输入框 */
+.form-group button.btn {
+  height: 40px !important;
+  box-sizing: border-box !important;
+  line-height: 38px !important;
+  padding: 0 15px !important;
+  vertical-align: middle !important;
+  font-size: 14px !important;
+  border-radius: 4px !important;
+}
+
+/* 统一表单控件高度 */
+.form-control {
+  height: 40px !important;
+  box-sizing: border-box !important;
+}
+
+/* 宽按钮样式 */
+.wide-btn {
+  width: 300px !important; /* 宽度约为普通按钮的两倍 */
+  margin: 0 auto !important;
+  display: block !important; /* 确保按钮是块级元素 */
+  font-size: 16px !important;
+  padding: 10px 30px !important;
+}
+
+.wide-btn:hover {
+  transform: translateY(-2px) !important;
+  box-shadow: 0 4px 12px rgba(193, 0, 85, 0.2) !important;
+}
+
+/* 生成提示词按钮容器样式 */
+.prompt-actions {
+  margin-top: 20px !important;
+  text-align: center !important;
+  display: flex !important;
+  justify-content: center !important;
+}
+
+/* 一键创建案例按钮样式 */
+.create-case-action {
+  margin-top: 20px !important;
+  text-align: center !important;
+  display: flex !important;
+  justify-content: center !important;
+}

src/modules/material/digital-human/index.ts

+import type { RouteRecordRaw } from 'vue-router'
+import Layout from '@/components/layout/Index.vue'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/material/digital-human',
+    component: Layout,
+    children: [{ path: '', component: () => import('./views/BaiduDigitalHuman.vue') }],
+  },
+]
+
+export { routes }

src/modules/material/digital-human/views/BaiduDigitalHuman.vue

+<template>
+  <AppCard>
+    <div class="text-creation-page">
+      <!-- 分步骤视频合成流程 -->
+      <div class="main-container">
+        <!-- 左侧步骤条 -->
+        <div class="steps-container slim-steps" style="margin-left: 10px">
+          <!-- 步骤指示器 -->
+          <div class="creation-steps">
+            <!-- 步骤1 -->
+            <div
+              class="creation-step"
+              :class="{ 'step-completed': currentStep > 1, 'step-current': currentStep === 1 }">
+              <div class="step-indicator">
+                <i v-if="currentStep > 1" class="ri-check-line"></i>
+                <i v-else-if="currentStep === 1" class="ri-edit-line"></i>
+                <span v-else>1</span>
+              </div>
+              <div class="step-content">
+                <div class="step-name">输入文本</div>
+                <div class="step-description">添加内容</div>
+              </div>
+            </div>
+            <!-- 步骤2 -->
+            <div
+              class="creation-step"
+              :class="{ 'step-completed': currentStep > 2, 'step-current': currentStep === 2 }">
+              <div class="step-indicator">
+                <i v-if="currentStep > 2" class="ri-check-line"></i>
+                <i v-else-if="currentStep === 2" class="ri-user-voice-line"></i>
+                <span v-else>2</span>
+              </div>
+              <div class="step-content">
+                <div class="step-name">形象音色</div>
+                <div class="step-description">选择配置</div>
+              </div>
+            </div>
+            <!-- 步骤3 -->
+            <div
+              class="creation-step"
+              :class="{ 'step-completed': currentStep > 3, 'step-current': currentStep === 3 }">
+              <div class="step-indicator">
+                <i v-if="currentStep > 3" class="ri-check-line"></i>
+                <i v-else-if="currentStep === 3" class="ri-settings-3-line"></i>
+                <span v-else>3</span>
+              </div>
+              <div class="step-content">
+                <div class="step-name">视频参数</div>
+                <div class="step-description">调整设置</div>
+              </div>
+            </div>
+            <!-- 步骤4 -->
+            <div
+              class="creation-step"
+              :class="{ 'step-completed': currentStep > 4, 'step-current': currentStep === 4 }">
+              <div class="step-indicator">
+                <i v-if="currentStep > 4" class="ri-check-line"></i>
+                <i v-else-if="currentStep === 4" class="ri-upload-cloud-line"></i>
+                <span v-else>4</span>
+              </div>
+              <div class="step-content">
+                <div class="step-name">提交任务</div>
+                <div class="step-description">确认信息</div>
+              </div>
+            </div>
+            <!-- 步骤5 -->
+            <div
+              class="creation-step"
+              :class="{ 'step-completed': currentStep > 5, 'step-current': currentStep === 5 }">
+              <div class="step-indicator">
+                <i v-if="currentStep > 5" class="ri-check-line"></i>
+                <i v-else-if="currentStep === 5" class="ri-video-line"></i>
+                <span v-else>5</span>
+              </div>
+              <div class="step-content">
+                <div class="step-name">查看结果</div>
+                <div class="step-description">获取视频</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧内容区 -->
+        <div class="step-content-container wide-content">
+          <!-- 步骤1：输入文本内容 -->
+          <div v-if="currentStep === 1" class="step-content-panel">
+            <div class="section-title">
+              <i class="ri-chat-1-line"></i>
+              <span>输入文本内容</span>
+            </div>
+            <div class="form-group">
+              <label for="textContent" class="form-control-label required">文本内容</label>
+              <div class="text-input-wrapper">
+                <textarea
+                  id="textContent"
+                  v-model="formData.text"
+                  class="form-control"
+                  placeholder="请输入要数字人播报的文本内容，例如：欢迎使用紫荆AI图文创作工具，我可以为您生成各种风格的数字人视频。"
+                  rows="10"></textarea>
+                <div class="input-actions">
+                  <button class="text-action-button" @click="useExampleText" title="使用示例文本">
+                    <i class="ri-file-list-line"></i> 使用示例文本
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div class="action-buttons">
+              <button class="primary-button" @click="nextStep" :disabled="!formData.text">
+                <span>下一步</span>
+                <i class="ri-arrow-right-line"></i>
+              </button>
+            </div>
+          </div>
+
+          <!-- 步骤2：选择数字人和音色 -->
+          <div v-if="currentStep === 2" class="step-content-panel">
+            <div class="section-title">
+              <i class="ri-user-voice-line"></i>
+              <span>选择数字人和音色</span>
+            </div>
+
+            <div class="form-group">
+              <label class="form-control-label required">数字人选择</label>
+              <div class="digital-human-grid inline-grid">
+                <div
+                  v-for="human in digitalHumans"
+                  :key="human.id"
+                  class="digital-human-card compact-card"
+                  :class="{ selected: formData.figureId === human.id }"
+                  @click="selectDigitalHuman(human.id)">
+                  <div class="human-avatar">
+                    <img :src="human.avatar" :alt="human.name" />
+                  </div>
+                  <div class="human-name">{{ human.name }}</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label class="form-control-label required"
+                >音色选择
+                <span class="voice-filter-info"
+                  >({{ getSelectedHumanGender() === '女' ? '女' : '男' }}性音色)</span
+                ></label
+              >
+
+              <div class="voice-filter">
+                <input
+                  type="text"
+                  v-model="voiceSearchText"
+                  placeholder="搜索音色名称或风格"
+                  class="form-control voice-search-input" />
+              </div>
+
+              <div class="voice-list multi-column-list">
+                <div
+                  v-for="voice in filteredActiveVoices"
+                  :key="voice.id"
+                  class="voice-item compact-voice-item"
+                  :class="{ selected: formData.ttsParams.person === voice.id }"
+                  @click="selectVoice(voice.id)">
+                  <div class="voice-icon">
+                    <i class="ri-voice-recognition-line"></i>
+                  </div>
+                  <div class="voice-info">
+                    <div class="voice-name">{{ voice.name }}</div>
+                    <div class="voice-desc">{{ voice.gender }} · {{ voice.style }}</div>
+                  </div>
+                  <div class="voice-preview">
+                    <button
+                      class="preview-button"
+                      @click.stop="previewVoice(voice.id)"
+                      title="试听音色"
+                      :disabled="!getVoicePreviewUrl(voice.id)">
+                      <i class="ri-play-circle-line"></i>
+                    </button>
+                  </div>
+                </div>
+
+                <!-- 添加音频播放元素 -->
+                <audio ref="audioPlayer" v-if="previewAudio" :src="previewAudio" controls style="display: none"></audio>
+              </div>
+
+              <div v-if="filteredActiveVoices.length === 0" class="no-voices-found">
+                <div class="empty-content">
+                  <div class="empty-image">
+                    <i class="ri-error-warning-line"></i>
+                  </div>
+                  <div class="empty-message">没有找到匹配的音色</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="action-buttons">
+              <button class="secondary-button" @click="prevStep">
+                <i class="ri-arrow-left-line"></i>
+                <span>上一步</span>
+              </button>
+              <button class="primary-button" @click="nextStep">
+                <span>下一步</span>
+                <i class="ri-arrow-right-line"></i>
+              </button>
+            </div>
+          </div>
+
+          <!-- 步骤3：设置视频参数 -->
+          <div v-if="currentStep === 3" class="step-content-panel">
+            <div class="section-title">
+              <i class="ri-settings-3-line"></i>
+              <span>设置视频参数</span>
+            </div>
+
+            <div class="form-group">
+              <label class="form-control-label">视频分辨率</label>
+              <div class="resolution-options">
+                <div
+                  v-for="option in resolutionOptions"
+                  :key="option.value"
+                  class="resolution-option"
+                  :class="{ active: isResolutionSelected(option.value) }"
+                  @click="selectResolution(option.value)">
+                  {{ option.label }}
+                </div>
+              </div>
+            </div>
+
+            <div class="form-group" style="display: none">
+              <label class="form-control-label">视频选项</label>
+              <div class="checkbox-group">
+                <div
+                  class="checkbox-item"
+                  :class="{ 'checkbox-active': formData.videoParams.transparent }"
+                  @click="formData.videoParams.transparent = !formData.videoParams.transparent">
+                  <input
+                    type="checkbox"
+                    id="transparent"
+                    v-model="formData.videoParams.transparent"
+                    style="display: none" />
+                  <label class="checkbox-label" for="transparent">透明背景</label>
+                </div>
+
+                <div
+                  class="checkbox-item"
+                  :class="{ 'checkbox-active': formData.autoAnimoji }"
+                  @click="formData.autoAnimoji = !formData.autoAnimoji">
+                  <input type="checkbox" id="autoAnimoji" v-model="formData.autoAnimoji" style="display: none" />
+                  <label class="checkbox-label" for="autoAnimoji">自动添加动作</label>
+                </div>
+
+                <div
+                  class="checkbox-item"
+                  :class="{ 'checkbox-active': formData.subtitleParams.enabled }"
+                  @click="formData.subtitleParams.enabled = !formData.subtitleParams.enabled">
+                  <input
+                    type="checkbox"
+                    id="subtitleEnabled"
+                    v-model="formData.subtitleParams.enabled"
+                    style="display: none" />
+                  <label class="checkbox-label" for="subtitleEnabled">显示字幕</label>
+                </div>
+              </div>
+            </div>
+
+            <div class="action-buttons">
+              <button class="secondary-button" @click="prevStep">
+                <i class="ri-arrow-left-line"></i>
+                <span>上一步</span>
+              </button>
+              <button class="primary-button" @click="nextStep">
+                <span>下一步</span>
+                <i class="ri-arrow-right-line"></i>
+              </button>
+            </div>
+          </div>
+
+          <!-- 步骤4：提交任务 -->
+          <div v-if="currentStep === 4" class="step-content-panel">
+            <div class="section-title">
+              <i class="ri-upload-cloud-line"></i>
+              <span>提交任务</span>
+            </div>
+
+            <div class="task-summary-container">
+              <h3 class="summary-heading">
+                <i class="ri-file-list-3-line"></i>
+                任务信息确认
+              </h3>
+
+              <div class="task-summary">
+                <div class="summary-item">
+                  <div class="summary-label">
+                    <i class="ri-text"></i>
+                    文本内容:
+                  </div>
+                  <div class="summary-value text-value">
+                    {{ formData.text.length > 100 ? formData.text.substring(0, 100) + '...' : formData.text }}
+                  </div>
+                </div>
+                <div class="summary-item">
+                  <div class="summary-label">
+                    <i class="ri-user-line"></i>
+                    数字人形象:
+                  </div>
+                  <div class="summary-value">{{ getHumanName(formData.figureId) }}</div>
+                </div>
+                <div class="summary-item">
+                  <div class="summary-label">
+                    <i class="ri-volume-up-line"></i>
+                    音色:
+                  </div>
+                  <div class="summary-value">{{ getVoiceName(formData.ttsParams.person) }}</div>
+                </div>
+                <div class="summary-item">
+                  <div class="summary-label">
+                    <i class="ri-aspect-ratio-line"></i>
+                    视频分辨率:
+                  </div>
+                  <div class="summary-value">
+                    {{ getResolutionLabel(formData.videoParams.width, formData.videoParams.height) }}
+                  </div>
+                </div>
+                <div class="summary-item">
+                  <div class="summary-label">
+                    <i class="ri-settings-3-line"></i>
+                    高级选项:
+                  </div>
+                  <div class="summary-value">
+                    <span v-if="formData.videoParams.transparent" class="summary-tag">
+                      <i class="ri-contrast-drop-line"></i>
+                      透明背景
+                    </span>
+                    <span v-if="formData.autoAnimoji" class="summary-tag">
+                      <i class="ri-emotion-line"></i>
+                      自动添加动作
+                    </span>
+                    <span v-if="formData.subtitleParams.enabled" class="summary-tag">
+                      <i class="ri-subtitle"></i>
+                      显示字幕
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="action-buttons">
+              <button class="secondary-button" @click="prevStep">
+                <i class="ri-arrow-left-line"></i>
+                <span>上一步</span>
+              </button>
+              <button class="primary-button submit-button" @click="submitTask" :disabled="isSubmitting">
+                <i v-if="isSubmitting" class="ri-loader-4-line spinning"></i>
+                <span>{{ isSubmitting ? '提交中...' : '确认提交' }}</span>
+              </button>
+            </div>
+          </div>
+
+          <!-- 步骤5：查看结果 -->
+          <div v-if="currentStep === 5" class="step-content-panel">
+            <div class="section-title">
+              <i class="ri-video-line"></i>
+              <span>查看结果</span>
+            </div>
+
+            <div class="task-result-container">
+              <!-- 任务状态卡片 -->
+              <div class="task-status-card">
+                <div class="status-header">
+                  <div class="task-id">
+                    <span class="label">任务ID:</span>
+                    <span class="value">{{ taskResult?.taskId || '未知' }}</span>
+                  </div>
+                  <div :class="['status-badge', getStatusClass(taskStatus?.status)]">
+                    {{ getStatusText(taskStatus?.status) }}
+                  </div>
+                </div>
+
+                <!-- 处理中状态显示 -->
+                <div
+                  v-if="taskStatus?.status === 'PROCESSING' || taskStatus?.status === 'GENERATING'"
+                  class="processing-section">
+                  <div class="processing-indicator">
+                    <i class="ri-loader-4-line animate-spin"></i>
+                    <span>视频生成中，请稍候...</span>
+                  </div>
+                  <div class="processing-info">
+                    <p>百度数字人视频生成通常需要10-60秒。生成完成后您将看到视频播放界面。</p>
+                  </div>
+                </div>
+
+                <!-- 失败状态显示 -->
+                <div v-if="taskStatus?.status === 'FAILED'" class="failure-section">
+                  <div class="failure-icon">
+                    <i class="ri-error-warning-line"></i>
+                  </div>
+                  <div class="failure-message">
+                    <h3>生成失败</h3>
+                    <p>{{ taskStatus?.failedMessage || '未知错误' }}</p>
+                  </div>
+                </div>
+
+                <!-- 成功状态显示 -->
+                <div v-if="taskStatus?.status === 'SUCCESS'" class="success-section">
+                  <div class="video-container">
+                    <!-- 视频播放器 -->
+                    <div class="video-player-wrapper">
+                      <video
+                        ref="videoPlayer"
+                        class="video-player"
+                        :src="taskStatus.videoUrl"
+                        controls
+                        autoplay
+                        controlsList="nodownload"
+                        :poster="taskStatus.previewUrl"></video>
+                    </div>
+
+                    <div class="video-info">
+                      <p>创建时间: {{ formatDate(taskStatus.createTime) }}</p>
+                    </div>
+
+                    <div class="video-controls">
+                      <div class="video-actions">
+                        <button class="action-button" @click="downloadVideo">
+                          <i class="ri-download-cloud-line"></i>
+                          <span>下载视频</span>
+                        </button>
+                        <button class="action-button" @click="copyVideoLink">
+                          <i class="ri-link"></i>
+                          <span>复制链接</span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 更新按钮（当视频未生成完成时显示） -->
+              <div v-if="taskStatus?.status !== 'SUCCESS'" class="update-actions">
+                <div class="auto-update-info" v-if="autoQueryInterval">
+                  <i class="ri-time-line"></i>
+                  <span>系统正在自动刷新状态 (每5秒)</span>
+                </div>
+                <button class="update-button" @click="queryTask" :disabled="isQuerying">
+                  <i class="ri-refresh-line" :class="{ 'animate-spin': isQuerying }"></i>
+                  <span>{{ isQuerying ? '刷新中...' : '手动刷新' }}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </AppCard>
+</template>
+
+<script>
+import digitalHumanAPI from '@/utils/digitalHumanAPI'
+import { ref, computed, onMounted, nextTick } from 'vue'
+import axios from 'axios'
+import { saveAs } from 'file-saver'
+
+export default {
+  name: 'BaiduDigitalHuman',
+  setup() {
+    // 状态定义
+    const currentStep = ref(1)
+    const formData = ref({
+      text: '',
+      figureId: 'A2A_V2-xinxin',
+      driveType: 'TEXT',
+      ttsParams: {
+        person: 'CAP_4146',
+        speed: '5',
+        volume: '5',
+        pitch: '5',
+      },
+      videoParams: {
+        width: 1080,
+        height: 1920,
+        transparent: false,
+      },
+      autoAnimoji: true,
+      subtitleParams: {
+        enabled: false,
+        subtitlePolicy: 'SRT',
+      },
+      backgroundImageUrl: '',
+      callbackUrl: '',
+    })
+
+    const digitalHumans = ref([
+      {
+        id: 'A2A_V2-xinxin',
+        name: '梓欣',
+        gender: 'female',
+        avatar: 'https://bce.bdstatic.com/doc/bce-doc/AI_DH/image%2089_8dc1165.png',
+      },
+      {
+        id: 'A2A_V2-xixi',
+        name: '筱萱',
+        gender: 'female',
+        avatar: 'https://bce.bdstatic.com/doc/bce-doc/AI_DH/image%2090_2cae36d.png',
+      },
+      {
+        id: 'A2A_V2-xiaomeng2',
+        name: '乔雅',
+        gender: 'female',
+        avatar: 'https://bce.bdstatic.com/doc/bce-doc/AI_DH/image%2091_70a3d4d.png',
+      },
+      {
+        id: 'A2A_V2-aning',
+        name: '嘉睿',
+        gender: 'male',
+        avatar: 'https://bce.bdstatic.com/doc/bce-doc/AI_DH/%E5%98%89%E7%9D%BF-2_34e59dc.png',
+      },
+      {
+        id: 'A2A_V2-aning_red',
+        name: '嘉霖',
+        gender: 'male',
+        avatar: 'https://bce.bdstatic.com/doc/bce-doc/AI_DH/image%2094_10f09cc.png',
+      },
+      {
+        id: 'A2A_V2-gaoming',
+        name: '纪楚',
+        gender: 'male',
+        avatar: 'https://bce.bdstatic.com/doc/bce-doc/AI_DH/image%2095_ed96bc7.png',
+      },
+    ])
+
+    const femaleVoices = ref([
+      {
+        id: 'CAP_4146',
+        name: '度禧禧',
+        gender: '女声',
+        style: '温柔甜美',
+        previewUrl:
+          'https://meta-human-editor-prd.cdn.bcebos.com/1a71e60c-bbe0-482b-81fb-4889524acbc3/1e9d042c-f9d7-417f-88d3-4209f5516338/4146.wav',
+      },
+      {
+        id: 'BV502_streaming',
+        name: '度小夏',
+        gender: '女声',
+        style: '标准音',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/075ca6ce61d49629f62c520734b9e70e.wav',
+      },
+      {
+        id: '7011_moxingxiaoxiao_16k',
+        name: '专业靠谱爽朗女',
+        gender: '女声',
+        style: '专业娴熟/沉稳冷静/激情饱满',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/314a0e551c40beaead431bb4a30c7f43.wav',
+      },
+      {
+        id: '7011_moxingkangxi_16k',
+        name: '热情悦耳女主播',
+        gender: '女声',
+        style: '元气活力/权威靠谱/激情饱满',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/6cd5a9da434866bf285ddf6fe0411bbc.wav',
+      },
+      {
+        id: '7011_moxinghuanhuan_16k',
+        name: '自信活泼小姐姐',
+        gender: '女声',
+        style: '元气活力/权威靠谱/沉稳冷静',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/e7e878850475aaf2f34f299d4850ff90.wav',
+      },
+      {
+        id: '7011_vc0020_16k',
+        name: '自然朴实小妹妹',
+        gender: '女声',
+        style: '专业娴熟/亲和力强/权威靠谱',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/ec2da60778a9dad8f973c976876e50a4.wav',
+      },
+      {
+        id: '7011_vc0053_16k',
+        name: '专注真诚大姐姐',
+        gender: '女声',
+        style: '专业娴熟/亲和力强/权威靠谱',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/73ffa1c551a7f1b4b252f89e48909036.wav',
+      },
+      {
+        id: '7011_vc0033_16k',
+        name: '职业霸气御姐',
+        gender: '女声',
+        style: '专业娴熟/权威靠谱/沉稳冷静',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/0c4a0336a2c3f0f77cad7b841a8fa15e.wav',
+      },
+      {
+        id: '7011_vc0019_16k',
+        name: '知性优雅叙事女声',
+        gender: '女声',
+        style: '专业娴熟/亲和力强/沉稳冷静',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/5a4d90dad835e2347e99ec4746f265ca.wav',
+      },
+      {
+        id: '7011_vc0048_16k',
+        name: '幽默东北大妹子',
+        gender: '女声',
+        style: '亲和力强/权威靠谱/激情饱满',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/86d9023df2473565cd6a0b3ee6a11e59.wav',
+      },
+      {
+        id: '7011_vc0114_16k',
+        name: '温柔亲和女主播',
+        gender: '女声',
+        style: '元气活力/权威靠谱/激情饱满',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/b2ef65039c63cad57ffed13dd8867dcd.wav',
+      },
+      {
+        id: '7011_vc0100_16k',
+        name: '北京口音女声',
+        gender: '女声',
+        style: '亲和力强/权威靠谱/沉稳冷静',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/b1ea9bae92b4b003b239527594a20ef8.wav',
+      },
+    ])
+
+    const maleVoices = ref([
+      {
+        id: 'CAP_4193',
+        name: '度泽言',
+        gender: '男声',
+        style: '温柔青年',
+        previewUrl:
+          'https://meta-human-editor-prd.cdn.bcebos.com/1a71e60c-bbe0-482b-81fb-4889524acbc3/a545f018-54a1-4a89-a279-2c56a901bd5b/4193.wav',
+      },
+      {
+        id: 'CAP_4195',
+        name: '度怀安',
+        gender: '男声',
+        style: '磁性深情',
+        previewUrl:
+          'https://meta-human-editor-prd.cdn.bcebos.com/1a71e60c-bbe0-482b-81fb-4889524acbc3/029dd3eb-1bd9-455b-a5fe-3cc3d32f85c3/4195.wav',
+      },
+      {
+        id: '4001',
+        name: '度小科',
+        gender: '男声',
+        style: '权威靠谱',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/6765196a1b6b66e8357fb833dad02404.wav',
+      },
+      {
+        id: '7011_moxingchuyi_16k',
+        name: '专业自信男主播',
+        gender: '男声',
+        style: '专业娴熟/亲和力强/沉稳冷静',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/91affdc041d5b0dc6665408cf3b33a27.wav',
+      },
+      {
+        id: '7011_vc0104_16k',
+        name: '自信坦诚大男孩',
+        gender: '男声',
+        style: '专业娴熟/元气活力/幽默有趣',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/f2af2ed9c71b950c753a6db96ad92c1c.wav',
+      },
+      {
+        id: '7011_vc0041_16k',
+        name: '直接果断男主播',
+        gender: '男声',
+        style: '亲和力强/元气活力/幽默有趣',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/6c94172414c967a06d5a14030e2790da.wav',
+      },
+      {
+        id: '7011_vc0049_16k',
+        name: '硬朗自信小哥哥',
+        gender: '男声',
+        style: '元气活力/幽默有趣/激情饱满',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/7027e7bf631cb34fa5b079ba71709b3b.wav',
+      },
+      {
+        id: '7011_vc0147_16k',
+        name: '雄浑宽广男主播',
+        gender: '男声',
+        style: '专业娴熟/权威靠谱/沉稳冷静',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/cd71c7fb34ccfe009082d8b2ac3eee4a.wav',
+      },
+      {
+        id: '7011_vc0079_16k',
+        name: '头头是道讲解员',
+        gender: '男声',
+        style: '亲和力强/元气活力/激情饱满',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/faf238c938ec771252217912c50d96ad.wav',
+      },
+      {
+        id: '7011_vc0067_16k',
+        name: '东北磁性男声',
+        gender: '男声',
+        style: '专业商务',
+        previewUrl: 'https://digital-human-pipeline-output.cdn.bcebos.com/de3759ffdedde37d69bbcaab8662c37b.wav',
+      },
+    ])
+
+    const activeVoices = ref([])
+    const isSubmitting = ref(false)
+    const isQuerying = ref(false)
+    const taskResult = ref(null)
+    const taskStatus = ref(null)
+    const errorMessage = ref('')
+    const autoQueryInterval = ref(null)
+    const voiceSearchText = ref('')
+    const audioPlayer = ref(null)
+    const videoPlayer = ref(null)
+    const previewAudio = ref(null)
+
+    // 分辨率选项
+    const resolutionOptions = ref([
+      { label: '720p (1280x720)', value: '1280x720' },
+      { label: '1080p (1920x1080)', value: '1920x1080' },
+      { label: '竖屏 (720x1280)', value: '720x1280' },
+      { label: '竖屏 (1080x1920)', value: '1080x1920' },
+    ])
+
+    // 计算属性
+    const filteredActiveVoices = computed(() => {
+      if (!voiceSearchText.value) {
+        return activeVoices.value
+      }
+      const searchText = voiceSearchText.value.toLowerCase()
+      return activeVoices.value.filter(
+        (voice) => voice.name.toLowerCase().includes(searchText) || voice.style.toLowerCase().includes(searchText)
+      )
+    })
+
+    // 将计算属性改为方法
+    const getSelectedHumanGender = () => {
+      const selectedHuman = digitalHumans.value.find((h) => h.id === formData.value.figureId)
+      return selectedHuman?.gender === 'female' ? '女' : '男'
+    }
+
+    // 方法定义
+    const initVoices = () => {
+      const selectedHuman = digitalHumans.value.find((h) => h.id === formData.value.figureId)
+      if (selectedHuman) {
+        if (selectedHuman.gender === 'female') {
+          activeVoices.value = femaleVoices.value
+        } else {
+          activeVoices.value = maleVoices.value
+        }
+      } else {
+        activeVoices.value = femaleVoices.value
+      }
+    }
+
+    const nextStep = () => {
+      if (currentStep.value < 5) {
+        currentStep.value++
+      }
+    }
+
+    const prevStep = () => {
+      if (currentStep.value > 1) {
+        currentStep.value--
+      }
+    }
+
+    const selectDigitalHuman = (humanId) => {
+      formData.value.figureId = humanId
+      const selectedHuman = digitalHumans.value.find((h) => h.id === humanId)
+      if (selectedHuman) {
+        activeVoices.value = selectedHuman.gender === 'female' ? femaleVoices.value : maleVoices.value
+        const currentVoiceExists = activeVoices.value.some((v) => v.id === formData.value.ttsParams.person)
+        if (!currentVoiceExists && activeVoices.value.length > 0) {
+          formData.value.ttsParams.person = activeVoices.value[0].id
+        }
+      } else {
+        activeVoices.value = femaleVoices.value
+        if (activeVoices.value.length > 0) {
+          formData.value.ttsParams.person = activeVoices.value[0].id
+        }
+      }
+    }
+
+    const selectVoice = (voiceId) => {
+      formData.value.ttsParams.person = voiceId
+    }
+
+    // 关键方法：获取语音预览URL
+    const getVoicePreviewUrl = (voiceId) => {
+      const allVoices = [...femaleVoices.value, ...maleVoices.value]
+      const voice = allVoices.find((v) => v.id === voiceId)
+      return voice && voice.previewUrl ? voice.previewUrl : ''
+    }
+
+    const previewVoice = (voiceId) => {
+      console.log('预览音色:', voiceId)
+
+      // 停止之前正在播放的音频
+      if (audioPlayer.value) {
+        audioPlayer.value.pause()
+        audioPlayer.value = null
+      }
+
+      const previewUrl = getVoicePreviewUrl(voiceId)
+      console.log('音频URL:', previewUrl)
+
+      if (previewUrl) {
+        try {
+          // 判断是否为本地开发环境
+          const isLocalDev = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
+
+          if (isLocalDev) {
+            // 本地开发环境使用代理API
+            console.log('本地开发环境，通过代理API获取音频...')
+
+            axios
+              .get(`/api/duan/api/v1/digital_human/proxy-resource?url=${encodeURIComponent(previewUrl)}&type=audio`)
+              .then((response) => {
+                if (response.data && response.data.success) {
+                  if (response.data.data && response.data.data.base64Data) {
+                    const audioSrc = response.data.data.base64Data
+                    previewAudio.value = audioSrc
+                    nextTick(() => {
+                      if (audioPlayer.value) {
+                        audioPlayer.value.play().catch((e) => {
+                          console.error('代理音频播放失败:', e)
+                          alert('音频播放失败，请检查您的浏览器设置是否允许自动播放')
+                        })
+                      }
+                    })
+                  } else {
+                    console.error(
+                      '通过代理获取音频数据成功，但 base64Data 字段缺失。查看响应详情:',
+                      'Response Data:',
+                      JSON.stringify(response.data),
+                      'Response Data.data:',
+                      JSON.stringify(response.data.data)
+                    )
+                    alert('通过代理获取音频失败（数据字段缺失），请稍后再试')
+                  }
+                } else {
+                  console.error('通过代理获取音频数据返回非成功状态:', response.data)
+                  alert('通过代理获取音频失败（非成功状态），请稍后再试')
+                }
+              })
+              .catch((e) => {
+                console.error('音频代理API请求异常:', e)
+                alert('音频加载失败，无法播放')
+              })
+          } else {
+            // 生产环境直接播放
+            console.log('生产环境，直接播放音频...')
+            audioPlayer.value = new Audio(previewUrl)
+
+            audioPlayer.value.onerror = (e) => {
+              console.error('直接播放音频失败:', e, previewUrl)
+              alert(`音频加载失败: ${previewUrl}`)
+              audioPlayer.value = null
+            }
+            audioPlayer.value.onloadeddata = () => console.log('音频已加载，准备播放')
+            audioPlayer.value.onended = () => console.log('音频播放完成')
+
+            console.log('开始直接播放音频:', previewUrl)
+            const playPromise = audioPlayer.value.play()
+            if (playPromise !== undefined) {
+              playPromise
+                .then(() => console.log('音频开始直接播放成功'))
+                .catch((e) => {
+                  console.error('直接播放音频失败:', e)
+                  alert('无法播放试听音频，请检查音频链接或浏览器设置。')
+                  audioPlayer.value = null
+                })
+            }
+          }
+        } catch (err) {
+          console.error('创建音频播放器逻辑出错:', err)
+          alert('音频播放器初始化失败，请稍后再试。')
+        }
+      } else {
+        const allVoices = [...femaleVoices.value, ...maleVoices.value]
+        const voice = allVoices.find((v) => v.id === voiceId)
+        alert(`音色 ${voice ? voice.name : voiceId} 暂无试听音频链接。`)
+      }
+    }
+
+    const getHumanName = (humanId) => {
+      const human = digitalHumans.value.find((h) => h.id === humanId)
+      return human ? human.name : humanId
+    }
+
+    const getVoiceName = (voiceId) => {
+      const allVoices = [...femaleVoices.value, ...maleVoices.value]
+      const voice = allVoices.find((v) => v.id === voiceId)
+      return voice ? voice.name : voiceId
+    }
+
+    const submitTask = async () => {
+      if (!formData.value.text) {
+        alert('请输入文本内容')
+        return
+      }
+
+      isSubmitting.value = true
+      errorMessage.value = ''
+
+      // 构建基础数字人视频所需的参数格式
+      const params = {
+        text: formData.value.text,
+        figureId: formData.value.figureId,
+        driveType: formData.value.driveType,
+        ttsParams: {
+          person: formData.value.ttsParams.person,
+          speed: formData.value.ttsParams.speed,
+          volume: formData.value.ttsParams.volume,
+          pitch: formData.value.ttsParams.pitch,
+        },
+        videoParams: {
+          width: formData.value.videoParams.width,
+          height: formData.value.videoParams.height,
+          transparent: formData.value.videoParams.transparent,
+        },
+        autoAnimoji: formData.value.autoAnimoji,
+      }
+
+      // 仅当字幕启用时添加字幕参数
+      if (formData.value.subtitleParams.enabled) {
+        params.subtitleParams = formData.value.subtitleParams
+      }
+
+      console.log('提交基础数字人视频任务参数:', JSON.stringify(params))
+
+      try {
+        const response = await digitalHumanAPI.submitBasicVideoTask(params)
+        console.log('API响应:', response.data)
+
+        if (response.data.success) {
+          taskResult.value = response.data.data
+          console.log('任务提交成功:', taskResult.value)
+
+          startAutoQuery()
+          currentStep.value = 5
+        } else {
+          errorMessage.value = response.data.message || '任务提交失败'
+          alert(errorMessage.value)
+        }
+      } catch (error) {
+        console.error('提交任务出错:', error)
+        errorMessage.value = error.response?.data?.message || '网络错误，请稍后重试'
+        alert(errorMessage.value)
+      } finally {
+        isSubmitting.value = false
+      }
+    }
+
+    const startAutoQuery = () => {
+      stopAutoQuery()
+
+      autoQueryInterval.value = setInterval(() => {
+        if (taskResult.value && taskResult.value.taskId) {
+          queryTask(false)
+
+          if (taskStatus.value && (taskStatus.value.status === 'SUCCESS' || taskStatus.value.status === 'FAILED')) {
+            stopAutoQuery()
+          }
+        } else {
+          stopAutoQuery()
+        }
+      }, 3000)
+    }
+
+    const stopAutoQuery = () => {
+      if (autoQueryInterval.value) {
+        clearInterval(autoQueryInterval.value)
+        autoQueryInterval.value = null
+      }
+    }
+
+    const queryTask = async (showLoading = true) => {
+      if (!taskResult.value || !taskResult.value.taskId) {
+        alert('请先提交任务')
+        return
+      }
+
+      if (showLoading) {
+        isQuerying.value = true
+      }
+
+      try {
+        const response = await digitalHumanAPI.queryBasicVideoTask(taskResult.value.taskId)
+        console.log('查询响应:', response.data)
+
+        if (response.data.success) {
+          taskStatus.value = response.data.data
+          console.log('任务状态:', taskStatus.value)
+
+          // 本地开发环境处理跨域视频和封面图
+          const isLocalDev = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
+          if (isLocalDev && taskStatus.value) {
+            // 处理视频URL
+            if (taskStatus.value.videoUrl && taskStatus.value.videoUrl.startsWith('http')) {
+              const originalVideoUrl = taskStatus.value.videoUrl
+              taskStatus.value.videoUrl = '' // 临时清空，避免直接加载
+              console.log(`本地开发环境，代理视频URL: ${originalVideoUrl}`)
+              axios
+                .get(
+                  `/api/duan/api/v1/digital_human/proxy-resource?url=${encodeURIComponent(originalVideoUrl)}&type=video`
+                )
+                .then((proxyResponse) => {
+                  if (
+                    proxyResponse.data &&
+                    proxyResponse.data.success &&
+                    proxyResponse.data.data &&
+                    proxyResponse.data.data.base64Data
+                  ) {
+                    taskStatus.value.videoUrl = proxyResponse.data.data.base64Data
+                    console.log('视频URL已通过代理更新为Base64')
+                  } else {
+                    console.error('通过代理获取视频URL失败或base64Data字段缺失:', proxyResponse.data)
+                    taskStatus.value.videoUrl = originalVideoUrl // 代理失败，尝试用回原始URL（可能依然失败）
+                  }
+                })
+                .catch((error) => {
+                  console.error('视频URL代理请求失败:', error)
+                  taskStatus.value.videoUrl = originalVideoUrl // 代理失败，尝试用回原始URL
+                })
+            }
+
+            // 处理封面图URL (poster)
+            if (taskStatus.value.previewUrl && taskStatus.value.previewUrl.startsWith('http')) {
+              const originalPreviewUrl = taskStatus.value.previewUrl
+              taskStatus.value.previewUrl = '/img/default-avatar.png' // 临时占位图
+              console.log(`本地开发环境，代理封面图URL: ${originalPreviewUrl}`)
+              axios
+                .get(
+                  `/api/duan/api/v1/digital_human/proxy-resource?url=${encodeURIComponent(
+                    originalPreviewUrl
+                  )}&type=image`
+                )
+                .then((proxyResponse) => {
+                  if (
+                    proxyResponse.data &&
+                    proxyResponse.data.success &&
+                    proxyResponse.data.data &&
+                    proxyResponse.data.data.base64Data
+                  ) {
+                    taskStatus.value.previewUrl = proxyResponse.data.data.base64Data
+                    console.log('封面图URL已通过代理更新为Base64')
+                  } else {
+                    console.error('通过代理获取封面图URL失败或base64Data字段缺失:', proxyResponse.data)
+                    // 代理失败，保留占位图或尝试用回原始URL
+                    // taskStatus.value.previewUrl = originalPreviewUrl;
+                  }
+                })
+                .catch((error) => {
+                  console.error('封面图URL代理请求失败:', error)
+                  // taskStatus.value.previewUrl = originalPreviewUrl;
+                })
+            }
+          }
+        } else {
+          errorMessage.value = response.data.message || '查询任务失败'
+          if (showLoading) {
+            alert(errorMessage.value)
+          } else {
+            console.error(errorMessage.value)
+          }
+        }
+      } catch (error) {
+        console.error('查询任务出错:', error)
+        errorMessage.value = error.response?.data?.message || '网络错误，请稍后重试'
+        if (showLoading) {
+          alert(errorMessage.value)
+        } else {
+          console.error(errorMessage.value)
+        }
+      } finally {
+        if (showLoading) {
+          isQuerying.value = false
+        }
+      }
+    }
+
+    const resetForm = () => {
+      formData.value = {
+        text: '',
+        figureId: 'A2A_V2-xinxin',
+        driveType: 'TEXT',
+        ttsParams: {
+          person: 'CAP_4146',
+          speed: '5',
+          volume: '5',
+          pitch: '5',
+        },
+        videoParams: {
+          width: 1080,
+          height: 1920,
+          transparent: false,
+        },
+        autoAnimoji: true,
+        subtitleParams: {
+          enabled: false,
+          subtitlePolicy: 'SRT',
+        },
+        backgroundImageUrl: '',
+        callbackUrl: '',
+      }
+      taskResult.value = null
+      taskStatus.value = null
+      currentStep.value = 1
+    }
+
+    const getStatusText = (status) => {
+      const statusMap = {
+        PROCESSING: '处理中',
+        SUCCESS: '成功',
+        FAILED: '失败',
+        null: '未知',
+      }
+      return statusMap[status] || status
+    }
+
+    const getStatusClass = (status) => {
+      if (!status) return 'status-unknown'
+      const statusLower = status.toLowerCase()
+      if (statusLower === 'processing') return 'status-processing'
+      if (statusLower === 'success') return 'status-success'
+      if (statusLower === 'failed') return 'status-failed'
+      return 'status-unknown'
+    }
+
+    const formatTime = (seconds) => {
+      if (!seconds || isNaN(seconds)) return ''
+
+      try {
+        const totalSeconds = parseInt(seconds)
+        const minutes = Math.floor(totalSeconds / 60)
+        const remainingSeconds = totalSeconds % 60
+
+        return `${padZero(minutes)}:${padZero(remainingSeconds)}`
+      } catch (e) {
+        console.error('formatTime error:', e)
+        return seconds
+      }
+    }
+
+    const padZero = (num) => {
+      return num < 10 ? `0${num}` : `${num}`
+    }
+
+    // 添加formatDate函数，处理日期格式化
+    const formatDate = (timeString) => {
+      if (!timeString) return ''
+      try {
+        const date = new Date(timeString)
+        return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())} ${padZero(
+          date.getHours()
+        )}:${padZero(date.getMinutes())}:${padZero(date.getSeconds())}`
+      } catch (e) {
+        console.error('formatDate error:', e)
+        return timeString
+      }
+    }
+
+    const downloadVideo = () => {
+      if (taskStatus.value && taskStatus.value.videoUrl) {
+        saveAs(taskStatus.value.videoUrl, `数字人视频_${new Date().getTime()}.mp4`)
+      } else {
+        alert('视频链接无效，无法下载')
+      }
+    }
+
+    const copyVideoLink = () => {
+      if (taskStatus.value && taskStatus.value.videoUrl) {
+        const textarea = document.createElement('textarea')
+        textarea.value = taskStatus.value.videoUrl
+        document.body.appendChild(textarea)
+        textarea.select()
+        try {
+          const successful = document.execCommand('copy')
+          if (successful) {
+            alert('视频链接已复制到剪贴板')
+          } else {
+            alert('复制失败，请手动复制')
+          }
+        } catch (err) {
+          alert('复制失败: ' + err)
+        }
+        document.body.removeChild(textarea)
+      } else {
+        alert('视频链接无效，无法复制')
+      }
+    }
+
+    const getResolutionLabel = (width, height) => {
+      const resolution = `${width}x${height}`
+      const found = resolutionOptions.value.find((option) => option.value === resolution)
+      return found ? found.label : `${width}x${height}`
+    }
+
+    const selectResolution = (resolution) => {
+      const [width, height] = resolution.split('x')
+      formData.value.videoParams.width = parseInt(width)
+      formData.value.videoParams.height = parseInt(height)
+    }
+
+    const isResolutionSelected = (resolution) => {
+      return `${formData.value.videoParams.width}x${formData.value.videoParams.height}` === resolution
+    }
+
+    const useExampleText = () => {
+      formData.value.text = '欢迎使用紫荆AI图文创作工具，我可以为您生成各种风格的数字人视频。'
+    }
+
+    const adjustVideoSize = () => {
+      // 获取视频播放器包装元素
+      const playerWrapper = document.querySelector('.video-player-wrapper')
+      if (playerWrapper) {
+        playerWrapper.style.maxWidth = '640px'
+      }
+    }
+
+    // 生命周期钩子
+    onMounted(() => {
+      initVoices()
+
+      // 判断是否为本地开发环境
+      const isLocalDev = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
+
+      if (isLocalDev) {
+        // 本地环境处理图片跨域问题
+        console.log('本地开发环境，处理图片跨域问题...')
+
+        digitalHumans.value.forEach((human) => {
+          if (human.avatar && human.avatar.startsWith('http')) {
+            const originalAvatar = human.avatar
+            human.avatar = '/img/default-avatar.png' // 确保这个占位图片存在于 public/img/ 目录下
+
+            axios
+              .get(`/api/duan/api/v1/digital_human/proxy-resource?url=${encodeURIComponent(originalAvatar)}&type=image`)
+              .then((response) => {
+                if (response.data && response.data.success) {
+                  if (response.data.data && response.data.data.base64Data) {
+                    human.avatar = response.data.data.base64Data
+                    console.log(`数字人 ${human.name} 头像已转换为Base64格式`)
+                  } else {
+                    console.warn(
+                      `加载数字人 ${human.name} 头像通过代理返回成功，但 base64Data 字段缺失。查看响应详情:`,
+                      'Response Data:',
+                      JSON.stringify(response.data),
+                      'Response Data.data:',
+                      JSON.stringify(response.data.data)
+                    )
+                  }
+                } else {
+                  console.warn(`加载数字人 ${human.name} 头像通过代理返回非成功状态:`, response.data)
+                }
+              })
+              .catch((error) => {
+                console.error(`加载数字人 ${human.name} 头像代理请求失败:`, error)
+              })
+          }
+        })
+      }
+    })
+
+    // 返回模板中需要使用的内容
+    return {
+      currentStep,
+      formData,
+      digitalHumans,
+      femaleVoices,
+      maleVoices,
+      activeVoices,
+      filteredActiveVoices,
+      isSubmitting,
+      isQuerying,
+      taskResult,
+      taskStatus,
+      errorMessage,
+      voiceSearchText,
+      videoPlayer,
+      audioPlayer,
+      previewAudio,
+
+      // 方法
+      nextStep,
+      prevStep,
+      selectDigitalHuman,
+      selectVoice,
+      previewVoice,
+      getVoicePreviewUrl,
+      getHumanName,
+      getVoiceName,
+      getSelectedHumanGender,
+      submitTask,
+      queryTask,
+      resetForm,
+      getStatusText,
+      getStatusClass,
+      formatTime,
+      formatDate,
+      downloadVideo,
+      copyVideoLink,
+      getResolutionLabel,
+      selectResolution,
+      isResolutionSelected,
+      resolutionOptions,
+      useExampleText,
+      adjustVideoSize,
+    }
+  },
+}
+</script>
+
+<style scoped>
+@import '@/assets/css/text-creation-common.css';
+
+/* 主容器布局调整 */
+.main-container {
+  display: flex;
+  gap: 15px;
+  height: 100%;
+}
+
+/* 文本输入区域样式增强 */
+.text-input-wrapper {
+  position: relative;
+}
+
+.input-actions {
+  margin-top: 8px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.text-action-button {
+  background-color: #f5f5f5;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 5px 10px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.text-action-button:hover {
+  background-color: #e9e9e9;
+  border-color: #ccc;
+}
+
+.text-action-button i {
+  font-size: 14px;
+}
+
+/* 左侧步骤条变窄 */
+.steps-container.slim-steps {
+  width: 200px; /* 调小左侧宽度 */
+  flex-shrink: 0;
+  margin-bottom: 0; /* 移除底部间距，因为右侧会滚动 */
+}
+
+/* 右侧内容区变宽 */
+.step-content-container.wide-content {
+  flex-grow: 1; /* 占据剩余宽度 */
+  max-height: calc(100vh - 120px); /* 限制高度，留出顶部导航空间 */
+  overflow-y: auto; /* 内容超出时允许滚动 */
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+/* 步骤内容面板 */
+.step-content-panel {
+  padding: 20px;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 表单组样式 */
+.form-group {
+  margin-bottom: 20px;
+  flex-shrink: 0;
+}
+
+/* 优化数字人选择布局 */
+.digital-human-grid.inline-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr); /* 六列布局 */
+  gap: 15px; /* 增加间距 */
+  max-height: 220px; /* 提高高度，原来是150px */
+  overflow-y: auto; /* 超出时添加滚动 */
+  padding: 10px; /* 增加内边距 */
+  border: 1px solid #eee;
+  border-radius: 8px;
+}
+
+.digital-human-card.compact-card {
+  width: auto;
+  margin: 0;
+  padding: 8px; /* 增加内边距 */
+  border: 2px solid transparent;
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.digital-human-card.compact-card:hover {
+  background-color: #f9f9f9;
+  transform: translateY(-2px);
+}
+
+.digital-human-card.compact-card.selected {
+  border-color: var(--primary-color, #ba003f);
+  background-color: rgba(186, 0, 63, 0.05);
+}
+
+.compact-card .human-avatar {
+  width: 70px; /* 增加头像尺寸，原来是50px */
+  height: 70px; /* 增加头像尺寸，原来是50px */
+  margin: 0 auto 8px; /* 增加底部间距 */
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.compact-card .human-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.compact-card .human-name {
+  font-size: 13px; /* 增大字体 */
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 优化音色选择列表布局，适应更多音色 */
+.voice-list.multi-column-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* 三列 */
+  gap: 10px;
+  max-height: 300px; /* 增加高度，显示更多音色 */
+  overflow-y: auto;
+  padding: 5px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+}
+
+.voice-item.compact-voice-item {
+  padding: 8px 10px;
+  border: 2px solid #eee;
+  border-radius: 8px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+}
+
+.voice-item.compact-voice-item:hover {
+  border-color: var(--primary-color, #ba003f);
+  background-color: #f9f9f9;
+  transform: translateY(-2px);
+}
+
+.voice-item.compact-voice-item.selected {
+  border-color: var(--primary-color, #ba003f);
+  background-color: rgba(186, 0, 63, 0.05);
+}
+
+.voice-icon {
+  font-size: 20px;
+  color: #666;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.voice-info {
+  flex: 1;
+  min-width: 0; /* 防止flex子项溢出 */
+}
+
+.voice-name {
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.voice-desc {
+  color: #666;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.voice-preview {
+  margin-left: 8px;
+  flex-shrink: 0;
+}
+
+/* 试听按钮强调 */
+.preview-button {
+  background: none;
+  border: none;
+  color: var(--primary-color, #ba003f);
+  font-size: 20px;
+  cursor: pointer;
+  padding: 4px;
+  transition: transform 0.2s;
+  line-height: 1;
+}
+
+.preview-button:hover {
+  transform: scale(1.2);
+}
+
+.preview-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 音色过滤器 */
+.voice-filter {
+  margin-bottom: 10px;
+}
+
+.voice-search-input {
+  padding: 8px 12px;
+  border-radius: 20px;
+  border: 1px solid #ddd;
+  width: 100%;
+  font-size: 14px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: 10px center;
+  background-size: 16px;
+  padding-left: 32px;
+}
+
+.voice-filter-info {
+  font-size: 12px;
+  color: #666;
+  background-color: #f0f0f0;
+  padding: 2px 8px;
+  border-radius: 10px;
+  margin-left: 8px;
+}
+
+/* 动作按钮 */
+.action-buttons {
+  margin-top: auto; /* 推到底部 */
+  display: flex;
+  justify-content: space-between;
+  padding-top: 20px;
+}
+
+/* 响应式调整 */
+@media (max-width: 1200px) {
+  .digital-human-grid.inline-grid {
+    grid-template-columns: repeat(4, 1fr); /* 四列 */
+    max-height: 280px; /* 响应式调整高度 */
+  }
+
+  .voice-list.multi-column-list {
+    grid-template-columns: repeat(2, 1fr); /* 两列 */
+  }
+}
+
+@media (max-width: 768px) {
+  .main-container {
+    flex-direction: column;
+  }
+
+  .steps-container.slim-steps {
+    width: 100%;
+    margin-bottom: 15px;
+  }
+
+  .step-content-container.wide-content {
+    max-height: none;
+  }
+
+  .digital-human-grid.inline-grid {
+    grid-template-columns: repeat(3, 1fr); /* 三列 */
+    max-height: 330px; /* 在移动端增加更多高度 */
+  }
+
+  .voice-list.multi-column-list {
+    grid-template-columns: 1fr; /* 单列 */
+  }
+}
+
+/* 机位选择样式 */
+.camera-options {
+  display: flex;
+  gap: 15px;
+  margin-top: 10px;
+}
+
+.camera-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s;
+  width: 100px;
+  height: 100px;
+}
+
+.camera-option i {
+  font-size: 2rem;
+  margin-bottom: 10px;
+}
+
+.camera-option.active {
+  border-color: #007bff;
+  background-color: rgba(0, 123, 255, 0.1);
+  color: #007bff;
+}
+
+.resolution-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.resolution-option {
+  padding: 10px 15px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.resolution-option.active {
+  border-color: #007bff;
+  background-color: rgba(0, 123, 255, 0.1);
+  color: #007bff;
+}
+
+/* 提交任务和查看结果步骤样式优化 */
+.task-summary-container {
+  background-color: #f9f9f9;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.summary-heading {
+  font-size: 20px;
+  color: #333;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 12px;
+}
+
+.summary-heading i {
+  margin-right: 8px;
+  color: var(--primary-color, #ba003f);
+}
+
+.task-summary {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+
+.summary-item {
+  padding: 12px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s;
+}
+
+.summary-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
+}
+
+.summary-label {
+  font-weight: bold;
+  color: #555;
+  margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+}
+
+.summary-label i {
+  margin-right: 6px;
+  color: var(--primary-color, #ba003f);
+  font-size: 16px;
+}
+
+.summary-value {
+  font-size: 15px;
+  color: #333;
+  line-height: 1.5;
+}
+
+.text-value {
+  max-height: 80px;
+  overflow-y: auto;
+  white-space: pre-line;
+  padding: 8px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 14px;
+}
+
+.summary-tag {
+  display: inline-flex;
+  align-items: center;
+  background-color: rgba(186, 0, 63, 0.1);
+  color: var(--primary-color, #ba003f);
+  border-radius: 16px;
+  padding: 4px 10px;
+  margin-right: 8px;
+  margin-bottom: 6px;
+  font-size: 13px;
+}
+
+.summary-tag i {
+  margin-right: 4px;
+}
+
+.submit-button {
+  background-color: var(--primary-color, #ba003f);
+  font-size: 16px;
+  padding: 10px 20px;
+  transition: all 0.3s;
+}
+
+.submit-button:hover {
+  background-color: darken(var(--primary-color, #ba003f), 10%);
+  transform: translateY(-3px);
+  box-shadow: 0 4px 8px rgba(186, 0, 63, 0.3);
+}
+
+/* 查看结果样式 */
+.task-result-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.task-status-card {
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  padding: 20px;
+  transition: transform 0.3s;
+}
+
+.task-status-card:hover {
+  transform: translateY(-4px);
+}
+
+.status-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 12px;
+}
+
+.task-id {
+  font-weight: bold;
+  color: #333;
+  font-size: 18px;
+}
+
+.status-badge {
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+}
+
+.status-processing {
+  background-color: #e3f2fd;
+  color: #1976d2;
+}
+
+.status-success {
+  background-color: #e8f5e9;
+  color: #2e7d32;
+}
+
+.status-failed {
+  background-color: #ffebee;
+  color: #c62828;
+}
+
+.status-unknown {
+  background-color: #f5f5f5;
+  color: #757575;
+}
+
+.processing-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.processing-indicator {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.processing-info {
+  font-size: 14px;
+  color: #666;
+}
+
+.failure-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.failure-icon {
+  font-size: 48px;
+  color: #c62828;
+  margin-bottom: 10px;
+}
+
+.failure-message {
+  font-size: 18px;
+  color: #c62828;
+}
+
+.success-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.video-container {
+  width: 100%;
+  margin: 20px auto;
+  transition: all 0.3s ease;
+}
+
+/* 视频播放器样式 */
+.video-player-wrapper {
+  width: 100%;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+}
+
+.video-player {
+  width: 100%;
+  height: auto;
+  max-height: 600px;
+  border-radius: 8px;
+  background-color: #000;
+}
+
+/* 视频尺寸控制 */
+.video-size-controls {
+  display: none;
+}
+
+.size-label {
+  display: none;
+}
+
+.size-btn {
+  display: none;
+}
+
+.video-info {
+  background-color: #f9f9f9;
+  padding: 12px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.video-info p {
+  margin: 6px 0;
+  color: #555;
+  font-size: 14px;
+}
+
+.video-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 15px;
+  justify-content: center;
+}
+
+.action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  background-color: var(--primary-color, #ba003f);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.action-button:hover {
+  background-color: #d4004c;
+  transform: translateY(-2px);
+}
+
+.action-button i {
+  font-size: 16px;
+}
+
+.update-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.auto-update-info {
+  font-size: 14px;
+  color: #666;
+}
+
+.update-button {
+  background-color: #e3f2fd;
+  color: #1976d2;
+}
+
+.update-button:hover {
+  background-color: #bbdefb;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+</style>

src/stores/menu.ts

@@ -297,6 +297,13 @@ const adminMenus: IMenuItem[] = [
         icon: markRaw(IconAudio),
         // tag: 'v1-experiment-marketing-material-list',
       },
+      // {
+      //   id: 14,
+      //   name: '数字人管理',
+      //   path: '/material/digital-human',
+      //   icon: markRaw(IconVideo),
+      //   // tag: 'v1-experiment-marketing-material-list',
+      // },
       {
         id: 14,
         name: '视频资料管理',
@@ -392,7 +399,7 @@ export const useMenuStore = defineStore({
       const filterMenus = (menus: IMenuItem[]): IMenuItem[] => {
         return menus
           .filter((menu) => userPermissions.some((perm) => perm.id === menu.id))
-          .filter((menu) => menu.role ? menu.role?.includes(userRole) : true)
+          .filter((menu) => (menu.role ? menu.role?.includes(userRole) : true))
           .map((menu) => {
             const filteredMenu: IMenuItem = {
               ...menu,

src/utils/bosDirectUpload.js

+/**
+ * 百度云BOS直接上传工具
+ * 实现前端直接上传图片到百度云BOS对象存储
+ */
+import axios from 'axios'
+import CryptoJS from 'crypto-js'
+
+// 百度云BOS配置
+const BOS_CONFIG = {
+  accessKeyId: '', // 将在使用时从后端获取
+  secretAccessKey: '', // 将在使用时从后端获取
+  endpoint: 'bj.bcebos.com',
+  bucketName: 'ezijing',
+  domain: 'https://ezijing.bj.bcebos.com',
+}
+
+/**
+ * 生成ISO8601格式的时间戳
+ * @returns {string} ISO8601格式的时间戳
+ */
+function getISODateString() {
+  return new Date().toISOString().replace(/\.\d+Z$/, 'Z')
+}
+
+/**
+ * 计算文件的MD5值
+ * @param {File} file - 文件对象
+ * @returns {Promise<string>} - 返回base64编码的MD5值
+ */
+function calculateFileMD5(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      try {
+        const wordArray = CryptoJS.lib.WordArray.create(e.target.result)
+        const md5 = CryptoJS.MD5(wordArray)
+        const base64Md5 = CryptoJS.enc.Base64.stringify(md5)
+        resolve(base64Md5)
+      } catch (err) {
+        reject(err)
+      }
+    }
+    reader.onerror = (err) => reject(err)
+    reader.readAsArrayBuffer(file)
+  })
+}
+
+/**
+ * 生成上传策略和签名
+ * @param {Object} options - 配置选项
+ * @returns {Object} - 包含policy和signature的对象
+ */
+function generatePolicyAndSignature(options = {}) {
+  const {
+    expiration = new Date(Date.now() + 30 * 60 * 1000).toISOString(), // 默认30分钟过期
+    contentLengthRange = [0, 10 * 1024 * 1024], // 默认最大10MB
+    keyPattern = null, // 对象键匹配模式
+    bucket = BOS_CONFIG.bucketName,
+  } = options
+
+  // 构建policy对象 - 按照百度云BOS要求的格式
+  const policy = {
+    expiration,
+    conditions: [{ bucket }],
+  }
+
+  // 添加content-length-range
+  policy.conditions.push(['content-length-range', ...contentLengthRange])
+
+  // 如果指定了keyPattern，添加到conditions中
+  if (keyPattern) {
+    policy.conditions.push({ key: keyPattern })
+  }
+
+  // 将policy转为JSON
+  const policyJson = JSON.stringify(policy)
+  console.log('Policy JSON:', policyJson)
+
+  // 对policy进行base64编码
+  // 确保使用UTF-8编码，完全模拟Python中的base64.b64encode(policy)
+  const policyBase64 = btoa(unescape(encodeURIComponent(policyJson)))
+
+  // 根据Python示例代码精确实现签名方法
+  // Python: hmac.new(sk, base64.b64encode(policy), hashlib.sha256).hexdigest()
+  // 使用CryptoJS的HMAC-SHA256算法计算签名
+  const signature = CryptoJS.HmacSHA256(
+    policyBase64, // 使用base64编码后的policy作为消息
+    BOS_CONFIG.secretAccessKey // 使用SK作为密钥
+  ).toString(CryptoJS.enc.Hex) // 输出为十六进制字符串
+
+  console.log('Generated policy:', policyBase64)
+  console.log('Generated signature:', signature)
+
+  return {
+    policy: policyBase64,
+    signature,
+  }
+}
+
+/**
+ * 生成百度云BOS的V1签名
+ * @param {Object} options - 签名选项
+ * @returns {Object} - 包含authorization和headers的对象
+ */
+function generateBosV1Signature(options) {
+  const { method, uri, params = {}, headers = {}, timestamp = getISODateString() } = options
+
+  // 1. 生成CanonicalRequest
+  // 1.1 添加HTTP方法
+  let canonicalRequest = `${method.toUpperCase()}\n`
+
+  // 1.2 添加URI
+  canonicalRequest += `${uri}\n`
+
+  // 1.3 添加查询参数
+  const queryParams = []
+  Object.keys(params)
+    .sort()
+    .forEach((key) => {
+      queryParams.push(`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
+    })
+  canonicalRequest += `${queryParams.join('&')}\n`
+
+  // 1.4 添加规范化头信息
+  const canonicalHeaders = {}
+  // 添加host头
+  canonicalHeaders['host'] = `${BOS_CONFIG.bucketName}.${BOS_CONFIG.endpoint}`
+  // 添加指定的头
+  Object.keys(headers).forEach((key) => {
+    const lowerKey = key.toLowerCase()
+    // 只保留必要的headers
+    if (
+      lowerKey === 'content-type' ||
+      lowerKey === 'content-md5' ||
+      lowerKey === 'date' ||
+      lowerKey.startsWith('x-bce-')
+    ) {
+      canonicalHeaders[lowerKey] = headers[key]
+    }
+  })
+
+  // 如果没有Date头，添加x-bce-date头
+  if (!canonicalHeaders['date']) {
+    canonicalHeaders['x-bce-date'] = timestamp
+  }
+
+  // 构建规范化头部字符串
+  const canonicalHeadersArray = []
+  Object.keys(canonicalHeaders)
+    .sort()
+    .forEach((key) => {
+      canonicalHeadersArray.push(`${key}:${canonicalHeaders[key]}`)
+    })
+  canonicalRequest += canonicalHeadersArray.join('\n')
+
+  console.log('规范化请求字符串:', canonicalRequest)
+
+  // 2. 生成签名密钥
+  const authStringPrefix = `bce-auth-v1/${BOS_CONFIG.accessKeyId}/${timestamp}/1800`
+  const signingKey = CryptoJS.HmacSHA256(authStringPrefix, BOS_CONFIG.secretAccessKey).toString(CryptoJS.enc.Hex)
+
+  console.log('签名密钥:', signingKey)
+
+  // 3. 计算签名
+  const signature = CryptoJS.HmacSHA256(canonicalRequest, signingKey).toString(CryptoJS.enc.Hex)
+
+  console.log('签名结果:', signature)
+
+  // 4. 生成Authorization字符串
+  const headersToSign = Object.keys(canonicalHeaders).sort().join(';')
+  const authorization = `${authStringPrefix}/host;${headersToSign}/${signature}`
+
+  return {
+    authorization,
+    headers: canonicalHeaders,
+  }
+}
+
+/**
+ * 生成上传表单数据
+ * @param {File} file - 要上传的文件
+ * @param {Object} options - 上传选项
+ * @returns {FormData} - 填充好的FormData对象
+ */
+function prepareUploadFormData(file, options = {}) {
+  const {
+    key = `uploads/${new Date().toISOString().slice(0, 10).replace(/-/g, '')}/${Date.now()}_${file.name}`,
+    contentType = file.type || 'application/octet-stream',
+    successRedirectUrl = null,
+    contentDisposition = null,
+    metadata = {},
+  } = options
+
+  // 生成policy和signature
+  const { policy, signature } = generatePolicyAndSignature({
+    contentLengthRange: [0, file.size + 1024], // 允许的文件大小范围
+    keyPattern: key,
+    bucket: BOS_CONFIG.bucketName,
+  })
+
+  // 创建FormData
+  const formData = new FormData()
+
+  // BOS API要求使用accessKey而不是accessKeyId
+  formData.append('accessKey', BOS_CONFIG.accessKeyId)
+  formData.append('policy', policy)
+  formData.append('signature', signature)
+  formData.append('key', key)
+
+  // 添加Content-Type
+  if (contentType) {
+    formData.append('Content-Type', contentType)
+  }
+
+  // 添加Content-Disposition (如果指定)
+  if (contentDisposition) {
+    formData.append('Content-Disposition', contentDisposition)
+  }
+
+  // 添加自定义元数据
+  Object.entries(metadata).forEach(([key, value]) => {
+    formData.append(`x-bce-meta-${key}`, value)
+  })
+
+  // 添加成功重定向URL (如果指定)
+  if (successRedirectUrl) {
+    formData.append('success-redirect-url', successRedirectUrl)
+  }
+
+  // 添加文件数据 (必须放在最后)
+  formData.append('file', file)
+
+  return formData
+}
+
+/**
+ * 获取安全凭证
+ * 从后端获取临时上传凭证，避免在前端暴露永久凭证
+ * @returns {Promise<Object>} - 包含accessKeyId和secretAccessKey的对象
+ */
+async function getCredentials() {
+  try {
+    // 直接使用硬编码的访问凭证（临时解决方案）
+    BOS_CONFIG.accessKeyId = '05c5a1cf304f45c6b17f55967449bc9b'
+    BOS_CONFIG.secretAccessKey = '42d4dea8b0614fc09488c9386bad9909'
+    return {
+      accessKeyId: '05c5a1cf304f45c6b17f55967449bc9b',
+      secretAccessKey: '42d4dea8b0614fc09488c9386bad9909',
+    }
+
+    /* 注释掉原始的API调用代码
+    const response = await axios.get('/api/duan/api/v1/upload/bos_credentials');
+    
+    if (response.data && response.data.success) {
+      BOS_CONFIG.accessKeyId = response.data.accessKeyId;
+      BOS_CONFIG.secretAccessKey = response.data.secretAccessKey;
+      return {
+        accessKeyId: response.data.accessKeyId,
+        secretAccessKey: response.data.secretAccessKey
+      };
+    } else {
+      throw new Error('获取上传凭证失败');
+    }
+    */
+  } catch (error) {
+    console.error('获取上传凭证异常:', error)
+    throw error
+  }
+}
+
+/**
+ * 使用表单方式直接上传文件到百度云BOS
+ * @param {File} file - 要上传的文件对象
+ * @param {Object} options - 上传选项
+ * @param {Function} onProgress - 上传进度回调
+ * @returns {Promise<string>} - 上传成功的文件URL
+ */
+export async function uploadFileByForm(file, options = {}, onProgress = null) {
+  try {
+    // 首先获取上传凭证
+    await getCredentials()
+
+    // 准备上传参数
+    const {
+      prefix = 'uploads',
+      fileType = 'general',
+      key = `${prefix}/${fileType}/${new Date().toISOString().slice(0, 10).replace(/-/g, '')}/${Date.now()}_${
+        file.name
+      }`,
+    } = options
+
+    // 准备表单数据
+    const formData = prepareUploadFormData(file, {
+      key,
+      contentType: file.type || 'application/octet-stream',
+    })
+
+    // 设置上传URL
+    const uploadUrl = `https://${BOS_CONFIG.bucketName}.${BOS_CONFIG.endpoint}/`
+    console.log('上传请求URL:', uploadUrl)
+
+    // 执行上传请求
+    const response = await axios.post(uploadUrl, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      onUploadProgress: (progressEvent) => {
+        if (onProgress && progressEvent.total) {
+          const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+          onProgress(percentCompleted, progressEvent)
+        }
+      },
+    })
+    console.log('表单上传请求响应:', response)
+
+    // 构建文件URL
+    const fileUrl = `${BOS_CONFIG.domain}/${key}`
+    return fileUrl
+  } catch (error) {
+    console.error('表单上传到百度云BOS失败:', error)
+    if (error.response) {
+      console.error('响应状态:', error.response.status)
+      console.error('响应数据:', error.response.data)
+      console.error('响应头:', error.response.headers)
+    }
+    throw error
+  }
+}
+
+/**
+ * 生成预签名PUT上传URL
+ * @param {string} key - 文件的对象键
+ * @param {string} contentType - 文件内容类型
+ * @param {number} contentLength - 文件大小
+ * @param {string} contentMD5 - 文件MD5值（可选）
+ * @param {number} expireInSeconds - 链接有效期（秒）
+ * @returns {string} - 预签名URL
+ */
+function generatePresignedPutUrl(key, contentType, contentLength, contentMD5 = '', expireInSeconds = 1800) {
+  // 获取当前时间戳
+  const timestamp = getISODateString()
+
+  // 准备查询参数
+  const params = {
+    'X-Bce-Date': timestamp,
+    'Content-Type': contentType,
+    'Content-Length': contentLength.toString(),
+    Host: `${BOS_CONFIG.bucketName}.${BOS_CONFIG.endpoint}`,
+  }
+
+  // 如果有Content-MD5，添加到参数
+  if (contentMD5) {
+    params['Content-MD5'] = contentMD5
+  }
+
+  // 计算签名有效期截止时间
+  const expirationTimestamp = Math.floor(Date.now() / 1000) + expireInSeconds
+  params['X-Bce-Expires'] = expirationTimestamp.toString()
+
+  // 准备签名所需的参数
+  const signOptions = {
+    method: 'PUT',
+    uri: `/${key}`,
+    params,
+    headers: {
+      'Content-Type': contentType,
+      'Content-Length': contentLength.toString(),
+      Host: `${BOS_CONFIG.bucketName}.${BOS_CONFIG.endpoint}`,
+    },
+    timestamp,
+  }
+
+  // 如果有Content-MD5，添加到请求头
+  if (contentMD5) {
+    signOptions.headers['Content-MD5'] = contentMD5
+  }
+
+  // 生成签名
+  const { authorization } = generateBosV1Signature(signOptions)
+
+  // 构建查询参数字符串
+  const queryParams = {
+    authorization: authorization,
+    'x-bce-date': timestamp,
+    expires: expirationTimestamp.toString(),
+    'content-type': contentType,
+  }
+
+  if (contentMD5) {
+    queryParams['content-md5'] = contentMD5
+  }
+
+  // 拼接查询参数
+  const queryString = Object.entries(queryParams)
+    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+    .join('&')
+
+  // 生成预签名URL
+  return `https://${BOS_CONFIG.bucketName}.${BOS_CONFIG.endpoint}/${key}?${queryString}`
+}
+
+/**
+ * 使用PutObject方式直接上传文件到百度云BOS
+ * @param {File} file - 要上传的文件对象
+ * @param {Object} options - 上传选项
+ * @param {Function} onProgress - 上传进度回调
+ * @returns {Promise<string>} - 上传成功的文件URL
+ */
+export async function uploadFileByPut(file, options = {}, onProgress = null) {
+  try {
+    // 首先获取上传凭证
+    await getCredentials()
+
+    // 准备上传参数
+    const {
+      prefix = 'uploads',
+      fileType = 'general',
+      key = `${prefix}/${fileType}/${new Date().toISOString().slice(0, 10).replace(/-/g, '')}/${Date.now()}_${
+        file.name
+      }`,
+    } = options
+
+    // 计算文件的Content-MD5
+    let contentMD5 = ''
+    try {
+      contentMD5 = await calculateFileMD5(file)
+      console.log('计算的Content-MD5:', contentMD5)
+    } catch (error) {
+      console.warn('MD5计算失败，继续上传:', error)
+    }
+
+    // 检测是否在浏览器环境中
+    const isInBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined'
+
+    if (isInBrowser) {
+      console.log('在浏览器环境中使用预签名URL方式上传...')
+
+      // 生成预签名URL
+      const presignedUrl = generatePresignedPutUrl(key, file.type || 'application/octet-stream', file.size, contentMD5)
+
+      console.log('生成的预签名URL:', presignedUrl)
+
+      // 执行PUT上传请求（使用预签名URL，不需要额外的授权头）
+      try {
+        const response = await axios.put(presignedUrl, file, {
+          // 使用最简化的头，避免CORS和浏览器安全限制问题
+          headers: {
+            'Content-Type': file.type || 'application/octet-stream',
+          },
+          onUploadProgress: (progressEvent) => {
+            if (onProgress && progressEvent.total) {
+              const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+              onProgress(percentCompleted, progressEvent)
+            }
+          },
+        })
+
+        console.log('预签名URL PUT上传成功:', response.status)
+
+        // 生成访问URL
+        const fileUrl = `${BOS_CONFIG.domain}/${key}`
+        return fileUrl
+      } catch (putError) {
+        console.error('预签名URL PUT上传失败，错误详情:', putError)
+        if (putError.response) {
+          console.error('  - 响应状态:', putError.response.status)
+          console.error('  - 响应数据:', putError.response.data)
+          console.error('  - 响应头:', putError.response.headers)
+        }
+
+        console.log('尝试使用标准PUT方法上传...')
+
+        // 获取当前时间戳
+        const timestamp = getISODateString()
+
+        // 准备签名所需的参数（使用最简化的头信息）
+        const signOptions = {
+          method: 'PUT',
+          uri: `/${key}`,
+          params: {},
+          headers: {
+            'Content-Type': file.type || 'application/octet-stream',
+            'x-bce-date': timestamp,
+          },
+          timestamp,
+        }
+
+        // 如果有Content-MD5，添加到请求头
+        if (contentMD5) {
+          signOptions.headers['Content-MD5'] = contentMD5
+        }
+
+        // 生成签名
+        const { authorization } = generateBosV1Signature(signOptions)
+
+        // 设置上传URL
+        const uploadUrl = `https://${BOS_CONFIG.bucketName}.${BOS_CONFIG.endpoint}/${key}`
+
+        try {
+          const response = await axios.put(uploadUrl, file, {
+            headers: {
+              Authorization: authorization,
+              'Content-Type': file.type || 'application/octet-stream',
+              'x-bce-date': timestamp,
+              ...(contentMD5 ? { 'Content-MD5': contentMD5 } : {}),
+            },
+            onUploadProgress: (progressEvent) => {
+              if (onProgress && progressEvent.total) {
+                const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+                onProgress(percentCompleted, progressEvent)
+              }
+            },
+          })
+
+          console.log('标准PUT上传成功:', response.status)
+
+          // 生成访问URL
+          const fileUrl = `${BOS_CONFIG.domain}/${key}`
+          return fileUrl
+        } catch (standardPutError) {
+          console.error('标准PUT上传也失败，尝试使用表单上传:', standardPutError)
+          // 如果标准PUT上传失败，尝试使用表单上传（作为备选方案）
+          return uploadFileByForm(file, options, onProgress)
+        }
+      }
+    } else {
+      // 非浏览器环境(如Node.js)，可以直接使用PUT
+      console.log('非浏览器环境使用PUT方法上传')
+
+      // 获取当前时间戳
+      const timestamp = getISODateString()
+
+      // 生成签名
+      const { authorization, headers: signedHeaders } = generateBosV1Signature({
+        method: 'PUT',
+        uri: `/${key}`,
+        params: {},
+        headers: {
+          'Content-Type': file.type || 'application/octet-stream',
+          'Content-Length': file.size.toString(),
+          ...(contentMD5 ? { 'Content-MD5': contentMD5 } : {}),
+        },
+        timestamp,
+      })
+
+      console.log('非浏览器环境PUT上传请求头:', signedHeaders)
+
+      // 设置上传URL
+      const uploadUrl = `https://${BOS_CONFIG.bucketName}.${BOS_CONFIG.endpoint}/${key}`
+
+      // 构建请求头
+      const requestHeaders = {
+        Host: `${BOS_CONFIG.bucketName}.${BOS_CONFIG.endpoint}`,
+        Authorization: authorization,
+        'Content-Type': file.type || 'application/octet-stream',
+        'Content-Length': file.size.toString(),
+        'x-bce-date': timestamp,
+      }
+
+      // 如果有Content-MD5，添加到请求头
+      if (contentMD5) {
+        requestHeaders['Content-MD5'] = contentMD5
+      }
+
+      // 执行上传请求
+      const response = await axios.put(uploadUrl, file, {
+        headers: requestHeaders,
+        onUploadProgress: (progressEvent) => {
+          if (onProgress && progressEvent.total) {
+            const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+            onProgress(percentCompleted, progressEvent)
+          }
+        },
+      })
+
+      console.log('非浏览器环境PUT上传请求响应:', response)
+
+      // 生成访问URL
+      const fileUrl = `${BOS_CONFIG.domain}/${key}`
+      return fileUrl
+    }
+  } catch (error) {
+    console.error('PUT上传到百度云BOS失败:', error)
+    if (error.response) {
+      console.error('响应状态:', error.response.status)
+      console.error('响应数据:', error.response.data)
+      console.error('响应头:', error.response.headers)
+    }
+    throw error
+  }
+}
+
+/**
+ * 直接上传文件到百度云BOS (优先使用PUT方法)
+ * @param {File} file - 要上传的文件对象
+ * @param {Object} options - 上传选项
+ * @param {Function} onProgress - 上传进度回调
+ * @returns {Promise<string>} - 上传成功的文件URL
+ */
+export async function uploadFileToBos(file, options = {}, onProgress = null) {
+  // 检测是否在浏览器环境中
+  const isInBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined'
+  console.log('isInBrowser:', isInBrowser)
+  // 使用指定的上传方法或默认使用PUT
+  const { method = 'PUT' } = options
+
+  if (method.toUpperCase() === 'POST' || method.toUpperCase() === 'FORM') {
+    // 用户明确要求使用表单上传
+    return uploadFileByForm(file, options, onProgress)
+  } else {
+    // 优先使用PUT上传，失败时自动回退到表单上传
+    try {
+      return await uploadFileByPut(file, options, onProgress)
+    } catch (error) {
+      console.warn('PUT上传失败，自动回退到表单上传:', error)
+      console.log('使用表单方式重试上传...')
+      return uploadFileByForm(file, options, onProgress)
+    }
+  }
+}
+
+/**
+ * 上传图片到百度云BOS
+ * @param {File} file - 图片文件
+ * @param {string} type - 图片类型 (background|logo)
+ * @param {Function} onProgress - 上传进度回调
+ * @returns {Promise<string>} - 上传成功的图片URL
+ */
+export async function uploadImageToBos(file, type = 'general', onProgress = null) {
+  return uploadFileToBos(
+    file,
+    {
+      prefix: 'images',
+      fileType: type,
+    },
+    onProgress
+  )
+}
+
+export default {
+  uploadFileToBos,
+  uploadImageToBos,
+  uploadFileByForm,
+  uploadFileByPut,
+}

src/utils/digitalHumanAPI.js

+import axios from 'axios'
+import { uploadImageToBos } from './bosDirectUpload'
+
+const baseURL = '/api/duan/api/v1'
+
+/**
+ * 百度数字人视频合成服务API
+ */
+const digitalHumanAPI = {
+  /**
+   * 提交百度数字人视频合成任务
+   * @param {Object} params - 任务参数
+   * @returns {Promise} - axios请求Promise
+   */
+  submitVideoTask(params) {
+    return axios.post(`${baseURL}/digital_human/video/advanced/submit`, params)
+  },
+
+  /**
+   * 提交基础数字人视频任务
+   * @param {Object} params - 任务参数
+   * @returns {Promise} - axios请求Promise
+   */
+  submitBasicVideoTask(params) {
+    return axios.post(`${baseURL}/digital_human/video/submit`, params)
+  },
+
+  /**
+   * 查询百度数字人视频合成任务状态
+   * @param {string} taskId - 任务ID
+   * @returns {Promise} - axios请求Promise
+   */
+  queryVideoTask(taskId) {
+    return axios.get(`${baseURL}/digital_human/video/advanced/query`, {
+      params: { taskId },
+    })
+  },
+
+  /**
+   * 查询基础数字人视频任务状态
+   * @param {string} taskId - 任务ID
+   * @returns {Promise} - axios请求Promise
+   */
+  queryBasicVideoTask(taskId) {
+    return axios.get(`${baseURL}/digital_human/video/query`, {
+      params: { taskId },
+    })
+  },
+
+  /**
+   * 上传图片到阿里云OSS
+   * @param {File|string} imageData - 图片文件对象或Base64编码的图片数据
+   * @param {string} type - 图片类型 (background|logo)
+   * @param {Object} options - 上传选项
+   * @param {Function} options.onProgress - 上传进度回调函数
+   * @param {Number} options.retryCount - 失败重试次数，默认为2
+   * @param {Number} options.retryDelay - 重试间隔(毫秒)，默认为1000
+   * @returns {Promise} - axios请求Promise
+   */
+  uploadImageToAliyunOSS(imageData, type, options = {}) {
+    const { onProgress = null, retryCount = 2, retryDelay = 1000 } = options
+
+    let currentRetry = 0
+
+    const executeUpload = () => {
+      // 使用FormData封装数据
+      const formData = new FormData()
+
+      if (imageData instanceof File) {
+        formData.append('file', imageData)
+      } else {
+        // 如果是Base64，使用Blob转换
+        try {
+          // 提取Base64数据
+          const base64Data = imageData.split(',')[1]
+          const blob = this._base64ToBlob(base64Data, 'image/png')
+          formData.append('file', blob, `image_${Date.now()}.png`)
+        } catch (error) {
+          console.error('Base64转换失败:', error)
+          formData.append('image', imageData)
+        }
+      }
+
+      formData.append('type', type)
+
+      // 构建上传请求
+      const uploadEndpoint = `${baseURL}/uploads/image`
+
+      return axios
+        .post(uploadEndpoint, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+          // 添加上传进度回调
+          onUploadProgress: onProgress
+            ? (progressEvent) => {
+                const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+                onProgress(percentCompleted, progressEvent)
+              }
+            : undefined,
+        })
+        .catch((error) => {
+          // 实现重试逻辑
+          if (currentRetry < retryCount) {
+            currentRetry++
+            console.log(`上传失败，第${currentRetry}次重试...`)
+
+            // 延迟后重试
+            return new Promise((resolve) => {
+              setTimeout(() => {
+                resolve(executeUpload())
+              }, retryDelay)
+            })
+          }
+
+          // 所有重试都失败，抛出错误
+          throw error
+        })
+    }
+
+    return executeUpload()
+  },
+
+  /**
+   * 上传视频到阿里云OSS
+   * @param {File} videoFile - 视频文件对象
+   * @param {string} type - 视频类型 (opening-video|ending-video)
+   * @param {Object} options - 上传选项
+   * @param {Function} options.onProgress - 上传进度回调函数
+   * @returns {Promise} - axios请求Promise
+   */
+  uploadVideoToAliyunOSS(videoFile, type, options = {}) {
+    const { onProgress = null } = options
+
+    const formData = new FormData()
+    formData.append('file', videoFile)
+    formData.append('type', type)
+    formData.append('is_video', 'true')
+
+    const uploadEndpoint = `${baseURL}/uploads/video`
+
+    return axios.post(uploadEndpoint, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      onUploadProgress: onProgress
+        ? (progressEvent) => {
+            const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+            onProgress(percentCompleted, progressEvent)
+          }
+        : undefined,
+    })
+  },
+
+  /**
+   * 将Base64数据转换为Blob对象
+   * @private
+   * @param {string} base64Data - Base64编码的数据
+   * @param {string} contentType - 内容类型
+   * @returns {Blob} - Blob对象
+   */
+  _base64ToBlob(base64Data, contentType) {
+    const byteCharacters = atob(base64Data)
+    const byteArrays = []
+
+    for (let offset = 0; offset < byteCharacters.length; offset += 512) {
+      const slice = byteCharacters.slice(offset, offset + 512)
+
+      const byteNumbers = new Array(slice.length)
+      for (let i = 0; i < slice.length; i++) {
+        byteNumbers[i] = slice.charCodeAt(i)
+      }
+
+      const byteArray = new Uint8Array(byteNumbers)
+      byteArrays.push(byteArray)
+    }
+
+    return new Blob(byteArrays, { type: contentType })
+  },
+
+  /**
+   * 提交高级视频合成任务
+   * @param {Object} data 请求参数
+   * @returns {Promise} 请求结果
+   */
+  submitAdvancedVideoTask(data) {
+    return axios.post(`${baseURL}/digital_human/video/advanced/submit`, data)
+  },
+
+  /**
+   * 查询高级视频合成任务状态
+   * @param {String} taskId 任务ID
+   * @returns {Promise} 请求结果
+   */
+  queryAdvancedVideoTask(taskId) {
+    return axios.get(`${baseURL}/digital_human/video/advanced/query?taskId=${taskId}`)
+  },
+
+  /**
+   * 获取模板列表
+   * @returns {Array} 模板列表
+   */
+  getTemplateList() {
+    return [
+      { id: 't-pf4kqasspwzwyexyte121', name: '模板1', ratio: '9:16', isVertical: true },
+      { id: 't-af4keqsspfzwyexyte123', name: '模板2', ratio: '9:16', isVertical: true },
+      { id: 't-ad4eeqsspfzwyqxyte125', name: '模板3', ratio: '9:16', isVertical: true },
+      { id: 't-cd4eeqsspfzwyqxyte127', name: '模板4', ratio: '9:16', isVertical: true },
+      { id: 't-hb4eeqsspfzwyqxyte129', name: '模板5', ratio: '16:9', isVertical: false },
+      { id: 't-cd4eeqsspfzwyqxyteditu3', name: '模板6', ratio: '9:16', isVertical: true },
+      { id: 't-cd4eeqsspfzwyqxyteditu4', name: '模板7', ratio: '9:16', isVertical: true },
+      { id: 't-cd4eeqsspfzwyqxyteditu5', name: '无数字人模板', ratio: '9:16', isVertical: true, noDigitalHuman: true },
+    ]
+  },
+
+  /**
+   * 上传图片到存储服务 (兼容方法)
+   * @param {File|string} imageData - 图片文件对象或Base64编码的图片数据
+   * @param {string} type - 图片类型 (background|logo)
+   * @param {boolean} useBaiduCloud - 是否使用百度云存储，默认false使用阿里云OSS
+   * @returns {Promise} - axios请求Promise
+   */
+  uploadImageToOSS(imageData, type, useBaiduCloud = false) {
+    console.log('uploadImageToOSS', imageData, type, useBaiduCloud)
+    // 统一使用阿里云OSS上传，忽略useBaiduCloud参数
+    console.log('使用阿里云OSS上传图片')
+
+    // 如果传入的是File对象，使用FormData
+    if (imageData instanceof File) {
+      return this.uploadImageToAliyunOSS(imageData, type, {})
+    }
+
+    // 否则按原来的方式处理
+    const formData = new FormData()
+    const blob = this._base64ToBlob(imageData.split(',')[1], 'image/png')
+    formData.append('file', blob, `image_${Date.now()}.png`)
+    formData.append('type', type)
+
+    const uploadEndpoint = `${baseURL}/uploads/image`
+    return axios.post(uploadEndpoint, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    })
+  },
+
+  /**
+   * 上传视频到存储服务 (兼容方法)
+   * @param {File} videoFile - 视频文件对象
+   * @param {string} type - 视频类型 (opening-video|ending-video)
+   * @param {boolean} useBaiduCloud - 是否使用百度云存储，默认false使用阿里云OSS
+   * @returns {Promise} - axios请求Promise
+   */
+  uploadVideoToOSS(videoFile, type, useBaiduCloud = false) {
+    console.log('uploadVideoToOSS', videoFile, type, useBaiduCloud)
+    // 统一使用阿里云OSS上传，忽略useBaiduCloud参数
+    console.log('使用阿里云OSS上传视频')
+    return this.uploadVideoToAliyunOSS(videoFile, type, {})
+  },
+
+  /**
+   * 上传图片到百度云BOS
+   * @param {File|string} imageData - 图片文件对象或Base64编码的图片数据
+   * @param {string} type - 图片类型 (background|logo)
+   * @param {Object} options - 上传选项
+   * @returns {Promise} - 包含上传结果的Promise
+   */
+  uploadImageToBaiduBOS(imageData, type, options = {}) {
+    console.log('使用百度云BOS PUT方式上传图片')
+
+    // 处理Base64图片数据
+    if (typeof imageData === 'string' && imageData.startsWith('data:')) {
+      // 转换Base64到Blob对象
+      const blob = this._base64ToBlob(imageData.split(',')[1], 'image/png')
+      const file = new File([blob], `image_${Date.now()}.png`, { type: 'image/png' })
+
+      // 使用直接上传到百度云BOS的方法，明确指定PUT方法
+      return uploadImageToBos(
+        file,
+        {
+          fileType: type,
+          method: 'PUT', // 明确指定使用PUT上传
+        },
+        options.onProgress
+      ).then((url) => {
+        console.log('百度云BOS上传成功，文件URL:', url)
+        return {
+          data: {
+            success: true,
+            data: { url },
+          },
+        }
+      })
+    }
+
+    // 处理File对象，直接上传到百度云BOS
+    if (imageData instanceof File) {
+      return uploadImageToBos(
+        imageData,
+        {
+          fileType: type,
+          method: 'PUT', // 明确指定使用PUT上传
+        },
+        options.onProgress
+      ).then((url) => {
+        console.log('百度云BOS上传成功，文件URL:', url)
+        return {
+          data: {
+            success: true,
+            data: { url },
+          },
+        }
+      })
+    }
+
+    // 如果不是File或Base64，返回错误
+    return Promise.reject(new Error('不支持的图片数据格式，请提供File对象或Base64编码的图片数据'))
+  },
+
+  /**
+   * 上传视频到百度云BOS (兼容方法，实际使用阿里云OSS)
+   * @param {File} videoFile - 视频文件对象
+   * @param {string} type - 视频类型 (opening-video|ending-video)
+   * @param {Object} options - 上传选项
+   * @returns {Promise} - axios请求Promise
+   */
+  uploadVideoToBaiduBOS(videoFile, type, options = {}) {
+    console.warn('uploadVideoToBaiduBOS已废弃，请使用uploadVideoToAliyunOSS')
+    return this.uploadVideoToAliyunOSS(videoFile, type, options)
+  },
+}
+
+export default digitalHumanAPI

vite.config.ts

@@ -50,6 +50,11 @@ export default defineConfig(() => ({
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api\/qianfan/, ''),
       },
+      '/api/duan': {
+        target: 'https://saas-ai.ezijing.com',
+        changeOrigin: true,
+        // rewrite: (path) => path.replace(/^\/api\/duan/, ''),
+      },
       // '/api/lab': {
       //   target: 'http://local-com-resource-api.frontend.ezijing.com',
       //   changeOrigin: true,