diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 5982179..952675a 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -25,6 +25,8 @@ module.exports = {
   rules: {
     'vue/multi-word-component-names': 'off', // 禁用vue文件强制多个单词命名
     '@typescript-eslint/no-explicit-any': 'off', //允许使用any
+    'no-unused-vars': 'off', // 禁用未使用变量的检查
+    '@typescript-eslint/no-unused-vars': 'off', // 禁用 TypeScript 中未使用变量的检查
     '@typescript-eslint/no-this-alias': [
       'error',
       {
diff --git a/package.json b/package.json
index ae2acc9..6796b91 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@vueuse/core": "^12.7.0",
     "axios": "^1.8.1",
     "element-plus": "^2.9.5",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "mockjs": "^1.1.0",
     "moment": "^2.30.1",
@@ -48,6 +49,7 @@
   "devDependencies": {
     "@commitlint/cli": "19.2.0",
     "@commitlint/config-conventional": "19.1.0",
+    "@types/lodash-es": "^4.17.12",
     "@types/mockjs": "^1.0.10",
     "@types/node": "^22.13.8",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6fa8bf2..76f2def 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       element-plus:
         specifier: ^2.9.5
         version: 2.9.5(vue@3.5.13(typescript@5.7.3))
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -57,6 +60,9 @@ importers:
       '@commitlint/config-conventional':
         specifier: 19.1.0
         version: 19.1.0
+      '@types/lodash-es':
+        specifier: ^4.17.12
+        version: 4.17.12
       '@types/mockjs':
         specifier: ^1.0.10
         version: 1.0.10
diff --git a/src/api/index.ts b/src/api/index.ts
index 9ced41d..5c6475d 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,5 +1,5 @@
 const api = {}
-const apiFiles = import.meta.glob('./modules/*.js', { eager: true })
+const apiFiles = import.meta.glob('./modules/*.ts', { eager: true })
 
 Object.entries(apiFiles).forEach(([path, module]) => {
   const fileName = (path.match(/\/(\w+)\./) as RegExpMatchArray)[1]
diff --git a/src/components/Column/index.vue b/src/components/Column/index.vue
index fdea395..0f5787f 100644
--- a/src/components/Column/index.vue
+++ b/src/components/Column/index.vue
@@ -37,7 +37,7 @@ withDefaults(
     scrollbar: boolean
   }>(),
   {
-    scrollbar: false,
+    scrollbar: true,
   },
 )
 
diff --git a/src/components/List/index.vue b/src/components/List/index.vue
new file mode 100644
index 0000000..24552d7
--- /dev/null
+++ b/src/components/List/index.vue
@@ -0,0 +1,133 @@
+<!--
+ * 列表组件
+-->
+<template>
+  <div class="gc-list">
+    <div class="gc-list__wrapper">
+      <a
+        v-for="(item, index) in list"
+        :key="index"
+        href="javascript:void(0)"
+        class="gc-list__item is-active:text-[#26224e] is-active:bg-white is-active:shadow-[5px_15px_30px_0px_#f0f0f0] last:border-b-0 hover:bg-white hover:text-[#26224e] hover:shadow-[5px_15px_30px_0px_#f0f0f0]"
+        :class="{
+          'is-active': currentIndex === getObjectAttrValue(item, options.key),
+        }"
+        :draggable="draggable"
+        @click="handleChangeItem(item)"
+        @click.right="handleContextMenu($event, item)"
+      >
+        <slot :item="item" :index="index">
+          {{ getObjectAttrValue(item, options.label) }}
+        </slot>
+      </a>
+      <el-empty v-if="isEmpty" :image-size="60" description="暂无数据" />
+    </div>
+  </div>
+</template>
+<script>
+import { useCurrentInstance } from '@/hooks'
+import { get as getObjectAttrValue } from 'lodash'
+import { computed, nextTick, ref } from 'vue'
+
+export default {
+  name: 'GcList',
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    options: {
+      type: Object,
+      default: () => ({
+        // 主键key字段
+        key: 'id',
+        // 展示内容字段
+        label: 'name',
+      }),
+    },
+    // item是否可以拖拽
+    draggable: {
+      type: Boolean,
+      default: false,
+    },
+    // 切换标签前的回调函数，返回 false 可阻止切换，支持返回 Promise
+    beforeChange: {
+      type: Function,
+      default: null,
+    },
+  },
+  emits: ['click-item', 'change', 'context-menu'],
+  setup(props, { emit }) {
+    const { $is } = useCurrentInstance()
+    const { isFunction, isAsyncFunction } = $is
+
+    const currentIndex = ref('')
+
+    const isEmpty = computed(() => {
+      return props.list.length === 0
+    })
+
+    // 切换item选择
+    const handleChangeItem = async (item) => {
+      emit('click-item', item)
+
+      const index = props.list.findIndex((listItem) => {
+        return getObjectAttrValue(listItem, props.options.key) === getObjectAttrValue(item, props.options.key)
+      })
+
+      const value = getObjectAttrValue(props.list[index], props.options.key)
+
+      if (isFunction(props.beforeChange)) {
+        let changeConfirm
+
+        if (isAsyncFunction(props.beforeChange)) {
+          await new Promise((resolve) => {
+            props
+              .beforeChange(index, item, value)
+              .then((status) => {
+                changeConfirm = status
+                resolve()
+              })
+              .catch(() => {
+                changeConfirm = false
+                resolve()
+              })
+          })
+        } else {
+          changeConfirm = props.beforeChange(index, item, value)
+        }
+
+        if (changeConfirm === false) {
+          return
+        }
+
+        if (index !== -1) {
+          currentIndex.value = value
+          emit('change', currentIndex.value, props.list[index])
+        }
+      } else {
+        currentIndex.value = value
+        emit('change', currentIndex.value, props.list[index])
+      }
+    }
+
+    // 鼠标右键点击
+    const handleContextMenu = (event, item) => {
+      handleChangeItem(item)
+      nextTick(() => {
+        emit('context-menu', event, currentIndex.value, item)
+      })
+    }
+
+    return {
+      getObjectAttrValue,
+      currentIndex,
+      isEmpty,
+      handleChangeItem,
+      handleContextMenu,
+    }
+  },
+}
+</script>
+
+<style scoped></style>
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index e69de29..8c3a9d6 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -0,0 +1,3 @@
+export * from './modules/useCurrentInstance.ts'
+export * from './modules/useLoadMore.ts'
+export * from './modules/usePageList.ts'
diff --git a/src/hooks/modules/useCurrentInstance.ts b/src/hooks/modules/useCurrentInstance.ts
new file mode 100644
index 0000000..2db28b5
--- /dev/null
+++ b/src/hooks/modules/useCurrentInstance.ts
@@ -0,0 +1,47 @@
+/*
+ * @description: 当前组件实例hooks，用以提供常用工具等
+ */
+
+import type { ComponentInternalInstance, ComponentPublicInstance } from 'vue'
+import { getCurrentInstance } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+// 定义 proxy 上的自定义属性类型
+interface CustomProperties {
+  $api: any
+  $HTTP: any
+  $HTTP_CODE: any
+  $dict: any
+  $is: any
+  $date: any
+}
+
+export const useCurrentInstance = () => {
+  const router = useRouter()
+  const route = useRoute()
+
+  const currentInstance = getCurrentInstance()
+
+  if (!currentInstance) {
+    throw new Error('useCurrentInstance must be called within a setup function')
+  }
+
+  const { proxy } = currentInstance as ComponentInternalInstance & { proxy: ComponentPublicInstance & CustomProperties }
+
+  const { $api, $HTTP, $HTTP_CODE, $dict, $is, $date } = proxy
+
+  // console.log('useCurrentInstance', currentInstance, proxy, $api, $HTTP, $HTTP_CODE, $dict, $is, $date)
+
+  return {
+    router,
+    route,
+    currentInstance,
+    proxy,
+    $api,
+    $HTTP,
+    $HTTP_CODE,
+    $dict,
+    $is,
+    $date,
+  }
+}
diff --git a/src/hooks/modules/useLoadMore.ts b/src/hooks/modules/useLoadMore.ts
new file mode 100644
index 0000000..25645a8
--- /dev/null
+++ b/src/hooks/modules/useLoadMore.ts
@@ -0,0 +1,67 @@
+/**
+ * @description: 加载更多
+ */
+import { debounce } from 'lodash-es'
+import { onActivated, onBeforeUnmount, onDeactivated } from 'vue'
+
+interface UseLoadMoreOptions {
+  type?: 'top' | 'bottom' | 'both'
+  scrollTopCallback?: () => void
+  scrollBottomCallback?: () => void
+  container?: HTMLElement
+  distance?: number
+}
+
+export const useLoadMore = (options: UseLoadMoreOptions = {}) => {
+  const {
+    type = 'both',
+    scrollTopCallback,
+    scrollBottomCallback,
+    container = document.documentElement,
+    distance = 0,
+  } = options
+
+  // 判断滚动条是否滚动到顶部
+  const isScrollTop = (distance: number = 0) => {
+    const scrollTop = container.scrollTop
+    return scrollTop - distance <= 0
+  }
+
+  // 判断滚动条是否滚动到底部
+  const isScrollBottom = (distance: number = 0) => {
+    const scrollHeight = container.scrollHeight
+    const scrollTop = container.scrollTop
+    const clientHeight = container.clientHeight
+    return scrollHeight - distance <= scrollTop + clientHeight
+  }
+
+  // 滚动监听回调
+  const handleScroll = debounce(() => {
+    if (['top', 'both'].includes(type) && isScrollTop(distance)) {
+      scrollTopCallback?.()
+    }
+
+    if (['bottom', 'both'].includes(type) && isScrollBottom(distance)) {
+      scrollBottomCallback?.()
+    }
+  }, 300)
+
+  container.addEventListener('scroll', handleScroll)
+
+  onBeforeUnmount(() => {
+    container.removeEventListener('scroll', handleScroll)
+  })
+
+  onActivated(() => {
+    container.addEventListener('scroll', handleScroll)
+  })
+
+  onDeactivated(() => {
+    container.removeEventListener('scroll', handleScroll)
+  })
+
+  return {
+    isScrollTop,
+    isScrollBottom,
+  }
+}
diff --git a/src/hooks/modules/usePageList.ts b/src/hooks/modules/usePageList.ts
new file mode 100644
index 0000000..a17df3b
--- /dev/null
+++ b/src/hooks/modules/usePageList.ts
@@ -0,0 +1,151 @@
+/**
+ * @description: 页面列表
+ * */
+
+import { HTTP_CODE } from '@/settings/config/http'
+import { isFunction } from '@/utils/helper/is'
+import { ElMessage } from 'element-plus'
+import type { Ref } from 'vue'
+import { computed, ref } from 'vue'
+
+interface PageListOptions<T> {
+  getPageListApi: (params: any) => Promise<any>
+  searchParams: Ref<{ [key: string]: any }>
+  dataAppend?: 'start' | 'end'
+}
+
+interface PageListResult<T> {
+  list: Ref<T[]>
+  page: Ref<number>
+  limit: Ref<number>
+  count: Ref<number>
+  loadding: Ref<boolean>
+  getPageList: () => Promise<void>
+  initData: () => void
+  refreshing: Ref<boolean>
+  refreshPageList: () => Promise<void>
+  handleRefresh: () => Promise<void>
+  loadMore: () => Promise<void>
+  isNoMore: Ref<boolean>
+  isEmpty: Ref<boolean>
+}
+
+export const usePageList = <T>(options: PageListOptions<T>): PageListResult<T> => {
+  const { getPageListApi, searchParams, dataAppend = 'end' } = options
+
+  const appendData = (rows: T[]) => {
+    if (dataAppend === 'start') {
+      list.value = [...rows, ...list.value]
+    } else if (dataAppend === 'end') {
+      list.value = [...list.value, ...rows]
+    }
+  }
+
+  if (!isFunction(getPageListApi)) {
+    throw new Error(`getPageListApi: ${getPageListApi}，需要为函数`)
+  }
+
+  const originData = {
+    list: [] as T[],
+    page: 1,
+    limit: 10,
+    count: 0,
+  }
+
+  const initData = () => {
+    list.value = [...originData.list]
+    page.value = originData.page
+    limit.value = originData.limit
+    count.value = originData.count
+  }
+
+  const list = ref<T[]>([...originData.list]) as Ref<T[]>
+  const page = ref(originData.page) as Ref<number>
+  const limit = ref(originData.limit) as Ref<number>
+  const count = ref(originData.count) as Ref<number>
+  const loadding = ref(false) as Ref<boolean>
+
+  const getPageList = async () => {
+    loadding.value = true
+    const params = {
+      ...searchParams.value,
+      page: page.value,
+      limit: limit.value,
+    }
+
+    const res = await getPageListApi({ params })
+      .catch(() => {
+        ElMessage({
+          type: 'error',
+          message: '获取待办列表失败',
+          duration: 3000,
+        })
+      })
+      .finally(() => {
+        loadding.value = false
+      })
+
+    if (res && res.data) {
+      const { code, data, message } = res.data
+      const { count: total, rows } = data
+
+      if (code === HTTP_CODE.HTTP_SUCCESS_CODE) {
+        if (rows.length) {
+          appendData(rows)
+          page.value = page.value + 1
+          count.value = total
+        }
+      } else {
+        ElMessage({
+          type: 'error',
+          message,
+          duration: 3000,
+        })
+      }
+    }
+  }
+
+  const refreshing = ref(false) as Ref<boolean>
+  const refreshPageList = async () => {
+    initData()
+    await getPageList()
+  }
+
+  const handleRefresh = async () => {
+    refreshing.value = true
+    await refreshPageList().finally(() => {
+      refreshing.value = false
+    })
+  }
+
+  const loadMore = async () => {
+    if (isNoMore.value) {
+      return
+    }
+    await getPageList()
+  }
+
+  const isNoMore = computed(() => {
+    return list.value.length >= count.value && page.value > 1
+  })
+
+  const isEmpty = computed(() => {
+    return list.value.length === 0 && page.value > 1
+  })
+
+  return {
+    list,
+    page,
+    limit,
+    count,
+    loadding,
+    getPageList,
+    initData,
+    refreshing,
+    refreshPageList,
+    handleRefresh,
+    loadMore,
+    isNoMore,
+    isEmpty,
+  }
+}
diff --git a/src/layout/themes/default/components/aside/index.vue b/src/layout/themes/default/components/aside/index.vue
index 0d4d766..6173b6c 100644
--- a/src/layout/themes/default/components/aside/index.vue
+++ b/src/layout/themes/default/components/aside/index.vue
@@ -7,7 +7,7 @@ import GcUser from '../user/index.vue'
 
 <template>
   <div class="gc-aside fixed top-0 left-0 h-full w-[245px] border-r border-gray-200">
-    <GcColumn>
+    <GcColumn :scrollbar="false">
       <template #header>
         <GcLogo></GcLogo>
       </template>
diff --git a/src/layout/themes/default/components/content/index.vue b/src/layout/themes/default/components/content/index.vue
index 986f523..5eec5b5 100644
--- a/src/layout/themes/default/components/content/index.vue
+++ b/src/layout/themes/default/components/content/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="gc-content">
+  <div class="gc-content ml-[245px] h-full">
     <router-view v-slot="{ Component }">
       <keep-alive :max="20" :exclude="[]">
         <component :is="Component" />
diff --git a/src/layout/themes/default/components/menu/index.vue b/src/layout/themes/default/components/menu/index.vue
index bd28c5c..d09d4a4 100644
--- a/src/layout/themes/default/components/menu/index.vue
+++ b/src/layout/themes/default/components/menu/index.vue
@@ -1,9 +1,15 @@
 <template>
-  <div class="gc-navigator-menu">
+  <div class="gc-navigator-menu h-[calc(100vh-200px)] pt-[40px] pl-[30px]">
     <div class="menu-list">
-      <router-link v-for="menu in menus" :key="menu.path" :to="menu.path" active-class="active" class="menu-item">
-        <i v-if="route.path !== menu.path" :class="menu.meta.icon"></i>
-        <i v-else :class="menu.meta.activeIcon"></i>
+      <router-link
+        v-for="menu in menus"
+        :key="menu.path"
+        :to="menu.path"
+        active-class="active"
+        class="menu-item mb-[10px] block h-[40px] w-[160px] rounded-[10px] px-[20px] leading-[40px] text-[#38393e] transition-all duration-300 ease-in-out"
+      >
+        <i v-if="route.path !== menu.path" :class="menu.meta.icon" class="mr-[15px] text-[22px]"></i>
+        <i v-else :class="menu.meta.activeIcon" class="mr-[15px] text-[22px]"></i>
         <span>{{ menu.meta.title }}</span>
       </router-link>
     </div>
@@ -30,34 +36,10 @@ const menus = computed(() => {
 </script>
 
 <style scoped>
-.gc-navigator-menu {
-  height: calc(100vh - 200px);
-  padding-left: 30px;
-  padding-top: 40px;
-  .menu-list {
-    .menu-item {
-      display: block;
-      width: 160px;
-      height: 40px;
-      line-height: 40px;
-      color: #38393e;
-      padding: 0 20px;
-      margin-bottom: 10px;
-      border-radius: 10px;
-      transition: all 0.3s ease;
-
-      i {
-        font-size: 22px;
-        margin-right: 15px;
-      }
-
-      &.active,
-      &:hover {
-        background-color: #fff;
-        box-shadow: 0 6px 6px 1px #eceff4;
-        color: $theme-color;
-      }
-    }
-  }
+.menu-item.active,
+.menu-item:hover {
+  background-color: #fff;
+  box-shadow: 0 6px 6px 1px #eceff4;
+  color: #3246d1;
 }
 </style>
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index f411aca..d199336 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -5,7 +5,7 @@
 
 import type { App, Plugin } from 'vue'
 
-const modules: Record<string, { default: Plugin }> = import.meta.glob('./modules/*.js', {
+const modules: Record<string, { default: Plugin }> = import.meta.glob('./modules/*.ts', {
   eager: true,
 })
 
diff --git a/src/plugins/modules/utils.ts b/src/plugins/modules/utils.ts
index f015e04..3a3c337 100644
--- a/src/plugins/modules/utils.ts
+++ b/src/plugins/modules/utils.ts
@@ -9,7 +9,7 @@ const utilsPlugin = {
 
     // date
     app.config.globalProperties.$date = data
-    app.provide('$date', data)
+    app.provide('$data', data)
   },
 }
 
diff --git a/src/view/chat/components/chat-history.vue b/src/view/chat/components/chat-history.vue
new file mode 100644
index 0000000..c7eae53
--- /dev/null
+++ b/src/view/chat/components/chat-history.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useCurrentInstance } from '@/hooks'
+
+useCurrentInstance()
+</script>
+
+<template>
+  <div>History</div>
+</template>
+
+<style scoped></style>
diff --git a/src/view/chat/index.vue b/src/view/chat/index.vue
index 7f6f978..9ef1a23 100644
--- a/src/view/chat/index.vue
+++ b/src/view/chat/index.vue
@@ -1,7 +1,11 @@
-<script lang="ts"></script>
+<script lang="ts" setup>
+import ChatHistory from './components/chat-history.vue'
+</script>
 
 <template>
-  <div></div>
+  <div class="chat flex">
+    <ChatHistory />
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/src/view/home/index.vue b/src/view/home/index.vue
index f374171..a004335 100644
--- a/src/view/home/index.vue
+++ b/src/view/home/index.vue
@@ -1,7 +1,14 @@
 <script lang="ts"></script>
 
 <template>
-  <div class="text-red-500">HOME</div>
+  <div class="home -mt-[50px] flex h-full w-full flex-col items-center justify-center gap-2">
+    <img class="h-40" src="/logo.svg" alt="logo" />
+    <h2
+      class="cursor-default bg-gradient-to-r from-blue-500 via-purple-400 to-indigo-600 bg-clip-text text-xl font-bold text-transparent"
+    >
+      lightChat
+    </h2>
+  </div>
 </template>
 
 <style scoped></style>