diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
new file mode 100644
index 0000000..b08dacb
--- /dev/null
+++ b/.eslintrc-auto-import.json
@@ -0,0 +1,69 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}
diff --git a/src/App.vue b/src/App.vue
index 6ceb9da..c7794bf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,7 @@
 <template>
-  <v-app>
-    <v-main>
-      <router-view />
-    </v-main>
-  </v-app>
+  <Default />
 </template>
 
 <script lang="ts" setup>
-  //
+import Default from './layouts/default/Default.vue';
 </script>
diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 7c9f508..d32df24 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -55,8 +55,8 @@ declare global {
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
   const useLink: typeof import('vue-router')['useLink']
-  const useRoute: typeof import('vue-router')['useRoute']
-  const useRouter: typeof import('vue-router')['useRouter']
+  const useRoute: typeof import('vue-router/auto')['useRoute']
+  const useRouter: typeof import('vue-router/auto')['useRouter']
   const useSlots: typeof import('vue')['useSlots']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
@@ -93,8 +93,6 @@ declare module 'vue' {
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
     readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
-    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
-    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
     readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
@@ -123,9 +121,8 @@ declare module 'vue' {
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
-    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
-    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
-    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router/auto')['useRoute']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router/auto')['useRouter']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly watch: UnwrapRef<typeof import('vue')['watch']>
     readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
@@ -155,8 +152,6 @@ declare module '@vue/runtime-core' {
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
     readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
-    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
-    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
     readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
@@ -185,9 +180,8 @@ declare module '@vue/runtime-core' {
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
-    readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
-    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
-    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router/auto')['useRoute']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router/auto')['useRouter']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly watch: UnwrapRef<typeof import('vue')['watch']>
     readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
diff --git a/src/components.d.ts b/src/components.d.ts
index f8bd205..903f770 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,7 +7,8 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    AppFooter: typeof import('./components/AppFooter.vue')['default']
+    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 4ff10db..98ce2c4 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,157 +1,5 @@
 <template>
-  <v-container class="fill-height">
-    <v-responsive
-      class="align-centerfill-height mx-auto"
-      max-width="900"
-    >
-      <v-img
-        class="mb-4"
-        height="150"
-        src="@/assets/logo.png"
-      />
+  <h1>欢迎使用 资料库。</h1>
 
-      <div class="text-center">
-        <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-
-        <h1 class="text-h2 font-weight-bold">Vuetify</h1>
-      </div>
-
-      <div class="py-4" />
-
-      <v-row>
-        <v-col cols="12">
-          <v-card
-            class="py-4"
-            color="surface-variant"
-            image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
-            prepend-icon="mdi-rocket-launch-outline"
-            rounded="lg"
-            variant="outlined"
-          >
-            <template #image>
-              <v-img position="top right" />
-            </template>
-
-            <template #title>
-              <h2 class="text-h5 font-weight-bold">Get started</h2>
-            </template>
-
-            <template #subtitle>
-              <div class="text-subtitle-1">
-                Replace this page by removing <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>pages/index.vue</v-kbd>.
-              </div>
-            </template>
-
-            <v-overlay
-              opacity=".12"
-              scrim="primary"
-              contained
-              model-value
-              persistent
-            />
-          </v-card>
-        </v-col>
-
-        <v-col cols="6">
-          <v-card
-            append-icon="mdi-open-in-new"
-            class="py-4"
-            color="surface-variant"
-            href="https://vuetifyjs.com/"
-            prepend-icon="mdi-text-box-outline"
-            rel="noopener noreferrer"
-            rounded="lg"
-            subtitle="Learn about all things Vuetify in our documentation."
-            target="_blank"
-            title="Documentation"
-            variant="text"
-          >
-            <v-overlay
-              opacity=".06"
-              scrim="primary"
-              contained
-              model-value
-              persistent
-            />
-          </v-card>
-        </v-col>
-
-        <v-col cols="6">
-          <v-card
-            append-icon="mdi-open-in-new"
-            class="py-4"
-            color="surface-variant"
-            href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
-            prepend-icon="mdi-star-circle-outline"
-            rel="noopener noreferrer"
-            rounded="lg"
-            subtitle="Explore available framework Features."
-            target="_blank"
-            title="Features"
-            variant="text"
-          >
-            <v-overlay
-              opacity=".06"
-              scrim="primary"
-              contained
-              model-value
-              persistent
-            />
-          </v-card>
-        </v-col>
-
-        <v-col cols="6">
-          <v-card
-            append-icon="mdi-open-in-new"
-            class="py-4"
-            color="surface-variant"
-            href="https://vuetifyjs.com/components/all"
-            prepend-icon="mdi-widgets-outline"
-            rel="noopener noreferrer"
-            rounded="lg"
-            subtitle="Discover components in the API Explorer."
-            target="_blank"
-            title="Components"
-            variant="text"
-          >
-            <v-overlay
-              opacity=".06"
-              scrim="primary"
-              contained
-              model-value
-              persistent
-            />
-          </v-card>
-        </v-col>
-
-        <v-col cols="6">
-          <v-card
-            append-icon="mdi-open-in-new"
-            class="py-4"
-            color="surface-variant"
-            href="https://discord.vuetifyjs.com"
-            prepend-icon="mdi-account-group-outline"
-            rel="noopener noreferrer"
-            rounded="lg"
-            subtitle="Connect with Vuetify developers."
-            target="_blank"
-            title="Community"
-            variant="text"
-          >
-            <v-overlay
-              opacity=".06"
-              scrim="primary"
-              contained
-              model-value
-              persistent
-            />
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-responsive>
-  </v-container>
+  <p>目前还在开发中。</p>
 </template>
-
-<script setup lang="ts">
-  //
-</script>
diff --git a/src/layouts/README.md b/src/layouts/README.md
deleted file mode 100644
index 4016af3..0000000
--- a/src/layouts/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Layouts
-
-Layouts are reusable components that wrap around pages. They are used to provide a consistent look and feel across multiple pages.
-
-Full documentation for this feature can be found in the Official [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) repository.
diff --git a/src/layouts/default/AppBar.vue b/src/layouts/default/AppBar.vue
new file mode 100644
index 0000000..2b30ddf
--- /dev/null
+++ b/src/layouts/default/AppBar.vue
@@ -0,0 +1,55 @@
+<template>
+  <!-- <v-app id="nav"> -->
+  <v-navigation-drawer v-model="drawer">
+    <div class="pa-2">
+      <v-btn
+        density="default"
+        icon="mdi-close"
+        @click="drawer = !drawer"
+      ></v-btn>
+    </div>
+
+    <!-- <v-divider></v-divider> -->
+
+    <v-list density="compact" nav>
+      <template v-for="item in items">
+        <v-list-item
+          rounded="lg"
+          :prepend-icon="item.icon"
+          :title="item.text"
+          :value="item.text"
+          :to="item.to"
+        ></v-list-item>
+      </template>
+
+      <!-- <v-list-item
+        prepend-icon="mdi-forum"
+        title="About"
+        value="about"
+      ></v-list-item> -->
+    </v-list>
+  </v-navigation-drawer>
+
+  <v-app-bar>
+    <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+
+    <v-app-bar-title>{{ configStore.appName }}</v-app-bar-title>
+  </v-app-bar>
+  <!-- </v-app> -->
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useConfigStore } from "@/stores/config";
+
+const configStore = useConfigStore();
+
+const drawer = ref(false);
+
+const items = [
+  { icon: "mdi-home", text: "首页", to: { name: "home" } },
+  // { icon: "mdi-content-copy", text: "资料库", to: { name: "libraries" } },
+  // // { icon: "mdi-history", text: "Frequently contacted", to: "/documents" },
+  // { icon: "mdi-account", text: "登录", to: { name: "login" } },
+];
+</script>
diff --git a/src/layouts/default/Default.vue b/src/layouts/default/Default.vue
new file mode 100644
index 0000000..14283c6
--- /dev/null
+++ b/src/layouts/default/Default.vue
@@ -0,0 +1,28 @@
+<template>
+  <v-app id="d">
+    <default-bar />
+
+    <default-view />
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+import DefaultBar from "./AppBar.vue";
+import DefaultView from "./View.vue";
+
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
+
+// 创建一个函数来更新主题
+function updateTheme() {
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+  theme.global.name.value = prefersDark ? "dark" : "light";
+}
+
+updateTheme();
+window
+  .matchMedia("(prefers-color-scheme: dark)")
+  .addEventListener("change", updateTheme);
+</script>
diff --git a/src/layouts/default.vue b/src/layouts/default/View.vue
similarity index 52%
rename from src/layouts/default.vue
rename to src/layouts/default/View.vue
index da5c129..9097424 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default/View.vue
@@ -1,13 +1,11 @@
 <template>
-  <v-app>
-    <v-main>
+  <v-main>
+    <v-container>
       <router-view />
-    </v-main>
-
-    <AppFooter />
-  </v-app>
+    </v-container>
+  </v-main>
 </template>
 
 <script lang="ts" setup>
-  //
+//
 </script>
diff --git a/src/plugins/api.ts b/src/plugins/api.ts
new file mode 100644
index 0000000..8f3e9c0
--- /dev/null
+++ b/src/plugins/api.ts
@@ -0,0 +1,22 @@
+import { Configuration } from "../api";
+
+// import axios from "axios";
+// import router from "@/router";
+// import {useUserStore} from "@/store/user";
+// import { useConfigStore } from "@/store/config";
+//
+//
+// const userStore = useUserStore()
+// const configStore = useConfigStore()
+//
+// const conf = new Configuration
+// conf.basePath = configStore.apiServer
+//
+// conf.apiKey = "Bearer " + userStore.jwt_token
+// const document = new DocumentsApi(conf);
+// const library = new  LibrariesApi(conf);
+//
+//
+// export {
+//   document, library, conf
+// }
diff --git a/src/plugins/getTheme.ts b/src/plugins/getTheme.ts
new file mode 100644
index 0000000..9e91590
--- /dev/null
+++ b/src/plugins/getTheme.ts
@@ -0,0 +1,8 @@
+let matchResult = window.matchMedia('(prefers-color-scheme: dark)');
+
+
+function getTheme() {
+  return matchResult.matches ? 'dark' : 'light'
+}
+
+export default getTheme()
diff --git a/src/router/index.ts b/src/router/index.ts
index ff67382..2122680 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,16 +1,57 @@
-/**
- * router/index.ts
- *
- * Automatic routes for `./src/pages/*.vue`
- */
-
 // Composables
-import { createRouter, createWebHistory } from 'vue-router/auto'
-import { setupLayouts } from 'virtual:generated-layouts'
+import { createRouter, createWebHistory } from "vue-router";
+// import { useUserStore } from "@/stores/user";
+// import { useConfigStore } from "@/stores/config";
+
+const routes = [
+  {
+    path: "/",
+    name: "home",
+    meta: {
+      auth: true,
+    },
+    // route level code-splitting
+    // this generates a separate chunk (Home-[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import("@/views/Home.vue"),
+  },
+
+];
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  extendRoutes: setupLayouts,
-})
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
 
-export default router
+// router.beforeEach((to, from) => {
+//
+//   // get route name
+//   console.log(from.name, from.fullPath)
+//
+//   const userStore = useUserStore();
+//   const configStore = useConfigStore();
+//
+//   // if (to.matched.length === 0) {
+//   //   return router.push({ name: "errors.404" });
+//   // }
+//
+//   if (to.meta.title) {
+//     document.title = to.meta.title + " - " + configStore.getAppName();
+//   } else {
+//     document.title = configStore.getAppName();
+//   }
+//
+//   if (to.meta.auth == true) {
+//     // validate login state
+//     if (userStore.jwt_token == null) {
+//       router.push({ name: "login" });
+//     }
+//   } else {
+//     document.title = configStore.getAppName();
+//   }
+//
+//   return true;
+//
+// });
+
+export default router;
diff --git a/src/stores/config.ts b/src/stores/config.ts
new file mode 100644
index 0000000..bf7bb56
--- /dev/null
+++ b/src/stores/config.ts
@@ -0,0 +1,27 @@
+import {defineStore} from 'pinia'
+// import axios from "axios";
+
+export const useConfigStore = defineStore('app', {
+    state: () => ({
+        appName: "资料库",
+        description: "Leaf Library",
+        accountServer: "https://oauth.leaflow.cn",
+        apiServer: "https://document-api.leaflow.cn/api",
+        // apiServer: "http://localhost:8080/api",
+    }),
+    actions: {
+        getAppName(): string {
+            return this.appName !== null ? this.appName : "Leaf Library"
+        },
+        getRefreshUrl(): string {
+            return this.accountServer + "/public/auth_request/refresh"
+        },
+        getLoginUrl(): string {
+            let url = new URL(this.accountServer + "/public/auth_request")
+            url.searchParams.append("description", this.description)
+            // url.searchParams.append("callback_uri", window.location.href)
+            url.searchParams.append("attributes[app]", "todo")
+            return url.toString()
+        }
+    },
+})
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..8941a75
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <HelloWorld />
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import HelloWorld from '@/components/HelloWorld.vue'
+</script>
diff --git a/tsconfig.json b/tsconfig.json
index 3573ef8..b710795 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,32 +1,32 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "jsx": "preserve",
-    "lib": ["DOM", "ESNext"],
     "baseUrl": ".",
-    "module": "ESNext",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "allowSyntheticDefaultImports": true,
+    "composite": true,
+    "module": "esnext",
     "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": false,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": [
+      "node",
+      "vuetify"
+    ],
     "paths": {
       "@/*": ["src/*"]
     },
-    "resolveJsonModule": true,
-    "types": [
-      "vite/client",
-      "vite-plugin-vue-layouts/client",
-      "unplugin-vue-router/client"
-    ],
-    "allowJs": true,
-    "strict": true,
-    "strictNullChecks": true,
-    "noUnusedLocals": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "skipLibCheck": true
+    "allowJs": true
   },
   "include": [
-    "./src/typed-router.d.ts"
-  ],
-  "exclude": ["dist", "node_modules", "cypress"],
-  "references": [{ "path": "./tsconfig.node.json" }],
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "vite.config.ts"
+  ]
 }