xh-medical-sign-web/clinical-web/src/views/management/documents/components/DocumentTemplateCard.vue

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

import { documentStatusLabels } from '../mock'
import type { DocumentTemplate } from '../types'

const props = defineProps<{
  template: DocumentTemplate
}>()

const emit = defineEmits<{
  preview: [template: DocumentTemplate]
  edit: [template: DocumentTemplate]
  initiate: [template: DocumentTemplate]
  remove: [template: DocumentTemplate]
}>()

const statusLabel = computed(() => documentStatusLabels[props.template.status])
</script>

<template>
  <article class="template-card">
    <div class="template-head">
      <h3 :title="template.name">{{ template.name }}</h3>
      <span class="template-status" :class="'status-' + template.status">
        <i aria-hidden="true" />
        {{ statusLabel }}
      </span>
    </div>

    <p class="template-meta">
      {{ template.code }} · {{ template.version }} · {{ template.department }}
    </p>
    <p class="template-description">{{ template.description }}</p>

    <div class="template-footer">
      <span class="department-tag">
        <i aria-hidden="true" />
        {{ template.department }}
      </span>
      <div class="template-actions">
        <button type="button" class="card-button" @click="emit('preview', template)">预览</button>
        <button type="button" class="card-button" @click="emit('edit', template)">编辑</button>
        <button
          type="button"
          class="card-button primary"
          :disabled="template.status !== 'enabled'"
          :title="template.status === 'enabled' ? '用此模板发起签署' : '仅已启用模板可发起签署'"
          @click="emit('initiate', template)"
        >
          发起
        </button>
        <button
          type="button"
          class="card-button danger"
          title="删除此文书"
          @click="emit('remove', template)"
        >
          删除
        </button>
      </div>
    </div>
  </article>
</template>

<style scoped>
.template-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  background: var(--card);
  border: 1px solid transparent;
  border-radius: var(--r);
  box-shadow: var(--sh);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.template-card:hover {
  border-color: var(--brand);
  box-shadow: var(--sh-hover);
  transform: translateY(-1px);
}

.template-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.template-head h3 {
  display: -webkit-box;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.template-status {
  display: inline-flex;
  flex-shrink: 0;
  gap: 5px;
  align-items: center;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 12px;
}

.template-status i {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}

.status-enabled {
  color: var(--ok);
  background: var(--ok-l);
}

.status-draft {
  color: #8a9aa3;
  background: #eceef0;
}

.status-archived {
  color: #8a9aa3;
  background: #eceef0;
}

.status-review {
  color: var(--warn);
  background: var(--warn-l);
}

.template-meta {
  margin: 0;
  overflow: hidden;
  color: var(--mut);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-description {
  flex: 1;
  display: -webkit-box;
  min-height: 58px;
  margin: 0;
  overflow: hidden;
  color: var(--mut);
  font-size: 12px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.template-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.department-tag {
  display: inline-flex;
  flex-shrink: 0;
  gap: 5px;
  align-items: center;
  padding: 3px 9px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  background: var(--brand-l);
  border-radius: 12px;
}

.department-tag i {
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
}

.template-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.card-button {
  padding: 4px 9px;
  color: var(--brand);
  font-size: 12px;
  background: #fff;
  border: 1px solid var(--brand);
  border-radius: 5px;
}

.card-button:hover {
  background: var(--brand-l);
}

.card-button.primary {
  color: #fff;
  background: var(--brand);
}

.card-button.primary:hover {
  background: var(--brand-d);
}

.card-button:disabled {
  color: #aebbc0;
  background: #f1f5f6;
  border-color: #dce5e8;
  cursor: not-allowed;
}

.card-button.primary:disabled:hover {
  background: #f1f5f6;
}

.card-button.danger {
  color: #b3442f;
  border-color: #cf7c68;
}

.card-button.danger:hover {
  background: #fbeee9;
}

@media (max-width: 680px) {
  .template-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}
</style>