feat: 功能优化
This commit is contained in:
@@ -365,106 +365,151 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
// ========== 公共变量 ==========
|
||||
@primary-color: var(--primary-color, #1677ff);
|
||||
@primary-bg-10: rgba(22, 119, 255, 0.1);
|
||||
@primary-bg-15: rgba(22, 119, 255, 0.15);
|
||||
@primary-bg-20: rgba(22, 119, 255, 0.2);
|
||||
@primary-bg-30: rgba(22, 119, 255, 0.3);
|
||||
@primary-bg-50: rgba(22, 119, 255, 0.5);
|
||||
@success-color: var(--color-green-500);
|
||||
@error-color: var(--color-red-500);
|
||||
@warning-color: var(--color-yellow-500);
|
||||
@surface-bg: var(--bg-primary);
|
||||
@surface-bg-25: var(--bg-primary);
|
||||
@surface-bg-30: var(--bg-secondary);
|
||||
@text-primary: var(--text-primary);
|
||||
@text-secondary: var(--text-secondary);
|
||||
@panel-bg: var(--bg-primary);
|
||||
|
||||
/* ========== 页面布局 ========== */
|
||||
.kling-page { padding: 0; }
|
||||
.kling-page {
|
||||
padding: 0;
|
||||
background: var(--bg-secondary);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.kling-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
grid-template-columns: 480px 1fr;
|
||||
gap: 32px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.upload-panel,
|
||||
.result-panel {
|
||||
background: @panel-bg;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
|
||||
/* 优化左侧配置面板 */
|
||||
.upload-panel {
|
||||
background: var(--bg-primary);
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
height: fit-content;
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* 自定义滚动条 */
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--border-light);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 基础组件 ========== */
|
||||
.section { margin-bottom: 24px; }
|
||||
.section h3,
|
||||
.card-content h4,
|
||||
.audio-info h4 {
|
||||
color: @text-primary;
|
||||
.section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.section h3 { margin-bottom: 12px; }
|
||||
.card-content h4, .audio-info h4 { margin-bottom: 12px; font-size: 14px; }
|
||||
.card-content p, .duration-label span:first-child { color: @text-secondary; font-size: 13px; }
|
||||
.card-content p { margin: 0; }
|
||||
|
||||
.card-content h4,
|
||||
.audio-info h4 {
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-content p,
|
||||
.duration-label span:first-child {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card-content p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ========== 表单控件 ========== */
|
||||
.tts-textarea {
|
||||
background: var(--bg-primary);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
color: @text-primary;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
color: var(--text-primary);
|
||||
|
||||
:deep(.ant-input) {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.text-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 6px;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(var(--color-primary), 0.1);
|
||||
border: 1px solid rgba(var(--color-primary), 0.3);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: @text-secondary;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.hint-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
.hint-icon { font-size: 14px; }
|
||||
|
||||
/* ========== 控制面板 ========== */
|
||||
.control-group { margin-bottom: 16px; }
|
||||
.control-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: @text-primary;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.slider-card {
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-primary);
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.slider-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: @text-secondary;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.slider-value {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: @text-primary;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
padding: 4px 12px;
|
||||
border: 1px solid var(--border-light);
|
||||
background: var(--bg-primary);
|
||||
color: @text-primary;
|
||||
color: var(--text-secondary);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
@@ -474,37 +519,43 @@ onMounted(async () => {
|
||||
.video-selection-cards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.video-option-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(var(--color-primary), 0.1);
|
||||
}
|
||||
}
|
||||
.video-option-card:hover {
|
||||
border-color: @primary-color;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
.video-option-card.selected {
|
||||
border-color: @primary-color;
|
||||
background: @primary-bg-10;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 24px;
|
||||
color: @primary-color;
|
||||
color: var(--color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: @primary-bg-10;
|
||||
background: rgba(var(--color-primary), 0.1);
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ========== 视频预览 ========== */
|
||||
@@ -537,7 +588,7 @@ onMounted(async () => {
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: @text-primary;
|
||||
color: var(--text-primary);
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
@@ -548,7 +599,7 @@ onMounted(async () => {
|
||||
min-width: 0;
|
||||
}
|
||||
.video-title {
|
||||
color: @text-primary;
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
@@ -560,32 +611,81 @@ onMounted(async () => {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
font-size: 12px;
|
||||
color: @text-secondary;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ========== 上传区域 ========== */
|
||||
.upload-zone {
|
||||
min-height: 300px;
|
||||
min-height: 280px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px dashed var(--border-light);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-secondary);
|
||||
|
||||
&.drag-over {
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(var(--color-primary), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.upload-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
color: @text-secondary;
|
||||
|
||||
h3 {
|
||||
color: var(--text-primary);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
padding: 8px 24px;
|
||||
font-size: 14px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
.upload-placeholder h3 { color: @text-primary; }
|
||||
|
||||
.video-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: @text-primary;
|
||||
|
||||
p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 6px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-video {
|
||||
width: 100%;
|
||||
max-height: 300px;
|
||||
max-height: 280px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ========== 验证结果 ========== */
|
||||
@@ -595,59 +695,93 @@ onMounted(async () => {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.validation-result.validation-passed {
|
||||
border-color: rgba(82, 196, 26, 0.3);
|
||||
background: rgba(82, 196, 26, 0.05);
|
||||
border-color: var(--color-success);
|
||||
background: rgba(var(--color-success), 0.05);
|
||||
}
|
||||
|
||||
.validation-result.validation-failed {
|
||||
border-color: rgba(255, 77, 79, 0.3);
|
||||
background: rgba(255, 77, 79, 0.05);
|
||||
border-color: var(--color-error);
|
||||
background: rgba(var(--color-error), 0.05);
|
||||
}
|
||||
|
||||
.validation-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 12px;
|
||||
padding: 12px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.status-icon { font-size: 18px; }
|
||||
|
||||
.status-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: @text-primary;
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ========== 时长对比进度条 ========== */
|
||||
.duration-comparison { margin-bottom: 16px; }
|
||||
.duration-bar { margin-bottom: 12px; }
|
||||
.duration-bar:last-child { margin-bottom: 0; }
|
||||
.duration-comparison {
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.duration-bar {
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.duration-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.duration-value {
|
||||
color: @text-primary;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
padding: 4px 8px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-primary);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.audio-bar .progress-fill {
|
||||
background: linear-gradient(90deg, @primary-color, #60A5FA);
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.video-bar .progress-fill.success {
|
||||
background: linear-gradient(90deg, @success-color, #73d13d);
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.video-bar .progress-fill.error {
|
||||
background: linear-gradient(90deg, @error-color, #ff7875);
|
||||
background: var(--color-error);
|
||||
}
|
||||
|
||||
/* ========== 错误提示 ========== */
|
||||
@@ -657,12 +791,17 @@ onMounted(async () => {
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: @error-color;
|
||||
color: var(--color-error);
|
||||
font-size: 13px;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
.quick-actions { display: flex; gap: 8px; }
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ========== 音频生成 ========== */
|
||||
.audio-generation-section {
|
||||
@@ -672,24 +811,49 @@ onMounted(async () => {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
.generate-audio-row { margin-bottom: 16px; }
|
||||
|
||||
.generate-audio-row {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.audio-preview {
|
||||
padding: 16px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.duration-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.duration-info .label { color: @text-secondary; }
|
||||
.duration-info .value { color: @text-primary; font-weight: 600; }
|
||||
.duration-info.validation-passed .value { color: @success-color; }
|
||||
.duration-info.validation-failed .value { color: @error-color; }
|
||||
.audio-player { margin: 16px 0; }
|
||||
.audio-element { width: 100%; }
|
||||
|
||||
.duration-info .label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.duration-info .value {
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.duration-info.validation-passed .value {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.duration-info.validation-failed .value {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.audio-player {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.audio-element {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.regenerate-row {
|
||||
text-align: center;
|
||||
margin-top: 12px;
|
||||
@@ -701,24 +865,49 @@ onMounted(async () => {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.action-buttons .ant-btn[type="primary"] {
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.generate-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(255, 193, 7, 0.1);
|
||||
border: 1px solid rgba(255, 193, 7, 0.3);
|
||||
padding: 12px 16px;
|
||||
background: rgba(var(--color-warning), 0.1);
|
||||
border: 1px solid rgba(var(--color-warning), 0.3);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: @warning-color;
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
/* ========== 响应式 ========== */
|
||||
@media (max-width: 1024px) {
|
||||
.kling-content {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 16px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.upload-panel {
|
||||
position: static;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.video-selection-cards {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.upload-zone {
|
||||
min-height: 240px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user