feat: redesign send workspace experience

2026-06-03 02:22:24 +08:00
parent 72249dd2dd
commit a9af6b0f1a
4 changed files with 442 additions and 119 deletions
@@ -1,14 +1,26 @@
 <template>
  <div
-    class="rounded-xl p-8 flex flex-col items-center justify-center border-2 border-dashed transition-all duration-300 group cursor-pointer relative"
+    class="rounded-2xl p-8 flex flex-col items-center justify-center border-2 border-dashed transition-all duration-300 group cursor-pointer relative min-h-72 overflow-hidden"
    :class="[
      isDarkMode
-        ? 'bg-gray-800 bg-opacity-50 border-gray-600 hover:border-indigo-500'
-        : 'bg-gray-100 border-gray-300 hover:border-indigo-500',
+        ? 'bg-gray-800/60 border-gray-600 hover:border-indigo-400'
+        : 'bg-white/80 border-gray-300 hover:border-indigo-500',
+      isDragActive
+        ? isDarkMode
+          ? 'border-indigo-400 bg-indigo-500/10 shadow-lg shadow-indigo-900/30'
+          : 'border-indigo-500 bg-indigo-50 shadow-lg shadow-indigo-100'
+        : '',
      statusClass
    ]"
+    role="button"
+    tabindex="0"
+    :aria-busy="isUploading"
    @click="triggerFileUpload"
-    @dragover.prevent
+    @keydown.enter.prevent="triggerFileUpload"
+    @keydown.space.prevent="triggerFileUpload"
+    @dragenter.prevent="handleDragEnter"
+    @dragover.prevent="handleDragOver"
+    @dragleave.prevent="handleDragLeave"
    @drop.prevent="handleFileDrop"
  >
    <input
@@ -20,6 +32,18 @@
      :disabled="isUploading"
      multiple
    />
+    <div
+      class="absolute inset-0 opacity-0 transition-opacity duration-300"
+      :class="[isDragActive ? 'opacity-100' : '']"
+    >
+      <div
+        class="absolute inset-3 rounded-2xl border"
+        :class="[
+          isDarkMode ? 'border-indigo-300/30 bg-indigo-400/5' : 'border-indigo-300 bg-indigo-50/80'
+        ]"
+      ></div>
+    </div>
+
    <div class="absolute inset-0 w-full h-full" v-if="progress > 0">
      <BorderProgressBar :progress="progress" />
    </div>
@@ -27,24 +51,20 @@
    <!-- 上传状态图标 -->
    <component
      :is="statusIcon"
-      :class="['w-16 h-16 transition-colors duration-300', statusIconClass]"
+      :class="['relative z-10 w-16 h-16 transition-colors duration-300', statusIconClass]"
    />

    <!-- 文件名或占位文本 -->
    <p
      :class="[
-        'mt-4 text-sm transition-colors duration-300 w-full text-center',
+        'relative z-10 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 v-if="selectedFiles && selectedFiles.length > 1" class="block">
-        <span
-          v-for="(f, i) in selectedFiles"
-          :key="i"
-          class="block truncate"
-        >{{ f.name }}</span>
+        <span v-for="(f, i) in selectedFiles" :key="i" class="block truncate">{{ f.name }}</span>
      </span>
      <span v-else class="block truncate">
        {{ displayText }}
@@ -52,12 +72,33 @@
    </p>

    <!-- 状态描述或默认描述 -->
-    <p :class="['mt-2 text-xs', statusDescriptionClass]">
+    <p :class="['relative z-10 mt-2 text-xs text-center leading-5', statusDescriptionClass]">
      {{ statusDescription }}
    </p>

+    <div
+      v-if="selectedFiles.length > 1"
+      class="relative z-10 mt-4 flex flex-wrap items-center justify-center gap-2"
+    >
+      <span
+        v-for="file in selectedFiles.slice(0, 3)"
+        :key="`${file.name}-${file.size}`"
+        class="max-w-40 truncate rounded-full px-3 py-1 text-xs"
+        :class="[isDarkMode ? 'bg-gray-700/80 text-gray-200' : 'bg-gray-100 text-gray-700']"
+      >
+        {{ file.name }}
+      </span>
+      <span
+        v-if="selectedFiles.length > 3"
+        class="rounded-full px-3 py-1 text-xs"
+        :class="[isDarkMode ? 'bg-indigo-500/20 text-indigo-200' : 'bg-indigo-100 text-indigo-700']"
+      >
+        +{{ selectedFiles.length - 3 }}
+      </span>
+    </div>
+
    <!-- 进度详情（上传中显示） -->
-    <div v-if="isUploading && showProgressDetails" class="mt-3 w-full">
+    <div v-if="isUploading && showProgressDetails" class="relative z-10 mt-3 w-full">
      <div
        class="flex justify-between text-xs mb-1"
        :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
@@ -148,6 +189,7 @@ const isDarkMode = useInjectedDarkMode()
 const placeholderText = computed(() => props.placeholder || t('send.uploadArea.placeholder'))
 const descriptionText = computed(() => props.description || t('send.uploadArea.description'))
 const fileInput = ref<HTMLInputElement | null>(null)
+const isDragActive = ref(false)

 const isUploading = computed(() => {
  return ['uploading', 'initializing', 'confirming'].includes(props.uploadStatus)
@@ -245,6 +287,24 @@ const triggerFileUpload = () => {
  fileInput.value?.click()
 }

+const handleDragEnter = () => {
+  if (isUploading.value) return
+  isDragActive.value = true
+}
+
+const handleDragOver = () => {
+  if (isUploading.value) return
+  isDragActive.value = true
+}
+
+const handleDragLeave = (event: DragEvent) => {
+  const target = event.currentTarget as HTMLElement
+  const relatedTarget = event.relatedTarget as Node | null
+  if (!relatedTarget || !target.contains(relatedTarget)) {
+    isDragActive.value = false
+  }
+}
+
 const handleFileUpload = (event: Event) => {
  const target = event.target as HTMLInputElement
  const files = target.files
@@ -261,6 +321,7 @@ const handleFileUpload = (event: Event) => {

 const handleFileDrop = (event: DragEvent) => {
  // 上传中不允许拖放
+  isDragActive.value = false
  if (isUploading.value) return
  emit('fileDrop', event)
 }
@@ -222,6 +222,29 @@ export default {
    needRetrieveFile: 'Need to retrieve? Click here',
    sendRecords: 'Send Records',
    secureEncryption: 'Secure Encryption',
+    workspace: {
+      uploadLimit: 'Single File Limit',
+      uploadMode: 'Upload Mode',
+      standardMode: 'Standard',
+      chunkMode: 'Chunked',
+      guestPolicy: 'Guest Upload',
+      guestOpen: 'Allowed',
+      guestClosed: 'Disabled',
+      currentTask: 'Current Task',
+      awaitingFile: 'Waiting for files',
+      fileReady: '{count} files ready',
+      textDraft: 'Text draft, {count} chars',
+      payload: 'Payload',
+      expirationPreview: 'Expiration',
+      security: 'Security',
+      latestRecord: 'Latest Send',
+      noRecord: 'No records yet',
+      copyLink: 'Copy Link',
+      viewDetail: 'View Detail',
+      historyTitle: 'Send History',
+      historyCount: '{count} records',
+      openRecords: 'Open send records'
+    },
    fileDetails: 'File Details',
    expirationMethod: 'Expiration Method',
    expiration: {
@@ -224,6 +224,29 @@ export default {
    needRetrieveFile: '需要取件？点击这里',
    sendRecords: '发件记录',
    secureEncryption: '安全加密',
+    workspace: {
+      uploadLimit: '单文件上限',
+      uploadMode: '上传模式',
+      standardMode: '标准上传',
+      chunkMode: '分片上传',
+      guestPolicy: '游客上传',
+      guestOpen: '允许',
+      guestClosed: '已关闭',
+      currentTask: '当前任务',
+      awaitingFile: '等待选择文件',
+      fileReady: '已选择 {count} 个文件',
+      textDraft: '文本草稿 {count} 字',
+      payload: '发送内容',
+      expirationPreview: '有效期',
+      security: '安全状态',
+      latestRecord: '最近一次发送',
+      noRecord: '暂无记录',
+      copyLink: '复制链接',
+      viewDetail: '查看详情',
+      historyTitle: '发送历史',
+      historyCount: '{count} 条记录',
+      openRecords: '打开发送记录'
+    },
    fileDetail: {
      title: '文件详情',
      content: '文件内容',
@@ -1,23 +1,75 @@
 <template>
  <div
-    class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300"
+    class="min-h-screen px-4 py-16 transition-colors duration-300 sm:px-6 lg:px-8"
    @paste.prevent="handlePaste"
  >
-    <div
-      class="rounded-3xl shadow-2xl overflow-hidden border w-full max-w-md transition-colors duration-300"
+    <main class="mx-auto flex min-h-[calc(100vh-8rem)] w-full max-w-6xl items-center">
+      <div class="grid w-full gap-6 lg:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)]">
+        <section
+          class="rounded-3xl border p-6 shadow-2xl transition-colors duration-300 sm:p-8"
          :class="[
            isDarkMode
-          ? 'bg-white bg-opacity-10 backdrop-filter backdrop-blur-xl border-gray-700'
-          : 'bg-white border-gray-200'
+              ? 'border-gray-700 bg-gray-900/70 shadow-black/30'
+              : 'border-white/80 bg-white/90 shadow-indigo-100'
          ]"
        >
-      <div class="p-8">
-        <PageHeader :title="config.name" @title-click="toRetrieve" />
-        <form @submit.prevent="handleSubmit" class="space-y-8">
-          <SendTypeSelector
-            :selected-type="sendType"
-            @update:selected-type="sendType = $event"
-          />
+          <div class="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
+            <div>
+              <button
+                type="button"
+                @click="toRetrieve"
+                class="text-left text-3xl font-extrabold leading-tight transition-colors"
+                :class="[
+                  isDarkMode
+                    ? 'text-white hover:text-indigo-200'
+                    : 'text-gray-950 hover:text-indigo-700'
+                ]"
+              >
+                {{ config.name }}
+              </button>
+              <p
+                class="mt-3 max-w-2xl text-sm leading-6"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']"
+              >
+                {{ config.description }}
+              </p>
+            </div>
+            <router-link
+              to="/"
+              class="inline-flex shrink-0 items-center justify-center rounded-full border px-4 py-2 text-sm font-medium transition"
+              :class="[
+                isDarkMode
+                  ? 'border-gray-700 text-indigo-200 hover:border-indigo-400 hover:bg-indigo-500/10'
+                  : 'border-indigo-100 bg-indigo-50 text-indigo-700 hover:border-indigo-200 hover:bg-indigo-100'
+              ]"
+            >
+              {{ t('send.needRetrieveFile') }}
+            </router-link>
+          </div>
+
+          <div class="mt-8 grid gap-3 sm:grid-cols-3">
+            <div
+              v-for="item in workspaceStats"
+              :key="item.label"
+              class="rounded-2xl border px-4 py-3"
+              :class="[
+                isDarkMode ? 'border-gray-700 bg-gray-800/60' : 'border-gray-100 bg-gray-50'
+              ]"
+            >
+              <p class="text-xs" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
+                {{ item.label }}
+              </p>
+              <p
+                class="mt-1 truncate text-sm font-semibold"
+                :class="[isDarkMode ? 'text-gray-100' : 'text-gray-900']"
+              >
+                {{ item.value }}
+              </p>
+            </div>
+          </div>
+
+          <form @submit.prevent="handleSubmit" class="mt-8 space-y-7">
+            <SendTypeSelector :selected-type="sendType" @update:selected-type="sendType = $event" />

            <transition name="fade" mode="out-in">
              <div v-if="sendType === 'file'" key="file" class="grid grid-cols-1 gap-8">
@@ -26,13 +78,18 @@
                  :selected-files="selectedFiles"
                  :progress="uploadProgress"
                  :description="uploadDescription"
+                  :upload-status="isSubmitting ? 'uploading' : 'idle'"
                  @file-selected="handleFileSelected"
                  @files-selected="handleFilesSelected"
                  @file-drop="handleFileDrop"
                />
              </div>
              <div v-else key="text" class="grid grid-cols-1 gap-8">
-              <TextInputArea v-model="textContent" :placeholder="t('send.uploadArea.textInput')" />
+                <TextInputArea
+                  v-model="textContent"
+                  :rows="10"
+                  :placeholder="t('send.uploadArea.textInput')"
+                />
              </div>
            </transition>
            <ExpirationSelector
@@ -40,14 +97,13 @@
              v-model:expiration-value="expirationValue"
              :options="expirationOptions"
            />
-          <!-- 提交按钮 -->
            <button
              type="submit"
              :disabled="isSubmitting"
-            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 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none disabled:hover:scale-100"
+              class="group relative w-full overflow-hidden rounded-2xl bg-gray-950 px-6 py-4 text-white transition-all duration-300 hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:translate-y-0"
            >
              <span
-              class="absolute top-0 left-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300"
+                class="absolute inset-0 bg-gradient-to-r from-indigo-500 via-sky-500 to-emerald-400 opacity-90 transition-opacity duration-300 group-hover:opacity-100"
              ></span>
              <span class="relative z-10 flex items-center justify-center text-lg">
                <svg
@@ -76,34 +132,139 @@
              </span>
            </button>
          </form>
-        <div class="mt-6 text-center">
-          <router-link to="/" class="text-indigo-400 hover:text-indigo-300 transition duration-300">
-            {{ t('send.needRetrieveFile') }}
-          </router-link>
+        </section>
+
+        <aside class="grid gap-6">
+          <section
+            class="rounded-3xl border p-6 transition-colors duration-300"
+            :class="[isDarkMode ? 'border-gray-700 bg-gray-900/70' : 'border-white/80 bg-white/85']"
+          >
+            <div class="flex items-center justify-between gap-4">
+              <div>
+                <p
+                  class="text-sm font-medium"
+                  :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']"
+                >
+                  {{ t('send.workspace.currentTask') }}
+                </p>
+                <p
+                  class="mt-2 text-2xl font-bold"
+                  :class="[isDarkMode ? 'text-white' : 'text-gray-950']"
+                >
+                  {{ selectedPayloadLabel }}
+                </p>
              </div>
+              <ShieldCheckIcon class="h-10 w-10 text-emerald-400" />
            </div>

+            <dl class="mt-6 space-y-3">
              <div
-        class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
-        :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
+                v-for="item in readinessItems"
+                :key="item.label"
+                class="flex items-center justify-between gap-4 rounded-2xl px-4 py-3"
+                :class="[isDarkMode ? 'bg-gray-800/70' : 'bg-gray-50']"
              >
-        <span
-          class="text-sm flex items-center"
-          :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
+                <dt class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
+                  {{ item.label }}
+                </dt>
+                <dd
+                  class="text-right text-sm font-semibold"
+                  :class="[isDarkMode ? 'text-gray-100' : 'text-gray-900']"
                >
-          <ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
-          {{ t('send.secureEncryption') }}
-        </span>
+                  {{ item.value }}
+                </dd>
+              </div>
+            </dl>
+          </section>
+
+          <section
+            class="rounded-3xl border p-6 transition-colors duration-300"
+            :class="[isDarkMode ? 'border-gray-700 bg-gray-900/70' : 'border-white/80 bg-white/85']"
+          >
+            <div class="flex items-center justify-between gap-4">
+              <div>
+                <p
+                  class="text-sm font-medium"
+                  :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']"
+                >
+                  {{ t('send.workspace.latestRecord') }}
+                </p>
+                <p
+                  class="mt-2 text-xl font-bold"
+                  :class="[isDarkMode ? 'text-white' : 'text-gray-950']"
+                >
+                  {{ latestRecord ? latestRecord.retrieveCode : t('send.workspace.noRecord') }}
+                </p>
+              </div>
+              <ClipboardListIcon class="h-10 w-10 text-sky-400" />
+            </div>
+
+            <div v-if="latestRecord" class="mt-5 space-y-3">
+              <p class="truncate text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
+                {{ latestRecord.filename }}
+              </p>
+              <div class="grid grid-cols-2 gap-3">
                <button
-          @click="toggleDrawer"
-          class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
-          :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+                  type="button"
+                  class="rounded-xl px-4 py-2 text-sm font-medium transition"
+                  :class="[
+                    isDarkMode
+                      ? 'bg-gray-800 text-gray-100 hover:bg-gray-700'
+                      : 'bg-gray-100 text-gray-800 hover:bg-gray-200'
+                  ]"
+                  @click="copySentRecordLink(latestRecord)"
                >
-          {{ t('send.sendRecords') }}
-          <ClipboardListIcon class="w-4 h-4 ml-1" />
+                  {{ t('send.workspace.copyLink') }}
+                </button>
+                <button
+                  type="button"
+                  class="rounded-xl px-4 py-2 text-sm font-medium text-white transition hover:opacity-90"
+                  :class="[isDarkMode ? 'bg-indigo-500' : 'bg-indigo-600']"
+                  @click="viewDetails(latestRecord)"
+                >
+                  {{ t('send.workspace.viewDetail') }}
                </button>
              </div>
            </div>
+          </section>
+
+          <section
+            class="rounded-3xl border p-6 transition-colors duration-300"
+            :class="[isDarkMode ? 'border-gray-700 bg-gray-900/70' : 'border-white/80 bg-white/85']"
+          >
+            <div class="flex items-center justify-between gap-4">
+              <div>
+                <p
+                  class="text-sm font-medium"
+                  :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']"
+                >
+                  {{ t('send.workspace.historyTitle') }}
+                </p>
+                <p
+                  class="mt-2 text-xl font-bold"
+                  :class="[isDarkMode ? 'text-white' : 'text-gray-950']"
+                >
+                  {{ t('send.workspace.historyCount', { count: sendRecords.length }) }}
+                </p>
+              </div>
+              <button
+                type="button"
+                @click="toggleDrawer"
+                class="inline-flex h-11 w-11 items-center justify-center rounded-full transition"
+                :class="[
+                  isDarkMode
+                    ? 'bg-gray-800 text-indigo-200 hover:bg-gray-700'
+                    : 'bg-indigo-50 text-indigo-700 hover:bg-indigo-100'
+                ]"
+                :aria-label="t('send.workspace.openRecords')"
+              >
+                <ClipboardListIcon class="h-5 w-5" />
+              </button>
+            </div>
+          </section>
+        </aside>
+      </div>
+    </main>

    <SideDrawer :visible="showDrawer" :title="t('send.sendRecords')" @close="toggleDrawer">
      <SentRecordList
@@ -126,15 +287,10 @@
 </template>

 <script setup lang="ts">
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import {
-  SendIcon,
-  ClipboardListIcon,
-  ShieldCheckIcon
-} from 'lucide-vue-next'
-import PageHeader from '@/components/common/PageHeader.vue'
+import { SendIcon, ClipboardListIcon, ShieldCheckIcon } from 'lucide-vue-next'
 import SendTypeSelector from '@/components/common/SendTypeSelector.vue'
 import FileUploadArea from '@/components/common/FileUploadArea.vue'
 import ExpirationSelector from '@/components/common/ExpirationSelector.vue'
@@ -143,6 +299,7 @@ import SideDrawer from '@/components/common/SideDrawer.vue'
 import SentRecordList from '@/components/common/SentRecordList.vue'
 import SentRecordDetailModal from '@/components/common/SentRecordDetailModal.vue'
 import { useSendFlow } from '@/composables'
+import { getStorageUnit } from '@/utils/convert'

 const isDarkMode = inject('isDarkMode')
 const { t } = useI18n()
@@ -173,6 +330,7 @@ const {
  handleFilesSelected,
  handlePaste,
  handleSubmit,
+  getUnit,
  toggleDrawer,
  viewDetails
 } = useSendFlow()
@@ -180,6 +338,64 @@ const {
 const toRetrieve = () => {
  router.push('/')
 }
+
+const selectedFileCount = computed(() =>
+  selectedFiles.value.length > 0 ? selectedFiles.value.length : selectedFile.value ? 1 : 0
+)
+
+const selectedPayloadLabel = computed(() => {
+  if (sendType.value === 'text') {
+    return t('send.workspace.textDraft', { count: textContent.value.trim().length })
+  }
+  if (selectedFileCount.value > 0) {
+    return t('send.workspace.fileReady', { count: selectedFileCount.value })
+  }
+  return t('send.workspace.awaitingFile')
+})
+
+const latestRecord = computed(() => {
+  if (sendRecords.value.length === 0) return null
+  return sendRecords.value[sendRecords.value.length - 1]
+})
+
+const expirationPreview = computed(() => {
+  if (expirationMethod.value === 'forever') {
+    return getUnit('forever')
+  }
+  return `${expirationValue.value || 1} ${getUnit(expirationMethod.value)}`
+})
+
+const workspaceStats = computed(() => [
+  {
+    label: t('send.workspace.uploadLimit'),
+    value: getStorageUnit(config.value.uploadSize)
+  },
+  {
+    label: t('send.workspace.uploadMode'),
+    value: config.value.enableChunk
+      ? t('send.workspace.chunkMode')
+      : t('send.workspace.standardMode')
+  },
+  {
+    label: t('send.workspace.guestPolicy'),
+    value: config.value.openUpload ? t('send.workspace.guestOpen') : t('send.workspace.guestClosed')
+  }
+])
+
+const readinessItems = computed(() => [
+  {
+    label: t('send.workspace.payload'),
+    value: selectedPayloadLabel.value
+  },
+  {
+    label: t('send.workspace.expirationPreview'),
+    value: expirationPreview.value
+  },
+  {
+    label: t('send.workspace.security'),
+    value: t('send.secureEncryption')
+  }
+])
 </script>

 <style scoped>