aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 从图片库/收藏选择图片组件的已选图片图标更换

Browse Source
This commit is contained in:
zhangyh
2025-09-26 11:28:25 +08:00
parent c3d7cbcc83
commit 6e2da909b0
3 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/icon/selected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 582 B

9
src/component/Canvas/ExistsImageList/index.vue
View File

@@ -56,9 +56,14 @@
<span class="image-name">{{ item.name || "未命名" }}</span> <span class="image-name">{{ item.name || "未命名" }}</span>
</div> </div>
</div> </div>
<div class="image-select" v-show="selectList.includes(item.url)"> <!-- <div class="image-select" v-show="selectList.includes(item.url)">
<i class="fi fi-sr-check-circle"></i> <i class="fi fi-sr-check-circle"></i>
</div> </div> -->
<img
src="@/assets/images/icon/selected.png"
class="image-select"
v-show="selectList.includes(item.url)"
>
</div> </div>
</div> </div>

27
src/component/common/SelectImages.vue
View File

@@ -38,9 +38,10 @@
<span class="image-name">{{ item.name || '未命名' }}</span> <span class="image-name">{{ item.name || '未命名' }}</span>
</div> </div>
</div> </div>
<div class="image-select" v-show="selectList.includes(item.url)"> <img class="selected-icon image-select" src="@/assets/images/icon/selected.png" v-show="selectList.includes(item.url)">
<!-- <div class="" v-show="selectList.includes(item.url)">
<i class="fi fi-sr-check-circle"></i> <i class="fi fi-sr-check-circle"></i>
</div> </div> -->
</div> </div>
</div> </div>
@@ -242,8 +243,8 @@ const resetAndLoad = (category = selectedCategory.value) => {
list.value = [] list.value = []
hasMore.value = true hasMore.value = true
currentPage.value = 0 currentPage.value = 0
console.log('默认选择----',getDefaultCategory()) // console.log('默认选择----',getDefaultCategory())
selectedCategory.value = getDefaultCategory() selectedCategory.value =category || getDefaultCategory()
fetchImages(1, category, true) fetchImages(1, category, true)
// 检查是否需要自动加载更多数据 // 检查是否需要自动加载更多数据
@@ -280,6 +281,7 @@ const handleImageClick = item => {
// 处理分类切换 // 处理分类切换
const handleChangeCategory = category => { const handleChangeCategory = category => {
// console.log('handleChangeCategory',category)
selectedCategory.value = category selectedCategory.value = category
// 如果提供了API，则重新加载数据 // 如果提供了API，则重新加载数据
@@ -508,8 +510,9 @@ defineExpose({
overflow-y: auto; overflow-y: auto;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
gap: 16px; gap: 16px;
min-height: 20rem; min-height: 22rem;
max-height: 50rem; max-height: 50rem;
padding-bottom: 2rem;
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
@@ -574,12 +577,16 @@ defineExpose({
.image-select { .image-select {
position: absolute; position: absolute;
bottom: 0; bottom: -1.25rem;
right: 0; right: -1.25rem;
z-index: 2; z-index: 2;
transform: translate(50%, 50%); // transform: translate(50%, 50%);
i { // i {
font-size: 2.5rem; // font-size: 2.5rem;
// }
&.selected-icon{
width:2.5rem;
height: 2.5rem;
} }
} }