diff --git a/apps/admin/autoResolver/components.d.ts b/apps/admin/autoResolver/components.d.ts
index b2238766..98806728 100644
--- a/apps/admin/autoResolver/components.d.ts
+++ b/apps/admin/autoResolver/components.d.ts
@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     CAAppLogo: typeof import('@celeris/components')['CAAppLogo']
     CAAppNaiveUIProvider: typeof import('@celeris/components')['CAAppNaiveUIProvider']
+    NAlert: typeof import('@celeris/ca-components')['NAlert']
     NAvatar: typeof import('@celeris/ca-components')['NAvatar']
     NButton: typeof import('@celeris/ca-components')['NButton']
     NCard: typeof import('@celeris/ca-components')['NCard']
@@ -28,6 +29,10 @@ declare module 'vue' {
     NGrid: typeof import('@celeris/ca-components')['NGrid']
     NGridItem: typeof import('@celeris/ca-components')['NGridItem']
     NInput: typeof import('@celeris/ca-components')['NInput']
+    NInputGroup: typeof import('@celeris/ca-components')['NInputGroup']
+    NLayout: typeof import('@celeris/ca-components')['NLayout']
+    NLayoutContent: typeof import('@celeris/ca-components')['NLayoutContent']
+    NLayoutSider: typeof import('@celeris/ca-components')['NLayoutSider']
     NLoadingBarProvider: typeof import('@celeris/ca-components')['NLoadingBarProvider']
     NMenu: typeof import('@celeris/ca-components')['NMenu']
     NMessageProvider: typeof import('@celeris/ca-components')['NMessageProvider']
@@ -37,6 +42,8 @@ declare module 'vue' {
     NScrollbar: typeof import('@celeris/ca-components')['NScrollbar']
     NSelect: typeof import('@celeris/ca-components')['NSelect']
     NSpace: typeof import('@celeris/ca-components')['NSpace']
+    NSpin: typeof import('@celeris/ca-components')['NSpin']
+    NSplit: typeof import('@celeris/ca-components')['NSplit']
     NStep: typeof import('@celeris/ca-components')['NStep']
     NSteps: typeof import('@celeris/ca-components')['NSteps']
     NSwitch: typeof import('@celeris/ca-components')['NSwitch']
diff --git a/apps/admin/src/layouts/index.vue b/apps/admin/src/layouts/index.vue
index da3562ae..e99af5f6 100644
--- a/apps/admin/src/layouts/index.vue
+++ b/apps/admin/src/layouts/index.vue
@@ -18,8 +18,8 @@ defineOptions({
       <header class="">
         <Header />
       </header>
-      <div class="block flex-1  overflow-x-hidden rounded-2xl pl-0 pr-5 pt-0 pb-6">
-        <div class="min-h-full w-full rounded-2xl bg-gray-100 p-4 dark:bg-gray-9">
+      <div class="block flex-1 h-full overflow-x-hidden rounded-2xl pl-0 pr-5 pt-0 pb-6">
+        <div class="min-h-full h-full w-full rounded-2xl bg-gray-100 p-4 dark:bg-gray-9">
           <Content />
         </div>
       </div>
diff --git a/apps/admin/src/pages/chat/components/ChatHistorySidebar/index.vue b/apps/admin/src/pages/chat/components/ChatHistorySidebar/index.vue
new file mode 100644
index 00000000..ec46fa2d
--- /dev/null
+++ b/apps/admin/src/pages/chat/components/ChatHistorySidebar/index.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineOptions({
+  name: "ChatHistorySidebar",
+});
+</script>
+
+<template>
+  <div>
+    ChatHistorySidebar
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/apps/admin/src/pages/chat/components/ChatLayout.vue b/apps/admin/src/pages/chat/components/ChatLayout.vue
new file mode 100644
index 00000000..0d15c7d3
--- /dev/null
+++ b/apps/admin/src/pages/chat/components/ChatLayout.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import ChatHistorySidebar from "./ChatHistorySidebar/index.vue";
+import ChatPanel from "./ChatPanel/index.vue";
+import RoleManagementSidebar from "./RoleManagementSidebar/index.vue";
+</script>
+
+<template>
+  <!-- 采用了分栏布局，包括一个左侧边栏和一个右侧边栏，以及一个中央面板。
+左侧边栏是用于管理系统角色的区域，允许用户创建、编辑和删除系统角色。
+右侧边栏显示了每个角色的聊天记录，并且可以根据用户选择的角色动态加载相应的聊天记录。
+中央面板则用于展示选定角色的实时对话界面，可能包含一个消息输入框以及用于加载历史对话记录的功能。 -->
+  <div class="chat-layout rounded-2xl w-full h-full min-h-full ">
+    <NLayout has-sider sider-placement="left" class="h-full">
+      <NLayoutSider
+        collapse-mode="width"
+        :collapsed-width="240"
+        :width="360"
+        :native-scrollbar="true"
+        show-trigger="arrow-circle"
+        content-style="padding: 24px;"
+        bordered
+      >
+        <ChatHistorySidebar />
+      </NLayoutSider>
+      <NLayoutContent>
+        <NLayout has-sider sider-placement="right" class="h-full">
+          <NLayoutContent content-style="padding: 24px;">
+            <ChatPanel />
+          </NLayoutContent>
+          <NLayoutSider
+            collapse-mode="width"
+            :collapsed-width="240"
+            :width="360"
+            :native-scrollbar="true"
+            show-trigger="arrow-circle"
+            content-style="padding: 24px;"
+            bordered
+          >
+            <RoleManagementSidebar />
+          </NLayoutSider>
+        </NLayout>
+      </NLayoutContent>
+    </NLayout>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/apps/admin/src/pages/chat/components/ChatPanel/ChatConversation.vue b/apps/admin/src/pages/chat/components/ChatPanel/ChatConversation.vue
new file mode 100644
index 00000000..06124845
--- /dev/null
+++ b/apps/admin/src/pages/chat/components/ChatPanel/ChatConversation.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    ChatConversation
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/apps/admin/src/pages/chat/components/ChatPanel/Message.vue b/apps/admin/src/pages/chat/components/ChatPanel/Message.vue
new file mode 100644
index 00000000..5f6ea403
--- /dev/null
+++ b/apps/admin/src/pages/chat/components/ChatPanel/Message.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div />
+</template>
+
+<style scoped>
+
+</style>
diff --git a/apps/admin/src/pages/chat/components/ChatPanel/MessageInput.vue b/apps/admin/src/pages/chat/components/ChatPanel/MessageInput.vue
new file mode 100644
index 00000000..6c57e774
--- /dev/null
+++ b/apps/admin/src/pages/chat/components/ChatPanel/MessageInput.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    MessageInput
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/apps/admin/src/pages/chat/components/ChatPanel/index.vue b/apps/admin/src/pages/chat/components/ChatPanel/index.vue
new file mode 100644
index 00000000..37526377
--- /dev/null
+++ b/apps/admin/src/pages/chat/components/ChatPanel/index.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import MessageInput from "~/pages/chat/components/ChatPanel/MessageInput.vue";
+import ChatConversation from "~/pages/chat/components/ChatPanel/ChatConversation.vue";
+
+defineOptions({
+  name: "ChatPanel",
+});
+</script>
+
+<template>
+  <NSplit direction="vertical" :default-size="0.8">
+    <template #1>
+      <ChatConversation />
+    </template>
+    <template #2>
+      <MessageInput />
+    </template>
+  </NSplit>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/apps/admin/src/pages/chat/components/RoleManagementSidebar/index.vue b/apps/admin/src/pages/chat/components/RoleManagementSidebar/index.vue
new file mode 100644
index 00000000..c6445e62
--- /dev/null
+++ b/apps/admin/src/pages/chat/components/RoleManagementSidebar/index.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineOptions({
+  name: "RoleManagementSidebar",
+});
+</script>
+
+<template>
+  <div>RoleManagementSidebar</div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/apps/admin/src/pages/chat/index.vue b/apps/admin/src/pages/chat/index.vue
index 1499d852..60f1b321 100644
--- a/apps/admin/src/pages/chat/index.vue
+++ b/apps/admin/src/pages/chat/index.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import ChatLayout from "./components/ChatLayout.vue";
+
 defineOptions({
   name: "Chat",
 });
 </script>
 
 <template>
-  <div />
+  <ChatLayout />
 </template>
 
 <style scoped>