vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{NFCList → DevTool/components/NFCList}/NFCTool.vue

@@ -1,478 +1,454 @@
-<template>
-  <view class="nfc-tool" :style="customStyle">
-    <view class="nfc-tool-control">
-      <DevToolTitle>{{ t('nfc.toolTitle') }}</DevToolTitle>
-
-      <Tag
-        mode="info"
-        v-for="item in translatedSelectItems"
-        :active="item.value === currentSelect"
-        :key="item.value"
-        customStyle="margin-left: 16px"
-        @click="onSelect(item)"
-      >
-        {{ item.label }}
-      </Tag>
-
-      <CircularButton
-        style="margin-left: auto"
-        text="×"
-        @click="emit('close')"
-      />
-    </view>
-    <scroll-view scroll-y style="height: calc(100% - 32px)">
-      <view class="nfc-tool-base">
-        <view class="nfc-tool-tips">
-          {{ t('nfc.tipsTool') }}
-        </view>
-        <DevToolTitle>{{ t('nfc.status') }}</DevToolTitle>
-        <view class="nfc-tool-status">
-          <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">{{ 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">{{ 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>{{ 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>{{ t('nfc.result') }}</DevToolTitle>
-        <JsonPretty
-          virtual
-          v-if="showJson"
-          :data="data"
-          :pageSize="20"
-          :nodeSelectable="() => false"
-          :pathCollapsible="() => false"
-          :height="contentHeight - 32 * 5 - 28 * 3 - 16 - 20"
-        />
-        <Empty v-else :text="t('nfc.noResult')" />
-      </view>
-      <view class="nfc-tool-write" v-if="currentSelect === 'write'">
-        <DevToolTitle>{{ t('nfc.write') }}</DevToolTitle>
-        <radio-group
-          class="radio-group"
-          @change="onChangeFormData('writeMethod', $event)"
-        >
-          <label
-            class="radio-group-item"
-            v-for="item in translatedWriteMethods"
-            :key="item.value"
-          >
-            <radio
-              size
-              style="transform: scale(0.8)"
-              color="#9254de"
-              :value="item.value"
-              :checked="item.value === formData.writeMethod"
-            />
-
-            <view>{{ item.label }}</view>
-          </label>
-        </radio-group>
-
-        <view
-          class="nfc-tool-write-form"
-          v-if="formData.writeMethod === 'text'"
-        >
-          <DevToolTitle>{{ t('nfc.textContent') }}</DevToolTitle>
-          <textarea
-            class="textarea"
-            :value="formData.text"
-            :placeholder="t('nfc.placeholderText')"
-            @input="onChangeFormData('text', $event)"
-          />
-        </view>
-
-        <view class="nfc-tool-write-form" v-if="formData.writeMethod === 'uri'">
-          <DevToolTitle>{{ t('nfc.link') }}</DevToolTitle>
-          <textarea
-            class="textarea"
-            :placeholder="t('nfc.placeholderLink')"
-            :value="formData.uri"
-            @input="onChangeFormData('uri', $event)"
-          />
-        </view>
-
-        <view
-          class="nfc-tool-write-form"
-          v-if="formData.writeMethod === 'wifi'"
-        >
-          <DevToolTitle>{{ t('nfc.wifiConfig') }}</DevToolTitle>
-          <input
-            class="input"
-            :placeholder="t('nfc.placeholderSsid')"
-            :value="formData.ssid"
-            @input="onChangeFormData('ssid', $event)"
-          />
-          <input
-            class="input"
-            :placeholder="t('nfc.placeholderPassword')"
-            type="password"
-            :value="formData.password"
-            @input="onChangeFormData('password', $event)"
-          />
-          <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 translatedEncryptionMethods"
-              :key="item.value"
-            >
-              <radio
-                size
-                style="transform: scale(0.8)"
-                color="#9254de"
-                :value="item.value"
-                :checked="item.value === formData.authType"
-              />
-              <view>{{ item.label }}</view>
-            </label>
-          </radio-group>
-        </view>
-
-        <view
-          class="nfc-tool-write-form"
-          v-if="formData.writeMethod === 'card'"
-        >
-          <DevToolTitle>{{ t('nfc.cardInfo') }}</DevToolTitle>
-          <input
-            class="input"
-            :placeholder="t('nfc.placeholderName')"
-            :value="formData.name"
-            @input="onChangeFormData('name', $event)"
-          />
-          <input
-            class="input"
-            :placeholder="t('nfc.placeholderOrg')"
-            :value="formData.organization"
-            @input="onChangeFormData('organization', $event)"
-          />
-          <input
-            class="input"
-            :placeholder="t('nfc.placeholderTel')"
-            :value="formData.tel"
-            @input="onChangeFormData('tel', $event)"
-          />
-          <input
-            class="input"
-            :placeholder="t('nfc.placeholderAddress')"
-            :value="formData.address"
-            @input="onChangeFormData('address', $event)"
-          />
-          <input
-            class="input"
-            :placeholder="t('nfc.placeholderWeb')"
-            :value="formData.uri"
-            @input="onChangeFormData('uri', $event)"
-          />
-        </view>
-        <view class="nfc-tool-write-form" v-if="formData.writeMethod === 'tel'">
-          <DevToolTitle>{{ t('nfc.tel') }}</DevToolTitle>
-          <input
-            class="input"
-            :placeholder="t('nfc.placeholderTelInput')"
-            :value="formData.tel"
-            @input="onChangeFormData('tel', $event)"
-          />
-        </view>
-        <view
-          class="nfc-tool-write-form"
-          v-if="formData.writeMethod === 'packageName'"
-        >
-          <DevToolTitle>{{ t('nfc.appLaunch') }}</DevToolTitle>
-          <input
-            class="input"
-            :placeholder="t('nfc.placeholderPkg')"
-            :value="formData.packageName"
-            @input="onChangeFormData('packageName', $event)"
-          />
-        </view>
-        <SettingButton @click="onWrite">{{
-          t('nfc.startWrite')
-        }}</SettingButton>
-        <view class="nfc-tool-tips">
-          {{ t('nfc.tipsWriting') }}
-        </view>
-      </view>
-      <view class="nfc-tool-copy" v-if="currentSelect === 'copy'">
-        <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">
-          {{ t('nfc.tipsCopying') }}
-        </view>
-        <DevToolTitle>{{ t('nfc.step3') }}</DevToolTitle>
-        <SettingButton @click="stopHCE">{{ t('nfc.stopScan') }}</SettingButton>
-      </view>
-    </scroll-view>
-  </view>
-</template>
-<script lang="ts" setup>
-import { ref, reactive, computed } from 'vue';
-import Tag from '../Tag/index.vue';
-import CircularButton from '../CircularButton/index.vue';
-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';
-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>;
-}>();
-
-const emit = defineEmits<{
-  (e: 'close'): void;
-}>();
-
-const data = ref({});
-const formData = reactive({
-  writeMethod: 'text',
-
-  text: '',
-  uri: 'https://gitee.com/cloud_l/vite-uni-dev-tool',
-
-  authType: 'WPA2-Personal',
-  ssid: '',
-  password: '',
-
-  name: '',
-  organization: '',
-  tel: '188888888888',
-  address: '',
-
-  packageName: 'io.dcloud.HBuilder',
-});
-
-const showJson = computed(() => {
-  return JSON.stringify(data.value) !== '{}';
-});
-const {
-  isConnected,
-  isSupportNFC,
-  isListening,
-  startHCE,
-  stopHCE,
-  writeNdefText,
-  writeNdefUri,
-  writeNdefAndroidApp,
-  writeNdefWifi,
-  writeNdefVcard,
-} = useNFC((nfcInfo) => {
-  console.log('nfcInfo: ', nfcInfo);
-  data.value = nfcInfo;
-});
-
-const currentSelect = ref('read');
-
-function onSelect(item: { label: string; value: string }) {
-  currentSelect.value = item.value;
-}
-
-function onChangeFormData(key: keyof typeof formData, e: any) {
-  formData[key] = e.detail.value;
-}
-
-function onWrite() {
-  switch (formData.writeMethod) {
-    case 'text':
-      writeNdefText(formData.text);
-      break;
-    case 'uri':
-      writeNdefUri(formData.uri);
-      break;
-    case 'tel':
-      writeNdefUri(`tel:${formData.tel}`);
-      break;
-    case 'packageName':
-      writeNdefAndroidApp(formData.packageName);
-      break;
-    case 'wifi':
-      writeNdefWifi({
-        ssid: formData.ssid,
-        password: formData.password,
-        authType: formData.authType,
-      });
-      break;
-    case 'card':
-      if (!formData.name) {
-        uni.showToast({
-          title: t('nfc.toast.enterName'),
-          icon: 'none',
-        });
-        return;
-      }
-      if (!formData.tel) {
-        uni.showToast({
-          title: t('nfc.toast.enterTel'),
-          icon: 'none',
-        });
-        return;
-      }
-      writeNdefVcard({
-        fullName: formData.name,
-        address: formData.address,
-        telephone: formData.tel,
-        url: formData.uri,
-        version: 'V3.0',
-        organization: formData.organization,
-      });
-      break;
-    default:
-      break;
-  }
-}
-
-function onCopy() {
-  // 存储源标签信息
-  // 复制到目标标签
-  // 断开连接
-  uni.showToast({
-    title: t('nfc.copying'),
-    icon: 'none',
-  });
-}
-</script>
-<style scoped>
-.nfc-tool {
-  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: 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;
-}
-
-.nfc-tool-status-key {
-  white-space: nowrap;
-  margin-right: 8px;
-  color: var(--dev-tool-info-color);
-}
-
-.nfc-tool-read,
-.nfc-tool-write,
-.nfc-tool-copy {
-  padding: 0 16px;
-}
-
-.nfc-tool-button + .nfc-tool-button {
-  margin-top: 8px;
-}
-
-.radio-group {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.radio-group-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 33.33%;
-  margin-bottom: 6px;
-}
-
-.textarea {
-  padding: 6px;
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid var(--dev-tool-border-color);
-}
-
-.input {
-  padding: 0 6px;
-  height: 24px;
-  border: 1px solid var(--dev-tool-border-color);
-}
-
-.input + .input {
-  margin-top: 8px;
-}
-
-.sub-title {
-  line-height: 20px;
-}
-
-.nfc-tool-write-form {
-  height: 200px;
-}
-</style>
+<template>
+  <view class="nfc-tool" :style="customStyle">
+    <view class="nfc-tool-control">
+      <DevToolTitle>{{ t('nfc.toolTitle') }}</DevToolTitle>
+
+      <Tag
+        mode="info"
+        v-for="item in translatedSelectItems"
+        :active="item.value === currentSelect"
+        :key="item.value"
+        customStyle="margin-left: 16px"
+        @click="onSelect(item)">
+        {{ item.label }}
+      </Tag>
+
+      <CircularButton
+        style="margin-left: auto"
+        text="×"
+        @click="emit('close')" />
+    </view>
+    <scroll-view scroll-y style="height: calc(100% - 32px)">
+      <view class="nfc-tool-base">
+        <view class="nfc-tool-tips">
+          {{ t('nfc.tipsTool') }}
+        </view>
+        <DevToolTitle>{{ t('nfc.status') }}</DevToolTitle>
+        <view class="nfc-tool-status">
+          <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">{{ 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">{{ 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>{{ 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>{{ t('nfc.result') }}</DevToolTitle>
+        <JsonPretty
+          virtual
+          v-if="showJson"
+          :data="data"
+          :pageSize="20"
+          :nodeSelectable="() => false"
+          :pathCollapsible="() => false"
+          :height="contentHeight - 32 * 5 - 28 * 3 - 16 - 20" />
+        <Empty v-else :text="t('nfc.noResult')" />
+      </view>
+      <view class="nfc-tool-write" v-if="currentSelect === 'write'">
+        <DevToolTitle>{{ t('nfc.write') }}</DevToolTitle>
+        <radio-group
+          class="radio-group"
+          @change="onChangeFormData('writeMethod', $event)">
+          <label
+            class="radio-group-item"
+            v-for="item in translatedWriteMethods"
+            :key="item.value">
+            <radio
+              size
+              style="transform: scale(0.8)"
+              color="#9254de"
+              :value="item.value"
+              :checked="item.value === formData.writeMethod" />
+
+            <view>{{ item.label }}</view>
+          </label>
+        </radio-group>
+
+        <view
+          class="nfc-tool-write-form"
+          v-if="formData.writeMethod === 'text'">
+          <DevToolTitle>{{ t('nfc.textContent') }}</DevToolTitle>
+          <textarea
+            class="textarea"
+            :value="formData.text"
+            :placeholder="t('nfc.placeholderText')"
+            @input="onChangeFormData('text', $event)" />
+        </view>
+
+        <view class="nfc-tool-write-form" v-if="formData.writeMethod === 'uri'">
+          <DevToolTitle>{{ t('nfc.link') }}</DevToolTitle>
+          <textarea
+            class="textarea"
+            :placeholder="t('nfc.placeholderLink')"
+            :value="formData.uri"
+            @input="onChangeFormData('uri', $event)" />
+        </view>
+
+        <view
+          class="nfc-tool-write-form"
+          v-if="formData.writeMethod === 'wifi'">
+          <DevToolTitle>{{ t('nfc.wifiConfig') }}</DevToolTitle>
+          <input
+            class="input"
+            :placeholder="t('nfc.placeholderSsid')"
+            :value="formData.ssid"
+            @input="onChangeFormData('ssid', $event)" />
+          <input
+            class="input"
+            :placeholder="t('nfc.placeholderPassword')"
+            type="password"
+            :value="formData.password"
+            @input="onChangeFormData('password', $event)" />
+          <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 translatedEncryptionMethods"
+              :key="item.value">
+              <radio
+                size
+                style="transform: scale(0.8)"
+                color="#9254de"
+                :value="item.value"
+                :checked="item.value === formData.authType" />
+              <view>{{ item.label }}</view>
+            </label>
+          </radio-group>
+        </view>
+
+        <view
+          class="nfc-tool-write-form"
+          v-if="formData.writeMethod === 'card'">
+          <DevToolTitle>{{ t('nfc.cardInfo') }}</DevToolTitle>
+          <input
+            class="input"
+            :placeholder="t('nfc.placeholderName')"
+            :value="formData.name"
+            @input="onChangeFormData('name', $event)" />
+          <input
+            class="input"
+            :placeholder="t('nfc.placeholderOrg')"
+            :value="formData.organization"
+            @input="onChangeFormData('organization', $event)" />
+          <input
+            class="input"
+            :placeholder="t('nfc.placeholderTel')"
+            :value="formData.tel"
+            @input="onChangeFormData('tel', $event)" />
+          <input
+            class="input"
+            :placeholder="t('nfc.placeholderAddress')"
+            :value="formData.address"
+            @input="onChangeFormData('address', $event)" />
+          <input
+            class="input"
+            :placeholder="t('nfc.placeholderWeb')"
+            :value="formData.uri"
+            @input="onChangeFormData('uri', $event)" />
+        </view>
+        <view class="nfc-tool-write-form" v-if="formData.writeMethod === 'tel'">
+          <DevToolTitle>{{ t('nfc.tel') }}</DevToolTitle>
+          <input
+            class="input"
+            :placeholder="t('nfc.placeholderTelInput')"
+            :value="formData.tel"
+            @input="onChangeFormData('tel', $event)" />
+        </view>
+        <view
+          class="nfc-tool-write-form"
+          v-if="formData.writeMethod === 'packageName'">
+          <DevToolTitle>{{ t('nfc.appLaunch') }}</DevToolTitle>
+          <input
+            class="input"
+            :placeholder="t('nfc.placeholderPkg')"
+            :value="formData.packageName"
+            @input="onChangeFormData('packageName', $event)" />
+        </view>
+        <SettingButton @click="onWrite">
+          {{ t('nfc.startWrite') }}
+        </SettingButton>
+        <view class="nfc-tool-tips">
+          {{ t('nfc.tipsWriting') }}
+        </view>
+      </view>
+      <view class="nfc-tool-copy" v-if="currentSelect === 'copy'">
+        <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">
+          {{ t('nfc.tipsCopying') }}
+        </view>
+        <DevToolTitle>{{ t('nfc.step3') }}</DevToolTitle>
+        <SettingButton @click="stopHCE">{{ t('nfc.stopScan') }}</SettingButton>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, computed } from 'vue';
+import Tag from '../../../components/Tag/index.vue';
+import CircularButton from '../../../components/CircularButton/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import JsonPretty from '../../../components/JsonPretty/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import useNFC from '../../../hooks/useNFC';
+import SettingButton from '../SettingButton/index.vue';
+import { selectItems, writeMethods, encryptionMethods } from './const';
+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>;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const data = ref({});
+const formData = reactive({
+  writeMethod: 'text',
+
+  text: '',
+  uri: 'https://gitee.com/cloud_l/vite-uni-dev-tool',
+
+  authType: 'WPA2-Personal',
+  ssid: '',
+  password: '',
+
+  name: '',
+  organization: '',
+  tel: '188888888888',
+  address: '',
+
+  packageName: 'io.dcloud.HBuilder',
+});
+
+const showJson = computed(() => {
+  return JSON.stringify(data.value) !== '{}';
+});
+const {
+  isConnected,
+  isSupportNFC,
+  isListening,
+  startHCE,
+  stopHCE,
+  writeNdefText,
+  writeNdefUri,
+  writeNdefAndroidApp,
+  writeNdefWifi,
+  writeNdefVcard,
+} = useNFC((nfcInfo) => {
+  console.log('nfcInfo: ', nfcInfo);
+  data.value = nfcInfo;
+});
+
+const currentSelect = ref('read');
+
+function onSelect(item: { label: string; value: string }) {
+  currentSelect.value = item.value;
+}
+
+function onChangeFormData(key: keyof typeof formData, e: any) {
+  formData[key] = e.detail.value;
+}
+
+function onWrite() {
+  switch (formData.writeMethod) {
+    case 'text':
+      writeNdefText(formData.text);
+      break;
+    case 'uri':
+      writeNdefUri(formData.uri);
+      break;
+    case 'tel':
+      writeNdefUri(`tel:${formData.tel}`);
+      break;
+    case 'packageName':
+      writeNdefAndroidApp(formData.packageName);
+      break;
+    case 'wifi':
+      writeNdefWifi({
+        ssid: formData.ssid,
+        password: formData.password,
+        authType: formData.authType,
+      });
+      break;
+    case 'card':
+      if (!formData.name) {
+        uni.showToast({
+          title: t('nfc.toast.enterName'),
+          icon: 'none',
+        });
+        return;
+      }
+      if (!formData.tel) {
+        uni.showToast({
+          title: t('nfc.toast.enterTel'),
+          icon: 'none',
+        });
+        return;
+      }
+      writeNdefVcard({
+        fullName: formData.name,
+        address: formData.address,
+        telephone: formData.tel,
+        url: formData.uri,
+        version: 'V3.0',
+        organization: formData.organization,
+      });
+      break;
+    default:
+      break;
+  }
+}
+
+function onCopy() {
+  // 存储源标签信息
+  // 复制到目标标签
+  // 断开连接
+  uni.showToast({
+    title: t('nfc.copying'),
+    icon: 'none',
+  });
+}
+</script>
+<style scoped>
+.nfc-tool {
+  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: 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;
+}
+
+.nfc-tool-status-key {
+  white-space: nowrap;
+  margin-right: 8px;
+  color: var(--dev-tool-info-color);
+}
+
+.nfc-tool-read,
+.nfc-tool-write,
+.nfc-tool-copy {
+  padding: 0 16px;
+}
+
+.nfc-tool-button + .nfc-tool-button {
+  margin-top: 8px;
+}
+
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.radio-group-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 33.33%;
+  margin-bottom: 6px;
+}
+
+.textarea {
+  padding: 6px;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--dev-tool-border-color);
+}
+
+.input {
+  padding: 0 6px;
+  height: 24px;
+  border: 1px solid var(--dev-tool-border-color);
+}
+
+.input + .input {
+  margin-top: 8px;
+}
+
+.sub-title {
+  line-height: 20px;
+}
+
+.nfc-tool-write-form {
+  height: 200px;
+}
+</style>