@hlw-zbzs/ai 1.0.2 → 1.0.3

package/src/components/chat.vue

@@ -1,474 +0,0 @@
-<template>
-	<div class="chat-wrapper">
-		<!-- 顶部预设话术栏 -->
-		<div class="prompt-bar">
-			<span class="prompt-label">常用话术:</span>
-			<span class="prompt-chip" @click="setPrompt('帮我写一段幽默风趣的直播间求点赞话术')">
-				求点赞
-			</span>
-			<span class="prompt-chip" @click="setPrompt('观众送出了嘉年华，写一段热情霸气的感谢词')">
-				感谢大哥
-			</span>
-			<span class="prompt-chip" @click="setPrompt('有观众在弹幕质疑商品价格偏高，给出高情商回复话术')">
-				高情商解围
-			</span>
-			<span class="prompt-chip" @click="setPrompt('直播间准备开始抽奖，帮我写一段炒热气氛的话术')">
-				抽奖倒计时
-			</span>
-		</div>
-
-		<!-- 对话气泡滚动区域 -->
-		<div class="chat-area">
-			<div v-if="dialogue.length === 0" class="chat-empty">
-				<n-icon :size="40" class="empty-icon"><HardwareChipOutline /></n-icon>
-				<span class="empty-title">AI 对话演练沙箱</span>
-				<span class="empty-desc">选择服务商后，在下方输入话术需求或点击上方预设，实时体验大模型流式输出与思考推理</span>
-			</div>
-
-			<div v-else class="chat-list">
-				<div
-					v-for="(msg, index) in dialogue"
-					:key="index"
-					class="chat-row"
-					:class="msg.role"
-				>
-					<div class="role-tag" :class="msg.role">
-						{{ msg.role === 'user' ? '主播' : 'AI' }}
-					</div>
-
-					<div class="msg-bubble">
-						<!-- 深度思考过程折叠块 (DeepSeek R1 等推理模型) -->
-						<div v-if="msg.think" class="think-box">
-							<div class="think-header">
-								<n-icon :size="12"><CodeSlashOutline /></n-icon>
-								<span>思考过程</span>
-							</div>
-							<div class="think-content">{{ msg.think }}</div>
-						</div>
-
-						<!-- 消息正文与复制操作 -->
-						<div class="msg-text">
-							<div class="text-content">
-								<span v-if="msg.text">{{ msg.text }}</span>
-								<span v-else-if="loading && index === dialogue.length - 1" class="loading-hint">
-									正在思考与生成回复...
-								</span>
-							</div>
-
-							<div v-if="msg.text" class="bubble-actions">
-								<button
-									class="copy-btn"
-									title="复制话术内容"
-									@click.stop="onCopy(msg.text)"
-								>
-									<n-icon :size="12"><CopyOutline /></n-icon>
-									<span>复制话术</span>
-								</button>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- 底部输入操作栏 -->
-		<div class="chat-input-bar">
-			<n-input
-				v-model:value="input"
-				type="textarea"
-				placeholder="输入提问内容 (快捷键 Enter 发送，Shift + Enter 换行)..."
-				:autosize="{ minRows: 2.5, maxRows: 5 }"
-				:disabled="loading"
-				size="medium"
-				@keydown="onKeyDown"
-			/>
-
-			<div class="input-bottom-row">
-				<span class="shortcut-tip">Enter 发送 / Shift + Enter 换行</span>
-
-				<div class="action-buttons">
-					<hlw-button
-						size="medium"
-						secondary
-						:icon="TrashOutline"
-						:disabled="dialogue.length === 0 || loading"
-						@click="onClear"
-					>
-						清空记录
-					</hlw-button>
-
-					<hlw-button
-						v-if="loading"
-						size="medium"
-						type="warning"
-						secondary
-						:icon="StopCircleOutline"
-						@click="onAbort"
-					>
-						停止生成
-					</hlw-button>
-
-					<hlw-button
-						v-else
-						size="medium"
-						type="primary"
-						:icon="PaperPlaneOutline"
-						:disabled="!input.trim()"
-						@click="onSend"
-					>
-						发送测试
-					</hlw-button>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import {
-	TrashOutline,
-	PaperPlaneOutline,
-	StopCircleOutline,
-	HardwareChipOutline,
-	CodeSlashOutline,
-	CopyOutline
-} from '@vicons/ionicons5'
-import { NInput, NIcon } from 'naive-ui'
-import { toast, HlwButton } from '@hlw-zbzs/vue'
-import { useAi } from '../core'
-import type { AiMsg } from '../types'
-
-const { loading, stream, abort } = useAi()
-
-const input = ref('')
-const dialogue = ref<AiMsg[]>([])
-
-function setPrompt(prompt: string) {
-	input.value = prompt
-}
-
-async function onCopy(content: string) {
-	if (!content) return
-	try {
-		if (navigator?.clipboard?.writeText) {
-			await navigator.clipboard.writeText(content)
-		} else {
-			const textarea = document.createElement('textarea')
-			textarea.value = content
-			textarea.style.position = 'fixed'
-			textarea.style.opacity = '0'
-			document.body.appendChild(textarea)
-			textarea.select()
-			document.execCommand('copy')
-			document.body.removeChild(textarea)
-		}
-		toast('已复制话术到剪贴板', 'success')
-	} catch (err: any) {
-		toast('复制失败，请手动复制', 'error')
-	}
-}
-
-function onKeyDown(event: KeyboardEvent) {
-	if (event.key === 'Enter' && !event.shiftKey) {
-		event.preventDefault()
-		if (input.value.trim() && !loading.value) {
-			onSend()
-		}
-	}
-}
-
-async function onSend() {
-	const userText = input.value.trim()
-	if (!userText || loading.value) return
-
-	input.value = ''
-	dialogue.value.push({ role: 'user', text: userText })
-
-	const aiMsg: AiMsg = { role: 'assistant', text: '', think: '' }
-	dialogue.value.push(aiMsg)
-
-	try {
-		await stream(
-			dialogue.value.slice(0, -1),
-			{
-				onToken: (delta) => {
-					aiMsg.text += delta
-				},
-				onThink: (delta) => {
-					if (!aiMsg.think) aiMsg.think = ''
-					aiMsg.think += delta
-				},
-				onError: (err) => {
-					toast(`生成错误: ${err.message}`, 'error')
-				}
-			}
-		)
-	} catch (err: any) {
-		aiMsg.text = `[请求失败]: ${err.message || '网络异常'}`
-	}
-}
-
-function onAbort() {
-	abort()
-	toast('已中止当前生成', 'info')
-}
-
-function onClear() {
-	dialogue.value = []
-}
-</script>
-
-<style scoped lang="scss">
-.chat-wrapper {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	background: #ffffff;
-
-	.prompt-bar {
-		height: 40px;
-		padding: 0 16px;
-		border-bottom: 1px solid #f1f5f9;
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		overflow-x: auto;
-		flex-shrink: 0;
-
-		.prompt-label {
-			font-size: 13px;
-			font-weight: 400;
-			color: #64748b;
-			white-space: nowrap;
-		}
-
-		.prompt-chip {
-			font-size: 12px;
-			font-weight: 400;
-			color: #2563eb;
-			background: #eff6ff;
-			border: 1px solid #dbeafe;
-			padding: 3px 10px;
-			border-radius: 4px;
-			cursor: pointer;
-			white-space: nowrap;
-			user-select: none;
-			transition: all 0.15s ease;
-
-			&:hover {
-				background: #dbeafe;
-			}
-		}
-	}
-
-	.chat-area {
-		flex: 1;
-		min-height: 0;
-		overflow-y: auto;
-		padding: 16px;
-
-		.chat-empty {
-			height: 100%;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			gap: 8px;
-			color: #94a3b8;
-			text-align: center;
-
-			.empty-icon {
-				color: #cbd5e1;
-			}
-
-			.empty-title {
-				font-size: 15px;
-				font-weight: 400;
-				color: #475569;
-			}
-
-			.empty-desc {
-				font-size: 13px;
-				font-weight: 400;
-				color: #94a3b8;
-				max-width: 340px;
-				line-height: 1.5;
-			}
-		}
-
-		.chat-list {
-			display: flex;
-			flex-direction: column;
-			gap: 14px;
-
-			.chat-row {
-				display: flex;
-				gap: 10px;
-				align-items: flex-start;
-
-				.role-tag {
-					width: 32px;
-					height: 32px;
-					border-radius: 6px;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					font-size: 12px;
-					font-weight: 400;
-					flex-shrink: 0;
-
-					&.user {
-						background: #2563eb;
-						color: #ffffff;
-					}
-
-					&.assistant {
-						background: #f1f5f9;
-						color: #334155;
-						border: 1px solid #e2e8f0;
-					}
-				}
-
-				.msg-bubble {
-					max-width: 85%;
-					display: flex;
-					flex-direction: column;
-					gap: 6px;
-
-					.think-box {
-						background: #f8fafc;
-						border-left: 3px solid #64748b;
-						padding: 8px 12px;
-						font-size: 12px;
-						font-weight: 400;
-						color: #64748b;
-						border-radius: 0 4px 4px 0;
-						font-family: monospace;
-
-						.think-header {
-							display: flex;
-							align-items: center;
-							gap: 4px;
-							font-weight: 400;
-							color: #475569;
-							margin-bottom: 3px;
-							font-size: 12px;
-						}
-
-						.think-content {
-							white-space: pre-wrap;
-							line-height: 1.5;
-						}
-					}
-
-					.msg-text {
-						background: #f8fafc;
-						border: 1px solid #f1f5f9;
-						color: #0f172a;
-						padding: 10px 14px;
-						border-radius: 8px;
-						font-size: 13px;
-						font-weight: 400;
-						line-height: 1.6;
-						white-space: pre-wrap;
-						word-break: break-word;
-
-						.bubble-actions {
-							display: flex;
-							justify-content: flex-end;
-							margin-top: 6px;
-							border-top: 1px dashed #e2e8f0;
-							padding-top: 5px;
-
-							.copy-btn {
-								display: inline-flex;
-								align-items: center;
-								gap: 3px;
-								background: #ffffff;
-								border: 1px solid #cbd5e1;
-								border-radius: 4px;
-								padding: 2px 8px;
-								font-size: 12px;
-								font-weight: 400;
-								color: #475569;
-								cursor: pointer;
-								user-select: none;
-								transition: all 0.15s ease;
-
-								&:hover {
-									color: #2563eb;
-									border-color: #93c5fd;
-									background: #eff6ff;
-								}
-							}
-						}
-
-						.loading-hint {
-							color: #94a3b8;
-							font-style: italic;
-						}
-					}
-				}
-
-				&.user {
-					flex-direction: row-reverse;
-
-					.msg-bubble {
-						align-items: flex-end;
-
-						.msg-text {
-							background: #2563eb;
-							border: none;
-							color: #ffffff;
-
-							.bubble-actions {
-								border-top: 1px dashed rgba(255, 255, 255, 0.3);
-
-								.copy-btn {
-									background: rgba(255, 255, 255, 0.15);
-									border-color: rgba(255, 255, 255, 0.4);
-									color: #ffffff;
-
-									&:hover {
-										background: rgba(255, 255, 255, 0.25);
-									}
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.chat-input-bar {
-		padding: 12px 16px;
-		background: #ffffff;
-		border-top: 1px solid #e2e8f0;
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		flex-shrink: 0;
-
-		.input-bottom-row {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-
-			.shortcut-tip {
-				font-size: 12px;
-				font-weight: 400;
-				color: #94a3b8;
-			}
-
-			.action-buttons {
-				display: flex;
-				align-items: center;
-				gap: 8px;
-			}
-		}
-	}
-}
-</style>

package/src/components/grid.vue

@@ -1,175 +0,0 @@
-<template>
-	<div class="engine-section">
-		<div class="section-header">
-			<span class="section-title">选择大模型服务商</span>
-			<span class="section-hint">点击一键切换引擎</span>
-		</div>
-
-		<div class="engine-grid">
-			<div
-				v-for="item in list"
-				:key="item.type"
-				class="engine-card"
-				:class="{ active: engine === item.type }"
-				@click="onSelect(item)"
-			>
-				<div class="card-head">
-					<span class="card-name">{{ item.name }}</span>
-					<span v-if="item.free" class="free-badge">免密</span>
-					<span v-else-if="item.url" class="key-link" title="点击打开官网获取 Key" @click.stop="openPortal(item)">
-						<span>获取Key</span>
-						<n-icon :size="11"><OpenOutline /></n-icon>
-					</span>
-				</div>
-				<span class="card-desc">{{ item.tag }}</span>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { OpenOutline } from '@vicons/ionicons5'
-import { NIcon } from 'naive-ui'
-import { tools } from '@hlw-zbzs/core'
-import { toast } from '@hlw-zbzs/vue'
-import { useAi } from '../core'
-import type { AiEngine, AiInfo } from '../types'
-
-const emit = defineEmits<{
-	(event: 'change', type: AiEngine): void
-}>()
-
-const { engine, list, select } = useAi()
-
-function openPortal(item: AiInfo) {
-	if (!item?.url) return
-	if (tools?.openExternal) {
-		tools.openExternal(item.url)
-	} else {
-		window.open(item.url, '_blank')
-	}
-	toast(`已为你打开【${item.name}】开发者控制台`, 'info')
-}
-
-function onSelect(item: AiInfo) {
-	select(item.type)
-	emit('change', item.type)
-}
-</script>
-
-<style scoped lang="scss">
-.engine-section {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-	padding: 16px 16px 14px 16px;
-	border-bottom: 1px solid #f1f5f9;
-
-	.section-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		border-bottom: 1px solid #f1f5f9;
-		padding-bottom: 6px;
-
-		.section-title {
-			font-size: 14px;
-			font-weight: 400;
-			color: #1e293b;
-		}
-
-		.section-hint {
-			font-size: 12px;
-			font-weight: 400;
-			color: #94a3b8;
-		}
-	}
-
-	.engine-grid {
-		display: grid;
-		grid-template-columns: repeat(3, minmax(0, 1fr));
-		gap: 10px;
-
-		.engine-card {
-			background: #f8fafc;
-			border: 1px solid #e2e8f0;
-			border-radius: 6px;
-			padding: 9px 12px;
-			cursor: pointer;
-			user-select: none;
-			transition: all 0.15s ease;
-			display: flex;
-			flex-direction: column;
-			gap: 4px;
-			min-width: 0;
-
-			.card-head {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-
-				.card-name {
-					font-size: 13px;
-					font-weight: 400;
-					color: #334155;
-				}
-
-				.free-badge {
-					font-size: 11px;
-					font-weight: 400;
-					color: #059669;
-					background: #ecfdf5;
-					padding: 0 4px;
-					border-radius: 3px;
-				}
-
-				.key-link {
-					display: inline-flex;
-					align-items: center;
-					gap: 2px;
-					font-size: 11px;
-					font-weight: 400;
-					color: #2563eb;
-					background: #eff6ff;
-					padding: 1px 5px;
-					border-radius: 3px;
-					cursor: pointer;
-					transition: all 0.15s ease;
-
-					&:hover {
-						background: #dbeafe;
-						color: #1d4ed8;
-					}
-				}
-			}
-
-			.card-desc {
-				font-size: 11px;
-				font-weight: 400;
-				color: #94a3b8;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-
-			&:hover {
-				border-color: #93c5fd;
-				background: #f1f5f9;
-			}
-
-			&.active {
-				border-color: #3b82f6;
-				background: #eff6ff;
-
-				.card-head .card-name {
-					color: #2563eb;
-				}
-
-				.card-desc {
-					color: #3b82f6;
-				}
-			}
-		}
-	}
-}
-</style>