feat 搭建架构骨架

src/views/finance/cpns/InvoiceTitleCard.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { StatusTag } from '@/components'
+import type { InvoiceTitle } from '@/types/business/finance'
+
+interface Props {
+  invoiceTitle: InvoiceTitle
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  setDefault: [id: string]
+  edit: [item: InvoiceTitle]
+  delete: [id: string]
+}>()
+</script>
+
+<template>
+  <div class="invoice-title-card">
+    <div class="invoice-title-card__head">
+      <span class="invoice-title-card__label text-secondary">发票抬头</span>
+      <StatusTag
+        :label="invoiceTitle.type"
+        :variant="invoiceTitle.type === '企业单位' ? 'primary' : 'info'"
+      />
+      <StatusTag v-if="invoiceTitle.isDefault" label="默认" variant="success" />
+    </div>
+    <p class="invoice-title-card__title">
+      {{ invoiceTitle.title }}
+    </p>
+    <div class="invoice-title-card__tax">
+      <span class="invoice-title-card__label text-secondary">税号</span>
+      <span class="invoice-title-card__tax-no">{{ invoiceTitle.taxNo }}</span>
+    </div>
+
+    <div class="invoice-title-card__actions">
+      <button
+        class="invoice-title-card__btn"
+        @click="emit('setDefault', invoiceTitle.id)"
+      >
+        {{ invoiceTitle.isDefault ? '取消默认' : '设为默认' }}
+      </button>
+      <button class="invoice-title-card__btn" @click="emit('edit', invoiceTitle)">
+        编辑
+      </button>
+      <button class="invoice-title-card__btn is-danger" @click="emit('delete', invoiceTitle.id)">
+        删除
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.invoice-title-card {
+  padding: @spacing-base;
+  border: 1px solid @border-color;
+  border-radius: @radius-base;
+  background: @white;
+  .flex(column, flex-start);
+  gap: @spacing-sm;
+
+  &__head {
+    .flex(row, flex-start, center);
+    gap: @spacing-sm;
+  }
+
+  &__label {
+    font-size: @font-size-sm;
+  }
+
+  &__title {
+    font-size: @font-size-lg;
+    font-weight: 600;
+    color: @heading-color;
+    word-break: break-all;
+  }
+
+  &__tax {
+    .flex(row, flex-start, center);
+    gap: @spacing-sm;
+  }
+
+  &__tax-no {
+    font-size: @font-size-base;
+    color: @text-color;
+    word-break: break-all;
+  }
+
+  &__actions {
+    .flex(row, flex-start);
+    gap: @spacing-sm;
+    margin-top: @spacing-xs;
+  }
+
+  &__btn {
+    height: 28px;
+    padding: 0 @spacing-sm;
+    border: 1px solid @border-color-dark;
+    border-radius: @radius-sm;
+    background: @white;
+    color: @text-color;
+    font-size: @font-size-sm;
+    transition: all 0.2s;
+
+    &:hover:not(:disabled) {
+      border-color: @primary-color;
+      color: @primary-color;
+    }
+
+    &.is-danger:hover:not(:disabled) {
+      border-color: @danger-color;
+      color: @danger-color;
+    }
+  }
+}
+</style>