删除冗余的路由和文件
This commit is contained in:
parent
dd3330e3c2
commit
04d4bd95fd
@ -20,26 +20,6 @@ const router = createRouter({
|
|||||||
name: 'Dashboard',
|
name: 'Dashboard',
|
||||||
component: () => import('../../views/Dashboard.vue')
|
component: () => import('../../views/Dashboard.vue')
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'agents',
|
|
||||||
name: 'AgentList',
|
|
||||||
component: () => import('../../views/agents/AgentList.vue')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'agents/:id',
|
|
||||||
name: 'AgentDetail',
|
|
||||||
component: () => import('../../views/agents/AgentDetail.vue')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'nodes',
|
|
||||||
name: 'NodeList',
|
|
||||||
component: () => import('../../views/nodes/NodeList.vue')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'nodes/:name',
|
|
||||||
name: 'NodeDetail',
|
|
||||||
component: () => import('../../views/nodes/NodeDetail.vue')
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: 'local-jobs',
|
path: 'local-jobs',
|
||||||
name: 'LocalJobList',
|
name: 'LocalJobList',
|
||||||
|
|||||||
@ -1,421 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="agent-detail-page">
|
|
||||||
<div class="page-header">
|
|
||||||
<n-space justify="space-between" align="center">
|
|
||||||
<div>
|
|
||||||
<h1 class="page-title">{{ isNew ? t('Create Agent') : (agent?.agent_name || t('Agent Detail')) }}</h1>
|
|
||||||
<p class="page-description">{{ isNew ? t('Create a new AI agent') : t('View and manage agent settings') }}</p>
|
|
||||||
</div>
|
|
||||||
<n-space>
|
|
||||||
<n-button v-if="!isNew && canExecute" type="success" :disabled="executing" @click="handleExecute">
|
|
||||||
<template #icon>
|
|
||||||
<n-icon><Icon icon="tabler:play" /></n-icon>
|
|
||||||
</template>
|
|
||||||
{{ executing ? t('Executing...') : t('Execute') }}
|
|
||||||
</n-button>
|
|
||||||
<n-button type="info" @click="handleFlowBuilder">
|
|
||||||
<template #icon>
|
|
||||||
<n-icon><Icon icon="tabler:workflow" /></n-icon>
|
|
||||||
</template>
|
|
||||||
{{ t('Flow Builder') }}
|
|
||||||
</n-button>
|
|
||||||
<n-button type="primary" :disabled="saving" @click="handleSave">
|
|
||||||
<template #icon>
|
|
||||||
<n-icon><Icon icon="tabler:edit" /></n-icon>
|
|
||||||
</template>
|
|
||||||
{{ t('Save') }}
|
|
||||||
</n-button>
|
|
||||||
</n-space>
|
|
||||||
</n-space>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 标签页内容 -->
|
|
||||||
<n-tabs v-model:value="activeTab" type="line" animated>
|
|
||||||
<!-- 详情标签页 -->
|
|
||||||
<n-tab-pane name="detail" :tab="t('Detail')">
|
|
||||||
<!-- 基本信息 -->
|
|
||||||
<n-card :title="t('Basic Information')">
|
|
||||||
<div class="properties-grid">
|
|
||||||
<div class="property-group">
|
|
||||||
<div class="property-item">
|
|
||||||
<label>{{ t('Name') }}</label>
|
|
||||||
<input type="text" v-model="agentForm.agent_name" />
|
|
||||||
</div>
|
|
||||||
<div class="property-item">
|
|
||||||
<label>{{ t('Status') }}</label>
|
|
||||||
<n-select v-model:value="agentForm.status" :options="statusOptions" clearable/>
|
|
||||||
</div>
|
|
||||||
<div class="property-item">
|
|
||||||
<label>{{ t('Enabled') }}</label>
|
|
||||||
<n-select v-model:value="agentForm.enabled" :options="enabledOptions" clearable/>
|
|
||||||
</div>
|
|
||||||
<div class="property-item">
|
|
||||||
<label>{{ t('Progress') }}</label>
|
|
||||||
<input type="number" v-model="agentForm.progress" min="0" max="100" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="property-group">
|
|
||||||
<div class="property-item">
|
|
||||||
<label>{{ t('Executions') }}</label>
|
|
||||||
<input type="number" v-model="agentForm.ai_repeat" min="0" />
|
|
||||||
</div>
|
|
||||||
<div class="property-item">
|
|
||||||
<label>{{ t('Trigger Mode') }}</label>
|
|
||||||
<n-select v-model:value="agentForm.trigger_mode" :options="triggerModeOptions" clearable/>
|
|
||||||
</div>
|
|
||||||
<div v-if="agentForm.trigger_mode === 'Scheduled Trigger'" class="property-item">
|
|
||||||
<label>{{ t('Trigger Time') }}</label>
|
|
||||||
<CronEditor v-model="agentForm.trigger_time" />
|
|
||||||
</div>
|
|
||||||
<div class="property-item">
|
|
||||||
<label>{{ t('Created At') }}</label>
|
|
||||||
<input type="text" v-model="agentForm.creation" readonly />
|
|
||||||
</div>
|
|
||||||
<div class="property-item">
|
|
||||||
<label>{{ t('Updated At') }}</label>
|
|
||||||
<input type="text" v-model="agentForm.modified" readonly />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</n-card>
|
|
||||||
</n-tab-pane>
|
|
||||||
|
|
||||||
<!-- 流程标签页 -->
|
|
||||||
<n-tab-pane name="flow" :tab="t('Flow')">
|
|
||||||
<n-card :title="t('Agent Flow')">
|
|
||||||
<div class="flow-content">
|
|
||||||
<textarea
|
|
||||||
v-model="agentForm.agent_flow"
|
|
||||||
class="flow-textarea"
|
|
||||||
rows="15"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</n-card>
|
|
||||||
</n-tab-pane>
|
|
||||||
|
|
||||||
<!-- 排除关键词标签页 -->
|
|
||||||
<n-tab-pane name="exclude" :tab="t('Exclude Keywords')">
|
|
||||||
<n-card :title="t('Exclude Keywords')">
|
|
||||||
<div class="exclude-content">
|
|
||||||
<textarea
|
|
||||||
v-model="agentForm.exclude_prompts"
|
|
||||||
class="exclude-textarea"
|
|
||||||
rows="8"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</n-card>
|
|
||||||
</n-tab-pane>
|
|
||||||
</n-tabs>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed, onMounted, watch } from 'vue'
|
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
|
||||||
import {
|
|
||||||
NSpace,
|
|
||||||
NButton,
|
|
||||||
NIcon,
|
|
||||||
NCard,
|
|
||||||
NSelect,
|
|
||||||
NTabs,
|
|
||||||
NTabPane,
|
|
||||||
useMessage
|
|
||||||
} from 'naive-ui'
|
|
||||||
import { Icon } from '@iconify/vue'
|
|
||||||
import { useFlowBuilderStore } from '../../shared/stores/flowBuilder'
|
|
||||||
import { useAgentStore } from '../../shared/stores/agent'
|
|
||||||
import { type AIAgent } from '../../shared/types/agent'
|
|
||||||
import { t } from '../../shared/i18n'
|
|
||||||
import CronEditor from '../../core/pagetype/form/controls/CronEditor.vue'
|
|
||||||
|
|
||||||
const route = useRoute()
|
|
||||||
const router = useRouter()
|
|
||||||
const message = useMessage()
|
|
||||||
const agentStore = useAgentStore()
|
|
||||||
const flowBuilderStore = useFlowBuilderStore()
|
|
||||||
|
|
||||||
// 响应式数据
|
|
||||||
const agent = ref<AIAgent | null>(null)
|
|
||||||
const loading = ref(false)
|
|
||||||
const saving = ref(false)
|
|
||||||
const executing = ref(false)
|
|
||||||
const activeTab = ref('detail')
|
|
||||||
|
|
||||||
// 表单数据
|
|
||||||
const agentForm = ref({
|
|
||||||
agent_name: '',
|
|
||||||
status: '草稿',
|
|
||||||
enabled: '1',
|
|
||||||
progress: 0,
|
|
||||||
ai_repeat: 0,
|
|
||||||
trigger_mode: '',
|
|
||||||
trigger_time: '* * * * *',
|
|
||||||
agent_flow: '',
|
|
||||||
exclude_prompts: '',
|
|
||||||
creation: '',
|
|
||||||
modified: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
// 动态选项
|
|
||||||
const statusOptions = ref<{ label: string; value: string }[]>([])
|
|
||||||
const enabledOptions = ref<{ label: string; value: string }[]>([])
|
|
||||||
const triggerModeOptions = ref<{ label: string; value: string }[]>([])
|
|
||||||
|
|
||||||
// 加载选项
|
|
||||||
const loadOptions = async () => {
|
|
||||||
try {
|
|
||||||
const { getAgentStatusOptions, getAgentTriggerModeOptions } = await import('@/shared/api/agents')
|
|
||||||
const { getFieldSelectOptions } = await import('@/shared/api/common')
|
|
||||||
|
|
||||||
// 并行加载所有选项
|
|
||||||
const [statusData, enabledData, triggerData] = await Promise.all([
|
|
||||||
getAgentStatusOptions(),
|
|
||||||
getFieldSelectOptions('Local Ai Agent', 'enabled'),
|
|
||||||
getAgentTriggerModeOptions()
|
|
||||||
])
|
|
||||||
|
|
||||||
statusOptions.value = statusData.map(option => ({
|
|
||||||
label: t(option),
|
|
||||||
value: option
|
|
||||||
}))
|
|
||||||
|
|
||||||
enabledOptions.value = enabledData.map(option => ({
|
|
||||||
label: t(option),
|
|
||||||
value: option
|
|
||||||
}))
|
|
||||||
|
|
||||||
triggerModeOptions.value = triggerData.map(option => ({
|
|
||||||
label: t(option),
|
|
||||||
value: option
|
|
||||||
}))
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to load options:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 计算属性
|
|
||||||
const agentId = computed(() => route.params.id as string)
|
|
||||||
const isNew = computed(() => agentId.value === 'new' || agentId.value === '')
|
|
||||||
|
|
||||||
// 是否可以执行（参考 Jingrow 逻辑：enabled 且 status 为待执行）
|
|
||||||
const canExecute = computed(() => {
|
|
||||||
if (!agent.value) return false
|
|
||||||
const enabled = agent.value.enabled
|
|
||||||
const status = agent.value.status
|
|
||||||
return enabled && (status === '待执行' || status === '草稿')
|
|
||||||
})
|
|
||||||
|
|
||||||
// 保存智能体
|
|
||||||
const handleSave = async () => {
|
|
||||||
saving.value = true
|
|
||||||
try {
|
|
||||||
if (isNew.value) {
|
|
||||||
// 创建新智能体
|
|
||||||
const { createAgent } = await import('@/shared/api/agents')
|
|
||||||
const result = await createAgent(agentForm.value)
|
|
||||||
if (result.success) {
|
|
||||||
message.success(t('Agent created successfully'))
|
|
||||||
// 跳转到新创建的智能体详情页
|
|
||||||
const created = result?.data ?? result
|
|
||||||
const newName = created?.name ?? created?.data?.name ?? created?.message?.name
|
|
||||||
if (newName) {
|
|
||||||
router.push({ name: 'AgentDetail', params: { id: newName } })
|
|
||||||
} else {
|
|
||||||
router.push({ name: 'AgentList' })
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
message.error(t('Create failed') + ': ' + (result.message || t('Unknown error')))
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 更新现有智能体
|
|
||||||
const { updateAgent } = await import('@/shared/api/agents')
|
|
||||||
const result = await updateAgent(agentId.value, agentForm.value)
|
|
||||||
|
|
||||||
if (result.success) {
|
|
||||||
message.success(t('Agent updated successfully'))
|
|
||||||
|
|
||||||
await fetchAgent()
|
|
||||||
} else {
|
|
||||||
message.error(t('Update failed') + ': ' + (result.message || t('Unknown error')))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error: any) {
|
|
||||||
console.error('Save error:', error)
|
|
||||||
message.error(t('Save failed') + ': ' + (error.message || error))
|
|
||||||
} finally {
|
|
||||||
saving.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleFlowBuilder = () => {
|
|
||||||
let flowData = agent.value?.agent_flow || {}
|
|
||||||
if (typeof flowData === 'string') {
|
|
||||||
try { flowData = JSON.parse(flowData) } catch (e) { flowData = {} }
|
|
||||||
}
|
|
||||||
const agentId = agent.value?.name || ''
|
|
||||||
flowBuilderStore.activateFlowBuilder(flowData, agentId)
|
|
||||||
router.push({ name: 'FlowBuilder', query: { agentId } })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 执行智能体（参考 Jingrow 的异步执行逻辑）
|
|
||||||
const handleExecute = async () => {
|
|
||||||
if (!agentId.value || !agent.value) {
|
|
||||||
message.warning(t('Please select agent first'))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
executing.value = true
|
|
||||||
|
|
||||||
// 调用后端异步执行接口
|
|
||||||
const response = await fetch('/jingrow/agents/execute', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
agent_id: agentId.value,
|
|
||||||
agent_name: agent.value.agent_name,
|
|
||||||
session_cookie: document.cookie.split('; ').find(row => row.startsWith('sid='))?.split('=')[1]
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
const result = await response.json()
|
|
||||||
|
|
||||||
if (result.success) {
|
|
||||||
message.success(t('Agent execution started successfully'))
|
|
||||||
// 刷新智能体状态
|
|
||||||
await fetchAgent()
|
|
||||||
} else {
|
|
||||||
message.error(result.message || t('Execution failed'))
|
|
||||||
}
|
|
||||||
} catch (error: any) {
|
|
||||||
message.error(error?.message || t('Execution failed'))
|
|
||||||
} finally {
|
|
||||||
executing.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const fetchAgent = async () => {
|
|
||||||
if (!agentId.value || isNew.value) return
|
|
||||||
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
await agentStore.fetchAgent(agentId.value)
|
|
||||||
agent.value = agentStore.currentAgent
|
|
||||||
|
|
||||||
// 更新表单数据
|
|
||||||
if (agent.value) {
|
|
||||||
agentForm.value = {
|
|
||||||
agent_name: agent.value.agent_name || '',
|
|
||||||
status: agent.value.status || '草稿',
|
|
||||||
enabled: String(agent.value.enabled ? 1 : 0),
|
|
||||||
progress: agent.value.progress || 0,
|
|
||||||
ai_repeat: agent.value.ai_repeat || 0,
|
|
||||||
trigger_mode: agent.value.trigger_mode || '',
|
|
||||||
trigger_time: agent.value.trigger_time || '* * * * *',
|
|
||||||
agent_flow: agent.value.agent_flow ? (typeof agent.value.agent_flow === 'string' ? agent.value.agent_flow : JSON.stringify(agent.value.agent_flow, null, 2)) : '',
|
|
||||||
exclude_prompts: agent.value.exclude_prompts || '',
|
|
||||||
creation: agent.value.creation || '',
|
|
||||||
modified: agent.value.modified || ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
message.error(t('Failed to load agent detail'))
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 生命周期
|
|
||||||
onMounted(() => {
|
|
||||||
loadOptions()
|
|
||||||
fetchAgent()
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听路由变化
|
|
||||||
watch(() => route.params.id, (newId, oldId) => {
|
|
||||||
if (newId && newId !== oldId) {
|
|
||||||
fetchAgent()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.agent-detail-page {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.page-header { margin-bottom: 24px; }
|
|
||||||
.page-title { font-size: 28px; font-weight: 700; color: #1f2937; margin: 0 0 8px 0; }
|
|
||||||
.page-description { font-size: 16px; color: #6b7280; margin: 0; }
|
|
||||||
.flow-content { background-color: #f8f9fa; border-radius: 6px; padding: 16px; border: 1px solid #e9ecef; }
|
|
||||||
.flow-json { margin: 0; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 12px; line-height: 1.5; color: #495057; white-space: pre-wrap; word-break: break-all; max-height: 500px; overflow-y: auto; }
|
|
||||||
.exclude-content { background-color: #f8f9fa; border-radius: 6px; padding: 16px; border: 1px solid #e9ecef; min-height: 100px; }
|
|
||||||
|
|
||||||
/* 表单样式 */
|
|
||||||
.properties-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-item label {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #374151;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-item input,
|
|
||||||
.property-item textarea {
|
|
||||||
padding: 8px 12px;
|
|
||||||
border: 1px solid #d1d5db;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: border-color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-item input:focus,
|
|
||||||
.property-item textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #3b82f6;
|
|
||||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-item input[readonly] {
|
|
||||||
background-color: #f9fafb;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flow-textarea,
|
|
||||||
.exclude-textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border: 1px solid #d1d5db;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: border-color 0.2s;
|
|
||||||
resize: vertical;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flow-textarea:focus,
|
|
||||||
.exclude-textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #3b82f6;
|
|
||||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,933 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="page">
|
|
||||||
<div class="page-header">
|
|
||||||
<div class="header-left">
|
|
||||||
<h2>{{ t('AI Agents') }}</h2>
|
|
||||||
<p class="page-description">{{ t('Manage and configure your AI agents workflows') }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="header-right">
|
|
||||||
<div class="filters">
|
|
||||||
<n-input
|
|
||||||
v-model:value="searchQuery"
|
|
||||||
:placeholder="t('Search agents...')"
|
|
||||||
clearable
|
|
||||||
style="width: 200px"
|
|
||||||
/>
|
|
||||||
<n-select
|
|
||||||
v-model:value="statusFilter"
|
|
||||||
:options="statusOptions"
|
|
||||||
:placeholder="t('Status')"
|
|
||||||
style="width: 120px"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="view-toggle">
|
|
||||||
<button
|
|
||||||
class="toggle-btn"
|
|
||||||
:class="{ active: viewMode === 'list' }"
|
|
||||||
@click="viewMode = 'list'"
|
|
||||||
:title="t('List View')"
|
|
||||||
>
|
|
||||||
<i class="fa fa-list"></i>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="toggle-btn"
|
|
||||||
:class="{ active: viewMode === 'card' }"
|
|
||||||
@click="viewMode = 'card'"
|
|
||||||
:title="t('Card View')"
|
|
||||||
>
|
|
||||||
<i class="fa fa-th-large"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<button class="refresh-btn" @click="reload" :disabled="loading">
|
|
||||||
<i :class="loading ? 'fa fa-spinner fa-spin' : 'fa fa-refresh'"></i>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="selectedAgents.length === 0"
|
|
||||||
class="create-btn"
|
|
||||||
@click="createAgent"
|
|
||||||
:disabled="creating || loading"
|
|
||||||
>
|
|
||||||
<i class="fa fa-plus"></i>
|
|
||||||
{{ t('Create Agent') }}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-else
|
|
||||||
class="delete-btn"
|
|
||||||
@click="handleDeleteSelected"
|
|
||||||
:disabled="deleting || loading"
|
|
||||||
>
|
|
||||||
<i class="fa fa-trash"></i>
|
|
||||||
{{ t('Delete Selected') }} ({{ selectedAgents.length }})
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page-content">
|
|
||||||
<div v-if="loading" class="loading">
|
|
||||||
<i class="fa fa-spinner fa-spin"></i> {{ t('Loading...') }}
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<!-- 卡片视图 -->
|
|
||||||
<div v-if="viewMode === 'card'" class="agent-grid">
|
|
||||||
<div
|
|
||||||
v-for="agent in agents"
|
|
||||||
:key="agent.name"
|
|
||||||
class="agent-card"
|
|
||||||
:class="{ selected: selectedAgents.includes(agent.name) }"
|
|
||||||
@click="toggleAgentSelection(agent.name)"
|
|
||||||
>
|
|
||||||
<div class="card-checkbox">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
:checked="selectedAgents.includes(agent.name)"
|
|
||||||
@click.stop="toggleAgentSelection(agent.name)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="card-content" @click.stop="openDetail(agent.name)">
|
|
||||||
<div class="info">
|
|
||||||
<div class="title">{{ agent.agent_name || agent.name }}</div>
|
|
||||||
<div class="desc">{{ agent.name }}</div>
|
|
||||||
<div class="meta">
|
|
||||||
<span v-if="agent.enabled" class="enabled-badge enabled">{{ t('Enabled') }}</span>
|
|
||||||
<span v-else class="enabled-badge disabled">{{ t('Disabled') }}</span>
|
|
||||||
<span v-if="agent.trigger_mode" class="badge">{{ t(agent.trigger_mode) }}</span>
|
|
||||||
<span v-if="agent.status" class="status-badge" :class="agent.status">{{ t(agent.status) }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 卡片视图分页 -->
|
|
||||||
<div v-if="viewMode === 'card'" class="list-pagination">
|
|
||||||
<n-pagination v-model:page="page" :page-count="pageCount" size="small" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 列表视图 -->
|
|
||||||
<div v-else class="agent-list">
|
|
||||||
<div class="list-header">
|
|
||||||
<div class="col-checkbox">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
:checked="selectedAgents.length === agents.length && agents.length > 0"
|
|
||||||
:indeterminate="selectedAgents.length > 0 && selectedAgents.length < agents.length"
|
|
||||||
@change="toggleSelectAll"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-name">{{ t('Name') }}</div>
|
|
||||||
<div class="col-enabled">{{ t('Enabled') }}</div>
|
|
||||||
<div class="col-trigger">{{ t('Trigger Mode') }}</div>
|
|
||||||
<div class="col-status">{{ t('Status') }}</div>
|
|
||||||
<div class="col-actions">{{ t('Actions') }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="list-body">
|
|
||||||
<div
|
|
||||||
v-for="agent in agents"
|
|
||||||
:key="agent.name"
|
|
||||||
class="list-item"
|
|
||||||
:class="{ selected: selectedAgents.includes(agent.name) }"
|
|
||||||
@click="openDetail(agent.name)"
|
|
||||||
>
|
|
||||||
<div class="col-checkbox">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
:checked="selectedAgents.includes(agent.name)"
|
|
||||||
@click.stop="toggleAgentSelection(agent.name)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-name" @click.stop="openDetail(agent.name)">
|
|
||||||
<div class="name">{{ agent.agent_name || agent.name }}</div>
|
|
||||||
<div class="description">{{ agent.name }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-enabled" @click.stop="openDetail(agent.name)">
|
|
||||||
<span v-if="agent.enabled" class="enabled-badge enabled">{{ t('Enabled') }}</span>
|
|
||||||
<span v-else class="enabled-badge disabled">{{ t('Disabled') }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-trigger" @click.stop="openDetail(agent.name)">
|
|
||||||
<span class="badge">{{ t(agent.trigger_mode || '—') }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-status" @click.stop="openDetail(agent.name)">
|
|
||||||
<span class="status-badge" :class="agent.status">{{ t(agent.status) }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-actions">
|
|
||||||
<button class="action-btn" @click.stop="executeAgent(agent.name)" :title="t('Execute')">
|
|
||||||
<i class="fa fa-play"></i>
|
|
||||||
</button>
|
|
||||||
<button class="action-btn" @click.stop="editAgent(agent)" :title="t('Edit')">
|
|
||||||
<i class="fa fa-edit"></i>
|
|
||||||
</button>
|
|
||||||
<button class="action-btn" @click.stop="deleteAgent(agent.name)" :title="t('Delete')">
|
|
||||||
<i class="fa fa-trash"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 分页 -->
|
|
||||||
<div class="list-pagination">
|
|
||||||
<n-pagination v-model:page="page" :page-count="pageCount" size="small" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<n-modal v-model:show="showEditModal" preset="dialog" :title="t('Edit Agent')">
|
|
||||||
<n-form :model="editForm" :rules="editRules" ref="editFormRef">
|
|
||||||
<n-form-item :label="t('Name')" path="name">
|
|
||||||
<n-input
|
|
||||||
v-model:value="editForm.name"
|
|
||||||
:placeholder="t('Enter agent name')"
|
|
||||||
/>
|
|
||||||
</n-form-item>
|
|
||||||
<n-form-item :label="t('Description')" path="description">
|
|
||||||
<n-input
|
|
||||||
v-model:value="editForm.description"
|
|
||||||
type="textarea"
|
|
||||||
:placeholder="t('Enter agent description')"
|
|
||||||
:rows="3"
|
|
||||||
/>
|
|
||||||
</n-form-item>
|
|
||||||
<n-form-item :label="t('Status')" path="status">
|
|
||||||
<n-select
|
|
||||||
v-model:value="editForm.status"
|
|
||||||
:options="statusOptions"
|
|
||||||
:placeholder="t('Select status')"
|
|
||||||
/>
|
|
||||||
</n-form-item>
|
|
||||||
</n-form>
|
|
||||||
<template #action>
|
|
||||||
<n-button @click="showEditModal = false">{{ t('Cancel') }}</n-button>
|
|
||||||
<n-button type="primary" @click="handleUpdate">{{ t('Update') }}</n-button>
|
|
||||||
</template>
|
|
||||||
</n-modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, reactive, computed, onMounted, watch } from 'vue'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { t } from '../../shared/i18n'
|
|
||||||
import { NInput, NSelect, NPagination, NModal, NForm, NFormItem, NButton, useMessage, useDialog } from 'naive-ui'
|
|
||||||
import { useAgentStore } from '../../shared/stores/agent'
|
|
||||||
import { type AIAgent } from '../../shared/types/agent'
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const message = useMessage()
|
|
||||||
const dialog = useDialog()
|
|
||||||
const agentStore = useAgentStore()
|
|
||||||
|
|
||||||
// 响应式数据
|
|
||||||
const loading = ref(false)
|
|
||||||
const creating = ref(false)
|
|
||||||
const deleting = ref(false)
|
|
||||||
const agents = ref<AIAgent[]>([])
|
|
||||||
const allAgents = ref<AIAgent[]>([]) // 保存所有原始数据
|
|
||||||
const total = ref(0)
|
|
||||||
const selectedAgents = ref<string[]>([])
|
|
||||||
const viewMode = ref<'card' | 'list'>(
|
|
||||||
(localStorage.getItem('agentListViewMode') as 'card' | 'list') || 'list'
|
|
||||||
)
|
|
||||||
const searchQuery = ref('')
|
|
||||||
const statusFilter = ref('all')
|
|
||||||
const page = ref(1)
|
|
||||||
const pageSize = ref(parseInt(localStorage.getItem('itemsPerPage') || '10'))
|
|
||||||
const showEditModal = ref(false)
|
|
||||||
const currentAgent = ref<AIAgent | null>(null)
|
|
||||||
|
|
||||||
// 表单数据
|
|
||||||
const editForm = reactive({
|
|
||||||
name: '',
|
|
||||||
description: '',
|
|
||||||
status: 'draft'
|
|
||||||
})
|
|
||||||
|
|
||||||
// 表单验证规则
|
|
||||||
|
|
||||||
const editRules = {
|
|
||||||
name: [{ required: true, message: t('Please enter agent name'), trigger: 'blur' }],
|
|
||||||
description: [{ required: true, message: t('Please enter agent description'), trigger: 'blur' }]
|
|
||||||
}
|
|
||||||
|
|
||||||
// 状态选项
|
|
||||||
const statusOptions = computed(() => [
|
|
||||||
{ label: t('All'), value: 'all' },
|
|
||||||
{ label: t('Draft'), value: 'Draft' },
|
|
||||||
{ label: t('Active'), value: 'Active' },
|
|
||||||
{ label: t('Pending'), value: 'Pending' },
|
|
||||||
{ label: t('Failed'), value: 'Failed' },
|
|
||||||
{ label: t('Completed'), value: 'Completed' }
|
|
||||||
])
|
|
||||||
|
|
||||||
const pageCount = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
|
|
||||||
|
|
||||||
// 获取智能体列表
|
|
||||||
async function fetchAgents() {
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
const params = new URLSearchParams({
|
|
||||||
page: page.value.toString(),
|
|
||||||
page_size: pageSize.value.toString()
|
|
||||||
})
|
|
||||||
|
|
||||||
const res = await fetch(`/api/action/jingrow.ai.utils.jlocal.get_local_ai_agents_list?${params}`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json'
|
|
||||||
},
|
|
||||||
credentials: 'include',
|
|
||||||
body: JSON.stringify({
|
|
||||||
page: page.value,
|
|
||||||
page_size: pageSize.value,
|
|
||||||
fields: ['name', 'agent_name', 'status', 'enabled', 'trigger_mode', 'progress', 'ai_repeat', 'creation', 'modified', 'modified_by', 'description'],
|
|
||||||
order_by: 'modified desc'
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
const data = await res.json()
|
|
||||||
|
|
||||||
const result = data.message
|
|
||||||
allAgents.value = (result.items || []).map((a: any) => ({
|
|
||||||
name: a.name,
|
|
||||||
agent_name: a.agent_name,
|
|
||||||
status: a.status,
|
|
||||||
enabled: a.enabled,
|
|
||||||
trigger_mode: a.trigger_mode,
|
|
||||||
progress: a.progress,
|
|
||||||
ai_repeat: a.ai_repeat,
|
|
||||||
creation: a.creation,
|
|
||||||
modified: a.modified,
|
|
||||||
modified_by: a.modified_by
|
|
||||||
}))
|
|
||||||
|
|
||||||
// 处理数据（搜索和过滤）
|
|
||||||
processAgents()
|
|
||||||
total.value = result.total || 0
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取智能体列表失败:', error)
|
|
||||||
agents.value = []
|
|
||||||
allAgents.value = []
|
|
||||||
total.value = 0
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function processAgents() {
|
|
||||||
let filteredAgents = [...allAgents.value]
|
|
||||||
|
|
||||||
// 前端搜索和过滤
|
|
||||||
if (searchQuery.value) {
|
|
||||||
const query = searchQuery.value.toLowerCase()
|
|
||||||
filteredAgents = filteredAgents.filter(agent =>
|
|
||||||
agent.agent_name?.toLowerCase().includes(query) ||
|
|
||||||
agent.name?.toLowerCase().includes(query)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (statusFilter.value !== 'all') {
|
|
||||||
filteredAgents = filteredAgents.filter(agent => agent.status === statusFilter.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
agents.value = filteredAgents
|
|
||||||
}
|
|
||||||
|
|
||||||
function reload() {
|
|
||||||
fetchAgents()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选择相关函数
|
|
||||||
function toggleAgentSelection(agentName: string) {
|
|
||||||
const index = selectedAgents.value.indexOf(agentName)
|
|
||||||
if (index > -1) {
|
|
||||||
selectedAgents.value.splice(index, 1)
|
|
||||||
} else {
|
|
||||||
selectedAgents.value.push(agentName)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleSelectAll() {
|
|
||||||
if (selectedAgents.value.length === agents.value.length) {
|
|
||||||
selectedAgents.value = []
|
|
||||||
} else {
|
|
||||||
selectedAgents.value = agents.value.map(agent => agent.name)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleDeleteSelected() {
|
|
||||||
if (selectedAgents.value.length === 0) return
|
|
||||||
|
|
||||||
dialog.error({
|
|
||||||
title: t('Confirm Delete'),
|
|
||||||
content: t('Are you sure you want to delete the selected agents? This action cannot be undone.'),
|
|
||||||
positiveText: t('Delete'),
|
|
||||||
negativeText: t('Cancel'),
|
|
||||||
onPositiveClick: async () => {
|
|
||||||
deleting.value = true
|
|
||||||
try {
|
|
||||||
const { deleteAgents } = await import('@/shared/api/agents')
|
|
||||||
const result = await deleteAgents(selectedAgents.value)
|
|
||||||
|
|
||||||
if (result.success) {
|
|
||||||
// 删除成功，重新加载数据
|
|
||||||
selectedAgents.value = []
|
|
||||||
await fetchAgents()
|
|
||||||
} else {
|
|
||||||
alert(t('Delete failed') + ': ' + (result.message || t('Unknown error')))
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Delete error:', error)
|
|
||||||
alert(t('Delete failed') + ': ' + t('Network error'))
|
|
||||||
} finally {
|
|
||||||
deleting.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听搜索和筛选变化
|
|
||||||
watch([searchQuery, statusFilter], () => {
|
|
||||||
page.value = 1 // 重置到第一页
|
|
||||||
// 重新处理数据，不需要重新请求API
|
|
||||||
processAgents()
|
|
||||||
}, { deep: true })
|
|
||||||
|
|
||||||
// 监听分页变化
|
|
||||||
watch([page], () => {
|
|
||||||
fetchAgents()
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听每页数量变化（从系统设置）
|
|
||||||
watch(() => localStorage.getItem('itemsPerPage'), (newValue) => {
|
|
||||||
if (newValue) {
|
|
||||||
pageSize.value = parseInt(newValue)
|
|
||||||
page.value = 1 // 重置到第一页
|
|
||||||
fetchAgents()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(viewMode, (m) => {
|
|
||||||
localStorage.setItem('agentListViewMode', m)
|
|
||||||
})
|
|
||||||
|
|
||||||
function openDetail(name: string) {
|
|
||||||
router.push({ name: 'AgentDetail', params: { id: name } })
|
|
||||||
}
|
|
||||||
|
|
||||||
function createAgent() {
|
|
||||||
// 仅跳转到新建模式，由详情页保存时再创建后端记录
|
|
||||||
router.push({ name: 'AgentDetail', params: { id: 'new' } })
|
|
||||||
}
|
|
||||||
|
|
||||||
function editAgent(agent: AIAgent) {
|
|
||||||
currentAgent.value = agent
|
|
||||||
editForm.name = agent.name
|
|
||||||
editForm.description = ''
|
|
||||||
editForm.status = agent.status || 'draft'
|
|
||||||
showEditModal.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
async function executeAgent(name: string) {
|
|
||||||
try {
|
|
||||||
const result = await agentStore.executeAgent(name)
|
|
||||||
if (result.success) {
|
|
||||||
message.success(t('Agent executed successfully'))
|
|
||||||
fetchAgents()
|
|
||||||
} else {
|
|
||||||
message.error(result.error || t('Execution failed'))
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
message.error(t('Execution failed'))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function deleteAgent(_name: string) {
|
|
||||||
try {
|
|
||||||
// 这里需要实现删除API
|
|
||||||
message.success(t('Agent deleted successfully'))
|
|
||||||
fetchAgents()
|
|
||||||
} catch (error) {
|
|
||||||
message.error(t('Delete failed'))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
async function handleUpdate() {
|
|
||||||
try {
|
|
||||||
// 这里需要实现更新API
|
|
||||||
message.success(t('Agent updated successfully'))
|
|
||||||
showEditModal.value = false
|
|
||||||
fetchAgents()
|
|
||||||
} catch (error) {
|
|
||||||
message.error(t('Update failed'))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
fetchAgents()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.page {
|
|
||||||
padding: 16px;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-left h2 {
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #1f2937;
|
|
||||||
margin: 0 0 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-description {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #6b7280;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-right {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-toggle {
|
|
||||||
display: flex;
|
|
||||||
background: #f8fafc;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 2px;
|
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
color: #64748b;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn:hover {
|
|
||||||
background: #e2e8f0;
|
|
||||||
color: #475569;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn.active {
|
|
||||||
background: #2563eb;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 现代化刷新按钮 */
|
|
||||||
.refresh-btn {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #f8fafc;
|
|
||||||
color: #64748b;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn:hover {
|
|
||||||
background: #e2e8f0;
|
|
||||||
color: #475569;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn:disabled {
|
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed;
|
|
||||||
transform: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn:disabled:hover {
|
|
||||||
background: #f8fafc;
|
|
||||||
color: #64748b;
|
|
||||||
transform: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 新建按钮 */
|
|
||||||
.create-btn {
|
|
||||||
height: 36px;
|
|
||||||
padding: 0 16px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #2563eb;
|
|
||||||
color: white;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.create-btn:hover {
|
|
||||||
background: #1d4ed8;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.create-btn:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.create-btn i {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 60px 20px;
|
|
||||||
color: #6b7280;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading i {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 卡片视图 */
|
|
||||||
.agent-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
||||||
gap: 20px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card {
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card:hover {
|
|
||||||
border-color: #2563eb;
|
|
||||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.agent-card .title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #111827;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card .desc {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #6b7280;
|
|
||||||
line-height: 1.5;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card .meta {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
background: #f3f4f6;
|
|
||||||
color: #374151;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge {
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge.Draft {
|
|
||||||
background: #fef3c7;
|
|
||||||
color: #92400e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge.Active {
|
|
||||||
background: #d1fae5;
|
|
||||||
color: #065f46;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge.Pending {
|
|
||||||
background: #dbeafe;
|
|
||||||
color: #1e40af;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge.Failed {
|
|
||||||
background: #fee2e2;
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge.Completed {
|
|
||||||
background: #d1fae5;
|
|
||||||
color: #065f46;
|
|
||||||
}
|
|
||||||
|
|
||||||
.enabled-badge {
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.enabled-badge.enabled {
|
|
||||||
background: #d1fae5;
|
|
||||||
color: #065f46;
|
|
||||||
}
|
|
||||||
|
|
||||||
.enabled-badge.disabled {
|
|
||||||
background: #fee2e2;
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 列表视图 */
|
|
||||||
.agent-list {
|
|
||||||
background: white;
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-header {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 40px 1fr 100px 120px 100px 120px;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 16px 20px;
|
|
||||||
background: #f9fafb;
|
|
||||||
border-bottom: 1px solid #e5e7eb;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #374151;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-body {
|
|
||||||
max-height: 600px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 40px 1fr 100px 120px 100px 120px;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 16px 20px;
|
|
||||||
border-bottom: 1px solid #f3f4f6;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item:hover {
|
|
||||||
background: #f9fafb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-enabled {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-name {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-name .name {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #111827;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-name .description {
|
|
||||||
color: #6b7280;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.3;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-trigger {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: #6b7280;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-status {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.col-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
border: none;
|
|
||||||
background: #f3f4f6;
|
|
||||||
color: #6b7280;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 12px;
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn:hover {
|
|
||||||
background: #3b82f6;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-pagination {
|
|
||||||
padding: 16px 20px;
|
|
||||||
border-top: 1px solid #e5e7eb;
|
|
||||||
background: #f9fafb;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 选择相关样式 */
|
|
||||||
.col-checkbox {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-checkbox {
|
|
||||||
position: absolute;
|
|
||||||
top: 12px;
|
|
||||||
right: 12px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-checkbox input[type="checkbox"] {
|
|
||||||
cursor: pointer;
|
|
||||||
accent-color: #3b82f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-card.selected {
|
|
||||||
border-color: #3b82f6;
|
|
||||||
background: #f0f9ff;
|
|
||||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item.selected {
|
|
||||||
background: #f0f9ff;
|
|
||||||
border-color: #3b82f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-btn {
|
|
||||||
background: #ef4444;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-btn:hover {
|
|
||||||
background: #dc2626;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-btn:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-btn:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-btn i {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,721 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="page">
|
|
||||||
<!-- 二级操作栏 -->
|
|
||||||
<div class="secondary-bar">
|
|
||||||
<div class="left-actions">
|
|
||||||
<button class="btn btn-outline" @click="openSchemaEditor">
|
|
||||||
<i class="fa fa-edit"></i> {{ t('Edit Schema') }}
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-primary" :disabled="saving" @click="save">
|
|
||||||
<i :class="saving ? 'fa fa-spinner fa-spin' : 'fa fa-save'"></i> {{ t('Save') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="main-layout">
|
|
||||||
<!-- 主内容区域 -->
|
|
||||||
<div class="main-content">
|
|
||||||
<div v-if="loading" class="loading">
|
|
||||||
<i class="fa fa-spinner fa-spin"></i> {{ t('Loading...') }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="content-grid">
|
|
||||||
<!-- 节点元数据卡片 -->
|
|
||||||
<div class="properties-card">
|
|
||||||
<h4>{{ t('Node Metadata') }}</h4>
|
|
||||||
<div class="properties-grid">
|
|
||||||
<div class="property-group">
|
|
||||||
<div class="property-item">
|
|
||||||
<label>{{ t('Node Type') }}</label>
|
|
||||||
<input type="text" v-model="nodeRecord.node_type" />
|
|
||||||
</div>
|
|
||||||
<div class="property-item">
|
|
||||||
<label>{{ t('Node Label') }}</label>
|
|
||||||
<input type="text" v-model="nodeRecord.node_label" />
|
|
||||||
</div>
|
|
||||||
<div class="property-item">
|
|
||||||
<label>{{ t('Node Icon') }}</label>
|
|
||||||
<input type="text" v-model="nodeRecord.node_icon" />
|
|
||||||
</div>
|
|
||||||
<div class="property-item">
|
|
||||||
<label>{{ t('Node Color') }}</label>
|
|
||||||
<div class="color-picker">
|
|
||||||
<input type="color" v-model="nodeRecord.node_color" />
|
|
||||||
<input type="text" v-model="nodeRecord.node_color" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="property-group">
|
|
||||||
<div class="property-item">
|
|
||||||
<label>{{ t('Status') }}</label>
|
|
||||||
<n-select v-model:value="nodeRecord.status" :options="statusOptions" clearable/>
|
|
||||||
</div>
|
|
||||||
<div class="property-item">
|
|
||||||
<label>{{ t('Node Group') }}</label>
|
|
||||||
<n-select v-model:value="nodeRecord.node_group" :options="groupOptions" filterable clearable/>
|
|
||||||
</div>
|
|
||||||
<div class="property-item">
|
|
||||||
<label>{{ t('Node Component') }}</label>
|
|
||||||
<n-select v-model:value="nodeRecord.node_component" :options="componentOptions" filterable clearable/>
|
|
||||||
</div>
|
|
||||||
<div class="property-item full-width">
|
|
||||||
<label>{{ t('Node Description') }}</label>
|
|
||||||
<textarea v-model="nodeRecord.node_description"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Schema编辑器卡片 -->
|
|
||||||
<div class="editor-card">
|
|
||||||
<div class="editor-header">
|
|
||||||
<h4>{{ t('Node Schema') }}</h4>
|
|
||||||
</div>
|
|
||||||
<div class="editor-container">
|
|
||||||
<textarea v-model="schemaText" spellcheck="false" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Schema 编辑器模态框 -->
|
|
||||||
<SchemaEditorModal
|
|
||||||
v-model:visible="showSchemaEditor"
|
|
||||||
:node-type="nodeRecord.node_type || ''"
|
|
||||||
:node-name="nodeName"
|
|
||||||
:initial-schema="schema"
|
|
||||||
:on-save="handleSchemaSave"
|
|
||||||
@close="showSchemaEditor = false"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed, onMounted, watch } from 'vue'
|
|
||||||
import { useRoute } from 'vue-router'
|
|
||||||
import $ from 'jquery'
|
|
||||||
import { useMessage, NSelect } from 'naive-ui'
|
|
||||||
import { t } from '@/shared/i18n'
|
|
||||||
import { checkNodeTypeExists, createNode, getNodeGroups, getNodeComponents, getNodeStatusOptions, getNodeRecord, updateNode, exportNodeDefinition } from '@/shared/api/nodes'
|
|
||||||
import SchemaEditorModal from '@/core/components/SchemaEditorModal.vue'
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface Window { $: typeof $; jQuery: typeof $; jingrow: any }
|
|
||||||
}
|
|
||||||
window.$ = window.jQuery = $
|
|
||||||
|
|
||||||
const route = useRoute()
|
|
||||||
const message = useMessage()
|
|
||||||
|
|
||||||
const nodeName = computed(() => String(route.params.name || ''))
|
|
||||||
const isNew = computed(() => nodeName.value === 'new' || nodeName.value === '')
|
|
||||||
const loading = ref(true)
|
|
||||||
const saving = ref(false)
|
|
||||||
const showSchemaEditor = ref(false)
|
|
||||||
const nodeRecord = ref<any>({})
|
|
||||||
const schema = ref<any>({})
|
|
||||||
const schemaText = ref('')
|
|
||||||
const groupOptions = ref<{ label: string; value: string }[]>([])
|
|
||||||
const componentOptions = ref<{ label: string; value: string }[]>([])
|
|
||||||
const statusOptions = ref<{ label: string; value: string }[]>([])
|
|
||||||
|
|
||||||
async function load() {
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
if (isNew.value) {
|
|
||||||
// 新建模式：初始化空对象，不请求后端
|
|
||||||
nodeRecord.value = { node_type: '', node_label: '', node_icon: '', node_color: '#6b7280', node_group: '', node_component: '', node_description: '', status: 'Draft' }
|
|
||||||
schema.value = {}
|
|
||||||
schemaText.value = JSON.stringify(schema.value, null, 2)
|
|
||||||
await loadSelectOptions()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 编辑模式：获取节点记录（包含所有字段）
|
|
||||||
const recordData = await getNodeRecord(nodeName.value)
|
|
||||||
nodeRecord.value = recordData || {}
|
|
||||||
|
|
||||||
// 从 node_schema 字段获取 schema
|
|
||||||
schema.value = nodeRecord.value.node_schema || {}
|
|
||||||
|
|
||||||
schemaText.value = JSON.stringify(schema.value, null, 2)
|
|
||||||
await loadSelectOptions()
|
|
||||||
} catch (e) {
|
|
||||||
message.error(t('Load failed') + ': ' + (e instanceof Error ? e.message : String(e)))
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadSelectOptions() {
|
|
||||||
try {
|
|
||||||
const [groups, components, statuses] = await Promise.all([
|
|
||||||
getNodeGroups(),
|
|
||||||
getNodeComponents(),
|
|
||||||
getNodeStatusOptions()
|
|
||||||
])
|
|
||||||
groupOptions.value = groups.map((g: string) => ({ label: t(g), value: g }))
|
|
||||||
componentOptions.value = components.map((c: string) => ({ label: t(c), value: c }))
|
|
||||||
statusOptions.value = statuses.map((s: string) => ({ label: t(s), value: s }))
|
|
||||||
} catch (_) {
|
|
||||||
groupOptions.value = []
|
|
||||||
componentOptions.value = []
|
|
||||||
statusOptions.value = []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function save() {
|
|
||||||
let schemaBody: any
|
|
||||||
try {
|
|
||||||
schemaBody = JSON.parse(schemaText.value)
|
|
||||||
} catch (e) {
|
|
||||||
message.error(t('Invalid JSON, please fix before saving'))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
saving.value = true
|
|
||||||
try {
|
|
||||||
if (isNew.value) {
|
|
||||||
if (!nodeRecord.value.node_type) {
|
|
||||||
message.warning(t('Please enter Node Type'))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const exists = await checkNodeTypeExists(nodeRecord.value.node_type)
|
|
||||||
if (exists) {
|
|
||||||
message.error(t('Node Type already exists'))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = await createNode({
|
|
||||||
node_type: nodeRecord.value.node_type,
|
|
||||||
node_label: nodeRecord.value.node_label,
|
|
||||||
node_icon: nodeRecord.value.node_icon,
|
|
||||||
node_color: nodeRecord.value.node_color,
|
|
||||||
node_group: nodeRecord.value.node_group,
|
|
||||||
node_component: nodeRecord.value.node_component,
|
|
||||||
node_description: nodeRecord.value.node_description,
|
|
||||||
status: nodeRecord.value.status || 'Draft',
|
|
||||||
node_schema: schemaBody
|
|
||||||
})
|
|
||||||
const created = result?.data ?? result
|
|
||||||
const newName = created?.name
|
|
||||||
?? created?.data?.name
|
|
||||||
?? created?.message?.name
|
|
||||||
?? created?.document?.name
|
|
||||||
if (!result?.success) {
|
|
||||||
const msg = result?.message || 'create failed'
|
|
||||||
if (/Duplicate|exists|unique/i.test(String(msg))) {
|
|
||||||
message.error(t('Node Type already exists'))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (result?.success && newName) {
|
|
||||||
message.success(t('Created successfully'))
|
|
||||||
// 写入服务器 JSON
|
|
||||||
try {
|
|
||||||
await exportNodeDefinition({
|
|
||||||
metadata: {
|
|
||||||
type: nodeRecord.value.node_type,
|
|
||||||
label: nodeRecord.value.node_label,
|
|
||||||
icon: nodeRecord.value.node_icon,
|
|
||||||
color: nodeRecord.value.node_color,
|
|
||||||
description: nodeRecord.value.node_description,
|
|
||||||
group: nodeRecord.value.node_group,
|
|
||||||
component_type: nodeRecord.value.node_component || 'GenericNode'
|
|
||||||
},
|
|
||||||
schema: schemaBody
|
|
||||||
})
|
|
||||||
} catch (_) {}
|
|
||||||
// 延迟跳转到新节点的详情页
|
|
||||||
setTimeout(() => {
|
|
||||||
window.location.href = `/nodes/${encodeURIComponent(newName)}`
|
|
||||||
}, 1500)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
throw new Error('create failed')
|
|
||||||
}
|
|
||||||
// 编辑模式：更新
|
|
||||||
const nodeData = { ...nodeRecord.value, node_schema: schemaBody }
|
|
||||||
await updateNode(nodeName.value, nodeData)
|
|
||||||
// 写入服务器 JSON
|
|
||||||
try {
|
|
||||||
await exportNodeDefinition({
|
|
||||||
metadata: {
|
|
||||||
type: nodeRecord.value.node_type,
|
|
||||||
label: nodeRecord.value.node_label,
|
|
||||||
icon: nodeRecord.value.node_icon,
|
|
||||||
color: nodeRecord.value.node_color,
|
|
||||||
description: nodeRecord.value.node_description,
|
|
||||||
group: nodeRecord.value.node_group,
|
|
||||||
component_type: nodeRecord.value.node_component || 'GenericNode'
|
|
||||||
},
|
|
||||||
schema: schemaBody
|
|
||||||
})
|
|
||||||
} catch (_) {}
|
|
||||||
message.success(t('Saved successfully'))
|
|
||||||
await load()
|
|
||||||
} catch (e) {
|
|
||||||
message.error(t('Save failed, please check permission and server logs'))
|
|
||||||
} finally {
|
|
||||||
saving.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function openSchemaEditor() {
|
|
||||||
if (!nodeRecord.value.node_type) {
|
|
||||||
message.warning(t('Please select node type first'))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
showSchemaEditor.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleSchemaSave(schemaData: any) {
|
|
||||||
try {
|
|
||||||
// 准备完整的节点数据
|
|
||||||
const nodeData = {
|
|
||||||
...nodeRecord.value,
|
|
||||||
node_schema: schemaData
|
|
||||||
}
|
|
||||||
|
|
||||||
// 调用更新API
|
|
||||||
await updateNode(nodeName.value, nodeData)
|
|
||||||
|
|
||||||
// 更新本地数据
|
|
||||||
schema.value = schemaData
|
|
||||||
schemaText.value = JSON.stringify(schemaData, null, 2)
|
|
||||||
|
|
||||||
// 重新加载数据以确保同步
|
|
||||||
await load()
|
|
||||||
|
|
||||||
} catch (e) {
|
|
||||||
throw e // 让组件处理错误显示
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
watch(() => route.params.name, load)
|
|
||||||
onMounted(load)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.page {
|
|
||||||
min-height: 100vh;
|
|
||||||
background: #f8fafc;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 顶部导航栏 */
|
|
||||||
.top-bar {
|
|
||||||
background: #fff;
|
|
||||||
border-bottom: 1px solid #e5e7eb;
|
|
||||||
padding: 12px 24px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
color: #64748b;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb i {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box i {
|
|
||||||
position: absolute;
|
|
||||||
left: 12px;
|
|
||||||
color: #94a3b8;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box input {
|
|
||||||
padding: 8px 12px 8px 36px;
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #f8fafc;
|
|
||||||
font-size: 14px;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-box input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #3b82f6;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-btn {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #64748b;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-btn:hover {
|
|
||||||
background: #f1f5f9;
|
|
||||||
color: #334155;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #3b82f6;
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar.small {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 二级操作栏 */
|
|
||||||
.secondary-bar {
|
|
||||||
background: #fff;
|
|
||||||
border-bottom: 1px solid #e5e7eb;
|
|
||||||
padding: 8px 16px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 主布局 */
|
|
||||||
.main-layout { display: block; min-height: calc(100vh - 60px); }
|
|
||||||
|
|
||||||
/* Schema编辑器对话框样式 */
|
|
||||||
.schema-editor-dialog {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 20;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-content {
|
|
||||||
background: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
|
||||||
width: 90%;
|
|
||||||
max-width: 1200px;
|
|
||||||
max-height: 90vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-header {
|
|
||||||
padding: 20px;
|
|
||||||
border-bottom: 1px solid #e5e7eb;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-header h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
font-size: 18px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #6b7280;
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn:hover {
|
|
||||||
color: #374151;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-body {
|
|
||||||
flex: 1;
|
|
||||||
padding: 20px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-footer {
|
|
||||||
padding: 20px;
|
|
||||||
border-top: 1px solid #e5e7eb;
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
#schema-builder-container {
|
|
||||||
min-height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 主内容区域 */
|
|
||||||
.main-content { flex: 1; padding: 24px; overflow-y: auto; max-width: none; }
|
|
||||||
|
|
||||||
.loading {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 48px;
|
|
||||||
color: #64748b;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-grid { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: none; }
|
|
||||||
|
|
||||||
/* 卡片样式 */
|
|
||||||
.properties-card,
|
|
||||||
.editor-card {
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 24px;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.properties-card h4,
|
|
||||||
.editor-card h4 {
|
|
||||||
margin: 0 0 20px 0;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #1e293b;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 属性网格 */
|
|
||||||
.properties-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
|
|
||||||
|
|
||||||
.property-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-item.full-width {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-item label {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #374151;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-item input,
|
|
||||||
.property-item textarea {
|
|
||||||
padding: 10px 12px;
|
|
||||||
border: 1px solid #d1d5db;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-item input:focus,
|
|
||||||
.property-item textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #3b82f6;
|
|
||||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.property-item input[readonly] {
|
|
||||||
background: #f9fafb;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-picker {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-picker input[type="color"] {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-picker input[type="text"] {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 编辑器 */
|
|
||||||
.editor-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-container textarea {
|
|
||||||
width: 100%;
|
|
||||||
height: 560px;
|
|
||||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.6;
|
|
||||||
padding: 16px;
|
|
||||||
border: 1px solid #d1d5db;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #f9fafb;
|
|
||||||
color: #111827;
|
|
||||||
resize: vertical;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-container textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #3b82f6;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-container textarea::-webkit-scrollbar-thumb {
|
|
||||||
background: #cbd5e1;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
/* 评论区域 */
|
|
||||||
.comment-input {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-input input {
|
|
||||||
flex: 1;
|
|
||||||
padding: 10px 12px;
|
|
||||||
border: 1px solid #d1d5db;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-input input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #3b82f6;
|
|
||||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 按钮样式 */
|
|
||||||
.btn {
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: 1px solid #d1d5db;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:hover {
|
|
||||||
background: #f9fafb;
|
|
||||||
border-color: #9ca3af;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline {
|
|
||||||
background: #fff;
|
|
||||||
color: #374151;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: #1e293b;
|
|
||||||
color: #fff;
|
|
||||||
border-color: #1e293b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background: #334155;
|
|
||||||
border-color: #334155;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-sm {
|
|
||||||
padding: 6px 12px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn[disabled] {
|
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn[disabled]:hover {
|
|
||||||
background: #fff;
|
|
||||||
border-color: #d1d5db;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 响应式设计 */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.properties-grid { grid-template-columns: 1fr; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.main-layout { flex-direction: column; }
|
|
||||||
|
|
||||||
.top-bar,
|
|
||||||
.secondary-bar {
|
|
||||||
padding: 12px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,902 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="page">
|
|
||||||
<div class="page-header">
|
|
||||||
<div class="header-left">
|
|
||||||
<h2>{{ t('Node Management') }}</h2>
|
|
||||||
<p class="page-description">{{ t('Manage and configure your AI node components') }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="header-right">
|
|
||||||
<!-- 搜索 / 筛选 -->
|
|
||||||
<div class="filters">
|
|
||||||
<n-input
|
|
||||||
v-model:value="searchQuery"
|
|
||||||
:placeholder="t('Search')"
|
|
||||||
clearable
|
|
||||||
style="width: 220px"
|
|
||||||
/>
|
|
||||||
<n-select
|
|
||||||
v-model:value="statusFilter"
|
|
||||||
:options="statusOptions"
|
|
||||||
style="width: 160px"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="view-toggle">
|
|
||||||
<button
|
|
||||||
class="toggle-btn"
|
|
||||||
:class="{ active: viewMode === 'list' }"
|
|
||||||
@click="viewMode = 'list'"
|
|
||||||
:title="t('List View')"
|
|
||||||
>
|
|
||||||
<i class="fa fa-list"></i>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="toggle-btn"
|
|
||||||
:class="{ active: viewMode === 'card' }"
|
|
||||||
@click="viewMode = 'card'"
|
|
||||||
:title="t('Card View')"
|
|
||||||
>
|
|
||||||
<i class="fa fa-th-large"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<button class="refresh-btn" @click="reload" :disabled="loading">
|
|
||||||
<i :class="loading ? 'fa fa-spinner fa-spin' : 'fa fa-refresh'"></i>
|
|
||||||
</button>
|
|
||||||
<n-dropdown
|
|
||||||
trigger="click"
|
|
||||||
:options="menuOptions"
|
|
||||||
@select="onMenuSelect"
|
|
||||||
>
|
|
||||||
<button class="refresh-btn" :disabled="loading || importing" :title="t('More')">
|
|
||||||
<i :class="importing ? 'fa fa-ellipsis-h fa-spin' : 'fa fa-ellipsis-h'"></i>
|
|
||||||
</button>
|
|
||||||
</n-dropdown>
|
|
||||||
<button
|
|
||||||
v-if="selectedNodes.length === 0"
|
|
||||||
class="create-btn"
|
|
||||||
@click="handleCreateNode"
|
|
||||||
:disabled="creating || loading"
|
|
||||||
>
|
|
||||||
<i class="fa fa-plus"></i>
|
|
||||||
{{ t('Create Node') }}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-else
|
|
||||||
class="delete-btn"
|
|
||||||
@click="handleDeleteSelected"
|
|
||||||
:disabled="deleting || loading"
|
|
||||||
>
|
|
||||||
<i class="fa fa-trash"></i>
|
|
||||||
{{ t('Delete Selected') }} ({{ selectedNodes.length }})
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page-content">
|
|
||||||
<div v-if="loading" class="loading">
|
|
||||||
<i class="fa fa-spinner fa-spin"></i> {{ t('Loading...') }}
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<!-- 卡片视图 -->
|
|
||||||
<div v-if="viewMode === 'card'" class="node-grid">
|
|
||||||
<div
|
|
||||||
v-for="node in nodes"
|
|
||||||
:key="node.name"
|
|
||||||
class="node-card"
|
|
||||||
:class="{ selected: selectedNodes.includes(node.name) }"
|
|
||||||
@click="toggleNodeSelection(node.name)"
|
|
||||||
>
|
|
||||||
<div class="card-checkbox">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
:checked="selectedNodes.includes(node.name)"
|
|
||||||
@click.stop="toggleNodeSelection(node.name)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="card-content" @click.stop="openDetail(node.name)">
|
|
||||||
<div class="icon" :style="{ color: node.node_color || '#6b7280' }">
|
|
||||||
<i :class="resolveIcon(node.node_icon)"></i>
|
|
||||||
</div>
|
|
||||||
<div class="info">
|
|
||||||
<div class="title">{{ node.title || node.type }}</div>
|
|
||||||
<div class="desc">{{ node.description || '—' }}</div>
|
|
||||||
<div class="meta">
|
|
||||||
<span v-if="node.category" class="badge">{{ node.category }}</span>
|
|
||||||
<span v-if="node.status" class="status-badge" :class="node.status">{{ t(node.status) }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 卡片视图分页 -->
|
|
||||||
<div v-if="viewMode === 'card'" class="list-pagination">
|
|
||||||
<n-pagination v-model:page="page" :page-count="pageCount" size="small" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 列表视图 -->
|
|
||||||
<div v-else class="node-list">
|
|
||||||
<div class="list-header">
|
|
||||||
<div class="col-checkbox">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
:checked="selectedNodes.length === nodes.length && nodes.length > 0"
|
|
||||||
:indeterminate="selectedNodes.length > 0 && selectedNodes.length < nodes.length"
|
|
||||||
@change="toggleSelectAll"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-icon">{{ t('Icon') }}</div>
|
|
||||||
<div class="col-name">{{ t('Name') }}</div>
|
|
||||||
<div class="col-type">{{ t('Type') }}</div>
|
|
||||||
<div class="col-category">{{ t('Category') }}</div>
|
|
||||||
<div class="col-status">{{ t('Status') }}</div>
|
|
||||||
<div class="col-actions">{{ t('Actions') }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="list-body">
|
|
||||||
<div
|
|
||||||
v-for="node in nodes"
|
|
||||||
:key="node.name"
|
|
||||||
class="node-list-item"
|
|
||||||
:class="{ selected: selectedNodes.includes(node.name) }"
|
|
||||||
@click="openDetail(node.name)"
|
|
||||||
>
|
|
||||||
<div class="col-checkbox">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
:checked="selectedNodes.includes(node.name)"
|
|
||||||
@click.stop="toggleNodeSelection(node.name)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-icon" @click.stop="openDetail(node.name)">
|
|
||||||
<div class="icon" :style="{ color: node.node_color || '#6b7280' }">
|
|
||||||
<i :class="resolveIcon(node.node_icon)"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-name" @click.stop="openDetail(node.name)">
|
|
||||||
<div class="name">{{ node.title || node.type }}</div>
|
|
||||||
<div class="description">{{ node.description || '—' }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-type" @click.stop="openDetail(node.name)">{{ node.type }}</div>
|
|
||||||
<div class="col-category" @click.stop="openDetail(node.name)">
|
|
||||||
<span v-if="node.category" class="badge">{{ node.category }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-status" @click.stop="openDetail(node.name)">
|
|
||||||
<span v-if="node.status" class="status-badge" :class="node.status">{{ t(node.status) }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-actions" @click.stop>
|
|
||||||
<button class="action-btn" @click="openDetail(node.name)" :title="t('View Details')">
|
|
||||||
<i class="fa fa-eye"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 分页 -->
|
|
||||||
<div class="list-pagination">
|
|
||||||
<n-pagination v-model:page="page" :page-count="pageCount" size="small" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted, computed, watch } from 'vue'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { t } from '@/shared/i18n'
|
|
||||||
import { NInput, NSelect, NPagination, NDropdown, useDialog } from 'naive-ui'
|
|
||||||
import { getNodeList, importLocalNodes } from '@/shared/api/nodes'
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const dialog = useDialog()
|
|
||||||
const loading = ref(true)
|
|
||||||
const creating = ref(false)
|
|
||||||
const deleting = ref(false)
|
|
||||||
const importing = ref(false)
|
|
||||||
const nodes = ref<any[]>([])
|
|
||||||
const allNodes = ref<any[]>([]) // 保存所有原始数据
|
|
||||||
const total = ref(0)
|
|
||||||
const selectedNodes = ref<string[]>([])
|
|
||||||
const viewMode = ref<'card' | 'list'>(
|
|
||||||
(localStorage.getItem('nodeListViewMode') as 'card' | 'list') || 'list'
|
|
||||||
)
|
|
||||||
const searchQuery = ref('')
|
|
||||||
const statusFilter = ref('all')
|
|
||||||
const page = ref(1)
|
|
||||||
const pageSize = ref(parseInt(localStorage.getItem('itemsPerPage') || '10'))
|
|
||||||
|
|
||||||
const statusOptions = computed(() => [
|
|
||||||
{ label: t('All'), value: 'all' },
|
|
||||||
{ label: t('Published'), value: 'Published' },
|
|
||||||
{ label: t('Unpublished'), value: 'Unpublished' },
|
|
||||||
{ label: t('Draft'), value: 'Draft' }
|
|
||||||
])
|
|
||||||
|
|
||||||
const pageCount = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
|
|
||||||
|
|
||||||
// 顶部菜单
|
|
||||||
const menuOptions = computed(() => [
|
|
||||||
{ label: t('Import local nodes'), key: 'import-local-nodes' }
|
|
||||||
])
|
|
||||||
|
|
||||||
function onMenuSelect(key: string) {
|
|
||||||
if (key === 'import-local-nodes') {
|
|
||||||
handleImportLocalNodes()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchNodes() {
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
const result = await getNodeList(page.value, pageSize.value)
|
|
||||||
|
|
||||||
allNodes.value = (result.items || []).map((n: any) => ({
|
|
||||||
name: n.name,
|
|
||||||
type: n.node_type,
|
|
||||||
title: n.node_label,
|
|
||||||
description: n.node_description,
|
|
||||||
category: n.node_group,
|
|
||||||
node_icon: n.node_icon,
|
|
||||||
node_color: n.node_color,
|
|
||||||
properties: {},
|
|
||||||
status: n.status,
|
|
||||||
}))
|
|
||||||
|
|
||||||
// 处理数据（搜索和过滤）
|
|
||||||
processNodes()
|
|
||||||
total.value = result.total || 0
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Fetch nodes error:', error)
|
|
||||||
nodes.value = []
|
|
||||||
allNodes.value = []
|
|
||||||
total.value = 0
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function resolveIcon(icon?: string) {
|
|
||||||
if (!icon) return 'fa fa-cube'
|
|
||||||
if (icon.startsWith('fa-')) return `fa ${icon}`
|
|
||||||
return icon
|
|
||||||
}
|
|
||||||
|
|
||||||
function processNodes() {
|
|
||||||
let filteredNodes = [...allNodes.value]
|
|
||||||
|
|
||||||
// 前端搜索和过滤
|
|
||||||
if (searchQuery.value) {
|
|
||||||
const query = searchQuery.value.toLowerCase()
|
|
||||||
filteredNodes = filteredNodes.filter(node =>
|
|
||||||
node.title?.toLowerCase().includes(query) ||
|
|
||||||
node.type?.toLowerCase().includes(query) ||
|
|
||||||
node.description?.toLowerCase().includes(query) ||
|
|
||||||
node.category?.toLowerCase().includes(query)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (statusFilter.value !== 'all') {
|
|
||||||
filteredNodes = filteredNodes.filter(node => node.status === statusFilter.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
nodes.value = filteredNodes
|
|
||||||
}
|
|
||||||
|
|
||||||
function reload() {
|
|
||||||
fetchNodes()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 一键导入本地节点（改为调用后端接口）
|
|
||||||
async function handleImportLocalNodes() {
|
|
||||||
if (importing.value) return
|
|
||||||
importing.value = true
|
|
||||||
try {
|
|
||||||
const res = await importLocalNodes()
|
|
||||||
await fetchNodes()
|
|
||||||
if (!res?.success) {
|
|
||||||
dialog.error({ title: t('Error'), content: t('Import failed') })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const matchedCount = res.matched || 0
|
|
||||||
const importedCount = res.imported || 0
|
|
||||||
const skippedExisting = res.skipped_existing || 0
|
|
||||||
if (matchedCount === 0) {
|
|
||||||
dialog.info({ title: t('Info'), content: t('No local node definitions found') })
|
|
||||||
} else if (importedCount === 0 && skippedExisting > 0) {
|
|
||||||
dialog.info({ title: t('Info'), content: t('All local nodes already exist') })
|
|
||||||
} else if (importedCount > 0) {
|
|
||||||
dialog.success({ title: t('Success'), content: `${t('Imported')} ${importedCount} ${t('nodes')}` })
|
|
||||||
} else {
|
|
||||||
dialog.info({ title: t('Info'), content: t('No new local nodes found') })
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Import local nodes error:', e)
|
|
||||||
dialog.error({ title: t('Error'), content: t('Import failed') })
|
|
||||||
} finally {
|
|
||||||
importing.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选择相关函数
|
|
||||||
function toggleNodeSelection(nodeName: string) {
|
|
||||||
const index = selectedNodes.value.indexOf(nodeName)
|
|
||||||
if (index > -1) {
|
|
||||||
selectedNodes.value.splice(index, 1)
|
|
||||||
} else {
|
|
||||||
selectedNodes.value.push(nodeName)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleSelectAll() {
|
|
||||||
if (selectedNodes.value.length === nodes.value.length) {
|
|
||||||
selectedNodes.value = []
|
|
||||||
} else {
|
|
||||||
selectedNodes.value = nodes.value.map(node => node.name)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleDeleteSelected() {
|
|
||||||
if (selectedNodes.value.length === 0) return
|
|
||||||
|
|
||||||
dialog.error({
|
|
||||||
title: t('Confirm Delete'),
|
|
||||||
content: t('Are you sure you want to delete the selected nodes? This action cannot be undone.'),
|
|
||||||
positiveText: t('Delete'),
|
|
||||||
negativeText: t('Cancel'),
|
|
||||||
onPositiveClick: async () => {
|
|
||||||
deleting.value = true
|
|
||||||
try {
|
|
||||||
const { deleteNodes } = await import('@/shared/api/nodes')
|
|
||||||
const result = await deleteNodes(selectedNodes.value)
|
|
||||||
|
|
||||||
if (result.success) {
|
|
||||||
// 删除成功，重新加载数据
|
|
||||||
selectedNodes.value = []
|
|
||||||
await fetchNodes()
|
|
||||||
} else {
|
|
||||||
alert(t('Delete failed') + ': ' + (result.message || t('Unknown error')))
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Delete error:', error)
|
|
||||||
alert(t('Delete failed') + ': ' + t('Network error'))
|
|
||||||
} finally {
|
|
||||||
deleting.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听搜索和筛选变化
|
|
||||||
watch([searchQuery, statusFilter], () => {
|
|
||||||
page.value = 1 // 重置到第一页
|
|
||||||
// 重新处理数据，不需要重新请求API
|
|
||||||
processNodes()
|
|
||||||
}, { deep: true })
|
|
||||||
|
|
||||||
// 监听分页变化
|
|
||||||
watch([page], () => {
|
|
||||||
fetchNodes()
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听每页数量变化（从系统设置）
|
|
||||||
watch(() => localStorage.getItem('itemsPerPage'), (newValue) => {
|
|
||||||
if (newValue) {
|
|
||||||
pageSize.value = parseInt(newValue)
|
|
||||||
page.value = 1 // 重置到第一页
|
|
||||||
fetchNodes()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听视图模式变化并持久化
|
|
||||||
watch(viewMode, (m) => {
|
|
||||||
localStorage.setItem('nodeListViewMode', m)
|
|
||||||
})
|
|
||||||
|
|
||||||
function openDetail(name: string) {
|
|
||||||
router.push({ name: 'NodeDetail', params: { name } })
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCreateNode() {
|
|
||||||
// 仅跳转到新建模式，由详情页保存时再创建后端记录
|
|
||||||
router.push({ name: 'NodeDetail', params: { name: 'new' } })
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
fetchNodes()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.page {
|
|
||||||
padding: 16px;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-left h2 {
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #1f2937;
|
|
||||||
margin: 0 0 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-description {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #6b7280;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-right {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-toggle {
|
|
||||||
display: flex;
|
|
||||||
background: #f8fafc;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 2px;
|
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
color: #64748b;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 14px;
|
|
||||||
border-radius: 6px;
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn:hover {
|
|
||||||
background: #e2e8f0;
|
|
||||||
color: #475569;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn.active {
|
|
||||||
background: #3b82f6;
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn.active:hover {
|
|
||||||
background: #2563eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 现代化刷新按钮 */
|
|
||||||
.refresh-btn {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #f8fafc;
|
|
||||||
color: #64748b;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn:hover {
|
|
||||||
background: #e2e8f0;
|
|
||||||
color: #475569;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn:disabled {
|
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed;
|
|
||||||
transform: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn:disabled:hover {
|
|
||||||
background: #f8fafc;
|
|
||||||
color: #64748b;
|
|
||||||
transform: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 微妙的脉冲效果 */
|
|
||||||
.refresh-btn:not(:disabled):hover::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
background: rgba(59, 130, 246, 0.1);
|
|
||||||
border-radius: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
animation: pulse 0.6s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0% {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* 卡片视图样式 */
|
|
||||||
.node-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-card {
|
|
||||||
position: relative;
|
|
||||||
padding: 16px;
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
background: #fff;
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-card:hover {
|
|
||||||
border-color: #3b82f6;
|
|
||||||
background: #f8fafc;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 12px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: #f3f4f6;
|
|
||||||
font-size: 20px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
padding-right: 30px; /* 为复选框留出空间 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #111827;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc {
|
|
||||||
color: #6b7280;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.4;
|
|
||||||
height: 36px;
|
|
||||||
overflow: hidden;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta {
|
|
||||||
margin-top: 8px;
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
background: #eef2ff;
|
|
||||||
color: #334155;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge {
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge.active {
|
|
||||||
background: #dcfce7;
|
|
||||||
color: #166534;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge.inactive {
|
|
||||||
background: #fee2e2;
|
|
||||||
color: #991b1b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge.draft {
|
|
||||||
background: #fef3c7;
|
|
||||||
color: #92400e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge.published {
|
|
||||||
background: #dcfce7;
|
|
||||||
color: #166534;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge.unpublished {
|
|
||||||
background: #fee2e2;
|
|
||||||
color: #991b1b;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 列表视图样式 */
|
|
||||||
.node-list {
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-header {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 40px 60px 2fr 1fr 1fr 1fr 80px;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 16px 20px;
|
|
||||||
background: #f8fafc;
|
|
||||||
border-bottom: 1px solid #e5e7eb;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #374151;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-body {
|
|
||||||
max-height: 600px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-pagination {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
border-top: 1px solid #f3f4f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-list-item {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 40px 60px 2fr 1fr 1fr 1fr 80px;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 16px 20px;
|
|
||||||
border-bottom: 1px solid #f3f4f6;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-list-item:hover {
|
|
||||||
background: #f8fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-list-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-icon .icon {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-name {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-name .name {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #111827;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-name .description {
|
|
||||||
color: #6b7280;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.3;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-type {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: #6b7280;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-category {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-status {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
border: none;
|
|
||||||
background: #f3f4f6;
|
|
||||||
color: #6b7280;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 12px;
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn:hover {
|
|
||||||
background: #3b82f6;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 新建按钮 */
|
|
||||||
.create-btn {
|
|
||||||
height: 36px;
|
|
||||||
padding: 0 16px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #2563eb;
|
|
||||||
color: white;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.create-btn:hover {
|
|
||||||
background: #1d4ed8;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.create-btn:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.create-btn i {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-btn {
|
|
||||||
background: #ef4444;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-btn:hover {
|
|
||||||
background: #dc2626;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-btn:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-btn:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-btn i {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 选择相关样式 */
|
|
||||||
.col-checkbox {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-checkbox {
|
|
||||||
position: absolute;
|
|
||||||
top: 12px;
|
|
||||||
right: 12px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-checkbox input[type="checkbox"] {
|
|
||||||
cursor: pointer;
|
|
||||||
accent-color: #3b82f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-card.selected {
|
|
||||||
border-color: #3b82f6;
|
|
||||||
background: #f0f9ff;
|
|
||||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-list-item.selected {
|
|
||||||
background: #f0f9ff;
|
|
||||||
border-color: #3b82f6;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user