feat(编辑器): 增强文章编辑页面功能并添加样式

- 在PostEditView.vue中添加标题输入框和分类选择器
- 配置编辑器工具栏选项，添加撤销/重做、图片、预览和全屏功能
- 为输入框和选择器添加过渡动画和悬停效果
- 引入自定义CSS文件用于编辑器暗色主题
- 重构main.ts中的编辑器导入和初始化代码

src/main.ts

@@ -6,17 +6,18 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import { router } from './router'
 
-import VMdEditor from '@kangc/v-md-editor';
-import '@kangc/v-md-editor/lib/style/base-editor.css';
+import VMdEditor from '@kangc/v-md-editor'
+import '@kangc/v-md-editor/lib/style/base-editor.css'
 
-import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
-import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
+import githubTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
+import '@kangc/v-md-editor/lib/theme/style/vuepress.css'
 
-import Prism from 'prismjs';
+import './assets/editordark.css'
+import './assets/vuepressdark.css'
 
-VMdEditor.use(vuepressTheme, {
-  Prism
-});
+import Prism from 'prismjs'
+
+VMdEditor.use(githubTheme, { Prism })
 
 const app = createApp(App)
 

src/views/PostEditView.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
+import BetterSelect from '@/components/BetterSelect.vue'
 
-import { ref } from 'vue'
+const editorConfig = {
+  leftToolbar: 'undo redo | image',
+  rightToolbar: 'preview fullscreen',
+}
+
+const title = ref('')
 
 const text = ref(`
 # 这是一个标题
@@ -13,10 +20,101 @@ print('Hello, World!')
 
 `)
 
+const titleShadowRadius = computed(() => (title.value.trim().length > 0 ? '8px' : ''))
+
+const selected = ref('')
+
+const options = [
+  {label: "技术", value: "技术"},
+  {label: "日志", value: "日志"},
+  {label: "随笔", value: "随笔"},
+  {label: "其他", value: "其他"},
+]
+
 </script>
 
 <template>
-  <v-md-editor v-model="text" height="400px"/>
+  <div>
+    <div class="post-item" style="padding: 12px 30px; overflow: hidden">
+      <div>
+        <input class="p-input" type="text" placeholder="博文标题" v-model="title" />
+      </div>
+      <div style="display: flex; align-items: center; gap: 12px">
+        <better-select :options="options" v-model="selected" placeholder="类型" width="64px"/>
+      </div>
+    </div>
+    <div class="post-item" style="padding: 0; overflow: hidden">
+      <v-md-editor
+        v-model="text"
+        height="400px"
+        :left-toolbar="editorConfig.leftToolbar"
+        :right-toolbar="editorConfig.rightToolbar"
+      />
+    </div>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.p-input {
+  width: 100%;
+  border: none;
+  font-size: 20px;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  background: linear-gradient(to right, var(--text-color), var(--text-color)) no-repeat left bottom;
+  background-size: 0 2px;
+  color: var(--text-color);
+  transition: all 0.3s;
+
+  font-weight: bold;
+}
+
+.p-input::placeholder {
+  color: var(--muted-text-color);
+}
+
+
+.p-input:focus {
+  outline: none;
+  background-size: 100% 2px;
+  text-shadow: var(--secondary-text-color) 0 0 v-bind(titleShadowRadius);
+}
+
+.p-select {
+  width: 64px;
+  border: none;
+  font-size: 16px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 8px;
+  background: linear-gradient(to right, var(--text-color), var(--text-color)) no-repeat left bottom;
+  background-size: 0 2px;
+  color: var(--text-color);
+  transition: all 0.3s;
+  appearance: none;
+  text-align: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.p-select:hover {
+  background-size: 100% 2px;
+}
+
+.p-select option {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  text-align: center;
+}
+
+.p-select option:checked {
+  background-color: var(--muted-text-color);
+}
+
+.p-select option:hover {
+  background-color: var(--muted-text-color);
+}
+
+
+</style>