github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

doc: update doc

pull/6316/head
tangjinzhou 2023-02-23 21:42:41 +08:00
parent 33a47bc27a
commit 2b80870461
84 changed files with 8 additions and 5336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/checkbox/style/index.less
View File

@ -1,6 +0,0 @@
@import '../../style/themes/index';
@import './mixin';
.antCheckboxFn();
@import './rtl';

0
components/checkbox/style/index.tsx → components/checkbox/style/index.ts
View File

241
components/checkbox/style/mixin.less
View File

@ -1,241 +0,0 @@
@import '../../style/mixins/index';
.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
@checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
// 一般状态
.@{checkbox-prefix-cls} {
.reset-component();
position: relative;
top: 0.2em;
line-height: 1;
white-space: nowrap;
outline: none;
cursor: pointer;
.@{checkbox-prefix-cls}-wrapper:hover &-inner,
&:hover &-inner,
&-input:focus + &-inner {
border-color: @checkbox-color;
}
&-checked::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid @checkbox-color;
border-radius: @border-radius-base;
visibility: hidden;
animation: antCheckboxEffect 0.36s ease-in-out;
animation-fill-mode: backwards;
content: '';
}
&:hover::after,
.@{checkbox-prefix-cls}-wrapper:hover &::after {
visibility: visible;
}
&-inner {
position: relative;
top: 0;
left: 0;
display: block;
width: @checkbox-size;
height: @checkbox-size;
direction: ltr;
background-color: @checkbox-check-bg;
border: @checkbox-border-width @border-style-base @border-color-base;
border-radius: @checkbox-border-radius;
// Fix IE checked style
// https://github.com/ant-design/ant-design/issues/12597
border-collapse: separate;
transition: all 0.3s;
&::after {
@check-width: (@checkbox-size / 14) * 5px;
@check-height: (@checkbox-size / 14) * 8px;
position: absolute;
top: 50%;
// https://github.com/ant-design/ant-design/pull/19452
// https://github.com/ant-design/ant-design/pull/31726
left: 21.5%;
display: table;
width: @check-width;
height: @check-height;
border: 2px solid @checkbox-check-color;
border-top: 0;
border-left: 0;
transform: rotate(45deg) scale(0) translate(-50%, -50%);
opacity: 0;
transition: all 0.1s @ease-in-back, opacity 0.1s;
content: ' ';
}
}
&-input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
}
// 选中状态
.@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after {
position: absolute;
display: table;
border: 2px solid @checkbox-check-color;
border-top: 0;
border-left: 0;
transform: rotate(45deg) scale(1) translate(-50%, -50%);
opacity: 1;
transition: all 0.2s @ease-out-back 0.1s;
content: ' ';
}
.@{checkbox-prefix-cls}-checked {
.@{checkbox-inner-prefix-cls} {
background-color: @checkbox-color;
border-color: @checkbox-color;
}
}
.@{checkbox-prefix-cls}-disabled {
cursor: not-allowed;
&.@{checkbox-prefix-cls}-checked {
.@{checkbox-inner-prefix-cls}::after {
border-color: @disabled-color;
animation-name: none;
}
}
.@{checkbox-prefix-cls}-input {
cursor: not-allowed;
pointer-events: none;
}
.@{checkbox-inner-prefix-cls} {
background-color: @input-disabled-bg;
border-color: @border-color-base !important;
&::after {
border-color: @input-disabled-bg;
border-collapse: separate;
animation-name: none;
}
}
& + span {
color: @disabled-color;
cursor: not-allowed;
}
// Not show highlight border of checkbox when disabled
&:hover::after,
.@{checkbox-prefix-cls}-wrapper:hover &::after {
visibility: hidden;
}
}
.@{checkbox-prefix-cls}-wrapper {
.reset-component();
display: inline-flex;
align-items: baseline;
line-height: unset;
cursor: pointer;
&::after {
display: inline-block;
width: 0;
overflow: hidden;
content: '\a0';
}
&.@{checkbox-prefix-cls}-wrapper-disabled {
cursor: not-allowed;
}
& + & {
margin-left: 8px;
}
&&-in-form-item {
input[type='checkbox'] {
width: 14px;
height: 14px;
}
}
}
.@{checkbox-prefix-cls} + span {
padding-right: 8px;
padding-left: 8px;
}
.@{checkbox-prefix-cls}-group {
.reset-component();
display: inline-block;
&-item {
margin-right: @checkbox-group-item-margin-right;
&:last-child {
margin-right: 0;
}
}
&-item + &-item {
margin-left: 0;
}
}
// 半选状态
.@{checkbox-prefix-cls}-indeterminate {
.@{checkbox-inner-prefix-cls} {
background-color: @checkbox-check-bg;
border-color: @border-color-base;
}
.@{checkbox-inner-prefix-cls}::after {
@indeterminate-width: @checkbox-size - 8px;
@indeterminate-height: @checkbox-size - 8px;
top: 50%;
left: 50%;
width: @indeterminate-width;
height: @indeterminate-height;
background-color: @checkbox-color;
border: 0;
transform: translate(-50%, -50%) scale(1);
opacity: 1;
content: ' ';
}
&.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
background-color: @disabled-color;
border-color: @disabled-color;
}
}
}
@keyframes antCheckboxEffect {
0% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(1.6);
opacity: 0;
}
}

28
components/checkbox/style/rtl.less
View File

@ -1,28 +0,0 @@
@import '../../style/mixins/index';
.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
.@{checkbox-prefix-cls}-rtl {
direction: rtl;
}
.@{checkbox-prefix-cls}-group {
&-item {
.@{checkbox-prefix-cls}-group-rtl & {
margin-right: 0;
margin-left: @checkbox-group-item-margin-right;
}
&:last-child {
.@{checkbox-prefix-cls}-group-rtl & {
margin-left: 0 !important;
}
}
}
&-item + &-item {
.@{checkbox-prefix-cls}-group-rtl & {
margin-left: @checkbox-group-item-margin-right;
}
}
}
}

20
components/input/style/IE11.less
View File

@ -1,20 +0,0 @@
// Fix Input component height issue in IE11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.@{ant-prefix}-input {
height: @input-height-base;
&-lg {
height: @input-height-lg;
}
&-sm {
height: @input-height-sm;
}
&-affix-wrapper {
> input.@{ant-prefix}-input {
height: auto;
}
}
}
}

74
components/input/style/affix.less
View File

@ -1,74 +0,0 @@
@import './mixin';
@import (reference) '../../style/themes/index';
@input-prefix-cls: ~'@{ant-prefix}-input';
@input-affix-margin: 4px;
.@{ant-prefix}-input {
&-affix-wrapper {
.input();
display: inline-flex;
&:not(&-disabled):hover {
.hover();
z-index: 1;
.@{ant-prefix}-input-search-with-button & {
z-index: 0;
}
}
&-focused,
&:focus {
z-index: 1;
}
&-disabled {
.@{ant-prefix}-input[disabled] {
background: transparent;
}
}
> input.@{ant-prefix}-input {
padding: 0;
border: none;
outline: none;
&:focus {
box-shadow: none !important;
}
}
&::before {
width: 0;
visibility: hidden;
content: '\a0';
}
}
&-prefix,
&-suffix {
display: flex;
flex: none;
align-items: center;
> *:not(:last-child) {
margin-right: 8px;
}
}
&-show-count-suffix {
color: @text-color-secondary;
}
&-show-count-has-suffix {
margin-right: 2px;
}
&-prefix {
margin-right: @input-affix-margin;
}
&-suffix {
margin-left: @input-affix-margin;
}
}

44
components/input/style/allow-clear.less
View File

@ -1,44 +0,0 @@
@import (reference) '../../style/themes/index';
@input-prefix-cls: ~'@{ant-prefix}-input';
// ========================= Input =========================
.@{iconfont-css-prefix}.@{ant-prefix}-input-clear-icon,
.@{ant-prefix}-input-clear-icon {
margin: 0;
color: @disabled-color;
font-size: @font-size-sm;
vertical-align: -1px;
// https://github.com/ant-design/ant-design/pull/18151
// https://codesandbox.io/s/wizardly-sun-u10br
cursor: pointer;
transition: color 0.3s;
&:hover {
color: @text-color-secondary;
}
&:active {
color: @text-color;
}
&-hidden {
visibility: hidden;
}
&-has-suffix {
margin: 0 @input-affix-margin;
}
}
// ======================= TextArea ========================
.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
padding: 0 !important;
border: 0 !important;
.@{ant-prefix}-input-clear-icon {
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
}
}

86
components/input/style/index.less
View File

@ -1,86 +0,0 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';
@import './affix';
@import './allow-clear';
@import './status';
@input-prefix-cls: ~'@{ant-prefix}-input';
// Input styles
.@{input-prefix-cls} {
.reset-component();
.input();
//== Style for input-group: input with label, with button or dropdown...
&-group {
.reset-component();
.input-group(~'@{input-prefix-cls}');
&-wrapper {
display: inline-block;
width: 100%;
text-align: start;
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
}
}
&-password-icon.@{iconfont-css-prefix} {
color: @text-color-secondary;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: @input-icon-hover-color;
}
}
&[type='color'] {
height: @input-height-base;
&.@{input-prefix-cls}-lg {
height: @input-height-lg;
}
&.@{input-prefix-cls}-sm {
height: @input-height-sm;
padding-top: 3px;
padding-bottom: 3px;
}
}
&-textarea-show-count {
// https://github.com/ant-design/ant-design/issues/33049
> .@{input-prefix-cls} {
height: 100%;
}
&::after {
float: right;
color: @text-color-secondary;
white-space: nowrap;
content: attr(data-count);
pointer-events: none;
}
&.@{input-prefix-cls}-textarea-in-form-item {
&::after {
margin-bottom: -22px;
}
}
}
&-textarea-suffix {
position: absolute;
top: 0;
right: @input-padding-horizontal-base;
bottom: 0;
z-index: 1;
display: inline-flex;
align-items: center;
margin: auto;
}
}
@import './search-input';
@import './rtl';
@import './IE11';

470
components/input/style/mixin.less
View File

@ -1,470 +0,0 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@input-affix-with-clear-btn-width: 38px;
// size mixins for input
.input-lg() {
padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
font-size: @font-size-lg;
}
.input-sm() {
padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
}
// input status
// == when focus or active
.active(@borderColor: @primary-color; @hoverBorderColor: @primary-color-hover; @outlineColor: @primary-color-outline) {
& when (@theme = dark) {
border-color: @borderColor;
}
& when (not (@theme = dark) and not (@theme = variable)) {
border-color: @hoverBorderColor;
}
& when not (@theme = variable) {
box-shadow: @input-outline-offset @outline-blur-size @outline-width
fade(@borderColor, @outline-fade);
}
& when (@theme = variable) {
border-color: @hoverBorderColor;
box-shadow: @input-outline-offset @outline-blur-size @outline-width @outlineColor;
}
border-right-width: @border-width-base;
outline: 0;
}
// == when hover
.hover(@color: @input-hover-border-color) {
border-color: @color;
border-right-width: @border-width-base;
}
.disabled() {
color: @input-disabled-color;
background-color: @input-disabled-bg;
border-color: @input-border-color;
box-shadow: none;
cursor: not-allowed;
opacity: 1;
&:hover {
.hover(@input-border-color);
}
}
// Basic style for input
.input() {
position: relative;
display: inline-block;
width: 100%;
min-width: 0;
padding: @input-padding-vertical-base @input-padding-horizontal-base;
color: @input-color;
font-size: @font-size-base;
line-height: @line-height-base;
background-color: @input-bg;
background-image: none;
border: @border-width-base @border-style-base @input-border-color;
border-radius: @control-border-radius;
transition: all 0.3s;
.placeholder(); // Reset placeholder
&:hover {
.hover();
}
&:focus,
&-focused {
.active();
}
&-disabled {
.disabled();
}
&[disabled] {
.disabled();
}
&-borderless {
&,
&:hover,
&:focus,
&-focused,
&-disabled,
&[disabled] {
background-color: transparent;
border: none;
box-shadow: none;
}
}
// Reset height for `textarea`s
textarea& {
max-width: 100%; // prevent textearea resize from coming out of its container
height: auto;
min-height: @input-height-base;
line-height: @line-height-base;
vertical-align: bottom;
transition: all 0.3s, height 0s;
}
// Size
&-lg {
.input-lg();
}
&-sm {
.input-sm();
}
}
// label input
.input-group(@inputClass) {
position: relative;
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 0;
// Undo padding and float of grid classes
&[class*='col-'] {
float: none;
padding-right: 0;
padding-left: 0;
}
> [class*='col-'] {
padding-right: 8px;
&:last-child {
padding-right: 0;
}
}
&-addon,
&-wrap,
> .@{inputClass} {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
&-addon,
&-wrap {
width: 1px; // To make addon/wrap as small as possible
white-space: nowrap;
vertical-align: middle;
}
&-wrap > * {
display: block !important;
}
.@{inputClass} {
float: left;
width: 100%;
margin-bottom: 0;
text-align: inherit;
&:focus {
z-index: 1; // Fix https://gw.alipayobjects.com/zos/rmsportal/DHNpoqfMXSfrSnlZvhsJ.png
border-right-width: 1px;
}
&:hover {
z-index: 1;
border-right-width: 1px;
.@{ant-prefix}-input-search-with-button & {
z-index: 0;
}
}
}
&-addon {
position: relative;
padding: 0 @input-padding-horizontal-base;
color: @input-color;
font-weight: normal;
font-size: @font-size-base;
text-align: center;
background-color: @input-addon-bg;
border: @border-width-base @border-style-base @input-border-color;
border-radius: @control-border-radius;
transition: all 0.3s;
// Reset Select's style in addon
.@{ant-prefix}-select {
margin: -(@input-padding-vertical-base + 1px) (-@input-padding-horizontal-base);
&.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
.@{ant-prefix}-select-selector {
background-color: inherit;
border: @border-width-base @border-style-base transparent;
box-shadow: none;
}
&-open,
&-focused {
.@{ant-prefix}-select-selector {
color: @primary-color;
}
}
}
// https://github.com/ant-design/ant-design/issues/31333
.@{ant-prefix}-cascader-picker {
margin: -9px (-@control-padding-horizontal);
background-color: transparent;
.@{ant-prefix}-cascader-input {
text-align: left;
border: 0;
box-shadow: none;
}
}
}
// Reset rounded corners
> .@{inputClass}:first-child,
&-addon:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
// Reset Select's style in addon
.@{ant-prefix}-select .@{ant-prefix}-select-selector {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
> .@{inputClass}-affix-wrapper {
&:not(:first-child) .@{inputClass} {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) .@{inputClass} {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&-addon:first-child {
border-right: 0;
}
&-addon:last-child {
border-left: 0;
}
> .@{inputClass}:last-child,
&-addon:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
// Reset Select's style in addon
.@{ant-prefix}-select .@{ant-prefix}-select-selector {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
// Sizing options
&-lg .@{inputClass},
&-lg > &-addon {
.input-lg();
}
&-sm .@{inputClass},
&-sm > &-addon {
.input-sm();
}
// Fix https://github.com/ant-design/ant-design/issues/5754
&-lg .@{ant-prefix}-select-single .@{ant-prefix}-select-selector {
height: @input-height-lg;
}
&-sm .@{ant-prefix}-select-single .@{ant-prefix}-select-selector {
height: @input-height-sm;
}
.@{inputClass}-affix-wrapper {
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
.@{ant-prefix}-input-search & {
border-top-left-radius: @control-border-radius;
border-bottom-left-radius: @control-border-radius;
}
}
&:not(:first-child),
.@{ant-prefix}-input-search &:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
&&-compact {
display: block;
.clearfix();
&-addon,
&-wrap,
> .@{inputClass} {
&:not(:first-child):not(:last-child) {
border-right-width: @border-width-base;
&:hover {
z-index: 1;
}
&:focus {
z-index: 1;
}
}
}
& > * {
display: inline-block;
float: none;
vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139
border-radius: 0;
}
& > .@{inputClass}-affix-wrapper {
display: inline-flex;
}
& > .@{ant-prefix}-picker-range {
display: inline-flex;
}
& > *:not(:last-child) {
margin-right: -@border-width-base;
border-right-width: @border-width-base;
}
// Undo float for .ant-input-group .ant-input
.@{inputClass} {
float: none;
}
// reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input
& > .@{ant-prefix}-select > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input,
& > .@{ant-prefix}-input-group-wrapper .@{ant-prefix}-input {
border-right-width: @border-width-base;
border-radius: 0;
&:hover {
z-index: 1;
}
&:focus {
z-index: 1;
}
}
& > .@{ant-prefix}-select-focused {
z-index: 1;
}
// update z-index for arrow icon
& > .@{ant-prefix}-select > .@{ant-prefix}-select-arrow {
z-index: 1; // https://github.com/ant-design/ant-design/issues/20371
}
& > *:first-child,
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
border-top-left-radius: @control-border-radius;
border-bottom-left-radius: @control-border-radius;
}
& > *:last-child,
& > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
border-right-width: @border-width-base;
border-top-right-radius: @control-border-radius;
border-bottom-right-radius: @control-border-radius;
}
// https://github.com/ant-design/ant-design/issues/12493
& > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input {
vertical-align: top;
}
.@{ant-prefix}-input-group-wrapper + .@{ant-prefix}-input-group-wrapper {
margin-left: -1px;
.@{ant-prefix}-input-affix-wrapper {
border-radius: 0;
}
}
.@{ant-prefix}-input-group-wrapper:not(:last-child) {
&.@{ant-prefix}-input-search > .@{ant-prefix}-input-group {
& > .@{ant-prefix}-input-group-addon > .@{ant-prefix}-input-search-button {
border-radius: 0;
}
& > .@{ant-prefix}-input {
border-radius: @control-border-radius 0 0 @control-border-radius;
}
}
}
}
}
.status-color(
@prefix-cls: @input-prefix-cls;
@text-color: @input-color;
@border-color: @input-border-color;
@background-color: @input-bg;
@hoverBorderColor: @primary-color-hover;
@outlineColor: @primary-color-outline;
) {
&:not(.@{prefix-cls}-disabled):not(.@{prefix-cls}-borderless).@{prefix-cls} {
&,
&:hover {
background: @background-color;
border-color: @border-color;
}
&:focus,
&-focused {
.active(@text-color, @hoverBorderColor, @outlineColor);
}
}
}
.status-color-common(
@prefix-cls: @input-prefix-cls;
@text-color: @input-color;
@border-color: @input-border-color;
@background-color: @input-bg;
@hoverBorderColor: @primary-color-hover;
@outlineColor: @primary-color-outline;
) {
.@{prefix-cls}-prefix {
color: @text-color;
}
}
.group-status-color(
@prefix-cls: @input-prefix-cls;
@text-color: @input-color;
@border-color: @input-border-color;
) {
.@{prefix-cls}-group-addon {
color: @text-color;
border-color: @border-color;
}
}

206
components/input/style/rtl.less
View File

@ -1,206 +0,0 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
//== Style for input-group: input with label, with button or dropdown...
.@{ant-prefix}-input-group {
&-wrapper {
&-rtl {
direction: rtl;
}
}
&-rtl {
direction: rtl;
}
}
// affix
@input-affix-margin: 4px;
.@{ant-prefix}-input {
&-affix-wrapper&-affix-wrapper-rtl {
> input.@{ant-prefix}-input {
border: none;
outline: none;
}
}
&-affix-wrapper-rtl {
.@{ant-prefix}-input-prefix {
margin: 0 0 0 @input-affix-margin;
}
.@{ant-prefix}-input-suffix {
margin: 0 @input-affix-margin 0 0;
}
}
&-textarea {
&-rtl {
direction: rtl;
}
&-rtl&-show-count::after {
text-align: left;
}
}
}
// allow-clear
.@{ant-prefix}-input-clear-icon {
&-has-suffix {
.@{ant-prefix}-input-affix-wrapper-rtl & {
margin-right: 0;
margin-left: @input-affix-margin;
}
}
.@{ant-prefix}-input-affix-wrapper-rtl & {
right: auto;
left: 8px;
}
}
// mixin
@input-rtl-cls: ~'@{ant-prefix}-input-rtl';
.active() {
.@{input-rtl-cls} & {
border-right-width: 0;
border-left-width: @border-width-base !important;
}
}
.hover() {
.@{input-rtl-cls} & {
border-right-width: 0;
border-left-width: @border-width-base !important;
}
}
.input() {
&-rtl {
direction: rtl;
}
}
// label input
.input-group(@inputClass) {
> .@{inputClass}-rtl:first-child,
&-rtl &-addon:first-child {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
&-addon:first-child {
.@{inputClass}-group-rtl & {
border-right: @border-width-base @border-style-base @input-border-color;
border-left: 0;
}
}
&-addon:last-child {
.@{inputClass}-group-rtl & {
border-right: 0;
border-left: @border-width-base @border-style-base @input-border-color;
}
}
> .@{inputClass}:last-child,
&-addon:last-child {
.@{inputClass}-group-rtl& {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
.@{inputClass}-affix-wrapper {
&:not(:first-child) {
.@{inputClass}-group-rtl& {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
&:not(:last-child) {
.@{inputClass}-group-rtl& {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
}
&&-compact {
& > *:not(:last-child) {
.@{inputClass}-group-rtl& {
margin-right: 0;
margin-left: -@border-width-base;
border-left-width: @border-width-base;
}
}
& > *:first-child,
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
.@{inputClass}-group-rtl& {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
& > *:last-child,
& > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
.@{inputClass}-group-rtl& {
border-left-width: @border-width-base;
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
.@{ant-prefix}-input-group-wrapper-rtl + .@{ant-prefix}-input-group-wrapper-rtl {
margin-right: -1px;
margin-left: 0;
}
.@{ant-prefix}-input-group-wrapper-rtl:not(:last-child) {
&.@{ant-prefix}-input-search > .@{ant-prefix}-input-group {
& > .@{ant-prefix}-input {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
}
}
}
// search-input
@search-prefix: ~'@{ant-prefix}-input-search';
@search-rtl-cls: ~'@{search-prefix}-rtl';
.@{search-prefix}-rtl {
direction: rtl;
.@{ant-prefix}-input {
&:hover,
&:focus {
+ .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
border-right-color: @input-hover-border-color;
border-left-color: @border-color-base;
}
}
}
> .@{ant-prefix}-input-group {
> .@{ant-prefix}-input-affix-wrapper {
&:hover,
&-focused {
border-right-color: @input-hover-border-color;
}
}
> .@{ant-prefix}-input-group-addon {
right: -1px;
left: auto;
.@{search-prefix}-button {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
}
}

70
components/input/style/search-input.less
View File

@ -1,70 +0,0 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';
@search-prefix: ~'@{ant-prefix}-input-search';
.@{search-prefix} {
.@{ant-prefix}-input {
&:hover,
&:focus {
border-color: @input-hover-border-color;
+ .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
border-left-color: @input-hover-border-color;
}
}
}
.@{ant-prefix}-input-affix-wrapper {
border-radius: 0;
}
// fix slight height diff in Firefox:
// https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
.@{ant-prefix}-input-lg {
line-height: @line-height-base - 0.0002;
}
> .@{ant-prefix}-input-group {
> .@{ant-prefix}-input-group-addon:last-child {
left: -1px;
padding: 0;
border: 0;
.@{search-prefix}-button {
padding-top: 0;
padding-bottom: 0;
border-radius: 0 @border-radius-base @border-radius-base 0;
}
.@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
color: @text-color-secondary;
&.@{ant-prefix}-btn-loading::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
}
}
&-button {
height: @input-height-base;
&:hover,
&:focus {
z-index: 1;
}
}
&-large &-button {
height: @input-height-lg;
}
&-small &-button {
height: @input-height-sm;
}
}

42
components/input/style/status.less
View File

@ -1,42 +0,0 @@
@import './mixin';
@input-prefix-cls: ~'@{ant-prefix}-input';
@input-wrapper-cls: @input-prefix-cls, ~'@{input-prefix-cls}-affix-wrapper';
each(@input-wrapper-cls, {
.@{value} {
&-status-error {
.status-color(@value, @error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline);
.status-color-common(@input-prefix-cls, @error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline);
}
&-status-warning {
.status-color(@value, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
.status-color-common(@input-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
}
}
});
.@{input-prefix-cls}-textarea {
&-status-error,
&-status-warning,
&-status-success,
&-status-validating {
&.@{input-prefix-cls}-textarea-has-feedback {
.@{input-prefix-cls} {
padding-right: 24px;
}
}
}
}
.@{input-prefix-cls}-group-wrapper {
&-status-error {
.group-status-color(@input-prefix-cls, @error-color, @error-color);
}
&-status-warning {
.group-status-color(@input-prefix-cls, @warning-color, @warning-color);
}
}

0
components/select/style/dropdown.tsx → components/select/style/dropdown.ts
View File

330
components/select/style/index.less
View File

@ -1,330 +0,0 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import './single';
@import './multiple';
@import './status';
@select-prefix-cls: ~'@{ant-prefix}-select';
@select-height-without-border: @input-height-base - 2 * @border-width-base;
@select-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
.select-selector() {
position: relative;
background-color: @select-background;
border: @border-width-base @border-style-base @select-border-color;
border-radius: @control-border-radius;
transition: all 0.3s @ease-in-out;
input {
cursor: pointer;
}
.@{select-prefix-cls}-show-search& {
cursor: text;
input {
cursor: auto;
}
}
.@{select-prefix-cls}-focused:not(.@{select-prefix-cls}-disabled)& {
.active();
}
.@{select-prefix-cls}-disabled& {
color: @disabled-color;
background: @input-disabled-bg;
cursor: not-allowed;
.@{select-prefix-cls}-multiple& {
background: @select-multiple-disabled-background;
}
input {
cursor: not-allowed;
}
}
}
/* Reset search input style */
.select-search-input-without-border() {
.@{select-prefix-cls}-selection-search-input {
margin: 0;
padding: 0;
background: transparent;
border: none;
outline: none;
appearance: none;
&::-webkit-search-cancel-button {
display: none;
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-appearance: none;
}
}
}
.@{select-prefix-cls} {
.reset-component();
position: relative;
display: inline-block;
cursor: pointer;
&:not(&-customize-input) &-selector {
.select-selector();
.select-search-input-without-border();
}
&:not(&-disabled):hover &-selector {
.hover();
}
// ======================== Selection ========================
&-selection-item {
flex: 1;
overflow: hidden;
font-weight: normal;
white-space: nowrap;
text-overflow: ellipsis;
// IE11 css hack. `*::-ms-backdrop,` is a must have
@media all and (-ms-high-contrast: none) {
*::-ms-backdrop,
& {
flex: auto;
}
}
}
// ======================= Placeholder =======================
&-selection-placeholder {
flex: 1;
overflow: hidden;
color: @input-placeholder-color;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
// IE11 css hack. `*::-ms-backdrop,` is a must have
@media all and (-ms-high-contrast: none) {
*::-ms-backdrop,
& {
flex: auto;
}
}
}
// ========================== Arrow ==========================
&-arrow {
.iconfont-mixin();
position: absolute;
top: 50%;
right: @control-padding-horizontal - 1px;
display: flex;
align-items: center;
height: @font-size-sm;
margin-top: (-@font-size-sm / 2);
color: @disabled-color;
font-size: @font-size-sm;
line-height: 1;
text-align: center;
pointer-events: none;
.@{iconfont-css-prefix} {
vertical-align: top;
transition: transform 0.3s;
> svg {
vertical-align: top;
}
&:not(.@{select-prefix-cls}-suffix) {
pointer-events: auto;
}
}
.@{select-prefix-cls}-disabled & {
cursor: not-allowed;
}
> *:not(:last-child) {
margin-inline-end: @padding-xs;
}
}
// ========================== Clear ==========================
&-clear {
position: absolute;
top: 50%;
right: @control-padding-horizontal - 1px;
z-index: 1;
display: inline-block;
width: @font-size-sm;
height: @font-size-sm;
margin-top: (-@font-size-sm / 2);
color: @disabled-color;
font-size: @font-size-sm;
font-style: normal;
line-height: 1;
text-align: center;
text-transform: none;
background: @select-clear-background;
cursor: pointer;
opacity: 0;
transition: color 0.3s ease, opacity 0.15s ease;
text-rendering: auto;
&::before {
display: block;
}
&:hover {
color: @text-color-secondary;
}
.@{select-prefix-cls}:hover & {
opacity: 1;
}
}
// ========================== Popup ==========================
&-dropdown {
.reset-component();
position: absolute;
top: -9999px;
left: -9999px;
z-index: @zindex-dropdown;
box-sizing: border-box;
padding: @select-dropdown-edge-child-vertical-padding 0;
overflow: hidden;
font-size: @font-size-base;
// Fix select render lag of long text in chrome
// https://github.com/ant-design/ant-design/issues/11456
// https://github.com/ant-design/ant-design/issues/11843
font-variant: initial;
background-color: @select-dropdown-bg;
border-radius: @border-radius-base;
outline: none;
box-shadow: @box-shadow-base;
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft {
animation-name: antSlideUpIn;
}
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft {
animation-name: antSlideDownIn;
}
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft {
animation-name: antSlideUpOut;
}
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft {
animation-name: antSlideDownOut;
}
&-hidden {
display: none;
}
&-empty {
color: @disabled-color;
}
}
// ========================= Options =========================
.item() {
position: relative;
display: block;
min-height: @select-dropdown-height;
padding: @select-dropdown-vertical-padding @control-padding-horizontal;
color: @text-color;
font-weight: normal;
font-size: @select-dropdown-font-size;
line-height: @select-dropdown-line-height;
}
&-item-empty {
.item();
color: @disabled-color;
}
&-item {
.item();
cursor: pointer;
transition: background 0.3s ease;
// =========== Group ============
&-group {
color: @text-color-secondary;
font-size: @font-size-sm;
cursor: default;
}
// =========== Option ===========
&-option {
display: flex;
&-content {
flex: auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-state {
flex: none;
}
&-active:not(&-disabled) {
background-color: @select-item-active-bg;
}
&-selected:not(&-disabled) {
color: @select-item-selected-color;
font-weight: @select-item-selected-font-weight;
background-color: @select-item-selected-bg;
.@{select-prefix-cls}-item-option-state {
color: @primary-color;
}
}
&-disabled {
&.@{select-prefix-cls}-item-option-selected {
background-color: @select-multiple-disabled-background;
}
color: @disabled-color;
cursor: not-allowed;
}
&-grouped {
padding-left: @control-padding-horizontal * 2;
}
}
}
// ============================================================
// == Size ==
// ============================================================
&-lg {
font-size: @font-size-lg;
}
// no border style
&-borderless &-selector {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
&&-in-form-item {
width: 100%;
}
}
@import './rtl';

0
components/select/style/index.tsx → components/select/style/index.ts
View File

222
components/select/style/multiple.less
View File

@ -1,222 +0,0 @@
@import (reference) '../../style/themes/index';
@select-prefix-cls: ~'@{ant-prefix}-select';
@select-overflow-prefix-cls: ~'@{select-prefix-cls}-selection-overflow';
@select-multiple-item-border-width: 1px;
@select-multiple-padding: max(
@input-padding-vertical-base - @select-multiple-item-border-width -
@select-multiple-item-spacing-half,
0
);
/**
* Do not merge `height` & `line-height` under style with `selection` & `search`,
* since chrome may update to redesign with its align logic.
*/
// =========================== Overflow ===========================
.@{select-overflow-prefix-cls} {
position: relative;
display: flex;
flex: auto;
flex-wrap: wrap;
max-width: 100%;
&-item {
flex: none;
align-self: center;
max-width: 100%;
}
}
.@{select-prefix-cls} {
&-multiple {
// ========================= Selector =========================
.@{select-prefix-cls}-selector {
display: flex;
flex-wrap: wrap;
align-items: center;
// Multiple is little different that horizontal is follow the vertical
padding: @select-multiple-padding @input-padding-vertical-base;
.@{select-prefix-cls}-show-search& {
cursor: text;
}
.@{select-prefix-cls}-disabled& {
background: @select-multiple-disabled-background;
cursor: not-allowed;
}
&::after {
display: inline-block;
width: 0;
margin: @select-multiple-item-spacing-half 0;
line-height: @select-multiple-item-height;
content: '\a0';
}
}
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selector,
&.@{select-prefix-cls}-allow-clear .@{select-prefix-cls}-selector {
padding-right: @font-size-sm + @control-padding-horizontal;
}
// ======================== Selections ========================
.@{select-prefix-cls}-selection-item {
position: relative;
display: flex;
flex: none;
box-sizing: border-box;
max-width: 100%;
height: @select-multiple-item-height;
margin-top: @select-multiple-item-spacing-half;
margin-bottom: @select-multiple-item-spacing-half;
line-height: @select-multiple-item-height - @select-multiple-item-border-width * 2;
background: @select-selection-item-bg;
border: 1px solid @select-selection-item-border-color;
border-radius: @border-radius-base;
cursor: default;
transition: font-size 0.3s, line-height 0.3s, height 0.3s;
user-select: none;
margin-inline-end: @input-padding-vertical-base;
padding-inline-start: @padding-xs;
padding-inline-end: (@padding-xs / 2);
.@{select-prefix-cls}-disabled& {
color: @select-multiple-item-disabled-color;
border-color: @select-multiple-item-disabled-border-color;
cursor: not-allowed;
}
// It's ok not to do this, but 24px makes bottom narrow in view should adjust
&-content {
display: inline-block;
margin-right: (@padding-xs / 2);
overflow: hidden;
white-space: pre; // fix whitespace wrapping. custom tags display all whitespace within.
text-overflow: ellipsis;
}
&-remove {
.iconfont-mixin();
display: inline-block;
color: @text-color-secondary;
font-weight: bold;
font-size: 10px;
line-height: inherit;
cursor: pointer;
> .@{iconfont-css-prefix} {
vertical-align: middle;
}
&:hover {
color: @icon-color-hover;
}
}
}
// ========================== Input ==========================
.@{select-overflow-prefix-cls}-item + .@{select-overflow-prefix-cls}-item {
.@{select-prefix-cls}-selection-search {
margin-inline-start: 0;
}
}
.@{select-prefix-cls}-selection-search {
position: relative;
max-width: 100%;
margin-inline-start: @input-padding-horizontal-base - @input-padding-vertical-base;
&-input,
&-mirror {
height: @select-multiple-item-height;
font-family: @font-family;
line-height: @select-multiple-item-height;
transition: all 0.3s;
}
&-input {
width: 100%;
min-width: 4.1px; // fix search cursor missing
}
&-mirror {
position: absolute;
top: 0;
left: 0;
z-index: 999;
white-space: pre; // fix whitespace wrapping caused width calculation bug
visibility: hidden;
}
}
// ======================= Placeholder =======================
.@{select-prefix-cls}-selection-placeholder {
position: absolute;
top: 50%;
right: @input-padding-horizontal;
left: @input-padding-horizontal;
transform: translateY(-50%);
transition: all 0.3s;
}
// ============================================================
// == Size ==
// ============================================================
.select-size(@suffix, @input-height) {
@merged-cls: ~'@{select-prefix-cls}-@{suffix}';
&.@{merged-cls} {
@select-selection-height: @input-height - @input-padding-vertical-base * 2;
@select-height-without-border: @input-height - @border-width-base * 2;
.@{select-prefix-cls}-selector::after {
line-height: @select-selection-height;
}
.@{select-prefix-cls}-selection-item {
height: @select-selection-height;
line-height: @select-selection-height - @border-width-base * 2;
}
.@{select-prefix-cls}-selection-search {
height: @select-selection-height;
line-height: @select-selection-height;
&-input,
&-mirror {
height: @select-selection-height;
line-height: @select-selection-height - @border-width-base * 2;
}
}
}
}
.select-size('lg', @input-height-lg);
.select-size('sm', @input-height-sm);
// Size small need additional set padding
&.@{select-prefix-cls}-sm {
.@{select-prefix-cls}-selection-placeholder {
left: @input-padding-horizontal-sm;
}
// https://github.com/ant-design/ant-design/issues/29559
.@{select-prefix-cls}-selection-search {
margin-inline-start: 3px;
}
}
&.@{select-prefix-cls}-lg {
.@{select-prefix-cls}-selection-item {
height: @select-multiple-item-height-lg;
line-height: @select-multiple-item-height-lg;
}
}
}
&-disabled .@{select-prefix-cls}-selection-item-remove {
display: none;
}
}

0
components/select/style/multiple.tsx → components/select/style/multiple.ts
View File

168
components/select/style/rtl.less
View File

@ -1,168 +0,0 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@select-prefix-cls: ~'@{ant-prefix}-select';
.@{select-prefix-cls} {
&-rtl {
direction: rtl;
}
// ========================== Arrow ==========================
&-arrow {
.@{select-prefix-cls}-rtl & {
right: initial;
left: @control-padding-horizontal - 1px;
}
}
// ========================== Clear ==========================
&-clear {
.@{select-prefix-cls}-rtl & {
right: initial;
left: @control-padding-horizontal - 1px;
}
}
// ========================== Popup ==========================
&-dropdown {
&-rtl {
direction: rtl;
}
}
// ========================= Options =========================
&-item {
&-option {
&-grouped {
.@{select-prefix-cls}-dropdown-rtl & {
padding-right: @control-padding-horizontal * 2;
padding-left: @control-padding-horizontal;
}
}
}
}
}
// multiple
@select-multiple-item-border-width: 1px;
@select-multiple-item-spacing-half: ceil((@input-padding-vertical-base / 2));
@select-multiple-padding: max(
@input-padding-vertical-base - @select-multiple-item-border-width -
@select-multiple-item-spacing-half,
0
);
.@{select-prefix-cls}-multiple {
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selector,
&.@{select-prefix-cls}-allow-clear .@{select-prefix-cls}-selector {
.@{select-prefix-cls}-rtl& {
padding-right: @input-padding-vertical-base;
padding-left: @font-size-sm + @control-padding-horizontal;
}
}
// ======================== Selections ========================
.@{select-prefix-cls}-selection-item {
.@{select-prefix-cls}-rtl& {
text-align: right;
}
// It's ok not to do this, but 24px makes bottom narrow in view should adjust
&-content {
.@{select-prefix-cls}-rtl& {
margin-right: 0;
margin-left: (@padding-xs / 2);
text-align: right;
}
}
}
// ========================== Input ==========================
.@{select-prefix-cls}-selection-search {
&-mirror {
.@{select-prefix-cls}-rtl& {
right: 0;
left: auto;
}
}
}
// ======================= Placeholder =======================
.@{select-prefix-cls}-selection-placeholder {
.@{select-prefix-cls}-rtl& {
right: @input-padding-horizontal;
left: auto;
}
}
// ============================================================
// == Size ==
// ============================================================
// Size small need additional set padding
&.@{select-prefix-cls}-sm {
.@{select-prefix-cls}-selection-placeholder {
.@{select-prefix-cls}-rtl& {
right: @input-padding-horizontal-sm;
}
}
}
}
// single
@selection-item-padding: ceil(@font-size-base * 1.25);
.@{select-prefix-cls}-single {
// ========================= Selector =========================
.@{select-prefix-cls}-selector {
.@{select-prefix-cls}-selection-item,
.@{select-prefix-cls}-selection-placeholder {
.@{select-prefix-cls}-rtl& {
right: 0;
left: 9px;
text-align: right;
}
}
}
// With arrow should provides `padding-right` to show the arrow
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
.@{select-prefix-cls}-rtl& {
right: @input-padding-horizontal-base;
left: @input-padding-horizontal-base + @font-size-base;
}
}
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
.@{select-prefix-cls}-rtl& {
padding-right: 0;
padding-left: @selection-item-padding;
}
}
// ============================================================
// == Size ==
// ============================================================
// Size small need additional set padding
&.@{select-prefix-cls}-sm {
&:not(.@{select-prefix-cls}-customize-input) {
// With arrow should provides `padding-right` to show the arrow
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
.@{select-prefix-cls}-rtl& {
right: @input-padding-horizontal-sm - 1px;
}
}
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
.@{select-prefix-cls}-rtl& {
padding-right: 0;
padding-left: @font-size-base * 1.5;
}
}
}
}
}

179
components/select/style/single.less
View File

@ -1,179 +0,0 @@
@import (reference) '../../style/themes/index';
@select-prefix-cls: ~'@{ant-prefix}-select';
@selection-item-padding: ceil(@font-size-base * 1.25);
.@{select-prefix-cls}-single {
// ========================= Selector =========================
.@{select-prefix-cls}-selector {
display: flex;
.@{select-prefix-cls}-selection-search {
position: absolute;
top: 0;
right: @input-padding-horizontal-base;
bottom: 0;
left: @input-padding-horizontal-base;
&-input {
width: 100%;
}
}
.@{select-prefix-cls}-selection-item,
.@{select-prefix-cls}-selection-placeholder {
padding: 0;
line-height: @select-height-without-border;
transition: all 0.3s;
// Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
@supports (-moz-appearance: meterbar) {
& {
line-height: @select-height-without-border;
}
}
}
.@{select-prefix-cls}-selection-item {
position: relative;
user-select: none;
}
.@{select-prefix-cls}-selection-placeholder {
transition: none;
pointer-events: none;
}
// For common baseline align
&::after,
/* For '' value baseline align */
.@{select-prefix-cls}-selection-item::after,
/* For undefined value baseline align */
.@{select-prefix-cls}-selection-placeholder::after {
display: inline-block;
width: 0;
visibility: hidden;
content: '\a0';
}
}
// With arrow should provides `padding-right` to show the arrow
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
right: @input-padding-horizontal-base + @font-size-base;
}
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
padding-right: @selection-item-padding;
}
// Opacity selection if open
&.@{select-prefix-cls}-open .@{select-prefix-cls}-selection-item {
color: @input-placeholder-color;
}
// ========================== Input ==========================
// We only change the style of non-customize input which is only support by `combobox` mode.
// Not customize
&:not(.@{select-prefix-cls}-customize-input) {
.@{select-prefix-cls}-selector {
width: 100%;
height: @input-height-base;
padding: 0 @input-padding-horizontal-base;
.@{select-prefix-cls}-selection-search-input {
height: @select-height-without-border;
}
&::after {
line-height: @select-height-without-border;
}
}
}
&.@{select-prefix-cls}-customize-input {
.@{select-prefix-cls}-selector {
&::after {
display: none;
}
.@{select-prefix-cls}-selection-search {
position: static;
width: 100%;
}
.@{select-prefix-cls}-selection-placeholder {
position: absolute;
right: 0;
left: 0;
padding: 0 @input-padding-horizontal-base;
&::after {
display: none;
}
}
}
}
// ============================================================
// == Size ==
// ============================================================
.select-size(@suffix, @input-height) {
@merged-cls: ~'@{select-prefix-cls}-@{suffix}';
&.@{merged-cls}:not(.@{select-prefix-cls}-customize-input) {
.@{select-prefix-cls}-selector {
height: @input-height;
&::after,
.@{select-prefix-cls}-selection-item,
.@{select-prefix-cls}-selection-placeholder {
line-height: @input-height - 2 * @border-width-base;
}
}
// Not customize
&:not(.@{select-prefix-cls}-customize-input) {
.@{select-prefix-cls}-selection-search-input {
height: @input-height - 2 * @border-width-base;
}
}
}
}
.select-size('lg', @select-single-item-height-lg);
.select-size('sm', @input-height-sm);
// Size small need additional set padding
&.@{select-prefix-cls}-sm {
&:not(.@{select-prefix-cls}-customize-input) {
.@{select-prefix-cls}-selection-search {
right: @input-padding-horizontal-sm;
left: @input-padding-horizontal-sm;
}
.@{select-prefix-cls}-selector {
padding: 0 @input-padding-horizontal-sm;
}
// With arrow should provides `padding-right` to show the arrow
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
right: @input-padding-horizontal-sm + @font-size-base * 1.5;
}
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
padding-right: @font-size-base * 1.5;
}
}
}
&.@{select-prefix-cls}-lg {
&:not(.@{select-prefix-cls}-customize-input) {
.@{select-prefix-cls}-selector {
padding: 0 @input-padding-horizontal-lg;
}
}
}
}

0
components/select/style/single.tsx → components/select/style/single.ts
View File

48
components/select/style/status.less
View File

@ -1,48 +0,0 @@
@import '../../input/style/mixin';
@select-prefix-cls: ~'@{ant-prefix}-select';
.select-status-color(
@text-color;
@border-color;
@background-color;
@hoverBorderColor;
@outlineColor;
) {
&.@{select-prefix-cls}:not(.@{select-prefix-cls}-disabled):not(.@{select-prefix-cls}-customize-input) {
.@{select-prefix-cls}-selector {
background-color: @background-color;
border-color: @border-color !important;
}
&.@{select-prefix-cls}-open .@{select-prefix-cls}-selector,
&.@{select-prefix-cls}-focused .@{select-prefix-cls}-selector {
.active(@border-color, @hoverBorderColor, @outlineColor);
}
}
}
.@{select-prefix-cls} {
&-status-error {
.select-status-color(@error-color, @error-color, @select-background, @error-color-hover, @error-color-outline);
}
&-status-warning {
.select-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
}
&-status-error,
&-status-warning,
&-status-success,
&-status-validating {
&.@{select-prefix-cls}-has-feedback {
//.@{prefix-cls}-arrow,
.@{select-prefix-cls}-clear {
right: 32px;
}
.@{select-prefix-cls}-selection-selected-value {
padding-right: 42px;
}
}
}
}

72
components/tree/style/directory.less
View File

@ -1,72 +0,0 @@
@import '../../style/themes/index';
@tree-prefix-cls: ~'@{ant-prefix}-tree';
.@{tree-prefix-cls}.@{tree-prefix-cls}-directory {
// ================== TreeNode ==================
.@{tree-prefix-cls}-treenode {
position: relative;
// Hover color
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 4px;
left: 0;
transition: background-color 0.3s;
content: '';
pointer-events: none;
}
&:hover {
&::before {
background: @item-hover-bg;
}
}
// Elements
> * {
z-index: 1;
}
// >>> Switcher
.@{tree-prefix-cls}-switcher {
transition: color 0.3s;
}
// >>> Title
.@{tree-prefix-cls}-node-content-wrapper {
border-radius: 0;
user-select: none;
&:hover {
background: transparent;
}
&.@{tree-prefix-cls}-node-selected {
color: @tree-directory-selected-color;
background: transparent;
}
}
// ============= Selected =============
&-selected {
&:hover::before,
&::before {
background: @tree-directory-selected-bg;
}
// >>> Switcher
.@{tree-prefix-cls}-switcher {
color: @tree-directory-selected-color;
}
// >>> Title
.@{tree-prefix-cls}-node-content-wrapper {
color: @tree-directory-selected-color;
background: transparent;
}
}
}
}

16
components/tree/style/index.less
View File

@ -1,16 +0,0 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../checkbox/style/mixin';
@import './mixin';
@import './directory';
@tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-tree-checkbox');
.@{tree-prefix-cls} {
.antTreeFn(@tree-prefix-cls);
}
@import './rtl';

0
components/tree/style/index.tsx → components/tree/style/index.ts
View File

322
components/tree/style/mixin.less
View File

@ -1,322 +0,0 @@
@import '../../style/mixins/index';
@tree-prefix-cls: ~'@{ant-prefix}-tree';
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
@tree-motion: ~'@{ant-prefix}-motion-collapse';
@tree-node-padding: (@padding-xs / 2);
@tree-node-hightlight-color: inherit;
.antTreeSwitcherIcon(@type: 'tree-default-open-icon') {
.@{tree-prefix-cls}-switcher-icon,
.@{select-tree-prefix-cls}-switcher-icon {
display: inline-block;
font-size: 10px;
vertical-align: baseline;
svg {
transition: transform 0.3s;
}
}
}
.drop-indicator() {
.@{tree-prefix-cls}-drop-indicator {
position: absolute;
// it should displayed over the following node
z-index: 1;
height: 2px;
background-color: @primary-color;
border-radius: 1px;
pointer-events: none;
&::after {
position: absolute;
top: -3px;
left: -6px;
width: 8px;
height: 8px;
background-color: transparent;
border: 2px solid @primary-color;
border-radius: 50%;
content: '';
}
}
}
.antTreeFn(@custom-tree-prefix-cls) {
@custom-tree-node-prefix-cls: ~'@{custom-tree-prefix-cls}-treenode';
.reset-component();
background: @tree-bg;
border-radius: @border-radius-base;
transition: background-color 0.3s;
&-focused:not(:hover):not(&-active-focused) {
background: @primary-1;
}
// =================== Virtual List ===================
&-list-holder-inner {
align-items: flex-start;
}
&.@{custom-tree-prefix-cls}-block-node {
.@{custom-tree-prefix-cls}-list-holder-inner {
align-items: stretch;
// >>> Title
.@{custom-tree-prefix-cls}-node-content-wrapper {
flex: auto;
}
// >>> Drag
.@{custom-tree-node-prefix-cls}.dragging {
position: relative;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: @tree-node-padding;
left: 0;
border: 1px solid @primary-color;
opacity: 0;
animation: ant-tree-node-fx-do-not-use 0.3s;
animation-play-state: running;
animation-fill-mode: forwards;
content: '';
pointer-events: none;
}
}
}
}
// ===================== TreeNode =====================
.@{custom-tree-node-prefix-cls} {
display: flex;
align-items: flex-start;
padding: 0 0 @tree-node-padding 0;
outline: none;
// Disabled
&-disabled {
// >>> Title
.@{custom-tree-prefix-cls}-node-content-wrapper {
color: @disabled-color;
cursor: not-allowed;
&:hover {
background: transparent;
}
}
}
&-active .@{custom-tree-prefix-cls}-node-content-wrapper {
background: @tree-node-hover-bg;
}
&:not(&-disabled).filter-node .@{custom-tree-prefix-cls}-title {
color: @tree-node-hightlight-color;
font-weight: 500;
}
}
// >>> Indent
&-indent {
align-self: stretch;
white-space: nowrap;
user-select: none;
&-unit {
display: inline-block;
width: @tree-title-height;
}
}
// >>> Drag Handler
&-draggable-icon {
width: @tree-title-height;
line-height: @tree-title-height;
text-align: center;
opacity: 0.2;
transition: opacity @animation-duration-slow;
.@{custom-tree-node-prefix-cls}:hover & {
opacity: 0.45;
}
}
// >>> Switcher
&-switcher {
.antTreeSwitcherIcon();
position: relative;
flex: none;
align-self: stretch;
width: @tree-title-height;
margin: 0;
line-height: @tree-title-height;
text-align: center;
cursor: pointer;
user-select: none;
&-noop {
cursor: default;
}
&_close {
.@{custom-tree-prefix-cls}-switcher-icon {
svg {
transform: rotate(-90deg);
}
}
}
&-loading-icon {
color: @primary-color;
}
&-leaf-line {
position: relative;
z-index: 1;
display: inline-block;
width: 100%;
height: 100%;
// https://github.com/ant-design/ant-design/issues/31884
&::before {
position: absolute;
top: 0;
right: 12px;
bottom: -@tree-node-padding;
margin-left: -1px;
border-right: 1px solid @normal-color;
content: ' ';
}
&::after {
position: absolute;
width: @tree-title-height - 14px;
height: @tree-title-height - 10px;
border-bottom: 1px solid @normal-color;
content: ' ';
}
}
}
// >>> Checkbox
&-checkbox {
top: initial;
margin: ((@tree-title-height - @checkbox-size) / 2) 8px 0 0;
}
// >>> Title
& &-node-content-wrapper {
position: relative;
z-index: auto;
min-height: @tree-title-height;
margin: 0;
padding: 0 4px;
color: inherit;
line-height: @tree-title-height;
background: transparent;
border-radius: @border-radius-base;
cursor: pointer;
transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s;
&:hover {
background-color: @tree-node-hover-bg;
}
&.@{custom-tree-prefix-cls}-node-selected {
background-color: @tree-node-selected-bg;
}
// Icon
.@{custom-tree-prefix-cls}-iconEle {
display: inline-block;
width: @tree-title-height;
height: @tree-title-height;
line-height: @tree-title-height;
text-align: center;
vertical-align: top;
&:empty {
display: none;
}
}
}
// https://github.com/ant-design/ant-design/issues/28217
&-unselectable &-node-content-wrapper:hover {
background-color: transparent;
}
// ==================== Draggable =====================
&-node-content-wrapper {
line-height: @tree-title-height;
user-select: none;
.drop-indicator();
}
.@{custom-tree-node-prefix-cls}.drop-container {
> [draggable] {
box-shadow: 0 0 0 2px @primary-color;
}
}
// ==================== Show Line =====================
&-show-line {
// ================ Indent lines ================
.@{custom-tree-prefix-cls}-indent {
&-unit {
position: relative;
height: 100%;
&::before {
position: absolute;
top: 0;
right: (@tree-title-height / 2);
bottom: -@tree-node-padding;
border-right: 1px solid @border-color-base;
content: '';
}
&-end {
&::before {
display: none;
}
}
}
}
// ============== Cover Background ==============
.@{custom-tree-prefix-cls}-switcher {
background: @component-background;
&-line-icon {
// https://github.com/ant-design/ant-design/issues/32813
vertical-align: -0.15em;
}
}
}
.@{custom-tree-node-prefix-cls}-leaf-last {
.@{custom-tree-prefix-cls}-switcher {
&-leaf-line {
&::before {
top: auto !important;
bottom: auto !important;
height: @tree-title-height - 10px !important;
}
}
}
}
}
@keyframes ant-tree-node-fx-do-not-use {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

72
components/tree/style/rtl.less
View File

@ -1,72 +0,0 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../checkbox/style/mixin';
@tree-prefix-cls: ~'@{ant-prefix}-tree';
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
.@{tree-prefix-cls} {
&-rtl {
direction: rtl;
.@{tree-prefix-cls}-node-content-wrapper[draggable='true'] {
.@{tree-prefix-cls}-drop-indicator {
&::after {
right: -6px;
left: unset;
}
}
}
}
// ===================== TreeNode =====================
.@{tree-node-prefix-cls} {
&-rtl {
direction: rtl;
}
}
// >>> Switcher
&-switcher {
&_close {
.@{tree-prefix-cls}-switcher-icon {
svg {
.@{tree-prefix-cls}-rtl & {
transform: rotate(90deg);
}
}
}
}
}
// ==================== Show Line =====================
&-show-line {
// ================ Indent lines ================
.@{tree-prefix-cls}-indent {
&-unit {
&::before {
.@{tree-prefix-cls}-rtl& {
right: auto;
left: -(@tree-title-height / 2) - 1px;
border-right: none;
border-left: 1px solid @border-color-base;
}
}
}
}
}
// >>> Checkbox
&-checkbox {
.@{tree-prefix-cls}-rtl & {
margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px;
}
}
}
.@{select-tree-prefix-cls} {
// >>> Checkbox
&-checkbox {
.@{tree-prefix-cls}-select-dropdown-rtl & {
margin: ((@tree-title-height - @checkbox-size) / 2) 0 0 8px;
}
}
}

1
package.json
View File

@ -249,6 +249,7 @@
"ts-jest": "^28.0.5",
"ts-loader": "^9.1.0",
"ts-node": "^10.8.2",
"typedoc": "^0.23.25",
"typescript": "~4.9.3",
"umi-request": "^1.3.5",
"unified": "9.2.2",

6
site/scripts/genrateRoutes.js
View File

@ -13,10 +13,8 @@ const { ESLint } = require('eslint');
const content = fs.readFileSync(path).toString();
const componentName = path.split('/')[1];
if (componentName !== 'color-picker') {
const { data } = matter(content);
components[componentName] = { ...components[componentName], ...data };
}
const { data } = matter(content);
components[componentName] = { ...components[componentName], ...data };
});
const TEMPLATE = `
export default [

4
site/src/components/DemoBox.vue
View File

@ -37,8 +37,8 @@
<a-tooltip
v-if="!blocked"
:title="$t(`app.demo.${copied ? 'copied' : 'copy'}`)"
:visible="copyTooltipVisible"
@visibleChange="onCopyTooltipVisibleChange"
:open="copyTooltipVisible"
@openChange="onCopyTooltipVisibleChange"
>
<component
:is="copied && copyTooltipVisible ? 'CheckOutlined' : 'SnippetsOutlined'"

2
site/src/layouts/UserLayout.less
View File

@ -1,5 +1,3 @@
@import '../../components/style/themes/default.less';
.container {
display: flex;
flex-direction: column;

3
site/src/layouts/header/Github.vue
View File

@ -7,7 +7,6 @@
</span>
</template>
<style lang="less" scoped>
@import '../../theme/static/theme.less';
@import './Github.less';
#github-btn {
display: flex;
@ -38,7 +37,7 @@
background: #fff;
&:hover {
color: @primary-color;
color: var(--primary-color);
}
}

1
site/src/layouts/header/Logo.vue
View File

@ -20,7 +20,6 @@ export default defineComponent({
</script>
<style lang="less" scoped>
@import '../../theme/static/theme.less';
@import './index.less';
#logo {

1
site/src/layouts/header/Navigation.vue
View File

@ -125,7 +125,6 @@ export default defineComponent({
});
</script>
<style lang="less">
@import '../../theme/static/theme.less';
@import './index.less';
#nav {

2
site/src/layouts/header/SearchBox.less
View File

@ -1,5 +1,3 @@
@import '../../theme/static/theme.less';
@search-icon-color: #ced4d9;
#search-box {

1
site/src/layouts/header/index.less
View File

@ -1,4 +1,3 @@
@import '../../theme/static/theme.less';
@import './SearchBox.less';
@header-height: 64px;

6
site/src/locale/en-US.js
View File

@ -1,6 +1,3 @@
import login from '../views/user/login/locales/en-US';
import register from '../views/user/register/locales/en-US';
import registerResult from '../views/user/register-result/locales/en-US';
import theme from '../theme/en-US';
export default {
...theme,
@ -23,7 +20,4 @@ export default {
'app.docs.components.icon.category.other': 'Application Icons',
'app.docs.components.icon.category.logo': 'Brand and Logos',
'app.docs.components.icon.pic-searcher.intro': 'AI Search by image is online, welcome to use! 🎉',
...login,
...register,
...registerResult,
};

6
site/src/locale/zh-CN.js
View File

@ -1,6 +1,3 @@
import login from '../views/user/login/locales/zh-CN';
import register from '../views/user/register/locales/zh-CN';
import registerResult from '../views/user/register-result/locales/zh-CN';
import theme from '../theme/zh-CN';
export default {
@ -28,7 +25,4 @@ export default {
'app.docs.components.icon.pic-searcher.upload-text': '点击/拖拽/粘贴上传图片',
'app.docs.components.icon.pic-searcher.upload-hint':
'我们会通过上传的图片进行匹配，得到最相似的图标',
...login,
...register,
...registerResult,
};

3
site/src/main.js
View File

@ -1,5 +1,4 @@
/* eslint-disable no-console */
import '../../components/style';
import 'docsearch.js/dist/cdn/docsearch.css';
import './index.less';
import 'nprogress/nprogress.css';
@ -11,7 +10,6 @@ import Antd from 'ant-design-vue';
import demoBox from './components/DemoBox.vue';
import demoContainer from './components/demoContainer.vue';
import demoSort from './components/demoSort.jsx';
import store from './store/index.js';
import clipboard from './directives/clipboard';
import App from './App.vue';
console.log('vue version: ', vueVersion);
@ -50,7 +48,6 @@ router.afterEach((to, from) => {
}
});
app.use(store);
app.use(router);
app.use(i18n);

60
site/src/store/index.js
View File

@ -1,60 +0,0 @@
import { createStore } from 'vuex';
import user from './user';
import userAndLogin from '../views/user/login/model';
import userAndregister from '../views/user/register/model';
const createLoadingPlugin = ({ namespace: NAMESPACE = 'loading' } = {}) => {
const SHOW = '@@ANTDV_LOADING/SHOW';
const HIDE = '@@ANTDV_LOADING/HIDE';
return store => {
if (store.state[NAMESPACE]) {
throw new Error(`createLoadingPlugin: ${NAMESPACE} exited in current store`);
}
store.registerModule(NAMESPACE, {
namespaced: true,
state: {
global: false,
models: {},
effects: {},
},
mutations: {
[SHOW]: (state, { payload: { actionType } }) => {
state.global = true;
const _namespace = actionType.split('/')[0];
state.models = { ...state.models, [_namespace]: true };
state.effects = { ...state.effects, [actionType]: true };
},
[HIDE]: (state, { payload: { actionType } }) => {
state.global = false;
const _namespace = actionType.split('/')[0];
state.models = { ...state.models, [_namespace]: false };
state.effects = { ...state.effects, [actionType]: false };
},
},
});
store.subscribeAction({
before: action => {
store.commit(
{ type: `${NAMESPACE}/${SHOW}`, payload: { actionType: action.type } },
{ root: true },
);
},
after: action => {
store.commit(
{ type: `${NAMESPACE}/${HIDE}`, payload: { actionType: action.type } },
{ root: true },
);
},
});
};
};
export default createStore({
state: {},
plugins: [createLoadingPlugin()],
modules: {
userAndLogin,
userAndregister,
user,
},
});

41
site/src/store/user.js
View File

@ -1,41 +0,0 @@
/* eslint-disable no-unused-vars */
import { queryCurrent, query as queryUsers } from '../services/user';
export default {
namespaced: true,
state: {
currentUser: {},
},
actions: {
async login({ commit }, payload) {
const response = await queryUsers(payload);
commit({
type: 'save',
payload: response,
});
},
async fetchCurrent({ commit }, payload) {
const response = await queryCurrent(payload);
commit({
type: 'saveCurrentUser',
payload: response,
});
},
},
mutations: {
saveCurrentUser(state, { payload }) {
Object.assign(state, {
currentUser: payload || {},
});
},
changeNotifyCount(state, { payload }) {
Object.assign(state, {
currentUser: {
...state.currentUser,
notifyCount: payload.totalCount,
unreadCount: payload.unreadCount,
},
});
},
},
};

242
site/src/theme/static/colors.less
View File

@ -1,242 +0,0 @@
.make-palette(@color, @index: 1) when (@index <= 10) {
.palette-@{color}-@{index} {
@background: '@{color}-@{index}';
background: @@background;
}
.make-palette(@color, (@index + 1)); // next iteration
}
@gray-1: #fff;
@gray-2: #fafafa;
@gray-3: #f5f5f5;
@gray-4: #f0f0f0;
@gray-5: #d9d9d9;
@gray-6: #bfbfbf;
@gray-7: #8c8c8c;
@gray-8: #595959;
@gray-9: #434343;
@gray-10: #262626;
@gray-11: #1f1f1f;
@gray-12: #141414;
@gray-13: #000;
@border-color: rgba(229, 231, 235, 100);
.color-palettes {
margin: 0 1%;
&-dark {
margin: 0;
padding: 0 28px;
background-color: #141414;
.color-title {
color: fade(@white, 85);
}
.color-description {
color: fade(@white, 45);
}
.color-palette {
margin: 45px 3.5% 45px 0;
&:nth-of-type(3n) {
margin-right: 0;
}
.main-color-item {
margin-right: 0;
&:hover {
margin-right: -8px;
}
}
}
}
}
.color-palette {
display: inline-block;
width: 31%;
margin: 45px 1%;
&-pick {
margin: 0 0 20px;
font-size: 20px;
text-align: center;
}
&-picker {
margin: 24px 0;
&-value {
position: relative;
top: -3px;
margin-left: 16px;
font-size: 14px;
font-family: Consolas, sans-serif;
.ant-row-rtl & {
margin-right: 16px;
margin-left: 0;
}
}
&-validation {
position: relative;
top: -3px;
margin-left: 16px;
color: @error-color;
font-size: 13px;
.ant-row-rtl & {
margin-right: 16px;
margin-left: 0;
}
&-dark {
margin-left: 0;
}
}
}
}
.main-color {
.make-palette(blue);
.make-palette(purple);
.make-palette(cyan);
.make-palette(green);
.make-palette(magenta);
.make-palette(red);
.make-palette(volcano);
.make-palette(orange);
.make-palette(gold);
.make-palette(yellow);
.make-palette(lime);
.make-palette(geekblue);
.make-palette(gray);
.palette-gray-11 {
background: @gray-11;
}
.palette-gray-12 {
background: @gray-12;
}
.palette-gray-13 {
background: @gray-13;
}
text-align: left;
&-item {
position: relative;
height: 44px;
margin-right: 4px;
padding: 0 12px;
font-size: 14px;
font-family: Consolas, sans-serif;
line-height: 44px;
cursor: pointer;
transition: all 0.2s;
&:first-child {
border-radius: 4px 4px 0 0;
}
&:last-child {
border-radius: 0 0 4px 4px;
}
&:hover {
margin-right: -8px;
border-radius: 0 4px 4px 0;
}
}
&-item &-text {
float: left;
transition: all 0.3s;
}
&-item &-value {
position: relative;
left: 3px;
float: right;
transform: scale(0.85);
transform-origin: 100% 50%;
opacity: 0;
transition: all 0.3s;
}
}
.color-title {
margin: 0 0 24px;
color: #5c6b77;
font-weight: 500;
font-size: 22px;
text-align: center;
text-transform: capitalize;
}
.color-description {
display: block;
color: #777;
font-weight: lighter;
font-size: 14px;
}
.main-color:hover {
.main-color-value {
left: 0;
opacity: 0.7;
}
}
.color-palette-horizontal {
width: 100%;
&-dark {
height: 303px;
padding: 32px 28px;
background-color: #141414;
.color-palette-picker {
margin-bottom: 0;
}
.color-palette-pick {
color: fade(@white, 65);
text-align: left;
&-hex {
color: fade(@white, 65);
}
.ant-row-rtl & {
direction: rtl;
text-align: right;
}
}
}
.main-color {
display: flex;
&-item {
position: relative;
flex: 1;
height: 86px;
margin-right: 0;
padding: 37px 0 0;
line-height: normal;
text-align: center;
border-radius: 0;
.main-color-text {
float: none;
}
&:hover {
height: 96px;
margin-top: -10px;
border-radius: 4px 4px 0 0;
}
}
&-value {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
transform-origin: unset;
}
&:hover {
.main-color-item {
padding-top: 8px;
}
.main-color-value {
bottom: 8px;
opacity: 0.7;
}
}
}
}

11
site/src/theme/static/contributors.less
View File

@ -1,11 +0,0 @@
.contributors-list {
display: flex;
flex-wrap: wrap;
margin-top: 120px !important;
a,
.ant-avatar + .ant-avatar {
margin-right: 8px;
margin-bottom: 8px;
}
}

369
site/src/theme/static/dark.less
View File

@ -1,369 +0,0 @@
[data-theme='dark'] {
/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid @border-color-base;
-webkit-text-fill-color: @text-color;
box-shadow: none;
transition: background-color 5000s ease-in-out 0s;
}
#header {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.65);
}
#search-box input {
&::placeholder {
color: fade(@white, 30%);
}
}
.toc-affix {
.ant-affix {
background: @component-background;
}
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
color: rgba(255, 255, 255, 0.65);
background: #262626;
}
.code-box {
border: 1px solid @border-color-split;
.markdown {
pre {
margin: 0.5em 0;
padding: 6px 12px;
}
pre code {
margin: 0;
background: #262626;
}
}
&-debug {
border-color: @purple-3;
}
&-expand-trigger {
position: relative;
margin-left: 12px;
color: #fff;
font-size: 20px;
cursor: pointer;
opacity: 0.45;
transition: all 0.3s;
&:hover {
opacity: 0.65;
}
}
&-demo {
border-bottom: 1px solid @border-color-split;
}
&-actions > &-code-action {
color: @site-text-color-secondary;
&:hover {
color: @site-text-color;
}
}
}
ul.anticons-list {
li {
color: #acacac;
&.TwoTone:hover {
background-color: #15395b;
}
&:hover {
.anticon {
color: #fff;
}
}
}
}
a[disabled] {
color: rgba(255, 255, 255, 0.25);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: @heading-color;
}
.markdown {
code,
pre,
pre code {
background: #262626;
}
}
.markdown.api-container {
table {
tbody tr {
&:hover {
background: #262626;
}
}
}
}
.markdown code {
background: fade(@white, 8%);
}
.prev-next-nav {
> a.prev-page {
.footer-nav-icon-before {
color: fade(@white, 45%);
}
&:hover .footer-nav-icon-before {
color: @primary-color;
}
}
> .next-page {
.footer-nav-icon-after {
color: fade(@white, 45%);
}
&:hover .footer-nav-icon-after {
color: @primary-color;
}
}
}
.grid-demo,
[id^='components-grid-demo-'] {
.demo-row,
.code-box-demo .demo-row {
background-image: linear-gradient(
90deg,
#1d1d1d 4.16666667%,
transparent 4.16666667%,
transparent 8.33333333%,
#1d1d1d 8.33333333%,
#1d1d1d 12.5%,
transparent 12.5%,
transparent 16.66666667%,
#1d1d1d 16.66666667%,
#1d1d1d 20.83333333%,
transparent 20.83333333%,
transparent 25%,
#1d1d1d 25%,
#1d1d1d 29.16666667%,
transparent 29.16666667%,
transparent 33.33333333%,
#1d1d1d 33.33333333%,
#1d1d1d 37.5%,
transparent 37.5%,
transparent 41.66666667%,
#1d1d1d 41.66666667%,
#1d1d1d 45.83333333%,
transparent 45.83333333%,
transparent 50%,
#1d1d1d 50%,
#1d1d1d 54.16666667%,
transparent 54.16666667%,
transparent 58.33333333%,
#1d1d1d 58.33333333%,
#1d1d1d 62.5%,
transparent 62.5%,
transparent 66.66666667%,
#1d1d1d 66.66666667%,
#1d1d1d 70.83333333%,
transparent 70.83333333%,
transparent 75%,
#1d1d1d 75%,
#1d1d1d 79.16666667%,
transparent 79.16666667%,
transparent 83.33333333%,
#1d1d1d 83.33333333%,
#1d1d1d 87.5%,
transparent 87.5%,
transparent 91.66666667%,
#1d1d1d 91.66666667%,
#1d1d1d 95.83333333%,
transparent 95.83333333%
);
}
.code-box-demo .ant-row > div:not(.gutter-row) {
padding: 16px 0;
background: #028ac8;
&:nth-child(2n + 1) {
background: fade(#0088c6, 70%);
}
}
.ant-row .demo-col,
.code-box-demo .ant-row .demo-col {
margin-top: 0;
margin-bottom: 0;
padding: 30px 0;
color: @black;
font-size: 18px;
text-align: center;
border: none;
}
.ant-row .demo-col-1 {
background: fade(#0088c6, 70%);
}
.ant-row .demo-col-3,
.code-box-demo .ant-row .demo-col-3 {
color: @site-text-color-secondary;
background: unset;
}
.ant-row .demo-col-5,
.code-box-demo .ant-row .demo-col-5 {
color: @site-text-color-secondary;
background: unset;
}
}
.markdown > table th {
color: fade(@white, 65%);
background: #1d1d1d;
}
.copied-code {
background: fade(@white, 8%);
}
.browser-mockup.with-url::after {
background-color: @component-background;
}
.browser-mockup {
border-top: 2em solid #262626;
}
.browser-mockup::before {
background-color: #fb4742;
box-shadow: 0 0 0 2px #fb4742, 1.5em 0 0 2px #99bc2e, 3em 0 0 2px #ffba5a;
}
.browser-mockup.with-tab::after {
border-bottom: 2em solid @component-background;
}
.algolia-autocomplete {
.ds-dropdown-menu {
[class^='ds-dataset-'] {
background: @popover-background;
.algolia-docsearch-suggestion {
background: @popover-background;
}
}
.ds-suggestion.ds-cursor {
.algolia-docsearch-suggestion:not(.suggestion-layout-simple) {
.algolia-docsearch-suggestion--content {
background-color: fade(@white, 8%);
}
}
}
}
.algolia-docsearch-suggestion--category-header {
color: rgba(255, 255, 255, 0.65);
border-bottom: 1px solid @border-color-split;
}
.algolia-docsearch-suggestion--subcategory-column::before {
background: @border-color-split;
}
.algolia-docsearch-suggestion--content {
&::before {
background: @border-color-split;
}
}
}
.token.comment,
.token.quote {
color: #b6b18b;
}
.token.property,
.token.variable,
.token.template-variable,
.token.tag,
.token.number,
.token.name,
.token.selector-id,
.token.selector-class,
.token.regexp,
.token.deletion {
color: #eb3c54;
}
.token.built_in,
.token.builtin-name,
.token.literal,
.token.type,
.token.params,
.token.meta,
.token.link {
color: #e7ce56;
}
.token.attribute {
color: #ee7c2b;
}
.token.string,
.token.symbol,
.token.bullet,
.token.addition {
color: @primary-color;
}
.token.title,
.token.section {
color: #78bb65;
}
.token.function,
.token.keyword,
.token.selector-tag {
color: #b45ea4;
}
.hljs {
display: block;
padding: 0.5em;
overflow-x: auto;
color: #c0c5ce;
background: #1c1d21;
}
.token.emphasis {
font-style: italic;
}
.token.strong {
font-weight: bold;
}
.components-overview {
&-img {
background-color: rgba(255, 255, 255, 0.1);
}
&-search input {
color: rgba(255, 255, 255, 0.65);
}
}
}

18
site/src/theme/static/design-doc.less
View File

@ -1,18 +0,0 @@
.design-inline-cards {
display: flex;
margin: 0 -20px;
> * {
flex: 10%;
margin: 0 20px;
}
img {
width: 100%;
max-width: 100%;
}
h4 {
margin-bottom: 0;
}
}

2
site/src/theme/static/footer.less
View File

@ -1,5 +1,3 @@
@import './colors';
@padding-space: 144px;
#footer {

2
site/src/theme/static/header.less
View File

@ -1,5 +1,3 @@
@import '../../../../components/style/themes/default.less';
#header {
// ===================== Home Page =====================
&.home-header {

51
site/src/theme/static/icon-pic-searcher.less
View File

@ -1,51 +0,0 @@
.icon-pic-searcher {
display: inline-block;
margin: 0 8px;
.icon-pic-btn {
color: @text-color-secondary;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: @input-icon-hover-color;
}
}
}
.icon-pic-preview {
width: 66px;
height: 66px;
margin-top: 10px;
padding: 8px;
text-align: center;
border: 1px solid @border-color-base;
border-radius: 4px;
> img {
max-width: 50px;
max-height: 50px;
}
}
.icon-pic-search-result {
min-height: 50px;
padding: 0 10px;
> .result-tip {
padding: 10px 0;
color: @text-color-secondary;
}
> table {
width: 100%;
.col-icon {
width: 80px;
padding: 10px 0;
> .anticon {
font-size: 30px;
:hover {
color: @link-hover-color;
}
}
}
}
}

30
site/src/theme/static/index.less
View File

@ -1,28 +1,2 @@
@import './reset.less';
@import '../../../../components/style/themes/default.less';
@import './theme';
@import './common';
@import './header';
@import './footer';
@import './home';
@import './page-nav';
@import './markdown';
@import './design-doc';
@import './preview-img';
@import './toc';
@import './not-found';
@import './highlight';
@import './demo';
@import './colors';
@import './icons';
@import './icon-pic-searcher';
@import './mock-browser';
@import './new-version-info-modal';
@import './motion';
@import './responsive';
@import './resource';
@import './docsearch';
@import './nprogress';
@import './contributors';
@import './dark.less';
@import './rtl.less';
html {
}

39
site/src/theme/static/motion.less
View File

@ -1,39 +0,0 @@
.motion-container {
height: 190px;
margin: 40px 0 20px;
line-height: 190px;
text-align: center;
}
.motion-example {
display: inline-block !important;
width: 180px;
height: 180px;
color: #fff;
font-weight: bold;
font-size: 18px;
line-height: 180px;
text-align: center;
background: url(https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg) center/180px;
border-radius: 8px;
animation-duration: 0.5s !important;
}
.motion-select-wrapper {
margin-bottom: 40px;
text-align: center;
}
.motion-select {
width: 180px;
text-align: left;
}
.video-player {
position: relative;
max-width: 800px;
&-right {
float: right;
width: 616px;
}
}

24
site/src/theme/static/new-version-info-modal.less
View File

@ -1,24 +0,0 @@
.new-version-info-modal {
img {
position: absolute;
top: 36px;
left: 34px;
width: 100px;
}
p {
margin-top: 1em;
}
.anticon {
display: none;
}
.ant-confirm-body {
.ant-confirm-title {
font-size: 18px;
}
margin-left: 120px;
.ant-confirm-content {
margin-left: 0;
}
}
}

46
site/src/theme/static/reset.less
View File

@ -1,46 +0,0 @@
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}

2
site/src/theme/static/responsive.less
View File

@ -1,5 +1,3 @@
@import '../../../../components/style/themes/default.less';
.nav-phone-icon {
position: absolute;
top: 25px;

12
site/src/theme/static/rtl.less
View File

@ -1,12 +0,0 @@
[data-direction='rtl'] {
#_hj_feedback_container {
> div {
right: auto;
left: 32px;
}
}
.fixed-widgets {
right: auto;
left: 32px;
}
}

2
site/src/theme/static/theme.less
View File

@ -1,5 +1,3 @@
@import '../../../../components/style/themes/default.less';
@import './colors.less';
@import './home.less';
@input-icon-hover-color: rgba(0, 0, 0, 0.85);

2
site/src/views/ComponentOverview.less
View File

@ -1,5 +1,3 @@
@import '../theme/static/theme.less';
.components-overview {
padding: 0;

173
site/src/views/jobs.vue
View File

@ -1,173 +0,0 @@
<template>
<div>
<h1>
如果您正在寻找顶级的 Vue.js 开发者，请联系
<a-tooltip title="发送邮件到：antdv@foxmail.com">
<a href="mailto:antdv@foxmail.com">我们</a>
</a-tooltip>
！！！
</h1>
<div style="margin-top: 30px">
<a-list item-layout="vertical" size="large" :data-source="list">
<template #renderItem="item">
<a-list-item v-show="isEffective(item.effectiveTime)">
<a-list-item-meta>
<template #description>
<div>
<p>工作地点：{{ item.location }}</p>
<h3>职位描述</h3>
<p v-html="item.desc" />
</div>
</template>
<template #title>
<div>
<h2>
<a :href="item.url" target="_blank">{{ item.company }}</a>
<span>{{ item.title }}(岗位 ID: {{ item.id }})</span>
</h2>
</div>
</template>
</a-list-item-meta>
<template #actions>
<div>
<a-tooltip title="发送邮件到：antdv@foxmail.com">
<a :href="`mailto:antdv@foxmail.com?subject=应聘 ${item.id} 职位`">
<a-icon type="link" style="margin-right: 8px" />
立刻申请
</a>
</a-tooltip>
<span>注：邮件中请注明投递岗位 ID</span>
</div>
</template>
<p v-html="item.condition" />
</a-list-item>
</template>
</a-list>
</div>
</div>
</template>
<script>
import dayjs from 'dayjs';
export default {
data() {
return {
list: [
{
id: '9999',
company: '蚂蚁金服体验技术部',
title: '资深/专家前端开发工程师',
location: '杭州',
desc: `
1、本科及以上学历，计算机相关专业，3 年以上工作经验 <br/>
2、关注业界，持续学习，逻辑缜密，有创新意识 <br/>
3、有扎实的专业基础知识，熟悉基本的数据结构和算法，深刻了解 web 原理 <br/>
4、以下能力二选一 <br/>
&nbsp;&nbsp;&nbsp; • 前端方向：熟练掌握 HTML，CSS，JavaScript，React/Vue/Angular 及配套社区项目（redux/mobx/rxjs/…）<br/>
&nbsp;&nbsp;&nbsp; • Node、Java 方向：熟练掌握 NodeJS 或 Java，掌握主流 Web Server 原理，熟悉常用设计模式。 <br/>
5、具有高度的责任心、较强的团队合作精神以及良好的协调与沟通能力 <br/>
`,
condition: `
1、沟通产品需求，进行需求分析和风险识别 <br/>
2、提供解决方案，设计技术架构，制定技术规范 <br/>
3、进行研发排期，高质量完成产品研发、沉淀相关文档 <br/>
4、了解竞品，切磋前沿技术和创新交互，推动产品不断完善 <br/>
`,
email: 'antdv',
effectiveTime: {
start: '2020-06-02 00:00:00',
end: '2020-08-15 17:00:00',
},
url: 'https://xtech.antfin.com/',
},
{
id: '10000',
company: '杭州校宝在线科技有限公司',
title: '高级/资深前端开发工程师',
location: '杭州',
desc: `
1、负责公司 Saas、CRM 等产品的设计研发工作；<br/>
2、根据实际业务场景及需求，设计前端基础架构，并带领其他组员实现并持续优化；<br/>
3、优化团队开发方式及流程、提升团队开发效率、推动团队技术发展；<br/>
4、负责组件库 Ant Design Vue 的开发维护工作。<br/>
`,
condition: `
1、三年以上前端大型工程研发经验,并有自己的技术沉淀；<br/>
2、精通javascript、CSS、HTML，了解相关的前端生态；<br/>
3、精通一类MV*的jsframework，如AngularJS、React.js、Vue.js；<br/>
4、对前端开发规范、工程化、组件化、测试有深入认识和实践；<br/>
5、思路清晰，具备良好的沟通能力和学习能力，且具备强烈的进取心、团队合作精神；<br/>
6、掌握Node.js，有后端开发经验的优先。<br/>
`,
email: 'antdv',
effectiveTime: {
start: '2020-06-02 00:00:00',
end: '2020-08-15 17:00:00',
},
url: 'https://www.xiaobaoonline.com',
},
{
id: '10001',
company: '美团闪购',
title: '高级前端开发工程师',
location: '北京',
desc: `
1、负责公司中等规模业务线前端页面开发和维护。 <br/>
2、优化代码结构并保持良好兼容性、规范性；持续的优化用户体验，深入优化、定位瓶颈，权衡多种技术手段，实现最优的交互设计。<br/>
3、主动关注线上瓶颈，并对瓶颈进行有效优化。 <br/>
4、结合业务情况，参与多种平台技术建设，包括但不限于公共组件库、中台系统等。根据项目需求，分析、评估并给出最优的前端解决方案。<br/>
`,
condition: `
1、本科及以上计算机相关专业，四年及以上前端开发经验。 <br/>
2、有良好的计算机基础。有扎实的html、css、javascript语言基础，能够编写结构合理，可维护性强的代码； <br/>
3、熟悉常用数据结构与算法及设计模式；熟悉常见的前端框架和响应式页面设计; <br/>
4、精通至少一种JS框架或者对JS原生掌握较深，熟悉Vue/React/angular的一种且了解其基本原理。 <br/>
5、有以下特征加分：<br/>
&nbsp;&nbsp;&nbsp; • 技术社区活跃分子，有开源作品或有深度的技术博客； <br/>
&nbsp;&nbsp;&nbsp; • 对nodejs/React Native/Flutter/webpack/Linux熟悉其中一种或几种； <br/>
&nbsp;&nbsp;&nbsp; • 在工程化领域、可视化搭建平台、数据可视化、泛安全等领域有一项或是多项有深入研究（不仅仅只是使用）。 <br/>
`,
email: 'antdv',
effectiveTime: {
start: '2020-06-02 00:00:00',
end: '2020-08-15 17:00:00',
},
url: 'https://shangou.meituan.com/',
},
{
id: '10002',
company: '北京阿拉丁未来科技有限责任公司',
title: '高级/资深前端开发工程师',
location: '北京',
desc: `
1、负责公司Saas平台的需求研究、技术研究和实现；<br/>
2、优化团队前端架构，提高团队开发效率和质量；<br/>
3、探索前端新的技术框架和边界（Vue.js，ReactNative等）；<br/>
4、发现和产出对团队效率提升有价值的产品和工具。<br/>
5、要求有Ant-vue版本实际项目经验（项目数量大于1）<br/>`,
condition: `
1、本科及以上学历，计算机相关专业，3年以上Web前端开发经验；<br/>
2、追求极致和完美，有代码洁癖，善于总结和挖掘事物本质；<br/>
3、前端基础扎实，有Ajax技术、json，H5相关的实践经验，对React.js，VUE.js，Angular.js等MVVM框架能熟练运用至少一种，且了解其基本原理；<br/>
4、关注Web发展，对新技术充满激情，期待或者已经开发出优秀的产品；<br/>
5、对实现高性能、高可用、优秀用户体验的 Web 应用有实际的了解和实践经验；<br/>
6、有团队精神，性格乐观，能积极面对压力。<br/>
`,
email: 'antdv',
effectiveTime: {
start: '2020-06-02 00:00:00',
end: '2020-06-15 17:00:00',
},
url: 'https://www.aldwx.com',
},
],
};
},
methods: {
isEffective({ start, end }) {
return dayjs().isBetween(start, end);
},
},
};
</script>
<style scoped></style>

96
site/src/views/user/login/components/Login.vue
View File

@ -1,96 +0,0 @@
<template>
<div class="login">
<a-form :form="form" @submit="handleSubmit">
<div v-if="tabs.length > 0">
<a-tabs :animated="false" class="tabs" :active-key="type" @change="onSwitch">
<v-nodes :value="children.tabChildren" />
</a-tabs>
<v-nodes :value="children.otherChildren" />
</div>
<slot v-else />
</a-form>
</div>
</template>
<script>
export default {
provide() {
const { tabs, form } = this;
return {
loginContext: {
tabUtil: {
addTab: id => {
this.tabs = [...tabs, id];
},
removeTab: id => {
this.tabs = tabs.filter(currentId => currentId !== id);
},
},
form,
updateActive: activeItem => {
const { type, active } = this;
if (active[type]) {
active[type].push(activeItem);
} else {
active[type] = [activeItem];
}
},
},
};
},
props: {
defaultActiveKey: {
type: String,
default: '',
},
},
data() {
return {
type: this.defaultActiveKey,
tabs: [],
active: {},
};
},
computed: {
children() {
const children = this.$slots.default();
const tabChildren = [];
const otherChildren = [];
children.forEach(item => {
if (!item) {
return;
}
if (
item.componentOptions &&
item.componentOptions.Ctor.extendOptions.typeName === 'LoginTab'
) {
tabChildren.push(item);
} else {
otherChildren.push(item);
}
});
return {
tabChildren,
otherChildren,
};
},
},
beforeCreate() {
this.form = this.$form.createForm(this);
},
methods: {
handleSubmit(e) {
e.preventDefault();
const { type, form } = this;
const activeFileds = this.active[type];
form.validateFields(activeFileds, { force: true }, (err, values) => {
this.$emit('submit', err, values);
});
},
onSwitch(type) {
this.type = type;
this.$emit('tabChange', type);
},
},
};
</script>

44
site/src/views/user/login/components/LoginItem.jsx
View File

@ -1,44 +0,0 @@
import ItemMap from './map';
// eslint-disable-next-line import/no-unresolved
import WrapFormItem from './WrapFormItem';
const LoginItem = {};
Object.keys(ItemMap).forEach(key => {
const item = ItemMap[key];
LoginItem[key] = {
props: {
defaultValue: String,
name: String,
placeholder: String,
rules: {
type: Array,
default: () => item.rules,
},
getCaptchaButtonText: String,
getCaptchaSecondText: String,
getCaptcha: Function,
countDown: Number,
customprops: {
type: Object,
default: () => item.props,
},
type: {
type: String,
default: key,
},
},
inject: {
loginContext: { default: () => ({ form: {}, updateActive: () => {} }) },
},
render() {
const {
loginContext: { form, updateActive },
$props,
$listeners,
} = this;
return <WrapFormItem {...{ props: { ...$props, form, updateActive }, on: $listeners }} />;
},
};
});
export default LoginItem;

21
site/src/views/user/login/components/LoginSubmit.vue
View File

@ -1,21 +0,0 @@
<template>
<a-form-item>
<a-button size="large" class="submit" type="primary" html-type="submit" :loading="loading">
<slot />
</a-button>
</a-form-item>
</template>
<script>
export default {
props: {
loading: Boolean,
},
};
</script>
<style lang="less" scoped>
.submit {
width: 100%;
margin-top: 24px;
}
</style>

37
site/src/views/user/login/components/LoginTab.vue
View File

@ -1,37 +0,0 @@
<template>
<a-tab-pane v-bind="$props">
<slot />
</a-tab-pane>
</template>
<script>
const generateId = (() => {
let i = 0;
return (prefix = '') => {
i += 1;
return `${prefix}${i}`;
};
})();
export default {
typeName: 'LoginTab',
inject: {
loginContext: { default: () => ({ tabUtil: {} }) },
}, // 标志位 用来判断是不是自定义组件
props: {
active: Boolean,
destroyInactiveTabPane: Boolean,
rootPrefixCls: String,
tab: String,
},
data() {
return {
uniqueId: generateId('login-tab-'),
};
},
mounted() {
if (this.loginContext.tabUtil && this.loginContext.tabUtil.addTab) {
this.loginContext.tabUtil.addTab(this.uniqueId);
}
},
};
</script>

93
site/src/views/user/login/components/WrapFormItem.vue
View File

@ -1,93 +0,0 @@
<template>
<a-form-item v-if="type === 'Captcha'">
<a-row :gutter="8">
<a-col :span="16">
<a-input v-decorator="[name, getFormItemOptions()]" v-bind="customprops" />
</a-col>
<a-col :span="8">
<a-button :disabled="!!count" class="getCaptcha" size="large" @click="handleClick">
{{ count ? `${count} ${getCaptchaSecondText}` : getCaptchaButtonText }}
</a-button>
</a-col>
</a-row>
</a-form-item>
<a-form-item v-else>
<a-input v-decorator="[name, getFormItemOptions()]" v-bind="customprops" />
</a-form-item>
</template>
<script>
export default {
props: {
defaultValue: String,
rules: Array,
updateActive: Function,
form: Object,
customprops: Object,
name: String,
placeholder: String,
type: String,
getCaptchaButtonText: {
type: String,
default: 'captcha',
},
getCaptchaSecondText: {
type: String,
default: 'second',
},
getCaptcha: Function,
countDown: Number,
},
data() {
return {
count: 0,
};
},
mounted() {
const { updateActive, name } = this.$props;
if (updateActive) {
updateActive(name);
}
},
beforeUnmount() {
clearInterval(this.interval);
},
methods: {
getFormItemOptions() {
const { defaultValue, customprops, rules } = this.$props;
const options = {
rules: rules || customprops.rules,
onChange: this.handleChange,
};
if (defaultValue) {
options.initialValue = defaultValue;
}
return options;
},
handleChange(...args) {
this.$emit('change', ...args);
},
handleClick() {
const { getCaptcha } = this.$props;
const result = getCaptcha ? getCaptcha() : null;
if (result === false) {
return;
}
if (result instanceof Promise) {
result.then(this.runGetCaptchaCountDown);
} else {
this.runGetCaptchaCountDown();
}
},
runGetCaptchaCountDown() {
const { countDown } = this.$props;
this.count = countDown || 59;
this.interval = setInterval(() => {
this.count -= 1;
if (this.count === 0) {
clearInterval(this.interval);
}
}, 1000);
},
},
};
</script>

13
site/src/views/user/login/components/index.js
View File

@ -1,13 +0,0 @@
/* eslint-disable import/no-unresolved */
import Login from './Login';
import LoginSubmit from './LoginSubmit';
import LoginTab from './LoginTab';
import LoginItem from './LoginItem';
Login.Tab = LoginTab;
Login.Submit = LoginSubmit;
Object.keys(LoginItem).forEach(item => {
Login[item] = LoginItem[item];
});
export default Login;

53
site/src/views/user/login/components/index.less
View File

@ -1,53 +0,0 @@
@import '~ant-design-vue/es/style/themes/default.less';
.login {
:global {
.ant-tabs .ant-tabs-bar {
margin-bottom: 24px;
text-align: center;
border-bottom: 0;
}
.ant-form-item {
margin: 0 2px 24px;
}
}
.getCaptcha {
display: block;
width: 100%;
}
.icon {
margin-left: 16px;
color: rgba(0, 0, 0, 0.2);
font-size: 24px;
vertical-align: middle;
cursor: pointer;
transition: color 0.3s;
&:hover {
color: @primary-color;
}
}
.other {
margin-top: 24px;
line-height: 22px;
text-align: left;
.register {
float: right;
}
}
.prefixIcon {
color: @disabled-color;
font-size: @font-size-base;
}
.submit {
width: 100%;
margin-top: 24px;
}
}

83
site/src/views/user/login/components/map.jsx
View File

@ -1,83 +0,0 @@
import styles from './index.less';
import { UserOutlined, MailOutlined, LockOutlined, MobileOutlined } from '@ant-design/icons-vue';
export default {
UserName: {
props: {
size: 'large',
id: 'userName',
// eslint-disable-next-line no-unused-vars
prefix: h => <UserOutlined class={styles.prefixIcon} />,
placeholder: 'please enter userName',
},
rules: [
{
required: true,
message: 'Please enter userName!',
},
],
},
Email: {
props: {
size: 'large',
id: 'email',
// eslint-disable-next-line no-unused-vars
prefix: h => <MailOutlined class={styles.prefixIcon} />,
placeholder: 'please enter email',
},
rules: [
{
required: true,
message: 'Please enter email!',
},
],
},
Password: {
props: {
size: 'large',
// eslint-disable-next-line no-unused-vars
prefix: h => <LockOutlined class={styles.prefixIcon} />,
type: 'password',
id: 'password',
placeholder: 'Please enter password!',
},
rules: [
{
required: true,
message: 'Please enter password!',
},
],
},
Mobile: {
props: {
size: 'large',
// eslint-disable-next-line no-unused-vars
prefix: h => <MobileOutlined class={styles.prefixIcon} />,
placeholder: 'mobile number',
},
rules: [
{
required: true,
message: 'Please enter mobile number!',
},
{
pattern: /^1\d{10}$/,
message: 'Wrong mobile number format!',
},
],
},
Captcha: {
props: {
size: 'large',
// eslint-disable-next-line no-unused-vars
prefix: h => <MailOutlined class={styles.prefixIcon} />,
placeholder: 'captcha',
},
rules: [
{
required: true,
message: 'Please enter Captcha!',
},
],
},
};

97
site/src/views/user/login/index.vue
View File

@ -1,97 +0,0 @@
<template>
<div class="main">
<login ref="login" :default-active-key="type" @submit="handleSubmit">
<tab key="account" :tab="$t('userandlogin.login.tab-login-credentials')">
<template v-if="status === 'error' && type === 'account' && !submitting">
<a-alert
style="margin-bottom: 24px"
:message="$t('userandlogin.login.message-invalid-credentials')"
type="error"
show-icon
/>
</template>
<email
name="email"
:rules="[
{
required: true,
message: $t('userandlogin.email.required'),
},
]"
/>
<password
name="password"
:rules="[{ required: true, message: $t('userandlogin.password.required') }]"
:on-press-enter="
e => {
e.preventDefault();
form.validateFields(handleSubmit);
}
"
/>
</tab>
<div>
<!-- <a-checkbox :checked="autoLogin" @change="changeAutoLogin">自动登录</a-checkbox> -->
<!-- <a style="float: right" href>忘记密码</a> -->
</div>
<submit :loading="submitting">
{{ $t('userandlogin.login.login') }}
</submit>
<div class="other">
<router-link class="register" to="/user/register">
{{ $t('userandlogin.login.signup') }}
</router-link>
</div>
</login>
</div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { mapActions, mapState } from 'vuex';
import Login from './components';
const { Tab, Email, Password, Submit } = Login;
export default {
components: {
Login,
Tab,
Password,
Submit,
Email,
},
data() {
return {
type: 'account',
autoLogin: true,
submitting: false,
count: 0,
tabs: [],
};
},
computed: {
...mapState('userAndLogin', {
status: state => state.status,
}),
},
methods: {
...mapActions('userAndLogin', ['login']),
handleSubmit(err, values) {
const { type } = this.$data;
if (!err) {
this.submitting = true;
this.login({
...values,
type,
}).then(() => {
this.submitting = false;
});
}
},
},
};
</script>
<style scoped lang="less" src="./style.less"></style>

77
site/src/views/user/login/locales/en-US.js
View File

@ -1,77 +0,0 @@
export default {
'userandlogin.login.userName': 'userName',
'userandlogin.login.password': 'password',
'userandlogin.login.message-invalid-credentials': 'Invalid username or password',
'userandlogin.login.message-invalid-verification-code': 'Invalid verification code',
'userandlogin.login.tab-login-credentials': 'Credentials',
'userandlogin.login.tab-login-mobile': 'Mobile number',
'userandlogin.login.remember-me': 'Remember me',
'userandlogin.login.forgot-password': 'Forgot your password?',
'userandlogin.login.sign-in-with': 'Sign in with',
'userandlogin.login.signup': 'Sign up',
'userandlogin.login.login': 'Login',
'userandlogin.register.register': 'Register',
'userandlogin.register.get-verification-code': 'Get code',
'userandlogin.register.sign-in': 'Already have an account?',
'userandlogin.register-result.msg': 'Account：registered at {email}',
'userandlogin.register-result.activation-email':
'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
'userandlogin.register-result.back-home': 'Back to home',
'userandlogin.register-result.view-mailbox': 'View mailbox',
'userandlogin.email.required': 'Please enter your email!',
'userandlogin.email.wrong-format': 'The email address is in the wrong format!',
'userandlogin.userName.required': 'Please enter your userName!',
'userandlogin.password.required': 'Please enter your password!',
'userandlogin.password.twice': 'The passwords entered twice do not match!',
'userandlogin.strength.msg':
"Please enter at least 6 characters and don't use passwords that are easy to guess.",
'userandlogin.strength.strong': 'Strength: strong',
'userandlogin.strength.medium': 'Strength: medium',
'userandlogin.strength.short': 'Strength: too short',
'userandlogin.confirm-password.required': 'Please confirm your password!',
'userandlogin.phone-number.required': 'Please enter your phone number!',
'userandlogin.phone-number.wrong-format': 'Malformed phone number!',
'userandlogin.verification-code.required': 'Please enter the verification code!',
'userandlogin.title.required': 'Please enter a title',
'userandlogin.date.required': 'Please select the start and end date',
'userandlogin.goal.required': 'Please enter a description of the goal',
'userandlogin.standard.required': 'Please enter a metric',
'userandlogin.form.get-captcha': 'Get Captcha',
'userandlogin.captcha.second': 'sec',
'userandlogin.form.optional': ' (optional) ',
'userandlogin.form.submit': 'Submit',
'userandlogin.form.save': 'Save',
'userandlogin.email.placeholder': 'Email',
'userandlogin.password.placeholder': 'Password',
'userandlogin.confirm-password.placeholder': 'Confirm password',
'userandlogin.phone-number.placeholder': 'Phone number',
'userandlogin.verification-code.placeholder': 'Verification code',
'userandlogin.title.label': 'Title',
'userandlogin.title.placeholder': 'Give the target a name',
'userandlogin.date.label': 'Start and end date',
'userandlogin.placeholder.start': 'Start date',
'userandlogin.placeholder.end': 'End date',
'userandlogin.goal.label': 'Goal description',
'userandlogin.goal.placeholder': 'Please enter your work goals',
'userandlogin.standard.label': 'Metrics',
'userandlogin.standard.placeholder': 'Please enter a metric',
'userandlogin.client.label': 'Client',
'userandlogin.label.tooltip': 'Target service object',
'userandlogin.client.placeholder':
'Please describe your customer service, internal customers directly @ Name / job number',
'userandlogin.invites.label': 'Inviting critics',
'userandlogin.invites.placeholder':
'Please direct @ Name / job number, you can invite up to 5 people',
'userandlogin.weight.label': 'Weight',
'userandlogin.weight.placeholder': 'Please enter weight',
'userandlogin.public.label': 'Target disclosure',
'userandlogin.label.help': 'Customers and invitees are shared by default',
'userandlogin.radio.public': 'Public',
'userandlogin.radio.partially-public': 'Partially public',
'userandlogin.radio.private': 'Private',
'userandlogin.publicUsers.placeholder': 'Open to',
'userandlogin.option.A': 'Colleague A',
'userandlogin.option.B': 'Colleague B',
'userandlogin.option.C': 'Colleague C',
'userandlogin.navBar.lang': 'Languages',
};

74
site/src/views/user/login/locales/zh-CN.js
View File

@ -1,74 +0,0 @@
export default {
'userandlogin.login.userName': '用户名',
'userandlogin.login.password': '密码',
'userandlogin.login.message-invalid-credentials': '账户或密码错误',
'userandlogin.login.message-invalid-verification-code': '验证码错误',
'userandlogin.login.tab-login-credentials': '账户密码登录',
'userandlogin.login.tab-login-mobile': '手机号登录',
'userandlogin.login.remember-me': '自动登录',
'userandlogin.login.forgot-password': '忘记密码',
'userandlogin.login.sign-in-with': '其他登录方式',
'userandlogin.login.signup': '注册账户',
'userandlogin.login.login': '登录',
'userandlogin.register.register': '注册',
'userandlogin.register.get-verification-code': '获取验证码',
'userandlogin.register.sign-in': '使用已有账户登录',
'userandlogin.register-result.msg': '你的账户：{email} 注册成功',
'userandlogin.register-result.activation-email':
'激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
'userandlogin.register-result.back-home': '返回首页',
'userandlogin.register-result.view-mailbox': '查看邮箱',
'userandlogin.email.required': '请输入邮箱地址！',
'userandlogin.email.wrong-format': '邮箱地址格式错误！',
'userandlogin.userName.required': '请输入用户名!',
'userandlogin.password.required': '请输入密码！',
'userandlogin.password.twice': '两次输入的密码不匹配!',
'userandlogin.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
'userandlogin.strength.strong': '强度：强',
'userandlogin.strength.medium': '强度：中',
'userandlogin.strength.short': '强度：太短',
'userandlogin.confirm-password.required': '请确认密码！',
'userandlogin.phone-number.required': '请输入手机号！',
'userandlogin.phone-number.wrong-format': '手机号格式错误！',
'userandlogin.verification-code.required': '请输入验证码！',
'userandlogin.title.required': '请输入标题',
'userandlogin.date.required': '请选择起止日期',
'userandlogin.goal.required': '请输入目标描述',
'userandlogin.standard.required': '请输入衡量标准',
'userandlogin.form.get-captcha': '获取验证码',
'userandlogin.captcha.second': '秒',
'userandlogin.form.optional': '（选填）',
'userandlogin.form.submit': '提交',
'userandlogin.form.save': '保存',
'userandlogin.email.placeholder': '邮箱',
'userandlogin.password.placeholder': '至少6位密码，区分大小写',
'userandlogin.confirm-password.placeholder': '确认密码',
'userandlogin.phone-number.placeholder': '手机号',
'userandlogin.verification-code.placeholder': '验证码',
'userandlogin.title.label': '标题',
'userandlogin.title.placeholder': '给目标起个名字',
'userandlogin.date.label': '起止日期',
'userandlogin.placeholder.start': '开始日期',
'userandlogin.placeholder.end': '结束日期',
'userandlogin.goal.label': '目标描述',
'userandlogin.goal.placeholder': '请输入你的阶段性工作目标',
'userandlogin.standard.label': '衡量标准',
'userandlogin.standard.placeholder': '请输入衡量标准',
'userandlogin.client.label': '客户',
'userandlogin.label.tooltip': '目标的服务对象',
'userandlogin.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
'userandlogin.invites.label': '邀评人',
'userandlogin.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
'userandlogin.weight.label': '权重',
'userandlogin.weight.placeholder': '请输入',
'userandlogin.public.label': '目标公开',
'userandlogin.label.help': '客户、邀评人默认被分享',
'userandlogin.radio.public': '公开',
'userandlogin.radio.partially-public': '部分公开',
'userandlogin.radio.private': '不公开',
'userandlogin.publicUsers.placeholder': '公开给',
'userandlogin.option.A': '同事甲',
'userandlogin.option.B': '同事乙',
'userandlogin.option.C': '同事丙',
'userandlogin.navBar.lang': '语言',
};

44
site/src/views/user/login/model.js
View File

@ -1,44 +0,0 @@
import qs from 'qs';
import router from '../../../router';
import { fakeAccountLogin } from './service';
export default {
namespaced: true,
state: {
status: undefined,
},
actions: {
async login({ commit }, payload) {
const response = await fakeAccountLogin(payload);
commit({
type: 'changeLoginStatus',
payload: response,
});
// Login successfully
if (response.status === 'ok') {
const urlParams = new URL(window.location.href);
let redirect = qs.parse(location.search).redirect;
if (redirect) {
const redirectUrlParams = new URL(redirect);
if (redirectUrlParams.origin === urlParams.origin) {
redirect = redirect.substr(urlParams.origin.length);
if (redirect.match(/^\/.*#/)) {
redirect = redirect.substr(redirect.indexOf('#') + 1);
}
} else {
redirect = null;
}
}
router.replace({ path: redirect || '/' });
}
},
},
mutations: {
changeLoginStatus(state, { payload }) {
Object.assign(state, {
status: payload.status,
type: payload.type,
});
},
},
};

12
site/src/views/user/login/service.js
View File

@ -1,12 +0,0 @@
import request from '../../../utils/request';
export async function fakeAccountLogin(params) {
return request('/api/login/account', {
method: 'POST',
data: params,
});
}
export async function getFakeCaptcha(mobile) {
return request(`/api/login/captcha?mobile=${mobile}`);
}

36
site/src/views/user/login/style.less
View File

@ -1,36 +0,0 @@
@import '~ant-design-vue/es/style/themes/default.less';
.main {
width: 368px;
margin: 0 auto;
@media screen and (max-width: @screen-sm) {
width: 95%;
}
.icon {
margin-left: 16px;
color: rgba(0, 0, 0, 0.2);
font-size: 24px;
vertical-align: middle;
cursor: pointer;
transition: color 0.3s;
&:hover {
color: @primary-color;
}
}
.other {
margin-top: 24px;
line-height: 22px;
text-align: left;
.register {
float: right;
}
}
}
.main /deep/ .antd-pro-login-submit {
width: 100%;
margin-top: 24px;
}

10
site/src/views/user/login/utils/utils.js
View File

@ -1,10 +0,0 @@
import { parse } from 'qs';
export function getPageQuery() {
return parse(window.location.href.split('?')[1]);
}
export function setAuthority(authority) {
const proAuthority = typeof authority === 'string' ? [authority] : authority;
return localStorage.setItem('antd-pro-authority', JSON.stringify(proAuthority));
}

59
site/src/views/user/register-result/index.vue
View File

@ -1,59 +0,0 @@
<template>
<div class="registerResult">
<div>
{{ $t('userandregister-result.register-result.msg', { email: account }) }}
</div>
<div>
{{ $t('userandregister-result.register-result.activation-email') }}
</div>
<div class="actions">
<!-- <a href="">
<a-button size="large" type="primary">
{{ $t('userandregister-result.register-result.view-mailbox') }}
</a-button>
</a> -->
<router-link to="/">
<a-button size="large">
{{ $t('userandregister-result.register-result.back-home') }}
</a-button>
</router-link>
</div>
</div>
</template>
<script>
export default {
data() {
return {
account: '',
};
},
created() {
this.account = this.$route.query.account;
},
};
</script>
<style scoped lang="less">
.registerResult {
width: 800px;
min-height: 400px;
margin: auto;
padding: 80px;
background: none;
/deep/ .anticon {
font-size: 64px;
}
.title {
margin-top: 32px;
font-size: 20px;
line-height: 28px;
}
.actions {
margin-top: 40px;
a + a {
margin-left: 8px;
}
}
}
</style>

23
site/src/views/user/register-result/locales/en-US.js
View File

@ -1,23 +0,0 @@
export default {
'userandregister-result.login.userName': 'userName',
'userandregister-result.login.password': 'password',
'userandregister-result.login.message-invalid-credentials':
'Invalid username or password（admin/ant.design）',
'userandregister-result.login.message-invalid-verification-code': 'Invalid verification code',
'userandregister-result.login.tab-login-credentials': 'Credentials',
'userandregister-result.login.tab-login-mobile': 'Mobile number',
'userandregister-result.login.remember-me': 'Remember me',
'userandregister-result.login.forgot-password': 'Forgot your password?',
'userandregister-result.login.sign-in-with': 'Sign in with',
'userandregister-result.login.signup': 'Sign up',
'userandregister-result.login.login': 'Login',
'userandregister-result.register.register': 'Register',
'userandregister-result.register.get-verification-code': 'Get code',
'userandregister-result.register.sign-in': 'Already have an account?',
'userandregister-result.register-result.msg': 'Account：registered at {email}',
'userandregister-result.register-result.activation-email':
'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
'userandregister-result.register-result.back-home': 'Back to home',
'userandregister-result.register-result.view-mailbox': 'View mailbox',
'userandregister-result.navBar.lang': 'Languages',
};

22
site/src/views/user/register-result/locales/zh-CN.js
View File

@ -1,22 +0,0 @@
export default {
'userandregister-result.login.userName': '用户名',
'userandregister-result.login.password': '密码',
'userandregister-result.login.message-invalid-credentials': '账户或密码错误（admin/ant.design）',
'userandregister-result.login.message-invalid-verification-code': '验证码错误',
'userandregister-result.login.tab-login-credentials': '账户密码登录',
'userandregister-result.login.tab-login-mobile': '手机号登录',
'userandregister-result.login.remember-me': '自动登录',
'userandregister-result.login.forgot-password': '忘记密码',
'userandregister-result.login.sign-in-with': '其他登录方式',
'userandregister-result.login.signup': '注册账户',
'userandregister-result.login.login': '登录',
'userandregister-result.register.register': '注册',
'userandregister-result.register.get-verification-code': '获取验证码',
'userandregister-result.register.sign-in': '使用已有账户登录',
'userandregister-result.register-result.msg': '你的账户：{email} 注册成功',
'userandregister-result.register-result.activation-email':
'激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
'userandregister-result.register-result.back-home': '返回首页',
'userandregister-result.register-result.view-mailbox': '查看邮箱',
'userandregister-result.navBar.lang': '语言',
};

21
site/src/views/user/register-result/style.less
View File

@ -1,21 +0,0 @@
.registerResult {
width: 800px;
min-height: 400px;
margin: auto;
padding: 80px;
background: none;
/deep/ .anticon {
font-size: 64px;
}
.title {
margin-top: 32px;
font-size: 20px;
line-height: 28px;
}
.actions {
margin-top: 40px;
a + a {
margin-left: 8px;
}
}
}

248
site/src/views/user/register/index.vue
View File

@ -1,248 +0,0 @@
<template>
<div class="main">
<h3>
{{ $t('userandregister.register.register') }}
</h3>
<a-form :form="form" @submit="handleSubmit">
<a-form-item>
<a-input
v-decorator="formConfig.mail"
size="large"
:placeholder="$t('userandregister.email.placeholder')"
/>
</a-form-item>
<a-form-item :help="help">
<a-popover
:get-popup-container="getPopupContainer"
:overlay-style="{ width: '240px' }"
placement="right"
:visible="visible"
>
<template #content>
<div style="padding: 4px 0">
<temp-var :status="getPasswordStatus()" :password="form.getFieldValue('password')">
<template #default="{ status, password }">
<div v-if="status === 'ok'" class="success">
{{ $t('userandregister.strength.strong') }}
</div>
<div v-if="status === 'pass'" class="warning">
{{ $t('userandregister.strength.medium') }}
</div>
<div v-if="status === 'poor'" class="error">
{{ $t('userandregister.strength.short') }}
</div>
<div v-if="password && password.length" :class="`progress-${status}`">
<a-progress
:status="passwordProgressMap[status]"
class="progress"
:stroke-width="6"
:percent="password.length * 10 > 100 ? 100 : password.length * 10"
:show-info="false"
/>
</div>
</template>
</temp-var>
<div style="margin-top: 10px">
{{ $t('userandregister.strength.msg') }}
</div>
</div>
</template>
<a-input
v-decorator="formConfig.password"
size="large"
type="password"
:placeholder="$t('userandregister.password.placeholder')"
/>
</a-popover>
</a-form-item>
<a-form-item>
<a-input
v-decorator="formConfig.confirm"
size="large"
type="password"
:placeholder="$t('userandregister.confirm-password.placeholder')"
/>
</a-form-item>
<a-form-item>
<a-button
size="large"
:loading="submitting"
class="submit"
type="primary"
html-type="submit"
>
{{ $t('userandregister.register.register') }}
</a-button>
<router-link class="login" to="/user/login">
{{ $t('userandregister.register.sign-in') }}
</router-link>
</a-form-item>
</a-form>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
data() {
this.interval = undefined;
this.form = this.$form.createForm(this);
return {
count: 0,
confirmDirty: false,
visible: false,
help: '',
prefix: '86',
passwordProgressMap: {
ok: 'success',
pass: 'normal',
poor: 'exception',
},
formConfig: {
mail: [
'mail',
{
rules: [
{
required: true,
message: this.$t('userandregister.email.required'),
},
{
type: 'email',
message: this.$t('userandregister.email.wrong-format'),
},
],
},
],
password: [
'password',
{
rules: [
{
validator: this.checkPassword,
},
],
},
],
confirm: [
'confirm',
{
rules: [
{
required: true,
message: this.$t('userandregister.confirm-password.required'),
},
{
validator: this.checkConfirm,
},
],
},
],
},
};
},
computed: {
...mapState({
userAndregister: state => state['userAndregister'],
submitting: state => {
return state.loading.effects['userAndregister/submit'];
},
}),
},
updated() {
const { userAndregister, form } = this;
const account = form.getFieldValue('mail');
if (userAndregister.status === 'ok') {
this.$router.push({
path: '/user/register-result',
query: {
account,
},
});
}
},
beforeUnmount() {
clearInterval(this.interval);
},
methods: {
getPopupContainer(node) {
if (node && node.parentNode) {
return node.parentNode;
}
return node;
},
onGetCaptcha() {
let count = 59;
this.count = count;
this.interval = window.setInterval(() => {
count -= 1;
this.count = count;
if (count === 0) {
clearInterval(this.interval);
}
}, 1000);
},
getPasswordStatus() {
const { form } = this;
const value = form.getFieldValue('password');
if (value && value.length > 9) {
return 'ok';
}
if (value && value.length > 5) {
return 'pass';
}
return 'poor';
},
handleSubmit(e) {
e.preventDefault();
const { form } = this;
form.validateFields({ force: true }, (err, values) => {
if (!err) {
this.$store.dispatch({
type: 'userAndregister/submit',
payload: values,
});
}
});
},
checkConfirm(rule, value, callback) {
const { form } = this;
if (value && value !== form.getFieldValue('password')) {
callback(this.$t('userandregister.password.twice'));
} else {
callback();
}
},
checkPassword(rule, value, callback) {
const { visible, confirmDirty } = this;
if (!value) {
this.help = this.$t('userandregister.password.required');
this.visible = !!value;
callback('error');
} else {
this.help = '';
if (!visible) {
this.visible = !!value;
}
if (value.length < 6) {
callback('error');
} else {
const { form } = this;
if (value && confirmDirty) {
form.validateFields(['confirm'], { force: true });
}
callback();
}
}
},
changePrefix(value) {
this.prefix = value;
},
},
};
</script>
<style scoped lang="less" src="./style.less"></style>

78
site/src/views/user/register/locales/en-US.js
View File

@ -1,78 +0,0 @@
export default {
'userandregister.login.userName': 'userName',
'userandregister.login.password': 'password',
'userandregister.login.message-invalid-credentials':
'Invalid username or password（admin/ant.design）',
'userandregister.login.message-invalid-verification-code': 'Invalid verification code',
'userandregister.login.tab-login-credentials': 'Credentials',
'userandregister.login.tab-login-mobile': 'Mobile number',
'userandregister.login.remember-me': 'Remember me',
'userandregister.login.forgot-password': 'Forgot your password?',
'userandregister.login.sign-in-with': 'Sign in with',
'userandregister.login.signup': 'Sign up',
'userandregister.login.login': 'Login',
'userandregister.register.register': 'Register',
'userandregister.register.get-verification-code': 'Get code',
'userandregister.register.sign-in': 'Already have an account?',
'userandregister.register-result.msg': 'Account：registered at {email}',
'userandregister.register-result.activation-email':
'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
'userandregister.register-result.back-home': 'Back to home',
'userandregister.register-result.view-mailbox': 'View mailbox',
'userandregister.email.required': 'Please enter your email!',
'userandregister.email.wrong-format': 'The email address is in the wrong format!',
'userandregister.userName.required': 'Please enter your userName!',
'userandregister.password.required': 'Please enter your password!',
'userandregister.password.twice': 'The passwords entered twice do not match!',
'userandregister.strength.msg':
"Please enter at least 6 characters and don't use passwords that are easy to guess.",
'userandregister.strength.strong': 'Strength: strong',
'userandregister.strength.medium': 'Strength: medium',
'userandregister.strength.short': 'Strength: too short',
'userandregister.confirm-password.required': 'Please confirm your password!',
'userandregister.phone-number.required': 'Please enter your phone number!',
'userandregister.phone-number.wrong-format': 'Malformed phone number!',
'userandregister.verification-code.required': 'Please enter the verification code!',
'userandregister.title.required': 'Please enter a title',
'userandregister.date.required': 'Please select the start and end date',
'userandregister.goal.required': 'Please enter a description of the goal',
'userandregister.standard.required': 'Please enter a metric',
'userandregister.form.get-captcha': 'Get Captcha',
'userandregister.captcha.second': 'sec',
'userandregister.form.optional': ' (optional) ',
'userandregister.form.submit': 'Submit',
'userandregister.form.save': 'Save',
'userandregister.email.placeholder': 'Email',
'userandregister.password.placeholder': 'Password',
'userandregister.confirm-password.placeholder': 'Confirm password',
'userandregister.phone-number.placeholder': 'Phone number',
'userandregister.verification-code.placeholder': 'Verification code',
'userandregister.title.label': 'Title',
'userandregister.title.placeholder': 'Give the target a name',
'userandregister.date.label': 'Start and end date',
'userandregister.placeholder.start': 'Start date',
'userandregister.placeholder.end': 'End date',
'userandregister.goal.label': 'Goal description',
'userandregister.goal.placeholder': 'Please enter your work goals',
'userandregister.standard.label': 'Metrics',
'userandregister.standard.placeholder': 'Please enter a metric',
'userandregister.client.label': 'Client',
'userandregister.label.tooltip': 'Target service object',
'userandregister.client.placeholder':
'Please describe your customer service, internal customers directly @ Name / job number',
'userandregister.invites.label': 'Inviting critics',
'userandregister.invites.placeholder':
'Please direct @ Name / job number, you can invite up to 5 people',
'userandregister.weight.label': 'Weight',
'userandregister.weight.placeholder': 'Please enter weight',
'userandregister.public.label': 'Target disclosure',
'userandregister.label.help': 'Customers and invitees are shared by default',
'userandregister.radio.public': 'Public',
'userandregister.radio.partially-public': 'Partially public',
'userandregister.radio.private': 'Private',
'userandregister.publicUsers.placeholder': 'Open to',
'userandregister.option.A': 'Colleague A',
'userandregister.option.B': 'Colleague B',
'userandregister.option.C': 'Colleague C',
'userandregister.navBar.lang': 'Languages',
};

74
site/src/views/user/register/locales/zh-CN.js
View File

@ -1,74 +0,0 @@
export default {
'userandregister.login.userName': '用户名',
'userandregister.login.password': '密码',
'userandregister.login.message-invalid-credentials': '账户或密码错误（admin/ant.design）',
'userandregister.login.message-invalid-verification-code': '验证码错误',
'userandregister.login.tab-login-credentials': '账户密码登录',
'userandregister.login.tab-login-mobile': '手机号登录',
'userandregister.login.remember-me': '自动登录',
'userandregister.login.forgot-password': '忘记密码',
'userandregister.login.sign-in-with': '其他登录方式',
'userandregister.login.signup': '注册账户',
'userandregister.login.login': '登录',
'userandregister.register.register': '注册',
'userandregister.register.get-verification-code': '获取验证码',
'userandregister.register.sign-in': '使用已有账户登录',
'userandregister.register-result.msg': '你的账户：{email} 注册成功',
'userandregister.register-result.activation-email':
'激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
'userandregister.register-result.back-home': '返回首页',
'userandregister.register-result.view-mailbox': '查看邮箱',
'userandregister.email.required': '请输入邮箱地址！',
'userandregister.email.wrong-format': '邮箱地址格式错误！',
'userandregister.userName.required': '请输入用户名!',
'userandregister.password.required': '请输入密码！',
'userandregister.password.twice': '两次输入的密码不匹配!',
'userandregister.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
'userandregister.strength.strong': '强度：强',
'userandregister.strength.medium': '强度：中',
'userandregister.strength.short': '强度：太短',
'userandregister.confirm-password.required': '请确认密码！',
'userandregister.phone-number.required': '请输入手机号！',
'userandregister.phone-number.wrong-format': '手机号格式错误！',
'userandregister.verification-code.required': '请输入验证码！',
'userandregister.title.required': '请输入标题',
'userandregister.date.required': '请选择起止日期',
'userandregister.goal.required': '请输入目标描述',
'userandregister.standard.required': '请输入衡量标准',
'userandregister.form.get-captcha': '获取验证码',
'userandregister.captcha.second': '秒',
'userandregister.form.optional': '（选填）',
'userandregister.form.submit': '提交',
'userandregister.form.save': '保存',
'userandregister.email.placeholder': '邮箱',
'userandregister.password.placeholder': '至少6位密码，区分大小写',
'userandregister.confirm-password.placeholder': '确认密码',
'userandregister.phone-number.placeholder': '手机号',
'userandregister.verification-code.placeholder': '验证码',
'userandregister.title.label': '标题',
'userandregister.title.placeholder': '给目标起个名字',
'userandregister.date.label': '起止日期',
'userandregister.placeholder.start': '开始日期',
'userandregister.placeholder.end': '结束日期',
'userandregister.goal.label': '目标描述',
'userandregister.goal.placeholder': '请输入你的阶段性工作目标',
'userandregister.standard.label': '衡量标准',
'userandregister.standard.placeholder': '请输入衡量标准',
'userandregister.client.label': '客户',
'userandregister.label.tooltip': '目标的服务对象',
'userandregister.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
'userandregister.invites.label': '邀评人',
'userandregister.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
'userandregister.weight.label': '权重',
'userandregister.weight.placeholder': '请输入',
'userandregister.public.label': '目标公开',
'userandregister.label.help': '客户、邀评人默认被分享',
'userandregister.radio.public': '公开',
'userandregister.radio.partially-public': '部分公开',
'userandregister.radio.private': '不公开',
'userandregister.publicUsers.placeholder': '公开给',
'userandregister.option.A': '同事甲',
'userandregister.option.B': '同事乙',
'userandregister.option.C': '同事丙',
'userandregister.navBar.lang': '语言',
};

24
site/src/views/user/register/model.js
View File

@ -1,24 +0,0 @@
import { fakeRegister } from './service';
const Model = {
namespaced: true,
state: {
status: undefined,
},
actions: {
async submit({ commit }, { payload }) {
const response = await fakeRegister(payload);
commit({
type: 'registerHandle',
payload: response,
});
},
},
mutations: {
registerHandle(state, { payload }) {
state.status = payload.status;
},
},
};
export default Model;

8
site/src/views/user/register/service.js
View File

@ -1,8 +0,0 @@
import request from '../../../utils/request';
export async function fakeRegister(params) {
return request('/api/register', {
method: 'POST',
data: params,
});
}

52
site/src/views/user/register/style.less
View File

@ -1,52 +0,0 @@
@import '~ant-design-vue/es/style/themes/default.less';
.main {
width: 368px;
margin: 0 auto;
/deep/ .ant-form-item {
margin-bottom: 24px;
}
/deep/ .ant-select-selection-selected-value {
padding-right: 0;
}
h3 {
margin-bottom: 20px;
font-size: 16px;
}
.getCaptcha {
display: block;
width: 100%;
}
.submit {
width: 50%;
}
.login {
float: right;
line-height: @btn-height-lg;
}
}
.success,
.warning,
.error {
transition: color 0.3s;
}
.success {
color: @success-color;
}
.warning {
color: @warning-color;
}
.error {
color: @error-color;
}
.progress-pass > .progress /deep/ .ant-progress-bg {
background-color: @warning-color;
}

6
site/src/views/vip.vue
View File

@ -1,6 +0,0 @@
<template>
<div />
</template>
<script>
export default {};
</script>

55
site/themeConfig.ts
View File

@ -1,55 +0,0 @@
import less from 'less';
import defaultVars from '../scripts/default-vars';
import dark from '../scripts/dark-vars';
const themeConfig = [
{
theme: 'dark',
htmlThemeAttr: 'dark',
modifyVars: {
hack: `true;@import "${require.resolve('../components/style/color/colorPalette.less')}";`,
...defaultVars,
...dark,
'text-color': 'fade(@white, 65%)',
'gray-8': '@text-color',
'background-color-base': '#555',
'skeleton-color': 'rgba(0,0,0,0.8)',
'root-entry-name': 'dark',
},
},
];
const additionalData = async (content: string, filename: string): Promise<string> => {
const themePromises = themeConfig.map(async t => {
const { htmlThemeAttr, modifyVars = {} } = t;
const options = {
javascriptEnabled: true,
modifyVars,
relativeUrls: true,
filename,
};
try {
const { css } = await less.render(content, options);
let res = '';
if (htmlThemeAttr && css) {
res = `
[data-doc-theme=${htmlThemeAttr}] {
${css}
}
`;
}
return Promise.resolve(res);
} catch (error) {
// eslint-disable-next-line no-console
console.log(error);
return Promise.reject(content);
}
});
let res = content;
for (const themePromise of themePromises) {
const theme = await themePromise;
res += theme;
}
return res;
};
export default themeConfig;
export { themeConfig, additionalData };

6
site/vite.config.ts
View File

@ -3,7 +3,6 @@ import vue from '@vitejs/plugin-vue';
import md from '../plugin/md';
import docs from '../plugin/docs';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { additionalData } from './themeConfig';
/**
* @type {import('vite').UserConfig}
*/
@ -45,13 +44,8 @@ export default {
css: {
preprocessorOptions: {
less: {
modifyVars: {
hack: `true;@import "${require.resolve('../components/style/color/colorPalette.less')}";`,
'root-entry-name': 'variable',
},
javascriptEnabled: true,
// includePaths: ["node_modules/"],
additionalData,
},
},
},