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:08:27 +08:00
parent 836f5608e0
commit d52c8687f3
4 changed files with 109 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -132,32 +132,31 @@
</div> </div>
</div> </div>
</div> </div>
<div class="card-actions"> <!-- 操作列覆盖组件（卡片视图） -->
<!-- 操作列覆盖组件（卡片视图） --> <component
<component v-if="actionsComponent"
v-if="actionsComponent" :is="actionsComponent"
:is="actionsComponent" :context="{
:context="{ row,
row, entity,
entity, openDetail,
openDetail, editRecord,
editRecord, deleteRecord,
deleteRecord, router,
router, t,
t viewMode: 'card'
}" }"
/> />
<!-- 默认操作按钮 --> <!-- 默认操作按钮 -->
<GenericListPageActions <GenericListPageActions
v-else v-else
:row="row" :row="row"
:entity="entity" :entity="entity"
view-mode="card" view-mode="card"
@view="openDetail(row.name)" @view="openDetail(row.name)"
@edit="editRecord(row)" @edit="editRecord(row)"
@delete="deleteRecord(row.name)" @delete="deleteRecord(row.name)"
/> />
</div>
</div> </div>
</div> </div>
<div v-if="viewMode === 'card'" class="list-pagination"> <div v-if="viewMode === 'card'" class="list-pagination">
@ -227,32 +226,31 @@
</template> </template>
<template v-else>{{ formatDisplayValue(row[col.key], col.key) }}</template> <template v-else>{{ formatDisplayValue(row[col.key], col.key) }}</template>
</div> </div>
<div class="col-actions"> <!-- 操作列覆盖组件 -->
<!-- 操作列覆盖组件 --> <component
<component v-if="actionsComponent"
v-if="actionsComponent" :is="actionsComponent"
:is="actionsComponent" :context="{
:context="{ row,
row, entity,
entity, openDetail,
openDetail, editRecord,
editRecord, deleteRecord,
deleteRecord, router,
router, t,
t viewMode: 'list'
}" }"
/> />
<!-- 默认操作按钮 --> <!-- 默认操作按钮 -->
<GenericListPageActions <GenericListPageActions
v-else v-else
:row="row" :row="row"
:entity="entity" :entity="entity"
view-mode="list" view-mode="list"
@view="openDetail(row.name)" @view="openDetail(row.name)"
@edit="editRecord(row)" @edit="editRecord(row)"
@delete="deleteRecord(row.name)" @delete="deleteRecord(row.name)"
/> />
</div>
</div> </div>
</div> </div>
<div v-if="viewMode === 'list'" class="list-pagination"> <div v-if="viewMode === 'list'" class="list-pagination">
@ -1455,25 +1453,8 @@ function formatDisplayValue(value: any, fieldName: string) {
/* 工具栏容器样式（保留用于布局） */ /* 工具栏容器样式（保留用于布局） */
.header-right { display: flex; align-items: center; gap: 12px; } .header-right { display: flex; align-items: center; gap: 12px; }
/* 卡片视图操作按钮容器样式（为自定义操作组件提供 footer 样式） */ /* 注意：操作列的样式现在由 GenericListPageActions 组件和自定义操作组件自己管理 */
.card-actions { /* 父组件不再定义 card-actions 和 col-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;
align-items: center;
justify-content: center;
gap: 4px;
}
/* 列表样式 - 与 AgentList 完全一致 */ /* 列表样式 - 与 AgentList 完全一致 */
.col-checkbox { .col-checkbox {

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

@ -32,10 +32,9 @@ interface Emits {
const props = defineProps<Props>() const props = defineProps<Props>()
const emit = defineEmits<Emits>() const emit = defineEmits<Emits>()
// 根据视图模式决定容器类名 // 根据视图模式决定容器类名，组件自包含所有样式
// 注意：卡片视图时父元素已经提供了 card-actions 容器和样式，所以只使用 col-actions
const containerClass = computed(() => { const containerClass = computed(() => {
return 'col-actions' return props.viewMode === 'card' ? 'actions-container card-actions' : 'actions-container col-actions'
}) })
function handleView() { function handleView() {
@ -52,14 +51,24 @@ function handleDelete() {
</script> </script>
<style scoped> <style scoped>
/* 列表视图操作按钮容器 - 卡片视图时由父元素的 card-actions 提供样式 */ /* 操作按钮容器基础样式 */
.col-actions { .actions-container {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 4px; gap: 4px;
} }
/* 卡片视图样式：包含 footer 外观（padding, border-top, background） */
.card-actions {
padding: 8px 16px;
border-top: 1px solid #f3f4f6;
background: #fafbfc;
margin-top: auto;
}
/* 列表视图样式：只提供按钮排列，无背景（通过 actions-container 基础样式实现） */
/* 操作按钮通用样式 - 统一使用节点列表页的大小 */ /* 操作按钮通用样式 - 统一使用节点列表页的大小 */
.action-btn { .action-btn {
width: 28px; width: 28px;

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

@ -1,6 +1,6 @@
<template> <template>
<!-- 只使用 col-actions，父元素在卡片视图时会提供 card-actions 样式 --> <!-- 根据视图模式决定容器类名，组件自包含所有样式 -->
<div class="col-actions"> <div :class="containerClass">
<!-- 默认操作按钮 --> <!-- 默认操作按钮 -->
<button class="action-btn" @click.stop="context.openDetail(context.row.name)" :title="context.t('View')"> <button class="action-btn" @click.stop="context.openDetail(context.row.name)" :title="context.t('View')">
<i class="fa fa-eye"></i> <i class="fa fa-eye"></i>
@ -32,7 +32,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref, computed } from 'vue'
import { useMessage } from 'naive-ui' import { useMessage } from 'naive-ui'
import axios from 'axios' import axios from 'axios'
import { get_session_api_headers } from '@/shared/api/auth' import { get_session_api_headers } from '@/shared/api/auth'
@ -46,9 +46,16 @@ const props = defineProps<{
deleteRecord: (name: string) => void deleteRecord: (name: string) => void
router: any router: any
t: (key: string) => string t: (key: string) => string
viewMode?: 'card' | 'list'
} }
}>() }>()
// 根据视图模式决定容器类名，组件自包含所有样式
const containerClass = computed(() => {
const viewMode = props.context.viewMode || 'list'
return viewMode === 'card' ? 'actions-container card-actions' : 'actions-container col-actions'
})
const message = useMessage() const message = useMessage()
const executing = ref(false) const executing = ref(false)
@ -128,14 +135,24 @@ async function handleFlowBuilder() {
</script> </script>
<style scoped> <style scoped>
/* 列表视图样式 - 只提供按钮排列，无背景 */ /* 操作按钮容器基础样式 */
.col-actions { .actions-container {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 4px; gap: 4px;
} }
/* 卡片视图样式：包含 footer 外观（padding, border-top, background） */
.card-actions {
padding: 8px 16px;
border-top: 1px solid #f3f4f6;
background: #fafbfc;
margin-top: auto;
}
/* 列表视图样式：只提供按钮排列，无背景（通过 actions-container 基础样式实现） */
/* 操作按钮通用样式 - 统一使用节点列表页的大小 */ /* 操作按钮通用样式 - 统一使用节点列表页的大小 */
.action-btn { .action-btn {
width: 28px; width: 28px;

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

@ -1,6 +1,6 @@
<template> <template>
<!-- 只使用 col-actions，父元素在卡片视图时会提供 card-actions 样式 --> <!-- 根据视图模式决定容器类名，组件自包含所有样式 -->
<div class="col-actions"> <div :class="containerClass">
<!-- 默认操作按钮 --> <!-- 默认操作按钮 -->
<button class="action-btn" @click.stop="context.openDetail(context.row.name)" :title="context.t('View')"> <button class="action-btn" @click.stop="context.openDetail(context.row.name)" :title="context.t('View')">
<i class="fa fa-eye"></i> <i class="fa fa-eye"></i>
@ -52,9 +52,16 @@ const props = defineProps<{
deleteRecord: (name: string) => void deleteRecord: (name: string) => void
router: any router: any
t: (key: string) => string t: (key: string) => string
viewMode?: 'card' | 'list'
} }
}>() }>()
// 根据视图模式决定容器类名，组件自包含所有样式
const containerClass = computed(() => {
const viewMode = props.context.viewMode || 'list'
return viewMode === 'card' ? 'actions-container card-actions' : 'actions-container col-actions'
})
const message = useMessage() const message = useMessage()
const showSchemaEditor = ref(false) const showSchemaEditor = ref(false)
@ -140,14 +147,24 @@ async function handleSchemaSave(schemaData: any) {
</script> </script>
<style scoped> <style scoped>
/* 列表视图样式 - 只提供按钮排列，无背景 */ /* 操作按钮容器基础样式 */
.col-actions { .actions-container {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 4px; gap: 4px;
} }
/* 卡片视图样式：包含 footer 外观（padding, border-top, background） */
.card-actions {
padding: 8px 16px;
border-top: 1px solid #f3f4f6;
background: #fafbfc;
margin-top: auto;
}
/* 列表视图样式：只提供按钮排列，无背景（通过 actions-container 基础样式实现） */
/* 操作按钮通用样式 - 统一使用节点列表页的大小 */ /* 操作按钮通用样式 - 统一使用节点列表页的大小 */
.action-btn { .action-btn {
width: 28px; width: 28px;