add nwe

package.json

@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
+    "@kangc/v-md-editor": "^2.3.18",
     "ant-design-vue": "^4.2.1",
     "aplayer": "^1.10.1",
     "axios": "^1.7.2",

src/api/blog.ts

@@ -0,0 +1,13 @@
+// 博客管理
+export interface blogInterface {
+    key: string,
+    blogtitle: string,
+    create_at: Date,
+    readnum: number,
+    readminite: number,
+    wordcount: number,
+    img: string,
+    blogcontent: string,
+    typename: string,
+    labelnames: string
+  }

src/components/blogs/ceshi.vue

@@ -1,11 +1,13 @@
 <template>
-    <div>{{  }}</div>
+  <v-md-editor v-model="text" height="400px"></v-md-editor>
 </template>
 
-<script setup lang='ts'>
-  
+<script>
+export default {
+  data() {
+    return {
+      text: `<h1 align="center">Markdown Editor built on Vue</h1>`,
+    };
+  },
+};
 </script>
-  
-<style>
-  
-</style>

src/main.ts

@@ -6,8 +6,43 @@ import router from './router'
 import Antd from 'ant-design-vue';
 import Simplebar from 'simplebar-vue';
 import 'simplebar-vue/dist/simplebar.min.css';
+import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor';
+import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
+import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
+import '@kangc/v-md-editor/lib/theme/style/github.css';
+
+// highlightjs
+import hljs from 'highlight.js';
+
+// codemirror 编辑器的相关资源
+import Codemirror from 'codemirror';
+// mode
+import 'codemirror/mode/markdown/markdown';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+import 'codemirror/mode/vue/vue';
+// edit
+import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/edit/closetag';
+import 'codemirror/addon/edit/matchbrackets';
+// placeholder
+import 'codemirror/addon/display/placeholder';
+// active-line
+import 'codemirror/addon/selection/active-line';
+// scrollbar
+import 'codemirror/addon/scroll/simplescrollbars';
+import 'codemirror/addon/scroll/simplescrollbars.css';
+// style
+import 'codemirror/lib/codemirror.css';
+
+VMdEditor.Codemirror = Codemirror;
+VMdEditor.use(githubTheme, {
+  Hljs: hljs,
+});
 const app = createApp(App)
 app.component('Simplebar', Simplebar);
+app.use(VMdEditor);
 app.use(createPinia())
 app.use(router)
 app.use(Antd)

src/router/admin.ts

@@ -16,6 +16,17 @@ const adminRoute:Array<RouteRecordRaw>=[
                 name:"blogmanage",
                 component:()=>import("@/views/admin/blogmange/BlogManageView.vue")
             },
+            {
+                path: "blogmanage/add",
+                component: () => import("@/views/admin/blogmange/BlogFormView.vue"),
+                meta: { requiresAuth: true }
+            },
+            {
+            path: "blogmanage/update/:id",
+            component: () => import("@/views/admin/blogmange/BlogFormView.vue"),
+            meta: { requiresAuth: true },
+            props:true
+            },
             {
                 path:"classticmanage",
                 name:"classticmanage",

src/stores/index.ts

@@ -3,8 +3,10 @@ import { defineStore } from 'pinia'
 import { get } from "@/tools/request"
 import dayjs from 'dayjs';
 import { useRouter } from "vue-router"
-
+import type { blogInterface } from '@/api/blog';
 const router = useRouter()
+// 博客列表
+const bloglist = ref<blogInterface[]>([])
 
 export const useAuthStore = defineStore("auth", () => {
   const tokenValue = ref("")
@@ -81,19 +83,7 @@ export const comLinkContentStore = defineStore("comlink", () => {
 
 // 博客列表接口
 export const blogContentStore = defineStore("blog", () => {
-  interface blogInterface {
-    key: string,
-    blogtitle: string,
-    create_at: Date,
-    readnum: number,
-    readminite: number,
-    wordcount: number,
-    img: string,
-    blogcontent: string,
-    typename: string,
-    labelnames: string
-  }
-  const bloglist = ref<blogInterface[]>([])
+
   async function blogList() {
     try {
       const response = await get("/blogs/list");
@@ -173,31 +163,3 @@ export const blogSearchStore = defineStore('blogsearch', () => {
   return { searchValue, onChange, blogSearch };
 });
 
-// 语录列表接口
-export const classticContentStore = defineStore("classtic", () => {
-  interface classticInterface {
-    key: string,
-    header: string,
-    text: string,
-    descr: string
-  }
-  const classticlist = ref<classticInterface[]>([])
-  async function classticList() {
-    try {
-      const response = await get("/classtics/list")
-      if (response) {
-        classticlist.value = response.data.data.map((items: any, index: any) => ({
-          key: (index + 1).toString(),
-          header: items.header,
-          text: items.text,
-          descr: items.descr
-        }))
-      } else {
-        console.log("classtic is not exit")
-      }
-    } catch (error) {
-      console.log("classtic is error")
-    }
-  }
-  return { classticList, classticlist }
-})

src/views/admin/blogmange/BlogFormView.vue

@@ -62,6 +62,12 @@ const rules: Record<string, Rule[]> = {
     ],
 };
 const content = ref();
+interface TypeStateData{
+    id:number,
+    key:string,
+    typename:string,
+    descr:string
+}
 const typedata = ref<TypeStateData[]>([])
 onMounted(async () => {
     get("/types/list").then(response => {

src/views/admin/blogmange/BlogManageView.vue

@@ -40,13 +40,12 @@ import 'dayjs/locale/zh-cn';
 import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
 import dayjs from 'dayjs';
 import { useRouter } from "vue-router"
-import { get, remove } from '@/tools/request';
 import { message } from 'ant-design-vue';
 import { blogContentStore,blogSearchStore } from '@/stores'; 
 dayjs.locale('zh-cn');
+const router = useRouter()
 const blogContent=blogContentStore()
 const blogSearch=blogSearchStore()
-const router = useRouter()
 const open = ref<boolean>(false);
 const toDelete = reactive<{ key: string, id: number }>({
     key: '',

src/views/blog/HomePageView.vue

@@ -7,25 +7,25 @@
                     <div class="tag-group">
                         <a-tag color="#E6E6FA">
                             <template #icon>
-                                <RiLiLined />
+                                <component :is=iconComponents.RiLiLined />
                             </template>
                             {{ mainStatistic.mainDate }}
                         </a-tag>
                         <a-tag color="#6495ED">
                             <template #icon>
-                                <YanJingLined />
+                                <component :is=iconComponents.YanJingLined />
                             </template>
                             {{ mainStatistic.mainWatchCount }}
                         </a-tag>
                         <a-tag color="#B0C4DE">
                             <template #icon>
-                                <XieZiLined />
+                                <component :is=iconComponents.XieZiLined />
                             </template>
                             字数≈{{ mainStatistic.mainWordCount }}字
                         </a-tag>
                         <a-tag color="#20B2AA">
                             <template #icon>
-                                <YueDuLined />
+                                <component :is=iconComponents.YueDuLined />
                             </template>
                             阅读时长≈{{ mainStatistic.mainReadCount }}分
                         </a-tag>
@@ -50,6 +50,7 @@
 
 <script setup lang='ts'>
 import { reactive } from 'vue';
+import iconComponents from "@/assets/index"
 const mainStatistic = reactive<{ mainDate: string, mainWatchCount: string, mainWordCount: string, mainReadCount: string }>({
     mainDate: "2024-06-11",
     mainWatchCount: "9999",