feat (core): 增加状态栏加载状态

Author: qianmoQ

src/App.vue

@@ -39,7 +39,7 @@
     </div>
 
     <!-- 状态栏 -->
-    <StatusBar :env-info="envInfo" :execution-time="lastExecutionTime" :code-length="(code || '').length"/>
+    <StatusBar :env-info="envInfo" :is-loading="isLoadingEnvInfo" :execution-time="lastExecutionTime" :code-length="(code || '').length"/>
 
     <!-- 关于组件 -->
     <About v-if="showAbout" @close="closeAbout"/>
@@ -96,6 +96,7 @@ const {
   currentLanguage,
   supportedLanguages,
   envInfo,
+  isLoadingEnvInfo,
   getLanguageDisplayName,
   handleLanguageChange,
   initialize

src/components/StatusBar.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="text-white px-3.5 py-1 text-sm flex items-center justify-between"
-       :class="[envInfo.installed ? 'bg-green-500' : 'bg-red-500']">
+       :class="[getStatusColor()]">
     <div class="flex items-center space-x-6">
       <div class="flex items-center space-x-2">
-        <component :is="envInfo.installed ? CheckCircle : XCircle"
-                   :class="envInfo.installed ? 'text-green-300' : 'text-white'"
+        <component :is="getStatusIcon()"
+                   :class="[getIconClass(), { 'animate-spin': isLoading }]"
                    class="w-4 h-4"/>
-        <span>{{ envInfo.installed ? `${ envInfo.language }: ${ envInfo.version }` : `${ envInfo.language }: 环境未安装` }}</span>
+        <span>{{ getStatusText() }}</span>
       </div>
 
       <div v-if="executionTime > 0" class="flex items-center space-x-2">
@@ -25,16 +25,28 @@
 </template>
 
 <script setup lang="ts">
-import { CheckCircle, Clock, Hash, XCircle } from 'lucide-vue-next'
+import { Clock, Hash } from 'lucide-vue-next'
+import { toRefs } from 'vue'
+import { useStatusBar } from '../composables/useStatusBar'
 
-defineProps<{
+const props = defineProps<{
   envInfo: {
     installed: boolean
     version: string
     path: string,
     language: string
   }
+  isLoading: boolean
   executionTime: number
   codeLength: number
 }>()
-</script>
+
+const { envInfo, isLoading } = toRefs(props)
+
+const {
+  getStatusColor,
+  getStatusIcon,
+  getIconClass,
+  getStatusText
+} = useStatusBar(envInfo, isLoading)
+</script>

src/composables/useLanguageManager.ts

@@ -12,6 +12,9 @@ export function useLanguageManager(
     const supportedLanguages = ref<Language[]>([])
     const globalConfig = ref(null as any)
 
+    // 🔥 添加加载状态
+    const isLoadingEnvInfo = ref(false)
+
     const envInfo = ref<EnvInfo>({
         installed: false,
         version: '检查中...',
@@ -30,6 +33,15 @@ export function useLanguageManager(
             return
         }
 
+        // 🔥 设置加载状态
+        isLoadingEnvInfo.value = true
+        envInfo.value = {
+            installed: false,
+            version: '检查中...',
+            path: '检查中...',
+            language: getLanguageDisplayName(currentLanguage.value)
+        }
+
         try {
             const info: LanguageInfo = await invoke('get_info', {
                 language: currentLanguage.value
@@ -48,9 +60,12 @@ export function useLanguageManager(
                 installed: false,
                 version: 'Error',
                 path: 'Error',
-                language: currentLanguage.value
+                language: getLanguageDisplayName(currentLanguage.value)
             }
         }
+        finally {
+            isLoadingEnvInfo.value = false
+        }
     }
 
     const getSupportedLanguages = async () => {
@@ -93,8 +108,7 @@ export function useLanguageManager(
         // 清空输出
         clearOutput()
 
-        // 刷新环境信息
-        await refreshEnvInfo()
+        refreshEnvInfo()
 
         toast.info(`已切换到 ${ getLanguageDisplayName(newLanguage) }`)
     }
@@ -115,8 +129,7 @@ export function useLanguageManager(
             console.log('使用的模板:', template)
             code.value = template
 
-            // 刷新环境信息（此时 currentLanguage 已经正确设置）
-            await refreshEnvInfo()
+            refreshEnvInfo()
         }
         else {
             code.value = 'No supported languages found'
@@ -127,6 +140,7 @@ export function useLanguageManager(
         currentLanguage,
         supportedLanguages,
         envInfo,
+        isLoadingEnvInfo,
         getLanguageDisplayName,
         handleLanguageChange,
         initialize

src/composables/useStatusBar.ts

@@ -0,0 +1,51 @@
+import { type Ref } from 'vue'
+import { CheckCircle, Loader2, XCircle } from 'lucide-vue-next'
+import { EnvInfo } from '../types/app.ts'
+
+export function useStatusBar(envInfo: Ref<EnvInfo>, isLoading: Ref<boolean>)
+{
+    // 计算状态颜色
+    const getStatusColor = () => {
+        if (isLoading.value) {
+            return 'bg-blue-500'
+        }
+        return envInfo.value.installed ? 'bg-green-500' : 'bg-red-500'
+    }
+
+    // 计算状态图标
+    const getStatusIcon = () => {
+        if (isLoading.value) {
+            return Loader2
+        }
+        return envInfo.value.installed ? CheckCircle : XCircle
+    }
+
+    // 计算图标样式
+    const getIconClass = () => {
+        if (isLoading.value) {
+            return 'text-blue-200'
+        }
+        return envInfo.value.installed ? 'text-green-300' : 'text-white'
+    }
+
+    // 计算状态文本
+    const getStatusText = () => {
+        if (isLoading.value) {
+            return `${ envInfo.value.language }: 检查环境中...`
+        }
+
+        if (envInfo.value.installed) {
+            return `${ envInfo.value.language }: ${ envInfo.value.version }`
+        }
+        else {
+            return `${ envInfo.value.language }: 环境未安装`
+        }
+    }
+
+    return {
+        getStatusColor,
+        getStatusIcon,
+        getIconClass,
+        getStatusText
+    }
+}