ui优化-2

apps/frontend/src/components/admin/AdminPaginationBar.vue

@@ -1,62 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  page: number
-  pageSize: number
-  total: number
-  loading?: boolean
-}>()
-
-const emit = defineEmits<{
-  (event: 'change', page: number): void
-}>()
-
-function goPrev() {
-  if (props.page <= 1 || props.loading) {
-    return
-  }
-
-  emit('change', props.page - 1)
-}
-
-function goNext() {
-  if (props.loading || props.page * props.pageSize >= props.total) {
-    return
-  }
-
-  emit('change', props.page + 1)
-}
-</script>
-
-<template>
-  <footer class="pagination-bar">
-    <span>第 {{ page }} 页，共 {{ Math.max(1, Math.ceil(total / pageSize)) }} 页，合计 {{ total }} 条</span>
-    <div class="actions">
-      <el-button :disabled="page <= 1 || loading" round @click="goPrev">上一页</el-button>
-      <el-button :disabled="page * pageSize >= total || loading" round @click="goNext">下一页</el-button>
-    </div>
-  </footer>
-</template>
-
-<style scoped>
-.pagination-bar {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: center;
-  margin-top: 14px;
-  color: #64748b;
-  font-size: 13px;
-}
-
-.actions {
-  display: flex;
-  gap: 8px;
-}
-
-@media (max-width: 780px) {
-  .pagination-bar {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-</style>

apps/frontend/src/components/admin/AdminStatusTag.vue

@@ -5,7 +5,9 @@ const props = defineProps<{
   status: string
 }>()
 
-function resolveTone(status: string) {
+type ElTagType = 'success' | 'primary' | 'warning' | 'danger' | 'info'
+
+function resolveType(status: string): ElTagType {
   const normalized = String(status || '').trim().toLowerCase()
 
   if (['paid', 'link_generated', 'redeemed', 'available', 'delivered', 'success', 'active', 'system_bound', 'binding_completed', 'completed'].includes(normalized)) {
@@ -24,15 +26,13 @@ function resolveTone(status: string) {
     return 'danger'
   }
 
-  return 'default'
+  return 'info'
 }
 
 function resolveLabel(status: string) {
   const normalized = String(status || '').trim()
 
-  if (!normalized) {
-    return '-'
-  }
+  if (!normalized) return '-'
 
   const labelMap: Record<string, string> = {
     created: '已创建',
@@ -90,54 +90,7 @@ function resolveLabel(status: string) {
 </script>
 
 <template>
-  <span class="status-tag" :data-tone="resolveTone(props.status)">
+  <el-tag :type="resolveType(props.status)" size="small">
     {{ resolveLabel(props.status) }}
-  </span>
+  </el-tag>
 </template>
-
-<style scoped>
-.status-tag {
-  display: inline-flex;
-  align-items: center;
-  min-height: 24px;
-  max-width: 100%;
-  padding: 4px 9px;
-  border-radius: 999px;
-  font-size: 11px;
-  font-weight: 700;
-  border: 1px solid transparent;
-  line-height: 1.35;
-  white-space: normal;
-  word-break: break-word;
-}
-
-.status-tag[data-tone='success'] {
-  color: #0f766e;
-  background: #ecfdf3;
-  border-color: #a6f4c5;
-}
-
-.status-tag[data-tone='primary'] {
-  color: #175cd3;
-  background: #eff8ff;
-  border-color: #b2ddff;
-}
-
-.status-tag[data-tone='warning'] {
-  color: #b54708;
-  background: #fffaeb;
-  border-color: #fedf89;
-}
-
-.status-tag[data-tone='danger'] {
-  color: #b42318;
-  background: #fef3f2;
-  border-color: #fecdca;
-}
-
-.status-tag[data-tone='default'] {
-  color: #475467;
-  background: #f2f4f7;
-  border-color: #d0d5dd;
-}
-</style>