326 lines
6.9 KiB
Vue
326 lines
6.9 KiB
Vue
<template>
|
||
<div class="home-container">
|
||
<!-- 中间内容区：标题、副标题、卡片 -->
|
||
<div class="center-content">
|
||
<!-- 第一行：标题 -->
|
||
<div class="title-section">
|
||
<span class="title-highlight">玄</span>
|
||
<span class="title-normal mr-4">鉴万物</span>
|
||
<span class="title-highlight">鉴</span>
|
||
<span class="title-normal">知明理 </span>
|
||
</div>
|
||
|
||
<!-- 第二行：副标题 -->
|
||
<div class="subtitle-section">本地运行、自主规划、安全可控的AI工作搭子</div>
|
||
|
||
<!-- 第三行：卡片 -->
|
||
<div class="card-section flex gap-8 items-center">
|
||
<div class="feature-card">
|
||
<div class="card-icon">
|
||
<el-icon :size="42"><Document /></el-icon>
|
||
</div>
|
||
<div class="card-title">智能文档处理</div>
|
||
<div class="card-desc">支持多种格式文档的智能解析与处理</div>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="card-icon">
|
||
<el-icon :size="42"><Document /></el-icon>
|
||
</div>
|
||
<div class="card-title">智能文档处理</div>
|
||
<div class="card-desc">支持多种格式文档的智能解析与处理</div>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="card-icon">
|
||
<el-icon :size="42"><Document /></el-icon>
|
||
</div>
|
||
<div class="card-title">智能文档处理</div>
|
||
<div class="card-desc">支持多种格式文档的智能解析与处理</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部：输入框 -->
|
||
<div class="input-section">
|
||
<div class="input-wrapper">
|
||
<textarea
|
||
v-model="inputText"
|
||
class="input-textarea"
|
||
placeholder="描述任务，/ 调用技能与工具，@调用知识库"
|
||
:disabled="isCreating"
|
||
@keydown="handleKeydown"
|
||
></textarea>
|
||
<div class="input-toolbar">
|
||
<div class="toolbar-left">
|
||
<button class="toolbar-btn file-btn">
|
||
<el-icon><Plus /></el-icon>
|
||
<span>添加文件</span>
|
||
</button>
|
||
<button class="toolbar-btn symbol-btn">/</button>
|
||
<button class="toolbar-btn symbol-btn">@</button>
|
||
</div>
|
||
<div class="toolbar-right">
|
||
<button class="send-btn" :disabled="!inputText.trim() || isCreating" @click="handleSend">
|
||
<el-icon><Promotion /></el-icon>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
import { useHistoryStore } from '@/stores/history';
|
||
import { Document, Plus, Promotion } from '@element-plus/icons-vue';
|
||
|
||
const router = useRouter();
|
||
const historyStore = useHistoryStore();
|
||
const inputText = ref('');
|
||
const isCreating = ref(false);
|
||
|
||
// 处理发送消息
|
||
async function handleSend() {
|
||
const text = inputText.value.trim();
|
||
if (!text || isCreating.value) return;
|
||
|
||
isCreating.value = true;
|
||
try {
|
||
// 创建会话，title 使用用户输入的文本
|
||
const session = await historyStore.createSession(text);
|
||
console.log('创建会话成功:', session);
|
||
|
||
// 清空输入框
|
||
inputText.value = '';
|
||
|
||
// 跳转到对话页面
|
||
router.push({
|
||
path: '/chat',
|
||
query: { sessionId: session.id },
|
||
});
|
||
} catch (err) {
|
||
console.error('创建会话失败:', err);
|
||
} finally {
|
||
isCreating.value = false;
|
||
}
|
||
}
|
||
|
||
// 处理键盘事件
|
||
function handleKeydown(e) {
|
||
// Enter 发送，Shift+Enter 换行
|
||
if (e.key === 'Enter' && !e.shiftKey) {
|
||
e.preventDefault();
|
||
handleSend();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.home-container {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: #ffffff;
|
||
position: relative;
|
||
}
|
||
|
||
/* 中间内容区 */
|
||
.center-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 24px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 第一行：标题 */
|
||
.title-section {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0;
|
||
}
|
||
|
||
.title-highlight {
|
||
font-weight: 900;
|
||
font-size: 42px;
|
||
line-height: 48px;
|
||
letter-spacing: -0.39px;
|
||
text-align: center;
|
||
color: #409eff;
|
||
}
|
||
|
||
.title-normal {
|
||
font-weight: 900;
|
||
font-size: 42px;
|
||
line-height: 48px;
|
||
letter-spacing: -0.39px;
|
||
text-align: center;
|
||
color: #303133;
|
||
}
|
||
|
||
/* 第二行：副标题 */
|
||
.subtitle-section {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
line-height: 22.75px;
|
||
letter-spacing: -0.15px;
|
||
text-align: center;
|
||
color: #606266;
|
||
}
|
||
|
||
/* 第三行：卡片 */
|
||
.card-section {
|
||
margin: 16px 0;
|
||
}
|
||
|
||
.feature-card {
|
||
width: 220px;
|
||
height: 158px;
|
||
border: 1px solid #e4e7ed;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 25px 16px;
|
||
gap: 8px;
|
||
background: #ffffff;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.card-icon {
|
||
width: 42px;
|
||
height: 42px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #409eff;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.card-title {
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
letter-spacing: 0.55px;
|
||
color: #303133;
|
||
}
|
||
|
||
.card-desc {
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
line-height: 16px;
|
||
color: #909399;
|
||
}
|
||
|
||
/* 底部：输入框 */
|
||
.input-section {
|
||
margin-top: auto;
|
||
padding-top: 24px;
|
||
}
|
||
|
||
.input-wrapper {
|
||
width: 760px;
|
||
height: 114px;
|
||
border-radius: 12px;
|
||
border: 1px solid #dcdfe6;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #ffffff;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.input-textarea {
|
||
width: 758px;
|
||
height: 60px;
|
||
padding: 16px;
|
||
border: none;
|
||
outline: none;
|
||
resize: none;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
color: #303133;
|
||
background: transparent;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.input-textarea::placeholder {
|
||
color: #c0c4cc;
|
||
}
|
||
|
||
.input-toolbar {
|
||
height: 54px;
|
||
padding: 0 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-top: 1px solid #ebeef5;
|
||
}
|
||
|
||
.toolbar-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.toolbar-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid #dcdfe6;
|
||
background: #ffffff;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
color: #606266;
|
||
}
|
||
|
||
.toolbar-btn:hover {
|
||
border-color: #409eff;
|
||
color: #409eff;
|
||
}
|
||
|
||
.file-btn {
|
||
width: 84px;
|
||
height: 28px;
|
||
gap: 4px;
|
||
padding: 0 8px;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.symbol-btn {
|
||
width: 28px;
|
||
height: 28px;
|
||
padding: 0;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.toolbar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.send-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
border: none;
|
||
background: #409eff;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.send-btn:hover {
|
||
background: #66b1ff;
|
||
}
|
||
</style>
|