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";

const props = 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>