Merge pull request #8 from mosshello/main

feat: 优化全局字体加载

frontend/index.html

@@ -1,26 +1,17 @@
-<!--
- * @Author: 13895237362 2205451508@qq.com
- * @Date: 2025-09-24 10:31:33
- * @LastEditors: 13895237362 2205451508@qq.com
- * @LastEditTime: 2025-09-24 10:32:56
- * @FilePath: \frontend\index.html
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
-    <meta charset="UTF-8" />
+<head>
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.5, maximum-scale=3.0" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-    <title>授权管理系统</title>
+  <meta name="viewport"
-    <!-- Noto Sans SC 本地字体预加载（优化加载速度） -->
+    content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.5, maximum-scale=3.0" />
-    <!-- 注意: 字体文件需要下载到 src/assets/fonts/ 目录，参考 FONT_OPTIMIZATION.md -->
+  <title>授权管理系统</title>
-    <link rel="preload" href="/src/assets/fonts/noto-sans-sc-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+</head>
-    <link rel="preload" href="/src/assets/fonts/noto-sans-sc-medium.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+
-    <link rel="preload" href="/src/assets/fonts/noto-sans-sc-bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+<body>
-  </head>
+  <div id="app"></div>
-  <body>
+  <script type="module" src="/src/main.ts"></script>
-    <div id="app"></div>
+</body>
-    <script type="module" src="/src/main.ts"></script>
+
-  </body>
+</html>
-</html>

frontend/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
+    "@fontsource/noto-sans-sc": "^5.2.9",
     "axios": "^1.7.0",
     "echarts": "^5.6.0",
     "element-plus": "^2.10.5",

frontend/pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@element-plus/icons-vue':
         specifier: ^2.3.2
         version: 2.3.2(vue@3.5.27(typescript@5.9.3))
+      '@fontsource/noto-sans-sc':
+        specifier: ^5.2.9
+        version: 5.2.9
       axios:
         specifier: ^1.7.0
         version: 1.13.4
@@ -284,6 +287,9 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
+  '@fontsource/noto-sans-sc@5.2.9':
+    resolution: {integrity: sha512-bTUIWGBgJDpwi5qAr+x0/lcgv80IHTB9vl6s2f6EymZEa7qYV99yNRBZuKFT+SYDKVunZrjCEhWtpxqmbXWl5Q==}
+
   '@humanwhocodes/config-array@0.13.0':
     resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
     engines: {node: '>=10.10.0'}
@@ -1986,6 +1992,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@fontsource/noto-sans-sc@5.2.9': {}
+
   '@humanwhocodes/config-array@0.13.0':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3

frontend/src/assets/styles/fonts.css

@@ -1,40 +1,8 @@
 /* 
- * Noto Sans SC 本地字体定义
+ * 字体加载策略
- * 只包含实际使用的字重：400, 500, 700
- * 使用 font-display: swap 优化字体加载性能
  */
 
-/* 常规字重 400 */
+/* Swis721 BlkCn BT 字体 (40KB) */
-@font-face {
-  font-family: 'Noto Sans SC';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('../fonts/noto-sans-sc-regular.woff2') format('woff2'),
-       url('../fonts/noto-sans-sc-regular.woff') format('woff');
-}
-
-/* 中等字重 500 */
-@font-face {
-  font-family: 'Noto Sans SC';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('../fonts/noto-sans-sc-medium.woff2') format('woff2'),
-       url('../fonts/noto-sans-sc-medium.woff') format('woff');
-}
-
-/* 粗体字重 700 */
-@font-face {
-  font-family: 'Noto Sans SC';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('../fonts/noto-sans-sc-bold.woff2') format('woff2'),
-       url('../fonts/noto-sans-sc-bold.woff') format('woff');
-}
-
-/* Swis721 BlkCn BT 字体 */
 @font-face {
   font-family: 'Swis721 BlkCn BT';
   font-style: normal;
@@ -43,36 +11,11 @@
   src: url('../fonts/Swis721-BlkCn-BT-Black.ttf') format('truetype');
 }
 
-/* PangMenZhengDao 字体 */
+/* PangMenZhengDao 字体 (980KB) */
 @font-face {
   font-family: 'PangMenZhengDao';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('../fonts/PangMenZhengDao.ttf') format('truetype');
-}
+}
-
-/* Source Han Sans CN (思源黑体) */
-@font-face {
-  font-family: 'Source Han Sans CN';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('../fonts/SourceHanSansSC-Regular.otf') format('opentype');
-}
-
-@font-face {
-  font-family: 'Source Han Sans CN';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('../fonts/SourceHanSansSC-Medium.otf') format('opentype');
-}
-
-@font-face {
-  font-family: 'Source Han Sans CN';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('../fonts/SourceHanSansSC-Bold.otf') format('opentype');
-}

frontend/src/main.ts

@@ -10,8 +10,13 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 
+// Noto Sans SC 字体（@fontsource 提供预优化子集化版本）
+import '@fontsource/noto-sans-sc/400.css'
+import '@fontsource/noto-sans-sc/500.css'
+import '@fontsource/noto-sans-sc/700.css'
+
 // 全局样式系统
-import './assets/styles/fonts.css' // 本地字体（优先加载）
+import './assets/styles/fonts.css' // 其他本地字体
 import './assets/styles/global.scss'
 import './assets/styles/element-theme.scss'
 

frontend/src/views/Customers/index.vue

@@ -110,11 +110,6 @@
           <el-table-column prop="customer_type_display" :label="t('customers.table.customerType')" :width="130"  align="center">
           </el-table-column>
           <el-table-column prop="contact_person" :label="t('customers.table.contactPerson')" :width="140"    align="center" />
-          <el-table-column prop="email" :label="t('customers.table.email')" :width="200" show-overflow-tooltip  align="center">
-             <template #default="scope">
-              <span class="ellipsis-text">{{ scope.row.email }}</span>
-            </template>
-            </el-table-column>
           <el-table-column prop="customer_level_display" :label="t('customers.table.customerLevel')" :width="130" align="center">
            </el-table-column>
           <el-table-column prop="status_display" :label="t('customers.table.status')" :width="100"  align="center">
@@ -710,7 +705,7 @@ onMounted(async () => {
   --el-pagination-text-color: var(--app-text-primary);
   --el-pagination-border-color: var(--app-border-color);
   --el-pagination-hover-color: #019C7C;
-  font-family: 'Source Han Sans CN', sans-serif;
+  
 }
 
 /* 页码按钮样式 */
@@ -752,7 +747,7 @@ onMounted(async () => {
 /* 总数和每页条数样式 */
 :deep(.el-pagination .el-pagination__total),
 :deep(.el-pagination .el-pagination__sizes) {
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   font-weight: 350;
   font-size: 14px;
   color: var(--app-text-primary);
@@ -772,7 +767,7 @@ onMounted(async () => {
 
 /* 跳转输入框 */
 :deep(.el-pagination .el-pagination__jump) {
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   font-weight: 350;
   font-size: 14px;
   color: var(--app-text-primary);
@@ -793,7 +788,7 @@ onMounted(async () => {
 
 :deep(.el-pagination .el-pagination__jump .el-input__inner) {
   text-align: center;
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   font-size: 14px;
   color: var(--app-text-primary);
 }
@@ -1285,7 +1280,7 @@ onMounted(async () => {
 :deep(.filter-select .el-select__selected-item) {
   font-size: 14px;
   color: var(--app-text-secondary);
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   font-weight: 400;
   line-height: 24px;
 }
@@ -1293,7 +1288,7 @@ onMounted(async () => {
 :deep(.filter-select .el-select__placeholder) {
   font-size: 14px;
   color: var(--app-text-secondary);
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   font-weight: 400;
   line-height: 24px;
 }
@@ -1333,7 +1328,7 @@ onMounted(async () => {
 
 :deep(.search-input .el-input__inner) {
   height: 26px;
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   font-weight: 400;
   font-size: 14px;
   line-height: 24px;  // 改为24px符合8px栅格
@@ -1342,7 +1337,7 @@ onMounted(async () => {
 
 :deep(.search-input .el-input__inner::placeholder) {
   color: var(--app-text-secondary);
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   font-weight: 400;
   font-size: 14px;
 }
@@ -1384,7 +1379,7 @@ onMounted(async () => {
 /* 客户编码样式 */
 .customer-code {
   color: var(--el-color-primary);
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   font-weight: 400;
   font-size: 14px;
   line-height: 24px;  // 改为24px符合8px栅格

frontend/src/views/Dashboard.vue

@@ -393,7 +393,7 @@ onMounted(() => {
     color: var(--app-text-primary);
     margin: 0;
     line-height: 1.3;
-    font-family: 'Source Han Sans CN', sans-serif;
+    
   }
 }
 
@@ -419,7 +419,7 @@ onMounted(() => {
       color: var(--app-text-primary);
       font-weight: 500;
       font-size: 16px;
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       height: 48px;
       padding: 12px 20px; /* 调整为12px符合4px倍数 */
       border-bottom: none;
@@ -432,7 +432,7 @@ onMounted(() => {
         padding: 12px 20px; /* 调整为12px符合4px倍数 */
         border-bottom: 1px solid var(--app-border-light);
         font-size: 14px;
-        font-family: 'Source Han Sans CN', sans-serif;
+        
         font-weight: 400; /* 调整为正常粗细 */
         color: var(--app-text-primary);
       }
@@ -473,7 +473,7 @@ onMounted(() => {
   border-radius: 4px;
   font-size: 12px;
   font-weight: 400;
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   display: inline-flex;
   align-items: center;
   justify-content: center;

frontend/src/views/Licenses/LicensesView/components/AuthorizationInfo.vue

@@ -224,7 +224,7 @@ const formatDateRange = () => {
   padding: 16px 20px;
 
   .card-title {
-    font-family: 'Source Han Sans CN', sans-serif;
+    
     font-size: 16px;
     font-weight: 700;
     line-height: 18px;
@@ -243,7 +243,7 @@ const formatDateRange = () => {
     }
 
     .card-subtitle {
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 14px;
       font-weight: 400;
       line-height: 18px;
@@ -271,7 +271,7 @@ const formatDateRange = () => {
     gap: 8px;
 
     .info-label {
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 14px;
       font-weight: 400;
       line-height: 22px;
@@ -280,7 +280,7 @@ const formatDateRange = () => {
     }
 
     .info-value {
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 14px;
       font-weight: 400;
       line-height: 22px;
@@ -304,7 +304,7 @@ const formatDateRange = () => {
     }
 
     .tip-text {
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 14px;
       font-weight: 400;
       line-height: 22px;

frontend/src/views/Licenses/LicensesView/components/BasicInfo.vue

@@ -125,7 +125,7 @@ const formatRemainingTime = (endDate?: string) => {
 
     .info-label {
       width: 80px;
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 14px;
       font-weight: 400;
       line-height: 2.2857142857142856em;
@@ -136,7 +136,7 @@ const formatRemainingTime = (endDate?: string) => {
 
     .info-value {
       flex: 1;
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 14px;
       font-weight: 500;
       line-height: 1.5em;
@@ -204,7 +204,7 @@ const formatRemainingTime = (endDate?: string) => {
     }
 
     .stat-label {
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 14px;
       font-weight: 400;
       line-height: 1.3;

frontend/src/views/Licenses/LicensesView/components/ChangeHistory.vue

@@ -232,7 +232,7 @@ const getStatusType = (changeType: string) => {
     gap: 4px;
 
     .filter-label {
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 14px;
       font-weight: 500;
       line-height: 22px;
@@ -251,7 +251,7 @@ const getStatusType = (changeType: string) => {
       }
 
       :deep(.el-input__inner) {
-        font-family: 'Source Han Sans CN', sans-serif;
+        
         font-size: 12px;
         font-weight: 500;
         line-height: 24px;
@@ -263,13 +263,13 @@ const getStatusType = (changeType: string) => {
       width: 280px;
 
       :deep(.el-range-separator) {
-        font-family: 'Source Han Sans CN', sans-serif;
+        
         font-size: 12px;
         color: #666666;
       }
 
       :deep(.el-range-input) {
-        font-family: 'Source Han Sans CN', sans-serif;
+        
         font-size: 12px;
         color: #1D1D1D;
       }
@@ -358,7 +358,7 @@ const getStatusType = (changeType: string) => {
         gap: 4px;
 
         .operation-title {
-          font-family: 'Source Han Sans CN', sans-serif;
+          
           font-size: 14px;
           font-weight: 500;
           line-height: 22px;
@@ -375,7 +375,7 @@ const getStatusType = (changeType: string) => {
       .status-tag {
         padding: 7px 16px;
         height: 24px;
-        font-family: 'Source Han Sans CN', sans-serif;
+        
         font-size: 14px;
         font-weight: 500;
         line-height: 21px;
@@ -404,7 +404,7 @@ const getStatusType = (changeType: string) => {
 
     .operator,
     .time {
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 14px;
       font-weight: 400;
       line-height: 18px;
@@ -418,7 +418,7 @@ const getStatusType = (changeType: string) => {
     gap: 8px;
 
     .detail-item {
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 14px;
       font-weight: 400;
       line-height: 22px;

frontend/src/views/Licenses/LicensesView/components/LicenseInfo.vue

@@ -517,7 +517,7 @@ const submitAddLicense = async () => {
   }
 
   :deep(.el-dialog__title) {
-    font-family: 'Source Han Sans CN', sans-serif;
+    
     font-size: 18px;
     font-weight: 600;
     color: #1d1d1d;
@@ -571,7 +571,7 @@ const submitAddLicense = async () => {
 
   :deep(.el-button) {
     padding: 7px 16px;
-    font-family: 'Source Han Sans CN', sans-serif;
+    
     font-size: 14px;
     font-weight: 500;
     line-height: 21px;
@@ -602,7 +602,7 @@ const submitAddLicense = async () => {
     margin-bottom: 12px;
 
     .device-title {
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 16px;
       font-weight: 700;
       line-height: 18px;
@@ -612,7 +612,7 @@ const submitAddLicense = async () => {
     :deep(.el-tag) {
       padding: 7px 16px;
       height: 24px;
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 14px;
       font-weight: 500;
       line-height: 21px;
@@ -637,7 +637,7 @@ const submitAddLicense = async () => {
     gap: 40px;
 
     .device-info-item {
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 14px;
       font-weight: 400;
       line-height: 22px;
@@ -664,7 +664,7 @@ const submitAddLicense = async () => {
     margin-bottom: 16px;
 
     .section-title {
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 16px;
       font-weight: 700;
       line-height: 18px;
@@ -672,7 +672,7 @@ const submitAddLicense = async () => {
     }
 
     .section-subtitle {
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 14px;
       font-weight: 400;
       line-height: 18px;
@@ -693,7 +693,7 @@ const submitAddLicense = async () => {
       gap: 30px;
 
       .info-label {
-        font-family: 'Source Han Sans CN', sans-serif;
+        
         font-size: 14px;
         font-weight: 400;
         line-height: 22px;
@@ -704,7 +704,7 @@ const submitAddLicense = async () => {
 
       .info-value {
         flex: 1;
-        font-family: 'Source Han Sans CN', sans-serif;
+        
         font-size: 14px;
         font-weight: 400;
         line-height: 22px;
@@ -730,7 +730,7 @@ const submitAddLicense = async () => {
       gap: 30px;
 
       .license-label {
-        font-family: 'Source Han Sans CN', sans-serif;
+        
         font-size: 14px;
         font-weight: 400;
         line-height: 22px;
@@ -741,7 +741,7 @@ const submitAddLicense = async () => {
 
       .license-value {
         flex: 1;
-        font-family: 'Source Han Sans CN', sans-serif;
+        
         font-size: 14px;
         font-weight: 400;
         line-height: 22px;
@@ -765,7 +765,7 @@ const submitAddLicense = async () => {
     background: #00C27C;
     border: none;
     color: #FFFFFF;
-    font-family: 'Source Han Sans CN', sans-serif;
+    
     font-size: 14px;
     font-weight: 500;
     line-height: 21px;

frontend/src/views/Licenses/LicensesView/index.vue

@@ -763,7 +763,7 @@ onMounted(() => {
     top: 15px;
 
   .breadcrumb-item {
-    font-family: 'Source Han Sans CN', sans-serif;
+    
     font-size: 14px;
     font-weight: 400;
     line-height: 1.4285714285714286em;
@@ -820,7 +820,7 @@ onMounted(() => {
     border-radius: 28px;
 
     .text {
-      font-family: 'Source Han Sans CN', sans-serif;
+      
       font-size: 16px;
       font-weight: 500;
       line-height: 1.3;
@@ -870,7 +870,7 @@ onMounted(() => {
 }
 
 .license-code {
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   font-size: 18px;
   font-weight: 700;
   line-height: 1.5;
@@ -899,7 +899,7 @@ onMounted(() => {
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.3s;
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   height: 32px;
 
   &.copy-btn {

frontend/src/views/Licenses/LinenseList.vue

@@ -513,7 +513,7 @@ onMounted(async () => {
     padding: 0 !important;
     margin: 0 !important;
     height: 48px !important;
-    font-family: 'Source Han Sans CN', sans-serif !important;
+
     font-size: 14px !important;
     vertical-align: middle !important;
   }
@@ -571,7 +571,7 @@ onMounted(async () => {
 
 .license-code {
   color: var(--el-color-primary);
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   font-weight: 400;
   font-size: 14px;
   line-height: 24px; // 改为24px符合8px栅格
@@ -748,7 +748,7 @@ onMounted(async () => {
   --el-pagination-text-color: var(--app-text-primary);
   --el-pagination-border-color: var(--app-border-color);
   --el-pagination-hover-color: #019c7c;
-  font-family: 'Source Han Sans CN', sans-serif;
+  
 }
 :deep(.el-pagination .btn-prev), :deep(.el-pagination .btn-next), :deep(.el-pagination .el-pager li) {
   width: 32px;
@@ -777,7 +777,7 @@ onMounted(async () => {
   border-color: var(--el-color-primary);
 }
 :deep(.el-pagination .el-pagination__total), :deep(.el-pagination .el-pagination__sizes) {
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   font-weight: 350;
   font-size: 14px;
   color: var(--app-text-primary);
@@ -792,7 +792,7 @@ onMounted(async () => {
   background: var(--app-content-bg);
 }
 :deep(.el-pagination .el-pagination__jump) {
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   font-weight: 350;
   font-size: 14px;
   color: var(--app-text-primary);
@@ -810,7 +810,7 @@ onMounted(async () => {
 }
 :deep(.el-pagination .el-pagination__jump .el-input__inner) {
   text-align: center;
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   font-size: 14px;
   color: var(--app-text-primary);
 }

frontend/src/views/Login.vue

@@ -429,7 +429,7 @@ async function handleLogin() {
 
 .title {
   margin: 0 0 $spacing-medium 0;
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   font-weight: 700;
   font-size: 32px; // 改为32px符合8px栅格
   line-height: 1.2;
@@ -445,7 +445,7 @@ async function handleLogin() {
 
 .subtitle {
   margin: 0 0 $spacing-large 0;
-  font-family: 'Source Han Sans CN', sans-serif;
+  
   font-weight: $font-weight-primary;
   font-size: $font-size-medium;
   line-height: 1.4;