GPU_Web/src/views/admin/fileStore/index.vue

<template>
  <div class="container">
    <!-- 标题 -->
    <div class="header">
      <h1>文件存储</h1>
    </div>

    <!-- 区域选择 -->
    <div class="region-section">
      <h2 class="section-title">选择存储区域</h2>
      <div class="region-tabs">
        <button
          v-for="region in regions"
          :key="region.id"
          :class="['region-tab', { active: selectedRegion === region.id }]"
          @click="selectRegion(region.id)"
        >
          {{ region.name }}
        </button>
      </div>
    </div>

    <!-- 中心图标 -->
    <div class="center-section">
      <div class="center-icon">
        <i class="icon-book"></i>
      </div>
    </div>

    <!-- 主要操作按钮 -->
    <div class="action-section">
      <button class="btn-primary" @click="initializeStorage">
        初始化文件存储
      </button>
      <p class="action-hint">将在 {{ getSelectedRegionName() }} 创建存储空间</p>
    </div>

    <!-- 底部帮助链接 -->
    <div class="help-section">
      <div class="help-links">
        <a href="#" class="link" @click.prevent="viewHelp">文件存储使用介绍</a>
        <a href="#" class="link" @click.prevent="viewPricing">查看计费规则</a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 定义区域选项
interface Region {
  id: string
  name: string
}

const regions = [
  { id: 'a100', name: 'A100专区' },
  { id: 'v100', name: 'V100专区' },
  { id: 'foshan', name: '佛山区' },
  { id: 'beijing', name: '北京B区' }
]

const selectedRegion = ref('a100') // 默认选中 A100

// 方法：获取选中区域名称
const getSelectedRegionName = () => {
  const region = regions.find(r => r.id === selectedRegion.value)
  return region ? region.name : ''
}

// 方法：选择区域
const selectRegion = (id: string) => {
  selectedRegion.value = id
}

// 方法：初始化存储
const initializeStorage = () => {
  alert(`正在初始化 ${selectedRegion.value} 的文件存储...`)
  // 这里可以跳转到下一步流程
}

// 方法：查看帮助
const viewHelp = () => {
  alert('文件存储使用介绍')
}

// 方法：查看计费规则
const viewPricing = () => {
  alert('计费规则详情')
}
</script>

<style scoped>
.container {
  /* max-width: 800px;
  margin: 0 auto; */
  padding: 40px 30px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #333;
}

/* 标题区域 */
.header {
  margin-bottom: 40px;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

/* 区域选择 */
.region-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: #555;
  margin-bottom: 16px;
}

.region-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.region-tab {
  padding: 12px 24px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  min-width: 140px;
}

.region-tab:hover {
  border-color: #999;
}

.region-tab.active {
  background-color: #3498db;
  color: white;
  border-color: #3498db;
}

/* 中心图标区域 */
.center-section {
  margin: 40px 0;
  display: flex;
  justify-content: center;
}

.center-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 8px;
}

.icon-book {
  font-size: 36px;
  color: #3498db;
}

.icon-book::before {
  content: "📁";
}

/* 操作区域 */
.action-section {
  margin: 40px 0;
  text-align: center;
}

.btn-primary {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 14px 32px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover {
  background-color: #2980b9;
}

.action-hint {
  margin-top: 12px;
  font-size: 0.9rem;
  color: #666;
}

/* 帮助区域 */
.help-section {
  margin-top: 50px;
}

.help-links {
  display: flex;
  gap: 30px;
  justify-content: center;
}

.link {
  text-decoration: none;
  color: #3498db;
  font-size: 14px;
  transition: color 0.2s;
}

.link:hover {
  color: #2980b9;
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    padding: 30px 20px;
  }
  
  .region-tabs {
    flex-direction: column;
  }
  
  .region-tab {
    width: 100%;
    max-width: 100%;
  }
  
  .help-links {
    flex-direction: column;
    gap: 15px;
  }
  
  .center-section {
    justify-content: center;
  }
}
</style>