From 47984f56382a8999fbffa0ec4c4b442d0ac8f1c2 Mon Sep 17 00:00:00 2001
From: x ronger <ronger-x@outlook.com>
Date: Sun, 2 Aug 2020 19:23:32 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E4=BD=9C=E5=93=81=E9=9B=86?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=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          |   2 +-
 .../common/portfolio/manager/bind/list.vue    |  69 ++++
 components/common/portfolio/manager/list.vue  | 151 +++++++++
 pages/portfolio/manager/_portfolio_id.vue     | 106 ++++++
 .../portfolio/manager/bind/_portfolio_id.vue  |  87 +++++
 pages/portfolio/post/_portfolio_id.vue        | 312 ++++++++++++++++++
 store/portfolio.js                            |  69 +++-
 7 files changed, 790 insertions(+), 6 deletions(-)
 create mode 100644 components/common/portfolio/manager/bind/list.vue
 create mode 100644 components/common/portfolio/manager/list.vue
 create mode 100644 pages/portfolio/manager/_portfolio_id.vue
 create mode 100644 pages/portfolio/manager/bind/_portfolio_id.vue
 create mode 100644 pages/portfolio/post/_portfolio_id.vue

diff --git a/components/common/portfolio/list.vue b/components/common/portfolio/list.vue
index 777201c..d1a7e86 100644
--- a/components/common/portfolio/list.vue
+++ b/components/common/portfolio/list.vue
@@ -62,7 +62,7 @@
         )
       },
       currentChange(page) {
-        this.$emit('currentChangePortfolios', page);
+        this.$emit('currentChange', page);
       }
     }
   }
diff --git a/components/common/portfolio/manager/bind/list.vue b/components/common/portfolio/manager/bind/list.vue
new file mode 100644
index 0000000..8712a67
--- /dev/null
+++ b/components/common/portfolio/manager/bind/list.vue
@@ -0,0 +1,69 @@
+<template>
+  <el-row>
+    <el-col v-for="article in articles.articles" :key="article.idArticle" style="padding-top: 1rem;">
+      <el-card>
+        <div class="card-body d-flex flex-column">
+          <el-link :underline="false" style="margin-bottom: .5rem;">
+            <h4 v-html="article.articleTitle"></h4>
+          </el-link>
+          <div class="text-muted article-summary-md">{{ article.articlePreviewContent }}</div>
+          <el-col class="text-right" style="padding: 1rem;">
+            <el-button @click="bindArticle(article.idArticle)" :loading="loading">添加至作品集</el-button>
+          </el-col>
+        </div>
+      </el-card>
+    </el-col>
+    <el-col>
+      <div class="vertical-container text-center">
+        <el-pagination v-show="articles.pagination.total > 10" v-model="articles.pagination"
+                       layout="prev, pager, next"
+                       :current-page="articles.pagination.currentPage"
+                       :total="articles.pagination.total"
+                       @current-change="currentChange">
+        </el-pagination>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  export default {
+    name: "PortfolioManagerBind",
+    props: {
+      articles: {
+        type: Object
+      },
+      idPortfolio: {
+        type: Number
+      }
+    },
+    data() {
+      return {
+        loading: false
+      }
+    },
+    methods: {
+      bindArticle(idArticle) {
+        let _ts = this;
+        _ts.$set(_ts, 'loading', true);
+        _ts.$axios.$post('/api/portfolio/bind-article', {
+          idArticle: idArticle,
+          idPortfolio: _ts.idPortfolio
+        }).then(function (res) {
+          _ts.$set(_ts, 'loading', false);
+          if (res) {
+            _ts.$message(res.message);
+            _ts.currentChange(1);
+          }
+        })
+      },
+      currentChange(page) {
+        this.$emit('currentChange', page);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/components/common/portfolio/manager/list.vue b/components/common/portfolio/manager/list.vue
new file mode 100644
index 0000000..8324c64
--- /dev/null
+++ b/components/common/portfolio/manager/list.vue
@@ -0,0 +1,151 @@
+<template>
+  <el-row>
+    <el-col>
+      <el-table :data="articles.articles" style="width: 100%">
+        <el-table-column
+          label="#"
+          width="40"
+          prop="idArticle">
+        </el-table-column>
+        <el-table-column
+          label="文章标题">
+          <template slot-scope="scope">
+            <el-link type="primary" @click.native="onRouter('article', scope.row.idArticle)" :underline="false">{{
+              scope.row.articleTitle }}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="排序(回车更新)"
+          width="200">
+          <template slot-scope="scope">
+            <el-input-number v-model="scope.row.sortNo" @keyup.enter.native="updateArticleSortNo(scope.row)"
+                             :min="1"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          width="200">
+          <template slot-scope="scope">
+            <el-button @click="deletePortFolioArticle(scope.row.idArticle)">取消绑定</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-col>
+    <el-col>
+      <div class="vertical-container text-center">
+        <el-pagination v-show="articles.pagination.total > 10" v-model="articles.pagination"
+                       layout="prev, pager, next"
+                       :current-page="articles.pagination.currentPage"
+                       :total="articles.pagination.total"
+                       @current-change="currentChange">
+        </el-pagination>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import {mapState} from 'vuex';
+
+  export default {
+    name: "PortfolioManagerList",
+    props: {
+      idPortfolio: {
+        type: Number
+      }
+    },
+    validate({params, store}) {
+      return !isNaN(Number(this.idPortfolio))
+    },
+    fetch({store, params, error}) {
+      return Promise.all([
+        store
+          .dispatch('portfolio/fetchArticleList', {
+            portfolio_id: this.idPortfolio
+          })
+          .catch(err => error({statusCode: 404}))
+      ])
+    },
+    data() {
+      return {
+        articles: {
+          articles: [],
+          pagination: {
+            total: 0,
+            currentPage: 1
+          }
+        }
+      }
+    },
+    methods: {
+      currentChange(page) {
+        this.getArticleData(page);
+      },
+      async getArticleData(page){
+        let _ts = this;
+        const responseTopData = await this.$axios.$get('/api/console/portfolio/' + _ts.idPortfolio + '/articles?page='+page);
+        if (responseTopData) {
+          responseTopData.pagination.currentPage = page;
+          _ts.$set(_ts, 'articles', responseTopData);
+          window.scrollTo(0, 0);
+        }
+      },
+      updateArticleSortNo(article) {
+        let _ts = this;
+        if (article.sortNo) {
+          _ts.$axios.$put('/api/portfolio/update-article-sort-no',{
+            idArticle: article.idArticle,
+            idPortfolio: _ts.idPortfolio,
+            sortNo: article.sortNo
+          }).then(function (res) {
+            if (res) {
+              _ts.$message(res.message);
+            }
+          })
+        } else {
+          _ts.$message("排序号不能为空");
+        }
+      },
+      deletePortFolioArticle(idArticle) {
+        let _ts = this;
+        _ts.$confirm('确定取消绑定吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          _ts.$axios.$delete('/api/portfolio/unbind-article', {
+            params: {
+              idArticle: idArticle,
+              idPortfolio: _ts.idPortfolio
+            }
+          }).then(function (res) {
+            if (res) {
+              _ts.$message(res.message);
+              _ts.currentChange(_ts.articles.pagination.currentPage);
+            }
+          })
+        }).catch(() => {
+          _ts.$message({
+            type: 'info',
+            message: '已取消'
+          });
+        });
+      },
+      onRouter (name, data) {
+        if (name === 'article') {
+          this.$router.push({
+            path: `/article/${data}`
+          })
+        }
+      }
+    },
+    mounted() {
+      this.getArticleData(1);
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/pages/portfolio/manager/_portfolio_id.vue b/pages/portfolio/manager/_portfolio_id.vue
new file mode 100644
index 0000000..8a6c48f
--- /dev/null
+++ b/pages/portfolio/manager/_portfolio_id.vue
@@ -0,0 +1,106 @@
+<template>
+  <el-row class="wrapper">
+    <el-col v-if="isAuthor">
+      <el-col>
+        <el-col :xs="3" :sm="3" :xl="3" class="mr-3">
+          <el-image :src="portfolio.headImgUrl"></el-image>
+        </el-col>
+        <el-col :xs="20" :sm="20" :xl="20">
+          <el-col>
+            <h1>{{ portfolio.portfolioTitle }}</h1>
+          </el-col>
+          <el-col style="margin-bottom: .5rem;">
+            <span class="text-default" style="padding-right: 1rem;">作者</span>
+            <el-link @click="onRouter('user', portfolio.portfolioAuthorName)" :underline="false" class="text-default">
+              <el-avatar :src="portfolio.portfolioAuthorAvatarUrl" :size="16"></el-avatar>
+              {{ portfolio.portfolioAuthorName }}
+            </el-link>
+          </el-col>
+          <el-col style="margin-bottom: .5rem;">
+            <span class="text-default" style="padding-right: 1rem;">文章</span> {{portfolio.articleNumber}}篇
+          </el-col>
+          <el-col style="margin-bottom: .5rem;" v-html="portfolio.portfolioDescription">
+          </el-col>
+        </el-col>
+      </el-col>
+      <el-col>
+        <el-col style="text-align: right;">
+          <el-col>
+            <el-link @click="onRouter('post-portfolio',portfolio.idPortfolio)" :underline="false" class="text-default"
+                     style="margin-right: 1rem;">编辑
+            </el-link>
+            <el-link @click="showBindArticleDialog(portfolio.idPortfolio)" :underline="false" class="text-default"
+                     style="margin-right: 1rem;">添加文章
+            </el-link>
+          </el-col>
+        </el-col>
+        <el-col>
+          <el-divider><i class="el-icon-loading"></i></el-divider>
+        </el-col>
+        <el-col>
+          <portfolio-manager-list :idPortfolio="portfolio.idPortfolio"></portfolio-manager-list>
+        </el-col>
+      </el-col>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import {mapState} from 'vuex';
+  import PortfolioManagerList from "~/components/common/portfolio/manager/list";
+
+  export default {
+    name: "PortfolioManager",
+    components: {
+      PortfolioManagerList
+    },
+    validate({params, store}) {
+      return params.portfolio_id && !isNaN(Number(params.portfolio_id))
+    },
+    fetch({store, params, error}) {
+      return Promise.all([
+        store
+          .dispatch('portfolio/fetchDetail', params)
+          .catch(err => error({statusCode: 404}))
+      ])
+    },
+    computed: {
+      ...mapState({
+        portfolio: state => state.portfolio.detail.data
+      }),
+      isAuthor() {
+        let account = this.$store.state.oauth?.nickname;
+        if (account) {
+          if (account === this.portfolio.portfolioAuthorName) {
+            return true;
+          }
+        }
+        return false;
+      }
+    },
+    methods: {
+      onRouter(name, data) {
+        if (name === 'article') {
+          this.$router.push({
+            path: data
+          })
+        } else {
+          this.$router.push(
+            {
+              path: '/portfolio/post/' + data
+            }
+          )
+        }
+      },
+      showBindArticleDialog(idPortfolio) {
+        this.$router.push({
+          path: `/portfolio/manager/bind/${idPortfolio}`
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/pages/portfolio/manager/bind/_portfolio_id.vue b/pages/portfolio/manager/bind/_portfolio_id.vue
new file mode 100644
index 0000000..57261ca
--- /dev/null
+++ b/pages/portfolio/manager/bind/_portfolio_id.vue
@@ -0,0 +1,87 @@
+<template>
+  <el-row class="wrapper">
+    <el-col style="margin-bottom: 1rem;">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/portfolio/manager/' + idPortfolio }">返回上一级</el-breadcrumb-item>
+        <el-breadcrumb-item>关联文章</el-breadcrumb-item>
+      </el-breadcrumb>
+    </el-col>
+    <el-col>
+      <el-divider><i class="el-icon-loading"></i></el-divider>
+    </el-col>
+    <el-col>
+      <el-input v-model="searchText" @input="searchUnbindArticle" placeholder="输入帖子标题,回车检索"></el-input>
+    </el-col>
+    <el-col>
+      <portfolio-manager-bind-list :idPortfolio="idPortfolio" :articles="articles"
+                                   @currentChange="currentChangeArticle"></portfolio-manager-bind-list>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import {mapState} from 'vuex';
+  import PortfolioManagerBindList from "~/components/common/portfolio/manager/bind/list";
+
+  export default {
+    name: "PortfolioManagerBind",
+    components: {
+      PortfolioManagerBindList
+    },
+    validate({params, store}) {
+      return params.portfolio_id && !isNaN(Number(params.portfolio_id))
+    },
+    fetch({store, params, error}) {
+      return Promise.all([
+        store
+          .dispatch('portfolio/fetchUnBindArticleList', params)
+          .catch(err => error({statusCode: 404}))
+      ])
+    },
+    computed: {
+      ...mapState({
+        articles: state => state.portfolio.unbindArticles,
+      }),
+      idPortfolio() {
+        return Number(this.$route.params.portfolio_id)
+      }
+    },
+    data() {
+      return {
+        searchText: ''
+      }
+    },
+    methods: {
+      currentChangeArticle(page) {
+        this.$store.dispatch('portfolio/fetchUnBindArticleList', {
+          page: page,
+          portfolio_id: this.$route.params.portfolio_id
+        })
+      },
+      searchUnbindArticle() {
+        this.$store.dispatch('portfolio/fetchUnBindArticleList', {
+          page: 1,
+          portfolio_id: this.$route.params.portfolio_id,
+          searchText: this.searchText
+        })
+      },
+      onRouter(name, data) {
+        if (name === 'article') {
+          this.$router.push({
+            path: data
+          })
+        } else {
+          this.$router.push(
+            {
+              path: '/portfolio/post/' + data
+            }
+          )
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/pages/portfolio/post/_portfolio_id.vue b/pages/portfolio/post/_portfolio_id.vue
new file mode 100644
index 0000000..eb8cc44
--- /dev/null
+++ b/pages/portfolio/post/_portfolio_id.vue
@@ -0,0 +1,312 @@
+<template>
+  <el-row class="wrapper">
+    <el-col v-if="isEdit" style="margin-bottom: 1rem;">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/portfolio-manager/' + idPortfolio }">{{ portfolio.portfolioTitle }}
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>更新作品集</el-breadcrumb-item>
+      </el-breadcrumb>
+    </el-col>
+    <el-col>
+      <h1>创建作品集</h1>
+    </el-col>
+    <el-col style="margin-bottom: 1rem;">
+      作品集需要有明确的写作方向，如果您在某个领域有深度的研究，欢迎创建自己的作品集分享自己的观点
+    </el-col>
+    <el-col>
+      <el-form :model="portfolio" :rules="rules" ref="topic" label-width="100px">
+        <el-form-item label="作品集名称" prop="portfolioTitle">
+          <el-input v-model="portfolio.portfolioTitle"></el-input>
+        </el-form-item>
+        <el-form-item label="图标">
+          <el-upload
+            class="avatar-uploader"
+            :action="tokenURL.URL"
+            :multiple="true"
+            :with-credentials="true"
+            :headers="uploadHeaders"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload">
+            <img v-if="headImgUrl" class="topic-brand-img" :src="headImgUrl">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+
+        <el-form-item label="作品集介绍" prop="portfolioDescription">
+          <div id="contentEditor"></div>
+        </el-form-item>
+        <el-form-item class="text-right">
+          <el-button v-if="isEdit" @click="deletePortfolio" :loading="loading">删除</el-button>
+          <el-button v-if="isEdit" @click="updatePortfolio" :loading="loading">更新</el-button>
+          <el-button v-else @click="updatePortfolio" :loading="loading">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import Vue from 'vue';
+  import {mapState} from 'vuex';
+
+  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}))
+      ])
+    },
+    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: '',
+          token: ''
+        },
+        headImgUrl: '',
+        isEdit: false
+      }
+    },
+    methods: {
+      _initEditor(data) {
+        let _ts = this;
+        let toolbar;
+        if (window.innerWidth < 768) {
+          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',
+            'content-theme',
+            'code-theme',
+            {
+              name: 'more',
+              toolbar: [
+                'fullscreen',
+                'both',
+                'format',
+                'preview',
+                'info',
+                'help',
+              ],
+            }]
+        }
+        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.URL,
+            token: this.tokenURL.token,
+            filename: name => name.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;
+          _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 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传图标大小不能超过 2MB!');
+        }
+        return (isJPG || isPNG) && isLt2M;
+      },
+      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.contentEditor.setValue(res.portfolioDescription);
+            _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('/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.oauth.nickname
+                })
+              }
+            }
+          })
+        }).catch(() => {
+          _ts.$message({
+            type: 'info',
+            message: '已取消'
+          });
+        });
+      }
+    },
+    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 || '',
+          })
+        }
+      });
+
+      let portfolioContent = '';
+      if (_ts.idPortfolio) {
+        _ts.$set(_ts, 'isEdit', true);
+        _ts.$set(_ts, 'portfolio', _ts.portfolioDetail);
+        _ts.$set(_ts, 'headImgUrl', _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";
+</style>
diff --git a/store/portfolio.js b/store/portfolio.js
index 6208d25..d57012f 100644
--- a/store/portfolio.js
+++ b/store/portfolio.js
@@ -1,7 +1,8 @@
 import Vue from 'vue';
 import { isBrowser } from '~/environment';
 
-export const PORTFOLIO_API_PATH = '/api/console'
+export const BASE_API_PATH = '/api/console'
+export const PORTFOLIO_API_PATH = '/api/portfolio'
 
 const getDefaultListData = () => {
   return {
@@ -23,6 +24,10 @@ export const state = () => {
     articles: {
       articles: [],
       pagination: {}
+    },
+    unbindArticles: {
+      articles: [],
+      pagination: {}
     }
   }
 }
@@ -51,6 +56,10 @@ export const mutations = {
     state.articles.articles = action.articles
     state.articles.pagination = action.pagination
   },
+  updateUnbindArticleList(state, action) {
+    state.unbindArticles.articles = action.articles
+    state.unbindArticles.pagination = action.pagination
+  },
 
   // 更新作品集阅读全文状态
   updateDetailRenderedState(state, action) {
@@ -75,7 +84,7 @@ export const actions = {
     }
 
     return this.$axios
-      .$get(`${PORTFOLIO_API_PATH}/portfolios`, {
+      .$get(`${BASE_API_PATH}/portfolios`, {
         params: data
       })
       .then(response => {
@@ -103,7 +112,7 @@ export const actions = {
     commit('updateDetailFetching', true)
     // commit('updateDetailData', {})
     return this.$axios
-      .$get(`${PORTFOLIO_API_PATH}/portfolio/${params.portfolio_id}`)
+      .$get(`${BASE_API_PATH}/portfolio/${params.portfolio_id}`)
       .then(response => {
         return new Promise(resolve => {
           commit('updateDetailData', response)
@@ -122,9 +131,9 @@ export const actions = {
   fetchArticleList({commit}, params) {
     commit('updateDetailFetching', true)
     return this.$axios
-      .$get(`${PORTFOLIO_API_PATH}/portfolio/${params.portfolio_id}/articles`, {
+      .$get(`${BASE_API_PATH}/portfolio/${params.portfolio_id}/articles`, {
         params: {
-          page: params.page
+          page: params.page || 1
         }
       })
       .then(response => {
@@ -134,5 +143,55 @@ export const actions = {
       .catch(error => {
         commit('updateDetailFetching', false)
       })
+  },
+  fetchUnBindArticleList({commit}, params) {
+    commit('updateDetailFetching', true)
+    return this.$axios
+      .$get(`${PORTFOLIO_API_PATH}/${params.portfolio_id}/unbind-articles`, {
+        params: {
+          page: params.page || 1,
+          searchText: params.searchText || ''
+        }
+      })
+      .then(response => {
+        commit('updateUnbindArticleList', response)
+        commit('updateDetailFetching', false)
+      })
+      .catch(error => {
+        commit('updateDetailFetching', false)
+      })
+  },
+  fetchPostDetail({ commit }, params = {}) {
+    // const delay = fetchDelay(
+    //   isBrowser
+    // )
+    // if (isBrowser) {
+    //   Vue.nextTick(() => {
+    //     window.scrollTo(0, 300);
+    //   })
+    // }
+
+    if (typeof params.portfolio_id === 'undefined') {
+      commit('updateDetailData', getDefaultListData())
+      return;
+    }
+    commit('updateDetailFetching', true)
+    // commit('updateDetailData', {})
+    return this.$axios
+      .$get(`${PORTFOLIO_API_PATH}/detail/${params.portfolio_id}`)
+      .then(response => {
+        return new Promise(resolve => {
+          commit('updateDetailData', response)
+          commit('updateDetailFetching', false)
+          resolve(response)
+          // delay(() => {
+          //   resolve(response)
+          // })
+        })
+      })
+      .catch(error => {
+        commit('updateDetailFetching', false)
+        return Promise.reject(error)
+      })
   }
 }