frontend/src/components/PPTManager.vue

<template>
  <div class="ppt-manager">
    <div class="ppt-manager-header">
      <h3>我的演示文稿</h3>
      <div class="header-actions">
        <button @click="handleCreateNewPPT" :disabled="loading" class="btn-primary">
          新建PPT
        </button>
        <button @click="handleSaveCurrentPPT" :disabled="loading" class="btn-secondary">
          保存当前
        </button>
        <button @click="handleLogout" class="btn-logout">
          退出登录
        </button>
      </div>
    </div>

    <div class="ppt-list" v-if="pptList.length > 0">
      <div 
        v-for="ppt in pptList" 
        :key="ppt.name" 
        class="ppt-item"
        @click="() => loadPPT(ppt.name)"
      >
        <div class="ppt-info">
          <h4>{{ ppt.title || ppt.name }}</h4>
          <span class="ppt-meta">{{ ppt.repoUrl }}</span>
        </div>
        <div class="ppt-actions">
          <button @click.stop="() => handleGenerateShareLinks(0)" class="btn-share">
            分享
          </button>
          <button @click.stop="() => deletePPT(ppt.name)" class="btn-delete">
            删除
          </button>
        </div>
      </div>
    </div>

    <div v-else-if="!loading" class="empty-state">
      <p>还没有演示文稿，创建一个开始吧！</p>
    </div>

    <div v-if="loading" class="loading-state">
      <p>加载中...</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from '@/store'
import usePPTManager from '@/hooks/usePPTManager'

const authStore = useAuthStore()
const {
  pptList,
  loading,
  createNewPPT,
  loadPPT,
  deletePPT,
  saveCurrentPPT,
  generateShareLinks
} = usePPTManager()

// 包装函数以修复类型错误
const handleCreateNewPPT = () => createNewPPT()
const handleSaveCurrentPPT = () => saveCurrentPPT()
const handleLogout = () => authStore.logout()
const handleGenerateShareLinks = (slideIndex: number) => generateShareLinks(slideIndex)
</script>

<style scoped>
.ppt-manager {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.ppt-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.btn-primary, .btn-secondary, .btn-logout, .btn-share, .btn-delete {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-primary {
  background: #5b9bd5;
  color: white;
}

.btn-secondary {
  background: #f0f0f0;
  color: #333;
}

.btn-logout {
  background: #dc3545;
  color: white;
}

.btn-share {
  background: #28a745;
  color: white;
}

.btn-delete {
  background: #dc3545;
  color: white;
}

.ppt-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ppt-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ppt-item:hover {
  background-color: #f8f9fa;
}

.ppt-info h4 {
  margin: 0 0 5px 0;
  color: #333;
}

.ppt-meta {
  font-size: 12px;
  color: #666;
}

.ppt-actions {
  display: flex;
  gap: 8px;
}

.empty-state, .loading-state {
  text-align: center;
  padding: 40px;
  color: #666;
}
</style>