diff --git a/gpt-vue/projects/vue-admin/env.d.ts b/gpt-vue/projects/vue-admin/env.d.ts
index 11f02fe2..b77bd43e 100644
--- a/gpt-vue/projects/vue-admin/env.d.ts
+++ b/gpt-vue/projects/vue-admin/env.d.ts
@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare const __AUTH_KEY: string;
\ No newline at end of file
diff --git a/gpt-vue/projects/vue-admin/index.html b/gpt-vue/projects/vue-admin/index.html
index a8885448..99e15777 100644
--- a/gpt-vue/projects/vue-admin/index.html
+++ b/gpt-vue/projects/vue-admin/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>ChatPlus-Ai</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/gpt-vue/projects/vue-admin/public/favicon.ico b/gpt-vue/projects/vue-admin/public/favicon.ico
index df36fcfb..32b5cf3e 100644
Binary files a/gpt-vue/projects/vue-admin/public/favicon.ico and b/gpt-vue/projects/vue-admin/public/favicon.ico differ
diff --git a/gpt-vue/projects/vue-admin/public/images/alipay.jpg b/gpt-vue/projects/vue-admin/public/images/alipay.jpg
new file mode 100644
index 00000000..af7b4068
Binary files /dev/null and b/gpt-vue/projects/vue-admin/public/images/alipay.jpg differ
diff --git a/gpt-vue/projects/vue-admin/public/images/chat.png b/gpt-vue/projects/vue-admin/public/images/chat.png
new file mode 100644
index 00000000..bb484b5a
Binary files /dev/null and b/gpt-vue/projects/vue-admin/public/images/chat.png differ
diff --git a/gpt-vue/projects/vue-admin/public/images/logo.png b/gpt-vue/projects/vue-admin/public/images/logo.png
new file mode 100644
index 00000000..43e5d544
Binary files /dev/null and b/gpt-vue/projects/vue-admin/public/images/logo.png differ
diff --git a/gpt-vue/projects/vue-admin/public/images/mic.gif b/gpt-vue/projects/vue-admin/public/images/mic.gif
new file mode 100644
index 00000000..d6e544dc
Binary files /dev/null and b/gpt-vue/projects/vue-admin/public/images/mic.gif differ
diff --git a/gpt-vue/projects/vue-admin/public/images/mj.png b/gpt-vue/projects/vue-admin/public/images/mj.png
new file mode 100644
index 00000000..60f08535
Binary files /dev/null and b/gpt-vue/projects/vue-admin/public/images/mj.png differ
diff --git a/gpt-vue/projects/vue-admin/public/images/reward.png b/gpt-vue/projects/vue-admin/public/images/reward.png
new file mode 100644
index 00000000..2af4376f
Binary files /dev/null and b/gpt-vue/projects/vue-admin/public/images/reward.png differ
diff --git a/gpt-vue/projects/vue-admin/public/images/sd.png b/gpt-vue/projects/vue-admin/public/images/sd.png
new file mode 100644
index 00000000..5b0d3815
Binary files /dev/null and b/gpt-vue/projects/vue-admin/public/images/sd.png differ
diff --git a/gpt-vue/projects/vue-admin/public/images/user-info.jpg b/gpt-vue/projects/vue-admin/public/images/user-info.jpg
new file mode 100644
index 00000000..580598a1
Binary files /dev/null and b/gpt-vue/projects/vue-admin/public/images/user-info.jpg differ
diff --git a/gpt-vue/projects/vue-admin/public/images/vip.png b/gpt-vue/projects/vue-admin/public/images/vip.png
new file mode 100644
index 00000000..e7374cfa
Binary files /dev/null and b/gpt-vue/projects/vue-admin/public/images/vip.png differ
diff --git a/gpt-vue/projects/vue-admin/public/images/wechat-pay.png b/gpt-vue/projects/vue-admin/public/images/wechat-pay.png
new file mode 100644
index 00000000..46893f0b
Binary files /dev/null and b/gpt-vue/projects/vue-admin/public/images/wechat-pay.png differ
diff --git a/gpt-vue/projects/vue-admin/public/images/wx.png b/gpt-vue/projects/vue-admin/public/images/wx.png
new file mode 100644
index 00000000..2769591c
Binary files /dev/null and b/gpt-vue/projects/vue-admin/public/images/wx.png differ
diff --git a/gpt-vue/projects/vue-admin/public/login-content.png b/gpt-vue/projects/vue-admin/public/login-content.png
new file mode 100644
index 00000000..2cc7aeaf
Binary files /dev/null and b/gpt-vue/projects/vue-admin/public/login-content.png differ
diff --git a/gpt-vue/projects/vue-admin/src/.env.development b/gpt-vue/projects/vue-admin/src/.env.development
deleted file mode 100644
index 7402abdd..00000000
--- a/gpt-vue/projects/vue-admin/src/.env.development
+++ /dev/null
@@ -1,3 +0,0 @@
-VITE_PROXY_BASE_URL="/api"
-VITE_TARGET_URL="http://172.22.11.2:5678"
-VITE_SOCKET_IO_URL="http://172.28.1.3:8899"
diff --git a/gpt-vue/projects/vue-admin/src/.env.production b/gpt-vue/projects/vue-admin/src/.env.production
deleted file mode 100644
index a3c03b73..00000000
--- a/gpt-vue/projects/vue-admin/src/.env.production
+++ /dev/null
@@ -1,3 +0,0 @@
-VITE_PROXY_BASE_URL=""
-VITE_TARGET_URL="/"
-VITE_SOCKET_IO_URL="/"
diff --git a/gpt-vue/projects/vue-admin/src/App.vue b/gpt-vue/projects/vue-admin/src/App.vue
index 7c2aa3f3..91c68e01 100644
--- a/gpt-vue/projects/vue-admin/src/App.vue
+++ b/gpt-vue/projects/vue-admin/src/App.vue
@@ -1,3 +1,31 @@
 <template>
   <RouterView />
 </template>
+<style>
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 1px;
+  box-shadow: inset 0 0 5px #0000000d;
+  background: #d9d9d9;
+}
+
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px #0000000d;
+  border-radius: 1px;
+  background: #fafafa;
+}
+
+.public-bg {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(133deg, #ffffff 0%, #dde8fe 100%);
+  overflow: hidden;
+}
+</style>
diff --git a/gpt-vue/projects/vue-admin/src/components/CustomLayout.vue b/gpt-vue/projects/vue-admin/src/components/CustomLayout.vue
index 3261c453..73dd6a24 100644
--- a/gpt-vue/projects/vue-admin/src/components/CustomLayout.vue
+++ b/gpt-vue/projects/vue-admin/src/components/CustomLayout.vue
@@ -1,15 +1,21 @@
 <script lang="ts" setup>
 import { IconDown, IconExport } from "@arco-design/web-vue/es/icon";
+import { useAuthStore } from "@/stores/auth";
+import Logo from "/images/logo.png";
 
 import SystemMenu from "./SystemMenu.vue";
 import PageWrapper from "./PageWrapper.vue";
 
 const logoWidth = "200px";
+const authStore = useAuthStore();
 </script>
 <template>
   <ALayout class="custom-layout">
     <ALayoutHeader class="custom-layout-header">
-      <div class="logo"></div>
+      <div class="logo">
+        <img :src="Logo" alt="logo" />
+        <span>ChatPlus 控制台</span>
+      </div>
       <div class="action">
         <ADropdown>
           <ASpace align="center" :size="4">
@@ -20,7 +26,11 @@ const logoWidth = "200px";
             <ADoption value="changeOwnPwd">更改密码</ADoption>
           </template>
           <template #footer>
-            <APopconfirm content="确认退出？" position="br">
+            <APopconfirm
+              content="确认退出？"
+              position="br"
+              @ok="authStore.logout"
+            >
               <ASpace align="center" class="logout-area">
                 <IconExport size="16" />
                 <span>退出</span>
@@ -52,10 +62,15 @@ const logoWidth = "200px";
     align-items: center;
     border-bottom: 1px solid var(--color-neutral-2);
     .logo {
-      display: block;
+      display: flex;
       width: v-bind("logoWidth");
-      text-align: center;
-      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      img {
+        width: 30px;
+        height: 30px;
+      }
     }
     .action {
       display: flex;
diff --git a/gpt-vue/projects/vue-admin/src/composables/useRequest.ts b/gpt-vue/projects/vue-admin/src/composables/useRequest.ts
new file mode 100644
index 00000000..d31ccf1c
--- /dev/null
+++ b/gpt-vue/projects/vue-admin/src/composables/useRequest.ts
@@ -0,0 +1,25 @@
+import { ref } from "vue";
+import type { Ref } from "vue";
+import type { BaseResponse } from "@gpt-vue/packages/type";
+
+type Request<T> = (params?: any) => Promise<BaseResponse<T>>
+function useRequest<T>(request: Request<T>) {
+  const result = ref<T>()
+  const loading = ref(false)
+
+  const requestData = async (params?: any) => {
+    try {
+      const res = await request(params)
+      result.value = res.data
+      return Promise.resolve(res)
+    } catch (err) {
+      return Promise.reject(err)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return [requestData, result, loading] as [Request<T>, Ref<T>, Ref<boolean>]
+}
+
+export default useRequest
\ No newline at end of file
diff --git a/gpt-vue/projects/vue-admin/src/http/config.ts b/gpt-vue/projects/vue-admin/src/http/config.ts
index 94afb1bf..6a815f74 100644
--- a/gpt-vue/projects/vue-admin/src/http/config.ts
+++ b/gpt-vue/projects/vue-admin/src/http/config.ts
@@ -7,6 +7,8 @@ export const uploadUrl = import.meta.env.VITE_PROXY_BASE_URL + "/common/upload/m
 export const instance = createInstance()
 
 instance.interceptors.request.use((config) => {
+  config.headers[__AUTH_KEY] = localStorage.getItem(__AUTH_KEY);
+  config.headers["Authorization"] = localStorage.getItem(__AUTH_KEY);
   return config;
 });
 
diff --git a/gpt-vue/projects/vue-admin/src/http/login.ts b/gpt-vue/projects/vue-admin/src/http/login.ts
new file mode 100644
index 00000000..8032866c
--- /dev/null
+++ b/gpt-vue/projects/vue-admin/src/http/login.ts
@@ -0,0 +1,27 @@
+import http from "@/http/config";
+
+export const userLogin = (data: {
+  username: string;
+  password: string;
+}) => {
+  return http({
+    url: "/api/admin/login",
+    method: "post",
+    data,
+  });
+};
+
+export const userLogout = () => {
+  return http({
+    url: "/api/admin/logout",
+    method: "get",
+  });
+};
+
+export const getSession = () => {
+  return http({
+    url: "/api/admin/session",
+    method: "get",
+  });
+};
+
diff --git a/gpt-vue/projects/vue-admin/src/router/index.ts b/gpt-vue/projects/vue-admin/src/router/index.ts
index 83136c58..ea2a37c8 100644
--- a/gpt-vue/projects/vue-admin/src/router/index.ts
+++ b/gpt-vue/projects/vue-admin/src/router/index.ts
@@ -1,7 +1,21 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from "@/stores/auth";
 import CustomLayout from '@/components/CustomLayout.vue'
 import menu from './menu'
 
+const whiteListRoutes = [
+  {
+    path: "/login",
+    name: "Login",
+    component: () => import("@/views/LoginView.vue"),
+  },
+  {
+    path: "/:pathMatch(.*)*",
+    name: "404",
+    component: () => import("@/views/NotFound.vue"),
+  },
+];
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -12,12 +26,28 @@ const router = createRouter({
       redirect: () => menu[0].path,
       children: menu
     },
-    {
-      path: "/:pathMatch(.*)*",
-      name: "404",
-      component: () => import("@/views/NotFound.vue"),
-    },
+    ...whiteListRoutes
   ]
 })
 
+const whiteList = whiteListRoutes.map((i) => i.name);
+
+router.beforeEach((to, _, next) => {
+  const authStore = useAuthStore();
+  authStore.init()
+  if (typeof to.name === "string" && whiteList.includes(to.name)) {
+    if (authStore.token && to.name === "Login") {
+      next({ path: menu[0].path });
+      return;
+    }
+    next();
+    return;
+  }
+  if (!authStore.token) {
+    next({ name: "Login" });
+    return;
+  }
+  next();
+});
+
 export default router
diff --git a/gpt-vue/projects/vue-admin/src/stores/auth.ts b/gpt-vue/projects/vue-admin/src/stores/auth.ts
new file mode 100644
index 00000000..f7a80a82
--- /dev/null
+++ b/gpt-vue/projects/vue-admin/src/stores/auth.ts
@@ -0,0 +1,42 @@
+import { defineStore } from 'pinia'
+import { Message } from '@arco-design/web-vue'
+import { userLogin, userLogout } from '@/http/login'
+import router from '@/router'
+
+export const useAuthStore = defineStore({
+  id: __AUTH_KEY,
+  state: () => ({ token: null }),
+  actions: {
+    init() {
+      this.$state.token = localStorage.getItem(__AUTH_KEY);
+    },
+    async login(params) {
+      try {
+        const { data } = await userLogin(params)
+        if (data) {
+          this.$state.token = data;
+          localStorage.setItem(__AUTH_KEY, data)
+          Message.success('登录成功');
+          router.replace({ name: 'home' })
+          return Promise.resolve(data)
+        }
+      } catch (err) {
+        return Promise.reject(err)
+      }
+    },
+    async logout() {
+      try {
+        await userLogout()
+        if (this.$state.token) {
+          localStorage.removeItem(__AUTH_KEY)
+          this.$restate.token = null
+        }
+        Message.success('退出成功');
+        router.push({ name: 'Login' })
+        return Promise.resolve(true)
+      } catch (err) {
+        return Promise.reject(err)
+      }
+    }
+  }
+})
diff --git a/gpt-vue/projects/vue-admin/src/views/LoginView.vue b/gpt-vue/projects/vue-admin/src/views/LoginView.vue
new file mode 100644
index 00000000..c40b8eba
--- /dev/null
+++ b/gpt-vue/projects/vue-admin/src/views/LoginView.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import { reactive } from "vue";
+import { useRoute } from "vue-router";
+import { IconUser, IconLock } from "@arco-design/web-vue/es/icon";
+import { useAuthStore } from "@/stores/auth";
+import useRequest from "@/composables/useRequest";
+
+const route = useRoute();
+const authStore = useAuthStore();
+
+const [loginRequest, _, loading] = useRequest(authStore.login);
+const formData = reactive({
+  username: "",
+  password: "",
+});
+
+async function handleSubmit({ errors, values }: any) {
+  if (errors) return;
+  await loginRequest({
+    ...values,
+    ...route.query,
+  });
+}
+</script>
+<template>
+  <div class="login-wrapper public-bg">
+    <div class="login-container">
+      <div class="login-box">
+        <AForm :model="formData" size="large" @submit="handleSubmit">
+          <h1 class="title">ChatGPT Plus Admin</h1>
+          <AFormItem
+            hide-label
+            field="username"
+            :rules="[{ required: true, message: '请输入用户名' }]"
+          >
+            <AInput v-model="formData.username" placeholder="用户名">
+              <template #prefix>
+                <IconUser />
+              </template>
+            </AInput>
+          </AFormItem>
+          <AFormItem
+            hide-label
+            field="password"
+            :rules="[{ required: true, message: '请输入密码' }]"
+          >
+            <AInputPassword v-model="formData.password" placeholder="密码">
+              <template #prefix>
+                <IconLock />
+              </template>
+            </AInputPassword>
+          </AFormItem>
+          <AFormItem hide-label>
+            <AButton type="primary" long html-type="submit" :loading="loading">
+              登录
+            </AButton>
+          </AFormItem>
+        </AForm>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="less" scoped>
+.login-wrapper {
+  .login-container {
+    display: flex;
+    width: 1000px;
+    height: 500px;
+    align-items: center;
+    justify-content: right;
+    background-color: #ffffff;
+    background-image: url("/login-content.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: left;
+    border-radius: 40px;
+    .login-box {
+      display: flex;
+      width: 50%;
+      height: 100%;
+      padding: 20px;
+      border-radius: 40px;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      .title {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>
diff --git a/gpt-vue/projects/vue-admin/src/views/Order/api.ts b/gpt-vue/projects/vue-admin/src/views/Order/api.ts
index e15df4b2..6bb73492 100644
--- a/gpt-vue/projects/vue-admin/src/views/Order/api.ts
+++ b/gpt-vue/projects/vue-admin/src/views/Order/api.ts
@@ -1,9 +1,9 @@
 import http from "@/http/config";
 
-export const getList = (params?: Record<string, unknown>) => {
+export const getList = (data?: Record<string, unknown>) => {
   return http({
-    url: "/admin/order/list",
-    methods: "get",
-    params
+    url: "/api/admin/order/list",
+    method: "post",
+    data
   })
 }
\ No newline at end of file
diff --git a/gpt-vue/projects/vue-admin/vite.config.ts b/gpt-vue/projects/vue-admin/vite.config.ts
index 3b1f8015..882d98d5 100644
--- a/gpt-vue/projects/vue-admin/vite.config.ts
+++ b/gpt-vue/projects/vue-admin/vite.config.ts
@@ -8,6 +8,9 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 export default defineConfig(({ mode }) => {
   const { VITE_PROXY_BASE_URL, VITE_TARGET_URL } = loadEnv(mode, process.cwd());
   return {
+    define: {
+      __AUTH_KEY: "'Admin-Authorization'"
+    },
     plugins: [
       vue(),
       vueJsx(),
