kintone-vue-template/src/components/LicenseStatus.vue

<template>
  <div v-if="shown" class="license-status-info">
    <div class="license-content">
      <div class="license-status-text">
        <strong>{{ $t('license.status.label') }}</strong>
        <span v-if="licenseDisplayInfo" v-html="licenseStatusText"></span><span v-else> ... </span>
      </div>
      <div class="license-actions">
        <template v-if="!licenseDisplayInfo.isPaid">
          <button class="action-btn" @click="refreshLicenseStatus" :disabled="checking" ref="checkButton">{{ $t('license.button.checkLicense.label') }}</button>
          <kuc-tooltip :title="$t('license.button.checkLicense.desc')" :container="checkButton"></kuc-tooltip>
          <button class="action-btn main" @click="purchaseLicense" ref="buyButton">{{ $t('license.button.purchase.label') }}</button>
          <kuc-tooltip :title="$t('license.button.purchase.desc')" :container="buyButton"></kuc-tooltip>
        </template>
        <button v-else class="action-btn" @click="hidePaidMsg">{{ $t('license.button.hide') }}</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, shallowRef } from 'vue';
import { useI18n } from 'vue-i18n';
import { LicenseService } from '@/services/LicenseService';
import type { LicenseInfo } from '@/types/license';
import { LicenseStorage } from '@/utils/LicenseStorage';

const { t: $t } = useI18n();// 配置国际化

type LicenseDisplayInfo = {
  isPaid: boolean;
  expiryDate: string;
  isExpired: boolean;
  remainingDays: number;
};

// 状态管理
const licenseInfo = ref<LicenseInfo | undefined>();
const loading = ref(true);
const shown = ref(false);
const checking = ref(false);
const checkButton = shallowRef<HTMLButtonElement | null>(null);
const buyButton = shallowRef<HTMLButtonElement | null>(null);

// 许可证显示信息
const licenseDisplayInfo = computed<LicenseDisplayInfo>(() => {
  if (!licenseInfo.value || loading.value) {
    return {
      isPaid: false,
      expiryDate: $t('license.status.unknown'),
      isExpired: false,
      remainingDays: 1,
    };
  }

  return {
    isPaid: licenseInfo.value.isPaid,
    expiryDate: LicenseService.formatExpiryDate(licenseInfo.value.expiredTime),
    isExpired: licenseInfo.value.expiredTime < Date.now() && !licenseInfo.value.isPaid,
    remainingDays: LicenseService.getDaysRemaining(licenseInfo.value.expiredTime),
  };
});

onMounted(async () => {
  const result = await LicenseService.checkLicense();
  await new Promise((resolve) => setTimeout(resolve, 500));
  licenseInfo.value = result.license;

  shown.value = isPaidAreaShown();
  if (!shown.value) {
    addPaidLabel();
  }
  loading.value = false;
});

const addPaidLabel = () => {
  const isExist = !!document.querySelector('#license-label')
  if (!shown.value && !isExist) {
    const spanElement = document.createElement('span');
    spanElement.textContent = $t('license.status.permanent'),
    spanElement.id = 'license-label';
    document.querySelector('#app > .settings-heading')?.appendChild(spanElement);
  }
}

const isPaidAreaShown = () => {
  if (!licenseInfo.value?.isPaid) {
    return true;
  }
  const settings = LicenseStorage.getSettings(licenseInfo.value.pluginId);
  if (settings.hideLicenseAreaIfPaid) {
    return false;
  }
  return true;
};

const licenseStatusText = computed(() => {
  if (!licenseDisplayInfo.value) {
    return $t('license.status.unknown');
  }

  if (loading.value) {
    return $t('license.status.checking');
  }

  if (licenseDisplayInfo.value.isPaid) {
    return `<span class="text-green">${$t('license.status.permanentDisplay')}</span>`;
  }

  let status = $t('license.expiry.expiryDate', { date: licenseDisplayInfo.value.expiryDate });

  if (licenseDisplayInfo.value.isExpired) {
    status += `(<span class="text-red">${$t('license.status.expired')}</span>)`;
    return status;
  }

  const remainingDays = licenseDisplayInfo.value.remainingDays;
  const days = $t('license.notification.days', remainingDays)
  status += `(${days})`;

  return status;
});

async function refreshLicenseStatus() {
  checking.value = true;
  loading.value = true;
  // 模拟加载时间，展示 spinner 效果
  await new Promise((resolve) => setTimeout(resolve, 500));

  const result = await LicenseService.forceRefreshLicense();
  licenseInfo.value = result.license;
  loading.value = false;
  checking.value = false;
}

function purchaseLicense() {
  alert(
    `请联系管理员或访问官方网站购买许可证。\nDomain: ${licenseInfo.value?.domain}\nPlugin: ${licenseInfo.value?.pluginId}`,
  );
}

function hidePaidMsg() {
  const pluginId = licenseInfo.value?.pluginId;
  if (!pluginId) {
    return;
  }
  const settings = LicenseStorage.getSettings(pluginId);
  settings.hideLicenseAreaIfPaid = true;
  LicenseStorage.saveSetting(settings, pluginId);
  shown.value = false;
  addPaidLabel();
}
</script>