+ ![]()
+
+
+
+
+
+
+
+
+ {{ tag }}
+
+
+
+
+ {{ title }}
+ +{{ description || '无描述' }}
+ + +
+
+
-
-
+
([])
const availableCharacters = ref([])
const backgroundPrompt = ref('')
const backgroundsCache = ref([])
+const videoPlayerRef = ref(null)
+const videoPlaying = ref(false)
+
+const toggleVideoPlay = () => {
+ if (!videoPlayerRef.value) return
+ if (videoPlaying.value) {
+ videoPlayerRef.value.pause()
+ videoPlaying.value = false
+ } else {
+ videoPlayerRef.value.play()
+ videoPlaying.value = true
+ }
+}
const router = useRouter()
@@ -752,22 +768,22 @@ watch(() => currentShot.value, () => {
.storyboard-editor {
display: flex;
height: 100vh;
- background: #f5f7fa;
- color: #303133;
+ background: var(--bg-primary);
+ color: var(--text-primary);
overflow: hidden;
}
.left-panel {
width: 280px;
flex-shrink: 0;
- background: #ffffff;
+ background: var(--bg-card);
display: flex;
flex-direction: column;
- border-right: 1px solid #e4e7ed;
+ border-right: 1px solid var(--border-primary);
.panel-header {
padding: 16px;
- border-bottom: 1px solid #e4e7ed;
+ border-bottom: 1px solid var(--border-primary);
display: flex;
justify-content: space-between;
align-items: center;
@@ -782,7 +798,7 @@ watch(() => currentShot.value, () => {
margin: 0;
font-size: 14px;
font-weight: 600;
- color: #303133;
+ color: var(--text-primary);
}
}
@@ -796,35 +812,35 @@ watch(() => currentShot.value, () => {
gap: 12px;
padding: 12px;
margin-bottom: 8px;
- background: #f5f7fa;
+ background: var(--bg-secondary);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
- border: 1px solid #e4e7ed;
+ border: 1px solid var(--border-primary);
&:hover {
- background: #ecf5ff;
- border-color: #c6e2ff;
+ background: var(--accent-light);
+ border-color: var(--accent);
}
&.active {
- background: #ecf5ff;
- border-color: #409eff;
- box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
+ background: var(--accent-light);
+ border-color: var(--accent);
+ box-shadow: var(--shadow-md);
}
.scene-number {
flex-shrink: 0;
width: 32px;
height: 32px;
- background: #409eff;
+ background: var(--accent);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 12px;
- color: #ffffff;
+ color: var(--text-inverse);
}
.scene-content {
@@ -839,7 +855,7 @@ watch(() => currentShot.value, () => {
.time-location {
font-size: 11px;
- color: #909399;
+ color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -848,7 +864,7 @@ watch(() => currentShot.value, () => {
.scene-desc {
font-size: 12px;
- color: #606266;
+ color: var(--text-secondary);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
@@ -864,8 +880,8 @@ watch(() => currentShot.value, () => {
height: 40px;
border-radius: 4px;
overflow: hidden;
- background: #f0f2f5;
- border: 1px solid #dcdfe6;
+ background: var(--bg-card-hover);
+ border: 1px solid var(--border-primary);
}
}
}
@@ -876,12 +892,12 @@ watch(() => currentShot.value, () => {
min-width: 0;
display: flex;
flex-direction: column;
- background: #f5f7fa;
+ background: var(--bg-primary);
.preview-header {
padding: 12px 20px;
- background: #ffffff;
- border-bottom: 1px solid #e4e7ed;
+ background: var(--bg-card);
+ border-bottom: 1px solid var(--border-primary);
display: flex;
justify-content: space-between;
align-items: center;
@@ -893,7 +909,7 @@ watch(() => currentShot.value, () => {
.shot-type {
font-size: 14px;
- color: #606266;
+ color: var(--text-secondary);
}
}
}
@@ -912,11 +928,11 @@ watch(() => currentShot.value, () => {
display: flex;
align-items: center;
justify-content: center;
- background: #ffffff;
+ background: var(--bg-card);
border-radius: 8px;
overflow: hidden;
- border: 1px solid #e4e7ed;
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+ border: 1px solid var(--border-primary);
+ box-shadow: var(--shadow-md);
.preview-image {
width: 100%;
@@ -933,7 +949,7 @@ watch(() => currentShot.value, () => {
.preview-placeholder {
text-align: center;
- color: #909399;
+ color: var(--text-muted);
p {
margin-top: 12px;
@@ -942,7 +958,7 @@ watch(() => currentShot.value, () => {
.hint {
font-size: 12px;
- color: #909399;
+ color: var(--text-muted);
margin-top: 8px;
}
}
@@ -959,15 +975,15 @@ watch(() => currentShot.value, () => {
.timeline-panel {
height: 140px;
- background: #ffffff;
- border-top: 1px solid #e4e7ed;
+ background: var(--bg-card);
+ border-top: 1px solid var(--border-primary);
.timeline-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
- border-bottom: 1px solid #e4e7ed;
+ border-bottom: 1px solid var(--border-primary);
.timeline-tools {
display: flex;
@@ -976,7 +992,7 @@ watch(() => currentShot.value, () => {
.timecode {
font-size: 12px;
- color: #909399;
+ color: var(--text-muted);
font-family: monospace;
}
}
@@ -1000,22 +1016,22 @@ watch(() => currentShot.value, () => {
}
&::-webkit-scrollbar-track {
- background: #f5f7fa;
+ background: var(--bg-secondary);
}
&::-webkit-scrollbar-thumb {
- background: #c0c4cc;
+ background: var(--border-secondary);
border-radius: 4px;
&:hover {
- background: #909399;
+ background: var(--border-primary);
}
}
.timeline-ruler {
position: relative;
height: 20px;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid var(--border-primary);
min-width: max-content;
.ruler-mark {
@@ -1027,13 +1043,13 @@ watch(() => currentShot.value, () => {
display: block;
width: 1px;
height: 8px;
- background: #dcdfe6;
+ background: var(--border-primary);
margin-bottom: 2px;
}
span {
font-size: 10px;
- color: #606266;
+ color: var(--text-secondary);
}
}
}
@@ -1050,21 +1066,21 @@ watch(() => currentShot.value, () => {
flex-shrink: 0;
width: 60px;
height: 100%;
- background: #c6e2ff;
+ background: var(--accent-light);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
- border: 1px solid #a0cfff;
+ border: 1px solid var(--accent);
&:hover {
- background: #a0cfff;
- border-color: #79bbff;
+ background: var(--accent);
+ border-color: var(--accent-hover);
}
&.active {
- background: #409eff;
- border-color: #409eff;
- box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
+ background: var(--accent);
+ border-color: var(--accent);
+ box-shadow: var(--shadow-glow);
}
.clip-content {
@@ -1077,12 +1093,12 @@ watch(() => currentShot.value, () => {
.clip-number {
font-size: 11px;
font-weight: 600;
- color: #303133;
+ color: var(--text-primary);
}
}
&.active .clip-content .clip-number {
- color: #ffffff;
+ color: var(--text-inverse);
}
}
}
@@ -1093,8 +1109,8 @@ watch(() => currentShot.value, () => {
.right-panel {
width: 420px;
flex-shrink: 0;
- background: #ffffff;
- border-left: 1px solid #e4e7ed;
+ background: var(--bg-card);
+ border-left: 1px solid var(--border-primary);
display: flex;
flex-direction: column;
@@ -1106,8 +1122,8 @@ watch(() => currentShot.value, () => {
:deep(.el-tabs__header) {
margin: 0;
- background: #ffffff;
- border-bottom: 1px solid #e4e7ed;
+ background: var(--bg-card);
+ border-bottom: 1px solid var(--border-primary);
flex-shrink: 0;
padding: 0 8px;
}
@@ -1120,24 +1136,24 @@ watch(() => currentShot.value, () => {
}
:deep(.el-tabs__item) {
- color: #606266;
+ color: var(--text-secondary);
font-size: 13px;
font-weight: 500;
padding: 0 20px;
transition: all 0.3s ease;
&:hover {
- color: #409eff;
+ color: var(--accent);
}
&.is-active {
- color: #409eff;
- background: #ecf5ff;
+ color: var(--accent);
+ background: var(--accent-light);
}
}
:deep(.el-tabs__active-bar) {
- background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
+ background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
height: 3px;
}
@@ -1150,32 +1166,32 @@ watch(() => currentShot.value, () => {
.section-title {
font-size: 14px;
font-weight: 600;
- color: #409eff;
+ color: var(--accent);
margin: 12px 0 10px;
padding: 6px 10px;
- background: #ecf5ff;
+ background: var(--accent-light);
border-radius: 6px;
- border-left: 3px solid #409eff;
+ border-left: 3px solid var(--accent);
}
.param-group {
margin-bottom: 10px;
padding: 10px;
- background: #f5f7fa;
+ background: var(--bg-secondary);
border-radius: 8px;
- border: 1px solid #e4e7ed;
+ border: 1px solid var(--border-primary);
transition: all 0.3s ease;
&:hover {
- background: #ecf5ff;
- border-color: #c6e2ff;
- box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
+ background: var(--accent-light);
+ border-color: var(--accent);
+ box-shadow: var(--shadow-sm);
}
label {
display: block;
font-size: 12px;
- color: #606266;
+ color: var(--text-secondary);
margin-bottom: 6px;
font-weight: 600;
letter-spacing: 0.3px;
@@ -1208,29 +1224,29 @@ watch(() => currentShot.value, () => {
.background-preview-small {
width: 80px;
height: 60px;
- background: #f0f2f5;
+ background: var(--bg-secondary);
border-radius: 6px;
overflow: hidden;
- border: 1px solid #dcdfe6;
+ border: 1px solid var(--border-primary);
flex-shrink: 0;
}
.background-placeholder-small {
width: 80px;
height: 60px;
- background: #fafafa;
+ background: var(--bg-primary);
border-radius: 6px;
- border: 2px dashed #c0c4cc;
+ border: 2px dashed var(--border-secondary);
display: flex;
align-items: center;
justify-content: center;
- color: #909399;
+ color: var(--text-muted);
flex-shrink: 0;
transition: all 0.3s ease;
&:hover {
- border-color: #409eff;
- background: #ecf5ff;
+ border-color: var(--accent);
+ background: var(--accent-light);
}
}
@@ -1248,32 +1264,60 @@ watch(() => currentShot.value, () => {
.video-preview {
width: 100%;
aspect-ratio: 2/1;
- background: #f0f2f5;
+ background: var(--bg-secondary);
border-radius: 6px;
overflow: hidden;
margin-bottom: 8px;
- border: 1px solid #dcdfe6;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+ border: 1px solid var(--border-primary);
+ box-shadow: var(--shadow-sm);
+ position: relative;
+ cursor: pointer;
+ }
+
+ .video-play-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(0, 0, 0, 0.4);
+ transition: opacity 0.3s ease;
+
+ .el-icon {
+ color: white;
+ filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
+ }
+
+ &.hidden {
+ opacity: 0;
+ }
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.5);
+ }
}
.background-placeholder,
.video-placeholder {
width: 100%;
aspect-ratio: 2/1;
- background: #fafafa;
+ background: var(--bg-primary);
border-radius: 6px;
- border: 2px dashed #c0c4cc;
+ border: 2px dashed var(--border-secondary);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- color: #909399;
+ color: var(--text-muted);
margin-bottom: 8px;
transition: all 0.3s ease;
&:hover {
- border-color: #409eff;
- background: #ecf5ff;
+ border-color: var(--accent);
+ background: var(--accent-light);
}
.el-icon {
@@ -1322,12 +1366,12 @@ watch(() => currentShot.value, () => {
.help-text {
margin-top: 6px;
font-size: 11px;
- color: #909399;
+ color: var(--text-muted);
line-height: 1.5;
padding: 4px 8px;
- background: #ecf5ff;
+ background: var(--accent-light);
border-radius: 4px;
- border-left: 2px solid #409eff;
+ border-left: 2px solid var(--accent);
}
.character-list {
@@ -1347,8 +1391,8 @@ watch(() => currentShot.value, () => {
transform: translateY(-2px);
.avatar-wrapper {
- border-color: #409eff;
- box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
+ border-color: var(--accent);
+ box-shadow: var(--shadow-md);
}
}
@@ -1357,19 +1401,19 @@ watch(() => currentShot.value, () => {
height: 50px;
border-radius: 50%;
overflow: hidden;
- background: #f0f2f5;
+ background: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
- color: #909399;
- border: 2px solid #c0c4cc;
+ color: var(--text-muted);
+ border: 2px solid var(--border-secondary);
transition: all 0.3s ease;
margin-bottom: 6px;
}
.avatar-name {
font-size: 11px;
- color: #606266;
+ color: var(--text-secondary);
text-align: center;
max-width: 100%;
overflow: hidden;
@@ -1384,16 +1428,16 @@ watch(() => currentShot.value, () => {
.composition-placeholder {
width: 100%;
aspect-ratio: 2/1;
- background: #fafafa;
+ background: var(--bg-primary);
border-radius: 6px;
- border: 2px dashed #c0c4cc;
+ border: 2px dashed var(--border-secondary);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 8px;
- color: #909399;
+ color: var(--text-muted);
.el-icon {
font-size: 32px;
@@ -1406,7 +1450,7 @@ watch(() => currentShot.value, () => {
.hint {
font-size: 10px;
- color: #909399;
+ color: var(--text-muted);
margin-top: 4px;
}
}
@@ -1417,25 +1461,25 @@ watch(() => currentShot.value, () => {
:deep(.el-input__wrapper),
:deep(.el-textarea__inner),
:deep(.el-select) {
- background-color: #ffffff;
+ background-color: var(--bg-card);
border-radius: 6px;
- border: 1px solid #dcdfe6;
+ border: 1px solid var(--border-primary);
transition: all 0.3s ease;
&:hover {
- border-color: #c0c4cc;
+ border-color: var(--border-secondary);
}
&:focus,
&.is-focus {
- border-color: #409eff;
- box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+ border-color: var(--accent);
+ box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.1);
}
}
:deep(.el-input__inner),
:deep(.el-textarea__inner) {
- color: #606266;
+ color: var(--text-primary);
font-size: 13px;
}
@@ -1444,7 +1488,7 @@ watch(() => currentShot.value, () => {
}
:deep(.el-divider) {
- border-color: #e4e7ed;
+ border-color: var(--border-primary);
margin: 12px 0;
}
diff --git a/web/src/components/editor/VideoTimelineEditor.vue b/web/src/components/editor/VideoTimelineEditor.vue
index 88c5eaa..bf94801 100644
--- a/web/src/components/editor/VideoTimelineEditor.vue
+++ b/web/src/components/editor/VideoTimelineEditor.vue
@@ -26,7 +26,7 @@
+
+
-
+
+
+
@@ -154,7 +158,18 @@
@dragover.prevent
@click="clickTimeline($event)"
>
-
{{ $t('video.videoTrack') }}
+
+ {{ $t('video.videoTrack') }}
+
+
+
{
}
}
+const clearAllClips = () => {
+ if (timelineClips.value.length === 0) return
+
+ timelineClips.value = []
+ audioClips.value = []
+ selectedClipId.value = null
+ selectedAudioClipId.value = null
+ currentTime.value = 0
+ ElMessage.success('已清空轨道')
+}
+
const updateClipOrders = () => {
timelineClips.value.forEach((clip, index) => {
clip.order = index
@@ -1356,6 +1382,14 @@ const pauseTimeline = () => {
}
}
+const togglePlay = () => {
+ if (isPlaying.value) {
+ pauseTimeline()
+ } else {
+ playTimeline()
+ }
+}
+
// 键盘快捷键
const handleKeyPress = (event: KeyboardEvent) => {
// 如果在输入框中，不处理快捷键
@@ -1665,16 +1699,16 @@ defineExpose({
height: 100%;
display: flex;
flex-direction: column;
- background: #fafafa;
- color: #333;
+ background: var(--bg-primary);
+ color: var(--text-primary);
.editor-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
- background: #f5f5f5;
- border: 1px solid #e0e0e0;
+ background: var(--bg-secondary);
+ border: 1px solid var(--border-primary);
.toolbar-left {
display: flex;
@@ -1684,7 +1718,7 @@ defineExpose({
.time-display {
font-family: 'Courier New', monospace;
font-size: 14px;
- color: #666;
+ color: var(--text-secondary);
min-width: 160px;
}
}
@@ -1699,8 +1733,8 @@ defineExpose({
flex: 0 0 500px;
display: flex;
flex-direction: column;
- background: #fff;
- border: 1px solid #e0e0e0;
+ background: var(--bg-card);
+ border: 1px solid var(--border-primary);
.video-preview {
flex: 1;
@@ -1725,7 +1759,35 @@ defineExpose({
display: flex;
align-items: center;
justify-content: center;
- background: rgba(245, 245, 245, 0.95);
+ background: var(--bg-secondary);
+ }
+
+ .video-play-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(0, 0, 0, 0.3);
+ cursor: pointer;
+ transition: opacity 0.3s ease;
+ z-index: 5;
+
+ .el-icon {
+ color: white;
+ filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
+ }
+
+ &.hidden {
+ opacity: 0;
+ }
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.4);
+ }
}
.transition-overlay {
@@ -1861,8 +1923,8 @@ defineExpose({
.preview-controls {
padding: 12px 16px;
- background: #f5f5f5;
- border: 1px solid #e0e0e0;
+ background: var(--bg-secondary);
+ border: 1px solid var(--border-primary);
}
}
@@ -1870,7 +1932,7 @@ defineExpose({
flex: 1;
display: flex;
flex-direction: column;
- background: #fff;
+ background: var(--bg-card);
overflow: hidden;
.library-header {
@@ -1878,8 +1940,8 @@ defineExpose({
justify-content: space-between;
align-items: center;
padding: 12px 16px;
- background: #f5f5f5;
- border: 1px solid #e0e0e0;
+ background: var(--bg-secondary);
+ border: 1px solid var(--border-primary);
.header-left {
display: flex;
@@ -1890,12 +1952,12 @@ defineExpose({
margin: 0;
font-size: 14px;
font-weight: 500;
- color: #333;
+ color: var(--text-primary);
}
span {
font-size: 12px;
- color: #999;
+ color: var(--text-muted);
}
}
}
@@ -1915,26 +1977,26 @@ defineExpose({
}
&::-webkit-scrollbar-track {
- background: #f0f0f0;
+ background: var(--bg-secondary);
border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
- background: #d0d0d0;
+ background: var(--border-secondary);
border-radius: 4px;
&:hover {
- background: #c0c0c0;
+ background: var(--border-primary);
}
}
.media-item {
position: relative;
- background: #f5f5f5;
+ background: var(--bg-secondary);
border-radius: 6px;
overflow: hidden;
cursor: move;
- border: 1px solid var(--el-border-color);
+ border: 1px solid var(--border-primary);
transition: all 0.3s;
&:hover {
@@ -1960,7 +2022,7 @@ defineExpose({
position: relative;
width: 100%;
aspect-ratio: 16/9;
- background: #f0f0f0;
+ background: var(--bg-card-hover);
cursor: pointer;
video {
@@ -2017,13 +2079,13 @@ defineExpose({
.media-title {
font-size: 12px;
font-weight: 500;
- color: #333;
+ color: var(--text-primary);
margin-bottom: 4px;
}
.media-desc {
font-size: 11px;
- color: #999;
+ color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -2038,16 +2100,16 @@ defineExpose({
flex: 0 0 280px;
display: flex;
flex-direction: column;
- background: #fff;
- border: 1px solid #e0e0e0;
+ background: var(--bg-card);
+ border: 1px solid var(--border-primary);
.timeline-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
- background: #f5f5f5;
- border: 1px solid #e0e0e0;
+ background: var(--bg-secondary);
+ border: 1px solid var(--border-primary);
.zoom-controls {
display: flex;
@@ -2056,7 +2118,7 @@ defineExpose({
.zoom-level {
font-size: 12px;
- color: #999;
+ color: var(--text-muted);
min-width: 50px;
text-align: right;
}
@@ -2068,12 +2130,12 @@ defineExpose({
position: relative;
overflow-x: auto;
overflow-y: hidden;
- background: #fafafa;
+ background: var(--bg-primary);
.timeline-ruler {
height: 30px;
- background: #fff;
- border: 1px solid #e0e0e0;
+ background: var(--bg-card);
+ border: 1px solid var(--border-primary);
position: relative;
.ruler-tick {
@@ -2083,11 +2145,11 @@ defineExpose({
.tick-mark {
width: 1px;
- background: #d0d0d0;
+ background: var(--border-secondary);
&.major {
height: 20px;
- background: #b0b0b0;
+ background: var(--border-primary);
}
&.minor {
@@ -2101,7 +2163,7 @@ defineExpose({
top: 2px;
left: 4px;
font-size: 10px;
- color: #999;
+ color: var(--text-muted);
font-family: 'Courier New', monospace;
}
}
@@ -2117,8 +2179,8 @@ defineExpose({
.playhead-line {
width: 2px;
height: 100%;
- background: #3498db;
- box-shadow: 0 0 8px rgba(52, 152, 219, 0.6);
+ background: var(--accent);
+ box-shadow: 0 0 8px rgba(14, 165, 233, 0.6);
}
.playhead-handle {
@@ -2127,17 +2189,17 @@ defineExpose({
left: -6px;
width: 14px;
height: 14px;
- background: #3498db;
+ background: var(--accent);
border-radius: 50%;
- border: 2px solid #fff;
+ border: 2px solid var(--bg-card);
}
}
.timeline-track {
position: relative;
height: 80px;
- background: #f5f5f5;
- border: 1px solid #e0e0e0;
+ background: var(--bg-secondary);
+ border: 1px solid var(--border-primary);
.track-label {
position: absolute;
@@ -2149,9 +2211,9 @@ defineExpose({
align-items: center;
padding-left: 12px;
font-size: 12px;
- color: #666;
- background: #fff;
- border: 1px solid #e0e0e0;
+ color: var(--text-secondary);
+ background: var(--bg-card);
+ border: 1px solid var(--border-primary);
z-index: 50;
}
@@ -2164,7 +2226,7 @@ defineExpose({
position: absolute;
top: 8px;
bottom: 8px;
- background: #3a5f7d;
+ background: var(--accent);
border-radius: 4px;
border: 2px solid transparent;
cursor: move;
@@ -2172,13 +2234,13 @@ defineExpose({
overflow: hidden;
&:hover {
- border-color: #5a9fd4;
- box-shadow: 0 2px 8px rgba(90, 159, 212, 0.3);
+ border-color: var(--accent-hover);
+ box-shadow: var(--shadow-md);
}
&.selected {
- border-color: #3498db;
- box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
+ border-color: var(--accent);
+ box-shadow: var(--shadow-glow);
}
.clip-content {
@@ -2191,7 +2253,7 @@ defineExpose({
.clip-thumbnail {
width: 60px;
height: 100%;
- background: #f0f0f0;
+ background: var(--bg-card-hover);
border-radius: 3px;
overflow: hidden;
flex-shrink: 0;
@@ -2211,7 +2273,7 @@ defineExpose({
.clip-title {
font-size: 11px;
font-weight: 500;
- color: #333;
+ color: var(--text-inverse);
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
@@ -2220,7 +2282,8 @@ defineExpose({
.clip-duration {
font-size: 10px;
- color: #666;
+ color: var(--text-inverse);
+ opacity: 0.8;
}
}
}
@@ -2263,7 +2326,7 @@ defineExpose({
transition: opacity 0.2s;
&:hover {
- background: #e74c3c;
+ background: var(--error);
}
}
@@ -2305,7 +2368,7 @@ defineExpose({
top: 100%;
margin-top: 4px;
font-size: 10px;
- color: #666;
+ color: var(--text-secondary);
white-space: nowrap;
background: rgba(0, 0, 0, 0.8);
padding: 2px 6px;
@@ -2331,31 +2394,31 @@ defineExpose({
padding-right: 8px;
.el-button {
- color: #999;
+ color: var(--text-muted);
&:hover {
- color: #409eff;
+ color: var(--accent);
}
}
}
.audio-clip {
- background: #5d4a7a;
+ background: #7c3aed;
&:hover {
- border-color: #8b6fb3;
- box-shadow: 0 2px 8px rgba(139, 111, 179, 0.3);
+ border-color: #a78bfa;
+ box-shadow: var(--shadow-md);
}
&.selected {
- border-color: #9b59b6;
- box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.3);
+ border-color: #8b5cf6;
+ box-shadow: var(--shadow-glow);
}
.audio-waveform {
width: 60px;
height: 100%;
- background: linear-gradient(135deg, #8e44ad 0%, #3498db 100%);
+ background: linear-gradient(135deg, #8b5cf6 0%, var(--accent) 100%);
border-radius: 3px;
display: flex;
align-items: center;
@@ -2384,7 +2447,7 @@ defineExpose({
.progress-message {
font-size: 14px;
- color: #606266;
+ color: var(--text-secondary);
font-weight: 500;
}
}
@@ -2392,7 +2455,7 @@ defineExpose({
.progress-tips {
margin-top: 20px;
padding: 12px;
- background: #f5f7fa;
+ background: var(--bg-secondary);
border-radius: 6px;
p {
@@ -2401,7 +2464,7 @@ defineExpose({
align-items: center;
gap: 8px;
font-size: 13px;
- color: #606266;
+ color: var(--text-secondary);
.el-icon {
font-size: 16px;
diff --git a/web/src/locales/en-US.ts b/web/src/locales/en-US.ts
index 62fbc49..6e47f79 100644
--- a/web/src/locales/en-US.ts
+++ b/web/src/locales/en-US.ts
@@ -52,7 +52,8 @@ export default {
name: 'Name',
description: 'Description',
createdAt: 'Created At',
- updatedAt: 'Updated At'
+ updatedAt: 'Updated At',
+ perPage: 'Per Page'
},
settings: {
title: 'Settings',
@@ -110,13 +111,23 @@ export default {
}
},
drama: {
- title: 'Drama Management',
+ title: 'My Drama Projects',
create: 'Create Project',
totalProjects: 'Total {count} projects',
- createNew: 'Create New Project',
- aiConfig: 'AI Configuration',
- aiConfigTip: 'Please configure AI services before creating a project',
- empty: 'No projects yet, click the button above to create a new project',
+ createNew: 'Create Project',
+ createDesc: 'Fill in basic information to create your drama project',
+ aiConfig: 'AI Config',
+ aiConfigTip: 'Please configure AI service before creating a project',
+ empty: 'No projects yet',
+ emptyHint: 'Click "Create Project" button above to start your first drama',
+ editProject: 'Edit Project',
+ projectName: 'Project Name',
+ projectNamePlaceholder: 'Enter project name',
+ projectDesc: 'Project Description',
+ projectDescPlaceholder: 'Enter project description (optional)',
+ deleteConfirm: 'Are you sure you want to delete this project?',
+ noCover: 'No cover',
+ noDescription: 'No description',
status: {
draft: 'Draft',
production: 'In Production',
@@ -632,6 +643,7 @@ export default {
dragToTimeline: 'Drag scenes to timeline to start editing',
videoTrack: 'Video Track',
audioTrack: 'Audio Track',
+ clearTrack: 'Clear Track',
soundAndMusic: 'Sound & Music',
soundMusicInDev: 'Sound & Music feature in development',
noMergeYet: 'No videos merged yet',
diff --git a/web/src/locales/zh-CN.ts b/web/src/locales/zh-CN.ts
index 5a74efe..fb96580 100644
--- a/web/src/locales/zh-CN.ts
+++ b/web/src/locales/zh-CN.ts
@@ -133,6 +133,15 @@ export default {
aiConfig: 'AI配置',
aiConfigTip: '请先配置 AI 服务后再创建项目',
empty: '暂无项目，点击上方按钮创建新项目',
+ emptyHint: '点击上方"创建新项目"按钮开始您的第一部短剧',
+ editProject: '编辑项目',
+ projectName: '项目名称',
+ projectNamePlaceholder: '请输入项目名称',
+ projectDesc: '项目描述',
+ projectDescPlaceholder: '请输入项目描述（可选）',
+ deleteConfirm: '确定要删除这个项目吗？',
+ noCover: '暂无封面',
+ noDescription: '暂无描述',
status: {
draft: '草稿',
production: '制作中',
@@ -533,6 +542,7 @@ export default {
dragToTimeline: '将场景拖拽到时间线开始编辑',
videoTrack: '视频轨道',
audioTrack: '音频轨道',
+ clearTrack: '清空轨道',
soundAndMusic: '音效与配乐',
soundMusicInDev: '音效与配乐功能开发中',
noMergeYet: '还没有合成过视频',
diff --git a/web/src/main.ts b/web/src/main.ts
index 6c24eb0..3a7bc94 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -2,6 +2,8 @@ import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
+import './assets/styles/element/index.scss'
+
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
diff --git a/web/src/views/drama/DramaCreate.vue b/web/src/views/drama/DramaCreate.vue
index d5b7e8c..db83a38 100644
--- a/web/src/views/drama/DramaCreate.vue
+++ b/web/src/views/drama/DramaCreate.vue
@@ -1,47 +1,64 @@
-
-
-
-
+
+ ()
@@ -68,6 +87,7 @@ const rules: FormRules = {
]
}
+// Submit form / 提交表单
const handleSubmit = async () => {
if (!formRef.value) return
@@ -87,25 +107,69 @@ const handleSubmit = async () => {
})
}
+// Go back / 返回上一页
const goBack = () => {
router.back()
}
diff --git a/web/src/views/drama/DramaList.vue b/web/src/views/drama/DramaList.vue
index 5c8e04b..0b07ffc 100644
--- a/web/src/views/drama/DramaList.vue
+++ b/web/src/views/drama/DramaList.vue
@@ -1,123 +1,173 @@
-
创建新项目
- -
+
@@ -49,8 +66,10 @@
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { ArrowLeft, Plus } from '@element-plus/icons-vue'
import { dramaAPI } from '@/api/drama'
import type { CreateDramaRequest } from '@/types/drama'
+import { PageHeader } from '@/components/common'
const router = useRouter()
const formRef = ref
+
+
-
-
-
+
+
-
-
+
+
+
-
-
- 创建项目
-
- 取消
-
-
-
+
+
+
+
+
+ 取消
+
+
+
+
+
-
-
-
-
- {{ $t('drama.title') }}
-{{ $t('drama.totalProjects', { count: total }) }}
-
+
+
+ ({
page_size: 12
})
+// Create dialog state / 创建弹窗状态
+const createDialogVisible = ref(false)
+const showAIConfig = ref(false)
+
+// Load drama list / 加载短剧列表
const loadDramas = async () => {
loading.value = true
try {
@@ -153,18 +217,11 @@ const loadDramas = async () => {
}
}
-const handleCreate = () => {
- router.push('/dramas/create')
-}
-
-const goToAIConfig = () => {
- router.push('/settings/ai-config')
-}
-
-const viewDrama = (id: string) => {
- router.push(`/dramas/${id}`)
-}
+// Navigation handlers / 导航处理
+const handleCreate = () => createDialogVisible.value = true
+const viewDrama = (id: string) => router.push(`/dramas/${id}`)
+// Edit dialog state / 编辑对话框状态
const editDialogVisible = ref(false)
const editLoading = ref(false)
const editForm = ref({
@@ -173,6 +230,7 @@ const editForm = ref({
description: ''
})
+// Open edit dialog / 打开编辑对话框
const editDrama = async (id: string) => {
editLoading.value = true
editDialogVisible.value = true
@@ -191,6 +249,7 @@ const editDrama = async (id: string) => {
}
}
+// Save edit changes / 保存编辑更改
const saveEdit = async () => {
if (!editForm.value.title) {
ElMessage.warning('请输入项目名称')
@@ -213,6 +272,7 @@ const saveEdit = async () => {
}
}
+// Delete drama / 删除短剧
const deleteDrama = async (id: string) => {
try {
await dramaAPI.delete(id)
@@ -223,243 +283,228 @@ const deleteDrama = async (id: string) => {
}
}
-
-const formatDate = (dateString: string) => {
- const date = new Date(dateString)
- const now = new Date()
- const diff = now.getTime() - date.getTime()
- const days = Math.floor(diff / (1000 * 60 * 60 * 24))
-
- if (days === 0) return '今天'
- if (days === 1) return '昨天'
- if (days < 7) return `${days}天前`
- return date.toLocaleDateString()
-}
-
onMounted(() => {
loadDramas()
})
diff --git a/web/src/views/drama/DramaManagement.vue b/web/src/views/drama/DramaManagement.vue
index 81987b7..ac37039 100644
--- a/web/src/views/drama/DramaManagement.vue
+++ b/web/src/views/drama/DramaManagement.vue
@@ -1,61 +1,48 @@
-
+
-
-
-
-
-
-
-
- 取消
- 保存
-
-
@@ -125,9 +175,18 @@
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
-import { Plus, Clock, Film, Setting } from '@element-plus/icons-vue'
+import {
+ Plus,
+ Film,
+ Setting,
+ Edit,
+ View,
+ Delete,
+ InfoFilled
+} from '@element-plus/icons-vue'
import { dramaAPI } from '@/api/drama'
-import type { Drama, DramaListQuery, DramaStatus } from '@/types/drama'
+import type { Drama, DramaListQuery } from '@/types/drama'
+import { PageHeader, ProjectCard, ThemeToggle, ActionButton, CreateDramaDialog, EmptyState, AIConfigDialog } from '@/components/common'
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
const router = useRouter()
@@ -140,6 +199,11 @@ const queryParams = ref
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+ {{ $t('drama.totalProjects', { count: total }) }}
+
+
+
+
+ {{ $t('common.perPage') }}
+
-
- {{ $t('drama.aiConfigTip') }}
-
-
- {{ $t('drama.aiConfig') }}
- {{ $t('drama.createNew') }}
+
-
-
-
-
-
-
- ![]()
-
-
-
-
- {{ $t('drama.noCover') }}
-
-
-
- {{ drama.genre }}
-
-
- {{ drama.title }}
-{{ drama.description || $t('drama.noDescription') }}
- - -
- {{ $t('storyboard.add') }}
-
+
-
+
- {{ $t('common.back') }}
-
-
-
- {{ drama?.title }}
-
+
@@ -261,6 +250,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft, Document, User, Picture, Plus } from '@element-plus/icons-vue'
import { dramaAPI } from '@/api/drama'
import type { Drama } from '@/types/drama'
+import { PageHeader, StatCard, EmptyState } from '@/components/common'
const router = useRouter()
const route = useRoute()
@@ -547,93 +537,126 @@ onMounted(() => {
diff --git a/web/src/views/drama/DramaWorkflow.vue b/web/src/views/drama/DramaWorkflow.vue
index 004cdc7..d38b844 100644
--- a/web/src/views/drama/DramaWorkflow.vue
+++ b/web/src/views/drama/DramaWorkflow.vue
@@ -1327,12 +1327,17 @@ onMounted(() => {
diff --git a/web/src/views/drama/ProfessionalEditor.vue b/web/src/views/drama/ProfessionalEditor.vue
index 2e7efe3..0382585 100644
--- a/web/src/views/drama/ProfessionalEditor.vue
+++ b/web/src/views/drama/ProfessionalEditor.vue
@@ -4,15 +4,17 @@
@@ -24,15 +26,10 @@
+
+
+
+
@@ -251,6 +239,7 @@
{{ $t('common.confirm') }}
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
{{ drama?.title }}
@@ -101,7 +88,7 @@
style="margin-top: 40px;"
>
-
{{ $t('drama.management.createFirstEpisode') }}
@@ -205,9 +192,10 @@
-
+
+
-
+
-
-
-
-
- {{ episodesCount }}
- {{ $t('drama.management.episodesCreated') }}
-
-
-
-
-
- {{ charactersCount }}
- {{ $t('drama.management.charactersCreated') }}
-
-
-
-
-
- {{ scenesCount }}
- {{ $t('drama.management.sceneLibraryCount') }}
-
+
{{ $t('drama.management.projectInfo') }}
+{{ $t('drama.management.projectInfo') }}
{{ $t('storyboard.scriptStructure') }}
-
+
@@ -49,17 +46,10 @@
-
@@ -69,194 +59,171 @@
-
-
-
- {{ $t('storyboard.scene') }} (Scene)
- {{ $t('storyboard.selectScene') }}
-
-
- ![场景]()
-
-
-
- {{ currentStoryboard.background.location }} · {{ currentStoryboard.background.time }}
- {{ $t('editor.sceneId') }}: {{ currentStoryboard.scene_id || 'N/A' }}
-
-
{{ currentStoryboard.background ? $t('editor.sceneGenerating') : $t('editor.noBackground') }}
+
+
+ {{ $t('editor.actionSequence') }}
{{ $t('editor.keyFrame') }}
-
+ {{ $t('storyboard.scene') }} (Scene)
+ {{ $t('storyboard.selectScene')
+ }}
+
+
+ ![场景]()
+
-
-
-
+
{{ currentStoryboard.background.location }} · {{ currentStoryboard.background.time }}
+ {{ $t('editor.sceneId') }}: {{ currentStoryboard.scene_id || 'N/A' }}
-
-
-
-
- {{ $t('editor.cast') }} (Cast)
- {{ $t('editor.addCharacter') }}
-
-
-
-
-
-
- ![]()
- {{ char.name?.[0] || '?' }}
-
- {{ char.name }}
-
-
-
- {{ $t('editor.noCharacters') }}
-
-
-
-
-
- {{ $t('editor.visualSettings') }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ $t('editor.action') }} (Action)
-
-
-
- {{ $t('editor.result') }} (Result)
-
-
-
- {{ $t('editor.dialogue') }} (Dialogue)
-
-
-
-
- {{ $t('editor.description') }} (Description)
-
-
-
-
- {{ $t('editor.soundEffects') }}
-
-
-
-
-
-
- {{ $t('editor.bgmPrompt') }}
-
-
-
-
+ {{ $t('editor.atmosphere') }}
-
-
-
+
+
+
{{ currentStoryboard.background ? $t('editor.sceneGenerating') : $t('editor.noBackground') }}
+
+
+
+
+ {{ $t('editor.cast') }} (Cast)
+ {{
+ $t('editor.addCharacter') }}
+
+
+
+
+
+
+ ![]()
+ {{ char.name?.[0] || '?' }}
+
+ {{ char.name }}
+
+
+
+
+
+ {{ $t('editor.noCharacters') }}
+
+
+
+
+
+ {{ $t('editor.visualSettings') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('editor.action') }} (Action)
+
+
+
+ {{ $t('editor.result') }} (Result)
+
+
+
+ {{ $t('editor.dialogue') }} (Dialogue)
+
+
+
+
+ {{ $t('editor.description') }} (Description)
+
+
+
+
+ {{ $t('editor.soundEffects') }}
+
+
+
+
+
+
+ {{ $t('editor.bgmPrompt') }}
+
+
+
+
+ {{ $t('editor.atmosphere') }}
+
+
+
{{ $t('editor.prompt') }}
-
+
{{ $t('editor.extractPrompt') }}
-
-
+
{{ generatingImage ? $t('editor.generating') : $t('editor.generateImage') }}
{{ $t('editor.uploadImage') }}
@@ -326,21 +272,15 @@
{{ $t('editor.generationResult') }} ({{ generatedImages.length }})
-
-
+
-
+
生成中...
@@ -360,62 +300,59 @@
-
+
{{ currentStoryboard.video_prompt || '暂无提示词' }}
-
- {{ $t('video.model') }}
-
-
+
+ {{ $t('video.model') }}
+
+
{{ model.name }}
-
-
+
-
- 多图
- 首尾帧
+
- 参考图
+
+ 参考图
-
+
-
-
{{ mode.label }}
- {{ mode.description }}
+ {{ mode.description }}
- {{ $t('professionalEditor.duration') }}
+
+
-
+ {{ $t('professionalEditor.duration') }}
+
-
+
-