Salesforce 详细Page中自定义QuickAction LightningComponent

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome,lightning:actionOverride">
    <aura:attribute name="recordId" type="Id"/>
    This is Aura RecordId is: {!v.recordId}
</aura:component>

({

})

<template>
  <div class="slds-modal slds-fade-in-open" style="width: 100%;">
      <div class="slds-modal__container" style="width:100%;">
          <header class="slds-modal__header inner">
              <h2 class="title slds-text-heading--medium slds-hyphenate">Delete Opportunity</h2>
              <lightning-button-icon class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
                  icon-name="utility:close"  alternative-text="close" title="close" onclick={handleCancel}>
              </lightning-button-icon>
          </header>
          <div class="slds-modal__content slds-p-around--medium">
              <lightning-card style="text-align:center;">
                  <p class="title slds-text-heading--medium slds-hyphenate">
                    Are you sure you want to delete this opportunity?
                  </p>
              </lightning-card>
          </div>

          <div class="slds-modal__footer">
            <lightning-button onclick={handleDelete} variant="brand" label="削除" class="slds-m-right_x-small slds-no-flex text-right slds-float--right"></lightning-button>
            <lightning-button onclick={handleCancel} label="キャンセル" class="slds-m-right_x-small slds-no-flex text-right slds-float--right"></lightning-button>
          </div>
      </div>
  </div>
</template>

import { LightningElement, api } from 'lwc';
import { deleteRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';

export default class QuickActionForDeleteLwc extends NavigationMixin(LightningElement) {
    @api recordId;

    handleDelete() {
        deleteRecord(this.recordId)
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Record deleted',
                        variant: 'success'
                    })
                );
                this.dispatchEvent(new CustomEvent('closemodal'));
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error deleting record',
                        message: error.body.message,
                        variant: 'error'
                    })
                );
            });
    }

    handleCancel() {
        this.dispatchEvent(new CustomEvent('closemodal'));
    }
}

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome,lightning:actionOverride">
    <aura:attribute name="recordId" type="Id"/>
    <c:quickActionForDeleteLwc recordId="{!v.recordId}" record-id="{!v.recordId}" onclosemodal="{!c.refreshAndCloseModal}"/>
</aura:component>

({
    refreshAndCloseModal : function(component, event, helper) {
        $A.get('e.force:refreshView').fire();
        $A.get("e.force:closeQuickAction").fire();
    }
})

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome,lightning:actionOverride">
    <aura:html tag="style">
        .slds-modal__close {
            display: none;
        }

        .slds-modal__content {
            height:unset !important;
            max-height:unset !important;
        }
    </aura:html>
    <aura:attribute name="recordId" type="Id"/>
    <c:quickActionForDeleteLwc recordId="{!v.recordId}" record-id="{!v.recordId}" onclosemodal="{!c.refreshAndCloseModal}"/>
</aura:component>

.inner .slds-modal__close {
  display: inline !important;
}