feat: 支持插件禁用启用

Author: qianmoQ

src/App.vue

@@ -114,6 +114,7 @@ const {
   getLanguageDisplayName,
   getCurrentConsoleType,
   handleLanguageChange,
+  refreshLanguageList,
   initialize
 } = useLanguageManager(code, clearOutput, toast)
 
@@ -136,13 +137,13 @@ const {
 const editorConfigKey = ref(0)
 const consoleType = ref('console')
 
-// 处理设置变更
-const handleSettingsChanged = (config: any) => {
+const handleSettingsChanged = async (config: any) => {
   console.log('主组件接收到设置变更:', config)
-  // 延迟一点点再刷新，减少闪烁
   setTimeout(() => {
     editorConfigKey.value++
   }, 50)
+
+  await refreshLanguageList()
 }
 
 const loadExample = (content: string) => {

src/components/Settings.vue

@@ -18,7 +18,7 @@
 
       <!-- 语言配置 -->
       <template #language>
-        <Language v-if="activeTab === 'language'"/>
+        <Language v-if="activeTab === 'language'" @settings-changed="handleLanguageSettingsChanged"/>
       </template>
     </Tabs>
   </Modal>
@@ -43,6 +43,7 @@ const {
   activeTab,
   tabsData,
   handleEditorSettingsChanged,
+  handleLanguageSettingsChanged,
   handleEditorError,
   closeSettings,
   initialize

src/components/setting/Language.vue

@@ -8,6 +8,18 @@
           :nav-class="['max-h-[70vh] overflow-y-auto']"
           :tabs="tabsPluginData"
           @change="handleTabChange">
+      <template #tab-button="{ tab }">
+        <div class="flex w-full px-3 py-2 space-x-2">
+          <Switch v-model="pluginEnabledStates[tab.key as string]"
+                  size="sm"
+                  @click.stop
+                  @change="(value, event) => handlePluginToggle(tab.key as string, value, event)"/>
+          <div class="flex items-center space-x-2">
+            <img v-if="tab.svgUrl" :src="tab.svgUrl" class="w-5 h-5" :alt="tab.label"/>
+            <span>{{ tab.label }}</span>
+          </div>
+        </div>
+      </template>
       <template #[activePlugin]="{ tab }">
         <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center space-x-2">
           <img :src="`/icons/${activePlugin.replace(/\d+$/, '')}.svg`" class="w-6 h-6" :alt="tab.label"/>
@@ -21,6 +33,10 @@
               :nav-class="['w-full', 'justify-center']">
           <template #general>
             <div class="space-y-4">
+              <Label label="启用插件">
+                <Switch v-model="pluginConfig.enabled"/>
+              </Label>
+
               <Label label="编译前执行的命令">
                 <Input v-model="pluginConfig.before_compile" class="w-full" placeholder="编译前执行的命令"/>
               </Label>
@@ -94,41 +110,37 @@
 </template>
 
 <script setup lang="ts">
-import {onMounted} from 'vue'
-import {Folder} from 'lucide-vue-next'
-import {Codemirror} from 'vue-codemirror'
+import { onMounted } from 'vue'
+import { Folder } from 'lucide-vue-next'
+import { Codemirror } from 'vue-codemirror'
 import Button from '../../ui/Button.vue'
 import Tabs from '../../ui/Tabs.vue'
 import Number from '../../ui/Number.vue'
 import Label from '../../ui/Label.vue'
 import Input from '../../ui/Input.vue'
-import {useLanguageSettings} from '../../composables/useLanguageSettings'
+import { useLanguageSettings } from '../../composables/useLanguageSettings'
 import type PluginConfig from '../../types/plugin'
 import Select from "../../ui/Select.vue";
+import Switch from '../../ui/Switch.vue'
 
 const emit = defineEmits<{
   'settings-changed': [config: PluginConfig]
   'error': [message: string]
 }>()
 
 const {
-  // 标签页状态
   activeTab,
   tabsData,
   consoleTypes,
-
-  // 插件配置
   activePlugin,
   tabsPluginData,
   pluginConfig,
+  pluginEnabledStates,
   handleTabChange,
+  handlePluginToggle,
   selectExecuteHome,
-
-  // 编辑器状态
   isEditorReady,
   currentExtensions,
-
-  // 方法
   initialize
 } = useLanguageSettings(emit)
 

src/composables/useLanguageManager.ts

@@ -96,11 +96,25 @@ export function useLanguageManager(
     const getSupportedLanguages = async () => {
         try {
             const languages = await invoke<Language[]>('get_supported_languages')
-            supportedLanguages.value = languages.map((language) => ({
+            const allLanguages = languages.map((language) => ({
                 name: language.name,
                 value: language.value,
                 svgUrl: `/icons/${language.value.replace(/\d+$/, '')}.svg`
             }))
+
+            if (globalConfig.value && globalConfig.value.plugins) {
+                const filtered = allLanguages.filter((language) => {
+                    const plugin = globalConfig.value.plugins.find((p: any) => p.language === language.value)
+                    const enabled = !plugin || plugin.enabled !== false
+                    console.log(`语言 ${language.name} (${language.value}): enabled=${enabled}`)
+                    return enabled
+                })
+                console.log('过滤后的语言列表:', filtered.map(l => l.name))
+                supportedLanguages.value = filtered
+            } else {
+                console.log('未找到配置，显示所有语言')
+                supportedLanguages.value = allLanguages
+            }
         }
         catch (error) {
             console.error('Error getting supported languages:', error)
@@ -138,14 +152,33 @@ export function useLanguageManager(
         toast.info(`已切换到 ${getLanguageDisplayName(newLanguage)}`)
     }
 
-    const initialize = async () => {
-        // 获取支持的语言列表
+    const refreshLanguageList = async () => {
+        console.log('=== 开始刷新语言列表 ===')
+        console.log('刷新前的语言列表:', supportedLanguages.value.map(l => l.name))
+
+        await getConfigure()
+        console.log('配置已重新加载')
+
         await getSupportedLanguages()
+        console.log('语言列表已重新获取:', supportedLanguages.value.map(l => l.name))
+
+        const currentStillAvailable = supportedLanguages.value.some(lang => lang.value === currentLanguage.value)
+        console.log(`当前语言 ${currentLanguage.value} 是否仍然可用:`, currentStillAvailable)
 
-        // 获取配置
+        if (!currentStillAvailable && supportedLanguages.value.length > 0) {
+            currentLanguage.value = supportedLanguages.value[0].value
+            code.value = filterPluginTemplate(currentLanguage.value)
+            await refreshEnvInfo()
+            console.log('当前语言已禁用，切换到:', currentLanguage.value)
+        }
+        console.log('=== 刷新语言列表完成 ===')
+    }
+
+    const initialize = async () => {
         await getConfigure()
 
-        // 设置默认语言和初始代码模板
+        await getSupportedLanguages()
+
         if (supportedLanguages.value.length > 0) {
             currentLanguage.value = supportedLanguages.value[0].value
             console.log('当前语言:', currentLanguage.value)
@@ -169,6 +202,7 @@ export function useLanguageManager(
         isLoadingEnvInfo,
         getLanguageDisplayName,
         handleLanguageChange,
+        refreshLanguageList,
         initialize,
         getCurrentPluginConfig,
         getCurrentConsoleType

src/composables/useLanguageSettings.ts

@@ -5,8 +5,8 @@ import {useCodeMirrorEditor} from './useCodeMirrorEditor'
 
 export function useLanguageSettings(emit: any)
 {
-    // 标签页管理
     const activeTab = ref('general')
+    const pluginEnabledStates = ref<Record<string, boolean>>({})
 
     const tabsData = [
         {
@@ -33,13 +33,14 @@ export function useLanguageSettings(emit: any)
 
     const consoleTypes = [{label: '控制台', value: 'console'}, {label: 'Web', value: 'web'}]
 
-    // 插件配置管理
     const {
         activePlugin,
         tabsPluginData,
         pluginConfig,
+        globalConfig,
         handleTabChange,
         selectExecuteHome,
+        updateGlobalConfig,
         initializePlugin
     } = usePluginConfig(emit)
 
@@ -110,46 +111,70 @@ export function useLanguageSettings(emit: any)
         console.log('Template changed:', newTemplate)
     }, {immediate: false})
 
-    // 初始化所有功能
+    const handlePluginToggle = async (language: string, enabled: boolean, event: Event) => {
+        if (!globalConfig.value || !globalConfig.value.plugins) return
+
+        const plugin = globalConfig.value.plugins.find((p: any) => p.language === language)
+        if (plugin) {
+            plugin.enabled = enabled
+            await updateGlobalConfig(plugin)
+        }
+    }
+
+    const syncPluginStates = () => {
+        if (globalConfig.value && globalConfig.value.plugins) {
+            const states: Record<string, boolean> = {}
+            tabsPluginData.value.forEach((tab) => {
+                const plugin = globalConfig.value.plugins.find((p: any) => p.language === tab.key)
+                states[tab.key] = plugin?.enabled !== false
+            })
+            pluginEnabledStates.value = states
+        }
+    }
+
+    watch(tabsPluginData, () => {
+        syncPluginStates()
+    }, { immediate: true })
+
+    watch(pluginConfig, () => {
+        if (activePlugin.value && pluginConfig.value) {
+            pluginEnabledStates.value[activePlugin.value] = pluginConfig.value.enabled
+        }
+    }, { deep: true })
+
     const initialize = async () => {
         console.log('Component mounted')
 
-        // 先初始化插件配置
         await initializePlugin()
         console.log('Plugin initialized:', {
             activePlugin: activePlugin.value,
             template: pluginConfig.value?.template
         })
 
-        // 再初始化编辑器
+        syncPluginStates()
+
         await initializeEditor()
         console.log('Editor initialized')
 
-        // 更新扩展
         await updateExtensions()
         console.log('Extensions updated:', currentExtensions.value)
     }
 
     return {
-        // 标签页状态
         activeTab,
         tabsData,
         consoleTypes,
-
-        // 插件配置
         activePlugin,
         tabsPluginData,
         pluginConfig,
+        pluginEnabledStates,
         handleTabChange,
+        handlePluginToggle,
         selectExecuteHome,
-
-        // 编辑器状态
         isEditorReady,
         currentExtensions,
         currentLanguage,
         templateContent,
-
-        // 方法
         updateExtensions,
         initialize
     }

src/composables/usePluginConfig.ts

@@ -29,7 +29,7 @@ export function usePluginConfig(emit?: any)
     const globalConfig = ref<any>(null)
 
     const pluginConfig = ref<PluginConfig>({
-        enabled: false,
+        enabled: true,
         execute_home: '',
         extension: '',
         language: '',
@@ -92,9 +92,8 @@ export function usePluginConfig(emit?: any)
             }
             else {
                 console.warn('未找到插件配置:', activePlugin.value)
-                // 创建默认配置
                 pluginConfig.value = {
-                    enabled: false,
+                    enabled: true,
                     execute_home: '',
                     extension: '',
                     language: activePlugin.value,
@@ -187,10 +186,9 @@ export function usePluginConfig(emit?: any)
         }
     }
 
-    // 重置插件配置
     const resetPluginConfig = (language: string) => {
         pluginConfig.value = {
-            enabled: false,
+            enabled: true,
             execute_home: '',
             extension: '',
             language: language,

src/composables/useSettings.ts

@@ -14,14 +14,16 @@ export function useSettings(emit: any)
         { key: 'language', label: '语言', icon: BracesIcon }
     ]
 
-    // 处理编辑器设置变更
     const handleEditorSettingsChanged = (config: any) => {
         console.log('设置模态框接收到编辑器配置变更:', config)
-        // 向上传递事件到主组件
         emit('settings-changed', config)
     }
 
-    // 处理编辑器错误
+    const handleLanguageSettingsChanged = (config: any) => {
+        console.log('设置模态框接收到语言配置变更:', config)
+        emit('settings-changed', config)
+    }
+
     const handleEditorError = (message: string) => {
         console.error('编辑器设置错误:', message)
     }
@@ -44,13 +46,11 @@ export function useSettings(emit: any)
     }
 
     return {
-        // 状态
         isVisible,
         activeTab,
         tabsData,
-
-        // 方法
         handleEditorSettingsChanged,
+        handleLanguageSettingsChanged,
         handleEditorError,
         closeSettings,
         initialize