✨(button): 优化 index.less

package/component/src/component/button/index.less

@@ -33,13 +33,6 @@
   cursor: pointer;
 }
 
-.layui-btn:not(.layui-btn-disabled){
-  :hover,
-  :active {
-    color: #333;
-  }
-}
-
 .layui-btn-primary {
   color: var(--button-primary-text-color);
   background-color: var(--button-primary-background-color);
@@ -64,12 +57,17 @@
   border-color: var(--button-danger-border-color);
 }
 
-.layui-btn-primary:hover,
+.layui-btn:hover {
-.layui-btn-normal:hover,
+  color: #333;
+}
+
 .layui-btn-warm:hover,
+.layui-btn-normal:hover,
+.layui-btn-primary:hover,
 .layui-btn-danger:hover {
   opacity: 0.8;
   filter: alpha(opacity=80);
+  color: white;
 }
 
 .layui-btn-lg {

package/component/src/component/table/TableRow.vue

@@ -84,7 +84,9 @@ const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
 
 const isExpand: WritableComputedRef<any> = computed({
   get() {
-    return tableExpandAll.value ? true : tableExpandKeys.value.includes(props.data[props.id]);
+    return tableExpandAll.value
+      ? true
+      : tableExpandKeys.value.includes(props.data[props.id]);
   },
   set(val) {
     let newTableExpandKeys = [...tableExpandKeys.value];

package/component/src/component/table/index.vue

@@ -65,7 +65,7 @@ const props = withDefaults(defineProps<LayTableProps>(), {
   rowStyle: "",
   cellStyle: "",
   defaultExpandAll: false,
-  spanMethod: () => { },
+  spanMethod: () => {},
   expandKeys: () => [],
 });
 
@@ -164,11 +164,13 @@ watch(
   { deep: true, immediate: true }
 );
 
-watch(tableExpandKeys, () => {
+watch(
-  emit("update:expandKeys", tableExpandKeys.value);
+  tableExpandKeys,
-},
+  () => {
+    emit("update:expandKeys", tableExpandKeys.value);
+  },
   { deep: true, immediate: true }
-)
+);
 
 const change = function (page: any) {
   emit("change", page);
@@ -207,7 +209,7 @@ const exportData = () => {
           throw new Error("exception");
         }
       });
-    } catch (e) { }
+    } catch (e) {}
   });
   tableDataSource.value.forEach((item) => {
     let obj: any = [];
@@ -439,15 +441,31 @@ const renderTotalRowCell = (column: any) => {
             </div>
             <template #content>
               <div class="layui-table-tool-checkbox">
-                <lay-checkbox v-for="column in columns" v-model="tableColumnKeys" skin="primary" :key="column.key"
+                <lay-checkbox
-                  :value="column.key">{{ column.title }}</lay-checkbox>
+                  v-for="column in columns"
+                  v-model="tableColumnKeys"
+                  skin="primary"
+                  :key="column.key"
+                  :value="column.key"
+                  >{{ column.title }}</lay-checkbox
+                >
               </div>
             </template>
           </lay-dropdown>
-          <div class="layui-inline" title="导出" lay-event="LAYTABLE_PRINT" @click="exportData()">
+          <div
+            class="layui-inline"
+            title="导出"
+            lay-event="LAYTABLE_PRINT"
+            @click="exportData()"
+          >
             <i class="layui-icon layui-icon-export"></i>
           </div>
-          <div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT" @click="print()">
+          <div
+            class="layui-inline"
+            title="打印"
+            lay-event="LAYTABLE_PRINT"
+            @click="print()"
+          >
             <i class="layui-icon layui-icon-print"></i>
           </div>
         </div>
@@ -455,40 +473,59 @@ const renderTotalRowCell = (column: any) => {
 
       <div class="layui-table-box">
         <!-- 表头 -->
-        <div class="layui-table-header" :style="[{ 'padding-right': `${scrollWidthCell}px` }]">
+        <div
+          class="layui-table-header"
+          :style="[{ 'padding-right': `${scrollWidthCell}px` }]"
+        >
           <div class="layui-table-header-wrapper" ref="tableHeader">
             <table class="layui-table" :lay-size="size" :lay-skin="skin">
               <colgroup>
                 <template v-for="column in columns" :key="column">
                   <template v-if="tableColumnKeys.includes(column.key)">
-                    <col :width="column.width" :style="{
+                    <col
-                      minWidth: column.minWidth ? column.minWidth : '50px',
+                      :width="column.width"
-                    }" />
+                      :style="{
+                        minWidth: column.minWidth ? column.minWidth : '50px',
+                      }"
+                    />
                   </template>
                 </template>
               </colgroup>
               <thead>
                 <tr>
-                  <template v-for="(column, columnIndex) in columns" :key="column">
+                  <template
-                    <th v-if="tableColumnKeys.includes(column.key)" class="layui-table-cell" :class="[
+                    v-for="(column, columnIndex) in columns"
-                      renderFixedClassName(column, columnIndex),
+                    :key="column"
-                      column.fixed ? `layui-table-fixed-${column.fixed}` : '',
+                  >
-                      column.type == 'checkbox'
+                    <th
-                        ? 'layui-table-cell-checkbox'
+                      v-if="tableColumnKeys.includes(column.key)"
-                        : '',
+                      class="layui-table-cell"
-                      column.type == 'radio' ? 'layui-table-cell-radio' : '',
+                      :class="[
-                      column.type == 'number'
+                        renderFixedClassName(column, columnIndex),
-                        ? 'layui-table-cell-number'
+                        column.fixed ? `layui-table-fixed-${column.fixed}` : '',
-                        : '',
+                        column.type == 'checkbox'
-                    ]" :style="[
+                          ? 'layui-table-cell-checkbox'
-  {
+                          : '',
-    textAlign: column.align,
+                        column.type == 'radio' ? 'layui-table-cell-radio' : '',
-  },
+                        column.type == 'number'
-  renderFixedStyle(column, columnIndex),
+                          ? 'layui-table-cell-number'
-]">
+                          : '',
+                      ]"
+                      :style="[
+                        {
+                          textAlign: column.align,
+                        },
+                        renderFixedStyle(column, columnIndex),
+                      ]"
+                    >
                       <template v-if="column.type == 'checkbox'">
-                        <lay-checkbox v-model="hasChecked" :is-indeterminate="!allChecked" skin="primary" value="all"
+                        <lay-checkbox
-                          @change="changeAll" />
+                          v-model="hasChecked"
+                          :is-indeterminate="!allChecked"
+                          skin="primary"
+                          value="all"
+                          @change="changeAll"
+                        />
                       </template>
                       <template v-else>
                         <span>
@@ -500,11 +537,21 @@ const renderTotalRowCell = (column: any) => {
                           </template>
                         </span>
                         <!-- 插槽 -->
-                        <span v-if="column.sort" class="layui-table-sort layui-inline" lay-sort>
+                        <span
-                          <i @click.stop="sortTable($event, column.key, 'asc')" class="layui-edge layui-table-sort-asc"
+                          v-if="column.sort"
-                            title="升序"></i>
+                          class="layui-table-sort layui-inline"
-                          <i @click.stop="sortTable($event, column.key, 'desc')"
+                          lay-sort
-                            class="layui-edge layui-table-sort-desc" title="降序"></i>
+                        >
+                          <i
+                            @click.stop="sortTable($event, column.key, 'asc')"
+                            class="layui-edge layui-table-sort-asc"
+                            title="升序"
+                          ></i>
+                          <i
+                            @click.stop="sortTable($event, column.key, 'desc')"
+                            class="layui-edge layui-table-sort-desc"
+                            title="降序"
+                          ></i>
                         </span>
                       </template>
                     </th>
@@ -515,29 +562,59 @@ const renderTotalRowCell = (column: any) => {
           </div>
         </div>
         <!-- 表身 -->
-        <div class="layui-table-body layui-table-main" :style="{ height: height, maxHeight: maxHeight }"
+        <div
-          ref="tableBody">
+          class="layui-table-body layui-table-main"
-          <table v-if="tableDataSource.length > 0" class="layui-table" :class="{ 'layui-table-even': props.even }"
+          :style="{ height: height, maxHeight: maxHeight }"
-            :lay-size="size" :lay-skin="skin">
+          ref="tableBody"
+        >
+          <table
+            v-if="tableDataSource.length > 0"
+            class="layui-table"
+            :class="{ 'layui-table-even': props.even }"
+            :lay-size="size"
+            :lay-skin="skin"
+          >
             <colgroup>
-              <template v-for="(column, columnIndex) in columns" :key="columnIndex">
+              <template
+                v-for="(column, columnIndex) in columns"
+                :key="columnIndex"
+              >
                 <template v-if="tableColumnKeys.includes(column.key)">
-                  <col :width="column.width" :style="{
+                  <col
-                    minWidth: column.minWidth ? column.minWidth : '50px',
+                    :width="column.width"
-                  }" />
+                    :style="{
+                      minWidth: column.minWidth ? column.minWidth : '50px',
+                    }"
+                  />
                 </template>
               </template>
             </colgroup>
             <tbody>
               <!-- 渲染 -->
               <template v-for="(data, index) in tableDataSource" :key="index">
-                <table-row :id="id" :index="index" :data="data" :columns="columns" :indent-size="indentSize"
+                <table-row
-                  :currentIndentSize="currentIndentSize" :tableColumnKeys="tableColumnKeys"
+                  :id="id"
-                  :expandSpace="childrenExpandSpace" :expandIndex="expandIndex" :cellStyle="cellStyle"
+                  :index="index"
-                  :cellClassName="cellClassName" :rowStyle="rowStyle" :rowClassName="rowClassName"
+                  :data="data"
-                  :spanMethod="spanMethod" :defaultExpandAll="defaultExpandAll" @row="rowClick"
+                  :columns="columns"
-                  @row-double="rowDoubleClick" @row-contextmenu="rowContextmenu" v-model:expandKeys="tableExpandKeys"
+                  :indent-size="indentSize"
-                  v-model:selectedKeys="tableSelectedKeys" v-model:selectedKey="tableSelectedKey">
+                  :currentIndentSize="currentIndentSize"
+                  :tableColumnKeys="tableColumnKeys"
+                  :expandSpace="childrenExpandSpace"
+                  :expandIndex="expandIndex"
+                  :cellStyle="cellStyle"
+                  :cellClassName="cellClassName"
+                  :rowStyle="rowStyle"
+                  :rowClassName="rowClassName"
+                  :spanMethod="spanMethod"
+                  :defaultExpandAll="defaultExpandAll"
+                  @row="rowClick"
+                  @row-double="rowDoubleClick"
+                  @row-contextmenu="rowContextmenu"
+                  v-model:expandKeys="tableExpandKeys"
+                  v-model:selectedKeys="tableSelectedKeys"
+                  v-model:selectedKey="tableSelectedKey"
+                >
                   <template v-for="name in slotsData" #[name]="{ data }">
                     <slot :name="name" :data="data"></slot>
                   </template>
@@ -547,7 +624,10 @@ const renderTotalRowCell = (column: any) => {
                 </table-row>
               </template>
               <tr v-if="hasTotalRow" class="layui-table-total">
-                <template v-for="(column, columnIndex) in columns" :key="columnIndex">
+                <template
+                  v-for="(column, columnIndex) in columns"
+                  :key="columnIndex"
+                >
                   <template v-if="tableColumnKeys.includes(column.key)">
                     <td>{{ renderTotalRowCell(column) }}</td>
                   </template>
@@ -559,8 +639,15 @@ const renderTotalRowCell = (column: any) => {
         </div>
       </div>
       <div v-if="page" class="layui-table-page">
-        <lay-page show-page show-skip show-limit :total="page.total" :limit="page.limit" v-model="page.current"
+        <lay-page
-          @jump="change">
+          show-page
+          show-skip
+          show-limit
+          :total="page.total"
+          :limit="page.limit"
+          v-model="page.current"
+          @jump="change"
+        >
           <template #prev>
             <lay-icon type="layui-icon-left" />
           </template>