feat: 对话功能开发

src/renderer/views/home/HomeView.vue

@@ -45,22 +45,33 @@
         <textarea
           v-model="inputText"
           class="input-textarea"
-          placeholder="描述任务，/ 调用技能与工具，@调用知识库"
+          placeholder="输入 / 调用技能，输入 @ 调用知识库"
           :disabled="isCreating"
           @keydown="handleKeydown"
+          @input="autoResize"
+          ref="textareaRef"
         ></textarea>
         <div class="input-toolbar">
           <div class="toolbar-left">
-            <button class="toolbar-btn file-btn">
-              <el-icon><Plus /></el-icon>
-              <span>添加文件</span>
+            <button class="dir-btn">
+              <LucideIcon name="folder-input" size="16"></LucideIcon>
+              <span>选择工作目录</span>
             </button>
-            <button class="toolbar-btn symbol-btn">/</button>
-            <button class="toolbar-btn symbol-btn">@</button>
+            <el-tooltip content="添加文件或者文件夹作为上下文" placement="top" :show-arrow="false">
+              <button class="toolbar-btn icon-btn">
+                <LucideIcon name="paperclip" size="16"></LucideIcon>
+              </button>
+            </el-tooltip>
+            <el-tooltip content="使用 / 调用技能" placement="top" :show-arrow="false">
+              <button class="toolbar-btn icon-btn">/</button>
+            </el-tooltip>
+            <el-tooltip content="使用 @ 调用知识库" placement="top" :show-arrow="false">
+              <button class="toolbar-btn icon-btn">@</button>
+            </el-tooltip>
           </div>
           <div class="toolbar-right">
             <button class="send-btn" :disabled="!inputText.trim() || isCreating" @click="handleSend">
-              <el-icon><Promotion /></el-icon>
+              <LucideIcon name="arrow-up"></LucideIcon>
             </button>
           </div>
         </div>
@@ -74,14 +85,23 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useAppStore } from '@/stores/app';
 import { useHistoryStore } from '@/stores/history';
-import { Document, Plus, Promotion } from '@element-plus/icons-vue';
+import { Document, Plus, Promotion, FolderOpened, Paperclip } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
+import LucideIcon from '@/components/base/LucideIcon.vue';
 
 const router = useRouter();
 const appStore = useAppStore();
 const historyStore = useHistoryStore();
 const inputText = ref('');
 const isCreating = ref(false);
+const textareaRef = ref(null);
+
+function autoResize() {
+  const el = textareaRef.value;
+  if (!el) return;
+  el.style.height = 'auto';
+  el.style.height = Math.min(el.scrollHeight, 323) + 'px';
+}
 
 // 处理发送消息
 async function handleSend() {
@@ -234,26 +254,28 @@ function handleKeydown(e) {
 .input-section {
   margin-top: auto;
   padding-top: 24px;
+  padding-bottom: 32px;
 }
 
 .input-wrapper {
   width: 760px;
-  height: 114px;
   border-radius: 12px;
-  border: 1px solid #dcdfe6;
+  border: 1px solid #dee0e4;
   display: flex;
   flex-direction: column;
   background: #ffffff;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  box-shadow: 0px 1px 20px 0px #00000008;
 }
 
 .input-textarea {
   width: 758px;
-  height: 60px;
+  min-height: 60px;
+  max-height: 323px;
   padding: 16px;
   border: none;
   outline: none;
   resize: none;
+  overflow-y: auto;
   font-size: 14px;
   line-height: 20px;
   color: #303133;
@@ -271,7 +293,6 @@ function handleKeydown(e) {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-top: 1px solid #ebeef5;
 }
 
 .toolbar-left {
@@ -296,20 +317,33 @@ function handleKeydown(e) {
   color: #409eff;
 }
 
-.file-btn {
-  width: 84px;
+.dir-btn {
   height: 28px;
   gap: 4px;
   padding: 0 8px;
-  border-radius: 6px;
+  background: #f5f6f7;
+  border-radius: 28px;
   font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  text-align: center;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #606266;
+}
+.dir-btn:hover {
+  background: #eeeff2;
 }
 
-.symbol-btn {
+.icon-btn {
   width: 28px;
   height: 28px;
-  padding: 0;
-  border-radius: 6px;
+  padding: 0 7px;
+  border-radius: 9999px;
   font-size: 12px;
   font-weight: 500;
 }
@@ -323,8 +357,8 @@ function handleKeydown(e) {
   width: 32px;
   height: 32px;
   border: none;
-  background: #409eff;
-  border-radius: 8px;
+  background: #1a1a1a;
+  border-radius: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -334,6 +368,11 @@ function handleKeydown(e) {
 }
 
 .send-btn:hover {
-  background: #66b1ff;
+  background: #333333;
+}
+
+.send-btn:disabled {
+  background: #8c8c8c;
+  cursor: not-allowed;
 }
 </style>