diff --git a/urbanLifelineWeb/packages/workcase/src/assets/css/common.scss b/urbanLifelineWeb/packages/workcase/src/assets/css/common.scss
new file mode 100644
index 00000000..cfcb7ab9
--- /dev/null
+++ b/urbanLifelineWeb/packages/workcase/src/assets/css/common.scss
@@ -0,0 +1 @@
+// 全局EL分页组件样式
\ No newline at end of file
diff --git a/urbanLifelineWeb/packages/workcase/src/main.ts b/urbanLifelineWeb/packages/workcase/src/main.ts
index 52ed9f9b..7989bfc7 100644
--- a/urbanLifelineWeb/packages/workcase/src/main.ts
+++ b/urbanLifelineWeb/packages/workcase/src/main.ts
@@ -4,6 +4,8 @@ import ElementPlus from 'element-plus'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import 'element-plus/dist/index.css'
 
+import './assets/css/common.scss'
+
 import App from './App.vue'
 import router from './router/'
 import { AES_SECRET_KEY } from './config'
diff --git a/urbanLifelineWeb/packages/workcase/src/views/admin/AdminLayout.vue b/urbanLifelineWeb/packages/workcase/src/views/admin/AdminLayout.vue
new file mode 100644
index 00000000..7fa64963
--- /dev/null
+++ b/urbanLifelineWeb/packages/workcase/src/views/admin/AdminLayout.vue
@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <!-- 统一Admin下的基本样式 -->
+        <div>
+            <!-- 头部 -->
+            <div>
+                <!-- 左侧信息 -->
+                <span>
+                    <!-- title -->
+                </span>
+                <span>
+                    <!-- info -->
+                </span>
+            </div>
+            <div>
+                <!-- 右侧按钮 或者文本-->
+                <slot name="action">
+
+                </slot>
+            </div>
+        </div>
+        <div>
+            <!-- div控制margin等基本样式 -->
+            <slot>
+                
+            </slot>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ElButton } from 'element-plus';
+import { ref } from 'vue';
+defineEmits("clickButton")
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/urbanLifelineWeb/packages/workcase/src/views/admin/agent/AgentView.vue b/urbanLifelineWeb/packages/workcase/src/views/admin/agent/AgentView.vue
index 3d869be5..27320bb0 100644
--- a/urbanLifelineWeb/packages/workcase/src/views/admin/agent/AgentView.vue
+++ b/urbanLifelineWeb/packages/workcase/src/views/admin/agent/AgentView.vue
@@ -1,9 +1,28 @@
 <template>
-    <div class="agent">
-        <!-- 智能体管理视图 -->
-    </div>
+    <AdminLayout
+        :title="智能体管理"
+        :info="配置和管理AI智能客服"
+    >
+        <template default>
+            <div class="agent">
+                <!-- 智能体管理视图 -->
+                <div>
+                    <!-- head部分 -->
+                </div>
+                <div>
+                    <!-- 表单部分 -->
+                </div>
+                <div>
+                    <!-- 按钮部分 -->
+                </div>
+            </div>
+        </template>
+
+    </AdminLayout>
 </template>
 <script setup lang="ts">
+import AdminLayout from '@/views/admin/AdminLayout.vue';
+
 
 </script>
 <style lang="scss" scoped>
diff --git a/urbanLifelineWeb/packages/workcase/src/views/admin/customerChat/CustomerChatView.vue b/urbanLifelineWeb/packages/workcase/src/views/admin/customerChat/CustomerChatView.vue
index a3a9ab94..2c8bf7b0 100644
--- a/urbanLifelineWeb/packages/workcase/src/views/admin/customerChat/CustomerChatView.vue
+++ b/urbanLifelineWeb/packages/workcase/src/views/admin/customerChat/CustomerChatView.vue
@@ -1,9 +1,33 @@
 <template>
-    <div class="customer-chat">
-        <!-- 客服对话管理视图 -->
-    </div>
+    <AdminLayout
+        :title="对话数据管理"
+        :info="管理和分析客服对话数据"
+    >
+        <template action>
+            <ElButton></ElButton>
+        </template>
+        <template default>
+            <div class="customer-chat">
+                <!-- 客服对话管理视图 -->
+                <div>
+                    <!-- 条件筛选 -->
+                </div>
+                <div>
+                    <div>
+                        <!-- 数据列表 -->
+                    </div>
+                    <div>
+                        <!-- EL分页组件 全局样式 -->
+                    </div>
+                </div>
+            </div>
+        </template>
+
+    </AdminLayout>
 </template>
 <script setup lang="ts">
+import AdminLayout from '@/views/admin/AdminLayout.vue';
+
 
 </script>
 <style lang="scss" scoped>
diff --git a/urbanLifelineWeb/packages/workcase/src/views/admin/knowledge/KnowLedgeView.vue b/urbanLifelineWeb/packages/workcase/src/views/admin/knowledge/KnowLedgeView.vue
index 35be3ea5..d8dc0038 100644
--- a/urbanLifelineWeb/packages/workcase/src/views/admin/knowledge/KnowLedgeView.vue
+++ b/urbanLifelineWeb/packages/workcase/src/views/admin/knowledge/KnowLedgeView.vue
@@ -1,9 +1,55 @@
 <template>
-    <div class="knowledge">
-        <!-- 知识库管理视图 -->
-    </div>
+    <AdminLayout
+        :title="知识库管理"
+        :info="管理外部和内部知识库文档"
+    >
+        <template action>
+            <ElButton></ElButton>
+        </template>
+        <template default>
+            <div class="knowledge">
+                <!-- 知识库管理视图 -->
+                <div>
+                    <!-- 内外部知识库选择器 -->
+                </div>
+                <span>
+                    <!-- 描述内外部知识库 -->
+                </span>
+                <div>
+                    <div>
+                        <!-- 知识库列表   -->
+                        <div v-for="value in source">
+                            <!-- 知识库封面、icon -->
+                            <img/>
+                            <span>
+                                <!-- 知识库名称 -->
+                            </span>
+                            <span>
+                                <!-- 文件数量 -->
+                            </span>
+                        </div>
+                    </div>
+                    <div>
+                        <div>
+                            <!-- 知识库名称+搜索 -->
+                        </div>
+                        <div>
+                            <!-- 文件列表 -->
+                        </div>
+                        <div>
+                            <!-- EL分页组件 全局样式 -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+
+    </AdminLayout>
 </template>
 <script setup lang="ts">
+import { ElButton } from 'element-plus';
+import AdminLayout from '@/views/admin/AdminLayout.vue';
+
 
 </script>
 <style lang="scss" scoped>
diff --git a/urbanLifelineWeb/packages/workcase/src/views/admin/log/knowledgeLog/KnowledgeLogView.vue b/urbanLifelineWeb/packages/workcase/src/views/admin/log/knowledgeLog/KnowledgeLogView.vue
index 85df95f9..30a165a8 100644
--- a/urbanLifelineWeb/packages/workcase/src/views/admin/log/knowledgeLog/KnowledgeLogView.vue
+++ b/urbanLifelineWeb/packages/workcase/src/views/admin/log/knowledgeLog/KnowledgeLogView.vue
@@ -1,9 +1,33 @@
 <template>
-    <div class="knowledge-log">
-        <!-- 知识库日志管理视图 -->
-    </div>
+
+    <AdminLayout
+        :title="知识库日志"
+        :info="查看知识库操作记录"
+    >
+        <template action>
+            <ElButton></ElButton>
+        </template>
+        <template default>
+            <div class="knowledge-log">
+                <!-- 知识库日志管理视图 -->
+                <div>
+                    <!-- 条件筛选区域 -->
+                </div>
+                <div>
+                    <!-- 数据列表区域 -->
+                </div>
+                <div>
+                    <!-- EL分页组件  全局样式 -->
+                </div>
+            </div>
+        </template>
+
+    </AdminLayout>
 </template>
 <script setup lang="ts">
+import AdminLayout from '@/views/admin/AdminLayout.vue';
+
+
 
 </script>
 <style lang="scss" scoped>
diff --git a/urbanLifelineWeb/packages/workcase/src/views/admin/log/systemLog/SystemLogView.vue b/urbanLifelineWeb/packages/workcase/src/views/admin/log/systemLog/SystemLogView.vue
index ecf45b78..480d173a 100644
--- a/urbanLifelineWeb/packages/workcase/src/views/admin/log/systemLog/SystemLogView.vue
+++ b/urbanLifelineWeb/packages/workcase/src/views/admin/log/systemLog/SystemLogView.vue
@@ -1,9 +1,31 @@
 <template>
-    <div class="system-log">
-        <!-- 系统日志管理视图 -->
-    </div>
+    <AdminLayout
+        :title="系统日志"
+        :info="查看系统配置变更与异常信息"
+    >
+        <template action>
+            <ElButton></ElButton>
+        </template>
+        <template default>
+            <div class="system-log">
+                <!-- 系统日志管理视图 -->
+                <div>
+                    <!-- 条件筛选区域 -->
+                </div>
+                <div>
+                    <!-- 数据列表区域 -->
+                </div>
+                <div>
+                    <!-- EL分页组件  全局样式 -->
+                </div>
+            </div>
+        </template>
+
+    </AdminLayout>
 </template>
 <script setup lang="ts">
+import AdminLayout from '@/views/admin/AdminLayout.vue';
+
 
 </script>
 <style lang="scss" scoped>
diff --git a/urbanLifelineWeb/packages/workcase/src/views/admin/log/workcaseLog/WorkcaseLogView.vue b/urbanLifelineWeb/packages/workcase/src/views/admin/log/workcaseLog/WorkcaseLogView.vue
index 0aa08fb7..c7f31559 100644
--- a/urbanLifelineWeb/packages/workcase/src/views/admin/log/workcaseLog/WorkcaseLogView.vue
+++ b/urbanLifelineWeb/packages/workcase/src/views/admin/log/workcaseLog/WorkcaseLogView.vue
@@ -1,9 +1,32 @@
 <template>
-    <div class="workcase-log">
-        <!-- 工单日志管理视图 -->
-    </div>
+    <AdminLayout
+        :title="工单日志"
+        :info="查看工单操作记录"
+    >
+        <template action>
+            <ElButton></ElButton>
+        </template>
+        <template default>
+            <div class="workcase-log">
+                <!-- 工单日志管理视图 -->
+                <div>
+                    <!-- 条件筛选区域 -->
+                </div>
+                <div>
+                    <!-- 数据列表区域 -->
+                </div>
+                <div>
+                    <!-- EL分页组件  全局样式 -->
+                </div>
+            </div>
+        </template>
+
+    </AdminLayout>
 </template>
 <script setup lang="ts">
+import AdminLayout from '@/views/admin/AdminLayout.vue';
+import { ElInput, ElSelect } from 'element-plus';
+
 
 </script>
 <style lang="scss" scoped>
diff --git a/urbanLifelineWeb/packages/workcase/src/views/admin/overview/OverviewView.vue b/urbanLifelineWeb/packages/workcase/src/views/admin/overview/OverviewView.vue
index 4e7e9919..f73f0dcc 100644
--- a/urbanLifelineWeb/packages/workcase/src/views/admin/overview/OverviewView.vue
+++ b/urbanLifelineWeb/packages/workcase/src/views/admin/overview/OverviewView.vue
@@ -1,9 +1,67 @@
 <template>
-    <div class="overview">
-        <!-- 数据概览视图 -->
-    </div>
+    <AdminLayout
+        :title="数据概览"
+    >
+        <template action>
+            <span>泰豪小电智能客服运营数据</span>
+        </template>
+        <template default>
+            <div>
+                <!-- 中间区域 -->
+                <div>
+                    <!-- 信息卡 -->
+                    <div>
+                        <!-- 咨询次数 点击跳转 对话数据 -->
+                    </div>
+                    <div>
+                        <!-- 待处理工单 点击跳转 工单管理，选择待处理的选项 -->
+                    </div>
+                    <div>
+                        <!-- 已处理工单 点击跳转 工单管理，选择已处理的选项-->
+                    </div>
+                </div>
+                <div>
+                    <div>
+                        <!-- 问题分类统计 -->
+                        <span></span>
+                        <div>
+                            <!-- 时间范围选择 -->
+                        </div>
+                    </div>
+                    <div>
+                        <!-- 词云 -->
+                        <span></span>
+                        <div>
+                            <!-- 词云图 -->
+                        </div>
+                    </div>
+                </div>
+
+                <div>
+                    <!-- 快捷入口，固定在底部 -->
+                    <span></span>
+                    <div>
+                        <div>
+                            <!-- 知识库管理 点击跳转 知识库管理 -->
+                        </div>
+                        <div>
+                            <!-- 工单管理 点击跳转 工单管理 -->
+                        </div>
+                        <div>
+                            <!-- 对话数据 点击跳转 对话数据管理 -->
+                        </div>
+                        <div>
+                            <!-- 智能体管理 点击跳转 智能体管理 -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </AdminLayout>
 </template>
 <script setup lang="ts">
+import AdminLayout from '@/views/admin/AdminLayout.vue';
+
 
 </script>
 <style lang="scss" scoped>
diff --git a/urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.vue b/urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.vue
index 914cf78f..de495d2c 100644
--- a/urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.vue
+++ b/urbanLifelineWeb/packages/workcase/src/views/admin/workcase/WorkcaseView.vue
@@ -1,9 +1,41 @@
 <template>
-    <div class="workcase">
-        <!-- 工单管理视图 -->
-    </div>
+    <AdminLayout
+        :title="工单管理"
+        :info="查看和处理客户服务工单"
+    >
+        <template action>
+            <ElButton></ElButton>
+        </template>
+        <template default>
+            <div class="workcase">
+                <!-- 工单管理视图 -->
+                <div>
+                    <!-- 筛选区域 -->
+                    <div>
+                        <!-- 工单状态筛选按钮 -->
+                    </div>
+                    <div>
+                        <ElSelect></ElSelect>
+                        <ElSelect></ElSelect>
+                        <ElInput></ElInput>
+                    </div>
+                </div>
+                <div>
+                    <div>
+                        <!-- ELTable -->
+                    </div>
+                    <div>
+                        <!-- EL分页组件 全局样式-->
+                    </div>
+                </div>
+            </div>
+        </template>
+
+    </AdminLayout>
 </template>
 <script setup lang="ts">
+import AdminLayout from '@/views/admin/AdminLayout.vue';
+
 
 </script>
 <style lang="scss" scoped>