redesign tools page

apps/jingrow/frontend/src/views/tools/Tools.vue

@@ -1,16 +1,11 @@
 <template>
   <div class="tools-page">
     <div class="page-header">
-      <div class="header-left">
+      <h2>{{ t('Tools') }}</h2>
-        <h2>{{ t('Tools') }}</h2>
+      <button class="add-tool-btn" @click="handleAddTool">
-        <p class="page-description">{{ t('Manage and organize your tool services') }}</p>
+        <i class="fa fa-plus"></i>
-      </div>
+        {{ t('Add Tool') }}
-      <div class="header-right">
+      </button>
-        <button class="add-tool-btn" @click="handleAddTool">
-          <i class="fa fa-plus"></i>
-          {{ t('Add Tool') }}
-        </button>
-      </div>
     </div>
 
     <div class="page-content">
@@ -41,35 +36,21 @@
           @drop="handleDrop($event, index)"
           @dragend="handleDragEnd"
         >
-          <div class="tool-card-header">
+          <div class="tool-card-content" @click="handleOpenTool(tool)">
-            <div class="tool-icon" :style="{ backgroundColor: tool.color || '#6366f1' }">
+            <div class="tool-icon" :style="{ backgroundColor: tool.color || '#1fc76f' }">
               <i :class="tool.icon || 'fa fa-cog'"></i>
             </div>
-            <div class="tool-drag-handle">
+            <div class="tool-name">{{ tool.name }}</div>
-              <i class="fa fa-grip-vertical"></i>
+          </div>
+          <n-dropdown
+            trigger="click"
+            :options="getToolMenuOptions(tool)"
+            @select="handleMenuSelect($event, tool)"
+          >
+            <div class="tool-menu-trigger" @click.stop>
+              <i class="fa fa-ellipsis-h"></i>
             </div>
-          </div>
+          </n-dropdown>
-          <div class="tool-card-body">
-            <h3 class="tool-title">{{ tool.name }}</h3>
-            <p class="tool-description">{{ tool.description || t('No description') }}</p>
-            <div class="tool-meta">
-              <span class="tool-category">{{ tool.category || t('Uncategorized') }}</span>
-              <span class="tool-status" :class="tool.status || 'active'">
-                {{ tool.status === 'active' ? t('Active') : t('Inactive') }}
-              </span>
-            </div>
-          </div>
-          <div class="tool-card-footer">
-            <button class="tool-action-btn" @click="handleEditTool(tool)" :title="t('Edit')">
-              <i class="fa fa-edit"></i>
-            </button>
-            <button class="tool-action-btn" @click="handleOpenTool(tool)" :title="t('Open')">
-              <i class="fa fa-external-link-alt"></i>
-            </button>
-            <button class="tool-action-btn danger" @click="handleDeleteTool(tool)" :title="t('Delete')">
-              <i class="fa fa-trash"></i>
-            </button>
-          </div>
         </div>
       </div>
 
@@ -158,9 +139,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, h } from 'vue'
 import { useRouter } from 'vue-router'
-import { NModal, NForm, NFormItem, NInput, NSelect, NAutoComplete, NColorPicker, NButton, NSpace, NText, useDialog, useMessage, type FormInst, type FormRules } from 'naive-ui'
+import { NModal, NForm, NFormItem, NInput, NSelect, NAutoComplete, NColorPicker, NButton, NSpace, NText, NDropdown, useDialog, useMessage, type FormInst, type FormRules, type DropdownOption } from 'naive-ui'
 import { t } from '../../shared/i18n'
 
 interface Tool {
@@ -501,13 +482,37 @@ function handleOpenTool(tool: Tool) {
     }
   }
 }
+
+// 获取工具菜单选项
+function getToolMenuOptions(_tool: Tool): DropdownOption[] {
+  return [
+    {
+      label: t('Edit'),
+      key: 'edit',
+      icon: () => h('i', { class: 'fa fa-edit' })
+    },
+    {
+      label: t('Delete'),
+      key: 'delete',
+      icon: () => h('i', { class: 'fa fa-trash' })
+    }
+  ]
+}
+
+// 处理菜单选择
+function handleMenuSelect(key: string, tool: Tool) {
+  if (key === 'edit') {
+    handleEditTool(tool)
+  } else if (key === 'delete') {
+    handleDeleteTool(tool)
+  }
+}
 </script>
 
 <style scoped>
 .tools-page {
   width: 100%;
-  padding: 24px;
+  padding: 16px;
-  background: #f9fafb;
   min-height: 100vh;
 }
 
@@ -515,32 +520,16 @@ function handleOpenTool(tool: Tool) {
 .page-header {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
-  margin-bottom: 32px;
+  margin-bottom: 24px;
-  padding: 24px;
+  padding: 0;
-  background: white;
-  border-radius: 16px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 
-.header-left h2 {
+.page-header h2 {
-  font-size: 28px;
+  font-size: 24px;
   font-weight: 700;
   color: #1f2937;
-  margin: 0 0 8px 0;
-}
-
-.page-description {
-  font-size: 15px;
-  color: #64748b;
   margin: 0;
-  font-weight: 400;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
 }
 
 .add-tool-btn {
@@ -679,44 +668,31 @@ function handleOpenTool(tool: Tool) {
 /* 工具网格 */
 .tools-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(12, 1fr);
-  gap: 24px;
+  gap: 16px;
   padding: 0;
 }
 
 /* 工具卡片 */
 .tool-card {
   background: white;
-  border-radius: 16px;
+  border-radius: 12px;
-  padding: 24px;
+  padding: 20px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: grab;
   position: relative;
   overflow: hidden;
-  border: 2px solid transparent;
+  border: 1px solid #e5e7eb;
-}
+  aspect-ratio: 1;
-
+  display: flex;
-.tool-card::before {
+  flex-direction: column;
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: #1fc76f;
-  opacity: 0;
-  transition: opacity 0.3s;
 }
 
 .tool-card:hover {
-  transform: translateY(-4px);
+  transform: translateY(-2px);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  border-color: #dcfce7;
+  border-color: #1fc76f;
-}
-
-.tool-card:hover::before {
-  opacity: 1;
 }
 
 .tool-card.dragging {
@@ -724,147 +700,72 @@ function handleOpenTool(tool: Tool) {
   transform: scale(0.95);
   cursor: grabbing;
   border-color: #1fc76f;
-  box-shadow: 0 8px 16px rgba(31, 199, 111, 0.3);
 }
 
 .tool-card.drag-over {
   border-color: #1fc76f;
-  box-shadow: 0 0 0 3px rgba(31, 199, 111, 0.1);
+  box-shadow: 0 0 0 2px rgba(31, 199, 111, 0.1);
-  transform: scale(1.02);
 }
 
-.tool-card-header {
+.tool-card-content {
+  flex: 1;
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   align-items: center;
-  margin-bottom: 16px;
+  justify-content: center;
+  cursor: pointer;
+  gap: 12px;
 }
 
 .tool-icon {
-  width: 56px;
+  width: 64px;
-  height: 56px;
+  height: 64px;
-  border-radius: 14px;
+  border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
-  font-size: 24px;
+  font-size: 32px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transition: transform 0.2s;
 }
 
-.tool-drag-handle {
+.tool-card:hover .tool-icon {
-  color: #9ca3af;
+  transform: scale(1.05);
-  cursor: grab;
-  padding: 8px;
-  border-radius: 6px;
-  transition: all 0.2s;
 }
 
-.tool-drag-handle:hover {
+.tool-name {
-  color: #1fc76f;
-  background: #f1f5f9;
-}
-
-.tool-drag-handle:active {
-  cursor: grabbing;
-}
-
-.tool-card-body {
-  margin-bottom: 20px;
-}
-
-.tool-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: #0f172a;
-  margin: 0 0 8px 0;
-}
-
-.tool-description {
   font-size: 14px;
-  color: #64748b;
+  font-weight: 500;
-  margin: 0 0 16px 0;
+  color: #1f2937;
-  line-height: 1.6;
+  text-align: center;
-  display: -webkit-box;
+  line-height: 1.4;
-  -webkit-line-clamp: 2;
+  word-break: break-word;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
 }
 
-.tool-meta {
+.tool-menu-trigger {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 28px;
+  height: 28px;
   display: flex;
-  gap: 12px;
   align-items: center;
-  flex-wrap: wrap;
+  justify-content: center;
-}
-
-.tool-category {
-  font-size: 12px;
-  padding: 4px 12px;
-  background: #f1f5f9;
-  color: #475569;
   border-radius: 6px;
-  font-weight: 500;
-}
-
-.tool-status {
-  font-size: 12px;
-  padding: 4px 12px;
-  border-radius: 6px;
-  font-weight: 500;
-}
-
-.tool-status.active {
-  background: #dcfce7;
-  color: #166534;
-}
-
-.tool-status.inactive {
-  background: #fee2e2;
-  color: #991b1b;
-}
-
-.tool-card-footer {
-  display: flex;
-  gap: 8px;
-  padding-top: 16px;
-  border-top: 1px solid #e2e8f0;
-}
-
-.tool-action-btn {
-  flex: 1;
-  height: 36px;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  background: white;
   color: #9ca3af;
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   transition: all 0.2s;
-  font-size: 14px;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(4px);
 }
 
-.tool-action-btn:hover {
+.tool-menu-trigger:hover {
+  color: #1f2937;
   background: #f8fafc;
-  color: #475569;
-  border-color: #cbd5e1;
 }
 
-.tool-action-btn.danger:hover {
+.tool-menu-trigger i {
-  background: #ef4444;
-  color: white;
-  border-color: #ef4444;
-}
-
-.tool-action-btn.danger:hover:not(:disabled) {
-  background: #dc2626;
-  border-color: #dc2626;
-}
-
-.tool-action-btn i {
   font-size: 14px;
 }
 
@@ -883,51 +784,59 @@ function handleOpenTool(tool: Tool) {
 }
 
 /* 响应式设计 */
-@media (max-width: 768px) {
+@media (max-width: 1920px) {
-  .tools-page {
-    padding: 16px;
-  }
-
-  .page-header {
-    flex-direction: column;
-    gap: 16px;
-    padding: 20px;
-  }
-
-  .header-right {
-    width: 100%;
-  }
-
-  .add-tool-btn {
-    width: 100%;
-    justify-content: center;
-  }
-
   .tools-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(10, 1fr);
-    gap: 16px;
+  }
+}
+
+@media (max-width: 1600px) {
+  .tools-grid {
+    grid-template-columns: repeat(8, 1fr);
+  }
+}
+
+@media (max-width: 1280px) {
+  .tools-grid {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+@media (max-width: 960px) {
+  .tools-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .tools-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
   }
 
   .tool-card {
-    padding: 20px;
+    padding: 16px;
+  }
+
+  .tool-icon {
+    width: 48px;
+    height: 48px;
+    font-size: 24px;
+  }
+
+  .tool-name {
+    font-size: 12px;
   }
 }
 
 @media (max-width: 480px) {
-  .tools-page {
+  .tools-grid {
-    padding: 12px;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
   }
 
-  .page-header {
+  .page-header h2 {
-    padding: 16px;
+    font-size: 20px;
-  }
-
-  .header-left h2 {
-    font-size: 24px;
-  }
-
-  .page-description {
-    font-size: 14px;
   }
 }
 </style>