From 2e9d8e57671c53816c0388b0b58b312ed28bc536 Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Mon, 1 Jun 2026 12:08:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E5=85=A5=E5=8F=A3=E5=8C=85=E4=BD=93=E7=A7=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md                       |  6 ++
 frontend/src/AppShell.vue                     | 74 ++----------------
 .../src/components/LicenseActivationModal.vue | 78 +++++++++++++++++++
 frontend/src/router.ts                        |  3 +-
 4 files changed, 92 insertions(+), 69 deletions(-)
 create mode 100644 frontend/src/components/LicenseActivationModal.vue

diff --git a/docs/project_context.md b/docs/project_context.md
index 7fa9bc6..7934d01 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -593,3 +593,9 @@
 - `frontend/src/components/ApiDocs.vue` no longer registers a page-header `copy sample` action, avoiding duplicate `复制传参示例` buttons on the API documentation page.
 - The API documentation card still keeps its local toolbar actions: `复制传参示例` and `OpenAPI JSON`.
 - Verification performed: `npm run build` passed, and generated frontend build output was removed after verification.
+
+## 2026-06-01: Frontend entry chunk reduction
+
+- `frontend/src/router.ts` now lazy-loads `FileWorkflow.vue`, matching the other main pages and keeping the data processing page out of the base entry chunk until the route is opened.
+- `frontend/src/AppShell.vue` now lazy-loads `LoginView.vue` and the hidden license activation dialog; the dialog UI and activation API flow moved to `frontend/src/components/LicenseActivationModal.vue`.
+- Build verification: `npm run build` passed. The base `index` chunk dropped from about `572 kB` to about `461 kB`; the remaining large chunks are still `ApiDocs` (`swagger-ui-dist`) and `ScriptPanel` (`monaco-editor`).
diff --git a/frontend/src/AppShell.vue b/frontend/src/AppShell.vue
index d7a4802..4f87b0a 100644
--- a/frontend/src/AppShell.vue
+++ b/frontend/src/AppShell.vue
@@ -112,35 +112,11 @@
     </n-layout>
   </n-layout>
 
-  <n-modal
-    v-model:show="licenseModalVisible"
-    preset="card"
-    title="授权延期"
-    :mask-closable="!activationLoading"
-    :style="{ width: '420px', maxWidth: 'calc(100vw - 32px)' }"
-  >
-    <div class="license-dialog-body">
-      <p class="license-dialog-text">{{ licenseMessage }}</p>
-      <div class="license-key-label">key: {{ activationKeyLabel }}</div>
-      <n-input
-        v-model:value="activationCode"
-        type="textarea"
-        :autosize="{ minRows: 3, maxRows: 5 }"
-        placeholder="请输入激活码"
-        :disabled="activationLoading"
-      />
-    </div>
-    <template #footer>
-      <div class="license-dialog-footer">
-        <n-button :disabled="activationLoading" @click="licenseModalVisible = false">取消</n-button>
-        <n-button type="primary" :loading="activationLoading" @click="submitActivation">激活</n-button>
-      </div>
-    </template>
-  </n-modal>
+  <LicenseActivationModal v-if="licenseModalVisible" v-model:show="licenseModalVisible" />
 </template>
 
 <script setup lang="ts">
-import { computed, h, onBeforeUnmount, onMounted, ref, watch, type Component } from 'vue';
+import { computed, defineAsyncComponent, h, onBeforeUnmount, onMounted, ref, watch, type Component } from 'vue';
 import { RouterView, useRoute, useRouter } from 'vue-router';
 import { useMessage, type DropdownOption, type MenuOption, NIcon } from 'naive-ui';
 import {
@@ -156,12 +132,13 @@ import {
   SunnyOutline
 } from '@vicons/ionicons5';
 
-import { apiGet, apiPost, clearToken, getToken, setToken, setUnauthorizedHandler } from './api/client';
-import type { LicenseStatus, LoginResponse } from './types';
-import LoginView from './components/LoginView.vue';
+import { apiPost, clearToken, getToken, setToken, setUnauthorizedHandler } from './api/client';
+import type { LoginResponse } from './types';
 import { pageHeader, resetPageHeader, resolveHeaderValue, type PageHeaderAction } from './composables/pageHeader';
 import { themeName, toggleAppTheme } from './composables/theme';
 
+const LoginView = defineAsyncComponent(() => import('./components/LoginView.vue'));
+const LicenseActivationModal = defineAsyncComponent(() => import('./components/LicenseActivationModal.vue'));
 const message = useMessage();
 const route = useRoute();
 const router = useRouter();
@@ -169,10 +146,6 @@ const token = ref(getToken());
 const loginLoading = ref(false);
 const sidebarCollapsed = ref(localStorage.getItem('sidebarCollapsed') === 'true');
 const licenseModalVisible = ref(false);
-const activationCode = ref('');
-const activationLoading = ref(false);
-const activationKeyLabel = ref('2026/06/20');
-const licenseMessage = ref('输入激活码可将授权到期日期延长 30 天。');
 const brandClickCount = ref(0);
 const menuKeys = ['workflow', 'history', 'database', 'script', 'api-center', 'settings'] as const;
 type MenuKey = (typeof menuKeys)[number];
@@ -263,7 +236,7 @@ function handleBrandMarkClick() {
 
   if (brandClickCount.value >= 8) {
     brandClickCount.value = 0;
-    void openLicenseModal();
+    licenseModalVisible.value = true;
     return;
   }
 
@@ -272,39 +245,6 @@ function handleBrandMarkClick() {
   }, 2000);
 }
 
-async function openLicenseModal() {
-  try {
-    const status = await apiGet<LicenseStatus>('/api/license/status');
-    activationKeyLabel.value = status.key_label;
-    licenseMessage.value = `当前授权到期日期：${status.expires_on}。输入激活码可延长 30 天。`;
-    activationCode.value = '';
-    licenseModalVisible.value = true;
-  } catch (error) {
-    message.error(error instanceof Error ? error.message : '获取授权状态失败');
-  }
-}
-
-async function submitActivation() {
-  const code = activationCode.value.trim();
-  if (!code) {
-    message.warning('请输入激活码');
-    return;
-  }
-
-  activationLoading.value = true;
-  try {
-    const result = await apiPost<LicenseStatus>('/api/license/activate', { code });
-    activationKeyLabel.value = result.key_label;
-    licenseMessage.value = `当前授权到期日期：${result.expires_on}。输入激活码可继续延长 30 天。`;
-    activationCode.value = '';
-    message.success(`激活成功，到期日期: ${result.expires_on}`);
-  } catch (error) {
-    message.error(error instanceof Error ? error.message : '激活失败');
-  } finally {
-    activationLoading.value = false;
-  }
-}
-
 function isMenuKey(value: unknown): value is MenuKey {
   return typeof value === 'string' && menuKeys.includes(value as MenuKey);
 }
diff --git a/frontend/src/components/LicenseActivationModal.vue b/frontend/src/components/LicenseActivationModal.vue
new file mode 100644
index 0000000..9cb61ff
--- /dev/null
+++ b/frontend/src/components/LicenseActivationModal.vue
@@ -0,0 +1,78 @@
+<template>
+  <n-modal
+    v-model:show="visible"
+    preset="card"
+    title="授权延期"
+    :mask-closable="!activationLoading"
+    :style="{ width: '420px', maxWidth: 'calc(100vw - 32px)' }"
+  >
+    <div class="license-dialog-body">
+      <p class="license-dialog-text">{{ licenseMessage }}</p>
+      <div class="license-key-label">key: {{ activationKeyLabel }}</div>
+      <n-input
+        v-model:value="activationCode"
+        type="textarea"
+        :autosize="{ minRows: 3, maxRows: 5 }"
+        placeholder="请输入激活码"
+        :disabled="activationLoading"
+      />
+    </div>
+    <template #footer>
+      <div class="license-dialog-footer">
+        <n-button :disabled="activationLoading" @click="visible = false">取消</n-button>
+        <n-button type="primary" :loading="activationLoading" @click="submitActivation">激活</n-button>
+      </div>
+    </template>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useMessage } from 'naive-ui';
+
+import { apiGet, apiPost } from '../api/client';
+import type { LicenseStatus } from '../types';
+
+const visible = defineModel<boolean>('show', { required: true });
+const message = useMessage();
+const activationCode = ref('');
+const activationLoading = ref(false);
+const activationKeyLabel = ref('2026/06/20');
+const licenseMessage = ref('输入激活码可将授权到期日期延长 30 天。');
+
+onMounted(() => {
+  void loadLicenseStatus();
+});
+
+async function loadLicenseStatus() {
+  try {
+    const status = await apiGet<LicenseStatus>('/api/license/status');
+    activationKeyLabel.value = status.key_label;
+    licenseMessage.value = `当前授权到期日期：${status.expires_on}。输入激活码可延长 30 天。`;
+    activationCode.value = '';
+  } catch (error) {
+    message.error(error instanceof Error ? error.message : '获取授权状态失败');
+  }
+}
+
+async function submitActivation() {
+  const code = activationCode.value.trim();
+  if (!code) {
+    message.warning('请输入激活码');
+    return;
+  }
+
+  activationLoading.value = true;
+  try {
+    const result = await apiPost<LicenseStatus>('/api/license/activate', { code });
+    activationKeyLabel.value = result.key_label;
+    licenseMessage.value = `当前授权到期日期：${result.expires_on}。输入激活码可继续延长 30 天。`;
+    activationCode.value = '';
+    message.success(`激活成功，到期日期: ${result.expires_on}`);
+  } catch (error) {
+    message.error(error instanceof Error ? error.message : '激活失败');
+  } finally {
+    activationLoading.value = false;
+  }
+}
+</script>
diff --git a/frontend/src/router.ts b/frontend/src/router.ts
index 8da1d5f..4b5ce4b 100644
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -1,7 +1,6 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
 
-import FileWorkflow from './components/FileWorkflow.vue';
-
+const FileWorkflow = () => import('./components/FileWorkflow.vue');
 const HistoryPanel = () => import('./components/HistoryPanel.vue');
 const DatabasePanel = () => import('./components/DatabasePanel.vue');
 const SettingsPanel = () => import('./components/SettingsPanel.vue');