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
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:
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user