vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/NFCList/NFCItem.vue

@@ -1,18 +1,22 @@
 <template>
   <view class="nfc-item">
     <view @click.stop="onOpenJson">
-      <view class="nfc-item-row"> 标签ID: {{ nfcItem?.hexString }} </view>
+      <view class="nfc-item-row">
+        {{ t('nfc.tagId') }}: {{ nfcItem?.hexString }}
+      </view>
 
       <view class="nfc-item-row">
-        标签类型: {{ nfcItem?.techs?.join(',') }}
+        {{ t('nfc.tagType') }}: {{ nfcItem?.techs?.join(',') }}
       </view>
 
       <view class="nfc-item-row">
-        技术标准：{{ nfcItem?.readWriteStandard?.join(',') }}
+        {{ t('nfc.standard') }}：{{ nfcItem?.readWriteStandard?.join(',') }}
       </view>
 
       <view class="nfc-item-row">
-        最大传输长度：{{ nfcItem?.maxTransceiveLength ?? 0 }}字节
+        {{ t('nfc.maxTransceiveLength') }}：{{
+          nfcItem?.maxTransceiveLength ?? 0
+        }}{{ t('nfc.unitByte') }}
       </view>
     </view>
     <!-- <view class="nfc-item-row"> {{ scanCodeItem.eventName }} </view> -->
@@ -37,6 +41,9 @@
 import { computed } from 'vue';
 import type { DevTool } from '../../type';
 import { formatDate, isMockWX } from '../../utils';
+import { useI18n } from '../../i18n';
+
+const { t } = useI18n();
 
 const props = defineProps<{
   nfcItem: DevTool.NFCItem;
@@ -59,7 +66,7 @@ const isUseDevSource = computed(() => {
 
 function onOpenJson() {
   emit('openJson', {
-    title: 'NFC 详情',
+    title: t('nfc.detail'),
     data: props.nfcItem,
   });
 }
@@ -84,6 +91,7 @@ function onOpenJson() {
   text-align: right;
   word-break: break-all;
 }
+
 .link {
   cursor: pointer;
   text-decoration: underline;
@@ -98,16 +106,8 @@ function onOpenJson() {
   align-items: center;
   min-height: 24px;
 }
+
 .nfc-item-position > view {
   width: 25%;
 }
-
-.nfc-item-right {
-  text-align: right;
-  word-break: break-all;
-}
-.link {
-  cursor: pointer;
-  text-decoration: underline;
-}
 </style>

package/dist/v3/NFCList/NFCTool.vue

@@ -1,11 +1,11 @@
 <template>
   <view class="nfc-tool" :style="customStyle">
     <view class="nfc-tool-control">
-      <DevToolTitle>NFC 工具</DevToolTitle>
+      <DevToolTitle>{{ t('nfc.toolTitle') }}</DevToolTitle>
 
       <Tag
         mode="info"
-        v-for="item in selectItems"
+        v-for="item in translatedSelectItems"
         :active="item.value === currentSelect"
         :key="item.value"
         customStyle="margin-left: 16px"
@@ -23,32 +23,36 @@
     <scroll-view scroll-y style="height: calc(100% - 32px)">
       <view class="nfc-tool-base">
         <view class="nfc-tool-tips">
-          tips: 工具仅用于开发测试，如做其他用途，后果自负
+          {{ t('nfc.tipsTool') }}
         </view>
-        <DevToolTitle>状态</DevToolTitle>
+        <DevToolTitle>{{ t('nfc.status') }}</DevToolTitle>
         <view class="nfc-tool-status">
-          <view class="nfc-tool-status-key">设备是否支持NFC:</view>
-          <Tag mode="success" v-if="isSupportNFC">支持</Tag>
-          <Tag mode="error" v-else>不支持</Tag>
+          <view class="nfc-tool-status-key">{{ t('nfc.deviceSupport') }}</view>
+          <Tag mode="success" v-if="isSupportNFC">{{ t('nfc.support') }}</Tag>
+          <Tag mode="error" v-else>{{ t('nfc.notSupport') }}</Tag>
         </view>
         <view class="nfc-tool-status">
-          <view class="nfc-tool-status-key">NFC启用状态:</view>
-          <Tag mode="success" v-if="isListening">启用</Tag>
-          <Tag mode="error" v-else>关闭</Tag>
+          <view class="nfc-tool-status-key">{{ t('nfc.enabledStatus') }}</view>
+          <Tag mode="success" v-if="isListening">{{ t('nfc.enabled') }}</Tag>
+          <Tag mode="error" v-else>{{ t('nfc.disabled') }}</Tag>
         </view>
         <view class="nfc-tool-status">
-          <view class="nfc-tool-status-key">NFC连接状态:</view>
-          <Tag mode="success" v-if="isConnected">连接</Tag>
-          <Tag mode="error" v-else>断开</Tag>
+          <view class="nfc-tool-status-key">{{ t('nfc.connectStatus') }}</view>
+          <Tag mode="success" v-if="isConnected">{{ t('nfc.connected') }}</Tag>
+          <Tag mode="error" v-else>{{ t('nfc.disconnected') }}</Tag>
         </view>
 
-        <DevToolTitle>NFC 操作</DevToolTitle>
-        <button class="nfc-tool-button" @click="startHCE">启用NFC扫描</button>
-        <button class="nfc-tool-button" @click="stopHCE">关闭NFC扫描</button>
+        <DevToolTitle>{{ t('nfc.operation') }}</DevToolTitle>
+        <SettingButton class="nfc-tool-button" @click="startHCE">
+          {{ t('nfc.startScan') }}
+        </SettingButton>
+        <SettingButton class="nfc-tool-button" @click="stopHCE">
+          {{ t('nfc.stopScan') }}
+        </SettingButton>
       </view>
 
       <view class="nfc-tool-read" v-if="currentSelect === 'read'">
-        <DevToolTitle>结果</DevToolTitle>
+        <DevToolTitle>{{ t('nfc.result') }}</DevToolTitle>
         <JsonPretty
           virtual
           v-if="showJson"
@@ -58,17 +62,17 @@
           :pathCollapsible="() => false"
           :height="contentHeight - 32 * 5 - 28 * 3 - 16 - 20"
         />
-        <Empty v-else text="暂无结果" />
+        <Empty v-else :text="t('nfc.noResult')" />
       </view>
       <view class="nfc-tool-write" v-if="currentSelect === 'write'">
-        <DevToolTitle>NFC 写入</DevToolTitle>
+        <DevToolTitle>{{ t('nfc.write') }}</DevToolTitle>
         <radio-group
           class="radio-group"
           @change="onChangeFormData('writeMethod', $event)"
         >
           <label
             class="radio-group-item"
-            v-for="item in writeMethods"
+            v-for="item in translatedWriteMethods"
             :key="item.value"
           >
             <radio
@@ -87,20 +91,20 @@
           class="nfc-tool-write-form"
           v-if="formData.writeMethod === 'text'"
         >
-          <DevToolTitle>文本内容</DevToolTitle>
+          <DevToolTitle>{{ t('nfc.textContent') }}</DevToolTitle>
           <textarea
             class="textarea"
             :value="formData.text"
-            placeholder="请输入要写入的文本"
+            :placeholder="t('nfc.placeholderText')"
             @input="onChangeFormData('text', $event)"
           />
         </view>
 
         <view class="nfc-tool-write-form" v-if="formData.writeMethod === 'uri'">
-          <DevToolTitle>网址链接</DevToolTitle>
+          <DevToolTitle>{{ t('nfc.link') }}</DevToolTitle>
           <textarea
             class="textarea"
-            placeholder="请输入要写入的网址, 例如：https://gitee.com/cloud_l/vite-uni-dev-tool"
+            :placeholder="t('nfc.placeholderLink')"
             :value="formData.uri"
             @input="onChangeFormData('uri', $event)"
           />
@@ -110,28 +114,28 @@
           class="nfc-tool-write-form"
           v-if="formData.writeMethod === 'wifi'"
         >
-          <DevToolTitle>WIFI配置</DevToolTitle>
+          <DevToolTitle>{{ t('nfc.wifiConfig') }}</DevToolTitle>
           <input
             class="input"
-            placeholder="WIFI名称（SSID）"
+            :placeholder="t('nfc.placeholderSsid')"
             :value="formData.ssid"
             @input="onChangeFormData('ssid', $event)"
           />
           <input
             class="input"
-            placeholder="WIFI密码"
+            :placeholder="t('nfc.placeholderPassword')"
             type="password"
             :value="formData.password"
             @input="onChangeFormData('password', $event)"
           />
-          <view class="sub-title">加密方式：</view>
+          <view class="sub-title">{{ t('nfc.encryption') }}</view>
           <radio-group
             class="radio-group"
             @change="onChangeFormData('authType', $event)"
           >
             <label
               class="radio-group-item"
-              v-for="item in encryptionMethods"
+              v-for="item in translatedEncryptionMethods"
               :key="item.value"
             >
               <radio
@@ -150,43 +154,43 @@
           class="nfc-tool-write-form"
           v-if="formData.writeMethod === 'card'"
         >
-          <DevToolTitle>名片信息</DevToolTitle>
+          <DevToolTitle>{{ t('nfc.cardInfo') }}</DevToolTitle>
           <input
             class="input"
-            placeholder="姓名"
+            :placeholder="t('nfc.placeholderName')"
             :value="formData.name"
             @input="onChangeFormData('name', $event)"
           />
           <input
             class="input"
-            placeholder="公司"
+            :placeholder="t('nfc.placeholderOrg')"
             :value="formData.organization"
             @input="onChangeFormData('organization', $event)"
           />
           <input
             class="input"
-            placeholder="电话"
+            :placeholder="t('nfc.placeholderTel')"
             :value="formData.tel"
             @input="onChangeFormData('tel', $event)"
           />
           <input
             class="input"
-            placeholder="地址"
+            :placeholder="t('nfc.placeholderAddress')"
             :value="formData.address"
             @input="onChangeFormData('address', $event)"
           />
           <input
             class="input"
-            placeholder="网址"
+            :placeholder="t('nfc.placeholderWeb')"
             :value="formData.uri"
             @input="onChangeFormData('uri', $event)"
           />
         </view>
         <view class="nfc-tool-write-form" v-if="formData.writeMethod === 'tel'">
-          <DevToolTitle>电话</DevToolTitle>
+          <DevToolTitle>{{ t('nfc.tel') }}</DevToolTitle>
           <input
             class="input"
-            placeholder="电话: 例如 188888888888"
+            :placeholder="t('nfc.placeholderTelInput')"
             :value="formData.tel"
             @input="onChangeFormData('tel', $event)"
           />
@@ -195,31 +199,31 @@
           class="nfc-tool-write-form"
           v-if="formData.writeMethod === 'packageName'"
         >
-          <DevToolTitle>APP启动</DevToolTitle>
+          <DevToolTitle>{{ t('nfc.appLaunch') }}</DevToolTitle>
           <input
             class="input"
-            placeholder="APP包名 例如: com.example.app"
+            :placeholder="t('nfc.placeholderPkg')"
             :value="formData.packageName"
             @input="onChangeFormData('packageName', $event)"
           />
         </view>
-        <button class="nfc-tool-button" @click="onWrite">开始写入</button>
+        <SettingButton @click="onWrite">{{
+          t('nfc.startWrite')
+        }}</SettingButton>
         <view class="nfc-tool-tips">
-          tips: 写入过程中请勿移动，防止写入失败
+          {{ t('nfc.tipsWriting') }}
         </view>
       </view>
       <view class="nfc-tool-copy" v-if="currentSelect === 'copy'">
-        <DevToolTitle>NFC 复制</DevToolTitle>
-        <DevToolTitle>第一步：启用NFC扫描读取源标签</DevToolTitle>
-        <DevToolTitle>
-          第二步：更换为目标标签，将源标签复制到目标标签
-        </DevToolTitle>
-        <button class="nfc-tool-button" @click="onCopy">复制</button>
+        <DevToolTitle>{{ t('nfc.copy') }}</DevToolTitle>
+        <DevToolTitle>{{ t('nfc.step1') }}</DevToolTitle>
+        <DevToolTitle>{{ t('nfc.step2') }}</DevToolTitle>
+        <SettingButton @click="onCopy">{{ t('nfc.toCopy') }}</SettingButton>
         <view class="nfc-tool-tips">
-          tips: 复制过程中请勿移动，防止写入失败
+          {{ t('nfc.tipsCopying') }}
         </view>
-        <DevToolTitle>第三步：写入完成之后关闭NFC扫描</DevToolTitle>
-        <button class="nfc-tool-button" @click="stopHCE">关闭NFC扫描</button>
+        <DevToolTitle>{{ t('nfc.step3') }}</DevToolTitle>
+        <SettingButton @click="stopHCE">{{ t('nfc.stopScan') }}</SettingButton>
       </view>
     </scroll-view>
   </view>
@@ -232,8 +236,36 @@ import DevToolTitle from '../DevToolTitle/index.vue';
 import JsonPretty from '../JsonPretty/index.vue';
 import Empty from '../Empty/index.vue';
 import useNFC from '../hooks/useNFC';
+import SettingButton from '../SettingButton/index.vue';
 import { selectItems, writeMethods, encryptionMethods } from './const';
-const props = defineProps<{
+import { useI18n } from '../../i18n';
+
+const { t } = useI18n();
+
+const translatedSelectItems = computed(() => {
+  return selectItems.map((item) => ({
+    ...item,
+    label: item.value === 'read' ? t('nfc.read') : t('nfc.writeLabel'),
+  }));
+});
+
+const translatedWriteMethods = computed(() => {
+  return writeMethods.map((item) => ({
+    ...item,
+    label: t(`nfc.writeMethods.${item.value}`),
+  }));
+});
+
+const translatedEncryptionMethods = computed(() => {
+  return encryptionMethods.map((item) => ({
+    ...item,
+    label:
+      t(`nfc.authTypes.${item.value}`) !== `nfc.authTypes.${item.value}`
+        ? t(`nfc.authTypes.${item.value}`)
+        : item.label,
+  }));
+});
+const _props = defineProps<{
   contentHeight: number;
   customStyle?: Record<string, any>;
 }>();
@@ -270,7 +302,7 @@ const {
   isListening,
   startHCE,
   stopHCE,
-  writeNdfText,
+  writeNdefText,
   writeNdefUri,
   writeNdefAndroidApp,
   writeNdefWifi,
@@ -293,7 +325,7 @@ function onChangeFormData(key: keyof typeof formData, e: any) {
 function onWrite() {
   switch (formData.writeMethod) {
     case 'text':
-      writeNdfText(formData.text);
+      writeNdefText(formData.text);
       break;
     case 'uri':
       writeNdefUri(formData.uri);
@@ -314,15 +346,14 @@ function onWrite() {
     case 'card':
       if (!formData.name) {
         uni.showToast({
-          title: '请填写姓名',
+          title: t('nfc.toast.enterName'),
           icon: 'none',
         });
-
         return;
       }
       if (!formData.tel) {
         uni.showToast({
-          title: '请填写电话',
+          title: t('nfc.toast.enterTel'),
           icon: 'none',
         });
         return;
@@ -335,6 +366,7 @@ function onWrite() {
         version: 'V3.0',
         organization: formData.organization,
       });
+      break;
     default:
       break;
   }
@@ -345,7 +377,7 @@ function onCopy() {
   // 复制到目标标签
   // 断开连接
   uni.showToast({
-    title: 'NFC 卡购买中...',
+    title: t('nfc.copying'),
     icon: 'none',
   });
 }
@@ -355,38 +387,41 @@ function onCopy() {
   position: fixed;
   width: 100vw;
   height: 100%;
-
   top: 0;
   left: 0;
-
   background-color: var(--dev-tool-bg3-color);
   box-sizing: border-box;
 }
+
 .nfc-tool-control {
   padding: 0 16px;
   display: flex;
   align-items: center;
+
   /* gap: 12px; */
   height: 32px;
   border-bottom: 1px solid var(--dev-tool-border-color);
   box-sizing: border-box;
 }
+
 .nfc-tool-tips {
-  font-size: 10px;
+  font-size: var(--dev-tool-tips-font-size);
   line-height: 20px;
   color: #616161;
 }
+
 .nfc-tool-base {
   padding: 0 16px;
 }
+
 .nfc-tool-status {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 28px;
   word-break: break-all;
-  font-size: 12px;
 }
+
 .nfc-tool-status-key {
   white-space: nowrap;
   margin-right: 8px;
@@ -398,22 +433,7 @@ function onCopy() {
 .nfc-tool-copy {
   padding: 0 16px;
 }
-.nfc-tool-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 32px;
-  border-radius: 4px;
-  color: #fff;
-  outline: none;
-  border: 1px solid transparent;
-  background-color: var(--dev-tool-main-color);
-  transform: all 0.3s;
-  font-size: var(--dev-tool-base-font-size);
-  padding: 0;
-  cursor: pointer;
-}
+
 .nfc-tool-button + .nfc-tool-button {
   margin-top: 8px;
 }
@@ -422,35 +442,33 @@ function onCopy() {
   display: flex;
   flex-wrap: wrap;
 }
+
 .radio-group-item {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 33.33%;
   margin-bottom: 6px;
-  font-size: 12px;
 }
 
 .textarea {
   padding: 6px;
   width: 100%;
   box-sizing: border-box;
-  font-size: 12px;
   border: 1px solid var(--dev-tool-border-color);
 }
 
 .input {
   padding: 0 6px;
   height: 24px;
-  font-size: 12px;
   border: 1px solid var(--dev-tool-border-color);
 }
+
 .input + .input {
   margin-top: 8px;
 }
 
 .sub-title {
-  font-size: 12px;
   line-height: 20px;
 }
 

package/dist/v3/NFCList/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="nfc-content">
     <view class="nfc-control">
-      <DevToolTitle> NFC 列表 </DevToolTitle>
+      <DevToolTitle> {{ t('nfc.title') }} </DevToolTitle>
 
       <Tag
         mode="clear"
@@ -9,12 +9,12 @@
         customStyle="margin:0 16px 0 auto"
         @click="emit('openTool')"
       >
-        工具
+        {{ t('common.tool') }}
       </Tag>
-      <Tag mode="clear" @click="emit('clear')"> 清空 </Tag>
+      <Tag mode="clear" @click="emit('clear')"> {{ t('common.clear') }} </Tag>
     </view>
 
-    <VirtualListPro
+    <VirtualList
       v-if="nfcList && nfcList?.length > 0"
       class="nfc-list"
       :pageSize="20"
@@ -40,7 +40,7 @@
           />
         </AutoSize>
       </template>
-    </VirtualListPro>
+    </VirtualList>
 
     <Empty v-else />
   </view>
@@ -50,11 +50,14 @@ import DevToolTitle from '../DevToolTitle/index.vue';
 import NFCItem from './NFCItem.vue';
 import Tag from '../Tag/index.vue';
 import Empty from '../Empty/index.vue';
-import VirtualListPro from '../VirtualListPro/index.vue';
-import AutoSize from '../VirtualListPro/AutoSize.vue';
+import VirtualList from '../VirtualList/index.vue';
+import AutoSize from '../VirtualList/AutoSize.vue';
 import type { DevTool } from '../../type';
+import { useI18n } from '../../i18n';
 
-const props = defineProps<{
+const { t } = useI18n();
+
+const _props = defineProps<{
   nfcList?: DevTool.NFCItem[];
   zIndex?: number;
   contentHeight: number;
@@ -65,8 +68,8 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'clear'): void;
   (e: 'openTool'): void;
-  (e: 'openJson', value?: DevTool.Arg): void;
-  (e: 'openCode', value: { title?: string; data: Record<string, any> }): void;
+  (e: 'openJson', value?: { title?: string; data: Record<string, any> }): void;
+  (e: 'openCode', value?: string): void;
 }>();
 </script>
 <style scoped>
@@ -80,6 +83,7 @@ const emit = defineEmits<{
   display: flex;
   align-items: center;
   justify-content: space-between;
+
   /* gap: 8px; */
   padding: 0 16px;
   height: 32px;