fat: 栅格系统

.husky/_/commit-msg

@@ -1,4 +1,2 @@
 #!/usr/bin/env sh
-. "$(dirname -- "$0")/husky.sh"
+. "${0%/*}/h"
-
-npx --no-install commitlint --edit $1

.husky/_/pre-commit

@@ -1,5 +1,2 @@
-#!/bin/sh
+#!/usr/bin/env sh
-
+. "${0%/*}/h"
-. "$(dirname "$0")/husky.sh"
-
-npm run lint-staged

pnpm-lock.yaml

@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@arco-design/color':
     specifier: ^0.4.0
@@ -6027,3 +6023,7 @@ packages:
     resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
     engines: {node: '>=12.20'}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

src/layout/components/Menu/index.vue

@@ -1,6 +1,6 @@
 <template>
   <a-menu
-    :breakpoint="layoutType === 'layoutDefaults' ? undefined : 'xl'"
+    :breakpoint="layoutType != 'layoutHead' ? 'xl' : undefined"
     :mode="'vertical'"
     :theme="asideDark ? 'dark' : 'light'"
     :collapsed="collapsed"

src/layout/index.vue

@@ -25,6 +25,18 @@ onMounted(() => {
   // 页面渲染完毕，结束loading
   loadingPage.done(200);
 });
+
+// 页面加载前
+onBeforeMount(() => {
+  onLayoutResize();
+  window.addEventListener("resize", onLayoutResize);
+});
+
+// 监听页面大小
+const onLayoutResize = () => {
+  let clientWidth = document.body.clientWidth;
+  console.log("窗口大小", clientWidth);
+};
 </script>
 
 <style lang="scss" scoped></style>

src/views/home/components/shortcut.vue

@@ -8,14 +8,33 @@
       </div>
     </div>
     <a-divider :margin="16" />
-    <div class="flex-row-between-center">
+    <!-- <div class="flex-row-between-center">
       <div v-for="(item, index) in shortcut" :key="item.id" class="card-middling row-center" :class="'animated-fade-up-' + index">
         <div>
           <SvgIcon :name="item.svg" :size="40" />
           <span class="shortcut-card-label">{{ item.name }}</span>
         </div>
       </div>
-    </div>
+    </div> -->
+    <a-row class="grid-demo">
+      <a-col
+        :xs="24"
+        :sm="12"
+        :md="12"
+        :lg="8"
+        :xl="4"
+        :xxl="4"
+        v-for="(item, index) in shortcut"
+        :key="item.id"
+        class="card-middling row-center"
+        :class="'animated-fade-up-' + index"
+      >
+        <div>
+          <SvgIcon :name="item.svg" :size="40" />
+          <span class="shortcut-card-label">{{ item.name }}</span>
+        </div>
+      </a-col>
+    </a-row>
   </div>
 </template>