diff --git a/internal/vite-config/package.json b/internal/vite-config/package.json index 5e5c3684..24a925c0 100644 --- a/internal/vite-config/package.json +++ b/internal/vite-config/package.json @@ -46,7 +46,6 @@ "rollup": "^4.18.1", "rollup-plugin-visualizer": "^5.12.0", "sass": "^1.77.8", - "unplugin-turbo-console": "^1.9.5", "vite": "^5.3.3", "vite-plugin-compression": "^0.5.1", "vite-plugin-dts": "^3.9.1", diff --git a/internal/vite-config/src/config/application.ts b/internal/vite-config/src/config/application.ts index 853c4984..b562a38f 100644 --- a/internal/vite-config/src/config/application.ts +++ b/internal/vite-config/src/config/application.ts @@ -30,7 +30,6 @@ function defineApplicationConfig(userConfigPromise: DefineApplicationOptions) { license: true, mode, pwa: true, - turboConsole: false, ...application, }); diff --git a/internal/vite-config/src/plugins/index.ts b/internal/vite-config/src/plugins/index.ts index 3ee53795..5ba23b89 100644 --- a/internal/vite-config/src/plugins/index.ts +++ b/internal/vite-config/src/plugins/index.ts @@ -11,7 +11,6 @@ import viteVueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'; import viteVue from '@vitejs/plugin-vue'; import viteVueJsx from '@vitejs/plugin-vue-jsx'; import { visualizer as viteVisualizerPlugin } from 'rollup-plugin-visualizer'; -import viteTurboConsolePlugin from 'unplugin-turbo-console/vite'; import viteCompressPlugin from 'vite-plugin-compression'; import viteDtsPlugin from 'vite-plugin-dts'; import { createHtmlPlugin as viteHtmlPlugin } from 'vite-plugin-html'; @@ -102,7 +101,6 @@ async function loadApplicationPlugins( license, pwa, pwaOptions, - turboConsole, ...commonOptions } = options; @@ -185,10 +183,6 @@ async function loadApplicationPlugins( await viteExtraAppConfigPlugin({ isBuild: true, root: process.cwd() }), ], }, - { - condition: !isBuild && !!turboConsole, - plugins: () => [viteTurboConsolePlugin()], - }, ]); } @@ -221,6 +215,5 @@ export { viteCompressPlugin, viteDtsPlugin, viteHtmlPlugin, - viteTurboConsolePlugin, viteVisualizerPlugin, }; diff --git a/internal/vite-config/src/typing.ts b/internal/vite-config/src/typing.ts index 2f9b8208..ed77cd25 100644 --- a/internal/vite-config/src/typing.ts +++ b/internal/vite-config/src/typing.ts @@ -3,8 +3,6 @@ import type { ConfigEnv, PluginOption, UserConfig } from 'vite'; import type { PluginOptions } from 'vite-plugin-dts'; import type { Options as PwaPluginOptions } from 'vite-plugin-pwa'; -import viteTurboConsolePlugin from 'unplugin-turbo-console/vite'; - interface IImportMap { imports?: Record; scopes?: { @@ -75,8 +73,6 @@ interface ApplicationPluginOptions extends CommonPluginOptions { pwa?: boolean; /** pwa 插件配置 */ pwaOptions?: Partial; - /** turbo-console 插件配置 */ - turboConsole?: Parameters[0] | boolean; } interface LibraryPluginOptions extends CommonPluginOptions { diff --git a/packages/@core/shared/design/src/css/global.css b/packages/@core/shared/design/src/css/global.css new file mode 100644 index 00000000..ec819f3e --- /dev/null +++ b/packages/@core/shared/design/src/css/global.css @@ -0,0 +1,125 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + *, + ::after, + ::before { + @apply border-border; + + box-sizing: border-box; + border-style: solid; + border-width: 0; + } + + html { + @apply text-foreground bg-background font-sans text-[100%]; + + font-variation-settings: normal; + line-height: 1.15; + text-size-adjust: 100%; + font-synthesis-weight: none; + scroll-behavior: smooth; + text-rendering: optimizelegibility; + -webkit-tap-highlight-color: transparent; + } + + html.invert-mode { + @apply invert; + } + + html.grayscale-mode { + @apply grayscale; + } + + #app, + body, + html { + @apply size-full overscroll-none; + } + + body { + min-height: 100vh; + -webkit-font-smoothing: antialiased; + } + + a, + a:active, + a:hover, + a:link, + a:visited { + @apply no-underline; + } + + ::view-transition-new(root), + ::view-transition-old(root) { + @apply animate-none mix-blend-normal; + } + + ::view-transition-old(root) { + @apply z-[1]; + } + + ::view-transition-new(root) { + @apply z-[2147483646]; + } + + html.dark::view-transition-old(root) { + @apply z-[2147483646]; + } + + html.dark::view-transition-new(root) { + @apply z-[1]; + } + + input::placeholder, + textarea::placeholder { + @apply opacity-100; + } + + input:-webkit-autofill { + @apply border-none; + + box-shadow: 0 0 0 1000px transparent inset; + } + + input[type='number']::-webkit-inner-spin-button, + input[type='number']::-webkit-outer-spin-button { + @apply m-0 appearance-none; + } +} + +@layer components { + .flex-center { + @apply flex items-center justify-center; + } + + .flex-col-center { + @apply flex flex-col items-center justify-center; + } + + .outline-box { + @apply outline-border relative cursor-pointer rounded-md p-1 outline outline-1; + } + + .outline-box::after { + @apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[""]; + } + + .outline-box.outline-box-active { + @apply outline-primary outline outline-2; + } + + .outline-box.outline-box-active::after { + display: none; + } + + .outline-box:not(.outline-box-active):hover::after { + @apply outline-primary left-0 top-0 h-full w-full p-1 opacity-100; + } + + .card-box { + @apply bg-card text-card-foreground border-border rounded-xl border shadow; + } +} diff --git a/packages/@core/shared/design/src/css/nprogress.css b/packages/@core/shared/design/src/css/nprogress.css index 29907b51..3503dab2 100644 --- a/packages/@core/shared/design/src/css/nprogress.css +++ b/packages/@core/shared/design/src/css/nprogress.css @@ -1,26 +1,16 @@ /* Make clicks pass-through */ #nprogress { - pointer-events: none; + @apply pointer-events-none; } #nprogress .bar { - @apply bg-primary; - - position: fixed; - top: 0; - left: 0; - z-index: 1031; - width: 100%; - height: 2px; + @apply bg-primary fixed left-0 top-0 z-[1031] h-[2px] w-full; } /* Fancy blur effect */ #nprogress .peg { - position: absolute; - right: 0; - display: block; - width: 100px; - height: 100%; + @apply absolute right-0 block h-full w-[100px]; + box-shadow: 0 0 10px hsl(var(--primary)), 0 0 5px hsl(var(--primary)); @@ -30,32 +20,22 @@ /* Remove these to get rid of the spinner */ #nprogress .spinner { - position: fixed; - top: 15px; - right: 15px; - z-index: 1031; - display: block; + @apply fixed right-4 top-4 z-[1031] block; } #nprogress .spinner-icon { - box-sizing: border-box; - width: 18px; - height: 18px; - border: solid 2px transparent; - border-top-color: hsl(var(--primary)); - border-left-color: hsl(var(--primary)); - border-radius: 50%; + @apply border-t-primary border-l-primary size-4 rounded-full border-[2px] border-solid border-transparent; + animation: nprogress-spinner 400ms linear infinite; } .nprogress-custom-parent { - position: relative; - overflow: hidden; + @apply relative overflow-hidden; } .nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar { - position: absolute; + @apply absolute; } @keyframes nprogress-spinner { diff --git a/packages/@core/shared/design/src/css/tailwind.css b/packages/@core/shared/design/src/css/tailwind.css deleted file mode 100644 index c7030039..00000000 --- a/packages/@core/shared/design/src/css/tailwind.css +++ /dev/null @@ -1,43 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@layer base { - html { - @apply font-sans; - } -} - -@layer components { - .flex-center { - @apply flex items-center justify-center; - } - - .flex-col-center { - @apply flex flex-col items-center justify-center; - } - - .outline-box { - @apply outline-border relative cursor-pointer rounded-md p-1 outline outline-1; - } - - .outline-box::after { - @apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[""]; - } - - .outline-box.outline-box-active { - @apply outline-primary outline outline-2; - } - - .outline-box.outline-box-active::after { - display: none; - } - - .outline-box:not(.outline-box-active):hover::after { - @apply outline-primary left-0 top-0 h-full w-full p-1 opacity-100; - } - - .card-box { - @apply bg-card text-card-foreground border-border rounded-xl border shadow; - } -} diff --git a/packages/@core/shared/design/src/design-tokens/dark/index.css b/packages/@core/shared/design/src/design-tokens/dark/index.css index ac395c97..97ff7a98 100644 --- a/packages/@core/shared/design/src/design-tokens/dark/index.css +++ b/packages/@core/shared/design/src/design-tokens/dark/index.css @@ -87,6 +87,7 @@ --sidebar: 222.34deg 10.43% 12.27%; --sidebar-deep: 220deg 13.06% 9%; + --menu: var(--sidebar); color-scheme: dark; } diff --git a/packages/@core/shared/design/src/design-tokens/default/index.css b/packages/@core/shared/design/src/design-tokens/default/index.css index e6d38f51..485dafd0 100644 --- a/packages/@core/shared/design/src/design-tokens/default/index.css +++ b/packages/@core/shared/design/src/design-tokens/default/index.css @@ -90,6 +90,7 @@ /* menu */ --sidebar: 0 0% 100%; --sidebar-deep: 210 11.11% 96.47%; + --menu: var(--sidebar); accent-color: var(--primary); color-scheme: light; diff --git a/packages/@core/shared/design/src/index.ts b/packages/@core/shared/design/src/index.ts index cf0a69ef..0543cc97 100644 --- a/packages/@core/shared/design/src/index.ts +++ b/packages/@core/shared/design/src/index.ts @@ -1,5 +1,5 @@ import './scss/index.scss'; -import './css/tailwind.css'; +import './css/global.css'; import './css/nprogress.css'; import './design-tokens'; diff --git a/packages/@core/shared/design/src/scss/base.scss b/packages/@core/shared/design/src/scss/base.scss deleted file mode 100644 index 8844bcee..00000000 --- a/packages/@core/shared/design/src/scss/base.scss +++ /dev/null @@ -1,90 +0,0 @@ -#app, -body, -html { - width: 100%; - height: 100%; - overscroll-behavior: none; -} - -*, -::after, -::before { - @apply border-border; - - box-sizing: border-box; - border-style: solid; - border-width: 0; -} - -html.invert-mode { - @apply invert; -} - -html.grayscale-mode { - @apply grayscale; -} - -html { - @apply text-foreground bg-background; - - font-size: 100%; - font-variation-settings: normal; - line-height: 1.15; - text-size-adjust: 100%; - font-synthesis-weight: none; - scroll-behavior: smooth; - text-rendering: optimizelegibility; - -webkit-tap-highlight-color: transparent; -} - -body { - min-height: 100vh; -} - -a, -a:active, -a:hover, -a:link, -a:visited { - /* color: inherit; */ - text-decoration: none; -} - -::view-transition-new(root), -::view-transition-old(root) { - mix-blend-mode: normal; - animation: none; -} - -::view-transition-old(root) { - z-index: 1; -} - -::view-transition-new(root) { - z-index: 2147483646; -} - -html.dark::view-transition-old(root) { - z-index: 2147483646; -} - -html.dark::view-transition-new(root) { - z-index: 1; -} - -input::placeholder, -textarea::placeholder { - /* color: hsl(var(--color-input-placeholder)) !important; */ - opacity: 1; -} - -input:-webkit-autofill { - border: none; - box-shadow: 0 0 0 1000px transparent inset; -} - -input[type='number']::-webkit-inner-spin-button, -input[type='number']::-webkit-outer-spin-button { - margin: 0; - appearance: none; -} diff --git a/packages/@core/shared/design/src/scss/index.scss b/packages/@core/shared/design/src/scss/index.scss index 716c744f..14a1e27d 100644 --- a/packages/@core/shared/design/src/scss/index.scss +++ b/packages/@core/shared/design/src/scss/index.scss @@ -1,4 +1,3 @@ /** css 样式重置 */ @import 'modern-normalize/modern-normalize.css'; -@import './base'; @import './transition'; diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue index 697aca3f..a375d708 100644 --- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue +++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue @@ -272,9 +272,17 @@ const tabbarStyle = computed((): CSSProperties => { if (!isMixedNav.value) { width = '100%'; } else if (sidebarEnable.value) { + const hoverWidth = + sidebarExpandOnHovering.value && !sidebarExpandOnHover.value + ? props.sidebarWidth + : getSideCollapseWidth.value; + + const runtimeWidth = isMixedNav.value ? hoverWidth : props.sidebarWidth; + marginLeft = sidebarCollapse.value ? getSideCollapseWidth.value - : props.sidebarWidth; + : runtimeWidth; + width = `calc(100% - ${getSidebarWidth.value}px)`; } else { width = '100%'; diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue b/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue index 6aa87391..926150c0 100644 --- a/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue +++ b/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue @@ -30,7 +30,7 @@ const isTopLevelMenuItem = computed( () => parentMenu.value?.type.name === 'Menu', ); -const getCollapseShowTitle = computed( +const collapseShowTitle = computed( () => rootMenu.props?.collapseShowTitle && isTopLevelMenuItem.value && @@ -78,20 +78,25 @@ onBeforeUnmount(() => {