diff --git a/.env.development b/.env.development
index a1c6593..6f56968 100644
--- a/.env.development
+++ b/.env.development
@@ -5,5 +5,5 @@ VITE_APP_TITLE = 运营云后台管理系统
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://192.168.18.9:8080/'
+VITE_APP_BASE_API = 'http://192.168.18.99:8080/'
 VITE_APP_PLATFORM = 'http://localhost:9000/platform'
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 9c34e07..4faf397 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,4 @@ selenium-debug.log
 
 package-lock.json
 yarn.lock
+public/临时记录.txt
diff --git a/src/api/goods/info.js b/src/api/goods/info.js
new file mode 100644
index 0000000..46c79d7
--- /dev/null
+++ b/src/api/goods/info.js
@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+
+// 获取商品管理列表
+export function getGoodManageInfo(query) {
+  return request({
+    url: '/goodInfoManage/getGoodManage',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+
+
+
+
+
+
+
+
+// 查询岗位详细
+export function getPost(postId) {
+  return request({
+    url: '/system/post/' + postId,
+    method: 'get'
+  })
+}
+
+// 新增岗位
+export function addPost(data) {
+  return request({
+    url: '/system/post',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改岗位
+export function updatePost(data) {
+  return request({
+    url: '/system/post',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除岗位
+export function delPost(postId) {
+  return request({
+    url: '/system/post/' + postId,
+    method: 'delete'
+  })
+}
diff --git a/src/assets/styles/custom.scss b/src/assets/styles/custom.scss
index 11e890a..14e520d 100644
--- a/src/assets/styles/custom.scss
+++ b/src/assets/styles/custom.scss
@@ -9,6 +9,29 @@
       padding: 16px 8px 0 16px;
       border-radius: 16px;
       background: #fff;
+      .order-tab {
+        width: 100%;
+        .el-tabs__nav-wrap::after {
+          background: transparent !important;
+        }
+        .el-tabs__active-bar {
+          height: 3px !important;
+          border-radius: 4px;
+        }
+        .el-descriptions__label,
+        .el-descriptions__content {
+          font-size: 16px !important;
+        }
+        .cell-item {
+          display: inline-flex;
+        }
+        .el-descriptions__label {
+          color: #999;
+        }
+        .el-descriptions__content {
+          color: #333;
+        }
+      }
     }
     .search-bar {
       display: flex;
@@ -21,7 +44,8 @@
 
       .search-bar-right {
         width: 100px;
-        text-align: center;
+        text-align: right;
+        padding-right: 8px;
       }
 
       .demo-form-inline {
@@ -53,9 +77,8 @@
       overflow: hidden;
       background-color: #fff;
       position: relative;
-      .el-icon-custom {
-        vertical-align: middle;
-        cursor: pointer;
+      .el-table__empty-text {
+        width: 200px;
       }
     }
 
@@ -164,9 +187,42 @@
     .color-red {
       color: red;
     }
+  }  
+  .el-button {
+    font-size: 12px !important;
+    font-weight: 400;
   }
 }
+// 页面添加的自定义容器，上下撑满
 .customer-control {
-    position: absolute;
-    height: 100%;
+  position: absolute;
+  height: 100%;
+  left: 0;
+  right: 0;
+}
+// 表格组件中的各插槽元素自定义样式
+.custom-tooltip-content {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 3px 0;
+}
+.el-icon-custom {
+  vertical-align: middle;
+  cursor: pointer;
+  font-size: 16px;
+  color: #fff;
+}
+.table-cell-img-box {
+  width: 60px;
+  height: 60px;
+  overflow: hidden; /* 隐藏超出部分 */
+  display: flex;    /* 使用 Flex 布局居中 */
+  justify-content: center;
+  align-items: center;
+  .table-cell-img {
+    min-width: 100%;  /* 至少撑满宽度 */
+    min-height: 100%; /* 至少撑满高度 */
+    object-fit: cover; /* 保持比例并覆盖容器 */
+  }
 }
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 9446cf6..bddd6ac 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -84,7 +84,7 @@ div:focus {
 }
 
 .inlineBlock {
-  display: block;
+  display: inline-block;
 }
 
 .clearfix {
diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss
index b3240c3..0ba8955 100644
--- a/src/assets/styles/ruoyi.scss
+++ b/src/assets/styles/ruoyi.scss
@@ -61,7 +61,7 @@
 }
 
 .el-form .el-form-item__label {
-  font-weight: 700;
+  font-weight: 400;
 }
 .el-dialog:not(.is-fullscreen) {
   margin-top: 6vh !important;
diff --git a/src/components/tableComponent.vue b/src/components/tableComponent.vue
index b34b22f..7c065f4 100644
--- a/src/components/tableComponent.vue
+++ b/src/components/tableComponent.vue
@@ -2,9 +2,9 @@
   <div class="custom-table-container">
     <div class="custom-table-tool">
       <el-form :inline="true" class="demo-form-inline" :label-width="'auto'">
-        <el-form-item label="每页显示" style="margin-bottom: 10px;">
+        <el-form-item label="每页显示" style="margin-bottom: 10px">
           <el-select
-            v-model="internalPageSize"
+            v-model="computedPageSize"
             placeholder="请选择"
             style="width: 100px"
             @change="pageSizeChange($event)"
@@ -20,11 +20,13 @@
       </el-form>
     </div>
     <el-table
-      style="flex: 1; display: flex; flex-direction: column"
+      style="flex: 1; display: flex; flex-direction: column; text-align: center"
       :max-height="tableMaxHeight"
-      :data="pagedTableData"
+      v-loading="loading"
+      :data="tableData"
       :border="showBorder"
       :stripe="showStripe"
+      :fit="true"
       v-bind="$attrs"
       :header-cell-class-name="headerCellClassName"
       :cell-class-name="cellClassName"
@@ -57,26 +59,32 @@
 
     <div v-if="showPagination" class="pagination-container">
       <span class="custom-pagination-text">
-        第{{ internalPage }}页，共{{
-          Math.ceil(internalTotal / internalPageSize)
-        }}页，共{{ internalTotal }}条
+        第{{ currentPage }}页，共{{
+          Math.ceil(total / computedPageSize)
+        }}页，共{{ total }}条
       </span>
       <div
-        style="flex: 1; display: flex; justify-content: end; text-align: right"
+        style="
+          flex: 1;
+          display: flex;
+          justify-content: end;
+          text-align: right;
+          padding-right: 120px;
+        "
       >
         <el-pagination
-          v-model:current-page="internalPage"
-          v-model:page-size="internalPageSize"
+          v-model:current-page="computedCurrentPage"
+          v-model:page-size="computedPageSize"
           :page-sizes="pageSizes"
           :small="small"
           :disabled="disabled"
           :background="background"
-          layout="prev, pager, next"
-          :total="internalTotal"
+          layout="prev, pager, next, jumper"
+          :total="total"
           @current-change="handleCurrentChange"
         />
         <span class="custom-pagination-size">
-          {{ internalPageSize }}条/页
+          {{ computedPageSize }}条/页
         </span>
       </div>
     </div>
@@ -87,6 +95,10 @@
 import { ref, watch, computed, onMounted, onBeforeUnmount } from "vue";
 
 const props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false,
+  },
   // 表格数据
   tableData: {
     type: Array,
@@ -97,6 +109,21 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  // 当前页码（由外部传入）
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  // 每页数量（由外部传入）
+  pageSize: {
+    type: Number,
+    default: 10,
+  },
+  // 总条数
+  total: {
+    type: Number,
+    default: 0,
+  },
   // 是否显示分页
   showPagination: {
     type: Boolean,
@@ -149,56 +176,57 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["page-change", "selection-change"]);
+const emit = defineEmits([
+  "update:currentPage",
+  "update:pageSize",
+  "page-change",
+  "selection-change",
+]);
 
-// 内部管理的分页状态
-const internalPage = ref(1);
-const internalPageSize = ref(props.pageSizes?.[0] || 10);
-const internalTotal = ref(0);
-
-// 计算当前页显示的数据
-const pagedTableData = computed(() => {
-  const start = (internalPage.value - 1) * internalPageSize.value;
-  const end = start + internalPageSize.value;
-  return props.tableData.slice(start, end);
+// 每页数量（双向绑定）
+const computedPageSize = computed({
+  get: () => props.pageSize,
+  set: (val) => emit('update:pageSize', val)
+});
+// 当前页码（双向绑定）
+const computedCurrentPage = computed({
+  get: () => props.currentPage,
+  set: (val) => emit('update:currentPage', val)
 });
 
-// 计算总页数（可根据实际需求调整）
-watch(
-  () => props.tableData,
-  (newData) => {
-    internalTotal.value = newData.length; // 示例：假设总数据量是当前显示的3倍
-  },
-  { immediate: true }
-);
+// 监听外部传入的pageSize变化
+// watch(
+//   () => props.pageSize,
+//   (newVal) => {
+//     internalPageSize.value = newVal;
+//   }
+// );
 
 // 分页大小改变
 const pageSizeChange = (val) => {
   console.log(`每页 ${val} 条`);
   internalPageSize.value = val;
-  internalPage.value = 1; // 重置为第一页
-  console.log(internalPage.value, internalPageSize.value);
-  emitPageChange();
+  console.log(props.currentPage, internalPageSize.value);
+  emit("update:pageSize", val);
+  emit("page-change", {
+    page: props.currentPage,
+    pageSize: val,
+  });
 };
 
 // 当前页改变
 const handleCurrentChange = (val) => {
   console.log(`当前页改变 ${val} 页`);
-  internalPage.value = val;
-  emitPageChange();
-};
-
-// 触发分页变化事件
-const emitPageChange = () => {
   emit("page-change", {
-    page: internalPage.value,
+    page: val,
     pageSize: internalPageSize.value,
   });
 };
 
 // 多选框变化
 const handleSelectionChange = (selection) => {
-  emit("selection-change", selection);
+  const selectedIds = selection.map((row) => row.id);
+  emit("selection-change", selection, selectedIds);
 };
 
 const tableRef = ref(null);
@@ -241,117 +269,123 @@ onBeforeUnmount(() => {
   flex-direction: column;
   height: 100%; /* 关键：继承父容器高度 */
   overflow: hidden; /* 防止内容溢出 */
-}
-/* 表格弹性布局 */
-:deep(.el-table) {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
 
-  /* 表头固定 */
-  .el-table__header-wrapper {
-    flex-shrink: 0;
-  }
-
-  /* 表体可滚动 */
-  .el-table__body-wrapper {
+  /* 表格弹性布局 */
+  :deep(.el-table) {
     flex: 1;
-    overflow: auto;
-  }
-}
+    display: flex;
+    flex-direction: column;
 
-.demo-form-inline {
-  text-align: left;
-  padding-left: 20px;
-}
+    /* 表头固定 */
+    .el-table__header-wrapper {
+      flex-shrink: 0;
+    }
 
-.pagination-container {
-  margin-top: 10px;
-  padding: 0 20px;
-  display: flex;
-  justify-content: space-between;
-  color: #999;
-  font-weight: 400;
-}
-.custom-pagination-text {
-  flex: 1;
-  text-align: left;
-  line-height: 32px;
-  font-size: 14px;
-}
-
-.custom-pagination-size {
-  text-align: right;
-  line-height: 32px;
-  margin-left: 20px;
-  font-size: 14px;
-}
-
-/* 去除表格边框 */
-:deep(.el-table) {
-  --el-table-border-color: transparent;
-}
-
-/* 自定义鼠标悬停颜色 */
-:deep(.el-table__body tr:hover > td) {
-  background-color: rgba(37, 191, 130, 0.1) !important;
-}
-
-/* 自定义表头样式 */
-:deep(.custom-header) {
-  background-color: #fff !important;
-  color: #999;
-  font-weight: 400;
-}
-
-:deep(.el-pagination) {
-  /* 整体分页样式 */
-  font-size: 14px;
-  font-weight: normal;
-
-  /* 页码按钮容器 */
-  .el-pager {
-    /* 所有页码项 */
-    li {
-      font-weight: 400; /* 普通页码字体不加粗 */
-      color: #606266; /* 普通页码颜色 */
-      background: transparent;
-      font-size: 14px;
-
-      /* 当前选中页码 */
-      &.active,
-      &.is-active {
-        font-weight: 400 !important; /* 当前页不加粗 */
-        color: #25bf82 !important; /* 自定义当前页颜色 - 橙色示例 */
-      }
-
-      /* 悬停状态 */
-      &:hover {
-        color: #409eff;
-      }
+    /* 表体可滚动 */
+    .el-table__body-wrapper {
+      flex: 1;
+      overflow: auto;
     }
   }
 
-  /* 上一页/下一页按钮 */
-  .btn-prev,
-  .btn-next {
+  .demo-form-inline {
+    text-align: left;
+    padding-left: 20px;
+    padding-top: 4px;
+  }
+
+  .pagination-container {
+    margin-top: 10px;
+    padding: 0 30px 0 20px;
+    display: flex;
+    justify-content: space-between;
+    color: #999;
     font-weight: 400;
-
-    &:disabled {
-      color: #c0c4cc;
-    }
+  }
+  .custom-pagination-text {
+    flex: 1;
+    text-align: left;
+    line-height: 32px;
+    font-size: 14px;
   }
 
-  /* 每页条数选择器 */
-  .el-pagination__sizes {
-    .el-input__inner {
+  .custom-pagination-size {
+    text-align: right;
+    line-height: 32px;
+    margin-left: 20px;
+    font-size: 14px;
+  }
+
+  /* 去除表格边框 */
+  :deep(.el-table) {
+    --el-table-border-color: transparent;
+  }
+
+  /* 自定义鼠标悬停颜色 */
+  :deep(.el-table__body tr:hover > td) {
+    background-color: rgba(37, 191, 130, 0.1) !important;
+  }
+
+  /* 自定义表头样式 */
+  :deep(.custom-header) {
+    background-color: #fff !important;
+    color: #999;
+    font-weight: 400;
+  }
+
+  :deep(.el-pagination) {
+    /* 整体分页样式 */
+    font-size: 14px;
+    font-weight: normal;
+
+    /* 页码按钮容器 */
+    .el-pager {
+      /* 所有页码项 */
+      li {
+        font-weight: 400; /* 普通页码字体不加粗 */
+        color: #606266; /* 普通页码颜色 */
+        background: transparent;
+        font-size: 14px;
+
+        /* 当前选中页码 */
+        &.active,
+        &.is-active {
+          font-weight: 400 !important; /* 当前页不加粗 */
+          color: #25bf82 !important; /* 自定义当前页颜色 - 橙色示例 */
+        }
+
+        /* 悬停状态 */
+        &:hover {
+          color: #409eff;
+        }
+      }
+    }
+
+    /* 上一页/下一页按钮 */
+    .btn-prev,
+    .btn-next {
       font-weight: 400;
-    }
-  }
 
-  /* 跳页输入框 */
-  .el-pagination__jump {
-    font-weight: 400;
+      &:disabled {
+        color: #c0c4cc;
+      }
+    }
+
+    /* 每页条数选择器 */
+    .el-pagination__sizes {
+      .el-input__inner {
+        font-weight: 400;
+      }
+    }
+
+    /* 跳页输入框 */
+    .el-pagination__jump {
+      font-weight: 400;
+      position: absolute;
+      right: 16px;
+      bottom: 12px;
+      color: #999;
+    }
   }
 }
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 166acbd..a06b99f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -71,11 +71,25 @@ export const constantRoutes = [
         path: '/index',
         component: () => import('@/views/index'),
         name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
+        meta: { title: '首页', icon: 'chart', affix: true }
       }
     ]
   },
   {
+    path: '/goods',
+    component: Layout,
+    hidden: true,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'addGoods/:activeTab?',
+        component: () => import('@/views/goods/addGoods'),
+        name: 'addGoods',
+        meta: { title: '新增商品', icon: '' }
+      }
+    ]
+  },
+   {
     path: '/user',
     component: Layout,
     hidden: true,
@@ -129,6 +143,46 @@ export const constantRoutes = [
       }
     ],
   },
+  {
+    path: '/goods',
+    name: "goods",
+    component: Layout,
+    hidden: false,
+    alwaysShow: true,
+    redirect: 'noredirect',
+    meta: {
+      icon: "example",
+      link: null,
+      noCache: false,
+      title: "商品中心",
+    },
+    children: [
+      {
+        path: 'goods/goodsManage',
+        component: () => import('@/views/goods/goodsManage'),
+        name: 'goodsManage',
+        hidden: false,
+        meta: {
+          title: "商品信息管理",
+          icon: "",
+          noCache: false,
+          link: null,
+        },
+      },
+      {
+        path: 'goods/goodsCategory',
+        component: () => import('@/views/goods/goodsCategory'),
+        name: 'goodsCategory',
+        hidden: false,
+        meta: {
+          title: "商品分类设置",
+          icon: "",
+          noCache: false,
+          link: null,
+        },
+      }
+    ],
+  },
   {
     path: '/plant',
     name: "plant",
diff --git a/src/views/customer/customerCategory.vue b/src/views/customer/customerCategory.vue
index 15bad66..959f8f6 100644
--- a/src/views/customer/customerCategory.vue
+++ b/src/views/customer/customerCategory.vue
@@ -27,8 +27,7 @@
                 />
               </el-form-item>
               <el-form-item label="用户状态" prop="userStatus">
-                <el-select v-model="formInline.userStatus" placeholder="请选择">
-                  <el-option label="全部" value="99" />
+                <el-select v-model="formInline.userStatus" placeholder="请选择" clearable>
                   <el-option label="异常" value="0" />
                   <el-option label="正常" value="1" />
                 </el-select>
@@ -87,6 +86,7 @@
           :header-cell-class-name="getHeaderClass"
           @page-change="handlePaginationChange"
           @selection-change="handleSelectionChange"
+          :total="tableTotal" :current-page="formInline.current" :page-size="formInline.size"
         >
           <!-- 自定义-状态 -->
           <template #userStatus="slotProps">
@@ -98,26 +98,36 @@
             >
           </template>
 
-          <!-- 自定义-操作 -->
+          <!-- 自定义-操作 -->         
           <template #action="slotProps">
-            <el-dropdown>
+            <el-tooltip effect="dark" placement="bottom-end">
+              <template #content>
+                <div class="custom-tooltip-content">
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="seeDetails(slotProps.row)"
+                  >
+                    <View />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="handleEdit(slotProps.row)"
+                  >
+                    <Edit />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="handleDelete(slotProps.row)"
+                  >
+                    <Delete />
+                  </el-icon>
+                </div>
+              </template>
+
               <span class="el-dropdown-link">
                 <el-icon><More /></el-icon>
               </span>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item @click="handleEdit(slotProps.row, 1)"
-                    >Action 1</el-dropdown-item
-                  >
-                  <el-dropdown-item @click="handleEdit(slotProps.row, 2)"
-                    >Action 2</el-dropdown-item
-                  >
-                  <el-dropdown-item @click="handleEdit(slotProps.row, 3)"
-                    >Action 3</el-dropdown-item
-                  >
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
+            </el-tooltip>
           </template>
         </tableComponent>
       </div>
@@ -137,13 +147,15 @@ const formInline = reactive({
   userCategoryName: "",
   accountNumber: "",
   phoneNumber: "",
-  sex: "99",
-  userStatus: "99",
-  userCategory: "99",
+  sex: "",
+  userStatus: "",
+  userCategory: "",
   unitPrice: "",
   ordersNums: "",
   startDate: "",
   endDate: "",
+  current: 1,
+  size: 10,
 });
 
 // 禁用开始日期的逻辑（不能晚于已选的结束日期）
@@ -174,20 +186,22 @@ const resetForm = () => {
 
 // 表格数据
 const tableData = ref([]);
+const tableLoading = ref(false);
+const tableTotal = ref(0);
+let nowClickRow = ref({});
 // 列配置
-const columns = ref([]);
-const columns1 = ref([
+const columns = ref([
   { prop: "id", label: "ID" },
   { prop: "nickname", label: "昵称", width: "120" },
   { prop: "userName", label: "姓名" },
-  { prop: "accountNumber", label: "账号" },
+  { prop: "accountNumber", label: "账号", width: "120" },
   { prop: "phoneNumber", label: "手机号", width: "120" },
   { prop: "sex", label: "性别" },
   { prop: "userStatus", label: "用户状态", slotName: "userStatus" },
   { prop: "userCategory", label: "用户分类" },
   { prop: "unitPrice", label: "客单价" },
   { prop: "ordersNums", label: "订单数目" },
-  { prop: "action", label: "操作", slotName: "action", width: "180" },
+  { prop: "action", label: "操作", slotName: "action" },
 ]);
 
 // 生成食物主题昵称
@@ -230,7 +244,7 @@ const generateFoodNickname = () => {
 // 生成模拟数据
 const generateMockData = () => {
   return Mock.mock({
-    "list|30": [
+    "list|10": [
       {
         "id|+1": 10000,
         nickname: () => generateFoodNickname(), //昵称
@@ -252,6 +266,7 @@ const loadData = () => {
   // 模拟API请求延迟
   setTimeout(() => {
     tableData.value = generateMockData();
+    tableTotal.value = tableData.value.length;
   }, 500);
 };
 // 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
@@ -269,12 +284,20 @@ const handleSelectionChange = (selection) => {
   console.log("选中项:", selection);
 };
 
-let nowClickRow = ref({});
-// 编辑操作
-const handleEdit = (row, num) => {
+// 查看详情
+const seeDetails = (row) => {
   nowClickRow.value = row;
-  console.log("编辑的行:", row);
-  console.log("第几个按钮:", num);
+  console.log("要查看详情的行:", row);
+};
+// 编辑操作
+const handleEdit = (row) => {
+  nowClickRow.value = row;
+  console.log("要编辑的行:", row);
+};
+// 删除操作
+const handleDelete = (row) => {
+  nowClickRow.value = row;
+  console.log("要删除的行:", row);
 };
 
 const titleRef = ref(null);
@@ -299,7 +322,6 @@ const calculateTableHeight = () => {
 };
 // 组件挂载时加载数据
 onMounted(() => {
-  columns.value = columns1.value;
   loadData();
 
   calculateTableHeight();
diff --git a/src/views/customer/customerManage.vue b/src/views/customer/customerManage.vue
index 027f864..4b0e3db 100644
--- a/src/views/customer/customerManage.vue
+++ b/src/views/customer/customerManage.vue
@@ -48,15 +48,21 @@
                 />
               </el-form-item>
               <el-form-item label="性别" prop="sex">
-                <el-select v-model="formInline.sex" placeholder="请选择">
-                  <el-option label="全部" value="99" />
+                <el-select
+                  v-model="formInline.sex"
+                  placeholder="请选择"
+                  clearable
+                >
                   <el-option label="男" value="1" />
                   <el-option label="女" value="2" />
                 </el-select>
               </el-form-item>
               <el-form-item label="用户状态" prop="userStatus">
-                <el-select v-model="formInline.userStatus" placeholder="请选择">
-                  <el-option label="全部" value="99" />
+                <el-select
+                  v-model="formInline.userStatus"
+                  placeholder="请选择"
+                  clearable
+                >
                   <el-option label="异常" value="0" />
                   <el-option label="正常" value="1" />
                 </el-select>
@@ -65,8 +71,8 @@
                 <el-select
                   v-model="formInline.userCategory"
                   placeholder="请选择"
+                  clearable
                 >
-                  <el-option label="全部" value="99" />
                   <el-option label="活跃/低消费" value="1" />
                   <el-option label="活跃/中消费" value="2" />
                   <el-option label="活跃/高消费" value="3" />
@@ -148,6 +154,7 @@
           :header-cell-class-name="getHeaderClass"
           @page-change="handlePaginationChange"
           @selection-change="handleSelectionChange"
+          :total="tableTotal" :current-page="formInline.current" :page-size="formInline.size"
         >
           <!-- 自定义-状态 -->
           <template #userStatus="slotProps">
@@ -159,26 +166,36 @@
             >
           </template>
 
-          <!-- 自定义-操作 -->
+          <!-- 自定义-操作 -->         
           <template #action="slotProps">
-            <el-dropdown>
+            <el-tooltip effect="dark" placement="bottom-end">
+              <template #content>
+                <div class="custom-tooltip-content">
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="seeDetails(slotProps.row)"
+                  >
+                    <View />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="handleEdit(slotProps.row)"
+                  >
+                    <Edit />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="handleDelete(slotProps.row)"
+                  >
+                    <Delete />
+                  </el-icon>
+                </div>
+              </template>
+
               <span class="el-dropdown-link">
                 <el-icon><More /></el-icon>
               </span>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item @click="handleEdit(slotProps.row, 1)"
-                    >Action 1</el-dropdown-item
-                  >
-                  <el-dropdown-item @click="handleEdit(slotProps.row, 2)"
-                    >Action 2</el-dropdown-item
-                  >
-                  <el-dropdown-item @click="handleEdit(slotProps.row, 3)"
-                    >Action 3</el-dropdown-item
-                  >
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
+            </el-tooltip>
           </template>
         </tableComponent>
       </div>
@@ -189,7 +206,8 @@
 import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
 import tableComponent from "@/components/tableComponent.vue";
 import Mock from "mockjs";
-import { id } from "element-plus/es/locales.mjs";
+
+const iconSize = "16px";
 
 const formInline = reactive({
   id: "",
@@ -197,13 +215,15 @@ const formInline = reactive({
   userName: "",
   accountNumber: "",
   phoneNumber: "",
-  sex: "99",
-  userStatus: "99",
-  userCategory: "99",
+  sex: "",
+  userStatus: "",
+  userCategory: "",
   unitPrice: "",
   ordersNums: "",
   startDate: "",
   endDate: "",
+  current: 1,
+  size: 10,
 });
 
 // 禁用开始日期的逻辑（不能晚于已选的结束日期）
@@ -234,9 +254,11 @@ const resetForm = () => {
 
 // 表格数据
 const tableData = ref([]);
+const tableLoading = ref(false);
+const tableTotal = ref(0);
+let nowClickRow = ref({});
 // 列配置
-const columns = ref([]);
-const columns1 = ref([
+const columns = ref([
   { prop: "id", label: "ID" },
   { prop: "nickname", label: "昵称", width: "120" },
   { prop: "userName", label: "姓名" },
@@ -247,7 +269,7 @@ const columns1 = ref([
   { prop: "userCategory", label: "用户分类" },
   { prop: "unitPrice", label: "客单价" },
   { prop: "ordersNums", label: "订单数目" },
-  { prop: "action", label: "操作", slotName: "action", width: "180" },
+  { prop: "action", label: "操作", slotName: "action" },
 ]);
 
 // 生成食物主题昵称
@@ -290,7 +312,7 @@ const generateFoodNickname = () => {
 // 生成模拟数据
 const generateMockData = () => {
   return Mock.mock({
-    "list|30": [
+    "list|10": [
       {
         "id|+1": 10000,
         nickname: () => generateFoodNickname(), //昵称
@@ -312,6 +334,7 @@ const loadData = () => {
   // 模拟API请求延迟
   setTimeout(() => {
     tableData.value = generateMockData();
+    tableTotal.value = tableData.value.length;
   }, 500);
 };
 // 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
@@ -329,13 +352,22 @@ const handleSelectionChange = (selection) => {
   console.log("选中项:", selection);
 };
 
-let nowClickRow = ref({});
-// 编辑操作
-const handleEdit = (row, num) => {
+// 查看详情
+const seeDetails = (row) => {
   nowClickRow.value = row;
-  console.log("编辑的行:", row);
-  console.log("第几个按钮:", num);
+  console.log("要查看详情的行:", row);
 };
+// 编辑操作
+const handleEdit = (row) => {
+  nowClickRow.value = row;
+  console.log("要编辑的行:", row);
+};
+// 删除操作
+const handleDelete = (row) => {
+  nowClickRow.value = row;
+  console.log("要编辑的行:", row);
+};
+
 
 const titleRef = ref(null);
 const searchBarRef = ref(null);
@@ -359,7 +391,6 @@ const calculateTableHeight = () => {
 };
 // 组件挂载时加载数据
 onMounted(() => {
-  columns.value = columns1.value;
   loadData();
 
   calculateTableHeight();
diff --git a/src/views/goods/addGoods.vue b/src/views/goods/addGoods.vue
new file mode 100644
index 0000000..3c0f3cd
--- /dev/null
+++ b/src/views/goods/addGoods.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="app-container customer-control">
+    <div class="customer-box">
+      <el-form ref="searchForm" :model="formInline" :rules="rules" class="demo-form-inline" :label-width="'auto'">
+        <el-form-item label="商品名称" prop="goodName">
+          <el-input v-model="formInline.goodName" clearable show-word-limit maxlength="30" style="width: 800px" />
+        </el-form-item>
+
+        <el-form-item label="商品分类" required>
+          <el-col :span="6">
+            <el-form-item prop="categoryId">
+              <el-select v-model="formInline.categoryId" placeholder="请选择" class="my-el-select">
+                <el-option v-for="item in categoryList" :key="item.id" :value="item.id" :label="item.name" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item prop="categoryId2">
+              <el-select v-model="formInline.categoryId2" placeholder="请选择" class="my-el-select">
+                <el-option v-for="item in categoryList2" :key="item.id" :value="item.id" :label="item.name" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item prop="categoryId3">
+              <el-select v-model="formInline.categoryId3" placeholder="请选择" class="my-el-select">
+                <el-option v-for="item in categoryList3" :key="item.id" :value="item.id" :label="item.name" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ca } from "element-plus/es/locales.mjs";
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
+
+const formInline = reactive({
+  goodName: "高质量水稻",
+  categoryId: "", //一级
+  categoryId2: "", //二级
+  categoryId3: "", //三级
+  goodUrl:
+    "https://image.cnhnb.com/image/jpg/head/2021/12/23/d304172c6f8f45a1aa11d9d1b51de309.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg,https://image.cnhnb.com/image/jpg/head/2021/12/25/d345dde8938240afb9e59b16f77f8b50.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg",
+  netWeight: { "100元": "1kg", "200元": "10kg", "300元": "100kg" },
+  stock: 6500,
+  attribute: {
+    品牌: "童涵春堂",
+    型号: "种子种苗",
+    储存条件: "15~25℃(避免高温或冷冻)",
+    系列: "农用百货",
+    产地: "耿马县",
+  },
+  sendAddress: "云南省昆明市",
+  safeguard: "七天无理由退货",
+  detailUrl:
+    "https://image.cnhnb.com/image/jpg/head/2021/12/23/d304172c6f8f45a1aa11d9d1b51de309.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg,https://image.cnhnb.com/image/jpg/head/2021/12/25/d345dde8938240afb9e59b16f77f8b50.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg",
+  brandId: "44552",
+  traceCode: "45788",
+  videoUrl: "",
+  describe:
+    "在实际应用中，你可能需要根据具体的业务需求来调整视频字段的表示方式。例如，在数据库设计中，你可能需要为每个字段定义更详细的数据类型、约束条件和索引策略；在API接口定义中，你可能需要为每个字段定义请求和响应的格式、错误码和文档说明等。",
+});
+const rules = reactive({
+  goodName: [
+    { required: true, message: '请输入商品名称', trigger: 'blur' },
+  ],
+  region: [
+    {
+      required: true,
+      message: 'Please select Activity zone',
+      trigger: 'change',
+    },
+  ],
+  count: [
+    {
+      required: true,
+      message: 'Please select Activity count',
+      trigger: 'change',
+    },
+  ],
+  date1: [
+    {
+      type: 'date',
+      required: true,
+      message: 'Please pick a date',
+      trigger: 'change',
+    },
+  ],
+  date2: [
+    {
+      type: 'date',
+      required: true,
+      message: 'Please pick a time',
+      trigger: 'change',
+    },
+  ],
+  location: [
+    {
+      required: true,
+      message: 'Please select a location',
+      trigger: 'change',
+    },
+  ],
+  type: [
+    {
+      type: 'array',
+      required: true,
+      message: 'Please select at least one activity type',
+      trigger: 'change',
+    },
+  ],
+  resource: [
+    {
+      required: true,
+      message: 'Please select activity resource',
+      trigger: 'change',
+    },
+  ],
+  desc: [
+    { required: true, message: 'Please input activity form', trigger: 'blur' },
+  ],
+})
+const categoryList = ref([]);
+const categoryList2 = ref([]);
+const categoryList3 = ref([]);
+const searchForm = ref(null);
+const onSubmit = () => {
+  console.log("submit!");
+  console.log(formInline);
+};
+</script>
+<style lang="scss" scoped>
+.customer-box {
+  border-radius: 16px;
+  padding: 20px 16px;
+  background-color: #fff;
+}
+
+.my-el-select {
+  margin-right: 16px;
+}
+</style>
diff --git a/src/views/goods/goodsCategory.vue b/src/views/goods/goodsCategory.vue
new file mode 100644
index 0000000..b690015
--- /dev/null
+++ b/src/views/goods/goodsCategory.vue
@@ -0,0 +1,394 @@
+<template>
+  <div class="app-container customer-control">
+    <div class="container-custom">
+      <!-- 搜索栏 -->
+      <div ref="searchBarRef" class="search-box">
+        <div class="search-bar">
+          <div class="search-bar-left">
+            <el-form
+              ref="searchForm"
+              :inline="true"
+              :model="formInline"
+              class="demo-form-inline"
+              :label-width="'auto'"
+            >
+              <el-form-item label="分类名称" prop="categoryName">
+                <el-input
+                  v-model="formInline.categoryName"
+                  placeholder="请输入分类名称"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="状态" prop="categoryStatus">
+                <el-select
+                  v-model="formInline.categoryStatus"
+                  placeholder="请选择"
+                  clearable
+                >
+                  <el-option
+                    v-for="item in statusList"
+                    :key="item.id"
+                    :value="item.id"
+                    :label="item.name"
+                  />
+                </el-select>
+              </el-form-item>
+              <br>
+              <el-form-item
+                label="添加时间"
+                prop="startDate"
+                style="margin-right: 0"
+              >
+                <el-date-picker
+                  v-model="formInline.startDate"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="请选择起始日期"
+                  clearable
+                  :disabled-date="disableStartDate"
+                  style="width: 160px"
+                />
+                <span
+                  style="width: 30px; text-align: center; display: inline-block"
+                >
+                  -
+                </span>
+                <el-date-picker
+                  v-model="formInline.endDate"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="请选择截止日期"
+                  clearable
+                  :disabled-date="disableEndDate"
+                  style="width: 160px"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="search-bar-right">
+            <el-button type="primary" icon="Search" @click="onSubmit"
+              >查询</el-button
+            >
+            <el-button
+              icon="Refresh"
+              style="margin: 16px 0 0 0"
+              @click="resetForm"
+              >重置</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
+        <div class="table-toolbar">
+          <el-button
+            icon="delete"
+            @click="batchDelete"
+            :disabled="btnStatus"
+            style="margin-right: 10px"
+            >批量删除</el-button
+          >
+          <router-link to="/goods/addGoods">
+            <el-button type="primary" icon="plus" @click="onSubmit"
+              >添加分类</el-button
+            >
+          </router-link>
+        </div>
+        <tableComponent
+          :table-data="tableData"
+          :columns="columns"
+          :show-border="false"
+          :show-selection="true"
+          :header-cell-class-name="getHeaderClass"
+          @page-change="handlePaginationChange"
+          :loading="tableLoading"
+          @selection-change="handleSelectionChange"
+          :total="tableTotal"
+          :current-page="formInline.current"
+          :page-size="formInline.size"
+        >
+          <!-- 自定义-状态 -->
+          <template #goodsUrl="slotProps">
+            <div class="table-cell-img-box">
+              <img
+                :src="slotProps.row.goodsUrl"
+                class="table-cell-img"
+                alt=""
+              />
+            </div>
+          </template>
+
+          <!-- 自定义-状态 -->
+          <template #categoryStatus="slotProps">
+            <span v-if="slotProps.row.categoryStatus == '已启用'" class="color-green"
+              >已启用</span
+            >
+            <span v-else class="color-gray">未启用</span>
+          </template>
+
+          <!-- 自定义-操作 -->
+          <template #action="slotProps">
+            <el-tooltip effect="dark" placement="bottom-end">
+              <template #content>
+                <div class="custom-tooltip-content">
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="seeDetails(slotProps.row)"
+                  >
+                    <View />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="toUpload(slotProps.row)"
+                  >
+                    <Upload />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="toDownload(slotProps.row)"
+                  >
+                    <Download />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="handleEdit(slotProps.row)"
+                  >
+                    <Edit />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="handleDelete(slotProps.row)"
+                  >
+                    <Delete />
+                  </el-icon>
+                </div>
+              </template>
+
+              <span class="el-dropdown-link">
+                <el-icon>
+                  <More />
+                </el-icon>
+              </span>
+            </el-tooltip>
+          </template>
+        </tableComponent>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
+import tableComponent from "@/components/tableComponent.vue";
+import Mock from "mockjs";
+import { getGoodManageInfo } from "@/api/goods/info";
+import { ca } from "element-plus/es/locales.mjs";
+
+const formInline = reactive({
+  categoryName: "",
+  categoryStatus: "",
+  startDate: "",
+  endDate: "",
+  current: 1,
+  size: 10,
+});
+const statusList = ref([
+  { name: "未启用", id: '0'},
+  { name: "已启用", id: '1' },
+]);
+// 禁用开始日期的逻辑（不能晚于已选的结束日期）
+const disableStartDate = (time) => {
+  if (!formInline.endDate) return false;
+  const endDate = new Date(formInline.endDate);
+  return time.getTime() > endDate.getTime();
+};
+
+// 禁用结束日期的逻辑（不能早于已选的开始日期）
+const disableEndDate = (time) => {
+  if (!formInline.startDate) return false;
+  const startDate = new Date(formInline.startDate).setHours(0, 0, 0, 0);
+  const currentDate = new Date(time).setHours(0, 0, 0, 0);
+  return currentDate < startDate;
+};
+
+const searchForm = ref(null);
+const onSubmit = () => {
+  console.log("submit!");
+  formInline.current = 1;
+  formInline.categoryStatus = formInline.categoryStatus == undefined ? '' : formInline.categoryStatus;
+  console.log(formInline);
+  loadData();
+};
+const resetForm = () => {
+  searchForm.value.resetFields();
+};
+
+// 表格数据
+const tableData = ref([]);
+const selectedIds = ref([]);
+const btnStatus = computed(() => {
+  return selectedIds.value.length <= 0;
+});
+const tableLoading = ref(false);
+const tableTotal = ref(0);
+let nowClickRow = ref({});
+// 列配置
+const columns = ref([]);
+const columns1 = ref([
+   { prop: "sort", label: "排序" },
+  { prop: "id", label: "ID" },
+  { prop: "categoryName", label: "类别" },
+  { prop: "addTime", label: "添加时间" },
+  { prop: "categoryStatus", label: "状态", slotName: "categoryStatus" },
+  { prop: "action", label: "操作", slotName: "action" },
+]);
+
+// 生成食物主题昵称
+const generateFoodNickname = () => {
+  // 食物名词（仅限食物）
+  const foods = [
+    "辣椒",
+    "西瓜",
+    "土豆",
+    "番茄",
+    "黄瓜",
+    "苹果",
+    "蛋糕",
+    "面包",
+    "披萨",
+    "冰淇淋",
+    "奶茶",
+    "咖啡",
+    "啤酒",
+    "炸鸡",
+  ];
+
+  // 随机组合：形容词 + 食物
+  return Mock.mock(`@pick(${foods})`);
+};
+// 生成模拟数据
+const generateMockData = () => {
+  return Mock.mock({
+    "list|10": [
+      {
+        "id|+1": 10000,
+        "sort|+1": 1,
+        categoryName: '@pick(["种子", "化肥", "农药"])', //分类名称
+        addTime: "@datetime", //添加时间
+        categoryStatus: '@pick(["已启用", "未启用"])', //状态
+      },
+    ],
+  }).list;
+};
+// 加载数据
+const loadData = async () => {
+  tableLoading.value = true;
+  tableData.value = generateMockData();
+  tableTotal.value = tableData.value.length;
+  // try {
+  //   let response = await getGoodManageInfo(formInline);
+  //   console.log(response);
+  //   if (response.code == 200) {
+  //     tableData.value = response.data.records;
+  //     tableTotal.value = response.data.total;
+  //   }
+  // } catch (error) {
+  //   console.log(error);
+  // }
+  tableLoading.value = false;
+};
+
+// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
+const getHeaderClass = ({ column }) => {
+  return "custom-header";
+};
+// 分页变化
+const handlePaginationChange = ({ page, pageSize }) => {
+  console.log("分页变化:", page, pageSize);
+  formInline.current = page;
+  formInline.size = pageSize;
+  // 这里可以调用API获取新数据
+  loadData();
+};
+// 多选框变化
+const handleSelectionChange = (selection, ids) => {
+  console.log("选中项:", selection, ids);
+  selectedIds.value = ids;
+};
+
+// 查看详情
+const seeDetails = (row) => {
+  nowClickRow.value = row;
+  console.log("要查看详情的行:", row);
+};
+const toUpload = () => {
+  console.log("向上移动:");
+};
+const toDownload = () => {
+  console.log("向下移动:");
+};
+// 编辑操作
+const handleEdit = (row) => {
+  nowClickRow.value = row;
+  console.log("要编辑的行:", row);
+};
+// 删除操作
+const handleDelete = (row) => {
+  nowClickRow.value = row;
+  console.log("要删除的行:", row);
+};
+// 批量删除
+const batchDelete = () => {
+  console.log("要删除的行:", selectedIds.value);
+};
+
+const titleRef = ref(null);
+const searchBarRef = ref(null);
+const tableViewportHeight = ref(0);
+// 精确计算可用高度
+const calculateTableHeight = () => {
+  // 获取窗口总高度
+  const windowHeight = window.innerHeight;
+
+  // 获取各组件高度
+  const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
+  const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
+
+  // 计算容器内边距补偿（根据实际样式调整）
+  const paddingCompensation = 130;
+
+  // 最终计算
+  tableViewportHeight.value =
+    windowHeight - headerHeight - searchBarHeight - paddingCompensation;
+  // console.log(tableViewportHeight.value);
+};
+// 组件挂载时加载数据
+onMounted(() => {
+  columns.value = columns1.value;
+  loadData();
+
+  calculateTableHeight();
+
+  // 添加响应式监听
+  window.addEventListener("resize", calculateTableHeight);
+
+  // 监听DOM变化（适用于动态变化的header/searchbar）
+  const observer = new ResizeObserver(calculateTableHeight);
+  if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
+  if (searchBarRef.value) observer.observe(searchBarRef.value);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", calculateTableHeight);
+});
+</script>
+<style lang="scss" scoped>
+.table-toolbar {
+  width: 300px;
+  height: 50px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  justify-content: end;
+  padding: 14px 16px 0 0;
+}
+</style>
diff --git a/src/views/goods/goodsManage.vue b/src/views/goods/goodsManage.vue
new file mode 100644
index 0000000..d3e3303
--- /dev/null
+++ b/src/views/goods/goodsManage.vue
@@ -0,0 +1,412 @@
+<template>
+  <div class="app-container customer-control">
+    <div class="container-custom">
+      <!-- 搜索栏 -->
+      <div ref="searchBarRef" class="search-box">
+        <div class="search-bar">
+          <div class="search-bar-left">
+            <div class="order-tab" style="margin-top: -10px">
+              <el-tabs v-model="activeCurrent" @tab-click="tabChange">
+                <el-tab-pane
+                  v-for="t in bottomList"
+                  :key="t.id"
+                  :label="t.title + '(' + t.value + ')'"
+                  :name="t.id"
+                >
+                </el-tab-pane>
+              </el-tabs>
+            </div>
+            <el-form
+              ref="searchForm"
+              :inline="true"
+              :model="formInline"
+              class="demo-form-inline"
+              :label-width="'auto'"
+            >
+              <el-form-item label="商品名称" prop="goodsName">
+                <el-input
+                  v-model="formInline.goodsName"
+                  placeholder="请输入商品名称"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="商品分类" prop="goodsCategoryId">
+                <el-select
+                  v-model="formInline.goodsCategoryId"
+                  placeholder="请选择"
+                  clearable
+                >
+                  <el-option
+                    v-for="item in goodsCategoryList"
+                    :key="item.id"
+                    :value="item.id"
+                    :label="item.name"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="商品品牌" prop="goodsBrandId">
+                <el-select
+                  v-model="formInline.goodsBrandId"
+                  placeholder="请选择"
+                  clearable
+                >
+                  <el-option
+                    v-for="item in goodsBrandList"
+                    :key="item.id"
+                    :value="item.id"
+                    :label="item.name"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="search-bar-right">
+            <el-button type="primary" icon="Search" @click="onSubmit"
+              >查询</el-button
+            >
+            <el-button
+              icon="Refresh"
+              style="margin: 16px 0 0 0"
+              @click="resetForm"
+              >重置</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
+        <div class="table-toolbar">
+          <el-button
+            icon="delete"
+            @click="batchDelete"
+            :disabled="btnStatus"
+            style="margin-right: 10px"
+            >批量删除</el-button
+          >
+          <router-link to="/goods/addGoods">
+            <el-button type="primary" icon="plus" @click="onSubmit"
+              >新增商品</el-button
+            >
+          </router-link>
+        </div>
+        <tableComponent
+          :table-data="tableData"
+          :columns="columns"
+          :show-border="false"
+          :show-selection="true"
+          :header-cell-class-name="getHeaderClass"
+          @page-change="handlePaginationChange"
+          :loading="tableLoading"
+          @selection-change="handleSelectionChange"
+          :total="tableTotal"
+          :current-page="formInline.current"
+          :page-size="formInline.size"
+        >
+          <!-- 自定义-图片 -->
+          <template #goodsUrl="slotProps">
+            <div class="table-cell-img-box">
+              <img
+                :src="slotProps.row.goodsUrl"
+                class="table-cell-img"
+                alt=""
+              />
+            </div>
+          </template>
+
+          <!-- 自定义-状态 -->
+          <template #goodsStatus="slotProps">
+            <span v-if="slotProps.row.goodsStatus == '上架'" class="color-green"
+              >上架</span
+            >
+            <span v-else class="color-red">下架</span>
+          </template>
+
+          <!-- 自定义-操作 -->
+          <template #action="slotProps">
+            <el-tooltip effect="dark" placement="bottom-end">
+              <template #content>
+                <div class="custom-tooltip-content">
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="seeDetails(slotProps.row)"
+                  >
+                    <View />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="toUpload(slotProps.row)"
+                  >
+                    <Upload />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="toDownload(slotProps.row)"
+                  >
+                    <Download />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="handleEdit(slotProps.row)"
+                  >
+                    <Edit />
+                  </el-icon>
+                  <el-icon
+                    class="el-icon-custom"
+                    @click="handleDelete(slotProps.row)"
+                  >
+                    <Delete />
+                  </el-icon>
+                </div>
+              </template>
+
+              <span class="el-dropdown-link">
+                <el-icon>
+                  <More />
+                </el-icon>
+              </span>
+            </el-tooltip>
+          </template>
+        </tableComponent>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
+import tableComponent from "@/components/tableComponent.vue";
+import Mock from "mockjs";
+import { getGoodManageInfo } from "@/api/goods/info";
+import { ca } from "element-plus/es/locales.mjs";
+
+const formInline = reactive({
+  goodsName: "",
+  goodsCategoryId: "",
+  goodsBrandId: "",
+  serachType: "1",
+  current: 1,
+  size: 10,
+});
+const goodsCategoryList = ref([
+  { name: "蔬菜", id: 1 },
+  { name: "肥料", id: 2 },
+  { name: "农药", id: 3 },
+]);
+const goodsBrandList = ref([
+  { name: "品牌1", id: 1 },
+  { name: "品牌2", id: 2 },
+  { name: "品牌3", id: 3 },
+]);
+
+const searchForm = ref(null);
+const onSubmit = () => {
+  console.log("submit!");
+  formInline.current = 1;
+  console.log(formInline);
+  loadData();
+};
+const resetForm = () => {
+  searchForm.value.resetFields();
+};
+
+let activeCurrent = ref("1");
+let bottomList = reactive([
+  { title: "全部", id: "1", value: 134 },
+  { title: "已上架", id: "2", value: 97 },
+  { title: "已下架", id: "3", value: 37 },
+]);
+const tabChange = (Event) => {
+  console.log(Event.index);
+  if (Event.index == "0") {
+    // 请求全部
+    formInline.serachType = "1";
+  } else if (Event.index == "1") {
+    // 请求已上架
+    formInline.serachType = "2";
+  } else {
+    // 请求已下架
+    formInline.serachType = "3";
+  }
+  loadData();
+};
+
+// 表格数据
+const tableData = ref([]);
+const selectedIds = ref([]);
+const btnStatus = computed(() => {
+  return selectedIds.value.length <= 0;
+});
+const tableLoading = ref(false);
+const tableTotal = ref(0);
+let nowClickRow = ref({});
+// 列配置
+const columns = ref([]);
+const columns1 = ref([
+  { prop: "sort", label: "排序" },
+  { prop: "id", label: "ID" },
+  { prop: "goodsUrl", label: "商品图片", slotName: "goodsUrl" },
+  { prop: "goodsName", label: "商品名称", width: "120" },
+  { prop: "categoryName", label: "分类名称" },
+  { prop: "goodsPrice", label: "商品售价" },
+  { prop: "salesVolume", label: "销量" },
+  { prop: "pageView", label: "浏览量" },
+  { prop: "inventory", label: "库存" },
+  { prop: "goodsStatus", label: "状态", slotName: "goodsStatus" },
+  { prop: "action", label: "操作", slotName: "action" },
+]);
+
+// 生成食物主题昵称
+const generateFoodNickname = () => {
+  // 食物名词（仅限食物）
+  const foods = [
+    "辣椒",
+    "西瓜",
+    "土豆",
+    "番茄",
+    "黄瓜",
+    "苹果",
+    "蛋糕",
+    "面包",
+    "披萨",
+    "冰淇淋",
+    "奶茶",
+    "咖啡",
+    "啤酒",
+    "炸鸡",
+  ];
+
+  // 随机组合：形容词 + 食物
+  return Mock.mock(`@pick(${foods})`);
+};
+// 生成模拟数据
+const generateMockData = () => {
+  return Mock.mock({
+    "list|10": [
+      {
+        "id|+1": 10000,
+        "sort|+1": 1,
+        goodsUrl: " @image", //商品图片
+        goodsName: () => generateFoodNickname(), //商品名称
+        categoryName: '@pick(["蔬菜", "肥料", "农药"])', //分类名称
+        goodsPrice: "@float(10, 200, 2, 2)", //商品售价
+        salesVolume: "@integer(1000, 20000)", //销量
+        pageView: Mock.mock("@id").toString().slice(0, 6), //浏览量
+        inventory: "@integer(5000, 90000)", //库存
+        goodsStatus: '@pick(["上架", "下架"])', //状态
+        ordersNums: "@integer(10, 200)",
+      },
+    ],
+  }).list;
+};
+// 加载数据
+const loadData = async () => {
+  tableLoading.value = true;
+  tableData.value = generateMockData();
+  tableTotal.value = tableData.value.length;
+  // try {
+  //   let response = await getGoodManageInfo(formInline);
+  //   console.log(response);
+  //   if (response.code == 200) {
+  //     tableData.value = response.data.records;
+  //     tableTotal.value = response.data.total;
+  //   }
+  // } catch (error) {
+  //   console.log(error);
+  // }
+  tableLoading.value = false;
+};
+
+// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
+const getHeaderClass = ({ column }) => {
+  return "custom-header";
+};
+// 分页变化
+const handlePaginationChange = ({ page, pageSize }) => {
+  console.log("分页变化:", page, pageSize);
+  formInline.current = page;
+  formInline.size = pageSize;
+  // 这里可以调用API获取新数据
+  loadData();
+};
+// 多选框变化
+const handleSelectionChange = (selection, ids) => {
+  console.log("选中项:", selection, ids);
+  selectedIds.value = ids;
+};
+
+// 查看详情
+const seeDetails = (row) => {
+  nowClickRow.value = row;
+  console.log("要查看详情的行:", row);
+};
+const toUpload = () => {
+  console.log("向上移动:");
+};
+const toDownload = () => {
+  console.log("向下移动:");
+};
+// 编辑操作
+const handleEdit = (row) => {
+  nowClickRow.value = row;
+  console.log("要编辑的行:", row);
+};
+// 删除操作
+const handleDelete = (row) => {
+  nowClickRow.value = row;
+  console.log("要删除的行:", row);
+};
+// 批量删除
+const batchDelete = () => {
+  console.log("要删除的行:", selectedIds.value);
+};
+
+const titleRef = ref(null);
+const searchBarRef = ref(null);
+const tableViewportHeight = ref(0);
+// 精确计算可用高度
+const calculateTableHeight = () => {
+  // 获取窗口总高度
+  const windowHeight = window.innerHeight;
+
+  // 获取各组件高度
+  const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
+  const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
+
+  // 计算容器内边距补偿（根据实际样式调整）
+  const paddingCompensation = 130;
+
+  // 最终计算
+  tableViewportHeight.value =
+    windowHeight - headerHeight - searchBarHeight - paddingCompensation;
+  // console.log(tableViewportHeight.value);
+};
+// 组件挂载时加载数据
+onMounted(() => {
+  columns.value = columns1.value;
+  loadData();
+
+  calculateTableHeight();
+
+  // 添加响应式监听
+  window.addEventListener("resize", calculateTableHeight);
+
+  // 监听DOM变化（适用于动态变化的header/searchbar）
+  const observer = new ResizeObserver(calculateTableHeight);
+  if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
+  if (searchBarRef.value) observer.observe(searchBarRef.value);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", calculateTableHeight);
+});
+</script>
+<style lang="scss" scoped>
+.table-toolbar {
+  width: 300px;
+  height: 50px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  justify-content: end;
+  padding: 14px 16px 0 0;
+}
+</style>