From 8565b9513dd14d248840003eb58f411cfad0f3b6 Mon Sep 17 00:00:00 2001
From: xuejiahao <xuejiahao@alicorns.co.jp>
Date: Thu, 23 Oct 2025 14:32:39 +0800
Subject: [PATCH] improve UIUX

---
 README.md                        |  18 +++-
 components.d.ts                  |   1 +
 src/components/Config.vue        |  71 ++-------------
 src/components/LicenseStatus.vue | 151 +++++++++++++++++++++++++++++++
 src/css/config.css               |   2 +-
 src/css/license.css              | 106 ++++++++++++++++++----
 src/services/licenseService.ts   |  33 ++++---
 src/types/license.d.ts           |   1 +
 8 files changed, 285 insertions(+), 98 deletions(-)
 create mode 100644 src/components/LicenseStatus.vue

diff --git a/README.md b/README.md
index e82aff0..b7a1653 100644
--- a/README.md
+++ b/README.md
@@ -422,4 +422,20 @@ watch(loading, (load) => {
   load ? spinner.value?.open() : spinner.value?.close();
 });
 </script>
-```
\ No newline at end of file
+```
+
+
+### 关于 tooltip
+
+kuc 没有实现插槽，所以应该当成一个普通组件使用：
+
+```vue
+<template>
+    <button ref="buyButton">购买</button>
+    <kuc-tooltip title="点击购买" :container="buyButton"></kuc-tooltip>
+</template>
+
+<script setup lang="ts">
+const buyButton = shallowRef<HTMLButtonElement | null>(null);
+</script>
+```
diff --git a/components.d.ts b/components.d.ts
index f0e951b..f2fe8d8 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Config: typeof import('./src/components/Config.vue')['default']
+    LicenseStatus: typeof import('./src/components/LicenseStatus.vue')['default']
     PluginInput: typeof import('./src/components/basic/PluginInput.vue')['default']
     PluginLabel: typeof import('./src/components/basic/PluginLabel.vue')['default']
   }
diff --git a/src/components/Config.vue b/src/components/Config.vue
index d33589c..ff3c475 100644
--- a/src/components/Config.vue
+++ b/src/components/Config.vue
@@ -1,4 +1,7 @@
 <template>
+  <!-- 许可证状态信息 -->
+  <LicenseStatus />
+
   <h2 class="settings-heading">{{ $t('config.title') }}</h2>
   <p class="kintoneplugin-desc">{{ $t('config.desc') }}</p>
 
@@ -9,7 +12,7 @@
 
   <div class="action-area">
     <kuc-button text="キャンセル" type="normal" @click="cancel" />
-    <kuc-button :disabled="loading" text="保存する" class="save-btn" type="submit" @click="save" />
+    <kuc-button text="保存する" class="save-btn" type="submit" @click="save" />
   </div>
 
   <!-- 必须使用 v-show 让 spinner dom 创建的时候不显示 -->
@@ -19,10 +22,8 @@
 import type { Setting } from '@/types';
 import { useI18n } from 'vue-i18n';
 import { useKintoneClient } from '@/composables/useKintoneClient';
-import { useLicenseManager } from '@/composables/useLicenseManager';
 import type { Spinner } from 'kintone-ui-component';
-import LicenseModal from '@/components/LicenseModal.vue';
-import LicenseNotification from '@/components/LicenseNotification.vue';
+import LicenseStatus from './LicenseStatus.vue';
 
 import { nextTick, onMounted, reactive, ref, shallowRef, watch } from 'vue';
 
@@ -44,21 +45,11 @@ const loading = ref(false);
 const mainArea = shallowRef<HTMLElement | null>(null);
 const spinner = shallowRef<Spinner | null>(null);
 
-const licenseManager = useLicenseManager();
-
 onMounted(async () => {
   // 等待页面完全渲染后再显示加载状态，实现更平滑的用户体验
   nextTick(async () => {
     loading.value = true;
 
-    // 检查许可证
-    if (!licenseManager.canAccessFeatures()) {
-      // 没有权限或许可证无效，显示弹框或错误提示
-      showLicenseError();
-      loading.value = false;
-      return;
-    }
-
     // 获取已保存的插件配置
     const savedSetting = kintone.plugin.app.getConfig(props.pluginId);
     setting.buttonName = savedSetting?.buttonName || $t('config.button.default');
@@ -70,10 +61,8 @@ onMounted(async () => {
     console.log('pluginsInfo', pluginsInfo);
     // 模拟加载时间，展示 spinner 效果
     await new Promise((resolve) => setTimeout(resolve, 500));
-    loading.value = false;
 
-    // 检查许可证状态，显示相关信息
-    checkLicenseStatus();
+    loading.value = false;
   });
 });
 
@@ -115,54 +104,6 @@ async function save() {
   });
 }
 
-/**
- * 显示许可证错误
- */
-function showLicenseError() {
-  // 添加许可证状态显示区域
-  const licenseStatusElement = document.createElement('div');
-  licenseStatusElement.className = 'license-status';
-  licenseStatusElement.innerHTML = `
-    <div class="license-error">
-      <h3>许可证无效</h3>
-      <p>您的插件许可证已过期或无效，请联系管理员或购买许可证。</p>
-      <button class="license-refresh-btn" onclick="window.location.reload()">重新检查</button>
-    </div>
-  `;
-
-  // 插入到页面顶部
-  const mainArea = document.getElementById('main-area');
-  if (mainArea && mainArea.parentNode) {
-    mainArea.parentNode.insertBefore(licenseStatusElement, mainArea);
-  }
-}
-
-/**
- * 检查许可证状态并显示相关信息
- */
-function checkLicenseStatus() {
-  const licenseInfo = licenseManager.getLicenseDisplayInfo();
-
-  if (licenseInfo) {
-    // 添加许可证状态显示
-    const statusElement = document.createElement('div');
-    statusElement.className = 'license-status-info';
-    statusElement.innerHTML = `
-      <div class="license-info">
-        <h4>许可证状态</h4>
-        <p>到期时间: ${licenseInfo.expiryDate}</p>
-        <p>状态: ${licenseInfo.isExpired ? '已过期' : licenseInfo.remainingDays === Infinity ? '永久' : `剩余 ${licenseInfo.remainingDays} 天`}</p>
-      </div>
-    `;
-
-    // 插入到设置区域上方
-    const mainArea = document.getElementById('main-area');
-    if (mainArea && mainArea.parentNode) {
-      mainArea.parentNode.insertBefore(statusElement, mainArea);
-    }
-  }
-}
-
 /**
  * 取消操作并返回插件列表
  * 重定向到插件管理页面
diff --git a/src/components/LicenseStatus.vue b/src/components/LicenseStatus.vue
new file mode 100644
index 0000000..8789e08
--- /dev/null
+++ b/src/components/LicenseStatus.vue
@@ -0,0 +1,151 @@
+<template>
+  <div v-if="shown" class="license-status-info">
+    <div class="license-content">
+      <div class="license-status-text">
+        <strong>许可证状态: </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">检查</button>
+          <kuc-tooltip title="重新检查许可证状态" :container="checkButton"></kuc-tooltip>
+          <button class="action-btn main" @click="purchaseLicense" ref="buyButton">购买</button>
+          <kuc-tooltip title="购买后当前域名下所有应用都可使用" :container="buyButton"></kuc-tooltip>
+        </template>
+        <button v-else class="action-btn" @click="hidePaidMsg">不再显示</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed, shallowRef } from 'vue';
+import { LicenseService } from '@/services/LicenseService';
+import type { LicenseInfo, LicenseCheckResult } from '@/types/license';
+import { LicenseStorage } from '@/utils/LicenseStorage';
+
+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: '未知',
+      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 = '已授权';
+    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 '未知';
+  }
+
+  if (loading.value) {
+    return '加载中...';
+  }
+
+  if (licenseDisplayInfo.value.isPaid) {
+    return '<span class="text-green">永久可用</span>';
+  }
+
+  let status = `到期时间 ${licenseDisplayInfo.value.expiryDate} `;
+
+  if (licenseDisplayInfo.value.isExpired) {
+    status += '(<span class="text-red">已过期</span>)';
+  } else if (licenseDisplayInfo.value.remainingDays == 0) {
+    status += '(今天)';
+  } else if (licenseDisplayInfo.value.remainingDays == 1) {
+    status += '(明天)';
+  } else {
+    status += '(剩余 ' + licenseDisplayInfo.value.remainingDays + ' 天)';
+  }
+
+  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>
diff --git a/src/css/config.css b/src/css/config.css
index 449d29d..572088b 100644
--- a/src/css/config.css
+++ b/src/css/config.css
@@ -15,7 +15,7 @@
 /* 最上面的说明 */
 .settings-heading {
   padding: 1em 0;
-  margin-bottom: 8px;
+  margin: 8px 0;
 }
 
 /* label 样式 */
diff --git a/src/css/license.css b/src/css/license.css
index b0bb6b2..61f0dda 100644
--- a/src/css/license.css
+++ b/src/css/license.css
@@ -271,27 +271,99 @@
 }
 
 .license-status-info {
-  margin-bottom: 20px;
-  padding: 16px;
-  border-radius: 6px;
-  border: 1px solid #e5e5e5;
-  background-color: #f7fafc;
+  padding: 12px 16px;
+  margin-right: 24px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  background-color: #f9f9f9;
+  font-size: 13px;
 }
 
-.license-status-info .license-info h4 {
-  margin: 0 0 12px 0;
-  color: #2d3748;
-  font-size: 16px;
-  font-weight: 600;
+.license-status-info .license-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
 }
 
-.license-status-info .license-info p {
-  margin: 0 0 8px 0;
-  font-size: 14px;
-  color: #4a5568;
-  line-height: 1.4;
+.license-status-info .license-status-text {
+  color: #333;
+  flex: 1;
 }
 
-.license-status-info .license-info p:last-child {
-  margin-bottom: 0;
+.license-status-info .license-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.license-status-info .action-btn {
+  padding: 5px 10px;
+  border-radius: 3px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  min-width: 65px;
+}
+
+.license-status-info .action-btn:not(.main) {
+  background: transparent;
+  color: #666;
+  border: 1px solid #ccc;
+}
+
+.license-status-info .action-btn:not(.main):disabled {
+  background: #efefef;
+  color: #a0a0a0;
+}
+
+.license-status-info .action-btn:not(.main):not(:disabled):hover {
+  background: #eee;
+  border-color: #999;
+}
+
+.license-status-info .action-btn:not(.main):not(:disabled):active {
+  background: #BDBDBD;
+  border-color: #757575;
+}
+
+.license-status-info .action-btn.main {
+  background: #4CAF50;
+  color: white;
+  border: 1px solid #4CAF50;
+}
+
+.license-status-info .action-btn.main:hover {
+  background: #388E3C;
+  border-color: #388E3C;
+}
+
+.license-status-info .action-btn.main:active {
+  background: #33691E;
+  border-color: #33691E;
+}
+
+.notification-link {
+  color: #fff;
+  text-decoration: underline;
+}
+
+.notification-link:hover {
+  color: #daf0ff;
+}
+
+.text-red {
+  color: #B71C1C;
+}
+
+.text-green {
+  color: #4CAF50;
+}
+
+#license-label {
+  background-color: #4CAF50;
+  color: white;
+  padding: 2px 8px;
+  font-size: 12px;
+  border-radius: 9999px;
+  margin-left: 8px;
 }
diff --git a/src/services/licenseService.ts b/src/services/licenseService.ts
index 6459359..9c8e40d 100644
--- a/src/services/licenseService.ts
+++ b/src/services/licenseService.ts
@@ -7,7 +7,7 @@ import { MobileNotification } from 'kintone-ui-component/lib/mobile/notification
 export class LicenseService {
   // 常量定义
   private static readonly WARNING_DAYS_BEFORE_EXPIRY = 7;
-  private static readonly TRIAL_DATE = 1;
+  private static readonly TRIAL_DATE = 30;
   private static PLUGIN_ID: string = '';
   // ============ 基础工具函数 ============
 
@@ -22,7 +22,7 @@ export class LicenseService {
    * 获取插件ID
    */
   static getPluginId(): string {
-    return this.PLUGIN_ID;
+    return this.PLUGIN_ID || new URLSearchParams(window.location.search).get('pluginId') || '';
   }
 
   /**
@@ -122,7 +122,7 @@ export class LicenseService {
    */
   static formatExpiryDate(timestamp: number): string {
     if (timestamp === -1) return '永久';
-    return new Date(timestamp).toLocaleDateString('zh-CN');
+    return new Date(timestamp).toLocaleDateString(kintone.getLoginUser().language);
   }
 
   /**
@@ -132,7 +132,7 @@ export class LicenseService {
     if (timestamp === -1) return Infinity;
     const now = new Date().getTime();
     const remainingMs = timestamp - now;
-    return Math.ceil(remainingMs / (24 * 60 * 60 * 1000));
+    return Math.floor(remainingMs / (24 * 60 * 60 * 1000));
   }
 
   /**
@@ -167,28 +167,32 @@ export class LicenseService {
     warningDialogMessage?: string;
   }) {
     const remainingDays = this.getDaysRemaining(license.expiredTime);
-    const msg = remainingDays > 0 ? ` ${remainingDays} 天后` : '今天'
-    const defaultMessage = `您的插件许可证将在${msg}到期，请及时续期以避免服务中断。`;
+    if (remainingDays <= 0) {
+      return
+    }
+    const msg = remainingDays > 1 ? ` ${remainingDays} 天后` : (remainingDays > 0 ? '明天' : '今天')
+    const link = `https://alicorn.cybozu.com/k/admin/app/${kintone.app.getId()}/plugin/config?pluginId=${this.getPluginId()}`
+    const defaultMessage = `您的插件将在${msg}试用结束<br>如需使用请进入<a class="notification-link" href="${link}">「プラグインの設定」</a>查看详情。`;
 
     // 使用自定义消息或默认消息
     const message = options?.warningDialogMessage || defaultMessage;
 
     // 检查是否已设置不再提醒
-    const settings = LicenseStorage.getSettings(this.getPluginId());
-    if (settings.suppressMsgTime && this.isToday(settings.suppressMsgTime)) {
-      return
-    }
-    delete settings.suppressMsgTime
-    LicenseStorage.saveSetting(settings, this.getPluginId());
+    // const settings = LicenseStorage.getSettings(this.getPluginId());
+    // if (settings.suppressMsgTime && this.isToday(settings.suppressMsgTime)) {
+    //   return
+    // }
+    // delete settings.suppressMsgTime
+    // LicenseStorage.saveSetting(settings, this.getPluginId());
 
     if (await kintone.isMobilePage()) {
       const notification = new MobileNotification({
-        text: message,
+        content: message,
       });
       notification.open();
     } else {
       const notification = new Notification({
-        text: message,
+        content: message,
         type: 'info',
       });
       notification.open();
@@ -279,6 +283,7 @@ export class LicenseService {
   private static mockCreateTrialLicense(): LicenseInfo {
     const expiryDate = new Date();
     expiryDate.setDate(expiryDate.getDate() + this.TRIAL_DATE);
+    expiryDate.setHours(23, 59, 59, 999);
 
     return {
       expiredTime: expiryDate.getTime(),
diff --git a/src/types/license.d.ts b/src/types/license.d.ts
index 0b6ba5d..7cdf7a2 100644
--- a/src/types/license.d.ts
+++ b/src/types/license.d.ts
@@ -17,6 +17,7 @@ export interface LicenseInfo {
 
 export interface LicenseSetting {
   suppressMsgTime?: number;
+  hideLicenseAreaIfPaid?: boolean;
 }
 
 export interface LicenseCheckResult {