feat: Picker/DatePicker/Address/Sku/Countdown 等组件进行暗黑模式修改 (#1511)

* fix: marge主分支 (#1)

* doc: calendar 文档修改 (#1410)

* feat: 添加range组件、calendar组件在线文档

* fix: 文档调整

* fix: 重构calendar组件

* feat: 日历组件重构，文档修改，功能完善

* fix: 格式化

* fix: 代码格式化调整。

* fix: 去除无用代码

* fix: 文档调整

* fix:  文档调整

* fix: taro  demo 样式修改

* feat: range组件功能完善，新增 竖向操作，刻度展示。

* fix: 冲突解决

* feat: taro功能新增，兼容处理，文档修改

* feat: 添加range组件，jdt主题色

* fix: 修改组件初始化逻辑

* feat: 新增h5 日期多选功能

* feat: taro版本添加 日期多选功能

* fix: 修复多选，无法选中开头结尾日期问题

* fix: 文档修改，添加en-US 文档

* fix: 文档完善

Co-authored-by: lkjh3214 <13121007159@163.com>
Co-authored-by: love_forever <1039168735@qq.com>

* feat: imagepreview 部分功能补齐 (#1412)

* feat: image新增单元测试

* feat: ellipsis添加单元测试

* feat: imagepreview 添加

* fix: popop单元测试修改

* docs: 添加版本号

* feat: support highlight for JetBrains web-types

* test(imagepreview): edit snap

* fix(image): dts edit import

* docs(input): demo和md国际化文案修改 (#1414)

* fix: 抽离 input  ConfirmTextType

* feat: input、switch国际化

* feat: category、address国际化

* feat: taro升级maxlength问题

* fix: 国际化增加默认字段

* fix: blank

* fix: input组件国际化文案修改

* style: add ellipsis add sass

* docs(elevator): 增加吸顶props

* feat: input组件新增input slot插槽 (#1418)

* fix: 抽离 input  ConfirmTextType

* feat: input、switch国际化

* feat: category、address国际化

* feat: taro升级maxlength问题

* fix: 国际化增加默认字段

* fix: blank

* fix: input组件国际化文案修改

* feat: input组件新增input slot插槽

* release: v3.1.22

* Update README.md

add alipay img

* Update README.md

* docs: changelog 3.1.22

Co-authored-by: lkjh3214 <305624531@qq.com>
Co-authored-by: lkjh3214 <13121007159@163.com>
Co-authored-by: love_forever <1039168735@qq.com>
Co-authored-by: richard1015 <51844712@qq.com>
Co-authored-by: ailululu <912429321@qq.com>
Co-authored-by: snandy <zhouyrt@gmail.com>

* feat: imagepreview重复问题修改

* fix: picker 组件重影问题修改

* fix: 科技样式同步

* feat: picker组件惯性滚动优化

* feat: picker组件惯性滚动优化

* fix: issue问题修噶

* fix: datepicker国际化修噶

* fix: datePicker在year-month下,maxDate不生效问题解决

* fix: picker异步处理

* fix: picker taro

* fix: picker问题修改

* feat: address 新增插槽

* feat: address 新增插槽

* feat: 暗黑模式修改

* feat: comment暗黑模式

Co-authored-by: lkjh3214 <305624531@qq.com>
Co-authored-by: lkjh3214 <13121007159@163.com>
Co-authored-by: love_forever <1039168735@qq.com>
Co-authored-by: richard1015 <51844712@qq.com>
Co-authored-by: ailululu <912429321@qq.com>
Co-authored-by: snandy <zhouyrt@gmail.com>

src/packages/__VUE/address/index.scss

@@ -1,3 +1,45 @@
+.nut-theme-dark {
+  .nut-address {
+    &__header {
+      color: $dark-color;
+
+      &__title {
+        color: $dark-color;
+      }
+    }
+
+    .custom-address {
+      .region-tab {
+        color: $dark-color;
+      }
+      .region-con {
+        .region-group {
+          .region-item {
+            color: $dark-color;
+          }
+        }
+      }
+    }
+
+    .exist-address {
+      .exist-address-group {
+        .exist-ul {
+          .exist-item {
+            color: $dark-color;
+          }
+        }
+      }
+
+      .choose-other {
+        border-top: 1px solid $dark-background;
+      }
+    }
+    &-custom-buttom {
+      border-top: 1px solid $dark-background;
+    }
+  }
+}
+
 .nut-address {
   display: block;
   &__header {

src/packages/__VUE/audio/demo.vue

@@ -147,6 +147,19 @@ export default createDemo({
 });
 </script>
 <style lang="scss" scoped>
+.nut-theme-dark {
+  .demo {
+    .nut-voice {
+      background: $dark-color;
+      border: 1px solid $dark-color;
+      border-radius: 18px;
+    }
+
+    .nut-audio-operate {
+      color: $dark-color;
+    }
+  }
+}
 .demo {
   .nut-voice {
     display: flex;

src/packages/__VUE/audio/index.scss

@@ -1,3 +1,11 @@
+.nut-theme-dark {
+  .nut-audio-icon {
+    .nut-audio-icon-box {
+      background: $dark-color;
+    }
+  }
+}
+
 .nut-audio {
   padding: 0;
   .progress-wrapper {

src/packages/__VUE/comment/index.scss

@@ -1,3 +1,40 @@
+.nut-theme-dark {
+  .nut-comment {
+    &-header {
+      &__user {
+        &-name {
+          color: $dark-color;
+        }
+
+        &-default {
+          &-name {
+            color: $dark-color;
+          }
+        }
+      }
+    }
+    &__follow {
+      &-title {
+        color: $dark-color;
+      }
+    }
+    &-bottom {
+      &__cpx {
+        color: $dark-color;
+
+        &-item {
+          span {
+            color: $dark-color;
+          }
+        }
+      }
+    }
+
+    .nut-comment-shop {
+      border-top: 1px solid $dark-color;
+    }
+  }
+}
 .nut-comment {
   width: 100%;
   font-size: 12px;

src/packages/__VUE/image/index.scss

@@ -1,3 +1,15 @@
+.nut-theme-dark {
+  .nut-image {
+    .nut-img-loading {
+      background: $dark-background;
+    }
+
+    .nut-img-error {
+      background: $dark-background;
+    }
+  }
+}
+
 .nut-image {
   display: block;
   position: relative;

src/packages/__VUE/infiniteloading/demo.vue

@@ -157,6 +157,11 @@ export default createDemo({
 </script>
 
 <style lang="scss" scoped>
+.nut-theme-dark {
+  .infiniteLi {
+    color: $dark-color;
+  }
+}
 .infiniteUl {
   height: 300px;
   width: 100%;

src/packages/__VUE/infiniteloading/index.scss

@@ -1,3 +1,21 @@
+.nut-theme-dark {
+  .nut-infiniteloading {
+    .nut-infinite-top {
+      .top-text {
+        color: $dark-color;
+      }
+    }
+
+    .nut-infinite-bottom {
+      color: $dark-color;
+
+      .bottom-text {
+        color: $dark-color;
+      }
+    }
+  }
+}
+
 .nut-infiniteloading {
   display: block;
   width: 100%;

src/packages/__VUE/noticebar/demo.vue

@@ -4,50 +4,23 @@
     <nut-noticebar :text="translate('text')"></nut-noticebar>
 
     <h2>{{ translate('scrollable') }}</h2>
-    <nut-noticebar
-      :text="translate('textShort')"
-      :scrollable="true"
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
-    >
-    </nut-noticebar>
+    <nut-noticebar :text="translate('textShort')" :scrollable="true"> </nut-noticebar>
     <p />
-    <nut-noticebar
-      :text="translate('text')"
-      :scrollable="false"
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
-    ></nut-noticebar>
+    <nut-noticebar :text="translate('text')" :scrollable="false"></nut-noticebar>
 
     <h2>{{ translate('mode') }}</h2>
-    <nut-noticebar :closeMode="true" @click="hello" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`"
-      >{{ translate('text') }}
-    </nut-noticebar>
+    <nut-noticebar :closeMode="true" @click="hello">{{ translate('text') }} </nut-noticebar>
     <p />
-    <nut-noticebar
-      :closeMode="true"
-      right-icon="circle-close"
-      @click="hello"
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
-      >{{ translate('text') }}
-    </nut-noticebar>
+    <nut-noticebar :closeMode="true" right-icon="circle-close" @click="hello">{{ translate('text') }} </nut-noticebar>
     <p />
     <nut-noticebar
       left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
     >
       <a href="https://www.jd.com">{{ translate('jd') }}</a>
     </nut-noticebar>
 
     <h2>{{ translate('multiline') }}</h2>
-    <nut-noticebar
-      :text="translate('text')"
-      wrapable
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
-    ></nut-noticebar>
+    <nut-noticebar :text="translate('text')" wrapable></nut-noticebar>
 
     <h2>{{ translate('vertical') }}</h2>
     <div class="interstroll-list">
@@ -58,8 +31,6 @@
         :standTime="1000"
         @click="go"
         :closeMode="true"
-        :background="`rgba(251, 248, 220, 1)`"
-        :color="`#D9500B`"
       ></nut-noticebar>
     </div>
 
@@ -71,22 +42,11 @@
         :speed="10"
         :standTime="2000"
         :complexAm="true"
-        :background="`rgba(251, 248, 220, 1)`"
-        :color="`#D9500B`"
       ></nut-noticebar>
     </div>
     <h2>{{ translate('customAm') }}</h2>
     <div class="interstroll-list">
-      <nut-noticebar
-        direction="vertical"
-        :height="50"
-        :speed="10"
-        :standTime="1000"
-        :list="[]"
-        @close="go"
-        :background="`rgba(251, 248, 220, 1)`"
-        :color="`#D9500B`"
-      >
+      <nut-noticebar direction="vertical" :height="50" :speed="10" :standTime="1000" :list="[]" @close="go">
         <div
           class="custom-item"
           :data-index="index"
@@ -100,14 +60,7 @@
 
     <h2>{{ translate('customRightIcon') }}</h2>
     <div class="interstroll-list">
-      <nut-noticebar
-        direction="vertical"
-        :list="horseLamp1"
-        :speed="10"
-        :standTime="1000"
-        :background="`rgba(251, 248, 220, 1)`"
-        :color="`#D9500B`"
-      >
+      <nut-noticebar direction="vertical" :list="horseLamp1" :speed="10" :standTime="1000">
         <template v-slot:rightIcon>
           <nut-icon name="fabulous" color="#f0250f"> </nut-icon>
         </template>
@@ -183,6 +136,15 @@ export default createDemo({
 </script>
 
 <style lang="scss" scoped>
+.nut-theme-dark {
+  .custom-item {
+    color: $dark-color;
+  }
+
+  a {
+    color: $dark-color;
+  }
+}
 .demo {
   padding-bottom: 30px !important;
 

src/packages/__VUE/noticebar/index.scss

@@ -1,3 +1,15 @@
+.nut-theme-dark {
+  .nut-noticebar-page {
+    background: $dark-background2;
+    color: $dark-color;
+  }
+
+  .nut-noticebar-vertical {
+    .horseLamp_list_item {
+      color: $dark-color;
+    }
+  }
+}
 .nut-noticebar-page {
   // width: 100%;
   display: flex;

src/packages/__VUE/picker/index.scss

@@ -1,3 +1,36 @@
+.nut-theme-dark {
+  .nut-picker {
+    &__title {
+      color: $dark-color;
+    }
+
+    &-roller {
+      &-item {
+        color: $dark-color;
+      }
+
+      &-item-tile {
+        color: $dark-color;
+      }
+    }
+
+    &-roller-mask {
+      background-image: linear-gradient(180deg, rgba(27, 27, 27, 0.9), rgba(27, 27, 27, 0.4)),
+        linear-gradient(0deg, rgba(27, 27, 27, 0.9), rgba(27, 27, 27, 0.4));
+      background-repeat: no-repeat;
+      background-position: top, bottom;
+      background-size: 100% 108px;
+      z-index: 1;
+    }
+
+    &-content {
+      color: $dark-color;
+    }
+    &-item {
+      color: $dark-color;
+    }
+  }
+}
 .nut-picker {
   // 标题
   &__bar {

src/packages/__VUE/sku/index.scss

@@ -1,3 +1,43 @@
+.nut-theme-dark {
+  .nut-sku {
+    background: $dark-background;
+
+    &-select {
+      &-item {
+        &-title {
+          color: $dark-color;
+        }
+        &-skus {
+          &-sku {
+            color: $dark-color;
+            background: $dark-background2;
+          }
+        }
+      }
+    }
+
+    &-stepper {
+      &-title {
+        color: $dark-color;
+      }
+      &-limit {
+        color: $dark-color;
+      }
+      &-count {
+        &-lowestBuy {
+          color: $primary-color;
+        }
+      }
+    }
+
+    &-operate {
+      &-btn {
+        background: $dark-background2;
+      }
+    }
+  }
+}
+
 .nut-sku {
   height: 100%;
   display: flex;

src/sites/mobile-taro/vue/project.config.json

@@ -39,7 +39,8 @@
     "minifyWXML": true,
     "showES6CompileOption": false,
     "useCompilerPlugins": false,
-    "ignoreUploadUnusedFiles": true
+    "ignoreUploadUnusedFiles": true,
+    "useStaticServer": true
   },
   "compileType": "miniprogram",
   "simulatorType": "wechat",