jingrowlocal/jingrow-framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

美化节点和智能体详情页的按钮样式

Browse Source
This commit is contained in:
jingrow 2025-11-01 21:11:14 +08:00
parent 85f9e60b5e
commit 401129d21f
2 changed files with 137 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
apps/jingrow/frontend/src/views/pagetype/local_ai_agent/local_ai_agent_toolbar.vue
View File

@ -1,12 +1,24 @@
<template>
<n-space>
<n-button type="success" :disabled="executing" @click="handleExecute" v-if="!isNew">
<n-space :size="8">
<n-button
type="default"
size="medium"
:disabled="executing"
@click="handleExecute"
v-if="!isNew"
class="toolbar-btn execute-btn"
>
<template #icon>
<n-icon><Icon icon="tabler:play" /></n-icon>
</template>
{{ executing ? t('Executing...') : t('Execute') }}
</n-button>
<n-button type="info" @click="handleFlowBuilder">
<n-button
type="default"
size="medium"
@click="handleFlowBuilder"
class="toolbar-btn flow-builder-btn"
>
<template #icon>
<n-icon><Icon icon="lucide:workflow" /></n-icon>
</template>
@ -84,12 +96,73 @@ async function handleFlowBuilder() {
} catch (_) {}
}
const canEdit = computed(() => !!(props.context.canEdit?.value ?? props.context.canEdit))
const loading = computed(() => !!(props.context.loading?.value ?? props.context.loading))
</script>
<style scoped>
/* 工具栏按钮基础样式 - 与返回按钮一致，使用badge配色方案 */
.toolbar-btn {
background: #f3f4f6 !important;
color: #374151 !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 清除 Naive UI 按钮内部的边框元素，避免双重边框 */
.toolbar-btn :deep(.n-button__border),
.toolbar-btn :deep(.n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
.toolbar-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.toolbar-btn:hover:not(:disabled) :deep(.n-button__border),
.toolbar-btn:hover:not(:disabled) :deep(.n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
/* 执行按钮 - 绿色系（与列表页badge配色一致） */
.execute-btn {
background: #dcfce7 !important;
color: #166534 !important;
border-color: rgba(34, 197, 94, 0.2) !important;
}
.execute-btn:hover:not(:disabled) {
background: #bbf7d0 !important;
color: #15803d !important;
border-color: rgba(34, 197, 94, 0.3) !important;
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
}
/* 流程编排按钮 - 蓝色系（与列表页badge配色一致） */
.flow-builder-btn {
background: #e0f2fe !important;
color: #0369a1 !important;
border-color: rgba(14, 165, 233, 0.2) !important;
}
.flow-builder-btn:hover:not(:disabled) {
background: #bae6fd !important;
color: #0284c7 !important;
border-color: rgba(14, 165, 233, 0.3) !important;
box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
}
.toolbar-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.toolbar-btn:disabled :deep(.n-button__border),
.toolbar-btn:disabled :deep(.n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
</style>

60
apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_toolbar.vue
View File

@ -1,6 +1,12 @@
<template>
<n-space>
<n-button type="info" @click="openSchemaEditor" v-if="!isNew">
<n-space :size="8">
<n-button
type="default"
size="medium"
@click="openSchemaEditor"
v-if="!isNew"
class="toolbar-btn schema-editor-btn"
>
<template #icon>
<n-icon><Icon icon="tabler:edit" /></n-icon>
</template>
@ -79,4 +85,54 @@ async function handleSchemaSave(schemaData: any) {
</script>
<style scoped>
/* 工具栏按钮基础样式 - 与返回按钮一致，使用badge配色方案 */
.toolbar-btn {
background: #f3f4f6 !important;
color: #374151 !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 清除 Naive UI 按钮内部的边框元素，避免双重边框 */
.toolbar-btn :deep(.n-button__border),
.toolbar-btn :deep(.n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
.toolbar-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.toolbar-btn:hover:not(:disabled) :deep(.n-button__border),
.toolbar-btn:hover:not(:disabled) :deep(.n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
/* 编辑Schema按钮 - 青绿色系（与列表页badge配色一致） */
.schema-editor-btn {
background: #e6f8f0 !important;
color: #0d684b !important;
border-color: rgba(13, 104, 75, 0.2) !important;
}
.schema-editor-btn:hover:not(:disabled) {
background: #d1f2e5 !important;
color: #0a5543 !important;
border-color: rgba(13, 104, 75, 0.3) !important;
box-shadow: 0 2px 8px rgba(13, 104, 75, 0.15);
}
.toolbar-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.toolbar-btn:disabled :deep(.n-button__border),
.toolbar-btn:disabled :deep(.n-button__state-border) {
border: none !important;
border-color: transparent !important;
}
</style>