diff --git a/apps/backend/Dockerfile b/apps/backend/Dockerfile
index 4e17980..e671d07 100644
--- a/apps/backend/Dockerfile
+++ b/apps/backend/Dockerfile
@@ -9,7 +9,7 @@ COPY package*.json ./
 
 # 安装依赖
 RUN npm install -g pnpm@7.17.0
-Run pnpm install --prod
+Run pnpm install --prod --registry https://registry.npm.taobao.org
 
 # 复制项目文件到工作目录
 COPY . .
diff --git a/apps/backend/package.json b/apps/backend/package.json
index 1932219..7babf6e 100644
--- a/apps/backend/package.json
+++ b/apps/backend/package.json
@@ -8,7 +8,7 @@
     "start:dev": "nest start --watch",
     "start:debug": "nest start --debug --watch",
     "start:prod": "node dist/main",
-    "docker:start": "docker-compose up --build"
+    "docker:start": "npm run build && docker-compose up --build"
   },
   "dependencies": {
     "@nestjs/common": "^9.3.5",
diff --git a/apps/backend/src/app.module.ts b/apps/backend/src/app.module.ts
index 91e7e8d..83814fc 100644
--- a/apps/backend/src/app.module.ts
+++ b/apps/backend/src/app.module.ts
@@ -1,10 +1,13 @@
 import { Module } from '@nestjs/common'
 import { MongooseModule } from '@nestjs/mongoose'
 import { ConfigModule } from '@nestjs/config'
+import { APP_FILTER, APP_INTERCEPTOR } from '@nestjs/core'
 import { AppController } from './app.controller'
 import { AppService } from './app.service'
 import { TasksModule } from './tasks/tasks.module'
 import { ProjectsModule } from './projects/projects.module'
+import { HttpExceptionFilter } from './core/filter/http-exception/http-exception.filter'
+import { TransformInterceptor } from './core/interceptor/transform/transform.interceptor'
 
 @Module({
   imports: [
@@ -17,7 +20,16 @@ import { ProjectsModule } from './projects/projects.module'
     MongooseModule.forRoot(process.env.MONGODB_URL),
   ],
   controllers: [AppController],
-  providers: [AppService],
+  providers: [
+    {
+      provide: APP_FILTER,
+      useClass: HttpExceptionFilter,
+    },
+    {
+      provide: APP_INTERCEPTOR,
+      useClass: TransformInterceptor,
+    },
+    AppService],
 })
 
 export class AppModule {}
diff --git a/apps/backend/src/core/filter/http-exception/http-exception.filter.spec.ts b/apps/backend/src/core/filter/http-exception/http-exception.filter.spec.ts
new file mode 100644
index 0000000..0548dab
--- /dev/null
+++ b/apps/backend/src/core/filter/http-exception/http-exception.filter.spec.ts
@@ -0,0 +1,7 @@
+import { HttpExceptionFilter } from './http-exception.filter'
+
+describe('HttpExceptionFilter', () => {
+  it('should be defined', () => {
+    expect(new HttpExceptionFilter()).toBeDefined()
+  })
+})
diff --git a/apps/backend/src/core/filter/http-exception/http-exception.filter.ts b/apps/backend/src/core/filter/http-exception/http-exception.filter.ts
new file mode 100644
index 0000000..7247608
--- /dev/null
+++ b/apps/backend/src/core/filter/http-exception/http-exception.filter.ts
@@ -0,0 +1,24 @@
+import { ArgumentsHost, Catch, ExceptionFilter, HttpException } from '@nestjs/common'
+
+@Catch(HttpException)
+export class HttpExceptionFilter implements ExceptionFilter {
+  catch(exception: HttpException, host: ArgumentsHost) {
+    const ctx = host.switchToHttp()
+    const response = ctx.getResponse()
+    const status = exception.getStatus()
+
+    const message = exception.message
+      ? exception.message
+      : `${status >= 500 ? 'Service Error' : 'Client Error'}`
+
+    const errorResponse = {
+      data: {},
+      message,
+      code: -1,
+    }
+
+    response.status(status)
+    response.header('Content-Type', 'application/json; charset=utf-8')
+    response.send(errorResponse)
+  }
+}
diff --git a/apps/backend/src/core/interceptor/transform/transform.interceptor.spec.ts b/apps/backend/src/core/interceptor/transform/transform.interceptor.spec.ts
new file mode 100644
index 0000000..3493375
--- /dev/null
+++ b/apps/backend/src/core/interceptor/transform/transform.interceptor.spec.ts
@@ -0,0 +1,7 @@
+import { TransformInterceptor } from './transform.interceptor'
+
+describe('TransformInterceptor', () => {
+  it('should be defined', () => {
+    expect(new TransformInterceptor()).toBeDefined()
+  })
+})
diff --git a/apps/backend/src/core/interceptor/transform/transform.interceptor.ts b/apps/backend/src/core/interceptor/transform/transform.interceptor.ts
new file mode 100644
index 0000000..2b32e11
--- /dev/null
+++ b/apps/backend/src/core/interceptor/transform/transform.interceptor.ts
@@ -0,0 +1,17 @@
+import { CallHandler, ExecutionContext, Injectable, NestInterceptor } from '@nestjs/common'
+import { Observable, map } from 'rxjs'
+
+@Injectable()
+export class TransformInterceptor implements NestInterceptor {
+  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
+    return next.handle().pipe(
+      map((data) => {
+        return {
+          data,
+          code: 0,
+          msg: 'Request successful',
+        }
+      }),
+    )
+  }
+}
diff --git a/apps/backend/src/projects/schemas/project.schema.ts b/apps/backend/src/projects/schemas/project.schema.ts
index 264c396..5a0154e 100644
--- a/apps/backend/src/projects/schemas/project.schema.ts
+++ b/apps/backend/src/projects/schemas/project.schema.ts
@@ -3,7 +3,7 @@ import { Document } from 'mongoose'
 
 export type ProjectDocument = Project & Document
 
-@Schema({ timestamps: { createdAt: 'created_at', updatedAt: 'updated_at' } })
+@Schema({ timestamps: { createdAt: 'createdAt', updatedAt: 'updatedAt' } })
 export class Project {
   @Prop({ required: true })
   name: string
diff --git a/apps/backend/src/tasks/schemas/task.schema.ts b/apps/backend/src/tasks/schemas/task.schema.ts
index 7c8d714..3491a77 100644
--- a/apps/backend/src/tasks/schemas/task.schema.ts
+++ b/apps/backend/src/tasks/schemas/task.schema.ts
@@ -5,7 +5,7 @@ import { Project } from '../../projects/schemas/project.schema'
 
 export type TaskDocument = Task & Document
 
-@Schema({ timestamps: { createdAt: 'created_at', updatedAt: 'updated_at' } })
+@Schema({ timestamps: { createdAt: 'createdAt', updatedAt: 'updatedAt' } })
 export class Task {
   @Prop({ required: true })
   title: string
diff --git a/apps/backend/src/tasks/tasks.controller.ts b/apps/backend/src/tasks/tasks.controller.ts
index 22013a7..15019fa 100644
--- a/apps/backend/src/tasks/tasks.controller.ts
+++ b/apps/backend/src/tasks/tasks.controller.ts
@@ -1,4 +1,13 @@
-import { Body, Controller, Delete, Get, Param, Patch, Post, Query } from '@nestjs/common'
+import {
+  Body,
+  Controller,
+  Delete,
+  Get,
+  Param,
+  Patch,
+  Post,
+  Query,
+} from '@nestjs/common'
 import { TasksService } from './tasks.service'
 import { Task } from './schemas/task.schema'
 import { CreateTaskDto } from './dto/create-task.dto'
@@ -14,8 +23,12 @@ export class TasksController {
   }
 
   @Get()
-  findAll(@Query('projectId') projectId?: string, @Query('status') status?: string) {
-    return this.tasksService.findAll(projectId, status)
+  findAll(
+    @Query('projectId') projectId?: string,
+    @Query('status') status?: string,
+    @Query('sortBy') sortBy?: string,
+  ) {
+    return this.tasksService.findAll(projectId, status, sortBy)
   }
 
   @Get(':id')
@@ -30,8 +43,8 @@ export class TasksController {
 
   @Patch(':id')
   async update(
-  @Param('id') id: string,
-  @Body() updateTaskDto: UpdateTaskDto,
+    @Param('id') id: string,
+    @Body() updateTaskDto: UpdateTaskDto,
   ): Promise<Task> {
     return this.tasksService.update(id, updateTaskDto)
   }
diff --git a/apps/backend/src/tasks/tasks.service.ts b/apps/backend/src/tasks/tasks.service.ts
index 67b91cf..43ff393 100644
--- a/apps/backend/src/tasks/tasks.service.ts
+++ b/apps/backend/src/tasks/tasks.service.ts
@@ -21,7 +21,11 @@ export class TasksService {
     return createdTask.save()
   }
 
-  async findAll(projectId?: string, status?: string): Promise<Task[]> {
+  async findAll(
+    projectId?: string,
+    status?: string,
+    sortBy = 'position',
+  ): Promise<Task[]> {
     const query: {
       projectId?: Types.ObjectId
       status?: string
@@ -33,7 +37,10 @@ export class TasksService {
     if (status)
       query.status = status
 
-    return this.taskModel.find(query).sort({ position: -1 }).exec()
+    return this.taskModel
+      .find(query)
+      .sort({ [sortBy]: -1 })
+      .exec()
   }
 
   async findOne(id: string): Promise<Task> {
@@ -51,7 +58,11 @@ export class TasksService {
       update.projectId = new Types.ObjectId(updateTaskDto.projectId)
 
     const updatedTask = await this.taskModel
-      .findByIdAndUpdate(id, { $set: { ...updateTaskDto, ...update } }, { new: true })
+      .findByIdAndUpdate(
+        id,
+        { $set: { ...updateTaskDto, ...update } },
+        { new: true },
+      )
       .exec()
 
     if (!updatedTask)
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 48e005c..3c9dc19 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -27,10 +27,12 @@
     "@iconify-json/carbon": "^1.1.13",
     "@iconify-json/mdi": "^1.1.41",
     "@iconify/vue": "^4.0.2",
+    "@pinia/testing": "^0.1.2",
     "@types/lodash-es": "^4.17.6",
     "@unocss/reset": "^0.48.3",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vitest/coverage-c8": "^0.28.4",
     "@vue/test-utils": "^2.2.10",
     "@vueuse/core": "^9.10.0",
     "cross-env": "^7.0.3",
diff --git a/apps/frontend/src/App.vue b/apps/frontend/src/App.vue
index 0fcb4fe..8ad1238 100644
--- a/apps/frontend/src/App.vue
+++ b/apps/frontend/src/App.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { NConfigProvider } from 'naive-ui'
 import BaseLayout from './layout/BaseLayout.vue'
+import { useCommand } from '@/composables/command'
 import { useThemeStore } from '@/store'
 
 const themeStore = useThemeStore()
+const { initCommands } = useCommand()
+initCommands()
 </script>
 
 <template>
diff --git a/apps/frontend/src/api/http.ts b/apps/frontend/src/api/http.ts
index 226f7e7..a62ca47 100644
--- a/apps/frontend/src/api/http.ts
+++ b/apps/frontend/src/api/http.ts
@@ -9,10 +9,18 @@ export const http: AxiosInstance = axios.create({
 
 http.interceptors.response.use(
   (response: AxiosResponse) => {
-    return response.data // Directly extract data from the response
+    const { code, message, data } = response.data
+
+    if (code === 0) {
+      return data
+    }
+    else {
+      console.error(message)
+      return Promise.reject(new Error(message))
+    }
   },
   (error) => {
-    // Handle common error logic here if needed
+    console.error('Request error:', error)
     return Promise.reject(error)
   },
 )
diff --git a/apps/frontend/src/api/projects.ts b/apps/frontend/src/api/projects.ts
index 09beb7e..5c7c097 100644
--- a/apps/frontend/src/api/projects.ts
+++ b/apps/frontend/src/api/projects.ts
@@ -1,11 +1,12 @@
 import { http } from './http'
+import type { ProjectResponse } from './types'
 
 export function fetchAllProjects() {
-  return http.get('/projects')
+  return http.get<ProjectResponse[], ProjectResponse[]>('/projects')
 }
 
 export function fetchCreateProject(name: string) {
-  return http.post('/projects', {
+  return http.post<ProjectResponse, ProjectResponse>('/projects', {
     name,
   })
 }
diff --git a/apps/frontend/src/api/tasks.ts b/apps/frontend/src/api/tasks.ts
index 03c5131..a61a415 100644
--- a/apps/frontend/src/api/tasks.ts
+++ b/apps/frontend/src/api/tasks.ts
@@ -1,60 +1,61 @@
 import { http } from './http'
+import type { TaskResponse } from './types'
 import type { Task } from '@/store'
 import { TaskStatus } from '@/store'
 
-export function fetchAllTasks({ pId, status }: { pId?: string; status?: TaskStatus }) {
-  return http.get('/tasks', {
+export function fetchAllTasks({ pId, status, sortBy }: { pId?: string; status?: TaskStatus; sortBy?: string }) {
+  return http.get<TaskResponse[], TaskResponse[]>('/tasks', {
     params: {
       projectId: pId,
       status,
+      sortBy,
     },
   })
 }
 
 export function fetchCreateTask(title: string, pId: string) {
-  return http.post('/tasks', {
+  return http.post<TaskResponse, TaskResponse>('/tasks', {
     title,
     projectId: pId,
   })
 }
 
 export function fetchUpdateTaskTitle(taskId: Task['id'], title: string) {
-  return http.patch(`/tasks/${taskId}`, {
+  return http.patch<TaskResponse>(`/tasks/${taskId}`, {
     title,
   })
 }
 export function fetchUpdateTaskContent(taskId: Task['id'], content: string) {
-  return http.patch(`/tasks/${taskId}`, {
+  return http.patch<TaskResponse>(`/tasks/${taskId}`, {
     content,
   })
 }
 
 export function fetchCompleteTask(taskId: Task['id']) {
-  return http.patch(`/tasks/${taskId}`, {
+  return http.patch<TaskResponse>(`/tasks/${taskId}`, {
     status: TaskStatus.COMPLETED,
   })
 }
-
 export function fetchRestoreTask(taskId: Task['id']) {
-  return http.patch(`/tasks/${taskId}`, {
+  return http.patch<TaskResponse>(`/tasks/${taskId}`, {
     status: TaskStatus.ACTIVE,
   })
 }
 
 export function fetchMoveTaskToProject(taskId: Task['id'], projectId: string) {
-  return http.patch(`/tasks/${taskId}`, {
+  return http.patch<TaskResponse>(`/tasks/${taskId}`, {
     projectId,
   })
 }
 
 export function fetchRemoveTask(taskId: Task['id']) {
-  return http.patch(`/tasks/${taskId}`, {
+  return http.patch<TaskResponse>(`/tasks/${taskId}`, {
     status: TaskStatus.REMOVED,
   })
 }
 
 export function fetchUpdateTaskPosition(taskId: Task['id'], position: number) {
-  return http.patch(`/tasks/${taskId}`, {
+  return http.patch<TaskResponse>(`/tasks/${taskId}`, {
     position,
   })
 }
diff --git a/apps/frontend/src/api/types.ts b/apps/frontend/src/api/types.ts
new file mode 100644
index 0000000..ed0dc8d
--- /dev/null
+++ b/apps/frontend/src/api/types.ts
@@ -0,0 +1,19 @@
+import type { TaskStatus } from '@/store/tasks'
+
+export interface TaskResponse {
+  title: string
+  content: string
+  status: TaskStatus
+  projectId: string
+  position: number
+  _id: string
+  createdAt: string
+  updatedAt: string
+}
+
+export interface ProjectResponse {
+  createdAt: string
+  name: string
+  updatedAt: string
+  _id: string
+}
diff --git a/apps/frontend/src/components/command/CommandModal.vue b/apps/frontend/src/components/command/CommandModal.vue
index 3140ae6..2e04842 100644
--- a/apps/frontend/src/components/command/CommandModal.vue
+++ b/apps/frontend/src/components/command/CommandModal.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { NModal } from 'naive-ui'
 import { watch } from 'vue'
-import { resetSearch } from './search'
+import { useSearch } from './search'
 import CommandBody from './CommandModalBody.vue'
-import { registerKeyboardShortcut, showCommandModal } from './commandModal'
+import { useCommandModal } from './commandModal'
+
+const { resetSearch } = useSearch()
+const { registerKeyboardShortcut, showCommandModal } = useCommandModal()
 
 registerKeyboardShortcut()
 
diff --git a/apps/frontend/src/components/command/CommandModalBody.vue b/apps/frontend/src/components/command/CommandModalBody.vue
index d7de420..888b7c7 100644
--- a/apps/frontend/src/components/command/CommandModalBody.vue
+++ b/apps/frontend/src/components/command/CommandModalBody.vue
@@ -1,26 +1,29 @@
 <script setup lang="ts">
-import { NEmpty, NInput, NSkeleton } from 'naive-ui'
-import { inputStateMachine, isSearchCommand, search } from './search'
+import { NEmpty, NInput } from 'naive-ui'
+import { Icon } from '@iconify/vue'
+import { useSearch } from './search'
 import CommandSearchCommands from './CommandSearchCommands.vue'
 import CommandSearchTasks from './CommandSearchTasks.vue'
+
+const { isSearchCommand, search, loading, searching } = useSearch()
 </script>
 
 <template>
-  <div class="base-color w-200 h-120 rounded p-sm">
-    <NInput
-      v-model:value="search"
-      placeholder="通过关键字搜索，或添加 '>' 前缀开启命令模式"
-      clearable
-    />
+  <div class="base-color w-200 h-120 rounded p-sm ">
+    <div class="flex">
+      <Icon :icon="loading ? 'eos-icons:loading' : 'material-symbols:search'" width="30" />
+      <NInput
+        v-model:value="search"
+        class="flex-1"
+        placeholder="通过关键字搜索，或添加 '>' 前缀开启命令模式"
+        clearable
+      />
+    </div>
     <div class="mt-6">
-      <NEmpty v-show="inputStateMachine.state.value === 'waitingForInput'" description="搜索任务，标签或查看命令。">
+      <NEmpty v-if="!searching" description="搜索任务，标签或查看命令。">
         <template #icon />
       </NEmpty>
-      <div v-show="inputStateMachine.state.value === 'loading'">
-        <NSkeleton text :repeat="2" />
-        <NSkeleton text style="width: 60%" />
-      </div>
-      <div v-show="inputStateMachine.state.value === 'loadCompleted'">
+      <div v-else>
         <component :is="isSearchCommand ? CommandSearchCommands : CommandSearchTasks" />
       </div>
     </div>
diff --git a/apps/frontend/src/components/command/CommandSearchCommands.vue b/apps/frontend/src/components/command/CommandSearchCommands.vue
index 0c0298b..598e130 100644
--- a/apps/frontend/src/components/command/CommandSearchCommands.vue
+++ b/apps/frontend/src/components/command/CommandSearchCommands.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
-import { filteredCommands } from './searchCommands'
-import { closeCommandModal } from './commandModal'
-import { useGoto } from '@/composables'
+import { useSearchCommands } from './searchCommands'
+import { useCommandModal } from './commandModal'
+import type { Command } from '@/composables/command'
 
-const goto = useGoto()
+const { closeCommandModal } = useCommandModal()
+const { filteredCommands } = useSearchCommands()
 
-const handleClick = (cb: Function) => {
+const handleClick = (command: Command) => {
+  command.execute()
   closeCommandModal()
-  cb(goto)
 }
 </script>
 
 <template>
   <div>
-    <div v-for="item in filteredCommands" :key="item.id" class="hover:bg-gray-400/5 leading-30px px-2 cursor-pointer" @click="handleClick(item.execute)">
+    <div v-for="(item, key) in filteredCommands" :key="key" class="hover:bg-gray-400/5 leading-30px px-2 cursor-pointer" @click="handleClick(item)">
       {{ item.name }}
     </div>
   </div>
diff --git a/apps/frontend/src/components/command/CommandSearchTasks.vue b/apps/frontend/src/components/command/CommandSearchTasks.vue
index 161e3ac..fd89bea 100644
--- a/apps/frontend/src/components/command/CommandSearchTasks.vue
+++ b/apps/frontend/src/components/command/CommandSearchTasks.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { NEmpty, NScrollbar } from 'naive-ui'
 import SearchItem from './CommandSearchTasksItem.vue'
-import { filteredTasks } from './searchTasks'
+import { useSearchTasks } from './searchTasks'
+
+const { filteredTasks } = useSearchTasks()
 </script>
 
 <template>
diff --git a/apps/frontend/src/components/command/CommandSearchTasksItem.vue b/apps/frontend/src/components/command/CommandSearchTasksItem.vue
index bc913bf..36d0c18 100644
--- a/apps/frontend/src/components/command/CommandSearchTasksItem.vue
+++ b/apps/frontend/src/components/command/CommandSearchTasksItem.vue
@@ -1,23 +1,26 @@
 <script setup lang="ts">
 import { NCheckbox, NEllipsis } from 'naive-ui'
-import { closeCommandModal } from './commandModal'
+import { useCommandModal } from './commandModal'
 import type { TasksSelector } from '@/store'
-import { useTasksSelectorStore } from '@/store'
+import { useTasksSelectorStore, useTasksStore } from '@/store'
 
 const props = defineProps<{
   title: string
   desc: string
   done: boolean
-  from: TasksSelector
+  from: TasksSelector | undefined
   id: string
 }>()
 
+const tasksStore = useTasksStore()
 const tasksSelectorStore = useTasksSelectorStore()
+const { closeCommandModal } = useCommandModal()
 
 const goTo = async () => {
-  if (props.from)
+  if (props.from) {
     await tasksSelectorStore.setCurrentSelector(props.from)
-    // TODO 还应该跳转到对应的 task 上
+    tasksStore.changeActiveTask(props.id)
+  }
 
   closeCommandModal()
 }
diff --git a/apps/frontend/src/components/command/commandModal.ts b/apps/frontend/src/components/command/commandModal.ts
index 63a993c..d5af7dc 100644
--- a/apps/frontend/src/components/command/commandModal.ts
+++ b/apps/frontend/src/components/command/commandModal.ts
@@ -1,34 +1,43 @@
 import { onMounted, onUnmounted, ref } from 'vue'
 import { useIsMac } from '@/composables'
 
-export const showCommandModal = ref(false)
+const showCommandModal = ref(false)
 
-export function openCommandModal() {
-  showCommandModal.value = true
-}
+export function useCommandModal() {
+  function openCommandModal() {
+    showCommandModal.value = true
+  }
 
-export function closeCommandModal() {
-  showCommandModal.value = false
-}
+  function closeCommandModal() {
+    showCommandModal.value = false
+  }
 
-export function registerKeyboardShortcut() {
+  function registerKeyboardShortcut() {
   // Command + K will show command in MacOS
   // Ctrl + K in Windows
-  const isMac = useIsMac()
-  const keydownHandler = (e: KeyboardEvent) => {
-    if (
-      (e.key === 'k')
+    const isMac = useIsMac()
+    const keydownHandler = (e: KeyboardEvent) => {
+      if (
+        (e.key === 'k')
       && (isMac.value ? e.metaKey : e.ctrlKey)
-    ) {
-      e.preventDefault()
-      openCommandModal()
+      ) {
+        e.preventDefault()
+        openCommandModal()
+      }
     }
+
+    onMounted(() => {
+      window.addEventListener('keydown', keydownHandler)
+    })
+    onUnmounted(() => {
+      window.removeEventListener('keydown', keydownHandler)
+    })
   }
 
-  onMounted(() => {
-    window.addEventListener('keydown', keydownHandler)
-  })
-  onUnmounted(() => {
-    window.removeEventListener('keydown', keydownHandler)
-  })
+  return {
+    showCommandModal,
+    openCommandModal,
+    closeCommandModal,
+    registerKeyboardShortcut,
+  }
 }
diff --git a/apps/frontend/src/components/command/search.ts b/apps/frontend/src/components/command/search.ts
index 6cd27ea..8ffac71 100644
--- a/apps/frontend/src/components/command/search.ts
+++ b/apps/frontend/src/components/command/search.ts
@@ -1,58 +1,76 @@
 import { watchDebounced } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
-import { resetSearchCommands, searchCommands } from './searchCommands'
-import { resetSearchTasks, searchTasks } from './searchTasks'
-type State = 'waitingForInput' | 'inputCompleted' | 'loading' | 'loadCompleted'
-
-export const inputStateMachine = {
-  state: ref<State>('waitingForInput'),
-  startLoading() {
-    this.state.value = 'loading'
-  },
-  completeLoad(): void {
-    this.state.value = 'loadCompleted'
-  },
-  reset(): void {
-    this.state.value = 'waitingForInput'
-  },
-}
+import { useSearchCommands } from './searchCommands'
+import { useSearchTasks } from './searchTasks'
+import { delay } from '@/utils'
 
-export const search = ref('')
+const search = ref('')
+const loading = ref(false)
+const searching = ref(false)
 
-export function resetSearch() {
-  search.value = ''
-}
+let isInitialized = false
 
-export const isSearchCommand = computed(() => {
-  return search.value.startsWith('>')
-})
+export function useSearch() {
+  const { resetSearchCommands, searchCommands } = useSearchCommands()
+  const { resetSearchTasks, searchTasks } = useSearchTasks()
 
-async function handleSearch(input: string) {
-  if (isSearchCommand.value)
-    searchCommands(input.slice(1))
-  else
-    await searchTasks(input)
-}
+  function init() {
+    if (!isInitialized) {
+      isInitialized = true
 
-watchDebounced(
-  () => search.value,
-  async (v) => {
-    if (v) {
-      inputStateMachine.startLoading()
-      await handleSearch(v)
-      inputStateMachine.completeLoad()
+      watchDebounced(
+        () => search.value,
+        async (v) => {
+          if (v) {
+            loading.value = true
+            await handleSearch(v)
+            loading.value = false
+            searching.value = true
+          }
+        },
+        { debounce: 500 },
+      )
+
+      watch(
+        () => search.value,
+        (v) => {
+          if (v === '') {
+            resetSearch()
+            resetSearchCommands()
+            resetSearchTasks()
+          }
+        },
+      )
     }
-  },
-  { debounce: 500 },
-)
-
-watch(
-  () => search.value,
-  (v) => {
-    if (v === '') {
-      inputStateMachine.reset()
-      resetSearchCommands()
-      resetSearchTasks()
+  }
+
+  const isSearchCommand = computed(() => {
+    return search.value.startsWith('>')
+  })
+
+  function resetSearch() {
+    search.value = ''
+    loading.value = false
+    searching.value = false
+  }
+
+  async function handleSearch(input: string) {
+    if (isSearchCommand.value) {
+      searchCommands(input.trimEnd().slice(1))
+    }
+    else {
+      await delay()
+      await searchTasks(input)
     }
-  },
-)
+  }
+
+  init()
+
+  return {
+    loading,
+    searching,
+    search,
+    isSearchCommand,
+    resetSearch,
+  }
+}
diff --git a/apps/frontend/src/components/command/searchCommands.ts b/apps/frontend/src/components/command/searchCommands.ts
index c877a82..15ac041 100644
--- a/apps/frontend/src/components/command/searchCommands.ts
+++ b/apps/frontend/src/components/command/searchCommands.ts
@@ -1,41 +1,33 @@
 import Fuse from 'fuse.js'
 import { ref } from 'vue'
+import type { Command } from '@/composables/command'
+import { useCommand } from '@/composables/command'
 
-interface Command {
-  id: number
-  name: string
-  execute: (...args: any[]) => void
-}
-
-export const commands: Command[] = [
-  {
-    id: 0,
-    name: '切换皮肤',
-    execute: (goto) => {
-      goto.gotoSettingsTheme()
-    },
-  },
-  {
-    id: 1,
-    name: '前往主页',
-    execute: (goto) => {
-      goto.gotoHome()
-    },
-  },
-]
-
-// 默认显示所有的命令
-export const filteredCommands = ref<Command[]>(commands)
-const fuse = new Fuse(commands, {
+const filteredCommands = ref<Command[]>([])
+const fuse = new Fuse([] as Command[], {
   keys: ['name'],
 })
 
-export function searchCommands(input: string) {
-  if (!input)
-    return
-  filteredCommands.value = fuse.search(input).map(i => i.item)
-}
+export function useSearchCommands() {
+  const { commands } = useCommand()
+
+  function searchCommands(input: string) {
+    if (!input) {
+      resetSearchCommands()
+      return
+    }
+
+    fuse.setCollection(commands)
+    filteredCommands.value = fuse.search(input).map(i => i.item)
+  }
+
+  function resetSearchCommands() {
+    filteredCommands.value = commands
+  }
 
-export function resetSearchCommands() {
-  filteredCommands.value = commands
+  return {
+    filteredCommands,
+    searchCommands,
+    resetSearchCommands,
+  }
 }
diff --git a/apps/frontend/src/components/command/searchTasks.ts b/apps/frontend/src/components/command/searchTasks.ts
index a4bf19d..9aa7d8f 100644
--- a/apps/frontend/src/components/command/searchTasks.ts
+++ b/apps/frontend/src/components/command/searchTasks.ts
@@ -8,34 +8,43 @@ interface SearchTaskItem {
   title: string
   desc: string
   done: boolean
-  from: TasksSelector
+  from: TasksSelector | undefined
 }
 
-export const filteredTasks = ref<Fuse.FuseResult<SearchTaskItem>[]>([])
+const filteredTasks = ref<Fuse.FuseResult<SearchTaskItem>[]>([])
 const fuse = new Fuse([] as SearchTaskItem[], {
   keys: ['title', 'desc'],
 })
 
-export async function searchTasks(input: string) {
-  const tasksStore = useTasksStore()
-  const projectsStore = useListProjectsStore()
-  const rawTasks = await tasksStore.findAllTasksNotRemoved()
-  const tasks = rawTasks.map((task) => {
-    const done = task.status === TaskStatus.COMPLETED
-    const from = done ? completeSmartProject : projectsStore.findProject(task.projectId)
-    return {
-      id: task.id!,
-      title: task.title,
-      desc: task.content,
-      done,
-      from,
-    }
-  })
-  fuse.setCollection(tasks)
+export function useSearchTasks() {
+  async function searchTasks(input: string) {
+    const tasksStore = useTasksStore()
+    const projectsStore = useListProjectsStore()
 
-  filteredTasks.value = fuse.search(input)
-}
+    const tasks = await tasksStore.findAllTasksNotRemoved()
+    const fuseTasks = tasks.map((task) => {
+      const done = task.status === TaskStatus.COMPLETED
+      const from = done ? completeSmartProject : projectsStore.findProject(task.projectId)
+      return {
+        id: task.id!,
+        title: task.title,
+        desc: task.content,
+        done,
+        from,
+      }
+    })
+    fuse.setCollection(fuseTasks)
+
+    filteredTasks.value = fuse.search(input)
+  }
+
+  function resetSearchTasks() {
+    filteredTasks.value = []
+  }
 
-export function resetSearchTasks() {
-  filteredTasks.value = []
+  return {
+    filteredTasks,
+    searchTasks,
+    resetSearchTasks,
+  }
 }
diff --git a/apps/frontend/src/components/command/tests/commandModal.spec.ts b/apps/frontend/src/components/command/tests/commandModal.spec.ts
index e3c8063..6544c20 100644
--- a/apps/frontend/src/components/command/tests/commandModal.spec.ts
+++ b/apps/frontend/src/components/command/tests/commandModal.spec.ts
@@ -1,53 +1,63 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed } from 'vue'
-import { closeCommandModal, openCommandModal, registerKeyboardShortcut, showCommandModal } from '../commandModal'
-import * as composables from '@/composables'
+import { useCommandModal } from '../commandModal'
 import { fireEvent, useSetup } from '@/tests/helper'
+import * as misc from '@/composables/misc'
 
-describe('CommandModal', () => {
+describe('command modal', () => {
   beforeEach(() => {
-    showCommandModal.value = false
+    const { closeCommandModal } = useCommandModal()
+    closeCommandModal()
   })
-
   it('should be open command modal', () => {
+    const { openCommandModal, showCommandModal } = useCommandModal()
+
     openCommandModal()
 
     expect(showCommandModal.value).toBe(true)
   })
+
   it('should be close command modal', () => {
-    openCommandModal()
+    const { closeCommandModal, showCommandModal } = useCommandModal()
 
     closeCommandModal()
 
     expect(showCommandModal.value).toBe(false)
   })
 
-  describe('KeyboardShortcut', () => {
-    it('should be open command modal when use command + k on Mac', () => {
-      vi.spyOn(composables, 'useIsMac').mockImplementation(() => computed(() => true))
-      useSetup(() => {
-        registerKeyboardShortcut()
-      })
+  it('should be open command modal when press cmd+k on Mac', () => {
+    vi.spyOn(misc, 'useIsMac').mockReturnValue(computed(() => true))
+    const { registerKeyboardShortcut, showCommandModal } = useCommandModal()
 
-      fireEvent.keydown({
-        key: 'k',
-        metaKey: true,
-      })
+    const { wrapper } = useSetup(() => {
+      registerKeyboardShortcut()
+    })
 
-      expect(showCommandModal.value).toBe(true)
+    fireEvent.keyDown({
+      key: 'k',
+      metaKey: true,
     })
-    it('should be open command modal when use ctrl + k on Win', () => {
-      vi.spyOn(composables, 'useIsMac').mockImplementation(() => computed(() => false))
-      useSetup(() => {
-        registerKeyboardShortcut()
-      })
-
-      fireEvent.keydown({
-        key: 'k',
-        ctrlKey: true,
-      })
-
-      expect(showCommandModal.value).toBe(true)
+
+    expect(showCommandModal.value).toBe(true)
+
+    wrapper.unmount()
+  })
+
+  it('should be open command modal when press ctrl+k on Win', () => {
+    vi.spyOn(misc, 'useIsMac').mockReturnValue(computed(() => false))
+    const { registerKeyboardShortcut, showCommandModal } = useCommandModal()
+
+    const { wrapper } = useSetup(() => {
+      registerKeyboardShortcut()
+    })
+
+    fireEvent.keyDown({
+      key: 'k',
+      ctrlKey: true,
     })
+
+    expect(showCommandModal.value).toBe(true)
+
+    wrapper.unmount()
   })
 })
diff --git a/apps/frontend/src/components/command/tests/search.new.spec.ts b/apps/frontend/src/components/command/tests/search.new.spec.ts
new file mode 100644
index 0000000..0c5082e
--- /dev/null
+++ b/apps/frontend/src/components/command/tests/search.new.spec.ts
@@ -0,0 +1,186 @@
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
+import { useSearch } from '../search'
+import { useSearchTasks } from '../searchTasks'
+import { useSearchCommands } from '../searchCommands'
+import { completeSmartProject, useListProjectsStore, useTasksStore } from '@/store'
+import { liveListProject, tasks } from '@/tests/fixture'
+import { useCommand } from '@/composables/command'
+
+describe('search new ', () => {
+  beforeAll(() => {
+    const { addCommand } = useCommand()
+
+    addCommand({
+      name: '回到主页',
+      execute() {},
+    })
+
+    addCommand({
+      name: '切换皮肤',
+      execute() {},
+    })
+  })
+  beforeEach(() => {
+    vi.useFakeTimers()
+
+    createTestingPinia({
+      createSpy: vi.fn,
+    })
+
+    const tasksStore = useTasksStore()
+    vi.mocked(tasksStore.findAllTasksNotRemoved).mockImplementation(async () => tasks)
+
+    const listProjectsStore = useListProjectsStore()
+    vi.mocked(listProjectsStore.findProject).mockImplementation(() => liveListProject)
+  })
+
+  describe('ui state', () => {
+    it('should be loading is true when search is start', async () => {
+      const { search, loading } = useSearch()
+
+      search.value = '吃饭'
+
+      await vi.advanceTimersToNextTimerAsync()
+
+      expect(loading.value).toBe(true)
+    })
+
+    it('should be loading is false when search is complete', async () => {
+      const { search, loading } = useSearch()
+
+      search.value = '吃饭'
+
+      await vi.runAllTimersAsync()
+
+      expect(loading.value).toBe(false)
+    })
+
+    it('should be searching is true when search is complete', async () => {
+      const { search, searching } = useSearch()
+
+      search.value = '吃饭'
+
+      await vi.runAllTimersAsync()
+
+      expect(searching.value).toBe(true)
+    })
+  })
+
+  describe('search tasks', () => {
+    it('should be search a task by title', async () => {
+      const { search } = useSearch()
+      const { filteredTasks } = useSearchTasks()
+
+      search.value = '吃饭'
+
+      await vi.runAllTimersAsync()
+
+      expect(filteredTasks.value.length).toBe(1)
+      const item = filteredTasks.value[0].item
+      expect(item.title).toBe('吃饭')
+      expect(item).toHaveProperty('id')
+      expect(item).toHaveProperty('desc')
+      expect(item).toHaveProperty('done')
+      expect(item).toHaveProperty('from')
+    })
+
+    it('should be search a task by desc', async () => {
+      const { search } = useSearch()
+      const { filteredTasks } = useSearchTasks()
+
+      search.value = '吃什么'
+      await vi.runAllTimersAsync()
+
+      expect(filteredTasks.value.length).toBe(1)
+      expect(filteredTasks.value[0].item.title).toBe('吃饭')
+    })
+
+    it('should not be found when the task does not exist', async () => {
+      const { search } = useSearch()
+      const { filteredTasks } = useSearchTasks()
+
+      search.value = '运动'
+      await vi.runAllTimersAsync()
+
+      expect(filteredTasks.value.length).toBe(0)
+    })
+
+    it('should be task\'s project is listProject when status is active', async () => {
+      const { search } = useSearch()
+      const { filteredTasks } = useSearchTasks()
+
+      search.value = '吃饭'
+      await vi.runAllTimersAsync()
+
+      expect(filteredTasks.value[0].item.done).toBe(false)
+      expect(filteredTasks.value[0].item.from?.name).toBe('生活')
+    })
+    it('should be task\'s project is completeSmartProject when status is complete', async () => {
+      const { search } = useSearch()
+      const { filteredTasks } = useSearchTasks()
+
+      search.value = '写代码'
+      await vi.runAllTimersAsync()
+
+      expect(filteredTasks.value[0].item.done).toBe(true)
+      expect(filteredTasks.value[0].item.from?.name).toBe(completeSmartProject.name)
+    })
+  })
+
+  describe('search commands', () => {
+    it('normal', async () => {
+      const { search } = useSearch()
+      const { filteredCommands } = useSearchCommands()
+
+      search.value = '>主页'
+
+      await vi.runAllTimersAsync()
+
+      expect(filteredCommands.value.length).toBe(1)
+      expect(filteredCommands.value[0].name).toBe('回到主页')
+    })
+
+    it('removes the trailing white space', async () => {
+      const { search } = useSearch()
+      const { filteredCommands } = useSearchCommands()
+
+      search.value = '>主页 '
+
+      await vi.runAllTimersAsync()
+
+      expect(filteredCommands.value.length).toBe(1)
+      expect(filteredCommands.value[0].name).toBe('回到主页')
+    })
+
+    it('should be search all commands ', async () => {
+      const { search } = useSearch()
+      const { filteredCommands } = useSearchCommands()
+
+      search.value = '>'
+
+      await vi.runAllTimersAsync()
+      expect(filteredCommands.value.length).toBe(2)
+    })
+  })
+
+  it('should be reset when search is empty', async () => {
+    const { search, searching, loading } = useSearch()
+    const { filteredTasks } = useSearchTasks()
+    const { filteredCommands } = useSearchCommands()
+
+    search.value = '吃饭'
+    await vi.runAllTimersAsync()
+
+    search.value = '>主页'
+    await vi.runAllTimersAsync()
+
+    search.value = ''
+    await vi.runAllTimersAsync()
+
+    expect(searching.value).toBe(false)
+    expect(loading.value).toBe(false)
+    expect(filteredTasks.value.length).toBe(0)
+    expect(filteredCommands.value.length).toBe(2)
+  })
+})
diff --git a/apps/frontend/src/components/command/tests/search.spec.ts b/apps/frontend/src/components/command/tests/search.spec.ts
index 9273078..ef13eed 100644
--- a/apps/frontend/src/components/command/tests/search.spec.ts
+++ b/apps/frontend/src/components/command/tests/search.spec.ts
@@ -1,76 +1,118 @@
-import { afterEach, beforeEach, describe, expect, it, test, vi } from 'vitest'
-import flushPromises from 'flush-promises'
-import { inputStateMachine, resetSearch, search } from '../search'
-import { resetSearchCommands, searchCommands } from '../searchCommands'
-import { resetSearchTasks, searchTasks } from '../searchTasks'
-
-vi.mock('../searchCommands.ts')
-vi.mock('../searchTasks.ts')
-
-async function flushWatch() {
-  // 这是为了处理 watch
-  await flushPromises() // 这是为了处理延迟 500ms
-  vi.advanceTimersToNextTimer()
-  // 这是为了处理内部的 await
-  await flushPromises()
-}
-
-describe('Search', () => {
-  beforeEach(() => {
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useSearch } from '../search'
+
+const searchTasks = vi.fn()
+const resetSearchTasks = vi.fn()
+vi.mock('../searchTasks.ts', () => {
+  return {
+    useSearchTasks() {
+      return {
+        searchTasks,
+        resetSearchTasks,
+      }
+    },
+  }
+})
+
+const searchCommands = vi.fn()
+const resetSearchCommands = vi.fn()
+vi.mock('../searchCommands.ts', () => {
+  return {
+    useSearchCommands() {
+      return {
+        searchCommands,
+        resetSearchCommands,
+      }
+    },
+  }
+})
+
+describe('search', () => {
+  beforeEach(async () => {
     vi.useFakeTimers()
-    vi.clearAllMocks()
-  })
 
-  afterEach(() => {
+    const { resetSearch } = useSearch()
+
     resetSearch()
+
+    await vi.runAllTimersAsync()
+
+    vi.clearAllMocks()
   })
+  // 只测试一个关注点
+  it('should be loading is true when search is start', async () => {
+    const { search, loading } = useSearch()
 
-  describe('input state machine', () => {
-    it('input state machine change', async () => {
-      search.value = 'code'
+    search.value = '吃饭'
 
-      await flushPromises()
-      vi.advanceTimersToNextTimer()
-      expect(inputStateMachine.state.value).toBe('loading')
+    await vi.advanceTimersToNextTimerAsync()
 
-      await flushPromises()
-      expect(inputStateMachine.state.value).toBe('loadCompleted')
-    })
+    expect(loading.value).toBe(true)
+  })
+
+  it('should be loading is false when search is complete', async () => {
+    const { search, loading } = useSearch()
 
-    it('should be reset when search value is empty', async () => {
-      search.value = 'code'
-      await flushWatch()
+    search.value = '吃饭'
 
-      search.value = ''
-      await flushWatch()
+    await vi.runAllTimersAsync()
 
-      expect(inputStateMachine.state.value).toBe('waitingForInput')
-    })
+    expect(loading.value).toBe(false)
   })
 
-  test('should search commands when input contain \'>\'  ', async () => {
-    search.value = '>主页'
+  it('should be searching is true when search is complete', async () => {
+    const { search, searching } = useSearch()
 
-    await flushWatch()
+    search.value = '吃饭'
+
+    await vi.runAllTimersAsync()
 
-    expect(searchCommands).toBeCalledWith('主页')
+    expect(searching.value).toBe(true)
   })
 
-  test('should search tasks ', async () => {
+  it('search tasks', async () => {
+    const { search } = useSearch()
+
     search.value = '吃饭'
 
-    await flushWatch()
+    await vi.runAllTimersAsync()
 
     expect(searchTasks).toBeCalledWith('吃饭')
   })
 
-  test('should be reset when reset search', async () => {
+  describe('search commands', () => {
+    it('normal', async () => {
+      const { search } = useSearch()
+
+      search.value = '>主页'
+
+      await vi.runAllTimersAsync()
+
+      expect(searchCommands).toBeCalledWith('主页')
+    })
+
+    it('removes the trailing white space', async () => {
+      const { search } = useSearch()
+
+      search.value = '>主页 '
+
+      await vi.runAllTimersAsync()
+
+      expect(searchCommands).toBeCalledWith('主页')
+    })
+  })
+
+  it('should be reset when search is empty', async () => {
+    const { search, searching, loading } = useSearch()
+
     search.value = '吃饭'
-    await flushWatch()
+    await vi.runAllTimersAsync()
 
     search.value = ''
-    await flushWatch()
+    await vi.runAllTimersAsync()
 
+    expect(searching.value).toBe(false)
+    expect(loading.value).toBe(false)
     expect(resetSearchCommands).toBeCalled()
     expect(resetSearchTasks).toBeCalled()
   })
diff --git a/apps/frontend/src/components/command/tests/searchCommands.spec.ts b/apps/frontend/src/components/command/tests/searchCommands.spec.ts
index 553cecf..f957507 100644
--- a/apps/frontend/src/components/command/tests/searchCommands.spec.ts
+++ b/apps/frontend/src/components/command/tests/searchCommands.spec.ts
@@ -1,28 +1,39 @@
-import { beforeEach, describe, expect, it } from 'vitest'
-import { commands, filteredCommands, resetSearchCommands, searchCommands } from '../searchCommands'
+import { beforeAll, beforeEach, describe, expect, it } from 'vitest'
+import { useSearchCommands } from '../searchCommands'
+import { useCommand } from '@/composables/command'
 
-describe('SearchCommands', () => {
+describe('search commands', () => {
   beforeEach(() => {
+    const { resetSearchCommands } = useSearchCommands()
     resetSearchCommands()
   })
-  it('Should search for the go to home command', () => {
-    searchCommands('前往主页')
+  beforeAll(() => {
+    const { addCommand } = useCommand()
 
-    expect(filteredCommands.value.length).toBe(1)
-    expect(filteredCommands.value[0].name).toBe('前往主页')
-  })
+    addCommand({
+      name: '回到主页',
+      execute() {},
+    })
 
-  it('should be reset filtered commands', () => {
-    searchCommands('前往主页')
+    addCommand({
+      name: '切换皮肤',
+      execute() {},
+    })
+  })
+  it('should be search a command', () => {
+    const { searchCommands, filteredCommands } = useSearchCommands()
 
-    resetSearchCommands()
+    searchCommands('主页')
 
-    expect(filteredCommands.value.length).toBe(commands.length)
+    expect(filteredCommands.value.length).toBe(1)
+    expect(filteredCommands.value[0].name).toBe('回到主页')
   })
 
-  it('should return all commands when input is empty', () => {
+  it('should be search all commands ', () => {
+    const { searchCommands, filteredCommands } = useSearchCommands()
+
     searchCommands('')
 
-    expect(filteredCommands.value.length).toBe(commands.length)
+    expect(filteredCommands.value.length).toBe(2)
   })
 })
diff --git a/apps/frontend/src/components/command/tests/searchTasks.spec.ts b/apps/frontend/src/components/command/tests/searchTasks.spec.ts
index c79f3b6..4195600 100644
--- a/apps/frontend/src/components/command/tests/searchTasks.spec.ts
+++ b/apps/frontend/src/components/command/tests/searchTasks.spec.ts
@@ -1,56 +1,82 @@
-import { afterEach, beforeEach, describe, expect, it } from 'vitest'
-import { filteredTasks, resetSearchTasks, searchTasks } from '../searchTasks'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
+import { useSearchTasks } from '../searchTasks'
+import { completeSmartProject, useListProjectsStore, useTasksStore } from '@/store'
+import { liveListProject, tasks } from '@/tests/fixture'
 
-describe.skip('SearchTasks', () => {
+describe('search tasks', () => {
   beforeEach(() => {
-    // TODO 需要去解决2个依赖
-    // 1. projectsStore.findProject 需要返回一个 Project
-    // 2. tasksStore.findAllTasksNotRemoved  需要返回没有处理过的 task
-    // vi.spyOn(TaskService, 'findAllTasksNotRemoved').mockResolvedValue([
-    //   createMockTask('吃饭'),
-    //   createMockTask('写代码', '一杯茶，一包烟，一行代码写一天'),
-    // ])
-  })
+    createTestingPinia({
+      createSpy: vi.fn,
+    })
+
+    const tasksStore = useTasksStore()
+    vi.mocked(tasksStore.findAllTasksNotRemoved).mockImplementation(
+      async () => tasks,
+    )
+
+    const listProjectsStore = useListProjectsStore()
+    vi.mocked(listProjectsStore.findProject).mockImplementation(() => liveListProject)
+
+    const { resetSearchTasks } = useSearchTasks()
 
-  afterEach(() => {
     resetSearchTasks()
   })
-
   it('should be search a task by title', async () => {
-    await searchTasks('写代码')
+    const { searchTasks, filteredTasks } = useSearchTasks()
+
+    await searchTasks('吃饭')
 
     expect(filteredTasks.value.length).toBe(1)
-    expect(filteredTasks.value[0].item.title).toBe('写代码')
+    const item = filteredTasks.value[0].item
+    expect(item.title).toBe('吃饭')
+    expect(item).toHaveProperty('id')
+    expect(item).toHaveProperty('desc')
+    expect(item).toHaveProperty('done')
+    expect(item).toHaveProperty('from')
   })
 
-  it('should be search a task by doc', async () => {
-    await searchTasks('一包烟')
+  it('should be search a task by desc', async () => {
+    const { searchTasks, filteredTasks } = useSearchTasks()
+
+    await searchTasks('吃什么')
 
     expect(filteredTasks.value.length).toBe(1)
-    expect(filteredTasks.value[0].item.title).toBe('写代码')
+    expect(filteredTasks.value[0].item.title).toBe('吃饭')
   })
 
   it('should not be found when the task does not exist', async () => {
-    await searchTasks('睡觉')
+    const { searchTasks, filteredTasks } = useSearchTasks()
+
+    await searchTasks('运动')
 
     expect(filteredTasks.value.length).toBe(0)
   })
 
-  it('should reset search result', async () => {
-    await searchTasks('一包烟')
+  it('should be task\'s project is listProject when status is active', async () => {
+    const { searchTasks, filteredTasks } = useSearchTasks()
+
+    await searchTasks('吃饭')
+
+    expect(filteredTasks.value[0].item.done).toBe(false)
+    expect(filteredTasks.value[0].item.from?.name).toBe('生活')
+  })
+  it('should be task\'s project is completeSmartProject when status is complete', async () => {
+    const { searchTasks, filteredTasks } = useSearchTasks()
+
+    await searchTasks('写代码')
+
+    expect(filteredTasks.value[0].item.done).toBe(true)
+    expect(filteredTasks.value[0].item.from?.name).toBe(completeSmartProject.name)
+  })
+
+  it('should be reset tasks', async () => {
+    const { searchTasks, filteredTasks, resetSearchTasks } = useSearchTasks()
+
+    await searchTasks('吃饭')
 
     resetSearchTasks()
 
     expect(filteredTasks.value.length).toBe(0)
   })
 })
-
-// function createMockTask(title: string, content = '') {
-//   return {
-//     id: 0,
-//     title,
-//     content,
-//     project: undefined,
-//     index: 1,
-//   }
-// }
diff --git a/apps/frontend/src/components/header/TheHeader.vue b/apps/frontend/src/components/header/TheHeader.vue
index 17ceb0a..396973f 100644
--- a/apps/frontend/src/components/header/TheHeader.vue
+++ b/apps/frontend/src/components/header/TheHeader.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useGoto } from '@/composables/goto'
+import { openGithub, useGoto } from '@/composables'
 
-const { gotoHome, gotoGithub, gotoSettings } = useGoto()
+const { gotoHome, gotoSettings } = useGoto()
 </script>
 
 <template>
@@ -13,7 +13,7 @@ const { gotoHome, gotoGithub, gotoSettings } = useGoto()
       <button class="mx-2 !outline-none" @click="gotoSettings()">
         <div i="carbon-settings" />
       </button>
-      <button class="mx-2 !outline-none" @click="gotoGithub()">
+      <button class="mx-2 !outline-none" @click="openGithub()">
         <div i="mdi-github" />
       </button>
     </div>
diff --git a/apps/frontend/src/components/navbar/Navbar.vue b/apps/frontend/src/components/navbar/Navbar.vue
index 184b92e..8e9f0dd 100644
--- a/apps/frontend/src/components/navbar/Navbar.vue
+++ b/apps/frontend/src/components/navbar/Navbar.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { NDropdown, NPopover } from 'naive-ui'
 import type { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface'
-import { openCommandModal } from '../command/commandModal'
+import { useCommandModal } from '../command/commandModal'
 import Command from '@/components/command/CommandModal.vue'
 import { useGoto } from '@/composables'
 
 const { gotoSettings } = useGoto()
+const { openCommandModal } = useCommandModal()
 
 const settingOptions: DropdownMixedOption[] = [
   {
diff --git a/apps/frontend/src/components/task/TaskItem.vue b/apps/frontend/src/components/task/TaskItem.vue
index a8e444a..04277d0 100644
--- a/apps/frontend/src/components/task/TaskItem.vue
+++ b/apps/frontend/src/components/task/TaskItem.vue
@@ -3,7 +3,7 @@ import { NPopover } from 'naive-ui'
 import { ref } from 'vue'
 import { useTaskOperationMessage, useTaskRightContextMenu } from '@/composables'
 import { TaskStatus, useTasksStore, useThemeStore } from '@/store'
-import type { Project, Task } from '@/store'
+import type { Task } from '@/store'
 
 interface Props {
   task: Task
diff --git a/apps/frontend/src/components/task/TaskLeftListProject.vue b/apps/frontend/src/components/task/TaskLeftListProject.vue
index e3af59d..f89dc86 100644
--- a/apps/frontend/src/components/task/TaskLeftListProject.vue
+++ b/apps/frontend/src/components/task/TaskLeftListProject.vue
@@ -1,24 +1,25 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import type { MenuItem } from '@imengyu/vue3-context-menu'
-import ContextMenu from '@imengyu/vue3-context-menu'
 import type { TreeOption } from 'naive-ui'
 import { NTree } from 'naive-ui'
-import { h, onMounted, ref, watchEffect } from 'vue'
+import { computed, h, ref, watchEffect } from 'vue'
 import 'vue3-emoji-picker/css'
-// import { tagCreateViewDialog } from './TagView'
-// import { tagRemoveAlert } from './TagView/TagRemoveAlert'
 import { projectCreatedViewModal } from './TagView/ProjectCreateView'
-import { useListProjectsStore, useProjectSelectedStatusStore } from '@/store'
-// import type { Tag } from '@/services/task/listTag'
+import { useTaskLeftListStore } from './taskLeftList'
 
-const projectSelectedStatusStore = useProjectSelectedStatusStore()
-const listProjectsStore = useListProjectsStore()
+const taskLeftListStore = useTaskLeftListStore()
+const treeListProjectChildren = ref<TreeOption[]>([])
 
-enum TreeRootKeys {
-  PROJECT = 100,
-  TAG = 200,
-}
+const selectedKey = computed({
+  get() {
+    return [taskLeftListStore.selectedKey]
+  },
+  set(val) {
+    taskLeftListStore.selectedKey = val[0]
+  },
+})
+
+const defaultExpandedKeys = [taskLeftListStore.listProjectRootNode.name]
 
 const createRootNodeSuffix = (onclick: (e: Event) => void) => {
   return () => h(Icon, {
@@ -29,177 +30,41 @@ const createRootNodeSuffix = (onclick: (e: Event) => void) => {
   })
 }
 
-const createTagLeafPrefix = () => {
-  return () => h(Icon, {
-    icon: 'carbon:tag',
-    width: '14',
-  })
-}
-
-const createOperateNodeBtn = (items: MenuItem[]) => {
-  return h(Icon, {
-    class: 'invisible',
-    icon: 'mdi:dots-horizontal',
-    width: '20',
-    onclick(e: MouseEvent) {
-      e.preventDefault()
-      ContextMenu.showContextMenu({
-        x: e.x,
-        y: e.y,
-        items,
-      })
-    },
-  })
-}
-
-// const createTagLeafSuffix = (tag: Tag) => {
-//   return () => h('div', { class: 'flex flex-row items-center' },
-//     [
-//       h(Icon, {
-//         icon: 'carbon:circle-solid',
-//         width: '8',
-//         color: tag.color,
-//         class: 'mx-2',
-//       }),
-//       createOperateNodeBtn([
-//         {
-//           label: 'edit',
-//           onClick: () => tagCreateViewDialog({ tag }),
-//         },
-//         {
-//           label: 'remove',
-//           onClick: () => {
-//             tagRemoveAlert({
-//               tagName: tag.name,
-//             }).then((action) => {
-
-//               // if (action === 'confirm')
-//               //   taskStore.deleteTag(tag.id)
-//             })
-//           },
-//         },
-//       ]),
-//     ],
-//   )
-// }
-
-// const generateTagChildrenNode = (tags: Tag[]) => {
-//   if (!tags.length) {
-//     return [
-//       {
-//         label: '以标签的维度展示不同清单的任务。在添加任务时输入“#”可快速选择标签',
-//         placeholder: true,
-//       },
-//     ]
-//   }
-//   return tags.map((tag, index) => ({
-//     key: TreeRootKeys.TAG + index + 1,
-//     label: tag.name,
-//     color: tag.color,
-//     prefix: createTagLeafPrefix(),
-//     suffix: createTagLeafSuffix(tag),
-//     isleaf: true,
-//   }))
-// }
-
-const defaultExpandedKeys = ref<TreeRootKeys[]>([])
-const treeProjectChildren = ref<TreeOption[]>([])
-// const treeTagChildren = ref<TreeOption[]>([])
-
 watchEffect(() => {
-  treeProjectChildren.value = listProjectsStore.projects.map((project, index) => {
+  treeListProjectChildren.value = taskLeftListStore.listProjectChildrenNodes.map((project) => {
     return {
-      key: TreeRootKeys.PROJECT + index + 1,
+      key: project.name,
       label: project.name,
       isleaf: true,
     }
   })
-  // treeTagChildren.value = generateTagChildrenNode(taskStore.listTags)
-})
-
-onMounted(() => {
-  defaultExpandedKeys.value = [
-    ...new Set([
-      ...projectSelectedStatusStore.listDefaultSelectedKey,
-      ...(listProjectsStore.projects.length ? [] : [TreeRootKeys.PROJECT]),
-      // ...(taskStore.listTags.length ? [] : [TreeRootKeys.TAG]),
-    ]),
-  ]
 })
 
 const data = ref<any[]>([
   {
-    key: TreeRootKeys.PROJECT,
-    label: '清单',
+    key: taskLeftListStore.listProjectRootNode.name,
+    label: taskLeftListStore.listProjectRootNode.name,
     checkboxDisabled: false,
     isLeaf: false,
-    children: treeProjectChildren,
+    children: treeListProjectChildren,
     suffix: createRootNodeSuffix((e: Event) => {
       e.stopPropagation()
       projectCreatedViewModal()
     }),
   },
-  // {
-  //   key: TreeRootKeys.TAG,
-  //   label: '标签',
-  //   checkboxDisabled: false,
-  //   isLeaf: false,
-  //   children: treeTagChildren,
-  //   suffix: createRootNodeSuffix((e: Event) => {
-  //     e.stopPropagation()
-  //     tagCreateViewDialog().then(() => {
-  //       // eslint-disable-next-line no-console
-  //       console.log('done')
-  //     })
-  //   }),
-  // },
 ])
+
 const nodeProps = ({ option }: { option: TreeOption }) => {
   return {
-    onClick() {
-      if (
-        option.key === TreeRootKeys.PROJECT
-        || option.key === TreeRootKeys.TAG
-      )
-        return
-
-      // if (option.key! < 200) {
-      const projectName = `${option.label}`
-      listProjectsStore.selectProject(projectName)
-      // }
-
-      // const tag = findListTagByName(option.label)
-      // if (tag)
-      //   taskStore.selectCategory(tag)
-    },
     class: option.placeholder ? 'placeholder' : '',
   }
 }
-
-const changeSelectedKey = (key: number[]) => {
-  if (key[0] === TreeRootKeys.PROJECT) {
-    projectSelectedStatusStore.changePreSelectKey(
-      projectSelectedStatusStore.selectedKey,
-    )
-  }
-
-  projectSelectedStatusStore.changeSelectedKey(key)
-}
-
-const onExpandedKey = (key: number[]) => {
-  if (key.includes(TreeRootKeys.PROJECT)) {
-    projectSelectedStatusStore.changeSelectedKey(
-      projectSelectedStatusStore.preSelectKey,
-    )
-  }
-}
 </script>
 
 <template>
   <NTree
-    v-model:selected-keys="projectSelectedStatusStore.selectedKey" :default-expanded-keys="defaultExpandedKeys"
-    block-line expand-on-click :data="data" :node-props="nodeProps" @update:expanded-keys="onExpandedKey"
-    @update:selected-keys="changeSelectedKey"
+    v-model:selected-keys="selectedKey" :default-expanded-keys="defaultExpandedKeys"
+    block-line expand-on-click :data="data" :node-props="nodeProps"
   />
 </template>
 
diff --git a/apps/frontend/src/components/task/TaskLeftListSmartProject.vue b/apps/frontend/src/components/task/TaskLeftListSmartProject.vue
index c4b9a9f..ac01f81 100644
--- a/apps/frontend/src/components/task/TaskLeftListSmartProject.vue
+++ b/apps/frontend/src/components/task/TaskLeftListSmartProject.vue
@@ -2,9 +2,9 @@
 import { Icon } from '@iconify/vue'
 import { NPopover } from 'naive-ui'
 import { ref } from 'vue'
+import { useTaskLeftListStore } from './taskLeftList'
 import type { SmartProjectName } from '@/store'
 import {
-  useProjectSelectedStatusStore,
   useSettingsStore,
   useSmartProjects,
 } from '@/store'
@@ -31,20 +31,17 @@ function useProjectMoreActions() {
   }
 }
 
+const taskLeftListStore = useTaskLeftListStore()
 const settingsStore = useSettingsStore()
 const selected = 'bg-[#E7F5EE] dark:bg-[#233633]'
 
 const smartProjects = useSmartProjects()
-const projectSelectedStatusStore = useProjectSelectedStatusStore()
-const {
-  showMoreIconIndex,
-  showWitchPopover,
-  openPopover,
-} = useProjectMoreActions()
+const { showMoreIconIndex, showWitchPopover, openPopover }
+  = useProjectMoreActions()
 
-const handleTaskItemClick = (projectName: string, key: number) => {
+const handleTaskItemClick = (projectName: string) => {
   smartProjects.selectProject(projectName as SmartProjectName)
-  projectSelectedStatusStore.changeSelectedKey([key])
+  taskLeftListStore.selectedKey = projectName
 }
 </script>
 
@@ -57,19 +54,19 @@ const handleTaskItemClick = (projectName: string, key: number) => {
       pl-4
       pr-2
       hover="bg-[#F3F3F5] dark:bg-[#2D2D30]"
-      :class="
-        projectSelectedStatusStore.selectedKey[0] === key ? selected : ''
-      "
-      @click="handleTaskItemClick(item.title, key)"
+      :class="taskLeftListStore.selectedKey === item.title ? selected : ''"
+      @click="handleTaskItemClick(item.title)"
       @mouseenter="showMoreIconIndex = key"
       @mouseleave="showMoreIconIndex = -1"
     >
       <div flex>
         <Icon
           :icon="item.icon"
-          width="20" class="color-[#9D9FA3]"
+          width="20"
+          class="color-[#9D9FA3]"
           dark="color-white-b"
-        /> <span class="ml-2">{{ item.title }}</span>
+        />
+        <span class="ml-2">{{ item.title }}</span>
       </div>
 
       <NPopover
@@ -82,10 +79,7 @@ const handleTaskItemClick = (projectName: string, key: number) => {
       >
         <template #trigger>
           <Icon
-            v-show="
-              projectSelectedStatusStore.selectedKey[0] === key
-                || showMoreIconIndex === key
-            "
+            v-show="showMoreIconIndex === key"
             icon="material-symbols:more-horiz"
             width="20"
             class="color-[#9D9FA3]"
diff --git a/apps/frontend/src/components/task/TaskList.vue b/apps/frontend/src/components/task/TaskList.vue
index 953fe62..231158c 100644
--- a/apps/frontend/src/components/task/TaskList.vue
+++ b/apps/frontend/src/components/task/TaskList.vue
@@ -5,6 +5,7 @@ import { Icon } from '@iconify/vue'
 import draggable from 'vuedraggable'
 import TaskItem from './TaskItem.vue'
 import {
+  TasksSelectorType,
   useTaskLeftMenuStatusStore,
   useTasksSelectorStore,
   useTasksStore,
@@ -58,11 +59,11 @@ function handleInputChange(event: any) {
 }
 
 const shouldShowTodoAdd = computed(() => {
-  return tasksSelectorStore.currentSelector?.type === 'listProject'
+  return tasksSelectorStore.currentSelector?.type === TasksSelectorType.listProject
 })
 
 const shouldEnabledDrag = computed(() => {
-  return tasksSelectorStore.currentSelector?.type === 'listProject'
+  return tasksSelectorStore.currentSelector?.type === TasksSelectorType.listProject
 },
 )
 
diff --git a/apps/frontend/src/components/task/taskLeftList.ts b/apps/frontend/src/components/task/taskLeftList.ts
new file mode 100644
index 0000000..fb826ef
--- /dev/null
+++ b/apps/frontend/src/components/task/taskLeftList.ts
@@ -0,0 +1,62 @@
+import { ref, watch, watchEffect } from 'vue'
+import { watchOnce } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import { useListProjectsStore } from '@/store/listProjects'
+
+interface Node {
+  name: string
+}
+
+export const useTaskLeftListStore = defineStore('taskLeftList', () => {
+  const listProjectsStore = useListProjectsStore()
+  const listProjectRootNode: Node = {
+    name: '清单',
+  }
+
+  const selectedKey = ref<string>('')
+  const listProjectChildrenNodes = ref<Node[]>([])
+
+  watchEffect(() => {
+    listProjectChildrenNodes.value = listProjectsStore.projects.map((p) => {
+      return {
+        name: p.name,
+      }
+    })
+  })
+
+  // 初始化默认的选择
+  watchOnce(
+    () => listProjectChildrenNodes.value,
+    (value) => {
+      selectedKey.value = value[0].name
+    },
+  )
+
+  // 当更新列表清单的时候 同步下 selectedKeys
+  watch(
+    () => listProjectChildrenNodes.value,
+    (newValue, oldValue) => {
+      if (!oldValue.length)
+        return
+
+      if (newValue.length > oldValue.length)
+        selectedKey.value = newValue[newValue.length - 1].name
+      else if (oldValue.length > newValue.length)
+        selectedKey.value = newValue[0].name
+    },
+  )
+
+  watch(selectedKey, (newValue, oldValue) => {
+    // 当点击 rootNode 的时候不应该改变选择的 project
+    if (newValue === listProjectRootNode.name)
+      selectedKey.value = oldValue
+    else
+      listProjectsStore.selectProject(newValue)
+  })
+
+  return {
+    selectedKey,
+    listProjectRootNode,
+    listProjectChildrenNodes,
+  }
+})
diff --git a/apps/frontend/src/composables/command/CommandGoToHome.ts b/apps/frontend/src/composables/command/CommandGoToHome.ts
new file mode 100644
index 0000000..2e68dcd
--- /dev/null
+++ b/apps/frontend/src/composables/command/CommandGoToHome.ts
@@ -0,0 +1,19 @@
+import type { Command } from './index'
+import { useGoto } from '@/composables'
+export class CommandGoToHome implements Command {
+  gotoHome: () => void
+
+  name = '前往主页'
+
+  constructor() {
+    // 当 command 的逻辑依赖于 vue setup 的话, 必须在构造函数中获取
+    // 比如这里依赖于 useGoto 而  useGoto 依赖于 useRouter .
+    // useRouter 必须在 setup 中调用
+    const { gotoHome } = useGoto()
+    this.gotoHome = gotoHome
+  }
+
+  execute() {
+    this.gotoHome()
+  }
+}
diff --git a/apps/frontend/src/composables/command/CommandGotoSettingsTheme.ts b/apps/frontend/src/composables/command/CommandGotoSettingsTheme.ts
new file mode 100644
index 0000000..3aa9ac3
--- /dev/null
+++ b/apps/frontend/src/composables/command/CommandGotoSettingsTheme.ts
@@ -0,0 +1,16 @@
+import type { Command } from './index'
+import { useGoto } from '@/composables'
+export class CommandGoToSettingsTheme implements Command {
+  gotoSettingsTheme: () => void
+
+  name = '切换皮肤'
+
+  constructor() {
+    const { gotoSettingsTheme } = useGoto()
+    this.gotoSettingsTheme = gotoSettingsTheme
+  }
+
+  execute() {
+    this.gotoSettingsTheme()
+  }
+}
diff --git a/apps/frontend/src/composables/command/index.ts b/apps/frontend/src/composables/command/index.ts
new file mode 100644
index 0000000..90ec424
--- /dev/null
+++ b/apps/frontend/src/composables/command/index.ts
@@ -0,0 +1,30 @@
+import { CommandGoToHome } from './CommandGoToHome'
+import { CommandGoToSettingsTheme } from './CommandGotoSettingsTheme'
+export interface Command {
+  name: string
+  execute: () => void
+}
+
+let commands: Command[] = []
+
+export function useCommand() {
+  function initCommands() {
+    commands.push(new CommandGoToHome())
+    commands.push(new CommandGoToSettingsTheme())
+  }
+
+  function resetCommand() {
+    commands = []
+  }
+
+  function addCommand(command: Command) {
+    commands.push(command)
+  }
+
+  return {
+    commands,
+    initCommands,
+    resetCommand,
+    addCommand,
+  }
+}
diff --git a/apps/frontend/src/composables/goto.ts b/apps/frontend/src/composables/goto.ts
index 9e66e23..ec3b8f5 100644
--- a/apps/frontend/src/composables/goto.ts
+++ b/apps/frontend/src/composables/goto.ts
@@ -1,34 +1,35 @@
 import { useRouter } from 'vue-router'
+import { RouteNames } from '@/router/const'
 
 export function useGoto() {
   const router = useRouter()
 
   function gotoHome() {
     router.push({
-      name: 'Home',
+      name: RouteNames.HOME,
     })
   }
 
   function gotoSettings() {
     router.push({
-      name: 'Settings',
+      name: RouteNames.SETTINGS,
     })
   }
 
   function gotoSettingsTheme() {
     router.push({
-      name: 'SettingsTheme',
+      name: RouteNames.SETTINGS_THEME,
     })
   }
 
-  function gotoGithub() {
-    window.open('https://github.com/cuixueshe/dida')
-  }
-
   return {
     gotoHome,
     gotoSettings,
-    gotoGithub,
     gotoSettingsTheme,
   }
 }
+
+export const GITHUB_URL = 'https://github.com/cuixueshe/dida'
+export function openGithub() {
+  window.open(GITHUB_URL)
+}
diff --git a/apps/frontend/src/composables/index.ts b/apps/frontend/src/composables/index.ts
index 101dea8..a9f9fe5 100644
--- a/apps/frontend/src/composables/index.ts
+++ b/apps/frontend/src/composables/index.ts
@@ -2,4 +2,4 @@ export { useTaskOperationMessage } from './useTaskOperationMessage'
 export { useTaskRightContextMenu } from './useTaskRightContextMenu'
 export { useTaskSidebarDrag } from './useTaskSidebarDrag'
 export { useIsMac } from './misc'
-export { useGoto } from './goto'
+export * from './goto'
diff --git a/apps/frontend/src/composables/tests/goto.spec.ts b/apps/frontend/src/composables/tests/goto.spec.ts
index 5335b8f..7bb51e5 100644
--- a/apps/frontend/src/composables/tests/goto.spec.ts
+++ b/apps/frontend/src/composables/tests/goto.spec.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from 'vitest'
-import { useGoto } from '../goto'
+import { GITHUB_URL, openGithub, useGoto } from '../goto'
 import { useSetup } from '@/tests/helper'
+import { RouteNames } from '@/router/const'
 
 describe('goto', () => {
   it('should be go to Settings', () => {
@@ -9,7 +10,7 @@ describe('goto', () => {
       gotoSettings()
     })
 
-    expect(router.push).toBeCalledWith({ name: 'Settings' })
+    expect(router.push).toBeCalledWith({ name: RouteNames.SETTINGS })
   })
 
   it('should be go to Home', () => {
@@ -18,17 +19,23 @@ describe('goto', () => {
       gotoHome()
     })
 
-    expect(router.push).toBeCalledWith({ name: 'Home' })
+    expect(router.push).toBeCalledWith({ name: RouteNames.HOME })
   })
 
-  it('should be go to github', () => {
+  it('should be go to SettingsTheme', () => {
+    const { router } = useSetup(() => {
+      const { gotoSettingsTheme } = useGoto()
+      gotoSettingsTheme()
+    })
+
+    expect(router.push).toBeCalledWith({ name: RouteNames.SETTINGS_THEME })
+  })
+
+  it('should be open github url', () => {
     window.open = vi.fn()
 
-    useSetup(() => {
-      const { gotoGithub } = useGoto()
-      gotoGithub()
-    })
+    openGithub()
 
-    expect(window.open).toBeCalledWith('https://github.com/cuixueshe/dida')
+    expect(window.open).toBeCalledWith(GITHUB_URL)
   })
 })
diff --git a/apps/frontend/src/router/const.ts b/apps/frontend/src/router/const.ts
new file mode 100644
index 0000000..e21797e
--- /dev/null
+++ b/apps/frontend/src/router/const.ts
@@ -0,0 +1,6 @@
+export enum RouteNames {
+  HOME = 'Home',
+  TASK = 'Task',
+  SETTINGS = 'Settings',
+  SETTINGS_THEME = 'SettingsTheme',
+}
diff --git a/apps/frontend/src/router/index.ts b/apps/frontend/src/router/index.ts
index 179abc4..b464b18 100644
--- a/apps/frontend/src/router/index.ts
+++ b/apps/frontend/src/router/index.ts
@@ -2,6 +2,7 @@ import type { RouteRecordRaw, Router } from 'vue-router'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import type { App } from 'vue'
 import { SettingsRoute } from './settings'
+import { RouteNames } from './const'
 import Task from '@/pages/Task.vue'
 import { getDiscreteApi } from '@/composables/useNaiveDiscreteApi'
 
@@ -9,9 +10,9 @@ export const routes: RouteRecordRaw[] = [
   {
     path: '/',
     redirect: '/task',
-    name: 'Home',
+    name: RouteNames.HOME,
   },
-  { path: '/task', component: Task, name: 'Task' },
+  { path: '/task', component: Task, name: RouteNames.TASK },
   SettingsRoute,
 ]
 
diff --git a/apps/frontend/src/router/settings.ts b/apps/frontend/src/router/settings.ts
index 505a566..178cdd7 100644
--- a/apps/frontend/src/router/settings.ts
+++ b/apps/frontend/src/router/settings.ts
@@ -1,5 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router'
 import type { Component } from 'vue'
+import { RouteNames } from './const'
 import Settings from '@/pages/Settings.vue'
 import { sidebars } from '@/composables/settings'
 
@@ -19,7 +20,7 @@ const subRoutes: RouteRecordRaw[] = sidebars.map(sidebar => ({
 export const SettingsRoute = {
   path: `/${SETTINGS_PATH}`,
   component: Settings,
-  name: 'Settings',
+  name: RouteNames.SETTINGS,
   meta: { title: '设置' },
   children: subRoutes,
   redirect: subRoutes[0].path,
diff --git a/apps/frontend/src/store/index.ts b/apps/frontend/src/store/index.ts
index a8ebf57..60c68a0 100644
--- a/apps/frontend/src/store/index.ts
+++ b/apps/frontend/src/store/index.ts
@@ -1,8 +1,18 @@
 export { useThemeStore, getGlobalThemeStore } from './useTheme'
-export { useProjectSelectedStatusStore } from './useProjectSelectedStatusStore'
 export { useTaskLeftMenuStatusStore } from './useTaskLeftMenuStatus'
 export { useSettingsStore } from './useSettingsStore'
-export * from './tasks'
-export * from './listProjects'
-export * from './smartProjects'
-export * from './tasksSelector'
+export { TaskStatus, useTasksStore } from './tasks'
+export { TasksSelectorType, useTasksSelectorStore } from './tasksSelector'
+export type { TasksSelector } from './tasksSelector'
+export type { Task } from './tasks'
+export type { SmartProject } from './smartProjects'
+export type { ListProject } from './listProjects'
+export {
+  completeSmartProject,
+  trashSmartProject,
+  smartProjects,
+  useSmartProjects,
+  loadSmartProjectTasks,
+  SmartProjectName,
+} from './smartProjects'
+export { useListProjectsStore, loadListProjectTasks } from './listProjects'
diff --git a/apps/frontend/src/store/listProjects.ts b/apps/frontend/src/store/listProjects.ts
index 297a55c..8931205 100644
--- a/apps/frontend/src/store/listProjects.ts
+++ b/apps/frontend/src/store/listProjects.ts
@@ -1,46 +1,47 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { TaskStatus } from './tasks'
+import { TasksSelectorType } from './tasksSelector'
 import { fetchAllProjects, fetchAllTasks, fetchCreateProject } from '@/api'
 import { useTasksSelectorStore } from '@/store'
+import type { ProjectResponse } from '@/api/types'
 
-type ProjectType = 'listProject' | 'smartProject'
-export interface Project {
+export interface ListProject {
   id: string
   name: string
-  type: ProjectType
+  type: TasksSelectorType.listProject
 }
 
 export const useListProjectsStore = defineStore('newProjects', () => {
   const tasksSelectorStore = useTasksSelectorStore()
-  const projects = ref<Project[]>([])
+  const projects = ref<ListProject[]>([])
 
   async function init() {
-    const rawProjects: any = await fetchAllProjects()
-    projects.value = rawProjects.map(normalizeProject)
+    const rawProjects = await fetchAllProjects()
+    projects.value = rawProjects.map(mapProjectResponseToProject)
 
     if (projects.value.length > 0)
       tasksSelectorStore.setCurrentSelector(projects.value[0])
   }
 
-  function selectProject(project: Project): void
-  function selectProject(projectId: Project['id']): void
-  function selectProject(projectName: Project['name']): void
-  function selectProject(projectOrNameOrId: Project | string): void {
-    let project: Project | undefined
+  function selectProject(project: ListProject): void
+  function selectProject(projectId: ListProject['id']): void
+  function selectProject(projectName: ListProject['name']): void
+  function selectProject(projectOrNameOrId: ListProject | string): void {
+    let project: ListProject | undefined
 
     if (typeof projectOrNameOrId === 'string')
       project = findProject(projectOrNameOrId)
-
-    else
-      project = projectOrNameOrId
+    else project = projectOrNameOrId
 
     if (project)
       tasksSelectorStore.setCurrentSelector(project)
   }
 
-  function findProject(projectIdOrName: string): Project | undefined {
-    return projects.value.find(p => p.name === projectIdOrName || p.id === projectIdOrName)
+  function findProject(projectIdOrName: string): ListProject | undefined {
+    return projects.value.find(
+      p => p.name === projectIdOrName || p.id === projectIdOrName,
+    )
   }
 
   async function createProject(name: string) {
@@ -48,7 +49,7 @@ export const useListProjectsStore = defineStore('newProjects', () => {
       return
 
     const rawProject = await fetchCreateProject(name)
-    const newProject = normalizeProject(rawProject)
+    const newProject = mapProjectResponseToProject(rawProject)
     projects.value.push(newProject)
 
     selectProject(newProject)
@@ -70,22 +71,19 @@ export const useListProjectsStore = defineStore('newProjects', () => {
   }
 })
 
-// TODO 需要提供后端返回的  project 的 type shape
-function normalizeProject(rawProject: any): Project {
+function mapProjectResponseToProject(rawProject: ProjectResponse): ListProject {
   return {
     id: `${rawProject._id}`,
     name: rawProject.name,
-    type: 'listProject',
+    type: TasksSelectorType.listProject,
   }
 }
 
 export async function loadListProjectTasks(pId: string) {
-  const rawTasks = await fetchAllTasks(
-    {
-      pId,
-      status: TaskStatus.ACTIVE,
-    },
-  )
+  const rawTasks = await fetchAllTasks({
+    pId,
+    status: TaskStatus.ACTIVE,
+  })
 
   return rawTasks
 }
diff --git a/apps/frontend/src/store/smartProjects.ts b/apps/frontend/src/store/smartProjects.ts
index b48f4ed..847cf9a 100644
--- a/apps/frontend/src/store/smartProjects.ts
+++ b/apps/frontend/src/store/smartProjects.ts
@@ -1,17 +1,18 @@
 import { defineStore } from 'pinia'
 import { TaskStatus } from './tasks'
+import { TasksSelectorType } from './tasksSelector'
 import { fetchAllTasks } from '@/api'
 import { useTasksSelectorStore } from '@/store'
 
 export interface SmartProject {
   name: string
-  type: 'smartProject'
+  type: TasksSelectorType.smartProject
 }
 
 function createSmartProject(name: string): SmartProject {
   return {
     name,
-    type: 'smartProject',
+    type: TasksSelectorType.smartProject,
   }
 }
 
@@ -41,8 +42,10 @@ export const useSmartProjects = defineStore('smartProjects', () => {
 
 export async function loadSmartProjectTasks(smartProjectName: string) {
   const status = smartProjectName === '已完成' ? TaskStatus.COMPLETED : TaskStatus.REMOVED
+  // 基于 updatedAt 来做排序
   const rawTasks = await fetchAllTasks({
     status,
+    sortBy: 'updatedAt',
   })
   return rawTasks
 }
diff --git a/apps/frontend/src/store/tasks.ts b/apps/frontend/src/store/tasks.ts
index 278da1a..fd389fb 100644
--- a/apps/frontend/src/store/tasks.ts
+++ b/apps/frontend/src/store/tasks.ts
@@ -12,6 +12,7 @@ import {
   fetchUpdateTaskTitle,
 } from '@/api'
 import { useTasksSelectorStore } from '@/store'
+import type { TaskResponse } from '@/api/types'
 
 export enum TaskStatus {
   ACTIVE = 'active',
@@ -34,21 +35,24 @@ export const useTasksStore = defineStore('tasksStore', () => {
   const tasks = ref<Task[]>([])
   const currentActiveTask = ref<Task>()
 
-  function updateTasks(rawTasks: any) {
-    tasks.value = rawTasks.map(normalizeTask)
+  function updateTasks(rawTasks: TaskResponse[]) {
+    tasks.value = rawTasks.map(mapTaskResponseToTask)
   }
 
-  async function addTask(title: string) {
+  async function addTask(title: string): Promise<Task | undefined> {
     if (!tasksSelectorStore.currentSelector)
       return
-
     if (tasksSelectorStore.currentSelector.type !== 'listProject')
       return
 
-    const newRawTask = await fetchCreateTask(title, tasksSelectorStore.currentSelector.id)
-    const task = normalizeTask(newRawTask)
+    const newRawTask = await fetchCreateTask(
+      title,
+      tasksSelectorStore.currentSelector.id,
+    )
+    const task = mapTaskResponseToTask(newRawTask)
     tasks.value.unshift(task)
     changeActiveTask(task)
+    return task
   }
 
   function changeActiveTask(taskId: Task['id']): void
@@ -58,9 +62,7 @@ export const useTasksStore = defineStore('tasksStore', () => {
 
     if (typeof taskOrTaskId === 'string')
       task = tasks.value.find(t => t.id === taskOrTaskId)
-
-    else
-      task = taskOrTaskId
+    else task = taskOrTaskId
 
     currentActiveTask.value = task
   }
@@ -136,11 +138,16 @@ export const useTasksStore = defineStore('tasksStore', () => {
     task.position = newPosition
   }
 
-  async function findAllTasksNotRemoved() {
-    const activeTasks: any = await fetchAllTasks({ status: TaskStatus.ACTIVE })
-    const completedTasks: any = await fetchAllTasks({ status: TaskStatus.COMPLETED })
+  async function findAllTasksNotRemoved(): Promise<Task[]> {
+    const activeTasks = await fetchAllTasks({ status: TaskStatus.ACTIVE })
+    const completedTasks = await fetchAllTasks({
+      status: TaskStatus.COMPLETED,
+    })
 
-    return [...activeTasks.map(normalizeTask), ...completedTasks.map(normalizeTask)]
+    return [
+      ...activeTasks.map(mapTaskResponseToTask),
+      ...completedTasks.map(mapTaskResponseToTask),
+    ]
   }
 
   async function moveTaskToProject(task: Task, projectId: string) {
@@ -168,8 +175,7 @@ export const useTasksStore = defineStore('tasksStore', () => {
   }
 })
 
-// TODO 这里的 any 后面应该改成后端返回来的接口shape
-function normalizeTask(rawTask: any): Task {
+function mapTaskResponseToTask(rawTask: TaskResponse): Task {
   return {
     id: rawTask._id,
     title: rawTask.title,
diff --git a/apps/frontend/src/store/tasksSelector.ts b/apps/frontend/src/store/tasksSelector.ts
index 7fb9e04..27ac737 100644
--- a/apps/frontend/src/store/tasksSelector.ts
+++ b/apps/frontend/src/store/tasksSelector.ts
@@ -1,9 +1,13 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import type { Project, SmartProject } from '@/store'
+import type { ListProject, SmartProject } from '@/store'
 import { loadListProjectTasks, loadSmartProjectTasks, useTasksStore } from '@/store'
 
-export type TasksSelector = Project | SmartProject | undefined
+export type TasksSelector = ListProject | SmartProject
+export enum TasksSelectorType {
+  listProject = 'listProject',
+  smartProject = 'smartProject',
+}
 
 export const useTasksSelectorStore = defineStore('tasksSelectorStore', () => {
   const tasksStore = useTasksStore()
@@ -14,14 +18,11 @@ export const useTasksSelectorStore = defineStore('tasksSelectorStore', () => {
     if (!currentSelector.value)
       return
 
-    let rawTasks
-    if (currentSelector.value.type === 'listProject')
-      rawTasks = await loadListProjectTasks(currentSelector.value.id)
+    if (currentSelector.value.type === TasksSelectorType.listProject)
+      tasksStore.updateTasks(await loadListProjectTasks(currentSelector.value.id))
 
-    else if (currentSelector.value.type === 'smartProject')
-      rawTasks = await loadSmartProjectTasks(currentSelector.value.name)
-
-    tasksStore.updateTasks(rawTasks)
+    else if (currentSelector.value.type === TasksSelectorType.smartProject)
+      tasksStore.updateTasks(await loadSmartProjectTasks(currentSelector.value.name))
   }
 
   async function setCurrentSelector(selector: TasksSelector) {
diff --git a/apps/frontend/src/store/tests/tasks.spec.ts b/apps/frontend/src/store/tests/tasks.spec.ts
new file mode 100644
index 0000000..8e2a272
--- /dev/null
+++ b/apps/frontend/src/store/tests/tasks.spec.ts
@@ -0,0 +1,274 @@
+import { assertType, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import type { Task } from '../tasks'
+import { TaskStatus, useTasksStore } from '../tasks'
+import { useTasksSelectorStore } from '../tasksSelector'
+import { completeSmartProject } from '../smartProjects'
+import { liveListProject } from '@/tests/fixture'
+import {
+  fetchAllTasks,
+  fetchCompleteTask,
+  fetchCreateTask,
+  fetchMoveTaskToProject,
+  fetchRemoveTask,
+  fetchRestoreTask,
+  fetchUpdateTaskContent,
+  fetchUpdateTaskPosition,
+  fetchUpdateTaskTitle,
+} from '@/api'
+import type { TaskResponse } from '@/api/types'
+
+vi.mock('@/api')
+
+let id = 0
+let position = 0
+const createTaskResponse = (title: string) => {
+  return {
+    title,
+    content: '我是描述我是描述',
+    status: TaskStatus.ACTIVE,
+    projectId: '1',
+    position: position++,
+    _id: String(id++),
+    createdAt: new Date().toString(),
+    updatedAt: new Date().toString(),
+  } as TaskResponse
+}
+
+vi.mocked(fetchCreateTask).mockImplementation(async (title) => {
+  return createTaskResponse(title)
+})
+
+vi.mocked(fetchAllTasks).mockResolvedValue([])
+
+describe('tasks store', () => {
+  beforeEach(async () => {
+    id = 0
+    position = 0
+    vi.clearAllMocks()
+    setActivePinia(createPinia())
+
+    const tasksSelectorStore = useTasksSelectorStore()
+    tasksSelectorStore.currentSelector = liveListProject
+  })
+
+  describe('add task', () => {
+    it('should be add task to the first', async () => {
+      const tasksStore = useTasksStore()
+      await tasksStore.addTask('运动')
+
+      const task = await tasksStore.addTask('吃饭')
+
+      expect(task?.title).toBe('吃饭')
+      expect(tasksStore.tasks[0]).toEqual(task)
+      expect(tasksStore.currentActiveTask).toEqual(task)
+    })
+
+    it('should not be add task when current selector is undefined', async () => {
+      const tasksSelectorStore = useTasksSelectorStore()
+      tasksSelectorStore.currentSelector = undefined
+
+      const tasksStore = useTasksStore()
+      const task = await tasksStore.addTask('吃饭')
+
+      expect(task).toBeUndefined()
+      expect(tasksStore.tasks.length).toBe(0)
+    })
+
+    it('should not be add task when current selector type is not listProject', async () => {
+      const tasksSelectorStore = useTasksSelectorStore()
+      tasksSelectorStore.currentSelector = completeSmartProject
+
+      const tasksStore = useTasksStore()
+      const task = await tasksStore.addTask('吃饭')
+
+      expect(task).toBeUndefined()
+      expect(tasksStore.tasks.length).toBe(0)
+    })
+  })
+
+  it('should be remove task', async () => {
+    const tasksStore = useTasksStore()
+    const task = (await tasksStore.addTask('吃饭')) as Task
+
+    await tasksStore.removeTask(task)
+
+    expect(tasksStore.tasks.length).toBe(0)
+    expect(task.status).toBe(TaskStatus.REMOVED)
+    expect(tasksStore.currentActiveTask).toBeUndefined()
+    expect(fetchRemoveTask).toBeCalledWith(task.id)
+  })
+
+  it('should be complete task', async () => {
+    const tasksStore = useTasksStore()
+    const task = (await tasksStore.addTask('吃饭')) as Task
+
+    await tasksStore.completeTask(task)
+
+    expect(tasksStore.tasks.length).toBe(0)
+    expect(task.status).toBe(TaskStatus.COMPLETED)
+    expect(tasksStore.currentActiveTask).toBeUndefined()
+    expect(fetchCompleteTask).toBeCalledWith(task.id)
+  })
+
+  it('should be update tasks', () => {
+    const tasksStore = useTasksStore()
+
+    tasksStore.updateTasks([createTaskResponse('吃饭')])
+
+    const task = tasksStore.tasks[0]
+    expect(task.title).toBe('吃饭')
+    expect(task).toHaveProperty('id')
+    expect(task).toHaveProperty('content')
+    expect(task).toHaveProperty('status')
+    expect(task).toHaveProperty('projectId')
+    expect(task).toHaveProperty('position')
+  })
+
+  it('should be restore task', async () => {
+    const tasksStore = useTasksStore()
+    const task = (await tasksStore.addTask('吃饭')) as Task
+
+    await tasksStore.restoreTask(task)
+
+    expect(task.status).toBe(TaskStatus.ACTIVE)
+    expect(tasksStore.tasks.length).toBe(0)
+    expect(fetchRestoreTask).toBeCalledWith(task.id)
+  })
+
+  it('should be move task to project', async () => {
+    const tasksStore = useTasksStore()
+    const task = (await tasksStore.addTask('吃饭')) as Task
+
+    await tasksStore.moveTaskToProject(task, liveListProject.id)
+
+    expect(task.projectId).toBe(liveListProject.id)
+    expect(tasksStore.tasks.length).toBe(0)
+    expect(fetchMoveTaskToProject).toBeCalledWith(task.id, liveListProject.id)
+  })
+
+  describe('cancel complete task', () => {
+    it('should be cancel complete task', async () => {
+      const tasksStore = useTasksStore()
+      await tasksStore.addTask('吃饭')
+      const task = (await tasksStore.addTask('睡觉')) as Task
+      await tasksStore.addTask('写代码')
+      await tasksStore.completeTask(task)
+
+      await tasksStore.cancelCompleteTask(task)
+
+      expect(tasksStore.tasks[1]).toEqual(task)
+    })
+
+    it('cancel the last task', async () => {
+      const tasksStore = useTasksStore()
+      const lastTask = (await tasksStore.addTask('吃饭')) as Task
+      await tasksStore.addTask('睡觉')
+      await tasksStore.addTask('写代码')
+      await tasksStore.completeTask(lastTask)
+
+      await tasksStore.cancelCompleteTask(lastTask)
+
+      expect(tasksStore.tasks[tasksStore.tasks.length - 1]).toEqual(lastTask)
+    })
+  })
+
+  describe('update task title', () => {
+    it('should be update task title', async () => {
+      const tasksStore = useTasksStore()
+      const task = (await tasksStore.addTask('吃饭')) as Task
+
+      const newTitle = '运动'
+      await tasksStore.updateTaskTitle(task, newTitle)
+
+      expect(task.title).toBe(newTitle)
+      expect(fetchUpdateTaskTitle).toBeCalledWith(task.id, newTitle)
+    })
+
+    it('should not be update task title when it does not change', async () => {
+      const tasksStore = useTasksStore()
+      const task = (await tasksStore.addTask('吃饭')) as Task
+
+      await tasksStore.updateTaskTitle(task, task.title)
+
+      expect(fetchUpdateTaskTitle).not.toBeCalled()
+    })
+  })
+
+  describe('update task content', () => {
+    it('should be update task content', async () => {
+      const tasksStore = useTasksStore()
+      const task = (await tasksStore.addTask('吃饭')) as Task
+
+      const newContent = '这是新的内容'
+      await tasksStore.updateTaskContent(task, newContent)
+
+      expect(task.content).toBe(newContent)
+      expect(fetchUpdateTaskContent).toBeCalledWith(task.id, newContent)
+    })
+
+    it('should not be update task content when it does not change', async () => {
+      const tasksStore = useTasksStore()
+      const task = (await tasksStore.addTask('吃饭')) as Task
+
+      await tasksStore.updateTaskTitle(task, task.content)
+
+      expect(fetchUpdateTaskContent).not.toBeCalled()
+    })
+  })
+
+  describe('update task position', () => {
+    it('should be update task position', async () => {
+      const tasksStore = useTasksStore()
+      const task = (await tasksStore.addTask('吃饭')) as Task
+
+      const newPosition = 2
+      await tasksStore.updateTaskPosition(task, newPosition)
+
+      expect(task.position).toBe(newPosition)
+      expect(fetchUpdateTaskPosition).toBeCalledWith(task.id, newPosition)
+    })
+
+    it('should not be update task content when it does not change', async () => {
+      const tasksStore = useTasksStore()
+      const task = (await tasksStore.addTask('吃饭')) as Task
+
+      await tasksStore.updateTaskPosition(task, task.position)
+
+      expect(fetchUpdateTaskPosition).not.toBeCalled()
+    })
+  })
+
+  it('should find all tasks that have not been removed', async () => {
+    const tasksStore = useTasksStore()
+
+    const tasks = await tasksStore.findAllTasksNotRemoved()
+
+    assertType<Task[]>(tasks)
+    expect(fetchAllTasks).toBeCalledWith({ status: TaskStatus.ACTIVE })
+    expect(fetchAllTasks).toBeCalledWith({ status: TaskStatus.COMPLETED })
+  })
+
+  describe('change active', () => {
+    let task: Task
+    beforeEach(async () => {
+      const tasksStore = useTasksStore()
+      task = (await tasksStore.addTask('吃饭')) as Task
+    })
+
+    it('should be change active task by taskId', async () => {
+      const tasksStore = useTasksStore()
+      tasksStore.changeActiveTask(task.id)
+
+      expect(tasksStore.currentActiveTask).toEqual(task)
+    })
+
+    it('should be change active task by task', async () => {
+      const tasksStore = useTasksStore()
+
+      tasksStore.changeActiveTask(task)
+
+      expect(tasksStore.currentActiveTask).toEqual(task)
+    })
+  })
+})
diff --git a/apps/frontend/src/store/useProjectSelectedStatusStore.ts b/apps/frontend/src/store/useProjectSelectedStatusStore.ts
deleted file mode 100644
index cbe017e..0000000
--- a/apps/frontend/src/store/useProjectSelectedStatusStore.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-
-export const useProjectSelectedStatusStore = defineStore(
-  'projectSelectedStatus',
-  () => {
-    const selectedKey = ref([101])
-    const preSelectKey = ref([101])
-    const listDefaultSelectedKey = ref([100])
-
-    function changeSelectedKey(key: number[]) {
-      selectedKey.value = key
-    }
-
-    function changePreSelectKey(key: number[]) {
-      preSelectKey.value = key
-    }
-
-    return {
-      selectedKey,
-      preSelectKey,
-      listDefaultSelectedKey,
-      changeSelectedKey,
-      changePreSelectKey,
-    }
-  },
-)
diff --git a/apps/frontend/src/tests/fixture/index.ts b/apps/frontend/src/tests/fixture/index.ts
new file mode 100644
index 0000000..3c58bd3
--- /dev/null
+++ b/apps/frontend/src/tests/fixture/index.ts
@@ -0,0 +1,2 @@
+export * from './tasks'
+export * from './listProject'
diff --git a/apps/frontend/src/tests/fixture/listProject.ts b/apps/frontend/src/tests/fixture/listProject.ts
new file mode 100644
index 0000000..31d82a2
--- /dev/null
+++ b/apps/frontend/src/tests/fixture/listProject.ts
@@ -0,0 +1,8 @@
+import type { ListProject } from '@/store'
+import { TasksSelectorType } from '@/store'
+
+export const liveListProject: ListProject = {
+  id: '1',
+  name: '生活',
+  type: TasksSelectorType.listProject,
+}
diff --git a/apps/frontend/src/tests/fixture/tasks.ts b/apps/frontend/src/tests/fixture/tasks.ts
new file mode 100644
index 0000000..d8ad45e
--- /dev/null
+++ b/apps/frontend/src/tests/fixture/tasks.ts
@@ -0,0 +1,20 @@
+import { TaskStatus } from '@/store'
+
+export const tasks = [
+  {
+    id: '0',
+    title: '吃饭',
+    content: '今天吃什么',
+    status: TaskStatus.ACTIVE,
+    projectId: '1',
+    position: 1,
+  },
+  {
+    id: '1',
+    title: '写代码',
+    content: '今天写代码了嘛',
+    status: TaskStatus.COMPLETED,
+    projectId: '1',
+    position: 2,
+  },
+]
diff --git a/apps/frontend/src/tests/helper/fireEvent.ts b/apps/frontend/src/tests/helper/fireEvent.ts
index c18b2d2..81de1bb 100644
--- a/apps/frontend/src/tests/helper/fireEvent.ts
+++ b/apps/frontend/src/tests/helper/fireEvent.ts
@@ -1,5 +1,5 @@
 export const fireEvent = {
-  keydown(options: KeyboardEventInit) {
+  keyDown(options: KeyboardEventInit) {
     const event = new KeyboardEvent('keydown', options)
     window.dispatchEvent(event)
   },
diff --git a/apps/frontend/src/utils/index.ts b/apps/frontend/src/utils/index.ts
new file mode 100644
index 0000000..1ead32e
--- /dev/null
+++ b/apps/frontend/src/utils/index.ts
@@ -0,0 +1,7 @@
+export function delay(ms = 1000) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('')
+    }, ms)
+  })
+}
diff --git a/apps/frontend/vitest.setup.ts b/apps/frontend/vitest.setup.ts
index 293ae14..e7bd7a9 100644
--- a/apps/frontend/vitest.setup.ts
+++ b/apps/frontend/vitest.setup.ts
@@ -6,15 +6,20 @@ import {
 } from 'vue-router-mock'
 import { beforeEach, vi } from 'vitest'
 
-// init vue-router
-const router = createRouterMock({
-  spy: {
-    create: fn => vi.fn(fn),
-    reset: spy => spy.mockReset(),
-  },
-})
-beforeEach(() => {
-  injectRouterMock(router)
-})
+function setupRouterMock() {
+  const router = createRouterMock({
+    spy: {
+      create: fn => vi.fn(fn),
+      reset: spy => spy.mockClear(),
+    },
+  })
 
-config.plugins.VueWrapper.install(VueRouterMock)
+  beforeEach(() => {
+    router.reset()
+    injectRouterMock(router)
+  })
+
+  config.plugins.VueWrapper.install(VueRouterMock)
+}
+
+setupRouterMock()
diff --git a/apps/teach-frontend/index.html b/apps/teach-frontend/index.html
new file mode 100644
index 0000000..34bdaec
--- /dev/null
+++ b/apps/teach-frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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>DiDa</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/teach-frontend/package.json b/apps/teach-frontend/package.json
new file mode 100644
index 0000000..f5e3a05
--- /dev/null
+++ b/apps/teach-frontend/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "teach-frontend",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@imengyu/vue3-context-menu": "^1.1.10",
+    "axios": "^1.4.0",
+    "dexie": "^3.2.2",
+    "fuse.js": "^6.6.2",
+    "ink-mde": "^0.18.1",
+    "lodash-es": "^4.17.21",
+    "naive-ui": "^2.34.3",
+    "pinia": "^2.0.28",
+    "vue": "^3.2.45",
+    "vue-router": "4.1.6",
+    "vue3-emoji-picker": "^1.1.7",
+    "vuedraggable": "^4.1.0"
+  },
+  "devDependencies": {
+    "@iconify-json/carbon": "^1.1.13",
+    "@iconify-json/mdi": "^1.1.41",
+    "@iconify/vue": "^4.0.2",
+    "@pinia/testing": "^0.1.2",
+    "@types/lodash-es": "^4.17.6",
+    "@unocss/reset": "^0.48.3",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vue/test-utils": "^2.2.10",
+    "@vueuse/core": "^9.10.0",
+    "cross-env": "^7.0.3",
+    "flush-promises": "^1.0.2",
+    "fs-extra": "^11.1.0",
+    "glob": "^8.1.0",
+    "happy-dom": "^8.1.3",
+    "minimatch": "^6.1.6",
+    "typescript": "^4.9.5",
+    "unocss": "^0.48.3",
+    "vite": "^4.0.4",
+    "vitest": "^0.27.0",
+    "vue-router-mock": "^0.2.0",
+    "vue-tsc": "^1.0.24"
+  }
+}
diff --git a/apps/teach-frontend/public/vite.svg b/apps/teach-frontend/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/apps/teach-frontend/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/apps/teach-frontend/scripts/syncFrontend.js b/apps/teach-frontend/scripts/syncFrontend.js
new file mode 100644
index 0000000..bc855c9
--- /dev/null
+++ b/apps/teach-frontend/scripts/syncFrontend.js
@@ -0,0 +1,64 @@
+import * as path from 'node:path'
+import * as url from 'url'
+import fs from 'fs-extra'
+import glob from 'glob'
+import minimatch from 'minimatch'
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
+
+const ignoreList = [
+  '**/*.spec.ts',
+  '**/*.test.ts',
+  '**/tests/**/*',
+  '**/dist/**/*',
+  '**/node_modules/**/*',
+  '**/__mocks__/*',
+  '**/package.json',
+  '**/vite.config.ts',
+  '**/vitest.setup.ts',
+  '**/scripts/syncFrontend.js',
+]
+
+function shouldIgnore(filePath) {
+  return ignoreList.some(p => minimatch(filePath, p))
+}
+
+function getIncludeFiles(directoryPath) {
+  const files = glob.sync('**/*', { cwd: directoryPath, nodir: true })
+
+  return files.reduce((result, current) => {
+    if (!shouldIgnore(current))
+      result.push(current)
+
+    return result
+  }, [])
+}
+
+const frontendPath = path.resolve(__dirname, '../../frontend')
+const teachPath = path.resolve(__dirname, '../')
+
+async function updateFileContent() {
+  const files = getIncludeFiles(frontendPath)
+
+  for (const file of files) {
+    const sourcePath = path.resolve(frontendPath, file)
+    const destinationPath = path.join(teachPath, file)
+    await fs.ensureDir(path.dirname(destinationPath))
+    await fs.copyFile(sourcePath, destinationPath)
+  }
+}
+
+async function removeDiscardedFile() {
+  const files = getIncludeFiles(teachPath)
+
+  for (const file of files) {
+    const frontendFile = path.resolve(frontendPath, file)
+    const exists = await fs.pathExists(frontendFile)
+    if (!exists) {
+      const teachFile = path.resolve(teachPath, file)
+      fs.removeSync(teachFile)
+    }
+  }
+}
+
+updateFileContent()
+removeDiscardedFile()
diff --git a/apps/teach-frontend/src/App.vue b/apps/teach-frontend/src/App.vue
new file mode 100644
index 0000000..8ad1238
--- /dev/null
+++ b/apps/teach-frontend/src/App.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { NConfigProvider } from 'naive-ui'
+import BaseLayout from './layout/BaseLayout.vue'
+import { useCommand } from '@/composables/command'
+import { useThemeStore } from '@/store'
+
+const themeStore = useThemeStore()
+const { initCommands } = useCommand()
+initCommands()
+</script>
+
+<template>
+  <NConfigProvider :theme="themeStore.naiveTheme">
+    <BaseLayout>
+      <RouterView />
+    </BaseLayout>
+  </NConfigProvider>
+</template>
+
+<style scoped></style>
diff --git a/apps/teach-frontend/src/api/http.ts b/apps/teach-frontend/src/api/http.ts
new file mode 100644
index 0000000..a62ca47
--- /dev/null
+++ b/apps/teach-frontend/src/api/http.ts
@@ -0,0 +1,26 @@
+import type { AxiosInstance, AxiosResponse } from 'axios'
+import axios from 'axios'
+
+export const http: AxiosInstance = axios.create({
+  baseURL: '/api', // Replace with your API base URL
+  timeout: 10000,
+  headers: { 'Content-Type': 'application/json' },
+})
+
+http.interceptors.response.use(
+  (response: AxiosResponse) => {
+    const { code, message, data } = response.data
+
+    if (code === 0) {
+      return data
+    }
+    else {
+      console.error(message)
+      return Promise.reject(new Error(message))
+    }
+  },
+  (error) => {
+    console.error('Request error:', error)
+    return Promise.reject(error)
+  },
+)
diff --git a/apps/teach-frontend/src/api/index.ts b/apps/teach-frontend/src/api/index.ts
new file mode 100644
index 0000000..891e8dd
--- /dev/null
+++ b/apps/teach-frontend/src/api/index.ts
@@ -0,0 +1,2 @@
+export * from './tasks'
+export * from './projects'
diff --git a/apps/teach-frontend/src/api/projects.ts b/apps/teach-frontend/src/api/projects.ts
new file mode 100644
index 0000000..5c7c097
--- /dev/null
+++ b/apps/teach-frontend/src/api/projects.ts
@@ -0,0 +1,12 @@
+import { http } from './http'
+import type { ProjectResponse } from './types'
+
+export function fetchAllProjects() {
+  return http.get<ProjectResponse[], ProjectResponse[]>('/projects')
+}
+
+export function fetchCreateProject(name: string) {
+  return http.post<ProjectResponse, ProjectResponse>('/projects', {
+    name,
+  })
+}
diff --git a/apps/teach-frontend/src/api/tasks.ts b/apps/teach-frontend/src/api/tasks.ts
new file mode 100644
index 0000000..a61a415
--- /dev/null
+++ b/apps/teach-frontend/src/api/tasks.ts
@@ -0,0 +1,61 @@
+import { http } from './http'
+import type { TaskResponse } from './types'
+import type { Task } from '@/store'
+import { TaskStatus } from '@/store'
+
+export function fetchAllTasks({ pId, status, sortBy }: { pId?: string; status?: TaskStatus; sortBy?: string }) {
+  return http.get<TaskResponse[], TaskResponse[]>('/tasks', {
+    params: {
+      projectId: pId,
+      status,
+      sortBy,
+    },
+  })
+}
+
+export function fetchCreateTask(title: string, pId: string) {
+  return http.post<TaskResponse, TaskResponse>('/tasks', {
+    title,
+    projectId: pId,
+  })
+}
+
+export function fetchUpdateTaskTitle(taskId: Task['id'], title: string) {
+  return http.patch<TaskResponse>(`/tasks/${taskId}`, {
+    title,
+  })
+}
+export function fetchUpdateTaskContent(taskId: Task['id'], content: string) {
+  return http.patch<TaskResponse>(`/tasks/${taskId}`, {
+    content,
+  })
+}
+
+export function fetchCompleteTask(taskId: Task['id']) {
+  return http.patch<TaskResponse>(`/tasks/${taskId}`, {
+    status: TaskStatus.COMPLETED,
+  })
+}
+export function fetchRestoreTask(taskId: Task['id']) {
+  return http.patch<TaskResponse>(`/tasks/${taskId}`, {
+    status: TaskStatus.ACTIVE,
+  })
+}
+
+export function fetchMoveTaskToProject(taskId: Task['id'], projectId: string) {
+  return http.patch<TaskResponse>(`/tasks/${taskId}`, {
+    projectId,
+  })
+}
+
+export function fetchRemoveTask(taskId: Task['id']) {
+  return http.patch<TaskResponse>(`/tasks/${taskId}`, {
+    status: TaskStatus.REMOVED,
+  })
+}
+
+export function fetchUpdateTaskPosition(taskId: Task['id'], position: number) {
+  return http.patch<TaskResponse>(`/tasks/${taskId}`, {
+    position,
+  })
+}
diff --git a/apps/teach-frontend/src/api/types.ts b/apps/teach-frontend/src/api/types.ts
new file mode 100644
index 0000000..ed0dc8d
--- /dev/null
+++ b/apps/teach-frontend/src/api/types.ts
@@ -0,0 +1,19 @@
+import type { TaskStatus } from '@/store/tasks'
+
+export interface TaskResponse {
+  title: string
+  content: string
+  status: TaskStatus
+  projectId: string
+  position: number
+  _id: string
+  createdAt: string
+  updatedAt: string
+}
+
+export interface ProjectResponse {
+  createdAt: string
+  name: string
+  updatedAt: string
+  _id: string
+}
diff --git a/apps/teach-frontend/src/assets/empty-task-detail-icon.svg b/apps/teach-frontend/src/assets/empty-task-detail-icon.svg
new file mode 100644
index 0000000..30e550e
--- /dev/null
+++ b/apps/teach-frontend/src/assets/empty-task-detail-icon.svg
@@ -0,0 +1,35 @@
+<svg width="320" height="320" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M160 276C95.935 276 44 224.065 44 160C44 95.935 95.935 44 160 44C224.065 44 276 95.935 276 160C276 224.065 224.065 276 160 276Z" fill="black" fill-opacity="0.05"/>
+<mask id="mask0_1_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="44" y="44" width="232" height="232">
+<path d="M160 276C95.935 276 44 224.065 44 160C44 95.935 95.935 44 160 44C224.065 44 276 95.935 276 160C276 224.065 224.065 276 160 276Z" fill="#DBDBDB"/>
+</mask>
+<g mask="url(#mask0_1_4)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M208.8 12H37.6V226.4H159.547H208.8V170.952V12Z" fill="#DBDBDB"/>
+</g>
+<mask id="mask1_1_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="44" y="44" width="232" height="232">
+<path d="M160 276C95.935 276 44 224.065 44 160C44 95.935 95.935 44 160 44C224.065 44 276 95.935 276 160C276 224.065 224.065 276 160 276Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_1_4)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M194 36H34V212H194V36Z" fill="white"/>
+</g>
+<mask id="mask2_1_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="44" y="44" width="232" height="232">
+<path d="M160 276C95.935 276 44 224.065 44 160C44 95.935 95.935 44 160 44C224.065 44 276 95.935 276 160C276 224.065 224.065 276 160 276Z" fill="#DBDBDB"/>
+</mask>
+<g mask="url(#mask2_1_4)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43 163.5H160V150.7H43V163.5ZM43 125.1L160 125.1V112.3L43 112.3V125.1ZM43 86.7L160 86.7V73.9L43 73.9L43 86.7Z" fill="#DBDBDB"/>
+</g>
+<g filter="url(#filter0_d_1_4)">
+<path d="M149.723 128.553L185.283 163.691L170.477 168.788L182.979 205.096L170.641 209.345L158.139 173.037L143.334 178.135L149.723 128.553Z" fill="black"/>
+</g>
+<defs>
+<filter id="filter0_d_1_4" x="140.334" y="128.553" width="47.949" height="86.7913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_4"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_4" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/apps/teach-frontend/src/components/command/CommandModal.vue b/apps/teach-frontend/src/components/command/CommandModal.vue
new file mode 100644
index 0000000..2e04842
--- /dev/null
+++ b/apps/teach-frontend/src/components/command/CommandModal.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { NModal } from 'naive-ui'
+import { watch } from 'vue'
+import { useSearch } from './search'
+import CommandBody from './CommandModalBody.vue'
+import { useCommandModal } from './commandModal'
+
+const { resetSearch } = useSearch()
+const { registerKeyboardShortcut, showCommandModal } = useCommandModal()
+
+registerKeyboardShortcut()
+
+watch(() => showCommandModal.value, (v) => {
+  if (!v)
+    resetSearch()
+})
+</script>
+
+<template>
+  <NModal v-model:show="showCommandModal" display-directive="show">
+    <CommandBody />
+  </NModal>
+</template>
+
+<style scoped></style>
diff --git a/apps/teach-frontend/src/components/command/CommandModalBody.vue b/apps/teach-frontend/src/components/command/CommandModalBody.vue
new file mode 100644
index 0000000..888b7c7
--- /dev/null
+++ b/apps/teach-frontend/src/components/command/CommandModalBody.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { NEmpty, NInput } from 'naive-ui'
+import { Icon } from '@iconify/vue'
+import { useSearch } from './search'
+import CommandSearchCommands from './CommandSearchCommands.vue'
+import CommandSearchTasks from './CommandSearchTasks.vue'
+
+const { isSearchCommand, search, loading, searching } = useSearch()
+</script>
+
+<template>
+  <div class="base-color w-200 h-120 rounded p-sm ">
+    <div class="flex">
+      <Icon :icon="loading ? 'eos-icons:loading' : 'material-symbols:search'" width="30" />
+      <NInput
+        v-model:value="search"
+        class="flex-1"
+        placeholder="通过关键字搜索，或添加 '>' 前缀开启命令模式"
+        clearable
+      />
+    </div>
+    <div class="mt-6">
+      <NEmpty v-if="!searching" description="搜索任务，标签或查看命令。">
+        <template #icon />
+      </NEmpty>
+      <div v-else>
+        <component :is="isSearchCommand ? CommandSearchCommands : CommandSearchTasks" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/apps/teach-frontend/src/components/command/CommandSearchCommands.vue b/apps/teach-frontend/src/components/command/CommandSearchCommands.vue
new file mode 100644
index 0000000..598e130
--- /dev/null
+++ b/apps/teach-frontend/src/components/command/CommandSearchCommands.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useSearchCommands } from './searchCommands'
+import { useCommandModal } from './commandModal'
+import type { Command } from '@/composables/command'
+
+const { closeCommandModal } = useCommandModal()
+const { filteredCommands } = useSearchCommands()
+
+const handleClick = (command: Command) => {
+  command.execute()
+  closeCommandModal()
+}
+</script>
+
+<template>
+  <div>
+    <div v-for="(item, key) in filteredCommands" :key="key" class="hover:bg-gray-400/5 leading-30px px-2 cursor-pointer" @click="handleClick(item)">
+      {{ item.name }}
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/apps/teach-frontend/src/components/command/CommandSearchTasks.vue b/apps/teach-frontend/src/components/command/CommandSearchTasks.vue
new file mode 100644
index 0000000..fd89bea
--- /dev/null
+++ b/apps/teach-frontend/src/components/command/CommandSearchTasks.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { NEmpty, NScrollbar } from 'naive-ui'
+import SearchItem from './CommandSearchTasksItem.vue'
+import { useSearchTasks } from './searchTasks'
+
+const { filteredTasks } = useSearchTasks()
+</script>
+
+<template>
+  <div class="flex flex-col gap-15px max-h-400px overflow-auto">
+    <NScrollbar style="max-height: 400px" trigger="none">
+      <SearchItem v-for="item in filteredTasks" :key="item.item.id" v-bind="item.item" />
+    </NScrollbar>
+    <NEmpty v-show="!filteredTasks.length" description="没有找到哦" />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/apps/teach-frontend/src/components/command/CommandSearchTasksItem.vue b/apps/teach-frontend/src/components/command/CommandSearchTasksItem.vue
new file mode 100644
index 0000000..36d0c18
--- /dev/null
+++ b/apps/teach-frontend/src/components/command/CommandSearchTasksItem.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { NCheckbox, NEllipsis } from 'naive-ui'
+import { useCommandModal } from './commandModal'
+import type { TasksSelector } from '@/store'
+import { useTasksSelectorStore, useTasksStore } from '@/store'
+
+const props = defineProps<{
+  title: string
+  desc: string
+  done: boolean
+  from: TasksSelector | undefined
+  id: string
+}>()
+
+const tasksStore = useTasksStore()
+const tasksSelectorStore = useTasksSelectorStore()
+const { closeCommandModal } = useCommandModal()
+
+const goTo = async () => {
+  if (props.from) {
+    await tasksSelectorStore.setCurrentSelector(props.from)
+    tasksStore.changeActiveTask(props.id)
+  }
+
+  closeCommandModal()
+}
+</script>
+
+<template>
+  <div
+    class="w-full border-b-1px p-3 border-gray-500/8 hover:bg-cyan/2"
+    :class="{ 'text-gray-300 dark:text-gray-700': props.done }"
+  >
+    <!-- TODO 添加高亮 -->
+    <div
+      class="w-full flex justify-start items-center cursor-pointer"
+      @click="goTo"
+    >
+      <NCheckbox :checked="props.done" disabled size="large" />
+      <NEllipsis
+        style="width: 660px"
+        :tooltip="false"
+        class="text-18px ml-10px text-ellipsis overflow-hidden"
+        :class="{ 'line-through': props.done }"
+      >
+        {{ title }}
+      </NEllipsis>
+      <div class="w-80px flex justify-center items-center text-gray-500">
+        {{ from?.name }}
+      </div>
+    </div>
+    <NEllipsis
+      style="width: 660px"
+      :tooltip="false"
+      class="w-full mt-5px ml-30px pr-80px"
+    >
+      {{ desc }}
+    </NEllipsis>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/apps/teach-frontend/src/components/command/commandModal.ts b/apps/teach-frontend/src/components/command/commandModal.ts
new file mode 100644
index 0000000..d5af7dc
--- /dev/null
+++ b/apps/teach-frontend/src/components/command/commandModal.ts
@@ -0,0 +1,43 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useIsMac } from '@/composables'
+
+const showCommandModal = ref(false)
+
+export function useCommandModal() {
+  function openCommandModal() {
+    showCommandModal.value = true
+  }
+
+  function closeCommandModal() {
+    showCommandModal.value = false
+  }
+
+  function registerKeyboardShortcut() {
+  // Command + K will show command in MacOS
+  // Ctrl + K in Windows
+    const isMac = useIsMac()
+    const keydownHandler = (e: KeyboardEvent) => {
+      if (
+        (e.key === 'k')
+      && (isMac.value ? e.metaKey : e.ctrlKey)
+      ) {
+        e.preventDefault()
+        openCommandModal()
+      }
+    }
+
+    onMounted(() => {
+      window.addEventListener('keydown', keydownHandler)
+    })
+    onUnmounted(() => {
+      window.removeEventListener('keydown', keydownHandler)
+    })
+  }
+
+  return {
+    showCommandModal,
+    openCommandModal,
+    closeCommandModal,
+    registerKeyboardShortcut,
+  }
+}
diff --git a/apps/teach-frontend/src/components/command/search.ts b/apps/teach-frontend/src/components/command/search.ts
new file mode 100644
index 0000000..8ffac71
--- /dev/null
+++ b/apps/teach-frontend/src/components/command/search.ts
@@ -0,0 +1,76 @@
+import { watchDebounced } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { useSearchCommands } from './searchCommands'
+import { useSearchTasks } from './searchTasks'
+import { delay } from '@/utils'
+
+const search = ref('')
+const loading = ref(false)
+const searching = ref(false)
+
+let isInitialized = false
+
+export function useSearch() {
+  const { resetSearchCommands, searchCommands } = useSearchCommands()
+  const { resetSearchTasks, searchTasks } = useSearchTasks()
+
+  function init() {
+    if (!isInitialized) {
+      isInitialized = true
+
+      watchDebounced(
+        () => search.value,
+        async (v) => {
+          if (v) {
+            loading.value = true
+            await handleSearch(v)
+            loading.value = false
+            searching.value = true
+          }
+        },
+        { debounce: 500 },
+      )
+
+      watch(
+        () => search.value,
+        (v) => {
+          if (v === '') {
+            resetSearch()
+            resetSearchCommands()
+            resetSearchTasks()
+          }
+        },
+      )
+    }
+  }
+
+  const isSearchCommand = computed(() => {
+    return search.value.startsWith('>')
+  })
+
+  function resetSearch() {
+    search.value = ''
+    loading.value = false
+    searching.value = false
+  }
+
+  async function handleSearch(input: string) {
+    if (isSearchCommand.value) {
+      searchCommands(input.trimEnd().slice(1))
+    }
+    else {
+      await delay()
+      await searchTasks(input)
+    }
+  }
+
+  init()
+
+  return {
+    loading,
+    searching,
+    search,
+    isSearchCommand,
+    resetSearch,
+  }
+}
diff --git a/apps/teach-frontend/src/components/command/searchCommands.ts b/apps/teach-frontend/src/components/command/searchCommands.ts
new file mode 100644
index 0000000..15ac041
--- /dev/null
+++ b/apps/teach-frontend/src/components/command/searchCommands.ts
@@ -0,0 +1,33 @@
+import Fuse from 'fuse.js'
+import { ref } from 'vue'
+import type { Command } from '@/composables/command'
+import { useCommand } from '@/composables/command'
+
+const filteredCommands = ref<Command[]>([])
+const fuse = new Fuse([] as Command[], {
+  keys: ['name'],
+})
+
+export function useSearchCommands() {
+  const { commands } = useCommand()
+
+  function searchCommands(input: string) {
+    if (!input) {
+      resetSearchCommands()
+      return
+    }
+
+    fuse.setCollection(commands)
+    filteredCommands.value = fuse.search(input).map(i => i.item)
+  }
+
+  function resetSearchCommands() {
+    filteredCommands.value = commands
+  }
+
+  return {
+    filteredCommands,
+    searchCommands,
+    resetSearchCommands,
+  }
+}
diff --git a/apps/teach-frontend/src/components/command/searchTasks.ts b/apps/teach-frontend/src/components/command/searchTasks.ts
new file mode 100644
index 0000000..9aa7d8f
--- /dev/null
+++ b/apps/teach-frontend/src/components/command/searchTasks.ts
@@ -0,0 +1,50 @@
+import Fuse from 'fuse.js'
+import { ref } from 'vue'
+import { TaskStatus, completeSmartProject, useListProjectsStore, useTasksStore } from '@/store'
+import type { TasksSelector } from '@/store'
+
+interface SearchTaskItem {
+  id: string
+  title: string
+  desc: string
+  done: boolean
+  from: TasksSelector | undefined
+}
+
+const filteredTasks = ref<Fuse.FuseResult<SearchTaskItem>[]>([])
+const fuse = new Fuse([] as SearchTaskItem[], {
+  keys: ['title', 'desc'],
+})
+
+export function useSearchTasks() {
+  async function searchTasks(input: string) {
+    const tasksStore = useTasksStore()
+    const projectsStore = useListProjectsStore()
+
+    const tasks = await tasksStore.findAllTasksNotRemoved()
+    const fuseTasks = tasks.map((task) => {
+      const done = task.status === TaskStatus.COMPLETED
+      const from = done ? completeSmartProject : projectsStore.findProject(task.projectId)
+      return {
+        id: task.id!,
+        title: task.title,
+        desc: task.content,
+        done,
+        from,
+      }
+    })
+    fuse.setCollection(fuseTasks)
+
+    filteredTasks.value = fuse.search(input)
+  }
+
+  function resetSearchTasks() {
+    filteredTasks.value = []
+  }
+
+  return {
+    filteredTasks,
+    searchTasks,
+    resetSearchTasks,
+  }
+}
diff --git a/apps/teach-frontend/src/components/command/tests/commandModal.spec.ts b/apps/teach-frontend/src/components/command/tests/commandModal.spec.ts
new file mode 100644
index 0000000..6544c20
--- /dev/null
+++ b/apps/teach-frontend/src/components/command/tests/commandModal.spec.ts
@@ -0,0 +1,63 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed } from 'vue'
+import { useCommandModal } from '../commandModal'
+import { fireEvent, useSetup } from '@/tests/helper'
+import * as misc from '@/composables/misc'
+
+describe('command modal', () => {
+  beforeEach(() => {
+    const { closeCommandModal } = useCommandModal()
+    closeCommandModal()
+  })
+  it('should be open command modal', () => {
+    const { openCommandModal, showCommandModal } = useCommandModal()
+
+    openCommandModal()
+
+    expect(showCommandModal.value).toBe(true)
+  })
+
+  it('should be close command modal', () => {
+    const { closeCommandModal, showCommandModal } = useCommandModal()
+
+    closeCommandModal()
+
+    expect(showCommandModal.value).toBe(false)
+  })
+
+  it('should be open command modal when press cmd+k on Mac', () => {
+    vi.spyOn(misc, 'useIsMac').mockReturnValue(computed(() => true))
+    const { registerKeyboardShortcut, showCommandModal } = useCommandModal()
+
+    const { wrapper } = useSetup(() => {
+      registerKeyboardShortcut()
+    })
+
+    fireEvent.keyDown({
+      key: 'k',
+      metaKey: true,
+    })
+
+    expect(showCommandModal.value).toBe(true)
+
+    wrapper.unmount()
+  })
+
+  it('should be open command modal when press ctrl+k on Win', () => {
+    vi.spyOn(misc, 'useIsMac').mockReturnValue(computed(() => false))
+    const { registerKeyboardShortcut, showCommandModal } = useCommandModal()
+
+    const { wrapper } = useSetup(() => {
+      registerKeyboardShortcut()
+    })
+
+    fireEvent.keyDown({
+      key: 'k',
+      ctrlKey: true,
+    })
+
+    expect(showCommandModal.value).toBe(true)
+
+    wrapper.unmount()
+  })
+})
diff --git a/apps/teach-frontend/src/components/command/tests/search.new.spec.ts b/apps/teach-frontend/src/components/command/tests/search.new.spec.ts
new file mode 100644
index 0000000..0c5082e
--- /dev/null
+++ b/apps/teach-frontend/src/components/command/tests/search.new.spec.ts
@@ -0,0 +1,186 @@
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
+import { useSearch } from '../search'
+import { useSearchTasks } from '../searchTasks'
+import { useSearchCommands } from '../searchCommands'
+import { completeSmartProject, useListProjectsStore, useTasksStore } from '@/store'
+import { liveListProject, tasks } from '@/tests/fixture'
+import { useCommand } from '@/composables/command'
+
+describe('search new ', () => {
+  beforeAll(() => {
+    const { addCommand } = useCommand()
+
+    addCommand({
+      name: '回到主页',
+      execute() {},
+    })
+
+    addCommand({
+      name: '切换皮肤',
+      execute() {},
+    })
+  })
+  beforeEach(() => {
+    vi.useFakeTimers()
+
+    createTestingPinia({
+      createSpy: vi.fn,
+    })
+
+    const tasksStore = useTasksStore()
+    vi.mocked(tasksStore.findAllTasksNotRemoved).mockImplementation(async () => tasks)
+
+    const listProjectsStore = useListProjectsStore()
+    vi.mocked(listProjectsStore.findProject).mockImplementation(() => liveListProject)
+  })
+
+  describe('ui state', () => {
+    it('should be loading is true when search is start', async () => {
+      const { search, loading } = useSearch()
+
+      search.value = '吃饭'
+
+      await vi.advanceTimersToNextTimerAsync()
+
+      expect(loading.value).toBe(true)
+    })
+
+    it('should be loading is false when search is complete', async () => {
+      const { search, loading } = useSearch()
+
+      search.value = '吃饭'
+
+      await vi.runAllTimersAsync()
+
+      expect(loading.value).toBe(false)
+    })
+
+    it('should be searching is true when search is complete', async () => {
+      const { search, searching } = useSearch()
+
+      search.value = '吃饭'
+
+      await vi.runAllTimersAsync()
+
+      expect(searching.value).toBe(true)
+    })
+  })
+
+  describe('search tasks', () => {
+    it('should be search a task by title', async () => {
+      const { search } = useSearch()
+      const { filteredTasks } = useSearchTasks()
+
+      search.value = '吃饭'
+
+      await vi.runAllTimersAsync()
+
+      expect(filteredTasks.value.length).toBe(1)
+      const item = filteredTasks.value[0].item
+      expect(item.title).toBe('吃饭')
+      expect(item).toHaveProperty('id')
+      expect(item).toHaveProperty('desc')
+      expect(item).toHaveProperty('done')
+      expect(item).toHaveProperty('from')
+    })
+
+    it('should be search a task by desc', async () => {
+      const { search } = useSearch()
+      const { filteredTasks } = useSearchTasks()
+
+      search.value = '吃什么'
+      await vi.runAllTimersAsync()
+
+      expect(filteredTasks.value.length).toBe(1)
+      expect(filteredTasks.value[0].item.title).toBe('吃饭')
+    })
+
+    it('should not be found when the task does not exist', async () => {
+      const { search } = useSearch()
+      const { filteredTasks } = useSearchTasks()
+
+      search.value = '运动'
+      await vi.runAllTimersAsync()
+
+      expect(filteredTasks.value.length).toBe(0)
+    })
+
+    it('should be task\'s project is listProject when status is active', async () => {
+      const { search } = useSearch()
+      const { filteredTasks } = useSearchTasks()
+
+      search.value = '吃饭'
+      await vi.runAllTimersAsync()
+
+      expect(filteredTasks.value[0].item.done).toBe(false)
+      expect(filteredTasks.value[0].item.from?.name).toBe('生活')
+    })
+    it('should be task\'s project is completeSmartProject when status is complete', async () => {
+      const { search } = useSearch()
+      const { filteredTasks } = useSearchTasks()
+
+      search.value = '写代码'
+      await vi.runAllTimersAsync()
+
+      expect(filteredTasks.value[0].item.done).toBe(true)
+      expect(filteredTasks.value[0].item.from?.name).toBe(completeSmartProject.name)
+    })
+  })
+
+  describe('search commands', () => {
+    it('normal', async () => {
+      const { search } = useSearch()
+      const { filteredCommands } = useSearchCommands()
+
+      search.value = '>主页'
+
+      await vi.runAllTimersAsync()
+
+      expect(filteredCommands.value.length).toBe(1)
+      expect(filteredCommands.value[0].name).toBe('回到主页')
+    })
+
+    it('removes the trailing white space', async () => {
+      const { search } = useSearch()
+      const { filteredCommands } = useSearchCommands()
+
+      search.value = '>主页 '
+
+      await vi.runAllTimersAsync()
+
+      expect(filteredCommands.value.length).toBe(1)
+      expect(filteredCommands.value[0].name).toBe('回到主页')
+    })
+
+    it('should be search all commands ', async () => {
+      const { search } = useSearch()
+      const { filteredCommands } = useSearchCommands()
+
+      search.value = '>'
+
+      await vi.runAllTimersAsync()
+      expect(filteredCommands.value.length).toBe(2)
+    })
+  })
+
+  it('should be reset when search is empty', async () => {
+    const { search, searching, loading } = useSearch()
+    const { filteredTasks } = useSearchTasks()
+    const { filteredCommands } = useSearchCommands()
+
+    search.value = '吃饭'
+    await vi.runAllTimersAsync()
+
+    search.value = '>主页'
+    await vi.runAllTimersAsync()
+
+    search.value = ''
+    await vi.runAllTimersAsync()
+
+    expect(searching.value).toBe(false)
+    expect(loading.value).toBe(false)
+    expect(filteredTasks.value.length).toBe(0)
+    expect(filteredCommands.value.length).toBe(2)
+  })
+})
diff --git a/apps/teach-frontend/src/components/command/tests/search.spec.ts b/apps/teach-frontend/src/components/command/tests/search.spec.ts
new file mode 100644
index 0000000..b3d9022
--- /dev/null
+++ b/apps/teach-frontend/src/components/command/tests/search.spec.ts
@@ -0,0 +1,122 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useSearch } from '../search'
+
+const searchTasks = vi.fn()
+const resetSearchTasks = vi.fn()
+vi.mock('../searchTasks.ts', () => {
+  return {
+    useSearchTasks() {
+      return {
+        searchTasks,
+        resetSearchTasks,
+      }
+    },
+  }
+})
+
+const searchCommands = vi.fn()
+const resetSearchCommands = vi.fn()
+vi.mock('../searchCommands.ts', () => {
+  return {
+    useSearchCommands() {
+      return {
+        searchCommands,
+        resetSearchCommands,
+      }
+    },
+  }
+})
+
+describe('search', () => {
+  beforeEach(async () => {
+    vi.useFakeTimers()
+
+    const { resetSearch } = useSearch()
+
+    resetSearch()
+
+    await vi.runAllTimersAsync()
+
+    resetSearchCommands.mockClear()
+    resetSearchTasks.mockClear()
+    searchTasks.mockClear()
+    searchCommands.mockClear()
+  })
+  // 只测试一个关注点
+  it('should be loading is true when search is start', async () => {
+    const { search, loading } = useSearch()
+
+    search.value = '吃饭'
+
+    await vi.advanceTimersToNextTimerAsync()
+
+    expect(loading.value).toBe(true)
+  })
+
+  it('should be loading is false when search is complete', async () => {
+    const { search, loading } = useSearch()
+
+    search.value = '吃饭'
+
+    await vi.runAllTimersAsync()
+
+    expect(loading.value).toBe(false)
+  })
+
+  it('should be searching is true when search is complete', async () => {
+    const { search, searching } = useSearch()
+
+    search.value = '吃饭'
+
+    await vi.runAllTimersAsync()
+
+    expect(searching.value).toBe(true)
+  })
+
+  it('search tasks', async () => {
+    const { search } = useSearch()
+
+    search.value = '吃饭'
+
+    await vi.runAllTimersAsync()
+
+    expect(searchTasks).toBeCalledWith('吃饭')
+  })
+
+  describe('search commands', () => {
+    it('normal', async () => {
+      const { search } = useSearch()
+
+      search.value = '>主页'
+
+      await vi.runAllTimersAsync()
+
+      expect(searchCommands).toBeCalledWith('主页')
+    })
+
+    it('removes the trailing white space', async () => {
+      const { search } = useSearch()
+
+      search.value = '>主页 '
+
+      await vi.runAllTimersAsync()
+
+      expect(searchCommands).toBeCalledWith('主页')
+    })
+  })
+
+  it('should be reset when search is empty', async () => {
+    const { search, searching, loading } = useSearch()
+
+    search.value = '吃饭'
+    await vi.runAllTimersAsync()
+
+    search.value = ''
+    await vi.runAllTimersAsync()
+
+    expect(searching.value).toBe(false)
+    expect(loading.value).toBe(false)
+    expect(resetSearchCommands).toBeCalled()
+    expect(resetSearchTasks).toBeCalled()
+  })
+})
diff --git a/apps/teach-frontend/src/components/command/tests/searchCommands.spec.ts b/apps/teach-frontend/src/components/command/tests/searchCommands.spec.ts
new file mode 100644
index 0000000..f957507
--- /dev/null
+++ b/apps/teach-frontend/src/components/command/tests/searchCommands.spec.ts
@@ -0,0 +1,39 @@
+import { beforeAll, beforeEach, describe, expect, it } from 'vitest'
+import { useSearchCommands } from '../searchCommands'
+import { useCommand } from '@/composables/command'
+
+describe('search commands', () => {
+  beforeEach(() => {
+    const { resetSearchCommands } = useSearchCommands()
+    resetSearchCommands()
+  })
+  beforeAll(() => {
+    const { addCommand } = useCommand()
+
+    addCommand({
+      name: '回到主页',
+      execute() {},
+    })
+
+    addCommand({
+      name: '切换皮肤',
+      execute() {},
+    })
+  })
+  it('should be search a command', () => {
+    const { searchCommands, filteredCommands } = useSearchCommands()
+
+    searchCommands('主页')
+
+    expect(filteredCommands.value.length).toBe(1)
+    expect(filteredCommands.value[0].name).toBe('回到主页')
+  })
+
+  it('should be search all commands ', () => {
+    const { searchCommands, filteredCommands } = useSearchCommands()
+
+    searchCommands('')
+
+    expect(filteredCommands.value.length).toBe(2)
+  })
+})
diff --git a/apps/teach-frontend/src/components/command/tests/searchTasks.spec.ts b/apps/teach-frontend/src/components/command/tests/searchTasks.spec.ts
new file mode 100644
index 0000000..4195600
--- /dev/null
+++ b/apps/teach-frontend/src/components/command/tests/searchTasks.spec.ts
@@ -0,0 +1,82 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
+import { useSearchTasks } from '../searchTasks'
+import { completeSmartProject, useListProjectsStore, useTasksStore } from '@/store'
+import { liveListProject, tasks } from '@/tests/fixture'
+
+describe('search tasks', () => {
+  beforeEach(() => {
+    createTestingPinia({
+      createSpy: vi.fn,
+    })
+
+    const tasksStore = useTasksStore()
+    vi.mocked(tasksStore.findAllTasksNotRemoved).mockImplementation(
+      async () => tasks,
+    )
+
+    const listProjectsStore = useListProjectsStore()
+    vi.mocked(listProjectsStore.findProject).mockImplementation(() => liveListProject)
+
+    const { resetSearchTasks } = useSearchTasks()
+
+    resetSearchTasks()
+  })
+  it('should be search a task by title', async () => {
+    const { searchTasks, filteredTasks } = useSearchTasks()
+
+    await searchTasks('吃饭')
+
+    expect(filteredTasks.value.length).toBe(1)
+    const item = filteredTasks.value[0].item
+    expect(item.title).toBe('吃饭')
+    expect(item).toHaveProperty('id')
+    expect(item).toHaveProperty('desc')
+    expect(item).toHaveProperty('done')
+    expect(item).toHaveProperty('from')
+  })
+
+  it('should be search a task by desc', async () => {
+    const { searchTasks, filteredTasks } = useSearchTasks()
+
+    await searchTasks('吃什么')
+
+    expect(filteredTasks.value.length).toBe(1)
+    expect(filteredTasks.value[0].item.title).toBe('吃饭')
+  })
+
+  it('should not be found when the task does not exist', async () => {
+    const { searchTasks, filteredTasks } = useSearchTasks()
+
+    await searchTasks('运动')
+
+    expect(filteredTasks.value.length).toBe(0)
+  })
+
+  it('should be task\'s project is listProject when status is active', async () => {
+    const { searchTasks, filteredTasks } = useSearchTasks()
+
+    await searchTasks('吃饭')
+
+    expect(filteredTasks.value[0].item.done).toBe(false)
+    expect(filteredTasks.value[0].item.from?.name).toBe('生活')
+  })
+  it('should be task\'s project is completeSmartProject when status is complete', async () => {
+    const { searchTasks, filteredTasks } = useSearchTasks()
+
+    await searchTasks('写代码')
+
+    expect(filteredTasks.value[0].item.done).toBe(true)
+    expect(filteredTasks.value[0].item.from?.name).toBe(completeSmartProject.name)
+  })
+
+  it('should be reset tasks', async () => {
+    const { searchTasks, filteredTasks, resetSearchTasks } = useSearchTasks()
+
+    await searchTasks('吃饭')
+
+    resetSearchTasks()
+
+    expect(filteredTasks.value.length).toBe(0)
+  })
+})
diff --git a/apps/teach-frontend/src/components/header/TheHeader.vue b/apps/teach-frontend/src/components/header/TheHeader.vue
new file mode 100644
index 0000000..396973f
--- /dev/null
+++ b/apps/teach-frontend/src/components/header/TheHeader.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { openGithub, useGoto } from '@/composables'
+
+const { gotoHome, gotoSettings } = useGoto()
+</script>
+
+<template>
+  <div class="w-full base-color h-40px px-1% flex justify-between items-center text-16px">
+    <div class="cursor-pointer" aria-label="Go Home" @click="gotoHome()">
+      DiDa
+    </div>
+    <div class="flex items-center justify-start">
+      <button class="mx-2 !outline-none" @click="gotoSettings()">
+        <div i="carbon-settings" />
+      </button>
+      <button class="mx-2 !outline-none" @click="openGithub()">
+        <div i="mdi-github" />
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/apps/teach-frontend/src/components/navbar/Navbar.vue b/apps/teach-frontend/src/components/navbar/Navbar.vue
new file mode 100644
index 0000000..8e9f0dd
--- /dev/null
+++ b/apps/teach-frontend/src/components/navbar/Navbar.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { NDropdown, NPopover } from 'naive-ui'
+import type { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface'
+import { useCommandModal } from '../command/commandModal'
+import Command from '@/components/command/CommandModal.vue'
+import { useGoto } from '@/composables'
+
+const { gotoSettings } = useGoto()
+const { openCommandModal } = useCommandModal()
+
+const settingOptions: DropdownMixedOption[] = [
+  {
+    label: '设置',
+    key: 'settings',
+    props: {
+      onClick: () => {
+        gotoSettings()
+      },
+    },
+  },
+]
+
+interface ActivityIconOption {
+  label: string
+  icon: string
+  onClick?: () => void
+}
+
+const activityIconOptions: ActivityIconOption[] = [
+  {
+    label: '任务',
+    icon: 'carbon-checkbox-checked-filled',
+  },
+  {
+    label: '日历',
+    icon: 'carbon-calendar-heat-map',
+  },
+  {
+    label: '打卡',
+    icon: 'carbon-task-complete',
+  },
+  {
+    label: '搜索面板',
+    icon: 'carbon-search',
+    onClick() {
+      openCommandModal()
+    },
+  },
+]
+</script>
+
+<template>
+  <div class="w-[48px] border-r border-blue border-solid py-2 dark:bg-black">
+    <NDropdown placement="right-end" :options="settingOptions">
+      <!-- avatar -->
+      <div class="w-[32px] h-[32px] rounded-sm bg-blue mx-auto">
+        <img src="" alt="">
+      </div>
+    </NDropdown>
+    <!-- page router -->
+    <div
+      class="text-gray-4 flex flex-col justify-center items-center text-xl mt-10 gap-6 font-bold"
+    >
+      <!-- <template v-for="(iconOption, i) in activityIconOptions" :key="i">
+        <NPopover placement="right">
+          <template #trigger>
+            <div
+              class="hover:text-gray-6 dark:hover:text-gray-2"
+              :i="iconOption.icon"
+              @click="() => iconOption.onClick && iconOption.onClick()"
+            />
+          </template>
+          <span>{{ iconOption.label }}</span>
+        </NPopover>
+      </template> -->
+      <NPopover placement="right">
+        <template #trigger>
+          <div
+            class="hover:text-gray-6 dark:hover:text-gray-2"
+            i="carbon-checkbox-checked-filled"
+          />
+        </template>
+        <span>任务</span>
+      </NPopover>
+      <NPopover placement="right">
+        <template #trigger>
+          <div
+            class="hover:text-gray-6 dark:hover:text-gray-2"
+            i="carbon-calendar-heat-map"
+          />
+        </template>
+        <span>日历</span>
+      </NPopover>
+      <NPopover placement="right">
+        <template #trigger>
+          <div
+            class="hover:text-gray-6 dark:hover:text-gray-2"
+            i="carbon-task-complete"
+          />
+        </template>
+        <span>打卡</span>
+      </NPopover>
+      <NPopover placement="right">
+        <template #trigger>
+          <div
+            class="hover:text-gray-6 dark:hover:text-gray-2 cursor-pointer"
+            i="carbon-search"
+            @click="() => openCommandModal()"
+          />
+        </template>
+        <span>搜索面板</span>
+      </NPopover>
+    </div>
+    <Command />
+  </div>
+</template>
diff --git a/apps/teach-frontend/src/components/settings/SettingsBody.vue b/apps/teach-frontend/src/components/settings/SettingsBody.vue
new file mode 100644
index 0000000..e47d8cd
--- /dev/null
+++ b/apps/teach-frontend/src/components/settings/SettingsBody.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import SettingsSidebar from './SettingsSidebar.vue'
+</script>
+
+<template>
+  <div class="flex justify-between items-center min-h-400px rounded-5px overflow-hidden">
+    <div class="w-1/5 dark:bg-#1f1f1f bg-white min-h-400px">
+      <SettingsSidebar />
+    </div>
+    <div class="w-4/5 dark:bg-#2e2e2e bg-white min-h-400px">
+      <router-view />
+    </div>
+  </div>
+</template>
diff --git a/apps/teach-frontend/src/components/settings/SettingsHeader.vue b/apps/teach-frontend/src/components/settings/SettingsHeader.vue
new file mode 100644
index 0000000..c2b4753
--- /dev/null
+++ b/apps/teach-frontend/src/components/settings/SettingsHeader.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { NSpace } from 'naive-ui'
+import { useGoto } from '@/composables'
+
+const { gotoHome } = useGoto()
+</script>
+
+<template>
+  <NSpace justify="space-between" item-style="center">
+    <h1 class="text-3xl">
+      设置
+    </h1>
+    <button
+      class="
+            w-100px h-40px rounded-md bg-blue-500 text-white text-16px
+            hover:bg-blue-400 active:bg-blue-700 transition-colors
+          "
+      @click="() => gotoHome()"
+    >
+      完成
+    </button>
+  </NSpace>
+</template>
diff --git a/apps/teach-frontend/src/components/settings/SettingsSidebar.vue b/apps/teach-frontend/src/components/settings/SettingsSidebar.vue
new file mode 100644
index 0000000..bf114f9
--- /dev/null
+++ b/apps/teach-frontend/src/components/settings/SettingsSidebar.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { MenuOption } from 'naive-ui'
+import { NMenu } from 'naive-ui'
+import { h } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
+import { sidebars } from '@/composables/settings'
+
+const options: MenuOption[] = sidebars.map(sidebar => ({
+  label: () => h(RouterLink, { to: `/settings${sidebar.path}` }, { default: () => sidebar.title }),
+  key: sidebar.path.slice(1),
+}))
+
+const route = useRoute()
+
+const getCurrentMenu = () => {
+  const path = route.path
+  const pathArr = path.split('/')
+  return pathArr[pathArr.length - 1]
+}
+</script>
+
+<template>
+  <NMenu :options="options" :default-value="getCurrentMenu()" />
+</template>
+
+<style scoped></style>
diff --git a/apps/teach-frontend/src/components/settings/Sub/Smart/index.vue b/apps/teach-frontend/src/components/settings/Sub/Smart/index.vue
new file mode 100644
index 0000000..e08956e
--- /dev/null
+++ b/apps/teach-frontend/src/components/settings/Sub/Smart/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { NSelect } from 'naive-ui'
+import { useSettingsStore } from '@/store'
+
+const settingsStore = useSettingsStore()
+</script>
+
+<template>
+  <ul p-8>
+    <li
+      v-for="(item, key) in settingsStore.settingsSmartProjects"
+      :key="key"
+      pl-4
+      pr-2
+      h-60px
+      flex items-center
+    >
+      <div w-120px flex items-center>
+        <Icon
+          :icon="item.icon"
+          width="20"
+          class="color-[#9D9FA3]"
+          dark="color-white-b"
+        />
+        <span>{{ item.title }}</span>
+      </div>
+      <div w-200px>
+        <NSelect v-model:value="item.option" :options="item.options" />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<style scoped></style>
diff --git a/apps/teach-frontend/src/components/settings/Sub/Theme/Item.vue b/apps/teach-frontend/src/components/settings/Sub/Theme/Item.vue
new file mode 100644
index 0000000..5dcc21f
--- /dev/null
+++ b/apps/teach-frontend/src/components/settings/Sub/Theme/Item.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import Selected from './Selected.vue'
+import { useThemeStore } from '@/store'
+import type { Theme } from '@/composables/settings'
+
+const props = defineProps<{
+  color: string
+  name: string
+  label: string
+}>()
+
+const store = useThemeStore()
+
+const checked = computed(() => store.currentTheme?.name === props.name)
+
+const changeTheme = () => {
+  if (checked.value)
+    return
+
+  // 这里转换是因为目前 defineProps 仍然不支持 import type
+  store.changeTheme(props.name as Theme)
+}
+</script>
+
+<template>
+  <div class="flex flex-col justify-center items-center gap-12px">
+    <div
+      class="w-60px h-60px rounded-5px cursor-pointer flex justify-center items-center"
+      :style="{ background: color }"
+      @click="changeTheme"
+    >
+      <Selected v-if="checked" />
+    </div>
+    <div class="text-12px">
+      {{ label }}
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/apps/teach-frontend/src/components/settings/Sub/Theme/Selected.vue b/apps/teach-frontend/src/components/settings/Sub/Theme/Selected.vue
new file mode 100644
index 0000000..a8a821a
--- /dev/null
+++ b/apps/teach-frontend/src/components/settings/Sub/Theme/Selected.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="w-20px h-20px rounded-full text-#18a058">
+    <div i="carbon-checkmark-filled" />
+  </div>
+</template>
diff --git a/apps/teach-frontend/src/components/settings/Sub/Theme/index.vue b/apps/teach-frontend/src/components/settings/Sub/Theme/index.vue
new file mode 100644
index 0000000..eef7523
--- /dev/null
+++ b/apps/teach-frontend/src/components/settings/Sub/Theme/index.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import Item from './Item.vue'
+import { Themes } from '@/composables/settings'
+</script>
+
+<template>
+  <div class="p-8">
+    <div class="text-14px text-dark/70 dark:text-white/70 font-light">
+      当前可选择的皮肤
+    </div>
+    <div class="flex justify-start items-center gap-18px mt-20px">
+      <Item v-for="theme in Themes" :key="theme.name" :label="theme.label" :color="theme.color" :name="theme.name" />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/apps/teach-frontend/src/components/task/TagView/ProjectCreateView/ProjectCreatedView.vue b/apps/teach-frontend/src/components/task/TagView/ProjectCreateView/ProjectCreatedView.vue
new file mode 100644
index 0000000..892f745
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/TagView/ProjectCreateView/ProjectCreatedView.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import {
+  NButton,
+  NCard,
+  NForm,
+  NFormItem,
+  NInput,
+  NModal,
+  NPopover,
+  NSpace,
+} from 'naive-ui'
+import { computed, ref } from 'vue'
+import EmojiPicker from 'vue3-emoji-picker'
+import { useTaskLeftListCreateProject } from './useTaskLeftListCreateProject'
+import { useListProjectsStore } from '@/store'
+import 'vue3-emoji-picker/css'
+
+const props = defineProps({
+  show: { type: Boolean },
+})
+const emits = defineEmits(['update:show', 'close', 'closed', 'cancel', 'confirm'])
+const inputElement = ref<HTMLInputElement>()
+const projectsStore = useListProjectsStore()
+
+const {
+  cleanupInput,
+  emojiValue,
+  formRules,
+  formValue,
+  getDefaultEmojiConfig,
+  handleMouseLeave,
+  handleMouseOver,
+  handleSelectEmoji,
+  handleUpdateShow,
+  isHover,
+  isSavable,
+  isShowPopover,
+} = useTaskLeftListCreateProject(inputElement)
+
+const { EMOJI_STATIC_TEXTS, EMOJI_GROUPS_NAMES } = getDefaultEmojiConfig()
+type Actions = 'close' | 'cancel' | 'confirm'
+const isShowModal = computed({
+  get() {
+    return props.show
+  },
+  set(val) {
+    emits('update:show', val)
+  },
+})
+const handleActions = (action: Actions) => {
+  emits(action)
+  cleanupInput()
+  isShowModal.value = false
+  emits('closed')
+}
+
+function handleSave() {
+  let projectName = formValue.value.projectName
+  emojiValue.value && (projectName = emojiValue.value + projectName)
+  projectsStore.createProject(projectName)
+  handleActions('confirm')
+}
+</script>
+
+<template>
+  <NModal
+    v-model:show="isShowModal" transform-origin="center" :mask-closable="!isSavable" @esc="handleActions('close')"
+    @close="handleActions('close')"
+  >
+    <NCard style="width: 600px" size="huge" role="dialog" aria-modal="true" :bordered="false">
+      <template #header>
+        <div class="flex font-bold justify-center">
+          添加清单
+        </div>
+      </template>
+
+      <div @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
+        <NForm :model="formValue" :rules="formRules">
+          <NFormItem path="projectName">
+            <NInput ref="inputElement" v-model:value="formValue.projectName" placeholder="名称">
+              <template #prefix>
+                <NPopover
+                  v-if="isHover" placement="bottom" trigger="click" :show="isShowPopover" :show-arrow="false"
+                  @update:show="handleUpdateShow"
+                >
+                  <template #trigger>
+                    <NButton text @click="isShowPopover = !isShowPopover">
+                      <template #icon>
+                        <span v-if="emojiValue">{{ emojiValue }}</span>
+                        <Icon v-else icon="fa-solid:smile-wink" />
+                      </template>
+                    </NButton>
+                  </template>
+                  <EmojiPicker
+                    picker-type="inputValue" :native="true" :static-texts="EMOJI_STATIC_TEXTS"
+                    :group-names="EMOJI_GROUPS_NAMES" @select="handleSelectEmoji"
+                  />
+                </NPopover>
+                <NButton v-else text>
+                  <template #icon>
+                    <Icon icon="ic:outline-menu" />
+                  </template>
+                </NButton>
+              </template>
+            </NInput>
+          </NFormItem>
+        </NForm>
+      </div>
+
+      <template #footer>
+        <NSpace justify="end">
+          <NButton @click="handleActions('cancel')">
+            关闭
+          </NButton>
+          <NButton type="success" :disabled="!isSavable" @click="handleSave">
+            保存
+          </NButton>
+        </NSpace>
+      </template>
+    </NCard>
+  </NModal>
+</template>
diff --git a/apps/teach-frontend/src/components/task/TagView/ProjectCreateView/index.ts b/apps/teach-frontend/src/components/task/TagView/ProjectCreateView/index.ts
new file mode 100644
index 0000000..6600842
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/TagView/ProjectCreateView/index.ts
@@ -0,0 +1,6 @@
+import { dialogInit } from '../helper'
+import ProjectCreatedView from './ProjectCreatedView.vue'
+
+export function projectCreatedViewModal() {
+  return dialogInit(ProjectCreatedView)
+}
diff --git a/apps/teach-frontend/src/components/task/TagView/ProjectCreateView/useTaskLeftListCreateProject.ts b/apps/teach-frontend/src/components/task/TagView/ProjectCreateView/useTaskLeftListCreateProject.ts
new file mode 100644
index 0000000..b6e62dc
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/TagView/ProjectCreateView/useTaskLeftListCreateProject.ts
@@ -0,0 +1,138 @@
+import type { FormRules } from 'naive-ui'
+import type { Ref } from 'vue'
+import { computed, ref } from 'vue'
+import { useListProjectsStore } from '@/store'
+
+enum SkinStone {
+  NEUTRAL = 'neutral',
+  LIGHT = '1f3fc',
+  LIGHTER = '1f3fb',
+  Medium = '1f3fd',
+  MediumDark = '1f3fe',
+  Deeper = '1f3ff',
+}
+
+interface EMoji {
+  i: string
+  n: string[]
+  r: string // with skin tone
+  t: SkinStone // skin tone
+  u: string // without tone
+}
+
+export function useTaskLeftListCreateProject(
+  inputElement: Ref<HTMLInputElement | undefined>,
+) {
+  const listProjectsStore = useListProjectsStore()
+  const { handleMouseOver, handleMouseLeave, isHover } = useMouse()
+  const { formValue, formRules } = useForm()
+  const { cleanupInput, handleUpdateShow } = useInput()
+  const isDuplicate = ref(false)
+  const isSavable = computed(() => formValue.value.projectName?.trim() !== '' && !isDuplicate.value)
+  const isShowPopover = ref<boolean>(false)
+  const {
+    getDefaultEmojiConfig,
+    emojiValue,
+    handleSelectEmoji,
+  } = useEmoji()
+
+  function useForm() {
+    const formValue = ref({
+      projectName: '',
+    })
+    const formRules: FormRules = {
+      projectName: {
+        validator: (_, value: string) => {
+          return new Promise<void>((resolve, reject) => {
+            isDuplicate.value = false
+            if (!isSavable.value) {
+              reject(Error('清单名称不能为空'))
+            }
+            else if (listProjectsStore.checkProjectIsExist(value)) {
+              isDuplicate.value = true
+              reject(Error('重复的清单名称'))
+            }
+            else { resolve() }
+          })
+        },
+        trigger: ['input', 'blur'],
+      },
+    }
+    return { formValue, formRules }
+  }
+
+  function useEmoji() {
+    function getDefaultEmojiConfig() {
+      const EMOJI_GROUPS_NAMES = {
+        smileys_people: '人物',
+        animals_nature: '动物 & 自然',
+        food_drink: '食物 & 饮品',
+        activities: '活动',
+        travel_places: '旅行 & 地点',
+        objects: '物体',
+        symbols: '符号',
+        flags: '旗帜',
+      }
+
+      const EMOJI_STATIC_TEXTS = { placeholder: '搜索', skinTone: '肤色' }
+      return {
+        EMOJI_STATIC_TEXTS,
+        EMOJI_GROUPS_NAMES,
+      }
+    }
+
+    const emojiValue = ref()
+    function handleSelectEmoji(emoji: EMoji) {
+      emojiValue.value = emoji.i
+      isShowPopover.value = false
+      inputElement.value?.focus()
+    }
+    return {
+      getDefaultEmojiConfig,
+      emojiValue,
+      handleSelectEmoji,
+    }
+  }
+  function useMouse() {
+    const isHover = ref(false)
+    function handleMouseOver() {
+      isHover.value = true
+    }
+    function handleMouseLeave() {
+      return (
+        !isShowPopover.value && !emojiValue.value && (isHover.value = false)
+      )
+    }
+    return { handleMouseOver, handleMouseLeave, isHover }
+  }
+
+  function useInput() {
+    function cleanupInput() {
+      formValue.value.projectName = ''
+      emojiValue.value = null
+    }
+    function handleUpdateShow(show: boolean) {
+      isShowPopover.value = show
+      !show && inputElement.value?.focus()
+    }
+    return {
+      cleanupInput,
+      handleUpdateShow,
+    }
+  }
+
+  return {
+    cleanupInput,
+    getDefaultEmojiConfig,
+    handleSelectEmoji,
+    emojiValue,
+    formRules,
+    formValue,
+    handleMouseLeave,
+    handleMouseOver,
+    handleUpdateShow,
+    isHover,
+    isSavable,
+    isShowPopover,
+  }
+}
diff --git a/apps/teach-frontend/src/components/task/TagView/TagCreateView/TagCreateView.vue b/apps/teach-frontend/src/components/task/TagView/TagCreateView/TagCreateView.vue
new file mode 100644
index 0000000..c204b82
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/TagView/TagCreateView/TagCreateView.vue
@@ -0,0 +1,137 @@
+<!-- <script lang="ts" setup>
+import { computed, defineEmits, nextTick, onMounted, ref } from 'vue'
+import type { FormInst } from 'naive-ui'
+import {
+  NButton,
+  NColorPicker,
+  NForm,
+  NFormItem,
+  NInput,
+  NModal,
+  NSelect,
+  NSpace,
+} from 'naive-ui'
+import { useProjectSelectedStatusStore } from '@/store'
+// import type { Tag } from '@/services/task/listTag'
+
+interface TProps {
+  show: boolean
+  tag?: Omit<Tag, 'loadTasks'>
+}
+
+type Actions = 'close' | 'cancel' | 'confirm' | 'edited'
+const props = defineProps<TProps>()
+const emits = defineEmits(['update:show', 'close', 'closed', 'cancel', 'confirm', 'edited'])
+interface TFormModel {
+  name: string
+  color: string
+  parentTagId: number | undefined
+}
+
+const formRef = ref<FormInst | null>(null)
+const projectSelectedStatusStore = useProjectSelectedStatusStore()
+const generateRandomColor = () => {
+  return `#${(`00000${(Math.random() * 0x1000000 << 0).toString(16)}`).slice(-6)}`
+}
+const visible = computed({
+  get() {
+    return props.show
+  },
+  set(val) {
+    emits('update:show', val)
+  },
+})
+
+const nullOption = [{
+  label: '',
+  value: -1,
+}]
+// const parentTagOptions = computed(() => {
+//   return nullOption.concat(taskStore.listTags.map(tag => ({
+//     label: tag.name,
+//     value: tag.id,
+//   })))
+// })
+
+const initModel = () => ({
+  name: '',
+  color: generateRandomColor(),
+  parentTagId: -1,
+})
+
+const model = ref<TFormModel>(initModel())
+
+const handleActions = (action: Actions) => {
+  emits(action)
+  visible.value = false
+  emits('closed')
+}
+
+const handleCreateTag = async () => {
+  const modelVal = Object.assign(model.value, {})
+  modelVal.parentTagId === -1 && (modelVal.parentTagId = undefined)
+  // await taskStore.addTag(modelVal)
+  nextTick(() => {
+    model.value = initModel()
+    projectSelectedStatusStore.listDefaultSelectedKey.push(200)
+    // projectSelectedStatusStore.changeSelectedKey([200 + taskStore.listTags.length - 1])
+    handleActions('confirm')
+  })
+}
+
+const handleEditTag = () => {
+  // taskStore.editTag({ ...model.value, id: props.tag!.id })
+  handleActions('edited')
+}
+
+const handleConfirm = () => {
+  formRef.value?.validate(async (error) => {
+    if (error)
+      return
+
+    if (props.tag)
+      handleEditTag()
+    else
+      handleCreateTag()
+  })
+}
+
+onMounted(() => {
+  if (props.tag) {
+    const { name, color, parentTagId } = props.tag
+    model.value = { name, color, parentTagId: parentTagId || undefined }
+  }
+})
+</script>
+
+<template>
+  <NModal v-model:show="visible" preset="dialog" :show-icon="false" title="创建标签" @close="handleActions('close')">
+    <NForm ref="formRef" :model="model" label-placement="left" class="pt-4">
+      <NFormItem path="name" label="">
+        <NInput v-model:value="model.name" size="large" placeholder="名称" @keydown.enter.prevent />
+      </NFormItem>
+      <NFormItem path="color" label="颜色">
+        <NColorPicker v-model:value="model.color" style="width: 34px" :show-alpha="false">
+          <template #label />
+        </NColorPicker>
+      </NFormItem>
+      <NFormItem
+        path="parentId"
+        label="父标签"
+      >
+        <NSelect
+          v-model:value="model.parentTagId"
+          :options="parentTagOptions"
+        />
+      </NFormItem>
+      <NSpace justify="end">
+        <NButton attr-type="button" @click="handleActions('cancel')">
+          关闭
+        </NButton>
+        <NButton type="info" attr-type="button" :disabled="!model.name" @click="handleConfirm">
+          保存
+        </NButton>
+      </NSpace>
+    </NForm>
+  </NModal>
+</template> -->
diff --git a/apps/teach-frontend/src/components/task/TagView/TagCreateView/index.ts b/apps/teach-frontend/src/components/task/TagView/TagCreateView/index.ts
new file mode 100644
index 0000000..e564d22
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/TagView/TagCreateView/index.ts
@@ -0,0 +1,14 @@
+// import { dialogInit } from '../helper'
+// import TagCreateView from './TagCreateView.vue'
+// // import type { Tag } from '@/services/task/listTag'
+
+// export interface TagCreateViewOptions {
+//   show?: boolean
+//   tag?: Omit<Tag, 'loadTasks'>
+// }
+
+// export function tagCreateViewDialog(options: TagCreateViewOptions = {}) {
+//   return dialogInit(TagCreateView, options)
+// }
+
+export {}
diff --git a/apps/teach-frontend/src/components/task/TagView/TagRemoveAlert/TagRemoveAlert.vue b/apps/teach-frontend/src/components/task/TagView/TagRemoveAlert/TagRemoveAlert.vue
new file mode 100644
index 0000000..9a3652c
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/TagView/TagRemoveAlert/TagRemoveAlert.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  NButton,
+  NModal,
+  NSpace,
+} from 'naive-ui'
+
+interface TProps {
+  show: boolean
+  tagName: string
+}
+
+type Actions = 'update:show' | 'close' | 'cancel' | 'closed' | 'confirm'
+
+const props = defineProps<TProps>()
+const emits = defineEmits(['update:show', 'close', 'closed', 'cancel', 'confirm'])
+
+const visible = computed({
+  get() {
+    return props.show
+  },
+  set(val) {
+    emits('update:show', val)
+  },
+})
+
+const handleActions = (action: Actions) => {
+  emits(action)
+  visible.value = false
+  emits('closed')
+}
+</script>
+
+<template>
+  <NModal v-model:show="visible" preset="dialog" :show-icon="false" title="删除标签" @close="handleActions('close')">
+    <div flex flex-col>
+      <div my-4>
+        删除后，标签 <span>{{ $props.tagName }}</span> 将会从任务中移除
+      </div>
+      <NSpace justify="end">
+        <NButton attr-type="button" @click="handleActions('cancel')">
+          取消
+        </NButton>
+        <NButton type="info" attr-type="button" @click="handleActions('confirm')">
+          删除
+        </NButton>
+      </NSpace>
+    </div>
+  </NModal>
+</template>
diff --git a/apps/teach-frontend/src/components/task/TagView/TagRemoveAlert/index.ts b/apps/teach-frontend/src/components/task/TagView/TagRemoveAlert/index.ts
new file mode 100644
index 0000000..eb50643
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/TagView/TagRemoveAlert/index.ts
@@ -0,0 +1,11 @@
+import { dialogInit } from '../helper'
+import TagRemoveAlert from './TagRemoveAlert.vue'
+
+export interface TagRemoveAlertOptions {
+  show?: boolean
+  tagName: string
+}
+
+export function tagRemoveAlert(options: TagRemoveAlertOptions) {
+  return dialogInit(TagRemoveAlert, options)
+}
diff --git a/apps/teach-frontend/src/components/task/TagView/helper.ts b/apps/teach-frontend/src/components/task/TagView/helper.ts
new file mode 100644
index 0000000..173ac55
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/TagView/helper.ts
@@ -0,0 +1,52 @@
+import type { Component } from 'vue'
+import { createApp, h, reactive } from 'vue'
+
+export const mountComponent = (component: Component, props: Record<string | symbol, any>, eventListener: Record<string, any>) => {
+  const app = createApp({
+    setup() {
+      return () => h(component, {
+        ...props,
+        ...eventListener,
+      })
+    },
+  })
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  app.mount(host)
+
+  return {
+    unmount() {
+      app.unmount()
+      document.body.removeChild(host)
+      // eslint-disable-next-line no-console
+      console.log('unounted')
+    },
+  }
+}
+
+export const dialogInit = (component: Component, options: Record<any, any> = {}) => {
+  let pRes: (res: string) => void
+  const p = new Promise((resolve) => {
+    pRes = resolve
+  })
+  const reactiveOptions = reactive(Object.assign({ show: false }, options))
+  const { unmount } = mountComponent(component, reactiveOptions, {
+    'onCancel': () => {
+      pRes('cancel')
+    },
+    'onClose': () => {
+      pRes('close')
+    },
+    'onClosed': () => {
+      unmount()
+    },
+    'onConfirm': () => {
+      pRes('confirm')
+    },
+    'onUpdate:show': (value: boolean) => {
+      reactiveOptions.show = value
+    },
+  })
+  reactiveOptions.show = true
+  return p
+}
diff --git a/apps/teach-frontend/src/components/task/TagView/index.ts b/apps/teach-frontend/src/components/task/TagView/index.ts
new file mode 100644
index 0000000..dfc1edc
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/TagView/index.ts
@@ -0,0 +1,2 @@
+// export * from './TagCreateView'
+export * from './TagRemoveAlert'
diff --git a/apps/teach-frontend/src/components/task/TaskEditor.vue b/apps/teach-frontend/src/components/task/TaskEditor.vue
new file mode 100644
index 0000000..5cdfd65
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/TaskEditor.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import InkMde from 'ink-mde/vue'
+import { debounce } from 'lodash-es'
+import { useTasksStore, useThemeStore } from '@/store'
+
+const tasksStore = useTasksStore()
+const themeStore = useThemeStore()
+
+function handleInput(e: Event) {
+  if (tasksStore.currentActiveTask)
+    tasksStore.updateTaskTitle(tasksStore.currentActiveTask, (e.target as HTMLElement).innerText)
+}
+
+function handleAfterUpdate(doc: string) {
+  if (tasksStore.currentActiveTask)
+    tasksStore.updateTaskContent(tasksStore.currentActiveTask, doc)
+}
+
+const waitTime = 700
+const debounceHandleInput = debounce(handleInput, waitTime)
+const debounceHandleAfterUpdate = debounce(handleAfterUpdate, waitTime)
+</script>
+
+<template>
+  <div>
+    <div v-if="tasksStore.currentActiveTask">
+      <h1 contenteditable="true" class="text-3xl" @input="debounceHandleInput">
+        {{ tasksStore.currentActiveTask.title }}
+      </h1>
+      <div class="mt-2">
+        <InkMde
+          v-model="tasksStore.currentActiveTask.content"
+          :options="{
+            interface: {
+              appearance: themeStore.isDark ? 'dark' : 'light',
+            },
+            hooks: {
+              afterUpdate: debounceHandleAfterUpdate,
+            },
+          }"
+        />
+      </div>
+    </div>
+    <div v-else class="flex flex-col w-full h-full justify-center items-center">
+      <img
+        src="@/assets/empty-task-detail-icon.svg" alt="Empty Task Detail Icon"
+        class="w-192px h-200px"
+      >
+      <span class="text-[16px] pb-30">点击任务标题查看详情</span>
+    </div>
+  </div>
+</template>
diff --git a/apps/teach-frontend/src/components/task/TaskItem.vue b/apps/teach-frontend/src/components/task/TaskItem.vue
new file mode 100644
index 0000000..04277d0
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/TaskItem.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { NPopover } from 'naive-ui'
+import { ref } from 'vue'
+import { useTaskOperationMessage, useTaskRightContextMenu } from '@/composables'
+import { TaskStatus, useTasksStore, useThemeStore } from '@/store'
+import type { Task } from '@/store'
+
+interface Props {
+  task: Task
+  isShowDragIcon: boolean
+}
+
+const props = defineProps<Props>()
+const tasksStore = useTasksStore()
+const themeStore = useThemeStore()
+const { isHover, hoverEvents } = useHandleHover()
+
+const { showCompleteMessage } = useTaskOperationMessage()
+const { showContextMenu } = useTaskRightContextMenu()
+
+const checkboxColors: Record<TaskStatus, string> = {
+  [TaskStatus.ACTIVE]: 'bg-transparent',
+  [TaskStatus.COMPLETED]: 'bg-#007A78',
+  [TaskStatus.REMOVED]: 'bg-#ccc',
+}
+function useHandleHover() {
+  const isHover = ref(false)
+  const hoverEvents: Record<string, () => void> = {
+    mouseover: () => isHover.value = true,
+    mousemove: () => isHover.value = true,
+    mouseleave: () => isHover.value = false,
+  }
+  return {
+    isHover,
+    hoverEvents,
+  }
+}
+
+function handleRightClickTask(e: MouseEvent, task: Task) {
+  tasksStore.changeActiveTask(task)
+  showContextMenu(e)
+}
+
+function handleClickTask(task: Task) {
+  tasksStore.changeActiveTask(task)
+}
+
+function handleInput(e: Event, task: Task) {
+  const newTitle = (e.target as HTMLElement).innerText
+  tasksStore.updateTaskTitle(task, newTitle)
+}
+
+function handleCompleteTodo(e: Event) {
+  if (props.task.status === TaskStatus.ACTIVE) {
+    tasksStore.completeTask(props.task)
+    showCompleteMessage(props.task)
+  }
+  else if (props.task.status === TaskStatus.COMPLETED) {
+    tasksStore.restoreTask(props.task)
+  }
+  else if (props.task.status === TaskStatus.REMOVED) {
+    // eslint-disable-next-line no-console
+    console.log('在垃圾桶里面的 task 不可以直接恢复')
+  }
+}
+</script>
+
+<template>
+  <div
+    :data-id="props.task.id" class="flex flex-row w-full items-center"
+    @click.right="handleRightClickTask($event, task)" v-on="hoverEvents"
+  >
+    <i
+      v-if="isHover && props.isShowDragIcon"
+      class="cursor-move text-gray dark:text-white flex-shrink-0 i-mdi-format-align-justify opacity-75 hover:opacity-100"
+    />
+    <i v-else class="w-1.2em h-1.2em flex-shrink-0" />
+    <div
+      flex justify-start items-center gap-5px h-40px py-5px flex-1 pl-10px :class="[
+        themeStore.isDark ? 'hover:bg-[#474747]/50' : 'hover:bg-[#ECF1FF]/50',
+        tasksStore.currentActiveTask?.id === task.id
+          ? themeStore.isDark
+            ? '!bg-[#474747]'
+            : '!bg-[#ECF1FF]'
+          : '',
+      ]"
+    >
+      <template v-if="task.status === TaskStatus.REMOVED">
+        <!-- 临时加的提示 后面要去掉 -->
+        <div class="flex justify-start items-center gap-5px">
+          <NPopover trigger="hover">
+            <template #trigger>
+              <button :class="[checkboxColors[task.status]]" class="w-5 h-5 rounded-1" @click="handleCompleteTodo" />
+            </template>
+            <div>在垃圾桶里面的 Task 是不可以直接被恢复的哦</div>
+          </NPopover>
+        </div>
+        <div class="w-full" @click="handleClickTask(task)">
+          {{ task.title }}
+        </div>
+      </template>
+      <template v-else>
+        <button
+          :class="[checkboxColors[task.status]]"
+          class="w-5 h-5 rounded-1 border border-solid border-black opacity-75 dark:border-white hover:opacity-100"
+          @click="handleCompleteTodo"
+        />
+        <div
+          class="w-full cursor-pointer focus:outline-0" contenteditable="true" @input="handleInput($event, task)"
+          @focus="handleClickTask(task)"
+        >
+          {{ task.title }}
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/apps/teach-frontend/src/components/task/TaskLeftListProject.vue b/apps/teach-frontend/src/components/task/TaskLeftListProject.vue
new file mode 100644
index 0000000..f89dc86
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/TaskLeftListProject.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import type { TreeOption } from 'naive-ui'
+import { NTree } from 'naive-ui'
+import { computed, h, ref, watchEffect } from 'vue'
+import 'vue3-emoji-picker/css'
+import { projectCreatedViewModal } from './TagView/ProjectCreateView'
+import { useTaskLeftListStore } from './taskLeftList'
+
+const taskLeftListStore = useTaskLeftListStore()
+const treeListProjectChildren = ref<TreeOption[]>([])
+
+const selectedKey = computed({
+  get() {
+    return [taskLeftListStore.selectedKey]
+  },
+  set(val) {
+    taskLeftListStore.selectedKey = val[0]
+  },
+})
+
+const defaultExpandedKeys = [taskLeftListStore.listProjectRootNode.name]
+
+const createRootNodeSuffix = (onclick: (e: Event) => void) => {
+  return () => h(Icon, {
+    icon: 'ic:baseline-plus',
+    width: '20',
+    class: 'invisible rounded-1 hover:bg-gray-2',
+    onclick,
+  })
+}
+
+watchEffect(() => {
+  treeListProjectChildren.value = taskLeftListStore.listProjectChildrenNodes.map((project) => {
+    return {
+      key: project.name,
+      label: project.name,
+      isleaf: true,
+    }
+  })
+})
+
+const data = ref<any[]>([
+  {
+    key: taskLeftListStore.listProjectRootNode.name,
+    label: taskLeftListStore.listProjectRootNode.name,
+    checkboxDisabled: false,
+    isLeaf: false,
+    children: treeListProjectChildren,
+    suffix: createRootNodeSuffix((e: Event) => {
+      e.stopPropagation()
+      projectCreatedViewModal()
+    }),
+  },
+])
+
+const nodeProps = ({ option }: { option: TreeOption }) => {
+  return {
+    class: option.placeholder ? 'placeholder' : '',
+  }
+}
+</script>
+
+<template>
+  <NTree
+    v-model:selected-keys="selectedKey" :default-expanded-keys="defaultExpandedKeys"
+    block-line expand-on-click :data="data" :node-props="nodeProps"
+  />
+</template>
+
+<style>
+.n-tree.n-tree--block-line .n-tree-node:not(.n-tree-node--disabled).n-tree-node--pending {
+  background-color: transparent;
+}
+
+.n-tree.n-tree--block-line .n-tree-node:not(.n-tree-node--disabled).n-tree-node--selected {
+  background-color: var(--n-node-color-active);
+}
+
+.n-tree-node-wrapper .placeholder .n-tree-node-indent {
+  display: none;
+}
+
+.n-tree-node-wrapper .placeholder .n-tree-node-switcher {
+  display: none;
+}
+
+.n-tree-node-wrapper .placeholder {
+  pointer-events: none;
+  padding: 6px 8px;
+  margin: 0 8px 0 20px;
+  background-color: rgb(25, 25, 25, 0.03);
+  border-radius: 4px;
+}
+
+.n-tree-node-wrapper .placeholder .n-tree-node-content__text {
+  color: rgb(25, 25, 25, 0.4);
+  font-size: 12px;
+}
+
+.dark .n-tree-node-wrapper .placeholder {
+  background-color: rgb(59, 59, 59, 1);
+}
+
+.dark .placeholder .n-tree-node-content__text {
+  color: rgba(156, 163, 175, 0.5);
+}
+
+.n-tree.n-tree--block-line .n-tree-node:not(.n-tree-node--disabled):hover .iconify {
+  visibility: visible;
+}
+</style>
diff --git a/apps/teach-frontend/src/components/task/TaskLeftListSmartProject.vue b/apps/teach-frontend/src/components/task/TaskLeftListSmartProject.vue
new file mode 100644
index 0000000..ac01f81
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/TaskLeftListSmartProject.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { NPopover } from 'naive-ui'
+import { ref } from 'vue'
+import { useTaskLeftListStore } from './taskLeftList'
+import type { SmartProjectName } from '@/store'
+import {
+  useSettingsStore,
+  useSmartProjects,
+} from '@/store'
+
+export interface TaskListType {
+  key: number
+  icon: string
+  title: `${SmartProjectName}`
+  option?: string
+}
+
+function useProjectMoreActions() {
+  const showMoreIconIndex = ref<number>(-1)
+  const showWitchPopover = ref<number>(-1)
+
+  const openPopover = (key: number) => {
+    showWitchPopover.value = key
+  }
+
+  return {
+    showMoreIconIndex,
+    showWitchPopover,
+    openPopover,
+  }
+}
+
+const taskLeftListStore = useTaskLeftListStore()
+const settingsStore = useSettingsStore()
+const selected = 'bg-[#E7F5EE] dark:bg-[#233633]'
+
+const smartProjects = useSmartProjects()
+const { showMoreIconIndex, showWitchPopover, openPopover }
+  = useProjectMoreActions()
+
+const handleTaskItemClick = (projectName: string) => {
+  smartProjects.selectProject(projectName as SmartProjectName)
+  taskLeftListStore.selectedKey = projectName
+}
+</script>
+
+<template>
+  <ul>
+    <li
+      v-for="(item, key) in settingsStore.visibleSmartProjects"
+      :key="key"
+      li_common
+      pl-4
+      pr-2
+      hover="bg-[#F3F3F5] dark:bg-[#2D2D30]"
+      :class="taskLeftListStore.selectedKey === item.title ? selected : ''"
+      @click="handleTaskItemClick(item.title)"
+      @mouseenter="showMoreIconIndex = key"
+      @mouseleave="showMoreIconIndex = -1"
+    >
+      <div flex>
+        <Icon
+          :icon="item.icon"
+          width="20"
+          class="color-[#9D9FA3]"
+          dark="color-white-b"
+        />
+        <span class="ml-2">{{ item.title }}</span>
+      </div>
+
+      <NPopover
+        trigger="click"
+        style="padding: 5px 0 5px 0"
+        :show="showWitchPopover === key"
+        :show-arrow="false"
+        placement="bottom-start"
+        @clickoutside="showWitchPopover = -1"
+      >
+        <template #trigger>
+          <Icon
+            v-show="showMoreIconIndex === key"
+            icon="material-symbols:more-horiz"
+            width="20"
+            class="color-[#9D9FA3]"
+            dark="color-white"
+            @click="
+              ($event) => {
+                $event.stopPropagation();
+                openPopover(key);
+              }
+            "
+          />
+        </template>
+        <ul w-180px cursor-pointer>
+          <li
+            hover="bg-[#F3F3F5] dark:bg-[#2D2D30]"
+            pl-4
+            text-14px
+            h-20px
+            lh-20px
+            @click="settingsStore.setHideSmartProject(item)"
+          >
+            隐藏
+          </li>
+        </ul>
+      </NPopover>
+    </li>
+  </ul>
+</template>
+
+<style scoped></style>
diff --git a/apps/teach-frontend/src/components/task/TaskLeftListView.vue b/apps/teach-frontend/src/components/task/TaskLeftListView.vue
new file mode 100644
index 0000000..8ab257e
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/TaskLeftListView.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import TaskLeftListProject from '@/components/task/TaskLeftListProject.vue'
+import TaskLeftListSmartProject from '@/components/task/TaskLeftListSmartProject.vue'
+</script>
+
+<template>
+  <div>
+    <div>
+      <TaskLeftListProject />
+    </div>
+    <TaskLeftListSmartProject />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/apps/teach-frontend/src/components/task/TaskList.vue b/apps/teach-frontend/src/components/task/TaskList.vue
new file mode 100644
index 0000000..231158c
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/TaskList.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import { computed, ref } from 'vue'
+import { Icon } from '@iconify/vue'
+import draggable from 'vuedraggable'
+import TaskItem from './TaskItem.vue'
+import {
+  TasksSelectorType,
+  useTaskLeftMenuStatusStore,
+  useTasksSelectorStore,
+  useTasksStore,
+  useThemeStore,
+} from '@/store'
+
+const tasksStore = useTasksStore()
+const tasksSelectorStore = useTasksSelectorStore()
+const themeStore = useThemeStore()
+const taskLeftMenuStatusStore = useTaskLeftMenuStatusStore()
+
+function useInput() {
+  const inputRef: Ref<HTMLInputElement | null> = ref(null)
+
+  function onFocus() {
+    inputRef.value!.focus()
+  }
+
+  return {
+    inputRef,
+    onFocus,
+  }
+}
+
+const taskTitle = ref('')
+const dragging = ref<boolean>(false)
+
+const placeholderText = computed(() => {
+  return `添加任务至“${tasksSelectorStore.currentSelector?.name}”，回车即可保存`
+})
+const isPlaceholder = computed(() => {
+  return taskTitle.value.length === 0
+})
+
+function addTask() {
+  if (!taskTitle.value)
+    return
+  // if (Reflect.has(tasksStore.currentActiveProject, 'color'))
+  //   tasksStore.addTaskToTag(taskTitle.value)
+  else tasksStore.addTask(taskTitle.value)
+
+  taskTitle.value = ''
+}
+
+function toggleLeftMenu() {
+  taskLeftMenuStatusStore.toggle()
+}
+
+function handleInputChange(event: any) {
+  taskTitle.value = event.target.value
+}
+
+const shouldShowTodoAdd = computed(() => {
+  return tasksSelectorStore.currentSelector?.type === TasksSelectorType.listProject
+})
+
+const shouldEnabledDrag = computed(() => {
+  return tasksSelectorStore.currentSelector?.type === TasksSelectorType.listProject
+},
+)
+
+const { inputRef, onFocus } = useInput()
+
+function handleEndDrag(e: any) {
+  dragging.value = false
+
+  const currentTask = tasksStore.tasks[e.newIndex]
+  const currentIndex = tasksStore.tasks.length - 1 - e.newIndex
+  tasksStore.updateTaskPosition(currentTask!, currentIndex)
+
+  if (e.newIndex > e.oldIndex) {
+    for (let i = e.oldIndex; i < e.newIndex; i++) {
+      const exchangedIndex = tasksStore.tasks.length - 1 - i
+      tasksStore.updateTaskPosition(tasksStore.tasks[i], exchangedIndex)
+    }
+  }
+  else {
+    for (let i = e.newIndex + 1; i < e.oldIndex + 1; i++) {
+      const exchangedIndex = tasksStore.tasks.length - 1 - i
+      tasksStore.updateTaskPosition(tasksStore.tasks[i], exchangedIndex)
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-20px px-4 text-16px">
+    <div flex items-center>
+      <Icon
+        :icon="
+          taskLeftMenuStatusStore.visible
+            ? 'tabler:layout-sidebar-left-collapse'
+            : 'tabler:layout-sidebar-right-collapse'
+        "
+        width="30"
+        @click="toggleLeftMenu()"
+      />
+      <h1 class="text-4xl ml-5px">
+        {{ tasksSelectorStore.currentSelector?.name }}
+      </h1>
+    </div>
+    <div
+      v-show="shouldShowTodoAdd"
+      class="relative cursor-text"
+      @click="onFocus"
+    >
+      <input
+        ref="inputRef"
+        :value="taskTitle"
+        type="text"
+        class="w-100% min-w-300px h-38px rounded-6px p-4px pl-12px pr-12px outline-none border-1 b-transparent bg-gray-100 dark:bg-#3B3B3B"
+        @input="handleInputChange"
+        @keypress.enter="addTask"
+      >
+      <div
+        v-show="isPlaceholder"
+        class="w-100% min-w-300px absolute top-0 flex items-center h-38px p-4px pl-12px pr-12px border-1 b-transparent select-none color-gray:50"
+      >
+        <Icon
+          icon="ic:baseline-plus"
+          width="20"
+          class="color-gray:50 pr-4px box-content"
+        />
+        {{ placeholderText }}
+      </div>
+    </div>
+    <draggable
+      :list="tasksStore.tasks"
+      :ghost-class="themeStore.isDark ? 'dark-ghost' : 'ghost'"
+      :drag-class="themeStore.isDark ? 'dark-drag' : 'drag'"
+      item-key="id"
+      :animation="200"
+      :component-data="{
+        tag: 'div',
+        type: 'transition-group',
+        name: !dragging ? 'flip-list' : null,
+      }"
+      class="flex flex-col gap-10px"
+      :disabled="!shouldEnabledDrag"
+      @start="dragging = true"
+      @end="handleEndDrag"
+    >
+      <template #item="{ element, index }">
+        <TaskItem
+          :task="element"
+          :index="index"
+          :is-show-drag-icon="shouldEnabledDrag"
+          class="item"
+        />
+      </template>
+    </draggable>
+    <!-- 暂时性修复 contenteditable 的 bug #9 -->
+    <div class="w-full h-1px" contenteditable="false" />
+  </div>
+</template>
+
+<style scoped>
+.list-enter-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+.dark-ghost {
+  opacity: 0.4;
+  background: #2f2f2f;
+}
+
+.drag {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+.dark-drag {
+  opacity: 0.4;
+  background: #2f2f2f;
+}
+</style>
diff --git a/apps/teach-frontend/src/components/task/taskLeftList.ts b/apps/teach-frontend/src/components/task/taskLeftList.ts
new file mode 100644
index 0000000..fb826ef
--- /dev/null
+++ b/apps/teach-frontend/src/components/task/taskLeftList.ts
@@ -0,0 +1,62 @@
+import { ref, watch, watchEffect } from 'vue'
+import { watchOnce } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import { useListProjectsStore } from '@/store/listProjects'
+
+interface Node {
+  name: string
+}
+
+export const useTaskLeftListStore = defineStore('taskLeftList', () => {
+  const listProjectsStore = useListProjectsStore()
+  const listProjectRootNode: Node = {
+    name: '清单',
+  }
+
+  const selectedKey = ref<string>('')
+  const listProjectChildrenNodes = ref<Node[]>([])
+
+  watchEffect(() => {
+    listProjectChildrenNodes.value = listProjectsStore.projects.map((p) => {
+      return {
+        name: p.name,
+      }
+    })
+  })
+
+  // 初始化默认的选择
+  watchOnce(
+    () => listProjectChildrenNodes.value,
+    (value) => {
+      selectedKey.value = value[0].name
+    },
+  )
+
+  // 当更新列表清单的时候 同步下 selectedKeys
+  watch(
+    () => listProjectChildrenNodes.value,
+    (newValue, oldValue) => {
+      if (!oldValue.length)
+        return
+
+      if (newValue.length > oldValue.length)
+        selectedKey.value = newValue[newValue.length - 1].name
+      else if (oldValue.length > newValue.length)
+        selectedKey.value = newValue[0].name
+    },
+  )
+
+  watch(selectedKey, (newValue, oldValue) => {
+    // 当点击 rootNode 的时候不应该改变选择的 project
+    if (newValue === listProjectRootNode.name)
+      selectedKey.value = oldValue
+    else
+      listProjectsStore.selectProject(newValue)
+  })
+
+  return {
+    selectedKey,
+    listProjectRootNode,
+    listProjectChildrenNodes,
+  }
+})
diff --git a/apps/teach-frontend/src/composables/command/CommandGoToHome.ts b/apps/teach-frontend/src/composables/command/CommandGoToHome.ts
new file mode 100644
index 0000000..2e68dcd
--- /dev/null
+++ b/apps/teach-frontend/src/composables/command/CommandGoToHome.ts
@@ -0,0 +1,19 @@
+import type { Command } from './index'
+import { useGoto } from '@/composables'
+export class CommandGoToHome implements Command {
+  gotoHome: () => void
+
+  name = '前往主页'
+
+  constructor() {
+    // 当 command 的逻辑依赖于 vue setup 的话, 必须在构造函数中获取
+    // 比如这里依赖于 useGoto 而  useGoto 依赖于 useRouter .
+    // useRouter 必须在 setup 中调用
+    const { gotoHome } = useGoto()
+    this.gotoHome = gotoHome
+  }
+
+  execute() {
+    this.gotoHome()
+  }
+}
diff --git a/apps/teach-frontend/src/composables/command/CommandGotoSettingsTheme.ts b/apps/teach-frontend/src/composables/command/CommandGotoSettingsTheme.ts
new file mode 100644
index 0000000..3aa9ac3
--- /dev/null
+++ b/apps/teach-frontend/src/composables/command/CommandGotoSettingsTheme.ts
@@ -0,0 +1,16 @@
+import type { Command } from './index'
+import { useGoto } from '@/composables'
+export class CommandGoToSettingsTheme implements Command {
+  gotoSettingsTheme: () => void
+
+  name = '切换皮肤'
+
+  constructor() {
+    const { gotoSettingsTheme } = useGoto()
+    this.gotoSettingsTheme = gotoSettingsTheme
+  }
+
+  execute() {
+    this.gotoSettingsTheme()
+  }
+}
diff --git a/apps/teach-frontend/src/composables/command/index.ts b/apps/teach-frontend/src/composables/command/index.ts
new file mode 100644
index 0000000..90ec424
--- /dev/null
+++ b/apps/teach-frontend/src/composables/command/index.ts
@@ -0,0 +1,30 @@
+import { CommandGoToHome } from './CommandGoToHome'
+import { CommandGoToSettingsTheme } from './CommandGotoSettingsTheme'
+export interface Command {
+  name: string
+  execute: () => void
+}
+
+let commands: Command[] = []
+
+export function useCommand() {
+  function initCommands() {
+    commands.push(new CommandGoToHome())
+    commands.push(new CommandGoToSettingsTheme())
+  }
+
+  function resetCommand() {
+    commands = []
+  }
+
+  function addCommand(command: Command) {
+    commands.push(command)
+  }
+
+  return {
+    commands,
+    initCommands,
+    resetCommand,
+    addCommand,
+  }
+}
diff --git a/apps/teach-frontend/src/composables/goto.ts b/apps/teach-frontend/src/composables/goto.ts
new file mode 100644
index 0000000..ec3b8f5
--- /dev/null
+++ b/apps/teach-frontend/src/composables/goto.ts
@@ -0,0 +1,35 @@
+import { useRouter } from 'vue-router'
+import { RouteNames } from '@/router/const'
+
+export function useGoto() {
+  const router = useRouter()
+
+  function gotoHome() {
+    router.push({
+      name: RouteNames.HOME,
+    })
+  }
+
+  function gotoSettings() {
+    router.push({
+      name: RouteNames.SETTINGS,
+    })
+  }
+
+  function gotoSettingsTheme() {
+    router.push({
+      name: RouteNames.SETTINGS_THEME,
+    })
+  }
+
+  return {
+    gotoHome,
+    gotoSettings,
+    gotoSettingsTheme,
+  }
+}
+
+export const GITHUB_URL = 'https://github.com/cuixueshe/dida'
+export function openGithub() {
+  window.open(GITHUB_URL)
+}
diff --git a/apps/teach-frontend/src/composables/index.ts b/apps/teach-frontend/src/composables/index.ts
new file mode 100644
index 0000000..a9f9fe5
--- /dev/null
+++ b/apps/teach-frontend/src/composables/index.ts
@@ -0,0 +1,5 @@
+export { useTaskOperationMessage } from './useTaskOperationMessage'
+export { useTaskRightContextMenu } from './useTaskRightContextMenu'
+export { useTaskSidebarDrag } from './useTaskSidebarDrag'
+export { useIsMac } from './misc'
+export * from './goto'
diff --git a/apps/teach-frontend/src/composables/misc.ts b/apps/teach-frontend/src/composables/misc.ts
new file mode 100644
index 0000000..60d16b1
--- /dev/null
+++ b/apps/teach-frontend/src/composables/misc.ts
@@ -0,0 +1,5 @@
+import { computed } from 'vue'
+
+export function useIsMac() {
+  return computed(() => /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) || false)
+}
diff --git a/apps/teach-frontend/src/composables/settings/index.ts b/apps/teach-frontend/src/composables/settings/index.ts
new file mode 100644
index 0000000..2617183
--- /dev/null
+++ b/apps/teach-frontend/src/composables/settings/index.ts
@@ -0,0 +1,4 @@
+export { sidebars } from './sidebar'
+export { smartProjects, setHideSmartProject, SmartProjectOptionValue } from './smartProject'
+export type { VisibleOption } from './smartProject'
+export { Themes, Theme } from './theme'
diff --git a/apps/teach-frontend/src/composables/settings/sidebar.ts b/apps/teach-frontend/src/composables/settings/sidebar.ts
new file mode 100644
index 0000000..34b7f0d
--- /dev/null
+++ b/apps/teach-frontend/src/composables/settings/sidebar.ts
@@ -0,0 +1,24 @@
+enum Sidebars {
+  Theme = '主题',
+  Smart = '智能清单',
+}
+
+interface SidebarItem {
+  title: Sidebars
+  name: string
+  path: string
+}
+
+// 如何添加一个新的 sidebar？请详细阅读 https://github.com/cuixueshe/dida/pull/52
+export const sidebars: SidebarItem[] = [
+  {
+    title: Sidebars.Theme,
+    name: 'Theme',
+    path: '/theme',
+  },
+  {
+    title: Sidebars.Smart,
+    name: 'Smart',
+    path: '/smart',
+  },
+]
diff --git a/apps/teach-frontend/src/composables/settings/smartProject.ts b/apps/teach-frontend/src/composables/settings/smartProject.ts
new file mode 100644
index 0000000..0bb2e22
--- /dev/null
+++ b/apps/teach-frontend/src/composables/settings/smartProject.ts
@@ -0,0 +1,55 @@
+export interface VisibleOption {
+  label: '显示'
+  value: SmartProjectOptionValue
+}
+interface HiddenOption {
+  label: '隐藏'
+  value: SmartProjectOptionValue
+}
+
+type Options = Array<VisibleOption | HiddenOption>
+
+interface SettingsSmartProject {
+  title: string
+  options: Options
+  option: string
+  icon: string
+}
+
+export enum SmartProjectOptionValue {
+  Visible = 'visible',
+  Hidden = 'hidden',
+}
+
+function createOptions() {
+  const visibleOption: VisibleOption = {
+    label: '显示',
+    value: SmartProjectOptionValue.Visible,
+  }
+
+  const hiddenOption: HiddenOption = {
+    label: '隐藏',
+    value: SmartProjectOptionValue.Hidden,
+  }
+  return [visibleOption, hiddenOption]
+}
+
+const completedSmartProject: SettingsSmartProject = {
+  title: '已完成',
+  options: createOptions(),
+  option: 'visible',
+  icon: 'material-symbols:check-box',
+}
+
+const trashSmartProject = {
+  title: '垃圾桶',
+  options: createOptions(),
+  option: 'visible',
+  icon: 'mdi:close-box',
+}
+
+export function setHideSmartProject(project: SettingsSmartProject) {
+  project.option = SmartProjectOptionValue.Hidden
+}
+
+export const smartProjects = [completedSmartProject, trashSmartProject]
diff --git a/apps/teach-frontend/src/composables/settings/theme.ts b/apps/teach-frontend/src/composables/settings/theme.ts
new file mode 100644
index 0000000..89ea022
--- /dev/null
+++ b/apps/teach-frontend/src/composables/settings/theme.ts
@@ -0,0 +1,28 @@
+import { getGlobalThemeStore } from '@/store'
+
+export enum Theme {
+  Dark = 'Dark',
+  Light = 'Light',
+}
+
+interface ThemeItem {
+  label: string
+  name: Theme
+  color: string
+  handler: () => void
+}
+
+export const Themes: ThemeItem[] = [
+  {
+    label: '亮色',
+    name: Theme.Light,
+    color: '#f3f4f6',
+    handler: () => getGlobalThemeStore().toggleDark(false),
+  },
+  {
+    label: '暗色',
+    name: Theme.Dark,
+    color: '#18181c',
+    handler: () => getGlobalThemeStore().toggleDark(true),
+  },
+]
diff --git a/apps/teach-frontend/src/composables/tests/goto.spec.ts b/apps/teach-frontend/src/composables/tests/goto.spec.ts
new file mode 100644
index 0000000..e7725d7
--- /dev/null
+++ b/apps/teach-frontend/src/composables/tests/goto.spec.ts
@@ -0,0 +1,33 @@
+import { describe, expect, it, vi } from 'vitest'
+import { GITHUB_URL, openGithub, useGoto } from '../goto'
+import { useSetup } from '@/tests/helper'
+import { RouteNames } from '@/router/const'
+
+describe('the header', () => {
+  it('should be go to home page', () => {
+    const { router } = useSetup(() => {
+      const { gotoHome } = useGoto()
+      gotoHome()
+    })
+
+    expect(router.push).toBeCalledWith({ name: RouteNames.HOME })
+  })
+
+  it('should be go to settings page', () => {
+    const { router } = useSetup(() => {
+      const { gotoSettings } = useGoto()
+
+      gotoSettings()
+    })
+
+    expect(router.push).toBeCalledWith({ name: RouteNames.SETTINGS })
+  })
+
+  it('should be go to github', async () => {
+    window.open = vi.fn()
+
+    openGithub()
+
+    expect(window.open).toBeCalledWith(GITHUB_URL)
+  })
+})
diff --git a/apps/teach-frontend/src/composables/useNaiveDiscreteApi.ts b/apps/teach-frontend/src/composables/useNaiveDiscreteApi.ts
new file mode 100644
index 0000000..1d5f668
--- /dev/null
+++ b/apps/teach-frontend/src/composables/useNaiveDiscreteApi.ts
@@ -0,0 +1,24 @@
+// https://www.naiveui.com/zh-CN/light/components/discrete
+import type { ConfigProviderProps, DiscreteApi } from 'naive-ui'
+import { createDiscreteApi, darkTheme } from 'naive-ui'
+import { computed } from 'vue'
+
+let discreteApi: DiscreteApi
+
+const discreteConfigure = computed<ConfigProviderProps>(() => ({
+  // TODO theme follow themeStore
+  // Cannot use getGlobalThemeStore here, cause pinia will call `onMounted` hook when using it.
+  // We use this api in `RouterGuard`, at that time there has no active component
+  // then vue throws a warning.
+  // To avoid the warning, just fixed theme here.
+  theme: darkTheme,
+}))
+
+export const getDiscreteApi = () => {
+  if (!discreteApi) {
+    discreteApi = createDiscreteApi(['loadingBar'], {
+      configProviderProps: discreteConfigure,
+    })
+  }
+  return discreteApi
+}
diff --git a/apps/teach-frontend/src/composables/useTaskOperationMessage.ts b/apps/teach-frontend/src/composables/useTaskOperationMessage.ts
new file mode 100644
index 0000000..74cb667
--- /dev/null
+++ b/apps/teach-frontend/src/composables/useTaskOperationMessage.ts
@@ -0,0 +1,79 @@
+import type { MessageReactive } from 'naive-ui'
+import { createDiscreteApi } from 'naive-ui'
+import { h } from 'vue'
+import type { Task } from '@/store'
+import { useTasksStore } from '@/store'
+
+enum TaskOperationStatus {
+  Complete = '已完成',
+  Remove = '删除完成',
+  Move = '移动到',
+}
+
+export function useTaskOperationMessage() {
+  const tasksStore = useTasksStore()
+  const { message } = createDiscreteApi(['message'])
+
+  let messageReactive: MessageReactive | null = null
+
+  function createMessageView(content: string, onClick?: () => void) {
+    return () =>
+      h('p', null, [
+        h('span', null, `${content}`),
+        onClick
+          ? h(
+            'i',
+            {
+              style:
+                  'color: teal;font-style:unset;cursor:pointer;margin-left: 20px',
+              onClick,
+            },
+            '撤销',
+          )
+          : null,
+      ])
+  }
+
+  function removeMessage() {
+    if (messageReactive) {
+      messageReactive.destroy()
+      messageReactive = null
+    }
+  }
+
+  function showCompleteMessage(task: Task) {
+    const onClick = () => {
+      tasksStore.cancelCompleteTask(task)
+      removeMessage()
+    }
+    const content = `${task.title} ${TaskOperationStatus.Complete}`
+
+    messageReactive = message.info(createMessageView(content, onClick), {
+      icon: () => null,
+      duration: 2500,
+    })
+  }
+
+  function showRemoveMessage(task: Task) {
+    const content = `${task.title} ${TaskOperationStatus.Remove}`
+
+    messageReactive = message.info(createMessageView(content), {
+      icon: () => null,
+      duration: 1000,
+    })
+  }
+
+  function showMoveMessage(projectName: string) {
+    const content = `${TaskOperationStatus.Move} ${projectName} 清单`
+    messageReactive = message.info(createMessageView(content), {
+      icon: () => null,
+      duration: 1000,
+    })
+  }
+
+  return {
+    showCompleteMessage,
+    showRemoveMessage,
+    showMoveMessage,
+  }
+}
diff --git a/apps/teach-frontend/src/composables/useTaskRightContextMenu.ts b/apps/teach-frontend/src/composables/useTaskRightContextMenu.ts
new file mode 100644
index 0000000..6aab135
--- /dev/null
+++ b/apps/teach-frontend/src/composables/useTaskRightContextMenu.ts
@@ -0,0 +1,105 @@
+import { h, reactive } from 'vue'
+import ContextMenu from '@imengyu/vue3-context-menu'
+import type { MenuOptions } from '@imengyu/vue3-context-menu/index'
+import { useTaskOperationMessage } from './useTaskOperationMessage'
+import { useListProjectsStore, useTasksStore } from '@/store'
+
+export function useTaskRightContextMenu() {
+  const tasksStore = useTasksStore()
+  const listProjectsStore = useListProjectsStore()
+  const { showRemoveMessage, showMoveMessage } = useTaskOperationMessage()
+  const moveProjects: NonNullable<MenuOptions['items']> = [
+    ...getSearchMenuItem(),
+    ...getMoveListProjects(),
+  ]
+  const menuData = reactive<MenuOptions>({
+    x: 0,
+    y: 0,
+    items: [
+      {
+        label: '移动到',
+        children: moveProjects,
+      },
+      {
+        label: '删除',
+        onClick: () => {
+          showRemoveMessage(tasksStore.currentActiveTask!)
+          tasksStore.removeTask(tasksStore.currentActiveTask!)
+        },
+      },
+    ],
+  })
+
+  function getSearchMenuItem() {
+    return [
+      {
+        label: h('input', {
+          style: {
+            width: '100px',
+            height: '20px',
+            outlineColor: 'rgb(86, 125, 250)',
+          },
+          placeholder: '搜索',
+          id: 'seaechInput',
+          onInput: changeInput,
+        }),
+        clickClose: false,
+      },
+    ]
+  }
+
+  function changeInput() {
+    const inputValue = (<HTMLInputElement>(
+      document.getElementById('seaechInput')
+    )).value
+    if (menuData.items) {
+      if (!inputValue) {
+        menuData.items[0].children = moveProjects
+        return
+      }
+      menuData.items[0].children = moveProjects.filter((projectItem) => {
+        if (typeof projectItem.label === 'string')
+          return (projectItem.label as string).includes(inputValue)
+        else return true
+      })
+    }
+  }
+
+  function getMoveListProjects() {
+    return listProjectsStore.projects.map((project) => {
+      const isCurrentProject = tasksStore.currentActiveTask?.projectId === project.id
+      return {
+        label: isCurrentProject
+          ? h(
+            'span',
+            {
+              style: {
+                color: '#567dfa',
+              },
+            },
+            project.name,
+          )
+          : project.name,
+        onClick: () => {
+          if (isCurrentProject)
+            return
+          showMoveMessage(project.name)
+          tasksStore.moveTaskToProject(tasksStore.currentActiveTask!, project.id)
+        },
+      }
+    })
+  }
+
+  function showContextMenu(e: MouseEvent) {
+    e.preventDefault()
+    menuData.x = e.x
+    menuData.y = e.y
+    if (menuData.items)
+      menuData.items[0].children = moveProjects
+    ContextMenu.showContextMenu(menuData)
+  }
+
+  return {
+    showContextMenu,
+  }
+}
diff --git a/apps/teach-frontend/src/composables/useTaskSidebarDrag.ts b/apps/teach-frontend/src/composables/useTaskSidebarDrag.ts
new file mode 100644
index 0000000..e6a1e05
--- /dev/null
+++ b/apps/teach-frontend/src/composables/useTaskSidebarDrag.ts
@@ -0,0 +1,125 @@
+import { useEventListener } from '@vueuse/core'
+import type { Ref } from 'vue'
+
+const LEFT_AREA_MAX_WIDTH = 360
+const CENTRAL_AREA_MIN_WIDTH = 380
+
+const lineBorderWidth = 6
+
+enum Direction {
+  LEFT = 'left',
+  RIGHT = 'right',
+}
+
+export function useTaskSidebarDrag(
+  minWidth: number,
+  leftResizeElement: Ref<HTMLDivElement | undefined>,
+  rightResizeElement: Ref<HTMLDivElement | undefined>,
+  boxContainerElement: Ref<HTMLDivElement | undefined>,
+  leftContainerElement: Ref<HTMLDivElement | undefined>,
+  rightContainerElement: Ref<HTMLDivElement | undefined>,
+  leftWidthFlex: Ref<string>,
+  rightWidthFlex: Ref<string>,
+  themeStore: Record<string, any>,
+) {
+  function getContainerHorizontalPadding(
+    containerRef: Ref<HTMLDivElement | undefined>,
+  ) {
+    if (!containerRef.value)
+      return 0
+    const computedStyle = getComputedStyle(containerRef.value)
+    return (
+      parseFloat(computedStyle.getPropertyValue('padding-left'))
+      + parseFloat(computedStyle.getPropertyValue('padding-right'))
+    )
+  }
+
+  function calculateMoveDistance(
+    offsetLeft: number,
+    startX: number,
+    endX: number,
+    direction: Direction,
+  ) {
+    let moveDistance = offsetLeft + (endX - startX)
+    if (direction === Direction.LEFT) {
+      if (moveDistance < minWidth)
+        moveDistance = minWidth
+      if (moveDistance > LEFT_AREA_MAX_WIDTH)
+        moveDistance = LEFT_AREA_MAX_WIDTH
+    }
+    else {
+      const space
+        = boxContainerElement.value!.clientWidth
+        - getContainerHorizontalPadding(boxContainerElement) - lineBorderWidth
+
+      if (moveDistance >= space - minWidth) {
+        moveDistance = minWidth
+      }
+      else {
+        if (moveDistance < CENTRAL_AREA_MIN_WIDTH + minWidth)
+          moveDistance = CENTRAL_AREA_MIN_WIDTH + minWidth
+        moveDistance = space - moveDistance
+      }
+      if (moveDistance < minWidth)
+        moveDistance = minWidth
+    }
+    return moveDistance
+  }
+
+  function useDividerDrag(e: MouseEvent, direction: Direction) {
+    const startX = e.clientX
+    let offsetLeft: number
+    direction === Direction.LEFT
+      ? (offsetLeft = leftResizeElement.value!.offsetLeft)
+      : (offsetLeft = rightResizeElement.value!.offsetLeft)
+
+    offsetLeft = offsetLeft - themeStore.sideBarWidth - themeStore.taskLeftListViewPadding
+
+    const cleanupMouseMove = useEventListener(
+      document,
+      'mousemove',
+      (event: MouseEvent) => {
+        document.body.style.cursor = 'ew-resize'
+        const endX = event.clientX
+        const moveDistance = calculateMoveDistance(
+          offsetLeft,
+          startX,
+          endX,
+          direction,
+        )
+        const expression = `flex: 0 0 ${moveDistance}px`
+
+        if (direction === Direction.LEFT) {
+          leftWidthFlex.value = expression
+          leftContainerElement.value!.setAttribute('style', leftWidthFlex.value)
+        }
+        if (direction === Direction.RIGHT) {
+          rightWidthFlex.value = expression
+          rightContainerElement.value!.setAttribute('style', rightWidthFlex.value)
+        }
+      },
+    )
+    const cleanupMouseUp = useEventListener(document, 'mouseup', () => {
+      cleanupMouseMove()
+      cleanupMouseUp()
+      document.body.style.cursor = 'default'
+    })
+  }
+
+  function useDividerLeftDrag(e: MouseEvent) {
+    useDividerDrag(e, Direction.LEFT)
+  }
+  function useDividerRightDrag(e: MouseEvent) {
+    useDividerDrag(e, Direction.RIGHT)
+  }
+
+  return {
+    useDividerLeftDrag,
+    useDividerRightDrag,
+    leftResizeElement,
+    rightResizeElement,
+    boxContainerElement,
+    leftContainerElement,
+    rightContainerElement,
+  }
+}
diff --git a/apps/teach-frontend/src/layout/BaseLayout.vue b/apps/teach-frontend/src/layout/BaseLayout.vue
new file mode 100644
index 0000000..29f7c96
--- /dev/null
+++ b/apps/teach-frontend/src/layout/BaseLayout.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import TheHeader from '@/components/header/TheHeader.vue'
+import Navbar from '@/components/navbar/Navbar.vue'
+</script>
+
+<template>
+  <div>
+    <TheHeader />
+    <div class="flex">
+      <Navbar />
+      <div class="grow">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/teach-frontend/src/main.ts b/apps/teach-frontend/src/main.ts
new file mode 100644
index 0000000..f35d466
--- /dev/null
+++ b/apps/teach-frontend/src/main.ts
@@ -0,0 +1,27 @@
+import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
+import ContextMenu from '@imengyu/vue3-context-menu'
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import { setupRouter } from './router'
+import '@unocss/reset/tailwind.css'
+import 'uno.css'
+import './style/overrides.css'
+
+(async function setupApp() {
+  const app = createApp(App).use(createPinia()).use(ContextMenu)
+  await setupRouter(app)
+  // This must be placed at bottom of app initialization, before mount.
+  resolveNaiveAndTailwindConflict()
+  app.mount('#app')
+})()
+
+// https://www.naiveui.com/zh-CN/os-theme/docs/style-conflict
+function resolveNaiveAndTailwindConflict() {
+  // We use tailwind reset as Unocss reset
+  // But some of reset style will replaced some of naive-ui style
+  // To following the docs, we need to do this.
+  const meta = document.createElement('meta')
+  meta.name = 'naive-ui-style'
+  document.head.appendChild(meta)
+}
diff --git a/apps/teach-frontend/src/pages/Settings.vue b/apps/teach-frontend/src/pages/Settings.vue
new file mode 100644
index 0000000..06a1f99
--- /dev/null
+++ b/apps/teach-frontend/src/pages/Settings.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import SettingsBody from '@/components/settings/SettingsBody.vue'
+import SettingsHeader from '@/components/settings/SettingsHeader.vue'
+</script>
+
+<template>
+  <div class="base-color h-[calc(100vh-40px)]">
+    <div class="w-1000px my-0 mx-auto">
+      <SettingsHeader />
+      <SettingsBody class="mt-20px" />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/apps/teach-frontend/src/pages/Task.vue b/apps/teach-frontend/src/pages/Task.vue
new file mode 100644
index 0000000..79890d1
--- /dev/null
+++ b/apps/teach-frontend/src/pages/Task.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { onBeforeMount, ref } from 'vue'
+import TaskEditor from '@/components/task/TaskEditor.vue'
+import TaskLeftListView from '@/components/task/TaskLeftListView.vue'
+import TaskList from '@/components/task/TaskList.vue'
+import { useTaskSidebarDrag } from '@/composables'
+import { useListProjectsStore, useTaskLeftMenuStatusStore, useThemeStore } from '@/store'
+
+const themeStore = useThemeStore()
+const projectsStore = useListProjectsStore()
+
+onBeforeMount(async () => {
+  await projectsStore.init()
+})
+
+const AREA_MIN_WIDTH = 240
+
+const leftResizeElement = ref<HTMLDivElement>()
+const rightResizeElement = ref<HTMLDivElement>()
+const boxContainerElement = ref<HTMLDivElement>()
+const leftContainerElement = ref<HTMLDivElement>()
+const rightContainerElement = ref<HTMLDivElement>()
+const leftWidthFlex = ref<string>(`flex: 0 0 ${AREA_MIN_WIDTH}px`)
+const rightWidthFlex = ref<string>(`flex: 0 0 ${AREA_MIN_WIDTH}px`)
+const { useDividerLeftDrag, useDividerRightDrag } = useTaskSidebarDrag(
+  AREA_MIN_WIDTH,
+  leftResizeElement,
+  rightResizeElement,
+  boxContainerElement,
+  leftContainerElement,
+  rightContainerElement,
+  leftWidthFlex,
+  rightWidthFlex,
+  themeStore,
+)
+const taskLeftMenuStatusStore = useTaskLeftMenuStatusStore()
+</script>
+
+<template>
+  <div
+    ref="boxContainerElement"
+    class="!h-[calc(100vh-40px)] flex p-10px pt-0 overflow-hidden base-color"
+  >
+    <div
+      v-if="taskLeftMenuStatusStore.visible"
+      ref="leftContainerElement"
+      :style="leftWidthFlex"
+    >
+      <TaskLeftListView />
+    </div>
+    <div
+      v-if="taskLeftMenuStatusStore.visible"
+      ref="leftResizeElement"
+      class="border-solid cursor-w-resize h-screen border-l-2px opacity-60 hover-opacity-100"
+      style="flex: 0 0 6px"
+      title="收缩侧边栏"
+      @mousedown.prevent="useDividerLeftDrag"
+    />
+    <div class="flex-1 flex w-full h-full p-24px min-w-300px">
+      <TaskList class="w-full" />
+    </div>
+    <div
+      ref="rightResizeElement"
+      class="border-solid cursor-w-resize h-screen border-l-2px opacity-60 hover-opacity-100"
+      style="flex: 0 0 6px"
+      title="收缩侧边栏"
+      @mousedown.prevent="useDividerRightDrag"
+    />
+    <div
+      ref="rightContainerElement"
+      class="flex w-full h-full p-24px"
+      :style="rightWidthFlex"
+    >
+      <TaskEditor class="w-full h-full" />
+    </div>
+  </div>
+</template>
diff --git a/apps/teach-frontend/src/router/const.ts b/apps/teach-frontend/src/router/const.ts
new file mode 100644
index 0000000..e21797e
--- /dev/null
+++ b/apps/teach-frontend/src/router/const.ts
@@ -0,0 +1,6 @@
+export enum RouteNames {
+  HOME = 'Home',
+  TASK = 'Task',
+  SETTINGS = 'Settings',
+  SETTINGS_THEME = 'SettingsTheme',
+}
diff --git a/apps/teach-frontend/src/router/index.ts b/apps/teach-frontend/src/router/index.ts
new file mode 100644
index 0000000..b464b18
--- /dev/null
+++ b/apps/teach-frontend/src/router/index.ts
@@ -0,0 +1,36 @@
+import type { RouteRecordRaw, Router } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import type { App } from 'vue'
+import { SettingsRoute } from './settings'
+import { RouteNames } from './const'
+import Task from '@/pages/Task.vue'
+import { getDiscreteApi } from '@/composables/useNaiveDiscreteApi'
+
+export const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    redirect: '/task',
+    name: RouteNames.HOME,
+  },
+  { path: '/task', component: Task, name: RouteNames.TASK },
+  SettingsRoute,
+]
+
+const setupRouterGuard = (router: Router) => {
+  router.beforeEach(() => {
+    getDiscreteApi().loadingBar.start()
+  })
+  router.afterEach(() => {
+    getDiscreteApi().loadingBar.finish()
+  })
+}
+
+export const setupRouter = async (app: App) => {
+  const router = createRouter({
+    history: createWebHashHistory(),
+    routes,
+  })
+  app.use(router)
+  setupRouterGuard(router)
+  await router.isReady()
+}
diff --git a/apps/teach-frontend/src/router/settings.ts b/apps/teach-frontend/src/router/settings.ts
new file mode 100644
index 0000000..178cdd7
--- /dev/null
+++ b/apps/teach-frontend/src/router/settings.ts
@@ -0,0 +1,27 @@
+import type { RouteRecordRaw } from 'vue-router'
+import type { Component } from 'vue'
+import { RouteNames } from './const'
+import Settings from '@/pages/Settings.vue'
+import { sidebars } from '@/composables/settings'
+
+const SETTINGS_PATH = 'settings'
+
+const subComponents = import.meta.glob(['/src/components/settings/Sub/**/**.vue'])
+
+const subRoutes: RouteRecordRaw[] = sidebars.map(sidebar => ({
+  path: `/settings${sidebar.path}`,
+  name: `Settings${sidebar.name}`,
+  component: subComponents[`/src/components/settings/Sub/${sidebar.name}/index.vue`] as () => Promise<Component>,
+  meta: {
+    title: sidebar.title,
+  },
+}))
+
+export const SettingsRoute = {
+  path: `/${SETTINGS_PATH}`,
+  component: Settings,
+  name: RouteNames.SETTINGS,
+  meta: { title: '设置' },
+  children: subRoutes,
+  redirect: subRoutes[0].path,
+} as RouteRecordRaw
diff --git a/apps/teach-frontend/src/store/index.ts b/apps/teach-frontend/src/store/index.ts
new file mode 100644
index 0000000..3df8b7e
--- /dev/null
+++ b/apps/teach-frontend/src/store/index.ts
@@ -0,0 +1,7 @@
+export { useThemeStore, getGlobalThemeStore } from './useTheme'
+export { useTaskLeftMenuStatusStore } from './useTaskLeftMenuStatus'
+export { useSettingsStore } from './useSettingsStore'
+export * from './tasks'
+export * from './listProjects'
+export * from './smartProjects'
+export * from './tasksSelector'
diff --git a/apps/teach-frontend/src/store/listProjects.ts b/apps/teach-frontend/src/store/listProjects.ts
new file mode 100644
index 0000000..8931205
--- /dev/null
+++ b/apps/teach-frontend/src/store/listProjects.ts
@@ -0,0 +1,89 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { TaskStatus } from './tasks'
+import { TasksSelectorType } from './tasksSelector'
+import { fetchAllProjects, fetchAllTasks, fetchCreateProject } from '@/api'
+import { useTasksSelectorStore } from '@/store'
+import type { ProjectResponse } from '@/api/types'
+
+export interface ListProject {
+  id: string
+  name: string
+  type: TasksSelectorType.listProject
+}
+
+export const useListProjectsStore = defineStore('newProjects', () => {
+  const tasksSelectorStore = useTasksSelectorStore()
+  const projects = ref<ListProject[]>([])
+
+  async function init() {
+    const rawProjects = await fetchAllProjects()
+    projects.value = rawProjects.map(mapProjectResponseToProject)
+
+    if (projects.value.length > 0)
+      tasksSelectorStore.setCurrentSelector(projects.value[0])
+  }
+
+  function selectProject(project: ListProject): void
+  function selectProject(projectId: ListProject['id']): void
+  function selectProject(projectName: ListProject['name']): void
+  function selectProject(projectOrNameOrId: ListProject | string): void {
+    let project: ListProject | undefined
+
+    if (typeof projectOrNameOrId === 'string')
+      project = findProject(projectOrNameOrId)
+    else project = projectOrNameOrId
+
+    if (project)
+      tasksSelectorStore.setCurrentSelector(project)
+  }
+
+  function findProject(projectIdOrName: string): ListProject | undefined {
+    return projects.value.find(
+      p => p.name === projectIdOrName || p.id === projectIdOrName,
+    )
+  }
+
+  async function createProject(name: string) {
+    if (!name)
+      return
+
+    const rawProject = await fetchCreateProject(name)
+    const newProject = mapProjectResponseToProject(rawProject)
+    projects.value.push(newProject)
+
+    selectProject(newProject)
+  }
+
+  function checkProjectIsExist(projectName: string) {
+    return projects.value.some((p) => {
+      return p.name === projectName
+    })
+  }
+
+  return {
+    projects,
+    init,
+    createProject,
+    selectProject,
+    findProject,
+    checkProjectIsExist,
+  }
+})
+
+function mapProjectResponseToProject(rawProject: ProjectResponse): ListProject {
+  return {
+    id: `${rawProject._id}`,
+    name: rawProject.name,
+    type: TasksSelectorType.listProject,
+  }
+}
+
+export async function loadListProjectTasks(pId: string) {
+  const rawTasks = await fetchAllTasks({
+    pId,
+    status: TaskStatus.ACTIVE,
+  })
+
+  return rawTasks
+}
diff --git a/apps/teach-frontend/src/store/smartProjects.ts b/apps/teach-frontend/src/store/smartProjects.ts
new file mode 100644
index 0000000..847cf9a
--- /dev/null
+++ b/apps/teach-frontend/src/store/smartProjects.ts
@@ -0,0 +1,51 @@
+import { defineStore } from 'pinia'
+import { TaskStatus } from './tasks'
+import { TasksSelectorType } from './tasksSelector'
+import { fetchAllTasks } from '@/api'
+import { useTasksSelectorStore } from '@/store'
+
+export interface SmartProject {
+  name: string
+  type: TasksSelectorType.smartProject
+}
+
+function createSmartProject(name: string): SmartProject {
+  return {
+    name,
+    type: TasksSelectorType.smartProject,
+  }
+}
+
+export enum SmartProjectName {
+  Complete = '已完成',
+  Trash = '垃圾桶',
+}
+export const completeSmartProject = createSmartProject(SmartProjectName.Complete)
+export const trashSmartProject = createSmartProject(SmartProjectName.Trash)
+export const smartProjects = [completeSmartProject, trashSmartProject]
+
+export const useSmartProjects = defineStore('smartProjects', () => {
+  const tasksSelectorStore = useTasksSelectorStore()
+
+  function selectProject(projectName: SmartProjectName) {
+    if (projectName === SmartProjectName.Complete)
+      tasksSelectorStore.setCurrentSelector(completeSmartProject)
+
+    else if (projectName === SmartProjectName.Trash)
+      tasksSelectorStore.setCurrentSelector(trashSmartProject)
+  }
+
+  return {
+    selectProject,
+  }
+})
+
+export async function loadSmartProjectTasks(smartProjectName: string) {
+  const status = smartProjectName === '已完成' ? TaskStatus.COMPLETED : TaskStatus.REMOVED
+  // 基于 updatedAt 来做排序
+  const rawTasks = await fetchAllTasks({
+    status,
+    sortBy: 'updatedAt',
+  })
+  return rawTasks
+}
diff --git a/apps/teach-frontend/src/store/tasks.ts b/apps/teach-frontend/src/store/tasks.ts
new file mode 100644
index 0000000..fe56d83
--- /dev/null
+++ b/apps/teach-frontend/src/store/tasks.ts
@@ -0,0 +1,180 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import {
+  fetchAllTasks,
+  fetchCompleteTask,
+  fetchCreateTask,
+  fetchMoveTaskToProject,
+  fetchRemoveTask,
+  fetchRestoreTask,
+  fetchUpdateTaskContent,
+  fetchUpdateTaskPosition,
+  fetchUpdateTaskTitle,
+} from '@/api'
+import { useTasksSelectorStore } from '@/store'
+import type { TaskResponse } from '@/api/types'
+
+export enum TaskStatus {
+  ACTIVE = 'active',
+  COMPLETED = 'completed',
+  REMOVED = 'removed',
+}
+
+export interface Task {
+  id: string
+  title: string
+  status: TaskStatus
+  content: string
+  projectId: string
+  position: number
+}
+
+export const useTasksStore = defineStore('tasksStore', () => {
+  const tasksSelectorStore = useTasksSelectorStore()
+
+  const tasks = ref<Task[]>([])
+  const currentActiveTask = ref<Task>()
+
+  function updateTasks(rawTasks: TaskResponse[]) {
+    tasks.value = rawTasks.map(mapTaskResponseToTask)
+  }
+
+  async function addTask(title: string) {
+    if (!tasksSelectorStore.currentSelector)
+      return
+    if (tasksSelectorStore.currentSelector.type !== 'listProject')
+      return
+
+    const newRawTask = await fetchCreateTask(title, tasksSelectorStore.currentSelector.id)
+    const task = mapTaskResponseToTask(newRawTask)
+    tasks.value.unshift(task)
+    changeActiveTask(task)
+  }
+
+  function changeActiveTask(taskId: Task['id']): void
+  function changeActiveTask(task: Task | undefined): void
+  function changeActiveTask(taskOrTaskId: Task | Task['id'] | undefined): void {
+    let task: Task | undefined
+
+    if (typeof taskOrTaskId === 'string')
+      task = tasks.value.find(t => t.id === taskOrTaskId)
+
+    else
+      task = taskOrTaskId
+
+    currentActiveTask.value = task
+  }
+
+  async function completeTask(task: Task) {
+    await fetchCompleteTask(task.id)
+    task.status = TaskStatus.COMPLETED
+    tasks.value = tasks.value.filter(t => t.id !== task.id)
+    changeActiveTask(undefined)
+  }
+
+  async function restoreTask(task: Task) {
+    await fetchRestoreTask(task.id)
+    task.status = TaskStatus.ACTIVE
+
+    tasks.value = tasks.value.filter(t => t.id !== task.id)
+  }
+
+  async function cancelCompleteTask(task: Task) {
+    function taskPositionRestorer(task: Task) {
+      const lastTask = tasks.value[tasks.value.length - 1]
+      if (task.position < lastTask.position) {
+        tasks.value.push(task)
+        return
+      }
+
+      for (let i = 0; i < tasks.value.length; i++) {
+        if (task.position > tasks.value[i].position) {
+          const currentIndex = tasks.value.indexOf(tasks.value[i])
+          tasks.value.splice(currentIndex, 0, task)
+          return
+        }
+      }
+    }
+
+    await fetchRestoreTask(task.id)
+    task.status = TaskStatus.ACTIVE
+
+    taskPositionRestorer(task)
+  }
+
+  async function removeTask(task: Task) {
+    await fetchRemoveTask(task.id)
+    task.status = TaskStatus.REMOVED
+    tasks.value = tasks.value.filter(t => t.id !== task.id)
+    changeActiveTask(undefined)
+  }
+
+  async function updateTaskTitle(task: Task, newTitle: string) {
+    const oldTitle = task.title
+    if (newTitle === oldTitle)
+      return
+
+    await fetchUpdateTaskTitle(task.id, newTitle)
+    task.title = newTitle
+  }
+
+  async function updateTaskContent(task: Task, newContent: string) {
+    const oldContent = task.content
+    if (newContent === oldContent)
+      return
+
+    await fetchUpdateTaskContent(task.id, newContent)
+    task.content = newContent
+  }
+
+  async function updateTaskPosition(task: Task, newPosition: number) {
+    const oldPosition = task.position
+    if (newPosition === oldPosition)
+      return
+
+    await fetchUpdateTaskPosition(task.id, newPosition)
+    task.position = newPosition
+  }
+
+  async function findAllTasksNotRemoved() {
+    const activeTasks = await fetchAllTasks({ status: TaskStatus.ACTIVE })
+    const completedTasks = await fetchAllTasks({ status: TaskStatus.COMPLETED })
+
+    return [...activeTasks.map(mapTaskResponseToTask), ...completedTasks.map(mapTaskResponseToTask)]
+  }
+
+  async function moveTaskToProject(task: Task, projectId: string) {
+    await fetchMoveTaskToProject(task.id, projectId)
+    task.projectId = projectId
+
+    tasks.value = tasks.value.filter(t => t.id !== task.id)
+  }
+
+  return {
+    tasks,
+    currentActiveTask,
+    addTask,
+    removeTask,
+    updateTasks,
+    changeActiveTask,
+    completeTask,
+    restoreTask,
+    moveTaskToProject,
+    cancelCompleteTask,
+    updateTaskTitle,
+    updateTaskContent,
+    updateTaskPosition,
+    findAllTasksNotRemoved,
+  }
+})
+
+function mapTaskResponseToTask(rawTask: TaskResponse): Task {
+  return {
+    id: rawTask._id,
+    title: rawTask.title,
+    content: rawTask.content,
+    status: rawTask.status,
+    projectId: rawTask.projectId,
+    position: rawTask.position,
+  }
+}
diff --git a/apps/teach-frontend/src/store/tasksSelector.ts b/apps/teach-frontend/src/store/tasksSelector.ts
new file mode 100644
index 0000000..27ac737
--- /dev/null
+++ b/apps/teach-frontend/src/store/tasksSelector.ts
@@ -0,0 +1,37 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { ListProject, SmartProject } from '@/store'
+import { loadListProjectTasks, loadSmartProjectTasks, useTasksStore } from '@/store'
+
+export type TasksSelector = ListProject | SmartProject
+export enum TasksSelectorType {
+  listProject = 'listProject',
+  smartProject = 'smartProject',
+}
+
+export const useTasksSelectorStore = defineStore('tasksSelectorStore', () => {
+  const tasksStore = useTasksStore()
+
+  const currentSelector = ref<TasksSelector>()
+
+  async function updateTasks() {
+    if (!currentSelector.value)
+      return
+
+    if (currentSelector.value.type === TasksSelectorType.listProject)
+      tasksStore.updateTasks(await loadListProjectTasks(currentSelector.value.id))
+
+    else if (currentSelector.value.type === TasksSelectorType.smartProject)
+      tasksStore.updateTasks(await loadSmartProjectTasks(currentSelector.value.name))
+  }
+
+  async function setCurrentSelector(selector: TasksSelector) {
+    currentSelector.value = selector
+    await updateTasks()
+  }
+
+  return {
+    currentSelector,
+    setCurrentSelector,
+  }
+})
diff --git a/apps/teach-frontend/src/store/useSettingsStore.ts b/apps/teach-frontend/src/store/useSettingsStore.ts
new file mode 100644
index 0000000..da12c2d
--- /dev/null
+++ b/apps/teach-frontend/src/store/useSettingsStore.ts
@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+import { computed, reactive } from 'vue'
+import * as settingsService from '@/composables/settings'
+
+export const useSettingsStore = defineStore('settingsStore', () => {
+  const settingsSmartProjects = reactive(settingsService.smartProjects)
+
+  const visibleSmartProjects = computed(() => {
+    return settingsSmartProjects.filter((smartProject) => {
+      return smartProject.option === settingsService.SmartProjectOptionValue.Visible
+    })
+  })
+
+  return {
+    settingsSmartProjects,
+    visibleSmartProjects,
+
+    setHideSmartProject: settingsService.setHideSmartProject,
+  }
+})
diff --git a/apps/teach-frontend/src/store/useTaskLeftMenuStatus.ts b/apps/teach-frontend/src/store/useTaskLeftMenuStatus.ts
new file mode 100644
index 0000000..24136cd
--- /dev/null
+++ b/apps/teach-frontend/src/store/useTaskLeftMenuStatus.ts
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useTaskLeftMenuStatusStore = defineStore(
+  'TaskLeftMenuStatus',
+  () => {
+    const visible = ref<Boolean>(true)
+
+    function toggle() {
+      visible.value = !visible.value
+    }
+
+    return { visible, toggle }
+  },
+)
diff --git a/apps/teach-frontend/src/store/useTheme.ts b/apps/teach-frontend/src/store/useTheme.ts
new file mode 100644
index 0000000..30cc766
--- /dev/null
+++ b/apps/teach-frontend/src/store/useTheme.ts
@@ -0,0 +1,51 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import { useDark, useLocalStorage, useToggle } from '@vueuse/core'
+import { darkTheme } from 'naive-ui'
+import { Theme, Themes } from '@/composables/settings'
+
+export const useThemeStore = defineStore(
+  'themeStore',
+  () => {
+    const isDark = useDark()
+    const toggleDark = useToggle(isDark)
+    const naiveTheme = computed(() => (isDark.value ? darkTheme : null))
+
+    const currentThemeName = isDark.value ? Theme.Dark : Theme.Light
+    const currentTheme = ref(Themes.find(item => item.name === currentThemeName))
+
+    /* pixel value */
+    const sideBarWidth = 48
+    const taskLeftListViewPadding = 10
+
+    function changeTheme(theme: Theme) {
+      const themeItem = Themes.find(item => item.name === theme)
+      if (themeItem) {
+        themeItem.handler()
+        currentTheme.value = themeItem
+      }
+    }
+
+    useLocalStorage('isDark', isDark)
+
+    return {
+      currentTheme,
+      changeTheme,
+      isDark,
+      toggleDark,
+      naiveTheme,
+      sideBarWidth,
+      taskLeftListViewPadding,
+    }
+  },
+)
+
+let globalThemeStore: ReturnType<typeof useThemeStore>
+
+// To avoid using store before initializing Pinia.
+export const getGlobalThemeStore = () => {
+  if (!globalThemeStore)
+    globalThemeStore = useThemeStore()
+
+  return globalThemeStore
+}
diff --git a/apps/teach-frontend/src/style/overrides.css b/apps/teach-frontend/src/style/overrides.css
new file mode 100644
index 0000000..f093c00
--- /dev/null
+++ b/apps/teach-frontend/src/style/overrides.css
@@ -0,0 +1,7 @@
+/*  overrides NaiveUI Theme (These cannot use API to change) */
+
+/* https://github.com/tusen-ai/naive-ui/issues/2846 */
+.n-modal-mask {
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
diff --git a/apps/teach-frontend/src/tests/fixture/index.ts b/apps/teach-frontend/src/tests/fixture/index.ts
new file mode 100644
index 0000000..3c58bd3
--- /dev/null
+++ b/apps/teach-frontend/src/tests/fixture/index.ts
@@ -0,0 +1,2 @@
+export * from './tasks'
+export * from './listProject'
diff --git a/apps/teach-frontend/src/tests/fixture/listProject.ts b/apps/teach-frontend/src/tests/fixture/listProject.ts
new file mode 100644
index 0000000..31d82a2
--- /dev/null
+++ b/apps/teach-frontend/src/tests/fixture/listProject.ts
@@ -0,0 +1,8 @@
+import type { ListProject } from '@/store'
+import { TasksSelectorType } from '@/store'
+
+export const liveListProject: ListProject = {
+  id: '1',
+  name: '生活',
+  type: TasksSelectorType.listProject,
+}
diff --git a/apps/teach-frontend/src/tests/fixture/tasks.ts b/apps/teach-frontend/src/tests/fixture/tasks.ts
new file mode 100644
index 0000000..d8ad45e
--- /dev/null
+++ b/apps/teach-frontend/src/tests/fixture/tasks.ts
@@ -0,0 +1,20 @@
+import { TaskStatus } from '@/store'
+
+export const tasks = [
+  {
+    id: '0',
+    title: '吃饭',
+    content: '今天吃什么',
+    status: TaskStatus.ACTIVE,
+    projectId: '1',
+    position: 1,
+  },
+  {
+    id: '1',
+    title: '写代码',
+    content: '今天写代码了嘛',
+    status: TaskStatus.COMPLETED,
+    projectId: '1',
+    position: 2,
+  },
+]
diff --git a/apps/teach-frontend/src/tests/helper/component.ts b/apps/teach-frontend/src/tests/helper/component.ts
new file mode 100644
index 0000000..8017f9c
--- /dev/null
+++ b/apps/teach-frontend/src/tests/helper/component.ts
@@ -0,0 +1,14 @@
+import { mount } from '@vue/test-utils'
+export function useSetup(setup: () => void) {
+  const Comp = {
+    render() {},
+    setup,
+  }
+
+  const wrapper = mount(Comp)
+
+  return {
+    wrapper,
+    router: wrapper.router,
+  }
+}
diff --git a/apps/teach-frontend/src/tests/helper/fireEvent.ts b/apps/teach-frontend/src/tests/helper/fireEvent.ts
new file mode 100644
index 0000000..3eaea44
--- /dev/null
+++ b/apps/teach-frontend/src/tests/helper/fireEvent.ts
@@ -0,0 +1,5 @@
+export const fireEvent = {
+  keyDown(eventInitDict?: KeyboardEventInit | undefined) {
+    window.dispatchEvent(new KeyboardEvent('keydown', eventInitDict))
+  },
+}
diff --git a/apps/teach-frontend/src/tests/helper/index.ts b/apps/teach-frontend/src/tests/helper/index.ts
new file mode 100644
index 0000000..d715aba
--- /dev/null
+++ b/apps/teach-frontend/src/tests/helper/index.ts
@@ -0,0 +1,2 @@
+export * from './component'
+export * from './fireEvent'
diff --git a/apps/teach-frontend/src/utils/index.ts b/apps/teach-frontend/src/utils/index.ts
new file mode 100644
index 0000000..1ead32e
--- /dev/null
+++ b/apps/teach-frontend/src/utils/index.ts
@@ -0,0 +1,7 @@
+export function delay(ms = 1000) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('')
+    }, ms)
+  })
+}
diff --git a/apps/teach-frontend/src/vite-env.d.ts b/apps/teach-frontend/src/vite-env.d.ts
new file mode 100644
index 0000000..ab519a4
--- /dev/null
+++ b/apps/teach-frontend/src/vite-env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+declare module 'vue3-emoji-picker'
diff --git a/apps/teach-frontend/tsconfig.json b/apps/teach-frontend/tsconfig.json
new file mode 100644
index 0000000..a427e7b
--- /dev/null
+++ b/apps/teach-frontend/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "services/*": [
+        "src/services/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "cypress/**/*.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
diff --git a/apps/teach-frontend/tsconfig.node.json b/apps/teach-frontend/tsconfig.node.json
new file mode 100644
index 0000000..9d31e2a
--- /dev/null
+++ b/apps/teach-frontend/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/apps/teach-frontend/unocss.config.ts b/apps/teach-frontend/unocss.config.ts
new file mode 100644
index 0000000..56890f0
--- /dev/null
+++ b/apps/teach-frontend/unocss.config.ts
@@ -0,0 +1,31 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+export default defineConfig({
+  shortcuts: [
+    ['btn', ''],
+    ['item-hover', ''],
+    ['li_common', 'cursor-pointer flex justify-between items-center h-7'],
+    ['base-color', 'bg-gray-100 dark:bg-#18181c dark:text-white text-black'],
+  ],
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons({
+      scale: 1.2,
+      warn: true,
+    }),
+    presetTypography(),
+  ],
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+})
diff --git a/apps/teach-frontend/vite.config.ts b/apps/teach-frontend/vite.config.ts
new file mode 100644
index 0000000..40a0461
--- /dev/null
+++ b/apps/teach-frontend/vite.config.ts
@@ -0,0 +1,28 @@
+import path from 'node:path'
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import Unocss from 'unocss/vite'
+
+export default defineConfig({
+  test: {
+    environment: 'happy-dom',
+    setupFiles: './vitest.setup.ts',
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+        rewrite: path => path.replace(/^\/api/, ''),
+      },
+    },
+  },
+  plugins: [vueJsx(), vue(), Unocss()],
+  resolve: {
+    alias: {
+      '@/': `${path.resolve(__dirname, 'src')}/`,
+      'services/': `${path.resolve(__dirname, 'src/services')}/`,
+    },
+  },
+})
diff --git a/apps/teach-frontend/vitest.setup.ts b/apps/teach-frontend/vitest.setup.ts
new file mode 100644
index 0000000..ac220b4
--- /dev/null
+++ b/apps/teach-frontend/vitest.setup.ts
@@ -0,0 +1,25 @@
+import {
+  VueRouterMock,
+  createRouterMock,
+  injectRouterMock,
+} from 'vue-router-mock'
+import { beforeEach, vi } from 'vitest'
+import { config } from '@vue/test-utils'
+
+function setupRouterMock() {
+  const router = createRouterMock({
+    spy: {
+      create: fn => vi.fn(fn),
+      reset: spy => spy.mockClear(),
+    },
+  })
+
+  beforeEach(() => {
+    router.reset()
+    injectRouterMock(router)
+  })
+
+  config.plugins.VueWrapper.install(VueRouterMock)
+}
+
+setupRouterMock()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5b5b5fe..f0c91bc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,10 +87,12 @@ importers:
       '@iconify-json/mdi': ^1.1.41
       '@iconify/vue': ^4.0.2
       '@imengyu/vue3-context-menu': ^1.1.10
+      '@pinia/testing': ^0.1.2
       '@types/lodash-es': ^4.17.6
       '@unocss/reset': ^0.48.3
       '@vitejs/plugin-vue': ^4.0.0
       '@vitejs/plugin-vue-jsx': ^3.0.0
+      '@vitest/coverage-c8': ^0.28.4
       '@vue/test-utils': ^2.2.10
       '@vueuse/core': ^9.10.0
       axios: ^1.4.0
@@ -130,10 +132,12 @@ importers:
       '@iconify-json/carbon': 1.1.14
       '@iconify-json/mdi': 1.1.46
       '@iconify/vue': 4.1.0_vue@3.2.47
+      '@pinia/testing': 0.1.2_pinia@2.0.30+vue@3.2.47
       '@types/lodash-es': 4.17.6
       '@unocss/reset': 0.48.5
       '@vitejs/plugin-vue': 4.0.0_vite@4.1.1+vue@3.2.47
       '@vitejs/plugin-vue-jsx': 3.0.0_vite@4.1.1+vue@3.2.47
+      '@vitest/coverage-c8': 0.28.4_happy-dom@8.1.3
       '@vue/test-utils': 2.2.10_vue@3.2.47
       '@vueuse/core': 9.12.0_vue@3.2.47
       cross-env: 7.0.3
@@ -146,6 +150,79 @@ importers:
       vue-router-mock: 0.2.0_lavcef455lp3wtm2mcdrwhgymm
       vue-tsc: 1.0.24_typescript@4.9.5
 
+  apps/teach-frontend:
+    specifiers:
+      '@iconify-json/carbon': ^1.1.13
+      '@iconify-json/mdi': ^1.1.41
+      '@iconify/vue': ^4.0.2
+      '@imengyu/vue3-context-menu': ^1.1.10
+      '@pinia/testing': ^0.1.2
+      '@types/lodash-es': ^4.17.6
+      '@unocss/reset': ^0.48.3
+      '@vitejs/plugin-vue': ^4.0.0
+      '@vitejs/plugin-vue-jsx': ^3.0.0
+      '@vue/test-utils': ^2.2.10
+      '@vueuse/core': ^9.10.0
+      axios: ^1.4.0
+      cross-env: ^7.0.3
+      dexie: ^3.2.2
+      flush-promises: ^1.0.2
+      fs-extra: ^11.1.0
+      fuse.js: ^6.6.2
+      glob: ^8.1.0
+      happy-dom: ^8.1.3
+      ink-mde: ^0.18.1
+      lodash-es: ^4.17.21
+      minimatch: ^6.1.6
+      naive-ui: ^2.34.3
+      pinia: ^2.0.28
+      typescript: ^4.9.5
+      unocss: ^0.48.3
+      vite: ^4.0.4
+      vitest: ^0.27.0
+      vue: ^3.2.45
+      vue-router: 4.1.6
+      vue-router-mock: ^0.2.0
+      vue-tsc: ^1.0.24
+      vue3-emoji-picker: ^1.1.7
+      vuedraggable: ^4.1.0
+    dependencies:
+      '@imengyu/vue3-context-menu': 1.2.2
+      axios: 1.4.0
+      dexie: 3.2.2
+      fuse.js: 6.6.2
+      ink-mde: 0.18.1_vue@3.2.47
+      lodash-es: 4.17.21
+      naive-ui: 2.34.3_vue@3.2.47
+      pinia: 2.0.30_hmuptsblhheur2tugfgucj7gc4
+      vue: 3.2.47
+      vue-router: 4.1.6_vue@3.2.47
+      vue3-emoji-picker: 1.1.7
+      vuedraggable: 4.1.0_vue@3.2.47
+    devDependencies:
+      '@iconify-json/carbon': 1.1.14
+      '@iconify-json/mdi': 1.1.46
+      '@iconify/vue': 4.1.0_vue@3.2.47
+      '@pinia/testing': 0.1.2_pinia@2.0.30+vue@3.2.47
+      '@types/lodash-es': 4.17.6
+      '@unocss/reset': 0.48.5
+      '@vitejs/plugin-vue': 4.0.0_vite@4.1.1+vue@3.2.47
+      '@vitejs/plugin-vue-jsx': 3.0.0_vite@4.1.1+vue@3.2.47
+      '@vue/test-utils': 2.2.10_vue@3.2.47
+      '@vueuse/core': 9.12.0_vue@3.2.47
+      cross-env: 7.0.3
+      flush-promises: 1.0.2
+      fs-extra: 11.1.0
+      glob: 8.1.0
+      happy-dom: 8.1.3
+      minimatch: 6.1.6
+      typescript: 4.9.5
+      unocss: 0.48.5_vite@4.1.1
+      vite: 4.1.1
+      vitest: 0.27.3_happy-dom@8.1.3
+      vue-router-mock: 0.2.0_lavcef455lp3wtm2mcdrwhgymm
+      vue-tsc: 1.0.24_typescript@4.9.5
+
 packages:
 
   /@ampproject/remapping/2.2.0:
@@ -1837,6 +1914,18 @@ packages:
     transitivePeerDependencies:
       - encoding
 
+  /@pinia/testing/0.1.2_pinia@2.0.30+vue@3.2.47:
+    resolution: {integrity: sha512-8EyBaVFtv682tBiF810u81vAJ1ykwnaldkVDU52oqtVbh5FUj5dSCSM9+MtRM/tZkq0AulwMK4BnBktqwsnEnw==}
+    peerDependencies:
+      pinia: '>=2.1.2'
+    dependencies:
+      pinia: 2.0.30_hmuptsblhheur2tugfgucj7gc4
+      vue-demi: 0.14.5_vue@3.2.47
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
   /@polka/url/1.0.0-next.21:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
@@ -2515,6 +2604,27 @@ packages:
       - terser
     dev: true
 
+  /@vitest/coverage-c8/0.28.4_happy-dom@8.1.3:
+    resolution: {integrity: sha512-btelLBxaWhHnywXRQxDlrvPhGdnuIaD3XulsxcZRIcnpLPbFu39dNTT0IYu2QWP2ZZrV0AmNtdLIfD4c77zMAg==}
+    dependencies:
+      c8: 7.12.0
+      picocolors: 1.0.0
+      std-env: 3.3.2
+      vitest: 0.28.4_happy-dom@8.1.3
+    transitivePeerDependencies:
+      - '@edge-runtime/vm'
+      - '@vitest/browser'
+      - '@vitest/ui'
+      - happy-dom
+      - jsdom
+      - less
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
   /@vitest/expect/0.28.4:
     resolution: {integrity: sha512-JqK0NZ4brjvOSL8hXAnIsfi+jxDF7rH/ZWCGCt0FAqRnVFc1hXsfwXksQvEnKqD84avRt3gmeXoK4tNbmkoVsQ==}
     dependencies:
@@ -2713,7 +2823,7 @@ packages:
   /@vueuse/shared/9.12.0_vue@3.2.47:
     resolution: {integrity: sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==}
     dependencies:
-      vue-demi: 0.13.11_vue@3.2.47
+      vue-demi: 0.14.5_vue@3.2.47
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -6879,7 +6989,6 @@ packages:
       typescript: 4.9.5
       vue: 3.2.47
       vue-demi: 0.13.11_vue@3.2.47
-    dev: false
 
   /pkg-types/1.0.1:
     resolution: {integrity: sha512-jHv9HB+Ho7dj6ItwppRDDl0iZRYBD0jsakHXtFgoLr+cHSF6xC+QL54sJmWxyGxOLYSHm0afhXhXcQDQqH9z8g==}
@@ -8570,6 +8679,62 @@ packages:
       - terser
     dev: true
 
+  /vitest/0.28.4_happy-dom@8.1.3:
+    resolution: {integrity: sha512-sfWIy0AdlbyGRhunm+TLQEJrFH9XuRPdApfubsyLcDbCRrUX717BRQKInTgzEfyl2Ipi1HWoHB84Nqtcwxogcg==}
+    engines: {node: '>=v14.16.0'}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@vitest/browser': '*'
+      '@vitest/ui': '*'
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+    dependencies:
+      '@types/chai': 4.3.4
+      '@types/chai-subset': 1.3.3
+      '@types/node': 18.13.0
+      '@vitest/expect': 0.28.4
+      '@vitest/runner': 0.28.4
+      '@vitest/spy': 0.28.4
+      '@vitest/utils': 0.28.4
+      acorn: 8.8.2
+      acorn-walk: 8.2.0
+      cac: 6.7.14
+      chai: 4.3.7
+      debug: 4.3.4
+      happy-dom: 8.1.3
+      local-pkg: 0.4.3
+      pathe: 1.1.0
+      picocolors: 1.0.0
+      source-map: 0.6.1
+      std-env: 3.3.2
+      strip-literal: 1.0.1
+      tinybench: 2.3.1
+      tinypool: 0.3.1
+      tinyspy: 1.1.1
+      vite: 4.1.1_@types+node@18.13.0
+      vite-node: 0.28.4_@types+node@18.13.0
+      why-is-node-running: 2.2.2
+    transitivePeerDependencies:
+      - less
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
   /vooks/0.2.12_vue@3.2.47:
     resolution: {integrity: sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==}
     peerDependencies:
@@ -8593,6 +8758,21 @@ packages:
     dependencies:
       vue: 3.2.47
 
+  /vue-demi/0.14.5_vue@3.2.47:
+    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.2.47
+    dev: true
+
   /vue-eslint-parser/9.1.0_eslint@8.33.0:
     resolution: {integrity: sha512-NGn/iQy8/Wb7RrRa4aRkokyCZfOUWk19OP5HP6JEozQFX5AoS/t+Z0ZN7FY4LlmWc4FNI922V7cvX28zctN8dQ==}
     engines: {node: ^14.17.0 || >=16.0.0}