diff --git a/dashboard/config/config.js b/dashboard/config/config.js
index aecde756e..44335c32c 100644
--- a/dashboard/config/config.js
+++ b/dashboard/config/config.js
@@ -12,9 +12,7 @@ export default defineConfig({
     hmr: true,
   },
   locale: {
-    // default zh-CN
     default: 'en-US',
-    // default true, when it is true, will use `navigator.language` overwrite default
     antd: false,
     baseNavigator: false,
   },
@@ -36,13 +34,11 @@ export default defineConfig({
           routes: [
             {
               path: '/',
-              // redirect: `/${envname}/ApplicationList`,
               redirect: `/ApplicationList`,
             },
             {
               name: 'ApplicationList',
               icon: 'table',
-              // path: `/${envname}/ApplicationList`,
               path: `/ApplicationList`,
               component: './ApplicationList',
             },
@@ -77,25 +73,6 @@ export default defineConfig({
               icon: 'table',
               path: '/Workload',
               routes: [
-                // {
-                //   name: 'Deployment',
-                //   icon: 'table',
-                //   path: '/Workload/Deployment',
-                //   component: './Workload/Deployment',
-                // },
-                // {
-                //   name: 'Containerized',
-                //   icon: 'smile',
-                //   path: '/Workload/Containerized',
-                //   component: './Workload/Containerized',
-                // },
-                // {
-                //   name: 'Detail',
-                //   icon: 'smile',
-                //   path: '/Workload/Detail',
-                //   component: './Workload/Detail',
-                //   hideInMenu: true,
-                // },
                 {
                   name: 'WorkloadItem',
                   icon: 'smile',
@@ -109,25 +86,6 @@ export default defineConfig({
               name: 'Traits',
               icon: 'table',
               routes: [
-                // {
-                //   name: 'Scale',
-                //   icon: 'table',
-                //   path: '/Traits/Scale',
-                //   component: './Traits/Scale',
-                // },
-                // {
-                //   name: 'Rollout',
-                //   icon: 'smile',
-                //   path: '/Traits/Rollout',
-                //   component: './Traits/Rollout',
-                // },
-                // {
-                //   name: 'Detail',
-                //   icon: 'smile',
-                //   path: '/Traits/Detail',
-                //   component: './Traits/Detail',
-                //   hideInMenu: true,
-                // },
                 {
                   name: 'TraitItem',
                   icon: 'smile',
@@ -136,12 +94,6 @@ export default defineConfig({
                 },
               ],
             },
-            // {
-            //   name: 'Release',
-            //   icon: 'table',
-            //   path: '/Release',
-            //   component: './Release',
-            // },
             {
               name: 'Capability',
               icon: 'table',
@@ -183,8 +135,13 @@ export default defineConfig({
   ],
   // Theme for antd: https://ant.design/docs/react/customize-theme-cn
   theme: {
-    // ...darkTheme,
+    // 主题配置
     'primary-color': defaultSettings.primaryColor,
+    'link-color': defaultSettings.linkColor,
+    'link-hover-color': defaultSettings.linkHoverColor,
+    'disabled-bg': defaultSettings.disabledBg,
+    'disabled-color': defaultSettings.disabledColor,
+    'btn-disable-color': defaultSettings.btnDisableColor,
   },
   // @ts-ignore
   title: false,
diff --git a/dashboard/config/defaultSettings.js b/dashboard/config/defaultSettings.js
index 82914b6ea..5c9f559c9 100644
--- a/dashboard/config/defaultSettings.js
+++ b/dashboard/config/defaultSettings.js
@@ -1,14 +1,19 @@
 const proSettings = {
   navTheme: 'dark',
-  // 拂晓蓝
-  primaryColor: '#1890ff',
+  // 主题颜色配置
+  primaryColor: '#1B58F4', // 全局主色
+  linkColor: '#1B58F4', // 链接色
+  linkHoverColor: '#1B58F4',
+  disabledBg: '#EBEBEB', // 失效背景色,
+  disabledColor: '#BEBEBE', // 失效文本色,
+  btnDisableColor: '#A4A4A4', // 禁用btn文字颜色
   layout: 'side',
   contentWidth: 'Fluid',
   fixedHeader: false,
   fixSiderbar: true,
   colorWeak: false,
   menu: {
-    locale: true,
+    locale: false,
   },
   title: 'Micro App Engine',
   pwa: false,
diff --git a/dashboard/config/proxy.js b/dashboard/config/proxy.js
index a34c90336..a21e760c9 100644
--- a/dashboard/config/proxy.js
+++ b/dashboard/config/proxy.js
@@ -8,11 +8,8 @@
 export default {
   dev: {
     '/api': {
-      target: 'http://123.56.222.218:8081/',
+      target: 'http://30.11.171.17:38081/',
       changeOrigin: true,
-      // pathRewrite: {
-      //   "^/api": "",
-      // },
     },
   },
   test: {
diff --git a/dashboard/src/components/AttachOneTrait/index.jsx b/dashboard/src/components/AttachOneTrait/index.jsx
index 1eec51916..026bdeb1a 100644
--- a/dashboard/src/components/AttachOneTrait/index.jsx
+++ b/dashboard/src/components/AttachOneTrait/index.jsx
@@ -102,7 +102,7 @@ export default class CreateTraitItem extends React.PureComponent {
         <div className="relativeBox">
           {this.state.parameters ? (
             this.state.parameters.map((item) => {
-              return (
+              return item.type === 4 ? (
                 <Form.Item
                   name={item.name}
                   label={item.name}
@@ -112,6 +112,22 @@ export default class CreateTraitItem extends React.PureComponent {
                       required: item.required || false,
                       message: `Please input ${item.name} !`,
                     },
+                    { pattern: /^[0-9]*$/, message: `${item.name} only use digits(0-9).` },
+                  ]}
+                >
+                  <Input />
+                </Form.Item>
+              ) : (
+                <Form.Item
+                  name={item.name}
+                  label={item.name}
+                  key={item.name}
+                  rules={[
+                    {
+                      required: item.required || false,
+                      message: `Please input ${item.name} !`,
+                    },
+                    { pattern: /^[^\s]*$/, message: 'Spaces are not allowed!' },
                   ]}
                 >
                   <Input />
diff --git a/dashboard/src/components/GlobalHeader/WorkSpaceDropDown.jsx b/dashboard/src/components/GlobalHeader/WorkSpaceDropDown.jsx
index 21fd7df1f..341d63650 100644
--- a/dashboard/src/components/GlobalHeader/WorkSpaceDropDown.jsx
+++ b/dashboard/src/components/GlobalHeader/WorkSpaceDropDown.jsx
@@ -19,22 +19,19 @@ export default class WorkSpaceDropDown extends React.Component {
       type: 'envs/getEnvs',
     });
     if (envs) {
-      const result = envs.find((env) => {
+      const { envName, namespace } = envs.find((env) => {
         return env.current === '*';
       });
-      if (result) {
-        const { name, namespace } = result;
-        this.setState({
-          workSpaceName: name,
-          namespace,
-        });
-        this.props.dispatch({
-          type: 'globalData/currentEnv',
-          payload: {
-            currentEnv: name,
-          },
-        });
-      }
+      this.setState({
+        workSpaceName: envName,
+        namespace,
+      });
+      this.props.dispatch({
+        type: 'globalData/currentEnv',
+        payload: {
+          currentEnv: envName,
+        },
+      });
     }
   }
 
@@ -76,9 +73,9 @@ export default class WorkSpaceDropDown extends React.Component {
         {envs.envs &&
           envs.envs.map((item) => {
             return (
-              <Menu.Item key={item.name} title={item.namespace}>
+              <Menu.Item key={item.envName} title={item.namespace}>
                 <div className="box">
-                  <div className="box1">{item.name}</div>
+                  <div className="box1">{item.envName}</div>
                   <div className="box2">{item.namespace}</div>
                 </div>
               </Menu.Item>
diff --git a/dashboard/src/components/Trait/index.jsx b/dashboard/src/components/Trait/index.jsx
index eaf2a0d69..2ae22e855 100644
--- a/dashboard/src/components/Trait/index.jsx
+++ b/dashboard/src/components/Trait/index.jsx
@@ -105,23 +105,6 @@ class Trait extends React.Component {
         }
       }
     }
-    // const { selectValue } = this.state;
-    // if (selectValue) {
-    //   this.setState({
-    //     visible: false,
-    //   });
-    //   const { history } = this.props.propsObj;
-    //   history.push({
-    //     pathname: '/ApplicationList/ApplicationListDetail',
-    //     state: {
-    //       appName: selectValue,
-    //       envName: this.props.currentEnv,
-    //       traitType: this.props.propsObj.title,
-    //     },
-    //   });
-    // } else {
-    //   message.warn('please select a application');
-    // }
   };
 
   handleCancel = () => {
@@ -263,7 +246,7 @@ class Trait extends React.Component {
                     <Form.Item label="Properties" />
                     {settings ? (
                       settings.map((item) => {
-                        return (
+                        return item.type === 4 ? (
                           <Form.Item
                             name={item.name}
                             label={item.name}
@@ -273,6 +256,25 @@ class Trait extends React.Component {
                                 required: item.required || false,
                                 message: `Please input ${item.name} !`,
                               },
+                              {
+                                pattern: /^[0-9]*$/,
+                                message: `${item.name} only use digits(0-9).`,
+                              },
+                            ]}
+                          >
+                            <Input />
+                          </Form.Item>
+                        ) : (
+                          <Form.Item
+                            name={item.name}
+                            label={item.name}
+                            key={item.name}
+                            rules={[
+                              {
+                                required: item.required || false,
+                                message: `Please input ${item.name} !`,
+                              },
+                              { pattern: /^[^\s]*$/, message: 'Spaces are not allowed!' },
                             ]}
                           >
                             <Input />
diff --git a/dashboard/src/components/Workload/index.jsx b/dashboard/src/components/Workload/index.jsx
index 5bab78694..7a42692e7 100644
--- a/dashboard/src/components/Workload/index.jsx
+++ b/dashboard/src/components/Workload/index.jsx
@@ -6,16 +6,7 @@ import './index.less';
 
 export default class Workload extends React.PureComponent {
   render() {
-    const {
-      btnValue,
-      pathname,
-      title,
-      crdInfo,
-      state,
-      settings,
-      hrefAddress,
-      btnIsShow,
-    } = this.props.propsObj;
+    const { btnValue, pathname, title, crdInfo, state, settings, btnIsShow } = this.props.propsObj;
     return (
       <div>
         <div className="breadCrumb">
@@ -31,7 +22,6 @@ export default class Workload extends React.PureComponent {
           <Row>
             <Col span="11">
               <div className="deployment">
-                <a href={hrefAddress}>?</a>
                 <Row>
                   <Col span="22">
                     <p className="title">{title}</p>
diff --git a/dashboard/src/e2e/baseLayout.e2e.js b/dashboard/src/e2e/baseLayout.e2e.js
index 8356d4c52..09fdb8197 100644
--- a/dashboard/src/e2e/baseLayout.e2e.js
+++ b/dashboard/src/e2e/baseLayout.e2e.js
@@ -29,13 +29,6 @@ beforeEach(async () => {
 describe('Ant Design Pro E2E test', () => {
   const testPage = (path) => async () => {
     await page.goto(`${BASE_URL}${path}`);
-    // await page.waitForSelector('footer', {
-    //   timeout: 2000,
-    // });
-    // const haveFooter = await page.evaluate(
-    //   () => document.getElementsByTagName('footer').length > 0,
-    // );
-    // expect(haveFooter).toBeTruthy();
   };
 
   const routers = formatter(RouterConfig);
@@ -46,12 +39,5 @@ describe('Ant Design Pro E2E test', () => {
   it('topmenu should have footer', async () => {
     const params = '?navTheme=light&layout=topmenu';
     await page.goto(`${BASE_URL}${params}`);
-    // await page.waitForSelector('footer', {
-    //   timeout: 2000,
-    // });
-    // const haveFooter = await page.evaluate(
-    //   () => document.getElementsByTagName('footer').length > 0,
-    // );
-    // expect(haveFooter).toBeTruthy();
   });
 });
diff --git a/dashboard/src/global.less b/dashboard/src/global.less
index ff5fcff8b..0e03130a9 100644
--- a/dashboard/src/global.less
+++ b/dashboard/src/global.less
@@ -82,3 +82,6 @@ ol {
   padding: 12px 24px;
   background: #fff;
 }
+.ant-breadcrumb a:hover {
+  color: #1b58f4 !important;
+}
diff --git a/dashboard/src/layouts/BasicLayout.jsx b/dashboard/src/layouts/BasicLayout.jsx
index 7e3bc31bf..fdafe8ad3 100644
--- a/dashboard/src/layouts/BasicLayout.jsx
+++ b/dashboard/src/layouts/BasicLayout.jsx
@@ -4,7 +4,7 @@
  * https://github.com/ant-design/ant-design-pro-layout
  */
 import ProLayout from '@ant-design/pro-layout';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link, useIntl, connect, history } from 'umi';
 import RightContent from '@/components/GlobalHeader/RightContent';
 import {
@@ -16,15 +16,6 @@ import {
 } from '@ant-design/icons';
 import _ from 'lodash';
 
-// const menuDataRender = (menuList) => {
-//   return menuList.map((item) => {
-//     const localItem = {
-//       ...item,
-//       children: item.children ? menuDataRender(item.children) : undefined,
-//     };
-//     return localItem;
-//   });
-// };
 const AddIcon = (menuData) => {
   return menuData.map((item) => {
     const name = _.get(item, 'name', '');
@@ -52,18 +43,37 @@ const AddIcon = (menuData) => {
 
 const BasicLayout = (props) => {
   const { settings, dispatch, menus } = props;
+  const [currentSelectKeys, setCurrentSelectedKeys] = useState('');
+  const getCurrentSelectKeys = () => {
+    const pathnameCur = props.history.location.pathname;
+    if (pathnameCur) {
+      if (pathnameCur.includes('Application')) {
+        setCurrentSelectedKeys(['applist']);
+      } else if (pathnameCur.includes('Capability')) {
+        setCurrentSelectedKeys(['Capability']);
+      } else if (pathnameCur.includes('System/Env')) {
+        setCurrentSelectedKeys(['Env']);
+      } else if (pathnameCur.includes('Workload')) {
+        const arr = pathnameCur.split('/');
+        const key = arr[arr.length - 1];
+        setCurrentSelectedKeys([key]);
+      } else if (pathnameCur.includes('Traits')) {
+        const arr = pathnameCur.split('/');
+        const key = arr[arr.length - 1];
+        setCurrentSelectedKeys([key]);
+      }
+    }
+  };
   useEffect(() => {
     if (dispatch) {
-      // dispatch({
-      //     type: 'user/fetchCurrent',
-      // });
-      // dispatch({
-      //     type: 'settings/getSetting',
-      // });
       dispatch({
         type: 'menus/getMenuData',
       });
     }
+    props.history.listen((route) => {
+      getCurrentSelectKeys(route.pathname);
+    });
+    // setCurrentSelectedKeys('applist')
   }, []);
 
   const { formatMessage } = useIntl();
@@ -75,9 +85,19 @@ const BasicLayout = (props) => {
         if (menuItemProps.isUrl || !menuItemProps.path) {
           return defaultDom;
         }
-
-        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
+        // return <Link to={menuItemProps.path}>{defaultDom}</Link>;
+        return (
+          <div
+            onClick={() => {
+              setCurrentSelectedKeys([menuItemProps.key]);
+              history.push(menuItemProps.path);
+            }}
+          >
+            {defaultDom}
+          </div>
+        );
       }}
+      selectedKeys={currentSelectKeys}
       breadcrumbRender={(routers = []) => [
         {
           path: '/',
diff --git a/dashboard/src/models/application.js b/dashboard/src/models/application.js
index d5aedaf2c..40e4d68cc 100644
--- a/dashboard/src/models/application.js
+++ b/dashboard/src/models/application.js
@@ -2,17 +2,15 @@ import { getapplist, createApp, getAppDetail, deleteApp } from '@/services/appli
 
 const TestModel = {
   namespace: 'applist',
-  state: {
-    // initailState: '8880'
-  },
+  state: {},
   effects: {
     *getList({ payload }, { call, put }) {
       const res = yield call(getapplist, payload);
       // getlist是引入services层那个js文件的getlist方法，payload是后台要求传递的参数，res就是后台返过来的数据
       yield put({
-        type: 'addList', // 这就是reducer的addNum方法，put用来触发reducer中的方法，payload是传过去的参数。同时也能触发同等级effects中的方法
+        type: 'addList',
         payload: {
-          returnObj: res, // 把后台返回的数据赋值给num,假如哪个reducer中的方法是由这里effects去触发的，哪个num名必须是这里的名字num，如果reducer中的方法不是这触发，那名字可以随意取
+          returnObj: res,
         },
       });
     },
diff --git a/dashboard/src/models/capability.js b/dashboard/src/models/capability.js
index 61e0f3127..0a361d111 100644
--- a/dashboard/src/models/capability.js
+++ b/dashboard/src/models/capability.js
@@ -10,9 +10,7 @@ import {
 
 const TestModel = {
   namespace: 'capability',
-  state: {
-    // initailState: '8880'
-  },
+  state: {},
   effects: {
     *getCapabilityCenterlist({ payload }, { call }) {
       const res = yield call(getCapabilityCenterlist, payload);
diff --git a/dashboard/src/models/env.js b/dashboard/src/models/env.js
index 9753deac4..889e3d6d0 100644
--- a/dashboard/src/models/env.js
+++ b/dashboard/src/models/env.js
@@ -1,4 +1,4 @@
-import { getEnvs, switchEnv, initialEnvs, deleteEnv } from '@/services/env';
+import { getEnvs, switchEnv, initialEnvs, deleteEnv, updateEnv } from '@/services/env';
 
 const TestModel = {
   namespace: 'envs',
@@ -36,6 +36,15 @@ const TestModel = {
       });
       return res;
     },
+    *updateEnv({ payload }, { call, put }) {
+      yield call(updateEnv, payload);
+      const res = yield call(getEnvs);
+      yield put({
+        type: 'onGetEnvsSuccess',
+        payload: res,
+      });
+      return res;
+    },
   },
   reducers: {
     onGetEnvsSuccess(state, { payload }) {
diff --git a/dashboard/src/models/global.js b/dashboard/src/models/global.js
index 74cf45565..59fc0585b 100644
--- a/dashboard/src/models/global.js
+++ b/dashboard/src/models/global.js
@@ -6,7 +6,7 @@ const globalModel = {
   effects: {
     *currentEnv({ payload }, { put }) {
       yield put({
-        type: 'setCurrentEnv', // 这就是reducer的addNum方法，put用来触发reducer中的方法，payload是传过去的参数。同时也能触发同等级effects中的方法
+        type: 'setCurrentEnv',
         payload,
       });
     },
diff --git a/dashboard/src/models/menu.js b/dashboard/src/models/menu.js
index 46b731758..887931c2a 100644
--- a/dashboard/src/models/menu.js
+++ b/dashboard/src/models/menu.js
@@ -1,36 +1,31 @@
-import { capabilityList } from '@/services/capability.js';
+import { getTraits } from '@/services/trait.js';
+import { getWorkload } from '@/services/workload.js';
 
-function getMenuList(response) {
+function getMenuList(workload, trait) {
   let workloadList = [];
   let traitList = [];
-  // eslint-disable-next-line no-param-reassign
-  response = response.filter((item) => {
-    return item.status === 'installed';
-  });
-  response.forEach((item) => {
-    if (item.type === 'workload') {
-      workloadList.push(item.name);
-    } else if (item.type === 'trait') {
-      traitList.push(item.name);
-    }
-  });
-  // 在此之前要对workloadList和traitList进行一次去重操作
-  workloadList = workloadList.map((item) => {
-    // eslint-disable-next-line no-param-reassign
-    item = item.charAt(0).toUpperCase() + item.slice(1);
-    return {
-      name: item,
-      path: `/Workload/${item}`,
-    };
-  });
-  traitList = traitList.map((item) => {
-    // eslint-disable-next-line no-param-reassign
-    item = item.charAt(0).toUpperCase() + item.slice(1);
-    return {
-      name: item,
-      path: `/Traits/${item}`,
-    };
-  });
+  if (workload) {
+    workloadList = workload.map((item) => {
+      let name1 = item.name;
+      name1 = name1.charAt(0).toUpperCase() + name1.slice(1);
+      return {
+        name: name1,
+        path: `/Workload/${name1}`,
+        key: name1,
+      };
+    });
+  }
+  if (trait) {
+    traitList = trait.map((item) => {
+      let name1 = item.name;
+      name1 = name1.charAt(0).toUpperCase() + name1.slice(1);
+      return {
+        name: name1,
+        path: `/Traits/${name1}`,
+        key: name1,
+      };
+    });
+  }
   // 只是动态生成侧边栏(name,path,icon)，路由还是config.js里面配置的路由
   const menuList = [
     {
@@ -41,6 +36,7 @@ function getMenuList(response) {
       name: 'ApplicationList',
       icon: 'Table',
       path: `/ApplicationList`,
+      key: 'applist',
     },
     {
       name: 'ApplicationList.ApplicationListDetail',
@@ -76,13 +72,10 @@ function getMenuList(response) {
         },
       ],
     },
-    // {
-    //   name: 'Release',
-    //   path: '/Release',
-    // },
     {
       name: 'Capability',
       path: '/Capability',
+      key: 'Capability',
     },
     {
       path: '/System',
@@ -91,6 +84,7 @@ function getMenuList(response) {
         {
           name: 'Env',
           path: '/System/Env',
+          key: 'Env',
         },
       ],
     },
@@ -110,8 +104,9 @@ const TestModel = {
   },
   effects: {
     *getMenuData({ payload }, { call, put }) {
-      let response = yield call(capabilityList, payload);
-      response = getMenuList(response);
+      const workloadList = yield call(getWorkload, payload);
+      const traitList = yield call(getTraits, payload);
+      const response = getMenuList(workloadList, traitList);
       yield put({
         type: 'saveMenuData',
         payload: response,
diff --git a/dashboard/src/models/trait.js b/dashboard/src/models/trait.js
index e8ce12321..d02b2792e 100644
--- a/dashboard/src/models/trait.js
+++ b/dashboard/src/models/trait.js
@@ -2,9 +2,7 @@ import { getTraitByName, getTraits, attachOneTraits, deleteOneTrait } from '@/se
 
 const TestModel = {
   namespace: 'trait',
-  state: {
-    // initailState: '8880'
-  },
+  state: {},
   effects: {
     *getTraitByName({ payload }, { call }) {
       const res = yield call(getTraitByName, payload);
diff --git a/dashboard/src/models/workload.js b/dashboard/src/models/workload.js
index 22390aa6a..1a00bcf34 100644
--- a/dashboard/src/models/workload.js
+++ b/dashboard/src/models/workload.js
@@ -2,9 +2,7 @@ import { createWorkload, getWorkload, getWorkloadByName } from '@/services/workl
 
 const TestModel = {
   namespace: 'workload',
-  state: {
-    // initailState: '8880'
-  },
+  state: {},
   effects: {
     *createWorkload({ payload }, { call }) {
       const res = yield call(createWorkload, payload);
diff --git a/dashboard/src/pages/ApplicationList/ApplicationListDetail/Topology.jsx b/dashboard/src/pages/ApplicationList/ApplicationListDetail/Topology.jsx
index b686d5a57..aff61e680 100644
--- a/dashboard/src/pages/ApplicationList/ApplicationListDetail/Topology.jsx
+++ b/dashboard/src/pages/ApplicationList/ApplicationListDetail/Topology.jsx
@@ -43,8 +43,6 @@ const Topology = () => {
     ],
   };
 
-  // const width = document.getElementById('container').scrollWidth;
-  // const height = document.getElementById('container').scrollHeight || 500;
   const width = 1000;
   const height = 400;
 
diff --git a/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.jsx b/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.jsx
index bc0aa9c50..0d7c6860e 100644
--- a/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.jsx
+++ b/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.jsx
@@ -17,7 +17,6 @@ import { connect } from 'dva';
 import _ from 'lodash';
 import { Link } from 'umi';
 import CreateTraitItem from '../../../components/AttachOneTrait/index.jsx';
-// import Topology from './Topology.jsx';
 
 const { TabPane } = Tabs;
 
@@ -66,18 +65,18 @@ class TableList extends React.Component {
       const traits = await this.props.dispatch({
         type: 'trait/getTraits',
       });
-      this.setState({
-        traitList: traits,
-      });
+      if (traits) {
+        this.setState({
+          traitList: traits,
+        });
+      }
       const workloadType = _.get(res, 'Workload.workload.kind', '');
       if (workloadType && workloadType === 'ContainerizedWorkload') {
         this.getAcceptTrait('containerized');
       } else if (workloadType && workloadType === 'Deployment') {
         this.getAcceptTrait('deployment');
       }
-      // 如果traitType存在，是从特定trait跳转来新增单个trait的
       if (traitType && times === 1) {
-        // this.createTrait(traitType)
         await this.setState({
           visible: true,
         });
@@ -100,7 +99,7 @@ class TableList extends React.Component {
 
   deleteApp = async (e) => {
     e.stopPropagation();
-    const { currentEnv: envName } = this.props;
+    const { envName } = this.state;
     const { appDetailData } = this.state;
     const appName = _.get(appDetailData, 'Workload.workload.metadata.name', '');
     if (appName && envName) {
@@ -200,27 +199,8 @@ class TableList extends React.Component {
 
   gotoWorkloadDetail = (e) => {
     e.stopPropagation();
-    // const appName = _.get(this.props, 'location.state.appName', '');
-    // const envName = _.get(this.props, 'location.state.envName', '');
-    // if (appName && envName) {
-    //   this.props.history.push({
-    //     pathname: '/ApplicationList/WorkloadDetail',
-    //     state: { appName, envName },
-    //   });
-    // }
   };
 
-  // gotoTraitDetail = (e, traitItem) => {
-  //   e.stopPropagation();
-  //   const appName = _.get(this.props, 'location.state.appName', '');
-  //   const envName = _.get(this.props, 'location.state.envName', '');
-  //   if (appName && envName) {
-  //     this.props.history.push({
-  //       pathname: '/ApplicationList/TraitDetail',
-  //       state: { traitItem, appName, envName },
-  //     });
-  //   }
-  // };
   gotoTraitDetail = (e) => {
     e.stopPropagation();
   };
@@ -230,11 +210,6 @@ class TableList extends React.Component {
     const Workload = _.get(this.state.appDetailData, 'Workload.workload', {});
     const Traits = _.get(this.state.appDetailData, 'Traits', []);
     let containers = {};
-    // if (Workload.kind === 'ContainerizedWorkload') {
-    //   containers = _.get(Workload, 'spec.containers[0]', {});
-    // } else if (Workload.kind === 'Deployment') {
-    //   containers = _.get(Workload, 'spec.template.spec.containers[0]', {});
-    // }
     containers = _.get(Workload, 'spec.containers[0]', {});
     let { loadingAll } = this.props;
     loadingAll = loadingAll || false;
@@ -272,14 +247,12 @@ class TableList extends React.Component {
                         onClick={(e) => this.gotoWorkloadDetail(e)}
                         style={{ background: colorObj[status] || '#1890ff' }}
                       >
-                        {/* <div className="summaryBox1"> */}
                         <Row>
                           <Col span="22">
                             <p className="title">{Workload.kind}</p>
                             <p>{Workload.apiVersion}</p>
                           </Col>
                           <Col span="2">
-                            {/* <a href="JavaScript:;">?</a> */}
                             <p className="title hasCursor" onClick={this.hrefClick}>
                               ?
                             </p>
@@ -305,6 +278,18 @@ class TableList extends React.Component {
                               // eslint-disable-next-line no-else-return
                             } else if (currentKey === 'name') {
                               return <Fragment key={currentKey} />;
+                              // eslint-disable-next-line no-else-return
+                            } else if (currentKey === 'env') {
+                              return (
+                                <Fragment key={currentKey}>
+                                  <Col span="8">
+                                    <p>env</p>
+                                  </Col>
+                                  <Col span="16">
+                                    <p>{_.get(containers[currentKey], '[0].value', '')}</p>
+                                  </Col>
+                                </Fragment>
+                              );
                             }
                             return (
                               <Fragment key={currentKey}>
@@ -425,18 +410,6 @@ class TableList extends React.Component {
                                     );
                                   })
                                 )}
-                                {/* {Object.keys(spec).map((currentKey) => {
-                                  return (
-                                    <Fragment key={currentKey}>
-                                      <Col span="8">
-                                        <p>{currentKey}</p>
-                                      </Col>
-                                      <Col span="16">
-                                        <p>{spec[currentKey]}</p>
-                                      </Col>
-                                    </Fragment>
-                                  );
-                                })} */}
                               </Row>
                               <div style={{ clear: 'both', height: '32px' }}>
                                 <Popconfirm
@@ -480,7 +453,6 @@ class TableList extends React.Component {
                 </TabPane>
                 <TabPane tab="Topology" key="2">
                   <p>Topology</p>
-                  {/* <Topology /> */}
                 </TabPane>
               </Tabs>
             </div>
diff --git a/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.less b/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.less
index dd9188dd2..102224fe1 100644
--- a/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.less
+++ b/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.less
@@ -19,7 +19,6 @@
       font-weight: 500;
       font-size: 16px;
       line-height: 36px;
-      // color: #fff;
     }
     p {
       margin: 0;
diff --git a/dashboard/src/pages/ApplicationList/CreateApplication/index.jsx b/dashboard/src/pages/ApplicationList/CreateApplication/index.jsx
index ce83926f9..46b02595d 100644
--- a/dashboard/src/pages/ApplicationList/CreateApplication/index.jsx
+++ b/dashboard/src/pages/ApplicationList/CreateApplication/index.jsx
@@ -73,12 +73,8 @@ class TableList extends React.Component {
     this.setState({
       traitList: traits,
     });
-    // 如果直接跳转到第二步，需要设置值
     const traitType = _.get(this.props, 'location.state.TraitType', '');
     if (traitType) {
-      // let availableTraitList = traits.filter((item)=>{
-      //   return item.name === traitType
-      // })
       this.setState({
         availableTraitList: traits,
         traitNum: [
@@ -168,7 +164,11 @@ class TableList extends React.Component {
   };
 
   createApp = async () => {
-    const { step1SubmitObj, traitNum } = this.state;
+    const { traitNum } = this.state;
+    const { step1SubmitObj } = this.state;
+    if (step1SubmitObj.env_name !== this.props.currentEnv) {
+      step1SubmitObj.env_name = this.props.currentEnv;
+    }
     const submitObj = _.cloneDeep(step1SubmitObj);
     const { workload_name: workloadName } = step1SubmitObj;
     submitObj.flags.push({
@@ -294,9 +294,6 @@ class TableList extends React.Component {
     this.state.traitNum = this.state.traitNum.filter((item) => {
       return item.uniq !== uniq;
     });
-    // this.setState(()=>({
-    //   traitNum: this.state.traitNum
-    // }));
     this.setState((prev) => ({
       traitNum: prev.traitNum,
     }));
@@ -325,6 +322,11 @@ class TableList extends React.Component {
                   name="workload_name"
                   label="Name"
                   rules={[
+                    {
+                      pattern: /^[a-z0-9-_]+$/,
+                      message:
+                        'Names can only use digits(0-9),lowercase letters(a-z),and dashes(-),Underline.',
+                    },
                     {
                       required: true,
                       message: 'Please input name!',
@@ -373,7 +375,7 @@ class TableList extends React.Component {
                     if (item.name === 'name') {
                       return <Fragment key={item.name} />;
                     }
-                    return (
+                    return item.type === 4 ? (
                       <Form.Item
                         name={item.name}
                         label={item.name}
@@ -383,6 +385,22 @@ class TableList extends React.Component {
                             required: item.required,
                             message: `Please input ${item.name}!`,
                           },
+                          { pattern: /^[0-9]*$/, message: `${item.name} only use digits(0-9).` },
+                        ]}
+                      >
+                        <Input />
+                      </Form.Item>
+                    ) : (
+                      <Form.Item
+                        name={item.name}
+                        label={item.name}
+                        key={item.name}
+                        rules={[
+                          {
+                            required: item.required,
+                            message: `Please input ${item.name}!`,
+                          },
+                          { pattern: /^[^\s]*$/, message: 'Spaces are not allowed!' },
                         ]}
                       >
                         <Input />
@@ -556,11 +574,6 @@ class TableList extends React.Component {
             </Row>
           </div>
           <div className="buttonBox">
-            {/* <Link to="/ApplicationList">
-              <Button type="primary" className="floatRight">
-                Confirm
-              </Button>
-            </Link> */}
             <Button
               type="primary"
               className="floatRight"
diff --git a/dashboard/src/pages/ApplicationList/CreateApplication/index.less b/dashboard/src/pages/ApplicationList/CreateApplication/index.less
index 7475466aa..9140cc13d 100644
--- a/dashboard/src/pages/ApplicationList/CreateApplication/index.less
+++ b/dashboard/src/pages/ApplicationList/CreateApplication/index.less
@@ -27,7 +27,6 @@
   }
   .relativeBox {
     position: relative;
-    // border: 1px solid #eee;
     padding: 0 48px 0 16px;
     .hasMore {
       position: absolute;
diff --git a/dashboard/src/pages/ApplicationList/createTrait/index.jsx b/dashboard/src/pages/ApplicationList/createTrait/index.jsx
index 5eb334573..e4298c5ba 100644
--- a/dashboard/src/pages/ApplicationList/createTrait/index.jsx
+++ b/dashboard/src/pages/ApplicationList/createTrait/index.jsx
@@ -102,10 +102,9 @@ export default class CreateTraitItem extends React.PureComponent {
             <Form.Item label="Properties" />
           </div>
           <div className="relativeBox">
-            {/* <p className="hasMore">?</p> */}
             {this.state.parameters ? (
               this.state.parameters.map((item) => {
-                return (
+                return item.type === 4 ? (
                   <Form.Item
                     name={item.name}
                     label={item.name}
@@ -115,6 +114,22 @@ export default class CreateTraitItem extends React.PureComponent {
                         required: item.required || false,
                         message: `Please input ${item.name} !`,
                       },
+                      { pattern: /^[0-9]*$/, message: `${item.name} only use digits(0-9).` },
+                    ]}
+                  >
+                    <Input />
+                  </Form.Item>
+                ) : (
+                  <Form.Item
+                    name={item.name}
+                    label={item.name}
+                    key={item.name}
+                    rules={[
+                      {
+                        required: item.required || false,
+                        message: `Please input ${item.name} !`,
+                      },
+                      { pattern: /^[^\s]*$/, message: 'Spaces are not allowed!' },
                     ]}
                   >
                     <Input />
diff --git a/dashboard/src/pages/ApplicationList/index.jsx b/dashboard/src/pages/ApplicationList/index.jsx
index be3e3894f..60dfabb0a 100644
--- a/dashboard/src/pages/ApplicationList/index.jsx
+++ b/dashboard/src/pages/ApplicationList/index.jsx
@@ -9,9 +9,6 @@ import { Link } from 'umi';
 
 @connect(({ loading, applist, globalData }) => ({
   loadingAll: loading.models.applist,
-  // 当applist这个models有数据请求行为的时候，loading为true，没有请求的时候为false
-  // loadingList: loading.effects['applist/getList'],
-  // 当applist的effects中的getList有异步请求行为时为true，没有请求行为时为false
   returnObj: applist.returnObj,
   currentEnv: globalData.currentEnv,
 }))
@@ -25,7 +22,7 @@ class TableList extends React.Component {
     const { currentEnv } = this.props;
     if (currentEnv) {
       this.props.dispatch({
-        type: 'applist/getList', // applist对应models层的命名空间namespace
+        type: 'applist/getList',
         payload: {
           url: `/api/envs/${currentEnv}/apps/`,
         },
@@ -38,26 +35,21 @@ class TableList extends React.Component {
       return true;
     }
     this.props.dispatch({
-      type: 'applist/getList', // applist对应models层的命名空间namespace
+      type: 'applist/getList',
       payload: {
         url: `/api/envs/${nextProps.currentEnv}/apps/`,
       },
     });
     return true;
-    // return true;
   }
 
-  onFinish = () => {
-    // const data = moment(values.createTime).format('YYYY-MM-DD')
-  };
+  onFinish = () => {};
 
   handleChange = () => {};
 
   handleAdd = () => {};
 
-  onSelect = () => {
-    // console.log("selected", selectedKeys, info);
-  };
+  onSelect = () => {};
 
   getHeight = (num) => {
     return `${num * 43}px`;
@@ -91,26 +83,6 @@ class TableList extends React.Component {
           <Spin spinning={loadingAll}>
             <div className="applist">
               <Form name="horizontal_login" layout="inline" onFinish={this.onFinish}>
-                {/* <Form.Item name="createTime">
-                  <DatePicker placeholder="createTime" />
-                </Form.Item>
-                <Form.Item name="status">
-                  <Select
-                    placeholder="status"
-                    style={{ width: 120 }}
-                    onChange={this.handleChange}
-                    allowClear
-                  >
-                    <Option value="True">True</Option>
-                    <Option value="False">False</Option>
-                    <Option value="UNKNOWN">UNKNOWN</Option>
-                  </Select>
-                </Form.Item>
-                <Form.Item>
-                  <Button icon={<SearchOutlined />} htmlType="submit">
-                    Search
-                  </Button>
-                </Form.Item> */}
                 <Form.Item>
                   <Link to="/ApplicationList/CreateApplication">
                     <Button onClick={this.handleAdd} type="primary" style={{ marginBottom: 16 }}>
diff --git a/dashboard/src/pages/ApplicationList/index.less b/dashboard/src/pages/ApplicationList/index.less
index e4ece8128..3b5e2bc62 100644
--- a/dashboard/src/pages/ApplicationList/index.less
+++ b/dashboard/src/pages/ApplicationList/index.less
@@ -27,7 +27,6 @@
     border-bottom: 1px solid black;
   }
   .hasPadding {
-    // padding: 10px;
     padding: 4px;
     color: #fff;
   }
@@ -36,12 +35,10 @@
   }
   .first1 {
     margin-left: 30px;
-    // background: #92c47c;
     background: #4caf51;
   }
   .first2 {
     margin-left: 30px;
-    // background: red;
     background: #f44337;
   }
   .first3 {
@@ -50,7 +47,6 @@
   }
   .other {
     margin-left: 50px;
-    // background: #ee9611;
     background: #ffc105;
   }
 }
diff --git a/dashboard/src/pages/Capability/Detail/index.jsx b/dashboard/src/pages/Capability/Detail/index.jsx
index 839001ecb..d3811cba9 100644
--- a/dashboard/src/pages/Capability/Detail/index.jsx
+++ b/dashboard/src/pages/Capability/Detail/index.jsx
@@ -1,15 +1,11 @@
 import React, { Fragment } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import { Space, Button, Row, Col, message, Spin, Breadcrumb } from 'antd';
-// import { Space, Modal, Button, Row, Col, message, Spin } from 'antd';
-// import { ExclamationCircleOutlined } from '@ant-design/icons';
 import { Link } from 'umi';
 import './index.less';
 import { connect } from 'dva';
 import _ from 'lodash';
 
-// const { confirm } = Modal;
-
 @connect(({ loading, globalData }) => ({
   loadingAll: loading.models.capability,
   currentEnv: globalData.currentEnv,
@@ -54,8 +50,7 @@ class TableList extends React.PureComponent {
   };
 
   gotoOtherPage = () => {
-    // window.location.href = 'https://github.com/oam-dev/catalog/blob/master/workloads/cloneset/README.md';
-    window.open('https://github.com/oam-dev/catalog/blob/master/workloads/cloneset/README.md');
+    // window.open('https://github.com/oam-dev/catalog/blob/master/workloads/cloneset/README.md');
   };
 
   installSignle = async (e, name) => {
@@ -70,25 +65,21 @@ class TableList extends React.PureComponent {
     });
     if (res) {
       message.success(res);
-      // this.getInitialData();
       window.location.reload();
     }
   };
 
   uninstallSignle = async (e, name) => {
     e.stopPropagation();
-    // const capabilityCenterName = _.get(this.props, 'location.state.name', '');
     if (name) {
       const res = await this.props.dispatch({
         type: 'capability/deleteOneCapability',
         payload: {
-          // capabilityCenterName,
           capabilityName: name,
         },
       });
       if (res) {
         message.success(res);
-        // this.getInitialData();
         window.location.reload();
       }
     }
@@ -105,7 +96,6 @@ class TableList extends React.PureComponent {
       });
       if (res) {
         message.success(res);
-        // this.getInitialData();
         window.location.reload();
       }
     }
@@ -113,48 +103,6 @@ class TableList extends React.PureComponent {
 
   showDeleteConfirm = () => {
     message.info('正在开发中...');
-    // // eslint-disable-next-line
-    // const _this = this;
-    // const capabilityCenterName = _.get(this.props, 'location.state.name', '');
-    // if (capabilityCenterName) {
-    //   confirm({
-    //     title: `Are you sure delete ${capabilityCenterName}?`,
-    //     icon: <ExclamationCircleOutlined />,
-    //     width: 500,
-    //     content: (
-    //       <div>
-    //         <p style={{ margin: '0px' }}>您本次移除 {capabilityCenterName}，将会删除的应用列表：</p>
-    //         <Space>
-    //           <span>abc</span>
-    //           <span>abc</span>
-    //           <span>abc</span>
-    //           <span>abc</span>
-    //         </Space>
-    //         <p style={{ margin: '0px' }}>
-    //           确认后，移除 {capabilityCenterName}，并且删除相应的应用？
-    //         </p>
-    //       </div>
-    //     ),
-    //     okText: 'Yes',
-    //     okType: 'danger',
-    //     cancelText: 'No',
-    //     async onOk() {
-    //       const res = await _this.props.dispatch({
-    //         type: 'capability/deleteCapability',
-    //         payload: {
-    //           capabilityName: capabilityCenterName,
-    //         },
-    //       });
-    //       if (res) {
-    //         message.success(res);
-    //         _this.props.history.push({ pathname: '/Capability' });
-    //       }
-    //     },
-    //     onCancel() {
-    //       // console.log('Cancel');
-    //     },
-    //   });
-    // }
   };
 
   render() {
@@ -194,10 +142,6 @@ class TableList extends React.PureComponent {
                     return (
                       <Col span="4" key={item.name}>
                         <div className="itemBox" onClick={this.gotoOtherPage}>
-                          {/* <img
-                            src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1109866916,1852667152&fm=26&gp=0.jpg"
-                            alt="workload"
-                          /> */}
                           <div className="title">{item.name.substr(0, 3).toUpperCase()}</div>
                           <p>{item.name}</p>
                           {item.status === 'installed' ? (
@@ -232,10 +176,6 @@ class TableList extends React.PureComponent {
                     return (
                       <Col span="4" key={item.name}>
                         <div className="itemBox" onClick={this.gotoOtherPage}>
-                          {/* <img
-                            src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1109866916,1852667152&fm=26&gp=0.jpg"
-                            alt="workload"
-                          /> */}
                           <div className="title">{item.name.substr(0, 3).toUpperCase()}</div>
                           <p>{item.name}</p>
                           {item.status === 'installed' ? (
diff --git a/dashboard/src/pages/Capability/Detail/index.less b/dashboard/src/pages/Capability/Detail/index.less
index c24bcde57..43932ef2f 100644
--- a/dashboard/src/pages/Capability/Detail/index.less
+++ b/dashboard/src/pages/Capability/Detail/index.less
@@ -4,7 +4,6 @@
   align-items: center;
   justify-content: center;
   margin: 10px 16px 10px 0;
-  // margin: 10px;
   padding: 10px 0;
   background-color: #fff;
   cursor: pointer;
diff --git a/dashboard/src/pages/Capability/index.jsx b/dashboard/src/pages/Capability/index.jsx
index 34cd27538..31e1a0001 100644
--- a/dashboard/src/pages/Capability/index.jsx
+++ b/dashboard/src/pages/Capability/index.jsx
@@ -7,7 +7,6 @@ import './index.less';
 import { connect } from 'dva';
 import _ from 'lodash';
 
-// const { confirm } = Modal;
 const { Column } = Table;
 
 const layout = {
@@ -85,13 +84,6 @@ class TableList extends React.PureComponent {
     }
   };
 
-  // handleTest = async () => {
-  //   await this.formRef.current.validateFields();
-  //   this.setState({
-  //     visible: false,
-  //   });
-  // };
-
   handleCancel = () => {
     this.setState({
       visible: false,
@@ -113,7 +105,6 @@ class TableList extends React.PureComponent {
       });
       if (res) {
         message.success(res);
-        // this.getInitialData();
       }
       const newList1 = _.cloneDeep(this.state.capabilityList);
       newList1[index].btnSyncLoading = false;
@@ -137,45 +128,6 @@ class TableList extends React.PureComponent {
 
   showDeleteConfirm = () => {
     message.info('正在开发中...');
-    // if (record) {
-    //   // eslint-disable-next-line
-    //   const _this = this;
-    //   confirm({
-    //     title: `Are you sure delete ${record}?`,
-    //     icon: <ExclamationCircleOutlined />,
-    //     width: 500,
-    //     content: (
-    //       <div>
-    //         <p>您本次移除 {record}，将会删除的应用列表：</p>
-    //         <Space>
-    //           <span>abc</span>
-    //           <span>abc</span>
-    //           <span>abc</span>
-    //           <span>abc</span>
-    //         </Space>
-    //         <p>确认后，移除{record}，并且删除相应的应用？</p>
-    //       </div>
-    //     ),
-    //     okText: 'Yes',
-    //     okType: 'danger',
-    //     cancelText: 'No',
-    //     async onOk() {
-    //       const res = await _this.props.dispatch({
-    //         type: 'capability/deleteCapability',
-    //         payload: {
-    //           capabilityName: record,
-    //         },
-    //       });
-    //       if (res) {
-    //         message.success(res);
-    //         _this.getInitialData();
-    //       }
-    //     },
-    //     onCancel() {
-    //       // console.log('Cancel');
-    //     },
-    //   });
-    // }
   };
 
   render() {
@@ -200,7 +152,6 @@ class TableList extends React.PureComponent {
                 <Button type="primary" onClick={this.showModal}>
                   Create
                 </Button>
-                {/* <Button type="default">Sync All</Button> */}
               </Space>
             </div>
             <Modal
@@ -209,9 +160,6 @@ class TableList extends React.PureComponent {
               onOk={this.handleOk}
               onCancel={this.handleCancel}
               footer={[
-                // <Button key="test" onClick={this.handleTest}>
-                //   Test
-                // </Button>,
                 <Button key="submit" type="primary" onClick={this.handleOk}>
                   Create
                 </Button>,
@@ -226,6 +174,11 @@ class TableList extends React.PureComponent {
                       required: true,
                       message: 'Please input name!',
                     },
+                    {
+                      pattern: new RegExp('^[0-9a-zA-Z_]{1,60}$', 'g'),
+                      message:
+                        'The maximum length is 60,should be combination of numbers,alphabets,underline!',
+                    },
                   ]}
                 >
                   <Input />
@@ -234,9 +187,7 @@ class TableList extends React.PureComponent {
                   name="Address"
                   label="URL"
                   rules={[
-                    // { pattern: '/^((https|http|ftp|rtsp|mms){0,1}(:\/\/){0,1})\.(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/',
-                    //   message: 'please input correct URL'
-                    // },
+                    { pattern: /^[^\s]*$/, message: 'Spaces are not allowed!' },
                     {
                       required: true,
                       message: 'Please input URL!',
diff --git a/dashboard/src/pages/System/Env/index.jsx b/dashboard/src/pages/System/Env/index.jsx
index 16683592a..7d4c6d716 100644
--- a/dashboard/src/pages/System/Env/index.jsx
+++ b/dashboard/src/pages/System/Env/index.jsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Button, Table, Space, Modal, Form, Input, Tooltip, Breadcrumb } from 'antd';
+import { Button, Table, Space, Modal, Form, Input, Tooltip } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
-import { Link } from 'umi';
 import './index.less';
 import { connect } from 'dva';
 import * as _ from 'lodash';
@@ -31,12 +30,22 @@ const TableList = (props) => {
 
   const handleOk = async () => {
     const fieldsValue = await form.validateFields();
-    await dispatch({
-      type: 'envs/initialEnvs',
-      payload: {
-        params: fieldsValue,
-      },
-    });
+    if (env && env.envName) {
+      await dispatch({
+        type: 'envs/updateEnv',
+        payload: {
+          namespace: fieldsValue.namespace,
+          envName: fieldsValue.envName,
+        },
+      });
+    } else {
+      await dispatch({
+        type: 'envs/initialEnvs',
+        payload: {
+          params: fieldsValue,
+        },
+      });
+    }
     setEnv(null);
     form.resetFields();
     setVisible(false);
@@ -52,14 +61,14 @@ const TableList = (props) => {
     await dispatch({
       type: 'envs/deleteEnv',
       payload: {
-        envName: record.name,
+        envName: record.envName,
       },
     });
   };
 
   const showDeleteConfirm = (record) => {
     confirm({
-      title: `Are you sure delete env ${record.name}?`,
+      title: `Are you sure delete env ${record.envName}?`,
       icon: <ExclamationCircleOutlined />,
       width: 500,
       okText: 'Yes',
@@ -73,7 +82,7 @@ const TableList = (props) => {
 
   const specifyNamespace = (record) => {
     form.setFieldsValue({
-      name: record.name,
+      envName: record.envName,
       namespace: record.namespace,
     });
     setEnv(record);
@@ -92,10 +101,10 @@ const TableList = (props) => {
   const columns = [
     {
       title: 'Env',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'envName',
+      key: 'envName',
       render: (text) => {
-        if (text.length > 20) {
+        if (text && text.length > 20) {
           return <Tooltip title={text}>{text.substr(0, 20)}...</Tooltip>;
         }
         return text;
@@ -106,7 +115,7 @@ const TableList = (props) => {
       dataIndex: 'namespace',
       key: 'namespace',
       render: (text) => {
-        if (text.length > 20) {
+        if (text && text.length > 20) {
           return <Tooltip title={text}>{text.substr(0, 20)}...</Tooltip>;
         }
         return text;
@@ -138,75 +147,65 @@ const TableList = (props) => {
     },
   ];
   return (
-    <div>
-      <div className="breadCrumb">
-        <Breadcrumb>
-          <Breadcrumb.Item>
-            <Link to="/ApplicationList">Home</Link>
-          </Breadcrumb.Item>
-          <Breadcrumb.Item>System</Breadcrumb.Item>
-          <Breadcrumb.Item>Env</Breadcrumb.Item>
-        </Breadcrumb>
+    <PageContainer>
+      <div style={{ marginBottom: '16px' }}>
+        <Space>
+          <Button type="primary" onClick={showModal}>
+            Create
+          </Button>
+        </Space>
       </div>
-      <PageContainer>
-        <div style={{ marginBottom: '16px' }}>
-          <Space>
-            <Button type="primary" onClick={showModal}>
-              Create
-            </Button>
-          </Space>
-        </div>
-        <Modal
-          getContainer={false}
-          title={env && env.name ? 'Update Env' : 'Create Env'}
-          visible={visible}
-          onOk={handleOk}
-          onCancel={handleCancel}
-          footer={[
-            <Button key="submit" type="primary" onClick={handleOk}>
-              {env && env.name ? 'Update' : 'Create'}
-            </Button>,
-          ]}
-        >
-          <Form {...layout} form={form} name="control-ref" labelAlign="left">
-            <Form.Item
-              name="name"
-              label="Env"
-              rules={[
-                {
-                  required: true,
-                  message: 'Please input Evn!',
-                },
-                {
-                  pattern: new RegExp('^[0-9a-zA-Z_]{1,32}$', 'g'),
-                  message: 'Should be combination of numbers,alphabets,underline',
-                },
-              ]}
-            >
-              <Input disabled={!!(env && env.name)} />
-            </Form.Item>
-            <Form.Item
-              name="namespace"
-              label="Namespace"
-              rules={[
-                {
-                  required: true,
-                  message: 'Please specify a Namespace!',
-                },
-                {
-                  pattern: new RegExp('^[0-9a-zA-Z_]{1,32}$', 'g'),
-                  message:
-                    'The maximum length is 63, should be combination of numbers,alphabets,underline',
-                },
-              ]}
-            >
-              <Input />
-            </Form.Item>
-          </Form>
-        </Modal>
-        <Table rowKey={(record) => record.name} columns={columns} dataSource={tableEnvs} />
-      </PageContainer>
-    </div>
+      <Modal
+        getContainer={false}
+        title={env && env.envName ? 'Update Env' : 'Create Env'}
+        visible={visible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        footer={[
+          <Button key="submit" type="primary" onClick={handleOk}>
+            {env && env.envName ? 'Update' : 'Create'}
+          </Button>,
+        ]}
+      >
+        <Form {...layout} form={form} name="control-ref" labelAlign="left">
+          <Form.Item
+            name="envName"
+            label="Env"
+            rules={[
+              {
+                required: true,
+                message: 'Please input Evn!',
+              },
+              {
+                pattern: new RegExp('^[0-9a-zA-Z_]{1,32}$', 'g'),
+                message:
+                  'The maximum length is 63,should be combination of numbers,alphabets,underline!',
+              },
+            ]}
+          >
+            <Input disabled={!!(env && env.envName)} />
+          </Form.Item>
+          <Form.Item
+            name="namespace"
+            label="Namespace"
+            rules={[
+              {
+                required: true,
+                message: 'Please specify a Namespace!',
+              },
+              {
+                pattern: new RegExp('^[0-9a-zA-Z_]{1,32}$', 'g'),
+                message:
+                  'The maximum length is 63,should be combination of numbers,alphabets,underline!',
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+      <Table rowKey={(record) => record.envName} columns={columns} dataSource={tableEnvs} />
+    </PageContainer>
   );
 };
 export default connect((env) => {
diff --git a/dashboard/src/pages/Traits/Detail/index.jsx b/dashboard/src/pages/Traits/Detail/index.jsx
index 678417c22..9ccfe9eac 100644
--- a/dashboard/src/pages/Traits/Detail/index.jsx
+++ b/dashboard/src/pages/Traits/Detail/index.jsx
@@ -127,13 +127,6 @@ const data1 = [
     LastTransition: '2d',
   },
 ];
-// const demoText = `H4sIAAAAAAAA/6xUwW7bOhD8lYc9U4lsWfazgB4C5Na0DZK0lyKHNbmyWVMkQ66UGob/vSBdt3GCxEXRmwjujmZnZrmFtbYKGrgkb9ymI8sgAL3+QiFqZ6EB9D6eDyMQ0BGjQkZotmCxI2hAOmcKDBtcrJCxGMrWfn+Ygsj30aNMRYpa7E0CloGQtbN3uqPI2HlobG+MAIMLMjEBo/cvcEGAW3wjyZH4LGh3JpHZ0Jl25yuMK2hgPkPV1lRJbKfjWVlNpqps69mkrNu2qv5X5UzV9ULVIOC4P1IYtHxzlOGXFEMJOwForeM8Rib8GjOdZD3Avz6Ae7QUiuWwhuYZtWEk/nuvrXp3+4cgpzw53f3SsePKjrLaHHpKSuTGG2opkJUUofm6Pc7O84FAHPL2e6ZTrPssZDWq5+O6GhVqPquLybyaF9gqKsbVTMpyXFZ1m8yVznJwxlCAJrEUsDBOrj8lopdkiDOvFk2k3f1OQPQkk4mRDEl2IX13yHJ1dSqQx6nYCWDqvEGmDPFkU/4+8/86qUbbNQWVw2lTFKABsrgwpN52+olQSWDUlsLe7VPm6Q6XlPdABspPS1imTihWcC8gUHR9yNHZQqCHniLnb+l7aKAuu/zsdC5soIHp5IPOZDLqdW/MtTNapqsL84ibCLt7cVi5Cyldb/njCYLYs+tS4e1R251bkz1EaK/Rz4IrbdfxEKEkDAdkWm4Sa9749LMbZ4y2y89epTgICEfnZrvb9yH3MZ9+BAAA//+bxjCThQUAAA
-//   objectset.rio.cattle.io/id	service
-//   objectset.rio.cattle.io/owner-gvk	rio.cattle.io/v1, Kind=Service
-//   objectset.rio.cattle.io/owner-name	cool-aryabhata-v0fnxq6
-//   objectset.rio.cattle.io/owner-namespace	default
-//   rio.cattle.io/mesh	true
-//   Controlled By	cool-aryabhata-v0fnxq6`;
 
 @connect(({ loading, globalData }) => ({
   loadingAll: loading.models.applist,
@@ -211,16 +204,6 @@ class TableList extends React.Component {
 
   render() {
     const { hasShowEdit, hasShowEdit2 } = this.state;
-    // let finallyText;
-    // if (demoText && demoText.length > 50) {
-    //   finallyText = (
-    //     <Tooltip placement="topRight" title={demoText}>
-    //       <Button>{`${demoText.substring(0, 50)}......`}</Button>
-    //     </Tooltip>
-    //   );
-    // } else {
-    //   finallyText = <p>{demoText}</p>;
-    // }
     const status = _.get(this.state.appDetailData, 'Status', '');
     const { traitItem, appName } = this.state;
     const metadata = _.get(traitItem, 'metadata', '');
@@ -231,7 +214,6 @@ class TableList extends React.Component {
     if (traitItem.kind === 'Ingress') {
       traitType = 2;
     }
-    // const appName = _.get(this.props, 'location.state.appName', '');
     const envName = _.get(this.props, 'location.state.envName', '');
     return (
       <div>
@@ -315,42 +297,7 @@ class TableList extends React.Component {
                                 );
                               })
                             )}
-                            {/* {Object.keys(spec).map((currentKey) => {
-                              return (
-                                <Fragment key={currentKey}>
-                                  <Col span="8">
-                                    <p>{currentKey}</p>
-                                  </Col>
-                                  <Col span="16">
-                                    <p>{spec[currentKey]}</p>
-                                  </Col>
-                                </Fragment>
-                              );
-                            })} */}
                           </Row>
-                          {/* <Row>
-                            <Col span="10">
-                              <div style={{ color: 'black' }}>
-                                <p>Deployment Strategy</p>
-                                <p>Rolling Update Strategy</p>
-                                <p>Selectors</p>
-                                <p>Min Ready Seconds</p>
-                                <p>Revision History Limit</p>
-                                <p>Replicas</p>
-                              </div>
-                            </Col>
-                            <Col>
-                              <p>RollingUpdate</p>
-                              <p>Max Surge 25%, Max Unavailable 25%</p>
-                              <p>
-                                <Tag color="orange">aryabhataapp:cool</Tag>
-                                <Tag color="orange">version:v0</Tag>
-                              </p>
-                              <p>0</p>
-                              <p>10</p>
-                              <p>1</p>
-                            </Col>
-                          </Row> */}
                         </div>
                         <div
                           className="hasPadding"
@@ -402,24 +349,6 @@ class TableList extends React.Component {
                         <div className="hasPadding">
                           <p className="title">Status</p>
                           <p>{status}</p>
-                          {/* <Row>
-                            <Col span="10">
-                              <div style={{ color: 'black' }}>
-                                <p>Avaliable Replicas</p>
-                                <p>Ready Replicas</p>
-                                <p>Total Replicas</p>
-                                <p>Unavaliable Replicas</p>
-                                <p>Updated Replicas</p>
-                              </div>
-                            </Col>
-                            <Col>
-                              <p>0</p>
-                              <p>0</p>
-                              <p>1</p>
-                              <p>1</p>
-                              <p>1</p>
-                            </Col>
-                          </Row> */}
                         </div>
                       </div>
                     </Col>
@@ -535,53 +464,6 @@ class TableList extends React.Component {
                         </Row>
                       );
                     })}
-                    {/* <Row>
-                      <Col span="4">
-                        <div style={{ color: 'black' }}>
-                          <p>Annotations</p>
-                        </div>
-                      </Col>
-                      <Col span="20">
-                        <Row>
-                          <Col span="8">
-                            <div style={{ color: 'black' }}>
-                              <p>deployment.kubernetes.io/revision</p>
-                            </div>
-                          </Col>
-                          <Col>
-                            <p>1</p>
-                          </Col>
-                        </Row>
-                        <Row>
-                          <Col span="8">
-                            <div style={{ color: 'black' }}>
-                              <p>objectset.rio.cattle.io/applied</p>
-                            </div>
-                          </Col>
-                          <Col span="16">{finallyText}</Col>
-                        </Row>
-                        <Row>
-                          <Col span="8">
-                            <div style={{ color: 'black' }}>
-                              <p>objectset.rio.cattle.io/id</p>
-                            </div>
-                          </Col>
-                          <Col span="16">
-                            <p>service</p>
-                          </Col>
-                        </Row>
-                      </Col>
-                    </Row>
-                    <Row>
-                      <Col span="4">
-                        <div style={{ color: 'black' }}>
-                          <p>Controlled By</p>
-                        </div>
-                      </Col>
-                      <Col>
-                        <p>cool-aryabhata-v0fnxq6</p>
-                      </Col>
-                    </Row> */}
                   </div>
                 </div>
               </TabPane>
diff --git a/dashboard/src/pages/Workload/Detail/index.jsx b/dashboard/src/pages/Workload/Detail/index.jsx
index 116636578..114ea0106 100644
--- a/dashboard/src/pages/Workload/Detail/index.jsx
+++ b/dashboard/src/pages/Workload/Detail/index.jsx
@@ -127,13 +127,6 @@ const data1 = [
     LastTransition: '2d',
   },
 ];
-// const demoText = `H4sIAAAAAAAA/6xUwW7bOhD8lYc9U4lsWfazgB4C5Na0DZK0lyKHNbmyWVMkQ66UGob/vSBdt3GCxEXRmwjujmZnZrmFtbYKGrgkb9ymI8sgAL3+QiFqZ6EB9D6eDyMQ0BGjQkZotmCxI2hAOmcKDBtcrJCxGMrWfn+Ygsj30aNMRYpa7E0CloGQtbN3uqPI2HlobG+MAIMLMjEBo/cvcEGAW3wjyZH4LGh3JpHZ0Jl25yuMK2hgPkPV1lRJbKfjWVlNpqps69mkrNu2qv5X5UzV9ULVIOC4P1IYtHxzlOGXFEMJOwForeM8Rib8GjOdZD3Avz6Ae7QUiuWwhuYZtWEk/nuvrXp3+4cgpzw53f3SsePKjrLaHHpKSuTGG2opkJUUofm6Pc7O84FAHPL2e6ZTrPssZDWq5+O6GhVqPquLybyaF9gqKsbVTMpyXFZ1m8yVznJwxlCAJrEUsDBOrj8lopdkiDOvFk2k3f1OQPQkk4mRDEl2IX13yHJ1dSqQx6nYCWDqvEGmDPFkU/4+8/86qUbbNQWVw2lTFKABsrgwpN52+olQSWDUlsLe7VPm6Q6XlPdABspPS1imTihWcC8gUHR9yNHZQqCHniLnb+l7aKAuu/zsdC5soIHp5IPOZDLqdW/MtTNapqsL84ibCLt7cVi5Cyldb/njCYLYs+tS4e1R251bkz1EaK/Rz4IrbdfxEKEkDAdkWm4Sa9749LMbZ4y2y89epTgICEfnZrvb9yH3MZ9+BAAA//+bxjCThQUAAA
-//   objectset.rio.cattle.io/id	service
-//   objectset.rio.cattle.io/owner-gvk	rio.cattle.io/v1, Kind=Service
-//   objectset.rio.cattle.io/owner-name	cool-aryabhata-v0fnxq6
-//   objectset.rio.cattle.io/owner-namespace	default
-//   rio.cattle.io/mesh	true
-//   Controlled By	cool-aryabhata-v0fnxq6`;
 
 @connect(({ loading, globalData }) => ({
   loadingAll: loading.models.applist,
@@ -202,25 +195,10 @@ class TableList extends React.PureComponent {
 
   render() {
     const { hasShowEdit, hasShowEdit2 } = this.state;
-    // let finallyText;
-    // if (demoText && demoText.length > 50) {
-    //   finallyText = (
-    //     <Tooltip placement="topRight" title={demoText}>
-    //       <Button>{`${demoText.substring(0, 50)}......`}</Button>
-    //     </Tooltip>
-    //   );
-    // } else {
-    //   finallyText = <p>{demoText}</p>;
-    // }
     const status = _.get(this.state.appDetailData, 'Status', '');
     const Workload = _.get(this.state.appDetailData, 'Workload.workload', {});
     const metadata = _.get(Workload, 'metadata', {});
     let containers = {};
-    // if (Workload.kind === 'ContainerizedWorkload') {
-    //   containers = _.get(Workload, 'spec.containers[0]', {});
-    // } else if (Workload.kind === 'Deployment') {
-    //   containers = _.get(Workload, 'spec.template.spec.containers[0]', {});
-    // }
     containers = _.get(Workload, 'spec.containers[0]', {});
     let { loadingAll } = this.props;
     loadingAll = loadingAll || false;
@@ -300,29 +278,6 @@ class TableList extends React.PureComponent {
                                 );
                               })}
                             </Row>
-                            {/* <Row>
-                              <Col span="10">
-                                <div style={{ color: 'black' }}>
-                                  <p>Deployment Strategy</p>
-                                  <p>Rolling Update Strategy</p>
-                                  <p>Selectors</p>
-                                  <p>Min Ready Seconds</p>
-                                  <p>Revision History Limit</p>
-                                  <p>Replicas</p>
-                                </div>
-                              </Col>
-                              <Col>
-                                <p>RollingUpdate</p>
-                                <p>Max Surge 25%, Max Unavailable 25%</p>
-                                <p>
-                                  <Tag color="orange">aryabhataapp:cool</Tag>
-                                  <Tag color="orange">version:v0</Tag>
-                                </p>
-                                <p>0</p>
-                                <p>10</p>
-                                <p>1</p>
-                              </Col>
-                            </Row> */}
                           </div>
                           <div
                             className="hasPadding"
@@ -377,24 +332,6 @@ class TableList extends React.PureComponent {
                           <div className="hasPadding">
                             <p className="title">Status</p>
                             <p>{status}</p>
-                            {/* <Row>
-                              <Col span="10">
-                                <div style={{ color: 'black' }}>
-                                  <p>Avaliable Replicas</p>
-                                  <p>Ready Replicas</p>
-                                  <p>Total Replicas</p>
-                                  <p>Unavaliable Replicas</p>
-                                  <p>Updated Replicas</p>
-                                </div>
-                              </Col>
-                              <Col>
-                                <p>0</p>
-                                <p>0</p>
-                                <p>1</p>
-                                <p>1</p>
-                                <p>1</p>
-                              </Col>
-                            </Row> */}
                           </div>
                         </div>
                       </Col>
@@ -485,68 +422,6 @@ class TableList extends React.PureComponent {
                           </Row>
                         );
                       })}
-                      {/* <Row>
-                        <Col span="4">
-                          <div style={{ color: 'black' }}>
-                            <p>Age</p>
-                            <p>Labels</p>
-                          </div>
-                        </Col>
-                        <Col>
-                          <p>2d</p>
-                          <p>
-                            <Tag color="orange">aryabhataapp:cool</Tag>
-                            <Tag color="orange">version:v0</Tag>
-                          </p>
-                        </Col>
-                      </Row>
-                      <Row>
-                        <Col span="4">
-                          <div style={{ color: 'black' }}>
-                            <p>Annotations</p>
-                          </div>
-                        </Col>
-                        <Col span="20">
-                          <Row>
-                            <Col span="8">
-                              <div style={{ color: 'black' }}>
-                                <p>deployment.kubernetes.io/revision</p>
-                              </div>
-                            </Col>
-                            <Col>
-                              <p>1</p>
-                            </Col>
-                          </Row>
-                          <Row>
-                            <Col span="8">
-                              <div style={{ color: 'black' }}>
-                                <p>objectset.rio.cattle.io/applied</p>
-                              </div>
-                            </Col>
-                            <Col span="16">{finallyText}</Col>
-                          </Row>
-                          <Row>
-                            <Col span="8">
-                              <div style={{ color: 'black' }}>
-                                <p>objectset.rio.cattle.io/id</p>
-                              </div>
-                            </Col>
-                            <Col span="16">
-                              <p>service</p>
-                            </Col>
-                          </Row>
-                        </Col>
-                      </Row>
-                      <Row>
-                        <Col span="4">
-                          <div style={{ color: 'black' }}>
-                            <p>Controlled By</p>
-                          </div>
-                        </Col>
-                        <Col>
-                          <p>cool-aryabhata-v0fnxq6</p>
-                        </Col>
-                      </Row> */}
                     </div>
                   </div>
                 </TabPane>
diff --git a/dashboard/src/services/application.js b/dashboard/src/services/application.js
index e24d7fe6c..7321f513d 100644
--- a/dashboard/src/services/application.js
+++ b/dashboard/src/services/application.js
@@ -11,7 +11,6 @@ export async function getapplist({ url }) {
 export async function createApp({ params, url }) {
   return request(url, {
     method: 'POST',
-    // body:JSON.stringify(params),
     data: {
       ...params,
     },
diff --git a/dashboard/src/services/capability.js b/dashboard/src/services/capability.js
index 9a6795473..92531119d 100644
--- a/dashboard/src/services/capability.js
+++ b/dashboard/src/services/capability.js
@@ -11,7 +11,6 @@ export async function getCapabilityCenterlist() {
 export async function createCapabilityCenter({ params }) {
   return request('/api/capability-centers/', {
     method: 'put',
-    // body:JSON.stringify(params),
     data: {
       ...params,
     },
diff --git a/dashboard/src/services/env.js b/dashboard/src/services/env.js
index 7967b52e4..9ab46fd09 100644
--- a/dashboard/src/services/env.js
+++ b/dashboard/src/services/env.js
@@ -46,3 +46,18 @@ export async function switchEnv({ currentEnv }) {
     method: 'Patch',
   });
 }
+
+/*
+ * 修改 env：Put /api/envs/:envName
+ */
+export async function updateEnv({ envName, namespace }) {
+  return request(`/api/envs/${envName}`, {
+    method: 'put',
+    data: {
+      namespace,
+    },
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}
diff --git a/dashboard/src/utils/request.js b/dashboard/src/utils/request.js
index d878b8dc1..e582b99fa 100644
--- a/dashboard/src/utils/request.js
+++ b/dashboard/src/utils/request.js
@@ -35,11 +35,6 @@ const errorHandler = async (error) => {
   } else if (!response) {
     message.error('网络异常: 您的网络发生异常，无法连接服务器');
   }
-
-  // throw error; // 如果throw. 错误将继续抛出.
-  // 如果return, 则将值作为返回. 'return;' 相当于return undefined, 在处理结果时判断response是否有值即可.
-  // return {some: 'data'};
-  // return response;
 };
 
 /**
@@ -47,9 +42,7 @@ const errorHandler = async (error) => {
  */
 const request = extend({
   errorHandler, // 默认错误处理
-  credentials: 'include', // 默认请求是否带上cookie,
-  // prefix: '/api/v1',
-  // timeout: 1000,
+  credentials: 'include', // 默认请求是否带上cookie
 });
 
 /*
@@ -75,6 +68,5 @@ request.interceptors.response.use(async (response) => {
   }
   // eslint-disable-next-line consistent-return
   return data.data;
-  // return response;
 });
 export default request;