Jdt theme dev (jd-opensource#2079)

* upd: theme perf * upd: theme perf
mikasayw · Feb 3, 2023 · 019ab2a · 019ab2a
1 parent a758d83
commit 019ab2a
Show file tree

Hide file tree

Showing 32 changed files with 367 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "checked": "npm run generate:file && tsc",
     "checked:taro:vue": "npm run generate:file:taro:vue",
     "dev": "npm run checked && vite --open --force",
+    "dev:jdt": "npm run checked && vite --open --force --config vite.config.jdt.ts",
     "dev:taro:weapp": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:weapp",
     "dev:taro:alipay": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:alipay",
     "dev:taro:jd": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:jd",

diff --git a/src/packages/__VUE/actionsheet/index.scss b/src/packages/__VUE/actionsheet/index.scss
@@ -53,7 +53,7 @@
   .nut-actionsheet-item {
     display: block;
     //   height: 24px;
-    padding: 10px;
+    padding: $actionsheet-item-padding;
     line-height: $actionsheet-item-line-height;
     font-size: $actionsheet-item-font-size;
     color: $actionsheet-item-font-color;
@@ -64,19 +64,19 @@
   }
 
   .desc {
-    font-size: $actionsheet-item-font-size;
-    color: #999;
+    font-size: $actionsheet-item-desc-font-size;
+    color: $actionsheet-item-desc-font-color;
     cursor: default;
   }
 
   .subdesc {
     display: block;
     font-size: $actionsheet-item-subdesc-font-size;
-    color: #999;
+    color: $actionsheet-item-subdesc-font-color;
   }
 
   .nut-actionsheet-item-disabled {
-    color: #e1e1e1 !important;
+    color: $actionsheet-item-disabled-font-color !important;
     cursor: not-allowed;
   }
   .nut-actionsheet-item-loading {

diff --git a/src/packages/__VUE/badge/demo.vue b/src/packages/__VUE/badge/demo.vue
@@ -11,6 +11,9 @@
       <nut-badge value="NEW">
         <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>
+      <nut-badge value="NEW" bubble>
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
       <nut-badge dot>
         <nut-avatar icon="my" shape="square"></nut-avatar>
       </nut-badge>

diff --git a/src/packages/__VUE/badge/doc.en-US.md b/src/packages/__VUE/badge/doc.en-US.md
@@ -218,6 +218,7 @@ app.use(Badge);
 | max     | When value is a numeric value, the maximum value                     | Number  | `10000`   |
 | z-index | badge z-index                          | Number  | `10`      |
 | dot     | whether to dot                                 | Boolean | `false`   |
+| bubble  | whether to bubble                                 | Boolean | `false`   |
 | hidden  | whether to hide                                   | Boolean | `false`   |
 | top     | Up and down offset, support unit setting, for example: 5px | Number  | `0`       |
 | right   | Left and right offset, support unit setting, for example: 5px | Number  | `0`       |

diff --git a/src/packages/__VUE/badge/doc.md b/src/packages/__VUE/badge/doc.md
@@ -218,6 +218,7 @@ app.use(Badge);
 | max     | value 为数值时，最大值                     | Number  | `10000`   |
 | z-index | 徽标的 z-index 值                          | Number  | `10`      |
 | dot     | 是否为小点                                 | Boolean | `false`   |
+| bubble  | 是否为气泡形状                                 | Boolean | `false`   |
 | hidden  | 是否隐藏                                   | Boolean | `false`   |
 | top     | 上下偏移量，支持单位设置，可设置为：5px 等 | Number  | `0`       |
 | right   | 左右偏移量，支持单位设置，可设置为：5px 等 | Number  | `0`       |

diff --git a/src/packages/__VUE/badge/index.scss b/src/packages/__VUE/badge/index.scss
@@ -24,6 +24,8 @@
     background: $badge-background-color;
     padding: $badge-padding;
     text-align: center;
+    line-height: $badge-line-height;
+    border: $badge-border;
     border-radius: $badge-border-radius;
     font-size: $badge-font-size;
     font-weight: normal;
@@ -38,4 +40,8 @@
     border-radius: $badge-dot-border-radius;
     padding: $badge-dot-padding;
   }
+
+  .is-bubble {
+    border-bottom-left-radius: 0;
+  }
 }
diff --git a/src/packages/__VUE/badge/index.taro.vue b/src/packages/__VUE/badge/index.taro.vue
@@ -8,7 +8,7 @@
       v-show="!hidden && (content || dot)"
       v-text="content"
       class="nut-badge__content sup"
-      :class="{ 'is-dot': dot }"
+      :class="{ 'is-dot': dot, 'is-bubble': !dot && bubble }"
       :style="stl"
     >
     </view>
@@ -32,6 +32,10 @@ export default create({
       type: Boolean,
       default: false
     },
+    bubble: {
+      type: Boolean,
+      default: false
+    },
     hidden: {
       type: Boolean,
       default: false

diff --git a/src/packages/__VUE/badge/index.vue b/src/packages/__VUE/badge/index.vue
@@ -8,7 +8,7 @@
       v-show="!hidden && (content || dot)"
       v-text="content"
       class="nut-badge__content sup"
-      :class="{ 'is-dot': dot }"
+      :class="{ 'is-dot': dot, 'is-bubble': !dot && bubble }"
       :style="stl"
     >
     </view>
@@ -32,6 +32,10 @@ export default create({
       type: Boolean,
       default: false
     },
+    bubble: {
+      type: Boolean,
+      default: false
+    },
     hidden: {
       type: Boolean,
       default: false

diff --git a/src/packages/__VUE/cell/demo.vue b/src/packages/__VUE/cell/demo.vue
@@ -52,10 +52,16 @@
           />
         </template>
       </nut-cell>
+      <nut-cell :title="translate('image')" :sub-title="translate('title1')">
+        <template v-slot:icon>
+          <div style="height: 40px; width: 40px; border-radius: 50%; background: #e5e5e5"></div>
+        </template>
+      </nut-cell>
     </nut-cell-group>
 
     <h2>{{ translate('displayIcon') }}</h2>
     <nut-cell :title="translate('name')" icon="my" :desc="translate('desc')" isLink> </nut-cell>
+    <nut-cell :title="translate('name')" icon="my" :desc="translate('desc')" isLink size="large"> </nut-cell>
     <h2>{{ translate('title6') }}</h2>
     <nut-cell desc-text-align="left" :desc="translate('desc')"></nut-cell>
 

diff --git a/src/packages/__VUE/cell/index.scss b/src/packages/__VUE/cell/index.scss
@@ -26,8 +26,29 @@
   &--large {
     font-size: $cell-large-title-font;
     padding: $cell-large-padding;
+    line-height: $cell-large-line-height;
     .nut-cell__title-desc {
       font-size: $cell-large-title-desc-font;
+      line-height: $cell-large-title-desc-line-height;
+    }
+
+    .nut-cell__icon {
+      margin: $cell-default-large-icon-margin;
+
+      .nut-icon {
+        width: $cell-default-large-icon-size;
+        height: $cell-default-large-icon-size;
+        line-height: $cell-default-large-icon-size;
+      }
+
+      .nutui-iconfont {
+        font-size: $cell-default-large-icon-font-size;
+      }
+    }
+
+    .nut-cell__link.nut-icon {
+      height: $cell-large-icon-link-height;
+      line-height: $cell-large-icon-link-height;
     }
   }
 
@@ -72,15 +93,27 @@
   &__icon {
     display: flex;
     flex-direction: row;
-    margin-right: $cell-default-icon-margin;
+    margin: $cell-default-icon-margin;
+
+    .nut-icon {
+      width: $cell-default-icon-size;
+      height: $cell-default-icon-size;
+      line-height: $cell-default-icon-size;
+    }
+
+    .nutui-iconfont {
+      font-size: $cell-default-icon-font-size;
+    }
   }
 
   &__title {
     display: flex;
     flex-direction: column;
     flex: 1;
     &-desc {
+      line-height: $cell-title-desc-line-height;
       font-size: $cell-title-desc-font;
+      color: $cell-title-desc-color;
     }
   }
   &__value {
@@ -93,7 +126,13 @@
       color: $cell-color;
     }
   }
-  &__link {
-    color: #979797;
+  &__link.nut-icon {
+    color: $cell-icon-link-color;
+    margin: $cell-icon-link-margin;
+    width: $cell-icon-link-width;
+    min-width: 1em;
+    height: $cell-icon-link-height;
+    line-height: $cell-icon-link-height;
+    font-size: $cell-icon-link-font-size;
   }
 }
diff --git a/src/packages/__VUE/cellgroup/index.scss b/src/packages/__VUE/cellgroup/index.scss
@@ -5,18 +5,17 @@
     padding: $cell-group-title-padding;
     color: $cell-group-title-color;
     font-size: $cell-group-title-font-size;
+    font-weight: $cell-group-title-font-weight;
     line-height: $cell-group-title-line-height;
-    margin-top: 30px;
-    margin-bottom: 10px;
+    margin: $cell-group-title-margin;
   }
   &__desc {
     display: inherit;
     padding: $cell-group-desc-padding;
     color: $cell-group-desc-color;
     font-size: $cell-group-desc-font-size;
     line-height: $cell-group-desc-line-height;
-    margin-top: 10px;
-    margin-bottom: 10px;
+    margin: $cell-group-desc-margin;
   }
   &__warp {
     display: inherit;

diff --git a/src/packages/__VUE/collapseitem/index.scss b/src/packages/__VUE/collapseitem/index.scss
@@ -73,7 +73,7 @@
     .subTitle {
       position: absolute;
       top: 50%;
-      right: 60px;
+      right: $collapse-item-sub-title-right;
       margin-top: -12px;
       color: $collapse-item-sub-title-color;
     }

diff --git a/src/packages/__VUE/collapseitem/index.taro.vue b/src/packages/__VUE/collapseitem/index.taro.vue
@@ -120,8 +120,8 @@ export default create({
       openExpanded: false,
       // classDirection: 'right',
       iconStyle: {
-        transform: 'rotate(0deg)',
-        marginTop: parent.props.iconHeght ? '-' + parent.props.iconHeght / 2 + 'px' : '-10px'
+        transform: 'translateY(-50%) rotate(0deg)'
+        // marginTop: parent.props.iconHeght ? '-' + parent.props.iconHeght / 2 + 'px' : '-10px'
       }
     });
 
@@ -157,9 +157,9 @@ export default create({
     // 手风琴模式
     const animation = () => {
       if (parent.props.icon && !proxyData.openExpanded) {
-        proxyData.iconStyle['transform'] = 'rotate(0deg)';
+        proxyData.iconStyle['transform'] = 'translateY(-50%) rotate(0deg)';
       } else {
-        proxyData.iconStyle['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
+        proxyData.iconStyle['transform'] = 'translateY(-50%) rotate(' + parent.props.rotate + 'deg)';
       }
       nextTick(() => {
         // const query = Taro.createSelectorQuery();
@@ -191,7 +191,7 @@ export default create({
     const defaultOpen = () => {
       open();
       if (parent.props.icon) {
-        proxyData['iconStyle']['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
+        proxyData['iconStyle']['transform'] = 'translateY(-50%) rotate(' + parent.props.rotate + 'deg)';
       }
     };
 

diff --git a/src/packages/__VUE/collapseitem/index.vue b/src/packages/__VUE/collapseitem/index.vue
@@ -112,8 +112,8 @@ export default create({
       openExpanded: false,
       // classDirection: 'right',
       iconStyle: {
-        transform: 'rotate(0deg)',
-        marginTop: parent.props.iconHeght ? '-' + parent.props.iconHeght / 2 + 'px' : '-10px'
+        transform: 'translateY(-50%) rotate(0deg)'
+        // marginTop: parent.props.iconHeght ? '-' + parent.props.iconHeght / 2 + 'px' : '-10px'
       }
     });
 
@@ -157,9 +157,9 @@ export default create({
         wrapperRefEle.style.willChange = 'height';
         wrapperRefEle.style.height = !proxyData.openExpanded ? 0 : contentHeight;
         if (parent.props.icon && !proxyData.openExpanded) {
-          proxyData.iconStyle['transform'] = 'rotate(0deg)';
+          proxyData.iconStyle['transform'] = 'translateY(-50%) rotate(0deg)';
         } else {
-          proxyData.iconStyle['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
+          proxyData.iconStyle['transform'] = 'translateY(-50%) rotate(' + parent.props.rotate + 'deg)';
         }
       }
       if (!proxyData.openExpanded) {
@@ -175,7 +175,7 @@ export default create({
     const defaultOpen = () => {
       open();
       if (parent.props.icon) {
-        proxyData['iconStyle']['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
+        proxyData['iconStyle']['transform'] = 'translateY(-50%) rotate(' + parent.props.rotate + 'deg)';
       }
     };
 

diff --git a/src/packages/__VUE/input/index.scss b/src/packages/__VUE/input/index.scss
@@ -26,9 +26,9 @@ textarea {
 .nut-input {
   position: relative;
   width: 100%;
-  padding: 10px 25px;
+  padding: $input-padding;
   display: flex;
-  line-height: 24px;
+  line-height: $input-line-height;
   background: $white;
   font-size: $input-font-size;
   box-sizing: border-box;

diff --git a/src/packages/__VUE/numberkeyboard/index.scss b/src/packages/__VUE/numberkeyboard/index.scss
@@ -44,7 +44,7 @@
 
   .number-board-body {
     display: flex;
-    padding: 6px 0 0 6px;
+    padding: $numberkeyboard-body-padding;
 
     .number-board {
       display: flex;

diff --git a/src/packages/__VUE/step/index.scss b/src/packages/__VUE/step/index.scss
@@ -114,12 +114,16 @@
         color: $steps-wait-icon-color;
       }
     }
+    .nut-step-title {
+      color: $steps-wait-title-color;
+    }
     .nut-step-content {
       color: $steps-wait-content-color;
     }
   }
 }
 .nut-steps-horizontal {
+  padding: $steps-horizontal-padding;
   &.nut-steps-dot {
     .nut-step-head {
       margin-top: 7px;
@@ -172,6 +176,7 @@
   }
 }
 .nut-steps-vertical {
+  padding: $steps-vertical-padding;
   .nut-step {
     display: flex;
     height: 33.34%;
@@ -181,11 +186,11 @@
     display: inline-block;
     width: 1px;
     height: 100%;
-    background: #909ca4;
+    background: $steps-base-line-color;
   }
   .nut-step-main {
     display: inline-block;
-    padding-left: 6%;
+    padding: $steps-vertical-main-padding;
     text-align: left;
   }
   &.nut-steps-dot {

diff --git a/src/packages/__VUE/steps/demo.vue b/src/packages/__VUE/steps/demo.vue
@@ -167,6 +167,7 @@ export default createDemo({
   }
 }
 .steps-wrapper {
+  box-sizing: border-box;
   width: 100%;
   padding: 15px 0;
   background-color: #fff;

diff --git a/src/packages/__VUE/swiper/index.scss b/src/packages/__VUE/swiper/index.scss
@@ -20,7 +20,7 @@
     display: flex;
     position: absolute;
     left: 50%;
-    bottom: 12px;
+    bottom: $swiper-pagination-item-position;
     transform: translateX(-50%);
     i {
       width: $swiper-pagination-item-width;
@@ -34,7 +34,7 @@
   }
   &-pagination-vertical {
     top: 50%;
-    left: 12px;
+    left: $swiper-pagination-item-position;
     bottom: auto;
     flex-direction: column;
     -webkit-box-orient: vertical;