Add Tools management page with drag-and-drop and route/URL support
This commit is contained in:
parent
d2cd80be73
commit
1eb5fbced0
@ -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',
|
||||
|
||||
@ -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' }
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
934
apps/jingrow/frontend/src/views/tools/Tools.vue
Normal file
934
apps/jingrow/frontend/src/views/tools/Tools.vue
Normal file
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user