插件列表：请求列表+列表样式设计
概述
本节完成插件列表的数据请求和 UI 展示。使用 GitHub 仓库模拟远端服务器托管插件列表 JSON 文件，在渲染进程发起 HTTP 请求获取数据，并设计列表样式。
创建远端插件列表
GitHub 仓库托管
- 在 GitHub 创建仓库（如
toimc-extensions），用于托管插件列表 JSON - 创建
extensions-store.json文件：
[
{
"url": "https://github.com/user/extensions-1",
"name": "extensions-1",
"description": "示例插件一"
},
{
"url": "https://example.com/extensions-2.zip",
"name": "extensions-2",
"description": "示例插件二"
}
]
json
- 获取 Raw 文件访问 URL：点击文件 -> Raw 按钮 -> 复制地址
文件访问方式
| 访问方式 | URL 格式 | 说明 |
|---|---|---|
| Raw 文件 | https://raw.githubusercontent.com/... | 直接返回文件内容 |
| GitHub API | https://api.github.com/repos/... | 需解析 JSON 响应 |
渲染进程请求插件列表
使用 axios 获取数据
// App.vue
import { ref, onMounted } from 'vue'
import axios from 'axios'
interface ExtensionItem {
url: string
name: string
description: string
}
const extensions = ref<ExtensionItem[]>([])
const loading = ref(false)
onMounted(async () => {
loading.value = true
try {
const { data } = await axios.get<ExtensionItem[]>(
'https://raw.githubusercontent.com/user/toimc-extensions/main/extensions-store.json'
)
extensions.value = data
} catch (error) {
console.error('获取插件列表失败:', error)
} finally {
loading.value = false
}
})
typescript
列表 UI 设计
模板结构
<template>
<div class="extensions-list">
<div
v-for="item in extensions"
:key="item.name"
class="extension-item p-4 border rounded cursor-pointer hover:bg-gray-50"
@click="handleClick(item)"
>
<div class="flex justify-between items-center">
<div>
<h3 class="font-bold">{{ item.name }}</h3>
<p class="text-sm text-gray-500">{{ item.description }}</p>
</div>
<button class="btn-download">
下载
</button>
</div>
</div>
</div>
</template>
vue
点击事件处理
const handleClick = (item: ExtensionItem) => {
// item 即为列表项数据（非 event 对象）
// 通过 IPC 发送到主进程执行下载
ipcRenderer.send('download-ext', item)
}
typescript
常见陷阱
| 错误写法 | 正确写法 | 原因 |
|---|---|---|
@click="handleClick" 直接在 v-for 中 | @click="handleClick(item)" | 无参时接收到的是 Event 对象 |
item 从 $event 读取 | 直接传参 item | Vue 模板中 item 指向迭代变量 |
列表样式要点
- 使用
v-for渲染列表项，:key绑定item.name - Flex 布局实现名称和下载按钮的两端对齐
- Hover 效果提升交互体验
- 加载状态使用
loading变量控制
关键要点
- 使用 GitHub Raw URL 托管 JSON 文件是最简单的模拟后端方案
- 渲染进程通过 axios 请求列表数据，主进程负责下载和文件操作
@click事件中注意区分 Event 对象和列表项数据- 后续可扩展为分页、搜索、分类筛选等功能
↑