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

美化pagetype列表页

Browse Source
This commit is contained in:
jingrow 2025-11-02 16:01:16 +08:00
parent 02b5b6d6ee
commit 836f5608e0
4 changed files with 21 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
View File

@ -1455,6 +1455,18 @@ function formatDisplayValue(value: any, fieldName: string) {
/* 工具栏容器样式（保留用于布局） */
.header-right { display: flex; align-items: center; gap: 12px; }
/* 卡片视图操作按钮容器样式（为自定义操作组件提供 footer 样式） */
.card-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 16px;
border-top: 1px solid #f3f4f6;
background: #fafbfc;
margin-top: auto;
}
/* 表格操作列样式 - 与 AgentList 完全一致 */
.col-actions {
display: flex;

17
apps/jingrow/frontend/src/core/pagetype/GenericListPageActions.vue
View File

@ -33,8 +33,9 @@ const props = defineProps<Props>()
const emit = defineEmits<Emits>()
// 根据视图模式决定容器类名
// 注意：卡片视图时父元素已经提供了 card-actions 容器和样式，所以只使用 col-actions
const containerClass = computed(() => {
return props.viewMode === 'card' ? 'card-actions' : 'col-actions'
return 'col-actions'
})
function handleView() {
@ -51,19 +52,7 @@ function handleDelete() {
</script>
<style scoped>
/* 卡片视图操作按钮容器 */
.card-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 16px;
border-top: 1px solid #f3f4f6;
background: #fafbfc;
margin-top: auto;
}
/* 列表视图操作按钮容器 */
/* 列表视图操作按钮容器 - 卡片视图时由父元素的 card-actions 提供样式 */
.col-actions {
display: flex;
align-items: center;

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

@ -1,7 +1,6 @@
<template>
<!-- 使用与默认组件相同的结构：card-actions 外层，col-actions 内层 -->
<div class="card-actions">
<div class="col-actions">
<!-- 只使用 col-actions，父元素在卡片视图时会提供 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>
@ -29,7 +28,6 @@
<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>
@ -130,19 +128,7 @@ async function handleFlowBuilder() {
</script>
<style scoped>
/* 与默认组件完全相同的卡片视图样式 */
.card-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 16px;
border-top: 1px solid #f3f4f6;
background: #fafbfc;
margin-top: auto;
}
/* 与默认组件完全相同的列表视图样式 */
/* 列表视图样式 - 只提供按钮排列，无背景 */
.col-actions {
display: flex;
align-items: center;

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

@ -1,7 +1,6 @@
<template>
<!-- 使用与默认组件相同的结构：card-actions 外层，col-actions 内层 -->
<div class="card-actions">
<div class="col-actions">
<!-- 只使用 col-actions，父元素在卡片视图时会提供 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>
@ -21,7 +20,6 @@
<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，避免事件冒泡问题 -->
@ -142,19 +140,7 @@ async function handleSchemaSave(schemaData: any) {
</script>
<style scoped>
/* 与默认组件完全相同的卡片视图样式 */
.card-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 16px;
border-top: 1px solid #f3f4f6;
background: #fafbfc;
margin-top: auto;
}
/* 与默认组件完全相同的列表视图样式 */
/* 列表视图样式 - 只提供按钮排列，无背景 */
.col-actions {
display: flex;
align-items: center;