fix: element theme adjustment

apps/web-ele/.env

@@ -1,5 +1,5 @@
 # 应用标题
-VITE_APP_TITLE=Vben Admin
+VITE_APP_TITLE=Vben Admin Ele
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
-VITE_APP_NAMESPACE=vben-web-element
+VITE_APP_NAMESPACE=vben-web-ele

apps/web-ele/.env.development

@@ -1,5 +1,5 @@
 # 端口号
-VITE_PORT=5555
+VITE_PORT=5666
 
 VITE_BASE=/
 

apps/web-ele/index.html

@@ -21,7 +21,7 @@
         (function () {
           var hm = document.createElement('script');
           hm.src =
-            'https://hm.baidu.com/hm.js?d20a01273820422b6aa2ee41b6c9414d';
+            'https://hm.baidu.com/hm.js?97352b16ed2df8c3860cf5a1a65fb4dd';
           var s = document.getElementsByTagName('script')[0];
           s.parentNode.insertBefore(hm, s);
         })();

apps/web-ele/package.json

@@ -6,7 +6,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
-    "directory": "apps/web-antd"
+    "directory": "apps/web-ele"
   },
   "license": "MIT",
   "author": {

apps/web-ele/src/api/demos/index.ts

@@ -1 +0,0 @@
-export * from './status';

apps/web-ele/src/api/demos/status.ts

@@ -1,10 +0,0 @@
-import { requestClient } from '#/api/request';
-
-/**
- * 模拟任意状态码
- */
-async function getMockStatus(status: string) {
-  return requestClient.get('/status', { params: { status } });
-}
-
-export { getMockStatus };

apps/web-ele/src/api/index.ts

@@ -1,2 +1 @@
 export * from './core';
-export * from './demos';

apps/web-ele/src/bootstrap.ts

@@ -3,7 +3,6 @@ import { createApp } from 'vue';
 import { registerAccessDirective } from '@vben/access';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
-import '@vben/styles/antd';
 
 import { setupI18n } from '#/locales';
 

apps/web-ele/src/locales/index.ts

@@ -8,6 +8,7 @@ import { preferences } from '@vben/preferences';
 
 import dayjs from 'dayjs';
 import { Language } from 'element-plus/es/locale';
+import enLocale from 'element-plus/es/locale/lang/en';
 import defaultLocale from 'element-plus/es/locale/lang/zh-cn';
 
 const elementLocale = ref<Language>(defaultLocale);
@@ -71,9 +72,7 @@ async function loadElementLocale(lang: SupportedLanguagesType) {
       break;
     }
     case 'en-US': {
-      elementLocale.value = (await import(
-        'element-plus/es/locale/lang/en'
-      )) as unknown as Language;
+      elementLocale.value = enLocale;
       break;
     }
   }

apps/web-ele/src/preferences.ts

@@ -6,4 +6,7 @@ import { defineOverridesPreferences } from '@vben/preferences';
  */
 export const overridesPreferences = defineOverridesPreferences({
   // overrides
+  app: {
+    name: import.meta.env.VITE_APP_TITLE,
+  },
 });

apps/web-ele/src/views/demos/element/index.vue

@@ -10,7 +10,10 @@ import {
 type NotificationType = 'error' | 'info' | 'success' | 'warning';
 
 function error() {
-  ElMessage.error('Once upon a time you dressed so fine');
+  ElMessage.error({
+    duration: 2500,
+    message: 'Once upon a time you dressed so fine',
+  });
 }
 
 function warning() {

apps/web-naive/.env.development

@@ -1,5 +1,5 @@
 # 端口号
-VITE_PORT=5566
+VITE_PORT=5777
 
 VITE_BASE=/
 

apps/web-naive/src/bootstrap.ts

@@ -3,7 +3,6 @@ import { createApp } from 'vue';
 import { registerAccessDirective } from '@vben/access';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
-import '@vben/styles/antd';
 
 import { setupI18n } from '#/locales';
 

internal/vite-config/package.json

@@ -30,6 +30,7 @@
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@jspm/generator": "^2.1.2",
     "cheerio": "1.0.0-rc.12",
+    "get-port": "^7.1.0",
     "html-minifier-terser": "^7.2.0",
     "nitropack": "^2.9.7",
     "resolve.exports": "^2.0.2",

internal/vite-config/src/plugins/nitor-mock.ts

@@ -4,6 +4,7 @@ import type { NitroMockPluginOptions } from '../typing';
 
 import { colors, consola, getPackage } from '@vben/node-utils';
 
+import getPort from 'get-port';
 import { build, createDevServer, createNitro, prepare } from 'nitropack';
 
 const hmrKeyRe = /^runtimeConfig\.|routeRules\./;
@@ -15,6 +16,11 @@ export const viteNitroMockPlugin = ({
 }: NitroMockPluginOptions = {}): PluginOption => {
   return {
     async configureServer(server) {
+      const availablePort = await getPort({ port });
+      if (availablePort !== port) {
+        return;
+      }
+
       const pkg = await getPackage(mockServerPackage);
       if (!pkg) {
         consola.error(`Package ${mockServerPackage} not found.`);

packages/@core/base/design/src/design-tokens/dark/index.css

@@ -56,7 +56,7 @@
   --heavy-foreground: var(--accent-foreground);
 
   /* Default border color */
-  --border: 240 3.7% 15.9%;
+  --border: 240 3.7% 22%;
 
   /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
   --input: 0deg 0% 100% / 10%;

packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue

@@ -165,7 +165,7 @@ function scrollIntoView() {
                   />
 
                   <span
-                    class="tabs-chrome__label ml-[var(--gap)] flex-1 overflow-hidden whitespace-nowrap"
+                    class="tabs-chrome__label ml-[var(--gap)] flex-1 overflow-hidden whitespace-nowrap text-sm"
                   >
                     {{ tab.title }}
                   </span>

packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue

@@ -139,7 +139,9 @@ function scrollIntoView() {
                     fallback
                   />
 
-                  <span class="flex-1 overflow-hidden whitespace-nowrap">
+                  <span
+                    class="flex-1 overflow-hidden whitespace-nowrap text-sm"
+                  >
                     {{ tab.title }}
                   </span>
                 </div>

packages/effects/hooks/package.json

@@ -24,6 +24,7 @@
     "@vben/preferences": "workspace:*",
     "@vben/stores": "workspace:*",
     "@vben/types": "workspace:*",
+    "@vben/utils": "workspace:*",
     "vue": "^3.4.35",
     "vue-router": "^4.4.0",
     "watermark-js-plus": "^1.5.2"

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

@@ -1,6 +1,7 @@
 import { reactive, watch } from 'vue';
 
 import { preferences } from '@vben/preferences';
+import { updateCSSVariables } from '@vben/utils';
 
 /**
  * 用于适配各个框架的设计系统
@@ -162,39 +163,53 @@ export function useElementPlusDesignTokens() {
     const value = rootStyles.getPropertyValue(variable);
     return isColor ? `hsl(${value})` : value;
   };
-  const el = document.documentElement;
   watch(
     () => preferences.theme,
     () => {
-      el.style.setProperty(
-        '--el-color-primary',
-        getCssVariableValue('--primary'),
-      );
-
-      el.style.setProperty(
-        '--el-color-success',
-        getCssVariableValue('--success'),
-      );
-
-      el.style.setProperty(
-        '--el-color-warning',
-        getCssVariableValue('--warning'),
-      );
-
-      el.style.setProperty(
-        '--el-color-danger',
-        getCssVariableValue('--destructive'),
-      );
-
-      el.style.setProperty(
-        '--el-fill-color-blank',
-        getCssVariableValue('--background'),
-      );
-
-      el.style.setProperty(
-        '--el-text-color-primary',
-        getCssVariableValue('--foreground'),
-      );
+      const background = getCssVariableValue('--background');
+      const border = getCssVariableValue('--border');
+      const variables: Record<string, string> = {
+        '--el-bg-color': background,
+        '--el-bg-color-overlay': getCssVariableValue('--popover'),
+        '--el-bg-color-page': getCssVariableValue('--background-deep'),
+        '--el-border-color': border,
+        '--el-border-color-dark': border,
+        '--el-border-color-light': border,
+        '--el-border-color-lighter': border,
+        '--el-border-radius-base': getCssVariableValue('--radius', false),
+        '--el-color-danger': getCssVariableValue('--destructive'),
+        '--el-color-danger-light-3': getCssVariableValue('--destructive-600'),
+        '--el-color-danger-light-5': getCssVariableValue('--destructive-700'),
+        '--el-color-danger-light-7': getCssVariableValue('--destructive-800'),
+        '--el-color-error-light-8': border,
+        '--el-color-error-light-9': background,
+
+        '--el-color-primary': getCssVariableValue('--primary'),
+        '--el-color-primary-light-3': getCssVariableValue('--primary-600'),
+
+        '--el-color-primary-light-5': getCssVariableValue('--primary-700'),
+        '--el-color-primary-light-7': getCssVariableValue('--primary-800'),
+        '--el-color-success': getCssVariableValue('--success'),
+        '--el-color-success-light-3': getCssVariableValue('--success-600'),
+
+        '--el-color-success-light-5': getCssVariableValue('--success-700'),
+        '--el-color-success-light-7': getCssVariableValue('--success-800'),
+
+        '--el-color-success-light-8': border,
+        '--el-color-success-light-9': background,
+        '--el-color-warning': getCssVariableValue('--warning'),
+        '--el-color-warning-light-3': getCssVariableValue('--warning-600'),
+
+        '--el-color-warning-light-5': getCssVariableValue('--warning-700'),
+        '--el-color-warning-light-7': getCssVariableValue('--warning-800'),
+        '--el-color-warning-light-8': border,
+        '--el-color-warning-light-9': background,
+
+        '--el-fill-color-blank': background,
+        '--el-text-color-primary': getCssVariableValue('--foreground'),
+        '--el-text-color-regular': getCssVariableValue('--foreground'),
+      };
+      updateCSSVariables(variables, `__vben_ele_styles__`);
     },
     { immediate: true },
   );

pnpm-lock.yaml

@@ -570,6 +570,9 @@ importers:
       cheerio:
         specifier: 1.0.0-rc.12
         version: 1.0.0-rc.12
+      get-port:
+        specifier: ^7.1.0
+        version: 7.1.0
       html-minifier-terser:
         specifier: ^7.2.0
         version: 7.2.0
@@ -906,6 +909,9 @@ importers:
       '@vben/types':
         specifier: workspace:*
         version: link:../../types
+      '@vben/utils':
+        specifier: workspace:*
+        version: link:../../utils
       vue:
         specifier: ^3.4.35
         version: 3.4.35(typescript@5.5.4)
@@ -5851,6 +5857,10 @@ packages:
   get-port-please@3.1.2:
     resolution: {integrity: sha512-Gxc29eLs1fbn6LQ4jSU4vXjlwyZhF5HsGuMAa7gqBP4Rw4yxxltyDUuF5MBclFzDTXO+ACchGQoeela4DSfzdQ==}
 
+  get-port@7.1.0:
+    resolution: {integrity: sha512-QB9NKEeDg3xxVwCCwJQ9+xycaz6pBB6iQ76wiWMl1927n0Kir6alPiP+yuiICLLU4jpMe08dXfpebuQppFA2zw==}
+    engines: {node: '>=16'}
+
   get-stdin@9.0.0:
     resolution: {integrity: sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==}
     engines: {node: '>=12'}
@@ -14920,6 +14930,8 @@ snapshots:
 
   get-port-please@3.1.2: {}
 
+  get-port@7.1.0: {}
+
   get-stdin@9.0.0: {}
 
   get-stream@8.0.1: {}