Vue3+TypeScript智能数据分析平台开发实战：从数据可视化到AI集成全流程

发布日期：2024年9月20日

一、平台架构设计

本教程将构建一个智能数据分析平台，包含以下核心模块：

数据可视化：百万级数据渲染优化
AI集成：TensorFlow.js预测模型
实时数据：WebSocket+Web Workers
权限系统：细粒度访问控制
主题引擎：动态主题切换

技术栈：Vue3 + TypeScript + Pinia + ECharts + TensorFlow.js

二、项目初始化与配置

1. 创建TypeScript项目

# 使用Vite创建Vue3项目
npm create vite@latest data-platform --template vue-ts
cd data-platform

# 安装核心依赖
npm install pinia echarts @tensorflow/tfjs axios
npm install -D @types/node

2. 目录结构规划

src/
├── apis/              # 接口服务
├── assets/            # 静态资源
├── components/        # 公共组件
│   ├── charts/        # 图表组件
│   └── ai/            # AI组件
├── composables/       # 组合式函数
├── layouts/           # 布局组件
├── router/            # 路由配置
├── stores/            # Pinia状态
│   ├── data/          # 数据状态
│   └── user/          # 用户状态
├── types/             # 类型定义
├── utils/             # 工具函数
├── views/             # 页面组件
│   ├── dashboard/     # 仪表盘
│   └── analysis/      # 分析页面
├── App.vue
└── main.ts

三、百万级数据可视化

1. 大数据表格组件

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useVirtualList } from '@vueuse/core'

const props = defineProps<{
  data: any[]
  columns: { key: string; title: string }[]
}>()

const containerRef = ref<HTMLElement>()
const { list, containerProps, wrapperProps } = useVirtualList(
  props.data,
  {
    itemHeight: 48,
    overscan: 10
  }
)
</script>

<template>
  <div ref="containerRef" v-bind="containerProps" class="virtual-table">
    <table>
      <thead>
        <tr>
          <th v-for="col in columns" :key="col.key">{{ col.title }}</th>
        </tr>
      </thead>
      <tbody v-bind="wrapperProps">
        <tr v-for="item in list" :key="item.index">
          <td v-for="col in columns" :key="col.key">
            {{ item.data[col.key] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

2. Web Workers数据处理

// src/composables/useDataProcessor.ts
import { ref } from 'vue'

export function useDataProcessor() {
  const processedData = ref<any[]>([])
  
  const processLargeData = (rawData: any[]) => {
    const worker = new Worker(new URL('../workers/dataProcessor.js', import.meta.url))
    
    worker.postMessage(rawData)
    
    worker.onmessage = (e) => {
      processedData.value = e.data
      worker.terminate()
    }
  }
  
  return { processedData, processLargeData }
}

// src/workers/dataProcessor.js
self.onmessage = function(e) {
  const result = e.data.map(item => {
    // 复杂数据处理逻辑
    return {
      ...item,
      calculatedValue: heavyCalculation(item)
    }
  })
  self.postMessage(result)
}

function heavyCalculation(item) {
  // 模拟复杂计算
}

四、TensorFlow.js集成

1. 预测模型组件

<script setup lang="ts">
import * as tf from '@tensorflow/tfjs'
import { onMounted, ref } from 'vue'

const props = defineProps<{
  inputData: number[]
}>()

const prediction = ref<number>(0)
const isModelLoaded = ref(false)

let model: tf.LayersModel

async function loadModel() {
  model = await tf.loadLayersModel('/models/price-prediction/model.json')
  isModelLoaded.value = true
}

function makePrediction() {
  if (!isModelLoaded.value) return
  
  const inputTensor = tf.tensor2d([props.inputData])
  const outputTensor = model.predict(inputTensor) as tf.Tensor
  prediction.value = outputTensor.dataSync()[0]
}

defineExpose({ makePrediction })

onMounted(loadModel)
</script>

<template>
  <div class="prediction-container">
    <div v-if="isModelLoaded">
      <button @click="makePrediction">执行预测</button>
      <div class="prediction-result">预测结果: {{ prediction }}</div>
    </div>
    <div v-else>模型加载中...</div>
  </div>
</template>

五、实时数据流处理

1. WebSocket服务封装

// src/composables/useWebSocket.ts
import { ref, onUnmounted } from 'vue'

interface WebSocketOptions {
  onMessage: (data: any) => void
  onError?: (error: Event) => void
}

export function useWebSocket(url: string, options: WebSocketOptions) {
  const socket = ref<WebSocket | null>(null)
  const isConnected = ref(false)
  
  const connect = () => {
    socket.value = new WebSocket(url)
    
    socket.value.onopen = () => {
      isConnected.value = true
    }
    
    socket.value.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data)
        options.onMessage(data)
      } catch (err) {
        console.error('消息解析失败:', err)
      }
    }
    
    socket.value.onerror = (error) => {
      options.onError?.(error)
    }
    
    socket.value.onclose = () => {
      isConnected.value = false
    }
  }
  
  const send = (data: any) => {
    if (socket.value?.readyState === WebSocket.OPEN) {
      socket.value.send(JSON.stringify(data))
    }
  }
  
  onUnmounted(() => {
    socket.value?.close()
  })
  
  return { socket, isConnected, connect, send }
}

2. 实时图表组件

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { useWebSocket } from '../composables/useWebSocket'

const chartRef = ref<HTMLElement>()
const chart = ref<echarts.ECharts>()
const data = ref<number[]>([])

const { connect } = useWebSocket('ws://realtime-data', {
  onMessage: (msg) => {
    data.value = [...data.value.slice(-100), msg.value]
  }
})

onMounted(() => {
  chart.value = echarts.init(chartRef.value)
  connect()
})

watch(data, (newData) => {
  chart.value?.setOption({
    xAxis: { type: 'category' },
    yAxis: { type: 'value' },
    series: [{
      data: newData,
      type: 'line',
      smooth: true
    }]
  })
})
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>

六、细粒度权限控制

1. 权限指令实现

// src/directives/permission.ts
import type { Directive } from 'vue'
import { useUserStore } from '@/stores/user'

export const permission: Directive = {
  mounted(el, binding) {
    const userStore = useUserStore()
    const { value } = binding
    
    if (value && Array.isArray(value)) {
      const hasPermission = value.some(permission => 
        userStore.permissions.includes(permission)
      )
      
      if (!hasPermission) {
        el.parentNode?.removeChild(el)
      }
    } else {
      console.error('需要权限数组，例如 v-permission="['admin']"')
    }
  }
}

// main.ts
import { permission } from './directives/permission'
app.directive('permission', permission)

2. 动态路由配置

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores/user'

const publicRoutes = [
  { path: '/login', component: () => import('@/views/Login.vue') }
]

const dynamicRoutes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { permissions: ['view_dashboard'] }
  },
  {
    path: '/analysis',
    component: () => import('@/views/Analysis.vue'),
    meta: { permissions: ['view_analysis'] }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes: publicRoutes
})

export function setupRouter() {
  const userStore = useUserStore()
  
  // 动态添加路由
  dynamicRoutes.forEach(route => {
    if (route.meta?.permissions?.every(p => userStore.permissions.includes(p))) {
      router.addRoute(route)
    }
  })
  
  // 路由守卫
  router.beforeEach((to) => {
    if (!to.meta.permissions) return true
    
    const hasPermission = to.meta.permissions.every(
      permission => userStore.permissions.includes(permission)
    )
    
    return hasPermission || '/login'
  })
  
  return router
}

七、动态主题引擎

1. 主题状态管理

// src/stores/theme.ts
import { defineStore } from 'pinia'
import { watch } from 'vue'

type Theme = 'light' | 'dark' | 'custom'

export const useThemeStore = defineStore('theme', {
  state: () => ({
    currentTheme: 'light' as Theme,
    customColors: {
      primary: '#409EFF',
      secondary: '#67C23A'
    }
  }),
  actions: {
    setTheme(theme: Theme) {
      this.currentTheme = theme
      localStorage.setItem('theme', theme)
    },
    updateCustomColors(colors: Partial<typeof this.customColors>) {
      this.customColors = { ...this.customColors, ...colors }
    }
  }
})

// 监听主题变化
export function watchThemeChanges() {
  const store = useThemeStore()
  
  watch(() => store.currentTheme, (theme) => {
    document.documentElement.setAttribute('data-theme', theme)
  }, { immediate: true })
}

2. 主题切换组件

<script setup lang="ts">
import { useThemeStore } from '@/stores/theme'
import { watchThemeChanges } from '@/stores/theme'

const themeStore = useThemeStore()
watchThemeChanges()

const themes = ['light', 'dark', 'custom']
</script>

<template>
  <div class="theme-switcher">
    <select v-model="themeStore.currentTheme">
      <option v-for="theme in themes" :key="theme" :value="theme">
        {{ theme }}
      </option>
    </select>
    
    <template v-if="themeStore.currentTheme === 'custom'">
      <input type="color" v-model="themeStore.customColors.primary">
      <input type="color" v-model="themeStore.customColors.secondary">
    </template>
  </div>
</template>