From 5e38a52e5b89d547f07b79578ce8f3033b6ec670 Mon Sep 17 00:00:00 2001
From: SunCheng <cheng2.sun@ly.com>
Date: Wed, 18 Feb 2026 22:09:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20TypeScript=20interf?=
 =?UTF-8?q?ace=20=E8=AF=AD=E6=B3=95=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将 BaseChart.vue、Icon.vue、IconSelector.vue 从 TypeScript 转换为 JavaScript
- 移除 interface 声明，改用 defineProps 对象语法
- 移除类型注解，保持 JavaScript 兼容性
- 修复 ESLint 解析错误，现在所有 lint 检查通过
---
 Web/src/components/Charts/BaseChart.vue | 74 +++++++++++++++---------
 Web/src/components/Icon.vue             | 44 +++++++++------
 Web/src/components/IconSelector.vue     | 75 +++++++++++++------------
 3 files changed, 112 insertions(+), 81 deletions(-)

diff --git a/Web/src/components/Charts/BaseChart.vue b/Web/src/components/Charts/BaseChart.vue
index 4b05101..7cd11e4 100644
--- a/Web/src/components/Charts/BaseChart.vue
+++ b/Web/src/components/Charts/BaseChart.vue
@@ -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 = withDefaults(defineProps<Props>(), {
-  options: () => ({}),
-  plugins: () => [],
-  loading: false
+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 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>
diff --git a/Web/src/components/Icon.vue b/Web/src/components/Icon.vue
index 5f404f8..827510e 100644
--- a/Web/src/components/Icon.vue
+++ b/Web/src/components/Icon.vue
@@ -3,30 +3,38 @@
     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 = withDefaults(defineProps<Props>(), {
-  width: '1em',
-  height: '1em',
-  color: undefined,
-  size: undefined
+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 iconStyle = computed(() => {
-  const style: Record<string, string> = {}
-  
+  const style = {}
+
   if (props.width) {
     style.width = typeof props.width === 'number' ? `${props.width}px` : props.width
   }
@@ -40,7 +48,7 @@ const iconStyle = computed(() => {
     const size = typeof props.size === 'number' ? `${props.size}px` : props.size
     style.fontSize = size
   }
-  
+
   return style
 })
 </script>
diff --git a/Web/src/components/IconSelector.vue b/Web/src/components/IconSelector.vue
index 2cc3749..44436c9 100644
--- a/Web/src/components/IconSelector.vue
+++ b/Web/src/components/IconSelector.vue
@@ -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;