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-02 15:45:05 +08:00
parent 07fb96d2b2
commit caa69b5d0e
2 changed files with 141 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
apps/jingrow/frontend/src/views/pagetype/local_ai_agent/local_ai_agent_list_actions.vue
View File

@ -1,31 +1,36 @@
<template>
<!-- 默认操作按钮 -->
<button class="action-btn" @click.stop="context.openDetail(context.row.name)" :title="context.t('View')">
<i class="fa fa-eye"></i>
</button>
<button class="action-btn" @click.stop="context.editRecord(context.row)" :title="context.t('Edit')">
<i class="fa fa-edit"></i>
</button>
<!-- 执行按钮 -->
<button
class="action-btn execute-btn"
@click.stop="handleExecute"
:title="context.t('Execute')"
:disabled="executing"
>
<i :class="executing ? 'fa fa-spinner fa-spin' : 'fa fa-play'"></i>
</button>
<!-- 流程编排按钮 -->
<button
class="action-btn flow-builder-btn"
@click.stop="handleFlowBuilder"
:title="context.t('Flow Builder')"
>
<i class="fa fa-sitemap"></i>
</button>
<button class="action-btn delete-btn" @click.stop="context.deleteRecord(context.row.name)" :title="context.t('Delete')">
<i class="fa fa-trash"></i>
</button>
<!-- 使用与默认组件相同的结构：card-actions 外层，col-actions 内层 -->
<div class="card-actions">
<div class="col-actions">
<!-- 默认操作按钮 -->
<button class="action-btn" @click.stop="context.openDetail(context.row.name)" :title="context.t('View')">
<i class="fa fa-eye"></i>
</button>
<button class="action-btn" @click.stop="context.editRecord(context.row)" :title="context.t('Edit')">
<i class="fa fa-edit"></i>
</button>
<!-- 执行按钮 -->
<button
class="action-btn execute-btn"
@click.stop="handleExecute"
:title="context.t('Execute')"
:disabled="executing"
>
<i :class="executing ? 'fa fa-spinner fa-spin' : 'fa fa-play'"></i>
</button>
<!-- 流程编排按钮 -->
<button
class="action-btn flow-builder-btn"
@click.stop="handleFlowBuilder"
:title="context.t('Flow Builder')"
>
<i class="fa fa-sitemap"></i>
</button>
<button class="action-btn delete-btn" @click.stop="context.deleteRecord(context.row.name)" :title="context.t('Delete')">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
</template>
<script setup lang="ts">
@ -125,26 +130,45 @@ async function handleFlowBuilder() {
</script>
<style scoped>
/* 继承父组件的样式，只需要覆盖特定样式 */
.action-btn {
width: 28px;
height: 28px;
border: none;
background: #f3f4f6;
color: #6b7280;
border-radius: 6px;
cursor: pointer;
/* 与默认组件完全相同的卡片视图样式 */
.card-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 20px;
border-top: 1px solid #f3f4f6;
background: #fafbfc;
margin-top: auto;
}
/* 与默认组件完全相同的列表视图样式 */
.col-actions {
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
gap: 4px;
}
/* 默认按钮（查看、编辑）使用更普通的颜色 */
.action-btn:hover {
background: #3b82f6;
color: white;
/* 操作按钮通用样式 - 与默认组件对齐 */
.action-btn {
width: 32px;
height: 32px;
border: none;
background: #f3f4f6;
color: #6b7280;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.action-btn:hover:not(:disabled) {
background: #3b82f6;
color: white;
}
.action-btn:disabled {
@ -152,20 +176,27 @@ async function handleFlowBuilder() {
cursor: not-allowed;
}
/* 列表视图中的按钮稍小一些 */
.col-actions .action-btn {
width: 28px;
height: 28px;
font-size: 12px;
}
/* 流程编排按钮使用蓝色，与详情页保持一致 */
.flow-builder-btn:hover {
.flow-builder-btn:hover:not(:disabled) {
background: #3b82f6;
color: white;
}
/* 执行按钮使用绿色 */
.execute-btn:hover {
.execute-btn:hover:not(:disabled) {
background: #10b981;
color: white;
}
/* 删除按钮使用红色 */
.delete-btn:hover {
.delete-btn:hover:not(:disabled) {
background: #ef4444;
color: white;
}

99
apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_list_actions.vue
View File

@ -1,23 +1,28 @@
<template>
<!-- 默认操作按钮 -->
<button class="action-btn" @click.stop="context.openDetail(context.row.name)" :title="context.t('View')">
<i class="fa fa-eye"></i>
</button>
<button class="action-btn" @click.stop="context.editRecord(context.row)" :title="context.t('Edit')">
<i class="fa fa-edit"></i>
</button>
<!-- Schema 编辑按钮 -->
<button
class="action-btn schema-btn"
@click.stop="handleOpenSchemaEditor"
:title="context.t('Edit Schema')"
:disabled="!canEditSchema"
>
<i class="fa fa-table"></i>
</button>
<button class="action-btn delete-btn" @click.stop="context.deleteRecord(context.row.name)" :title="context.t('Delete')">
<i class="fa fa-trash"></i>
</button>
<!-- 使用与默认组件相同的结构：card-actions 外层，col-actions 内层 -->
<div class="card-actions">
<div class="col-actions">
<!-- 默认操作按钮 -->
<button class="action-btn" @click.stop="context.openDetail(context.row.name)" :title="context.t('View')">
<i class="fa fa-eye"></i>
</button>
<button class="action-btn" @click.stop="context.editRecord(context.row)" :title="context.t('Edit')">
<i class="fa fa-edit"></i>
</button>
<!-- Schema 编辑按钮 -->
<button
class="action-btn schema-btn"
@click.stop="handleOpenSchemaEditor"
:title="context.t('Edit Schema')"
:disabled="!canEditSchema"
>
<i class="fa fa-table"></i>
</button>
<button class="action-btn delete-btn" @click.stop="context.deleteRecord(context.row.name)" :title="context.t('Delete')">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<!-- Schema 编辑器模态框 - 使用 Teleport 渲染到 body，避免事件冒泡问题 -->
<Teleport to="body">
@ -137,26 +142,45 @@ async function handleSchemaSave(schemaData: any) {
</script>
<style scoped>
/* 继承父组件的样式，只需要覆盖特定样式 */
.action-btn {
width: 28px;
height: 28px;
border: none;
background: #f3f4f6;
color: #6b7280;
border-radius: 6px;
cursor: pointer;
/* 与默认组件完全相同的卡片视图样式 */
.card-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 20px;
border-top: 1px solid #f3f4f6;
background: #fafbfc;
margin-top: auto;
}
/* 与默认组件完全相同的列表视图样式 */
.col-actions {
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
gap: 4px;
}
/* 默认按钮（查看、编辑）使用更普通的颜色 */
.action-btn:hover:not(:disabled) {
background: #3b82f6;
color: white;
/* 操作按钮通用样式 - 与默认组件对齐 */
.action-btn {
width: 32px;
height: 32px;
border: none;
background: #f3f4f6;
color: #6b7280;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.action-btn:hover:not(:disabled) {
background: #3b82f6;
color: white;
}
.action-btn:disabled {
@ -164,6 +188,13 @@ async function handleSchemaSave(schemaData: any) {
cursor: not-allowed;
}
/* 列表视图中的按钮稍小一些 */
.col-actions .action-btn {
width: 28px;
height: 28px;
font-size: 12px;
}
/* Schema 编辑按钮使用蓝色系，与流程编排按钮保持一致，表示配置/设置 */
.schema-btn:hover:not(:disabled) {
background: #3b82f6;