HIYL-localization-web/src/views/utility/index.vue

<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <span>传输管理器</span>
        <el-button
          type="text"
          style="float: right; padding: 3px 0"
          @click="clearRecords"
        >
          清空记录
        </el-button>
      </div>
      <div class="date-divider">
        <span class="date-text">2026-05-09</span>
      </div>
      <div v-if="transferList.length > 0" class="transfer-list">
        <div v-for="item in transferList" :key="item.id" class="transfer-item">
          <div class="file-icon">
            <i class="el-icon-video-camera"></i>
          </div>
          <div class="file-info">
            <div class="file-name">{{ item.name }}</div>
            <div class="file-meta">
              <span class="file-size">{{ item.size }}</span>
              <span class="file-time">{{ item.time }}</span>
            </div>
          </div>
          <el-tag :type="item.status">{{ item.status === "failed" ? "上传失败" : "上传成功" }}</el-tag>
          <div class="file-actions">
            <el-button type="text" class="action-btn" @click="openFile(item)">
              打开
            </el-button>
            <el-button
              type="text"
              class="action-btn"
              @click="openLocation(item)"
            >
              打开位置
            </el-button>
          </div>
        </div>
      </div>
      <div v-else class="empty-state">
        <i class="el-icon-folder-opened"></i>
        <span>暂无传输记录</span>
      </div>
    </el-card>
  </div>
</template>
<script>
const transferList = [
  {
    id: 1,
    name: "TG-2023-01-21-215030828.mp4",
    size: "11.86M",
    time: "14:33",
    status: "danger",
    path: "/uploads/TG-2023-01-21-215030828.mp4",
  },
    {
    id: 2,
    name: "TG-2023-01-21-215030828.mp4",
    size: "11.86M",
    time: "14:33",
    status: "success",
    path: "/uploads/TG-2023-01-21-215030828.mp4",
  },
];

export default {
  name: "UtilityPage",
  data() {
    return {
      transferList,
    };
  },
  methods: {
    clearRecords() {
      this.$confirm("是否要清除本地传输记录？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.transferList = [];
          this.$message.success("已清空传输记录");
        })
        .catch(() => {});
    },
    openFile(item) {
      this.$message.info(`正在打开文件位置：${item.path}`);
    },
    openLocation(item) {
      this.$message.info(`正在打开文件位置：${item.path}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.date-divider {
  text-align: center;
  margin-bottom: 15px;

  .date-text {
    font-size: 12px;
    color: #999;
    padding: 5px 20px;
    background: #f0f0f0;
    border-radius: 20px;
  }
}

.transfer-list {
  .transfer-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f7f9f8;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    .file-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      background: #655dd4;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 20px;
      margin-right: 15px;
    }

    .file-info {
      flex: 1;

      .file-name {
        font-size: 14px;
        color: #333;
        margin-bottom: 4px;
      }

      .file-meta {
        display: flex;
        gap: 15px;
        font-size: 12px;
        color: #999;
      }
    }

    .status-tag {
      font-size: 12px;
      padding: 4px 12px;
      border-radius: 4px;
      margin-right: 15px;

      &.failed {
        background: #fff3e0;
        color: #f57c00;
      }

      &.success {
        background: #e8f5e9;
        color: #2e7d32;
      }
    }

    .file-actions {
      display: flex;
      gap: 10px;

      .action-btn {
        color: #009696;
        font-size: 13px;

        &:hover {
          color: #00796b;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #999;

  i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
  }

  span {
    font-size: 14px;
  }
}
</style>