feat: post ui

open-isle-cli/src/components/PostEditor.vue

@@ -28,7 +28,7 @@ export default {
     onMounted(() => {
       vditorInstance.value = new Vditor(props.editorId, {
         placeholder: '请输入正文...',
-        height: 400,
+        height: 500,
         theme: 'classic',
         preview: {
           theme: { current: 'light' },
@@ -71,7 +71,9 @@ export default {
 
 <style scoped>
 .post-editor-container {
-  border: 1px solid #e2e2e2;
+  border-right: 1px solid #e2e2e2;
+  border-top: 1px solid #e2e2e2;
+  border-bottom: 1px solid #e2e2e2;
 }
 </style>
 

open-isle-cli/src/views/NewPostPageView.vue

@@ -2,7 +2,9 @@
   <div class="new-post-page">
     <div class="new-post-form">
       <input class="post-title-input" v-model="title" placeholder="标题" />
-      <PostEditor v-model="content" />
+      <div class="post-editor-container">
+        <PostEditor v-model="content" />
+      </div>
       <div class="post-submit" @click="submitPost">发布</div>
     </div>
   </div>
@@ -32,24 +34,25 @@ export default {
 .new-post-page {
   display: flex;
   justify-content: center;
-  padding: 20px;
 }
 
 .new-post-form {
   width: 100%;
-  max-width: 800px;
 }
 
 .post-title-input {
-  width: calc(100% - 20px);
-  padding: 10px;
-  margin-bottom: 20px;
   font-size: 18px;
-  border: 1px solid #ccc;
-  border-radius: 10px;
+  border: none;
+  outline: none;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  background-color: transparent;
+  font-size: 42px;
+  font-weight: bold;
 }
 
 .post-submit {
+  margin-left: 20px;
   margin-top: 20px;
   background-color: var(--primary-color);
   color: #fff;