Skip to content

Commit cbd4aaa

Browse files
jevin98jevin98
authored
refactor: use WXT i18n (#7)
1 parent b06840b commit cbd4aaa

9 files changed

Lines changed: 92 additions & 93 deletions

File tree

‎entrypoints/devtools-panel/devtools-panel.vue‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script setup lang="ts">
2-
import { ElBacktop, ElButton, ElCheckbox, ElIcon, ElInput, ElOption, ElSelect, ElTable, ElTableColumn, ElText, ElTooltip } from'element-plus'
2+
import { ElBacktop, ElButton, ElCheckbox, ElIcon, ElInput, ElTable, ElTableColumn, ElText, ElTooltip } from'element-plus'
33
import { defineComponent, h } from'vue'
44
import { useDevToolsPanel } from'./hooks/useDevToolsPanel'
5+
import { t } from'./lang'
56
import { filterJoin } from'./utils'
67
78
const {
@@ -44,29 +45,22 @@ const PropertyNode = defineComponent({
4445
<h2class="font-bold text-center text-lg">
4546
DOM Diff
4647
</h2>
47-
48-
<ElSelectv-model="$i18n.locale" class="!w-[100px] !absolute !right-0 !top-0" size="small">
49-
<ElOptionv-for="localein$i18n.availableLocales" :key="`locale-${locale}`" :value="locale">
50-
{{ locale }}
51-
</ElOption>
52-
</ElSelect>
53-
5448
<ElText class="block" type="primary">
55-
{{ $t('info') }}
49+
{{ t('info') }}
5650
</ElText>
5751

5852
<ElButton class="mt-[10px]" type="warning" plain @click="handleClearSelection">
59-
{{ $t('removeBtn') }}
53+
{{ t('removeBtn') }}
6054
</ElButton>
6155

6256
<ElTextv-if="!renderCssDiffs.length" class="block !mt-[10px]" type="danger">
63-
{{ $t('selectedInfo') }}
57+
{{ t('selectedInfo') }}
6458
</ElText>
6559

6660
<divclass="flex justify-between my-3">
67-
<ElInputv-model="inputValue" :placeholder="$t('inputPlaceholder')" clearable class="!w-[50%]" />
61+
<ElInputv-model="inputValue" :placeholder="t('inputPlaceholder')" clearable class="!w-[50%]" />
6862

69-
<ElCheckboxv-model="isAllProperty" :label="$t('isAllProperty')" />
63+
<ElCheckboxv-model="isAllProperty" :label="t('isAllProperty')" />
7064
</div>
7165
<ElTable
7266
class="w-full"
@@ -76,7 +70,7 @@ const PropertyNode = defineComponent({
7670
:row-class-name="onTableRowClassName"
7771
@cell-click="handleCopyStyle"
7872
>
79-
<ElTableColumn prop="property" :label="$t('property')">
73+
<ElTableColumn prop="property" :label="t('property')">
8074
<template #default="scope">
8175
<PropertyNode :text="scope.row.property" />
8276
</template>
@@ -86,7 +80,7 @@ const PropertyNode = defineComponent({
8680
<template #header>
8781
<spanclass="align-middle">{{ filterJoin(el.tag, el.id, el.class) }}</span>
8882

89-
<ElTooltip :content="$t('tableColumnInfo')" trigger="click">
83+
<ElTooltip :content="t('tableColumnInfo')" trigger="click">
9084
<ElIcon class="align-middle ml-[4px]">
9185
<svgxmlns="http://www.w3.org/2000/svg"width="1024"height="1024"viewBox="0 0 1024 1024"><pathfill="currentColor"d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m0 832a384 384 0 0 0 0-768a384 384 0 0 0 0 768m48-176a48 48 0 1 1-96 0a48 48 0 0 1 96 0m-48-464a32 32 0 0 1 32 32v288a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32" /></svg>
9286
</ElIcon>

‎entrypoints/devtools-panel/hooks/useDevToolsPanel.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
importtype{CssDiffsType,SelectedElType}from'../types'
22
import{useClipboard}from'@vueuse/core'
33
import{ElMessage}from'element-plus'
4-
import{useI18n}from'vue-i18n'
4+
import{t}from'../lang'
55
importSMfrom'../message'
66
import{formatStyle,typeFormatStyleValue}from'../utils'
77

88
exportfunctionuseDevToolsPanel(){
9-
const{ t }=useI18n()
109
constinputValue=ref('')
1110

1211
constselectedEl: Array<SelectedElType>=reactive([])

‎entrypoints/devtools-panel/lang.ts‎

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,15 @@
1-
exportdefault{
2-
'en': {
3-
info: 'Select two elements in the Elements tab of the DevTools panel and the style differences will be shown below.',
4-
removeBtn: 'Clear Selection',
5-
selectedInfo: 'Please select two elements to compare.',
6-
property: 'property',
7-
isAllProperty: 'Show all',
8-
tableColumnInfo: 'The header name is concatenated from the DOM\'s `TagName`, `Id`, and `Class` attributes using `$$`.',
9-
copyInfo: 'Copy Success',
10-
inputPlaceholder: 'Please enter the css property you want to view',
11-
},
1+
import{browser}from'wxt/browser'
122

13-
'zh-CN': {
14-
info: '在 DevTools 面板的 Elements 选项卡中选择两个元素，样式差异将显示在下面。',
15-
removeBtn: '清除选择',
16-
selectedInfo: '请选择两个元素进行比较。',
17-
property: '属性名',
18-
isAllProperty: '显示全部',
19-
tableColumnInfo: '表头名称由DOM的 `TagName`、`Id`、`Class` 属性使用 `$$` 拼接而成。',
20-
copyInfo: '复制成功',
21-
inputPlaceholder: '请输入需要查看的css属性',
22-
},
3+
exporttypeMessageKey=
4+
|'info'
5+
|'removeBtn'
6+
|'selectedInfo'
7+
|'property'
8+
|'isAllProperty'
9+
|'tableColumnInfo'
10+
|'copyInfo'
11+
|'inputPlaceholder'
12+
13+
exportfunctiont(key: MessageKey,substitutions?: string|string[]){
14+
returnbrowser.i18n.getMessage(key,substitutions)||key
2315
}

‎entrypoints/devtools-panel/main.ts‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
import{createApp}from'vue'
2-
import{createI18n}from'vue-i18n'
32
importAppfrom'./devtools-panel.vue'
43

5-
importmessagesfrom'./lang'
64
import'element-plus/dist/index.css'
75

8-
consti18n=createI18n({
9-
locale: 'en',
10-
messages,
11-
})
12-
13-
createApp(App).use(i18n).mount('#app')
6+
createApp(App).mount('#app')

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,7 @@
2424
"dependencies": {
2525
"@vue/shared": "^3.5.13",
2626
"element-plus": "^2.9.1",
27-
"vue": "^3.5.12",
28-
"vue-i18n": "10"
27+
"vue": "^3.5.12"
2928
},
3029
"devDependencies": {
3130
"@antfu/eslint-config": "^3.12.0",

‎pnpm-lock.yaml‎

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

‎public/_locales/en/messages.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"extName": {
3+
"message": "CSS-Diff"
4+
},
5+
"extDescription": {
6+
"message": "A browser extension that compares different CSS."
7+
},
8+
"info": {
9+
"message": "Select two elements in the Elements tab of the DevTools panel and the style differences will be shown below."
10+
},
11+
"removeBtn": {
12+
"message": "Clear Selection"
13+
},
14+
"selectedInfo": {
15+
"message": "Please select two elements to compare."
16+
},
17+
"property": {
18+
"message": "property"
19+
},
20+
"isAllProperty": {
21+
"message": "Show all"
22+
},
23+
"tableColumnInfo": {
24+
"message": "The header name is concatenated from the DOM's `TagName`, `Id`, and `Class` attributes using `$$$$`."
25+
},
26+
"copyInfo": {
27+
"message": "Copy Success"
28+
},
29+
"inputPlaceholder": {
30+
"message": "Please enter the css property you want to view"
31+
}
32+
}

‎public/_locales/zh_CN/messages.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"extName": {
3+
"message": "CSS-Diff"
4+
},
5+
"extDescription": {
6+
"message": "一个用于比较 CSS 差异的浏览器扩展。"
7+
},
8+
"info": {
9+
"message": "在 DevTools 面板的 Elements 选项卡中选择两个元素，样式差异将显示在下面。"
10+
},
11+
"removeBtn": {
12+
"message": "清除选择"
13+
},
14+
"selectedInfo": {
15+
"message": "请选择两个元素进行比较。"
16+
},
17+
"property": {
18+
"message": "属性名"
19+
},
20+
"isAllProperty": {
21+
"message": "显示全部"
22+
},
23+
"tableColumnInfo": {
24+
"message": "表头名称由 DOM 的 `TagName`、`Id`、`Class` 属性使用 `$$$$` 拼接而成。"
25+
},
26+
"copyInfo": {
27+
"message": "复制成功"
28+
},
29+
"inputPlaceholder": {
30+
"message": "请输入需要查看的 css 属性"
31+
}
32+
}

‎wxt.config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import { defineConfig } from 'wxt'
44
exportdefaultdefineConfig({
55
browser: 'chrome',
66
manifest: {
7+
name: '__MSG_extName__',
8+
description: '__MSG_extDescription__',
9+
default_locale: 'en',
710
permissions: ['nativeMessaging','tabs','activeTab','scripting'],
811
},
912
modules: ['@wxt-dev/module-vue'],

0 commit comments

Comments
 (0)