Commit d29129b7d480fd957d1b2dc3e6589956e542a04a

Authored by ww
1 parent 75d71b6d

perf: switch column layout container width

@@ -140,8 +140,10 @@ @@ -140,8 +140,10 @@
140 onMounted(() => { 140 onMounted(() => {
141 const clientHeight = document.documentElement.clientHeight; 141 const clientHeight = document.documentElement.clientHeight;
142 const rect = getBoundingClientRect(unref(listEl)!.$el!) as DOMRect; 142 const rect = getBoundingClientRect(unref(listEl)!.$el!) as DOMRect;
143 - const paginationHeight = 24 + 24;  
144 - const listContainerMarginBottom = 16 + 8 + 32 + 20; 143 + // margin-top 24 height 24
  144 + const paginationHeight = 24 + 24 + 8;
  145 + // list pading top 8 maring-top 8 extra slot 56
  146 + const listContainerMarginBottom = 8 + 8 + 56;
145 const listContainerHeight = 147 const listContainerHeight =
146 clientHeight - rect.top - paginationHeight - listContainerMarginBottom; 148 clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
147 const listContainerEl = (unref(listEl)!.$el as HTMLElement).querySelector( 149 const listContainerEl = (unref(listEl)!.$el as HTMLElement).querySelector(
@@ -175,7 +177,8 @@ @@ -175,7 +177,8 @@
175 <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button> 177 <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>
176 <Popover :trigger="['hover']"> 178 <Popover :trigger="['hover']">
177 <template #content> 179 <template #content>
178 - <div class="w-40"> 180 + <div class="w-50">
  181 + <div>每行显示数量</div>
179 <Slider 182 <Slider
180 v-model:value="listColumn" 183 v-model:value="listColumn"
181 :max="12" 184 :max="12"
@@ -189,9 +192,11 @@ @@ -189,9 +192,11 @@
189 <AppstoreOutlined /> 192 <AppstoreOutlined />
190 </Button> 193 </Button>
191 </Popover> 194 </Popover>
192 - <Button type="primary" @click="getListData">  
193 - <ReloadOutlined @click="getListData" />  
194 - </Button> 195 + <Tooltip title="刷新">
  196 + <Button type="primary" @click="getListData">
  197 + <ReloadOutlined @click="getListData" />
  198 + </Button>
  199 + </Tooltip>
195 </div> 200 </div>
196 </template> 201 </template>
197 <template #renderItem="{ item }"> 202 <template #renderItem="{ item }">
@@ -257,6 +262,5 @@ @@ -257,6 +262,5 @@
257 262
258 .configuration-list:deep(.ant-list-pagination) { 263 .configuration-list:deep(.ant-list-pagination) {
259 height: 24px; 264 height: 24px;
260 - background-color: #fff;  
261 } 265 }
262 </style> 266 </style>