From f5def6df6751808485adb93fac45ef94c87da37f Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sat, 14 Sep 2024 02:46:21 +0800
Subject: [PATCH] add tool view

---
 web/src/layouts/AppLayout.vue |  61 ++++++++++++++++----
 web/src/views/ToolsView.vue   | 103 ++++++++++++++++++++++++++++++++++
 2 files changed, 153 insertions(+), 11 deletions(-)
 create mode 100644 web/src/views/ToolsView.vue

diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue
index cf6e895c..a1581300 100644
--- a/web/src/layouts/AppLayout.vue
+++ b/web/src/layouts/AppLayout.vue
@@ -14,6 +14,10 @@ import {
   GoldOutlined,
   GoldFilled,
   BugOutlined,
+  ProjectFilled,
+  ProjectOutlined,
+  StarFilled,
+  StarOutlined,
 } from '@ant-design/icons-vue'
 import { themeConfig } from '@/assets/theme'
 import { useConfigStore } from '@/stores/config'
@@ -73,12 +77,19 @@ console.log(route)
       <div class="nav">
         <RouterLink to="/chat" class="nav-item" active-class="active">
           <component class="icon" :is="route.path === '/chat' ? MessageFilled : MessageOutlined" />
+          <span class="text">对话</span>
         </RouterLink>
         <RouterLink to="/database" class="nav-item" active-class="active">
           <component class="icon" :is="route.path.startsWith('/database') ? DatabaseFilled : DatabaseOutlined" />
+          <span class="text">知识</span>
         </RouterLink>
         <RouterLink to="/graph" class="nav-item" active-class="active">
-          <component class="icon" :is="route.path.startsWith('/graph') ? GoldFilled: GoldOutlined" />
+          <component class="icon" :is="route.path.startsWith('/graph') ? ProjectFilled: ProjectOutlined" />
+          <span class="text">图谱</span>
+        </RouterLink>
+        <RouterLink to="/tools" class="nav-item" active-class="active">
+          <component class="icon" :is="route.path.startsWith('/tools') ? StarFilled: StarOutlined" />
+          <span class="text">工具</span>
         </RouterLink>
       </div>
       <div class="fill" style="flex-grow: 1;"></div>
@@ -97,10 +108,11 @@ console.log(route)
       <RouterLink to="/setting" class="nav-item" active-class="active">设置</RouterLink>
     </div>
     <a-config-provider :theme="themeConfig">
-    <router-view v-slot="{ Component }" id="app-router-view">
-      <keep-alive>
+    <router-view v-slot="{ Component, route }" id="app-router-view">
+      <keep-alive v-if="route.meta.keepAlive !== false">
         <component :is="Component" />
       </keep-alive>
+      <component :is="Component" v-else />
     </router-view>
     </a-config-provider>
   </div>
@@ -139,6 +151,7 @@ console.log(route)
 div.header, #app-router-view {
   height: 100%;
   max-width: 100%;
+  user-select: none;
 }
 
 #app-router-view {
@@ -152,15 +165,15 @@ div.header, #app-router-view {
   flex: 0 0 70px;
   justify-content: flex-start;
   align-items: center;
-  background-color: var(--main-light-3);
+  background-color: var(--main-light-4);
   height: 100%;
-  width: 70px;
+  width: 74px;
   border-right: 1px solid var(--main-light-3);
 
   .logo {
     width: 40px;
     height: 40px;
-    margin: 18px 0 35px 0;
+    margin: 18px 0 18px 0;
 
     img {
       width: 100%;
@@ -177,24 +190,50 @@ div.header, #app-router-view {
   }
 
   .nav-item {
-    padding: 8px 16px;
-    border: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    padding: 4px;
+    padding-top: 10px;
+    border: 1px solid transparent;
     border-radius: 8px;
     background-color: transparent;
     color: #222;
     font-size: 20px;
     transition: background-color 0.2s ease-in-out;
     margin: 0 10px;
+    text-decoration: none;
+    cursor: pointer;
+
+    &.github {
+      padding: 10px 12px;
+    }
+
+    &.setting {
+      padding: 16px 12px;
+      width: 56px;
+    }
 
     &.active {
       font-weight: bold;
       color: var(--main-600);
-      background-color: rgba(  0,  93, 125, 0.1);
+      background-color: rgba(255, 255, 255, 0.8);
+      backdrop-filter: blur(10px);
+      box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.05);
+      border: 1px solid white;
     }
 
     &:hover {
-      background-color: rgba(  0,  93, 125, 0.1);
-      cursor: pointer;
+      background-color: rgba(255, 255, 255, 0.8);
+      backdrop-filter: blur(10px);
+    }
+
+    .text {
+      font-size: 12px;
+      margin-top: 4px;
+      text-align: center;
     }
   }
 
diff --git a/web/src/views/ToolsView.vue b/web/src/views/ToolsView.vue
new file mode 100644
index 00000000..207f3caa
--- /dev/null
+++ b/web/src/views/ToolsView.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="tools-container layout-container">
+    <HeaderComponent
+      title="工具箱"
+      description="这里展示了各种可用的工具。点击查看详情。"
+    >
+    </HeaderComponent>
+
+    <div class="tools-grid">
+      <div v-for="tool in tools" :key="tool.id" class="tool-card" @click="navigateToTool(tool.id)">
+        <div class="tool-icon">
+          <component :is="tool.icon" />
+        </div>
+        <div class="tool-info">
+          <h3>{{ tool.name }}</h3>
+          <p>{{ tool.description }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { CalculatorOutlined, FileSearchOutlined, TranslationOutlined } from '@ant-design/icons-vue';
+import HeaderComponent from '@/components/HeaderComponent.vue';
+import { Button as AButton } from 'ant-design-vue';
+
+const router = useRouter();
+
+const tools = ref([
+  {
+    id: 'calculator',
+    name: '计算器',
+    description: '进行各种数学计算',
+    icon: CalculatorOutlined,
+  },
+  {
+    id: 'file-analyzer',
+    name: '文件分析器',
+    description: '分析各种文件的内容和结构',
+    icon: FileSearchOutlined,
+  },
+  {
+    id: 'translator',
+    name: '翻译工具',
+    description: '在不同语言之间进行翻译',
+    icon: TranslationOutlined,
+  },
+  // 可以继续添加更多工具...
+]);
+
+const navigateToTool = (toolId) => {
+  router.push({ name: 'ToolsComponent', params: { id: toolId } });
+};
+</script>
+
+<style scoped lang="less">
+.tools-container {
+  padding: 0;
+}
+
+.tools-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+  padding: 24px;
+}
+
+.tool-card {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .tool-icon {
+    font-size: 24px;
+    margin-bottom: 10px;
+    color: #1890ff;
+  }
+
+  .tool-info {
+    h3 {
+      margin: 0 0 10px;
+      font-size: 18px;
+    }
+
+    p {
+      margin: 0;
+      color: #666;
+      font-size: 14px;
+    }
+  }
+}
+</style>