style: code format

2025-02-15 21:56:41 +08:00
parent 5aa5d9475d
commit 83021e2170
9 changed files with 535 additions and 1304 deletions
@@ -1,48 +1,31 @@
 <template>
-  <div
-    class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300"
-  >
-    <div
-      class="rounded-3xl shadow-2xl overflow-hidden border w-full max-w-md transition-colors duration-300"
-      :class="[
-        isDarkMode
-          ? 'bg-white bg-opacity-10 backdrop-filter backdrop-blur-xl border-gray-700'
-          : 'bg-white border-gray-200'
-      ]"
-    >
+  <div class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300">
+    <div class="rounded-3xl shadow-2xl overflow-hidden border w-full max-w-md transition-colors duration-300" :class="[
+      isDarkMode
+        ? 'bg-white bg-opacity-10 backdrop-filter backdrop-blur-xl border-gray-700'
+        : 'bg-white border-gray-200'
+    ]">
      <div class="p-8">
-        <h2
-          class="text-3xl font-extrabold text-center mb-8 cursor-pointer transition-colors duration-300"
-          :class="[
-            isDarkMode
-              ? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
-              : 'text-indigo-600'
-          ]"
-          @click="toRetrieve"
-        >
-          {{config.name}}
+        <h2 class="text-3xl font-extrabold text-center mb-8 cursor-pointer transition-colors duration-300" :class="[
+          isDarkMode
+            ? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
+            : 'text-indigo-600'
+        ]" @click="toRetrieve">
+          {{ config.name }}
        </h2>
        <form @submit.prevent="handleSubmit" class="space-y-8">
          <!-- 发送类型选择 -->
          <div class="flex justify-center space-x-4 mb-6">
-            <button
-              type="button"
-              @click="sendType = 'file'"
-              :class="[
-                'px-4 py-2 rounded-lg',
-                sendType === 'file' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
-              ]"
-            >
+            <button type="button" @click="sendType = 'file'" :class="[
+              'px-4 py-2 rounded-lg',
+              sendType === 'file' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
+            ]">
              发送文件
            </button>
-            <button
-              type="button"
-              @click="sendType = 'text'"
-              :class="[
-                'px-4 py-2 rounded-lg',
-                sendType === 'text' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
-              ]"
-            >
+            <button type="button" @click="sendType = 'text'" :class="[
+              'px-4 py-2 rounded-lg',
+              sendType === 'text' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
+            ]">
              发送文本
            </button>
          </div>
@@ -56,37 +39,23 @@
                  isDarkMode
                    ? 'bg-gray-800 bg-opacity-50 border-gray-600 hover:border-indigo-500'
                    : 'bg-gray-100 border-gray-300 hover:border-indigo-500'
-                ]"
-                @click="triggerFileUpload"
-                @dragover.prevent
-                @drop.prevent="handleFileDrop"
-              >
-                <input
-                  id="file-upload"
-                  type="file"
-                  class="hidden"
-                  @change="handleFileUpload"
-                  ref="fileInput"
-                />
+                ]" @click="triggerFileUpload" @dragover.prevent @drop.prevent="handleFileDrop">
+                <input id="file-upload" type="file" class="hidden" @change="handleFileUpload" ref="fileInput" />
                <div class="absolute inset-0 w-full h-full" v-if="uploadProgress > 0">
                  <BorderProgressBar :progress="uploadProgress" />
                </div>
-                <UploadCloudIcon
-                  :class="[
-                    'w-16 h-16 transition-colors duration-300',
-                    isDarkMode
-                      ? 'text-gray-400 group-hover:text-indigo-400'
-                      : 'text-gray-600 group-hover:text-indigo-600'
-                  ]"
-                />
-                <p
-                  :class="[
-                    'mt-4 text-sm transition-colors duration-300 w-full text-center',
-                    isDarkMode
-                      ? 'text-gray-400 group-hover:text-indigo-400'
-                      : 'text-gray-600 group-hover:text-indigo-600'
-                  ]"
-                >
+                <UploadCloudIcon :class="[
+                  'w-16 h-16 transition-colors duration-300',
+                  isDarkMode
+                    ? 'text-gray-400 group-hover:text-indigo-400'
+                    : 'text-gray-600 group-hover:text-indigo-600'
+                ]" />
+                <p :class="[
+                  'mt-4 text-sm transition-colors duration-300 w-full text-center',
+                  isDarkMode
+                    ? 'text-gray-400 group-hover:text-indigo-400'
+                    : 'text-gray-600 group-hover:text-indigo-600'
+                ]">
                  <span class="block truncate">
                    {{ selectedFile ? selectedFile.name : '点击或拖放文件到此处上传' }}
                  </span>
@@ -99,18 +68,12 @@
            <div v-else key="text" class="grid grid-cols-1 gap-8">
              <!-- 文本输入区域 -->
              <div v-if="sendType === 'text'" class="flex flex-col">
-                <textarea
-                  id="text-content"
-                  v-model="textContent"
-                  rows="7"
-                  :class="[
-                    'flex-grow px-4 py-3 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 resize-none',
-                    isDarkMode
-                      ? 'bg-gray-800 bg-opacity-50 text-white'
-                      : 'bg-white text-gray-900 border border-gray-300'
-                  ]"
-                  placeholder="在此输入要发送的文本..."
-                ></textarea>
+                <textarea id="text-content" v-model="textContent" rows="7" :class="[
+                  'flex-grow px-4 py-3 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 resize-none',
+                  isDarkMode
+                    ? 'bg-gray-800 bg-opacity-50 text-white'
+                    : 'bg-white text-gray-900 border border-gray-300'
+                ]" placeholder="在此输入要发送的文本..."></textarea>
              </div>
            </div>
          </transition>
@@ -119,51 +82,38 @@
            <label :class="['text-sm font-medium', isDarkMode ? 'text-gray-300' : 'text-gray-700']">
              过期方式
            </label>
-            <select
-              v-model="expirationMethod"
-              :class="[
-                'px-4 py-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500',
-                isDarkMode
-                  ? 'bg-gray-800 bg-opacity-50 text-white'
-                  : 'bg-white text-gray-900 border border-gray-300'
-              ]"
-            >
+            <select v-model="expirationMethod" :class="[
+              'px-4 py-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500',
+              isDarkMode
+                ? 'bg-gray-800 bg-opacity-50 text-white'
+                : 'bg-white text-gray-900 border border-gray-300'
+            ]">
              <option v-for="item in config.expireStyle" :value="item" :key="item">
                {{ getUnit(item) }}
              </option>
            </select>
            <div v-if="expirationMethod !== 'forever'" class="flex items-center space-x-2">
              <div class="relative flex-grow">
-                <input
-                  v-model="expirationValue"
-                  type="number"
-                  :placeholder="getPlaceholder()"
-                  :class="[
-                    'w-full px-4 py-2 pr-16 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500',
-                    isDarkMode
-                      ? 'bg-gray-800 bg-opacity-50 text-white'
-                      : 'bg-white text-gray-900 border border-gray-300'
-                  ]"
-                />
-                <span
-                  :class="[
-                    'absolute right-3 top-1/2 transform -translate-y-1/2',
-                    isDarkMode ? 'text-gray-300' : 'text-gray-700'
-                  ]"
-                >
+                <input v-model="expirationValue" type="number" :placeholder="getPlaceholder()" :class="[
+                  'w-full px-4 py-2 pr-16 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500',
+                  isDarkMode
+                    ? 'bg-gray-800 bg-opacity-50 text-white'
+                    : 'bg-white text-gray-900 border border-gray-300'
+                ]" />
+                <span :class="[
+                  'absolute right-3 top-1/2 transform -translate-y-1/2',
+                  isDarkMode ? 'text-gray-300' : 'text-gray-700'
+                ]">
                  {{ getUnit() }}
                </span>
              </div>
            </div>
          </div>
          <!-- 提交按钮 -->
-          <button
-            type="submit"
-            class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-4 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"
-          >
+          <button type="submit"
+            class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-4 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group">
            <span
-              class="absolute top-0 left-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300"
-            ></span>
+              class="absolute top-0 left-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
            <span class="relative z-10 flex items-center justify-center text-lg">
              <SendIcon class="w-6 h-6 mr-2" />
              <span>安全寄送</span>
@@ -177,22 +127,14 @@
        </div>
      </div>

-      <div
-        class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
-        :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
-      >
-        <span
-          class="text-sm flex items-center"
-          :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-        >
+      <div class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
+        :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']">
+        <span class="text-sm flex items-center" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
          <ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
          安全加密
        </span>
-        <button
-          @click="toggleDrawer"
-          class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
-          :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-        >
+        <button @click="toggleDrawer" class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
+          :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']">
          发件记录
          <ClipboardListIcon class="w-4 h-4 ml-1" />
        </button>
@@ -201,84 +143,56 @@

    <!-- 抽屉式发件记录 -->
    <transition name="drawer">
-      <div
-        v-if="showDrawer"
+      <div v-if="showDrawer"
        class="fixed inset-y-0 right-0 w-full sm:w-120 bg-opacity-70 backdrop-filter backdrop-blur-xl shadow-2xl z-50 overflow-hidden flex flex-col"
-        :class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
-      >
-        <div
-          class="flex justify-between items-center p-6 border-b"
-          :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
-        >
+        :class="[isDarkMode ? 'bg-gray-900' : 'bg-white']">
+        <div class="flex justify-between items-center p-6 border-b"
+          :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
          <h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
            发件记录
          </h3>
-          <button
-            @click="toggleDrawer"
-            class="hover:text-white transition duration-300"
-            :class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']"
-          >
+          <button @click="toggleDrawer" class="hover:text-white transition duration-300"
+            :class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']">
            <XIcon class="w-6 h-6" />
          </button>
        </div>
        <div class="flex-grow overflow-y-auto p-6">
          <transition-group name="list" tag="div" class="space-y-4">
-            <div
-              v-for="record in sendRecords"
-              :key="record.id"
+            <div v-for="record in sendRecords" :key="record.id"
              class="bg-opacity-50 rounded-lg p-4 flex items-center shadow-md hover:shadow-lg transition duration-300 transform hover:scale-102"
-              :class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']"
-            >
+              :class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']">
              <div class="flex-shrink-0 mr-4">
-                <FileIcon
-                  class="w-10 h-10"
-                  :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-                />
+                <FileIcon class="w-10 h-10" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
              </div>
              <div class="flex-grow min-w-0 mr-4">
-                <p
-                  class="font-medium text-lg truncate"
-                  :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-                >
+                <p class="font-medium text-lg truncate" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
                  {{ record.filename ? record.filename : 'Text' }}
                </p>
-                <p
-                  class="text-sm truncate"
-                  :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
-                >
+                <p class="text-sm truncate" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
                  {{ record.date }} · {{ record.size }}
                </p>
              </div>
              <div class="flex-shrink-0 flex space-x-2">
-                <button
-                  @click="copyRetrieveLink(record.retrieveCode)"
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
-                  :class="[
+                <button @click="copyRetrieveLink(record.retrieveCode)"
+                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
                    isDarkMode
                      ? 'hover:bg-blue-400 text-blue-400'
                      : 'hover:bg-blue-100 text-blue-600'
-                  ]"
-                >
+                  ]">
                  <ClipboardCopyIcon class="w-5 h-5" />
                </button>
-                <button
-                  @click="viewDetails(record)"
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
-                  :class="[
+                <button @click="viewDetails(record)"
+                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
                    isDarkMode
                      ? 'hover:bg-green-400 text-green-400'
                      : 'hover:bg-green-100 text-green-600'
-                  ]"
-                >
+                  ]">
                  <EyeIcon class="w-5 h-5" />
                </button>
-                <button
-                  @click="deleteRecord(record.id)"
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
-                  :class="[
+                <button @click="deleteRecord(record.id)"
+                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
                    isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600'
-                  ]"
-                >
+                  ]">
                  <TrashIcon class="w-5 h-5" />
                </button>
              </div>
@@ -290,53 +204,34 @@

    <!-- 记录详情弹窗 -->
    <transition name="fade">
-      <div
-        v-if="selectedRecord"
-        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      >
+      <div v-if="selectedRecord" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div
          class="p-8 rounded-2xl max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70"
-          :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"
-        >
-          <h3
-            class="text-2xl font-bold mb-6"
-            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-          >
+          :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
+          <h3 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
            文件详情
          </h3>
          <div class="space-y-4">
            <div class="flex items-center">
-              <FileIcon
-                class="w-6 h-6 mr-3"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
+              <FileIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
                <span class="font-medium">文件名：</span>{{ selectedRecord.filename }}
              </p>
            </div>
            <div class="flex items-center">
-              <CalendarIcon
-                class="w-6 h-6 mr-3"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
+              <CalendarIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
                <span class="font-medium">发送日期：</span>{{ selectedRecord.date }}
              </p>
            </div>
            <div class="flex items-center">
-              <HardDriveIcon
-                class="w-6 h-6 mr-3"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
+              <HardDriveIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
                <span class="font-medium">文件大小：</span>{{ selectedRecord.size }}
              </p>
            </div>
            <div class="flex items-center">
-              <ClockIcon
-                class="w-6 h-6 mr-3"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
+              <ClockIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
                <span class="font-medium">过期时间：</span>{{ selectedRecord.expiration }}
              </p>
@@ -346,16 +241,12 @@
          <!-- 取件码和二维码部分 -->
          <div class="mt-6 flex justify-between items-center">
            <div class="flex flex-col items-center w-1/2 pr-2">
-              <h4
-                class="text-lg font-semibold mb-3"
-                :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-              >
+              <h4 class="text-lg font-semibold mb-3" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
                取件码
              </h4>
              <div
                class="bg-gray-100 p-3 rounded-lg shadow-md cursor-pointer hover:bg-gray-200 transition-colors duration-300 w-full text-center"
-                @click="copyRetrieveCode(selectedRecord.retrieveCode)"
-              >
+                @click="copyRetrieveCode(selectedRecord.retrieveCode)">
                <p class="text-2xl font-bold text-indigo-600">{{ selectedRecord.retrieveCode }}</p>
              </div>
              <p class="mt-2 text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
@@ -363,10 +254,7 @@
              </p>
            </div>
            <div class="flex flex-col items-center w-1/2 pl-2">
-              <h4
-                class="text-lg font-semibold mb-3"
-                :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-              >
+              <h4 class="text-lg font-semibold mb-3" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
                二维码
              </h4>
              <div class="bg-white p-2 rounded-lg shadow-md">
@@ -378,10 +266,8 @@
            </div>
          </div>

-          <button
-            @click="selectedRecord = null"
-            class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105"
-          >
+          <button @click="selectedRecord = null"
+            class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105">
            关闭
          </button>
        </div>
@@ -437,7 +323,6 @@ const sendRecords = computed(() => fileDataStore.shareData)

 // 新增状态
 const fileHash = ref('')
-const uploadedChunks = ref<Set<number>>(new Set())

 const triggerFileUpload = () => {
  fileInput.value?.click()
@@ -461,7 +346,7 @@ const handleFileDrop = async (event: DragEvent) => {

 const calculateFileHash = async (file: File): Promise<string> => {
  return new Promise((resolve) => {
-    const chunkSize = 2097152 // 2MB
+    const chunkSize = 2097152
    const spark = new SparkMD5.ArrayBuffer()
    const fileReader = new FileReader()

@@ -489,67 +374,6 @@ const calculateFileHash = async (file: File): Promise<string> => {
  })
 }

-const startChunkUpload = async () => {
-  if (!selectedFile.value) return
-
-  const chunkSize = 1024 * 1024 // 1MB 每片
-  const totalChunks = Math.ceil(selectedFile.value.size / chunkSize)
-
-  // 检查已上传的切片
-  const { uploadedList } = await checkUploadedChunks(fileHash.value)
-  uploadedChunks.value = new Set(uploadedList)
-
-  for (let i = 0; i < totalChunks; i++) {
-    if (uploadedChunks.value.has(i)) {
-      console.log(`切片 ${i} 已上传,跳过`)
-      continue
-    }
-
-    const start = i * chunkSize
-    const end = Math.min(start + chunkSize, selectedFile.value.size)
-    const chunk = selectedFile.value.slice(start, end)
-
-    // 上传每个切片
-    await uploadChunk(chunk, i, totalChunks)
-
-    // 更新进度
-    uploadProgress.value = ((uploadedChunks.value.size + 1) / totalChunks) * 100
-  }
-
-  // 所有切片上传完成,通知服务器合并文件
-  await mergeChunks(fileHash.value, totalChunks)
-
-  alertStore.showAlert('文件上传完成', 'success')
-}
-
-const checkUploadedChunks = async (fileHash: string) => {
-  console.log(fileHash)
-
-  // 这里应该调用后端API来检查已上传的切片
-  // 现在用模拟数据代替
-  return new Promise<{ uploadedList: number[] }>((resolve) => {
-    setTimeout(() => {
-      resolve({ uploadedList: [] })
-    }, 500)
-  })
-}
-
-const uploadChunk = async (chunk: Blob, index: number, total: number) => {
-  // 这里应该是实际的上传逻辑,现在用setTimeout模拟
-  return new Promise<void>((resolve) => {
-    setTimeout(() => {
-      console.log(`上传切片 ${index + 1}/${total}`)
-      uploadedChunks.value.add(index)
-      resolve()
-    }, 500)
-  })
-}
-
-const mergeChunks = async (fileHash: string, totalChunks: number) => {
-  // 这里应该调用后端API来合并文件切片
-  console.log(`请求合并文件切片, fileHash: ${fileHash}, totalChunks: ${totalChunks}`)
-}
-
 const getPlaceholder = (value: string = expirationMethod.value) => {
  switch (value) {
    case 'day':
@@ -726,7 +550,8 @@ onMounted(() => {

@media (min-width: 640px) {
  .sm\:w-120 {
-    width: 30rem; /* 480px */
+    width: 30rem;
+    /* 480px */
  }
 }

@@ -740,6 +565,7 @@ onMounted(() => {
 .drawer-leave-active {
  transition: transform 0.3s ease;
 }
+
 .drawer-enter-from,
 .drawer-leave-to {
  transform: translateX(100%);
@@ -749,6 +575,7 @@ onMounted(() => {
 .list-leave-active {
  transition: all 0.5s ease;
 }
+
 .list-enter-from,
 .list-leave-to {
  opacity: 0;