refactor: splitting and reorganizing style files

han2-n · Jul 8, 2024 · 04a1533 · 04a1533
1 parent 414a639
commit 04a1533
Show file tree

Hide file tree

Showing 56 changed files with 412 additions and 157 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -16,6 +16,3 @@ indent_size = 2
 
 [*.md]
 trim_trailing_whitespace = false
-
-[Makefile]
-indent_style = tab
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -1,10 +1,14 @@
 {
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "version": "0.2.0",
   "configurations": [
     {
       "type": "chrome", // chrome、edge
       "name": "vben admin pro dev", // 调试的名称，可以自定义
       "request": "launch",
       "url": "http://localhost:5173",
+      "env": { "NODE_ENV": "development" },
+      "sourceMaps": true,
       "webRoot": "${workspaceFolder}/apps/web-antd/src"
     }
   ]

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -60,7 +60,6 @@
   },
 
   "files.exclude": {
-    "**/.editorconfig": true,
     "**/.eslintcache": true,
     "**/bower_components": true,
     "**/.turbo": true,

diff --git a/apps/web-antd/src/bootstrap.ts b/apps/web-antd/src/bootstrap.ts
@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 
 import '@vben/styles';
+import '@vben/styles/antd';
 import { preferences } from '@vben-core/preferences';
 
 import { loadMessages, setupI18n } from '#/locales';

diff --git a/internal/lint-configs/eslint-config/src/configs/perfectionist.ts b/internal/lint-configs/eslint-config/src/configs/perfectionist.ts
@@ -26,7 +26,7 @@ export async function perfectionist(): Promise<Linter.FlatConfig[]> {
                 vue: 'vue',
               },
               value: {
-                vben: ['@vben*', '@vben/*', '@vben-core/*'],
+                vben: ['@vben*', '@vben/**/**', '@vben-core/**/**'],
                 vue: ['vue', 'vue-*', '@vue*'],
               },
             },

diff --git a/internal/tailwind-config/package.json b/internal/tailwind-config/package.json
@@ -37,6 +37,8 @@
     },
     "./postcss": {
       "types": "./src/postcss.config.ts",
+      "import": "./dist/postcss.config.mjs",
+      "require": "./dist/postcss.config.cjs",
       "default": "./dist/postcss.config.mjs"
     },
     "./*": "./*"

diff --git a/packages/@core/shared/design-tokens/src/default/index.css b/packages/@core/shared/design-tokens/src/default/index.css
@@ -1,5 +1,9 @@
 /* https://gavin-yyc.github.io/colorconvert/ */
 :root {
+  --font-geist-sans: 'geist-sans', -apple-system, blinkmacsystemfont, 'Segoe UI',
+    roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol';
+
   /* Default background color of <body />...etc */
   --background: 0 0 100%;
   --foreground: 210 6% 21%;

diff --git a/packages/@core/shared/design/build.config.ts b/packages/@core/shared/design/build.config.ts
diff --git a/packages/@core/shared/design/package.json b/packages/@core/shared/design/package.json
@@ -11,25 +11,31 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "build": "pnpm unbuild",
-    "prepublishOnly": "npm run build",
-    "stub": "pnpm unbuild --stub"
+    "build": "pnpm vite build",
+    "prepublishOnly": "npm run build"
   },
   "files": [
     "dist",
     "src"
   ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
   "exports": {
-    ".": {
-      "development": "./src/scss/index.scss",
-      "default": "./dist/index.css"
-    },
-    "./tailwind": {
-      "development": "./src/tailwind.css",
-      "default": "./dist/tailwind.css"
+    "./bem": {
+      "development": "./src/scss-bem/bem.scss",
+      "default": "./dist/bem.scss"
     },
-    "./global": {
-      "default": "./src/scss/global.scss"
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "default": "./dist/index.mjs"
+      }
     }
   },
   "dependencies": {

diff --git a/packages/styles/src/common/nprogress.css → ...@core/shared/design/src/css/nprogress.css b/packages/styles/src/common/nprogress.css → ...@core/shared/design/src/css/nprogress.css
diff --git a/...ages/@core/shared/design/src/tailwind.css → .../@core/shared/design/src/css/tailwind.css b/...ages/@core/shared/design/src/tailwind.css → .../@core/shared/design/src/css/tailwind.css
diff --git a/packages/@core/shared/design/src/index.scss b/packages/@core/shared/design/src/index.scss
diff --git a/packages/@core/shared/design/src/index.ts b/packages/@core/shared/design/src/index.ts
@@ -0,0 +1,5 @@
+import './scss/index.scss';
+import './css/tailwind.css';
+import './css/nprogress.css';
+
+export {};
diff --git a/.../@core/shared/design/src/scss/global.scss → ...@core/shared/design/src/scss-bem/bem.scss b/.../@core/shared/design/src/scss/global.scss → ...@core/shared/design/src/scss-bem/bem.scss
@@ -1,4 +1,4 @@
-@forward './common/constants.scss';
+@forward './constants.scss';
 
 @mixin b($block) {
   $B: $namespace + '-' + $block !global;

diff --git a/...red/design/src/scss/common/constants.scss → ...shared/design/src/scss-bem/constants.scss b/...red/design/src/scss/common/constants.scss → ...shared/design/src/scss-bem/constants.scss
diff --git a/...e/shared/design/src/scss/common/base.scss → ...es/@core/shared/design/src/scss/base.scss b/...e/shared/design/src/scss/common/base.scss → ...es/@core/shared/design/src/scss/base.scss
@@ -1,16 +1,11 @@
 #app,
-.ant-app,
 body,
 html {
   width: 100%;
   height: 100%;
   overscroll-behavior: none;
 }
 
-.ant-app {
-  color: inherit;
-}
-
 *,
 ::after,
 ::before {

diff --git a/packages/@core/shared/design/src/scss/index.scss b/packages/@core/shared/design/src/scss/index.scss
@@ -1,4 +1,4 @@
 /** css 样式重置 */
 @import 'modern-normalize/modern-normalize.css';
-@import './common/base';
+@import './base';
 @import './transition';
diff --git a/packages/@core/shared/design/vite.config.mts b/packages/@core/shared/design/vite.config.mts
@@ -0,0 +1,7 @@
+import { defineConfig } from '@vben/vite-config';
+
+export default defineConfig({
+  vite: {
+    publicDir: 'src/scss-bem',
+  },
+});
diff --git a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
@@ -58,7 +58,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
   </ul>
 </template>
 <style lang="scss" scoped>
-@import '@vben-core/design/global';
+@import '@vben-core/design/bem';
 
 @include b('normal-menu') {
   --menu-item-margin-y: 4px;

diff --git a/packages/@core/ui-kit/menu-ui/src/styles/index.scss b/packages/@core/ui-kit/menu-ui/src/styles/index.scss
@@ -1,4 +1,4 @@
-@import '@vben-core/design/global';
+@import '@vben-core/design/bem';
 
 .#{$namespace}-menu__popup-container,
 .#{$namespace}-menu {

diff --git a/packages/@core/ui-kit/shadcn-ui/package.json b/packages/@core/ui-kit/shadcn-ui/package.json
@@ -49,7 +49,7 @@
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
     "class-variance-authority": "^0.7.0",
-    "lucide-vue-next": "^0.401.0",
+    "lucide-vue-next": "^0.402.0",
     "radix-vue": "^1.9.0",
     "vue": "^3.4.31"
   }

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
@@ -2,7 +2,6 @@
 import type { IBreadcrumb } from './interface';
 
 import { IcRoundKeyboardArrowDown } from '@vben-core/iconify';
-
 import {
   Breadcrumb,
   BreadcrumbItem,

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
@@ -3,12 +3,12 @@ import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
 
 import { MdiLoading } from '@vben-core/iconify';
-import { cn } from '@vben-core/toolkit';
-
 import {
   type ButtonVariants,
   buttonVariants,
 } from '@vben-core/shadcn-ui/components/ui/button';
+import { cn } from '@vben-core/toolkit';
+
 import { Primitive, type PrimitiveProps } from 'radix-vue';
 
 interface Props extends PrimitiveProps {

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue b/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed, useSlots } from 'vue';
 
-import { cn } from '@vben-core/toolkit';
-
 import { VbenTooltip } from '@vben-core/shadcn-ui/components/tooltip';
 import { ButtonVariants } from '@vben-core/shadcn-ui/components/ui/button';
+import { cn } from '@vben-core/toolkit';
+
 import { type PrimitiveProps } from 'radix-vue';
 
 import VbenButton from './button.vue';

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue b/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
@@ -2,6 +2,7 @@
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
 
 import { Checkbox } from '@vben-core/shadcn-ui/components/ui/checkbox';
+
 import { useForwardPropsEmits } from 'radix-vue';
 
 const props = defineProps<

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue b/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
@@ -18,6 +18,7 @@ import {
   ContextMenuShortcut,
   ContextMenuTrigger,
 } from '@vben-core/shadcn-ui/components/ui/context-menu';
+
 import { useForwardPropsEmits } from 'radix-vue';
 
 const props = defineProps<

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue b/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
@@ -8,6 +8,7 @@ import {
   HoverCardContent,
   HoverCardTrigger,
 } from '@vben-core/shadcn-ui/components/ui/hover-card';
+
 import { HoverCardContentProps, useForwardPropsEmits } from 'radix-vue';
 
 const props = defineProps<

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue b/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
@@ -5,11 +5,11 @@ import {
   IcOutlineVisibility,
   IcOutlineVisibilityOff,
 } from '@vben-core/iconify';
-
 import {
   type InputProps,
   VbenInput,
 } from '@vben-core/shadcn-ui/components/input';
+
 import { useForwardProps } from 'radix-vue';
 
 import PasswordStrength from './password-strength.vue';

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue b/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
@@ -12,6 +12,7 @@ import {
   Popover as PopoverRoot,
   PopoverTrigger,
 } from '@vben-core/shadcn-ui/components/ui/popover';
+
 import { useForwardPropsEmits } from 'radix-vue';
 
 const props = withDefaults(

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue b/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
@@ -2,9 +2,8 @@
 import type { HTMLAttributes } from 'vue';
 import { ref } from 'vue';
 
-import { cn } from '@vben-core/toolkit';
-
 import { ScrollArea } from '@vben-core/shadcn-ui/components/ui/scroll-area';
+import { cn } from '@vben-core/toolkit';
 
 interface Props {
   class?: HTMLAttributes['class'];

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
@@ -8,6 +8,7 @@ import {
   TabsContent,
   TabsList,
 } from '@vben-core/shadcn-ui/components/ui/tabs';
+
 import { TabsTrigger } from 'radix-vue';
 
 import TabsIndicator from './tabs-indicator.vue';

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/sheet/sheet.vue b/packages/@core/ui-kit/shadcn-ui/src/components/sheet/sheet.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
 
-import { Cross2Icon } from '@radix-icons/vue';
 import {
   VbenButton,
   VbenIconButton,
@@ -18,6 +17,8 @@ import {
   SheetTrigger,
 } from '@vben-core/shadcn-ui/components/ui/sheet';
 
+import { Cross2Icon } from '@radix-icons/vue';
+
 interface Props {
   cancelText?: string;
   description?: string;

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
@@ -5,6 +5,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@vben-core/shadcn-ui/components/ui/tooltip';
+
 import { TooltipContentProps } from 'radix-vue';
 
 interface Props {

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogAction.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogAction.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from 'vue';
 
+import { buttonVariants } from '@vben-core/shadcn-ui/components/ui/button';
 import { cn } from '@vben-core/toolkit';
 
-import { buttonVariants } from '@vben-core/shadcn-ui/components/ui/button';
 import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue';
 
 const props = defineProps<

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogCancel.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from 'vue';
 
+import { buttonVariants } from '@vben-core/shadcn-ui/components/ui/button';
 import { cn } from '@vben-core/toolkit';
 
-import { buttonVariants } from '@vben-core/shadcn-ui/components/ui/button';
 import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue';
 
 const props = defineProps<

diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroupItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroupItem.vue
@@ -3,9 +3,9 @@ import type { VariantProps } from 'class-variance-authority';
 
 import { type HTMLAttributes, computed, inject } from 'vue';
 
+import { toggleVariants } from '@vben-core/shadcn-ui/components/ui/toggle';
 import { cn } from '@vben-core/toolkit';
 
-import { toggleVariants } from '@vben-core/shadcn-ui/components/ui/toggle';
 import {
   ToggleGroupItem,
   type ToggleGroupItemProps,

diff --git a/packages/@core/ui-kit/tabs-ui/src/components/chrome-tabs/chrome-tabs.scss b/packages/@core/ui-kit/tabs-ui/src/components/chrome-tabs/chrome-tabs.scss
@@ -1,4 +1,4 @@
-@import '@vben-core/design/global';
+@import '@vben-core/design/bem';
 
 @include b('chrome-tabs') {
   --tabs-background: hsl(var(--background));

diff --git a/packages/@core/ui-kit/tabs-ui/src/components/chrome-tabs/tabs.vue b/packages/@core/ui-kit/tabs-ui/src/components/chrome-tabs/tabs.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TabItem } from '@vben-core/typings';
 
-import type { TabsProps } from '../../interface';
+import type { TabsProps } from '../../types';
 
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 
@@ -84,11 +84,7 @@ function handleUnPushPin(tab: TabItem) {
 
 <template>
   <div :class="b()" class="relative size-full pt-1">
-    <div
-      ref="contentRef"
-      :class="e('content')"
-      class="relative h-8 overflow-hidden"
-    >
+    <div ref="contentRef" class="relative h-8 overflow-hidden">
       <TransitionGroup name="slide-down">
         <Tab
           v-for="(tab, i) in tabsView"

diff --git a/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue b/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
@@ -4,7 +4,7 @@ import type { TabItem } from '@vben-core/typings';
 import { useForwardPropsEmits } from '@vben-core/shadcn-ui';
 
 import { ChromeTabs } from './components';
-import { TabsProps } from './interface';
+import { TabsProps } from './types';
 
 interface Props extends TabsProps {}
 

diff --git a/...ges/@core/ui-kit/tabs-ui/src/interface.ts → packages/@core/ui-kit/tabs-ui/src/types.ts b/...ges/@core/ui-kit/tabs-ui/src/interface.ts → packages/@core/ui-kit/tabs-ui/src/types.ts