diff --git a/.github/workflows/build-pkg.yml b/.github/workflows/build-pkg.yml
index ef6d866..24bde39 100644
--- a/.github/workflows/build-pkg.yml
+++ b/.github/workflows/build-pkg.yml
@@ -2,7 +2,7 @@ name: "build pkg"
 
 on:
   push:
-    -branches:
+     branches:
       - release
 
 jobs:
@@ -37,8 +37,8 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           args: ${{ matrix.platform == 'macos-latest' && '--target universal-apple-darwin' || '' }}
-          tagName: v__VERSION__-dev.${{ github.run_number }} # the action automatically replaces \_\_VERSION\_\_ with the app version
-          releaseName: "Development Build v__VERSION__-dev.${{ github.run_number }}"
+          tagName: v__VERSION__.${{ github.run_number }} # the action automatically replaces \_\_VERSION\_\_ with the app version
+          releaseName: "Development Build v__VERSION__.${{ github.run_number }}"
           releaseBody: "This is a development release from the master branch (Commit ${{ github.sha }})."
           releaseDraft: false
           prerelease: true
diff --git a/README.md b/README.md
index f969d22..b6ccbf9 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,12 @@ A W.I.P desktop application for a new markup-based typesetting language, [typst]
 Typster is built using [Tauri](https://tauri.app/).
 
 
-# screenshot
+# features
+- [ ]
+- [ ] 
+
+
+## screenshot
 
 
 ![typster](./public/imgs/screen_projects.png)
@@ -29,7 +34,7 @@ Typster is built using [Tauri](https://tauri.app/).
 
 
 ```
- xattr -c /Applications/appname.app
+ xattr -c /Applications/typster.app
 ```
 ### rebuild app icon
 
diff --git a/package.json b/package.json
index 96b9697..3d0191f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "typster",
   "private": true,
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,14 +17,14 @@
     "@ant-design/icons-vue": "^7.0.1",
     "@tauri-apps/api": "^1.5.3",
     "ant-design-vue": "4.x",
-    "github-markdown-css": "^5.5.1",
     "monaco-editor": "^0.46.0",
     "pinia": "^2.1.7",
+    "radash": "^12.1.0",
     "today-ui": "^0.0.23",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0",
     "vscode-oniguruma": "^2.0.1",
-    "vscode-textmate": "^9.0.0"
+    "vscode-textmate": "^9.0.0",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.5.10",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 216247d..a472828 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ dependencies:
   pinia:
     specifier: ^2.1.7
     version: 2.1.7(typescript@5.4.2)(vue@3.4.21)
+  radash:
+    specifier: ^12.1.0
+    version: 12.1.0
   today-ui:
     specifier: ^0.0.23
     version: 0.0.23(vue@3.4.21)
@@ -942,6 +945,11 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.2.0
 
+  /radash@12.1.0:
+    resolution: {integrity: sha512-b0Zcf09AhqKS83btmUeYBS8tFK7XL2e3RvLmZcm0sTdF1/UUlHSsjXdCcWNxe7yfmAlPve5ym0DmKGtTzP6kVQ==}
+    engines: {node: '>=14.18.0'}
+    dev: false
+
   /regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
     dev: false
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 5a0b7f5..3487c2f 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -11,7 +11,7 @@
   },
   "package": {
     "productName": "typster",
-    "version": "0.3.0"
+    "version": "0.4.0"
   },
   "tauri": {
     "macOSPrivateApi": true,
diff --git a/src/components/MonacoEditor.vue b/src/components/MonacoEditor.vue
index 7eb29fb..0c20ed9 100644
--- a/src/components/MonacoEditor.vue
+++ b/src/components/MonacoEditor.vue
@@ -4,12 +4,13 @@
 
 <script setup lang="ts">
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
-import { PropType, onMounted, ref, watch } from "vue";
-import { TypstCompileResult, TypstPage } from "../pages/typst/interface";
+import { PropType, onMounted, ref, warn, watch } from "vue";
+import { TypstCompileResult } from "../pages/typst/interface";
 import type { editor as editorType } from "monaco-editor";
 import { invoke } from "@tauri-apps/api";
-import { throttle, debounce, relativePath } from './../shared/util'
+import { relativePath } from './../shared/util'
 
+import { throttle, debounce } from 'radash'
 
 type IModelChangedEvent = editorType.IModelChangedEvent;
 type IModelContentChangedEvent = editorType.IModelContentChangedEvent;
@@ -26,18 +27,12 @@ const emit = defineEmits<{
   (e: 'compiled', data: TypstCompileResult): void
 }>()
 
-
-
 const boxRef = ref<HTMLElement>();
 let monacoEditor: monaco.editor.IStandaloneCodeEditor | null = null;
 
 
-
-
-
-
 const updateContent = async (editor: ICodeEditor, path: string) => {
-
+   console.warn('updateContent -------')
   if (!editor) return;
 
   // Prevent further updates and immediately flush pending updates
@@ -83,15 +78,16 @@ const handleSave = async () => {
   const model = monacoEditor?.getModel();
   if (model) {
     // Removing the preceding slash
-    const path =  relativePath(props.root!, props.path!);
+    const path = relativePath(props.root!, props.path!);
     await invoke("fs_write_file_text", { path, content: model.getValue() });
+    await handleCompile();
   }
 };
 
 
 //@ts-ignore
-const handleCompileThrottle = throttle(handleCompile);
-const handleSaveDebounce = debounce(handleSave, 200, { maxWait: 5000 });
+const handleCompileThrottle = throttle({ interval: 1000 }, handleCompile);
+const handleSaveDebounce = debounce({ delay: 500 }, handleSave);
 
 
 onMounted(() => {
@@ -99,7 +95,6 @@ onMounted(() => {
     return;
   }
 
-
   monacoEditor = monaco.editor.create(boxRef.value!, {
     language: "typst",
     fontSize: 16,
@@ -113,11 +108,10 @@ onMounted(() => {
     handleCompileThrottle();
   });
   monacoEditor.onDidChangeModelContent((evt: IModelContentChangedEvent) => {
-    // Compile will update the source file directly in the memory without
-    // writing to the file system first, this will reduce the preview delay.
+    // 输入的时候 每隔1秒执行一次编译
     handleCompileThrottle();
+    // 输入完毕后 500ms 后执行一次保存
     handleSaveDebounce();
-    // handleCompile()
   });
 
   updateContent(monacoEditor, props.path!)
diff --git a/src/main.ts b/src/main.ts
index 9c66f7b..8db735d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,4 @@
 import { createApp } from "vue";
-import "github-markdown-css";
 import "ant-design-vue/dist/reset.css";
 import "./style/styles.css";
 import "./shared/monaco-hook";
diff --git a/src/pages/home/Sidebar.vue b/src/pages/home/Sidebar.vue
index 3fa7812..f91ac65 100644
--- a/src/pages/home/Sidebar.vue
+++ b/src/pages/home/Sidebar.vue
@@ -15,6 +15,7 @@
           <template #overlay>
             <a-menu @click="({ key: menuKey }: any) => onContextMenuClick(treeKey, menuKey)">
               <a-menu-item key="delete">删除</a-menu-item>
+              <a-menu-item key="rename">重命名</a-menu-item>
             </a-menu>
           </template>
         </a-dropdown>
@@ -35,7 +36,6 @@
             <a-menu-item v-for="pro in projects" :key="pro.path">
               <span>{{ pro.title }}</span> : <span>{{ pro.path }}</span>
             </a-menu-item>
-            
           </a-menu>
         </template>
       </a-dropdown>
@@ -48,11 +48,11 @@
 import type { TreeProps } from 'ant-design-vue';
 import { ref, h, reactive, onMounted, computed } from 'vue';
 import { PlusOutlined, FolderOpenOutlined } from '@ant-design/icons-vue'
-import { readDir, FileEntry, writeTextFile, removeFile } from '@tauri-apps/api/fs';
+import { readDir, FileEntry, writeTextFile, removeFile, renameFile } from '@tauri-apps/api/fs';
 import { useSystemStoreHook } from '../../store/store';
 import { DataNode } from 'ant-design-vue/es/tree';
 import SidebarToggle from './SidebarToggle.vue';
-import { save } from '@tauri-apps/api/dialog';
+import { save , } from '@tauri-apps/api/dialog';
 
 const systemStore = useSystemStoreHook();
 
@@ -60,7 +60,7 @@ const expandedKeys = ref<string[]>([]);
 const selectedKeys = ref<string[]>([]);
 const treeData: TreeProps['treeData'] = reactive([]);
 
-const projects = computed(() =>{
+const projects = computed(() => {
   return systemStore.projects;
 })
 
@@ -68,7 +68,7 @@ const initFiles = async () => {
   if (treeData.length > 0) {
     treeData.splice(0, treeData.length);
   }
-  
+
   const curProject = systemStore.editingProject
   if (!curProject) {
     return
@@ -93,6 +93,7 @@ const initFiles = async () => {
       const node = { title: entry.path.split('/').pop(), key: entry.path, children: [], selectable: true };
       if (entry.children) {
         node.selectable = false;
+        
         processEntries(entry.children, node)
       }
       parent.children?.push(node)
@@ -109,10 +110,28 @@ const initFiles = async () => {
 
 const onContextMenuClick = async (treeKey: string, menuKey: string | number) => {
   console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
+
   if (menuKey == 'delete' && treeKey) {
+    if (treeKey.endsWith('main.typ')) {
+      alert('The main.typ file cannot be deleted')
+      return
+    }
     await removeFile(treeKey);
-    await initFiles();
   }
+  if (menuKey == 'rename' && treeKey) {
+    const filePath = await save({
+      title: "Rename file",
+      filters: [{
+        name: 'untitled',
+        extensions: ['typ', 'bib', 'yml']
+      }],
+      defaultPath: treeKey
+    });
+    if (filePath) {
+      await renameFile(treeKey, filePath);
+    }
+  }
+  await initFiles();
 };
 
 const onSelect = (selectedKeys: string[]) => {
@@ -136,12 +155,11 @@ const onCreateFile = async () => {
   }
 }
 
-const onSelectProject = ({key}:any) =>{
+const onSelectProject = ({ key }: any) => {
 
   let selectedProject = systemStore.projects.find(item => item.path == key)
-  if(selectedProject) {
+  if (selectedProject) {
     systemStore.selectProject(selectedProject)
-    systemStore.setEditingFilePath(selectedProject.path + '/main.typ');
     window.location.reload();
   }
 }
diff --git a/src/pages/home/SidebarToggle.vue b/src/pages/home/SidebarToggle.vue
index 3c46cbb..40fca50 100644
--- a/src/pages/home/SidebarToggle.vue
+++ b/src/pages/home/SidebarToggle.vue
@@ -21,7 +21,9 @@ const systemStore = useSystemStoreHook();
 
 const router = useRouter();
 const back = () => {
+    systemStore.selectProject(null);
     router.push('/project')
+
 }
 
 const onToggle = () => {
diff --git a/src/shared/util.ts b/src/shared/util.ts
index d1245fd..6b9489b 100644
--- a/src/shared/util.ts
+++ b/src/shared/util.ts
@@ -1,221 +1,4 @@
-// @ts-nocheck
-export type ThrottleFn<T extends never[]> = (...args: T) => PromiseLike<void>;
 
-export const throttle = <T extends never[]>(
-  fn: (...args: T) => PromiseLike<never>
-): ThrottleFn<T> => {
-  let isExecuting = false;
-  let pendingArgs: T | undefined;
-
-  const executeGuard = async (...args: T) => {
-    isExecuting = true;
-
-    // Remove pending call before executing
-    pendingArgs = undefined;
-    try {
-      await fn(...args);
-    } finally {
-      isExecuting = false;
-    }
-  };
-
-  return async (...args) => {
-    if (!isExecuting) {
-      let executeArgs: T | undefined = args;
-      // Nothing is executing, immediately execute the function
-      while (executeArgs) {
-        await executeGuard(...executeArgs);
-        // Execute the pending call, if exists.
-        executeArgs = pendingArgs;
-      }
-      return;
-    }
-
-    // Something is currently executing, queue the args and set a timeout
-    pendingArgs = args;
-  };
-};
-
-const freeGlobal =
-  typeof global === "object" &&
-  global !== null &&
-  global.Object === Object &&
-  global;
-
-/** Detect free variable `globalThis` */
-const freeGlobalThis =
-  typeof globalThis === "object" &&
-  globalThis !== null &&
-  globalThis.Object === Object &&
-  globalThis;
-
-/** Detect free variable `self`. */
-const freeSelf =
-  typeof self === "object" && self !== null && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-const root =
-  freeGlobalThis || freeGlobal || freeSelf || Function("return this")();
-
-export function debounce(func, wait, options) {
-  let lastArgs;
-  let lastThis;
-  let maxWait;
-  let result;
-  let timerId;
-  let lastCallTime;
-  let lastInvokeTime = 0;
-  let leading = false;
-  let maxing = false;
-  let trailing = true;
-
-  // Bypass `requestAnimationFrame` by explicitly setting `wait=0`.
-  const useRAF =
-    !wait && wait !== 0 && typeof root.requestAnimationFrame === "function";
-
-  if (typeof func !== "function") {
-    throw new TypeError("Expected a function");
-  }
-  wait = +wait || 0;
-  if (isObject(options)) {
-    leading = !!options.leading;
-    maxing = "maxWait" in options;
-    maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait;
-    trailing = "trailing" in options ? !!options.trailing : trailing;
-  }
-
-  function invokeFunc(time) {
-    const args = lastArgs;
-    const thisArg = lastThis;
-
-    lastArgs = lastThis = undefined;
-    lastInvokeTime = time;
-    result = func.apply(thisArg, args);
-    return result;
-  }
-
-  function startTimer(pendingFunc, milliseconds) {
-    if (useRAF) {
-      root.cancelAnimationFrame(timerId);
-      return root.requestAnimationFrame(pendingFunc);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-implied-eval
-    return setTimeout(pendingFunc, milliseconds);
-  }
-
-  function cancelTimer(id) {
-    if (useRAF) {
-      root.cancelAnimationFrame(id);
-      return;
-    }
-    clearTimeout(id);
-  }
-
-  function leadingEdge(time) {
-    // Reset any `maxWait` timer.
-    lastInvokeTime = time;
-    // Start the timer for the trailing edge.
-    timerId = startTimer(timerExpired, wait);
-    // Invoke the leading edge.
-    return leading ? invokeFunc(time) : result;
-  }
-
-  function remainingWait(time) {
-    const timeSinceLastCall = time - lastCallTime;
-    const timeSinceLastInvoke = time - lastInvokeTime;
-    const timeWaiting = wait - timeSinceLastCall;
-
-    return maxing
-      ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
-      : timeWaiting;
-  }
-
-  function shouldInvoke(time) {
-    const timeSinceLastCall = time - lastCallTime;
-    const timeSinceLastInvoke = time - lastInvokeTime;
-
-    // Either this is the first call, activity has stopped and we're at the
-    // trailing edge, the system time has gone backwards and we're treating
-    // it as the trailing edge, or we've hit the `maxWait` limit.
-    return (
-      lastCallTime === undefined ||
-      timeSinceLastCall >= wait ||
-      timeSinceLastCall < 0 ||
-      (maxing && timeSinceLastInvoke >= maxWait)
-    );
-  }
-
-  function timerExpired() {
-    const time = Date.now();
-    if (shouldInvoke(time)) {
-      return trailingEdge(time);
-    }
-    // Restart the timer.
-    timerId = startTimer(timerExpired, remainingWait(time));
-    return undefined;
-  }
-
-  function trailingEdge(time) {
-    timerId = undefined;
-
-    // Only invoke if we have `lastArgs` which means `func` has been
-    // debounced at least once.
-    if (trailing && lastArgs) {
-      return invokeFunc(time);
-    }
-    lastArgs = lastThis = undefined;
-    return result;
-  }
-
-  function cancel() {
-    if (timerId !== undefined) {
-      cancelTimer(timerId);
-    }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = undefined;
-  }
-
-  function flush() {
-    return timerId === undefined ? result : trailingEdge(Date.now());
-  }
-
-  function pending() {
-    return timerId !== undefined;
-  }
-
-  function debounced(...args) {
-    const time = Date.now();
-    const isInvoking = shouldInvoke(time);
-
-    lastArgs = args;
-    lastThis = this;
-    lastCallTime = time;
-
-    if (isInvoking) {
-      if (timerId === undefined) {
-        return leadingEdge(lastCallTime);
-      }
-      if (maxing) {
-        // Handle invocations in a tight loop.
-        timerId = startTimer(timerExpired, wait);
-        return invokeFunc(lastCallTime);
-      }
-    }
-    if (timerId === undefined) {
-      timerId = startTimer(timerExpired, wait);
-    }
-    return result;
-  }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  debounced.pending = pending;
-  return debounced;
-}
-
-export function isObject(value: unknown): value is Object {
-  const type = typeof value;
-  return value != null && (type === "object" || type === "function");
-}
 
 export function relativePath(root: string, cur: string) {
   return cur.replace(root, "");
diff --git a/src/store/store.ts b/src/store/store.ts
index fc2a2ca..2e90203 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -1,11 +1,10 @@
 import { createPinia, defineStore } from "pinia";
-import { MaybeRef, reactive, ref, toValue, unref } from "vue";
+import { reactive, ref, } from "vue";
 import { IProject } from "../pages/project/interface";
 import { IMode } from "../pages/typst/interface";
 
 const pinia = createPinia();
 const EDITING_FILE = "EDITING_FILE";
-const DEVICE_key = "ICAMERA_DEVICE_ID";
 const PROJECTS_KEY = "PROJECTS_KEY";
 const EDITING_PROJECT = "EDITING_PROJECT";
 
@@ -36,9 +35,14 @@ const useSystemStoreHook = defineStore("system", () => {
   const editingProject = ref<IProject | null>(
     JSON.parse(window.localStorage.getItem(EDITING_PROJECT) ?? "null")
   );
-  const selectProject = (pr: IProject) => {
+  const selectProject = (pr: IProject | null) => {
     editingProject.value = pr;
     window.localStorage.setItem(EDITING_PROJECT, JSON.stringify(pr));
+    if (pr) {
+      setEditingFilePath(pr.path + '/main.typ');
+    } else {
+      setEditingFilePath('');
+    }
   };
 
   const mode = ref<IMode>("all");
diff --git a/src/style/styles.css b/src/style/styles.css
index 0ca104e..78dc5f9 100644
--- a/src/style/styles.css
+++ b/src/style/styles.css
@@ -5,7 +5,7 @@
 body,html {
   margin: 0;
   padding: 0;
-  font-family: system-ui, -apple-system, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", Roboto, Helvetica, Arial, sans-serif ;
+  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei UI",  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", Roboto, Helvetica, Arial, sans-serif ;
   color: var(--text-color)
 }