diff --git a/frontent/ops_vue/package-lock.json b/frontent/ops_vue/package-lock.json index 759658f..c2ac499 100644 --- a/frontent/ops_vue/package-lock.json +++ b/frontent/ops_vue/package-lock.json @@ -12,6 +12,7 @@ "@tabler/icons-vue": "^3.35.0", "pinia": "^3.0.3", "vue": "^3.5.22", + "vue-i18n": "^9.14.5", "vue-router": "^4.5.1" }, "devDependencies": { @@ -1280,6 +1281,50 @@ "url": "https://github.com/sponsors/nzakas" } }, + "node_modules/@intlify/core-base": { + "version": "9.14.5", + "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.14.5.tgz", + "integrity": "sha512-5ah5FqZG4pOoHjkvs8mjtv+gPKYU0zCISaYNjBNNqYiaITxW8ZtVih3GS/oTOqN8d9/mDLyrjD46GBApNxmlsA==", + "license": "MIT", + "dependencies": { + "@intlify/message-compiler": "9.14.5", + "@intlify/shared": "9.14.5" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + } + }, + "node_modules/@intlify/message-compiler": { + "version": "9.14.5", + "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.14.5.tgz", + "integrity": "sha512-IHzgEu61/YIpQV5Pc3aRWScDcnFKWvQA9kigcINcCBXN8mbW+vk9SK+lDxA6STzKQsVJxUPg9ACC52pKKo3SVQ==", + "license": "MIT", + "dependencies": { + "@intlify/shared": "9.14.5", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + } + }, + "node_modules/@intlify/shared": { + "version": "9.14.5", + "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.14.5.tgz", + "integrity": "sha512-9gB+E53BYuAEMhbCAxVgG38EZrk59sxBtv3jSizNL2hEWlgjBjAw1AwpLHtNaeda12pe6W20OGEa0TwuMSRbyQ==", + "license": "MIT", + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -6062,6 +6107,32 @@ "node": ">=10" } }, + "node_modules/vue-i18n": { + "version": "9.14.5", + "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.14.5.tgz", + "integrity": "sha512-0jQ9Em3ymWngyiIkj0+c/k7WgaPO+TNzjKSNq9BvBQaKJECqn9cd9fL4tkDhB5G1QBskGl9YxxbDAhgbFtpe2g==", + "license": "MIT", + "dependencies": { + "@intlify/core-base": "9.14.5", + "@intlify/shared": "9.14.5", + "@vue/devtools-api": "^6.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + }, + "peerDependencies": { + "vue": "^3.0.0" + } + }, + "node_modules/vue-i18n/node_modules/@vue/devtools-api": { + "version": "6.6.4", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz", + "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==", + "license": "MIT" + }, "node_modules/vue-router": { "version": "4.6.3", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.3.tgz", diff --git a/frontent/ops_vue/package.json b/frontent/ops_vue/package.json index d7f0173..e0dc585 100644 --- a/frontent/ops_vue/package.json +++ b/frontent/ops_vue/package.json @@ -22,6 +22,7 @@ "@tabler/icons-vue": "^3.35.0", "pinia": "^3.0.3", "vue": "^3.5.22", + "vue-i18n": "^9.14.5", "vue-router": "^4.5.1" }, "devDependencies": { diff --git a/frontent/ops_vue/src/App.vue b/frontent/ops_vue/src/App.vue index a7a87f3..59f9755 100644 --- a/frontent/ops_vue/src/App.vue +++ b/frontent/ops_vue/src/App.vue @@ -1,6 +1,10 @@ diff --git a/frontent/ops_vue/src/components/HeardMain.vue b/frontent/ops_vue/src/components/HeardMain.vue new file mode 100644 index 0000000..5dc40fd --- /dev/null +++ b/frontent/ops_vue/src/components/HeardMain.vue @@ -0,0 +1,149 @@ + + + + + diff --git a/frontent/ops_vue/src/i18n/en.json b/frontent/ops_vue/src/i18n/en.json new file mode 100644 index 0000000..72161a9 --- /dev/null +++ b/frontent/ops_vue/src/i18n/en.json @@ -0,0 +1,13 @@ +{ + "appname": { + "home": "Home" + }, + "message": { + "hello": "Hello", + "welcome": "Welcome" + }, + "button": { + "submit": "Submit", + "cancel": "Cancel" + } +} diff --git a/frontent/ops_vue/src/i18n/i18n.json b/frontent/ops_vue/src/i18n/i18n.json new file mode 100644 index 0000000..0e0dcd2 --- /dev/null +++ b/frontent/ops_vue/src/i18n/i18n.json @@ -0,0 +1,3 @@ +{ + +} \ No newline at end of file diff --git a/frontent/ops_vue/src/i18n/zh-CN.json b/frontent/ops_vue/src/i18n/zh-CN.json new file mode 100644 index 0000000..97bcac1 --- /dev/null +++ b/frontent/ops_vue/src/i18n/zh-CN.json @@ -0,0 +1,13 @@ +{ + "appname": { + "home": "主页" + }, + "message": { + "hello": "你好", + "welcome": "欢迎" + }, + "button": { + "submit": "提交", + "cancel": "取消" + } +} diff --git a/frontent/ops_vue/src/main.ts b/frontent/ops_vue/src/main.ts index 01573ac..44f9f7a 100644 --- a/frontent/ops_vue/src/main.ts +++ b/frontent/ops_vue/src/main.ts @@ -2,6 +2,7 @@ import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' +import { createI18n } from 'vue-i18n' import App from './App.vue' import router from './router' @@ -10,9 +11,33 @@ import '@tabler/core/dist/css/tabler.min.css' import '@tabler/core/dist/css/tabler-vendors.min.css' import '@tabler/core/dist/js/tabler.min.js' + const app = createApp(App) +// 添加全局变量 +app.config.globalProperties.$appName = 'My Vue App' +app.config.globalProperties.$apiUrl = 'https://api.example.com' +app.config.globalProperties.$currentUser = { + name: 'John Doe', + role: 'admin' +} + + +import en from './i18n/en.json' +import zhCN from './i18n/zh-CN.json' + +const i18n = createI18n({ + legacy: false, // 使用 Composition API 模式 + locale: 'en', + fallbackLocale: 'en', + messages: { + en, + 'zh-CN': zhCN + } +}) + app.use(createPinia()) app.use(router) +app.use(i18n) app.mount('#app') diff --git a/frontent/ops_vue/myfunc.ts b/frontent/ops_vue/src/myfunc.ts similarity index 100% rename from frontent/ops_vue/myfunc.ts rename to frontent/ops_vue/src/myfunc.ts diff --git a/frontent/ops_vue/src/mytablercon.ts b/frontent/ops_vue/src/mytablercon.ts new file mode 100644 index 0000000..3a0cf8e --- /dev/null +++ b/frontent/ops_vue/src/mytablercon.ts @@ -0,0 +1,19 @@ + +export const mytablercon = { + set_bs_theme(color: string){ + + switch(color){ + case "dark": + document.body.setAttribute("data-bs-theme", "dark"); // 暗色模式 + break; + case "light": + document.body.setAttribute("data-bs-theme", "light"); // 亮色模式 + break; + default: + document.body.removeAttribute("data-bs-theme"); // 跟随系统 + } + + + }, + +} diff --git a/frontent/ops_vue/src/views/AboutView.vue b/frontent/ops_vue/src/views/AboutView.vue index 81983bf..a9ca72a 100644 --- a/frontent/ops_vue/src/views/AboutView.vue +++ b/frontent/ops_vue/src/views/AboutView.vue @@ -1,6 +1,6 @@ diff --git a/frontent/ops_vue/src/views/HomeView.vue b/frontent/ops_vue/src/views/HomeView.vue index 7109cea..93687ba 100644 --- a/frontent/ops_vue/src/views/HomeView.vue +++ b/frontent/ops_vue/src/views/HomeView.vue @@ -1,9 +1,22 @@