diff --git a/main/src/micro/app.js b/main/src/micro/app.js
index 09a389f..68027fc 100644
--- a/main/src/micro/app.js
+++ b/main/src/micro/app.js
@@ -1,6 +1,6 @@
 import actions from './actions';
 
-const { VITE_APP_SUB_OS, VITE_APP_SUB_ADMIN, VITE_APP_SUB_GAS, VITE_APP_SUB_GSS, VITE_APP_SUB_GSR } = import.meta.env;
+const { VITE_APP_SUB_OS, VITE_APP_SUB_OA, VITE_APP_SUB_ADMIN, VITE_APP_SUB_GAS, VITE_APP_SUB_GSS, VITE_APP_SUB_GSR } = import.meta.env;
 
 export const leftApps = [
   {
@@ -12,7 +12,7 @@ export const leftApps = [
   },
   {
     name: 'sub-operation-admin',
-    entry: VITE_APP_SUB_OS,
+    entry: VITE_APP_SUB_OA,
     activeRule: '/sub-operation-admin',
     title: '管理后台',
     icon: 'images/platform/icon-admin.png',
@@ -77,7 +77,7 @@ export const defaultApps = [
   },
   {
     name: 'sub-operation-admin',
-    entry: VITE_APP_SUB_OS,
+    entry: VITE_APP_SUB_OA,
     activeRule: '/sub-operation-admin',
     title: '运营管理后台',
     icon: 'images/platform/icon-admin.png',
diff --git a/new-digital-agriculture-screen/src/views/trace/components/detectionCharts.vue b/new-digital-agriculture-screen/src/views/trace/components/detectionCharts.vue
index 028e384..fa463bb 100644
--- a/new-digital-agriculture-screen/src/views/trace/components/detectionCharts.vue
+++ b/new-digital-agriculture-screen/src/views/trace/components/detectionCharts.vue
@@ -26,18 +26,18 @@
         <div class="_label" style="font-size: 30px">溯源信息</div>
         <div class="traceability_info_box">
           <div class="traceability_info_box_image">
-            <img v-if="info.productType === '番茄'" src="../../../assets/images/entities/tomatoImg.png" style="width: 100%; height: 100%" />
-            <img v-else-if="info.productType === '芹菜'" src="../../../assets/images/entities/芹菜.png" style="width: 100%; height: 100%" />
-            <img v-else-if="info.productType === '白菜'" src="../../../assets/images/entities/白菜.png" style="width: 100%; height: 100%" />
-            <img v-else-if="info.productType === '石斛'" src="../../../assets/images/entities/石斛.png" style="width: 100%; height: 100%" />
-            <img v-else-if="info.productType === '铁皮石斛'" src="../../../assets/images/entities/石斛.png" style="width: 100%; height: 100%" />
-            <img v-else-if="info.productType === '紫皮石斛'" src="../../../assets/images/entities/石斛.png" style="width: 100%; height: 100%" />
-            <img v-else-if="info.productType === '甘蔗'" src="../../../assets/images/entities/3.png" style="width: 100%; height: 100%" />
-            <img v-else-if="info.productType === '黑皮甘蔗'" src="../../../assets/images/entities/3.png" style="width: 100%; height: 100%" />
-            <img v-else-if="info.productType === '黄皮甘蔗'" src="../../../assets/images/entities/3.png" style="width: 100%; height: 100%" />
-            <img v-else-if="info.productType === '红茶'" src="../../../assets/images/entities/红茶.png" style="width: 100%; height: 100%" />
-            <img v-else-if="info.productType === '核桃'" src="../../../assets/images/entities/核桃.png" style="width: 100%; height: 100%" />
-            <img v-else-if="info.productType === '核桃仁'" src="../../../assets/images/entities/核桃.png" style="width: 100%; height: 100%" />
+            <img v-if="info.productName === '番茄'" src="../../../assets/images/entities/tomatoImg.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productName === '芹菜'" src="../../../assets/images/entities/芹菜.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productName === '白菜'" src="../../../assets/images/entities/白菜.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productName === '石斛'" src="../../../assets/images/entities/石斛.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productName === '铁皮石斛'" src="../../../assets/images/entities/石斛.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productName === '紫皮石斛'" src="../../../assets/images/entities/石斛.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productName === '甘蔗'" src="../../../assets/images/entities/3.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productName === '黑皮甘蔗'" src="../../../assets/images/entities/3.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productName === '黄皮甘蔗'" src="../../../assets/images/entities/3.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productName === '红茶'" src="../../../assets/images/entities/红茶.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productName === '核桃'" src="../../../assets/images/entities/核桃.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productName === '核桃仁'" src="../../../assets/images/entities/核桃.png" style="width: 100%; height: 100%" />
           </div>
           <div class="traceability_info_box_title">
             <div class="traceability_info_right">新鲜{{ info.productType }}</div>
diff --git a/sub-operation-admin/index.html b/sub-operation-admin/index.html
index e1d7b64..4844de2 100644
--- a/sub-operation-admin/index.html
+++ b/sub-operation-admin/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/logo.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>政务服务</title>
+  <title>运营服务</title>
 </head>
 
 <body>
@@ -13,4 +13,4 @@
   <script type="module" src="/src/main.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/sub-operation-service/src/assets/images/userCenter/weweima.png b/sub-operation-service/src/assets/images/userCenter/weweima.png
new file mode 100644
index 0000000..1e9d6bc
Binary files /dev/null and b/sub-operation-service/src/assets/images/userCenter/weweima.png differ
diff --git a/sub-operation-service/src/assets/images/userCenter/检测报告.png b/sub-operation-service/src/assets/images/userCenter/检测报告.png
new file mode 100644
index 0000000..69f9336
Binary files /dev/null and b/sub-operation-service/src/assets/images/userCenter/检测报告.png differ
diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/menu1.png b/sub-operation-service/src/assets/images/warehouseLogistics/menu1.png
new file mode 100644
index 0000000..27ac5b2
Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/menu1.png differ
diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/menu3.png b/sub-operation-service/src/assets/images/warehouseLogistics/menu3.png
new file mode 100644
index 0000000..a14e4f8
Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/menu3.png differ
diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/messageBox.png b/sub-operation-service/src/assets/images/warehouseLogistics/messageBox.png
new file mode 100644
index 0000000..2dc2daf
Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/messageBox.png differ
diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/position.png b/sub-operation-service/src/assets/images/warehouseLogistics/position.png
new file mode 100644
index 0000000..e0d30f6
Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/position.png differ
diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/top1.png b/sub-operation-service/src/assets/images/warehouseLogistics/top1.png
new file mode 100644
index 0000000..1422ace
Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/top1.png differ
diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/top2.png b/sub-operation-service/src/assets/images/warehouseLogistics/top2.png
new file mode 100644
index 0000000..dae777c
Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/top2.png differ
diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/top3.png b/sub-operation-service/src/assets/images/warehouseLogistics/top3.png
new file mode 100644
index 0000000..cb8c0f4
Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/top3.png differ
diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/优先级.png b/sub-operation-service/src/assets/images/warehouseLogistics/优先级.png
new file mode 100644
index 0000000..fa17cef
Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/优先级.png differ
diff --git a/sub-operation-service/src/assets/images/warehouseLogistics/认证.png b/sub-operation-service/src/assets/images/warehouseLogistics/认证.png
new file mode 100644
index 0000000..6125c4b
Binary files /dev/null and b/sub-operation-service/src/assets/images/warehouseLogistics/认证.png differ
diff --git a/sub-operation-service/src/components/common/leftMenu.vue b/sub-operation-service/src/components/common/leftMenu.vue
new file mode 100644
index 0000000..22c780f
--- /dev/null
+++ b/sub-operation-service/src/components/common/leftMenu.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="smartFarm-left-menu-warp">
+    <div class="left-menu">
+      <div
+        v-for="(n, index) in menus"
+        :key="index"
+        class="left-menu-item"
+        style="position: relative"
+        @click.stop="
+          toLink(index);
+          openList(index);
+        "
+      >
+        <div style="display: flex; justify-content: flex-start; align-items: center">
+          <div class="item-img">
+            <img :src="getAssetsFile('images/smartFarm/' + n.icon)?.href ?? ''" alt="" />
+          </div>
+          <span :class="currentIndex === index ? 'active' : ''" class="item-title">{{ n.title }}</span>
+          <img v-if="n.children.length > 0 && n.isOpen" alt="" :src="getAssetsFile('images/smartFarm/closing.png')" class="isOpen" />
+          <img
+            v-if="n.children.length > 0 && !n.isOpen"
+            alt=""
+            :src="getAssetsFile('images/smartFarm/down_1@2x.png')"
+            class="isOpen fz"
+            @click.stop="openList(index)"
+          />
+        </div>
+        <div v-if="n.children.length > 0 && n.isOpen" class="item-children">
+          <div v-for="(item, indexC) in n.children" :key="indexC">
+            <ul style="overflow: visible; padding-left: 40px; text-align: left; list-style-type: disc !important">
+              <li :class="item.name === currentCIndex ? 'active' : ''" @click.stop="toLinkSub(index, item.name)">
+                <div class="dot"></div>
+                {{ item.title }}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, watch } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+import { useGetCommonData } from '../../store/modules/common';
+import { productFactory } from './modul';
+
+const store = useGetCommonData();
+
+const route = useRoute();
+const router = useRouter();
+
+const props = defineProps({
+  menus: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+});
+
+watch(
+  () => props.menus,
+  (newMenus) => {
+    leftMenu.value = [...newMenus];
+  },
+  { deep: true }
+);
+
+const leftMenu = ref([...props.menus]);
+
+let currentIndex = ref(0);
+let currentCIndex = ref('');
+
+const toLink = (index) => {
+  productFactory(props.menus[index].title);
+  currentIndex.value = index;
+  if (leftMenu.value[index].children.length > 0) {
+    window.sessionStorage.setItem('currentOpen', index);
+  }
+  if (index === 0) {
+    window.sessionStorage.setItem('currentChild', 'main');
+  }
+  currentCIndex.value = '';
+  let path = index !== undefined ? leftMenu.value[index].path : null;
+  if (path) {
+    router.push(path);
+    window.sessionStorage.setItem('currentParent', index);
+  }
+};
+const toLinkSub = (index, name) => {
+  console.info('index', index);
+  console.info('currentChild', name);
+  currentCIndex.value = name;
+  window.sessionStorage.setItem('currentChild', name);
+  let path;
+  for (let i in leftMenu.value[index].children) {
+    if (leftMenu.value[index].children[i].name === name) {
+      path = leftMenu.value[index].children[i].path;
+    }
+  }
+  if (path) {
+    console.info('path', path);
+    router.push(path);
+  }
+};
+const openList = (index) => {
+  currentIndex.value = index;
+  leftMenu.value[index].isOpen = !leftMenu.value[index].isOpen;
+};
+
+onMounted(() => {
+  currentIndex.value = window.sessionStorage.getItem('currentParent') ? Number(window.sessionStorage.getItem('currentParent')) : 0;
+  const currentMenu = window.sessionStorage.getItem('currentOpen');
+  if (currentMenu) {
+    for (let i in leftMenu.value) {
+      leftMenu.value[i].isOpen = i === currentMenu;
+    }
+  }
+  const currentChild = window.sessionStorage.getItem('currentChild');
+  if (currentChild && currentChild === 'main') {
+    currentCIndex.value = '';
+  } else if (currentChild) {
+    currentCIndex.value = currentChild;
+  }
+});
+</script>
+<style lang="scss" scoped>
+.fz {
+  transform: rotate(180deg);
+}
+.isOpen {
+  position: absolute;
+  right: -24px;
+  width: 20px;
+  height: 20px;
+}
+.active {
+  color: $color-main;
+}
+.smartFarm-left-menu-warp {
+  padding: 0 30px 0 10px;
+  width: 100%;
+  height: 100%;
+  .left-menu {
+    .left-menu-item {
+      padding: 16px 0;
+      width: 100%;
+      cursor: pointer;
+      &.active {
+        color: $color-main;
+      }
+      .item-img,
+      .item-title {
+        vertical-align: middle;
+      }
+      .item-img {
+        display: inline-block;
+        width: 32px;
+        height: 32px;
+      }
+      .item-title {
+        padding-left: 8px;
+        font-size: 18px;
+        font-weight: 400;
+      }
+      .item-children {
+        margin-top: 8px;
+        font-size: 16px;
+        text-align: center;
+        transition: transform 0.3s ease;
+        .dot {
+          display: inline-block;
+          margin-right: 15px;
+          width: 4px;
+          height: 4px;
+          border-radius: 90px;
+          background-color: black;
+          vertical-align: middle;
+        }
+        li {
+          margin: 5px auto;
+          height: 35px;
+          line-height: 35px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/sub-operation-service/src/components/common/modul.js b/sub-operation-service/src/components/common/modul.js
new file mode 100644
index 0000000..bf86846
--- /dev/null
+++ b/sub-operation-service/src/components/common/modul.js
@@ -0,0 +1,27 @@
+import { useGetCommonData } from '../../store/modules/common';
+const store = useGetCommonData();
+
+// 仓储
+function createProductA() {
+  store.getData({ title: '仓储' });
+}
+
+// 物流
+function createProductB() {
+  store.getData1({ title: '物流' });
+}
+
+// 工厂函数
+export function productFactory(title) {
+  switch (title) {
+    case '仓储':
+      return createProductA();
+    case '物流':
+      return createProductB();
+    default:
+      throw new Error('未知产品类型');
+  }
+}
+
+// 可选：直接导出具体产品构造函数
+export { createProductA, createProductB };
diff --git a/sub-operation-service/src/layouts/component/Menu/SubItem.vue b/sub-operation-service/src/layouts/component/Menu/SubItem.vue
index 966e14b..30e215d 100644
--- a/sub-operation-service/src/layouts/component/Menu/SubItem.vue
+++ b/sub-operation-service/src/layouts/component/Menu/SubItem.vue
@@ -10,14 +10,15 @@
     <template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">
       <layout-link v-if="onlyOneChild.meta" :to="onlyOneChild.path">
         <el-menu-item :index="onlyOneChild.path">
-          <layout-icon :size="20" :icon="onlyOneChild?.meta?.icon" />
+          <img v-if="onlyOneChild.meta.icon" :src="getAssetsFile(onlyOneChild.meta.icon)" style="height: 20px; margin-right: 20px" alt="" />
+          <!--          <layout-icon :size="20" :icon="onlyOneChild?.meta?.icon ? getAssetsFile(onlyOneChild.meta.icon) : undefined" />-->
           <template #title>{{ onlyOneChild.meta && onlyOneChild.meta?.title }}</template>
         </el-menu-item>
       </layout-link>
     </template>
     <el-sub-menu v-else :index="item.path" teleported>
       <template #title>
-        <layout-icon :size="20" :icon="item?.meta?.icon" />
+        <!--        <layout-icon :size="20" :icon="item?.meta?.icon ? getAssetsFile(item.meta.icon) : undefined" />-->
         <span>{{ item.meta && item.meta?.title }}</span>
       </template>
       <sub-item v-for="child in item.children" :key="child.path" :item="child" />
@@ -30,6 +31,7 @@ import { ref } from 'vue';
 // import { isExternal } from '@/utils/validate.js';
 import LayoutLink from './Link';
 import LayoutIcon from './Icon';
+import { getAssetsFile } from '@/utils/index.js';
 // import path from 'path-browserify';
 
 defineProps({
@@ -65,7 +67,6 @@ const hasOneShowingChild = (children = [], parent) => {
     onlyOneChild.value = { ...parent, noShowingChildren: true };
     return true;
   }
-
   return false;
 };
 
diff --git a/sub-operation-service/src/router/index.js b/sub-operation-service/src/router/index.js
index 6fbefbd..e1567fa 100644
--- a/sub-operation-service/src/router/index.js
+++ b/sub-operation-service/src/router/index.js
@@ -73,6 +73,18 @@ export const constantRoutes = [
         name: 'userLands',
         meta: { title: '我的土地' },
       },
+      {
+        path: '/sub-operation-service/mySource',
+        component: () => import('@/views/userCenter/mySource.vue'),
+        name: 'mySource',
+        meta: { title: '我的溯源' },
+      },
+      {
+        path: '/sub-operation-service/myFinance',
+        component: () => import('@/views/userCenter/myFinance.vue'),
+        name: 'myFinance',
+        meta: { title: '我的金融' },
+      },
     ],
   },
 
@@ -203,14 +215,20 @@ export const constantRoutes = [
     path: '/sub-operation-service/packaging',
     name: 'packaging',
     component: Layout,
-    redirect: '/sub-operation-service/packaging/index',
+    redirect: '/sub-operation-service/packaging/sorting',
     meta: { title: '分拣包装' },
     children: [
+      {
+        path: '/sub-operation-service/packaging/sorting',
+        component: () => import('@/views/packaging/sorting.vue'),
+        name: 'sortingMain',
+        meta: { title: '分拣首页' },
+      },
       {
         path: '/sub-operation-service/packaging/index',
         component: () => import('@/views/packaging/index.vue'),
         name: 'packagingMain',
-        meta: { title: '分拣包装首页' },
+        meta: { title: '包装首页' },
       },
     ],
   },
@@ -218,14 +236,20 @@ export const constantRoutes = [
     path: '/sub-operation-service/warehouseLogistics',
     name: 'warehouseLogistics',
     component: Layout,
-    redirect: '/sub-operation-service/warehouseLogistics/index',
+    redirect: '/sub-operation-service/warehouse',
     meta: { title: '仓储物流' },
     children: [
       {
-        path: '/sub-operation-service/warehouseLogistics/index',
-        component: () => import('@/views/warehouseLogistics/index.vue'),
-        name: 'warehouseLogisticsMain',
-        meta: { title: '仓储物流首页' },
+        path: '/sub-operation-service/warehouse',
+        component: () => import('@/views/warehouseLogistics/warehouse/index.vue'),
+        name: 'warehouseMain',
+        meta: { title: '仓储首页' },
+      },
+      {
+        path: '/sub-operation-service/logistics',
+        component: () => import('@/views/warehouseLogistics/logistics/index.vue'),
+        name: 'logistics-list',
+        meta: { title: '物流首页' },
       },
     ],
   },
diff --git a/sub-operation-service/src/router/modules/warehouseLogistics.js b/sub-operation-service/src/router/modules/warehouseLogistics.js
index 20bdccb..680dc2c 100644
--- a/sub-operation-service/src/router/modules/warehouseLogistics.js
+++ b/sub-operation-service/src/router/modules/warehouseLogistics.js
@@ -43,7 +43,7 @@ export default [
             path: '/sub-operation-service/logistics-list',
             component: () => import('@/views/warehouseLogistics/logistics/index.vue'),
             name: 'logistics-list',
-            meta: { title: '物流列表', icon: '' },
+            meta: { title: '物流', icon: '' },
             hidden: true,
           },
           {
@@ -55,27 +55,27 @@ export default [
           },
         ],
       },
-      {
-        path: '/sub-operation-service/test',
-        component: Views,
-        redirect: '/sub-operation-service/test1',
-        name: 'test',
-        meta: { title: '测试', icon: 'images/ecommerce/menu3.png' },
-        children: [
-          {
-            path: '/sub-operation-service/test1',
-            component: () => import('@/views/warehouseLogistics/test/test1.vue'),
-            name: 'test1',
-            meta: { title: '子菜单1', icon: '' },
-          },
-          {
-            path: '/sub-operation-service/test2',
-            component: () => import('@/views/warehouseLogistics/test/test1.vue'),
-            name: 'test2',
-            meta: { title: '子菜单2', icon: '' },
-          },
-        ],
-      },
+      // {
+      //   path: '/sub-operation-service/test',
+      //   component: Views,
+      //   redirect: '/sub-operation-service/test1',
+      //   name: 'test',
+      //   meta: { title: '测试', icon: 'images/ecommerce/menu3.png' },
+      //   children: [
+      //     {
+      //       path: '/sub-operation-service/test1',
+      //       component: () => import('@/views/warehouseLogistics/test/test1.vue'),
+      //       name: 'test1',
+      //       meta: { title: '子菜单1', icon: '' },
+      //     },
+      //     {
+      //       path: '/sub-operation-service/test2',
+      //       component: () => import('@/views/warehouseLogistics/test/test1.vue'),
+      //       name: 'test2',
+      //       meta: { title: '子菜单2', icon: '' },
+      //     },
+      //   ],
+      // },
     ],
   },
 ];
diff --git a/sub-operation-service/src/store/modules/common.js b/sub-operation-service/src/store/modules/common.js
new file mode 100644
index 0000000..5e8a1a1
--- /dev/null
+++ b/sub-operation-service/src/store/modules/common.js
@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia';
+import { constantRoutes, notFoundRouter } from '@/router';
+import { createAsyncRoutes, filterAsyncRoutes, filterKeepAlive } from '@/utils/router';
+import { useUserStore } from '@/store/modules/user';
+import { getTree } from '@/utils';
+
+export const useGetCommonData = defineStore('commonData', {
+  state: () => ({
+    data: {},
+  }),
+  actions: {
+    //仓储调用方法
+    getData(res) {
+      useGetCommonData().$state.data = res;
+    },
+    //物流调用方法
+    getData1(res) {
+      useGetCommonData().$state.data = res;
+    },
+  },
+  getters: {},
+});
diff --git a/sub-operation-service/src/styles/style.scss b/sub-operation-service/src/styles/style.scss
index 76c03ab..48d4df4 100644
--- a/sub-operation-service/src/styles/style.scss
+++ b/sub-operation-service/src/styles/style.scss
@@ -3,7 +3,7 @@
 @import '@/assets/fonts/aliiconfont.css';
 
 #app {
-  position: relative;
+  position: absolute;
   width: 100%;
   height: 100%;
   font-family: Avenir, sans-serif;
diff --git a/sub-operation-service/src/views/packaging/components/common.vue b/sub-operation-service/src/views/packaging/components/common.vue
new file mode 100644
index 0000000..847afce
--- /dev/null
+++ b/sub-operation-service/src/views/packaging/components/common.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="smartFarm-common-warp">
+    <div class="smartFarm-common-content">
+      <div class="left-menu">
+        <slot v-if="$slots.left" name="left"></slot>
+        <template v-else>
+          <left-menu :menus="menus"></left-menu>
+        </template>
+      </div>
+      <div class="common-content">
+        <slot v-if="$slots.main" name="main"></slot>
+        <template v-else></template>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, watch } from 'vue';
+import leftMenu from './leftMenu.vue';
+
+const props = defineProps({
+  currentName: { type: String, default: 'agricultural' },
+});
+
+const menus = reactive([
+  {
+    name: 'supplier',
+    title: '农业环境监测',
+    icon: 'menu1.png',
+    path: '/sub-operation-service/smartFarm/main',
+    isOpen: true,
+    children: [
+      {
+        name: 'supplier',
+        title: '田间监测',
+        path: '/sub-operation-service/smartFarm/inspection',
+      },
+      {
+        name: 'supplier',
+        title: '水质监测',
+        path: '/sub-operation-service/ecommerce-supplier',
+      },
+      {
+        name: 'supplier',
+        title: '病虫害监测',
+        path: '/sub-operation-service/ecommerce-supplier',
+      },
+    ],
+  },
+  {
+    name: 'control',
+    title: '生产管理控制',
+    icon: 'menu3.png',
+    path: '',
+    isOpen: false,
+    children: [
+      {
+        name: 'control',
+        title: '一体育苗',
+        icon: 'menu3.png',
+        path: '/sub-operation-service/smartFarm/manageControl/growSeedlings',
+      },
+      {
+        name: 'control',
+        title: '病虫害预防',
+        icon: 'menu3.png',
+        path: '/sub-operation-service/smartFarm/manageControl/pestPrevention',
+      },
+      {
+        name: 'control',
+        title: '喷灌滴灌',
+        icon: 'menu3.png',
+        path: '/sub-operation-service/smartFarm/manageControl/irrigationSystem',
+      },
+      {
+        name: 'control',
+        title: '排集水控制',
+        icon: 'menu3.png',
+        path: '/sub-operation-service/smartFarm/manageControl/drainageControl',
+      },
+      {
+        name: 'control',
+        title: '开窗卷帘',
+        icon: 'menu3.png',
+        path: '/sub-operation-service/smartFarm/manageControl/openCurtain',
+      },
+    ],
+  },
+]);
+</script>
+<style lang="scss" scoped>
+.smartFarm-common-warp {
+  width: 100%;
+  height: calc(100vh - 230px);
+  text-align: center;
+  .smartFarm-common-content {
+    width: $width-main;
+    margin: auto;
+    height: 100%;
+    display: inline-flex;
+    justify-content: space-between;
+    margin: auto;
+    width: $width-main;
+    height: 100%;
+    .left-menu,
+    .common-content {
+      overflow-y: auto;
+      padding: 8px;
+      height: calc(100% - 16px);
+      border-radius: 8px;
+    }
+    .left-menu {
+      width: 240px;
+      background: $color-fff;
+    }
+    .common-content {
+      margin-left: 16px;
+      width: calc(100% - 240px);
+    }
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/packaging/components/leftMenu.vue b/sub-operation-service/src/views/packaging/components/leftMenu.vue
new file mode 100644
index 0000000..a644a56
--- /dev/null
+++ b/sub-operation-service/src/views/packaging/components/leftMenu.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="smartFarm-left-menu-warp">
+    <div class="left-menu">
+      <div
+        v-for="(n, index) in leftMenu"
+        :key="index"
+        class="left-menu-item"
+        style="position: relative"
+        @click.stop="
+          toLink(index);
+          openList(index);
+        "
+      >
+        <div style="display: flex; justify-content: flex-start; align-items: center">
+          <div class="item-img">
+            <img :src="getAssetsFile('images/smartFarm/' + n.icon)?.href ?? ''" alt="" />
+          </div>
+          <span :class="currentIndex === index ? 'active' : ''" class="item-title">{{ n.title }}</span>
+          <img v-if="n.children.length > 0 && n.isOpen" alt="" :src="getAssetsFile('images/smartFarm/closing.png')" class="isOpen" />
+          <img
+            v-if="n.children.length > 0 && !n.isOpen"
+            alt=""
+            :src="getAssetsFile('images/smartFarm/down_1@2x.png')"
+            class="isOpen fz"
+            @click.stop="openList(index)"
+          />
+        </div>
+        <div v-if="n.children.length > 0 && n.isOpen" class="item-children">
+          <div v-for="(item, indexC) in n.children" :key="indexC">
+            <ul style="overflow: visible; padding-left: 40px; text-align: left; list-style-type: disc !important">
+              <li :class="item.name === currentCIndex ? 'active' : ''" @click.stop="toLinkSub(index, item.name)">
+                <div class="dot"></div>
+                {{ item.title }}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, watch } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
+
+const leftMenu = reactive([
+  {
+    name: 'inspection',
+    title: '分拣',
+    icon: 'menu1.png',
+    path: '/sub-operation-service/packaging/sorting',
+    isOpen: false,
+    children: [
+      // {
+      //   name: 'fieldInspection',
+      //   title: '田间监测',
+      //   icon: 'menu1.png',
+      //   path: '/sub-operation-service/smartFarm/fieldInspection',
+      // },
+    ],
+  },
+  {
+    name: 'control',
+    title: '包装',
+    icon: 'menu3.png',
+    path: '/sub-operation-service/packaging/sorting',
+    isOpen: false,
+    children: [],
+  },
+]);
+
+let currentIndex = ref(0);
+let currentCIndex = ref('');
+
+const toLink = (index) => {
+  currentIndex.value = index;
+  if (leftMenu[index].children.length > 0) {
+    window.sessionStorage.setItem('currentOpen', index);
+  }
+  if (index === 0) {
+    window.sessionStorage.setItem('currentChild', 'main');
+  }
+  currentCIndex.value = '';
+  let path = index !== undefined ? leftMenu[index].path : null;
+  if (path) {
+    router.push(path);
+    window.sessionStorage.setItem('currentParent', index);
+  }
+};
+const toLinkSub = (index, name) => {
+  console.info('index', index);
+  console.info('currentChild', name);
+  currentCIndex.value = name;
+  window.sessionStorage.setItem('currentChild', name);
+  let path;
+  for (let i in leftMenu[index].children) {
+    if (leftMenu[index].children[i].name === name) {
+      path = leftMenu[index].children[i].path;
+    }
+  }
+  if (path) {
+    console.info('path', path);
+    router.push(path);
+  }
+};
+const openList = (index) => {
+  currentIndex.value = index;
+  leftMenu[index].isOpen = !leftMenu[index].isOpen;
+};
+
+onMounted(() => {
+  currentIndex.value = window.sessionStorage.getItem('currentParent') ? Number(window.sessionStorage.getItem('currentParent')) : 0;
+  const currentMenu = window.sessionStorage.getItem('currentOpen');
+  if (currentMenu) {
+    for (let i in leftMenu) {
+      leftMenu[i].isOpen = i === currentMenu;
+    }
+  }
+  const currentChild = window.sessionStorage.getItem('currentChild');
+  if (currentChild && currentChild === 'main') {
+    currentCIndex.value = '';
+  } else if (currentChild) {
+    currentCIndex.value = currentChild;
+  }
+});
+</script>
+<style lang="scss" scoped>
+.fz {
+  transform: rotate(180deg);
+}
+.isOpen {
+  position: absolute;
+  right: -24px;
+  width: 20px;
+  height: 20px;
+}
+.active {
+  color: $color-main;
+}
+.smartFarm-left-menu-warp {
+  padding: 0 30px 0 10px;
+  width: 100%;
+  height: 100%;
+  .left-menu {
+    .left-menu-item {
+      padding: 16px 0;
+      width: 100%;
+      cursor: pointer;
+      &.active {
+        color: $color-main;
+      }
+      .item-img,
+      .item-title {
+        vertical-align: middle;
+      }
+      .item-img {
+        display: inline-block;
+        width: 32px;
+        height: 32px;
+      }
+      .item-title {
+        padding-left: 8px;
+        font-size: 18px;
+        font-weight: 400;
+      }
+      .item-children {
+        margin-top: 8px;
+        font-size: 16px;
+        text-align: center;
+        transition: transform 0.3s ease;
+        .dot {
+          display: inline-block;
+          margin-right: 15px;
+          width: 4px;
+          height: 4px;
+          border-radius: 90px;
+          background-color: black;
+          vertical-align: middle;
+        }
+        li {
+          margin: 5px auto;
+          height: 35px;
+          line-height: 35px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/packaging/sorting.vue b/sub-operation-service/src/views/packaging/sorting.vue
new file mode 100644
index 0000000..1583740
--- /dev/null
+++ b/sub-operation-service/src/views/packaging/sorting.vue
@@ -0,0 +1,256 @@
+<template>
+  <!--  <page-layout :menus="state.menus"> </page-layout>-->
+  <section>
+    <common>
+      <template #main>
+        <el-card shadow="none" style="border-radius: 14px">
+          <div class="tabs">
+            <div class="tab" style="color: rgba(153, 153, 153, 1)">仓储分类</div>
+            <div class="tab cursor" :class="{ active: currentTab === 0 }" @click.stop="currentTab = 0">普通仓库</div>
+            <div class="tab cursor" :class="{ active: currentTab === 1 }" @click.stop="currentTab = 1">恒温仓库</div>
+            <div class="tab cursor" :class="{ active: currentTab === 2 }" @click.stop="currentTab = 2">冷库</div>
+            <div class="tab cursor" :class="{ active: currentTab === 3 }" @click.stop="currentTab = 3">气调仓库</div>
+            <div class="tab">&nbsp;</div>
+          </div>
+        </el-card>
+        <el-row :gutter="20" style="margin-top: 10px">
+          <el-col v-for="(item, index) in state.data" :key="index" :span="12">
+            <el-card class="storage-card" shadow="hover">
+              <div class="storage-content">
+                <div class="storage-content-top" @click="toLink(item)">
+                  <el-image :src="item.imageUrl" fit="cover" class="storage-image" />
+                  <div class="storage-info">
+                    <h3 class="storage-title">{{ item.title }}</h3>
+                    <div class="storage-desc">
+                      <span>{{ item.description }}</span>
+                      <img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
+                      <img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
+                    </div>
+                    <div class="storage-tags">
+                      <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">延长仓储</el-tag>
+                      <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">保鲜储存</el-tag>
+                    </div>
+                    <div class="storage-location">
+                      <el-icon><Location /></el-icon>
+                      {{ item.location }}
+                    </div>
+                  </div>
+                </div>
+                <div class="storage-price">
+                  <div class="storage-price-left">
+                    <span class="price-label">报价</span>
+                    <span class="price-amount">¥{{ item.price }}/间/月</span>
+                  </div>
+                  <el-button type="success" class="contact-btn">
+                    <img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
+                    <span>联系卖家</span>
+                  </el-button>
+                </div>
+                <div v-if="item.rank" class="rank-badge">
+                  <!--              {{ item.rank }}-->
+                  <img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+        <page-pagination :total="20" @current-change="currentChange" />
+      </template>
+    </common>
+  </section>
+</template>
+<script setup name="page-menu">
+import { ref, reactive, watch } from 'vue';
+import { getAssetsFile } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
+import Common from './components/common.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const state = reactive({
+  menus: warehouseLogisticsRoutes[0].children,
+  query: {
+    current: 1,
+  },
+  data: [
+    {
+      imageUrl: '/storage1.jpg',
+      title: '果蔬保鲜仓储',
+      description: '绿鲜蔬选果蔬仓储中心 ',
+      location: '临沧市-耿马县',
+      price: '600.0',
+      rank: '1',
+    },
+    {
+      imageUrl: '/storage2.jpg',
+      title: '果蔬保鲜仓储',
+      description: '绿鲜蔬选果蔬仓储中心',
+      location: '临沧市-耿马县',
+      price: '600.0',
+      rank: '2',
+    },
+    {
+      imageUrl: '/storage3.jpg',
+      title: '果蔬保鲜仓储',
+      description: '绿鲜蔬选果蔬仓储中心 ',
+      location: '临沧市-耿马县',
+      price: '600.0',
+      rank: '3',
+    },
+    {
+      imageUrl: '/storage3.jpg',
+      title: '果蔬保鲜仓储',
+      description: '绿鲜蔬选果蔬仓储中心 ',
+      location: '临沧市-耿马县',
+      price: '600.0',
+      rank: '',
+    },
+    {
+      imageUrl: '/storage3.jpg',
+      title: '果蔬保鲜仓储',
+      description: '绿鲜蔬选果蔬仓储中心 ',
+      location: '临沧市-耿马县',
+      price: '600.0',
+      rank: '',
+    },
+    {
+      imageUrl: '/storage3.jpg',
+      title: '果蔬保鲜仓储',
+      description: '绿鲜蔬选果蔬仓储中心 ',
+      location: '临沧市-耿马县',
+      price: '600.0',
+      rank: '',
+    },
+  ],
+});
+
+const currentTab = ref(0);
+
+const currentChange = (current) => {
+  state.query.current = current;
+};
+
+const toLink = (row) => {
+  router.push({
+    path: '/sub-operation-service/warehouse-detail',
+    query: { id: row?.id ?? '100' },
+  });
+};
+</script>
+<style lang="scss" scoped>
+.tabs {
+  height: 50px;
+  line-height: 50px;
+  display: flex;
+  font-size: 18px;
+  justify-content: space-between;
+  padding: 0 20px;
+}
+.cursor {
+  cursor: pointer;
+}
+.active {
+  color: rgba(37, 191, 130, 1);
+}
+.storage-card {
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 20px;
+  border: 0;
+  border-radius: 24px;
+}
+.storage-content {
+  @include flex-column;
+
+  gap: 16px;
+  &-top {
+    @include flex-row;
+
+    align-items: center;
+  }
+}
+.storage-image {
+  margin-right: 16px;
+  width: 120px;
+  height: 120px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+.storage-info {
+  padding-right: 50px;
+  flex: 1;
+  cursor: pointer;
+}
+.storage-title,
+.storage-desc,
+.storage-tags,
+.storage-location {
+  overflow: hidden;
+  margin: 10px 0;
+  width: 100%;
+}
+.storage-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #000000;
+  @include ellipsis;
+}
+.storage-desc {
+  font-size: 16px;
+  color: #999999;
+  @include ellipsis;
+  i {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+  }
+}
+.storage-tags {
+  span {
+    margin-right: 10px;
+  }
+}
+.storage-location {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 400;
+  color: #000000;
+}
+.storage-price {
+  display: flex;
+  align-items: center;
+  &-left {
+    flex: 1;
+  }
+}
+.price-label {
+  margin-right: 10px;
+  font-size: 16px;
+  color: #999999;
+}
+.price-amount {
+  font-size: 20px;
+  font-weight: 700;
+  color: $color-primary;
+}
+.contact-btn {
+  width: 152px;
+  height: 48px;
+  font-size: 20px;
+  border-radius: 8px;
+  background: #25bf82 !important;
+  :deep(.el-icon) {
+    margin-right: 10px;
+  }
+}
+.rank-badge {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  width: 80px;
+  height: 80px;
+}
+</style>
diff --git a/sub-operation-service/src/views/userCenter/components/common.vue b/sub-operation-service/src/views/userCenter/components/common.vue
index 2fedef8..4a581bf 100644
--- a/sub-operation-service/src/views/userCenter/components/common.vue
+++ b/sub-operation-service/src/views/userCenter/components/common.vue
@@ -24,7 +24,10 @@ const props = defineProps({
 </script>
 <style lang="scss" scoped>
 .ecommerce-common-warp {
+  position: absolute;
   width: 100%;
+  text-align: center;
+  height: 100%;
 
   // height: calc(100vh - 230px);
   text-align: center;
@@ -37,6 +40,7 @@ const props = defineProps({
     .left-menu,
     .common-content {
       overflow-y: auto;
+      overflow-x: hidden;
       padding: 8px;
 
       // height: calc(100% - 16px);
diff --git a/sub-operation-service/src/views/userCenter/components/leftMenu.vue b/sub-operation-service/src/views/userCenter/components/leftMenu.vue
index eded159..dd85883 100644
--- a/sub-operation-service/src/views/userCenter/components/leftMenu.vue
+++ b/sub-operation-service/src/views/userCenter/components/leftMenu.vue
@@ -33,7 +33,9 @@ const props = defineProps({
 const leftMenu = reactive([
   { name: 'agricultural', title: '我的购物车', icon: 'menu1.png', path: '/sub-operation-service/userCenter' },
   { name: 'supplier', title: '我的订单', icon: 'menu2-1.png', path: '/sub-operation-service/userOrders' },
-  { name: 'purchaser', title: '我的土地', icon: 'menu3-1.png', path: '/sub-operation-service/userLands' },
+  // { name: 'purchaser', title: '我的土地', icon: 'menu3-1.png', path: '/sub-operation-service/userLands' },
+  { name: 'mySource', title: '我的溯源', icon: 'menu3-1.png', path: '/sub-operation-service/mySource' },
+  { name: 'myFinance', title: '我的金融', icon: 'menu3-1.png', path: '/sub-operation-service/myFinance' },
 ]);
 
 let currentIndex = ref(0);
@@ -101,7 +103,7 @@ const toLink = (n, index) => {
       width: 100%;
       display: inline-flex;
       justify-content: flex-start;
-      padding: 16px 0;
+      padding: 16px 0 16px 16px;
       cursor: pointer;
       &.active {
         color: $color-main;
diff --git a/sub-operation-service/src/views/userCenter/components/tableComponent.vue b/sub-operation-service/src/views/userCenter/components/tableComponent.vue
new file mode 100644
index 0000000..03b63cc
--- /dev/null
+++ b/sub-operation-service/src/views/userCenter/components/tableComponent.vue
@@ -0,0 +1,335 @@
+<template>
+  <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="每页显示">
+          <el-select v-model="internalPageSize" placeholder="请选择" style="width: 100px" @change="pageSizeChange($event)">
+            <el-option v-for="item in pageSizes" :key="item" :label="item" :value="item" />
+          </el-select>
+          <span style="padding: 0 10px">条</span>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-table
+      style="flex: 1; display: flex; flex-direction: column"
+      :max-height="tableMaxHeight"
+      :data="pagedTableData"
+      :border="showBorder"
+      :stripe="showStripe"
+      v-bind="$attrs"
+      :header-cell-class-name="headerCellClassName"
+      :cell-class-name="cellClassName"
+      @selection-change="handleSelectionChange"
+    >
+      <!-- 首列多选框 -->
+      <el-table-column v-if="showSelection" type="selection" width="55" align="center" />
+
+      <template v-for="column in columns" :key="column.prop">
+        <el-table-column
+          :prop="column.prop"
+          :label="column.label"
+          :width="column.width"
+          :align="column.align || 'center'"
+          :sortable="column.sortable"
+          :header-class-name="column.headerClassName"
+        >
+          <!-- 支持插槽 -->
+          <template v-if="column.slotName" #default="scope">
+            <slot :name="column.slotName" :row="scope.row"></slot>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+
+    <div v-if="showPagination" class="pagination-container">
+      <span class="custom-pagination-text">
+        第{{ internalPage }}页，共{{ Math.ceil(internalTotal / internalPageSize) }}页，共{{ internalTotal }}条
+      </span>
+      <div style="flex: 1; display: flex; justify-content: end; text-align: right">
+        <el-pagination
+          v-model:current-page="internalPage"
+          v-model:page-size="internalPageSize"
+          :page-sizes="pageSizes"
+          :small="small"
+          :disabled="disabled"
+          :background="background"
+          layout="prev, pager, next"
+          :total="internalTotal"
+          @current-change="handleCurrentChange"
+        />
+        <span class="custom-pagination-size"> {{ internalPageSize }}条/页 </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  // 表格数据
+  tableData: {
+    type: Array,
+    default: () => [],
+  },
+  // 列配置
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+  // 是否显示分页
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否显示边框
+  showBorder: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示斑马纹
+  showStripe: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示首列多选框
+  showSelection: {
+    type: Boolean,
+    default: false,
+  },
+  // 每页显示条数选项
+  pageSizes: {
+    type: Array,
+    default: () => [10, 20, 30, 50],
+  },
+  // 是否使用小型分页样式
+  small: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否为分页按钮添加背景色
+  background: {
+    type: Boolean,
+    default: false,
+  },
+  // 自定义表头类名函数
+  headerCellClassName: {
+    type: Function,
+    default: () => '',
+  },
+  // 自定义单元格类名函数
+  cellClassName: {
+    type: Function,
+    default: () => '',
+  },
+});
+
+const emit = defineEmits(['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);
+});
+
+// 计算总页数（可根据实际需求调整）
+watch(
+  () => props.tableData,
+  (newData) => {
+    internalTotal.value = newData.length; // 示例：假设总数据量是当前显示的3倍
+  },
+  { immediate: true }
+);
+
+// 分页大小改变
+const pageSizeChange = (val) => {
+  console.log(`每页 ${val} 条`);
+  internalPageSize.value = val;
+  internalPage.value = 1; // 重置为第一页
+  console.log(internalPage.value, internalPageSize.value);
+  emitPageChange();
+};
+
+// 当前页改变
+const handleCurrentChange = (val) => {
+  console.log(`当前页改变 ${val} 页`);
+  internalPage.value = val;
+  emitPageChange();
+};
+
+// 触发分页变化事件
+const emitPageChange = () => {
+  emit('page-change', {
+    page: internalPage.value,
+    pageSize: internalPageSize.value,
+  });
+};
+
+// 多选框变化
+const handleSelectionChange = (selection) => {
+  emit('selection-change', selection);
+};
+
+const tableRef = ref(null);
+const tableMaxHeight = ref(null); // 使用max-height而不是height
+
+// 自动计算最大高度（预留分页器空间）
+const calculateMaxHeight = () => {
+  const paginationHeight = 60; // 分页器固定高度
+  const container = tableRef.value?.$el?.parentElement;
+  if (container) {
+    const containerHeight = container.clientHeight;
+    tableMaxHeight.value = containerHeight - paginationHeight;
+  }
+};
+
+onMounted(() => {
+  calculateMaxHeight();
+  window.addEventListener('resize', calculateMaxHeight);
+
+  // 添加MutationObserver监听父容器尺寸变化
+  const observer = new MutationObserver(calculateMaxHeight);
+  if (tableRef.value?.$el?.parentElement) {
+    observer.observe(tableRef.value.$el.parentElement, {
+      attributes: true,
+      attributeFilter: ['style', 'class'],
+    });
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', calculateMaxHeight);
+});
+</script>
+
+<style lang="scss" scoped>
+.custom-table-container {
+  // position: relative;
+  padding: 10px 0;
+  display: flex;
+  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 {
+    flex: 1;
+    overflow: auto;
+  }
+}
+
+.demo-form-inline {
+  text-align: left;
+  padding-left: 20px;
+}
+.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;
+}
+
+.custom-pagination-size {
+  text-align: right;
+  line-height: 32px;
+  margin-left: 20px;
+}
+
+/* 去除表格边框 */
+: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;
+
+    &:disabled {
+      color: #c0c4cc;
+    }
+  }
+
+  /* 每页条数选择器 */
+  .el-pagination__sizes {
+    .el-input__inner {
+      font-weight: 400;
+    }
+  }
+
+  /* 跳页输入框 */
+  .el-pagination__jump {
+    font-weight: 400;
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/userCenter/myFinance.vue b/sub-operation-service/src/views/userCenter/myFinance.vue
new file mode 100644
index 0000000..8e41880
--- /dev/null
+++ b/sub-operation-service/src/views/userCenter/myFinance.vue
@@ -0,0 +1,393 @@
+<template>
+  <div>
+    <common current-name="agricultural">
+      <template #main>
+        <div class="container">
+          <userHeader ref="titleRef" :title="'我的金融'"></userHeader>
+          <!-- 搜索栏 -->
+          <div ref="searchBarRef" class="search-box">
+            <div class="order-tab">
+              <el-tabs v-model="activeCurrent" @tab-click="tabChange">
+                <el-tab-pane v-for="(t, indext) in bottomList" :key="indext" :label="t.title" :name="t.name"> </el-tab-pane>
+              </el-tabs>
+            </div>
+            <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="productName">
+                    <el-input v-model="formInline.productName" placeholder="请输入产品名称" clearable />
+                  </el-form-item>
+                  <el-form-item v-show="activeCurrent == '3'" label="担保人" prop="guarantor">
+                    <el-input v-model="formInline.guarantor" placeholder="请输入担保人" clearable />
+                  </el-form-item>
+                  <el-form-item label="申请人" prop="applicant">
+                    <el-input v-model="formInline.applicant" placeholder="请输入申请人" clearable />
+                  </el-form-item>
+                  <el-form-item label="申请状态" prop="status">
+                    <el-select v-model="formInline.status" placeholder="请选择">
+                      <el-option label="全部" value="99" />
+                      <el-option label="待检测" value="0" />
+                      <el-option label="已检测" value="1" />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="申请日期" prop="startDate" style="margin-right: 0">
+                    <el-date-picker v-model="formInline.startDate" type="date" placeholder="请选择起始日期" clearable style="width: 160px" />
+                  </el-form-item>
+                  <el-form-item style="margin-right: 0">
+                    <span style="width: 30px; text-align: center; display: inline-block"> - </span>
+                  </el-form-item>
+                  <el-form-item prop="endDate">
+                    <el-date-picker v-model="formInline.endDate" type="date" placeholder="请选择截止日期" clearable 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: 24px 0 0 0" @click="resetForm">重置</el-button>
+              </div>
+            </div>
+          </div>
+          <!-- 表格 -->
+          <div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
+            <tableComponent
+              :table-data="tableData"
+              :columns="columns"
+              :show-border="false"
+              :show-selection="true"
+              :header-cell-class-name="getHeaderClass"
+              @page-change="handlePaginationChange"
+              @selection-change="handleSelectionChange"
+            >
+              <!-- 自定义-状态 -->
+              <template #status="slotProps">
+                <span :style="{ color: slotProps.row.status == 1 ? 'green' : '#FFB345' }">
+                  {{ slotProps.row.status === 1 ? '已通过' : '已申请' }}
+                </span>
+              </template>
+
+              <!-- 自定义-操作 -->
+              <template #action="slotProps">
+                <el-dropdown>
+                  <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>
+              </template>
+            </tableComponent>
+          </div>
+        </div>
+      </template>
+    </common>
+  </div>
+</template>
+<script setup>
+import common from './components/common.vue';
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue';
+import userHeader from './components/userHeader.vue';
+import tableComponent from './components/tableComponent.vue';
+import Mock from 'mockjs';
+
+const formInline = reactive({
+  productName: '',
+  applicant: '',
+  guarantor: '',
+  status: '99',
+  startDate: '',
+  endDate: '',
+});
+
+let activeCurrent = ref('1');
+let bottomList = reactive([
+  { title: '我的信贷', name: '1' },
+  { title: '我的保险', name: '2' },
+  { title: '我的担保贷款', name: '3' },
+]);
+const tabChange = () => {
+  console.log(activeCurrent.value);
+};
+
+const searchForm = ref(null);
+const onSubmit = () => {
+  console.log('submit!');
+};
+const resetForm = () => {
+  searchForm.value.resetFields();
+};
+
+// 表格数据
+const tableData = ref([]);
+// 列配置
+const columns = ref([
+  { prop: 'id', label: 'ID', width: '80' },
+  { prop: 'productName', label: '产品名称' },
+  { prop: 'guarantor', label: '担保人' },
+  { prop: 'applicant', label: '申请人' },
+  { prop: 'status', label: '申请状态', slotName: 'status' },
+  { prop: 'applyTime', label: '申请日期', width: '180px' },
+  { prop: 'action', label: '操作', slotName: 'action', width: '180' },
+]);
+// 生成模拟数据
+const generateMockData = () => {
+  return Mock.mock({
+    'list|30': [
+      {
+        'id|+1': 1,
+        productName: '惠农e贷', //产品名称 水果 蔬菜
+        applyTime: '@datetime',
+        'status|1': [1, 1, 1, 0], //0待检测 1已检测
+        guarantor: '@cname',
+        applicant: '@cname',
+      },
+    ],
+  }).list;
+};
+// 加载数据
+const loadData = () => {
+  // 模拟API请求延迟
+  setTimeout(() => {
+    tableData.value = generateMockData();
+  }, 500);
+};
+// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
+const getHeaderClass = ({ column }) => {
+  return 'custom-header';
+};
+// 分页变化
+const handlePaginationChange = ({ page, pageSize }) => {
+  console.log('分页变化:', page, pageSize);
+  // 这里可以调用API获取新数据
+  // fetchData(page, limit,pageSize)
+};
+// 多选框变化
+const handleSelectionChange = (selection) => {
+  console.log('选中项:', selection);
+};
+
+let nowClickRow = ref(null);
+// 编辑操作
+const handleEdit = (row, num) => {
+  nowClickRow.value = row;
+  console.log('编辑的行:', row);
+  console.log('第几个按钮:', num);
+};
+
+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 = 60;
+
+  // 最终计算
+  tableViewportHeight.value = windowHeight - headerHeight - searchBarHeight - paddingCompensation;
+  // console.log(tableViewportHeight.value);
+};
+// 组件挂载时加载数据
+onMounted(() => {
+  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>
+.container {
+  width: 100%;
+  overflow: hidden; /* 防止全局滚动条 */
+
+  .search-box {
+    overflow: hidden;
+    margin: 16px 0;
+    padding: 1px 8px 0 16px;
+    border-radius: 16px;
+    background: #fff;
+    .order-tab {
+      width: 100%;
+      ::v-deep() {
+        .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: $color-999;
+        }
+        .el-descriptions__content {
+          color: $color-333;
+        }
+      }
+    }
+  }
+  .search-bar {
+    display: flex;
+    flex-shrink: 0; /* 禁止收缩 */
+    min-height: 100px;
+
+    .search-bar-left {
+      flex: 1;
+    }
+
+    .search-bar-right {
+      width: 100px;
+    }
+
+    .demo-form-inline {
+      text-align: left;
+    }
+
+    .el-form--inline .el-form-item {
+      margin-right: 30px;
+    }
+
+    .demo-form-inline .el-input {
+      --el-input-width: 160px;
+    }
+
+    .demo-form-inline .el-select {
+      --el-select-width: 160px;
+    }
+
+    .demo-form-inline .el-date-picker {
+      --el-select-width: 160px;
+    }
+  }
+  .table-cont {
+    min-height: 300px;
+    border-radius: 16px;
+    overflow: hidden;
+    background-color: #fff;
+    position: relative;
+    .el-icon-custom {
+      vertical-align: middle;
+      cursor: pointer;
+    }
+  }
+
+  /* 自定义弹窗样式 */
+  .traceability-dialog {
+    background: transparent;
+    box-shadow: none;
+    border-radius: 16px !important;
+  }
+
+  /* 主要内容区域 */
+  .dialog-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: white;
+    border-radius: 8px;
+    padding: 0 0 20px 0;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  /* 产品信息 */
+  .product-info {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    font-size: 14px;
+    color: #666;
+  }
+
+  .product-name {
+    font-weight: bold;
+    color: #333;
+  }
+
+  /* 二维码图片 */
+  .qrcode-image {
+    width: 200px;
+    height: 200px;
+    margin: 0 auto;
+  }
+
+  /* 下载区域 */
+  .download-section {
+    display: flex;
+    align-items: center;
+    margin: 0 0 10px 0;
+    color: #25bf82;
+    cursor: pointer;
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  .download-icon {
+    margin-left: 8px;
+    font-size: 16px;
+  }
+
+  /* 遗传编码区域 */
+  .code-section {
+    display: flex;
+    align-items: center;
+    margin: 10px 0;
+    background: rgba(37, 191, 130, 0.1);
+    border-radius: 4px;
+  }
+
+  .genetic-code {
+    font-family: monospace;
+    font-size: 14px;
+    color: #25bf82;
+    display: inline-block;
+    max-width: 250px;
+    padding: 0 10px;
+  }
+
+  .copy-icon {
+    margin-left: 10px;
+    color: #409eff;
+    cursor: pointer;
+    font-size: 16px;
+  }
+
+  /* 关闭按钮 */
+  .close-button {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -60px;
+    color: white;
+    font-size: 30px;
+    cursor: pointer;
+    transition: all 0.3s;
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/userCenter/mySource.vue b/sub-operation-service/src/views/userCenter/mySource.vue
new file mode 100644
index 0000000..a6c5a50
--- /dev/null
+++ b/sub-operation-service/src/views/userCenter/mySource.vue
@@ -0,0 +1,488 @@
+<template>
+  <div>
+    <common current-name="agricultural">
+      <template #main>
+        <div class="container">
+          <userHeader ref="titleRef" :title="'我的溯源'"></userHeader>
+          <!-- 搜索栏 -->
+          <div ref="searchBarRef" 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="productName">
+                  <el-input v-model="formInline.productName" placeholder="请输入产品名称" clearable />
+                </el-form-item>
+                <el-form-item label="溯源码" prop="sourceCode">
+                  <el-input v-model="formInline.sourceCode" placeholder="请输入编号" clearable />
+                </el-form-item>
+                <el-form-item label="申请状态" prop="status">
+                  <el-select v-model="formInline.status" placeholder="请选择">
+                    <el-option label="全部" value="99" />
+                    <el-option label="待检测" value="0" />
+                    <el-option label="已检测" value="1" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="申请日期" prop="startDate" style="margin-right: 0">
+                  <el-date-picker v-model="formInline.startDate" type="date" placeholder="请选择起始日期" clearable style="width: 160px" />
+                </el-form-item>
+                <el-form-item style="margin-right: 0">
+                  <span style="width: 30px; text-align: center; display: inline-block"> - </span>
+                </el-form-item>
+                <el-form-item prop="endDate">
+                  <el-date-picker v-model="formInline.endDate" type="date" placeholder="请选择截止日期" clearable 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: 24px 0 0 0" @click="resetForm">重置</el-button>
+            </div>
+          </div>
+          <!-- 表格 -->
+          <div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
+            <tableComponent
+              :table-data="tableData"
+              :columns="columns"
+              :show-border="false"
+              :show-selection="true"
+              :header-cell-class-name="getHeaderClass"
+              @page-change="handlePaginationChange"
+              @selection-change="handleSelectionChange"
+            >
+              <!-- 自定义-状态 -->
+              <template #status="slotProps">
+                <span :style="{ color: slotProps.row.status == 1 ? 'green' : 'red' }">
+                  {{ slotProps.row.status === 1 ? '已检测' : '待检测' }}
+                </span>
+              </template>
+
+              <!-- 自定义-检测报告 -->
+              <template #report="slotProps">
+                <el-icon v-if="slotProps.row.report == 1" color="#25bf82" size="20px" class="el-icon-custom" @click="seeReportImg(slotProps.row)"
+                  ><Memo style="width: 2em; height: 2em"
+                /></el-icon>
+                <el-icon v-else color="#999" size="20px" class="el-icon-custom"><Memo style="width: 2em; height: 2em" /></el-icon>
+              </template>
+
+              <!-- 自定义-溯源码 -->
+              <template #sourceCode="slotProps">
+                <el-icon v-if="slotProps.row.sourceCode == 1" color="#25bf82" size="20px" class="el-icon-custom" @click="seeCodeImg(slotProps.row)"
+                  ><Film style="width: 2em; height: 2em"
+                /></el-icon>
+                <el-icon v-else color="#999" size="20px" class="el-icon-custom"><Film style="width: 2em; height: 2em" /></el-icon>
+              </template>
+
+              <!-- 自定义-操作 -->
+              <template #action="slotProps">
+                <el-dropdown>
+                  <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>
+              </template>
+            </tableComponent>
+          </div>
+
+          <!-- 图片预览组件 -->
+          <el-image-viewer v-if="showPreview" :url-list="[previewImageUrl]" :initial-index="0" @close="closePreview" />
+
+          <!-- 查看溯源码 -->
+          <el-dialog v-model="dialogVisible" :show-close="false" width="450px" custom-class="traceability-dialog" :before-close="handleClose">
+            <!-- 主要内容区域 -->
+            <div class="dialog-content">
+              <!-- 二维码图片 -->
+              <img :src="codeUrl" alt="溯源码" class="qrcode-image" />
+
+              <!-- 下载区域 -->
+              <div class="download-section" @click="handleDownload">
+                <el-icon class="download-icon"><Download /></el-icon>
+                <span style="margin-left: 5px">下载溯源码</span>
+              </div>
+
+              <!-- 遗传编码区域 -->
+              <div class="code-section">
+                <span class="genetic-code">10.5488754215478XE254.1040201</span>
+                <el-tooltip content="复制溯源码" placement="top">
+                  <el-button color="#25bf82" style="color: #fff; font-weight: 400; height: 100%" @click="copyCode">复制</el-button>
+                </el-tooltip>
+              </div>
+            </div>
+
+            <!-- 自定义关闭按钮 -->
+            <el-icon class="close-button" @click="dialogVisible = false">
+              <CircleCloseFilled />
+            </el-icon>
+          </el-dialog>
+        </div>
+      </template>
+    </common>
+  </div>
+</template>
+<script setup>
+import common from './components/common.vue';
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+import userHeader from './components/userHeader.vue';
+import tableComponent from './components/tableComponent.vue';
+import Mock from 'mockjs';
+import { Close, Download, DocumentCopy, Loading } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+const formInline = reactive({
+  productName: '',
+  sourceCode: '',
+  status: '99',
+  startDate: '',
+  endDate: '',
+});
+
+const searchForm = ref(null);
+const onSubmit = () => {
+  console.log('submit!');
+};
+const resetForm = () => {
+  searchForm.value.resetFields();
+};
+
+// 表格数据
+const tableData = ref([]);
+// 列配置
+const columns = ref([
+  { prop: 'id', label: 'ID', width: '80' },
+  { prop: 'productName', label: '产品名称', width: '180px' },
+  { prop: 'applyTime', label: '申请时间', width: '180px' },
+  { prop: 'status', label: '申请状态', slotName: 'status' },
+  { prop: 'report', label: '检测报告', slotName: 'report' },
+  { prop: 'sourceCode', label: '溯源码', slotName: 'sourceCode' },
+  { prop: 'action', label: '操作', slotName: 'action', width: '180' },
+]);
+// 生成模拟数据
+const generateMockData = () => {
+  return Mock.mock({
+    'list|30': [
+      {
+        'id|+1': 1,
+        productName: '原生态 有机 西红柿', //产品名称 水果 蔬菜
+        applyTime: '@datetime',
+        'status|1': [1, 1, 1, 0], //0待检测 1已检测
+        'report|1': [1, 1, 1, 0], //0无报告 1有报告
+        reportUrl: '@url',
+        'sourceCode|1': [1, 1, 1, 0], //0无溯源码 1有溯源码
+        code: '@guid',
+        codeUrl: '@url',
+      },
+    ],
+  }).list;
+};
+// 加载数据
+const loadData = () => {
+  // 模拟API请求延迟
+  setTimeout(() => {
+    tableData.value = generateMockData();
+  }, 500);
+};
+// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
+const getHeaderClass = ({ column }) => {
+  return 'custom-header';
+};
+// 分页变化
+const handlePaginationChange = ({ page, pageSize }) => {
+  console.log('分页变化:', page, pageSize);
+  // 这里可以调用API获取新数据
+  // fetchData(page, limit,pageSize)
+};
+// 多选框变化
+const handleSelectionChange = (selection) => {
+  console.log('选中项:', selection);
+};
+
+let nowClickRow = ref(null);
+const dialogVisible = ref(false);
+let codeUrl = ref('');
+codeUrl.value = getAssetsFile('images/userCenter/检测报告.png').href ?? '';
+// 编辑操作
+const handleEdit = (row, num) => {
+  nowClickRow.value = row;
+  console.log('编辑的行:', row);
+  console.log('第几个按钮:', num);
+};
+
+// 图片预览相关状态
+const showPreview = ref(false);
+const previewImageUrl = ref('');
+// 查看检测报告
+const seeReportImg = (row) => {
+  nowClickRow.value = row;
+  console.log('查看检测报告:', row);
+  if (row.reportUrl) {
+    // 支持相对路径处理
+    // const imgUrl = row.reportUrl.startsWith('http') ? row.reportUrl : `${import.meta.env.VITE_API_BASE}${row.reportUrl}`;
+    const imgUrl = codeUrl.value;
+
+    previewImageUrl.value = imgUrl;
+    showPreview.value = true;
+  } else {
+    ElMessage.warning('该记录没有检测报告');
+  }
+};
+const closePreview = () => {
+  showPreview.value = false;
+};
+
+// 查看溯源码
+const seeCodeImg = (row) => {
+  nowClickRow.value = row;
+  console.log('查看溯源码:', row);
+  // codeUrl.value = getAssetsFile(row.codeUrl);
+  codeUrl.value = getAssetsFile('images/userCenter/weweima.png').href ?? '';
+  dialogVisible.value = true;
+};
+
+const handleClose = (done) => {
+  dialogVisible.value = false;
+};
+
+const handleDownload = async () => {
+  console.log('下载溯源码:', nowClickRow.value);
+  try {
+    if (!nowClickRow.value.codeUrl) {
+      ElMessage.error('图片链接无效');
+      return;
+    }
+
+    // 添加加载状态提示
+    const loading = ElMessage({
+      message: '正在准备下载...',
+      duration: 0,
+      icon: Loading,
+    });
+
+    // 使用fetch获取图片Blob数据
+    const response = await fetch(codeUrl.value);
+    if (!response.ok) throw new Error('网络响应不正常');
+
+    const blob = await response.blob();
+    const blobUrl = window.URL.createObjectURL(blob);
+
+    // 创建隐藏的下载链接
+    const link = document.createElement('a');
+    link.href = blobUrl;
+    link.download = `${new Date().toISOString().slice(0, 10)}.png`;
+    link.style.display = 'none';
+
+    document.body.appendChild(link);
+    link.click();
+
+    // 清理
+    setTimeout(() => {
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(blobUrl);
+      loading.close();
+      ElMessage.success('下载完成');
+    }, 100);
+  } catch (error) {
+    console.error('下载失败:', error);
+    ElMessage.error('下载失败: ' + error.message);
+  }
+};
+
+const copyCode = () => {
+  const code = '10.5488754215478XE254.1040201';
+  navigator.clipboard
+    .writeText(code)
+    .then(() => ElMessage.success('复制成功'))
+    .catch(() => ElMessage.error('复制失败'));
+};
+
+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 = 60;
+
+  // 最终计算
+  tableViewportHeight.value = windowHeight - headerHeight - searchBarHeight - paddingCompensation;
+  // console.log(tableViewportHeight.value);
+};
+// 组件挂载时加载数据
+onMounted(() => {
+  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>
+.container {
+  width: 100%;
+  overflow: hidden; /* 防止全局滚动条 */
+
+  .search-bar {
+    overflow: hidden;
+    margin: 16px 0;
+    padding: 16px 8px 0 16px;
+    border-radius: 16px;
+    background: #fff;
+    display: flex;
+    flex-shrink: 0; /* 禁止收缩 */
+    min-height: 100px;
+
+    .search-bar-left {
+      flex: 1;
+    }
+
+    .search-bar-right {
+      width: 100px;
+    }
+
+    .demo-form-inline {
+      text-align: left;
+    }
+
+    .el-form--inline .el-form-item {
+      margin-right: 30px;
+    }
+
+    .demo-form-inline .el-input {
+      --el-input-width: 160px;
+    }
+
+    .demo-form-inline .el-select {
+      --el-select-width: 160px;
+    }
+
+    .demo-form-inline .el-date-picker {
+      --el-select-width: 160px;
+    }
+  }
+  .table-cont {
+    min-height: 300px;
+    border-radius: 16px;
+    overflow: hidden;
+    background-color: #fff;
+    position: relative;
+    .el-icon-custom {
+      vertical-align: middle;
+      cursor: pointer;
+    }
+  }
+
+  /* 自定义弹窗样式 */
+  .traceability-dialog {
+    background: transparent;
+    box-shadow: none;
+    border-radius: 16px !important;
+  }
+
+  /* 主要内容区域 */
+  .dialog-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: white;
+    border-radius: 8px;
+    padding: 0 0 20px 0;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  /* 产品信息 */
+  .product-info {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    font-size: 14px;
+    color: #666;
+  }
+
+  .product-name {
+    font-weight: bold;
+    color: #333;
+  }
+
+  /* 二维码图片 */
+  .qrcode-image {
+    width: 200px;
+    height: 200px;
+    margin: 0 auto;
+  }
+
+  /* 下载区域 */
+  .download-section {
+    display: flex;
+    align-items: center;
+    margin: 0 0 10px 0;
+    color: #25bf82;
+    cursor: pointer;
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  .download-icon {
+    margin-left: 8px;
+    font-size: 16px;
+  }
+
+  /* 遗传编码区域 */
+  .code-section {
+    display: flex;
+    align-items: center;
+    margin: 10px 0;
+    background: rgba(37, 191, 130, 0.1);
+    border-radius: 4px;
+  }
+
+  .genetic-code {
+    font-family: monospace;
+    font-size: 14px;
+    color: #25bf82;
+    display: inline-block;
+    max-width: 250px;
+    padding: 0 10px;
+  }
+
+  .copy-icon {
+    margin-left: 10px;
+    color: #409eff;
+    cursor: pointer;
+    font-size: 16px;
+  }
+
+  /* 关闭按钮 */
+  .close-button {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -60px;
+    color: white;
+    font-size: 30px;
+    cursor: pointer;
+    transition: all 0.3s;
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/warehouseLogistics/components/common.vue b/sub-operation-service/src/views/warehouseLogistics/components/common.vue
new file mode 100644
index 0000000..a89ec32
--- /dev/null
+++ b/sub-operation-service/src/views/warehouseLogistics/components/common.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="smartFarm-common-warp">
+    <div class="smartFarm-common-content">
+      <div class="left-menu">
+        <slot v-if="$slots.left" name="left"></slot>
+        <template v-else>
+          <left-menu :menus="menus"></left-menu>
+        </template>
+      </div>
+      <div class="common-content">
+        <slot v-if="$slots.main" name="main"></slot>
+        <template v-else></template>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, watch } from 'vue';
+import leftMenu from '@/components/common/leftMenu.vue';
+
+const props = defineProps({
+  currentName: { type: String, default: 'agricultural' },
+});
+
+const menus = reactive([
+  {
+    name: 'inspection',
+    title: '仓储',
+    icon: 'menu1.png',
+    path: '/sub-operation-service/warehouse',
+    isOpen: false,
+    children: [],
+  },
+  {
+    name: 'control',
+    title: '物流',
+    icon: 'menu3.png',
+    path: '/sub-operation-service/logistics',
+    isOpen: false,
+    children: [],
+  },
+]);
+</script>
+<style lang="scss" scoped>
+.smartFarm-common-warp {
+  width: 100%;
+  height: calc(100vh - 230px);
+  text-align: center;
+  .smartFarm-common-content {
+    width: $width-main;
+    margin: auto;
+    height: 100%;
+    display: inline-flex;
+    justify-content: space-between;
+    margin: auto;
+    width: $width-main;
+    height: 100%;
+    .left-menu,
+    .common-content {
+      overflow-y: auto;
+      padding: 8px;
+      height: calc(100% - 16px);
+      border-radius: 8px;
+    }
+    .left-menu {
+      width: 240px;
+      background: $color-fff;
+    }
+    .common-content {
+      margin-left: 16px;
+      width: calc(100% - 240px);
+    }
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/warehouseLogistics/components/leftMenu.vue b/sub-operation-service/src/views/warehouseLogistics/components/leftMenu.vue
new file mode 100644
index 0000000..f78c0ac
--- /dev/null
+++ b/sub-operation-service/src/views/warehouseLogistics/components/leftMenu.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="smartFarm-left-menu-warp">
+    <div class="left-menu">
+      <div
+        v-for="(n, index) in leftMenu"
+        :key="index"
+        class="left-menu-item"
+        style="position: relative"
+        @click.stop="
+          toLink(index);
+          openList(index);
+        "
+      >
+        <div style="display: flex; justify-content: flex-start; align-items: center">
+          <div class="item-img">
+            <img :src="getAssetsFile('images/smartFarm/' + n.icon)?.href ?? ''" alt="" />
+          </div>
+          <span :class="currentIndex === index ? 'active' : ''" class="item-title">{{ n.title }}</span>
+          <img v-if="n.children.length > 0 && n.isOpen" alt="" :src="getAssetsFile('images/smartFarm/closing.png')" class="isOpen" />
+          <img
+            v-if="n.children.length > 0 && !n.isOpen"
+            alt=""
+            :src="getAssetsFile('images/smartFarm/down_1@2x.png')"
+            class="isOpen fz"
+            @click.stop="openList(index)"
+          />
+        </div>
+        <div v-if="n.children.length > 0 && n.isOpen" class="item-children">
+          <div v-for="(item, indexC) in n.children" :key="indexC">
+            <ul style="overflow: visible; padding-left: 40px; text-align: left; list-style-type: disc !important">
+              <li :class="item.name === currentCIndex ? 'active' : ''" @click.stop="toLinkSub(index, item.name)">
+                <div class="dot"></div>
+                {{ item.title }}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, watch } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
+
+const leftMenu = reactive([
+  {
+    name: 'inspection',
+    title: '仓储',
+    icon: 'menu1.png',
+    path: '/sub-operation-service/warehouse',
+    isOpen: false,
+    children: [
+      // {
+      //   name: 'fieldInspection',
+      //   title: '田间监测',
+      //   icon: 'menu1.png',
+      //   path: '/sub-operation-service/smartFarm/fieldInspection',
+      // },
+    ],
+  },
+  {
+    name: 'control',
+    title: '物流',
+    icon: 'menu3.png',
+    path: '/sub-operation-service/logistics',
+    isOpen: false,
+    children: [],
+  },
+]);
+
+let currentIndex = ref(0);
+let currentCIndex = ref('');
+
+const toLink = (index) => {
+  currentIndex.value = index;
+  if (leftMenu[index].children.length > 0) {
+    window.sessionStorage.setItem('currentOpen', index);
+  }
+  if (index === 0) {
+    window.sessionStorage.setItem('currentChild', 'main');
+  }
+  currentCIndex.value = '';
+  let path = index !== undefined ? leftMenu[index].path : null;
+  if (path) {
+    router.push(path);
+    window.sessionStorage.setItem('currentParent', index);
+  }
+};
+const toLinkSub = (index, name) => {
+  console.info('index', index);
+  console.info('currentChild', name);
+  currentCIndex.value = name;
+  window.sessionStorage.setItem('currentChild', name);
+  let path;
+  for (let i in leftMenu[index].children) {
+    if (leftMenu[index].children[i].name === name) {
+      path = leftMenu[index].children[i].path;
+    }
+  }
+  if (path) {
+    console.info('path', path);
+    router.push(path);
+  }
+};
+const openList = (index) => {
+  currentIndex.value = index;
+  leftMenu[index].isOpen = !leftMenu[index].isOpen;
+};
+
+onMounted(() => {
+  currentIndex.value = window.sessionStorage.getItem('currentParent') ? Number(window.sessionStorage.getItem('currentParent')) : 0;
+  const currentMenu = window.sessionStorage.getItem('currentOpen');
+  if (currentMenu) {
+    for (let i in leftMenu) {
+      leftMenu[i].isOpen = i === currentMenu;
+    }
+  }
+  const currentChild = window.sessionStorage.getItem('currentChild');
+  if (currentChild && currentChild === 'main') {
+    currentCIndex.value = '';
+  } else if (currentChild) {
+    currentCIndex.value = currentChild;
+  }
+});
+</script>
+<style lang="scss" scoped>
+.fz {
+  transform: rotate(180deg);
+}
+.isOpen {
+  position: absolute;
+  right: -24px;
+  width: 20px;
+  height: 20px;
+}
+.active {
+  color: $color-main;
+}
+.smartFarm-left-menu-warp {
+  padding: 0 30px 0 10px;
+  width: 100%;
+  height: 100%;
+  .left-menu {
+    .left-menu-item {
+      padding: 16px 0;
+      width: 100%;
+      cursor: pointer;
+      &.active {
+        color: $color-main;
+      }
+      .item-img,
+      .item-title {
+        vertical-align: middle;
+      }
+      .item-img {
+        display: inline-block;
+        width: 32px;
+        height: 32px;
+      }
+      .item-title {
+        padding-left: 8px;
+        font-size: 18px;
+        font-weight: 400;
+      }
+      .item-children {
+        margin-top: 8px;
+        font-size: 16px;
+        text-align: center;
+        transition: transform 0.3s ease;
+        .dot {
+          display: inline-block;
+          margin-right: 15px;
+          width: 4px;
+          height: 4px;
+          border-radius: 90px;
+          background-color: black;
+          vertical-align: middle;
+        }
+        li {
+          margin: 5px auto;
+          height: 35px;
+          line-height: 35px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/warehouseLogistics/logistics/index.vue b/sub-operation-service/src/views/warehouseLogistics/logistics/index.vue
index 38afccf..a848ceb 100644
--- a/sub-operation-service/src/views/warehouseLogistics/logistics/index.vue
+++ b/sub-operation-service/src/views/warehouseLogistics/logistics/index.vue
@@ -1,17 +1,18 @@
 <template>
-  <page-layout :menus="state.menus"> 物流 </page-layout>
+  <section>
+    <common>
+      <template #main> 物流 </template>
+    </common>
+  </section>
 </template>
 <script setup name="page-menu">
 import { ref, reactive, watch } from 'vue';
 import { getAssetsFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
-import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
+import Common from '../components/common.vue';
 
 const route = useRoute();
 const router = useRouter();
-
-const state = reactive({
-  menus: warehouseLogisticsRoutes[0].children,
-});
 </script>
+<script setup></script>
 <style lang="scss" scoped></style>
diff --git a/sub-operation-service/src/views/warehouseLogistics/warehouse/index.vue b/sub-operation-service/src/views/warehouseLogistics/warehouse/index.vue
index a8bd236..7e957d7 100644
--- a/sub-operation-service/src/views/warehouseLogistics/warehouse/index.vue
+++ b/sub-operation-service/src/views/warehouseLogistics/warehouse/index.vue
@@ -1,53 +1,74 @@
 <template>
-  <page-layout :menus="state.menus">
-    <el-row :gutter="20">
-      <el-col v-for="(item, index) in state.data" :key="index" :span="12">
-        <el-card class="storage-card" shadow="hover">
-          <div class="storage-content">
-            <div class="storage-content-top" @click="toLink(item)">
-              <el-image :src="item.imageUrl" fit="cover" class="storage-image" />
-              <div class="storage-info">
-                <h3 class="storage-title">{{ item.title }}</h3>
-                <div class="storage-desc">
-                  <span>{{ item.description }}</span>
-                  <i></i>
-                </div>
-                <div class="storage-tags">
-                  <el-tag effect="plain" round>延长仓储</el-tag>
-                  <el-tag effect="plain" round>保鲜储存</el-tag>
-                </div>
-                <div class="storage-location">
-                  <el-icon><Location /></el-icon>
-                  {{ item.location }}
-                </div>
-              </div>
-            </div>
-            <div class="storage-price">
-              <div class="storage-price-left">
-                <span class="price-label">报价</span>
-                <span class="price-amount">¥{{ item.price }}/间/月</span>
-              </div>
-              <el-button type="success" class="contact-btn">
-                <el-icon><ChatDotRound /></el-icon>
-                <span>联系卖家</span>
-              </el-button>
-            </div>
-            <div v-if="item.rank" class="rank-badge">
-              {{ item.rank }}
-            </div>
+  <!--  <page-layout :menus="state.menus"> </page-layout>-->
+  <section>
+    <common>
+      <template #main>
+        <el-card shadow="none" style="border-radius: 14px">
+          <div class="tabs">
+            <div class="tab" style="color: rgba(153, 153, 153, 1)">仓储分类({{ data.title }})</div>
+            <div class="tab cursor" :class="{ active: currentTab === 0 }" @click.stop="currentTab = 0">普通仓库</div>
+            <div class="tab cursor" :class="{ active: currentTab === 1 }" @click.stop="currentTab = 1">恒温仓库</div>
+            <div class="tab cursor" :class="{ active: currentTab === 2 }" @click.stop="currentTab = 2">冷库</div>
+            <div class="tab cursor" :class="{ active: currentTab === 3 }" @click.stop="currentTab = 3">气调仓库</div>
+            <div class="tab">&nbsp;</div>
           </div>
         </el-card>
-      </el-col>
-    </el-row>
-
-    <page-pagination :total="20" @current-change="currentChange" />
-  </page-layout>
+        <el-row :gutter="20" style="margin-top: 10px">
+          <el-col v-for="(item, index) in state.data" :key="index" :span="12">
+            <el-card class="storage-card" shadow="hover">
+              <div class="storage-content">
+                <div class="storage-content-top" @click="toLink(item)">
+                  <el-image :src="item.imageUrl" fit="cover" class="storage-image" />
+                  <div class="storage-info">
+                    <h3 class="storage-title">{{ item.title }}</h3>
+                    <div class="storage-desc">
+                      <span>{{ item.description }}</span>
+                      <img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
+                      <img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
+                    </div>
+                    <div class="storage-tags">
+                      <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">延长仓储</el-tag>
+                      <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">保鲜储存</el-tag>
+                    </div>
+                    <div class="storage-location">
+                      <el-icon><Location /></el-icon>
+                      {{ item.location }}
+                    </div>
+                  </div>
+                </div>
+                <div class="storage-price">
+                  <div class="storage-price-left">
+                    <span class="price-label">报价</span>
+                    <span class="price-amount">¥{{ item.price }}/间/月</span>
+                  </div>
+                  <el-button type="success" class="contact-btn">
+                    <img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
+                    <span>联系卖家</span>
+                  </el-button>
+                </div>
+                <div v-if="item.rank" class="rank-badge">
+                  <!--              {{ item.rank }}-->
+                  <img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+        <page-pagination :total="20" @current-change="currentChange" />
+      </template>
+    </common>
+  </section>
 </template>
 <script setup name="page-menu">
 import { ref, reactive, watch } from 'vue';
 import { getAssetsFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
+import Common from '../components/common.vue';
+import { useGetCommonData } from '../../../store/modules/common';
+import { storeToRefs } from 'pinia';
+const store = useGetCommonData();
+const { data } = storeToRefs(store);
 
 const route = useRoute();
 const router = useRouter();
@@ -72,7 +93,7 @@ const state = reactive({
       description: '绿鲜蔬选果蔬仓储中心',
       location: '临沧市-耿马县',
       price: '600.0',
-      rank: '',
+      rank: '2',
     },
     {
       imageUrl: '/storage3.jpg',
@@ -82,9 +103,35 @@ const state = reactive({
       price: '600.0',
       rank: '3',
     },
+    {
+      imageUrl: '/storage3.jpg',
+      title: '果蔬保鲜仓储',
+      description: '绿鲜蔬选果蔬仓储中心 ',
+      location: '临沧市-耿马县',
+      price: '600.0',
+      rank: '',
+    },
+    {
+      imageUrl: '/storage3.jpg',
+      title: '果蔬保鲜仓储',
+      description: '绿鲜蔬选果蔬仓储中心 ',
+      location: '临沧市-耿马县',
+      price: '600.0',
+      rank: '',
+    },
+    {
+      imageUrl: '/storage3.jpg',
+      title: '果蔬保鲜仓储',
+      description: '绿鲜蔬选果蔬仓储中心 ',
+      location: '临沧市-耿马县',
+      price: '600.0',
+      rank: '',
+    },
   ],
 });
 
+const currentTab = ref(0);
+
 const currentChange = (current) => {
   state.query.current = current;
 };
@@ -97,6 +144,20 @@ const toLink = (row) => {
 };
 </script>
 <style lang="scss" scoped>
+.tabs {
+  height: 50px;
+  line-height: 50px;
+  display: flex;
+  font-size: 18px;
+  justify-content: space-between;
+  padding: 0 20px;
+}
+.cursor {
+  cursor: pointer;
+}
+.active {
+  color: rgba(37, 191, 130, 1);
+}
 .storage-card {
   position: relative;
   overflow: hidden;