Home Explore Help
Sign In
Yumin
/
vue-vben-admin
mirror of https://github.com/vbenjs/vue-vben-admin.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

chore: update theme

vben 8 months ago
parent
376fd17a61
commit
5590cc8fa1
15 changed files with 124 additions and 44 deletions
Split View Show Diff Stats
  1. 3 1
      apps/web-antd/src/app.vue
  2. 1 4
      apps/web-antd/src/views/demos/nested/menu-1.vue
  3. 1 4
      apps/web-antd/src/views/demos/nested/menu-2-1.vue
  4. 1 4
      apps/web-antd/src/views/demos/nested/menu-3-1.vue
  5. 1 4
      apps/web-antd/src/views/demos/nested/menu-3-2-1.vue
  6. 1 1
      internal/tailwind-config/src/index.ts
  7. 3 4
      packages/@core/shared/design/src/design-tokens/default/index.css
  8. 1 0
      packages/effects/hooks/src/index.ts
  9. 78 0
      packages/effects/hooks/src/use-design-tokens.ts
  10. 5 2
      packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
  11. 8 10
      pnpm-lock.yaml
  12. 13 0
      website/.vitepress/config.mts
  13. 1 1
      website/package.json
  14. 6 8
      website/src/guide/in-depth/theme.md
  15. 1 1
      website/src/guide/introduction/quick-start.md

+ 3 - 1
apps/web-antd/src/app.vue
View File 

@@ -2,6 +2,7 @@
 
 import { computed } from 'vue';
 
 
 import { GlobalProvider } from '@vben/common-ui';
 
+import { useDesignTokens } from '@vben/hooks';
 
 import { preferences, usePreferences } from '@vben/preferences';
 
 
 import { App, ConfigProvider, theme } from 'ant-design-vue';
 
@@ -11,6 +12,7 @@ import { antdLocale } from '#/locales';
 
 defineOptions({ name: 'App' });
 
 
 const { isDark } = usePreferences();
 
+const { antDesignTokens } = useDesignTokens();
 
 
 const tokenTheme = computed(() => {
 
   const algorithm = isDark.value
 
@@ -24,7 +26,7 @@ const tokenTheme = computed(() => {
 
 
   return {
 
     algorithm,
 
-    token: { colorPrimary: preferences.theme.colorPrimary },
 
+    token: antDesignTokens.value,
 
   };
 
 });
 
 </script>

+ 1 - 4
apps/web-antd/src/views/demos/nested/menu-1.vue
View File 

@@ -3,8 +3,5 @@ import { Fallback } from '@vben/common-ui';
 
 </script>
 
 
 <template>
 
-  <div>
 
-    <Fallback status="coming-soon" />
 
-    <input />
 
-  </div>
 
+  <Fallback status="coming-soon" />
 
 </template>

+ 1 - 4
apps/web-antd/src/views/demos/nested/menu-2-1.vue
View File 

@@ -3,8 +3,5 @@ import { Fallback } from '@vben/common-ui';
 
 </script>
 
 
 <template>
 
-  <div>
 
-    <Fallback status="coming-soon" />
 
-    <input />
 
-  </div>
 
+  <Fallback status="coming-soon" />
 
 </template>

+ 1 - 4
apps/web-antd/src/views/demos/nested/menu-3-1.vue
View File 

@@ -3,8 +3,5 @@ import { Fallback } from '@vben/common-ui';
 
 </script>
 
 
 <template>
 
-  <div>
 
-    <Fallback status="coming-soon" />
 
-    <input />
 
-  </div>
 
+  <Fallback status="coming-soon" />
 
 </template>

+ 1 - 4
apps/web-antd/src/views/demos/nested/menu-3-2-1.vue
View File 

@@ -3,8 +3,5 @@ import { Fallback } from '@vben/common-ui';
 
 </script>
 
 
 <template>
 
-  <div>
 
-    <Fallback status="coming-soon" />
 
-    <input />
 
-  </div>
 
+  <Fallback status="coming-soon" />
 
 </template>

+ 1 - 1
internal/tailwind-config/src/index.ts
View File 

@@ -160,7 +160,7 @@ export default {
 
       },
 
       fontFamily: {
 
         sans: [
 
-          'var(--font-geist-sans)',
 
+          'var(--font-family)',
 
           //  ...defaultTheme.fontFamily.sans
 
         ],
 
       },

+ 3 - 4
packages/@core/shared/design/src/design-tokens/default/index.css
View File 

@@ -1,8 +1,7 @@
 
 :root {
 
-  --font-geist-sans: 'pingfang sc', -apple-system, blinkmacsystemfont,
 
-    'segoe ui', helvetica, 'helvetica neue', 'microsoft yahei ui',
 
-    'microsoft yahei', arial, 'hiragino sans', 'apple color emoji',
 
-    'segoe ui emoji', 'segoe ui symbol', simsun, sans-serif;
 
+  --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
 
+    'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
 
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
 
   /* Default background color of <body />...etc */
 
   --background: 0 0% 100%;

+ 1 - 0
packages/effects/hooks/src/index.ts
View File 

@@ -1,6 +1,7 @@
 
 export * from './unmount-global-loading';
 
 export * from './use-app-config';
 
 export * from './use-content-maximize';
 
+export * from './use-design-tokens';
 
 export * from './use-refresh';
 
 export * from './use-tabs';
 
 export * from './use-watermark';

+ 78 - 0
packages/effects/hooks/src/use-design-tokens.ts
View File 

@@ -0,0 +1,78 @@
 
+import { computed, ref, watch } from 'vue';
 
+
 
+import { preferences } from '@vben/preferences';
 
+
 
+export function useDesignTokens() {
 
+  const rootStyles = getComputedStyle(document.documentElement);
 
+
 
+  const colorPrimary = ref('');
 
+  const colorError = ref('');
 
+  const colorSuccess = ref('');
 
+  const colorWarning = ref('');
 
+  const colorInfo = ref('');
 
+  const colorBgBase = ref('');
 
+  const colorTextBase = ref('');
 
+  const colorBgContainer = ref('');
 
+  const colorBgElevated = ref('');
 
+  const colorBgLayout = ref('');
 
+  const colorBgMask = ref('');
 
+  const colorBorder = ref('');
 
+  const borderRadius = ref<any>('');
 
+
 
+  const getCssVariableValue = (variable: string, isColor: boolean = true) => {
 
+    const value = rootStyles.getPropertyValue(variable);
 
+    return isColor ? `hsl(${value})` : value;
 
+  };
 
+
 
+  watch(
 
+    () => preferences.theme,
 
+    () => {
 
+      colorInfo.value = colorPrimary.value = getCssVariableValue('--primary');
 
+      colorError.value = getCssVariableValue('--destructive');
 
+      colorWarning.value = getCssVariableValue('--warning');
 
+      colorSuccess.value = getCssVariableValue('--success');
 
+      colorBgBase.value = getCssVariableValue('--background');
 
+      colorBgLayout.value = getCssVariableValue('--background-deep');
 
+      colorBgMask.value = getCssVariableValue('--overlay');
 
+      colorBorder.value = getCssVariableValue('--border');
 
+      colorTextBase.value = getCssVariableValue('--foreground');
 
+      colorBgElevated.value = getCssVariableValue('--popover');
 
+      colorBgContainer.value = getCssVariableValue('--card');
 
+      borderRadius.value = getCssVariableValue('--radius', false);
 
+    },
 
+    { immediate: true },
 
+  );
 
+
 
+  const antDesignTokens = computed(() => {
 
+    return {
 
+      borderRadius: borderRadius.value,
 
+      colorBgBase: colorBgBase.value,
 
+      colorBgContainer: colorBgContainer.value,
 
+      colorBgElevated: colorBgElevated.value,
 
+      colorBgLayout: colorBgLayout.value,
 
+      colorBgMask: colorBgMask.value,
 
+      colorBorder: colorBorder.value,
 
+      colorError: colorError.value,
 
+      colorInfo: colorInfo.value,
 
+      colorPrimary: colorPrimary.value,
 
+      colorSuccess: colorSuccess.value,
 
+      colorTextBase: colorTextBase.value,
 
+      colorWarning: colorWarning.value,
 
+    };
 
+  });
 
+
 
+  return {
 
+    antDesignTokens,
 
+    borderRadius,
 
+    colorBgBase,
 
+    colorBgContainer,
 
+    colorBgElevated,
 
+    colorBorder,
 
+    colorError,
 
+    colorInfo,
 
+    colorPrimary,
 
+    colorSuccess,
 
+    colorTextBase,
 
+    colorWarning,
 
+  };
 
+}

+ 5 - 2
packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
View File 

@@ -8,7 +8,6 @@ import { $t } from '@vben/locales';
 
 import {
 
   BUILT_IN_THEME_PRESETS,
 
   type BuiltinThemePreset,
 
-  preferences,
 
 } from '@vben/preferences';
 
 import { convertToHsl, TinyColor } from '@vben/utils';
 
 
@@ -29,9 +28,13 @@ const inputValue = computed(() => {
 
 const builtinThemePresets = computed(() => {
 
   return [
 
     {
 
-      color: preferences.theme.colorPrimary,
 
+      color: 'hsl(231 98% 65%)',
 
       type: 'default',
 
     },
 
+    // {
 
+    //   color: 'hsl(231 98% 65%)',
 
+    //   type: 'default',
 
+    // },
 
     ...BUILT_IN_THEME_PRESETS,
 
   ];
 
 });

+ 8 - 10
pnpm-lock.yaml
View File 

@@ -711,12 +711,6 @@ importers:
 
         specifier: ^3.4.34
 
         version: 3.4.34(typescript@5.5.4)
 
 
-  packages/effects/common-logic:
 
-    dependencies:
 
-      vue:
 
-        specifier: ^3.4.34
 
-        version: 3.4.34(typescript@5.5.4)
 
-
 
   packages/effects/common-ui:
 
     dependencies:
 
       '@vben-core/shadcn-ui':
 
@@ -768,6 +762,9 @@ importers:
 
       '@vben/types':
 
         specifier: workspace:*
 
         version: link:../../types
 
+      '@vueuse/core':
 
+        specifier: ^10.11.0
 
+        version: 10.11.0(vue@3.4.34(typescript@5.5.4))
 
       vue:
 
         specifier: ^3.4.34
 
         version: 3.4.34(typescript@5.5.4)
 
@@ -3089,6 +3086,7 @@ packages:
 
 
   '@ls-lint/ls-lint@2.2.3':
 
     resolution: {integrity: sha512-ekM12jNm/7O2I/hsRv9HvYkRdfrHpiV1epVuI2NP+eTIcEgdIdKkKCs9KgQydu/8R5YXTov9aHdOgplmCHLupw==}
 
+    cpu: [x64, arm64, s390x]
 
     os: [darwin, linux, win32]
 
     hasBin: true
 
 
@@ -3725,7 +3723,7 @@ packages:
 
     engines: {node: ^18.18.0 || >=20.0.0}
 
     peerDependencies:
 
       '@typescript-eslint/parser': ^7.0.0
 
-      eslint: ^8.56.0
 
+      eslint: ^8.57.0
 
       typescript: '*'
 
     peerDependenciesMeta:
 
       typescript:
 
@@ -3772,7 +3770,7 @@ packages:
 
     resolution: {integrity: sha512-r+JFlm5NdB+JXc7aWWZ3fKSm1gn0pkswEwIYsrGPdsT2GjsRATAKXiNtp3vgAAO1xZhX8alIOEQnNMl3kbTgJw==}
 
     engines: {node: ^18.18.0 || >=20.0.0}
 
     peerDependencies:
 
-      eslint: ^8.56.0
 
+      eslint: ^9.7.0
 
 
   '@typescript-eslint/visitor-keys@7.17.0':
 
     resolution: {integrity: sha512-RVGC9UhPOCsfCdI9pU++K4nD7to+jTcMIbXTSOcrLqUEW6gF2pU1UUbYJKc9cvcRSK1UDeMJ7pdMxf4bhMpV/A==}
 
@@ -5248,7 +5246,7 @@ packages:
 
     resolution: {integrity: sha512-/UbPA+bYY7nIxcjL3kpcDY3UNdoLHFhyBFzHox2M0ypcUoueTn6woZUUmzzi5et/dXChksasYYFeKE2wshOrhg==}
 
     engines: {node: '>=16'}
 
     peerDependencies:
 
-      eslint: ^8.56.0 || ^9.0.0-0
 
+      eslint: ^9.7.0
 
 
   eslint-plugin-jsdoc@48.8.3:
 
     resolution: {integrity: sha512-AtIvwwW9D17MRkM0Z0y3/xZYaa9mdAvJrkY6fU/HNUwGbmMtHVvK4qRM9CDixGVtfNrQitb8c6zQtdh6cTOvLg==}
 
@@ -5320,7 +5318,7 @@ packages:
 
     resolution: {integrity: sha512-n3AKiVpY2/uDcGrS3+QsYDkjPfaOrNrsfQxU9nt5nitd9KuvVXrfAvgCO9DYPSfap+Gqjw9EOrXIsBp5tlHZjA==}
 
     engines: {node: '>=18.18'}
 
     peerDependencies:
 
-      eslint: '>=8.56.0'
 
+      eslint: ^8.57.0
 
 
   eslint-plugin-unused-imports@4.0.1:
 
     resolution: {integrity: sha512-rax76s05z64uQgG9YXsWFmXrgjkaK79AvfeAWiSxhPP6RVGxeRaj4+2u+wxxu/mDy2pmJoOy1QTOEALMia2xGQ==}

+ 13 - 0
website/.vitepress/config.mts
View File 

@@ -304,5 +304,18 @@ function head(): HeadConfig[] {
 
     //     src: 'https://cdn.tailwindcss.com',
 
     //   },
 
     // ],
 
+    [
 
+      'script',
 
+      {},
 
+      `
 
+       var _hmt = _hmt || [];
 
+      (function() {
 
+        var hm = document.createElement("script");
 
+        hm.src = "https://hm.baidu.com/hm.js?2e443a834727c065877c01d89921545e";
 
+        var s = document.getElementsByTagName("script")[0];
 
+        s.parentNode.insertBefore(hm, s);
 
+      })();
 
+      `,
 
+    ],
 
   ];
 
 }

+ 1 - 1
website/package.json
View File 

@@ -3,7 +3,7 @@
 
   "version": "5.0.0",
 
   "private": true,
 
   "scripts": {
 
-    "docs:build": "vitepress build",
 
+    "build": "vitepress build",
 
     "docs:dev": "vitepress dev",
 
     "docs:preview": "vitepress preview"
 
   },

+ 6 - 8
website/src/guide/in-depth/theme.md
View File 

@@ -28,10 +28,9 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
 
 
 ```css
 
 :root {
 
-  --font-geist-sans: 'pingfang sc', -apple-system, blinkmacsystemfont,
 
-    'segoe ui', helvetica, 'helvetica neue', 'microsoft yahei ui',
 
-    'microsoft yahei', arial, 'hiragino sans', 'apple color emoji',
 
-    'segoe ui emoji', 'segoe ui symbol', simsun, sans-serif;
 
+  --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
 
+    'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
 
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
 
   /* Default background color of <body />...etc */
 
   --background: 0 0% 100%;
 
@@ -331,10 +330,9 @@ type BuiltinThemeType =
 
 
 ```css
 
 :root {
 
-  --font-geist-sans: 'pingfang sc', -apple-system, blinkmacsystemfont,
 
-    'segoe ui', helvetica, 'helvetica neue', 'microsoft yahei ui',
 
-    'microsoft yahei', arial, 'hiragino sans', 'apple color emoji',
 
-    'segoe ui emoji', 'segoe ui symbol', simsun, sans-serif;
 
+  --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
 
+    'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
 
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
 
   /* Default background color of <body />...etc */
 
   --background: 0 0% 100%;

+ 1 - 1
website/src/guide/introduction/quick-start.md
View File 

@@ -81,4 +81,4 @@ pnpm dev
 
 
 ```
 
 
-现在，你可以在浏览器访问 [http://localhost:5555](http://localhost:5555) 查看项目。
 
+现在，你可以在浏览器访问 `http://localhost:5555` 查看项目。