Complete attachment list show

src/api/attachment.js

@@ -0,0 +1,15 @@
+import service from '@/utils/service'
+
+const baseUrl = '/admin/api/attachments'
+
+const attachmentApi = {}
+
+attachmentApi.list = pagination => {
+  return service({
+    url: baseUrl,
+    method: 'get',
+    params: pagination
+  })
+}
+
+export default attachmentApi

src/views/attachment/AttachmentList.vue

@@ -1,107 +1,77 @@
 <template>
   <page-view>
-    <a-row :gutter="12" type="flex" align="middle">
+    <a-row
+      :gutter="12"
+      type="flex"
+      align="middle"
+    >
       <a-col
         class="attachment-item"
+        v-for="attachment in attachments"
+        :key="attachment.id"
         :xl="4"
         :lg="4"
         :md="12"
         :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
-        </a-card>
-      </a-col>
-      <a-col
-        class="attachment-item"
-        :xl="4"
-        :lg="4"
-        :md="12"
-        :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
-        </a-card>
-      </a-col>
-      <a-col
-        class="attachment-item"
-        :xl="4"
-        :lg="4"
-        :md="12"
-        :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
-        </a-card>
-      </a-col>
-      <a-col
-        class="attachment-item"
-        :xl="4"
-        :lg="4"
-        :md="12"
-        :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
-        </a-card>
-      </a-col>
-      <a-col
-        class="attachment-item"
-        :xl="4"
-        :lg="4"
-        :md="12"
-        :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
-        </a-card>
-      </a-col>
-      <a-col
-        class="attachment-item"
-        :xl="4"
-        :lg="4"
-        :md="12"
-        :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
-        </a-card>
-      </a-col>
-      <a-col
-        class="attachment-item"
-        :xl="4"
-        :lg="4"
-        :md="12"
-        :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
-        </a-card>
-      </a-col>
-      <a-col
-        class="attachment-item"
-        :xl="4"
-        :lg="4"
-        :md="12"
-        :sm="12"
-        :xs="24">
-        <a-card :bodyStyle="{ padding: '14px' }">
-          <img :src="src" slot="cover">
+        :xs="24"
+      >
+        <a-card
+          :bodyStyle="{ padding: '1rem' , width: '240px' }"
+          hoverable
+        >
+          <img
+            :src="attachment.thumbPath"
+            :alt="attachment.name"
+            slot="cover"
+          >
+          <a-card-meta>
+            <template slot="description">{{ attachment.name }}</template>
+          </a-card-meta>
         </a-card>
       </a-col>
     </a-row>
+    <a-row
+      type="flex"
+      justify="end"
+      :gutter="12"
+    >
+      <a-pagination
+        v-model="pagination.page"
+        :defaultPageSize="pagination.size"
+        :total="pagination.total"
+      ></a-pagination>
+    </a-row>
   </page-view>
 </template>
 
 <script>
 import { PageView } from '@/layouts'
+import attachmentApi from '@/api/attachment'
 export default {
   components: {
     PageView
   },
   data() {
     return {
-      src: 'https://cdn.ryanc.cc/img/blog/thumbnails/c86b59623c4a9bfeac403824dec3a789.jpg'
+      attachments: [],
+      pagination: {
+        page: 1,
+        size: 16,
+        sort: ''
+      }
+    }
+  },
+  created() {
+    this.loadAttachments()
+  },
+  methods: {
+    loadAttachments() {
+      const pagination = Object.assign({}, this.pagination)
+      pagination.page--
+      attachmentApi.list(pagination).then(response => {
+        this.attachments = response.data.data.content
+        this.pagination.total = response.data.data.total
+      })
     }
   }
 }

src/views/interface/ThemeList.vue

@@ -1,171 +1,171 @@
 <template>
-<div class="page-header-index-wide">
-  <a-row
-    :gutter="12"
-    type="flex"
-    align="middle"
-  >
-    <a-col
-      class="theme-item"
-      :xl="6"
-      :lg="6"
-      :md="12"
-      :sm="12"
-      :xs="24"
-      v-for="(theme, index) in themes"
-      :key="index"
-    >
-      <a-card :bodyStyle="{ padding: '14px' }">
-        <img
-          :alt="theme.name"
-          :src="theme.screenshots"
-          slot="cover"
-        >
-        <a-divider></a-divider>
-        <div class="theme-control">
-          <span class="theme-title">{{ theme.name }}</span>
-          <a-button-group class="theme-button">
-            <a-button
-              type="primary"
-              v-if="theme.activated"
-              disabled
-            >已启用</a-button>
-            <a-button
-              type="primary"
-              @click="activeTheme(theme.id)"
-              v-else
-            >启用</a-button>
-            <a-button
-              @click="settingDrawer(theme)"
-              v-if="theme.hasOptions"
-            >设置</a-button>
-          </a-button-group>
-        </div>
-      </a-card>
-    </a-col>
-  </a-row>
-  <a-drawer
-    v-if="themeProperty"
-    :title="themeProperty.name + ' 主题设置'"
-    width="100%"
-    closable
-    @close="onClose"
-    :visible="visible"
-    destroyOnClose
-  >
+  <div class="page-header-index-wide">
     <a-row
       :gutter="12"
       type="flex"
+      align="middle"
     >
       <a-col
-        :xl="12"
-        :lg="12"
+        class="theme-item"
+        :xl="6"
+        :lg="6"
         :md="12"
-        :sm="24"
+        :sm="12"
         :xs="24"
+        v-for="(theme, index) in themes"
+        :key="index"
       >
-        <a-skeleton
-          active
-          :loading="optionLoading"
-          :paragraph="{rows: 10}"
-        >
+        <a-card :bodyStyle="{ padding: '14px' }">
           <img
-            v-if="themeProperty"
-            :alt="themeProperty.name"
-            :src="themeProperty.screenshots"
-            width="100%"
+            :alt="theme.name"
+            :src="theme.screenshots"
+            slot="cover"
           >
-        </a-skeleton>
+          <a-divider></a-divider>
+          <div class="theme-control">
+            <span class="theme-title">{{ theme.name }}</span>
+            <a-button-group class="theme-button">
+              <a-button
+                type="primary"
+                v-if="theme.activated"
+                disabled
+              >已启用</a-button>
+              <a-button
+                type="primary"
+                @click="activeTheme(theme.id)"
+                v-else
+              >启用</a-button>
+              <a-button
+                @click="settingDrawer(theme)"
+                v-if="theme.hasOptions"
+              >设置</a-button>
+            </a-button-group>
+          </div>
+        </a-card>
       </a-col>
-      <a-col
-        :xl="12"
-        :lg="12"
-        :md="12"
-        :sm="24"
-        :xs="24"
+    </a-row>
+    <a-drawer
+      v-if="themeProperty"
+      :title="themeProperty.name + ' 主题设置'"
+      width="100%"
+      closable
+      @close="onClose"
+      :visible="visible"
+      destroyOnClose
+    >
+      <a-row
+        :gutter="12"
+        type="flex"
       >
-        <a-skeleton
-          active
-          :loading="optionLoading"
-          :paragraph="{rows: 20}"
+        <a-col
+          :xl="12"
+          :lg="12"
+          :md="12"
+          :sm="24"
+          :xs="24"
         >
-          <a-tabs defaultActiveKey="0">
-            <a-tab-pane
-              v-for="(group, index) in themeConfiguration"
-              :key="index.toString()"
-              :tab="group.label"
+          <a-skeleton
+            active
+            :loading="optionLoading"
+            :paragraph="{rows: 10}"
+          >
+            <img
+              v-if="themeProperty"
+              :alt="themeProperty.name"
+              :src="themeProperty.screenshots"
+              width="100%"
             >
-              <a-form layout="vertical">
-                <a-form-item
-                  v-for="(item, index1) in group.items"
-                  :label="item.label + '：'"
-                  :key="index1"
-                  :wrapper-col="wrapperCol"
-                >
-                  <a-input
-                    v-model="themeSettings[item.name]"
-                    :defaultValue="item.defaultValue"
-                    v-if="item.type == 'TEXT'"
-                  />
-                  <a-input
-                    type="textarea"
-                    :autosize="{ minRows: 5 }"
-                    v-model="themeSettings[item.name]"
-                    v-else-if="item.type == 'TEXTAREA'"
-                  />
-                  <a-radio-group
-                    v-decorator="['radio-group']"
-                    :defaultValue="item.defaultValue"
-                    v-model="themeSettings[item.name]"
-                    v-else-if="item.type == 'RADIO'"
-                  >
-                    <a-radio
-                      v-for="(option, index2) in item.options"
-                      :key="index2"
-                      :value="option.value"
-                    >{{ option.label }}</a-radio>
-                  </a-radio-group>
-                  <a-select
-                    v-model="themeSettings[item.name]"
-                    :defaultValue="item.defaultValue"
-                    v-else-if="item.type == 'SELECT'"
+          </a-skeleton>
+        </a-col>
+        <a-col
+          :xl="12"
+          :lg="12"
+          :md="12"
+          :sm="24"
+          :xs="24"
+        >
+          <a-skeleton
+            active
+            :loading="optionLoading"
+            :paragraph="{rows: 20}"
+          >
+            <a-tabs defaultActiveKey="0">
+              <a-tab-pane
+                v-for="(group, index) in themeConfiguration"
+                :key="index.toString()"
+                :tab="group.label"
+              >
+                <a-form layout="vertical">
+                  <a-form-item
+                    v-for="(item, index1) in group.items"
+                    :label="item.label + '：'"
+                    :key="index1"
+                    :wrapper-col="wrapperCol"
                   >
-                    <a-select-option
-                      v-for="option in item.options"
-                      :key="option.value"
-                      :value="option.value"
-                    >{{ option.label }}</a-select-option>
-                  </a-select>
-                </a-form-item>
+                    <a-input
+                      v-model="themeSettings[item.name]"
+                      :defaultValue="item.defaultValue"
+                      v-if="item.type == 'TEXT'"
+                    />
+                    <a-input
+                      type="textarea"
+                      :autosize="{ minRows: 5 }"
+                      v-model="themeSettings[item.name]"
+                      v-else-if="item.type == 'TEXTAREA'"
+                    />
+                    <a-radio-group
+                      v-decorator="['radio-group']"
+                      :defaultValue="item.defaultValue"
+                      v-model="themeSettings[item.name]"
+                      v-else-if="item.type == 'RADIO'"
+                    >
+                      <a-radio
+                        v-for="(option, index2) in item.options"
+                        :key="index2"
+                        :value="option.value"
+                      >{{ option.label }}</a-radio>
+                    </a-radio-group>
+                    <a-select
+                      v-model="themeSettings[item.name]"
+                      :defaultValue="item.defaultValue"
+                      v-else-if="item.type == 'SELECT'"
+                    >
+                      <a-select-option
+                        v-for="option in item.options"
+                        :key="option.value"
+                        :value="option.value"
+                      >{{ option.label }}</a-select-option>
+                    </a-select>
+                  </a-form-item>
+                  <a-form-item>
+                    <a-button
+                      type="primary"
+                      @click="saveSettings"
+                    >保存</a-button>
+                  </a-form-item>
+                </a-form>
+              </a-tab-pane>
+              <a-tab-pane
+                key="about"
+                tab="关于"
+              >
                 <a-form-item>
-                  <a-button
-                    type="primary"
-                    @click="saveSettings"
-                  >保存</a-button>
+                  <a-popconfirm
+                    :title="'确定删除【' + themeProperty.name + '】主题？'"
+                    @confirm="deleteTheme(themeProperty.id)"
+                    okText="确定"
+                    cancelText="取消"
+                  >
+                    <a-button type="danger">删除该主题</a-button>
+                  </a-popconfirm>
                 </a-form-item>
-              </a-form>
-            </a-tab-pane>
-            <a-tab-pane
-              key="about"
-              tab="关于"
-            >
-              <a-form-item>
-                <a-popconfirm
-                  :title="'确定删除【' + themeProperty.name + '】主题？'"
-                  @confirm="deleteTheme(themeProperty.id)"
-                  okText="确定"
-                  cancelText="取消"
-                >
-                  <a-button type="danger">删除该主题</a-button>
-                </a-popconfirm>
-              </a-form-item>
-            </a-tab-pane>
-          </a-tabs>
-        </a-skeleton>
-      </a-col>
-    </a-row>
-  </a-drawer>
-</div>
+              </a-tab-pane>
+            </a-tabs>
+          </a-skeleton>
+        </a-col>
+      </a-row>
+    </a-drawer>
+  </div>
 </template>
 
 <script>

src/views/post/PostEdit.vue

@@ -198,7 +198,7 @@ export default {
   computed: {
     publishText() {
       if (this.postToStage.id) {
-        return '更新'
+        return '更新并发布'
       }
       return '创建并发布'
     }