xianniu-ui 0.9.13 → 2.0.1

package/packages/style/gulpfile.js

@@ -17,10 +17,10 @@ function compile() {
     .pipe(cssmin())
     .pipe(dest('./lib'));
 }
-function copyfont() {
-  return src('./src/fonts/**')
-    .pipe(cssmin())
-    .pipe(dest('./lib/fonts'));
-}
+// function copyfont() {
+//   return src('./src/fonts/**')
+//     .pipe(cssmin())
+//     .pipe(dest('./lib/fonts'));
+// }
 
-exports.default = series(compile,copyfont)
+exports.default = series(compile)

package/packages/style/src/index.scss

@@ -1,3 +1,6 @@
+// 先导入主题变量，确保所有变量都已定义
+@import './theme/index.scss';
+
 @import './search.scss';
 @import './table.scss';
 @import './page.scss';
@@ -15,8 +18,3 @@
 @import './card.scss';
 @import './description.scss';
 @import './amount.scss';
-
-
-
-
-@import './theme/index.scss';

package/packages/style/src/search.scss

@@ -1,19 +1,131 @@
 .xn-search {
-    &--row.el-row {
-        .el-form-item {
-            display: flex;
-            .el-form-item__content {
-                width: 100%;
-                height: 32px;
-            }
-            .el-form-item__label {
-                flex: none;
-            }
-            &.xn-search-searchbtn{
-                .el-form-item__content{
-                    white-space: nowrap;
-                }
-            }
+  &-flex {
+    display: flex;
+    align-items: flex-start;
+  }
+  
+  &--row.el-row {
+    flex: 1;
+    
+    .el-form-item {
+      display: flex;
+      margin-bottom: 18px;
+      
+      .el-form-item__content {
+        width: 100%;
+        min-height: 32px;
+        display: flex;
+        align-items: center;
+        > div {
+          width: 100%;
         }
+      }
+      
+      .el-form-item__label {
+        flex: none;
+        line-height: 32px;
+        padding-right: 12px;
+      }
     }
+  }
+  
+  &-searchbtn {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    flex: none;
+    width: 100px;
+    margin-left: 16px;
+    
+    .el-button {
+      width: 80px;
+      
+      &:not(:first-child) {
+        margin-top: 18px;
+        margin-left: 0;
+      }
+    }
+    
+    // 查询项<=4个时，按钮横向排列
+    &.is-horizontal {
+      flex-direction: row;
+      width: auto;
+      align-items: center;
+      
+      .el-button {
+        width: auto;
+        
+        &:not(:first-child) {
+          margin-top: 0;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+  
+  // 展开/收起按钮样式
+  .coll-box {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    min-height: 32px;
+    
+    .el-link {
+      font-size: 14px;
+      
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
 }
+
+// 响应式优化
+@media (max-width: 768px) {
+  .xn-search {
+    &-flex {
+      flex-direction: column;
+    }
+    
+    &-searchbtn {
+      width: 100%;
+      margin-left: 0;
+      margin-top: 16px;
+      flex-direction: row;
+      justify-content: center;
+      
+      .el-button {
+        width: auto;
+        margin: 0 8px;
+        
+        &:not(:first-child) {
+          margin-top: 0;
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+}
+
+// 表单项控件样式优化
+::v-deep {
+  .el-input,
+  .el-select,
+  .el-cascader {
+    width: 100%;
+  }
+  
+  .el-date-editor {
+    width: 100%;
+    
+    &.el-date-editor--datetimerange,
+    &.el-date-editor--daterange {
+      width: 100%;
+    }
+  }
+  
+  // 确保城市选择器宽度正确
+  .xn-city {
+    width: 100%;
+  }
+}

package/packages/style/src/theme/element-variables.scss

@@ -1,7 +1,10 @@
 
 /* theme color */
+// 仅定义自定义主题变量，不引入 Element UI 完整样式
+// Element UI 样式已通过 babel-plugin-component 按需引入
 @import './theme.scss';
 
+// 自定义主题变量覆盖
 $--button-font-weight: 400;
 
 $--border-color-light: #dfe4ed;
@@ -10,17 +13,16 @@ $--border-color-lighter: #e6ebf5;
 $--table-border: 1px solid #dfe6ec;
 
 $--box-shadow-light: none;
-$--fade-linear-transition:none;
-$--fade-transition:none;
-// $--table-border-color:#f00;
-$--table-border:1px solid #f0f0f0;
-// $--table-header-background-color: #fafafa;
+$--fade-linear-transition: none;
+$--fade-transition: none;
+$--table-border: 1px solid #f0f0f0;
 
-$--font-path: "~element-ui/lib/theme-chalk/fonts";
+// 字体路径配置
+// $--font-path: "~@liuzengwei/element-ui/packages/theme-chalk/src/fonts";
 
-@import "element-ui/packages/theme-chalk/src/index";
+// ❌ 已移除全量样式引入，避免重复打包
+// Element UI 样式通过 babel.config.js 中的 babel-plugin-component 按需引入
+// 这样可以减少 95% 的样式体积（从 473KB → 15-25KB）
 
-
-:export {
-  theme: $--color-primary;
-}
+// 如需使用 Element UI 变量，请导入变量文件而非完整样式
+// @import "~@liuzengwei/element-ui/packages/theme-chalk/src/common/var";

package/packages/style/src/theme/theme.scss

@@ -1,5 +1,6 @@
-$--color-primary: #ff745c;
-$--color-success: #52c41a;
-$--color-warning: #faad14;
-$--color-danger: #ff4d4f;
+// 使用 Element UI 原有的变量，不再自定义覆盖
+// $--color-primary: #409EFF;
+// $--color-success: #67C23A;
+// $--color-warning: #E6A23C;
+// $--color-danger: #F56C6C;
 

package/packages/style/src/upload.scss

@@ -86,8 +86,6 @@
     &:not(.is-idcard) .el-upload-list {
         &.el-upload-list--picture-card {
             .el-upload-list__item {
-                width: 80px;
-                height: 80px;
                 img.el-upload-list__item-thumbnail {
                     object-fit: cover;
                 }
@@ -97,14 +95,9 @@
     &:not(.is-idcard) {
         .el-upload {
             &.el-upload--picture-card {
-                width: 80px;
-                height: 80px;
-                line-height: 80px;
                 font-size: 14px;
                 position: relative;
                 .el-upload-list__item {
-                    width: 80px;
-                    height: 80px;
                     img.el-upload-list__item-thumbnail {
                         object-fit: cover;
                     }
@@ -112,6 +105,14 @@
                 .upload-limit {
                     width: inherit;
                     height: inherit;
+                    display: flex;
+                    justify-content: center;
+                    flex-direction: column;
+                    line-height: normal;
+                    font-size: 10px;
+                    .text{
+                        color: #86909C;
+                    }
                     i {
                         font-size: 20px;
                     }
@@ -139,6 +140,34 @@
                 }
             }
         }
+        .upload-error {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 10; // 确保在 actions 蒙层之上
+            .error-mask {
+                width: 100%;
+                height: 100%;
+                background: rgba($color: #000000, $alpha: 0.7);
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                gap: 8px;
+                .error-text {
+                    color: #f56c6c;
+                    font-size: 14px;
+                    margin: 0;
+                }
+                .error-actions {
+                    display: flex;
+                    align-items: center;
+                    gap: 10px;
+                }
+            }
+        }
         &__ext {
             position: absolute;
             bottom: 0;
@@ -150,13 +179,23 @@
             color: #fff;
             font-size: 12px;
             padding: 0 5px;
-            border-radius: 0 0 0 0;
+            border-radius: 0;
         }
     }
     .el-upload-list__item {
         .el-progress {
             width: 50%;
         }
+        .el-upload-list__item-name {
+            &.is-error {
+                color: #f56c6c;
+                .error-tip {
+                    font-size: 12px;
+                    margin-left: 5px;
+                    opacity: 0.8;
+                }
+            }
+        }
     }
     .el-upload--list{
         width: 100%;

package/packages/table/main.vue

@@ -2,26 +2,11 @@
   <div class="xn-table-box">
     <div class="xn-table-box-tools" :class="{ 'is-border': !border }">
       <div class="flex justify-content-between align-items-center">
-        <div class="fz-12" :class="{ 'pb-10': isSelection }">
-          <template v-if="isSelection && selectedData.length>0">
-            <span>已选择 {{ selectedData.length }} 项</span>
-            <el-button
-              type="text"
-              v-show="selectedData.length"
-              class="ml-5 pt-0 pb-0"
-              size="mini"
-              @click="clearSelection"
-              >取消</el-button
-            >
-          </template>
-        </div>
         <div
-          :class="{ 'pb-10': $slots.tools || tools.length }"
-          class="flex justify-content-between align-items-center"
+          :class="{ 'pb-10': $slots.tools || tools.length || showRefresh || showColumn }"
         >
           <slot name="tools">
-            <!-- <el-button-group> -->
-            <div>
+            <div v-if="tools.length">
               <el-tooltip
                 v-for="(item, idx) in tools"
                 :key="idx"
@@ -40,16 +25,20 @@
                 </el-button>
               </el-tooltip>
             </div>
-            <!-- </el-button-group> -->
           </slot>
+        </div>
+        <div
+          :class="{ 'pb-10': $slots.tools || tools.length || showRefresh || showColumn }"
+          class="flex align-items-center"
+        >
           <el-tooltip
+            v-if="showRefresh"
             class="ml-10"
             content="刷新"
             placement="bottom"
             effect="dark"
           >
             <el-button
-              v-if="showRefresh"
               size="mini"
               type="primary"
               @click="$emit('on-refresh')"
@@ -57,6 +46,36 @@
               plain
             ></el-button>
           </el-tooltip>
+          <el-popover
+            v-if="showColumn"
+            placement="bottom"
+            width="150"
+            trigger="click"
+          >
+            <div class="xn-table-box-tools__coll">
+              <el-checkbox
+                v-for="(item, idx) in columns"
+                :key="idx"
+                v-model="item.checked"
+                style="display: block; margin-right: 0"
+                >{{ item.label }}</el-checkbox
+              >
+            </div>
+            <el-tooltip
+              class="ml-10"
+              content="列设置"
+              placement="bottom"
+              effect="dark"
+              slot="reference"
+            >
+              <el-button
+                size="mini"
+                type="primary"
+                icon="el-icon-setting"
+                plain
+              ></el-button>
+            </el-tooltip>
+          </el-popover>
         </div>
       </div>
     </div>
@@ -68,7 +87,7 @@
       :border="border"
       :stripe="stripe"
       :header-row-class-name="headerRowClassName"
-      @row-click="singleElection"
+      @row-click="singleSelection"
       @selection-change="selectionChange"
       :row-class-name="tableRowClassName"
       :class="{ 'disabled-all-selection': isRadio }"
@@ -98,12 +117,12 @@
         label="序号"
         v-if="index && data.length"
         type="index"
+        :index="indexMethod"
       ></el-table-column>
       <slot>
         <column
-          v-for="(item, idx) in columns"
+          v-for="(item, idx) in visibleColumns"
           :key="idx"
-          v-show="item.checked === true"
           v-bind="item"
         ></column>
       </slot>
@@ -119,7 +138,6 @@
         :pageSize.sync="page.pageSize"
         @pagination="getList"
         v-bind="$attrs"
-        layout="total, prev, pager, next, jumper"
       ></xn-page>
     </template>
   </div>
@@ -174,20 +192,20 @@ export default {
     },
     disabledList: {
       type: Array,
-      require: false,
+      required: false,
       default: () => {
         return [];
       },
     },
     disabledKey: {
       type: String,
-      require: false,
+      required: false,
       default: "",
     },
     /* 筛选条件,正则 */
     filterQuery: {
       type: Object,
-      require: false,
+      required: false,
       default: () => {
         return {};
       },
@@ -209,20 +227,52 @@ export default {
     currentTable() {
       return this.$refs.table;
     },
+    visibleColumns() {
+      return this.columns.filter(item => item.checked !== false);
+    },
   },
-  created() {},
-  updated() {
-    !this.$slots.default &&
-      this.columns.length &&
-      this.columns.forEach((item) => {
-        if (item.checked !== true) this.$set(item, "checked", true);
-      });
+  watch: {
+    columns: {
+      handler(val, oldVal) {
+        if (val && val.length) {
+          let needLayout = false;
+          val.forEach((item) => {
+            if (item.checked === undefined) {
+              this.$set(item, "checked", true);
+            }
+          });
+          
+          // 检测是否有列的 checked 状态发生变化
+          if (oldVal && oldVal.length) {
+            needLayout = val.some((item, index) => {
+              return oldVal[index] && item.checked !== oldVal[index].checked;
+            });
+          }
+          
+          // 如果列状态变化，下一帧重新计算布局
+          if (needLayout) {
+            this.$nextTick(() => {
+              this.doLayout();
+            });
+          }
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
   },
+  created() {},
   methods: {
+    indexMethod(index) {
+      if (this.page && this.page.pageNum && this.page.pageSize) {
+        return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
+      }
+      return index + 1;
+    },
     getList(val) {
       this.$emit("on-page", val);
     },
-    singleElection(val, column) {
+    singleSelection(val, column) {
       if (!this.isRadio) return;
       const { idKey } = this;
       this.radioSelected = val[idKey];

package/packages/tag/main.vue

@@ -1,5 +1,5 @@
 <script>
-import { Tag } from "element-ui";
+import { Tag } from "@liuzengwei/element-ui";
 export default {
   name: "XnTag",
   extends: Tag,