diff --git a/f/web-kboss/src - 快捷方式.lnk b/f/web-kboss/src - 快捷方式.lnk
deleted file mode 100644
index a0203e4..0000000
Binary files a/f/web-kboss/src - 快捷方式.lnk and /dev/null differ
diff --git a/f/web-kboss/src/api/productsServices/index.js b/f/web-kboss/src/api/productsServices/index.js
new file mode 100644
index 0000000..074df41
--- /dev/null
+++ b/f/web-kboss/src/api/productsServices/index.js
@@ -0,0 +1,117 @@
+import request from "@/utils/request";
+
+// 菜单添加
+export function addProductMenuAPI(params) {
+    return request({
+        url: `/product/home_page_product_menu_add.dspy`,
+        method: 'post',
+        data: params,
+    })
+}
+
+// 菜单更新
+export function updateProductMenuAPI(params) {
+    return request({
+        url: `/product/home_page_product_menu_update.dspy`,
+        method: 'post',
+        data: params,
+    })
+}
+
+// 菜单查找
+export function findProductMenuAPI(params) {
+    return request({
+        url: `/product/home_page_product_menu_search.dspy`,
+        method: 'get',
+        data: params,
+    })
+}
+
+// 菜单删除
+export function deleteProductMenuAPI(params) {
+    return request({
+        url: `/product/home_page_product_menu_delete.dspy`,
+        method: 'post',
+        data: params,
+    })
+}
+
+// 产品添加
+export function addProductThreeMenuAPI(params) {
+    return request({
+        url: `/product/home_page_product_add.dspy`,
+        method: 'post',
+        data: params,
+    })
+}
+
+// 产品列表
+export function findProductThreeMenuAPI(params) {
+    return request({
+        url: `/product/home_page_product_search.dspy`,
+        method: 'post',
+        data: params,
+    })
+}
+
+// 三级产品更新
+export function updateProductThreeMenuAPI(params) {
+    return request({
+        url: `/product/home_page_product_update.dspy`,
+        method: 'post',
+        data: params,
+    })
+}
+
+// 三级产品删除
+export function deleteProductThreeMenuAPI(params) {
+    return request({
+        url: `/product/home_page_product_delete.dspy`,
+        method: 'post',
+        data: params,
+    })
+}
+
+//产品介绍页数据添加
+export function addProductIntroAPI(params) {
+    return request({
+        url: `/product/home_page_content_add.dspy`,
+        method: 'post',
+        data: params,
+    })
+}
+// 产品介绍页数据删除
+export function deleteProductIntroAPI(params) {
+    return request({
+        url: `/product/home_page_content_delete.dspy`,
+        method: 'get',
+        data: params,
+    })
+}
+
+// 产品介绍页数据更新
+export function updateProductIntroAPI(params) {
+    return request({
+        url: `/product/home_page_content_update.dspy`,
+        method: 'post',
+        data: params,
+    })
+}
+
+// 产品介绍页数据树
+export function findProductIntroAPI(params) {
+    return request({
+        url: `/product/home_page_content_get_tree.dspy`,
+        method: 'post',
+        data: params,
+    })
+}
+
+// 产品介绍页数据查找
+export function findProductIntroTreeAPI(params) {
+    return request({
+        url: `/product/home_page_content_search.dspy`,
+        method: 'get',
+        data: params,
+    })
+}
diff --git a/f/web-kboss/src/router/index.js b/f/web-kboss/src/router/index.js
index 214d047..e699bc4 100644
--- a/f/web-kboss/src/router/index.js
+++ b/f/web-kboss/src/router/index.js
@@ -21,7 +21,7 @@ import CreateEip from "@/views/product/productHome/capitalOnline/Net/Eip/createE
 import { getHomePath } from '@/views/setting/tools'
 
 Vue.use(Router);
-  
+
 /**
  * Note: sub-menu only appear when route children.length >= 1
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
@@ -1156,8 +1156,17 @@ export const asyncRoutes = [
         path: "index",
         component: () => import("@/views/operation/menuMangement/index.vue"),
         name: "menuMangement",
-        meta: { title: "菜单管理", fullPath: "/menuMangement/index" },
+        meta: { title: "ncmatch菜单管理", fullPath: "/menuMangement/index" },
       },
+        {
+        path: "productsServices",
+        component: () => import("@/views/operation/productsServices/index.vue"),
+        name: "productsServices",
+        meta: {
+          title: "产品与服务管理",
+          fullPath: "/operation/productsServices"
+        }
+      }
     ]
   },
 
diff --git a/f/web-kboss/src/store/modules/permission.js b/f/web-kboss/src/store/modules/permission.js
index dbbe047..9b9188d 100644
--- a/f/web-kboss/src/store/modules/permission.js
+++ b/f/web-kboss/src/store/modules/permission.js
@@ -145,6 +145,22 @@ const mutations = {
 };
 
 const actions = {
+  /**
+   * 生成动态路由
+   *
+   * 根据用户类型、组织类型和权限列表生成对应的动态路由配置
+   * 包含管理员和普通用户的不同路由生成逻辑
+   *
+   * @param {Object} context - Vuex上下文对象
+   * @param {Function} context.commit - 提交mutation的方法
+   * @param {Object} context.rootState - 根模块的状态
+   * @param {Object} params - 参数对象
+   * @param {string} [params.userType] - 用户类型
+   * @param {number} [params.orgType] - 组织类型
+   * @param {Array} [params.auths] - 权限列表
+   * @param {Object} [params.user] - 用户信息对象
+   * @returns {Promise<Array>} 解析后的动态路由数组
+   */
   generateRoutes({ commit, rootState }, params) {
     console.log("ACTION generateRoutes - params:", params);
     return new Promise((resolve) => {
diff --git a/f/web-kboss/src/views/homePage/ncmatch/index.vue b/f/web-kboss/src/views/homePage/ncmatch/index.vue
index ff3a69f..4511b31 100644
--- a/f/web-kboss/src/views/homePage/ncmatch/index.vue
+++ b/f/web-kboss/src/views/homePage/ncmatch/index.vue
@@ -353,7 +353,7 @@ export default Vue.extend({
     color: #1b5bff;
   }
 }
-/deep/.el-pagination{
+/deep/.el-pagination{ 
   text-align: center !important;
 }
 </style>
diff --git a/f/web-kboss/src/views/homePage/ncmatch/mainPage/menuAside/index.vue b/f/web-kboss/src/views/homePage/ncmatch/mainPage/menuAside/index.vue
index 961e204..2bb30b4 100644
--- a/f/web-kboss/src/views/homePage/ncmatch/mainPage/menuAside/index.vue
+++ b/f/web-kboss/src/views/homePage/ncmatch/mainPage/menuAside/index.vue
@@ -38,7 +38,7 @@
               @mouseenter="selectSecondary(secondary)"
               @click="handleSecondaryClick(secondary)">
               {{ secondary.second_level_name }}
-              <span v-if="secondary.thirdClassification && secondary.thirdClassification.length > 0" class="item-arrow">›</span>
+              <!-- <span v-if="secondary.thirdClassification && secondary.thirdClassification.length > 0" class="item-arrow">›</span> -->
             </div>
           </div>
 
diff --git a/f/web-kboss/src/views/homePage/ncmatch/supplyAndDemandSquare/index.vue b/f/web-kboss/src/views/homePage/ncmatch/supplyAndDemandSquare/index.vue
index f0c76d8..18ddf8f 100644
--- a/f/web-kboss/src/views/homePage/ncmatch/supplyAndDemandSquare/index.vue
+++ b/f/web-kboss/src/views/homePage/ncmatch/supplyAndDemandSquare/index.vue
@@ -341,10 +341,10 @@ export default {
   align-items: center;
 }
 .banner-box {
-  height: 700px!important;
+  height: 600px!important;
   background: url('./img/tt-banner.png') no-repeat ;
   width: 100%;
-  padding-bottom: 200px;
+  // padding-bottom: 10px;
 
   .conter {
     width: 700px;
diff --git a/f/web-kboss/src/views/operation/productsServices/index.vue b/f/web-kboss/src/views/operation/productsServices/index.vue
new file mode 100644
index 0000000..fb1f81e
--- /dev/null
+++ b/f/web-kboss/src/views/operation/productsServices/index.vue
@@ -0,0 +1,1963 @@
+<template>
+  <div class="mianBox">
+    <div class="left">
+      <el-card class="left-card">
+        <div class="toptit">
+          菜单结构
+        </div>
+        <div class="search">
+          <el-input placeholder="请输入内容搜索菜单" v-model="searchText" class="input-with-select">
+            <el-button slot="append" icon="el-icon-search" @click="handleSearchMenu"></el-button>
+          </el-input>
+        </div>
+        <div class="tree-container">
+          <el-tree :data="menuData" node-key="id" default-expand-all :expand-on-click-node="false"
+            :highlight-current="true" @node-click="handleNodeClick">
+            <span class="custom-tree-node" slot-scope="{ node, data }">
+              <span>
+                {{ data.title || data.label }}
+              </span>
+              <span>
+                <el-button type="text" size="mini" @click="handleAddMenu(data)">
+                  <i class="el-icon-plus"></i>
+                </el-button>
+                <el-button type="text" size="mini" @click="handleEditMenu(data)">
+                  <i class="el-icon-edit"></i>
+                </el-button>
+                <el-button type="text" size="mini" @click="deleteProductMenu(data)">
+                  <i class="el-icon-delete"></i>
+                </el-button>
+              </span>
+            </span>
+          </el-tree>
+        </div>
+        <div class="add-menu-box" @click="handleAddOneMenu">
+          <div class="add-icon">+</div>
+          <div>添加一级菜单</div>
+        </div>
+      </el-card>
+    </div>
+
+    <!-- 右侧卡片 -->
+    <div class="right">
+      <el-card class="product-card">
+        <div class="rigtop">
+          <div class="rigtop-left">
+            <div class="current-menu">
+              {{ currentMenuTitle }}
+            </div>
+            <div class="breadcrumb" v-if="breadcrumbPath.length > 0">
+              <el-breadcrumb separator="/">
+                <el-breadcrumb-item v-for="item in breadcrumbPath" :key="item.id">
+                  {{ item.title }}
+                </el-breadcrumb-item>
+              </el-breadcrumb>
+            </div>
+          </div>
+          <div class="rigtop-right">
+            <div class="add-product-btn" v-if="currentMenuLevel === 3">
+              <el-button type="primary" icon="el-icon-plus" @click="handleAddProduct">添加产品</el-button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 产品列表表格 -->
+        <div class="product-table">
+          <el-table :data="tableData" style="width: 100%" empty-text="暂无数据" @row-click="handleRowClick">
+            <el-table-column label="产品服务名称" min-width="200">
+              <template slot-scope="scope">
+                <div class="product-info">
+                  <div class="product-name">{{ scope.row.name }}</div>
+                  <div class="product-desc">{{ scope.row.description || '--' }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="产品标签" min-width="150">
+              <template slot-scope="scope">
+                <div class="product-tags">
+                  <el-tag v-for="tag in scope.row.label ? scope.row.label.split(',') : []" :key="tag" size="small"
+                    type="info">
+                    {{ tag }}
+                  </el-tag>
+                  <span v-if="!scope.row.label">--</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="product_group" label="产品组" min-width="120">
+              <template slot-scope="scope">
+                {{ scope.row.product_group || '--' }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="sort_order" label="排序" min-width="80">
+            </el-table-column>
+            <el-table-column label="操作" min-width="180">
+              <template slot-scope="scope">
+                <div class="action-buttons">
+                  <el-button size="mini" @click="handleEditProduct(scope.row)">编辑</el-button>
+                  <el-button size="mini" type="danger" @click="handleDeleteProduct(scope.row)">删除</el-button>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <div class="pagination" v-if="pagination.total > 0">
+          <div class="pagination-controls">
+            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+              :current-page="pagination.current_page" :page-sizes="[5, 10, 20, 500]" :page-size="pagination.page_size"
+              layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
+          </div>
+        </div>
+      </el-card>
+
+      <!-- 产品详细信息卡片 -->
+      <el-card class="product-detail-card">
+        <div class="card-top">
+          <div class="top-tit">
+            <span>产品详情信息</span>
+            <span v-if="selectedProduct">当前选择的产品：{{ selectedProduct.name }}</span>
+            <span v-else>请您点击产品</span>
+          </div>
+          <div class="top-btn" v-if="selectedProduct">
+            <el-button type="primary" @click="handleSaveContent">保存所有内容</el-button>
+          </div>
+        </div>
+
+        <!-- 详情：只有选择了产品才显示内容编辑区域 -->
+        <div v-if="selectedProduct">
+          <div class="card-content">
+            <div class="content-tab">
+              <div class="tab-top">
+                内容类型
+              </div>
+              <div class="tab-content">
+                <div class="tab-item" :class="{ active: activeTab === 'advantage' }" @click="switchTab('advantage')">
+                  产品优势
+                </div>
+                <div class="tab-item" :class="{ active: activeTab === 'feature' }" @click="switchTab('feature')">
+                  产品功能
+                </div>
+                <div class="tab-item" :class="{ active: activeTab === 'application' }" @click="switchTab('application')">
+                  产品应用
+                </div>
+                <div class="tab-item" :class="{ active: activeTab === 'product' }" @click="switchTab('product')">
+                  产品介绍
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="content-form">
+            <!-- 产品优势表单 -->
+            <div class="advantage-form" v-if="activeTab === 'advantage'">
+              <div class="section-header">
+                <h3>产品优势</h3>
+                <el-button type="primary" size="small" @click="addNewForm('advantage')">+ 添加优势表单</el-button>
+              </div>
+
+              <!-- 已保存的优势列表 -->
+              <div class="saved-list" v-if="advantageList.length > 0">
+                <div class="list-item" v-for="(item, index) in advantageList" :key="item.id">
+                  <div class="item-header">
+                    <div class="item-title">已保存优势 #{{ index + 1 }}</div>
+                    <div class="item-actions">
+                      <el-button type="text" size="mini" @click="editSavedItem(item, 'advantage')">编辑</el-button>
+                      <el-button type="text" size="mini" @click="deleteContentItem(item.id, 'advantage')">删除</el-button>
+                    </div>
+                  </div>
+                  <div class="item-content">
+                    <div v-if="item.img" class="item-image">
+                      <img :src="item.img" alt="优势图片" style="max-width: 100px; max-height: 100px;">
+                    </div>
+                    <div class="item-details">
+                      <div><strong>标题：</strong>{{ item.title }}</div>
+                      <div><strong>描述：</strong>{{ item.description }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 新优势表单列表 -->
+              <div class="form-list">
+                <div class="form-item" v-for="(form, index) in advantageForms" :key="'advantage_form_' + index">
+                  <div class="form-title">
+                    产品优势 #{{ advantageList.length + index + 1 }}
+                    <span v-if="form.id" style="color: #67c23a; font-size: 12px; margin-left: 8px;">(编辑中)</span>
+                  </div>
+                  <el-form :model="form" :rules="contentRules" :ref="'advantageForm' + index" label-width="120px">
+                    <el-form-item label="图片" prop="img">
+                      <el-input v-model="form.img" placeholder="请输入图片链接"></el-input>
+                    </el-form-item>
+                    <el-form-item label="标题" prop="title">
+                      <el-input v-model="form.title" placeholder="请输入标题"></el-input>
+                    </el-form-item>
+                    <el-form-item label="描述" prop="description">
+                      <el-input type="textarea" v-model="form.description"
+                        placeholder="请输入描述" :rows="4"></el-input>
+                    </el-form-item>
+                  </el-form>
+                  <div class="form-actions">
+                    <el-button type="text" size="mini" @click="removeForm('advantage', index)" v-if="advantageForms.length > 1">删除此表单</el-button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 产品功能表单 -->
+            <div class="feature-form" v-if="activeTab === 'feature'">
+              <div class="section-header">
+                <h3>产品功能</h3>
+                <el-button type="primary" size="small" @click="addNewForm('feature')">+ 添加功能表单</el-button>
+              </div>
+
+              <!-- 已保存的功能列表 -->
+              <div class="saved-list" v-if="featureList.length > 0">
+                <div class="list-item" v-for="(item, index) in featureList" :key="item.id">
+                  <div class="item-header">
+                    <div class="item-title">已保存功能 #{{ index + 1 }}</div>
+                    <div class="item-actions">
+                      <el-button type="text" size="mini" @click="editSavedItem(item, 'feature')">编辑</el-button>
+                      <el-button type="text" size="mini" @click="deleteContentItem(item.id, 'feature')">删除</el-button>
+                    </div>
+                  </div>
+                  <div class="item-content">
+                    <div class="item-details">
+                      <div><strong>标题：</strong>{{ item.title }}</div>
+                      <div><strong>描述：</strong>{{ item.description }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 新功能表单列表 -->
+              <div class="form-list">
+                <div class="form-item" v-for="(form, index) in featureForms" :key="'feature_form_' + index">
+                  <div class="form-title">
+                    产品功能 #{{ featureList.length + index + 1 }}
+                    <span v-if="form.id" style="color: #67c23a; font-size: 12px; margin-left: 8px;">(编辑中)</span>
+                  </div>
+                  <el-form :model="form" :rules="contentRules" :ref="'featureForm' + index" label-width="120px">
+                    <el-form-item label="标题" prop="title">
+                      <el-input v-model="form.title" placeholder="请输入标题"></el-input>
+                    </el-form-item>
+                    <el-form-item label="描述" prop="description">
+                      <el-input type="textarea" v-model="form.description"
+                        placeholder="请输入描述" :rows="4"></el-input>
+                    </el-form-item>
+                  </el-form>
+                  <div class="form-actions">
+                    <el-button type="text" size="mini" @click="removeForm('feature', index)" v-if="featureForms.length > 1">删除此表单</el-button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 产品应用表单 -->
+            <div class="application-form" v-if="activeTab === 'application'">
+              <div class="section-header">
+                <h3>产品应用</h3>
+                <el-button type="primary" size="small" @click="addNewForm('application_main')">+ 添加应用主项表单</el-button>
+              </div>
+
+              <!-- 已保存的应用列表 -->
+              <div class="saved-list" v-if="applicationMainList.length > 0">
+                <div class="list-item main-item" v-for="(item, index) in applicationMainList" :key="item.id">
+                  <div class="item-header">
+                    <div class="item-title">已保存应用主项 #{{ index + 1 }}</div>
+                    <div class="item-actions">
+                      <el-button type="text" size="mini" @click="editSavedItem(item, 'application_main')">编辑</el-button>
+                      <el-button type="text" size="mini" @click="deleteContentItem(item.id, 'application_main')">删除</el-button>
+                      <el-button type="text" size="mini" @click="addDetailForm(item.id)">添加详情</el-button>
+                    </div>
+                  </div>
+                  <div class="item-content">
+                    <div v-if="item.img" class="item-image">
+                      <img :src="item.img" alt="应用图片" style="max-width: 100px; max-height: 100px;">
+                    </div>
+                    <div class="item-details">
+                      <div><strong>标题：</strong>{{ item.title }}</div>
+                    </div>
+                  </div>
+
+                  <!-- 详情项列表 -->
+                  <div class="detail-section" v-if="item.subItems && item.subItems.length > 0">
+                    <div class="detail-list">
+                      <div class="detail-item" v-for="(detail, detailIndex) in item.subItems" :key="detail.id">
+                        <div class="detail-title">详情项 #{{ detailIndex + 1 }}</div>
+                        <div class="detail-content">
+                          <div><strong>标题：</strong>{{ detail.title }}</div>
+                          <div><strong>描述：</strong>{{ detail.description }}</div>
+                        </div>
+                        <div class="detail-actions">
+                          <el-button type="text" size="mini" @click="editSavedItem(detail, 'application_detail')">编辑</el-button>
+                          <el-button type="text" size="mini" @click="deleteContentItem(detail.id, 'application_detail')">删除</el-button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- 添加详情表单 -->
+                  <div class="detail-form-section" v-if="applicationDetailForms[item.id] && applicationDetailForms[item.id].length > 0">
+                    <div class="detail-form-item" v-for="(detailForm, detailIndex) in applicationDetailForms[item.id]" :key="'detail_' + detailIndex">
+                      <div class="form-title">
+                        应用详情 #{{ (item.subItems ? item.subItems.length : 0) + detailIndex + 1 }}
+                        <span v-if="detailForm.id" style="color: #67c23a; font-size: 12px; margin-left: 8px;">(编辑中)</span>
+                      </div>
+                      <el-form :model="detailForm" :rules="contentRules" :ref="'appDetailForm_' + item.id + '_' + detailIndex" label-width="120px">
+                        <el-form-item label="标题" prop="title">
+                          <el-input v-model="detailForm.title" placeholder="请输入详情标题"></el-input>
+                        </el-form-item>
+                        <el-form-item label="描述" prop="description">
+                          <el-input type="textarea" v-model="detailForm.description" placeholder="请输入详情描述" :rows="3"></el-input>
+                        </el-form-item>
+                      </el-form>
+                      <div class="form-actions">
+                        <el-button type="text" size="mini" @click="removeDetailForm(item.id, detailIndex)" v-if="applicationDetailForms[item.id].length > 1">删除此详情</el-button>
+                      </div>
+                    </div>
+                    <div class="add-detail-btn">
+                      <el-button type="text" size="mini" @click="addDetailForm(item.id)">+ 添加更多详情</el-button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 新应用主项表单列表 -->
+              <div class="form-list">
+                <div class="form-item main-form-item" v-for="(form, index) in applicationForms" :key="'application_form_' + index">
+                  <div class="form-title">
+                    应用主项 #{{ applicationMainList.length + index + 1 }}
+                    <span v-if="form.id" style="color: #67c23a; font-size: 12px; margin-left: 8px;">(编辑中)</span>
+                  </div>
+                  <el-form :model="form" :rules="contentRules" :ref="'applicationForm' + index" label-width="120px">
+                    <el-form-item label="标题" prop="title">
+                      <el-input v-model="form.title" placeholder="请输入标题"></el-input>
+                    </el-form-item>
+                    <el-form-item label="图片" prop="img">
+                      <el-input v-model="form.img" placeholder="请输入图片链接"></el-input>
+                    </el-form-item>
+                  </el-form>
+                  <div class="form-actions">
+                    <el-button type="text" size="mini" @click="removeForm('application_main', index)" v-if="applicationForms.length > 1">删除此主项</el-button>
+                    <el-button type="text" size="mini" @click="addDetailForm('new_' + index)">+ 添加详情</el-button>
+                  </div>
+
+                  <!-- 新应用详情表单 -->
+                  <div class="detail-form-section" v-if="applicationDetailForms['new_' + index] && applicationDetailForms['new_' + index].length > 0">
+                    <div class="detail-form-item" v-for="(detailForm, detailIndex) in applicationDetailForms['new_' + index]" :key="'new_detail_' + detailIndex">
+                      <div class="form-title">
+                        应用详情 #{{ detailIndex + 1 }}
+                        <span v-if="detailForm.id" style="color: #67c23a; font-size: 12px; margin-left: 8px;">(编辑中)</span>
+                      </div>
+                      <el-form :model="detailForm" :rules="contentRules" :ref="'newDetailForm_' + index + '_' + detailIndex" label-width="120px">
+                        <el-form-item label="标题" prop="title">
+                          <el-input v-model="detailForm.title" placeholder="请输入详情标题"></el-input>
+                        </el-form-item>
+                        <el-form-item label="描述" prop="description">
+                          <el-input type="textarea" v-model="detailForm.description" placeholder="请输入详情描述" :rows="3"></el-input>
+                        </el-form-item>
+                      </el-form>
+                      <div class="form-actions">
+                        <el-button type="text" size="mini" @click="removeDetailForm('new_' + index, detailIndex)" v-if="applicationDetailForms['new_' + index].length > 1">删除此详情</el-button>
+                      </div>
+                    </div>
+                    <div class="add-detail-btn">
+                      <el-button type="text" size="mini" @click="addDetailForm('new_' + index)">+ 添加更多详情</el-button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 产品介绍表单 -->
+            <div class="product-intro-form" v-if="activeTab === 'product'">
+              <div class="section-header">
+                <h3>产品介绍</h3>
+                <el-button type="primary" size="small" @click="addNewForm('product_spec')">+ 添加规格表单</el-button>
+              </div>
+
+              <!-- 主介绍表单 -->
+              <div class="main-product-form">
+                <div class="form-title">产品主信息</div>
+                <el-form :model="productIntroForm" :rules="contentRules" ref="productIntroForm" label-width="120px">
+                  <el-form-item label="标题" prop="title">
+                    <el-input v-model="productIntroForm.title" placeholder="请输入标题"></el-input>
+                  </el-form-item>
+                  <el-form-item label="描述" prop="description">
+                    <el-input type="textarea" v-model="productIntroForm.description"
+                      placeholder="请输入描述" :rows="3"></el-input>
+                  </el-form-item>
+                  <el-form-item label="价格" prop="price">
+                    <el-input v-model="productIntroForm.price" placeholder="请输入价格"></el-input>
+                  </el-form-item>
+                  <el-form-item label="原价" prop="pre_price">
+                    <el-input v-model="productIntroForm.pre_price" placeholder="请输入原价"></el-input>
+                  </el-form-item>
+                  <el-form-item label="价格单位" prop="price_unit">
+                    <el-input v-model="productIntroForm.price_unit" placeholder="请输入价格单位，如：台/月"></el-input>
+                  </el-form-item>
+                  <el-form-item label="折扣" prop="discount">
+                    <el-input-number v-model="productIntroForm.discount" :min="0" :max="100" :step="0.1"></el-input-number>
+                  </el-form-item>
+                  <el-form-item label="背景图" prop="bg_img_url">
+                    <el-input v-model="productIntroForm.bg_img_url" placeholder="请输入背景图链接"></el-input>
+                  </el-form-item>
+                </el-form>
+              </div>
+
+              <!-- 已保存的规格列表 -->
+              <div class="saved-list" v-if="productSpecList.length > 0">
+                <div class="list-item" v-for="(item, index) in productSpecList" :key="item.id">
+                  <div class="item-header">
+                    <div class="item-title">已保存规格 #{{ index + 1 }}</div>
+                    <div class="item-actions">
+                      <el-button type="text" size="mini" @click="editSavedItem(item, 'product_spec')">编辑</el-button>
+                      <el-button type="text" size="mini" @click="deleteContentItem(item.id, 'product_spec')">删除</el-button>
+                    </div>
+                  </div>
+                  <div class="item-content">
+                    <div v-if="item.icon" class="item-image">
+                      <img :src="item.icon" alt="规格图标" style="max-width: 30px; max-height: 30px;">
+                    </div>
+                    <div class="item-details">
+                      <div><strong>名称：</strong>{{ item.name }}</div>
+                      <div><strong>描述：</strong>{{ item.description }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 新规格表单列表 -->
+              <div class="form-list">
+                <div class="form-item" v-for="(form, index) in productSpecForms" :key="'spec_form_' + index">
+                  <div class="form-title">
+                    产品规格 #{{ productSpecList.length + index + 1 }}
+                    <span v-if="form.id" style="color: #67c23a; font-size: 12px; margin-left: 8px;">(编辑中)</span>
+                  </div>
+                  <el-form :model="form" :rules="contentRules" :ref="'specForm' + index" label-width="120px">
+                    <el-form-item label="名称" prop="name">
+                      <el-input v-model="form.name" placeholder="请输入名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="描述" prop="description">
+                      <el-input type="textarea" v-model="form.description" placeholder="请输入描述"></el-input>
+                    </el-form-item>
+                    <el-form-item label="图标链接" prop="icon">
+                      <el-input v-model="form.icon" placeholder="请输入图标链接"></el-input>
+                    </el-form-item>
+                  </el-form>
+                  <div class="form-actions">
+                    <el-button type="text" size="mini" @click="removeForm('product_spec', index)" v-if="productSpecForms.length > 1">删除此规格</el-button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 详情：没有选择产品时的提示信息 -->
+        <div v-else class="no-product-selected">
+          <div class="empty-state">
+            <i class="el-icon-info" style="font-size: 48px; color: #909399;"></i>
+            <div style="margin-top: 20px; color: #909399;">请您点击产品列表中的产品以查看和编辑详情信息</div>
+          </div>
+        </div>
+      </el-card>
+    </div>
+
+    <!-- 菜单编辑对话框 -->
+    <el-dialog :title="menuDialog.title" :visible.sync="menuDialog.visible" width="500px">
+      <el-form :model="menuDialog.form" label-width="80px" ref="menuForm" :rules="menuRules">
+        <el-form-item label="菜单标题" prop="title">
+          <el-input v-model="menuDialog.form.title" placeholder="请输入菜单标题"></el-input>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort_order">
+          <el-input-number v-model="menuDialog.form.sort_order" :min="1" :max="100"></el-input-number>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="menuDialog.visible = false">取消</el-button>
+        <el-button type="primary" @click="handleSubmitMenu">确定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 产品编辑对话框 -->
+    <el-dialog :title="productDialog.title" :visible.sync="productDialog.visible" width="600px">
+      <el-form :model="productDialog.form" label-width="120px" ref="productForm" :rules="productRules">
+        <el-form-item label="产品名称" prop="name">
+          <el-input v-model="productDialog.form.name" placeholder="请输入产品名称"></el-input>
+        </el-form-item>
+        <el-form-item label="产品描述" prop="description">
+          <el-input type="textarea" v-model="productDialog.form.description" placeholder="请输入产品描述"></el-input>
+        </el-form-item>
+        <el-form-item label="产品标签" prop="label">
+          <el-input v-model="productDialog.form.label" placeholder="请输入标签，用逗号分隔"></el-input>
+        </el-form-item>
+        <el-form-item label="产品组" prop="product_group">
+          <el-input v-model="productDialog.form.product_group" placeholder="请输入产品组"></el-input>
+        </el-form-item>
+        <el-form-item label="产品链接" prop="url">
+          <el-input v-model="productDialog.form.url" placeholder="请输入产品创建链接"></el-input>
+        </el-form-item>
+        <el-form-item label="列表链接">
+          <el-input v-model="productDialog.form.list_url" placeholder="请输入产品列表跳转链接"></el-input>
+        </el-form-item>
+        <el-form-item label="图标链接">
+          <el-input v-model="productDialog.form.icon_url" placeholder="请输入图标链接"></el-input>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort_order">
+          <el-input-number v-model="productDialog.form.sort_order" :min="1" :max="100"></el-input-number>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="productDialog.visible = false">取消</el-button>
+        <el-button type="primary" @click="handleSubmitProduct">确定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  findProductMenuAPI,
+  findProductThreeMenuAPI,
+  deleteProductMenuAPI,
+  addProductMenuAPI,
+  updateProductMenuAPI,
+  deleteProductThreeMenuAPI,
+  addProductThreeMenuAPI,
+  updateProductThreeMenuAPI,
+  addProductIntroAPI,
+  findProductIntroAPI,
+  updateProductIntroAPI,
+  deleteProductIntroAPI
+} from '@/api/productsServices/index'
+
+export default {
+  data() {
+    return {
+      // Tab相关
+      activeTab: 'advantage',
+      searchText: '',
+      currentMenu: null,
+      currentMenuLevel: 0,
+      currentMenuTitle: '请选择三级菜单',
+      breadcrumbPath: [],
+
+      // 详情：选中的产品
+      selectedProduct: null,
+
+      // 详情：内容类型表单数据
+      productIntroForm: {
+        menu_product_id: '',
+        content_type: 'product',
+        title: '',
+        description: '',
+        price: '',
+        pre_price: '',
+        price_unit: '',
+        discount: 0,
+        bg_img_url: ''
+      },
+
+      // 详情：内容列表数据
+      advantageList: [],
+      featureList: [],
+      applicationMainList: [],
+      productSpecList: [],
+
+      // 新表单数据
+      advantageForms: [],
+      featureForms: [],
+      applicationForms: [],
+      productSpecForms: [],
+      applicationDetailForms: {}, // 用于存储应用详情表单，key为父项ID
+
+      // 分页
+      pagination: {
+        current_page: 1,
+        page_size: 5,
+        total: 0
+      },
+
+      // 表格数据
+      tableData: [],
+
+      // 菜单数据
+      menuData: [],
+
+      // 表单验证规则
+      menuRules: {
+        title: [
+          { required: true, message: '请输入菜单标题', trigger: 'blur' }
+        ],
+        sort_order: [
+          { required: true, message: '请输入排序值', trigger: 'blur' }
+        ]
+      },
+
+      productRules: {
+        name: [
+          { required: true, message: '请输入产品名称', trigger: 'blur' }
+        ],
+        description: [
+          { required: true, message: '请输入产品描述', trigger: 'blur' }
+        ],
+        label: [
+          { required: true, message: '请输入产品标签', trigger: 'blur' }
+        ],
+        product_group: [
+          { required: true, message: '请输入产品组', trigger: 'blur' }
+        ],
+        url: [
+          { required: true, message: '请输入产品链接', trigger: 'blur' }
+        ],
+        sort_order: [
+          { required: true, message: '请输入排序值', trigger: 'blur' }
+        ]
+      },
+
+      // 详情：内容表单验证规则
+      contentRules: {
+        title: [
+          { required: true, message: '请输入标题', trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ],
+        img: [
+          { required: true, message: '请输入图片链接', trigger: 'blur' }
+        ],
+        description: [
+          { required: true, message: '请输入描述', trigger: 'blur' }
+        ],
+        price: [
+          { required: true, message: '请输入价格', trigger: 'blur' }
+        ],
+        pre_price: [
+          { required: true, message: '请输入原价', trigger: 'blur' }
+        ],
+        price_unit: [
+          { required: true, message: '请输入价格单位', trigger: 'blur' }
+        ],
+        discount: [
+          { required: true, message: '请输入折扣', trigger: 'blur' }
+        ],
+        bg_img_url: [
+          { required: true, message: '请输入背景图链接', trigger: 'blur' }
+        ]
+      },
+
+      // 菜单对话框
+      menuDialog: {
+        visible: false,
+        title: '添加菜单',
+        type: 'add', // 'add' 或 'edit'
+        form: {
+          id: '',
+          title: '',
+          sort_order: 1,
+          menu_level: 1,
+          parent_id: ''
+        }
+      },
+
+      // 产品对话框
+      productDialog: {
+        visible: false,
+        title: '添加产品',
+        type: 'add', // 'add' 或 'edit'
+        form: {
+          id: '',
+          menu_id: '',
+          name: '',
+          description: '',
+          label: '',
+          product_group: '',
+          url: '',
+          list_url: '',
+          icon_url: '',
+          sort_order: 1
+        }
+      }
+    }
+  },
+  created() {
+    this.loadMenuTree()
+  },
+  methods: {
+    // 详情：点击表格行事件
+    async handleRowClick(row) {
+      console.log('点击产品行:', row)
+
+      this.selectedProduct = row
+      this.activeTab = 'advantage'
+
+      // 重置表单数据
+      this.resetForms()
+
+      // 设置产品ID
+      this.productIntroForm.menu_product_id = row.id
+
+      // 调用接口获取产品详情信息
+      const params = {
+        menu_product_id: row.id
+      }
+
+      console.log('调用findProductIntroAPI，参数:', params)
+
+      findProductIntroAPI(params).then(res => {
+        console.log('接口返回:', res)
+
+        if (res.status === true) {
+          // 处理返回的数据，进行回显
+          this.handleProductIntroData(res.data)
+          this.$message.success('获取产品详情成功')
+        } else {
+          this.$message.warning(res.msg || '获取产品详情失败')
+        }
+      }).catch(error => {
+        console.error('获取产品详情失败:', error)
+        this.$message.error('获取产品详情失败')
+      })
+    },
+
+    // 处理产品详情数据回显
+    handleProductIntroData(data) {
+      if (!data) {
+        console.log('没有获取到数据')
+        return
+      }
+
+      console.log('获取到的详情数据:', data)
+
+      // 1. 回显产品优势
+      if (data.advantages && data.advantages.length > 0) {
+        this.advantageList = data.advantages.map(item => ({
+          id: item.id,
+          title: item.title,
+          description: item.description,
+          img: item.img,
+          icon: item.icon,
+          menu_product_id: this.selectedProduct.id,
+          content_type: 'advantage'
+        }))
+        console.log('优势数据回显成功:', this.advantageList)
+      } else {
+        this.advantageList = []
+      }
+
+      // 2. 回显产品功能
+      if (data.features && data.features.length > 0) {
+        this.featureList = data.features.map(item => ({
+          id: item.id,
+          title: item.title,
+          description: item.description,
+          img: item.img,
+          icon: item.icon,
+          menu_product_id: this.selectedProduct.id,
+          content_type: 'feature'
+        }))
+        console.log('功能数据回显成功:', this.featureList)
+      } else {
+        this.featureList = []
+      }
+
+      // 3. 回显产品应用
+      if (data.applications && data.applications.length > 0) {
+        console.log('应用原始数据:', data.applications)
+
+        // 处理应用数据，分离主项和详情项
+        const applicationData = data.applications.map(app => {
+          console.log('单个应用数据:', app)
+
+          const mainItem = {
+            id: app.id,
+            title: app.title,
+            img: app.img,
+            icon: app.icon,
+            menu_product_id: this.selectedProduct.id,
+            content_type: 'application',
+            description: app.description || ''
+          }
+
+          // 如果有provide字段，转换为subItems
+          if (app.provide && app.provide.length > 0) {
+            console.log('应用详情数据:', app.provide)
+            mainItem.subItems = app.provide.map(provideItem => ({
+              id: provideItem.id,
+              title: provideItem.title,
+              description: provideItem.description,
+              parent_id: app.id,
+              menu_product_id: this.selectedProduct.id,
+              content_type: 'application'
+            }))
+          } else {
+            mainItem.subItems = []
+          }
+
+          return mainItem
+        })
+
+        this.applicationMainList = applicationData
+        console.log('应用数据回显成功:', this.applicationMainList)
+      } else {
+        this.applicationMainList = []
+      }
+
+      // 4. 回显产品介绍
+      if (data.products && data.products.length > 0) {
+        console.log('产品介绍原始数据:', data.products)
+        const productData = data.products[0] // 取第一个产品
+
+        // 主产品信息 - 使用data中的title和description
+        this.productIntroForm = {
+          ...this.productIntroForm,
+          id: productData.id,
+          title: data.title || productData.title || '',
+          description: data.description || productData.description || '',
+          price: productData.price || '',
+          pre_price: productData.pre_price || '',
+          price_unit: productData.price_unit || '',
+          discount: productData.discount || 0,
+          bg_img_url: productData.bg_img_url || ''
+        }
+
+        console.log('产品主信息回显成功:', this.productIntroForm)
+
+        // 规格列表
+        if (productData.list && productData.list.length > 0) {
+          this.productSpecList = productData.list.map(item => ({
+            id: item.id,
+            name: item.name,
+            description: item.description,
+            icon: item.icon,
+            menu_product_id: this.selectedProduct.id,
+            content_type: 'product',
+            parent_id: productData.id
+          }))
+          console.log('规格数据回显成功:', this.productSpecList)
+        } else {
+          this.productSpecList = []
+        }
+      } else {
+        // 如果没有products数据，也设置基本的title和description
+        this.productIntroForm = {
+          ...this.productIntroForm,
+          title: data.title || '',
+          description: data.description || ''
+        }
+        this.productSpecList = []
+      }
+
+      // 清空表单输入区域，因为数据已经在已保存列表中显示
+      this.advantageForms = []
+      this.featureForms = []
+      this.applicationForms = []
+      this.productSpecForms = []
+      this.applicationDetailForms = {}
+    },
+
+    // 重置所有表单
+    resetForms() {
+      this.advantageForms = [this.createNewForm('advantage')]
+      this.featureForms = [this.createNewForm('feature')]
+      this.applicationForms = [this.createNewForm('application_main')]
+      this.productSpecForms = [this.createNewForm('product_spec')]
+      this.applicationDetailForms = {}
+    },
+
+    // 创建新表单
+    createNewForm(type) {
+      const baseForm = {
+        menu_product_id: this.selectedProduct ? this.selectedProduct.id : '',
+        content_type: this.getContentTypeForAPI(type),
+        id: ''
+      }
+
+      switch (type) {
+        case 'advantage':
+          return {
+            ...baseForm,
+            img: '',
+            title: '',
+            description: ''
+          }
+        case 'feature':
+          return {
+            ...baseForm,
+            title: '',
+            description: ''
+          }
+        case 'application_main':
+          return {
+            ...baseForm,
+            title: '',
+            img: ''
+          }
+        case 'product_spec':
+          return {
+            ...baseForm,
+            name: '',
+            description: '',
+            icon: ''
+          }
+        default:
+          return baseForm
+      }
+    },
+
+    // Tab切换
+    switchTab(tab) {
+      this.activeTab = tab
+    },
+
+    // 详情：获取API需要的content_type
+    getContentTypeForAPI(type) {
+      switch (type) {
+        case 'advantage':
+        case 'feature':
+          return type
+        case 'application':
+        case 'application_main':
+        case 'application_detail':
+          return 'application'
+        case 'product':
+        case 'product_spec':
+          return 'product'
+        default:
+          return type
+      }
+    },
+
+    // 添加新表单
+    addNewForm(type) {
+      if (!this.selectedProduct) {
+        this.$message.warning('请先选择产品！')
+        return
+      }
+
+      const newForm = this.createNewForm(type)
+
+      switch (type) {
+        case 'advantage':
+          this.advantageForms.push(newForm)
+          break
+        case 'feature':
+          this.featureForms.push(newForm)
+          break
+        case 'application_main':
+          this.applicationForms.push(newForm)
+          break
+        case 'product_spec':
+          this.productSpecForms.push(newForm)
+          break
+      }
+    },
+
+    // 添加详情表单
+    addDetailForm(parentId) {
+      if (!this.applicationDetailForms[parentId]) {
+        this.$set(this.applicationDetailForms, parentId, [])
+      }
+
+      const newDetailForm = {
+        menu_product_id: this.selectedProduct.id,
+        content_type: 'application',
+        parent_id: parentId.toString().startsWith('new_') ? '' : parentId,
+        title: '',
+        description: ''
+      }
+
+      this.applicationDetailForms[parentId].push(newDetailForm)
+    },
+
+    // 移除表单
+    removeForm(type, index) {
+      switch (type) {
+        case 'advantage':
+          this.advantageForms.splice(index, 1)
+          break
+        case 'feature':
+          this.featureForms.splice(index, 1)
+          break
+        case 'application_main':
+          this.applicationForms.splice(index, 1)
+          break
+        case 'product_spec':
+          this.productSpecForms.splice(index, 1)
+          break
+      }
+    },
+
+    // 移除详情表单
+    removeDetailForm(parentId, index) {
+      if (this.applicationDetailForms[parentId]) {
+        this.applicationDetailForms[parentId].splice(index, 1)
+      }
+    },
+
+    // 编辑已保存的项
+    editSavedItem(item, type) {
+      console.log('编辑已保存项:', item, type);
+
+      // 检查是否已经在编辑表单中
+      const checkIfAlreadyInEdit = () => {
+        switch (type) {
+          case 'advantage':
+            return this.advantageForms.some(form => form.id === item.id);
+          case 'feature':
+            return this.featureForms.some(form => form.id === item.id);
+          case 'application_main':
+            return this.applicationForms.some(form => form.id === item.id);
+          case 'product_spec':
+            return this.productSpecForms.some(form => form.id === item.id);
+          case 'application_detail':
+            // 检查所有详情编辑表单
+            for (const key in this.applicationDetailForms) {
+              if (this.applicationDetailForms[key].some(form => form.id === item.id)) {
+                return true;
+              }
+            }
+            return false;
+        }
+        return false;
+      };
+
+      if (checkIfAlreadyInEdit()) {
+        this.$message.warning('该项已在编辑列表中');
+        return;
+      }
+
+      switch (type) {
+        case 'advantage':
+          this.advantageForms.push({
+            id: item.id,
+            menu_product_id: item.menu_product_id,
+            content_type: 'advantage',
+            img: item.img || '',
+            title: item.title || '',
+            description: item.description || ''
+          });
+          this.advantageList = this.advantageList.filter(i => i.id !== item.id);
+          break;
+
+        case 'feature':
+          this.featureForms.push({
+            id: item.id,
+            menu_product_id: item.menu_product_id,
+            content_type: 'feature',
+            title: item.title || '',
+            description: item.description || ''
+          });
+          this.featureList = this.featureList.filter(i => i.id !== item.id);
+          break;
+
+        case 'application_main':
+          this.applicationForms.push({
+            id: item.id,
+            menu_product_id: item.menu_product_id,
+            content_type: 'application',
+            title: item.title || '',
+            img: item.img || ''
+          });
+          this.applicationMainList = this.applicationMainList.filter(i => i.id !== item.id);
+
+          // 如果这个主项有详情，也需要处理详情项
+          if (item.subItems && item.subItems.length > 0) {
+            item.subItems.forEach(detail => {
+              // 将详情项移到编辑表单中
+              if (!this.applicationDetailForms[item.id]) {
+                this.$set(this.applicationDetailForms, item.id, []);
+              }
+
+              // 检查是否已经存在
+              const existingIndex = this.applicationDetailForms[item.id].findIndex(
+                form => form.id === detail.id
+              );
+
+              if (existingIndex === -1) {
+                this.applicationDetailForms[item.id].push({
+                  id: detail.id,
+                  menu_product_id: detail.menu_product_id,
+                  content_type: 'application',
+                  parent_id: detail.parent_id || item.id,
+                  title: detail.title || '',
+                  description: detail.description || ''
+                });
+              }
+            });
+          }
+          break;
+
+        case 'application_detail':
+          const parentItem = this.applicationMainList.find(main =>
+            main.subItems && main.subItems.some(sub => sub.id === item.id)
+          );
+
+          if (parentItem) {
+            // 确保详情表单数组存在
+            if (!this.applicationDetailForms[parentItem.id]) {
+              this.$set(this.applicationDetailForms, parentItem.id, []);
+            }
+
+            this.applicationDetailForms[parentItem.id].push({
+              id: item.id,
+              menu_product_id: item.menu_product_id,
+              content_type: 'application',
+              parent_id: item.parent_id || parentItem.id,
+              title: item.title || '',
+              description: item.description || ''
+            });
+
+            // 从父项的subItems中移除
+            parentItem.subItems = parentItem.subItems.filter(sub => sub.id !== item.id);
+          }
+          break;
+
+        case 'product_spec':
+          this.productSpecForms.push({
+            id: item.id,
+            menu_product_id: item.menu_product_id,
+            content_type: 'product',
+            parent_id: item.parent_id || '',
+            name: item.name || '',
+            description: item.description || '',
+            icon: item.icon || ''
+          });
+          this.productSpecList = this.productSpecList.filter(i => i.id !== item.id);
+          break;
+      }
+
+      this.$message.success('已移动到编辑区域，请修改后点击保存');
+    },
+
+    // 详情：删除内容项
+    deleteContentItem(id, type) {
+      this.$confirm('确定删除该项吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteProductIntroAPI({ id }).then(res => {
+          if (res.status === true) {
+            this.$message.success('删除成功！')
+            // 重新加载数据
+            this.reloadCurrentData()
+          } else {
+            this.$message.error(res.msg || '删除失败！')
+          }
+        }).catch(() => {
+          this.$message.error('删除失败！')
+        })
+      }).catch(() => {})
+    },
+
+    // 重新加载当前数据
+    reloadCurrentData() {
+      if (!this.selectedProduct) return
+
+      const params = {
+        menu_product_id: this.selectedProduct.id
+      }
+
+      findProductIntroAPI(params).then(res => {
+        if (res.status === true) {
+          // 重新处理数据
+          this.handleProductIntroData(res.data)
+          this.$message.success('数据刷新成功')
+        }
+      }).catch(error => {
+        console.error('重新加载数据失败:', error)
+        this.$message.error('数据刷新失败')
+      })
+    },
+
+    // 保存所有内容
+    handleSaveContent() {
+      if (!this.selectedProduct) {
+        this.$message.warning('请先选择产品！')
+        return
+      }
+
+      // 验证表单
+      let isValid = true;
+
+      switch (this.activeTab) {
+        case 'advantage':
+          this.advantageForms.forEach((form, index) => {
+            const ref = this.$refs['advantageForm' + index];
+            if (ref) {
+              ref[0].validate(valid => {
+                if (!valid) isValid = false;
+              });
+            }
+          });
+          break;
+        case 'feature':
+          this.featureForms.forEach((form, index) => {
+            const ref = this.$refs['featureForm' + index];
+            if (ref) {
+              ref[0].validate(valid => {
+                if (!valid) isValid = false;
+              });
+            }
+          });
+          break;
+        case 'product':
+          // 验证主表单
+          this.$refs.productIntroForm.validate(valid => {
+            if (!valid) isValid = false;
+          });
+          // 验证规格表单
+          this.productSpecForms.forEach((form, index) => {
+            const ref = this.$refs['specForm' + index];
+            if (ref) {
+              ref[0].validate(valid => {
+                if (!valid) isValid = false;
+              });
+            }
+          });
+          break;
+      }
+
+      if (!isValid) {
+        this.$message.warning('请检查表单填写是否正确');
+        return;
+      }
+
+      // 根据当前tab保存对应数据
+      switch (this.activeTab) {
+        case 'advantage':
+          this.saveAdvantages()
+          break
+        case 'feature':
+          this.saveFeatures()
+          break
+        case 'application':
+          this.saveApplications()
+          break
+        case 'product':
+          this.saveProductInfo()
+          break
+      }
+    },
+
+    // 保存产品优势
+    async saveAdvantages() {
+      const savePromises = []
+      const formsToSave = []
+
+      for (const form of this.advantageForms) {
+        if (!form.title && !form.description) continue
+
+        const formData = {
+          ...form,
+          menu_product_id: this.selectedProduct.id,
+          content_type: 'advantage'
+        }
+
+        // 确保menu_product_id正确设置
+        if (!formData.menu_product_id) {
+          formData.menu_product_id = this.selectedProduct.id
+        }
+
+        formsToSave.push(formData)
+      }
+
+      if (formsToSave.length === 0) {
+        this.$message.warning('没有需要保存的优势数据')
+        return
+      }
+
+      try {
+        for (const formData of formsToSave) {
+          if (formData.id) {
+            // 更新
+            const res = await updateProductIntroAPI(formData)
+            if (res.status !== true) {
+              throw new Error(res.msg || '更新失败')
+            }
+          } else {
+            // 新增 - 移除id字段
+            const { id, ...dataWithoutId } = formData
+            const res = await addProductIntroAPI(dataWithoutId)
+            if (res.status !== true) {
+              throw new Error(res.msg || '新增失败')
+            }
+          }
+        }
+
+        this.$message.success('保存成功！')
+        // 重新加载数据
+        await this.reloadCurrentData()
+        // 清空编辑表单
+        this.advantageForms = []
+      } catch (error) {
+        console.error('保存失败:', error)
+        this.$message.error(error.message || '保存失败！')
+      }
+    },
+
+    // 保存产品功能
+    async saveFeatures() {
+      const formsToSave = []
+
+      for (const form of this.featureForms) {
+        if (!form.title && !form.description) continue
+
+        const formData = {
+          ...form,
+          menu_product_id: this.selectedProduct.id,
+          content_type: 'feature'
+        }
+
+        if (!formData.menu_product_id) {
+          formData.menu_product_id = this.selectedProduct.id
+        }
+
+        formsToSave.push(formData)
+      }
+
+      if (formsToSave.length === 0) {
+        this.$message.warning('没有需要保存的功能数据')
+        return
+      }
+
+      try {
+        for (const formData of formsToSave) {
+          if (formData.id) {
+            const res = await updateProductIntroAPI(formData)
+            if (res.status !== true) {
+              throw new Error(res.msg || '更新失败')
+            }
+          } else {
+            const { id, ...dataWithoutId } = formData
+            const res = await addProductIntroAPI(dataWithoutId)
+            if (res.status !== true) {
+              throw new Error(res.msg || '新增失败')
+            }
+          }
+        }
+
+        this.$message.success('保存成功！')
+        await this.reloadCurrentData()
+        this.featureForms = []
+      } catch (error) {
+        console.error('保存失败:', error)
+        this.$message.error(error.message || '保存失败！')
+      }
+    },
+
+    // 保存应用数据
+    async saveApplications() {
+      try {
+        // 先保存主项
+        const mainItemResults = []
+
+        for (const form of this.applicationForms) {
+          if (!form.title) continue
+
+          const formData = {
+            ...form,
+            menu_product_id: this.selectedProduct.id,
+            content_type: 'application'
+          }
+
+          if (!formData.menu_product_id) {
+            formData.menu_product_id = this.selectedProduct.id
+          }
+
+          if (formData.id) {
+            // 更新主项
+            const res = await updateProductIntroAPI(formData)
+            if (res.status !== true) {
+              throw new Error(res.msg || '更新主项失败')
+            }
+            mainItemResults.push({
+              originalId: form.id,
+              newId: form.id,
+              isNew: false
+            })
+          } else {
+            // 新增主项
+            const { id, ...dataWithoutId } = formData
+            const res = await addProductIntroAPI(dataWithoutId)
+            if (res.status !== true) {
+              throw new Error(res.msg || '新增主项失败')
+            }
+            const newId = res.data?.id || res.data?.insertId
+            mainItemResults.push({
+              originalId: 'new_' + this.applicationForms.indexOf(form),
+              newId: newId,
+              isNew: true
+            })
+          }
+        }
+
+        // 保存详情项
+        for (const [parentKey, details] of Object.entries(this.applicationDetailForms)) {
+          let parentId = parentKey
+
+          // 如果是临时key，查找对应的真实ID
+          if (parentKey.startsWith('new_')) {
+            const result = mainItemResults.find(r => r.originalId === parentKey)
+            if (result) {
+              parentId = result.newId
+            } else {
+              console.warn(`找不到对应的主项: ${parentKey}`)
+              continue
+            }
+          }
+
+          for (const detailForm of details) {
+            if (!detailForm.title) continue
+
+            const detailData = {
+              ...detailForm,
+              menu_product_id: this.selectedProduct.id,
+              content_type: 'application',
+              parent_id: parentId
+            }
+
+            if (!detailData.menu_product_id) {
+              detailData.menu_product_id = this.selectedProduct.id
+            }
+
+            if (detailData.id) {
+              const res = await updateProductIntroAPI(detailData)
+              if (res.status !== true) {
+                throw new Error(res.msg || '更新详情失败')
+              }
+            } else {
+              const { id, ...dataWithoutId } = detailData
+              const res = await addProductIntroAPI(dataWithoutId)
+              if (res.status !== true) {
+                throw new Error(res.msg || '新增详情失败')
+              }
+            }
+          }
+        }
+
+        this.$message.success('保存成功！')
+        await this.reloadCurrentData()
+        this.applicationForms = []
+        this.applicationDetailForms = {}
+      } catch (error) {
+        console.error('保存失败:', error)
+        this.$message.error(error.message || '保存失败！')
+      }
+    },
+
+    // 保存产品信息
+    async saveProductInfo() {
+      try {
+        // 保存主产品信息
+        const mainData = {
+          ...this.productIntroForm,
+          menu_product_id: this.selectedProduct.id,
+          content_type: 'product'
+        }
+
+        if (!mainData.menu_product_id) {
+          mainData.menu_product_id = this.selectedProduct.id
+        }
+
+        let mainId = mainData.id
+
+        if (mainData.id) {
+          const res = await updateProductIntroAPI(mainData)
+          if (res.status !== true) {
+            throw new Error(res.msg || '更新主信息失败')
+          }
+        } else {
+          const { id, ...dataWithoutId } = mainData
+          const res = await addProductIntroAPI(dataWithoutId)
+          if (res.status !== true) {
+            throw new Error(res.msg || '新增主信息失败')
+          }
+          mainId = res.data?.id || res.data?.insertId
+        }
+
+        // 保存规格信息
+        for (const form of this.productSpecForms) {
+          if (!form.name) continue
+
+          const formData = {
+            ...form,
+            menu_product_id: this.selectedProduct.id,
+            content_type: 'product',
+            parent_id: mainId
+          }
+
+          if (!formData.menu_product_id) {
+            formData.menu_product_id = this.selectedProduct.id
+          }
+
+          if (formData.id) {
+            const res = await updateProductIntroAPI(formData)
+            if (res.status !== true) {
+              throw new Error(res.msg || '更新规格失败')
+            }
+          } else {
+            const { id, ...dataWithoutId } = formData
+            const res = await addProductIntroAPI(dataWithoutId)
+            if (res.status !== true) {
+              throw new Error(res.msg || '新增规格失败')
+            }
+          }
+        }
+
+        this.$message.success('保存成功！')
+        await this.reloadCurrentData()
+        this.productSpecForms = []
+      } catch (error) {
+        console.error('保存失败:', error)
+        this.$message.error(error.message || '保存失败！')
+      }
+    },
+
+    // 加载菜单树
+    async loadMenuTree() {
+      const res = await findProductMenuAPI()
+
+      if (res.status == true) {
+        this.menuData = this.buildMenuTree(res.data || [])
+      }
+    },
+
+    // 构建菜单树 - 适配新的数据结构
+    buildMenuTree(menus) {
+      const transformedData = menus.map(level1 => ({
+        id: level1.id,
+        title: level1.firTitle,
+        menu_level: 1,
+        sort_order: level1.sort_order || 1,
+        children: (level1.secMenu || []).map(level2 => ({
+          id: level2.id,
+          title: level2.secTitle,
+          menu_level: 2,
+          parent_id: level1.id,
+          sort_order: level2.sort_order || 1,
+          children: (level2.thrMenu || []).map(level3 => ({
+            id: level3.id,
+            title: level3.thrTitle,
+            menu_level: 3,
+            parent_id: level2.id,
+            sort_order: level3.sort_order || 1
+          }))
+        }))
+      }))
+
+      return transformedData
+    },
+
+    // 搜索菜单
+    handleSearchMenu() {
+      this.loadMenuTree()
+    },
+
+    // 节点点击
+    async handleNodeClick(data) {
+      this.currentMenu = data;
+      this.currentMenuLevel = data.menu_level;
+      this.currentMenuTitle = data.title;
+
+      // 详情：清空选中的产品
+      this.selectedProduct = null;
+
+      // 构建面包屑路径
+      this.buildBreadcrumb(data);
+
+      // 如果是三级菜单，显示产品列表
+      if (data.menu_level === 3) {
+        // 重置分页到第一页
+        this.pagination.current_page = 1;
+        // 加载产品列表
+        await this.loadProducts(data.id);
+      } else {
+        this.tableData = [];
+        this.pagination.total = 0;
+      }
+    },
+
+    // 构建面包屑路径
+    buildBreadcrumb(node) {
+      this.breadcrumbPath = []
+      let current = node
+
+      while (current) {
+        this.breadcrumbPath.unshift({
+          id: current.id,
+          title: current.title
+        })
+        // 这里需要根据实际情况查找父节点
+        current = this.findParentMenu(current.parent_id)
+      }
+    },
+
+    // 查找父菜单
+    findParentMenu(parentId) {
+      if (!parentId) return null
+
+      const findInTree = (nodes) => {
+        for (let node of nodes) {
+          if (node.id === parentId) return node
+          if (node.children) {
+            const found = findInTree(node.children)
+            if (found) return found
+          }
+        }
+        return null
+      }
+
+      return findInTree(this.menuData)
+    },
+
+    // 分页大小变化
+    handleSizeChange(val) {
+      this.pagination.page_size = val;
+      this.pagination.current_page = 1; // 重置到第一页
+      // 确保有当前菜单且为三级菜单时才加载产品
+      if (this.currentMenu && this.currentMenu.menu_level === 3) {
+        this.loadProducts(this.currentMenu.id);
+      }
+    },
+
+    // 当前页变化
+    handleCurrentChange(val) {
+      this.pagination.current_page = val;
+      // 确保有当前菜单且为三级菜单时才加载产品
+      if (this.currentMenu && this.currentMenu.menu_level === 3) {
+        this.loadProducts(this.currentMenu.id);
+      }
+    },
+
+    // 获取产品菜单
+    async loadProducts(menuId) {
+      if (!menuId) return;
+      let query = {
+        menu_id: menuId,
+        page_size: this.pagination.page_size,
+        current_page: this.pagination.current_page
+      };
+
+      console.log('获取产品参数:', query);
+
+      const res = await findProductThreeMenuAPI(query);
+      if (res.status == true) {
+        this.tableData = res.data.product_list;
+        this.pagination.total = res.pagination.total;
+        this.pagination.page_size = res.pagination.page_size || this.pagination.page_size;
+        this.pagination.current_page = res.pagination.current_page || this.pagination.current_page;
+      } else {
+        this.tableData = [];
+        this.pagination.total = 0;
+      }
+    },
+
+    // menu删除
+    async deleteProductMenu(data) {
+      let id = data.id
+      const confirmResult = await this.$confirm('此操作将永久删除该节点, 是否继续?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).catch(() => {
+        return false
+      })
+
+      if (!confirmResult) {
+        return
+      }
+
+      const res = await deleteProductMenuAPI({ id: id })
+      console.log(res);
+      if (res.status == true) {
+        this.$message.success('删除成功!')
+        this.loadMenuTree()
+      } else {
+        this.$message.error('删除失败!')
+      }
+    },
+
+    // 添加menu一级菜单
+    async handleAddOneMenu() {
+      this.menuDialog.title = '添加一级菜单'
+      this.menuDialog.type = 'add'
+      this.menuDialog.form = {
+        id: '',
+        title: '',
+        sort_order: 1,
+        menu_level: 1,
+        parent_id: ''
+      }
+      this.menuDialog.visible = true
+
+      // 清除表单验证
+      if (this.$refs.menuForm) {
+        this.$nextTick(() => {
+          this.$refs.menuForm.clearValidate()
+        })
+      }
+    },
+
+    // 添加menu子菜单
+    handleAddMenu(data) {
+      this.menuDialog.title = `添加${data.menu_level === 1 ? '二级' : '三级'}菜单`
+      this.menuDialog.type = 'add'
+      this.menuDialog.form = {
+        id: '',
+        title: '',
+        sort_order: 1,
+        menu_level: data.menu_level + 1,
+        parent_id: data.id
+      }
+      this.menuDialog.visible = true
+
+      // 清除表单验证
+      if (this.$refs.menuForm) {
+        this.$nextTick(() => {
+          this.$refs.menuForm.clearValidate()
+        })
+      }
+    },
+
+    // 编辑menu菜单
+    handleEditMenu(data) {
+      this.menuDialog.title = `编辑${data.menu_level === 1 ? '一级' : data.menu_level === 2 ? '二级' : '三级'}菜单`
+      this.menuDialog.type = 'edit'
+      this.menuDialog.form = {
+        id: data.id,
+        title: data.title || '',
+        sort_order: data.sort_order || 1,
+        menu_level: data.menu_level,
+        parent_id: data.parent_id || ''
+      }
+      this.menuDialog.visible = true
+
+      // 清除表单验证
+      if (this.$refs.menuForm) {
+        this.$nextTick(() => {
+          this.$refs.menuForm.clearValidate()
+        })
+      }
+    },
+
+    // 提交菜单表单
+    async handleSubmitMenu() {
+      const valid = await this.$refs.menuForm.validate()
+      if (!valid) {
+        this.$message.warning('请填写完整信息!')
+        return false
+      }
+
+      console.log('提交菜单数据:', this.menuDialog.form)
+
+      // 根据菜单类型调用不同的API
+      if (this.menuDialog.type === 'add') {
+        // 添加菜单
+        const addData = {
+          title: this.menuDialog.form.title,
+          sort_order: this.menuDialog.form.sort_order,
+          menu_level: this.menuDialog.form.menu_level,
+          parent_id: this.menuDialog.form.parent_id
+        }
+
+        console.log('添加菜单参数:', addData)
+        const res = await addProductMenuAPI(addData)
+        console.log('添加菜单返回:', res)
+        if (res.status == true) {
+          this.$message.success('添加成功!')
+          this.loadMenuTree()
+          this.menuDialog.visible = false
+        } else {
+          this.$message.error(res.msg || '添加失败!')
+        }
+      } else {
+        const editData = {
+          id: this.menuDialog.form.id,
+          title: this.menuDialog.form.title,
+          sort_order: this.menuDialog.form.sort_order,
+          menu_level: this.menuDialog.form.menu_level,
+          parent_id: this.menuDialog.form.parent_id
+        }
+
+        console.log('编辑菜单参数:', editData)
+        const res = await updateProductMenuAPI({ id: editData.id, title: editData.title })
+        console.log('编辑菜单返回:', res)
+        if (res.status == true) {
+          this.$message.success('更新成功!')
+          this.loadMenuTree()
+          this.menuDialog.visible = false
+        } else {
+          this.$message.error(res.msg || '编辑失败!')
+        }
+      }
+    },
+
+    // 添加产品
+    async handleAddProduct() {
+      if (!this.currentMenu || this.currentMenu.menu_level !== 3) {
+        this.$message.warning('请先选择三级菜单!')
+        return
+      }
+
+      this.productDialog.title = '添加产品'
+      this.productDialog.type = 'add'
+      this.productDialog.form = {
+        id: '',
+        menu_id: this.currentMenu.id,
+        name: '',
+        description: '',
+        label: '',
+        product_group: '',
+        url: '',
+        list_url: '',
+        icon_url: '',
+        sort_order: 1
+      }
+      this.productDialog.visible = true
+
+      // 清除表单验证
+      if (this.$refs.productForm) {
+        this.$nextTick(() => {
+          this.$refs.productForm.clearValidate()
+        })
+      }
+    },
+
+    // 编辑产品
+    handleEditProduct(row) {
+      this.productDialog.title = '编辑产品'
+      this.productDialog.type = 'edit'
+      this.productDialog.form = {
+        id: row.id,
+        menu_id: this.currentMenu.id,
+        name: row.name || '',
+        description: row.description || '',
+        label: row.label || '',
+        product_group: row.product_group || '',
+        url: row.url || '',
+        list_url: row.list_url || '',
+        icon_url: row.iconUrl || row.icon_url || '',
+        sort_order: row.sort_order || 1
+      }
+      this.productDialog.visible = true
+
+      // 清除表单验证
+      if (this.$refs.productForm) {
+        this.$nextTick(() => {
+          this.$refs.productForm.clearValidate()
+        })
+      }
+    },
+
+    // 删除产品
+    async handleDeleteProduct(row) {
+      try {
+        await this.$confirm('此操作将永久删除该产品, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+
+        const res = await deleteProductThreeMenuAPI({ id: row.id })
+        console.log('删除产品返回:', res)
+
+        if (res.status == true) {
+          this.$message.success('删除成功!')
+          // 详情：如果删除的是当前选中的产品，清空选中状态
+          if (this.selectedProduct && this.selectedProduct.id === row.id) {
+            this.selectedProduct = null
+          }
+          // 重新加载产品列表
+          if (this.currentMenu && this.currentMenu.menu_level === 3) {
+            await this.loadProducts(this.currentMenu.id)
+          }
+        } else {
+          this.$message.error('删除失败!')
+        }
+      } catch (error) {
+        // 用户取消删除
+        if (error !== 'cancel') {
+          this.$message.error('删除操作失败')
+        }
+      }
+    },
+
+    // 提交产品表单
+    async handleSubmitProduct() {
+      const valid = await this.$refs.productForm.validate()
+      if (!valid) {
+        this.$message.warning('请填写完整信息!')
+        return false
+      }
+
+      console.log('提交产品数据:', this.productDialog.form)
+
+      if (this.productDialog.type === 'add') {
+        // 添加产品
+        const addData = {
+          menu_id: this.productDialog.form.menu_id,
+          name: this.productDialog.form.name,
+          description: this.productDialog.form.description,
+          label: this.productDialog.form.label,
+          product_group: this.productDialog.form.product_group,
+          url: this.productDialog.form.url,
+          list_url: this.productDialog.form.list_url || '',
+          icon_url: this.productDialog.form.icon_url || '',
+          sort_order: this.productDialog.form.sort_order
+        }
+
+        console.log('添加产品参数:', addData)
+        const res = await addProductThreeMenuAPI(addData)
+        console.log('添加产品返回:', res)
+
+        if (res.status == true) {
+          this.$message.success('添加成功!')
+          this.productDialog.visible = false
+
+          // 重新加载产品列表
+          if (this.currentMenu && this.currentMenu.menu_level === 3) {
+            await this.loadProducts(this.currentMenu.id)
+          }
+        } else {
+          this.$message.error(res.msg || '添加失败!')
+        }
+      } else {
+        // 编辑产品
+        const editData = {
+          id: this.productDialog.form.id,
+          menu_id: this.productDialog.form.menu_id,
+          name: this.productDialog.form.name,
+          description: this.productDialog.form.description,
+          label: this.productDialog.form.label,
+          product_group: this.productDialog.form.product_group,
+          url: this.productDialog.form.url,
+          list_url: this.productDialog.form.list_url || '',
+          icon_url: this.productDialog.form.icon_url || '',
+          sort_order: this.productDialog.form.sort_order
+        }
+
+        console.log('编辑产品参数:', editData)
+        const res = await updateProductThreeMenuAPI(editData)
+        console.log('编辑产品返回:', res)
+
+        if (res.status == true) {
+          this.$message.success('更新成功!')
+          this.productDialog.visible = false
+
+          // 重新加载产品列表
+          if (this.currentMenu && this.currentMenu.menu_level === 3) {
+            await this.loadProducts(this.currentMenu.id)
+          }
+        } else {
+          this.$message.error(res.msg || '更新失败!')
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import url(./less/index.less);
+</style>
diff --git a/f/web-kboss/src/views/operation/productsServices/less/index.css b/f/web-kboss/src/views/operation/productsServices/less/index.css
new file mode 100644
index 0000000..4099553
--- /dev/null
+++ b/f/web-kboss/src/views/operation/productsServices/less/index.css
@@ -0,0 +1,687 @@
+.mianBox {
+  display: flex;
+  justify-content: space-between;
+  min-height: 100vh;
+  gap: 16px;
+  padding-bottom: 20px;
+  padding-bottom: 40px;
+}
+.left {
+  width: 30%;
+  min-width: 320px;
+  height: 100vh;
+}
+.left-card {
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+}
+.left-card /deep/ .el-card__body {
+  padding: 20px;
+  flex: 1;
+  height: 100%;
+}
+.right {
+  flex: 1;
+  min-width: 0;
+}
+.toptit {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e4e7ed;
+}
+.search {
+  margin-bottom: 20px;
+}
+.search /deep/ .el-input-group__append {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+.search /deep/ .el-input-group__append .el-button {
+  color: white;
+}
+.search /deep/ .el-input-group__append .el-button:hover {
+  background-color: #66b1ff;
+}
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+.custom-tree-node:hover {
+  background-color: #f5f7fa;
+}
+.custom-tree-node .el-button {
+  padding: 4px;
+  margin-left: 4px;
+}
+.custom-tree-node .el-button i {
+  font-size: 12px;
+}
+.custom-tree-node .el-button:hover {
+  background-color: rgba(64, 158, 255, 0.1);
+  border-radius: 50%;
+}
+.tree-container {
+  overflow-y: auto;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  padding: 12px;
+  background-color: #fafafa;
+}
+.tree-container /deep/ .el-tree .el-tree-node .el-tree-node__content {
+  height: 36px;
+}
+.tree-container /deep/ .el-tree .el-tree-node .el-tree-node__content:hover {
+  background-color: #f0f7ff;
+}
+.tree-container /deep/ .el-tree .el-tree-node.is-current > .el-tree-node__content {
+  background-color: #ecf5ff;
+  color: #409eff;
+  font-weight: 500;
+}
+.add-menu-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed #c0c4cc;
+  border-radius: 6px;
+  padding: 12px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  margin-top: 20px;
+  background-color: #fafafa;
+  color: #606266;
+}
+.add-menu-box:hover {
+  border-color: #409eff;
+  background-color: #f0f7ff;
+  color: #409eff;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
+}
+.add-menu-box .add-icon {
+  font-size: 20px;
+  font-weight: 600;
+  margin-right: 8px;
+  line-height: 1;
+}
+.add-menu-box div {
+  font-size: 14px;
+  font-weight: 500;
+}
+.product-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  margin-bottom: 20px;
+}
+.product-card /deep/ .el-card__body {
+  padding: 24px;
+}
+.rigtop {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.rigtop-left {
+  flex: 1;
+  min-width: 0;
+}
+.breadcrumb {
+  margin-top: 8px;
+}
+.breadcrumb /deep/ .el-breadcrumb__inner {
+  color: #909399;
+  font-size: 13px;
+}
+.breadcrumb /deep/ .el-breadcrumb__inner:hover {
+  color: #409eff;
+}
+.breadcrumb /deep/ .el-breadcrumb__separator {
+  color: #c0c4cc;
+}
+.current-menu {
+  font-size: 20px;
+  font-weight: 600;
+  color: #303133;
+  line-height: 1.4;
+}
+.add-product-btn .el-button {
+  border-radius: 6px;
+  padding: 10px 20px;
+  font-weight: 500;
+}
+.add-product-btn .el-button i {
+  margin-right: 4px;
+}
+.product-table {
+  margin-bottom: 24px;
+}
+.product-table /deep/ .el-table {
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid #ebeef5;
+}
+.product-table /deep/ .el-table th {
+  background-color: #f5f7fa;
+  color: #303133;
+  font-weight: 600;
+  height: 48px;
+}
+.product-table /deep/ .el-table td {
+  padding: 16px 0;
+}
+.product-table /deep/ .el-table .el-table__row {
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.product-table /deep/ .el-table .el-table__row:hover {
+  background-color: #f5f7fa;
+}
+.product-table /deep/ .el-table .el-table__row.current-row {
+  background-color: #ecf5ff;
+}
+.product-info .product-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 6px;
+  line-height: 1.4;
+}
+.product-info .product-desc {
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.product-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.product-tags .el-tag {
+  border-radius: 4px;
+  padding: 0 8px;
+  height: 24px;
+  line-height: 22px;
+  font-size: 12px;
+}
+.product-tags .el-tag--info {
+  background-color: #f4f4f5;
+  border-color: #e9e9eb;
+  color: #909399;
+}
+.action-buttons {
+  display: flex;
+  gap: 8px;
+}
+.action-buttons .el-button {
+  min-width: 60px;
+  padding: 7px 15px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+.action-buttons .el-button--danger {
+  background-color: #fef0f0;
+  border-color: #fbc4c4;
+  color: #f56c6c;
+}
+.action-buttons .el-button--danger:hover {
+  background-color: #f56c6c;
+  color: white;
+}
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid #ebeef5;
+}
+.pagination /deep/ .el-pagination .el-pagination__sizes,
+.pagination /deep/ .el-pagination .el-pagination__jump {
+  margin-left: 16px;
+}
+.pagination /deep/ .el-pagination .btn-prev,
+.pagination /deep/ .el-pagination .btn-next {
+  border-radius: 4px;
+  border: 1px solid #d8dce5;
+}
+.pagination /deep/ .el-pagination .el-pager li {
+  border-radius: 4px;
+  border: 1px solid #d8dce5;
+  margin: 0 4px;
+}
+.pagination /deep/ .el-pagination .el-pager li.active {
+  background-color: #409eff;
+  color: white;
+  border-color: #409eff;
+}
+.card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e4e7ed;
+  margin-bottom: 24px;
+}
+.card-top .top-tit span:first-child {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  display: block;
+  margin-bottom: 4px;
+}
+.card-top .top-tit span:last-child {
+  font-size: 13px;
+  color: #909399;
+}
+.card-top .top-btn .el-button {
+  border-radius: 6px;
+  padding: 10px 24px;
+  font-weight: 500;
+}
+.card-content {
+  width: 100%;
+}
+.card-content .content-tab {
+  width: 100%;
+}
+.card-content .content-tab .tab-top {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 16px;
+}
+.card-content .content-tab .tab-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+.card-content .content-tab .tab-content .tab-item {
+  padding: 10px 24px;
+  border-radius: 20px;
+  background-color: #f5f7fa;
+  color: #606266;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid transparent;
+}
+.card-content .content-tab .tab-content .tab-item:hover {
+  background-color: #e4e7ed;
+  transform: translateY(-1px);
+}
+.card-content .content-tab .tab-content .tab-item.active {
+  background-color: #409eff;
+  color: white;
+  font-weight: 500;
+  border-color: #409eff;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
+}
+.product-detail-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+}
+.product-detail-card /deep/ .el-card__body {
+  padding: 24px;
+}
+.product-detail-card .product-basic-info {
+  padding: 20px;
+  background-color: #fafafa;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+}
+.product-detail-card .product-basic-info /deep/ .el-form-item {
+  margin-bottom: 20px;
+}
+.product-detail-card .product-basic-info /deep/ .el-form-item:last-child {
+  margin-bottom: 0;
+}
+.product-detail-card .product-basic-info /deep/ .el-form-item .el-form-item__label {
+  color: #606266;
+  font-weight: 500;
+}
+.product-detail-card .product-basic-info /deep/ .el-form-item .el-input .el-input__inner,
+.product-detail-card .product-basic-info /deep/ .el-form-item .el-textarea .el-input__inner,
+.product-detail-card .product-basic-info /deep/ .el-form-item .el-input .el-textarea__inner,
+.product-detail-card .product-basic-info /deep/ .el-form-item .el-textarea .el-textarea__inner {
+  border-radius: 4px;
+}
+.product-detail-card .product-basic-info /deep/ .el-form-item .el-input .el-input__inner:focus,
+.product-detail-card .product-basic-info /deep/ .el-form-item .el-textarea .el-input__inner:focus,
+.product-detail-card .product-basic-info /deep/ .el-form-item .el-input .el-textarea__inner:focus,
+.product-detail-card .product-basic-info /deep/ .el-form-item .el-textarea .el-textarea__inner:focus {
+  border-color: #409eff;
+}
+.product-detail-card .product-basic-info /deep/ .el-form-item .el-input-number .el-input-number__decrease,
+.product-detail-card .product-basic-info /deep/ .el-form-item .el-input-number .el-input-number__increase {
+  border-radius: 4px 0 0 4px;
+}
+.product-detail-card .product-basic-info /deep/ .el-form-item .el-input-number .el-input__inner {
+  border-radius: 0 4px 4px 0;
+}
+.product-detail-card .product-detail-content {
+  margin-top: 16px;
+}
+.product-detail-card .product-detail-content .editor-container /deep/ .el-textarea .el-textarea__inner {
+  border-radius: 6px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  padding: 16px;
+  border: 1px solid #dcdfe6;
+}
+.product-detail-card .product-detail-content .editor-container /deep/ .el-textarea .el-textarea__inner:focus {
+  border-color: #409eff;
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+}
+.product-detail-card .product-detail-content .editor-container /deep/ .el-textarea .el-textarea__inner::placeholder {
+  color: #c0c4cc;
+}
+.empty-detail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 40px;
+  text-align: center;
+}
+.empty-detail .empty-icon {
+  font-size: 64px;
+  margin-bottom: 24px;
+  opacity: 0.3;
+  animation: float 3s ease-in-out infinite;
+}
+.empty-detail .empty-text {
+  color: #909399;
+  font-size: 16px;
+  line-height: 1.6;
+  max-width: 300px;
+}
+ /deep/ .el-dialog {
+  border-radius: 8px;
+}
+ /deep/ .el-dialog .el-dialog__header {
+  padding: 20px 24px 10px;
+  border-bottom: 1px solid #e4e7ed;
+}
+ /deep/ .el-dialog .el-dialog__header .el-dialog__title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+}
+ /deep/ .el-dialog .el-dialog__body {
+  padding: 20px 24px;
+}
+ /deep/ .el-dialog .el-dialog__body .el-form-item {
+  margin-bottom: 20px;
+}
+ /deep/ .el-dialog .el-dialog__body .el-form-item:last-child {
+  margin-bottom: 0;
+}
+ /deep/ .el-dialog .el-dialog__footer {
+  padding: 10px 24px 20px;
+  border-top: 1px solid #e4e7ed;
+}
+ /deep/ .el-dialog .el-dialog__footer .dialog-footer .el-button {
+  border-radius: 6px;
+  padding: 10px 20px;
+  min-width: 80px;
+}
+ /deep/ .el-dialog .el-dialog__footer .dialog-footer .el-button--primary {
+  font-weight: 500;
+}
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+@media (max-width: 1200px) {
+  .mianBox {
+    flex-direction: column;
+  }
+  .left,
+  .right {
+    width: 100%;
+  }
+  .left {
+    margin-bottom: 16px;
+  }
+  .tree-container {
+    height: 300px;
+  }
+}
+.pagination-controls {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+@media (max-width: 768px) {
+  .rigtop {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .add-product-btn {
+    align-self: flex-start;
+  }
+  .tab-content {
+    flex-direction: column;
+  }
+  .tab-content .tab-item {
+    width: 100%;
+    text-align: center;
+  }
+  .action-buttons {
+    flex-direction: column;
+    gap: 4px;
+  }
+}
+.content-form {
+  padding: 20px;
+}
+.content-form .el-form-item {
+  margin-bottom: 20px;
+}
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ebeef5;
+}
+.section-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #303133;
+}
+.form-list {
+  margin-top: 20px;
+}
+.form-item {
+  padding: 20px;
+  margin-bottom: 20px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background-color: #fafafa;
+}
+.form-item.main-form-item {
+  background-color: #f5f7fa;
+}
+.form-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px dashed #ebeef5;
+  color: #409eff;
+}
+.form-actions {
+  text-align: right;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px dashed #ebeef5;
+}
+.form-actions .el-button {
+  padding: 0 10px;
+}
+.saved-list {
+  margin-bottom: 30px;
+}
+.list-item {
+  padding: 15px;
+  margin-bottom: 15px;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  background-color: #fff;
+}
+.list-item.main-item {
+  background-color: #f8f9fa;
+}
+.list-item .item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.list-item .item-header .item-title {
+  font-weight: bold;
+  color: #606266;
+}
+.list-item .item-content {
+  display: flex;
+  align-items: flex-start;
+}
+.list-item .item-content .item-image {
+  margin-right: 15px;
+  flex-shrink: 0;
+}
+.list-item .item-content .item-details {
+  flex: 1;
+}
+.list-item .item-content .item-details div {
+  margin-bottom: 5px;
+}
+.list-item .item-content .item-details div strong {
+  color: #606266;
+  margin-right: 5px;
+}
+.detail-section {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px dashed #e4e7ed;
+}
+.detail-list .detail-item {
+  padding: 10px;
+  margin-bottom: 10px;
+  background-color: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+}
+.detail-list .detail-item .detail-title {
+  font-weight: bold;
+  margin-bottom: 8px;
+  color: #67c23a;
+}
+.detail-list .detail-item .detail-content {
+  margin-bottom: 8px;
+}
+.detail-list .detail-item .detail-content div {
+  margin-bottom: 3px;
+}
+.detail-list .detail-item .detail-content div strong {
+  color: #909399;
+  margin-right: 5px;
+}
+.detail-list .detail-item .detail-actions {
+  text-align: right;
+}
+.detail-form-section {
+  margin-top: 15px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  border: 1px dashed #dcdfe6;
+}
+.detail-form-item {
+  margin-bottom: 15px;
+  padding: 15px;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+}
+.add-detail-btn {
+  text-align: center;
+  margin-top: 10px;
+}
+.main-product-form {
+  padding: 20px;
+  margin-bottom: 30px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background-color: #fafafa;
+}
+.card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #ebeef5;
+}
+.card-top .top-tit {
+  display: flex;
+  flex-direction: column;
+}
+.card-top .top-tit span:first-child {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+.card-top .top-tit span:last-child {
+  font-size: 14px;
+  color: #409eff;
+}
+.no-product-selected {
+  padding: 80px 20px;
+  text-align: center;
+}
+.no-product-selected .empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+.product-table /deep/ .el-table__row {
+  cursor: pointer;
+}
+.product-table /deep/ .el-table__row:hover {
+  background-color: #f5f7fa;
+}
+.product-table /deep/ .el-table__row.current-row {
+  background-color: #ecf5ff;
+}
diff --git a/f/web-kboss/src/views/operation/productsServices/less/index.less b/f/web-kboss/src/views/operation/productsServices/less/index.less
new file mode 100644
index 0000000..8ba1c6d
--- /dev/null
+++ b/f/web-kboss/src/views/operation/productsServices/less/index.less
@@ -0,0 +1,868 @@
+.mianBox {
+  display: flex;
+  justify-content: space-between;
+  min-height: 100vh;
+  // min-height: 600px;
+  gap: 16px;
+  padding-bottom: 20px;
+  padding-bottom: 40px;
+  // box-sizing: border-box
+}
+
+.left {
+  width: 30%;
+  min-width: 320px;
+  height: 100vh;
+}
+
+.left-card {
+  // height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+
+  /deep/ .el-card__body {
+    padding: 20px;
+    flex: 1;
+    height: 100%;
+  }
+}
+
+.right {
+  flex: 1;
+  min-width: 0; // 防止flex溢出
+}
+
+.toptit {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.search {
+  margin-bottom: 20px;
+
+  /deep/ .el-input-group__append {
+    background-color: #409eff;
+    border-color: #409eff;
+
+    .el-button {
+      color: white;
+
+      &:hover {
+        background-color: #66b1ff;
+      }
+    }
+  }
+}
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #f5f7fa;
+  }
+
+  .el-button {
+    padding: 4px;
+    margin-left: 4px;
+
+    i {
+      font-size: 12px;
+    }
+
+    &:hover {
+      background-color: rgba(64, 158, 255, 0.1);
+      border-radius: 50%;
+    }
+  }
+}
+
+.tree-container {
+  // height: 400px;
+  overflow-y: auto;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  padding: 12px;
+  background-color: #fafafa;
+
+  /deep/ .el-tree {
+    .el-tree-node {
+      .el-tree-node__content {
+        height: 36px;
+
+        &:hover {
+          background-color: #f0f7ff;
+        }
+      }
+
+      &.is-current {
+        > .el-tree-node__content {
+          background-color: #ecf5ff;
+          color: #409eff;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+}
+
+.add-menu-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed #c0c4cc;
+  border-radius: 6px;
+  padding: 12px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  margin-top: 20px;
+  background-color: #fafafa;
+  color: #606266;
+
+  &:hover {
+    border-color: #409eff;
+    background-color: #f0f7ff;
+    color: #409eff;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
+  }
+
+  .add-icon {
+    font-size: 20px;
+    font-weight: 600;
+    margin-right: 8px;
+    line-height: 1;
+  }
+
+  div {
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
+// 右侧产品卡片样式
+.product-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  margin-bottom: 20px;
+
+  /deep/ .el-card__body {
+    padding: 24px;
+  }
+}
+
+.rigtop {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.rigtop-left {
+  flex: 1;
+  min-width: 0;
+}
+
+.breadcrumb {
+  margin-top: 8px;
+
+  /deep/ .el-breadcrumb__inner {
+    color: #909399;
+    font-size: 13px;
+
+    &:hover {
+      color: #409eff;
+    }
+  }
+
+  /deep/ .el-breadcrumb__separator {
+    color: #c0c4cc;
+  }
+}
+
+.current-menu {
+  font-size: 20px;
+  font-weight: 600;
+  color: #303133;
+  line-height: 1.4;
+}
+
+.add-product-btn {
+  .el-button {
+    border-radius: 6px;
+    padding: 10px 20px;
+    font-weight: 500;
+
+    i {
+      margin-right: 4px;
+    }
+  }
+}
+
+// 产品表格样式
+.product-table {
+  margin-bottom: 24px;
+
+  /deep/ .el-table {
+    border-radius: 6px;
+    overflow: hidden;
+    border: 1px solid #ebeef5;
+
+    th {
+      background-color: #f5f7fa;
+      color: #303133;
+      font-weight: 600;
+      height: 48px;
+    }
+
+    td {
+      padding: 16px 0;
+    }
+
+    .el-table__row {
+      cursor: pointer;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background-color: #f5f7fa;
+      }
+
+      &.current-row {
+        background-color: #ecf5ff;
+      }
+    }
+  }
+}
+
+.product-info {
+  .product-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 6px;
+    line-height: 1.4;
+  }
+
+  .product-desc {
+    font-size: 12px;
+    color: #909399;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+.product-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+
+  .el-tag {
+    border-radius: 4px;
+    padding: 0 8px;
+    height: 24px;
+    line-height: 22px;
+    font-size: 12px;
+
+    &--info {
+      background-color: #f4f4f5;
+      border-color: #e9e9eb;
+      color: #909399;
+    }
+  }
+}
+
+// 操作按钮样式
+.action-buttons {
+  display: flex;
+  gap: 8px;
+
+  .el-button {
+    min-width: 60px;
+    padding: 7px 15px;
+    border-radius: 4px;
+    font-size: 12px;
+
+    &--danger {
+      background-color: #fef0f0;
+      border-color: #fbc4c4;
+      color: #f56c6c;
+
+      &:hover {
+        background-color: #f56c6c;
+        color: white;
+      }
+    }
+  }
+}
+
+// 分页样式
+.pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid #ebeef5;
+
+  /deep/ .el-pagination {
+    .el-pagination__sizes,
+    .el-pagination__jump {
+      margin-left: 16px;
+    }
+
+    .btn-prev,
+    .btn-next {
+      border-radius: 4px;
+      border: 1px solid #d8dce5;
+    }
+
+    .el-pager {
+      li {
+        border-radius: 4px;
+        border: 1px solid #d8dce5;
+        margin: 0 4px;
+
+        &.active {
+          background-color: #409eff;
+          color: white;
+          border-color: #409eff;
+        }
+      }
+    }
+  }
+}
+
+.card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e4e7ed;
+  margin-bottom: 24px;
+
+  .top-tit {
+    span:first-child {
+      font-size: 18px;
+      font-weight: 600;
+      color: #303133;
+      display: block;
+      margin-bottom: 4px;
+    }
+
+    span:last-child {
+      font-size: 13px;
+      color: #909399;
+    }
+  }
+
+  .top-btn {
+    .el-button {
+      border-radius: 6px;
+      padding: 10px 24px;
+      font-weight: 500;
+    }
+  }
+}
+
+.card-content {
+  width: 100%;
+
+  .content-tab {
+    width: 100%;
+
+    .tab-top {
+      font-size: 15px;
+      font-weight: 600;
+      color: #303133;
+      margin-bottom: 16px;
+    }
+
+    .tab-content {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin-bottom: 24px;
+
+      .tab-item {
+        padding: 10px 24px;
+        border-radius: 20px;
+        background-color: #f5f7fa;
+        color: #606266;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        border: 1px solid transparent;
+
+        &:hover {
+          background-color: #e4e7ed;
+          transform: translateY(-1px);
+        }
+
+        &.active {
+          background-color: #409eff;
+          color: white;
+          font-weight: 500;
+          border-color: #409eff;
+          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
+        }
+      }
+    }
+  }
+}
+
+// 产品详情卡片样式
+.product-detail-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+
+  /deep/ .el-card__body {
+    padding: 24px;
+  }
+
+  .product-basic-info {
+    padding: 20px;
+    background-color: #fafafa;
+    border-radius: 6px;
+    border: 1px solid #ebeef5;
+
+    /deep/ .el-form-item {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .el-form-item__label {
+        color: #606266;
+        font-weight: 500;
+      }
+
+      .el-input,
+      .el-textarea {
+        .el-input__inner,
+        .el-textarea__inner {
+          border-radius: 4px;
+
+          &:focus {
+            border-color: #409eff;
+          }
+        }
+      }
+
+      .el-input-number {
+        .el-input-number__decrease,
+        .el-input-number__increase {
+          border-radius: 4px 0 0 4px;
+        }
+
+        .el-input__inner {
+          border-radius: 0 4px 4px 0;
+        }
+      }
+    }
+  }
+
+  .product-detail-content {
+    margin-top: 16px;
+
+    .editor-container {
+      /deep/ .el-textarea {
+        .el-textarea__inner {
+          border-radius: 6px;
+          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+          font-size: 14px;
+          line-height: 1.6;
+          padding: 16px;
+          border: 1px solid #dcdfe6;
+
+          &:focus {
+            border-color: #409eff;
+            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+          }
+
+          &::placeholder {
+            color: #c0c4cc;
+          }
+        }
+      }
+    }
+  }
+}
+
+.empty-detail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 40px;
+  text-align: center;
+
+  .empty-icon {
+    font-size: 64px;
+    margin-bottom: 24px;
+    opacity: 0.3;
+    animation: float 3s ease-in-out infinite;
+  }
+
+  .empty-text {
+    color: #909399;
+    font-size: 16px;
+    line-height: 1.6;
+    max-width: 300px;
+  }
+}
+
+// 对话框样式优化
+/deep/ .el-dialog {
+  border-radius: 8px;
+
+  .el-dialog__header {
+    padding: 20px 24px 10px;
+    border-bottom: 1px solid #e4e7ed;
+
+    .el-dialog__title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #303133;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 20px 24px;
+
+    .el-form-item {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .el-dialog__footer {
+    padding: 10px 24px 20px;
+    border-top: 1px solid #e4e7ed;
+
+    .dialog-footer {
+      .el-button {
+        border-radius: 6px;
+        padding: 10px 20px;
+        min-width: 80px;
+
+        &--primary {
+          font-weight: 500;
+        }
+      }
+    }
+  }
+}
+
+// 添加动画效果
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+// 响应式调整
+@media (max-width: 1200px) {
+  .mianBox {
+    flex-direction: column;
+  }
+
+  .left,
+  .right {
+    width: 100%;
+  }
+
+  .left {
+    margin-bottom: 16px;
+  }
+
+  .tree-container {
+    height: 300px;
+  }
+}
+
+.pagination-controls{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+@media (max-width: 768px) {
+  .rigtop {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .add-product-btn {
+    align-self: flex-start;
+  }
+
+  .tab-content {
+    flex-direction: column;
+
+    .tab-item {
+      width: 100%;
+      text-align: center;
+    }
+  }
+
+  .action-buttons {
+    flex-direction: column;
+    gap: 4px;
+  }
+}
+// 详情：添加样式
+.content-form {
+  padding: 20px;
+  .el-form-item {
+    margin-bottom: 20px;
+  }
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ebeef5;
+
+  h3 {
+    margin: 0;
+    font-size: 18px;
+    color: #303133;
+  }
+}
+
+.form-list {
+  margin-top: 20px;
+}
+
+.form-item {
+  padding: 20px;
+  margin-bottom: 20px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background-color: #fafafa;
+
+  &.main-form-item {
+    background-color: #f5f7fa;
+  }
+}
+
+.form-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px dashed #ebeef5;
+  color: #409eff;
+}
+
+.form-actions {
+  text-align: right;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px dashed #ebeef5;
+
+  .el-button {
+    padding: 0 10px;
+  }
+}
+
+.saved-list {
+  margin-bottom: 30px;
+}
+
+.list-item {
+  padding: 15px;
+  margin-bottom: 15px;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  background-color: #fff;
+
+  &.main-item {
+    background-color: #f8f9fa;
+  }
+
+  .item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #f0f0f0;
+
+    .item-title {
+      font-weight: bold;
+      color: #606266;
+    }
+  }
+
+  .item-content {
+    display: flex;
+    align-items: flex-start;
+
+    .item-image {
+      margin-right: 15px;
+      flex-shrink: 0;
+    }
+
+    .item-details {
+      flex: 1;
+
+      div {
+        margin-bottom: 5px;
+
+        strong {
+          color: #606266;
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+}
+
+.detail-section {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px dashed #e4e7ed;
+}
+
+.detail-list {
+  .detail-item {
+    padding: 10px;
+    margin-bottom: 10px;
+    background-color: #fff;
+    border: 1px solid #f0f0f0;
+    border-radius: 4px;
+
+    .detail-title {
+      font-weight: bold;
+      margin-bottom: 8px;
+      color: #67c23a;
+    }
+
+    .detail-content {
+      margin-bottom: 8px;
+
+      div {
+        margin-bottom: 3px;
+
+        strong {
+          color: #909399;
+          margin-right: 5px;
+        }
+      }
+    }
+
+    .detail-actions {
+      text-align: right;
+    }
+  }
+}
+
+.detail-form-section {
+  margin-top: 15px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  border: 1px dashed #dcdfe6;
+}
+
+.detail-form-item {
+  margin-bottom: 15px;
+  padding: 15px;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+}
+
+.add-detail-btn {
+  text-align: center;
+  margin-top: 10px;
+}
+
+.main-product-form {
+  padding: 20px;
+  margin-bottom: 30px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background-color: #fafafa;
+}
+
+.card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #ebeef5;
+
+  .top-tit {
+    display: flex;
+    flex-direction: column;
+
+    span:first-child {
+      font-size: 18px;
+      font-weight: bold;
+      margin-bottom: 5px;
+    }
+
+    span:last-child {
+      font-size: 14px;
+      color: #409eff;
+    }
+  }
+}
+
+.no-product-selected {
+  padding: 80px 20px;
+  text-align: center;
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+  }
+}
+
+// 详情：为产品表格行添加悬停效果
+.product-table {
+  /deep/ .el-table__row {
+    cursor: pointer;
+
+    &:hover {
+      background-color: #f5f7fa;
+    }
+
+    &.current-row {
+      background-color: #ecf5ff;
+    }
+  }
+}
diff --git a/f/web-kboss/src/views/product/allProduct/index.vue b/f/web-kboss/src/views/product/allProduct/index.vue
index f4feece..f4f3327 100644
--- a/f/web-kboss/src/views/product/allProduct/index.vue
+++ b/f/web-kboss/src/views/product/allProduct/index.vue
@@ -81,7 +81,7 @@
 </template>
 
 <script>
-import { reqNavList } from "@/api/newHome";
+import { reqNavList, reqNewHomeSync, reqNewHomeFestival } from "@/api/newHome";
 
 export default {
   name: "ProductServicePage",
@@ -125,6 +125,11 @@ export default {
       );
 
       return subItem && subItem.thrMenu ? subItem.thrMenu : [];
+    },
+    // 检查是否登录
+    loginState() {
+      const userId = sessionStorage.getItem('userId');
+      return userId !== null && userId !== 'null' && userId !== '';
     }
   },
   async mounted() {
@@ -134,13 +139,11 @@ export default {
   methods: {
     // 生成唯一的二级菜单项key
     getSubItemKey(subItem) {
-      // 使用分类标题和ID组合确保唯一性
       return `${subItem.id}_${this.activeCategory}_${subItem.secTitle}`;
     },
 
     // 生成唯一的三级菜单项key
     getThirdItemKey(thirdItem) {
-      // 使用三级菜单ID和父级ID组合确保唯一性
       return `${thirdItem.id}_${this.activeSubId}_${thirdItem.thrTitle}`;
     },
 
@@ -326,9 +329,35 @@ export default {
       return descriptions[product.name] || '专业的云服务产品，提供稳定可靠的服务';
     },
 
+    // 修复阿里云跳转逻辑
+    async handleAliyunProductClick() {
+      try {
+        // 第一步：同步请求
+        const syncResponse = await reqNewHomeSync();
+
+        if (!syncResponse.status) {
+          this.$message.warning(syncResponse.msg || '同步失败，请稍后重试');
+          return;
+        }
+
+        // 第二步：获取跳转链接
+        const festivalResponse = await reqNewHomeFestival();
+
+        if (festivalResponse.status && festivalResponse.data) {
+          window.open(festivalResponse.data);
+        } else {
+          this.$message.warning(festivalResponse.msg || '获取跳转链接失败');
+        }
+      } catch (error) {
+        console.error('阿里云跳转失败:', error);
+        this.$message.error('网络错误，请稍后重试');
+      }
+    },
+
     // 点击产品
-    handleProductClick(product) {
-      // 原有的产品点击逻辑保持不变
+    async handleProductClick(product) {
+      console.log('点击产品:', product);
+
       const userId = sessionStorage.getItem('userId');
 
       if (product.type === '百度云') {
@@ -354,8 +383,9 @@ export default {
           });
         }
       } else if (product.type === '阿里云') {
+
         if (userId) {
-          window.open(product.url);
+          await this.handleAliyunProductClick();
         } else {
           this.$router.push({
             path: "/login",
@@ -397,7 +427,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-/* 样式保持不变 */
 .product-service-page {
   margin: 0 auto;
   padding: 24px;
@@ -533,112 +562,112 @@ export default {
           .product-header {
             display: flex;
             justify-content: space-between;
-            align-items: flex-start;
-            margin-bottom: 12px;
+                align-items: flex-start;
+                margin-bottom: 12px;
 
-            .product-name {
-              font-size: 16px;
-              font-weight: 600;
-              color: #1a1a1a;
-              margin: 0;
-              flex: 1;
-            }
+                .product-name {
+                  font-size: 16px;
+                  font-weight: 600;
+                  color: #1a1a1a;
+                  margin: 0;
+                  flex: 1;
+                }
 
-            .discount-badge {
-              background: linear-gradient(135deg, #ff6b6b, #ff4757);
-              color: #fff;
-              font-size: 12px;
-              padding: 4px 8px;
-              border-radius: 4px;
-              font-weight: 600;
-              margin-left: 8px;
-            }
-          }
+                .discount-badge {
+                  background: linear-gradient(135deg, #ff6b6b, #ff4757);
+                  color: #fff;
+                  font-size: 12px;
+                  padding: 4px 8px;
+                  border-radius: 4px;
+                  font-weight: 600;
+                  margin-left: 8px;
+                }
+              }
 
-          .product-desc {
-            font-size: 14px;
-            color: #666;
-            line-height: 1.5;
-            margin-bottom: 16px;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-          }
+              .product-desc {
+                font-size: 14px;
+                color: #666;
+                line-height: 1.5;
+                margin-bottom: 16px;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+              }
 
-          .product-footer {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+              .product-footer {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
 
-            .product-type {
-              font-size: 12px;
-              color: #999;
-              background: #f8f9fa;
-              padding: 4px 8px;
-              border-radius: 4px;
-            }
+                .product-type {
+                  font-size: 12px;
+                  color: #999;
+                  background: #f8f9fa;
+                  padding: 4px 8px;
+                  border-radius: 4px;
+                }
 
-            .detail-btn {
-              background: #1E6FFF;
-              color: #fff;
-              border: none;
-              padding: 6px 12px;
-              border-radius: 4px;
-              font-size: 12px;
-              cursor: pointer;
-              transition: background 0.3s;
+                .detail-btn {
+                  background: #1E6FFF;
+                  color: #fff;
+                  border: none;
+                  padding: 6px 12px;
+                  border-radius: 4px;
+                  font-size: 12px;
+                  cursor: pointer;
+                  transition: background 0.3s;
 
-              &:hover {
-                background: #0d5ae0;
+                  &:hover {
+                    background: #0d5ae0;
+                  }
+                }
               }
             }
           }
-        }
-      }
 
-      .empty-state {
-        text-align: center;
-        padding: 60px 20px;
+          .empty-state {
+            text-align: center;
+            padding: 60px 20px;
 
-        .empty-icon {
-          font-size: 48px;
-          margin-bottom: 16px;
-        }
+            .empty-icon {
+              font-size: 48px;
+              margin-bottom: 16px;
+            }
 
-        .empty-text {
-          color: #999;
-          font-size: 14px;
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .product-service-page {
-    padding: 16px;
-
-    .product-content {
-      flex-direction: column;
-
-      .menu-sidebar {
-        width: 100%;
-        order: 2;
-      }
-
-      .main-content {
-        order: 1;
-
-        &.full-width {
-          margin-left: 0;
+            .empty-text {
+              color: #999;
+              font-size: 14px;
+            }
+          }
         }
       }
     }
 
-    .product-grid {
-      grid-template-columns: 1fr !important;
+    @media (max-width: 768px) {
+      .product-service-page {
+        padding: 16px;
+
+        .product-content {
+          flex-direction: column;
+
+          .menu-sidebar {
+            width: 100%;
+            order: 2;
+          }
+
+          .main-content {
+            order: 1;
+
+            &.full-width {
+              margin-left: 0;
+            }
+          }
+        }
+
+        .product-grid {
+          grid-template-columns: 1fr !important;
+        }
+      }
     }
-  }
-}
 </style>