feat: support setting language for the extension

cmd/testdata/stores.yaml

@@ -1,35 +1,88 @@
 stores:
-    - name: git
-      kind:
-        name: atest-store-git
-        enabled: true
-      url: xxx
-      readonly: false
-      disabled: false
-    - name: ai
-      kind:
-        name: atest-ext-ai
-        enabled: true
-      url: ""
-      readonly: false
-      disabled: false
-      properties:
+  - name: git
+    kind:
+      name: atest-store-git
+      dependencies: []
+      url: "unix:///tmp/atest-store-git.sock"
+      params: []
+      link: ""
+      enabled: true
+      categories: []
+    description: ""
+    url: xxx
+    username: ""
+    password: ""
+    readonly: false
+    disabled: false
+    properties: {}
+  - name: ai
+    kind:
+      name: atest-ext-ai
+      dependencies: []  # 无依赖
+      url: "unix:///tmp/atest-ext-ai.sock"
+      params:
         - key: "provider"
-          description: "AI provider (local, openai, claude)"
-          defaultValue: "local"
-        - key: "model"
-          description: "AI model name"
-          defaultValue: "codellama"
+          description: "AI provider (ollama, openai, deepseek)"
+          defaultValue: "ollama"
         - key: "endpoint"
-          description: "AI service endpoint"
+          description: "AI service endpoint URL"
           defaultValue: "http://localhost:11434"
-plugins:
-    - name: atest-store-git
-      url: unix:///tmp/atest-store-git.sock
-      enabled: true
-    - name: atest-ext-ai
-      url: unix:///tmp/atest-ext-ai.sock
+        - key: "api_key"
+          description: "API key for OpenAI/Deepseek providers"
+          defaultValue: ""
+        - key: "model"
+          description: "AI model name (auto-discovered for ollama)"
+          defaultValue: ""
+        - key: "max_tokens"
+          description: "Maximum tokens for AI generation"
+          defaultValue: "4096"
+        - key: "timeout"
+          description: "Request timeout duration"
+          defaultValue: "30s"
+      link: "https://github.com/LinuxSuRen/atest-ext-ai"
       enabled: true
-      description: "AI Extension Plugin for intelligent SQL generation and execution"
-      version: "latest"
-      registry: "ghcr.io/linuxsuren/atest-ext-ai"
+      categories: ["ai", "sql-generation"]
+    description: "AI Extension Plugin for natural language to SQL conversion"
+    url: "unix:///tmp/atest-ext-ai.sock"
+    username: ""
+    password: ""
+    readonly: false
+    disabled: false
+    properties:
+      provider: "ollama"
+      endpoint: "http://localhost:11434"
+      api_key: ""
+      model: ""
+      max_tokens: "4096"
+      timeout: "30s"
+
+plugins:
+  - name: atest-store-git
+    dependencies: []
+    url: "unix:///tmp/atest-store-git.sock"
+    params: []
+    link: ""
+    enabled: true
+    categories: []
+  - name: atest-ext-ai
+    dependencies: []
+    url: "unix:///tmp/atest-ext-ai.sock"
+    params:
+       - key: "provider"
+         description: "AI provider (ollama, openai, deepseek)"
+         defaultValue: "ollama"
+       - key: "endpoint"
+         description: "AI service endpoint"
+         defaultValue: "http://localhost:11434"
+       - key: "api_key"
+         description: "API key for external AI services"
+         defaultValue: ""
+       - key: "model"
+         description: "AI model name (auto-discovered for ollama)"
+         defaultValue: ""
+    link: "https://github.com/LinuxSuRen/atest-ext-ai"
+    enabled: true
+    categories: ["ai", "sql-generation"]
+    description: "AI Extension Plugin for natural language to SQL conversion"
+    version: "v0.1.0"
+    registry: "ghcr.io/linuxsuren/atest-ext-ai"

console/atest-ui/src/App.vue

@@ -41,8 +41,8 @@ const appVersion = ref('')
 const appVersionLink = ref('https://github.com/LinuxSuRen/api-testing')
 API.GetVersion((d) => {
   appVersion.value = d.version
-  const version = d.version.match('^v\\d*.\\d*.\\d*')
-  const dirtyVersion = d.version.match('^v\\d*.\\d*.\\d*-\\d*-g')
+  const version = d.version.match(String.raw`^v\d*.\d*.\d*`)
+  const dirtyVersion = d.version.match(String.raw`^v\d*.\d*.\d*-\d*-g`)
 
   if (!version && !dirtyVersion) {
     return
@@ -55,16 +55,18 @@ API.GetVersion((d) => {
   }
 })
 
+const hasLocalStorage = typeof globalThis !== 'undefined' && 'localStorage' in globalThis
+const storage = hasLocalStorage ? globalThis.localStorage : undefined
 const isCollapse = ref(true)
 watch(isCollapse, (v: boolean) => {
-  window.localStorage.setItem('button.style', v ? 'simple' : '')
+  storage?.setItem('button.style', v ? 'simple' : '')
 })
-const lastActiveMenu = window.localStorage.getItem('activeMenu')
+const lastActiveMenu = storage?.getItem('activeMenu') ?? 'welcome'
 const activeMenu = ref(lastActiveMenu === '' ? 'welcome' : lastActiveMenu)
 const panelName = ref(activeMenu)
 const handleSelect = (key: string) => {
   panelName.value = key
-  window.localStorage.setItem('activeMenu', key)
+  storage?.setItem('activeMenu', key)
 }
 
 const locale = ref(Cache.GetPreference().language)
@@ -178,7 +180,7 @@ API.GetMenus((menus) => {
       <WelcomePage v-else-if="panelName === 'welcome' || panelName === ''" />
 
       <span v-for="menu in extensionMenus" :key="menu.index" :index="menu.index">
-        <Extension v-if="panelName === menu.index" :name="menu.name" />
+        <Extension v-if="panelName === menu.index" :name="menu.index" />
       </span>
     </el-main>
 

console/atest-ui/src/views/Extension.vue

@@ -1,48 +1,76 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { API } from './net';
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { API } from './net'
 
 interface Props {
   name: string
 }
 const props = defineProps<Props>()
+const { locale } = useI18n()
+
+let pluginInstance: { setLocale?: (value: string) => void } | undefined
+
 const loading = ref(true)
 const loadPlugin = async (): Promise<void> => {
     try {
+        // First load CSS
         API.GetPageOfCSS(props.name, (d) => {
             const style = document.createElement('style');
             style.textContent = d.message;
             document.head.appendChild(style);
         });
 
+        // Then load JS and mount plugin
         API.GetPageOfJS(props.name, (d) => {
             const script = document.createElement('script');
             script.type = 'text/javascript';
             script.textContent = d.message;
             document.head.appendChild(script);
 
-            const plugin = window.ATestPlugin;
-
-            if (plugin && plugin.mount) {
-                console.log('extension load success');
-                const container = document.getElementById("plugin-container");
-                if (container) {
-                    container.innerHTML = ''; // Clear previous content
-                    plugin.mount(container);
+            // Implement retry mechanism with exponential backoff
+            const checkPluginLoad = (retries = 0, maxRetries = 10) => {
+                const globalScope = globalThis as { ATestPlugin?: { mount?: (el: Element) => void, setLocale?: (value: string) => void } };
+                const plugin = globalScope.ATestPlugin;
+
+                if (plugin && plugin.mount) {
+                    const container = document.getElementById("plugin-container");
+                    if (container) {
+                        container.innerHTML = ''; // Clear previous content
+                        plugin.mount(container);
+                        plugin.setLocale?.(locale.value);
+                        pluginInstance = plugin;
+                        loading.value = false;
+                    } else {
+                        loading.value = false;
+                    }
+                } else if (retries < maxRetries) {
+                    // Incremental retry mechanism: 50ms, 100ms, 150ms...
+                    const delay = 50 + retries * 50;
+                    setTimeout(() => checkPluginLoad(retries + 1, maxRetries), delay);
+                } else {
+                    loading.value = false;
                 }
-            }
+            };
+
+            // Start the retry mechanism
+            checkPluginLoad();
         });
     } catch (error) {
-        console.log(`extension load error: ${(error as Error).message}`)
-    } finally {
-        console.log('extension load finally');
+        loading.value = false; // Set loading to false on error
+        console.error('Failed to load extension assets', error);
     }
 };
-try {
-    loadPlugin();
-} catch (error) {
-    console.error('extension load error:', error);
-}
+
+loadPlugin().catch((error) => {
+    loading.value = false;
+    console.error('Failed to initialize extension plugin', error);
+});
+
+watch(locale, (value) => {
+    const normalized = value ?? 'en';
+    pluginInstance?.setLocale?.(normalized);
+});
 </script>
 
 <template>