style(web): 统一后台图标与全局视觉

src/layout/components/ToolHeader.vue

@@ -56,14 +56,20 @@ export default defineComponent({
         ) : undefined}
         <div class="h-full flex items-center">
           {screenfull.value ? (
-            <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
+            <Screenfull
+              class="<md:hidden custom-hover"
+              color="var(--top-header-text-color)"
+            ></Screenfull>
           ) : undefined}
           {size.value ? (
-            <SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown>
+            <SizeDropdown
+              class="<md:hidden custom-hover"
+              color="var(--top-header-text-color)"
+            ></SizeDropdown>
           ) : undefined}
           {locale.value ? (
             <LocaleDropdown
-              class="custom-hover"
+              class="<sm:hidden custom-hover"
               color="var(--top-header-text-color)"
             ></LocaleDropdown>
           ) : undefined}
@@ -79,6 +85,20 @@ export default defineComponent({
 @prefix-cls: ~'@{namespace}-tool-header';
 
 .@{prefix-cls} {
+  min-width: 0;
+  gap: 8px;
   transition: left var(--transition-time-02);
+
+  :deep(.el-dropdown),
+  :deep(.v-user-info) {
+    flex-shrink: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .@{prefix-cls} {
+    padding-right: 8px;
+    padding-left: 8px;
+  }
 }
 </style>