优化pagetype列表页操作栏
This commit is contained in:
parent
836f5608e0
commit
d52c8687f3
@ -132,32 +132,31 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<!-- 操作列覆盖组件（卡片视图） -->
|
||||
<component
|
||||
v-if="actionsComponent"
|
||||
:is="actionsComponent"
|
||||
:context="{
|
||||
row,
|
||||
entity,
|
||||
openDetail,
|
||||
editRecord,
|
||||
deleteRecord,
|
||||
router,
|
||||
t
|
||||
}"
|
||||
/>
|
||||
<!-- 默认操作按钮 -->
|
||||
<GenericListPageActions
|
||||
v-else
|
||||
:row="row"
|
||||
:entity="entity"
|
||||
view-mode="card"
|
||||
@view="openDetail(row.name)"
|
||||
@edit="editRecord(row)"
|
||||
@delete="deleteRecord(row.name)"
|
||||
/>
|
||||
</div>
|
||||
<!-- 操作列覆盖组件（卡片视图） -->
|
||||
<component
|
||||
v-if="actionsComponent"
|
||||
:is="actionsComponent"
|
||||
:context="{
|
||||
row,
|
||||
entity,
|
||||
openDetail,
|
||||
editRecord,
|
||||
deleteRecord,
|
||||
router,
|
||||
t,
|
||||
viewMode: 'card'
|
||||
}"
|
||||
/>
|
||||
<!-- 默认操作按钮 -->
|
||||
<GenericListPageActions
|
||||
v-else
|
||||
:row="row"
|
||||
:entity="entity"
|
||||
view-mode="card"
|
||||
@view="openDetail(row.name)"
|
||||
@edit="editRecord(row)"
|
||||
@delete="deleteRecord(row.name)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="viewMode === 'card'" class="list-pagination">
|
||||
@ -227,32 +226,31 @@
|
||||
</template>
|
||||
<template v-else>{{ formatDisplayValue(row[col.key], col.key) }}</template>
|
||||
</div>
|
||||
<div class="col-actions">
|
||||
<!-- 操作列覆盖组件 -->
|
||||
<component
|
||||
v-if="actionsComponent"
|
||||
:is="actionsComponent"
|
||||
:context="{
|
||||
row,
|
||||
entity,
|
||||
openDetail,
|
||||
editRecord,
|
||||
deleteRecord,
|
||||
router,
|
||||
t
|
||||
}"
|
||||
/>
|
||||
<!-- 默认操作按钮 -->
|
||||
<GenericListPageActions
|
||||
v-else
|
||||
:row="row"
|
||||
:entity="entity"
|
||||
view-mode="list"
|
||||
@view="openDetail(row.name)"
|
||||
@edit="editRecord(row)"
|
||||
@delete="deleteRecord(row.name)"
|
||||
/>
|
||||
</div>
|
||||
<!-- 操作列覆盖组件 -->
|
||||
<component
|
||||
v-if="actionsComponent"
|
||||
:is="actionsComponent"
|
||||
:context="{
|
||||
row,
|
||||
entity,
|
||||
openDetail,
|
||||
editRecord,
|
||||
deleteRecord,
|
||||
router,
|
||||
t,
|
||||
viewMode: 'list'
|
||||
}"
|
||||
/>
|
||||
<!-- 默认操作按钮 -->
|
||||
<GenericListPageActions
|
||||
v-else
|
||||
:row="row"
|
||||
:entity="entity"
|
||||
view-mode="list"
|
||||
@view="openDetail(row.name)"
|
||||
@edit="editRecord(row)"
|
||||
@delete="deleteRecord(row.name)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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; }
|
||||
|
||||
/* 卡片视图操作按钮容器样式（为自定义操作组件提供 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;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
/* 注意：操作列的样式现在由 GenericListPageActions 组件和自定义操作组件自己管理 */
|
||||
/* 父组件不再定义 card-actions 和 col-actions 样式，符合组件自包含的最佳实践 */
|
||||
|
||||
/* 列表样式 - 与 AgentList 完全一致 */
|
||||
.col-checkbox {
|
||||
|
||||
@ -32,10 +32,9 @@ interface Emits {
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// 根据视图模式决定容器类名
|
||||
// 注意：卡片视图时父元素已经提供了 card-actions 容器和样式，所以只使用 col-actions
|
||||
// 根据视图模式决定容器类名，组件自包含所有样式
|
||||
const containerClass = computed(() => {
|
||||
return 'col-actions'
|
||||
return props.viewMode === 'card' ? 'actions-container card-actions' : 'actions-container col-actions'
|
||||
})
|
||||
|
||||
function handleView() {
|
||||
@ -52,14 +51,24 @@ function handleDelete() {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 列表视图操作按钮容器 - 卡片视图时由父元素的 card-actions 提供样式 */
|
||||
.col-actions {
|
||||
/* 操作按钮容器基础样式 */
|
||||
.actions-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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 {
|
||||
width: 28px;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<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')">
|
||||
<i class="fa fa-eye"></i>
|
||||
@ -32,7 +32,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
import axios from 'axios'
|
||||
import { get_session_api_headers } from '@/shared/api/auth'
|
||||
@ -46,9 +46,16 @@ const props = defineProps<{
|
||||
deleteRecord: (name: string) => void
|
||||
router: any
|
||||
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 executing = ref(false)
|
||||
|
||||
@ -128,14 +135,24 @@ async function handleFlowBuilder() {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 列表视图样式 - 只提供按钮排列，无背景 */
|
||||
.col-actions {
|
||||
/* 操作按钮容器基础样式 */
|
||||
.actions-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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 {
|
||||
width: 28px;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<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')">
|
||||
<i class="fa fa-eye"></i>
|
||||
@ -52,9 +52,16 @@ const props = defineProps<{
|
||||
deleteRecord: (name: string) => void
|
||||
router: any
|
||||
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 showSchemaEditor = ref(false)
|
||||
|
||||
@ -140,14 +147,24 @@ async function handleSchemaSave(schemaData: any) {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 列表视图样式 - 只提供按钮排列，无背景 */
|
||||
.col-actions {
|
||||
/* 操作按钮容器基础样式 */
|
||||
.actions-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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 {
|
||||
width: 28px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user