feat: 优化md优化

components/markdownRender.vue

@@ -63,7 +63,7 @@ const VNodeArr = computed(() => {
             },
         }
     )
-    const res = h2v.rander(renderedData)
+    const res = h2v.render(renderedData)
     return {
         setup: () => {
             return () => res
@@ -92,11 +92,167 @@ const VNodeArr = computed(() => {
 
     hr {
         display: block;
-        margin: 0;
+        margin: 1em 0;
+        padding-top: 1em;
         unicode-bidi: isolate;
         overflow: hidden;
-        border-style: inset;
-        border-width: 0;
+        height: auto;
+    }
+
+    /* 恢复标题样式 */
+    h1, h2, h3, h4, h5, h6 {
+        margin-top: 1em;
+        margin-bottom: 0.5em;
+        font-weight: bold;
+        line-height: 1.25;
+        color: #111;
+    }
+    
+    h1 {
+        font-size: 2em;
+        border-bottom: 1px solid #eaecef;
+        padding-bottom: 0.3em;
+    }
+    
+    h2 {
+        font-size: 1.5em;
+        border-bottom: 1px solid #eaecef;
+        padding-bottom: 0.3em;
+    }
+    
+    h3 {
+        font-size: 1.25em;
+    }
+    
+    h4 {
+        font-size: 1em;
+    }
+    
+    h5 {
+        font-size: 0.875em;
+    }
+    
+    h6 {
+        font-size: 0.85em;
+        color: #6a737d;
+    }
+
+    /* 恢复段落样式 */
+    p {
+        margin-top: 0;
+        margin-bottom: 1em;
+        line-height: 1.6;
+    }
+
+    /* 恢复列表样式 */
+    ul, ol {
+        margin-top: 0;
+        margin-bottom: 1em;
+        padding-left: 2em;
+    }
+    
+    ul {
+        list-style-type: disc;
+    }
+    
+    ol {
+        list-style-type: decimal;
+    }
+    
+    li {
+        margin-bottom: 0.25em;
+    }
+    
+    li > ul, li > ol {
+        margin-top: 0.25em;
+        margin-bottom: 0;
+    }
+
+    /* 恢复链接样式 */
+    a {
+        color: #0366d6;
+        text-decoration: none;
+        
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    /* 恢复引用块样式 */
+    blockquote {
+        margin: 0 0 1em;
+        padding: 0 1em;
+        color: #6a737d;
+        border-left: 0.25em solid #dfe2e5;
+        
+        > :first-child {
+            margin-top: 0;
+        }
+        
+        > :last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    /* 恢复表格样式 */
+    table {
+        display: block;
+        width: 100%;
+        overflow: auto;
+        margin-top: 0;
+        margin-bottom: 1em;
+        border-spacing: 0;
+        border-collapse: collapse;
+    }
+    
+    th {
+        font-weight: 600;
+        padding: 6px 13px;
+        border: 1px solid #dfe2e5;
+    }
+    
+    td {
+        padding: 6px 13px;
+        border: 1px solid #dfe2e5;
+    }
+    
+    tr {
+        background-color: #fff;
+        border-top: 1px solid #c6cbd1;
+        
+        &:nth-child(2n) {
+            background-color: #f6f8fa;
+        }
+    }
+
+    /* 恢复行内代码样式 */
+    code:not(pre code) {
+        padding: 0.2em 0.4em;
+        margin: 0;
+        font-size: 85%;
+        background-color: rgba(27, 31, 35, 0.05);
+        border-radius: 3px;
+        font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+    }
+
+    /* 恢复图片样式 */
+    img {
+        max-width: 100%;
+        box-sizing: border-box;
+        background-color: #fff;
+    }
+
+    /* 恢复预格式化文本样式 */
+    pre {
+        padding: 16px;
+        overflow: auto;
+        font-size: 85%;
+        line-height: 1.45;
+        background-color: #f6f8fa;
+        border-radius: 3px;
+        margin-top: 0;
+        margin-bottom: 1em;
+        word-wrap: normal;
     }
 }
 </style>

components/user/postEditor.vue

@@ -8,7 +8,7 @@
                 </el-input>
             </el-col>
             <el-col :span="12">
-                <el-input-tag v-model:model-value="tags" placeholder="添加标签" :disabled="disabled"/>
+                <el-input-tag v-model:model-value="tags" placeholder="添加标签" :disabled="disabled" />
             </el-col>
         </el-row>
         <el-row>
@@ -18,7 +18,31 @@
                 </el-input>
             </el-col>
         </el-row>
-        <el-input type="textarea" v-model:model-value="content" placeholder="content" :autosize="{ minRows: 15 }" :disabled="disabled"/>
+        <el-row>
+            <el-col :span="16"></el-col>
+            <el-col :span="8">
+                <div
+                    class="switch-button overflow-hidden  z-10 border-0 border-gray-300 rounded-bl-sm rounded-tr-sm flex select-none">
+                    <div class="switch-button-item" :class="{ 'switch-button-item-active': isEditing }"
+                        @click="isEditing = true">
+                        编辑
+                    </div>
+                    <div class="switch-button-item" :class="{ 'switch-button-item-active': !isEditing }"
+                        @click="isEditing = false">
+                        预览
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col>
+                <el-input v-if="isEditing" type="textarea" v-model:model-value="content" placeholder="content"
+                    :autosize="{ minRows: 15 }" :disabled="disabled" />
+                <div class=" border-1 border-gray-300 rounded-sm p-2" v-else>
+                    <markdown-render :data="content ?? ''" />
+                </div>
+            </el-col>
+        </el-row>
     </div>
 </template>
 
@@ -33,6 +57,8 @@ const summary = defineModel<string>('summary')
 const tags = defineModel<string[]>('tags')
 const content = defineModel<string>('content')
 
+const isEditing = ref(true)
+
 </script>
 
 <style scoped>
@@ -42,3 +68,30 @@ const content = defineModel<string>('content')
     gap: 5px;
 }
 </style>
+
+<style lang="scss" scoped>
+.switch-button {
+
+    &-item {
+        width: 50%;
+        height: 100%;
+        background-color: #fff;
+        cursor: pointer;
+        transition: all .15s ease;
+        padding: 0 5px;
+
+        &:hover {
+            background-color: #f0f0f0;
+        }
+
+        &-active {
+            color: #0077ff;
+            background-color: #d3e7ff;
+
+            &:hover {
+                background-color: #c3e0ff;
+            }
+        }
+    }
+}
+</style>

pages/user/main/index.vue

@@ -1,13 +1,174 @@
 <template>
-    <div class=" flex justify-center items-center h-full">
-        主页还没做
+    <div class="p-6">
+        <div class="bg-white rounded-lg shadow-md p-6">
+            <h1 class="text-2xl font-bold mb-6 text-gray-800">系统信息</h1>
+            
+            <div v-if="isLoading" class="flex justify-center items-center h-40">
+                <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
+            </div>
+            
+            <div v-else-if="error" class="text-red-500 text-center">
+                {{ error }}
+            </div>
+            
+            <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <!-- 系统信息 -->
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <h2 class="text-lg font-semibold mb-3 text-gray-700">操作系统</h2>
+                    <div class="space-y-2">
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">平台:</span>
+                            <span class="font-medium">{{ systemInfo?.system?.platform }}</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">版本:</span>
+                            <span class="font-medium">{{ systemInfo?.system?.release }}</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">主机名:</span>
+                            <span class="font-medium">{{ systemInfo?.system?.hostname }}</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">Node.js版本:</span>
+                            <span class="font-medium">{{ systemInfo?.node }}</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 硬件信息 -->
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <h2 class="text-lg font-semibold mb-3 text-gray-700">硬件信息</h2>
+                    <div class="space-y-2">
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">CPU型号:</span>
+                            <span class="font-medium">{{ systemInfo?.hardware?.cpu?.model }}</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">CPU核心数:</span>
+                            <span class="font-medium">{{ systemInfo?.hardware?.cpu?.cores }}</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">CPU使用率:</span>
+                            <div class="w-32 bg-gray-200 rounded-full h-4 overflow-hidden">
+                                <div class="bg-blue-600 h-4 rounded-full" :style="`width: ${performanceData?.cpu?.usage < 5 ? 5 : performanceData?.cpu?.usage}%`"></div>
+                            </div>
+                            <span class="font-medium">{{ performanceData?.cpu?.usage }}%</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">内存使用情况:</span>
+                            <span class="font-medium">{{ performanceData?.memory?.used || systemInfo?.hardware?.memory?.used }} / {{ performanceData?.memory?.total || systemInfo?.hardware?.memory?.total }}</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">内存使用率:</span>
+                            <div class="w-32 bg-gray-200 rounded-full h-4 overflow-hidden">
+                                <div class="bg-green-600 h-4 rounded-full" :style="`width: ${performanceData?.memory?.percent}%`"></div>
+                            </div>
+                            <span class="font-medium">{{ performanceData?.memory?.percent }}%</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="mt-4 text-gray-500 text-sm flex justify-between">
+                <div>性能数据更新时间: {{ performanceUpdated }}</div>
+                <div>系统数据更新时间: {{ lastUpdated }}</div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
+const systemInfo = ref<any>(null);
+const performanceData = ref<any>(null);
+const isLoading = ref(true);
+const error = ref('');
+const lastUpdated = ref('');
+const performanceUpdated = ref('');
 
+// 格式化时间
+const formatTime = () => {
+    const now = new Date();
+    const hours = now.getHours().toString().padStart(2, '0');
+    const minutes = now.getMinutes().toString().padStart(2, '0');
+    const seconds = now.getSeconds().toString().padStart(2, '0');
+    return `${hours}:${minutes}:${seconds}`;
+};
+
+// 获取系统信息
+const fetchSystemInfo = async () => {
+    try {
+        if (!systemInfo.value) {
+            isLoading.value = true;
+        }
+        error.value = '';
+        
+        const { data } = await useFetch('/api/system/info');
+        const response = data.value as any;
+        
+        if (response && response.success) {
+            systemInfo.value = response.data;
+            
+            // 如果还没有性能数据，初始化它
+            if (!performanceData.value) {
+                performanceData.value = {
+                    cpu: {
+                        usage: response.data.hardware.cpu.usage
+                    },
+                    memory: response.data.hardware.memory
+                };
+            }
+            
+            lastUpdated.value = formatTime();
+        } else {
+            error.value = response?.message || '获取系统信息失败';
+        }
+    } catch (err) {
+        error.value = '请求发生错误';
+        console.error('Error fetching system info:', err);
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+// 获取性能数据（CPU和内存使用率）
+const fetchPerformanceData = async () => {
+    try {
+        const { data } = await useFetch('/api/system/performance');
+        const response = data.value as any;
+        
+        if (response && response.success) {
+            performanceData.value = response.data;
+            performanceUpdated.value = formatTime();
+        }
+    } catch (err) {
+        console.error('Error fetching performance data:', err);
+    }
+};
+
+// 首次获取数据
+onMounted(() => {
+    // 获取完整系统信息
+    fetchSystemInfo();
+    
+    // 设置30秒定时更新系统信息
+    const systemTimer = setInterval(() => {
+        fetchSystemInfo();
+    }, 30000);
+    
+    // 立即获取一次性能数据
+    fetchPerformanceData();
+    
+    // 设置5秒定时更新性能数据
+    const performanceTimer = setInterval(() => {
+        fetchPerformanceData();
+    }, 5000);
+    
+    // 组件卸载时清除定时器
+    onUnmounted(() => {
+        clearInterval(systemTimer);
+        clearInterval(performanceTimer);
+    });
+});
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

server/api/system/info.ts

@@ -0,0 +1,92 @@
+import os from 'os';
+import { execSync } from 'child_process';
+
+export default defineEventHandler(async (event) => {
+  try {
+    // 获取操作系统信息
+    const platform = os.platform();
+    const release = os.release();
+    const hostname = os.hostname();
+    
+    // 获取Node.js版本
+    const nodeVersion = process.version;
+    
+    // 硬件信息
+    const cpuInfo = os.cpus();
+    const totalMemory = os.totalmem();
+    const freeMemory = os.freemem();
+    
+    // 计算CPU使用率
+    const cpuUsage = getCpuUsage();
+    
+    // 计算内存使用率
+    const memoryUsage = {
+      total: formatBytes(totalMemory),
+      free: formatBytes(freeMemory),
+      used: formatBytes(totalMemory - freeMemory),
+      percent: Math.round(((totalMemory - freeMemory) / totalMemory) * 100)
+    };
+    
+    return {
+      success: true,
+      data: {
+        system: {
+          platform,
+          release,
+          hostname
+        },
+        node: nodeVersion,
+        hardware: {
+          cpu: {
+            model: cpuInfo[0]?.model || 'Unknown',
+            cores: cpuInfo.length,
+            usage: cpuUsage
+          },
+          memory: memoryUsage
+        }
+      }
+    };
+  } catch (error) {
+    console.error('Error fetching system info:', error);
+    return {
+      success: false,
+      message: '获取系统信息失败'
+    };
+  }
+});
+
+// 格式化字节数为可读格式
+function formatBytes(bytes: number) {
+  if (bytes === 0) return '0 Bytes';
+  
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+// 获取CPU使用率
+function getCpuUsage() {
+  try {
+    const cpus = os.cpus();
+    let totalIdle = 0;
+    let totalTick = 0;
+    
+    cpus.forEach(cpu => {
+      for (const type in cpu.times) {
+        totalTick += cpu.times[type as keyof typeof cpu.times];
+      }
+      totalIdle += cpu.times.idle;
+    });
+    
+    const idle = totalIdle / cpus.length;
+    const total = totalTick / cpus.length;
+    const usagePercent = Math.round(100 - (idle / total * 100));
+    
+    return usagePercent;
+  } catch (error) {
+    console.error('Error calculating CPU usage:', error);
+    return 0;
+  }
+} 

server/api/system/performance.ts

@@ -0,0 +1,70 @@
+import os from 'os';
+
+export default defineEventHandler(async (event) => {
+  try {
+    // 获取CPU信息
+    const cpuUsage = getCpuUsage();
+    
+    // 获取内存信息
+    const totalMemory = os.totalmem();
+    const freeMemory = os.freemem();
+    const memoryUsage = {
+      total: formatBytes(totalMemory),
+      free: formatBytes(freeMemory),
+      used: formatBytes(totalMemory - freeMemory),
+      percent: Math.round(((totalMemory - freeMemory) / totalMemory) * 100)
+    };
+    
+    return {
+      success: true,
+      data: {
+        cpu: {
+          usage: cpuUsage
+        },
+        memory: memoryUsage
+      }
+    };
+  } catch (error) {
+    console.error('Error fetching performance info:', error);
+    return {
+      success: false,
+      message: '获取性能数据失败'
+    };
+  }
+});
+
+// 格式化字节数为可读格式
+function formatBytes(bytes: number) {
+  if (bytes === 0) return '0 Bytes';
+  
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+// 获取CPU使用率
+function getCpuUsage() {
+  try {
+    const cpus = os.cpus();
+    let totalIdle = 0;
+    let totalTick = 0;
+    
+    cpus.forEach(cpu => {
+      for (const type in cpu.times) {
+        totalTick += cpu.times[type as keyof typeof cpu.times];
+      }
+      totalIdle += cpu.times.idle;
+    });
+    
+    const idle = totalIdle / cpus.length;
+    const total = totalTick / cpus.length;
+    const usagePercent = Math.round(100 - (idle / total * 100));
+    
+    return usagePercent;
+  } catch (error) {
+    console.error('Error calculating CPU usage:', error);
+    return 0;
+  }
+} 

utils/html2VNode.ts

@@ -11,7 +11,7 @@ export default class Html2VNode {
     public use(middleware: middlewareType) {
         this.middlewareList.push(middleware)
     }
-    public rander(htmlString: string) {
+    public render(htmlString: string) {
         const html2ObjResult = this.html2Obj(htmlString);
         const middlewareMap = this.buildMiddlewareMap(html2ObjResult);
         const wrinklesResult = this.wrinkles(html2ObjResult)