@arronqzy/abuilder-vue 0.1.0 → 0.1.2

package/README.md

@@ -22,7 +22,12 @@ createApp(App).use(Antd).mount("#app");
 ### 可选配置
 
 ```vue
-<App class="h-screen" :initial-zoom="1" default-theme="dark" />
+<App
+  class="h-screen"
+  :initial-zoom="1"
+  default-theme="dark"
+  locale="zh-CN"
+/>
 ```
 
 | Prop | 说明 | 默认 |
@@ -30,15 +35,19 @@ createApp(App).use(Antd).mount("#app");
 | `class` | 根容器 class | — |
 | `initialZoom` | 画布初始缩放 | `1` |
 | `defaultTheme` | `light` / `dark` | `dark` |
+| `locale` | `zh-CN` / `en-US`；省略则按 localStorage → 浏览器 → zh-CN | `null` |
 | `previewSearch` | 覆盖预览 URL 查询串 | 当前 `location.search` |
 
+顶栏「语言」可运行时切换中文 / English（写入 `abuilder.locale`）。Ant Design Vue 的 `ConfigProvider.locale` 会随语言同步。
+
 ### 在线预览 URL
 
-当 URL 含 `?preview=online&projectId=<id>` 时，自动渲染 `VueViewOnlinePreview`（从 IndexedDB 加载工作区并执行蓝图生命周期）。
+当 URL 含 `?preview=online&projectId=<id>` 时，自动渲染 `VueViewOnlinePreview`。
 
 ## 依赖包
 
-- `@arronqzy/vue-view` — 视图编辑器（画布、工作区、配置侧栏）
+- `@arronqzy/vue-view` — 视图编辑器
+- `@arronqzy/i18n` — 共享中英文本
 - `ant-design-vue` — UI 组件
 - `vue` — peer dependency
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/abuilder-vue",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Abuilder Vue 3 可视化编辑器入口包",
   "license": "MIT",
   "type": "module",
@@ -14,7 +14,8 @@
   "dependencies": {
     "ant-design-vue": "^4.2.6",
     "vue": "^3.5.13",
-    "@arronqzy/vue-view": "0.1.0"
+    "@arronqzy/i18n": "0.1.2",
+    "@arronqzy/vue-view": "0.1.3"
   },
   "peerDependencies": {
     "vue": "^3.4.0"
@@ -24,8 +25,8 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "vue-tsc": "^2.2.0",
-    "@arronqzy/typescript-config": "1.0.0",
-    "@arronqzy/eslint-config": "0.0.0"
+    "@arronqzy/eslint-config": "0.0.0",
+    "@arronqzy/typescript-config": "1.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/App.vue

@@ -1,18 +1,32 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import { ConfigProvider, theme } from "ant-design-vue";
+import zhCN from "ant-design-vue/es/locale/zh_CN";
+import enUS from "ant-design-vue/es/locale/en_US";
 import {
   VueViewPanel,
   VueViewOnlinePreview,
   parseOnlinePreviewSearchParams,
 } from "@arronqzy/vue-view";
+import { provideI18n } from "@arronqzy/i18n/vue";
+import { isLocale } from "@arronqzy/i18n";
 import type { AbuilderVueAppProps } from "./types";
 
 const props = withDefaults(defineProps<AbuilderVueAppProps>(), {
   initialZoom: 1,
   defaultTheme: "dark",
+  locale: null,
 });
 
+const i18n = provideI18n({ locale: props.locale });
+
+watch(
+  () => props.locale,
+  (next) => {
+    if (isLocale(next)) i18n.setLocale(next);
+  }
+);
+
 const search =
   props.previewSearch ??
   (typeof window !== "undefined" ? window.location.search : "");
@@ -20,10 +34,15 @@ const search =
 const previewParams = computed(() => parseOnlinePreviewSearchParams(search));
 
 const isDark = computed(() => props.defaultTheme === "dark");
+
+const antdLocale = computed(() =>
+  i18n.locale.value === "en-US" ? enUS : zhCN
+);
 </script>
 
 <template>
   <ConfigProvider
+    :locale="antdLocale"
     :theme="{
       algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
     }"

package/src/index.ts

@@ -1,5 +1,6 @@
 export { default as App } from "./App.vue";
 export type { AbuilderVueAppProps } from "./types";
+export type { Locale } from "@arronqzy/i18n";
 
 export {
   VueViewPanel,

package/src/types.ts

@@ -3,4 +3,7 @@ export type AbuilderVueAppProps = {
   initialZoom?: number;
   defaultTheme?: "dark" | "light";
   previewSearch?: string;
+  /** 界面语言。省略时按 localStorage → 浏览器语言 → zh-CN 解析。 */
+  locale?: "zh-CN" | "en-US" | null;
 };
+