diff --git a/packages/web/src/pages/common/timer.ts b/packages/web/src/pages/common/timer.ts
new file mode 100644
index 00000000..f9fa4c8f
--- /dev/null
+++ b/packages/web/src/pages/common/timer.ts
@@ -0,0 +1,19 @@
+import { useSettingStore } from '@/stores/setting';
+/** 启动和销毁计时器 hooks */
+export const userTimer = () => {
+  const settingStore = useSettingStore();
+
+  const timerId = ref();
+
+  onMounted(() => {
+    timerId.value = setInterval(() => {
+      settingStore.readTime += 1;
+    }, 1000);
+  });
+
+  onBeforeUnmount(() => {
+    if (timerId.value) {
+      clearInterval(timerId.value);
+    }
+  });
+};
diff --git a/packages/web/src/pages/vscode/content/index.vue b/packages/web/src/pages/vscode/content/index.vue
index ee3dcb45..bf90699f 100644
--- a/packages/web/src/pages/vscode/content/index.vue
+++ b/packages/web/src/pages/vscode/content/index.vue
@@ -53,6 +53,7 @@
 import { ContentType } from '@any-reader/rule-utils';
 import { useContent, useTheme } from '@/pages/common/content';
 import { useReadStore } from '@/stores/read';
+import { userTimer } from '@/pages/common/timer';
 
 const contentRef = ref();
 
@@ -62,6 +63,8 @@ const { content, contentType, settingStore, lastChapter, nextChapter, onPageUp,
   useContent(contentRef);
 
 useTheme(contentRef);
+
+userTimer();
 </script>
 
 <style scoped>
diff --git a/packages/web/src/pages/vscode/layout/index.vue b/packages/web/src/pages/vscode/layout/index.vue
index 01506d07..62ad8fe0 100644
--- a/packages/web/src/pages/vscode/layout/index.vue
+++ b/packages/web/src/pages/vscode/layout/index.vue
@@ -8,8 +8,9 @@
         <component :is="Component" v-if="!routev.meta.keepAlive" :key="routev.fullPath" />
       </RouterView>
     </div>
-    <div v-if="!hideBtmBar" class="flex gap-4 px-8 py-4">
+    <div v-if="!hideBtmBar" class="flex items-center gap-4 px-8 py-4">
       <div class="codicon codicon-arrow-left vsc-toolbar-btn" @click="router.back()"></div>
+      <div v-if="settingStore.timeIsShow">已摸鱼：{{ showTIme }}</div>
       <div class="flex-1"></div>
       <div
         class="codicon codicon-github-alt vsc-toolbar-btn"
@@ -31,9 +32,22 @@
 import '@/plugins/vsc-ui';
 
 import { executeCommand } from '@/api/modules/vsc';
+import { useSettingStore } from '@/stores/setting';
 
 const route = useRoute();
 const router = useRouter();
+const settingStore = useSettingStore();
 
 const hideBtmBar = computed(() => route.meta?.hideBtmBar);
+
+console.log('settingStore.readTime:', settingStore.readTime);
+const showTIme = computed(() => {
+  const readTime = settingStore.readTime;
+
+  if (readTime <= 0) return 0;
+  const hours = Math.floor(readTime / 3600);
+  const minutes = Math.floor((readTime % 3600) / 60);
+  const seconds = readTime % 60;
+  return `${hours}:${minutes}:${seconds}`;
+});
 </script>
diff --git a/packages/web/src/pages/vscode/settings/index.vue b/packages/web/src/pages/vscode/settings/index.vue
index 2bf85a26..bce6cc87 100644
--- a/packages/web/src/pages/vscode/settings/index.vue
+++ b/packages/web/src/pages/vscode/settings/index.vue
@@ -9,6 +9,9 @@
     <SettingRow title="缓存">
       <vscode-button @click="clearCache">删除缓存</vscode-button>
     </SettingRow>
+    <SettingRow title="摸鱼时间">
+      <vscode-checkbox :checked="settingStore.timeIsShow" @input="handleInput">显示/隐藏</vscode-checkbox>
+    </SettingRow>
   </div>
 </template>
 
@@ -29,4 +32,9 @@ function clearCache() {
     }
   });
 }
+
+const handleInput = (event) => {
+  console.log('event:', event);
+  console.log('event.target.checked:', event.target.checked);
+};
 </script>
diff --git a/packages/web/src/stores/setting.pc.ts b/packages/web/src/stores/setting.pc.ts
index 5d4b0224..f9658143 100644
--- a/packages/web/src/stores/setting.pc.ts
+++ b/packages/web/src/stores/setting.pc.ts
@@ -4,7 +4,7 @@ import type { FontData } from '@/utils/font';
 
 export type ReadStyle = {
   // 字体
-  font: FontData;
+  font?: FontData;
   // 字体大小
   fontSize: number;
   // 字体粗细
@@ -65,6 +65,10 @@ export const useSettingStore = defineStore('setting', () => {
     bookDir: ''
   });
 
+  /** 是否显示摸鱼时间 */
+  const timeIsShow = ref<boolean>(true);
+  const readTime = ref<number>(0);
+
   // 同步
   async function sync() {
     const res = await readConfig().catch(() => {});
@@ -81,6 +85,8 @@ export const useSettingStore = defineStore('setting', () => {
 
   return {
     data,
+    readTime,
+    timeIsShow,
     sync
   };
 });