fix: 模板仓库显示优化
This commit is contained in:
cuijiawang
parent
3e07e8f291
commit
b61798d143
@ -2,6 +2,7 @@
|
||||
import { ref, watch, onMounted, computed } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { Search, ArrowRight } from "@element-plus/icons-vue";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import {
|
||||
getAvailableTemplatesApi,
|
||||
getUserRepositoryListApi,
|
||||
@ -28,6 +29,7 @@ const loading = ref(false);
|
||||
const availableTemplates = ref<TemplateRepository[]>([]);
|
||||
const userTemplates = ref<TemplateRepository[]>([]);
|
||||
const searchKeyword = ref("");
|
||||
const activeTab = ref("all"); // 新增：当前选中的标签页
|
||||
const collapsedGroups = ref<Record<string, boolean>>({});
|
||||
const previewVisible = ref(false);
|
||||
const previewLoading = ref(false);
|
||||
@ -43,18 +45,59 @@ const dialogVisible = computed({
|
||||
set: val => emits("update:visible", val)
|
||||
});
|
||||
|
||||
// 计算各类型模板的启用数量
|
||||
const templateCounts = computed(() => {
|
||||
const allTemplates = availableTemplates.value;
|
||||
const systemTemplates = allTemplates.filter(
|
||||
t => t.templateSource === "system"
|
||||
);
|
||||
const userTemplates = allTemplates.filter(t => t.templateSource === "user");
|
||||
|
||||
return {
|
||||
all: {
|
||||
enabled: allTemplates.filter(t => t.isEnabled === 1).length,
|
||||
total: allTemplates.length
|
||||
},
|
||||
system: {
|
||||
enabled: systemTemplates.filter(t => t.isEnabled === 1).length,
|
||||
total: systemTemplates.length
|
||||
},
|
||||
user: {
|
||||
enabled: userTemplates.filter(t => t.isEnabled === 1).length,
|
||||
total: userTemplates.length
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
// 过滤后的可用模板
|
||||
const filteredAvailableTemplates = computed(() => {
|
||||
if (!searchKeyword.value) return availableTemplates.value;
|
||||
return availableTemplates.value.filter(
|
||||
template =>
|
||||
template.templateName
|
||||
.toLowerCase()
|
||||
.includes(searchKeyword.value.toLowerCase()) ||
|
||||
template.templateGroup
|
||||
.toLowerCase()
|
||||
.includes(searchKeyword.value.toLowerCase())
|
||||
);
|
||||
let templates = availableTemplates.value;
|
||||
|
||||
// 按标签页过滤
|
||||
if (activeTab.value === "system") {
|
||||
templates = templates.filter(
|
||||
template => template.templateSource === "system"
|
||||
);
|
||||
} else if (activeTab.value === "user") {
|
||||
templates = templates.filter(
|
||||
template => template.templateSource === "user"
|
||||
);
|
||||
}
|
||||
|
||||
// 按搜索关键词过滤
|
||||
if (searchKeyword.value) {
|
||||
templates = templates.filter(
|
||||
template =>
|
||||
template.templateName
|
||||
.toLowerCase()
|
||||
.includes(searchKeyword.value.toLowerCase()) ||
|
||||
template.templateGroup
|
||||
.toLowerCase()
|
||||
.includes(searchKeyword.value.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
return templates;
|
||||
});
|
||||
|
||||
// 按分组组织模板
|
||||
@ -296,6 +339,89 @@ watch(
|
||||
destroy-on-close
|
||||
>
|
||||
<div class="repository-dialog">
|
||||
<!-- 模板类型标签页 -->
|
||||
<div class="template-tabs mb-4">
|
||||
<el-tabs v-model="activeTab" class="custom-tabs">
|
||||
<el-tab-pane label="全部模板" name="all">
|
||||
<template #label>
|
||||
<span class="tab-label">
|
||||
<el-icon class="mr-1"
|
||||
><component :is="useRenderIcon('ep:grid')"
|
||||
/></el-icon>
|
||||
全部模板
|
||||
<span
|
||||
class="badge-text"
|
||||
:class="{
|
||||
'badge-success':
|
||||
templateCounts.all.enabled === templateCounts.all.total,
|
||||
'badge-warning':
|
||||
templateCounts.all.enabled > 0 &&
|
||||
templateCounts.all.enabled < templateCounts.all.total,
|
||||
'badge-info': templateCounts.all.enabled === 0
|
||||
}"
|
||||
>
|
||||
{{ templateCounts.all.enabled }}/{{
|
||||
templateCounts.all.total
|
||||
}}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="系统模板" name="system">
|
||||
<template #label>
|
||||
<span class="tab-label">
|
||||
<el-icon class="mr-1"
|
||||
><component :is="useRenderIcon('ep:cpu')"
|
||||
/></el-icon>
|
||||
系统模板
|
||||
<span
|
||||
class="badge-text"
|
||||
:class="{
|
||||
'badge-success':
|
||||
templateCounts.system.enabled ===
|
||||
templateCounts.system.total,
|
||||
'badge-warning':
|
||||
templateCounts.system.enabled > 0 &&
|
||||
templateCounts.system.enabled <
|
||||
templateCounts.system.total,
|
||||
'badge-info': templateCounts.system.enabled === 0
|
||||
}"
|
||||
>
|
||||
{{ templateCounts.system.enabled }}/{{
|
||||
templateCounts.system.total
|
||||
}}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="用户模板" name="user">
|
||||
<template #label>
|
||||
<span class="tab-label">
|
||||
<el-icon class="mr-1"
|
||||
><component :is="useRenderIcon('ep:user')"
|
||||
/></el-icon>
|
||||
用户模板
|
||||
<span
|
||||
class="badge-text"
|
||||
:class="{
|
||||
'badge-success':
|
||||
templateCounts.user.enabled === templateCounts.user.total,
|
||||
'badge-warning':
|
||||
templateCounts.user.enabled > 0 &&
|
||||
templateCounts.user.enabled < templateCounts.user.total,
|
||||
'badge-info': templateCounts.user.enabled === 0
|
||||
}"
|
||||
>
|
||||
{{ templateCounts.user.enabled }}/{{
|
||||
templateCounts.user.total
|
||||
}}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar mb-4">
|
||||
<el-input
|
||||
@ -367,7 +493,11 @@ watch(
|
||||
v-for="template in templates"
|
||||
:key="`${template.templateSource}-${template.templateId}`"
|
||||
class="template-item"
|
||||
:class="{ enabled: template.isEnabled === 1 }"
|
||||
:class="{
|
||||
enabled: template.isEnabled === 1,
|
||||
'system-template': template.templateSource === 'system',
|
||||
'user-template': template.templateSource === 'user'
|
||||
}"
|
||||
>
|
||||
<div class="template-content">
|
||||
<div class="template-header">
|
||||
@ -563,6 +693,85 @@ watch(
|
||||
}
|
||||
|
||||
.repository-dialog {
|
||||
.template-tabs {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.custom-tabs {
|
||||
:deep(.el-tabs__header) {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 2px solid var(--el-border-color-light);
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-wrap) {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item) {
|
||||
padding: 12px 20px;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-secondary);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
font-weight: 600;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-tabs__active-bar) {
|
||||
height: 3px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--el-color-primary),
|
||||
var(--el-color-primary-light-3)
|
||||
);
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
|
||||
.el-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.badge-text {
|
||||
min-width: 30px;
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.badge-success {
|
||||
color: var(--el-color-success);
|
||||
background-color: var(--el-color-success-light-9);
|
||||
border: 1px solid var(--el-color-success-light-7);
|
||||
}
|
||||
|
||||
&.badge-warning {
|
||||
color: var(--el-color-warning-dark-2);
|
||||
background-color: var(--el-color-warning-light-9);
|
||||
border: 1px solid var(--el-color-warning-light-7);
|
||||
}
|
||||
|
||||
&.badge-info {
|
||||
color: var(--el-text-color-secondary);
|
||||
background-color: var(--el-fill-color-light);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
@ -676,6 +885,54 @@ watch(
|
||||
border-color: var(--el-color-primary-light-6);
|
||||
}
|
||||
|
||||
// 系统模板特殊样式
|
||||
&.system-template {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--el-color-success),
|
||||
var(--el-color-success-light-3)
|
||||
);
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
.template-content {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 用户模板特殊样式
|
||||
&.user-template {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--el-color-primary),
|
||||
var(--el-color-primary-light-3)
|
||||
);
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
.template-content {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.template-content {
|
||||
.template-header {
|
||||
display: flex;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user