bichangxiong/ruoyi-plus-vben5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: splitting and reorganizing style files

Browse Source
This commit is contained in:
vince
2024-07-08 22:30:19 +08:00
parent 414a639db1
commit 04a1533a1e
56 changed files with 412 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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%;

22
packages/@core/shared/design/build.config.ts
View File

@@ -1,22 +0,0 @@
import { defineBuildConfig } from 'unbuild';
export default defineBuildConfig({
clean: true,
declaration: true,
entries: [
{
builder: 'mkdist',
input: './src',
loaders: ['sass'],
outDir: './dist',
pattern: ['index.scss'],
},
{
builder: 'mkdist',
input: './src',
loaders: ['postcss'],
outDir: './dist',
pattern: ['tailwind.css'],
},
],
});

30
packages/@core/shared/design/package.json
View File

@@ -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": {
"./bem": {
"development": "./src/scss-bem/bem.scss",
"default": "./dist/bem.scss"
},
".": {
"development": "./src/scss/index.scss",
"default": "./dist/index.css"
},
"./tailwind": {
"development": "./src/tailwind.css",
"default": "./dist/tailwind.css"
},
"./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": {

0
packages/styles/src/common/nprogress.css → packages/@core/shared/design/src/css/nprogress.css
View File

0
packages/@core/shared/design/src/tailwind.css → packages/@core/shared/design/src/css/tailwind.css
View File

1
packages/@core/shared/design/src/index.scss
View File

@@ -1 +0,0 @@
@import './scss/index';

5
packages/@core/shared/design/src/index.ts Normal file
View File

@@ -0,0 +1,5 @@
import './scss/index.scss';
import './css/tailwind.css';
import './css/nprogress.css';
export {};

2
packages/@core/shared/design/src/scss/global.scss → packages/@core/shared/design/src/scss-bem/bem.scss
View File

@@ -1,4 +1,4 @@
@forward './common/constants.scss';
@forward './constants.scss';
@mixin b($block) {
$B: $namespace + '-' + $block !global;

0
packages/@core/shared/design/src/scss/common/constants.scss → packages/@core/shared/design/src/scss-bem/constants.scss
View File

5
packages/@core/shared/design/src/scss/common/base.scss → packages/@core/shared/design/src/scss/base.scss
View File

@@ -1,5 +1,4 @@
#app,
.ant-app,
body,
html {
width: 100%;
@@ -7,10 +6,6 @@ html {
overscroll-behavior: none;
}
.ant-app {
color: inherit;
}
*,
::after,
::before {

2
packages/@core/shared/design/src/scss/index.scss
View File

@@ -1,4 +1,4 @@
/** css 样式重置 */
@import 'modern-normalize/modern-normalize.css';
@import './common/base';
@import './base';
@import './transition';

7
packages/@core/shared/design/vite.config.mts Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from '@vben/vite-config';
export default defineConfig({
vite: {
publicDir: 'src/scss-bem',
},
});

2
packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
View File

@@ -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;

2
packages/@core/ui-kit/menu-ui/src/styles/index.scss
View File

@@ -1,4 +1,4 @@
@import '@vben-core/design/global';
@import '@vben-core/design/bem';
.#{$namespace}-menu__popup-container,
.#{$namespace}-menu {

2
packages/@core/ui-kit/shadcn-ui/package.json
View File

@@ -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"
}

1
packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
View File

@@ -2,7 +2,6 @@
import type { IBreadcrumb } from './interface';
import { IcRoundKeyboardArrowDown } from '@vben-core/iconify';
import {
Breadcrumb,
BreadcrumbItem,

4
packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
View File

@@ -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 {

4
packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
View File

@@ -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';

1
packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
View File

@@ -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<

1
packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
View File

@@ -18,6 +18,7 @@ import {
ContextMenuShortcut,
ContextMenuTrigger,
} from '@vben-core/shadcn-ui/components/ui/context-menu';
import { useForwardPropsEmits } from 'radix-vue';
const props = defineProps<

1
packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
View File

@@ -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<

2
packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
View File

@@ -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';

1
packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
View File

@@ -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(

3
packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
View File

@@ -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'];

1
packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
View File

@@ -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';

3
packages/@core/ui-kit/shadcn-ui/src/components/sheet/sheet.vue
View File

@@ -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;

1
packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
View File

@@ -5,6 +5,7 @@ import {
TooltipProvider,
TooltipTrigger,
} from '@vben-core/shadcn-ui/components/ui/tooltip';
import { TooltipContentProps } from 'radix-vue';
interface Props {

2
packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogAction.vue
View File

@@ -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<

2
packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogCancel.vue
View File

@@ -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<

2
packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroupItem.vue
View File

@@ -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,

2
packages/@core/ui-kit/tabs-ui/src/components/chrome-tabs/chrome-tabs.scss
View File

@@ -1,4 +1,4 @@
@import '@vben-core/design/global';
@import '@vben-core/design/bem';
@include b('chrome-tabs') {
--tabs-background: hsl(var(--background));

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

@@ -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"

2
packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
View File

@@ -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 {}

0
packages/@core/ui-kit/tabs-ui/src/interface.ts → packages/@core/ui-kit/tabs-ui/src/types.ts
View File

3
packages/business/chart-ui/package.json
View File

@@ -36,9 +36,6 @@
}
}
},
"peerDependencies": {
"@vben-core/design": "workspace:*"
},
"dependencies": {
"@vben-core/preferences": "workspace:*",
"@vueuse/core": "^10.11.0",

7
packages/business/universal-ui/package.json
View File

@@ -36,11 +36,7 @@
}
}
},
"peerDependencies": {
"@vben-core/design": "workspace:*"
},
"dependencies": {
"@vben-core/design": "workspace:*",
"@vben-core/iconify": "workspace:*",
"@vben-core/locales": "workspace:*",
"@vben-core/shadcn-ui": "workspace:*",
@@ -52,7 +48,6 @@
"vue-router": "^4.4.0"
},
"devDependencies": {
"@types/qrcode": "^1.5.5",
"@vben/types": "workspace:*"
"@types/qrcode": "^1.5.5"
}
}

4
packages/business/widgets/package.json
View File

@@ -36,12 +36,8 @@
}
}
},
"peerDependencies": {
"@vben-core/design": "workspace:*"
},
"dependencies": {
"@vben-core/colorful": "workspace:*",
"@vben-core/design": "workspace:*",
"@vben-core/iconify": "workspace:*",
"@vben-core/locales": "workspace:*",
"@vben-core/preferences": "workspace:*",

56
packages/business/widgets/src/theme-toggle/theme-button.vue
View File

@@ -86,9 +86,9 @@ function toggleTheme(event: MouseEvent) {
<template>
<VbenButton
:aria-label="theme"
:class="[b(), is(theme)]"
:class="[b(), is(theme), `is-${theme}`]"
aria-live="polite"
class="cursor-pointer border-none bg-none"
class="theme-toggle cursor-pointer border-none bg-none"
v-bind="bindProps"
@click.stop="toggleTheme"
>
@@ -96,6 +96,7 @@ function toggleTheme(event: MouseEvent) {
<mask
id="theme-toggle-moon"
:class="e('moon')"
class="theme-toggle__moon"
fill="hsl(var(--foreground)/80%)"
stroke="none"
>
@@ -105,12 +106,13 @@ function toggleTheme(event: MouseEvent) {
<circle
id="sun"
:class="e('sun')"
class="theme-toggle__sun"
cx="12"
cy="12"
mask="url(#theme-toggle-moon)"
r="11"
/>
<g :class="e('sun-beams')">
<g :class="e('sun-beams')" class="theme-toggle__sun-beams">
<line x1="12" x2="12" y1="1" y2="3" />
<line x1="12" x2="12" y1="21" y2="23" />
<line x1="4.22" x2="5.64" y1="4.22" y2="5.64" />
@@ -125,16 +127,14 @@ function toggleTheme(event: MouseEvent) {
</template>
<style lang="scss" scoped>
@import '@vben-core/design/global';
@include b('theme-toggle') {
@include e('moon') {
.theme-toggle {
&__moon {
& > circle {
transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
}
}
@include e('sun') {
&__sun {
fill: hsl(var(--foreground) / 80%);
stroke: none;
transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
@@ -145,7 +145,7 @@ function toggleTheme(event: MouseEvent) {
}
}
@include e('sun-beams') {
&__sun-beams {
stroke: hsl(var(--foreground) / 80%);
stroke-width: 2px;
transition:
@@ -158,38 +158,32 @@ function toggleTheme(event: MouseEvent) {
}
}
@include is('light') {
@include b('theme-toggle') {
@include e('sun') {
transform: scale(0.5);
}
&.is-light {
.theme-toggle__sun {
transform: scale(0.5);
}
@include e('sun-beams') {
transform: rotateZ(0.25turn);
}
.theme-toggle__sun-beams {
transform: rotateZ(0.25turn);
}
}
@include is('dark') {
@include b('theme-toggle') {
@include e('moon') {
& > circle {
transform: translateX(-20px);
}
&.is-dark {
.theme-toggle__moon {
& > circle {
transform: translateX(-20px);
}
}
@include e('sun-beams') {
opacity: 0;
}
.theme-toggle__sun-beams {
opacity: 0;
}
}
&:hover > svg {
@include b('theme-toggle') {
&__moon,
&__sun {
fill: hsl(var(--foreground));
}
.theme-toggle__sun,
.theme-toggle__moon {
fill: hsl(var(--foreground));
}
}
}

0
packages/utils/build.config.ts → packages/icons/build.config.ts
View File

23
packages/icons/package.json
View File

@@ -10,17 +10,32 @@
},
"license": "MIT",
"type": "module",
"scripts": {
"build": "pnpm unbuild",
"stub": "pnpm unbuild --stub"
},
"files": [
"dist"
],
"main": "./src/index.ts",
"module": "./src/index.ts",
"main": "./dist/index.mjs",
"module": "./dist/index.mjs",
"exports": {
".": {
"default": "./src/index.ts"
"types": "./src/index.ts",
"development": "./src/index.ts",
"default": "./dist/index.mjs"
}
},
"publishConfig": {
"exports": {
".": {
"types": "./dist/index.d.ts",
"default": "./dist/index.mjs"
}
}
},
"dependencies": {
"@vben-core/iconify": "workspace:*"
"@vben-core/iconify": "workspace:*",
"vue": "^3.4.31"
}
}

9
packages/styles/package.json
View File

@@ -24,6 +24,15 @@
"types": "./src/index.ts",
"development": "./src/index.ts",
"default": "./dist/index.mjs"
},
"./antd": {
"types": "./src/antd/index.ts",
"development": "./src/antd/index.ts",
"default": "./dist/antd.mjs"
},
"./bem": {
"development": "./src/bem/bem.scss",
"default": "./dist/bem.scss"
}
},
"publishConfig": {

8
packages/styles/src/antd/base.css Normal file
View File

@@ -0,0 +1,8 @@
/* ant-design-vue 组件库的一些样式重置 */
.ant-app {
width: 100%;
height: 100%;
overscroll-behavior: none;
color: inherit;
}

1
packages/styles/src/antd/index.ts Normal file
View File

@@ -0,0 +1 @@
import './base.css';

1
packages/styles/src/bem/bem.scss Normal file
View File

@@ -0,0 +1 @@
@import '@vben-core/design/bem';

3
packages/styles/src/index.scss
View File

@@ -1,3 +0,0 @@
@import './tokens/light';
@import './tokens/dark';
@import './common/nprogress.css';

4
packages/styles/src/index.ts
View File

@@ -1,6 +1,2 @@
import '@vben-core/design';
import '@vben-core/design-tokens';
import '@vben-core/design/tailwind';
import './index.scss';

0
packages/styles/src/tokens/dark.scss
View File

8
packages/styles/src/tokens/light.scss
View File

@@ -1,8 +0,0 @@
/* 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';
/* authentication */
}

15
packages/styles/vite.config.mts
View File

@@ -1,3 +1,16 @@
import { defineConfig } from '@vben/vite-config';
export default defineConfig();
export default defineConfig({
vite: {
build: {
lib: {
entry: {
antd: 'src/antd/index.ts',
index: 'src/index.ts',
},
fileName: (_format, name) => `${name}.mjs`,
},
},
publicDir: 'src/bem',
},
});