feat: add new post creation view

open-isle-cli/src/assets/global.css

@@ -52,4 +52,24 @@ body {
 .comment-editor-container .vditor-ir,
 .comment-editor-container .vditor-textarea {
   background: transparent !important;
-}
+}
+.post-editor-container .vditor {
+  --panel-background-color: transparent;
+  --border-color: transparent;
+  --textarea-background-color: transparent;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.post-editor-container .vditor-toolbar {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.post-editor-container .vditor-content,
+.post-editor-container .vditor-wysiwyg,
+.post-editor-container .vditor-ir,
+.post-editor-container .vditor-textarea {
+  background: transparent !important;
+}

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

@@ -14,6 +14,10 @@
           <i class="menu-item-icon fas fa-info-circle"></i>
           <span class="menu-item-text">关于</span>
         </router-link>
+        <router-link class="menu-item" exact-active-class="selected" to="/new-post">
+          <i class="menu-item-icon fas fa-edit"></i>
+          <span class="menu-item-text">发帖</span>
+        </router-link>
       </div>
     </nav>
   </transition>

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

@@ -0,0 +1,75 @@
+<template>
+  <div class="post-editor-container">
+    <div :id="editorId" ref="vditorElement"></div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue'
+import Vditor from 'vditor'
+import 'vditor/dist/index.css'
+
+export default {
+  name: 'PostEditor',
+  emits: ['update:modelValue'],
+  props: {
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    editorId: {
+      type: String,
+      default: () => 'post-editor-' + Math.random().toString(36).slice(2)
+    }
+  },
+  setup(props, { emit }) {
+    const vditorInstance = ref(null)
+
+    onMounted(() => {
+      vditorInstance.value = new Vditor(props.editorId, {
+        placeholder: '请输入正文...',
+        height: 400,
+        theme: 'classic',
+        preview: {
+          theme: { current: 'light' },
+          actions: [],
+          markdown: { toc: false }
+        },
+        toolbar: [
+          'emoji',
+          'bold',
+          'italic',
+          'strike',
+          '|',
+          'list',
+          'line',
+          'quote',
+          'code',
+          'inline-code',
+          '|',
+          'undo',
+          'redo',
+          '|',
+          'link',
+          'image'
+        ],
+        toolbarConfig: { pin: true },
+        cache: { enable: false },
+        input(value) {
+          emit('update:modelValue', value)
+        }
+      })
+      vditorInstance.value.setValue(props.modelValue)
+    })
+
+    return {}
+  }
+}
+</script>
+
+<style scoped>
+.post-editor-container {
+  border: 1px solid #e2e2e2;
+}
+</style>
+

open-isle-cli/src/router/index.js

@@ -5,6 +5,7 @@ import AboutPageView from '../views/AboutPageView.vue'
 import PostPageView from '../views/PostPageView.vue'
 import LoginPageView from '../views/LoginPageView.vue'
 import SignupPageView from '../views/SignupPageView.vue'
+import NewPostPageView from '../views/NewPostPageView.vue'
 
 const routes = [
   {
@@ -22,6 +23,11 @@ const routes = [
     name: 'about',
     component: AboutPageView
   },
+  {
+    path: '/new-post',
+    name: 'new-post',
+    component: NewPostPageView
+  },
   {
     path: '/posts/:id',
     name: 'post',

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

@@ -0,0 +1,66 @@
+<template>
+  <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-submit" @click="submitPost">发布</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+import PostEditor from '../components/PostEditor.vue'
+
+export default {
+  name: 'NewPostPageView',
+  components: { PostEditor },
+  setup() {
+    const title = ref('')
+    const content = ref('')
+    const submitPost = () => {
+      console.log('title:', title.value)
+      console.log('content:', content.value)
+      // 在此处可以调用接口提交帖子
+    }
+    return { title, content, submitPost }
+  }
+}
+</script>
+
+<style scoped>
+.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;
+}
+
+.post-submit {
+  margin-top: 20px;
+  background-color: var(--primary-color);
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 10px;
+  width: fit-content;
+  cursor: pointer;
+}
+
+.post-submit:hover {
+  background-color: var(--primary-color-hover);
+}
+</style>
+