From 35b0667446adc49ba8a53ab836fa99348da8d818 Mon Sep 17 00:00:00 2001
From: gaoxq <376340421@qq.com>
Date: Wed, 4 Mar 2026 16:55:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E9=A1=B5=E9=9D=A2=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Layout/proResizable.vue    | 194 ++++++++++++
 .../src/components/Table/proTreeTable.vue     | 131 ++++++++
 screen-vue/src/views/system/menu/form.vue     |   8 +
 screen-vue/src/views/system/menu/index.vue    |  33 +-
 screen-vue/src/views/system/menu/list.vue     | 218 ++++++++++++++
 screen-vue/src/views/system/role/form.vue     |   8 +
 screen-vue/src/views/system/role/index.vue    |  33 +-
 screen-vue/src/views/system/role/list.vue     | 282 ++++++++++++++++++
 8 files changed, 903 insertions(+), 4 deletions(-)
 create mode 100644 screen-vue/src/components/Layout/proResizable.vue
 create mode 100644 screen-vue/src/components/Table/proTreeTable.vue
 create mode 100644 screen-vue/src/views/system/menu/form.vue
 create mode 100644 screen-vue/src/views/system/menu/list.vue
 create mode 100644 screen-vue/src/views/system/role/form.vue
 create mode 100644 screen-vue/src/views/system/role/list.vue

diff --git a/screen-vue/src/components/Layout/proResizable.vue b/screen-vue/src/components/Layout/proResizable.vue
new file mode 100644
index 0000000..63d2f5f
--- /dev/null
+++ b/screen-vue/src/components/Layout/proResizable.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="resizable-layout-container">
+    <div 
+      class="sidebar-container"
+      :style="{ width: sidebarWidth + 'px' }"
+    >
+      <slot name="sidebar"></slot>
+      <div 
+        class="resize-handle" 
+        :class="{ dragging: isDragging }"
+        @mousedown="startDrag"
+      >
+        <div class="handle-indicator"></div>
+      </div>
+    </div>
+    <div class="main-container">
+      <slot name="main"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onUnmounted, defineProps, defineEmits, watch, onMounted } from 'vue'
+
+const props = defineProps({
+  defaultWidth: {
+    type: Number,
+    default: 180
+  },
+  minWidth: {
+    type: Number,
+    default: 160
+  },
+  maxWidth: {
+    type: Number,
+    default: 420
+  },
+  bgColor: {
+    type: String,
+    default: '#f8f9fa'
+  },
+  handleWidth: {
+    type: Number,
+    default: 8 
+  }
+})
+
+const emit = defineEmits(['width-change'])
+
+const sidebarWidth = ref(props.defaultWidth)
+const isDragging = ref(false)
+let startMouseX = 0
+let startWidth = 0
+
+watch([() => props.defaultWidth], (newVal) => {
+  sidebarWidth.value = newVal[0]
+})
+
+const startDrag = (e) => {
+  isDragging.value = true
+  startMouseX = e.clientX
+  startWidth = sidebarWidth.value
+  
+  document.body.style.cursor = 'ew-resize'
+  document.body.style.userSelect = 'none'
+  
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+const onMouseMove = (e) => {
+  if (!isDragging.value) return
+  
+  const offsetX = e.clientX - startMouseX
+  const targetWidth = startWidth + offsetX
+  
+  if (targetWidth >= props.minWidth && targetWidth <= props.maxWidth) {
+    sidebarWidth.value = targetWidth
+    if (Date.now() % 5 === 0) {
+      emit('width-change', targetWidth)
+    }
+  }
+}
+
+const onMouseUp = () => {
+  if (!isDragging.value) return
+  
+  isDragging.value = false
+  document.body.style.cursor = ''
+  document.body.style.userSelect = ''
+  
+  emit('width-change', sidebarWidth.value)
+}
+
+onMounted(() => {
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+})
+
+defineExpose({
+  setSidebarWidth: (width) => {
+    const safeWidth = Math.max(props.minWidth, Math.min(props.maxWidth, width))
+    sidebarWidth.value = safeWidth
+    emit('width-change', safeWidth)
+  }
+})
+</script>
+
+<style scoped>
+.resizable-layout-container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  overflow: hidden;
+}
+
+.sidebar-container {
+  height: 100%;
+  border-right: none;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  flex-shrink: 0;
+  background-color: v-bind(bgColor) !important;
+  padding: 0;
+  margin: 0;
+}
+
+.sidebar-container > div:first-child {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #d0d0d0 v-bind(bgColor);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.sidebar-container > div:first-child::-webkit-scrollbar { width: 6px }
+.sidebar-container > div:first-child::-webkit-scrollbar-track { background: v-bind(bgColor) }
+.sidebar-container > div:first-child::-webkit-scrollbar-thumb { 
+  background: #d0d0d0; 
+  border-radius: 3px;
+}
+.sidebar-container > div:first-child::-webkit-scrollbar-thumb:hover { background: #b0b0b0 }
+
+.resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: v-bind(handleWidth + 'px');
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 999;
+  background-color: transparent;
+  margin-left: 0;
+  padding-right: 0;
+  box-shadow: inset -4px 0 0 transparent;
+}
+
+.handle-indicator {
+  width: 1px;
+  height: 100%;
+  background-color: #e5e7eb;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: background-color 0.1s ease;
+}
+
+.resize-handle:hover .handle-indicator {
+  background-color: #d1d5db;
+}
+
+.resize-handle.dragging .handle-indicator {
+  background-color: #9ca3af;
+}
+
+.main-container {
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  min-width: 0;
+  width: auto;
+  background-color: v-bind(bgColor) !important;
+  padding: 0;
+  margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/components/Table/proTreeTable.vue b/screen-vue/src/components/Table/proTreeTable.vue
new file mode 100644
index 0000000..a7c4f7e
--- /dev/null
+++ b/screen-vue/src/components/Table/proTreeTable.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="custom-table-wrapper">
+    <div class="table-container">
+      <el-table
+        :data="tableData"
+        v-loading="loading"
+        class="data-table"
+        height="100%"
+        border="false"
+        :tree-props="treeProps"
+        lazy
+        :load="loadChildren"
+        row-key="id"
+      >
+        <slot name="columns" />
+      </el-table>
+      <div v-if="tableData.length === 0 && !loading" class="empty-tip">
+        <el-empty description="暂无数据" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, defineOptions } from 'vue'
+
+// 定义组件属性
+const props = defineProps({
+  tableData: {
+    type: Array,
+    default: () => []
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  treeProps: {
+    type: Object,
+    default: () => ({
+      children: 'children', 
+      hasChildren: 'hasChildren'
+    })
+  }
+})
+
+const emit = defineEmits(['load-children'])
+const loadChildren = (row, treeNode, resolve) => {
+  emit('load-children', { row, treeNode, resolve })
+}
+</script>
+
+<style scoped>
+.custom-table-wrapper {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  gap: 4px;
+  box-sizing: border-box;
+}
+
+.table-container {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  overflow: hidden !important;
+  padding: 4px;
+  box-sizing: border-box;
+}
+
+.data-table {
+  width: 100%;
+  --el-table-header-text-color: #333;
+  --el-table-row-hover-bg-color: #f8f9fa;
+  --el-table-border-color: transparent !important;
+}
+
+.data-table :deep(.el-table),
+.data-table :deep(.el-table__header-wrapper),
+.data-table :deep(.el-table__body-wrapper),
+.data-table :deep(.el-table__footer-wrapper) {
+  border: none !important;
+}
+
+.data-table :deep(.el-table__cell) {
+  border: none !important;
+  border-right: none !important;
+  border-bottom: 1px solid #f0f0f0 !important;
+}
+
+.data-table :deep(.el-table__header .el-table__cell) {
+  border-bottom: 1px solid #e5e7eb !important;
+}
+
+.empty-tip {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.table-container :deep(.el-table__body-wrapper)::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.table-container :deep(.el-table__body-wrapper)::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 4px;
+}
+
+.table-container :deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+.table-container :deep(.el-table__body-wrapper)::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* 树形表格展开/折叠图标样式优化 */
+.data-table :deep(.el-table__expand-icon) {
+  color: #666;
+  font-size: 14px;
+}
+.data-table :deep(.el-table__expand-icon--expanded) {
+  transform: rotate(90deg);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/system/menu/form.vue b/screen-vue/src/views/system/menu/form.vue
new file mode 100644
index 0000000..02409e3
--- /dev/null
+++ b/screen-vue/src/views/system/menu/form.vue
@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/system/menu/index.vue b/screen-vue/src/views/system/menu/index.vue
index 02409e3..7ddcf9b 100644
--- a/screen-vue/src/views/system/menu/index.vue
+++ b/screen-vue/src/views/system/menu/index.vue
@@ -1,8 +1,37 @@
 <template>
+  <ResizablePage 
+    :defaultWidth="200"
+    :minWidth="150"
+    :maxWidth="420"
+    bgColor="#fff" 
+  >
+    <template #sidebar>
+      <div class="sidebar-content">
+       
+      </div>
+    </template>
+    <template #main>
+      <div class="main-content">
+		  <vMeun />
+      </div>
+    </template>
+  </ResizablePage>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
+import ResizablePage from '@/components/Layout/proResizable.vue'
+import vMeun from './list.vue'
 </script>
 
-<style>
+<style scoped>
+.sidebar-content {
+  width: 100%;
+  height: 100%;
+}
+
+.main-content {
+  padding: 0px;
+  height: 100%;
+}
 </style>
\ No newline at end of file
diff --git a/screen-vue/src/views/system/menu/list.vue b/screen-vue/src/views/system/menu/list.vue
new file mode 100644
index 0000000..758f2a9
--- /dev/null
+++ b/screen-vue/src/views/system/menu/list.vue
@@ -0,0 +1,218 @@
+<template>
+	  <div class="data-manage-page">
+		  <CSearch
+		    @search="handleSearch"
+		    @reset="handleReset"
+		  >
+		    <el-form-item label="用户名称：" class="search-item">
+		      <el-input
+		        v-model="searchForm.uname"
+		        placeholder="请输入用户名称"
+		        clearable
+		        class="search-input"
+		      />
+		    </el-form-item>
+		    <el-form-item label="登录账户：" class="search-item">
+		      <el-input
+		        v-model="searchForm.userName"
+		        placeholder="请输入登录账户"
+		        clearable
+		        class="search-input"
+		      />
+		    </el-form-item>
+		    <el-form-item label="用户状态：" class="search-item">
+		      <el-select
+		        v-model="searchForm.ustatus"
+		        placeholder="请选择用户状态"
+		        clearable
+		        class="search-select"
+		      >
+		        <el-option label="停用" value="0" />
+		        <el-option label="在用" value="1" />
+		        <el-option label="锁定" value="2" />
+		      </el-select>
+		    </el-form-item>
+		  </CSearch>
+		  
+		  
+		  <div class="main-wrapper">
+		    <div class="main-section">
+		      <div class="action-section">
+		        <el-button type="primary" icon="Plus" @click="handleAdd">
+		          新增
+		        </el-button>
+		        <el-button type="success" icon="Download" @click="handleExport">
+		          导出
+		        </el-button>
+		      </div>
+		      <TreeTable
+		        :table-data="tableData"
+		        :loading="loading"
+		        @load-children="handleLoadChildren"
+		      >
+		        <template #columns>
+		          <el-table-column prop="name" label="名称" width="350" :tree-node="true" />
+		          <el-table-column prop="desc" label="描述" width="400" />
+		          <el-table-column prop="createTime" label="创建时间" width="200" />
+		      	<el-table-column prop="createTime" label="创建时间" width="200" />
+		      	<el-table-column prop="createTime" label="创建时间" width="200" />
+		      	<el-table-column prop="createTime" label="创建时间" width="200" />
+		      	<el-table-column prop="createTime" label="创建时间" width="200" fixed="right" />
+		        </template>
+		      </TreeTable>
+		    </div>
+		  </div>
+	  </div>
+	
+	
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import CSearch from '@/components/Search/proSearch.vue'
+import TreeTable from '@/components/Table/proTreeTable.vue'
+
+
+const searchForm = reactive({
+  uname: '',
+  ustatus: '',
+  userName: ''
+})
+
+// 模拟树形表格数据（一级节点）
+const tableData = ref([
+  {
+    id: 1,
+    name: '一级节点1',
+    desc: '这是一级节点1（可展开到二级）',
+    createTime: '2026-03-04',
+    hasChildren: true // 标记有子节点
+  },
+  {
+    id: 2,
+    name: '一级节点2',
+    desc: '这是一级节点2（无下级）',
+    createTime: '2026-03-04',
+    hasChildren: false
+  },
+  {
+    id: 3,
+    name: '一级节点3',
+    desc: '这是一级节点3（可展开到二级，二级可展开到三级）',
+    createTime: '2026-03-04',
+    hasChildren: true
+  }
+])
+
+const loading = ref(false)
+const handleLoadChildren = async ({ row, resolve }) => {
+  loading.value = true
+  try {
+    // 模拟接口请求延迟
+    await new Promise(resolve => setTimeout(resolve, 800))
+    
+    const nodeId = row.id.toString()
+    const level = nodeId.split('-').length // 通过ID分割判断层级：1=一级，2=二级，3=三级...
+    
+    let childrenData = []
+    // 一级节点的子节点（二级）
+    if (level === 1) {
+      childrenData = [
+        {
+          id: `${row.id}-1`,
+          name: `二级节点-${row.id}-1`,
+          desc: `这是【${row.name}】的二级子节点1`,
+          createTime: '2026-03-04',
+          // 只有一级节点3的二级子节点1可以展开到三级
+          hasChildren: row.id === 3 ? true : false
+        },
+        {
+          id: `${row.id}-2`,
+          name: `二级节点-${row.id}-2`,
+          desc: `这是【${row.name}】的二级子节点2`,
+          createTime: '2026-03-04',
+          hasChildren: false
+        },
+        {
+          id: `${row.id}-3`,
+          name: `二级节点-${row.id}-3`,
+          desc: `这是【${row.name}】的二级子节点3`,
+          createTime: '2026-03-04',
+          hasChildren: false
+        }
+      ]
+    } 
+    // 二级节点的子节点（三级）
+    else if (level === 2) {
+      childrenData = [
+        {
+          id: `${row.id}-1`,
+          name: `三级节点-${row.id}-1`,
+          desc: `这是【${row.name}】的三级子节点1`,
+          createTime: '2026-03-04',
+          hasChildren: false
+        },
+        {
+          id: `${row.id}-2`,
+          name: `三级节点-${row.id}-2`,
+          desc: `这是【${row.name}】的三级子节点2`,
+          createTime: '2026-03-04',
+          hasChildren: false
+        }
+      ]
+    }
+    
+    // 通过 resolve 回调返回子节点数据
+    resolve(childrenData)
+  } catch (error) {
+    console.error('加载子节点失败:', error)
+    resolve([]) // 加载失败返回空数组
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.data-manage-page {
+  width: 100%;
+  height: 100%;
+  padding: 4px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden !important;
+}
+
+.main-wrapper {
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+  min-height: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  margin: 0 !important;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.main-section {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.action-section {
+  padding: 12px 16px;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+:deep(.el-button .el-icon) {
+  margin-right: 4px;
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/system/role/form.vue b/screen-vue/src/views/system/role/form.vue
new file mode 100644
index 0000000..02409e3
--- /dev/null
+++ b/screen-vue/src/views/system/role/form.vue
@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/system/role/index.vue b/screen-vue/src/views/system/role/index.vue
index 02409e3..c738625 100644
--- a/screen-vue/src/views/system/role/index.vue
+++ b/screen-vue/src/views/system/role/index.vue
@@ -1,8 +1,37 @@
 <template>
+  <ResizablePage 
+    :defaultWidth="200"
+    :minWidth="150"
+    :maxWidth="420"
+    bgColor="#fff" 
+  >
+    <template #sidebar>
+      <div class="sidebar-content">
+       
+      </div>
+    </template>
+    <template #main>
+      <div class="main-content">
+		  <vUser />
+      </div>
+    </template>
+  </ResizablePage>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
+import ResizablePage from '@/components/Layout/proResizable.vue'
+import vUser from './list.vue'
 </script>
 
-<style>
+<style scoped>
+.sidebar-content {
+  width: 100%;
+  height: 100%;
+}
+
+.main-content {
+  padding: 0px;
+  height: 100%;
+}
 </style>
\ No newline at end of file
diff --git a/screen-vue/src/views/system/role/list.vue b/screen-vue/src/views/system/role/list.vue
new file mode 100644
index 0000000..291ecfc
--- /dev/null
+++ b/screen-vue/src/views/system/role/list.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="data-manage-page">
+    <CSearch
+      @search="handleSearch"
+      @reset="handleReset"
+    >
+      <el-form-item label="用户名称：" class="search-item">
+        <el-input
+          v-model="searchForm.uname"
+          placeholder="请输入用户名称"
+          clearable
+          class="search-input"
+        />
+      </el-form-item>
+      <el-form-item label="登录账户：" class="search-item">
+        <el-input
+          v-model="searchForm.userName"
+          placeholder="请输入登录账户"
+          clearable
+          class="search-input"
+        />
+      </el-form-item>
+      <el-form-item label="用户状态：" class="search-item">
+        <el-select
+          v-model="searchForm.ustatus"
+          placeholder="请选择用户状态"
+          clearable
+          class="search-select"
+        >
+          <el-option label="停用" value="0" />
+          <el-option label="在用" value="1" />
+          <el-option label="锁定" value="2" />
+        </el-select>
+      </el-form-item>
+    </CSearch>
+
+    <div class="main-wrapper">
+      <div class="main-section">
+        <div class="action-section">
+          <el-button type="primary" icon="Plus" @click="handleAdd">
+            新增
+          </el-button>
+          <el-button type="success" icon="Download" @click="handleExport">
+            导出
+          </el-button>
+        </div>
+        <STable
+          :table-data="tableData"
+          :loading="loading"
+          :pagination="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        >
+          <template #columns>
+            <el-table-column prop="createTime" label="记录日期" />
+            <el-table-column prop="userName" label="登录账户" />
+            <el-table-column prop="uname" label="用户名称" />
+            <el-table-column prop="sex" label="性别" />
+            <el-table-column prop="email" label="电子邮箱" />
+            <el-table-column prop="phone" label="联系电话" />
+            <el-table-column prop="ustatus" label="状态" min-width="100" align="center">
+              <template #default="scope">
+                <el-tag 
+                  :type="scope.row.ustatus === '1' ? 'success' : scope.row.ustatus === '2' ? 'warning' : 'danger'"
+                >
+                  {{ getStatusText(scope.row.ustatus) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="180" align="center" fixed="right">
+              <template #default="scope">
+                <!-- 编辑按钮添加 Edit 图标 -->
+                <el-button size="small" type="primary" link @click="handleEdit(scope.row)">
+                  <el-icon><Edit /></el-icon>
+                  编辑
+                </el-button>
+                <!-- 删除按钮添加 Delete 图标 -->
+                <el-button size="small" type="danger" link @click="handleDelete(scope.row)">
+                  <el-icon><Delete /></el-icon>
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </template>
+        </STable>
+      </div>
+    </div>
+	
+    <PDialog
+      v-model="dialogVisible"
+      :title="isEdit ? '编辑数据' : '新增数据'"
+      @close="handleDialogClose"
+      @reset="handleDialogReset"
+      @confirm="handleSave"
+    >
+      <VForm ref="formComponentRef" :form-data="formData" :is-edit="isEdit" />
+    </PDialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus, Download, Edit, Delete } from '@element-plus/icons-vue'
+import { getHomeUserList } from '@/api/bizUser'
+
+import CSearch from '@/components/Search/proSearch.vue'
+import STable from '@/components/Table/proTable.vue'
+import PDialog from '@/components/Dialog/proDialog.vue'
+import VForm from './form.vue'
+
+const formComponentRef = ref(null)
+
+const loading = ref(false)
+const searchForm = reactive({
+  uname: '',
+  ustatus: '',
+  userName: ''
+})
+
+const pagination = reactive({
+  pageNum: 1,
+  pageSize: 20,
+  total: 0
+})
+
+const tableData = ref([])
+
+const dialogVisible = ref(false)
+const isEdit = ref(false)
+const formData = ref({})
+
+async function getDataList() {
+  loading.value = true
+  try {
+    const reqParmas = {
+      ... searchForm,
+      pageNum: pagination.pageNum,
+      pageSize: pagination.pageSize,
+    }
+    const res = await getHomeUserList(reqParmas);
+    pagination.total = res.total;
+    tableData.value = res.list || [];
+  } catch (error) {
+    console.error('获取数据失败:', error);
+    tableData.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+const getStatusText = (status) => {
+  const statusMap = {
+    '0': '停用',
+    '1': '在用',
+    '2': '锁定'
+  }
+  return statusMap[status] || '未知'
+}
+
+const handleSearch = () => {
+  pagination.pageNum = 1
+  getDataList()
+}
+
+const handleReset = () => {
+  Object.assign(searchForm, {
+    uname: '',
+    ustatus: '',
+    userName: ''
+  })
+  pagination.pageNum = 1
+  getDataList()
+}
+
+const handleAdd = () => {
+  isEdit.value = false
+  formData.value = {}
+  dialogVisible.value = true
+}
+
+const handleEdit = (row) => {
+  isEdit.value = true
+  formData.value = { ...row }
+  dialogVisible.value = true
+}
+
+const handleExport = () => {
+  ElMessage.success('开始导出数据...')
+}
+
+const handleDelete = (row) => {
+  ElMessage.warning(`删除ID为 ${row.id} 的数据`)
+}
+
+const handleSizeChange = (val) => {
+  pagination.pageSize = val
+  getDataList()
+}
+
+const handleCurrentChange = (val) => {
+  pagination.pageNum = val
+  getDataList()
+}
+
+const handleDialogClose = () => {
+  formData.value = {}
+  isEdit.value = false
+  dialogVisible.value = false
+}
+
+const handleDialogReset = () => {
+  if (formComponentRef.value) {
+    formComponentRef.value.resetForm()
+    ElMessage.info('表单已重置')
+  }
+}
+
+const handleSave = async () => {
+  if (formComponentRef.value) {
+    const isValid = await formComponentRef.value.validate()
+    if (!isValid) {
+      ElMessage.warning('表单验证失败，请检查必填项')
+      return
+    }
+  }
+
+  setTimeout(() => {
+    ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
+    dialogVisible.value = false
+    getDataList()
+  }, 500)
+}
+
+onMounted(() => {
+  getDataList()
+})
+</script>
+
+<style scoped>
+.data-manage-page {
+  width: 100%;
+  height: 100%;
+  padding: 4px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden !important;
+}
+
+.main-wrapper {
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+  min-height: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  margin: 0 !important;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.main-section {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.action-section {
+  padding: 12px 16px;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+:deep(.el-button .el-icon) {
+  margin-right: 4px;
+}
+</style>
\ No newline at end of file