perf: optimize for some details and comments (#4030)

* perf: optimize for some details and comments

* fix: test case

* chore: update ci

.github/workflows/build.yml

@@ -44,6 +44,6 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Test and Build
+      - name: Build
         run: |
           pnpm run build

.github/workflows/ci.yml

@@ -5,7 +5,6 @@ on:
   push:
     branches:
       - main
-      - master
       - "releases/*"
 
 permissions:
@@ -25,8 +24,8 @@ jobs:
         node-version: [20]
         os:
           - ubuntu-latest
-          # - macos-latest
+          - macos-latest
-          # - windows-latest
+          - windows-latest
     timeout-minutes: 20
     steps:
       - name: Checkout code

.github/workflows/semantic-pull-request.yml

@@ -9,17 +9,18 @@ on:
 
 jobs:
   main:
-    if: github.repository == 'vitejs/vite'
     runs-on: ubuntu-latest
     name: Semantic Pull Request
     steps:
       - name: Validate PR title
         uses: amannn/action-semantic-pull-request@v5
         with:
+          wip: true
           subjectPattern: ^(?![A-Z]).+$
           subjectPatternError: |
             The subject "{subject}" found in the pull request title "{title}"
             didn't match the configured pattern. Please ensure that the subject
             doesn't start with an uppercase character.
+          requireScope: false
         env:
           GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

deploy/nginx.conf

@@ -1,87 +0,0 @@
-
-#user  nobody;
-worker_processes 1;
-
-#error_log  logs/error.log;
-#error_log  logs/error.log  notice;
-#error_log  logs/error.log  info;
-
-#pid        logs/nginx.pid;
-
-
-events {
-  worker_connections 1024;
-}
-
-
-http {
-  include mime.types;
-  default_type application/octet-stream;
-
-  types {
-    application/javascript  js mjs;
-    text/css                css;
-    text/html               html;
-  }
-
-  sendfile on;
-  # tcp_nopush     on;
-
-  #keepalive_timeout  0;
-  # keepalive_timeout 65;
-
-  # gzip on;
-  # gzip_buffers 32 16k;
-  # gzip_comp_level 6;
-  # gzip_min_length 1k;
-  # gzip_static on;
-  # gzip_types text/plain
-  #   text/css
-  #   application/javascript
-  #   application/json
-  #   application/x-javascript
-  #   text/xml
-  #   application/xml
-  #   application/xml+rss
-  #   text/javascript; #设置压缩的文件类型
-  # gzip_vary on;
-
-  server {
-    listen 8080;
-    server_name localhost;
-
-    location / {
-      root /usr/share/nginx/html;
-      try_files $uri $uri/ /index.html;
-      index index.html;
-      # Enable CORS
-      add_header 'Access-Control-Allow-Origin' '*';
-      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
-      add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
-      if ($request_method = 'OPTIONS') {
-        add_header 'Access-Control-Max-Age' 1728000;
-        add_header 'Content-Type' 'text/plain charset=UTF-8';
-        add_header 'Content-Length' 0;
-        return 204;
-      }
-    }
-
-    error_page 500 502 503 504 /50x.html;
-
-    location = /50x.html {
-        root /usr/share/nginx/html;
-    }
-  }
-}
-
-# stream {    # stream 模块配置和 http 模块在相同级别
-#     upstream redis {
-#         server 127.0.0.1:6379 max_fails=3 fail_timeout=30s;
-#     }
-#     server {
-#         listen 16379;
-#         proxy_connect_timeout 1s;
-#         proxy_timeout 3s;
-#         proxy_pass redis;
-#     }
-# }

docs/src/guide/in-depth/loading.md

@@ -6,7 +6,7 @@
 
 ## 原理
 
-由 `vite-plugin-inject-app-loading` 插件实现，插件会在每个页面的注入一个全局的 loading html。
+由 `vite-plugin-inject-app-loading` 插件实现，插件会在每个应用的注入一个全局的 `loading html`。
 
 ## 关闭
 

internal/lint-configs/commitlint-config/index.mjs

@@ -47,7 +47,6 @@ const userConfig = {
     defaultScope: scopeComplete,
     // English
     typesAppend: [
-      { name: 'wip:      work in process', value: 'wip' },
       { name: 'workflow: workflow improvements', value: 'workflow' },
       { name: 'types:    type definition file changes', value: 'types' },
     ],
@@ -122,7 +121,7 @@ const userConfig = {
     'header-max-length': [2, 'always', 108],
 
     'scope-enum': [0],
-    'subject-case': [0],
+    'subject-case': [2, 'always', 'lower-case'],
     'subject-empty': [2, 'never'],
     'type-empty': [2, 'never'],
     /**

internal/vite-config/src/config/application.ts

@@ -15,8 +15,8 @@ import { getCommonConfig } from './common';
 
 function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) {
   return defineConfig(async (config) => {
-    const { appTitle, base, port, ...envConfig } = await loadAndConvertEnv();
     const options = await userConfigPromise?.(config);
+    const { appTitle, base, port, ...envConfig } = await loadAndConvertEnv();
     const { command, mode } = config;
     const { application = {}, vite = {} } = options || {};
     const root = process.cwd();
@@ -78,16 +78,16 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) {
         port,
         warmup: {
           // 预热文件
-          clientFiles: ['./index.html', './src/{views,layouts}/*'],
+          clientFiles: ['./index.html', './src/{views,layouts,router,store}/*'],
         },
       },
     };
 
-    const mergedConfig = mergeConfig(
+    const mergedCommonConfig = mergeConfig(
       await getCommonConfig(),
       applicationConfig,
     );
-    return mergeConfig(mergedConfig, vite);
+    return mergeConfig(mergedCommonConfig, vite);
   });
 }
 

internal/vite-config/src/config/library.ts

@@ -13,8 +13,8 @@ function defineLibraryConfig(userConfigPromise?: DefineLibraryOptions) {
   return defineConfig(async (config: ConfigEnv) => {
     const options = await userConfigPromise?.(config);
     const { command, mode } = config;
-    const root = process.cwd();
     const { library = {}, vite = {} } = options || {};
+    const root = process.cwd();
     const isBuild = command === 'build';
 
     const plugins = await loadLibraryPlugins({
@@ -52,8 +52,8 @@ function defineLibraryConfig(userConfigPromise?: DefineLibraryOptions) {
       plugins,
     };
     const commonConfig = await getCommonConfig();
-    const mergedConfig = mergeConfig(commonConfig, packageConfig);
+    const mergedConmonConfig = mergeConfig(commonConfig, packageConfig);
-    return mergeConfig(mergedConfig, vite);
+    return mergeConfig(mergedConmonConfig, vite);
   });
 }
 

internal/vite-config/src/options.ts

@@ -28,12 +28,12 @@ const getDefaultPwaOptions = (name: string): Partial<PwaPluginOptions> => ({
 const defaultImportmapOptions: ImportmapPluginOptions = {
   // 通过 Importmap CDN 方式引入,
   // 目前只有esm.sh源兼容性好一点，jspm.io对于 esm 入口要求高
-  defaultProvider: 'jspm.io',
+  defaultProvider: 'esm.sh',
   importmap: [
     { name: 'vue' },
     { name: 'pinia' },
     { name: 'vue-router' },
-    { name: 'vue-i18n' },
+    // { name: 'vue-i18n' },
     { name: 'dayjs' },
     { name: 'vue-demi' },
   ],

internal/vite-config/src/plugins/inject-app-loading/README.md

@@ -1,3 +1,3 @@
 # inject-app-loading
 
-用于在应用加载时显示加载动画的插件。可自行选择加载动画的样式。
+用于在应用加载时显示加载动画的插件，可自行选择加载动画的样式。

internal/vite-config/src/plugins/inject-app-loading/default-loading.html

@@ -25,7 +25,7 @@
     pointer-events: none;
     visibility: hidden;
     opacity: 0;
-    transition: all 0.6s ease-out;
+    transition: all 1s ease-out;
   }
 
   .dark .loading {

internal/vite-config/src/plugins/inject-app-loading/index.ts

@@ -52,19 +52,15 @@ async function viteInjectAppLoadingPlugin(
  * 用于获取loading的html模板
  */
 async function getLoadingRawByHtmlTemplate(loadingTemplate: string) {
-  const __dirname = fileURLToPath(new URL('.', import.meta.url));
-  const defaultLoadingPath = join(__dirname, './default-loading.html');
   // 支持在app内自定义loading模板，模版参考default-loading.html即可
-  const appLoadingPath = join(process.cwd(), loadingTemplate);
+  let appLoadingPath = join(process.cwd(), loadingTemplate);
-  let loadingPath = defaultLoadingPath;
 
-  if (fs.existsSync(appLoadingPath)) {
+  if (!fs.existsSync(appLoadingPath)) {
-    loadingPath = appLoadingPath;
+    const __dirname = fileURLToPath(new URL('.', import.meta.url));
-    return;
+    appLoadingPath = join(__dirname, './default-loading.html');
   }
 
-  const htmlRaw = await fsp.readFile(loadingPath, 'utf8');
+  return await fsp.readFile(appLoadingPath, 'utf8');
-  return htmlRaw;
 }
 
 export { viteInjectAppLoadingPlugin };

internal/vite-config/src/typing.ts

@@ -74,13 +74,13 @@ interface CommonPluginOptions {
 }
 
 interface ApplicationPluginOptions extends CommonPluginOptions {
-  /** 开启 gzip 压缩 */
+  /** 开启 gzip|brotli 压缩 */
   compress?: boolean;
   /** 压缩类型 */
   compressTypes?: ('brotli' | 'gzip')[];
   /** 在构建的时候抽离配置文件 */
   extraAppConfig?: boolean;
-  /** html 插件配置 */
+  /** 是否开启html插件  */
   html?: boolean;
   /** 是否开启i18n */
   i18n?: boolean;
@@ -98,7 +98,7 @@ interface ApplicationPluginOptions extends CommonPluginOptions {
   nitroMock?: boolean;
   /** nitro mock 插件配置 */
   nitroMockOptions?: NitroMockPluginOptions;
-  /** dev是否开启mock服务 */
+  /** 开启控制台自定义打印 */
   print?: boolean;
   /** 打印插件配置 */
   printInfoMap?: PrintPluginOptions['infoMap'];

packages/@core/preferences/src/preferences.test.ts

@@ -1,7 +1,8 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { defaultPreferences } from './config';
-import { isDarkTheme, PreferenceManager } from './preferences';
+import { PreferenceManager } from './preferences';
+import { isDarkTheme } from './update-css-variables';
 
 describe('preferences', () => {
   let preferenceManager: PreferenceManager;

packages/@core/preferences/src/preferences.ts

@@ -19,14 +19,6 @@ const STORAGE_KEY = 'preferences';
 const STORAGE_KEY_LOCALE = `${STORAGE_KEY}-locale`;
 const STORAGE_KEY_THEME = `${STORAGE_KEY}-theme`;
 
-function isDarkTheme(theme: string) {
-  let dark = theme === 'dark';
-  if (theme === 'auto') {
-    dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  }
-  return dark;
-}
-
 class PreferenceManager {
   private cache: null | StorageManager = null;
   // private flattenedState: Flatten<Preferences>;
@@ -39,6 +31,7 @@ class PreferenceManager {
   constructor() {
     this.cache = new StorageManager();
 
+    // 避免频繁的操作缓存
     this.savePreferences = useDebounceFn(
       (preference: Preferences) => this._savePreferences(preference),
       150,
@@ -58,7 +51,6 @@ class PreferenceManager {
   /**
    * 处理更新的键值
    * 根据更新的键值执行相应的操作。
-   *
    * @param {DeepPartial<Preferences>} updates - 部分更新的偏好设置
    */
   private handleUpdates(updates: DeepPartial<Preferences>) {
@@ -124,7 +116,7 @@ class PreferenceManager {
         this.updatePreferences({
           theme: { mode: isDark ? 'dark' : 'light' },
         });
-        updateCSSVariables(this.state);
+        // updateCSSVariables(this.state);
       });
   }
 
@@ -232,4 +224,4 @@ class PreferenceManager {
 }
 
 const preferencesManager = new PreferenceManager();
-export { isDarkTheme, PreferenceManager, preferencesManager };
+export { PreferenceManager, preferencesManager };

packages/@core/preferences/src/update-css-variables.ts

@@ -115,4 +115,4 @@ function isDarkTheme(theme: string) {
   return dark;
 }
 
-export { updateCSSVariables };
+export { isDarkTheme, updateCSSVariables };

packages/@core/preferences/src/use-preferences.ts

@@ -2,7 +2,8 @@ import { computed } from 'vue';
 
 import { diff } from '@vben-core/shared';
 
-import { isDarkTheme, preferencesManager } from './preferences';
+import { preferencesManager } from './preferences';
+import { isDarkTheme } from './update-css-variables';
 
 function usePreferences() {
   const preferences = preferencesManager.getPreferences();

packages/effects/hooks/src/use-design-tokens.ts

@@ -209,7 +209,7 @@ export function useElementPlusDesignTokens() {
         '--el-text-color-primary': getCssVariableValue('--foreground'),
         '--el-text-color-regular': getCssVariableValue('--foreground'),
       };
-      updateCSSVariables(variables, `__vben_ele_styles__`);
+      updateCSSVariables(variables, `__vben_design_styles__`);
     },
     { immediate: true },
   );

packages/utils/src/helpers/unmount-global-loading.ts

@@ -3,6 +3,7 @@
  * 放在这里是而不是放在 index.html 的app标签内，是因为这样比较不会生硬，渲染过快可能会有闪烁
  * 通过先添加css动画隐藏，在动画结束后在移除loading节点来改善体验
  * 不好的地方是会增加一些代码量
+ * 自定义loading可以见：https://doc.vben.pro/guide/in-depth/loading.html
  */
 export function unmountGlobalLoading() {
   // 查找全局 loading 元素

scripts/turbo-run/src/run.ts

@@ -20,7 +20,7 @@ export async function run(options: RunOptions) {
 
   // 只显示有对应命令的包
   const selectPkgs = packages.filter((pkg) => {
-    return (pkg?.packageJson as Record<string, any>).scripts?.[command];
+    return (pkg?.packageJson as Record<string, any>)?.scripts?.[command];
   });
 
   const selectPkg = await select<any, string>({