biji/biji-qianduan/src/components/TrashPage.vue

<template>
  <el-container v-if="userStore.isLoggedIn">
    <el-header>
      <h1>回收站</h1>
      <el-button type="danger" @click="handleCleanTrash" :disabled="trashItems.length === 0">清空回收站</el-button>
      <el-button @click="goBack">返回首页</el-button>
    </el-header>
    <el-main>
      <el-table :data="trashItems" style="width: 100%">
        <el-table-column prop="title" label="名称"></el-table-column>
        <el-table-column prop="type" label="类型">
          <template #default="scope">
            <el-tag :type="scope.row.type === 'group' ? 'success' : 'primary'">
              {{ scope.row.type === 'group' ? '分类' : '笔记' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="deletedAt" label="删除时间"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleRestore(scope.row)">恢复</el-button>
            <el-button size="small" type="danger" @click="handleDeletePermanently(scope.row)">永久删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-empty v-if="trashItems.length === 0" description="回收站是空的"></el-empty>
    </el-main>
  </el-container>
  <div v-else class="login-required">
    <el-result
      icon="warning"
      title="需要登录"
      sub-title="请先登录后再访问回收站"
    >
      <template #extra>
        <el-button type="primary" @click="goToLogin">去登录</el-button>
        <el-button @click="goBack">返回首页</el-button>
      </template>
    </el-result>
  </div>

  <!-- 验证码弹窗 -->
  <CaptchaDialog
    v-model="captchaVisible"
    :description="captchaDescription"
    @confirm="handleCaptchaConfirm"
    @cancel="handleCaptchaCancel"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getTrash, restoreTrashItem, permanentlyDeleteItem, cleanTrash } from '@/api/CommonApi.js';
import { useUserStore } from '../stores/user';
import CaptchaDialog from '@/components/CaptchaDialog.vue';

const router = useRouter();
const userStore = useUserStore();
const trashItems = ref([]);

// 验证码相关
const captchaVisible = ref(false);
const captchaDescription = ref('');
const pendingAction = ref(null);
const pendingItem = ref(null);

const fetchTrashItems = async () => {
  try {
    const response = await getTrash();
    trashItems.value = response || [];
  } catch (error) {
    ElMessage.error('获取回收站内容失败');
  }
};

const handleRestore = async (item) => {
  try {
    await restoreTrashItem(item.id, item.type);
    ElMessage.success('恢复成功');
    fetchTrashItems();
  } catch (error) {
    ElMessage.error('恢复失败');
  }
};

const handleDeletePermanently = async (item) => {
  await ElMessageBox.confirm('确定要永久删除此项目吗？此操作不可恢复。', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  });
  // 保存操作和项目，显示验证码弹窗
  pendingAction.value = 'delete';
  pendingItem.value = item;
  captchaDescription.value = '永久删除需要安全验证';
  captchaVisible.value = true;
};

const handleCleanTrash = async () => {
  await ElMessageBox.confirm('确定要清空回收站吗？此操作不可恢复。', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  });
  // 保存操作，显示验证码弹窗
  pendingAction.value = 'clean';
  pendingItem.value = null;
  captchaDescription.value = '清空回收站需要安全验证';
  captchaVisible.value = true;
};

// 验证码确认
const handleCaptchaConfirm = async ({ captchaId, captchaCode }) => {
  try {
    if (pendingAction.value === 'delete' && pendingItem.value) {
      await permanentlyDeleteItem(pendingItem.value.id, pendingItem.value.type, captchaId, captchaCode);
      ElMessage.success('已永久删除');
    } else if (pendingAction.value === 'clean') {
      await cleanTrash(captchaId, captchaCode);
      ElMessage.success('回收站已清空');
    }
    captchaVisible.value = false;
    pendingAction.value = null;
    pendingItem.value = null;
    fetchTrashItems();
  } catch (error) {
    ElMessage.error('操作失败: ' + (error.response?.data?.msg || error.message));
  }
};

// 验证码取消
const handleCaptchaCancel = () => {
  pendingAction.value = null;
  pendingItem.value = null;
};

const goToLogin = () => {
  router.push('/login');
};

const goBack = () => {
  router.push('/home');
};

onMounted(() => {
  if (userStore.isLoggedIn) {
    fetchTrashItems();
  }
});
</script>

<style scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login-required {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>