feat: 移动端兼容调整

src/style/global-scrollbar.scss

@@ -36,10 +36,10 @@
 // arco滚动条样式
 // 横向
 .arco-scrollbar-thumb-direction-horizontal .arco-scrollbar-thumb-bar {
-  height: 6px !important;
+  height: 4px !important;
 }
 
 // 纵向
 .arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar {
-  width: 6px !important;
+  width: 4px !important;
 }

src/style/global-style.scss

@@ -22,3 +22,19 @@
   overflow-y: auto;
   background: $color-fill-1;
 }
+
+// 铺满main窗口-有内边距
+.snow-fill {
+  height: 100%;
+  padding: $padding;
+  overflow: hidden;
+  background: $color-fill-1;
+}
+
+// 铺满main窗口-内部-有内边距
+.snow-fill-inner {
+  box-sizing: border-box;
+  height: 100%;
+  padding: $padding;
+  background: $color-bg-1;
+}

src/views/component/draggable/draggable.vue

@@ -1,35 +1,42 @@
 <template>
   <div class="snow-page">
     <div class="snow-inner draggable-page">
-      <a-space direction="vertical">
+      <a-row :gutter="16">
-        <div class="draggable-container">
+        <a-col :xs="24" :sm="24" :md="24" :lg="14" :xl="12" :xxl="12">
-          <div class="title">Favorites</div>
+          <a-space direction="vertical">
-          <draggable
+            <div class="draggable-container">
-            :list="list"
+              <div class="title">Favorites</div>
-            class="draggable-box"
+              <draggable
-            chosen-class="chosenClass"
+                :list="list"
-            animation="300"
+                class="draggable-box"
-            item-key="value"
+                chosen-class="chosenClass"
-            @start="onStart"
+                animation="300"
-            @end="onEnd"
+                item-key="value"
-          >
+                @start="onStart"
-            <template #item="{ element }">
+                @end="onEnd"
-              <div class="draggable-list" :class="!animated && 'animated-fade-up-' + element.value">
+              >
-                <div class="draggable-inner">
+                <template #item="{ element }">
-                  <svg-icon :name="element.svg" :size="30" class="svg-box" />
+                  <div class="draggable-list" :class="!animated && 'animated-fade-up-' + element.value">
-                  <div>{{ element.label }}</div>
+                    <div class="draggable-inner">
-                </div>
+                      <svg-icon :name="element.svg" :size="30" class="svg-box" />
-              </div>
+                      <div>{{ element.label }}</div>
-            </template>
+                    </div>
-          </draggable>
+                  </div>
-        </div>
+                </template>
-        <div>
+              </draggable>
-          采用开源拖拽库：<a-link href="https://github.com/SortableJS/vue.draggable.next" target="_blank">vue.draggable</a-link>
+            </div>
-        </div>
+            <div>
-      </a-space>
+              采用开源拖拽库：
-      <a-scrollbar style="height: 396px; overflow: auto" outer-class="scrollbar">
+              <a-link href="https://github.com/SortableJS/vue.draggable.next" target="_blank"> vue.draggable </a-link>
-        <code-view :code-json="codeJson" style="width: 500px" />
+            </div>
-      </a-scrollbar>
+          </a-space>
+        </a-col>
+        <a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="12" :xxl="12">
+          <a-scrollbar style="height: 396px; overflow: auto" outer-class="scrollbar">
+            <code-view :code-json="codeJson" style="width: 500px" />
+          </a-scrollbar>
+        </a-col>
+      </a-row>
     </div>
   </div>
 </template>

src/views/file/document-library/components/file-table.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container-page">
-    <a-row :gutter="16" class="bottom-gap">
+    <a-row :gutter="16" justify="space-between" class="bottom-gap">
-      <a-col :span="6">
+      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6" style="margin-bottom: 16px">
         <a-space>
           <a-button type="primary">
             <template #icon>
@@ -24,20 +24,16 @@
         </a-space>
       </a-col>
 
-      <a-col :span="6" :offset="12">
+      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6">
-        <a-form :model="form" :style="{ width: '100%' }" auto-label-width>
+        <a-space>
-          <a-form-item field="name">
+          <a-input v-model="form.name" placeholder="请输入搜索关键词" />
-            <a-space>
+          <a-button type="primary" status="success" @click="getList">
-              <a-input v-model="form.name" placeholder="请输入搜索关键词" />
+            <template #icon>
-              <a-button type="primary" status="success" @click="getList">
+              <icon-search />
-                <template #icon>
+            </template>
-                  <icon-search />
+            <template #default>搜索</template>
-                </template>
+          </a-button>
-                <template #default>搜索</template>
+        </a-space>
-              </a-button>
-            </a-space>
-          </a-form-item>
-        </a-form>
       </a-col>
     </a-row>
 

src/views/file/document-library/document-library.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="snow-page">
     <div class="container">
-      <div class="left-box">
+      <div class="left-box" v-show="!isMobile">
         <div class="box-title">文件库</div>
         <a-divider margin="0" />
         <FileTree class="file-tree-style" @on-node="onNode" />
       </div>
-      <div class="right-box">
+      <div class="right-box" :class="isMobile && 'row-content'">
         <div class="box-title">
           <a-breadcrumb>
             <a-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">{{ item.title }}</a-breadcrumb-item>
@@ -23,7 +23,8 @@
 <script setup lang="ts">
 import FileTree from "@/views/file/document-library/components/file-tree.vue";
 import FileTable from "@/views/file/document-library/components/file-table.vue";
-
+import { useDevicesSize } from "@/hooks/useDevicesSize";
+const { isMobile } = useDevicesSize();
 const FileTableRef = ref();
 const breadcrumb = ref<any>([]);
 const onNode = (list: any) => {
@@ -54,6 +55,10 @@ const onNode = (list: any) => {
       height: calc(100% - 40px);
     }
   }
+  .row-content {
+    width: 100%;
+    margin-left: 0;
+  }
 }
 .box-title {
   height: 40px;

src/views/form/common-form/common-form.vue

@@ -2,8 +2,8 @@
   <div class="snow-page">
     <div class="snow-inner">
       <a-row :gutter="16">
-        <a-col :span="12">
+        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
-          <a-form ref="formRef" :size="form.size" :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
+          <a-form ref="formRef" auto-label-width :size="form.size" :model="form" @submit="handleSubmit">
             <a-form-item field="size" label="表单大小">
               <a-radio-group v-model="form.size" type="button">
                 <a-radio value="mini">迷你</a-radio>
@@ -21,7 +21,7 @@
               ]"
               :validate-trigger="['change', 'input']"
             >
-              <a-input v-model="form.name" placeholder="请输入用户名称" allow-clear />
+              <a-input :style="{ width: '100%' }" v-model="form.name" placeholder="请输入用户名称" allow-clear />
             </a-form-item>
             <a-form-item
               field="age"
@@ -90,7 +90,7 @@
             </a-form-item>
           </a-form>
         </a-col>
-        <a-col :span="12">
+        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
           <CodeView :code-json="codeJson" />
         </a-col>
       </a-row>

src/views/form/step-form/step-form.vue

@@ -2,8 +2,8 @@
   <div class="snow-page">
     <a-spin :loading="loading" style="display: block">
       <div class="snow-inner container">
-        <a-row>
+        <a-row justify="center">
-          <a-col :span="12" :offset="6">
+          <a-col :xs="22" :sm="18" :md="16" :lg="16" :xl="12" :xxl="12">
             <a-steps :current="currentStep" line-less>
               <a-step description="创建渠道活动">基本信息</a-step>
               <a-step description="完善活动渠道信息">活动渠道</a-step>
@@ -11,9 +11,9 @@
             </a-steps>
           </a-col>
         </a-row>
-        <a-row class="margin-top">
+        <a-row justify="center" class="margin-top">
-          <a-col :span="8" :offset="8">
+          <a-col :xs="18" :sm="12" :md="12" :lg="12" :xl="8" :xxl="8">
-            <a-form ref="formRef" :model="form" :rules="rules" @submit="handleSubmit">
+            <a-form ref="formRef" auto-label-width :model="form" :rules="rules" @submit="handleSubmit">
               <div v-if="currentStep == 1">
                 <a-form-item field="name" label="活动名称">
                   <a-input v-model="form.name" placeholder="请输入活动名称" />

src/views/table/common-table/common-table.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="snow-page">
     <div class="snow-inner">
-      <a-form ref="formRef" :model="formData.form" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
+      <a-form ref="formRef" auto-label-width :model="formData.form">
-        <a-row :gutter="16" justify="start">
+        <a-row :gutter="16">
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
             <a-form-item field="name" label="姓名">
               <a-input v-model="formData.form.name" placeholder="请输入姓名" allow-clear />
@@ -19,7 +19,7 @@
             </a-form-item>
           </a-col>
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
-            <a-space>
+            <a-space class="search-btn">
               <a-button type="primary" @click="getCommonTableList">
                 <template #icon>
                   <icon-search />
@@ -42,7 +42,7 @@
             </a-space>
           </a-col>
         </a-row>
-        <a-row :gutter="16" justify="start" v-if="formData.search">
+        <a-row :gutter="16" v-if="formData.search">
           <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
             <a-form-item field="address" label="地址">
               <a-input v-model="formData.form.address" placeholder="请输入地址" allow-clear />
@@ -192,4 +192,8 @@ const getCommonTableList = async () => {
 getCommonTableList();
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.search-btn {
+  margin-bottom: 20px;
+}
+</style>

src/views/table/custom-table/custom-table.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="snow-page">
     <div class="snow-inner">
-      <a-form ref="formRef" :model="formData.form" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
+      <a-form ref="formRef" :model="formData.form" auto-label-width>
         <a-row :gutter="16">
-          <a-col :span="6">
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
             <a-form-item field="serial" label="集合编号">
               <a-input v-model="formData.form.serial" placeholder="请输入集合编号" allow-clear />
             </a-form-item>
           </a-col>
-          <a-col :span="6">
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
             <a-form-item field="name" label="集合名称">
               <a-input v-model="formData.form.name" placeholder="请输入集合名称" allow-clear />
             </a-form-item>
           </a-col>
-          <a-col :span="6">
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
             <a-form-item field="content" label="内容载体">
               <a-input v-model="formData.form.content" placeholder="请输入内容载体" allow-clear />
             </a-form-item>
           </a-col>
-          <a-col :span="6">
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
-            <a-space>
+            <a-space class="search-btn">
               <a-button type="primary" @click="getCustomTableList">
                 <template #icon>
                   <icon-search />
@@ -43,12 +43,12 @@
           </a-col>
         </a-row>
         <a-row :gutter="16" v-if="formData.search">
-          <a-col :span="6">
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
             <a-form-item field="contentSize" label="内容量">
               <a-input v-model="formData.form.contentSize" placeholder="请输入内容量" allow-clear />
             </a-form-item>
           </a-col>
-          <a-col :span="6">
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
             <a-form-item field="status" label="集合状态">
               <a-select v-model="formData.form.status" placeholder="请选择集合状态" allow-clear>
                 <a-option value="1">已上线</a-option>
@@ -56,7 +56,7 @@
               </a-select>
             </a-form-item>
           </a-col>
-          <a-col :span="6">
+          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
             <a-form-item field="createTime" label="创建时间">
               <a-range-picker v-model="formData.form.createTime" />
             </a-form-item>
@@ -132,6 +132,7 @@
         :bordered="{
           cell: true
         }"
+        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
         :columns="columnsShow"
         :data="data"
         :row-selection="rowSelection"
@@ -330,6 +331,9 @@ const exchangeArray = (columns: Array<any>, oldIndex: number, newIndex: number)
 </script>
 
 <style lang="scss" scoped>
+.search-btn {
+  margin-bottom: 20px;
+}
 .setting {
   display: flex;
   align-items: center;