diff --git a/index.html b/index.html
index 6d2d51d..df28d1e 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>test999</title>
+    <title>CYBER</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/public/log.md b/public/log.md
index 1debad6..7bc09eb 100644
--- a/public/log.md
+++ b/public/log.md
@@ -8,10 +8,10 @@
 
 ### 2025/2/17 22:30 - [v0.0.3] 测试效果
 - 新增留言板 - 基本完成
-
+~~啊啊~~
 ### 2025/2/13 16:30 - [v0.0.2] 测试效果
 - 优化布局
-- 优化双端切换逻辑
+- 优化双端切换逻辑 
 - 新增项目展示页面 - 测试（未完成）
 - 新增在线工具罗列页面 - 测试（未完成）
 - 新增管理员上传日志 - 测试（未完成）
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index f8962aa..7a44025 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -57,7 +57,7 @@ const navItems = [
   {name: '小工具', link: '/tools'},
   {name: '留言板', link: '/demos/board'},
   'divider',
-  {name: '关于', link: '/about'}
+  {name: '日志', link: '/about'}
 ]
 
 // 移动端菜单
diff --git a/src/pages/About.vue b/src/pages/About.vue
index de612fc..306605e 100644
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@@ -1,49 +1,143 @@
+<script setup>
+import {onMounted, onUnmounted, ref} from 'vue';
+import MarkdownViewer from '../components/mdRenderer.vue';
+import api from "../utils/axios.js";
+import swal from "../utils/sweetalert.js";
+
+
+const messages = ref([]);
+
+const pageLoading = ref(false);
+const amount = ref(null);
+const currentPage = ref(1);
+
+async function refreshLog(page, size) {
+  page = page || 1;
+  size = size || 5;
+  const res = await api.get(`/getweblog?PAGE=${page}&PAGESIZE=${size}`);
+  if (! res.data) {
+    swal.tip('error', '加载失败, 刷新重试')
+    return;
+  }
+  amount.value = Math.ceil(res.amount / size);
+  messages.value = res.data;
+  return 0;
+}
+
+async function goPage(page) {
+  const messageTemp = messages.value
+  pageLoading.value = true;
+  currentPage.value = page;
+  if (await refreshLog(page) === 0) {
+    pageLoading.value = false;
+    return;
+  }
+  swal.tip('error', '加载失败...')
+  messages.value = messageTemp;
+  pageLoading.value = false;
+}
+
+onMounted(async () => {
+  await refreshLog();
+});
+
+</script>
 <template>
   <div class="container">
-    <div class="site-log">
-    <MarkdownViewer :markdownContent="markdownText" />
+    <div class="log-container">
+      <div v-if="!amount">正在加载...</div>
+      <div class="log-bar" v-for="log in messages" :class="{loading: pageLoading}">
+        <MarkdownViewer :markdownContent="`### ${log.date} - [${log.version}] - 由${log.poster}提交\n` + log.content" />
+      </div>
+      <div class="paging-container">
+        <div class="page-btn" :class="{active: currentPage === 1}" @click="goPage(1)" v-if="amount">1</div>
+        <span v-if="currentPage > 5">...</span>
+        <div class="page-btn" v-for="index in ((a, b) => Array.from({ length: b - a + 1 }, (_, i) => a + i))
+             (currentPage>4?(currentPage - 3):2, currentPage<amount-4?(currentPage + 4):amount-1)"
+             @click="goPage(index)" :class="{active: currentPage === index}">{{ index }}
+        </div>
+        <span v-if="currentPage < amount - 5">...</span>
+        <div class="page-btn" @click="goPage(amount)" :class="{active: currentPage === amount}" v-if="amount > 1">{{ amount }}</div>
+      </div>
     </div>
+
   </div>
 </template>
 
-<script>
-import { ref, onMounted } from 'vue';
-import MarkdownViewer from '../components/mdRenderer.vue';
-
-export default {
-  components: {
-    MarkdownViewer
-  },
-  setup() {
-    const markdownText = ref('');
-
-    // 加载 Markdown 文件
-    const loadMarkdown = async () => {
-      try {
-        const response = await fetch('log.md');  // 确保路径正确
-        if (response.ok) {
-          markdownText.value = await response.text();
-        } else {
-          console.error('Failed to load markdown file');
-        }
-      } catch (error) {
-        console.error('Error loading markdown file', error);
-      }
-    };
-
-    onMounted(() => {
-      loadMarkdown();  // 页面加载时调用
-    });
-
-    return {
-      markdownText
-    };
-  }
-};
-</script>
-
 <style>
-.site-log {
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+  color: white;
+}
+.theme-light .container {
+  color: black;
+}
+.log-container {
+  margin: 20px 0;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  background: #212121;
+  width: calc(100% - 40px);
+  height: auto;
   padding: 20px;
+  gap: 15px;
+  border-radius: 15px;
+}
+.theme-light .log-container {
+  background: #efefef;
+}
+.log-bar {
+  background: black;
+  width: calc(100% - 20px);
+  padding: 10px;
+  border-radius: 15px;
+  transition: opacity 0.2s ease;
+}
+.theme-light .log-bar {
+  background: white;
+}
+.paging-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.page-btn {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: black;
+  //width: 25px;
+  height: 25px;
+  padding: 0 5px;
+  border-radius: 4px;
+  border: cyan solid 1px;
+}
+
+.theme-light .page-btn {
+  background-color: white;
+  border: #b2b2b2 solid 1px;
+}
+
+.page-btn.active {
+  background: cyan;
+  color: black;
+}
+
+.theme-light .page-btn.active {
+  background: #2a2a2a;
+  color: white;
+}
+
+.log-bar.loading {
+  opacity: 0.4;
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/accountPages/Account_admin_uploadLog.vue b/src/pages/accountPages/Account_admin_uploadLog.vue
index 9762e16..a9c67dd 100644
--- a/src/pages/accountPages/Account_admin_uploadLog.vue
+++ b/src/pages/accountPages/Account_admin_uploadLog.vue
@@ -1,11 +1,153 @@
 <script setup>
 
+import {onMounted, onUnmounted, ref} from "vue";
+import MarkdownViewer from "../../components/mdRenderer.vue";
+import swal from "../../utils/sweetalert.js";
+import store from "../../store/index.js";
+import api from "../../utils/axios.js";
+
+const mdInput = ref(store.state.editStore.log || '');
+const version = ref(store.state.editStore.logVersion || '');
+const isViewing = ref(false);
+const isNailed = ref(false);
+
+const funcButtons = ref([
+  {name: 'h1', func: '# [cur]'},
+  {name: 'h2', func: '## [cur]'},
+  {name: 'h3', func: '### [cur]'},
+  {name: '<s>abc</s>', func: '~~[cur]~~'},
+  {name: '<b>abc</b>', func: '**[cur]**'},
+  {name: '<i>abc</i>', func: '*[cur]*'},
+  {name: '<code>abc</code>', func: '\`[cur]\`'},
+  {name: '●', func: '- '},
+  {name: 'url', func: '[[cur]](https://example.com)'},
+  {name: 'img', func: '![图片说明](https://example.com/img1.png)'},
+])
+function getFormattedTime() {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0');  // 月份从0开始，需要加1
+  const day = String(now.getDate()).padStart(2, '0');
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+function clickFuncBtn(func) {
+  const textarea = document.querySelector('textarea'); // 获取 textarea 元素
+  const startPos = textarea.selectionStart; // 获取焦点的起始位置
+  const endPos = textarea.selectionEnd; // 获取焦点的结束位置
+  const selectedText = textarea.value.slice(startPos, endPos); // 获取选中的文本
+
+  let newText = '';
+
+  if (selectedText) {
+    // 如果选中了文本，就应用格式化
+    newText = func.replace('[cur]', selectedText);
+  } else {
+    // 如果没有选中文本，就插入占位符文本
+    newText = func.replace('[cur]', '请在此填写内容');
+  }
+
+  // 插入格式化后的文本到 textarea
+  textarea.setRangeText(newText, startPos, endPos, 'select'); // 替换选中的文本
+
+  // 更新 mdInput 以反映最新的文本内容
+  mdInput.value = textarea.value;
+
+  // 找到 `[cur]` 的位置
+  const curPos = textarea.value.indexOf('[cur]');
+
+  // 重新设置光标位置到 `[cur]` 处
+  textarea.selectionStart = curPos;
+  textarea.selectionEnd = curPos;
+
+  // 重新设置焦点
+  textarea.focus();
+}
+
+const postLog = async () => {
+  if (version.value.trim().length === 0) {
+    swal.tip('info', '版本号为必填项');
+    return;
+  }
+  if (mdInput.value.trim().length === 0) {
+    swal.tip('info', '内容为必填项');
+    return;
+  }
+  swal.window('info', '提交吗? ', '提交前请检查内容, 确保格式正确', '确定', '取消').then(async (result) => {
+    if (result.isConfirmed) {
+      const response = await api.post('/postweblog', {
+        version: version.value,
+        date: getFormattedTime(),
+        content: mdInput.value
+      });
+      if (response.code === 0) {
+        swal.tip('success', '提交成功');
+        return;
+      }
+      swal.tip('error', '提交失败...')
+    }
+  })
+}
+
+const shiftNailed = () => {
+  isNailed.value = isNailed.value !== true;
+}
+const saveDocument = () => {
+  store.commit('saveEdit', {log: mdInput.value, logVersion: version.value})
+  swal.tip('success', '保存成功')
+};
+
+const handleKeydown = (event) => {
+  // 检查是否按下了 Ctrl + S
+  if (event.ctrlKey && event.key === 's') {
+    event.preventDefault(); // 阻止浏览器默认的保存行为
+    saveDocument(); // 调用保存函数
+  }
+};
+
+// 监听全局键盘事件
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown);
+});
+
+// 在组件卸载时移除事件监听
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown);
+});
 </script>
 
 <template>
   <div class="container">
-    <h1>上传日志</h1>
+    <div class="top">
+      <button class="view-btn" :class="{viewing: isViewing, nailed: isNailed===true}"
+              @mouseenter="isViewing = true"
+              @mouseleave="isViewing = isNailed === true"
+              @click="shiftNailed"
+      >{{ isViewing ? isNailed ? '解除' : '固定' : '预览' }}
 
+      </button>
+      <div class="function-btn">
+        <button v-for="btn in funcButtons" v-html="btn.name" @click="clickFuncBtn(btn.func)"/>
+      </div>
+      <div class="top-right">
+        <button class="view-btn" @click="saveDocument">保存</button>
+        <button class="view-btn" @click="postLog">上传</button>
+      </div>
+
+    </div>
+    <div class="middle">
+      <div class="input-area" v-if="!isViewing">
+        <input v-model="version" placeholder="版本号" style="height: 20px; flex: none"></input>
+        <textarea v-model="mdInput" placeholder="ctrl+s 保存;
+选中文本按功能按钮"></textarea>
+      </div>
+      <div class="output-area" v-else>
+        <MarkdownViewer :markdownContent="mdInput"/>
+      </div>
+
+    </div>
   </div>
 
 
@@ -14,21 +156,141 @@
 <style scoped>
 .container {
   width: 100%;
-  overflow-y: auto;
+  height: 100%;
+  overflow-y: hidden;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
   color: #f5f6f7;
-  padding: 20px 0;
-  transition: background-color 0.3s ease, color 0.3s ease;
+  padding: 0;
   animation: fadeIn 0.3s ease-in-out;
 }
+
 .theme-light .container {
   color: #333333;
 }
 
-h1,p {
-  margin: 0 25px;
+.top {
+  width: calc(100% - 35px);
+  height: 28px;
+  border-radius: 10px 10px 0 0;
+  background: #2d2d2d;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 10px;
+}
+
+.theme-light .top {
+  background: #e0e0e0;
+}
+
+.function-btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 1vw;
+  width: 70%;
+}
+
+button {
+  color: white;
+  background: #363636;
+  border: #007bff solid 2px;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.theme-light button {
+  color: black;
+  background: white;
+  border: #ffb74d solid 2px;
+}
+.top-right {
+  width: auto;
+  display: flex;
+  flex-direction: row;
+  gap: 1vw;
+}
+
+.view-btn {
+  color: white;
+  background: #363636;
+  width: 60px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+}
+
+.viewing {
+  background: #004286;
+}
+
+.viewing.nailed {
+  background: #007bff;
+}
+
+.theme-light .viewing {
+  background: #ffdfad;
+}
+
+.theme-light .viewing.nailed {
+  background: #ffb74d;
+}
+
+.middle {
+  flex: 1;
+  width: calc(100% - 35px);
+  background: #c09d15;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  //align-items: center;
+  background: rgba(128, 128, 128, 0.1);
+}
+
+.input-area {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  gap: 5px;
+}
+
+.middle .input-area textarea, .middle .input-area input {
+  flex: 1;
+  resize: none;
+  background: #1a1a1a;
+  color: white;
+  border: gray solid 1px;
+}
+
+.theme-light .input-area textarea,.theme-light .middle .input-area input {
+  background: white;
+  color: black;
+}
+
+.output-area {
+  border: gray solid 1px;
+  background: #212121;
+  height: calc(100vh - 165px);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-content: flex-start;
+  overflow-y: auto;
+}
+
+.theme-light .output-area {
+  background: white;
 }
 
 @keyframes fadeIn {
diff --git a/src/pages/demoPages/messageBoard/Board_page.vue b/src/pages/demoPages/messageBoard/Board_page.vue
index 70fd895..6beedb4 100644
--- a/src/pages/demoPages/messageBoard/Board_page.vue
+++ b/src/pages/demoPages/messageBoard/Board_page.vue
@@ -1,7 +1,7 @@
 <script setup>
 
 import Message from "./Message.vue";
-import {onMounted, ref, watch} from "vue";
+import {onMounted, onUnmounted, ref, watch} from "vue";
 import api from "../../../utils/axios.js";
 import store from "../../../store/index.js";
 import swal from "../../../utils/sweetalert.js";
@@ -115,6 +115,12 @@ watch(sendCD, (newValue) => {
 onMounted(async () => {
   sendCD.value = store.state.demos.board?.sendCD || 0;
   await refreshBoard();
+  timer = setInterval(refreshBoard, 7000)
+});
+let timer
+
+onUnmounted(() => {
+  clearInterval(timer);
 })
 
 </script>
@@ -127,14 +133,14 @@ onMounted(async () => {
         <div v-if="messages?.length === 0">正在加载...</div>
       </div>
       <div class="paging-container">
-        <div class="page-btn" :class="{active: currentPage === 1}" @click="goPage(1)">1</div>
+        <div class="page-btn" :class="{active: currentPage === 1}" @click="goPage(1)" v-if="amount">1</div>
         <span v-if="currentPage > 5">...</span>
         <div class="page-btn" v-for="index in ((a, b) => Array.from({ length: b - a + 1 }, (_, i) => a + i))
              (currentPage>4?(currentPage - 3):2, currentPage<amount-4?(currentPage + 4):amount-1)"
              @click="goPage(index)" :class="{active: currentPage === index}">{{ index }}
         </div>
         <span v-if="currentPage < amount - 5">...</span>
-        <div class="page-btn" @click="goPage(amount)" :class="{active: currentPage === amount}">{{ amount }}</div>
+        <div class="page-btn" @click="goPage(amount)" :class="{active: currentPage === amount}" v-if="amount > 1">{{ amount }}</div>
       </div>
     </div>
     <div class="sender-container">
diff --git a/src/store/index.js b/src/store/index.js
index 96e1a7a..b2b7ebb 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -9,7 +9,8 @@ const store = createStore({
         loading: {},
         token: null,
         userInfo: {},
-        demos: {}
+        editStore: {},
+        demos: {},
     },
     mutations: {
         toggleTheme(state) {
@@ -35,6 +36,12 @@ const store = createStore({
         },
         setDemoValue(state, obj) {
             state.demos[obj.demo] = {...state.demos[obj.demo], ...obj.value}
+        },
+        saveEdit(state, obj) {
+            state.editStore = {...state.editStore, ...obj};
+        },
+        setLogTemp(state, arr) {
+            state.log = arr;
         }
     },
     getters: {
@@ -50,7 +57,7 @@ const store = createStore({
     },
     plugins: [createPersistedStatePlugin({
         key: 'cyberStorage',
-        whitelist: ['theme', 'userInfo', 'demos'],
+        whitelist: ['theme', 'userInfo', 'demos', 'editStore'],
     })]
 })
 
diff --git a/src/style.css b/src/style.css
index 5532536..1b4fd9b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -52,6 +52,19 @@ button {
   animation: spin 2s linear infinite;
 }
 
+code {
+  font-size: .875em;
+  font-weight: 500;
+  padding: .15rem .3rem;
+  color: white;
+  background: #424242;
+  border-radius: .25rem;
+}
+.theme-light code {
+  color: black;
+  background: #ececec;
+}
+
 /* 动画效果 */
 @keyframes spin {
   0% {
@@ -70,6 +83,7 @@ button {
 
 /* 深色模式：默认 */
 ::-webkit-scrollbar {
+  height: 8px;
   width: 8px;
 }
 
