Refactor mobile style.

src/views/attachment/AttachmentList.vue

@@ -85,7 +85,7 @@
     <a-drawer
       v-if="selectAttachment"
       title="附件详情"
-      :width="drawerWidth"
+      :width="isMobile()?'100%':'560'"
       closable
       :visible="drawerVisible"
       destroyOnClose
@@ -187,7 +187,6 @@ export default {
       drawerVisible: false,
       detailLoading: false,
       selectAttachment: null,
-      drawerWidth: '560',
       attachments: [],
       editable: false,
       pagination: {
@@ -200,13 +199,6 @@ export default {
   created() {
     this.loadAttachments()
   },
-  mounted() {
-    if (this.isMobile()) {
-      this.drawerWidth = '100%'
-    } else {
-      this.drawerWidth = '460'
-    }
-  },
   methods: {
     loadAttachments() {
       const pagination = Object.assign({}, this.pagination)

src/views/page/PageEdit.vue

@@ -18,7 +18,7 @@
       <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
         <a-drawer
           title="页面设置"
-          :width="drawerWidth"
+          :width="isMobile()?'100%':'460'"
           :closable="true"
           @close="onClose"
           :visible="visible"
@@ -103,7 +103,6 @@ export default {
         xs: { span: 24 }
       },
       visible: false,
-      drawerWidth: '460',
       postUrl: 'hello-world',
       customTpls: [],
       postToStage: {}
@@ -117,13 +116,6 @@ export default {
       return '创建并发布'
     }
   },
-  mounted() {
-    if (this.isMobile()) {
-      this.drawerWidth = '100%'
-    } else {
-      this.drawerWidth = '460'
-    }
-  },
   created() {
     this.loadCustomTpls()
   },

src/views/page/PageList.vue

@@ -8,11 +8,20 @@
               <span slot="tab">
                 <a-icon type="pushpin"/>内置页面
               </span>
+
+              <!-- TODO 移动端展示 -->
+              <a-collapse :bordered="false" v-if="isMobile()">
+                <a-collapse-panel :header="item.name" v-for="(item,index) in internalPages" :key="index">
+                  <p>12332112323</p>
+                </a-collapse-panel>
+              </a-collapse>
+
               <a-table
                 :columns="internalColumns"
                 :dataSource="internalPages"
                 :pagination="false"
                 :rowKey="page => page.id"
+                v-else
               >
                 <span slot="action" slot-scope="text, record">
                   <a href="javascript:;" @click="viewPage(record.id)">查看</a>
@@ -28,13 +37,6 @@
                   </router-link>
                 </span>
               </a-table>
-
-              <!-- TODO 移动端展示 -->
-              <a-collapse :bordered="false">
-                <a-collapse-panel :header="item.name" v-for="(item,index) in internalPages" :key="index">
-                  <p>12332112323</p>
-                </a-collapse-panel>
-              </a-collapse>
             </a-tab-pane>
             <a-tab-pane key="custom">
               <span slot="tab">
@@ -50,6 +52,7 @@
 </template>
 
 <script>
+import { mixin, mixinDevice } from '@/utils/mixin.js'
 const internalColumns = [
   {
     title: '页面名称',
@@ -84,6 +87,7 @@ const internalPages = [
   }
 ]
 export default {
+  mixins: [mixin, mixinDevice],
   data() {
     return {
       internalColumns,

src/views/post/PostEdit.vue

@@ -18,7 +18,7 @@
       </a-col>
 
       <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
-        <a-drawer title="文章设置" :width="drawerWidth" closable @close="onClose" :visible="visible">
+        <a-drawer title="文章设置" :width="isMobile()?'100%':'460'" closable @close="onClose" :visible="visible">
           <div class="post-setting-drawer-content">
             <div :style="{ marginBottom: '16px' }">
               <h3 class="post-setting-drawer-title">基本设置</h3>
@@ -106,7 +106,7 @@
 
     <a-drawer
       title="附件库"
-      :width="attachmentDrawerWidth"
+      :width="isMobile()?'100%':'580'"
       closable
       :visible="attachmentDrawerVisible"
       destroyOnClose
@@ -139,7 +139,7 @@
 
       <a-drawer
         title="附件详情"
-        :width="selectAttachmentDrawerWidth"
+        :width="isMobile()?'100%':'460'"
         closable
         :visible="selectAttachmentDrawerVisible"
         destroyOnClose
@@ -276,14 +276,11 @@ export default {
         sm: { span: 24 },
         xs: { span: 24 }
       },
-      attachmentDrawerWidth: '580',
-      selectAttachmentDrawerWidth: '460',
       attachmentDrawerVisible: false,
       selectAttachmentDrawerVisible: false,
       uploadVisible: false,
       visible: false,
       childDrawerVisible: false,
-      drawerWidth: '460',
       tags: [],
       categories: [],
       selectedCategoryIds: [],
@@ -308,15 +305,6 @@ export default {
       return '创建并发布'
     }
   },
-  mounted() {
-    if (this.isMobile()) {
-      this.drawerWidth = '100%'
-      this.attachmentDrawerWidth = '100%'
-    } else {
-      this.drawerWidth = '460'
-      this.attachmentDrawerWidth = '580'
-    }
-  },
   created() {
     this.loadTags()
     this.loadCategories()