国际化

Stream Dock 支持多语言。

清单包含多个可以国际化的字符串。您可以在位于manifest.json旁边的 JSON en.json

{
  "Description": "Test", 
  "Name": "Test", 
  "Category": "Test", 
  "com.mirabox.demo.action1": {
    "Name": "Test", 
    "Tooltip": "Test"
  },
  "Localization": {
    "test": "Test"
  }
}

请注意，如果您不提供本地化字符串，则将使用manifest.json文件中的字符串。Stream Dock 支持以下语言：

• 简体中文： zh_CN.json

• 德语： de.json

• 英语： en.json

• 法语： fr.json

• 日语： ja.json

• 韩语： ko.json

• 西班牙语： es.json

您还可以在 JSON 文件中提供自己的字符串。

这些文件必须保存在插件的目录中。您将在模板插件中找到一个示例。下面是该文件的一个示例en.json

如何在 Property Inspector 中自动本地化字符串

{
  "Description": "Test", 
  "Name": "Test", 
  "Category": "Test", 
  "com.mirabox.demo.action1": {
    "Name": "Test", 
    "Tooltip": "Test"
  },
  "Localization": {
    "test": "Test"
  }
}

对于普通的 js 模板如果您在插件中需要以国际化形式显示这些字符串，您只需要将Localization中对应的键直接写在您属性检查器的index.js中并设置$local = true，SDK会自动翻译

 if (!$local) return;
    $lang = await new Promise(resolve => {
        const req = new XMLHttpRequest();
        req.open('GET', `../../${JSON.parse(app).application.language}.json`);
        req.send();
        req.onreadystatechange = () => {
            if (req.readyState === 4) {
                resolve(JSON.parse(req.responseText).Localization);
            }
        };
    });

    // 遍历文本节点并翻译所有文本节点
    const walker = document.createTreeWalker($dom.main, NodeFilter.SHOW_TEXT, (e) => {
        return e.data.trim() && NodeFilter.FILTER_ACCEPT;
    });
    while (walker.nextNode()) {
        console.log(walker.currentNode.data);
        walker.currentNode.data = $lang[walker.currentNode.data];
    }
    // placeholder 特殊处理
    const translate = item => {
        if (item.placeholder?.trim()) {
            console.log(item.placeholder);
            item.placeholder = $lang[item.placeholder];
        }
    };
    $('input', true).forEach(translate);
    $('textarea', true).forEach(translate);

对于 Vue 模板需要在src/hooks/i18n.ts中定义这些字符串，并在需要使用的地方手动引入useI18nStore并使用

export const useI18nStore = () => {
  const language = window.argv[3].application.language;
  const localString = {
    en: {
      test: 'test'
    },
    zh_CN: {
      test: '测试'
    }
  };
  return localString[language] || localString['en'];
};

示例:

<script setup lang="ts">
  import { usePropertyStore, useWatchEvent } from '@/hooks/property';
  import { useI18nStore } from '@/hooks/i18n';

  const i18n = useI18nStore();
  const property = usePropertyStore();
  useWatchEvent({
    didReceiveSettings(data) {},
    sendToPropertyInspector(data) {}
  });
</script>

<template>
  <div>{{ i18n.test }}</div>
</template>