diff --git a/.env.develop b/.env.develop
index d417d769..c8349cd4 100644
--- a/.env.develop
+++ b/.env.develop
@@ -1 +1,2 @@
+ENV=develop
 VITE_APP_BASE_API=/api
\ No newline at end of file
diff --git a/.env.production b/.env.production
index d417d769..990e0635 100644
--- a/.env.production
+++ b/.env.production
@@ -1 +1,2 @@
+ENV=production
 VITE_APP_BASE_API=/api
\ No newline at end of file
diff --git a/plugin/optimize.ts b/plugin/optimize.ts
new file mode 100644
index 00000000..75e6721b
--- /dev/null
+++ b/plugin/optimize.ts
@@ -0,0 +1,49 @@
+import fs from 'fs'
+import path from 'path'
+
+const rootPath = path.resolve(__dirname, '../')
+
+function optimizeAntdComponents(moduleName: string): string[] {
+  const moduleESPath = `${moduleName}/es`
+  const nodeModulePath = `./node_modules/${moduleESPath}`
+  const includes: string[] = [moduleESPath]
+
+  const folders = fs.readdirSync(
+    path.resolve(rootPath, nodeModulePath)
+  )
+
+  folders.map(name => {
+    const folderName = path.resolve(
+      rootPath,
+      nodeModulePath,
+      name
+    )
+    let stat = fs.lstatSync(folderName)
+    if (stat.isDirectory()) {
+      let styleFolder = path.resolve(folderName, 'style')
+      if (fs.existsSync((styleFolder))) {
+        let _stat = fs.lstatSync(styleFolder)
+        if (_stat.isDirectory()) {
+          includes.push(`${moduleESPath}/${name}/style`)
+        }
+      }
+    }
+  })
+
+  return includes
+}
+
+export function optimizeDeps() {
+  return {
+    name: "optimizeDeps",
+    configResolved: async (config) => {
+      const components = [
+          ...optimizeAntdComponents('ant-design-vue'),
+        ...optimizeAntdComponents('jetlinks-ui-components')
+      ]
+      let concat = config.optimizeDeps.include.concat(components)
+      config.optimizeDeps.include = Array.from(new Set(concat))
+      console.log(config.optimizeDeps.include)
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/BadgeStatus/color.ts b/src/components/BadgeStatus/color.ts
new file mode 100644
index 00000000..6d9f18d3
--- /dev/null
+++ b/src/components/BadgeStatus/color.ts
@@ -0,0 +1,17 @@
+
+const color = {
+  'processing': '64, 169, 255',
+  'error': '247, 79, 70',
+  'success': '74, 234, 220',
+  'warning': '250, 178, 71',
+  'default': '63, 73, 96'
+}
+export const getHexColor = (code: string, pe: number = 0.3) => {
+  const _color = color[code] || color.default
+  if (code === 'default') {
+    pe = 0.1
+  }
+  return `rgba(${_color}, ${pe})`
+}
+
+export default color
\ No newline at end of file
diff --git a/src/components/BadgeStatus/index.vue b/src/components/BadgeStatus/index.vue
index 403cbbe6..d1a9528c 100644
--- a/src/components/BadgeStatus/index.vue
+++ b/src/components/BadgeStatus/index.vue
@@ -1,12 +1,13 @@
 <template>
     <j-badge
-        :status="statusNames ? statusNames[status] : 'default'"
+        :color="_color"
         :text="text"
     ></j-badge>
 </template>
 
 <script setup lang="ts">
 // import { StatusColorEnum } from '@/utils/consts.ts';
+import { getHexColor } from './color'
 const props = defineProps({
     text: {
         type: String,
@@ -26,6 +27,18 @@ const props = defineProps({
      *   0: 'error'
      * }
      */
-    statusNames: { type: Object },
+    statusNames: {
+      type: Object,
+      default: () => ({
+        'success': 'success',
+        'warning': 'warning',
+        'error': 'error',
+        'default': 'default',
+      })
+    },
 });
+
+const _color = computed(() => {
+  return getHexColor(props.statusNames[props.status], 1)
+})
 </script>
diff --git a/src/components/CardBox/index.vue b/src/components/CardBox/index.vue
index eb6087c0..6174471a 100644
--- a/src/components/CardBox/index.vue
+++ b/src/components/CardBox/index.vue
@@ -29,7 +29,9 @@
                 <div
                     v-if="showStatus"
                     class="card-state"
-                    :class="statusNames ? statusNames[status] : ''"
+                    :style='{
+                      backgroundColor: getHexColor(statusNames[status])
+                    }'
                 >
                     <div class="card-state-content">
                         <BadgeStatus
@@ -68,9 +70,10 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name='CardBox'>
 import BadgeStatus from '@/components/BadgeStatus/index.vue';
-import type { ActionsType } from '@/components/Table/index.vue';
+import { getHexColor } from '../BadgeStatus/color'
+import type { ActionsType } from '@/components/Table';
 import { PropType } from 'vue';
 
 type EmitProps = {
diff --git a/src/components/JUpload/index.vue b/src/components/Upload/index.vue
similarity index 99%
rename from src/components/JUpload/index.vue
rename to src/components/Upload/index.vue
index 18def1a3..36da6a30 100644
--- a/src/components/JUpload/index.vue
+++ b/src/components/Upload/index.vue
@@ -54,7 +54,7 @@
     </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name='JProUpload'>
 import { message, UploadChangeParam, UploadProps } from 'ant-design-vue';
 import { FILE_UPLOAD } from '@/api/comm';
 import { TOKEN_KEY } from '@/utils/variable';
diff --git a/src/components/ValueItem/index.vue b/src/components/ValueItem/index.vue
index 6dd6690d..d2fd7437 100644
--- a/src/components/ValueItem/index.vue
+++ b/src/components/ValueItem/index.vue
@@ -1,6 +1,6 @@
 <!-- 参数类型输入组件 -->
 <template>
-    <div class="wrapper">
+    <div class="value-item-warp">
         <j-select
             v-if="typeMap.get(itemType) === 'select'"
             v-model:value="myValue"
@@ -92,7 +92,7 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name='ValueItem'>
 import { PropType } from 'vue';
 import { UploadChangeParam, UploadFile } from 'ant-design-vue';
 import { DefaultOptionType } from 'ant-design-vue/lib/select';
@@ -102,6 +102,7 @@ import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
 import { LocalStore } from '@/utils/comm';
 import { ItemData, ITypes } from './types';
 import { FILE_UPLOAD } from '@/api/comm';
+import { Upload } from 'jetlinks-ui-components'
 
 type Emits = {
     (e: 'update:modelValue', data: string | number | boolean): void;
diff --git a/src/components/index.ts b/src/components/index.ts
index e54a6c26..a03aa034 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -8,7 +8,7 @@ import CardBox from './CardBox/index.vue';
 import Search from './Search'
 import NormalUpload from './NormalUpload/index.vue'
 import FileFormat from './FileFormat/index.vue'
-import JProUpload from './JUpload/index.vue'
+import JProUpload from './Upload/index.vue'
 import { BasicLayoutPage, BlankLayoutPage } from './Layout'
 import { PageContainer, AIcon } from 'jetlinks-ui-components'
 import Ellipsis from './Ellipsis/index.vue'
diff --git a/src/main.ts b/src/main.ts
index a7e4dcb2..26791d52 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,13 +4,10 @@ import store from './store'
 import components from './components'
 import router from './router'
 import './style.less'
-// import jComponents from 'jetlinks-ui-components'
-// import 'jetlinks-ui-components/es/style.js'
 
 const app = createApp(App)
 
 app.use(store)
   .use(router)
   .use(components)
-  // .use(jComponents)
   .mount('#app')
diff --git a/src/views/rule-engine/Scene/Save/components/DropdownButton/util.ts b/src/views/rule-engine/Scene/Save/components/DropdownButton/util.ts
index cc907d3d..5487ce6d 100644
--- a/src/views/rule-engine/Scene/Save/components/DropdownButton/util.ts
+++ b/src/views/rule-engine/Scene/Save/components/DropdownButton/util.ts
@@ -11,7 +11,7 @@ export const getComponent = (type: string): string => {
     case 'long':
     case 'float':
     case 'double':
-      return 'number'
+      return type
     case 'metric':
     case 'enum':
     case 'boolean':
diff --git a/src/views/rule-engine/Scene/Save/components/ParamsDropdown/index.vue b/src/views/rule-engine/Scene/Save/components/ParamsDropdown/index.vue
index 201a62f8..e716654b 100644
--- a/src/views/rule-engine/Scene/Save/components/ParamsDropdown/index.vue
+++ b/src/views/rule-engine/Scene/Save/components/ParamsDropdown/index.vue
@@ -54,7 +54,7 @@
               <ValueItem
                 v-else
                 v-model:modelValue='myValue'
-                :itemType='getComponent(item.component)'
+                :itemType='item.component'
                 :options='item.key === "upper" ?  metricOption : options'
                 @change='valueItemChange'
               />
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 47f23901..dea7a675 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,6 +1,7 @@
 interface ImportMetaEnv {
     readonly VITE_APP_BASE_API: string;
     readonly VITE_APP_WS_URL: string;
+    readonly MODE: string;
 }
 
 interface ImportMeta {
diff --git a/vite.config.ts b/vite.config.ts
index a9d0d03f..6fbe3e01 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,12 +12,13 @@ import * as path from 'path'
 import monacoEditorPlugin from 'vite-plugin-monaco-editor';
 // import { JetlinksVueResolver } from 'jetlinks-ui-components/lib/plugin/resolve'
 import { JetlinksVueResolver } from './plugin/jetlinks'
+import { optimizeDeps } from './plugin/optimize'
 import copy from 'rollup-plugin-copy';
 
-
 // https://vitejs.dev/config/
 export default defineConfig(({ mode}) => {
   const env: Partial<ImportMetaEnv> = loadEnv(mode, process.cwd());
+
   return {
       base: './',
       resolve: {
@@ -53,6 +54,7 @@ export default defineConfig(({ mode}) => {
           vue(),
           monacoEditorPlugin({}),
           vueJsx(),
+          optimizeDeps(),
           Components({
               resolvers: [JetlinksVueResolver({ importStyle: 'less' }), VueAmapResolver()],
               directoryAsNamespace: true
@@ -110,6 +112,9 @@ export default defineConfig(({ mode}) => {
                   javascriptEnabled: true,
               }
           }
+      },
+      optimizeDeps: {
+          include: ['pinia', 'vue-router', 'axios', 'lodash-es', '@vueuse/core', 'echarts'],
       }
   }
 })