Skip to content

Commit ecb01a2

Browse files
wushuangswushuangs
authored
feat: Add i18n for devbox (#7)
* ci: Github workflow arm64 for frontend * Revert "ci: Github workflow arm64 for frontend" This reverts commit 4c3729d. * feat: Add i18n for devbox
1 parent c2d0250 commit ecb01a2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+928
-747
lines changed

‎packages/web/package-lock.json‎

Lines changed: 62 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"pinia": "^2.1.7",
2222
"quasar": "^2.6.0",
2323
"vue": "^3.0.0",
24+
"vue-i18n": "^10.0.0-beta.1",
2425
"vue-router": "^4.0.0"
2526
},
2627
"devDependencies": {

‎packages/web/quasar.config.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ module.exports = configure(function (ctx) {
3636
// app boot file (/src/boot)
3737
// --> boot files are part of "main.js"
3838
// https://v2.quasar.dev/quasar-cli-vite/boot-files
39-
boot: ["monacoplugin", "markdown", "axios", "bytetrade-ui"],
39+
boot: ["monacoplugin", "markdown", "axios", "bytetrade-ui", "i18n"],
4040

4141
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
4242
css: ["app.scss", ctx.dev ? "font.dev.scss" : "font.pro.scss"],
@@ -85,11 +85,13 @@ module.exports = configure(function (ctx) {
8585
open: true, // opens browser window automatically,
8686
proxy: {
8787
"/api": {
88-
target: "http://127.0.0.1:3010/",
88+
// target: "http://127.0.0.1:3010/",
89+
target: "https://devbox.zhaohuaiyuan.myterminus.com/",
8990
changeOrigin: true,
9091
},
9192
"/upload": {
92-
target: "http://127.0.0.1:3010/",
93+
// target: "http://127.0.0.1:3010/",
94+
target: "https://devbox.zhaohuaiyuan.myterminus.com/",
9395
changeOrigin: true,
9496
},
9597

‎packages/web/src/boot/i18n.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { boot } from 'quasar/wrappers';
2+
import { createI18n } from 'vue-i18n';
3+
4+
import messages, { defaultLanguage } from 'src/i18n';
5+
import enUS from '../i18n/en-US';
6+
7+
// Type-define 'en-US' as the master schema for the resource
8+
type MessageSchema = typeof enUS;
9+
10+
// See https://vue-i18n.intlify.dev/guide/advanced/typescript.html#global-resource-schema-type-definition
11+
/* eslint-disable @typescript-eslint/no-empty-interface */
12+
declare module 'vue-i18n' {
13+
// define the locale messages schema
14+
export interface DefineLocaleMessage extends MessageSchema {}
15+
16+
// define the datetime format schema
17+
export interface DefineDateTimeFormat {}
18+
19+
// define the number format schema
20+
export interface DefineNumberFormat {}
21+
}
22+
/* eslint-enable @typescript-eslint/no-empty-interface */
23+
24+
export const i18n = createI18n({
25+
locale: defaultLanguage,
26+
legacy: false,
27+
messages
28+
});
29+
30+
export default boot(({ app }) => {
31+
// Set i18n instance on app
32+
app.use(i18n);
33+
});

‎packages/web/src/components/ConfigComponent.vue‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="config-right-header row items-center justify-between">
44
<div class="row items-center justify-start">
55
<img class="q-mr-sm" src="../assets/icon-txt.svg" style="width: 12px" />
6-
<span class="text-ink-1">App Configuration</span>
6+
<span class="text-ink-1">{{ t('config_name') }}</span>
77
<span
88
class="statusIcon q-ml-sm"
99
:style="{
@@ -34,19 +34,19 @@
3434
no-caps
3535
>
3636
<q-tab
37-
:name="menu.name"
37+
:name="menu.label"
3838
class="menuTab"
3939
v-for="menu in store.configMenu"
40-
:key="menu.name"
40+
:key="menu.label"
4141
>
4242
<div class="row items-center justify-center">
4343
<img
4444
src="../assets/icon-default-active.svg"
45-
v-if="menu.status === 0 && menu.name === tab"
45+
v-if="menu.status === 0 && menu.label === tab"
4646
/>
4747
<img
4848
src="../assets/icon-default.svg"
49-
v-if="menu.status === 0 && menu.name !== tab"
49+
v-if="menu.status === 0 && menu.label !== tab"
5050
/>
5151
<q-icon
5252
name="sym_r_check_circle"
@@ -60,7 +60,9 @@
6060
color="negative"
6161
size="16px"
6262
/>
63-
<span class="q-ml-sm">{{ menu.name }}</span>
63+
<span class="q-ml-sm">{{
64+
t(`enums.CONFIG_TAB.${menu.name}`)
65+
}}</span>
6466
</div>
6567
</q-tab>
6668
</q-tabs>
@@ -98,6 +100,7 @@
98100
<script lang="ts" setup>
99101
import { ref, onMounted, PropType, watch } from 'vue';
100102
import { useQuasar } from 'quasar';
103+
import { useI18n } from 'vue-i18n';
101104
import { onBeforeRouteLeave } from 'vue-router';
102105
import { useDevelopingApps } from '../stores/app';
103106
import { ApplicationInfo } from '@devbox/core';
@@ -108,6 +111,7 @@ import PermissionComponent from './config/PermissionComponent.vue';
108111
import OptionsComponent from './config/OptionsComponent.vue';
109112
import DialogConfirm from './dialog/DialogConfirm.vue';
110113
114+
const { t } = useI18n();
111115
const $q = useQuasar();
112116
const store = useDevelopingApps();
113117
const props = defineProps({

‎packages/web/src/components/ContainerComponent.vue‎

Lines changed: 4 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -13,53 +13,17 @@
1313
</div>
1414
<div class="nodata" v-else>
1515
<img src="../assets/nodata.svg" />
16-
<span class="q-mt-xl">No data.</span>
16+
<span class="q-mt-xl">{{ t('no_data') }}</span>
1717
</div>
1818
</div>
19-
20-
<!-- <div class="q-pa-md column">
21-
<q-table
22-
flat
23-
bordered
24-
title="Sender"
25-
:rows="containers"
26-
:columns="columns"
27-
row-key="id"
28-
wrap-cells
29-
:pagination="initialPagination"
30-
>
31-
<template v-slot:body-cell-action="props">
32-
<q-td :props="props">
33-
<q-btn
34-
v-if="!props.row.id"
35-
label="Bind"
36-
class="col-1"
37-
flat
38-
color="primary"
39-
@click="bindContainer(props.row)"
40-
/>
41-
42-
<q-btn
43-
v-if="props.row.id"
44-
label="UnBind"
45-
class="col-1"
46-
flat
47-
color="primary"
48-
@click="unbindContainer(props.row)"
49-
/>
50-
</q-td>
51-
</template>
52-
</q-table>
53-
</div> -->
5419
</template>
5520

5621
<script lang="ts" setup>
57-
import { ref, watch, onMounted, PropType } from 'vue';
22+
import { ref, onMounted, PropType } from 'vue';
5823
import { useQuasar } from 'quasar';
59-
import axios from 'axios';
60-
import { useRoute } from 'vue-router';
6124
import { useDevelopingApps } from '../stores/app';
6225
import { ApplicationInfo, Container } from '@devbox/core';
26+
import { useI18n } from 'vue-i18n';
6327
import ChooseContainer from './dialog/ChooseContainer.vue';
6428
6529
import ContainerCard from './common/ContainerCard.vue';
@@ -72,6 +36,7 @@ const props = defineProps({
7236
}
7337
});
7438
const $q = useQuasar();
39+
const { t } = useI18n();
7540
7641
const initialPagination = {
7742
sortBy: 'desc',
@@ -86,67 +51,6 @@ onMounted(async () => {
8651
containers.value = await store.getAppContainer(props.app.appName);
8752
});
8853
89-
const columns = [
90-
{
91-
name: 'image',
92-
align: 'left',
93-
label: 'Name',
94-
field: 'image',
95-
sortable: false
96-
},
97-
{
98-
name: 'podSelector',
99-
align: 'left',
100-
label: 'podSelector',
101-
field: 'podSelector',
102-
sortable: false
103-
},
104-
{
105-
name: 'containerName',
106-
align: 'left',
107-
label: 'containerName',
108-
field: 'containerName',
109-
sortable: false
110-
},
111-
{
112-
name: 'id',
113-
align: 'left',
114-
label: 'Container id',
115-
field: 'id',
116-
sortable: false
117-
},
118-
{
119-
name: 'state',
120-
align: 'left',
121-
label: 'state',
122-
field: 'state',
123-
sortable: false
124-
},
125-
{
126-
name: 'devEnv',
127-
align: 'left',
128-
label: 'devEnv',
129-
field: 'devEnv',
130-
sortable: false
131-
},
132-
{
133-
name: 'createTime',
134-
align: 'left',
135-
label: 'createTime',
136-
field: 'createTime',
137-
sortable: false
138-
},
139-
// {
140-
// name: 'updateTime',
141-
// align: 'left',
142-
// label: 'updateTime',
143-
// field: 'updateTime',
144-
// sortable: false,
145-
// },
146-
147-
{ name: 'action', align: 'right', label: 'Action', sortable: false }
148-
];
149-
15054
function bindContainer(container: Container) {
15155
$q.dialog({
15256
component: ChooseContainer,

0 commit comments

Comments
 (0)