diff --git a/src/components/EssentialLink.vue b/src/components/EssentialLink.vue
deleted file mode 100644
index 13205c2..0000000
--- a/src/components/EssentialLink.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <q-item
-    clickable
-    tag="a"
-    target="_blank"
-    :href="link"
-  >
-    <q-item-section
-      v-if="icon"
-      avatar
-    >
-      <q-icon :name="icon" />
-    </q-item-section>
-
-    <q-item-section>
-      <q-item-label>{{ title }}</q-item-label>
-      <q-item-label caption>{{ caption }}</q-item-label>
-    </q-item-section>
-  </q-item>
-</template>
-
-<script setup lang="ts">
-export interface EssentialLinkProps {
-  title: string;
-  caption?: string;
-  link?: string;
-  icon?: string;
-}
-withDefaults(defineProps<EssentialLinkProps>(), {
-  caption: '',
-  link: '#',
-  icon: '',
-});
-</script>
diff --git a/src/components/ExampleComponent.vue b/src/components/ExampleComponent.vue
deleted file mode 100644
index bc03c3d..0000000
--- a/src/components/ExampleComponent.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div>
-    <p>{{ title }}</p>
-    <ul>
-      <li v-for="todo in todos" :key="todo.id" @click="increment">
-        {{ todo.id }} - {{ todo.content }}
-      </li>
-    </ul>
-    <p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
-    <p>Active: {{ active ? 'yes' : 'no' }}</p>
-    <p>Clicks on todos: {{ clickCount }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import { Todo, Meta } from './models';
-
-interface Props {
-  title: string;
-  todos?: Todo[];
-  meta: Meta;
-  active: boolean;
-}
-const props = withDefaults(defineProps<Props>(), {
-  todos: () => [],
-});
-
-const clickCount = ref(0);
-function increment() {
-  clickCount.value += 1;
-  return clickCount.value;
-}
-
-const todoCount = computed(() => props.todos.length);
-
-</script>
diff --git a/src/components/SysMenu.vue b/src/components/SysMenu.vue
new file mode 100644
index 0000000..c47bed8
--- /dev/null
+++ b/src/components/SysMenu.vue
@@ -0,0 +1,70 @@
+<template>
+  <q-list bordered separator>
+    <div v-for="(menu, ii) in list" :key="ii">
+      <div v-if="menu.children">
+        <q-expansion-item :icon="menu.icon" :label="menu.label">
+          <q-card>
+            <q-list bordered separator>
+              <q-item
+                v-for="(item, index) in menu.children"
+                :key="index"
+                clickable
+                :to="item.path"
+                exact
+                :inset-level="1"
+              >
+                <q-item-section avatar>
+                  <q-icon :name="item.icon"></q-icon>
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label>{{ item.label }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </q-expansion-item>
+      </div>
+      <div v-else>
+        <q-item clickable :to="menu.path" exact>
+          <q-item-section avatar>
+            <q-icon :name="menu.icon"></q-icon>
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>{{ menu.label }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </div>
+    </div>
+  </q-list>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+
+const list = reactive([
+  {
+    path: '',
+    label: '系统管理',
+    icon: 'dataset',
+    children: [
+      {
+        path: '/sysManage/user',
+        label: '用户管理',
+        icon: 'manage_accounts',
+      },
+    ],
+  },
+  {
+    path: '',
+    label: '数据管理',
+    icon: 'list_alt',
+    children: [
+      {
+        path: '/dataManage/draft',
+        label: '草稿管理',
+        icon: 'app_registration',
+      },
+    ],
+  },
+]);
+</script>
diff --git a/src/components/models.ts b/src/components/models.ts
deleted file mode 100644
index 6945920..0000000
--- a/src/components/models.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface Todo {
-  id: number;
-  content: string;
-}
-
-export interface Meta {
-  totalCount: number;
-}
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index f62045c..de522e3 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-layout view="lHh Lpr lFf">
+  <q-layout view="hHh Lpr lFf">
     <q-header elevated>
       <q-toolbar>
         <q-btn
@@ -11,32 +11,25 @@
           @click="toggleLeftDrawer"
         />
 
-        <q-toolbar-title>
-          Quasar App
-        </q-toolbar-title>
+        <q-toolbar-title> 西安NCC调度辅助决策系统 </q-toolbar-title>
 
-        <div>Quasar v{{ $q.version }}</div>
+        <div class="q-gutter-sm row items-center no-wrap">
+          <q-btn
+            round
+            dense
+            flat
+            color="white"
+            :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
+            @click="$q.fullscreen.toggle()"
+            v-if="$q.screen.gt.sm"
+          >
+          </q-btn>
+        </div>
       </q-toolbar>
     </q-header>
 
-    <q-drawer
-      v-model="leftDrawerOpen"
-      show-if-above
-      bordered
-    >
-      <q-list>
-        <q-item-label
-          header
-        >
-          Essential Links
-        </q-item-label>
-
-        <EssentialLink
-          v-for="link in essentialLinks"
-          :key="link.title"
-          v-bind="link"
-        />
-      </q-list>
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
+      <sys-menu></sys-menu>
     </q-drawer>
 
     <q-page-container>
@@ -47,56 +40,11 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
+import SysMenu from 'src/components/SysMenu.vue';
 
-const essentialLinks: EssentialLinkProps[] = [
-  {
-    title: 'Docs',
-    caption: 'quasar.dev',
-    icon: 'school',
-    link: 'https://quasar.dev'
-  },
-  {
-    title: 'Github',
-    caption: 'github.com/quasarframework',
-    icon: 'code',
-    link: 'https://github.com/quasarframework'
-  },
-  {
-    title: 'Discord Chat Channel',
-    caption: 'chat.quasar.dev',
-    icon: 'chat',
-    link: 'https://chat.quasar.dev'
-  },
-  {
-    title: 'Forum',
-    caption: 'forum.quasar.dev',
-    icon: 'record_voice_over',
-    link: 'https://forum.quasar.dev'
-  },
-  {
-    title: 'Twitter',
-    caption: '@quasarframework',
-    icon: 'rss_feed',
-    link: 'https://twitter.quasar.dev'
-  },
-  {
-    title: 'Facebook',
-    caption: '@QuasarFramework',
-    icon: 'public',
-    link: 'https://facebook.quasar.dev'
-  },
-  {
-    title: 'Quasar Awesome',
-    caption: 'Community Quasar projects',
-    icon: 'favorite',
-    link: 'https://awesome.quasar.dev'
-  }
-];
-
-const leftDrawerOpen = ref(false)
+const leftDrawerOpen = ref(false);
 
 function toggleLeftDrawer() {
-  leftDrawerOpen.value = !leftDrawerOpen.value
+  leftDrawerOpen.value = !leftDrawerOpen.value;
 }
 </script>
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index 1df5ee2..d0684cb 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -1,42 +1,7 @@
 <template>
   <q-page class="row items-center justify-evenly">
-    <example-component
-      title="Example component"
-      active
-      :todos="todos"
-      :meta="meta"
-    ></example-component>
+    <div class="text-center">主界面</div>
   </q-page>
 </template>
 
-<script setup lang="ts">
-import { Todo, Meta } from 'components/models';
-import ExampleComponent from 'components/ExampleComponent.vue';
-import { ref } from 'vue';
-
-const todos = ref<Todo[]>([
-  {
-    id: 1,
-    content: 'ct1'
-  },
-  {
-    id: 2,
-    content: 'ct2'
-  },
-  {
-    id: 3,
-    content: 'ct3'
-  },
-  {
-    id: 4,
-    content: 'ct4'
-  },
-  {
-    id: 5,
-    content: 'ct5'
-  }
-]);
-const meta = ref<Meta>({
-  totalCount: 1200
-});
-</script>
+<script setup lang="ts"></script>