fix: 代码生成器 模板仓库ui优化
This commit is contained in:
cuijiawang
parent
61ae056134
commit
83bf3b5fd6
@ -215,37 +215,42 @@ watch(
|
||||
>
|
||||
<div class="template-content">
|
||||
<div class="template-header">
|
||||
<h4 class="template-name">{{ template.templateName }}</h4>
|
||||
<div class="template-badges">
|
||||
<el-tag
|
||||
:type="
|
||||
template.templateSource === 'system'
|
||||
? 'success'
|
||||
: 'info'
|
||||
"
|
||||
size="small"
|
||||
>
|
||||
{{
|
||||
template.templateSource === "system" ? "系统" : "用户"
|
||||
}}
|
||||
</el-tag>
|
||||
<el-tag
|
||||
:type="template.isEnabled === 1 ? 'success' : 'info'"
|
||||
size="small"
|
||||
>
|
||||
{{ template.isEnabled === 1 ? "显示中" : "已隐藏" }}
|
||||
</el-tag>
|
||||
<div class="template-info">
|
||||
<h4 class="template-name" :title="template.templateName">
|
||||
{{ template.templateName }}
|
||||
</h4>
|
||||
<div class="template-badges">
|
||||
<el-tag
|
||||
:type="
|
||||
template.templateSource === 'system'
|
||||
? 'success'
|
||||
: 'info'
|
||||
"
|
||||
size="small"
|
||||
>
|
||||
{{
|
||||
template.templateSource === "system"
|
||||
? "系统"
|
||||
: "用户"
|
||||
}}
|
||||
</el-tag>
|
||||
<el-tag
|
||||
:type="template.isEnabled === 1 ? 'success' : 'info'"
|
||||
size="small"
|
||||
>
|
||||
{{ template.isEnabled === 1 ? "显示中" : "已隐藏" }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="template-actions">
|
||||
<el-button
|
||||
:type="template.isEnabled === 1 ? 'warning' : 'primary'"
|
||||
size="small"
|
||||
@click="toggleTemplate(template)"
|
||||
>
|
||||
{{ template.isEnabled === 1 ? "隐藏" : "显示" }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="template-actions">
|
||||
<el-button
|
||||
:type="template.isEnabled === 1 ? 'warning' : 'primary'"
|
||||
size="small"
|
||||
@click="toggleTemplate(template)"
|
||||
>
|
||||
{{ template.isEnabled === 1 ? "隐藏" : "显示" }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -270,70 +275,142 @@ watch(
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 响应式设计
|
||||
@media (width <= 768px) {
|
||||
.repository-dialog {
|
||||
.template-groups {
|
||||
.template-group {
|
||||
.template-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.repository-dialog {
|
||||
.search-bar {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.template-groups {
|
||||
.template-group {
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 4px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.template-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 12px;
|
||||
|
||||
.template-item {
|
||||
padding: 16px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
background: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary-light-5);
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&.enabled {
|
||||
background: var(--el-color-primary-light-9);
|
||||
border-color: var(--el-color-primary-light-7);
|
||||
border-color: var(--el-color-primary-light-6);
|
||||
}
|
||||
|
||||
.template-content {
|
||||
.template-header {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.template-name {
|
||||
.template-info {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
margin-right: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
min-width: 0; // 允许内容收缩
|
||||
|
||||
.template-name {
|
||||
margin: 0 0 6px;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
color: var(--el-text-color-primary);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.template-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
|
||||
.el-tag {
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.template-badges {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
.template-actions {
|
||||
flex-shrink: 0;
|
||||
|
||||
.template-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
.el-button {
|
||||
height: 26px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
|
||||
&.el-button--primary {
|
||||
background-color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-color-primary-light-3);
|
||||
border-color: var(--el-color-primary-light-3);
|
||||
}
|
||||
}
|
||||
|
||||
&.el-button--warning {
|
||||
background-color: var(--el-color-warning);
|
||||
border-color: var(--el-color-warning);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-color-warning-light-3);
|
||||
border-color: var(--el-color-warning-light-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -345,7 +422,8 @@ watch(
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 200px;
|
||||
min-height: 160px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -353,5 +431,37 @@ watch(
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
padding-top: 16px;
|
||||
margin-top: 16px;
|
||||
border-top: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
// 优化对话框整体样式
|
||||
:deep(.el-dialog) {
|
||||
.el-dialog__header {
|
||||
padding: 16px 20px 12px;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
max-height: 70vh;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 12px 20px 16px;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 优化加载状态
|
||||
.el-loading-mask {
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user