[Dashboard] 代码质量问题 - @ts-ignore & 重复逻辑 & 图标路径 #7

New Issue

tangweijie · 2026-01-18T17:08:16+08:00

tangweijie commented

2026-01-18 17:08:16 +08:00

问题描述

Dashboard 前端代码存在以下质量问题：

1. 大量使用 @ts-ignore

位置: frontend/src/views/Dashboard/Index.vue:92-103

// @ts-ignore
import GaugeChart from './components/GaugeChart.vue'
// @ts-ignore
import BarChart from './components/BarChart.vue'
// @ts-ignore
import InfoCard from './components/InfoCard/Index.vue'
// @ts-ignore
import ScoreAssessment from './components/ScoreAssessment/Index.vue'
// @ts-ignore
import RecentRewardsPunishments from './components/RecentRewardsPunishments/Index.vue'
// @ts-ignore
import ConsumptionRecords from './components/ConsumptionRecords/Index.vue'

5处 @ts-ignore 掩盖了类型问题，应修复组件的导出类型声明。

2. loadData 函数重复赋值逻辑

位置: frontend/src/views/Dashboard/Index.vue:225-303

loadData 函数中存在大量重复的数据赋值逻辑，代码冗余且难以维护。

centerLeftData.value = {
  top: {
    value: res.centerLeftData.topValue || '0',
    label: res.centerLeftData.topLabel || ''
  },
  // ... 重复的结构
}

3. 图标文件路径可能错误

位置: frontend/src/views/Dashboard/Index.vue:451

.icon-car {
  background: url('@/assets/imgs/dashboard/icon-card.svg') no-repeat center center;
}

.icon-car CSS 类引用了 icon-card.svg，类名与图标名不一致，需确认文件是否存在。

4. SCSS 缺少注释分隔

位置: frontend/src/views/Dashboard/Index.vue:338-561

样式代码缺少按功能区块的注释分隔，样式较多时难以阅读和维护。

修复建议

// 1. 创建类型声明文件或修复组件导出
// types/dashboard/index.d.ts
declare module './components/GaugeChart.vue' {
  import { defineComponent } from 'vue'
  export default defineComponent({
    props: {
      height: String,
      value: Number,
      name: String
    }
  })
}

// 2. 提取辅助函数
const updateCenterData = (source: CenterData, target: Ref<CenterData>) => {
  target.value = {
    top: { value: source.topValue || '0', label: source.topLabel || '' },
    middle: {
      left: { value: source.middleLeftValue || '0', label: source.middleLeftLabel || '' },
      right: { value: source.middleRightValue || '0', label: source.middleRightLabel || '' }
    },
    bottom: { value: source.bottomValue || '0', label: source.bottomLabel || '' }
  }
}

// 3. 确认并修正图标路径
.icon-car {
  background: url('@/assets/imgs/dashboard/icon-car.svg') no-repeat center center; // 或修改类名为 icon-card
}

// 4. 添加 SCSS 注释分隔
/* 顶部区域 */
.dashboard-content-top { ... }

/* 底部区域 */
.dashboard-content-bottom { ... }

影响范围

安全性：无
用户体验：无
代码可维护性：高

修复优先级

P1 - 近期修复

相关信息

文件: frontend/src/views/Dashboard/Index.vue
审查时间: 2026-01-18
代码行数: 562 行

## 问题描述 Dashboard 前端代码存在以下质量问题： ### 1. 大量使用 @ts-ignore **位置**: `frontend/src/views/Dashboard/Index.vue:92-103` ```javascript // @ts-ignore import GaugeChart from './components/GaugeChart.vue' // @ts-ignore import BarChart from './components/BarChart.vue' // @ts-ignore import InfoCard from './components/InfoCard/Index.vue' // @ts-ignore import ScoreAssessment from './components/ScoreAssessment/Index.vue' // @ts-ignore import RecentRewardsPunishments from './components/RecentRewardsPunishments/Index.vue' // @ts-ignore import ConsumptionRecords from './components/ConsumptionRecords/Index.vue' ``` 5处 `@ts-ignore` 掩盖了类型问题，应修复组件的导出类型声明。 ### 2. loadData 函数重复赋值逻辑 **位置**: `frontend/src/views/Dashboard/Index.vue:225-303` `loadData` 函数中存在大量重复的数据赋值逻辑，代码冗余且难以维护。 ```javascript centerLeftData.value = { top: { value: res.centerLeftData.topValue || '0', label: res.centerLeftData.topLabel || '' }, // ... 重复的结构 } ``` ### 3. 图标文件路径可能错误 **位置**: `frontend/src/views/Dashboard/Index.vue:451` ```css .icon-car { background: url('@/assets/imgs/dashboard/icon-card.svg') no-repeat center center; } ``` `.icon-car` CSS 类引用了 `icon-card.svg`，类名与图标名不一致，需确认文件是否存在。 ### 4. SCSS 缺少注释分隔 **位置**: `frontend/src/views/Dashboard/Index.vue:338-561` 样式代码缺少按功能区块的注释分隔，样式较多时难以阅读和维护。 --- ## 修复建议 ```typescript // 1. 创建类型声明文件或修复组件导出 // types/dashboard/index.d.ts declare module './components/GaugeChart.vue' { import { defineComponent } from 'vue' export default defineComponent({ props: { height: String, value: Number, name: String } }) } // 2. 提取辅助函数 const updateCenterData = (source: CenterData, target: Ref<CenterData>) => { target.value = { top: { value: source.topValue || '0', label: source.topLabel || '' }, middle: { left: { value: source.middleLeftValue || '0', label: source.middleLeftLabel || '' }, right: { value: source.middleRightValue || '0', label: source.middleRightLabel || '' } }, bottom: { value: source.bottomValue || '0', label: source.bottomLabel || '' } } } // 3. 确认并修正图标路径 .icon-car { background: url('@/assets/imgs/dashboard/icon-car.svg') no-repeat center center; // 或修改类名为 icon-card } // 4. 添加 SCSS 注释分隔 /* 顶部区域 */ .dashboard-content-top { ... } /* 底部区域 */ .dashboard-content-bottom { ... } ``` --- ## 影响范围 - 安全性：无 - 用户体验：无 - 代码可维护性：高 --- ## 修复优先级 **P1 - 近期修复** --- ## 相关信息 - 文件: `frontend/src/views/Dashboard/Index.vue` - 审查时间: 2026-01-18 - 代码行数: 562 行

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: tangweijie/xlcp-frontend#7