创建刷新页面

src/views/refresh.vue

@@ -1,209 +1,394 @@
 <template>
-  <page-container :title="$t('order.title')">
-    <!-- 搜索区域 -->
-    <template #search>
-      <el-form :inline="true" :model="searchForm">
-        <el-form-item :label="$t('order.search.orderNo')">
-          <el-input v-model="searchForm.orderNo" :placeholder="$t('order.search.orderNoPlaceholder')" />
-        </el-form-item>
-        
-        <el-form-item :label="$t('order.search.status')">
-          <el-select v-model="searchForm.status" :placeholder="$t('order.search.statusPlaceholder')">
-            <el-option
-              v-for="item in statusOptions"
-              :key="item.value"
-              :label="$t(item.label)"
-              :value="item.value"
+  <div class="refresh-container">
+    <!-- 刷新部分 -->
+    <el-card class="section-card refresh-section">
+      <template #header>
+        <div class="section-header">
+          <h2>缓存刷新</h2>
+          <el-button type="primary" @click="showRefreshDialog">
+            <el-icon><Plus /></el-icon>提交刷新
+          </el-button>
+        </div>
+      </template>
+      
+      <!-- 刷新说明 -->
+      <div class="description-box">
+        <el-alert
+          title="刷新说明"
+          type="info"
+          :closable="false"
+          show-icon
+        >
+          <p>通过刷新缓存，能够强制将边缘节点上已缓存的文件清除掉，再次访问时会从源站服务器中重新获取这些文件的最新版本。</p>
+          <p class="warning">注意：该操作会将已缓存文件从边缘节点删除掉，请确认后再进行操作，避免误操作。</p>
+          <p>提交刷新后，通常节点会在30秒至10分钟不等完成刷新缓存。</p>
+        </el-alert>
+      </div>
+
+      <!-- 刷新任务表格 -->
+      <el-table 
+        :data="refreshTasks.slice((refreshCurrentPage - 1) * pageSize, refreshCurrentPage * pageSize)" 
+        v-loading="refreshLoading"
+        style="margin-top: 20px;"
+      >
+        <el-table-column prop="submitTime" label="提交时间" width="180" />
+        <el-table-column prop="content" label="刷新内容" min-width="300" show-overflow-tooltip />
+        <el-table-column label="操作" width="120" fixed="right">
+          <template #default="{ row }">
+            <el-button 
+              link 
+              type="primary" 
+              @click="resubmitRefresh(row)"
+            >
+              重新提交
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 刷新分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="refreshCurrentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="refreshTotal"
+          layout="total, sizes, prev, pager, next"
+          @size-change="handleSizeChange"
+          @current-change="handleRefreshCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 预热部分 -->
+    <el-card class="section-card preheat-section">
+      <template #header>
+        <div class="section-header">
+          <h2>文件预热</h2>
+          <el-button type="success" @click="showPreheatDialog">
+            <el-icon><Plus /></el-icon>提交预热
+          </el-button>
+        </div>
+      </template>
+
+      <!-- 预热说明 -->
+      <div class="description-box">
+        <el-alert
+          title="预热说明"
+          type="info"
+          :closable="false"
+          show-icon
+        >
+          <p>通过文件预热，能够提前将文件缓存在边缘节点上，当用户发起访问时，边缘节点能够更快速的将内容交付给用户。</p>
+          <p>文件预热还有助于缓解源站压力，避免大量用户访问新资源时，源站负载过高。</p>
+          <p>预热所需时间与文件数量和大小相关，可能在数分钟到数小时不等（参考时长：每小时可预热约3000-5000个文件）。</p>
+        </el-alert>
+      </div>
+
+      <!-- 预热任务表格 -->
+      <el-table 
+        :data="preheatTasks.slice((preheatCurrentPage - 1) * pageSize, preheatCurrentPage * pageSize)" 
+        v-loading="preheatLoading"
+        style="margin-top: 20px;"
+      >
+        <el-table-column prop="description" label="任务描述" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="submitTime" label="提交时间" width="180" />
+        <el-table-column prop="completeTime" label="完成时间" width="180" />
+        <el-table-column prop="status" label="状态" width="120">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)">
+              {{ getStatusText(row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="progress" label="进度" width="180">
+          <template #default="{ row }">
+            <el-progress 
+              :percentage="row.progress" 
+              :status="getProgressStatus(row.progress)"
             />
-          </el-select>
-        </el-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" fixed="right">
+          <template #default="{ row }">
+            <el-button 
+              link 
+              type="primary" 
+              disabled
+            >
+              停止
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-        <el-form-item :label="$t('order.search.dateRange')">
-          <el-date-picker
-            v-model="searchForm.dateRange"
-            type="daterange"
-            :start-placeholder="$t('order.search.startDate')"
-            :end-placeholder="$t('order.search.endDate')"
+      <!-- 预热分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="preheatCurrentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="preheatTotal"
+          layout="total, sizes, prev, pager, next"
+          @size-change="handleSizeChange"
+          @current-change="handlePreheatCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 提交刷新对话框 -->
+    <el-dialog
+      v-model="refreshDialogVisible"
+      title="提交刷新任务"
+      width="600px"
+    >
+      <el-form :model="refreshForm" ref="refreshFormRef" :rules="formRules">
+        <el-form-item label="URL地址" prop="urls">
+          <el-input
+            v-model="refreshForm.urls"
+            type="textarea"
+            :rows="6"
+            placeholder="请输入需要刷新的URL地址，多个地址请换行分隔"
           />
         </el-form-item>
+        <el-form-item label="刷新类型">
+          <el-radio-group v-model="refreshForm.type">
+            <el-radio label="file">文件</el-radio>
+            <el-radio label="directory">目录</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="refreshDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitRefresh">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
 
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch">
-            {{ $t('common.search') }}
-          </el-button>
-          <el-button @click="resetSearch">
-            {{ $t('common.reset') }}
-          </el-button>
+    <!-- 提交预热对话框 -->
+    <el-dialog
+      v-model="preheatDialogVisible"
+      title="提交预热任务"
+      width="600px"
+    >
+      <el-form :model="preheatForm" ref="preheatFormRef" :rules="formRules">
+        <el-form-item label="URL地址" prop="urls">
+          <el-input
+            v-model="preheatForm.urls"
+            type="textarea"
+            :rows="6"
+            placeholder="请输入需要预热的URL地址，多个地址请换行分隔"
+          />
         </el-form-item>
       </el-form>
-    </template>
-
-    <!-- 表格区域 -->
-    <el-table :data="tableData" border v-loading="loading">
-      <el-table-column prop="orderNo" :label="$t('order.table.orderNo')" width="180" />
-      <el-table-column prop="customerName" :label="$t('order.table.customerName')" />
-      <el-table-column prop="amount" :label="$t('order.table.amount')">
-        <template #default="{ row }">
-          ¥{{ row.amount.toFixed(2) }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="status" :label="$t('order.table.status')">
-        <template #default="{ row }">
-          <el-tag :type="getStatusType(row.status)">
-            {{ $t(`order.status.${row.status}`) }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column prop="createTime" :label="$t('order.table.createTime')" width="180" />
-      <el-table-column :label="$t('common.operations')" width="200" fixed="right">
-        <template #default="{ row }">
-          <el-button type="primary" link @click="handleDetail(row)">
-            {{ $t('order.operations.detail') }}
-          </el-button>
-          <el-button 
-            v-if="row.status === 'pending'" 
-            type="success" 
-            link 
-            @click="handleProcess(row)"
-          >
-            {{ $t('order.operations.process') }}
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination
-        v-model:current-page="pagination.currentPage"
-        v-model:page-size="pagination.pageSize"
-        :page-sizes="[10, 20, 30, 50]"
-        :total="pagination.total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </div>
-  </page-container>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="preheatDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitPreheat">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import PageContainer from '@/components/PageContainer.vue'
+import { ref, onMounted } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 
-const { t } = useI18n()
+// 分页相关
+const pageSize = ref(10)
+const refreshCurrentPage = ref(1)
+const preheatCurrentPage = ref(1)
+const refreshTotal = ref(0)
+const preheatTotal = ref(0)
 
-// 搜索表单
-const searchForm = ref({
-  orderNo: '',
-  status: '',
-  dateRange: []
+// 刷新相关
+const refreshLoading = ref(false)
+const refreshDialogVisible = ref(false)
+const refreshForm = ref({
+  urls: '',
+  type: 'file'
 })
-
-// 状态选项
-const statusOptions = [
-  { value: 'pending', label: 'order.status.pending' },
-  { value: 'processing', label: 'order.status.processing' },
-  { value: 'completed', label: 'order.status.completed' },
-  { value: 'cancelled', label: 'order.status.cancelled' }
-]
-
-// 获取状态标签类型
-const getStatusType = (status) => {
-  const types = {
-    pending: 'warning',
-    processing: 'primary',
-    completed: 'success',
-    cancelled: 'info'
-  }
-  return types[status] || 'info'
-}
-
-// 表格数据
-const loading = ref(false)
-const tableData = ref([
+const refreshFormRef = ref(null)
+const refreshTasks = ref([
   {
-    orderNo: 'ORD202401001',
-    customerName: '张三',
-    amount: 299.00,
-    status: 'pending',
-    createTime: '2024-01-10 10:30:00'
+    submitTime: '2024-03-15 10:00:00',
+    content: 'https://example.com/image1.jpg',
+    id: 1
   },
+  // 更多测试数据...
+])
+
+// 预热相关
+const preheatLoading = ref(false)
+const preheatDialogVisible = ref(false)
+const preheatForm = ref({
+  urls: ''
+})
+const preheatFormRef = ref(null)
+const preheatTasks = ref([
   {
-    orderNo: 'ORD202401002',
-    customerName: '李四',
-    amount: 599.00,
+    description: '预热任务1',
+    submitTime: '2024-03-15 10:00:00',
+    completeTime: '2024-03-15 10:05:00',
     status: 'completed',
-    createTime: '2024-01-10 11:20:00'
-  }
+    progress: 100,
+    id: 1
+  },
+  // 更多测试数据...
 ])
 
-// 分页
-const pagination = ref({
-  currentPage: 1,
-  pageSize: 10,
-  total: 0
-})
+// 表单验证规则
+const formRules = {
+  urls: [
+    { required: true, message: '请输入URL地址', trigger: 'blur' }
+  ]
+}
 
-// 搜索
-const handleSearch = () => {
-  fetchData()
+// 分页处理
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  refreshCurrentPage.value = 1
+  preheatCurrentPage.value = 1
 }
 
-// 重置搜索
-const resetSearch = () => {
-  searchForm.value = {
-    orderNo: '',
-    status: '',
-    dateRange: []
-  }
-  handleSearch()
+const handleRefreshCurrentChange = (val) => {
+  refreshCurrentPage.value = val
 }
 
-// 获取数据
-const fetchData = async () => {
-  loading.value = true
-  try {
-    // 这里添加获取数据的接口调用
-    loading.value = false
-  } catch (error) {
-    loading.value = false
-    ElMessage.error(t('common.error'))
-  }
+const handlePreheatCurrentChange = (val) => {
+  preheatCurrentPage.value = val
 }
 
-// 分页处理
-const handleSizeChange = (val) => {
-  pagination.value.pageSize = val
-  fetchData()
+// 显示对话框
+const showRefreshDialog = () => {
+  refreshDialogVisible.value = true
+}
+
+const showPreheatDialog = () => {
+  preheatDialogVisible.value = true
 }
 
-const handleCurrentChange = (val) => {
-  pagination.value.currentPage = val
-  fetchData()
+// 重新提交刷新
+const resubmitRefresh = (row) => {
+  ElMessage.success('任务已重新提交')
+  // 这里添加重新提交的逻辑
 }
 
-// 查看详情
-const handleDetail = (row) => {
-  // 实现查看详情逻辑
+// 提交任务
+const submitRefresh = async () => {
+  if (!refreshFormRef.value) return
+  await refreshFormRef.value.validate((valid) => {
+    if (valid) {
+      ElMessage.success('刷新任务已提交')
+      refreshDialogVisible.value = false
+      // 这里添加提交刷新任务的接口调用
+    }
+  })
 }
 
-// 处理订单
-const handleProcess = (row) => {
-  // 实现处理订单逻辑
+const submitPreheat = async () => {
+  if (!preheatFormRef.value) return
+  await preheatFormRef.value.validate((valid) => {
+    if (valid) {
+      ElMessage.success('预热任务已提交')
+      preheatDialogVisible.value = false
+      // 这里添加提交预热任务的接口调用
+    }
+  })
 }
 
-defineOptions({
-  name: 'Order'
+// 状态相关方法
+const getStatusType = (status) => {
+  const types = {
+    pending: 'warning',
+    processing: 'primary',
+    completed: 'success',
+    failed: 'danger'
+  }
+  return types[status] || 'info'
+}
+
+const getStatusText = (status) => {
+  const texts = {
+    pending: '待处理',
+    processing: '处理中',
+    completed: '已完成',
+    failed: '失败'
+  }
+  return texts[status] || status
+}
+
+const getProgressStatus = (progress) => {
+  if (progress === 100) return 'success'
+  if (progress < 100) return ''
+  return 'exception'
+}
+
+onMounted(() => {
+  // 设置总数
+  refreshTotal.value = refreshTasks.value.length
+  preheatTotal.value = preheatTasks.value.length
 })
 </script>
 
-<style scoped>
-.pagination-container {
-  margin-top: 20px;
+<style lang="scss" scoped>
+.refresh-container {
+  padding: 20px;
+  background: #f0f2f5;
+  min-height: 100vh;
   display: flex;
-  justify-content: flex-end;
+  flex-direction: column;
+  gap: 20px;
+
+  .section-card {
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      h2 {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 500;
+      }
+    }
+
+    .description-box {
+      margin-bottom: 20px;
+
+      :deep(.el-alert__content) {
+        p {
+          margin: 8px 0;
+          line-height: 1.5;
+          
+          &.warning {
+            color: #e6a23c;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+
+    .pagination-container {
+      margin-top: 20px;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+
+// 深色主题适配
+:deep(.dark) {
+  .refresh-container {
+    background: #1a1a1a;
+
+    .section-card {
+      background: #2b2b2b;
+      border-color: #3a3a3a;
+    }
+  }
 }
-</style> 
+</style>