feat: piui 代码精简，优化

common.scss

@@ -8,43 +8,43 @@
 
 // 主要颜色
 .pi-primary {
-  color: $pi-primary-color;
+  color: $pi-primary-color !important;
 }
 // 次级颜色
 .pi-secondary {
-  color: $pi-secondary-color;
+  color: $pi-secondary-color !important;
 }
 // 第三级颜色
 .pi-tertiary {
-  color: $pi-tertiary-color;
+  color: $pi-tertiary-color !important;
 }
 // 第四级颜色
 .pi-fourth {
-  color: $pi-fourth-color;
+  color: $pi-fourth-color !important;
 }
 // 第五级颜色
 .pi-fifth {
-  color: $pi-fifth-color;
+  color: $pi-fifth-color !important;
 }
 // 黑色
 .pi-black {
-  color: #000000;
+  color: #000000 !important;
 }
 // 白色
 .pi-white {
-  color: #ffffff;
+  color: #ffffff !important;
 }
 // 灰色
 .pi-gray {
-  color: #666666;
+  color: #666666 !important;
 }
 // 灰色禁用
 .pi-gray-disable {
-  color: #cccccc;
+  color: #cccccc !important;
 }
 // 浅灰色
 .pi-light-gray {
-  color: #999999;
+  color: #999999 !important;
 }
 
 /**
@@ -684,7 +684,7 @@
     @extend .pi-bg-white;
 
     transition: all $pi-animation-duration ease-in-out;
-    // 表单label（如果需要固定宽度对齐，请使用pi-width 配合text-align）
+    // 表单label（如果需要固定宽度对齐，请使用pi-w 配合text-align）
     .label {
       flex-shrink: 0; // 默认不收缩
       height: $pi-form-item-height;
@@ -952,7 +952,7 @@ button {
 
 // 底部按钮
 .pi-bottom-btns {
-  @extend .pi-width-100P;
+  @extend .pi-w-100P;
   @extend .pi-align-center;
 
   background-color: #ffffff;
@@ -985,7 +985,7 @@ button {
 }
 
 /**
- * 预设常用样式 只取双数
+ * 预设常用样式 只取双数 ，这里循环次数太多，只使用缩写模式
  * -------------------------------------------------------------------------------------------------
  */
 @for $i from 1 through 100 {
@@ -1041,10 +1041,10 @@ button {
     }
 
     // width & height
-    .pi-width-#{$i} {
+    .pi-w-#{$i} {
       width: #{$i}rpx;
     }
-    .pi-height-#{$i} {
+    .pi-h-#{$i} {
       height: #{$i}rpx;
     }
 
@@ -1064,25 +1064,25 @@ button {
  * 常用宽高定义
  * -------------------------------------------------------------------------------------------------
  */
-.pi-width-100vw {
+.pi-w-100vw {
   width: 100vw;
 }
-.pi-width-100P {
+.pi-w-100P {
   width: 100%;
 }
-.pi-height-100vh {
+.pi-h-100vh {
   height: 100vh;
 }
-.pi-height-100P {
+.pi-h-100P {
   height: 100%;
 }
 
 // 遮罩层 pi-mask-1 代表的是 0.1 的透明度
 @for $i from 1 through 10 {
   .pi-mask-#{$i} {
     @extend .pi-fixed-top;
-    @extend .pi-width-100P;
-    @extend .pi-height-100P;
+    @extend .pi-w-100P;
+    @extend .pi-h-100P;
 
     z-index: 11;
     background: rgba(0, 0, 0, $i/10);

components/pi-search/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <view>
+    asdf
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'PiSearch'
+}
+</script>
+
+<style></style>

config/search.js

@@ -0,0 +1,21 @@
+export default {
+  shape: 'round', // 搜索框形状 round || square
+  background: '#f2f2f2', // 搜索框背景颜色（默认#f2f2f2）
+  clearable: true, // 是否启用清除控件（默认true）
+  clearTrigger: 'always', // 显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示
+  focus: false, // 是否自动获得焦点（默认false）
+  placeholder: '', // 占位提示文字
+  placeholderStyle: {}, // 指定 placeholder 的样式
+  maxlength: null, // 输入的最大字符数
+  showAction: true, // 是否在搜索框右侧显示文字
+  actionText: '取消', // 右侧显示文字
+  actionStyle: {}, // 右侧显示文字样式
+  inputAlign: 'left', // 'left' || 'center' || 'right'
+  searchLabel: '', // 搜索框左侧文本
+  searchIcon: 'search', // 输入框左边的图标，可以为icon名称或图片路径
+  searchIconColor: '#333333', // 输入框左边的图标颜色
+  disabled: false, // 是否禁用输入框
+  value: '', // 输入框初始值
+  height: '88rpx', // 输入框高度
+  color: '#333333' // 输入框颜色
+}

icon/icon.scss

@@ -10,6 +10,7 @@
   font-family: 'pi-icon' !important;
   font-size: 16px;
   font-style: normal;
+  color: $pi-iconfont-color;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

variable.scss

@@ -1,68 +1,33 @@
-/**
- * 基础设置
- * -------------------------------------------------------------------------------------------------
- */
+// 基础设置
 $pi-font-size: 28rpx !default; // 文字大小
-$pi-fonticon-color: #999999 !default; // fonticon 图标颜色
+$pi-iconfont-color: #999999 !default; // iconfont 图标颜色
 $pi-font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei',
   '微软雅黑', Arial, sans-serif !default; // 字体样式
 $pi-background-color: #ffffff !default; // 背景颜色
 $pi-line-color: #d6e4ef !default; // 线颜色
 $pi-placeholder-color: #999999 !default; // placeholder颜色
 $pi-content-padding: 24rpx !default; // pi-content内容区域默认padding
-
-/**
- * 动画
- * -------------------------------------------------------------------------------------------------
- */
+// 动画
 $pi-animation-duration: 0.3s !default; // 动画执行时长
-
-/**
- * 颜色
- * -------------------------------------------------------------------------------------------------
- */
+// 颜色
 $pi-font-color: #333333 !default; // 文字颜色
 $pi-primary-color: #ff6a00 !default; // 主要颜色
 $pi-secondary-color: #6c44a1 !default; // 次级颜色
 $pi-tertiary-color: #00a8a4 !default; // 第三级颜色
 $pi-fourth-color: #12bc83 !default; // 第四级颜色
 $pi-fifth-color: #fcf2f4 !default; // 第五级颜色
-
-/**
- * 表单
- * -------------------------------------------------------------------------------------------------
- */
+// 表单
 $pi-form-font-size: 32rpx !default; // 表单文字大小
 $pi-form-font-weight: 400 !default; // 表单文字大小
 $pi-form-label-color: #333333 !default; // 表单label颜色
 $pi-form-item-height: 88rpx !default; // 表单高度
 $pi-form-input-color: #333333 !default; // 表单输入框颜色
 $pi-form-required-color: #c0282f !default; // 表单必选提示颜色
-
-/**
- * 状态栏
- * -------------------------------------------------------------------------------------------------
- */
-$pi-safearea-bg: transparent !default; // iphonex底部安全区域背景颜色
-
-// 顶部导航
-$pi-navi-z-index: 10 !default;
-$pi-navi-icon-size: 20px !default;
-$pi-navi-height: 44px !default;
-$pi-navi-padding-lr: 16px !default; // 导航左右的padding
-
+// iphonex底部安全区域背景颜色
+$pi-safearea-bg: transparent !default;
 $pi-navi-icon-weight: 500 !default;
 $pi-navi-icon-color: #333333 !default;
 $pi-navi-icon-border-height: 32px !default;
-
-// 顶部导航-微信平台
-$pi-navi-icon-size-MP-WEIXIN: 20px !default;
-$pi-navi-icon-weight-MP-WEIXIN: 800 !default;
-$pi-navi-icon-color-MP-WEIXIN: #000000 !default;
-
-$pi-navi-title-size: 32rpx !default;
-$pi-navi-background: transparent !default;
-
 // 按钮
 $pi-button-fontsize: 32rpx !default;
 $pi-button-height: 98rpx !default;