Skip to content

Commit 3410a84

Browse files
qianmoQqianmoQ
committed
feat: 美化安装版本和可用版本
1 parent a663ad0 commit 3410a84

1 file changed

Lines changed: 96 additions & 81 deletions

File tree

‎src/components/setting/EnvironmentManager.vue‎

Lines changed: 96 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -42,108 +42,117 @@
4242
</div>
4343
</div>
4444

45-
<!-- 版本管理 -->
46-
<div v-if="environmentInfo && !isLoading">
47-
<!-- 已安装版本 -->
48-
<div v-if="environmentInfo.installed_versions.length > 0" class="space-y-2">
49-
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">已安装版本</h4>
50-
<div class="space-y-2 max-h-32 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent">
51-
<div v-for="version in environmentInfo.installed_versions"
52-
:key="version.version"
53-
class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-800 rounded-lg">
54-
<div class="flex items-center space-x-2">
55-
<CheckCircle class="w-4 h-4 text-green-600 dark:text-green-400"/>
56-
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ version.version }}</span>
57-
<span v-if="environmentInfo.current_version === version.version"
58-
class="px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded">
59-
当前
60-
</span>
61-
</div>
62-
<Button v-if="environmentInfo.current_version !== version.version"
63-
type="primary"
64-
size="sm"
65-
@click="handleSwitchVersion(version.version)">
66-
切换
67-
</Button>
68-
</div>
69-
</div>
70-
</div>
71-
72-
<!-- 获取可用版本错误信息 -->
73-
<div v-if="environmentInfo?.error" class="mt-6 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
74-
<div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
75-
<AlertCircle class="w-5 h-5"/>
76-
<span class="text-sm">{{ environmentInfo.error }}</span>
77-
</div>
45+
<!-- 获取可用版本错误信息 -->
46+
<div v-if="environmentInfo?.error" class="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
47+
<div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
48+
<AlertCircle class="w-5 h-5"/>
49+
<span class="text-sm">{{ environmentInfo.error }}</span>
7850
</div>
51+
</div>
7952

80-
<!-- 可用版本 -->
81-
<div v-else class="space-y-2 mt-4">
82-
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">可下载版本</h4>
83-
84-
<!-- 下载进度 -->
85-
<div v-if="isDownloading && downloadProgress" class="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg space-y-2">
86-
<div class="flex items-center justify-between">
87-
<div class="flex items-center space-x-2">
88-
<svg class="animate-spin h-4 w-4 text-blue-600 dark:text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
89-
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
90-
<path class="opacity-75" fill="currentColor"
91-
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
92-
</svg>
93-
<span class="text-sm font-medium text-blue-900 dark:text-blue-100">
94-
{{ downloadStatusText }}
95-
</span>
53+
<!-- 版本管理 -->
54+
<div v-if="environmentInfo && !isLoading">
55+
<Tabs v-model="activeVersionTab" type="card" size="sm" :tabs="versionTabs">
56+
<!-- 已安装版本 -->
57+
<template #installed>
58+
<div v-if="environmentInfo.installed_versions.length > 0" class="space-y-2">
59+
<div :class="environmentInfo.error ? 'max-h-76' : 'max-h-92'"
60+
class="space-y-2 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent">
61+
<div v-for="version in environmentInfo.installed_versions"
62+
:key="version.version"
63+
class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-800 rounded-lg">
64+
<div class="flex items-center space-x-2">
65+
<CheckCircle class="w-4 h-4 text-green-600 dark:text-green-400"/>
66+
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ version.version }}</span>
67+
<span v-if="environmentInfo.current_version === version.version"
68+
class="px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded">
69+
当前
70+
</span>
71+
</div>
72+
<Button v-if="environmentInfo.current_version !== version.version"
73+
type="primary"
74+
size="sm"
75+
@click="handleSwitchVersion(version.version)">
76+
切换
77+
</Button>
78+
</div>
9679
</div>
97-
<span class="text-sm font-semibold text-blue-600 dark:text-blue-400">
98-
{{ downloadProgress.percentage.toFixed(1) }}%
99-
</span>
10080
</div>
101-
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
102-
<div class="bg-blue-600 dark:bg-blue-400 h-2 rounded-full transition-all duration-300"
103-
:style="{ width: `${downloadProgress.percentage}%` }">
104-
</div>
81+
<div v-else class="p-4 text-center text-sm text-gray-500 dark:text-gray-400">
82+
暂无已安装版本
10583
</div>
106-
</div>
84+
</template>
10785

108-
<div class="space-y-2 max-h-48 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent">
109-
<div v-for="version in availableVersionsToShow"
110-
:key="version.version"
111-
class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-800 rounded-lg">
112-
<div class="flex flex-col">
113-
<div class="flex items-center space-x-2">
114-
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ version.version }}</span>
115-
<span v-if="version.is_installed"
116-
class="px-2 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded">
117-
已安装
86+
<!-- 可用版本 -->
87+
<template #available>
88+
<div class="space-y-2">
89+
<!-- 下载进度 -->
90+
<div v-if="isDownloading && downloadProgress" class="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg space-y-2">
91+
<div class="flex items-center justify-between">
92+
<div class="flex items-center space-x-2">
93+
<svg class="animate-spin h-4 w-4 text-blue-600 dark:text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
94+
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
95+
<path class="opacity-75" fill="currentColor"
96+
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
97+
</svg>
98+
<span class="text-sm font-medium text-blue-900 dark:text-blue-100">
99+
{{ downloadStatusText }}
100+
</span>
101+
</div>
102+
<span class="text-sm font-semibold text-blue-600 dark:text-blue-400">
103+
{{ downloadProgress.percentage.toFixed(1) }}%
118104
</span>
119105
</div>
120-
<div class="flex items-center space-x-3 mt-1 text-xs text-gray-500 dark:text-gray-400">
121-
<span v-if="version.size">{{ formatSize(version.size) }}</span>
122-
<span v-if="version.release_date">{{ formatDate(version.release_date) }}</span>
106+
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
107+
<div class="bg-blue-600 dark:bg-blue-400 h-2 rounded-full transition-all duration-300"
108+
:style="{ width: `${downloadProgress.percentage}%` }">
109+
</div>
110+
</div>
111+
</div>
112+
113+
<div :class="environmentInfo.error ? 'max-h-76' : 'max-h-92'"
114+
class="space-y-2 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent">
115+
<div v-for="version in availableVersionsToShow"
116+
:key="version.version"
117+
class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-800 rounded-lg">
118+
<div class="flex flex-col">
119+
<div class="flex items-center space-x-2">
120+
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ version.version }}</span>
121+
<span v-if="version.is_installed"
122+
class="px-2 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded">
123+
已安装
124+
</span>
125+
</div>
126+
<div class="flex items-center space-x-3 mt-1 text-xs text-gray-500 dark:text-gray-400">
127+
<span v-if="version.size">{{ formatSize(version.size) }}</span>
128+
<span v-if="version.release_date">{{ formatDate(version.release_date) }}</span>
129+
</div>
130+
</div>
131+
<Button v-if="!version.is_installed"
132+
type="primary"
133+
size="sm"
134+
:icon="Download"
135+
:disabled="isDownloading"
136+
@click="handleDownload(version.version)">
137+
下载
138+
</Button>
123139
</div>
124140
</div>
125-
<Button v-if="!version.is_installed"
126-
type="primary"
127-
size="sm"
128-
:icon="Download"
129-
:disabled="isDownloading"
130-
@click="handleDownload(version.version)">
131-
下载
132-
</Button>
133141
</div>
134-
</div>
135-
</div>
142+
</template>
143+
</Tabs>
136144
</div>
137145
</div>
138146
</template>
139147

140148
<script setup lang="ts">
141-
import { computed } from 'vue'
149+
import { computed, ref } from 'vue'
142150
import { AlertCircle, CheckCircle, Download, Folder } from 'lucide-vue-next'
143151
import { useEnvironmentManager } from '../../composables/useEnvironmentManager'
144152
import Label from '../../ui/Label.vue'
145153
import Input from '../../ui/Input.vue'
146154
import Button from '../../ui/Button.vue'
155+
import Tabs from '../../ui/Tabs.vue'
147156
148157
const props = defineProps<{
149158
language: string
@@ -165,6 +174,12 @@ const {
165174
switchVersion
166175
} = useEnvironmentManager(props.language)
167176
177+
const activeVersionTab = ref('installed')
178+
const versionTabs = computed(() => [
179+
{ key: 'installed', label: '已安装版本' },
180+
{ key: 'available', label: '可用版本', disabled: !!environmentInfo.value?.error }
181+
])
182+
168183
// 下载状态文本
169184
const downloadStatusText = computed(() => {
170185
if (!downloadProgress.value) {

0 commit comments

Comments
 (0)