+
()
@@ -50,7 +48,6 @@ const props = withDefaults(
defineProps(),
{
title: '',
- size: 'l',
open: false,
arrow: true,
disabled: false,
diff --git a/packages/yike-design-ui/components/dropdown/style/index.less b/packages/yike-design-ui/components/dropdown/style/index.less
index 35382f463..d7e7475fc 100644
--- a/packages/yike-design-ui/components/dropdown/style/index.less
+++ b/packages/yike-design-ui/components/dropdown/style/index.less
@@ -1,6 +1,7 @@
@import '../../styles/basis.less';
@import '../../styles//mixin.less';
@import '../../tooltip/style/index.less';
+
.yk-dropdown {
position: relative;
@@ -9,7 +10,8 @@
--tooltip-theme-font-color: @font-color-l;
}
- &.disabled {
+ &.yk-dropdown--disabled,
+ &__item--disabled {
.disabled();
}
@@ -20,40 +22,26 @@
min-height: auto;
max-height: none;
}
-}
-
-.yk-dropdown__icon {
- display: inline-block;
- margin-left: 6px;
- transition: transform @animatb ease;
-}
-
-.yk-dropdown-item {
- position: relative;
- padding: 0 @space-m;
- line-height: 32px;
- border-radius: @radius-s;
- cursor: pointer;
- &.disabled {
- .disabled();
+ &__icon {
+ display: inline-block;
+ margin-left: 6px;
+ transition: transform @animatb ease;
}
- &:hover {
- background-color: @bg-color-s;
- }
+ &__item {
+ position: relative;
+ padding: 0 @space-m;
+ line-height: 32px;
+ border-radius: @radius-s;
+ cursor: pointer;
- &.size-s {
- font-size: 9px;
- line-height: 24px;
- }
-
- &.size-m {
- line-height: 28px;
- }
+ &.disabled {
+ .disabled();
+ }
- &.size-xl {
- font-size: 16px;
- line-height: 38px;
+ &:hover {
+ background-color: @bg-color-s;
+ }
}
}
diff --git a/packages/yike-design-ui/components/empty/style/index.less b/packages/yike-design-ui/components/empty/style/index.less
index 5a63d4415..5da96c524 100644
--- a/packages/yike-design-ui/components/empty/style/index.less
+++ b/packages/yike-design-ui/components/empty/style/index.less
@@ -5,7 +5,6 @@
align-items: center;
margin-block: @space-xl;
text-align: center;
- background-color: @bg-color-l;
flex-direction: column;
box-sizing: border-box;
.yk-empty__image {
diff --git a/packages/yike-design-ui/components/image/src/image.vue b/packages/yike-design-ui/components/image/src/image.vue
index f454216a8..88dd370bf 100644
--- a/packages/yike-design-ui/components/image/src/image.vue
+++ b/packages/yike-design-ui/components/image/src/image.vue
@@ -48,7 +48,7 @@
diff --git a/packages/yike-design-ui/components/image/src/preview-group.vue b/packages/yike-design-ui/components/image/src/preview-group.vue
index 2eadff4df..26e0cf08f 100644
--- a/packages/yike-design-ui/components/image/src/preview-group.vue
+++ b/packages/yike-design-ui/components/image/src/preview-group.vue
@@ -29,7 +29,6 @@ import { ImagePreviewGroupProps } from './preview'
import { useState } from './hooks/use-state'
import { YkImage, YkImagePreview } from '..'
import YkSpace from '../../space'
-import '../style'
defineOptions({
name: 'YkImageGroup',
diff --git a/packages/yike-design-ui/components/modal/src/modal.ts b/packages/yike-design-ui/components/modal/src/modal.ts
index 66eef7c33..37337eff7 100644
--- a/packages/yike-design-ui/components/modal/src/modal.ts
+++ b/packages/yike-design-ui/components/modal/src/modal.ts
@@ -1,6 +1,8 @@
+import { Size } from '../../utils';
+
export type modalBaseProps = {
title: string;
- size?: 'small' | 'large';
+ size: Size;
modelValue: boolean;
to?: string;
scrollable?: boolean;
diff --git a/packages/yike-design-ui/components/modal/src/modal.vue b/packages/yike-design-ui/components/modal/src/modal.vue
index 95bb91a6c..369b7455e 100644
--- a/packages/yike-design-ui/components/modal/src/modal.vue
+++ b/packages/yike-design-ui/components/modal/src/modal.vue
@@ -23,7 +23,7 @@
bem('main'),
bem({
shadow: !props.showMask,
- size: size === 'small',
+ [`${size}`]: size,
}),
]"
>
@@ -78,7 +78,7 @@ defineOptions({
const props = withDefaults(defineProps
(), {
modelValue: false,
title: '',
- size: 'large',
+ size: 'l',
showFooter: true,
to: 'body',
scrollable: false,
diff --git a/packages/yike-design-ui/components/modal/style/index.less b/packages/yike-design-ui/components/modal/style/index.less
index ffffe8f08..36570fb80 100644
--- a/packages/yike-design-ui/components/modal/style/index.less
+++ b/packages/yike-design-ui/components/modal/style/index.less
@@ -21,15 +21,24 @@
right: 0;
bottom: 0;
left: 0;
- z-index: 9999;
+ z-index: 1000;
display: flex;
align-items: center;
margin: auto;
width: 100%;
height: 100%;
- .yk-modal--size {
+ .yk-modal--s {
+ max-width: 520px;
+ }
+ .yk-modal--m {
max-width: 800px;
}
+ .yk-modal--l {
+ max-width: 1200px;
+ }
+ .yk-modal--xl {
+ max-width: 96%;
+ }
}
.yk-modal__main {
diff --git a/packages/yike-design-ui/components/pagination/src/components/pagination-jumper/pagination-jumper.ts b/packages/yike-design-ui/components/pagination/src/components/pagination-jumper/pagination-jumper.ts
deleted file mode 100644
index c2d46a208..000000000
--- a/packages/yike-design-ui/components/pagination/src/components/pagination-jumper/pagination-jumper.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { PaginationProps } from '../../pagination';
-
-type JumperProps = Pick<
- PaginationProps,
- 'current' | 'size' | 'simple' | 'disabled'
-> & {
- totalPages: number;
-};
-
-type JumperEmits = {
- (e: 'jump', page: number): void;
-};
-
-export type { JumperProps, JumperEmits };
diff --git a/packages/yike-design-ui/components/pagination/src/components/pagination-jumper/pagination-jumper.vue b/packages/yike-design-ui/components/pagination/src/components/pagination-jumper/pagination-jumper.vue
deleted file mode 100644
index 35851df8d..000000000
--- a/packages/yike-design-ui/components/pagination/src/components/pagination-jumper/pagination-jumper.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-
-
- 前往
-
- /
- {{ totalPages }}
-
-
-
-
-
-
diff --git a/packages/yike-design-ui/components/pagination/src/components/pagination-page-size/pagination-page-size.ts b/packages/yike-design-ui/components/pagination/src/components/pagination-page-size/pagination-page-size.ts
deleted file mode 100644
index 8ebeb0eb0..000000000
--- a/packages/yike-design-ui/components/pagination/src/components/pagination-page-size/pagination-page-size.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { PaginationProps } from '../../pagination';
-
-type PageSizeProps = Pick<
- PaginationProps,
- 'size' | 'disabled' | 'defaultPageSize' | 'pageSizeOptions'
->;
-type PageSizeEmits = {
- (e: 'pageSizeChange', pageSize: number): void;
-};
-
-export type { PageSizeProps, PageSizeEmits };
diff --git a/packages/yike-design-ui/components/pagination/src/components/pagination-page-size/pagination-page-size.vue b/packages/yike-design-ui/components/pagination/src/components/pagination-page-size/pagination-page-size.vue
deleted file mode 100644
index 56ab8e619..000000000
--- a/packages/yike-design-ui/components/pagination/src/components/pagination-page-size/pagination-page-size.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-
-
-
-
- {{ pageSize === -1 ? '全部' : `${pageSize} 条/页` }}
-
-
-
-
-
-
-
-
diff --git a/packages/yike-design-ui/components/pagination/src/components/pagination-pager/pagination-pager.ts b/packages/yike-design-ui/components/pagination/src/components/pagination-pager/pagination-pager.ts
deleted file mode 100644
index 0c86f3ca3..000000000
--- a/packages/yike-design-ui/components/pagination/src/components/pagination-pager/pagination-pager.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { PaginationProps } from '../../pagination';
-
-type PagerProps = Pick<
- PaginationProps,
- 'pagerCount' | 'fixWidth' | 'simple' | 'disabled' | 'size'
-> & {
- totalPages: number;
- current: number;
- pageSize: number;
-};
-
-type PagerEmits = {
- (e: 'change', current: number): void;
-};
-
-export type { PagerProps, PagerEmits };
diff --git a/packages/yike-design-ui/components/pagination/src/components/pagination-pager/pagination-pager.vue b/packages/yike-design-ui/components/pagination/src/components/pagination-pager/pagination-pager.vue
deleted file mode 100644
index c84dd5120..000000000
--- a/packages/yike-design-ui/components/pagination/src/components/pagination-pager/pagination-pager.vue
+++ /dev/null
@@ -1,206 +0,0 @@
-
-
-
-
-
-
-
- 1
-
-
- ...
-
-
- {{ pager }}
-
-
-
- ...
-
-
-
-
-
- {{ totalPages }}
-
-
-
-
-
-
共{{ total }}条
-
-
-
-
-
diff --git a/packages/yike-design-ui/components/pagination/src/control.vue b/packages/yike-design-ui/components/pagination/src/control.vue
new file mode 100644
index 000000000..68e467a00
--- /dev/null
+++ b/packages/yike-design-ui/components/pagination/src/control.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
diff --git a/packages/yike-design-ui/components/pagination/src/jumper.vue b/packages/yike-design-ui/components/pagination/src/jumper.vue
new file mode 100644
index 000000000..8c9d012a0
--- /dev/null
+++ b/packages/yike-design-ui/components/pagination/src/jumper.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/packages/yike-design-ui/components/pagination/src/page-size.vue b/packages/yike-design-ui/components/pagination/src/page-size.vue
new file mode 100644
index 000000000..a017c5c64
--- /dev/null
+++ b/packages/yike-design-ui/components/pagination/src/page-size.vue
@@ -0,0 +1,46 @@
+
+
+
+ {{ pageSize === -1 ? '全部' : `${pageSize} 条/页` }}
+
+
+
+
+
diff --git a/packages/yike-design-ui/components/pagination/src/pager.vue b/packages/yike-design-ui/components/pagination/src/pager.vue
new file mode 100644
index 000000000..4a7c4b843
--- /dev/null
+++ b/packages/yike-design-ui/components/pagination/src/pager.vue
@@ -0,0 +1,102 @@
+
+
+
1
+
+ ...
+
+
+ {{ page }}
+
+
+ ...
+
+
+ {{ lastPage }}
+
+
-
-
-
-
-
+
+
-
-
+ />
+
{{ lastPage }}
+
+
+
+
+
diff --git a/packages/yike-design-ui/components/pagination/src/utils/index.ts b/packages/yike-design-ui/components/pagination/src/utils/index.ts
deleted file mode 100644
index a1262e134..000000000
--- a/packages/yike-design-ui/components/pagination/src/utils/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useCssScope';
diff --git a/packages/yike-design-ui/components/pagination/src/utils/useCssScope.ts b/packages/yike-design-ui/components/pagination/src/utils/useCssScope.ts
deleted file mode 100644
index 86a6cee22..000000000
--- a/packages/yike-design-ui/components/pagination/src/utils/useCssScope.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { inject } from 'vue';
-import { PAGINATION_CSS_NAMESPACE } from '../pagination';
-import { createCssScope } from '../../../utils';
-
-export const useCssScope = (blockSuffix?: string) => {
- const namespace = inject(PAGINATION_CSS_NAMESPACE, 'pagination');
- const cssScope = createCssScope(
- blockSuffix ? `${namespace}-${blockSuffix}` : namespace,
- );
-
- return cssScope;
-};
diff --git a/packages/yike-design-ui/components/pagination/style/index.less b/packages/yike-design-ui/components/pagination/style/index.less
index d749d4810..bde39b9c3 100644
--- a/packages/yike-design-ui/components/pagination/style/index.less
+++ b/packages/yike-design-ui/components/pagination/style/index.less
@@ -1,119 +1,95 @@
+@import '../../styles/mixin.less';
@import '../../styles/basis.less';
@import './variables.less';
-.pagination-disabled() {
- cursor: not-allowed;
- opacity: 0.56;
- &:hover {
- color: @pagination-font-color !important;
- background-color: @pagination-bg-color__disabled !important;
- }
-}
-
-.pagination-size(@size: l) {
- &--@{size} {
- .yk-pagination-pager__item {
- padding: 0 @space-s;
- min-width: ~'@{pagination-pager-size__@{size}}';
- height: ~'@{pagination-pager-size__@{size}}';
- border-radius: ~'@{pagination-border-radius__@{size}}';
- line-height: ~'@{pagination-pager-size__@{size}}';
- }
-
- .yk-pagination-total,
- .yk-pagination-pager__item,
- .yk-pagination-jumper__label {
- font-size: ~'@{pagination-font-size__@{size}}';
- }
- }
-}
+@sizeList: s, m, xl;
.yk-pagination {
display: flex;
align-items: center;
+ text-wrap: nowrap;
user-select: none;
+ gap: 8px;
&--disabled {
- cursor: not-allowed;
-
- .yk-pagination-total,
- .yk-pagination-pager__item {
- .pagination-disabled();
- }
+ .disabled();
}
- .pagination-size(s);
- .pagination-size(m);
- .pagination-size(l);
- .pagination-size(xl);
-}
-
-.yk-pagination-pager {
- display: flex;
- justify-content: center;
- margin: 0;
- padding: 0;
- white-space: nowrap;
-
- &__item {
- cursor: pointer;
- margin: 0 @pagination-margin-size;
+ &-pager__item,
+ &-pager__more,
+ &-control {
+ padding: 0 @space-s;
text-align: center;
vertical-align: middle;
- color: @font-color-l;
- background-color: @pagination-pager-bg-color;
- transition: all @animatb;
+ background-color: @bg-color-s;
+ cursor: pointer;
+ .pgn-item();
- &-ellipsis {
- background-color: transparent;
+ &:hover {
+ background-color: @bg-color-ss;
}
-
- &--active {
- color: #fff !important;
- background-color: @pagination-pager-bg-color__active !important;
+ }
+ each(@sizeList, {
+ &--@{value} {
+ font-size: ~'@{pgn-font-size_@{value}}';
}
- &--disabled {
- .pagination-disabled();
+ &--@{value} &-pager__item,
+ &--@{value} &-pager__more,
+ &--@{value} &-control {
+ .pgn-item(@value);
}
+ });
- &:not(&-ellipsis):hover {
- background-color: @pagination-pager-bg-color__hover;
- }
- &-next {
- margin-right: 0;
- }
- &-prev {
- margin-left: 0;
+ &-control--disabled {
+ opacity: 0.56;
+ cursor: not-allowed;
+
+ &:hover {
+ background-color: @bg-color-s;
}
}
-}
-.yk-pagination-page-size {
- margin-left: @pagination-margin-size*2;
-}
+ &__total::before {
+ content: '/';
+ margin-right: 8px;
+ }
-.yk-pagination-jumper {
- display: flex;
- align-items: center;
- margin: 0 @pagination-margin-size * 2;
+ &-pager {
+ display: flex;
+ align-items: center;
+ gap: 8px;
- .yk-input__widget {
- width: 64px !important;
+ &__item--active {
+ color: @white;
+ background-color: @pcolor !important;
+ }
+
+ &__more {
+ background: none;
+
+ &:hover {
+ background-color: @bg-color-ss;
+ }
+ }
}
- &__label {
- margin: 0 @pagination-margin-size * 2;
- white-space: nowrap;
- color: @font-color-l;
+ &-jumper {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: inherit;
}
- &__separator {
- margin: 0 @pagination-margin-size * 2;
+ .yk-input__widget {
+ width: 64px;
}
}
-.yk-pagination-total {
- margin-right: @pagination-margin-size * 2;
- white-space: nowrap;
+.pgn-item(@size: l) {
+ min-width: ~'@{pgn-size_@{size}}';
+ height: ~'@{pgn-size_@{size}}';
+ font-size: ~'@{pgn-font-size_@{size}}';
+ border-radius: ~'@{pgn-radius_@{size}}';
+ line-height: ~'@{pgn-size_@{size}}';
}
diff --git a/packages/yike-design-ui/components/pagination/style/index.ts b/packages/yike-design-ui/components/pagination/style/index.ts
index d74e52ee9..9434f0728 100644
--- a/packages/yike-design-ui/components/pagination/style/index.ts
+++ b/packages/yike-design-ui/components/pagination/style/index.ts
@@ -1 +1,2 @@
+import '../../styles/basis.less';
import './index.less';
diff --git a/packages/yike-design-ui/components/pagination/style/variables.less b/packages/yike-design-ui/components/pagination/style/variables.less
index 8171754e3..e69f11e3e 100644
--- a/packages/yike-design-ui/components/pagination/style/variables.less
+++ b/packages/yike-design-ui/components/pagination/style/variables.less
@@ -1,21 +1,14 @@
-@pagination-margin-size: 4px;
-@pagination-bg-color__disabled: @bg-color-s;
-@pagination-font-color: @font-color-l;
-@pagination-font-color__hover: @pcolor;
-@pagination-font-color__active: #fff;
-@pagination-font-size__s: @size-ss;
-@pagination-font-size__m: @size-s;
-@pagination-font-size__l: @size-s;
-@pagination-font-size__xl: @size-m;
-@pagination-border-radius__s: @radius-s;
-@pagination-border-radius__m: @radius-s;
-@pagination-border-radius__l: @radius-m;
-@pagination-border-radius__xl: @radius-m;
+@pgn-size_s: 24px;
+@pgn-size_m: 32px;
+@pgn-size_l: 36px;
+@pgn-size_xl: 48px;
-@pagination-pager-bg-color: @bg-color-s;
-@pagination-pager-bg-color__hover: @bg-color-ss;
-@pagination-pager-bg-color__active: @pcolor;
-@pagination-pager-size__s: 24px;
-@pagination-pager-size__m: 32px;
-@pagination-pager-size__l: 36px;
-@pagination-pager-size__xl: 48px;
+@pgn-font-size_s: @size-ss;
+@pgn-font-size_m: @size-s;
+@pgn-font-size_l: @size-s;
+@pgn-font-size_xl: @size-m;
+
+@pgn-radius_s: @radius-s;
+@pgn-radius_m: @radius-s;
+@pgn-radius_l: @radius-m;
+@pgn-radius_xl: @radius-m;
diff --git a/packages/yike-design-ui/components/popconfirm/style/index.less b/packages/yike-design-ui/components/popconfirm/style/index.less
index a52859348..0e456baf6 100644
--- a/packages/yike-design-ui/components/popconfirm/style/index.less
+++ b/packages/yike-design-ui/components/popconfirm/style/index.less
@@ -1,5 +1,6 @@
@import '../../popover/style/index.less';
.yk-popconfirm {
+ line-height: normal;
&__button-group {
display: flex;
justify-content: end;
diff --git a/packages/yike-design-ui/components/scrollbar/style/index.less b/packages/yike-design-ui/components/scrollbar/style/index.less
index ce78e077e..f7bd52192 100644
--- a/packages/yike-design-ui/components/scrollbar/style/index.less
+++ b/packages/yike-design-ui/components/scrollbar/style/index.less
@@ -43,11 +43,12 @@
width: 0;
height: 0;
border-radius: inherit;
- background-color: @bg-color-s;
+ background-color: @gray-1;
+ transition: background @animatb;
cursor: pointer;
&:hover,
&:active {
- background-color: @bg-color-ss;
+ background-color: @gray-3;
}
}
}
diff --git a/packages/yike-design-ui/components/styles/basis.less b/packages/yike-design-ui/components/styles/basis.less
index dfc23fc6c..4719e3ad2 100644
--- a/packages/yike-design-ui/components/styles/basis.less
+++ b/packages/yike-design-ui/components/styles/basis.less
@@ -78,11 +78,11 @@
.font-ss() {
font-size: @size-ss;
- line-height: 1.66;
+ line-height: 1.62;
}
.font-s() {
font-size: @size-s;
- line-height: 1.57;
+ line-height: 1.54;
}
.font-m() {
font-size: @size-m;
diff --git a/packages/yike-design-ui/components/styles/normalize.less b/packages/yike-design-ui/components/styles/normalize.less
index 541255886..93d39299b 100644
--- a/packages/yike-design-ui/components/styles/normalize.less
+++ b/packages/yike-design-ui/components/styles/normalize.less
@@ -11,14 +11,13 @@
body {
min-height: 100vh;
- font-size: @size-s;
+ .font-s();
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
color: @font-color-l;
background: @bg-color-l;
transition: color @animats, background-color @animats;
- line-height: 20px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
diff --git a/packages/yike-design-ui/components/text-area/src/text-area.vue b/packages/yike-design-ui/components/text-area/src/text-area.vue
index a29bb5ff2..276c8756b 100644
--- a/packages/yike-design-ui/components/text-area/src/text-area.vue
+++ b/packages/yike-design-ui/components/text-area/src/text-area.vue
@@ -11,6 +11,7 @@
>
{{ textVal }}