Merge branch 'static-page' into dev

src/api/staticPage.js

@@ -0,0 +1,39 @@
+import service from '@/utils/service'
+
+const baseUrl = '/api/admin/static_page'
+
+const staticPageApi = {}
+
+staticPageApi.list = () => {
+  return service({
+    url: baseUrl,
+    method: 'get'
+  })
+}
+
+staticPageApi.generate = () => {
+  return service({
+    url: `${baseUrl}/generate`,
+    method: 'get'
+  })
+}
+
+staticPageApi.deploy = () => {
+  return service({
+    url: `${baseUrl}/deploy`,
+    method: 'get'
+  })
+}
+
+staticPageApi.deployType = {
+  GIT: {
+    type: 'GIT',
+    text: 'Git'
+  },
+  NETLIFY: {
+    type: 'NETLIFY',
+    text: 'Netlify'
+  }
+}
+
+export default staticPageApi

src/config/router.config.js

@@ -185,6 +185,13 @@ export const asyncRouterMap = [
             component: () => import('@/views/system/ToolList'),
             meta: { title: '小工具', hiddenHeaderContent: false }
           },
+          {
+            path: '/system/tools/staticpages',
+            name: 'StaticPagesManage',
+            hidden: true,
+            component: () => import('@/views/system/staticpages/StaticPagesManage'),
+            meta: { title: '静态部署', hiddenHeaderContent: false }
+          },
           {
             path: '/system/about',
             name: 'About',

src/views/system/ToolList.vue

@@ -18,7 +18,7 @@
             <div slot="title">
               <a-icon type="experiment" /> 开发者选项
             </div>
-            <p>点击进入开发者选项页面</p>
+            <p style="min-height: 50px;">点击进入开发者选项页面</p>
             <a-button
               type="primary"
               style="float:right"
@@ -26,6 +26,29 @@
             >进入</a-button>
           </a-card>
         </a-col>
+        <a-col
+          :xl="6"
+          :lg="6"
+          :md="12"
+          :sm="24"
+          :xs="24"
+          :style="{ marginBottom: '12px' }"
+        >
+          <a-card
+            :bordered="false"
+            :bodyStyle="{ padding: '16px' }"
+          >
+            <div slot="title">
+              <a-icon type="html5" /> 静态部署
+            </div>
+            <p style="min-height: 50px;">生成静态页面并部署到 Github Pages 之类的托管平台</p>
+            <a-button
+              type="primary"
+              style="float:right"
+              @click="handleToStaticPagesManage"
+            >管理</a-button>
+          </a-card>
+        </a-col>
         <a-col
           :xl="6"
           :lg="6"
@@ -41,7 +64,7 @@
             <div slot="title">
               <a-icon type="hdd" /> 博客备份
             </div>
-            <p>支持备份全站数据</p>
+            <p style="min-height: 50px;">备份全站数据，支持下载到本地</p>
             <a-button
               type="primary"
               style="float:right"
@@ -64,7 +87,7 @@
             <div slot="title">
               <a-icon type="file-markdown" /> Markdown 文章导入
             </div>
-            <p>支持 Hexo/Jekyll 文章导入并解析元数据</p>
+            <p style="min-height: 50px;">支持 Hexo/Jekyll 文章导入并解析元数据</p>
             <a-button
               type="primary"
               style="float:right"
@@ -128,6 +151,9 @@ export default {
     handleToDeveloperOptions() {
       this.$router.push({ name: 'DeveloperOptions' })
     },
+    handleToStaticPagesManage() {
+      this.$router.push({ name: 'StaticPagesManage' })
+    },
     onUploadClose() {
       this.$refs.upload.handleClearFileList()
     }

src/views/system/developer/tabs/SettingsForm.vue

@@ -1,5 +1,8 @@
 <template>
-  <a-form layout="vertical">
+  <a-form
+    layout="vertical"
+    :wrapperCol="wrapperCol"
+  >
     <a-form-item label="开发者选项：">
       <a-switch v-model="options.developer_mode" />
     </a-form-item>
@@ -18,7 +21,13 @@ export default {
   name: 'SettingsForm',
   data() {
     return {
-      options: []
+      options: [],
+      wrapperCol: {
+        xl: { span: 8 },
+        lg: { span: 8 },
+        sm: { span: 12 },
+        xs: { span: 24 }
+      }
     }
   },
   created() {

src/views/system/developer/tabs/StaticStorage.vue

@@ -27,7 +27,7 @@
       </div>
       <div style="margin-top:15px">
         <a-table
-          :rowKey="record => record.name"
+          :rowKey="record => record.id"
           :columns="columns"
           :dataSource="sortedStatics"
           :pagination="false"

src/views/system/staticpages/StaticPagesManage.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <a-row>
+      <a-col :span="24">
+        <div class="card-container">
+          <a-tabs type="card">
+            <a-tab-pane key="environment">
+              <span slot="tab">
+                <a-icon type="folder" />文件列表
+              </span>
+              <StaticPagesList />
+            </a-tab-pane>
+            <a-tab-pane key="runtimeLogs">
+              <span slot="tab">
+                <a-icon type="appstore" />部署平台
+              </span>
+              <DeploySettingsForm />
+            </a-tab-pane>
+            <a-tab-pane key="optionsList">
+              <span slot="tab">
+                <a-icon type="setting" />配置
+              </span>
+              <SettingsForm />
+            </a-tab-pane>
+          </a-tabs>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<script>
+import StaticPagesList from './tabs/StaticPagesList'
+import DeploySettingsForm from './tabs/DeploySettingsForm'
+import SettingsForm from './tabs/SettingsForm'
+export default {
+  name: 'StaticPagesManage',
+  components: {
+    StaticPagesList,
+    DeploySettingsForm,
+    SettingsForm
+  }
+}
+</script>

src/views/system/staticpages/tabs/DeploySettingsForm.vue

@@ -0,0 +1,100 @@
+<template>
+  <a-form
+    layout="vertical"
+    :wrapperCol="wrapperCol"
+  >
+    <a-form-item label="部署平台：">
+      <a-select v-model="options.static_deploy_type">
+        <a-select-option
+          v-for="item in Object.keys(deployType)"
+          :key="item"
+          :value="item"
+        >{{ deployType[item].text }}</a-select-option>
+      </a-select>
+    </a-form-item>
+    <div
+      id="gitForm"
+      v-show="options.static_deploy_type === 'GIT'"
+    >
+      <a-form-item label="域名：">
+        <a-input v-model="options.git_static_deploy_domain" />
+      </a-form-item>
+      <a-form-item label="仓库：">
+        <a-input v-model="options.git_static_deploy_repository" />
+      </a-form-item>
+      <a-form-item label="分支：">
+        <a-input v-model="options.git_static_deploy_branch" />
+      </a-form-item>
+      <a-form-item label="仓库用户名：">
+        <a-input v-model="options.git_static_deploy_username" />
+      </a-form-item>
+      <a-form-item label="邮箱：">
+        <a-input v-model="options.git_static_deploy_email" />
+      </a-form-item>
+      <a-form-item label="Token：">
+        <a-input-password v-model="options.git_static_deploy_token" />
+      </a-form-item>
+      <a-form-item label="CNAME：">
+        <a-input v-model="options.git_static_deploy_cname" />
+      </a-form-item>
+    </div>
+    <div
+      id="netlifyForm"
+      v-show="options.static_deploy_type === 'NETLIFY'"
+    >
+      <a-form-item label="域名：">
+        <a-input v-model="options.netlify_static_deploy_domain" />
+      </a-form-item>
+      <a-form-item label="Site ID：">
+        <a-input v-model="options.netlify_static_deploy_site_id" />
+      </a-form-item>
+      <a-form-item label="Token：">
+        <a-input-password v-model="options.netlify_static_deploy_token" />
+      </a-form-item>
+    </div>
+    <a-form-item>
+      <a-button
+        type="primary"
+        @click="handleSaveOptions"
+      >保存</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+<script>
+import staticPageApi from '@/api/staticPage'
+import optionApi from '@/api/option'
+import { mapActions } from 'vuex'
+export default {
+  name: 'DeploySettingsForm',
+  data() {
+    return {
+      deployType: staticPageApi.deployType,
+      wrapperCol: {
+        xl: { span: 8 },
+        lg: { span: 8 },
+        sm: { span: 12 },
+        xs: { span: 24 }
+      },
+      options: []
+    }
+  },
+  mounted() {
+    this.loadFormOptions()
+  },
+  methods: {
+    ...mapActions(['loadOptions']),
+    loadFormOptions() {
+      optionApi.listAll().then(response => {
+        this.options = response.data.data
+      })
+    },
+    handleSaveOptions() {
+      optionApi.save(this.options).then(response => {
+        this.loadFormOptions()
+        this.loadOptions()
+        this.$message.success('保存成功！')
+      })
+    }
+  }
+}
+</script>

src/views/system/staticpages/tabs/SettingsForm.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    SettingsForm
+  </div>
+</template>
+<script>
+export default {
+  name: 'SettingsForm'
+}
+</script>

src/views/system/staticpages/tabs/StaticPagesList.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="option-tab-wrapper">
+    <a-card
+      :bordered="false"
+      :bodyStyle="{ padding: 0 }"
+    >
+      <div class="table-operator">
+        <a-button
+          type="primary"
+          icon="reload"
+          @click="handleGenerate"
+        >生成</a-button>
+        <a-button
+          icon="cloud-upload"
+          @click="handleDeploy"
+          :loading="deployLoading"
+          :disabled="deployLoading"
+        >
+          部署
+        </a-button>
+        <a-button
+          icon="sync"
+          @click="loadStaticPageList"
+          :loading="loading"
+          :disabled="loading"
+        >
+          刷新
+        </a-button>
+      </div>
+      <div style="margin-top:15px">
+        <a-table
+          :rowKey="record => record.id"
+          :columns="columns"
+          :dataSource="staticPages"
+          :pagination="false"
+          size="middle"
+          :loading="loading"
+        >
+          <span
+            slot="name"
+            slot-scope="name"
+          >
+            <ellipsis
+              :length="64"
+              tooltip
+            >
+              {{ name }}
+            </ellipsis>
+          </span>
+        </a-table>
+      </div>
+    </a-card>
+  </div>
+</template>
+<script>
+import staticPageApi from '@/api/staticPage'
+const columns = [
+  {
+    title: '文件名',
+    dataIndex: 'name',
+    scopedSlots: { customRender: 'name' }
+  }
+]
+export default {
+  name: 'StaticPagesList',
+  data() {
+    return {
+      columns: columns,
+      staticPages: [],
+      loading: false,
+      deployLoading: false
+    }
+  },
+  created() {
+    this.loadStaticPageList()
+  },
+  methods: {
+    loadStaticPageList() {
+      this.loading = true
+      staticPageApi.list().then(response => {
+        this.staticPages = response.data.data
+        this.loading = false
+      })
+    },
+    handleGenerate() {
+      this.loading = true
+      const hide = this.$message.loading('生成中...', 0)
+      staticPageApi
+        .generate()
+        .then(response => {
+          this.$message.success('生成成功！')
+        })
+        .finally(response => {
+          this.loadStaticPageList()
+          hide()
+        })
+    },
+    handleDeploy() {
+      this.deployLoading = true
+      const hide = this.$message.loading('部署中...', 0)
+      staticPageApi
+        .deploy()
+        .then(response => {
+          this.$message.success('部署成功！')
+        })
+        .finally(response => {
+          this.deployLoading = false
+          hide()
+        })
+    }
+  }
+}
+</script>