会话相关

src/views/home/components/InputBar.vue

@@ -41,8 +41,14 @@
 
 				<div class="toolbar-right">
 					<span class="hint-text">Shift+Enter 换行</span>
-					<button class="send-btn" :disabled="sendDisabled" @click="handleSend">
-						<el-icon><Top /></el-icon>
+					<button
+						class="send-btn"
+						:class="{ 'is-stop': generating }"
+						:disabled="!generating && sendDisabled"
+						@click="generating ? emit('stop') : handleSend()"
+					>
+						<el-icon v-if="generating"><VideoPause /></el-icon>
+						<el-icon v-else><Top /></el-icon>
 					</button>
 				</div>
 			</div>
@@ -69,7 +75,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
-import { Top, MagicStick, Promotion, Close, Paperclip } from '@element-plus/icons-vue';
+import { Top, MagicStick, Promotion, Close, Paperclip, VideoPause } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import { getWorkflowList } from '/@/api/settings/creation';
 
@@ -77,11 +83,13 @@ interface Props {
 	sendDisabled?: boolean;
 	workflowLocked?: boolean;
 	hideShortcuts?: boolean;
+	generating?: boolean;
 }
 
 interface Emits {
 	(e: 'send', message: string): void;
 	(e: 'workflow-select', workflowId: string | null, isTemplate?: boolean): void;
+	(e: 'stop'): void;
 }
 
 interface Workflow {
@@ -96,6 +104,7 @@ const props = withDefaults(defineProps<Props>(), {
 	sendDisabled: false,
 	workflowLocked: false,
 	hideShortcuts: false,
+	generating: false,
 });
 const emit = defineEmits<Emits>();
 const message = ref('');
@@ -384,6 +393,16 @@ const onCapsuleAfterLeave = (el: Element) => {
 		cursor: not-allowed;
 		transform: none;
 	}
+
+	/* 生成中：变停止按钮 */
+	&.is-stop {
+		background: #f43f5e;
+		color: #fff;
+
+		&:hover {
+			background: #e11d48;
+		}
+	}
 }
 
 /* 快捷工作流胶囊 */