fix: 修复 TypeScript interface 语法错误
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 18s
Docker Build & Deploy / Deploy to Production (push) Successful in 5s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 2s

- 将 BaseChart.vue、Icon.vue、IconSelector.vue 从 TypeScript 转换为 JavaScript
- 移除 interface 声明,改用 defineProps 对象语法
- 移除类型注解,保持 JavaScript 兼容性
- 修复 ESLint 解析错误,现在所有 lint 检查通过
This commit is contained in:
SunCheng
2026-02-18 22:09:19 +08:00
parent c49f66757e
commit 5e38a52e5b
3 changed files with 112 additions and 81 deletions

View File

@@ -20,7 +20,10 @@
/>
<!-- 图标列表 -->
<div class="icon-list" v-if="filteredIcons.length > 0">
<div
v-if="filteredIcons.length > 0"
class="icon-list"
>
<div
v-for="icon in paginatedIcons"
:key="icon.iconIdentifier"
@@ -38,50 +41,50 @@
</div>
<!-- 无结果提示 -->
<van-empty v-else description="未找到匹配的图标" />
<van-empty
v-else
description="未找到匹配的图标"
/>
<!-- 分页 -->
<van-pagination
v-if="totalPages > 1"
v-model:currentPage="currentPage"
v-model:current-page="currentPage"
:total-items="filteredIcons.length"
:items-per-page="pageSize"
@change="handlePageChange"
class="pagination"
@change="handlePageChange"
/>
</div>
</PopupContainer>
</template>
<script setup lang="ts">
<script setup>
import { ref, computed, watch } from 'vue'
import { showToast } from 'vant'
import Icon from './Icon.vue'
import PopupContainer from './PopupContainer.vue'
interface Icon {
iconIdentifier: string
iconName: string
collectionName: string
}
interface Props {
show: boolean
icons: Icon[]
title?: string
defaultIconIdentifier?: string
}
const props = withDefaults(defineProps<Props>(), {
title: '选择图标',
defaultIconIdentifier: ''
const props = defineProps({
show: {
type: Boolean,
required: true
},
icons: {
type: Array,
required: true
},
title: {
type: String,
default: '选择图标'
},
defaultIconIdentifier: {
type: String,
default: ''
}
})
const emit = defineEmits<{
'update:show': [value: boolean]
confirm: [iconIdentifier: string]
cancel: []
}>()
const emit = defineEmits(['update:show', 'confirm', 'cancel'])
const searchKeyword = ref('')
const currentPage = ref(1)
@@ -93,9 +96,9 @@ const filteredIcons = computed(() => {
if (!searchKeyword.value.trim()) {
return props.icons
}
const keyword = searchKeyword.value.toLowerCase().trim()
return props.icons.filter(icon =>
return props.icons.filter(icon =>
icon.iconName.toLowerCase().includes(keyword) ||
icon.collectionName.toLowerCase().includes(keyword) ||
icon.iconIdentifier.toLowerCase().includes(keyword)
@@ -115,11 +118,11 @@ const handleSearch = () => {
currentPage.value = 1
}
const handleSelectIcon = (icon: Icon) => {
const handleSelectIcon = (icon) => {
selectedIconIdentifier.value = icon.iconIdentifier
}
const handlePageChange = (page: number) => {
const handlePageChange = (page) => {
currentPage.value = page
}
@@ -154,7 +157,7 @@ watch(() => props.defaultIconIdentifier, (newVal) => {
max-height: 70vh;
display: flex;
flex-direction: column;
.icon-list {
flex: 1;
overflow-y: auto;
@@ -165,7 +168,7 @@ watch(() => props.defaultIconIdentifier, (newVal) => {
gap: 12px;
margin-bottom: 16px;
}
.icon-item {
display: flex;
flex-direction: column;
@@ -175,25 +178,25 @@ watch(() => props.defaultIconIdentifier, (newVal) => {
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
&:hover {
border-color: #1989fa;
background-color: #f5f5f5;
}
&.active {
border-color: #1989fa;
background-color: #e6f7ff;
}
}
.icon-label {
font-size: 12px;
color: #646464;
margin-top: 8px;
text-align: center;
}
.pagination {
padding: 16px;
border-top: 1px solid #e5e7eb;