geo/apps/admin-web/src/components/ArticleActionGroup.vue

<script setup lang="ts">
import {
  CopyOutlined,
  DeleteOutlined,
  EditOutlined,
  EyeOutlined,
  SendOutlined,
} from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n'

withDefaults(
  defineProps<{
    showPublish?: boolean
    canPublish?: boolean
    publishDisabledTitle?: string
    showEdit?: boolean
    canEdit?: boolean
    editDisabledTitle?: string
    showPreview?: boolean
    canPreview?: boolean
    previewDisabledTitle?: string
    showCopy?: boolean
    canCopy?: boolean
    copyDisabledTitle?: string
    showDelete?: boolean
    canDelete?: boolean
    deleteDisabledTitle?: string
    deleteConfirmTitle?: string
    deleteLoading?: boolean
  }>(),
  {
    showPublish: false,
    canPublish: true,
    publishDisabledTitle: '',
    showEdit: false,
    canEdit: true,
    editDisabledTitle: '',
    showPreview: false,
    canPreview: true,
    previewDisabledTitle: '',
    showCopy: false,
    canCopy: true,
    copyDisabledTitle: '',
    showDelete: true,
    canDelete: true,
    deleteDisabledTitle: '',
    deleteConfirmTitle: '',
    deleteLoading: false,
  },
)

const emit = defineEmits<{
  publish: []
  edit: []
  preview: []
  copy: []
  delete: []
}>()

const { t } = useI18n()

function resolveTitle(enabled: boolean, enabledTitle: string, disabledTitle?: string): string {
  if (enabled) {
    return enabledTitle
  }
  return disabledTitle || enabledTitle
}
</script>

<template>
  <div class="table-actions-row">
    <a-tooltip
      v-if="showPublish"
      :title="resolveTitle(canPublish, t('media.publish.title'), publishDisabledTitle)"
    >
      <span>
        <a-button
          type="text"
          shape="circle"
          size="small"
          class="action-btn action-publish"
          :disabled="!canPublish"
          @click="emit('publish')"
        >
          <SendOutlined />
        </a-button>
      </span>
    </a-tooltip>

    <a-tooltip v-if="showEdit" :title="resolveTitle(canEdit, t('common.edit'), editDisabledTitle)">
      <span>
        <a-button
          type="text"
          shape="circle"
          size="small"
          class="action-btn action-edit"
          :disabled="!canEdit"
          @click="emit('edit')"
        >
          <EditOutlined />
        </a-button>
      </span>
    </a-tooltip>

    <a-tooltip
      v-if="showPreview"
      :title="resolveTitle(canPreview, t('common.preview'), previewDisabledTitle)"
    >
      <span>
        <a-button
          type="text"
          shape="circle"
          size="small"
          class="action-btn action-eye"
          :disabled="!canPreview"
          @click="emit('preview')"
        >
          <EyeOutlined />
        </a-button>
      </span>
    </a-tooltip>

    <a-tooltip v-if="showCopy" :title="resolveTitle(canCopy, t('common.copy'), copyDisabledTitle)">
      <span>
        <a-button
          type="text"
          shape="circle"
          size="small"
          class="action-btn action-copy"
          :disabled="!canCopy"
          @click="emit('copy')"
        >
          <CopyOutlined />
        </a-button>
      </span>
    </a-tooltip>

    <a-tooltip
      v-if="showDelete && !deleteConfirmTitle"
      :title="resolveTitle(canDelete, t('common.delete'), deleteDisabledTitle)"
    >
      <span>
        <a-button
          type="text"
          shape="circle"
          size="small"
          class="action-btn action-delete"
          :disabled="!canDelete"
          :loading="deleteLoading"
          @click="emit('delete')"
        >
          <DeleteOutlined />
        </a-button>
      </span>
    </a-tooltip>

    <a-popconfirm
      v-else-if="showDelete"
      :title="deleteConfirmTitle"
      :disabled="!canDelete"
      @confirm="emit('delete')"
    >
      <a-button
        type="text"
        shape="circle"
        size="small"
        class="action-btn action-delete"
        :disabled="!canDelete"
        :loading="deleteLoading"
      >
        <DeleteOutlined />
      </a-button>
    </a-popconfirm>
  </div>
</template>

<style scoped>
.action-publish.ant-btn:hover:not(:disabled) {
  color: #1677ff;
  background: #e6f4ff;
}

.action-edit.ant-btn:hover:not(:disabled) {
  color: #52c41a;
  background: #f6ffed;
}

.action-eye.ant-btn:hover:not(:disabled) {
  color: #13c2c2;
  background: #e6fffb;
}

.action-copy.ant-btn:hover:not(:disabled) {
  color: #1677ff;
  background: #e6f4ff;
}

.action-delete.ant-btn:hover:not(:disabled) {
  color: #ff4d4f;
  background: #fff2f0;
}
</style>