feat 搭建架构骨架

src/views/profile/cpns/QualificationCard.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { StatusTag } from '@/components'
+import type { Qualification, QualificationStatus } from '@/types/business/profile'
+
+interface Props {
+  qualification: Qualification
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  edit: [qualification: Qualification]
+  delete: [qualification: Qualification]
+  reupload: [qualification: Qualification]
+}>()
+
+const STATUS_VARIANTS: Record<QualificationStatus, 'success' | 'warning' | 'danger'> = {
+  已认证: 'success',
+  审核中: 'warning',
+  未通过: 'danger',
+}
+</script>
+
+<template>
+  <article class="qual-card">
+    <div class="qual-card__head">
+      <h3 class="qual-card__name">
+        {{ qualification.certName }}
+      </h3>
+      <StatusTag
+        :label="qualification.status"
+        :variant="STATUS_VARIANTS[qualification.status]"
+      />
+    </div>
+
+    <ul class="qual-card__meta">
+      <li><span>资质类型：</span>{{ qualification.type }}</li>
+      <li><span>证书编号：</span>{{ qualification.certNo }}</li>
+      <li><span>发证单位：</span>{{ qualification.issuer }}</li>
+      <li><span>有效期：</span>{{ qualification.validFrom }} 至 {{ qualification.validTo }}</li>
+    </ul>
+
+    <div class="qual-card__actions">
+      <button class="qual-card__btn" @click="emit('edit', qualification)">
+        编辑
+      </button>
+      <button class="qual-card__btn qual-card__btn--danger" @click="emit('delete', qualification)">
+        删除
+      </button>
+      <button
+        v-if="qualification.status === '未通过'"
+        class="qual-card__btn qual-card__btn--warning"
+        @click="emit('reupload', qualification)"
+      >
+        重新上传
+      </button>
+    </div>
+  </article>
+</template>
+
+<style lang="less" scoped>
+.qual-card {
+  .flex(column, flex-start);
+  gap: @spacing-sm;
+  padding: @spacing-base;
+  border-radius: @radius-lg;
+  background: @white;
+  box-shadow: @shadow-base;
+
+  &__head {
+    .flex(row, space-between, flex-start);
+    gap: @spacing-sm;
+  }
+
+  &__name {
+    font-size: @font-size-lg;
+    font-weight: 600;
+    color: @heading-color;
+    .multi-ellipsis(2);
+  }
+
+  &__meta {
+    .flex(column, flex-start);
+    gap: @spacing-xs;
+    list-style: none;
+    font-size: @font-size-base;
+    color: @text-color;
+
+    li {
+      .ellipsis();
+    }
+
+    span {
+      color: @text-color-secondary;
+    }
+  }
+
+  &__actions {
+    .flex(row, center);
+    gap: @spacing-base;
+    margin-top: auto;
+    padding-top: @spacing-sm;
+    border-top: 1px solid @border-color;
+  }
+
+  &__btn {
+    font-size: @font-size-base;
+    color: @primary-color;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 0.75;
+    }
+
+    &--danger {
+      color: @danger-color;
+    }
+
+    &--warning {
+      color: @warning-color;
+    }
+  }
+}
+</style>