From 8acbb1b57b594c69c3c5020af56cd10ac5982360 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Thu, 4 Apr 2019 16:45:43 +0800
Subject: [PATCH] ui build

---
 src/api/theme.js                         |   7 +
 src/components/setting/SettingDrawer.vue |  14 +-
 src/views/page/PageEdit.vue              | 162 +++++++++++++++++++-
 src/views/post/PostEdit.vue              | 181 +++++++++++++++++++----
 yarn.lock                                |  17 +++
 5 files changed, 335 insertions(+), 46 deletions(-)

diff --git a/src/api/theme.js b/src/api/theme.js
index 6a28884d..7581fdae 100644
--- a/src/api/theme.js
+++ b/src/api/theme.js
@@ -11,4 +11,11 @@ themeApi.listFiles = () => {
   })
 }
 
+themeApi.customTpls = () => {
+  return service({
+    url: `${baseUrl}/files/custom`,
+    method: 'get'
+  })
+}
+
 export default themeApi
diff --git a/src/components/setting/SettingDrawer.vue b/src/components/setting/SettingDrawer.vue
index 338b249e..7a5cbe79 100644
--- a/src/components/setting/SettingDrawer.vue
+++ b/src/components/setting/SettingDrawer.vue
@@ -3,12 +3,13 @@
     <a-drawer
       width="300"
       placement="right"
-      :closable="false"
+      :closable="true"
       @close="onClose"
       :visible="visible"
       :getContainer="() => $refs.settingDrawer"
       :style="{}"
       :mask="false"
+      :zIndex="9999"
     >
       <div class="setting-drawer-index-content">
         <div :style="{ marginBottom: '24px' }">
@@ -147,13 +148,6 @@
           </div>
         </div>
         <a-divider/>
-        <div :style="{ marginBottom: '24px' }">
-          <a-list :split="false">
-            <a-list-item>
-              <a-icon type="double-right" @click="toggle" class="iconClose"/>
-            </a-list-item>
-          </a-list>
-        </div>
       </div>
     </a-drawer>
   </div>
@@ -289,10 +283,6 @@ export default {
       font-size: 14px;
     }
   }
-  .iconClose {
-    font-size: 24px;
-    cursor: pointer;
-  }
 }
 
 .setting-drawer-index-handle {
diff --git a/src/views/page/PageEdit.vue b/src/views/page/PageEdit.vue
index 7b0d387b..3b030086 100644
--- a/src/views/page/PageEdit.vue
+++ b/src/views/page/PageEdit.vue
@@ -1,10 +1,166 @@
 <template>
-  <div class="page-header-index-wide"> Page Edit </div>
+  <div class="page-header-index-wide">
+    <a-row :gutter="12">
+      <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
+        <a-card>
+          <div style="margin-bottom: 16px">
+            <a-input
+              v-decorator="['title', { rules: [{ required: true, message: '请输入页面标题' }] }]"
+              size="large"
+              placeholder="请输入页面标题"
+            />
+          </div>
+          <a-button type="primary" @click="showDrawer">发布</a-button>
+        </a-card>
+
+        <a-card>
+          <div id="editor">
+            <mavon-editor v-model="value"/>
+          </div>
+        </a-card>
+      </a-col>
+
+      <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
+        <a-drawer
+          title="页面设置"
+          :width="drawerWidth"
+          :closable="true"
+          @close="onClose"
+          :visible="visible"
+        >
+          <div class="post-setting-drawer-content">
+            <div :style="{ marginBottom: '16px' }">
+              <h3 class="post-setting-drawer-title">基本设置</h3>
+              <div class="post-setting-drawer-item">
+                <a-form layout="vertical">
+                  <a-form-item label="页面路径：" :help="'https://localhost:8090/p/'+postUrl">
+                    <a-input v-model="postUrl"/>
+                  </a-form-item>
+                  <a-form-item label="页面密码：">
+                    <a-input type="password"/>
+                  </a-form-item>
+                  <a-form-item label="是否开启评论：">
+                    <a-select defaultValue="1">
+                      <a-select-option value="1">是</a-select-option>
+                      <a-select-option value="0">否</a-select-option>
+                    </a-select>
+                  </a-form-item>
+                  <a-form-item label="自定义模板：">
+                    <a-select>
+                      <a-select-option v-for="tpl in customTpls" :key="tpl" :value="tpl">{{ tpl }}</a-select-option>
+                    </a-select>
+                  </a-form-item>
+                </a-form>
+              </div>
+            </div>
+            <a-divider/>
+
+            <div :style="{ marginBottom: '16px' }">
+              <h3 class="post-setting-drawer-title">缩略图</h3>
+              <div class="post-setting-drawer-item">
+                <div class="post-thum">
+                  <img class="img" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
+                </div>
+              </div>
+            </div>
+            <a-divider/>
+          </div>
+          <div class="postControl">
+            <a-button style="marginRight: 8px" @click="onClose">保存草稿</a-button>
+            <a-button @click="onClose" type="primary">发布</a-button>
+          </div>
+        </a-drawer>
+      </a-col>
+    </a-row>
+  </div>
 </template>
 
 <script>
-export default {}
-</script>
+import { mavonEditor } from 'mavon-editor'
+import { mixin, mixinDevice } from '@/utils/mixin.js'
+import 'mavon-editor/dist/css/index.css'
+import tagApi from '@/api/theme'
+export default {
+  name: 'Editor',
+  components: {
+    mavonEditor
+  },
 
+  mixins: [mixin, mixinDevice],
+  data() {
+    return {
+      wrapperCol: {
+        xl: { span: 24 },
+        sm: { span: 24 },
+        xs: { span: 24 }
+      },
+      value: 'Hello World',
+      visible: false,
+      drawerWidth: '460',
+      postUrl: 'hello-world',
+      customTpls: []
+    }
+  },
+  mounted() {
+    if (this.isMobile()) {
+      this.drawerWidth = '100%'
+    } else {
+      this.drawerWidth = '460'
+    }
+  },
+  created() {
+    this.loadCustomTpls()
+  },
+  methods: {
+    loadCustomTpls() {
+      tagApi.customTpls().then(response => {
+        this.customTpls = response.data.data
+      })
+    },
+    showDrawer() {
+      this.visible = true
+    },
+    onClose() {
+      this.visible = false
+    }
+  }
+}
+</script>
 <style scoped>
+#editor {
+  margin: auto;
+  width: 100%;
+}
+
+.v-note-wrapper {
+  z-index: 1000;
+}
+
+.ant-card {
+  margin-bottom: 16px;
+}
+
+.ant-form-vertical .ant-form-item {
+  padding-bottom: 0;
+}
+
+.postControl {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  border-top: 1px solid rgb(232, 232, 232);
+  padding: 10px 16px;
+  text-align: right;
+  left: 0px;
+  background: rgb(255, 255, 255);
+  border-radius: 0px 0px 4px 4px;
+}
+
+.ant-form-vertical .ant-form-item {
+  padding-bottom: 0;
+}
+
+.post-thum .img {
+  width: 100%;
+}
 </style>
diff --git a/src/views/post/PostEdit.vue b/src/views/post/PostEdit.vue
index 7ab9ef45..d601249f 100644
--- a/src/views/post/PostEdit.vue
+++ b/src/views/post/PostEdit.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page-header-index-wide">
     <a-row :gutter="12">
-      <a-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
+      <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
         <a-card>
           <div style="margin-bottom: 16px">
             <a-input
@@ -10,13 +10,7 @@
               placeholder="请输入文章标题"
             />
           </div>
-          <div style="margin-bottom: 16px">
-            <a-input
-              addonBefore="https://ryanc.cc/archives/"
-              defaultValue="mysite"
-              style="width: 360px"
-            />
-          </div>
+          <a-button type="primary" @click="showDrawer">发布</a-button>
         </a-card>
 
         <a-card>
@@ -26,28 +20,79 @@
         </a-card>
       </a-col>
 
-      <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
-        <a-card title="发布">
-          <a-form layout="vertical">
-            <a-form-item label="开启评论：">
-              <a-select defaultValue="true">
-                <a-select-option value="true">是</a-select-option>
-                <a-select-option value="false">否</a-select-option>
-              </a-select>
-            </a-form-item>
-            <a-form-item label="文章密码：">
-              <a-input type="password"/>
-            </a-form-item>
-            <a-form-item>
-              <a-button type="primary">保存</a-button>
-            </a-form-item>
-          </a-form>
-        </a-card>
-        <a-card title="分类目录"></a-card>
-        <a-card title="标签"></a-card>
-        <a-card title="缩略图">
-          <img alt="example" src="https://ryanc.cc/material/screenshot.png" slot="cover">
-        </a-card>
+      <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
+        <a-drawer
+          title="文章设置"
+          :width="drawerWidth"
+          :closable="true"
+          @close="onClose"
+          :visible="visible"
+        >
+          <div class="post-setting-drawer-content">
+            <div :style="{ marginBottom: '16px' }">
+              <h3 class="post-setting-drawer-title">基本设置</h3>
+              <div class="post-setting-drawer-item">
+                <a-form layout="vertical">
+                  <a-form-item label="文章路径：" :help="'https://localhost:8090/archives/'+postUrl">
+                    <a-input v-model="postUrl"/>
+                  </a-form-item>
+                  <a-form-item label="文章密码：">
+                    <a-input type="password"/>
+                  </a-form-item>
+                  <a-form-item label="是否开启评论：">
+                    <a-select defaultValue="1">
+                      <a-select-option value="1">是</a-select-option>
+                      <a-select-option value="0">否</a-select-option>
+                    </a-select>
+                  </a-form-item>
+                </a-form>
+              </div>
+            </div>
+            <a-divider/>
+
+            <div :style="{ marginBottom: '16px' }">
+              <h3 class="post-setting-drawer-title">分类目录</h3>
+              <div class="post-setting-drawer-item">
+                <a-tree checkable :treeData="treeData" :defaultExpandAll="true">
+                  <span slot="title0010" style="color: #1890ff">sss</span>
+                </a-tree>
+              </div>
+            </div>
+            <a-divider/>
+
+            <div :style="{ marginBottom: '16px' }">
+              <h3 class="post-setting-drawer-title">标签</h3>
+              <div class="post-setting-drawer-item">
+                <a-form layout="vertical">
+                  <a-form-item>
+                    <a-select mode="tags" placeholder="选择或输入标签">
+                      <a-select-option
+                        v-for="tag in tags"
+                        :key="tag.id"
+                        :value="tag.id.toString()"
+                      >{{ tag.name }}</a-select-option>
+                    </a-select>
+                  </a-form-item>
+                </a-form>
+              </div>
+            </div>
+            <a-divider/>
+
+            <div :style="{ marginBottom: '16px' }">
+              <h3 class="post-setting-drawer-title">缩略图</h3>
+              <div class="post-setting-drawer-item">
+                <div class="post-thum">
+                  <img class="img" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
+                </div>
+              </div>
+            </div>
+            <a-divider/>
+          </div>
+          <div class="postControl">
+            <a-button style="marginRight: 8px" @click="onClose">保存草稿</a-button>
+            <a-button @click="onClose" type="primary">发布</a-button>
+          </div>
+        </a-drawer>
       </a-col>
     </a-row>
   </div>
@@ -55,12 +100,38 @@
 
 <script>
 import { mavonEditor } from 'mavon-editor'
+import { mixin, mixinDevice } from '@/utils/mixin.js'
 import 'mavon-editor/dist/css/index.css'
+import tagApi from '@/api/tag'
+const treeData = [
+  {
+    title: '学习记录',
+    key: '0-0',
+    children: [
+      {
+        title: 'Java 学习',
+        key: '0-0-0',
+        children: [{ title: 'JVM', key: '0-0-0-0' }, { title: 'Spring', key: '0-0-0-1' }]
+      },
+      {
+        title: 'PHP 学习',
+        key: '0-0-1',
+        children: [{ key: '0-0-1-0', title: 'Composer' }, { key: '0-0-1-1', title: 'MySQL' }]
+      }
+    ]
+  },
+  {
+    title: '生活记录',
+    key: '1-0'
+  }
+]
 export default {
   name: 'Editor',
   components: {
     mavonEditor
   },
+
+  mixins: [mixin, mixinDevice],
   data() {
     return {
       wrapperCol: {
@@ -68,7 +139,35 @@ export default {
         sm: { span: 24 },
         xs: { span: 24 }
       },
-      value: 'Hello World'
+      value: 'Hello World',
+      visible: false,
+      drawerWidth: '460',
+      postUrl: 'hello-world',
+      tags: [],
+      treeData
+    }
+  },
+  mounted() {
+    if (this.isMobile()) {
+      this.drawerWidth = '100%'
+    } else {
+      this.drawerWidth = '460'
+    }
+  },
+  created() {
+    this.loadTags()
+  },
+  methods: {
+    loadTags() {
+      tagApi.listAll(true).then(response => {
+        this.tags = response.data.data
+      })
+    },
+    showDrawer() {
+      this.visible = true
+    },
+    onClose() {
+      this.visible = false
     }
   }
 }
@@ -90,4 +189,24 @@ export default {
 .ant-form-vertical .ant-form-item {
   padding-bottom: 0;
 }
+
+.postControl {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  border-top: 1px solid rgb(232, 232, 232);
+  padding: 10px 16px;
+  text-align: right;
+  left: 0px;
+  background: rgb(255, 255, 255);
+  border-radius: 0px 0px 4px 4px;
+}
+
+.ant-form-vertical .ant-form-item {
+  padding-bottom: 0;
+}
+
+.post-thum .img{
+  width: 100%;
+}
 </style>
diff --git a/yarn.lock b/yarn.lock
index e6282cb8..c10b12b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2766,6 +2766,11 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
+codemirror@^5.22.0:
+  version "5.45.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.45.0.tgz#db5ebbb3bf44028c684053f3954d011efcec27ad"
+  integrity sha512-c19j644usCE8gQaXa0jqn2B/HN9MnB2u6qPIrrhrMkB+QAP42y8G4QnTwuwbVSoUS1jEl7JU9HZMGhCDL0nsAw==
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -10346,6 +10351,13 @@ vue-clipboard2@^0.3.0:
   dependencies:
     clipboard "^2.0.0"
 
+vue-codemirror-lite@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/vue-codemirror-lite/-/vue-codemirror-lite-1.0.4.tgz#48a5cd7d17c0914503c8cd9d9b56b438e49c3410"
+  integrity sha1-SKXNfRfAkUUDyM2dm1a0OOScNBA=
+  dependencies:
+    codemirror "^5.22.0"
+
 vue-cropper@0.4.9:
   version "0.4.9"
   resolved "https://registry.yarnpkg.com/vue-cropper/-/vue-cropper-0.4.9.tgz#fe650f32516ecf29014bbd4a9079191c8dc5a5ae"
@@ -10375,6 +10387,11 @@ vue-eslint-parser@^5.0.0:
     esquery "^1.0.1"
     lodash "^4.17.11"
 
+vue-fragment@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/vue-fragment/-/vue-fragment-1.5.0.tgz#7739463b7680633f2b671aec9f1bfdd9a436da33"
+  integrity sha512-nobmbbOSOx59fm7U00BDz14Yvqitwx7NPQGYDTKg3+dNDGTDCRNy/q2kfr5hV4S0l4fQG0kvC+rbCmENLmHUSA==
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"