fix: element theme adjustment

2025-02-02 18:28:40 +08:00 · 2024-07-31 22:11:24 +08:00 · 2024-07-31 22:11:24 +08:00 · 9a6e29c401
commit 9a6e29c401
parent 1c9525a013
21 changed files with 80 additions and 52 deletions
--- a/apps/web-ele/.env
+++ b/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
--- a/apps/web-ele/.env.development
+++ b/apps/web-ele/.env.development
@ -1,5 +1,5 @@
 # 端口号
-VITE_PORT=5555
+VITE_PORT=5666

 VITE_BASE=/

--- a/apps/web-ele/index.html
+++ b/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);
        })();
--- a/apps/web-ele/package.json
+++ b/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": {
--- a/apps/web-ele/src/api/demos/index.ts
+++ b/apps/web-ele/src/api/demos/index.ts
@ -1 +0,0 @@
-export * from './status';
--- a/apps/web-ele/src/api/demos/status.ts
+++ b/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 };
--- a/apps/web-ele/src/api/index.ts
+++ b/apps/web-ele/src/api/index.ts
@ -1,2 +1 @@
 export * from './core';
-export * from './demos';
--- a/apps/web-ele/src/bootstrap.ts
+++ b/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';

--- a/apps/web-ele/src/locales/index.ts
+++ b/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;
    }
  }
--- a/apps/web-ele/src/preferences.ts
+++ b/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,
+  },
 });
--- a/apps/web-ele/src/views/demos/element/index.vue
+++ b/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() {
--- a/apps/web-naive/.env.development
+++ b/apps/web-naive/.env.development
@ -1,5 +1,5 @@
 # 端口号
-VITE_PORT=5566
+VITE_PORT=5777

 VITE_BASE=/

--- a/apps/web-naive/src/bootstrap.ts
+++ b/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';

--- a/internal/vite-config/package.json
+++ b/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",
--- a/internal/vite-config/src/plugins/nitor-mock.ts
+++ b/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.`);
--- a/packages/@core/base/design/src/design-tokens/dark/index.css
+++ b/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%;
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/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>
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
+++ b/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>
--- a/packages/effects/hooks/package.json
+++ b/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"
--- a/packages/effects/hooks/src/use-design-tokens.ts
+++ b/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'),
-      );
+      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.style.setProperty(
-        '--el-color-success',
-        getCssVariableValue('--success'),
-      );
+        '--el-color-primary': getCssVariableValue('--primary'),
+        '--el-color-primary-light-3': getCssVariableValue('--primary-600'),

-      el.style.setProperty(
-        '--el-color-warning',
-        getCssVariableValue('--warning'),
-      );
+        '--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.style.setProperty(
-        '--el-color-danger',
-        getCssVariableValue('--destructive'),
-      );
+        '--el-color-success-light-5': getCssVariableValue('--success-700'),
+        '--el-color-success-light-7': getCssVariableValue('--success-800'),

-      el.style.setProperty(
-        '--el-fill-color-blank',
-        getCssVariableValue('--background'),
-      );
+        '--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.style.setProperty(
-        '--el-text-color-primary',
-        getCssVariableValue('--foreground'),
-      );
+        '--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 },
  );
--- a/pnpm-lock.yaml
+++ b/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: {}