main: 增加工具调用支持及相关功能集成

- 添加多个工具卡片组件，包括 LsResultCard、BashResultCard、FileReadResultCard 和 ToolCallCard
- 更新 ChatView 消息处理逻辑，支持工具消息的解析与展示
- 实现工具调用与结果处理机制，完善工具消息的归一化及合并逻辑
- 优化消息界面，新增工具调用列表与对应的样式调整
- 更新工具调用相关功能的状态管理与交互逻辑

src/components/tools/LsResultCard.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  result: {
+    type: Object,
+    required: true,
+  },
+})
+
+// 解析结果
+const directory = computed(() => props.result?.directory || '.')
+const entries = computed(() => props.result?.entries || [])
+
+// 判断是否为详情模式
+const isDetailMode = computed(() => {
+  return entries.value.length > 0 && typeof entries.value[0] === 'object'
+})
+
+// 获取文件图标
+const getIcon = (entry) => {
+  if (typeof entry === 'string') {
+    // 简单模式：根据名称猜测类型
+    if (entry.startsWith('.')) return '📁' // 隐藏目录/文件
+    if (entry.includes('.')) return '📄'
+    return '📁'
+  }
+  // 详情模式
+  return entry.type === 'directory' ? '📁' : '📄'
+}
+
+// 获取条目名称
+const getName = (entry) => {
+  return typeof entry === 'string' ? entry : entry.name
+}
+
+// 是否为隐藏文件
+const isHidden = (entry) => {
+  const name = getName(entry)
+  return name.startsWith('.')
+}
+
+// 格式化文件大小
+const formatSize = (size) => {
+  if (!size) return ''
+  if (size < 1024) return `${size} B`
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
+  return `${(size / 1024 / 1024).toFixed(1)} MB`
+}
+</script>
+
+<template>
+  <div class="ls-result">
+    <div class="ls-header">
+      <span class="ls-path">{{ directory }}</span>
+      <span class="ls-count">{{ entries.length }} 项</span>
+    </div>
+    <div class="ls-entries">
+      <div
+        v-for="(entry, idx) in entries"
+        :key="idx"
+        class="ls-entry"
+        :class="{ hidden: isHidden(entry) }"
+      >
+        <span class="entry-icon">{{ getIcon(entry) }}</span>
+        <span class="entry-name">{{ getName(entry) }}</span>
+        <template v-if="isDetailMode && typeof entry === 'object'">
+          <span class="entry-size">{{ formatSize(entry.size) }}</span>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ls-result {
+  padding: 12px 16px;
+}
+
+.ls-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.ls-path {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 13px;
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.ls-count {
+  font-size: 12px;
+  color: var(--text-muted);
+  background: var(--chip-bg);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.ls-entries {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 6px;
+}
+
+.ls-entry {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  background: var(--surface);
+  border: 1px solid var(--border-soft);
+  transition: all 0.12s ease;
+}
+
+.ls-entry:hover {
+  background: var(--chip-bg);
+  transform: translateY(-1px);
+}
+
+.ls-entry.hidden {
+  opacity: 0.6;
+}
+
+.entry-icon {
+  font-size: 14px;
+}
+
+.entry-name {
+  flex: 1;
+  font-size: 13px;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.entry-size {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+</style>