feat: add new post page mobile

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

@@ -72,6 +72,10 @@ body {
   box-shadow: none !important;
 } */
 
+/* .vditor-toolbar {
+  position: relative !important;
+} */
+
 /*************************
  * Markdown 渲染样式
  *************************/
@@ -173,6 +177,10 @@ body {
 }
 
 @media (max-width: 768px) {
+  .vditor-toolbar {
+    display: none;
+  }
+
   .about-content h1,
   .info-content-text h1 {
     font-size: 20px;

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

@@ -23,6 +23,7 @@ import Vditor from 'vditor'
 import { themeState } from '../utils/theme'
 import 'vditor/dist/index.css'
 import LoginOverlay from './LoginOverlay.vue'
+import { isMobile } from '../utils/screen'
 
 export default {
   name: 'CommentEditor',
@@ -72,7 +73,7 @@ export default {
     onMounted(() => {
       vditorInstance.value = new Vditor(props.editorId, {
         placeholder: '说点什么...',
-        height: 200,
+        height: isMobile.value ? 'auto' : 200,
         theme: getEditorTheme(),
         preview: {
           actions: [],
@@ -175,4 +176,10 @@ export default {
 .comment-submit:hover {
   background-color: var(--primary-color-hover);
 }
+
+@media (max-width: 768px) {
+  .comment-editor-container {
+    margin-bottom: 10px;
+  }
+}
 </style>

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

@@ -93,7 +93,7 @@ export default {
   name: 'BaseDropdown',
   props: {
     modelValue: { type: [Array, String, Number], default: () => [] },
-    placeholder: { type: String, default: '请选择' },
+    placeholder: { type: String, default: '返回' },
     multiple: { type: Boolean, default: false },
     fetchOptions: { type: Function, required: true },
     remote: { type: Boolean, default: false },

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

@@ -266,7 +266,6 @@ export default {
 }
 
 .post-title-input {
-  font-size: 18px;
   border: none;
   outline: none;
   padding-top: 20px;
@@ -341,18 +340,42 @@ export default {
 .post-options-left {
   display: flex;
   gap: 10px;
+  flex-wrap: wrap;
 }
 
 .post-options-right {
+  margin-top: 10px;
   display: flex;
   align-items: center;
   gap: 30px;
+  row-gap: 10px;
+  flex-wrap: wrap;
 }
 
 .post-options {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
   margin-top: 20px;
 }
+
+@media (max-width: 768px) {
+  .new-post-page {
+    width: calc(100vw - 20px);
+    padding-right: 10px;
+    padding-left: 10px;
+    overflow-x: hidden;
+  }
+
+  .post-title-input {
+    font-size: 24px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .post-options {
+    margin-top: 10px;
+  }
+}
 </style>