diff --git a/.env.development b/.env.development
index d297364..1b15536 100644
--- a/.env.development
+++ b/.env.development
@@ -1,10 +1,13 @@
 # just a flag
 ENV='development'
 
-# base api
-VUE_APP_BASE_API = https://saifen.ali251.langye.net
-VUE_APP_UPLOAD_API = https://saifen.ali251.langye.net/api/admin/upload-file
+# base api - 本地开发
+VUE_APP_BASE_API = http://127.0.0.1:8000
+VUE_APP_UPLOAD_API = http://127.0.0.1:8000/api/admin/upload-file
 #VUE_APP_PREVIEW_API=http://view.ali251.langye.net:8012/onlinePreview
 
+# 远程环境（备用）
+#VUE_APP_BASE_API = https://saifen.ali251.langye.net
+#VUE_APP_UPLOAD_API = https://saifen.ali251.langye.net/api/admin/upload-file
 #VUE_APP_BASE_API = https://sepax-pdm-test.langye.net
 #VUE_APP_UPLOAD_API = https://sepax-pdm-test.langye.net/api/admin/upload-file
diff --git a/src/views/product/components/addFamily.vue b/src/views/product/components/addFamily.vue
index c2e908c..f591598 100644
--- a/src/views/product/components/addFamily.vue
+++ b/src/views/product/components/addFamily.vue
@@ -12,6 +12,19 @@
           </div>
         </div>
       </template>
+      <template v-slot:pid>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label" style="font-weight: bold">
+            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>Parent：
+          </div>
+          <div class="xy-table-item-content">
+            <el-select style="width:100%" clearable filterable v-model="form.pid" placeholder="Please Select">
+              <el-option v-for="item in familyOptions" :key="item.id" :label="item.title" :value="item.id">
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+      </template>
       <template v-slot:sort>
         <div class="xy-table-item">
           <div class="xy-table-item-label" style="font-weight: bold">
@@ -49,48 +62,48 @@
             </el-upload>
           </div>
         </div>
-      </template>
-      <template v-slot:family_product_lines>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label" style="font-weight: bold">
-            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>Product Lines：
-          </div>
-          <div class="xy-table-item-content">
-            <el-button type="primary" style="margin-bottom:10px" size="small" @click="addRow">Add</el-button>
-            <xy-table style="width:850px" :list="form.family_product_lines" :isPage="false" :height="350"
-              :table-item="detail_item">
-              <template v-slot:product_category_id>
-                <el-table-column align='left' label="Product Line" width="340">
-                  <template slot-scope="scope">
-                    <el-select style="width:100%" @change="(e)=>{changeKey(e,scope.row)}" v-model="scope.row.product_category_id"
-                      placeholder="Please Select">
-                      <el-option v-for="(pvalue,index) in productPhaseList" :key="index" :label="pvalue.name"
-                        :value="pvalue.id">
-                      </el-option>
-                    </el-select>
-                  </template>
-                </el-table-column>
-              </template>
-             <template v-slot:sort>
-                <el-table-column align='left' label="Sort" width="340">
-                  <template slot-scope="scope">
-                    <el-input placeholder="Please Input" style="width:100%" v-model="scope.row.sort"></el-input>
-                  </template>
-                </el-table-column>
-              </template>
-              <template v-slot:btns>
-                <el-table-column align='center' label="operate" width="120" header-align="center">
-                  <template slot-scope="scope">
-                    <el-popconfirm confirm-button-text="confirm" cancel-button-text="cancel" style="margin:0 10px"
-                      @confirm="delRow(scope.$index)" title="Are you sure to delete it?">
-                      <el-button type="danger" size="small" slot="reference">delete</el-button>
-                    </el-popconfirm>
-                  </template>
-                </el-table-column>
-              </template>
-            </xy-table>
-          </div>
-        </div>
+      </template>
+      <template v-slot:family_product_lines>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label" style="font-weight: bold">
+            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>Product Lines：
+          </div>
+          <div class="xy-table-item-content">
+            <el-button type="primary" style="margin-bottom:10px" size="small" @click="addRow">Add</el-button>
+            <xy-table style="width:850px" :list="form.family_product_lines" :isPage="false" :height="350"
+              :table-item="detail_item">
+              <template v-slot:product_category_id>
+                <el-table-column align='left' label="Product Line" width="340">
+                  <template slot-scope="scope">
+                    <el-select style="width:100%" @change="(e)=>{changeKey(e,scope.row)}" v-model="scope.row.product_category_id"
+                      placeholder="Please Select">
+                      <el-option v-for="(pvalue,index) in productPhaseList" :key="index" :label="pvalue.name"
+                        :value="pvalue.id">
+                      </el-option>
+                    </el-select>
+                  </template>
+                </el-table-column>
+              </template>
+             <template v-slot:sort>
+                <el-table-column align='left' label="Sort" width="340">
+                  <template slot-scope="scope">
+                    <el-input placeholder="Please Input" style="width:100%" v-model="scope.row.sort"></el-input>
+                  </template>
+                </el-table-column>
+              </template>
+              <template v-slot:btns>
+                <el-table-column align='center' label="operate" width="120" header-align="center">
+                  <template slot-scope="scope">
+                    <el-popconfirm confirm-button-text="confirm" cancel-button-text="cancel" style="margin:0 10px"
+                      @confirm="delRow(scope.$index)" title="Are you sure to delete it?">
+                      <el-button type="danger" size="small" slot="reference">delete</el-button>
+                    </el-popconfirm>
+                  </template>
+                </el-table-column>
+              </template>
+            </xy-table>
+          </div>
+        </div>
       </template>
       <template v-slot:description>
         <div class="xy-table-item">
@@ -122,12 +135,13 @@
 
 <script>
   import {
+    index as familyIndex,
     save,
     show
-  } from "@/api/family"
-  import {
-    index,
-    destroy
+  } from "@/api/family"
+  import {
+    index,
+    destroy
   } from "@/api/product/category.js"
   import {
     getToken
@@ -142,33 +156,36 @@
         showWang: false,
         type: 'add',
         id: '',
+        defaultPid: 0,
+        familyOptions: [],
         uploadOther: {
           token: ""
         },
         showWang: false,
         action: `${process.env.VUE_APP_UPLOAD_API}`,
-        pictureList: [],
-        productPhaseList:[],
-        detail_item: [{
-          type: 'index',
-          width: 50,
-        }, {
-          prop: 'product_category_id',
-          label: 'Product Line',
-          align: 'left',
-          width: 620
-        }, {
-          prop: 'sort',
-          label: 'Sort',
-          align: 'left',
-          width: 620
+        pictureList: [],
+        productPhaseList:[],
+        detail_item: [{
+          type: 'index',
+          width: 50,
+        }, {
+          prop: 'product_category_id',
+          label: 'Product Line',
+          align: 'left',
+          width: 620
+        }, {
+          prop: 'sort',
+          label: 'Sort',
+          align: 'left',
+          width: 620
         }],
         form: {
           title: '',
+          pid: 0,
           sort: 0,
           is_visible: 1,
 
-          file_ids: [],
+          file_ids: [],
           family_product_lines:[],
           description: '',
           content: ''
@@ -182,21 +199,43 @@
       }
     },
     created() {
-      this.uploadOther.token = getToken();
+      this.uploadOther.token = getToken();
       this.getList()
     },
-    methods: {
-      async getList() {
-        const res = await index({
-          page_size: 999,
-          page: 1,
-          type:2,
-          sort_type: 'asc',
-          sort_name: 'sort',
-          is_visible: 1,
-          // family_id:this.select.family_id
-        })
-        this.productPhaseList = res.data
+    methods: {
+      async loadFamilyOptions() {
+        const res = await familyIndex({
+          page_size: 999,
+          page: 1,
+          sort_name: 'sort',
+          sort_type: 'asc',
+          is_tree: 0
+        }, false)
+        const list = res.data || []
+        const excludeIds = this.id ? this.getDescendantIds(list, Number(this.id)) : []
+        this.familyOptions = [{
+          id: 0,
+          title: 'Top Level'
+        }].concat(list.filter(item => !excludeIds.includes(item.id)))
+      },
+      getDescendantIds(list, currentId) {
+        const ids = [currentId]
+        list.filter(item => Number(item.pid) === currentId).forEach(item => {
+          ids.push(...this.getDescendantIds(list, item.id))
+        })
+        return ids
+      },
+      async getList() {
+        const res = await index({
+          page_size: 999,
+          page: 1,
+          type:2,
+          sort_type: 'asc',
+          sort_name: 'sort',
+          is_visible: 1,
+          // family_id:this.select.family_id
+        })
+        this.productPhaseList = res.data
       },
       handleRemoveP(file, fileList) {
         this.pictureList = fileList
@@ -212,18 +251,18 @@
 
       changeEditor(e, type) {
         this.form[type] = e
-      },
-      addRow() {
-        this.form.family_product_lines.push({
-          product_category_id: '',
-          sort: 0
-        })
-      },
-      delRow(index) {
-        this.form.family_product_lines.splice(index, 1)
-      },
-      changeKey(e, row) {
-        console.log(e,row)
+      },
+      addRow() {
+        this.form.family_product_lines.push({
+          product_category_id: '',
+          sort: 0
+        })
+      },
+      delRow(index) {
+        this.form.family_product_lines.splice(index, 1)
+      },
+      changeKey(e, row) {
+        console.log(e,row)
       },
       submit() {
         if (this.id) {
@@ -247,7 +286,8 @@
         }
         // return
         save({
-          ...this.form
+          ...this.form,
+          pid: this.form.pid || 0
         }).then(res => {
           this.$message({
             type: 'success',
@@ -264,13 +304,14 @@
           show_relation: ['familyProductLines'],
         }).then(res => {
           this.form = this.base.requestToForm(res, this.form)
+          this.form.pid = res.pid ? res.pid : 0
           this.form.description = res.description ? res.description : ''
-          this.form.content = res.content ? res.content : ''
-          this.form.family_product_lines = res.family_product_lines?res.family_product_lines:[]
-          if(this.form.family_product_lines.length>0){
-            this.form.family_product_lines.sort((a,b)=>{
-              return a.sort - b.sort
-            })
+          this.form.content = res.content ? res.content : ''
+          this.form.family_product_lines = res.family_product_lines?res.family_product_lines:[]
+          if(this.form.family_product_lines.length>0){
+            this.form.family_product_lines.sort((a,b)=>{
+              return a.sort - b.sort
+            })
           }
           this.form.is_visible = res.is_visible ? res.is_visible : 0
           this.form.sort = res.sort ? res.sort : 0
@@ -292,21 +333,25 @@
     watch: {
       isShow(newVal) {
         if (newVal) {
+          this.loadFamilyOptions()
           if (this.type === 'editor') {
             this.getDetail()
           } else {
+            this.form.pid = this.defaultPid || 0
             this.showWang = true
           }
         } else {
           this.id = ''
           this.type = "add"
+          this.defaultPid = 0
           this.pictureList = []
           this.showWang = false
           this.form = {
             title: '',
+            pid: 0,
             sort: 0,
             is_visible: 1,
-            file_ids: [],
+            file_ids: [],
             family_product_lines:[],
             description: '',
             content: ''
@@ -326,4 +371,4 @@
   ::v-deep .content {
     flex-basis: 100%;
   }
-</style>
+</style>
diff --git a/src/views/product/family.vue b/src/views/product/family.vue
index 15aedbc..de5a743 100644
--- a/src/views/product/family.vue
+++ b/src/views/product/family.vue
@@ -16,6 +16,13 @@
                   </el-option>
                 </el-select>
               </div>
+              <div>
+                <el-select style="width:120px" v-model="select.is_tree" placeholder="Tree View">
+                  <el-option v-for="(item,index) in [{id: 0,value: 'List'}, {id: 1,value: 'Tree'}]" :key="index"
+                    :label="item.value" :value="item.id">
+                  </el-option>
+                </el-select>
+              </div>
               <div>
                 <el-button type="primary" size="small" @click="select.page=1,getList()">search</el-button>
               </div>
@@ -33,11 +40,15 @@
     </div>
 
     <div>
-      <xy-table :list="list" :total="total" @pageIndexChange="pageIndexChange" @pageSizeChange="pageSizeChange"
-        :table-item="table_item">
+      <xy-table :key="'family-table-' + tableKey" :list="list" :total="total" :isPage="select.is_tree != 1"
+        :row-key="'id'" :default-expand-all="select.is_tree == 1"
+        :tree-props="select.is_tree == 1 ? {children: 'children', hasChildren: 'hasChildren'} : {}"
+        @pageIndexChange="pageIndexChange" @pageSizeChange="pageSizeChange" :table-item="table_item">
         <template v-slot:btns>
-          <el-table-column align='center' label="Operate" width="180" header-align="center">
+          <el-table-column align='center' label="Operate" :width="select.is_tree == 1 ? 260 : 180" header-align="center">
             <template slot-scope="scope">
+              <el-button v-if="select.is_tree == 1" type="primary" size="small"
+                @click="editFamily('add', null, scope.row)">add sub</el-button>
               <el-button type="primary" size="small" @click="editFamily('editor',scope.row.id)">edit</el-button>
               <el-popconfirm confirm-button-text="confirm" cancel-button-text="cancel" style="margin:0 10px"
                 @confirm="deleteList(scope.row.id)" title="Are you sure to delete it?">
@@ -68,11 +79,13 @@
         select: {
           title: '',
           is_visible: '',
+          is_tree: 1,
           page: 1,
           page_size: 10,
         },
         list: [],
         total: 0,
+        tableKey: 0,
         table_item: [{
           type: 'index',
           align: 'center',
@@ -103,11 +116,21 @@
     created() {
       this.getList()
     },
+    watch: {
+      'select.is_tree'() {
+        this.select.page = 1
+        this.getList()
+      }
+    },
     methods: {
 
-      editFamily(type, id, pName) {
+      editFamily(type, id, parentRow) {
         if (type == 'editor') {
           this.$refs.addFamily.id = id
+          this.$refs.addFamily.defaultPid = 0
+        } else {
+          this.$refs.addFamily.id = ''
+          this.$refs.addFamily.defaultPid = parentRow ? parentRow.id : 0
         }
         this.$refs.addFamily.type = type
         this.$refs.addFamily.isShow = true
@@ -121,33 +144,48 @@
         this.select.page = 1
         this.getList()
       },
+      buildFilter() {
+        const filter = [{
+          key: 'title',
+          op: 'like',
+          value: this.select.title
+        }]
+        if (this.select.is_visible !== '' && this.select.is_visible !== null && this.select.is_visible !== undefined) {
+          filter.push({
+            key: 'is_visible',
+            op: 'eq',
+            value: this.select.is_visible
+          })
+        }
+        return filter
+      },
       async getList() {
-        const res = await index({
+        const params = {
           page_size: this.select.page_size,
           page: this.select.page,
           sort_name: 'sort',
-          sort_type: 'asc',
-          filter:[{
-            key:'title',
-            op:'like',
-            value:this.select.title
-          },{
-            key:'is_visible',
-            op:'eq',
-            value:this.select.is_visible
-          }]
-        })
-        this.list = res.data
-        this.total = res.total
+          sort_type: 'asc',
+          is_tree: this.select.is_tree,
+          filter: this.buildFilter()
+        }
+        const res = await index(params)
+        if (this.select.is_tree == 1) {
+          this.list = Array.isArray(res) ? res : (res.data || [])
+          this.total = this.list.length
+        } else {
+          this.list = res.data
+          this.total = res.total
+        }
+        this.tableKey += 1
       },
       resetSearch() {
-        this.select.page = 1
+        this.select.page = 1
         this.select.is_visible = ''
         this.select.title = ''
+        this.select.is_tree = 1
         this.getList()
       },
       deleteList(id) {
-        var that = this;
         destroy({
           id: id
         }).then(response => {
@@ -155,7 +193,6 @@
           this.getList()
         }).catch(error => {
           console.log(error)
-          reject(error)
         })
       },
     }
@@ -177,4 +214,4 @@
       }
     }
   }
-</style>
+</style>
diff --git a/vue.config.js b/vue.config.js
index 2e40aa3..fa6e6ee 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -13,7 +13,8 @@ const name = defaultSettings.title // page title
 // For example, Mac: sudo npm run
 // You can change the port by the following methods:
 // port = 9528 npm run dev OR npm run dev --port = 9528
-const port = process.env.port || process.env.npm_config_port || 8000 // dev port
+const port = process.env.port || process.env.npm_config_port || 9528 // dev port，避免与 Laravel 8000 冲突
+const apiTarget = process.env.VUE_APP_BASE_API || 'http://127.0.0.1:8000'
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
@@ -25,7 +26,7 @@ module.exports = {
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
   publicPath: process.env.ENV === 'staging' ? '/admin_test' : '/admin',
-  outputDir: '/Users/mac/Documents/朗业/2024/s-美国赛分/saifen/public/admin',
+  outputDir: path.resolve(__dirname, '../saifen/public/admin'),
   assetsDir: 'static',
   css: {
     loaderOptions: { // 向 CSS 相关的 loader 传递选项
@@ -48,12 +49,9 @@ module.exports = {
     },
     //before: require('./mock/mock-server.js'),
     proxy: {
-      [process.env.VUE_APP_BASE_API]: {
-        target: process.env.VUE_APP_BASE_API,
-        changeOrigin: true, //配置跨域
-        pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: process.env.VUE_APP_BASE_API
-        }
+      '/api': {
+        target: apiTarget,
+        changeOrigin: true
       }
     }
   },
@@ -148,4 +146,4 @@ module.exports = {
         }
       )
   }
-}
+}