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