diff --git a/apps/jingrow/frontend/src/app/router/index.ts b/apps/jingrow/frontend/src/app/router/index.ts
index 1b2ab60..1850dc3 100644
--- a/apps/jingrow/frontend/src/app/router/index.ts
+++ b/apps/jingrow/frontend/src/app/router/index.ts
@@ -84,6 +84,11 @@ const router = createRouter({
           name: 'Settings',
           component: () => import('../../views/settings/Settings.vue')
         },
+        {
+          path: 'tools',
+          name: 'Tools',
+          component: () => import('../../views/tools/Tools.vue')
+        },
         {
           path: 'search',
           name: 'SearchResults',
diff --git a/apps/jingrow/frontend/src/shared/stores/menu.ts b/apps/jingrow/frontend/src/shared/stores/menu.ts
index 80851b3..de31909 100644
--- a/apps/jingrow/frontend/src/shared/stores/menu.ts
+++ b/apps/jingrow/frontend/src/shared/stores/menu.ts
@@ -54,7 +54,8 @@ function getDefaultMenus(): AppMenuItem[] {
     { id: 'nodes', key: 'local-ai-node', label: 'Nodes', icon: 'carbon:add-child-node', type: 'pagetype', pagetype: 'Local Ai Node', order: 6 },
     { id: 'localJobs', key: 'LocalJobList', label: 'Task Queue', icon: 'iconoir:task-list', type: 'route', routeName: 'LocalJobList', order: 7 },
     { id: 'scheduledJobs', key: 'ScheduledJobList', label: 'Scheduled Jobs', icon: 'carbon:event-schedule', type: 'route', routeName: 'ScheduledJobList', order: 8 },
-    { id: 'dev-group', key: 'dev-group', label: 'Development', icon: 'tabler:code', type: 'group', order: 9 },
+    { id: 'tools', key: 'Tools', label: 'Tools', icon: 'tabler:tool', type: 'route', routeName: 'Tools', order: 9 },
+    { id: 'dev-group', key: 'dev-group', label: 'Development', icon: 'tabler:code', type: 'group', order: 10 },
     { id: 'dev-template', key: 'dev-template', label: 'PageType Template', icon: 'tabler:file-code', type: 'route', routeName: 'CreatePagetypeTemplate', parentId: 'dev-group', order: 1 },
     { id: 'dev-app-template', key: 'dev-app-template', label: 'App Template', icon: 'tabler:app-window', type: 'route', routeName: 'CreateAppTemplate', parentId: 'dev-group', order: 1.5 },
     { id: 'package', key: 'package', label: 'Package', icon: 'tabler:package', type: 'pagetype', pagetype: 'Package', parentId: 'dev-group', order: 2 },
@@ -67,8 +68,8 @@ function getDefaultMenus(): AppMenuItem[] {
     { id: 'app-marketplace', key: 'AppMarketplace', label: 'App Marketplace', icon: 'tabler:shopping-cart', type: 'route', routeName: 'AppMarketplace', parentId: 'dev-group', order: 7.5 },
     { id: 'node-marketplace', key: 'NodeMarketplace', label: 'Node Marketplace', icon: 'carbon:add-child-node', type: 'route', routeName: 'NodeMarketplace', parentId: 'dev-group', order: 8 },
     { id: 'agent-marketplace', key: 'AgentMarketplace', label: 'Agent Marketplace', icon: 'hugeicons:robotic', type: 'route', routeName: 'AgentMarketplace', parentId: 'dev-group', order: 8.5 },
-    { id: 'menuManager', key: 'MenuManager', label: 'Menu Management', icon: 'tabler:menu-2', type: 'route', routeName: 'MenuManager', order: 10 },
-    { id: 'settings', key: 'Settings', label: 'Settings', icon: 'tabler:settings', routeName: 'Settings', order: 11, type: 'route' }
+    { id: 'menuManager', key: 'MenuManager', label: 'Menu Management', icon: 'tabler:menu-2', type: 'route', routeName: 'MenuManager', order: 11 },
+    { id: 'settings', key: 'Settings', label: 'Settings', icon: 'tabler:settings', routeName: 'Settings', order: 12, type: 'route' }
   ]
 }
 
diff --git a/apps/jingrow/frontend/src/views/tools/Tools.vue b/apps/jingrow/frontend/src/views/tools/Tools.vue
new file mode 100644
index 0000000..35dd1d8
--- /dev/null
+++ b/apps/jingrow/frontend/src/views/tools/Tools.vue
@@ -0,0 +1,934 @@
+<template>
+  <div class="tools-page">
+    <div class="page-header">
+      <div class="header-left">
+        <h2>{{ t('Tools') }}</h2>
+        <p class="page-description">{{ t('Manage and organize your tool services') }}</p>
+      </div>
+      <div class="header-right">
+        <button class="add-tool-btn" @click="handleAddTool">
+          <i class="fa fa-plus"></i>
+          {{ t('Add Tool') }}
+        </button>
+      </div>
+    </div>
+
+    <div class="page-content">
+      <!-- 空状态 -->
+      <div v-if="!loading && tools.length === 0" class="empty-state">
+        <div class="empty-icon">
+          <i class="fa fa-toolbox"></i>
+        </div>
+        <h3>{{ t('No Tools Yet') }}</h3>
+        <p>{{ t('Get started by adding your first tool service') }}</p>
+        <button class="empty-action-btn" @click="handleAddTool">
+          <i class="fa fa-plus"></i>
+          {{ t('Add Your First Tool') }}
+        </button>
+      </div>
+
+      <!-- 工具网格 -->
+      <div v-else class="tools-grid">
+        <div
+          v-for="(tool, index) in displayTools"
+          :key="tool.id"
+          class="tool-card"
+          :class="{ 'dragging': draggedTool?.id === tool.id, 'drag-over': dropIndex === index }"
+          :draggable="true"
+          @dragstart="handleDragStart($event, tool, index)"
+          @dragover.prevent="handleDragOver($event, index)"
+          @dragleave="handleDragLeave"
+          @drop="handleDrop($event, index)"
+          @dragend="handleDragEnd"
+        >
+          <div class="tool-card-header">
+            <div class="tool-icon" :style="{ backgroundColor: tool.color || '#6366f1' }">
+              <i :class="tool.icon || 'fa fa-cog'"></i>
+            </div>
+            <div class="tool-drag-handle">
+              <i class="fa fa-grip-vertical"></i>
+            </div>
+          </div>
+          <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>
+
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-state">
+        <i class="fa fa-spinner fa-spin"></i>
+        <span>{{ t('Loading tools...') }}</span>
+      </div>
+    </div>
+
+    <!-- 添加/编辑工具对话框 -->
+    <n-modal v-model:show="showToolModal" preset="dialog" :title="editingTool ? t('Edit Tool') : t('Add Tool')">
+      <n-form :model="toolForm" :rules="dynamicFormRules" label-width="100" ref="toolFormRef">
+        <n-form-item :label="t('Tool Name')" path="name">
+          <n-input v-model:value="toolForm.name" :placeholder="t('Enter tool name')" />
+        </n-form-item>
+        <n-form-item :label="t('Description')" path="description">
+          <n-input
+            v-model:value="toolForm.description"
+            type="textarea"
+            :placeholder="t('Enter tool description')"
+            :rows="3"
+          />
+        </n-form-item>
+        <n-form-item :label="t('Category')" path="category">
+          <n-input v-model:value="toolForm.category" :placeholder="t('Enter category')" />
+        </n-form-item>
+        <n-form-item :label="t('Icon')" path="icon">
+          <n-input v-model:value="toolForm.icon" :placeholder="t('e.g., fa fa-cog')" />
+        </n-form-item>
+        <n-form-item :label="t('Color')" path="color">
+          <n-color-picker v-model:value="toolForm.color" />
+        </n-form-item>
+        <n-form-item :label="t('Tool Type')" path="type">
+          <n-select
+            v-model:value="toolForm.type"
+            :options="toolTypeOptions"
+            :placeholder="t('Select tool type')"
+            @update:value="onToolTypeChange"
+          />
+        </n-form-item>
+        <!-- 内部路由名 -->
+        <n-form-item v-if="toolForm.type === 'route'" :label="t('Route Name')" path="routeName">
+          <n-auto-complete
+            v-model:value="toolForm.routeName"
+            :options="routeNameOptions"
+            :placeholder="t('Enter or select route name, e.g.: Dashboard, Tools')"
+            filterable
+            clearable
+          />
+          <template #feedback>
+            <n-text depth="3" style="font-size: 12px;">
+              {{ t('Use route name for internal navigation (recommended)') }}
+            </n-text>
+          </template>
+        </n-form-item>
+        <!-- URL路径 -->
+        <n-form-item v-if="toolForm.type === 'url'" :label="t('URL Path')" path="url">
+          <n-input
+            v-model:value="toolForm.url"
+            :placeholder="t('Enter URL path')"
+          />
+          <template #feedback>
+            <n-text depth="3" style="font-size: 12px;">
+              {{ t('Internal path: /app/knowledge-base') }} <br>
+              {{ t('External link: starts with http:// or https://') }}
+            </n-text>
+          </template>
+        </n-form-item>
+        <n-form-item :label="t('Status')" path="status">
+          <n-select
+            v-model:value="toolForm.status"
+            :options="statusOptions"
+            :placeholder="t('Select status')"
+          />
+        </n-form-item>
+      </n-form>
+      <template #action>
+        <n-space>
+          <n-button @click="showToolModal = false">{{ t('Cancel') }}</n-button>
+          <n-button type="primary" @click="handleSaveTool">{{ t('Save') }}</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } 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 { t } from '../../shared/i18n'
+
+interface Tool {
+  id: string
+  name: string
+  description?: string
+  category?: string
+  icon?: string
+  color?: string
+  type?: 'route' | 'url'  // 工具类型：内部路由或外部URL
+  routeName?: string      // 路由名（当type为route时使用）
+  url?: string            // URL路径（当type为url时使用）
+  status?: 'active' | 'inactive'
+  order?: number
+}
+
+const STORAGE_KEY = 'tools.items'
+
+// 生成 UUID（兼容所有环境）
+function generateUUID(): string {
+  // 优先使用 crypto.randomUUID（如果可用）
+  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+    return crypto.randomUUID()
+  }
+  
+  // 降级方案：使用时间戳 + 随机数
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0
+    const v = c === 'x' ? r : (r & 0x3 | 0x8)
+    return v.toString(16)
+  })
+}
+
+// 加载工具列表
+function loadTools(): Tool[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return []
+    const parsed = JSON.parse(raw)
+    if (Array.isArray(parsed)) return parsed
+    return []
+  } catch {
+    return []
+  }
+}
+
+// 保存工具列表
+function saveTools(tools: Tool[]) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(tools))
+}
+
+const router = useRouter()
+const loading = ref(false)
+const tools = ref<Tool[]>(loadTools())
+const showToolModal = ref(false)
+const editingTool = ref<Tool | null>(null)
+const toolFormRef = ref<FormInst | null>(null)
+const dialog = useDialog()
+const message = useMessage()
+
+// 拖拽相关
+const draggedTool = ref<Tool | null>(null)
+const draggedIndex = ref<number>(-1)
+const dropIndex = ref<number>(-1)
+
+const toolForm = ref<Partial<Tool>>({
+  name: '',
+  description: '',
+  category: '',
+  icon: 'fa fa-cog',
+  color: '#6366f1',
+  type: 'route',
+  routeName: '',
+  url: '',
+  status: 'active'
+})
+
+const toolFormRules: FormRules = {
+  name: [{ required: true, message: t('Please enter tool name') }],
+  type: [{ required: true, message: t('Please select tool type') }],
+  routeName: [
+    { 
+      required: true, 
+      message: t('Please enter route name'),
+      trigger: ['input', 'blur']
+    }
+  ],
+  url: [
+    { 
+      required: true, 
+      message: t('Please enter URL'),
+      trigger: ['input', 'blur']
+    }
+  ]
+}
+
+// 动态表单验证规则：根据工具类型动态显示/隐藏字段的验证
+const dynamicFormRules = computed(() => {
+  const rules: FormRules = {
+    name: toolFormRules.name,
+    type: toolFormRules.type
+  }
+  
+  // 根据类型添加对应的验证规则
+  if (toolForm.value.type === 'route') {
+    rules.routeName = toolFormRules.routeName
+  } else if (toolForm.value.type === 'url') {
+    rules.url = toolFormRules.url
+  }
+  
+  return rules
+})
+
+const toolTypeOptions = [
+  { label: t('Internal Route'), value: 'route' },
+  { label: t('URL'), value: 'url' }
+]
+
+const statusOptions = [
+  { label: t('Active'), value: 'active' },
+  { label: t('Inactive'), value: 'inactive' }
+]
+
+// 获取所有可用的路由名（从路由配置中提取）
+const routeNameOptions = computed(() => {
+  const routes = router.getRoutes()
+  return routes
+    .filter(route => route.name && route.meta?.requiresAuth !== false)
+    .map(route => ({
+      label: String(route.name),
+      value: String(route.name)
+    }))
+    .sort((a, b) => a.label.localeCompare(b.label))
+})
+
+// 工具类型变化处理
+function onToolTypeChange() {
+  toolForm.value.routeName = ''
+  toolForm.value.url = ''
+}
+
+// 按 order 排序显示
+const displayTools = computed(() => {
+  return [...tools.value].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+})
+
+onMounted(() => {
+  // 可以在这里加载远程数据
+  loading.value = false
+})
+
+// 拖拽处理
+function handleDragStart(event: DragEvent, tool: Tool, index: number) {
+  draggedTool.value = tool
+  draggedIndex.value = index
+  event.dataTransfer!.effectAllowed = 'move'
+  event.dataTransfer!.dropEffect = 'move'
+}
+
+function handleDragOver(event: DragEvent, index: number) {
+  event.preventDefault()
+  if (draggedTool.value && dropIndex.value !== index) {
+    dropIndex.value = index
+  }
+}
+
+function handleDragLeave() {
+  // 延迟清除，避免快速移动时闪烁
+  setTimeout(() => {
+    if (!draggedTool.value) {
+      dropIndex.value = -1
+    }
+  }, 50)
+}
+
+function handleDrop(event: DragEvent, dropIndexValue: number) {
+  event.preventDefault()
+  if (!draggedTool.value || draggedIndex.value === -1) return
+
+  const newTools = [...tools.value]
+  const dragged = newTools.splice(draggedIndex.value, 1)[0]
+  newTools.splice(dropIndexValue, 0, dragged)
+
+  // 重新分配 order
+  newTools.forEach((tool, index) => {
+    tool.order = index + 1
+  })
+
+  tools.value = newTools
+  saveTools(tools.value)
+  message.success(t('Tool order updated'))
+  
+  resetDragState()
+}
+
+function handleDragEnd() {
+  resetDragState()
+}
+
+function resetDragState() {
+  draggedTool.value = null
+  draggedIndex.value = -1
+  dropIndex.value = -1
+}
+
+// 工具操作
+function handleAddTool() {
+  editingTool.value = null
+  toolForm.value = {
+    name: '',
+    description: '',
+    category: '',
+    icon: 'fa fa-cog',
+    color: '#6366f1',
+    type: 'route',
+    routeName: '',
+    url: '',
+    status: 'active'
+  }
+  showToolModal.value = true
+}
+
+function handleEditTool(tool: Tool) {
+  editingTool.value = tool
+  toolForm.value = { ...tool }
+  showToolModal.value = true
+}
+
+function handleSaveTool() {
+  // 先手动验证必填字段
+  if (!toolForm.value.name || !toolForm.value.name.trim()) {
+    message.error(t('Please enter tool name'))
+    return
+  }
+  
+  if (!toolForm.value.type) {
+    message.error(t('Please select tool type'))
+    return
+  }
+  
+  if (toolForm.value.type === 'route' && (!toolForm.value.routeName || !toolForm.value.routeName.trim())) {
+    message.error(t('Please enter route name'))
+    return
+  }
+  
+  if (toolForm.value.type === 'url' && (!toolForm.value.url || !toolForm.value.url.trim())) {
+    message.error(t('Please enter URL'))
+    return
+  }
+
+  // 表单验证（使用动态规则）
+  toolFormRef.value?.validate((errors) => {
+    if (errors) {
+      // 验证失败，错误信息已由表单组件显示
+      return
+    }
+
+    if (editingTool.value) {
+      // 更新
+      const index = tools.value.findIndex(t => t.id === editingTool.value!.id)
+      if (index >= 0) {
+        const updatedTool: Tool = {
+          ...editingTool.value,
+          ...toolForm.value,
+          // 清理不需要的字段
+          routeName: toolForm.value.type === 'route' ? toolForm.value.routeName : undefined,
+          url: toolForm.value.type === 'url' ? toolForm.value.url : undefined
+        }
+        tools.value[index] = updatedTool
+        saveTools(tools.value)
+        message.success(t('Tool updated successfully'))
+      }
+    } else {
+      // 新增
+      const newTool: Tool = {
+        id: generateUUID(),
+        name: toolForm.value.name!,
+        description: toolForm.value.description,
+        category: toolForm.value.category,
+        icon: toolForm.value.icon || 'fa fa-cog',
+        color: toolForm.value.color || '#1fc76f',
+        type: toolForm.value.type || 'route',
+        routeName: toolForm.value.type === 'route' ? toolForm.value.routeName : undefined,
+        url: toolForm.value.type === 'url' ? toolForm.value.url : undefined,
+        status: toolForm.value.status || 'active',
+        order: tools.value.length + 1
+      }
+      tools.value.push(newTool)
+      saveTools(tools.value)
+      message.success(t('Tool added successfully'))
+    }
+
+    showToolModal.value = false
+  })
+}
+
+function handleDeleteTool(tool: Tool) {
+  dialog.warning({
+    title: t('Confirm Delete'),
+    content: `${t('Are you sure you want to delete tool')} "${tool.name}"?`,
+    positiveText: t('Delete'),
+    negativeText: t('Cancel'),
+    onPositiveClick: () => {
+      tools.value = tools.value.filter(t => t.id !== tool.id)
+      // 重新分配 order
+      tools.value.forEach((t, index) => {
+        t.order = index + 1
+      })
+      saveTools(tools.value)
+      message.success(t('Tool deleted successfully'))
+    }
+  })
+}
+
+function handleOpenTool(tool: Tool) {
+  if (tool.type === 'route' && tool.routeName) {
+    // 使用路由名导航（最佳实践）
+    try {
+      router.push({ name: tool.routeName })
+    } catch (error) {
+      message.error(t('Route not found: ') + tool.routeName)
+    }
+  } else if (tool.type === 'url' && tool.url) {
+    // URL导航
+    if (tool.url.startsWith('http://') || tool.url.startsWith('https://')) {
+      // 外部链接，在新窗口打开
+      window.open(tool.url, '_blank')
+    } else {
+      // 内部路径，使用router跳转
+      router.push(tool.url)
+    }
+  } else if (tool.url) {
+    // 兼容旧数据：只有url字段
+    if (tool.url.startsWith('http://') || tool.url.startsWith('https://')) {
+      window.open(tool.url, '_blank')
+    } else {
+      router.push(tool.url)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tools-page {
+  width: 100%;
+  padding: 24px;
+  background: #f9fafb;
+  min-height: 100vh;
+}
+
+/* 页面头部 */
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 32px;
+  padding: 24px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.header-left h2 {
+  font-size: 28px;
+  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 {
+  height: 36px;
+  padding: 0 16px;
+  border: 1px solid #1fc76f;
+  border-radius: 8px;
+  background: #e6f8f0;
+  color: #0d684b;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.add-tool-btn:hover {
+  background: #dcfce7;
+  border-color: #1fc76f;
+  color: #166534;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15);
+}
+
+.add-tool-btn:active {
+  background: #1fc76f;
+  border-color: #1fc76f;
+  color: white;
+  transform: translateY(0);
+  box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2);
+}
+
+.add-tool-btn:disabled {
+  background: #f1f5f9;
+  border-color: #e2e8f0;
+  color: #94a3b8;
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.add-tool-btn:disabled:hover {
+  background: #f1f5f9;
+  border-color: #e2e8f0;
+  color: #94a3b8;
+  transform: none;
+  box-shadow: none;
+}
+
+.add-tool-btn i {
+  font-size: 12px;
+}
+
+/* 页面内容 */
+.page-content {
+  position: relative;
+}
+
+/* 空状态 */
+.empty-state {
+  text-align: center;
+  padding: 80px 24px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.empty-icon {
+  width: 120px;
+  height: 120px;
+  margin: 0 auto 24px;
+  background: #e6f8f0;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-icon i {
+  font-size: 48px;
+  color: #1fc76f;
+}
+
+.empty-state h3 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #0f172a;
+  margin: 0 0 12px 0;
+}
+
+.empty-state p {
+  font-size: 16px;
+  color: #64748b;
+  margin: 0 0 32px 0;
+}
+
+.empty-action-btn {
+  height: 36px;
+  padding: 0 16px;
+  border: 1px solid #1fc76f;
+  border-radius: 8px;
+  background: #e6f8f0;
+  color: #0d684b;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.empty-action-btn:hover {
+  background: #dcfce7;
+  border-color: #1fc76f;
+  color: #166534;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15);
+}
+
+.empty-action-btn:active {
+  background: #1fc76f;
+  border-color: #1fc76f;
+  color: white;
+  transform: translateY(0);
+  box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2);
+}
+
+/* 工具网格 */
+.tools-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 24px;
+  padding: 0;
+}
+
+/* 工具卡片 */
+.tool-card {
+  background: white;
+  border-radius: 16px;
+  padding: 24px;
+  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;
+}
+
+.tool-card::before {
+  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);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+  border-color: #dcfce7;
+}
+
+.tool-card:hover::before {
+  opacity: 1;
+}
+
+.tool-card.dragging {
+  opacity: 0.5;
+  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);
+  transform: scale(1.02);
+}
+
+.tool-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.tool-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.tool-drag-handle {
+  color: #9ca3af;
+  cursor: grab;
+  padding: 8px;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+
+.tool-drag-handle:hover {
+  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;
+  margin: 0 0 16px 0;
+  line-height: 1.6;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.tool-meta {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.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;
+}
+
+.tool-action-btn:hover {
+  background: #f8fafc;
+  color: #475569;
+  border-color: #cbd5e1;
+}
+
+.tool-action-btn.danger:hover {
+  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;
+}
+
+/* 加载状态 */
+.loading-state {
+  text-align: center;
+  padding: 80px 24px;
+  background: white;
+  border-radius: 16px;
+  color: #64748b;
+}
+
+.loading-state i {
+  font-size: 32px;
+  margin-right: 12px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .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;
+    gap: 16px;
+  }
+
+  .tool-card {
+    padding: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .tools-page {
+    padding: 12px;
+  }
+
+  .page-header {
+    padding: 16px;
+  }
+
+  .header-left h2 {
+    font-size: 24px;
+  }
+
+  .page-description {
+    font-size: 14px;
+  }
+}
+</style>
+