ui md

src/assets/icons/icon-add-circle.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-新增-off</title>
+    <g id="服务单元管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="7.1-服务单元管理" transform="translate(-337, -25)">
+            <g id="icon-新增-off" transform="translate(336, 24)">
+                <rect id="add-circle-(Background)" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path d="M4.5,8.5 L4.5,7.5 L7.5,7.5 L7.5,4.5 L8.5,4.5 L8.5,7.5 L11.5,7.5 L11.5,8.5 L8.5,8.5 L8.5,11.5 L7.5,11.5 L7.5,8.5 L4.5,8.5 Z M15,8 C15,4.13400674 11.8659935,1 8,1 C4.13400674,1 1,4.13400674 1,8 C1,11.8659935 4.13400674,15 8,15 C11.8659935,15 15,11.8659935 15,8 Z M14,8 C14,4.68629146 11.3137083,2 8,2 C4.68629146,2 2,4.68629146 2,8 C2,11.3137083 4.68629146,14 8,14 C11.3137083,14 14,11.3137083 14,8 Z" id="add-circle" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/icon-delete.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="14px" viewBox="0 0 12 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-作废-off</title>
+    <g id="服务单元管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="7.1-服务单元管理" transform="translate(-494, -25)">
+            <g id="icon-作废-off" transform="translate(492, 24)">
+                <rect id="delete-(Background)" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path d="M6,6 L7,6 L7,12 L6,12 L6,6 Z M9,12 L10,12 L10,6 L9,6 L9,12 Z M14,3 L14,4 L13,4 L13,14 C13,14.5522852 12.5522842,15 12,15 L4,15 C3.44771504,15 3,14.5522842 3,14 L3,4 L2,4 L2,3 L5.5,3 L5.5,1.80000073 C5.5,1.35817304 5.85817218,1 6.30000019,1 L9.69999981,1 C10.1418276,1 10.5,1.35817215 10.5,1.80000013 L10.5,3 L14,3 Z M6.5,2 L9.5,2 L9.5,3 L6.5,3 L6.5,2 Z M4,14 L12,14 L12,4 L4,4 L4,14 Z" id="delete" fill="#262626"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/global/search-form/index.vue

@@ -246,7 +246,7 @@ const colToWidth = (colSpan) => {
 </script>
 <style lang="less" scoped>
 .table-search {
-  padding: 16px;
+  padding: 16px 16px 1px;
   background-color: #fff;
   :deep(.t-date-range-picker) {
     width: 100%;

src/components/global/svg-icon/index.vue

@@ -26,7 +26,7 @@ const props = defineProps({
 const symbolId = computed(() => `#${props.prefix}-${props.name}`);
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .svg-icon {
   display: inline-block;
   vertical-align: middle;

src/layout/index.vue

@@ -1,57 +1,53 @@
 <template>
   <t-layout class="app-layout">
-    <t-aside width="314px" class="app-layout-side">
-      <t-layout class="app-layout-side-body" direction="horizontal">
-        <t-aside class="app-menu" width="82px">
-          <div class="app-menu-list">
-            <div class="app-menu-logo">
-              <img src="@/assets/imgs/menu-logo.png" alt="logo" />
-            </div>
-            <div
-              v-for="item in userStore.headerMenus"
-              :key="item.name"
-              :class="[
-                'app-menu-item',
-                { 'is-actice': userStore.curPageModule === item.name },
-              ]"
-              @click="moduleChange(item.name)"
-            >
-              <svg-icon
-                prefix="icon-icon-fill"
-                :name="item.meta.icon"
-                :color="
-                  userStore.curPageModule === item.name ? '#165DFF' : undefined
-                "
-              ></svg-icon>
-              <p>{{ item.meta.title }}</p>
+    <t-aside class="app-menu" width="82px">
+      <div class="app-menu-list">
+        <div class="app-menu-logo">
+          <img src="@/assets/imgs/menu-logo.png" alt="logo" />
+        </div>
+        <div
+          v-for="item in userStore.headerMenus"
+          :key="item.name"
+          :class="[
+            'app-menu-item',
+            { 'is-actice': userStore.curPageModule === item.name },
+          ]"
+          @click="moduleChange(item.name)"
+        >
+          <svg-icon
+            prefix="icon-icon-fill"
+            :name="item.meta.icon"
+            :color="
+              userStore.curPageModule === item.name ? '#165DFF' : undefined
+            "
+          ></svg-icon>
+          <p>{{ item.meta.title }}</p>
+        </div>
+      </div>
+      <div class="app-menu-footer"></div>
+    </t-aside>
+    <t-aside class="app-submenu" width="232px">
+      <left-menu class="app-submenu-body"></left-menu>
+      <div class="app-submenu-footer">
+        <t-dropdown
+          trigger="hover"
+          :options="userOptions"
+          @click="clickHandler"
+        >
+          <div class="app-submenu-user">
+            <div class="app-submenu-user-content">
+              <svg-icon name="user-circle"></svg-icon>
+              <span class="real-name">{{ userStore.user?.realName }}</span>
+              <span v-if="userStore.user?.mobileNumber" class="real-name">{{
+                userStore.user?.mobileNumber
+              }}</span>
             </div>
+            <ChevronDownIcon size="16px" />
           </div>
-          <div class="app-menu-footer"></div>
-        </t-aside>
-        <t-content class="app-submenu">
-          <left-menu class="app-submenu-body"></left-menu>
-          <div class="app-submenu-footer">
-            <t-dropdown
-              trigger="hover"
-              :options="userOptions"
-              @click="clickHandler"
-            >
-              <div class="app-submenu-user">
-                <div class="app-submenu-user-content">
-                  <svg-icon name="user-circle"></svg-icon>
-                  <span class="real-name">{{ userStore.user?.realName }}</span>
-                  <span v-if="userStore.user?.mobileNumber" class="real-name">{{
-                    userStore.user?.mobileNumber
-                  }}</span>
-                </div>
-                <ChevronDownIcon size="16px" />
-              </div>
-            </t-dropdown>
-          </div>
-        </t-content>
-      </t-layout>
+        </t-dropdown>
+      </div>
     </t-aside>
-    <t-content class="layout-content overflow-au to">
+    <t-content class="layout-content">
       <router-view v-slot="{ Component }">
         <transition name="fade-slide" mode="out-in" appear>
           <component :is="Component" />
@@ -102,19 +98,14 @@ const clickHandler = (data) => {
   background-color: #f2f3f5;
   height: 100%;
 
-  &-side {
-    height: 100%;
-  }
-
-  &-side-body {
-    height: 100%;
-  }
-
   .layout-content {
     flex: 1;
+    overflow: auto;
+    border-left: 1px solid #e5e5e5;
   }
   .app-menu {
     background-color: #f2f3f5;
+    height: 100%;
 
     &-list {
       padding: 16px 8px 40px;
@@ -168,9 +159,8 @@ const clickHandler = (data) => {
   }
   .app-submenu {
     background-color: #fff;
-    padding-bottom: 78px;
+    padding-bottom: 68px;
     position: relative;
-    border-right: 1px solid #e5e5e5;
     color: #262626;
 
     &-footer {

src/style/global.less

@@ -18,6 +18,15 @@ body {
   // box-shadow: 1px 1px 2px var(--color-neutral-2);
 }
 
+.page-action {
+  padding: 16px 16px 1px;
+  background-color: #fff;
+  & > .t-button {
+    &:not(:first-child) {
+      margin-left: 16px;
+    }
+  }
+}
 .table-search {
   .t-form__item {
     margin-bottom: 16px;

src/style/tdesign-reset.less

@@ -63,3 +63,21 @@
     }
   }
 }
+.t-button {
+  .svg-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+  }
+  &.t-is-disabled {
+    .svg-icon use {
+      fill: #00000042 !important;
+    }
+  }
+
+  &.t-button--theme-default:hover {
+    .svg-icon use {
+      fill: #165dff;
+    }
+  }
+}

src/views/service-unit/dispatch/dispatch-manage/index.vue

@@ -1,5 +1,25 @@
 <template>
   <div class="dispatch-manage flex flex-col h-full">
+    <div class="page-action">
+      <t-button theme="primary" @click="handleAdd">
+        <template #icon><svg-icon name="add-circle" color="#fff" /></template>
+        新增</t-button
+      >
+      <t-button
+        variant="outline"
+        :disabled="!selectedRowKeys.length"
+        @click="handleBatchDisable"
+      >
+        <template #icon><svg-icon name="delete" color="#262626" /></template>
+        作废</t-button
+      >
+      <t-button
+        variant="outline"
+        :disabled="!selectedRowKeys.length"
+        @click="handleMultDelineation"
+        >批量划定</t-button
+      >
+    </div>
     <SearchForm :fields="fields" :params="params">
       <template #service="{ item, params }">
         <select-service-unit v-model="params[item.prop]"></select-service-unit>
@@ -18,21 +38,6 @@
       </template>
     </SearchForm>
     <div class="flex-1 page-wrap">
-      <div class="btn-group">
-        <t-button theme="success" @click="handleAdd">新增</t-button>
-        <t-button
-          theme="success"
-          :disabled="!selectedRowKeys.length"
-          @click="handleBatchDisable"
-          >作废</t-button
-        >
-        <t-button
-          theme="success"
-          :disabled="!selectedRowKeys.length"
-          @click="handleMultDelineation"
-          >批量划定</t-button
-        >
-      </div>
       <t-table
         size="small"
         row-key="id"