From 0909fa2c653975717f3365a8009fe98481e23d83 Mon Sep 17 00:00:00 2001
From: ronger <ronger-x@outlook.com>
Date: Sat, 6 Mar 2021 21:29:35 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E4=BD=9C=E5=93=81=E9=9B=86?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/portfolio/list.vue   |  43 +-
 components/layouts/pc/header.vue       |   6 +
 pages/portfolio/post/_portfolio_id.vue | 663 +++++++++++++------------
 pages/portfolios.vue                   |  54 ++
 store/portfolio.js                     |   9 +-
 5 files changed, 426 insertions(+), 349 deletions(-)
 create mode 100644 pages/portfolios.vue

diff --git a/components/common/portfolio/list.vue b/components/common/portfolio/list.vue
index 74bdd29..8315845 100644
--- a/components/common/portfolio/list.vue
+++ b/components/common/portfolio/list.vue
@@ -1,31 +1,34 @@
 <template>
   <div class="wrapper">
-    <el-row class="row-cards row-deck" :gutter="10">
-      <el-col v-for="portfolio in portfolios.portfolios" :key="portfolio.idPortfolio">
-        <el-col class="card">
-          <el-col class="card-body d-flex flex-column">
-            <el-col :span="24" class="mr-3">
-              <a v-show="portfolio.headImgUrl">
-                <el-image class="card-img-top" style="height: 10rem;" :src="portfolio.headImgUrl"></el-image>
-              </a>
-              <a v-show="!portfolio.headImgUrl">
-                <el-image class="card-img-top" style="height: 10rem;"
-                          src="https://static.rymcu.com/article/1574441170152.jpg"></el-image>
-              </a>
+    <el-row class="row-cards row-deck" :gutter="20">
+      <el-col :span="8" v-for="portfolio in portfolios.portfolios" :key="portfolio.idPortfolio">
+        <el-col v-if="portfolio.headImgUrl" style="margin-bottom: 20px;">
+          <el-card :body-style="{ padding: '0px' }">
+            <el-col style="padding: 0;">
+              <el-image :src="portfolio.headImgUrl" style="width:281px;height: 281px;" fit="cover"></el-image>
             </el-col>
-            <el-col :span="24">
+            <el-col style="padding: 0 10px;">
               <h4 class="article-header-md">
                 <el-link rel="nofollow" @click="onRouter('portfolio',portfolio.idPortfolio)" :underline="false"
                          v-html="portfolio.portfolioTitle"></el-link>
               </h4>
-              <div class="text-muted article-summary-md">{{ portfolio.portfolioDescription }}</div>
-              <div class="d-flex align-items-center pt-5 mt-auto">
-                <div class="ml-auto text-muted">
-                  <span>{{ portfolio.timeAgo }}</span>
-                </div>
-              </div>
             </el-col>
-          </el-col>
+            <el-col class="text-muted article-summary-md">{{ portfolio.portfolioDescription }}</el-col>
+          </el-card>
+        </el-col>
+        <el-col v-else style="margin-bottom: 20px;">
+          <el-card :body-style="{ padding: '0px' }">
+            <el-col style="padding: 0;">
+              <el-image :src="portfolio.headImgUrl" style="width:280px;height: 240px;" fit="cover"></el-image>
+            </el-col>
+            <el-col style="padding: 0 10px;">
+              <h4 class="article-header-md">
+                <el-link rel="nofollow" @click="onRouter('portfolio',portfolio.idPortfolio)" :underline="false"
+                         v-html="portfolio.portfolioTitle"></el-link>
+              </h4>
+            </el-col>
+            <el-col class="text-muted article-summary-md">{{ portfolio.portfolioDescription }}</el-col>
+          </el-card>
         </el-col>
       </el-col>
       <el-col v-show="!portfolios" class="text-center">
diff --git a/components/layouts/pc/header.vue b/components/layouts/pc/header.vue
index eb2af02..f083b7a 100644
--- a/components/layouts/pc/header.vue
+++ b/components/layouts/pc/header.vue
@@ -13,6 +13,7 @@
                      @select="handleSelectMenu">
               <el-menu-item index="index">首页</el-menu-item>
               <el-menu-item index="topic">专题</el-menu-item>
+              <el-menu-item index="portfolios">作品集</el-menu-item>
             </el-menu>
           </el-col>
         </el-row>
@@ -185,6 +186,11 @@ export default {
               path: '/topic/news?page=1'
             })
             break;
+          case 'portfolios':
+            _ts.$router.push({
+              path: '/portfolios?page=1'
+            })
+            break;
           case 'github':
             window.open("https://github.com/rymcu");
             return false;
diff --git a/pages/portfolio/post/_portfolio_id.vue b/pages/portfolio/post/_portfolio_id.vue
index 638ebb2..211f01e 100644
--- a/pages/portfolio/post/_portfolio_id.vue
+++ b/pages/portfolio/post/_portfolio_id.vue
@@ -23,18 +23,30 @@
             <el-col :span="24">
               <vue-cropper
                 ref="cropper"
-                :aspect-ratio="4 / 1"
+                :aspect-ratio="1 / 1"
                 :src="headImgUrl"
                 :checkCrossOrigin="false"
                 :checkOrientation="false"
-                :imgStyle="{width: '950px', height: '237.5px'}"
+                :imgStyle="{width: '480px', height: '480px'}"
                 :autoCropArea="1"
                 :autoCrop="autoCrop"
                 preview=".preview"
               />
             </el-col>
             <el-col :span="24" style="margin-top: 2rem;">
-              <div class="preview preview-large"/>
+              <el-col :span="8">
+                <el-card :body-style="{ padding: '0px' }">
+                  <el-col>
+                    <div class="preview preview-large"/>
+                  </el-col>
+                  <el-col style="padding: 0 10px;">
+                    <h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
+                  </el-col>
+                  <el-col class="text-muted article-summary-md" style="padding: 0 10px;">
+                    {{ portfolio.portfolioDescription }}
+                  </el-col>
+                </el-card>
+              </el-col>
             </el-col>
             <el-col :span="24" style="margin-top: 2rem;">
               <el-upload
@@ -68,340 +80,337 @@
 </template>
 
 <script>
-  import Vue from 'vue';
-  import {mapState} from 'vuex';
-  import saveSvg from 'save-svg-as-png';
-  import VueCropper from 'vue-cropperjs';
-  import 'cropperjs/dist/cropper.css';
+import Vue from 'vue';
+import {mapState} from 'vuex';
+import saveSvg from 'save-svg-as-png';
+import VueCropper from 'vue-cropperjs';
+import 'cropperjs/dist/cropper.css';
 
-  export default {
-    name: "PortfolioPost",
-    validate({params, store}) {
-      if (typeof params.portfolio_id === 'undefined') {
-        return true;
-      }
-      return params.portfolio_id && !isNaN(Number(params.portfolio_id))
-    },
-    fetch({store, params, error}) {
-      return Promise.all([
-        store.dispatch('portfolio/fetchPostDetail', params)
-          .catch(err => error({statusCode: 404}))
-      ])
-    },
-    components: {
-      VueCropper
-    },
-    computed: {
-      ...mapState({
-        portfolioDetail: state => state.portfolio.detail.data,
-        uploadHeaders: state => {
-          return {'X-Upload-Token': state.uploadHeaders}
-        }
-      }),
-      idPortfolio() {
-        return this.$route.params.portfolio_id ? this.$route.params.portfolio_id : 0
-      }
-    },
-    data() {
-      return {
-        contentEditor: null,
-        portfolio: {
-          idPortfolio: 0,
-          portfolioDescription: ''
-        },
-        rules: {
-          portfolioTitle: [
-            {required: true, message: '请输入作品集名称', trigger: 'blur'}
-          ],
-          portfolioDescription: [
-            {required: true, message: '请输入作品集介绍', trigger: 'blur'}
-          ]
-        },
-        loading: false,
-        tokenURL: {
-          URL: '',
-          linkToImageURL: '',
-          token: ''
-        },
-        headImgUrl: '',
-        cropImg: '',
-        isEdit: false,
-        autoCrop: true
-      }
-    },
-    methods: {
-      _initEditor(data) {
-        let _ts = this;
-
-        let toolbar = [
-          'emoji',
-          'headings',
-          'bold',
-          'italic',
-          'strike',
-          'link',
-          '|',
-          'list',
-          'ordered-list',
-          'check',
-          'outdent',
-          'indent',
-          '|',
-          'quote',
-          'line',
-          'code',
-          'inline-code',
-          'insert-before',
-          'insert-after',
-          '|',
-          'upload',
-          // 'record',
-          'table',
-          '|',
-          'undo',
-          'redo',
-          '|',
-          'edit-mode',
-          {
-            name: 'more',
-            toolbar: [
-              'fullscreen',
-              'both',
-              'preview',
-              'info'
-            ],
-          }]
-        return new Vue.Vditor(data.id, {
-          toolbar,
-          mode: 'sv',
-          tab: '\t',
-          cache: {
-            enable: this.$route.params.article_id ? false : true,
-            id: this.$route.params.article_id ? this.$route.params.article_id : '',
-          },
-          after() {
-            _ts.contentEditor.setValue(data.value ? data.value : '');
-          },
-          preview: {
-            markdown: {
-              toc: true,
-            },
-            math: {
-              inlineDigit: true
-            },
-            delay: 500,
-            mode: data.mode,
-            /*url: `${process.env.Server}/api/console/markdown`,*/
-            parse: (element) => {
-              if (element.style.display === 'none') {
-                return
-              }
-              // LazyLoadImage();
-              // Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
-            }
-          },
-          upload: {
-            max: 10 * 1024 * 1024,
-            url: this.tokenURL.URL,
-            linkToImgUrl: this.tokenURL.linkToImageURL,
-            token: this.tokenURL.token,
-            filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
-            replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
-            replace('/\\s/g', '')
-          },
-          height: data.height,
-          counter: 102400,
-          resize: {
-            enable: data.resize,
-          },
-          lang: this.$store.state.locale,
-          placeholder: data.placeholder,
-        })
-      },
-      handleAvatarSuccess(res) {
-        let _ts = this;
-        if (res && res.data && res.data.url) {
-          let portfolio = _ts.portfolio;
-          portfolio.headImgUrl = res.data.url;
-          portfolio.headImgType = '0';
-          _ts.$set(_ts, 'portfolio', portfolio);
-          _ts.$set(_ts, 'headImgUrl', res.data.url);
-        } else {
-          _ts.$message.error('上传失败!');
-        }
-      },
-      beforeAvatarUpload(file) {
-        const isJPG = file.type === 'image/jpeg';
-        const isPNG = file.type === 'image/png';
-        const isLt2M = file.size / 1024 / 1024 < 2;
-        if (!(isJPG || isPNG)) {
-          this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
-          return false;
-        }
-        if (!isLt2M) {
-          this.$message.error('上传图片大小不能超过 2MB!');
-          return false;
-        }
-        this.fileToBase64(file);
-        return false;
-      },
-      fileToBase64(file) {
-        let _ts = this;
-        let reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = function () {
-          _ts.$set(_ts, 'headImgUrl', this.result);
-          _ts.$refs.cropper.replace(this.result);
-        }
-      },
-      async updatePortfolio() {
-        let _ts = this;
-        _ts.$set(_ts, 'loading', true);
-        let id = _ts.idPortfolio;
-        let portfolioDescription = _ts.contentEditor.getValue();
-        let portfolioDescriptionHtml = await _ts.contentEditor.getHTML();
-        let data = _ts.portfolio;
-        data.portfolioDescription = portfolioDescription;
-        data.portfolioDescriptionHtml = portfolioDescriptionHtml;
-        let title = id ? '更新' : '添加';
-        _ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
-          if (res && res.message) {
-            _ts.$message.error(res.message);
-          } else {
-            _ts.$message({
-              type: 'success',
-              message: title + '成功!'
-            });
-            _ts.$router.push({
-              path: '/portfolio/' + res.idPortfolio
-            })
-          }
-          _ts.$set(_ts, 'loading', false)
-        }).catch(error => _ts.$set(_ts, 'loading', false))
-      },
-      deletePortfolio() {
-        let _ts = this;
-        _ts.$confirm('确定删除吗?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          _ts.$axios.$delete('/api/portfolio/delete', {
-            params: {
-              idPortfolio: _ts.idPortfolio
-            }
-          }).then(function (res) {
-            if (res) {
-              if (res.message) {
-                _ts.$message(res.message);
-              } else {
-                _ts.$router.push({
-                  path: '/user/' + _ts.$store.state.userInfo?.nickname
-                })
-              }
-            }
-          })
-        }).catch(() => {
-          _ts.$message({
-            type: 'info',
-            message: '已取消'
-          });
-        });
-      },
-      reset() {
-        this.$refs.cropper.reset();
-      },
-      // get image data for post processing, e.g. upload or setting image src
-      cropImage() {
-        let _ts = this;
-        try {
-          _ts.cropImg = _ts.$refs.cropper.getCroppedCanvas().toDataURL();
-          let portfolio = _ts.portfolio;
-          portfolio.headImgUrl = _ts.cropImg;
-          portfolio.headImgType = '0';
-          _ts.$set(_ts, 'portfolio', portfolio);
-          _ts.$set(_ts, 'headImgUrl', _ts.cropImg);
-          _ts.$message.success('已裁剪 !');
-        } catch (e) {
-          _ts.$message.error('图片获取失败 !');
-          return;
-        }
-      }
-    },
-    mounted() {
-      let _ts = this;
-      _ts.$store.commit("setActiveMenu", "portfolio-post");
-      this.$axios.$get('/api/upload/simple/token').then(function (res) {
-        if (res) {
-          _ts.$store.commit('setUploadHeaders', res.uploadToken);
-          _ts.$set(_ts, 'tokenURL', {
-            token: res.uploadToken || '',
-            URL: res.uploadURL || '',
-            linkToImageURL: res.linkToImageURL || ''
-          })
-        }
-      });
-
-      let portfolioContent = '';
-      if (_ts.idPortfolio) {
-        _ts.$set(_ts, 'isEdit', true);
-        _ts.$set(_ts, 'portfolio', JSON.parse(JSON.stringify(_ts.portfolioDetail)));
-        _ts.$set(_ts, 'headImgUrl', _ts.portfolioDetail.headImgUrl);
-        _ts.$refs.cropper.replace(_ts.portfolioDetail.headImgUrl);
-        portfolioContent = _ts.portfolioDetail.portfolioDescription;
-      } else {
-        _ts.$set(_ts, 'isEdit', false);
-      }
-
-      this.contentEditor = this._initEditor({
-        id: 'contentEditor',
-        mode: 'both',
-        height: 480,
-        placeholder: '', //this.$t('inputContent', this.$store.state.locale)
-        resize: false,
-        value: portfolioContent
-      });
+export default {
+  name: "PortfolioPost",
+  validate({params, store}) {
+    if (typeof params.portfolio_id === 'undefined') {
+      return true;
     }
+    return params.portfolio_id && !isNaN(Number(params.portfolio_id))
+  },
+  fetch({store, params, error}) {
+    return Promise.all([
+      store.dispatch('portfolio/fetchPostDetail', params)
+        .catch(err => error({statusCode: 404}))
+    ])
+  },
+  components: {
+    VueCropper
+  },
+  computed: {
+    ...mapState({
+      portfolioDetail: state => state.portfolio.detail.data,
+      uploadHeaders: state => {
+        return {'X-Upload-Token': state.uploadHeaders}
+      }
+    }),
+    idPortfolio() {
+      return this.$route.params.portfolio_id ? this.$route.params.portfolio_id : 0
+    }
+  },
+  data() {
+    return {
+      contentEditor: null,
+      portfolio: {
+        idPortfolio: 0,
+        portfolioDescription: ''
+      },
+      rules: {
+        portfolioTitle: [
+          {required: true, message: '请输入作品集名称', trigger: 'blur'}
+        ],
+        portfolioDescription: [
+          {required: true, message: '请输入作品集介绍', trigger: 'blur'}
+        ]
+      },
+      loading: false,
+      tokenURL: {
+        URL: '',
+        linkToImageURL: '',
+        token: ''
+      },
+      headImgUrl: '',
+      cropImg: '',
+      isEdit: false,
+      autoCrop: true
+    }
+  },
+  methods: {
+    _initEditor(data) {
+      let _ts = this;
+
+      let toolbar = [
+        'emoji',
+        'headings',
+        'bold',
+        'italic',
+        'strike',
+        'link',
+        '|',
+        'list',
+        'ordered-list',
+        'check',
+        'outdent',
+        'indent',
+        '|',
+        'quote',
+        'line',
+        'code',
+        'inline-code',
+        'insert-before',
+        'insert-after',
+        '|',
+        'upload',
+        // 'record',
+        'table',
+        '|',
+        'undo',
+        'redo',
+        '|',
+        'edit-mode',
+        {
+          name: 'more',
+          toolbar: [
+            'fullscreen',
+            'both',
+            'preview',
+            'info'
+          ],
+        }]
+      return new Vue.Vditor(data.id, {
+        toolbar,
+        mode: 'sv',
+        tab: '\t',
+        cache: {
+          enable: this.$route.params.article_id ? false : true,
+          id: this.$route.params.article_id ? this.$route.params.article_id : '',
+        },
+        after() {
+          _ts.contentEditor.setValue(data.value ? data.value : '');
+        },
+        preview: {
+          markdown: {
+            toc: true,
+          },
+          math: {
+            inlineDigit: true
+          },
+          delay: 500,
+          mode: data.mode,
+          /*url: `${process.env.Server}/api/console/markdown`,*/
+          parse: (element) => {
+            if (element.style.display === 'none') {
+              return
+            }
+            // LazyLoadImage();
+            // Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
+          }
+        },
+        upload: {
+          max: 10 * 1024 * 1024,
+          url: this.tokenURL.URL,
+          linkToImgUrl: this.tokenURL.linkToImageURL,
+          token: this.tokenURL.token,
+          filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '')
+        },
+        height: data.height,
+        counter: 102400,
+        resize: {
+          enable: data.resize,
+        },
+        lang: this.$store.state.locale,
+        placeholder: data.placeholder,
+      })
+    },
+    handleAvatarSuccess(res) {
+      let _ts = this;
+      if (res && res.data && res.data.url) {
+        let portfolio = _ts.portfolio;
+        portfolio.headImgUrl = res.data.url;
+        portfolio.headImgType = '0';
+        _ts.$set(_ts, 'portfolio', portfolio);
+        _ts.$set(_ts, 'headImgUrl', res.data.url);
+      } else {
+        _ts.$message.error('上传失败!');
+      }
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!(isJPG || isPNG)) {
+        this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!');
+        return false;
+      }
+      this.fileToBase64(file);
+      return false;
+    },
+    fileToBase64(file) {
+      let _ts = this;
+      let reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = function () {
+        _ts.$set(_ts, 'headImgUrl', this.result);
+        _ts.$refs.cropper.replace(this.result);
+      }
+    },
+    async updatePortfolio() {
+      let _ts = this;
+      _ts.$set(_ts, 'loading', true);
+      let id = _ts.idPortfolio;
+      let portfolioDescription = _ts.contentEditor.getValue();
+      let portfolioDescriptionHtml = await _ts.contentEditor.getHTML();
+      let data = _ts.portfolio;
+      data.portfolioDescription = portfolioDescription;
+      data.portfolioDescriptionHtml = portfolioDescriptionHtml;
+      let title = id ? '更新' : '添加';
+      _ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
+        if (res && res.message) {
+          _ts.$message.error(res.message);
+        } else {
+          _ts.$message({
+            type: 'success',
+            message: title + '成功!'
+          });
+          _ts.$router.push({
+            path: '/portfolio/' + res.idPortfolio
+          })
+        }
+        _ts.$set(_ts, 'loading', false)
+      }).catch(error => _ts.$set(_ts, 'loading', false))
+    },
+    deletePortfolio() {
+      let _ts = this;
+      _ts.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        _ts.$axios.$delete('/api/portfolio/delete', {
+          params: {
+            idPortfolio: _ts.idPortfolio
+          }
+        }).then(function (res) {
+          if (res) {
+            if (res.message) {
+              _ts.$message(res.message);
+            } else {
+              _ts.$router.push({
+                path: '/user/' + _ts.$store.state.userInfo?.nickname
+              })
+            }
+          }
+        })
+      }).catch(() => {
+        _ts.$message({
+          type: 'info',
+          message: '已取消'
+        });
+      });
+    },
+    reset() {
+      this.$refs.cropper.reset();
+    },
+    // get image data for post processing, e.g. upload or setting image src
+    cropImage() {
+      let _ts = this;
+      try {
+        _ts.cropImg = _ts.$refs.cropper.getCroppedCanvas().toDataURL();
+        let portfolio = _ts.portfolio;
+        portfolio.headImgUrl = _ts.cropImg;
+        portfolio.headImgType = '0';
+        _ts.$set(_ts, 'portfolio', portfolio);
+        _ts.$set(_ts, 'headImgUrl', _ts.cropImg);
+        _ts.$message.success('已裁剪 !');
+      } catch (e) {
+        _ts.$message.error('图片获取失败 !');
+        return;
+      }
+    }
+  },
+  mounted() {
+    let _ts = this;
+    _ts.$store.commit("setActiveMenu", "portfolio-post");
+    this.$axios.$get('/api/upload/simple/token').then(function (res) {
+      if (res) {
+        _ts.$store.commit('setUploadHeaders', res.uploadToken);
+        _ts.$set(_ts, 'tokenURL', {
+          token: res.uploadToken || '',
+          URL: res.uploadURL || '',
+          linkToImageURL: res.linkToImageURL || ''
+        })
+      }
+    });
+
+    let portfolioContent = '';
+    if (_ts.idPortfolio) {
+      _ts.$set(_ts, 'isEdit', true);
+      _ts.$set(_ts, 'portfolio', JSON.parse(JSON.stringify(_ts.portfolioDetail)));
+      _ts.$set(_ts, 'headImgUrl', _ts.portfolioDetail.headImgUrl);
+      _ts.$refs.cropper.replace(_ts.portfolioDetail.headImgUrl);
+      portfolioContent = _ts.portfolioDetail.portfolioDescription;
+    } else {
+      _ts.$set(_ts, 'isEdit', false);
+    }
+
+    this.contentEditor = this._initEditor({
+      id: 'contentEditor',
+      mode: 'both',
+      height: 480,
+      placeholder: '', //this.$t('inputContent', this.$store.state.locale)
+      resize: false,
+      value: portfolioContent
+    });
   }
+}
 </script>
 
 <style lang="scss">
-  @import "~vditor/src/assets/scss/index.scss";
-  .preview-area {
-    width: 16rem;
-  }
+@import "~vditor/src/assets/scss/index.scss";
 
-  .preview-area p {
-    font-size: 1.25rem;
-  }
+.preview-area {
+  width: 16rem;
+}
 
-  .preview-area p:last-of-type {
-    margin-top: 1rem;
-  }
+.preview-area p {
+  font-size: 1.25rem;
+}
 
-  .crop-placeholder {
-    width: 36px;
-    height: 36px;
-    background: #ccc;
-  }
+.preview-area p:last-of-type {
+  margin-top: 1rem;
+}
 
-  .cropped-image img {
-    max-width: 100%;
-  }
+.crop-placeholder {
+  width: 36px;
+  height: 36px;
+  background: #ccc;
+}
 
-  .img-cropper {
-    width: 950px;
-    min-height: 300px;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
-  }
+.cropped-image img {
+  max-width: 100%;
+}
 
-  .preview-large {
-    width: 950px;
-    height: 237.5px;
-    margin-bottom: 1rem;
-    margin-top: 3rem;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-    background-color: #ffffff;
-    overflow: hidden;
-  }
+.img-cropper {
+  width: 480px;
+  min-height: 480px;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
+}
+
+.preview-large {
+  width: 100%;
+  height: 480px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+  overflow: hidden;
+}
 </style>
diff --git a/pages/portfolios.vue b/pages/portfolios.vue
new file mode 100644
index 0000000..e046378
--- /dev/null
+++ b/pages/portfolios.vue
@@ -0,0 +1,54 @@
+<template>
+  <el-row class="wrapper">
+    <el-col>
+      <h1>最新作品集</h1>
+    </el-col>
+    <el-col>
+      <portfolio-list :portfolios="portfolios" @currentChange="currentChangePortfolio"></portfolio-list>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import {mapState} from "vuex";
+import PortfolioList from "~/components/common/portfolio/list";
+
+export default {
+  name: "Portfolios",
+  components: {PortfolioList},
+  fetch({store, query, error}) {
+    return Promise.all([
+      store
+        .dispatch('portfolio/fetchList', {page: query.page || 1})
+        .catch(err => error({statusCode: 404}))
+    ])
+  },
+  watch: {
+    '$route.query': function () {
+      this.$store.dispatch('portfolio/fetchList', {page: this.$route.query.page || 1})
+    }
+  },
+  computed: {
+    ...mapState({
+      portfolios: state => state.portfolio.list.data
+    })
+  },
+  methods: {
+    currentChangePortfolio(page) {
+      this.$router.push({
+        name: 'portfolios',
+        query: {
+          page: page
+        }
+      })
+    }
+  },
+  mounted() {
+    this.$store.commit('setActiveMenu', 'portfolios');
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/store/portfolio.js b/store/portfolio.js
index d57012f..c3b6884 100644
--- a/store/portfolio.js
+++ b/store/portfolio.js
@@ -73,15 +73,20 @@ export const mutations = {
 
 export const actions = {
   // 获取作品集列表
-  fetchList({commit}, params = {}) {
+  fetchList({commit, state}, params = {}) {
 
     // 清空已有数据
-    commit('updateListData', getDefaultListData())
     commit('updateListFetching', true)
+    let currentData = JSON.parse(JSON.stringify(state)).list.data
+    if (Number(params.page) === currentData.pagination.currentPage) {
+      commit('updateListFetching', false)
+      return
+    }
     let data = {
       page: params.page,
       topicUri: params.topic_uri
     }
+    commit('updateListData', getDefaultListData())
 
     return this.$axios
       .$get(`${BASE_API_PATH}/portfolios`, {