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

@@ -1,10 +1,22 @@
<template>
<div class="base-chart" ref="chartContainer">
<van-loading v-if="loading" size="24px" vertical>加载中...</van-loading>
<van-empty v-else-if="isEmpty" description="暂无数据" />
<div
ref="chartContainer"
class="base-chart"
>
<van-loading
v-if="loading"
size="24px"
vertical
>
加载中...
</van-loading>
<van-empty
v-else-if="isEmpty"
description="暂无数据"
/>
<component
v-else
:is="chartComponent"
v-else
:data="data"
:options="mergedOptions"
:plugins="chartPlugins"
@@ -13,8 +25,8 @@
</div>
</template>
<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { Line, Bar, Pie, Doughnut } from 'vue-chartjs'
import {
Chart as ChartJS,
@@ -45,25 +57,33 @@ ChartJS.register(
Filler
)
interface Props {
type: 'line' | 'bar' | 'pie' | 'doughnut'
data: any
options?: any
plugins?: any[]
loading?: boolean
const props = defineProps({
type: {
type: String,
required: true,
validator: (value) => ['line', 'bar', 'pie', 'doughnut'].includes(value)
},
data: {
type: Object,
required: true
},
options: {
type: Object,
default: () => ({})
},
plugins: {
type: Array,
default: () => []
},
loading: {
type: Boolean,
default: false
}
const props = withDefaults(defineProps<Props>(), {
options: () => ({}),
plugins: () => [],
loading: false
})
const emit = defineEmits<{
(e: 'chart:render', chart: any): void
}>()
const emit = defineEmits(['chart:render'])
const chartContainer = ref<HTMLDivElement>()
const chartContainer = ref()
const { getChartOptions } = useChartTheme()
// 图表组件映射
@@ -79,8 +99,8 @@ const chartComponent = computed(() => {
// 检查是否为空数据
const isEmpty = computed(() => {
if (!props.data || !props.data.datasets) return true
return props.data.datasets.length === 0 || props.data.datasets.every((ds: any) => !ds.data || ds.data.length === 0)
if (!props.data || !props.data.datasets) {return true}
return props.data.datasets.length === 0 || props.data.datasets.every((ds) => !ds.data || ds.data.length === 0)
})
// 合并配置项
@@ -94,10 +114,10 @@ const chartPlugins = computed(() => {
})
// 响应式处理:监听容器大小变化
let resizeObserver: ResizeObserver | null = null
let resizeObserver = null
onMounted(() => {
if (!chartContainer.value) return
if (!chartContainer.value) {return}
resizeObserver = new ResizeObserver(() => {
// Chart.js 会自动处理 resize这里只是确保容器正确
@@ -114,7 +134,7 @@ onUnmounted(() => {
})
// 图表渲染完成回调
const onChartRender = (chart: any) => {
const onChartRender = (chart) => {
emit('chart:render', chart)
}
</script>

View File

@@ -3,29 +3,37 @@
class="iconify"
:data-icon="iconIdentifier"
:style="iconStyle"
></span>
/>
</template>
<script setup lang="ts">
<script setup>
import { computed } from 'vue'
interface Props {
iconIdentifier: string
width?: string | number
height?: string | number
color?: string
size?: string | number
const props = defineProps({
iconIdentifier: {
type: String,
required: true
},
width: {
type: [String, Number],
default: '1em'
},
height: {
type: [String, Number],
default: '1em'
},
color: {
type: String,
default: undefined
},
size: {
type: [String, Number],
default: undefined
}
const props = withDefaults(defineProps<Props>(), {
width: '1em',
height: '1em',
color: undefined,
size: undefined
})
const iconStyle = computed(() => {
const style: Record<string, string> = {}
const style = {}
if (props.width) {
style.width = typeof props.width === 'number' ? `${props.width}px` : props.width

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
const props = defineProps({
show: {
type: Boolean,
required: true
},
icons: {
type: Array,
required: true
},
title: {
type: String,
default: '选择图标'
},
defaultIconIdentifier: {
type: String,
default: ''
}
interface Props {
show: boolean
icons: Icon[]
title?: string
defaultIconIdentifier?: string
}
const props = withDefaults(defineProps<Props>(), {
title: '选择图标',
defaultIconIdentifier: ''
})
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)
@@ -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
}