8 changed files with 962 additions and 75 deletions
@ -0,0 +1,172 @@ |
|||
<template> |
|||
<el-dialog |
|||
title="选择图标" |
|||
:visible.sync="dialogVisible" |
|||
width="600px" |
|||
:modal="true" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
class="icon-select-dialog" |
|||
> |
|||
<div class="icon-grid"> |
|||
<div |
|||
v-for="item in availableIcons" |
|||
:key="item.id" |
|||
class="icon-item" |
|||
:class="{ selected: selectedIcons.includes(item.id) }" |
|||
@click="toggleIcon(item)" |
|||
> |
|||
<i :class="item.icon"></i> |
|||
<span class="icon-name">{{ item.name }}</span> |
|||
<div v-if="selectedIcons.includes(item.id)" class="check-icon"> |
|||
<i class="el-icon-check"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="dialogVisible = false" size="small">取消</el-button> |
|||
<el-button type="primary" @click="confirmAdd" size="small">确定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'IconSelectDialog', |
|||
props: { |
|||
visible: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
availableIcons: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
existingIcons: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
selectedIcons: [] |
|||
} |
|||
}, |
|||
computed: { |
|||
dialogVisible: { |
|||
get() { |
|||
return this.visible |
|||
}, |
|||
set(val) { |
|||
this.$emit('update:visible', val) |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
visible(newVal) { |
|||
if (newVal) { |
|||
this.selectedIcons = [] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
toggleIcon(item) { |
|||
const index = this.selectedIcons.indexOf(item.id) |
|||
if (index > -1) { |
|||
this.selectedIcons.splice(index, 1) |
|||
} else { |
|||
this.selectedIcons.push(item.id) |
|||
} |
|||
}, |
|||
|
|||
confirmAdd() { |
|||
const selectedItems = this.availableIcons.filter(item => |
|||
this.selectedIcons.includes(item.id) |
|||
) |
|||
this.$emit('confirm', selectedItems) |
|||
this.dialogVisible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.icon-select-dialog >>> .el-dialog__body { |
|||
padding: 20px; |
|||
} |
|||
|
|||
.icon-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); |
|||
gap: 15px; |
|||
max-height: 400px; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.icon-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 15px 10px; |
|||
border: 2px solid #E4E7ED; |
|||
border-radius: 8px; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
position: relative; |
|||
background: white; |
|||
} |
|||
|
|||
.icon-item:hover { |
|||
border-color: #008aff; |
|||
background: rgba(0, 138, 255, 0.05); |
|||
transform: translateY(-2px); |
|||
box-shadow: 0 4px 12px rgba(0, 138, 255, 0.15); |
|||
} |
|||
|
|||
.icon-item.selected { |
|||
border-color: #008aff; |
|||
background: rgba(0, 138, 255, 0.1); |
|||
} |
|||
|
|||
.icon-item i { |
|||
font-size: 28px; |
|||
color: #555; |
|||
margin-bottom: 8px; |
|||
transition: color 0.3s; |
|||
} |
|||
|
|||
.icon-item:hover i, |
|||
.icon-item.selected i { |
|||
color: #008aff; |
|||
} |
|||
|
|||
.icon-name { |
|||
font-size: 12px; |
|||
color: #606266; |
|||
text-align: center; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.check-icon { |
|||
position: absolute; |
|||
top: 5px; |
|||
right: 5px; |
|||
width: 20px; |
|||
height: 20px; |
|||
border: 2px solid #008aff; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #008aff; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.dialog-footer { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
gap: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,197 @@ |
|||
<template> |
|||
<div v-if="value" class="page-layout-dialog"> |
|||
<div class="dialog-content"> |
|||
<div class="dialog-header"> |
|||
<h3>页面布局</h3> |
|||
<div class="close-btn" @click="closeDialog">×</div> |
|||
</div> |
|||
|
|||
<div class="dialog-body"> |
|||
<div class="position-options"> |
|||
<div |
|||
v-for="option in positionOptions" |
|||
:key="option.value" |
|||
class="position-option" |
|||
:class="{ active: selectedPosition === option.value }" |
|||
@click="selectPosition(option.value)" |
|||
> |
|||
<i :class="option.icon"></i> |
|||
<span>{{ option.label }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="dialog-footer"> |
|||
<el-button @click="closeDialog" size="small">取消</el-button> |
|||
<el-button type="primary" @click="saveLayout" size="small">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'PageLayoutDialog', |
|||
props: { |
|||
value: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
selectedPosition: 'left', |
|||
positionOptions: [ |
|||
{ value: 'top', label: '顶部', icon: 'el-icon-top' }, |
|||
{ value: 'bottom', label: '底部', icon: 'el-icon-bottom' }, |
|||
{ value: 'left', label: '左侧', icon: 'el-icon-back' }, |
|||
{ value: 'right', label: '右侧', icon: 'el-icon-right' } |
|||
] |
|||
}; |
|||
}, |
|||
watch: { |
|||
value(newVal) { |
|||
if (newVal) { |
|||
this.selectedPosition = this.$parent.menuPosition || 'left'; |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
selectPosition(position) { |
|||
this.selectedPosition = position; |
|||
}, |
|||
closeDialog() { |
|||
this.$emit('input', false); |
|||
}, |
|||
saveLayout() { |
|||
this.$emit('save', this.selectedPosition); |
|||
this.closeDialog(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.page-layout-dialog { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 1000; |
|||
display: flex; |
|||
align-items: flex-start; |
|||
justify-content: center; |
|||
padding-top: 100px; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.dialog-content { |
|||
position: relative; |
|||
background: white; |
|||
border-radius: 8px; |
|||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); |
|||
width: 300px; |
|||
animation: dialog-fade-in 0.3s ease; |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
@keyframes dialog-fade-in { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(-20px); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.dialog-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 12px 16px; |
|||
border-bottom: 1px solid #e8e8e8; |
|||
} |
|||
|
|||
.dialog-header h3 { |
|||
margin: 0; |
|||
font-size: 14px; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.close-btn { |
|||
font-size: 18px; |
|||
color: #999; |
|||
cursor: pointer; |
|||
transition: color 0.3s; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.close-btn:hover { |
|||
color: #666; |
|||
} |
|||
|
|||
.dialog-body { |
|||
padding: 16px; |
|||
} |
|||
|
|||
.position-options { |
|||
display: grid; |
|||
grid-template-columns: repeat(2, 1fr); |
|||
gap: 10px; |
|||
} |
|||
|
|||
.position-option { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 15px 10px; |
|||
border: 1px solid #e8e8e8; |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
background: white; |
|||
} |
|||
|
|||
.position-option:hover { |
|||
border-color: #008aff; |
|||
background: rgba(0, 138, 255, 0.05); |
|||
transform: translateY(-2px); |
|||
box-shadow: 0 2px 8px rgba(0, 138, 255, 0.15); |
|||
} |
|||
|
|||
.position-option.active { |
|||
border-color: #008aff; |
|||
background: rgba(0, 138, 255, 0.1); |
|||
} |
|||
|
|||
.position-option i { |
|||
font-size: 24px; |
|||
color: #555; |
|||
margin-bottom: 6px; |
|||
transition: color 0.3s; |
|||
} |
|||
|
|||
.position-option:hover i, |
|||
.position-option.active i { |
|||
color: #008aff; |
|||
} |
|||
|
|||
.position-option span { |
|||
font-size: 13px; |
|||
color: #606266; |
|||
} |
|||
|
|||
.dialog-footer { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
padding: 12px 16px; |
|||
border-top: 1px solid #e8e8e8; |
|||
gap: 8px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue