diff --git a/package-lock.json b/package-lock.json
index 7b0b22f..7b7fdfb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
         "ant-design-vue": "^4.2.3",
         "axios": "^1.7.2",
         "core-js": "^3.8.3",
-        "vue": "^3.2.13"
+        "vue": "^3.2.13",
+        "vue-router": "^4.4.0"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -3248,6 +3249,11 @@
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
+      "integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.4.31",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.4.31.tgz",
@@ -11853,6 +11859,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.4.0.tgz",
+      "integrity": "sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -15023,6 +15043,11 @@
         }
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
+      "integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw=="
+    },
     "@vue/reactivity": {
       "version": "3.4.31",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.4.31.tgz",
@@ -21328,6 +21353,14 @@
         }
       }
     },
+    "vue-router": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.4.0.tgz",
+      "integrity": "sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==",
+      "requires": {
+        "@vue/devtools-api": "^6.5.1"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
diff --git a/package.json b/package.json
index c053358..b9890be 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "ant-design-vue": "^4.2.3",
     "axios": "^1.7.2",
     "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "vue": "^3.2.13",
+    "vue-router": "^4.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
diff --git a/src/App.vue b/src/App.vue
index b41f56b..2ff5a81 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,26 @@
 <template>
-  <test-feeder />
+  <a-layout class="h-full">
+    <a-layout-sider>
+      <a-menu class="h-full"
+        :items="menuItems"
+        @click="actionMenuItemClick"
+      ></a-menu>
+    </a-layout-sider>
+    <a-layout>
+      <a-layout-content>
+        <router-view />
+      </a-layout-content>
+    </a-layout>
+  </a-layout>
 </template>
 <script setup>
-import TestFeeder from './components/TestFeeder.vue'
+import { useRouter } from 'vue-router'
+const router = useRouter();
+const menuItems = [
+    {key: 'feeder', label: '进出料', path:'feeder'},
+];
+
+function actionMenuItemClick( event ) {
+  router.push({name:event.item.path});
+}
 </script>
\ No newline at end of file
diff --git a/src/components/TestFeeder.vue b/src/components/TestFeeder.vue
index 1db2ef7..7eca607 100644
--- a/src/components/TestFeeder.vue
+++ b/src/components/TestFeeder.vue
@@ -1,17 +1,47 @@
 <template>
   <div class="h-full flex flex-col">
+    <div class="border-b p-5 bg-white">进出料</div>
     <div class="p-5 h-0 grow">
-      <div class="border rounded p-5 whitespace-pre-line h-full overflow-y-auto"
+      <div class="border rounded p-5 whitespace-pre-line h-full overflow-y-auto bg-white"
       >{{ message }}</div>
     </div>
     
+    <div class="p-5 border-t border-b">
+      <a-row>
+        <a-col class="p-1" :span="8"><a-input prefix="回零超时时间 : " v-model:value="serviceParams.moveToZeroOvertime" /></a-col>
+        <a-col class="p-1" :span="8"><a-input prefix="执行动作的超时时间 : " v-model:value="serviceParams.actionOvertime" /></a-col>
+        <a-col class="p-1" :span="8"><a-input prefix="试管扫码位置 : " v-model:value="serviceParams.tubeScanPos" /></a-col>
+        <a-col class="p-1" :span="8"><a-input prefix="高低试管判断位置 : " v-model:value="serviceParams.tubeHeighJudgmentPos" /></a-col>
+        <a-col class="p-1" :span="8"><a-input prefix="试管预处理位置 : " v-model:value="serviceParams.tubePreProcessPos" /></a-col>
+        <a-col class="p-1" :span="8"><a-input prefix="有无判断位置 : " v-model:value="serviceParams.tubeExistJudgmentPos" /></a-col>
+        <a-col class="p-1" :span="8"><a-input prefix="入料位置 : " v-model:value="serviceParams.tubeRackEnterPos" /></a-col>
+        <a-col class="p-1" :span="8"><a-input prefix="出料位置 : " v-model:value="serviceParams.tubeRackExitPos" /></a-col>
+        <a-col class="p-1" :span="8"><a-input prefix="试管架扫码位置 : " v-model:value="serviceParams.tubeRackScanCodePos" /></a-col>
+        <a-col class="p-1" :span="8"><a-input prefix="水平移动电机位置偏移 : " v-model:value="serviceParams.horizontalMotorOffset" /></a-col>
+        <a-col class="p-1" :span="8"><a-input prefix="水平电机丢步判断 : " v-model:value="serviceParams.horizontalMotorLostStepThresholdVal" /></a-col>
+        <a-col class="p-1" :span="8"><a-input prefix="试管扫码夹紧位置 : " v-model:value="serviceParams.scanCodeClampPos" /></a-col>
+        <a-col class="p-1" :span="8"><a-input prefix="试管扫码释放位置 : " v-model:value="serviceParams.scanCodeReleasePos" /></a-col>
+        <a-col class="p-1" :span="8">
+          <a-button class="mr-1" @click="actionServiceParamsReload">刷新</a-button>
+          <a-button @click="actionServiceParamsSave">保存</a-button>
+        </a-col>
+      </a-row>
+    </div>
+
     <div class="p-5">
-      <div class="mt-1"><a-button @click="actionMoveToZeroWhenDeviceSetup">设备启动归零</a-button></div>
-      <div class="mt-1"><a-button @click="actionMoveToZero">归零</a-button></div>
-      <div class="mt-1"><a-button @click="actionMoveTubeRackToEnterPos">移动试管架到入口位置</a-button></div>
-      <div class="mt-1"><a-button @click="actionMoveTubeRackToExitPos">移动试管架到出口位置</a-button></div>
-      <div class="mt-1"><a-button @click="actionMoveTubeRackToScanPos">移动试管架到试管架扫码位置</a-button></div>
-      <div class="mt-1"><a-button @click="actionMoveTubeRackToScanPosAndScan">移动试管架到试管架扫码并扫码</a-button></div>
+      <a-button class="m-1" @click="actionQuickExec('moveToZeroWhenDeviceSetup')">设备启动归零</a-button>
+      <a-button class="m-1" @click="actionQuickExec('moveToZero')">归零</a-button>
+      <a-button class="m-1" @click="actionQuickExec('moveTubeRackToEnterPos')">移动试管架到入口位置</a-button>
+      <a-button class="m-1" @click="actionQuickExec('moveTubeRackToExitPos')">移动试管架到出口位置</a-button>
+      <a-button class="m-1" @click="actionQuickExec('moveTubeRackToScanPos')">移动试管架到试管架扫码位置</a-button>
+      <a-button class="m-1" @click="actionQuickExec('moveTubeRackToScanPosAndScan')">移动试管架到试管架扫码并扫码</a-button>
+      <a-button class="m-1" @click="actionQuickExec('isTubeRackInEnterPos')">试管架是否在入料位置</a-button>
+      <a-button class="m-1" @click="actionQuickExec('isTubeRackInExitPos')">试管架是否在出料位置</a-button>
+      <a-button class="m-1" @click="actionQuickExec('getMoveChannelPhotoelectricState',0)">获取移动通道的光电状态(内)</a-button>
+      <a-button class="m-1" @click="actionQuickExec('getMoveChannelPhotoelectricState',1)">获取移动通道的光电状态(外)</a-button>
+      <a-button class="m-1" @click="actionQuickExec('scanClampModuleCompress')">扫描夹紧机构夹紧</a-button>
+      <a-button class="m-1" @click="actionQuickExec('scanClampModuleReset')">扫描夹紧机构复位</a-button>
+
       <div class="mt-1">
         <a-input-group compact class="flex flex-row">
           <a-input class="!w-64" prefix="TubeType : " v-model:value="moveTubeToScanPosParams[0]"/>
@@ -48,14 +78,7 @@
         </a-input-group>
       </div>
       
-      <div class="mt-1"><a-button @click="actionQuickExec('isTubeRackInEnterPos')">试管架是否在入料位置</a-button></div>
-      <div class="mt-1"><a-button @click="actionQuickExec('isTubeRackInExitPos')">试管架是否在出料位置</a-button></div>
-
-      <div class="mt-1"><a-button @click="actionQuickExec('getMoveChannelPhotoelectricState',0)">获取移动通道的光电状态(内)</a-button></div>
-      <div class="mt-1"><a-button @click="actionQuickExec('getMoveChannelPhotoelectricState',1)">获取移动通道的光电状态(外)</a-button></div>
-
-      <div class="mt-1"><a-button @click="actionQuickExec('scanClampModuleCompress')">扫描夹紧机构夹紧</a-button></div>
-      <div class="mt-1"><a-button @click="actionQuickExec('scanClampModuleReset')">扫描夹紧机构复位</a-button></div>
+      
     </div>
   </div>
 </template>
@@ -68,6 +91,31 @@ const moveTubeToScanPosAndScanParams = ref(['',0]);
 const moveTubeToHeighJudgmentPosParams = ref(['',0]);
 const moveTubeToPreProcessPosParams = ref(['',0]);
 const moveTubeToExistJudgmentPosParams = ref(['',0]);
+const serviceParams = ref({});
+
+async function actionServiceParamsReload() {
+    serviceParams.value = {};
+    message.value = '';
+    let client = ApiClient.getClient();
+    try {
+        let res = await client.call('tmp-test/get-service-params');
+        message.value = res;
+        serviceParams.value = res.data;
+    } catch ( e ) {
+        message.value = e.message
+    }
+}
+
+async function actionServiceParamsSave() {
+    message.value = '';
+    let client = ApiClient.getClient();
+    try {
+        let res = await client.call('tmp-test/update-service-params', serviceParams.value);
+        message.value = res;
+    } catch ( e ) {
+        message.value = e.message
+    }
+}
 
 // execute service method
 async function executeServiceMethod( method, params=[]) {
@@ -89,34 +137,6 @@ function actionQuickExec( action, ... params ) {
   executeServiceMethod(action, params);
 }
 
-// move to zero when device setup
-function actionMoveToZeroWhenDeviceSetup() {
-    executeServiceMethod('moveToZeroWhenDeviceSetup');
-}
-
-// move to zero
-function actionMoveToZero() {
-    executeServiceMethod('moveToZero');
-}
-
-// moveTubeRackToEnterPos
-function actionMoveTubeRackToEnterPos() {
-  executeServiceMethod('moveTubeRackToEnterPos');
-}
-
-// moveTubeRackToExitPos
-function actionMoveTubeRackToExitPos() {
-  executeServiceMethod('moveTubeRackToExitPos');
-}
-
-// moveTubeRackToScanPos
-function actionMoveTubeRackToScanPos() {
-  executeServiceMethod('moveTubeRackToScanPos');
-}
-
-function actionMoveTubeRackToScanPosAndScan() {
-  executeServiceMethod('moveTubeRackToScanPosAndScan');
-}
 
 function actionMoveTubeToScanPos() {
     executeServiceMethod('moveTubeToScanPos',[
diff --git a/src/main.js b/src/main.js
index f075b25..b788e77 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,18 @@
 import { createApp } from 'vue'
+import { createWebHashHistory, createRouter } from 'vue-router'
 import App from './App.vue'
 import Antd from 'ant-design-vue';
+import TestFeeder from './components/TestFeeder.vue';
 import './style/app.css'
 
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes : [
+        {name:'feeder', path:'/feeder', component:TestFeeder}
+    ],
+})
+
 let app = createApp(App)
+app.use(router);
 app.use(Antd);
 app.mount('#app')