diff --git a/py/build/build.bat b/py/build/build.bat
new file mode 100644
index 0000000000000000000000000000000000000000..af93c97b6134920b47c047df6f429a22125f29da
--- /dev/null
+++ b/py/build/build.bat
@@ -0,0 +1,3 @@
+call activate py36
+python build.py
+pause
\ No newline at end of file
diff --git a/py/build.py b/py/build/build.py
similarity index 49%
rename from py/build.py
rename to py/build/build.py
index bca58f25938ecaae83591895b9b6163300900e88..f1d865b0e24d657812159be858a6320635087cc1 100644
--- a/py/build.py
+++ b/py/build/build.py
@@ -1,27 +1,28 @@
+import sys
 import compileall
 import pathlib as plib
 import shutil
 import os
 
-m_dist_app_path = plib.Path('dist/app')
+os.chdir(plib.Path(__file__).parent)
+
+vinfo = sys.version_info
+
+
+m_dist_app_path = plib.Path(f'../dist/app{vinfo.major}{vinfo.minor}')
 m_dist_src_path = m_dist_app_path / 'src'
 m_dist_web_path = m_dist_app_path / 'web'
-m_dist_main_path = m_dist_app_path / 'main.py'
+m_dist_main_path = m_dist_app_path / 'main.pyc'
 m_dist_startup_path = m_dist_app_path / 'startup.bat'
 
-compileall.compile_dir(r'src')
+compileall.compile_dir(r'../src')
+compileall.compile_file('../main.py')
 print('编译完毕')
 
-if os.path.exists(m_dist_src_path):
-    shutil.rmtree(m_dist_src_path)
-
-if os.path.exists(m_dist_web_path):
-    shutil.rmtree(m_dist_web_path)
+if os.path.exists(m_dist_app_path):
+    shutil.rmtree(m_dist_app_path)
 
-if os.path.exists(m_dist_main_path):
-    os.remove(m_dist_main_path)
-
-os.makedirs(m_dist_src_path)
+os.makedirs(m_dist_app_path)
 
 print('清除旧文件完毕')
 
@@ -36,11 +37,14 @@ def to_folder(file: plib.Path):
     del parts[-2]
     parts[-1] = to_fileName(file)
     # parts = [plib.Path(p) for p in parts]
+
+    parts = [p for p in parts if not all(s in ['.', '/'] for s in p)]
+
     parts = plib.Path.joinpath(m_dist_app_path, *parts)
     return parts
 
 
-fs = plib.Path('src').rglob('*.cpython-37.pyc')
+fs = plib.Path('../src').rglob('*.cpython-37.pyc')
 fs = [(p, to_folder(p)) for p in fs]
 
 for f in fs:
@@ -50,10 +54,13 @@ for f in fs:
     shutil.copyfile(f[0], f[1])
 
 
-shutil.copyfile('main.py', m_dist_main_path)
+shutil.copyfile('../__pycache__/main.cpython-37.pyc', m_dist_main_path)
+
+shutil.copytree('../web', m_dist_web_path)
 
-shutil.copytree('web', m_dist_web_path)
 
-shutil.copyfile('startup.bat', m_dist_startup_path)
+for f in plib.Path('others').glob('*'):
+    shutil.copyfile(f, m_dist_app_path / f.name)
+# shutil.copyfile('../startup.bat', m_dist_startup_path)
 
-print('创建完成')
+print(f'创建完成-({vinfo})')
diff --git a/py/build/others/startup_linux.sh b/py/build/others/startup_linux.sh
new file mode 100644
index 0000000000000000000000000000000000000000..268f2c6b0af6474cd8777605f86a76026c909c1a
--- /dev/null
+++ b/py/build/others/startup_linux.sh
@@ -0,0 +1 @@
+python main.pyc
\ No newline at end of file
diff --git a/py/build/others/startup_win.bat b/py/build/others/startup_win.bat
new file mode 100644
index 0000000000000000000000000000000000000000..48f32107dabb1e0da7ebdbcbe3c54a8b4bdc3572
--- /dev/null
+++ b/py/build/others/startup_win.bat
@@ -0,0 +1,2 @@
+python  main.pyc
+pause
\ No newline at end of file
diff --git "a/py/build/others/\347\263\273\347\273\237\350\246\201\346\261\202.txt" "b/py/build/others/\347\263\273\347\273\237\350\246\201\346\261\202.txt"
new file mode 100644
index 0000000000000000000000000000000000000000..586120c366549340d5776741cb003a35a9297429
--- /dev/null
+++ "b/py/build/others/\347\263\273\347\273\237\350\246\201\346\261\202.txt"
@@ -0,0 +1,13 @@
+python 3.6 或以上
+
+python 必需的库：
+- flask
+- pandas
+- webbrowser(应该是py内置的库)
+
+执行如下语句安装（使用了国内镜像）：
+pip install pandas flask -i https://mirrors.aliyun.com/pypi/simple/
+
+
+浏览器要求：
+基本上市面上的主流浏览器都支持，IE就不考虑了
\ No newline at end of file
diff --git a/py/startup.bat b/py/startup.bat
deleted file mode 100644
index 7b674598abca097f8d376fcea9f69c8e91f59900..0000000000000000000000000000000000000000
--- a/py/startup.bat
+++ /dev/null
@@ -1 +0,0 @@
-python  main.py
\ No newline at end of file
diff --git a/ui/src/App.vue b/ui/src/App.vue
index fce4be0115b21a427a90b93e51f8f399d9e09ccb..4e14739b4e74ae99b9eb0893aa58fc922b591bd8 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,21 +1,27 @@
 <template>
-  <div class="container-h">
-    <div class="item-left">
-      <div class="v">
-        <Commander></Commander>
+  <div class="wrapper">
+    <div class="container-v">
+      <div class="item-top">
+        <header class="tabs_wrapper">
+          <FunctionTabs></FunctionTabs>
+        </header>
       </div>
-    </div>
-
-    <div class="item-right container-v">
-      <header class="tabs">
-        <FunctionTabs></FunctionTabs>
-      </header>
 
       <a-divider></a-divider>
 
-      <main class="table">
-        <TableContent></TableContent>
-      </main>
+      <div class="item-bottom container-h">
+        <div class="item-left">
+          <div class="v">
+            <Commander></Commander>
+          </div>
+        </div>
+
+        <div class="item-right">
+          <main class="table">
+            <TableContent></TableContent>
+          </main>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -43,6 +49,12 @@ export default defineComponent({
 
 
 <style lang="less" scoped>
+header.tabs_wrapper {
+  max-width: 90vw;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 main.table {
   min-height: 50vh;
 }
@@ -73,5 +85,17 @@ div.container-h {
 div.container-v {
   display: flex;
   flex-direction: column;
+
+  > div.item-top {
+    flex-grow: 0;
+    padding: 0 auto;
+    margin-right: 10px;
+    flex-shrink: 0;
+  }
+
+  > div.item-bottom {
+    flex-grow: 1;
+    overflow: auto;
+  }
 }
 </style>
diff --git a/ui/src/components/Commander/index.vue b/ui/src/components/Commander/index.vue
index 33376753fee883ace8ee173b57be302234906b6f..b0839905b87aa4d895a399952c364db993454cf3 100644
--- a/ui/src/components/Commander/index.vue
+++ b/ui/src/components/Commander/index.vue
@@ -1,51 +1,57 @@
 <template>
-  <a-steps
-    class="step-gp"
-    :current="3"
-    size="small"
-    direction="vertical"
-    @change="onChange"
-  >
-    <!-- a-step.step[title='test$']*20 -->
-
-    <a-step
-      v-for="c in cmds"
-      class="step"
-      :key="c._id"
-      :status="c.hasError ? 'error' : 'finish'"
+  <div class="wrapper">
+    <a-steps
+      class="step-gp"
+      :current="3"
+      size="small"
+      direction="vertical"
+      @change="onChange"
     >
-      <template #title>
-        <a-tag color="green">
-          <template #icon>
-            <a-popconfirm
-              title="确定删除这个操作？可能导致现有的后续操作产生异常"
-              ok-text="是"
-              cancel-text="我再想想"
-              @confirm="onCloseTag(c._id)"
-            >
-              <a href="#"><DeleteOutlined /></a>
-            </a-popconfirm>
-          </template>
-
-          <a-popover trigger="click" placement="right">
-            <span>{{ c.name }}</span>
+      <!-- a-step.step[title='test$']*20 -->
 
-            <template #content>
-              <a-descriptions style="width: 50vw" title="调用信息" :column="1">
-                <a-descriptions-item label="code">
-                  <code>
-                    <pre>{{ c.code }}</pre>
-                  </code>
-                </a-descriptions-item>
-              </a-descriptions>
+      <a-step
+        v-for="c in cmds"
+        class="step"
+        :key="c._id"
+        :status="c.hasError ? 'error' : 'finish'"
+      >
+        <template #title>
+          <a-tag color="green">
+            <template #icon>
+              <a-popconfirm
+                title="确定删除这个操作？可能导致现有的后续操作产生异常"
+                ok-text="是"
+                cancel-text="我再想想"
+                @confirm="onCloseTag(c._id)"
+              >
+                <a href="#" style="color: red"><DeleteOutlined /></a>
+              </a-popconfirm>
             </template>
-          </a-popover>
-        </a-tag>
-      </template>
-    </a-step>
 
-    <!-- <a-step class="step" title="test4" status='error'></a-step> -->
-  </a-steps>
+            <a-popover trigger="click" placement="right">
+              <span>{{ c.name }}</span>
+
+              <template #content>
+                <a-descriptions
+                  style="width: 50vw"
+                  title="调用信息"
+                  :column="1"
+                >
+                  <a-descriptions-item label="code">
+                    <code>
+                      <pre>{{ c.code }}</pre>
+                    </code>
+                  </a-descriptions-item>
+                </a-descriptions>
+              </template>
+            </a-popover>
+          </a-tag>
+        </template>
+      </a-step>
+
+      <!-- <a-step class="step" title="test4" status='error'></a-step> -->
+    </a-steps>
+  </div>
 </template>
 
 <script lang='ts'>
@@ -76,8 +82,9 @@ export default defineComponent({
 
 <style lang="less" scoped>
 .step-gp {
-  width: 100%;
-  margin: 10px 5px 0px 5px;
+  // width: 100%;
+
+  // margin-top: 20px;
 }
 
 .ant-tag-close-icon {
diff --git a/ui/src/components/FunctionTabs/CodeBuilder/index.vue b/ui/src/components/FunctionTabs/CodeBuilder/index.vue
index 49a7ee1f5ab676a8279dee45d2b21bb1caeeff23..cfa55c9502b8e408df7020cffd0374c3c58b78cc 100644
--- a/ui/src/components/FunctionTabs/CodeBuilder/index.vue
+++ b/ui/src/components/FunctionTabs/CodeBuilder/index.vue
@@ -1,10 +1,11 @@
 <template>
-  <code id="code">
-    <pre>{{ code }}</pre>
-    <!-- <textarea>{{ code }}</textarea> -->
-  </code>
+  <div class="wrapper">
+    <code id="code" class="context_wrapper">
+      <pre>{{ code }}</pre>
+    </code>
 
-  <a-button type="primary" @click="onCopy">复制</a-button>
+    <a-button type="primary" @click="onCopy">复制</a-button>
+  </div>
 </template>
 
 <script lang='ts'>
@@ -19,7 +20,7 @@ export default defineComponent({
     let code = CodeBuilderStore.getStateToRefs().code;
 
     let onCopy = () => {
-      let inp = document.createElement("input");
+      let inp = document.createElement("textarea");
       inp.value = code.value;
       document.body.appendChild(inp);
       inp.select(); // 选择对象;
@@ -39,5 +40,8 @@ export default defineComponent({
 });
 </script>
 
-<style>
+<style lang="less" scoped>
+code.context_wrapper {
+  text-align: left;
+}
 </style>
\ No newline at end of file
diff --git a/ui/src/components/FunctionTabs/Groupby/index.vue b/ui/src/components/FunctionTabs/Groupby/index.vue
index 41b0ea4fd91ba55dbea8f212a60587543ccb9028..78c7235ddca975e73cc34d9ce6b54de3fcfe1c0c 100644
--- a/ui/src/components/FunctionTabs/Groupby/index.vue
+++ b/ui/src/components/FunctionTabs/Groupby/index.vue
@@ -1,99 +1,98 @@
 <template>
-  <div class="container">
-    <div class="columns">
-      <h3>列</h3>
-
-      <div class="content">
-        <draggable
-          :move="onMove"
-          :sort="false"
-          class="drag"
-          :list="fields"
-          :group="{ name: 'src', pull: 'clone', put: false }"
-          item-key="field"
-          :clone="onSrcClone"
-        >
-          <template #item="{ element }">
-            <div>
-              <a-popover title="详细信息" trigger="click">
-                <a-tag color="processing">{{ element.label }}</a-tag>
-              </a-popover>
-            </div>
-          </template>
-        </draggable>
-      </div>
-    </div>
-
-    <div class="keys">
-      <h3>分组keys</h3>
-
-      <div class="content">
-        <draggable
-          :move="onMove"
-          class="drag"
-          :list="groupKeys"
-          group="src"
-          item-key="__key"
-        >
-          <template #item="{ element }">
-            <div>
-              <a-tag
-                color="success"
-                closable
-                @close="onGroupKeysTagClose(element.__key)"
-                >{{ element.title }}</a-tag
-              >
-            </div>
-          </template>
-        </draggable>
-      </div>
-    </div>
-
-    <div class="agg">
-      <h3>聚合</h3>
-      <div class="content">
-        <draggable
-          @add="onAggAdded"
-          class="drag"
-          :list="aggFields"
-          group="src"
-          item-key="__key"
-        >
-          <template #item="{ element }">
-            <div>
-              <a-tag
-                style="width: 80%"
-                color="success"
-                closable
-                @close="onAggTagClose(element.__key)"
-                >{{ element.title }} <span>：</span>
-                <a-select
-                  v-model:value="selectOptsMapping[element.__key]"
-                  mode="multiple"
-                  style="width: 50%"
-                  placeholder="选择聚合方式"
-                  option-label-prop="label"
+  <div class="wrapper">
+    <a-affix :offset-top="10">
+      <a-button v-if="applyDisplay" @click="onApply" type="danger"
+        >应用</a-button
+      >
+    </a-affix>
+
+    <div class="container">
+      <a-card title="列" class="columns card-item">
+        <div class="content">
+          <draggable
+            :move="onMove"
+            :sort="false"
+            class="drag"
+            :list="fields"
+            :group="{ name: 'src', pull: 'clone', put: false }"
+            item-key="field"
+            :clone="onSrcClone"
+          >
+            <template #item="{ element }">
+              <div>
+                <a-popover title="详细信息" trigger="click">
+                  <a-tag color="processing">{{ element.label }}</a-tag>
+                </a-popover>
+              </div>
+            </template>
+          </draggable>
+        </div>
+      </a-card>
+
+      <a-card title="分组keys" class="keys card-item">
+        <div class="content">
+          <draggable
+            :move="onMove"
+            class="drag"
+            :list="groupKeys"
+            group="src"
+            item-key="__key"
+          >
+            <template #item="{ element }">
+              <div>
+                <a-tag
+                  color="success"
+                  closable
+                  @close="onGroupKeysTagClose(element.__key)"
+                  >{{ element.title }}</a-tag
                 >
-                  <a-select-option
-                    v-for="opt in opts[element.type]"
-                    :value="opt"
-                    :label="opt"
-                    :key="opt"
+              </div>
+            </template>
+          </draggable>
+        </div>
+      </a-card>
+
+      <a-card title="聚合" class="agg card-item">
+        <div class="content">
+          <draggable
+            @add="onAggAdded"
+            class="drag"
+            :list="aggFields"
+            group="src"
+            item-key="__key"
+          >
+            <template #item="{ element }">
+              <div>
+                <a-tag
+                  style="width: 80%"
+                  color="success"
+                  closable
+                  @close="onAggTagClose(element.__key)"
+                  >{{ element.title }} <span>：</span>
+                  <a-select
+                    v-model:value="selectOptsMapping[element.__key]"
+                    mode="multiple"
+                    style="width: 50%"
+                    placeholder="选择聚合方式"
+                    option-label-prop="label"
                   >
-                    {{ opt }}
-                  </a-select-option>
-                </a-select>
-              </a-tag>
-            </div>
-          </template>
-        </draggable>
-      </div>
+                    <a-select-option
+                      v-for="opt in opts[element.type]"
+                      :value="opt"
+                      :label="opt"
+                      :key="opt"
+                    >
+                      {{ opt }}
+                    </a-select-option>
+                  </a-select>
+                </a-tag>
+              </div>
+            </template>
+          </draggable>
+        </div>
+      </a-card>
     </div>
   </div>
-
-  <div class="apply-btn">
-    <a-button v-if="applyDisplay" @click="onApply" type="danger">应用</a-button>
-  </div>
 </template>
 
 <script lang='ts'>
@@ -222,6 +221,46 @@ export default defineComponent({
 
 
 <style lang='less' scoped>
+.card-item {
+  margin: 5px;
+  background-color: rgb(250 250 250);
+}
+
+.columns div.drag {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  // min-height: 10vh;
+  max-height: 15vh;
+  overflow: auto;
+
+  > div {
+    // margin-left: 1px;
+    margin: 2px;
+    // margin-top: 2px;
+  }
+}
+.get_drag() {
+  div.drag {
+    min-height: 5vh;
+    // max-height: 25vh;
+    overflow: auto;
+
+    > div {
+      margin-bottom: 2px;
+    }
+  }
+}
+
+.keys {
+  .get_drag();
+}
+
+.agg {
+  .get_drag();
+}
+
 div.apply-btn {
   width: 200px;
   margin: 0 auto;
@@ -230,44 +269,22 @@ div.apply-btn {
 div.container {
   display: flex;
   flex-direction: row;
-  align-items: stretch;
+  align-items: flex-start;
 
   // height: 20vh;
 
-  div.content {
-    height: 100%;
-
-    > .drag {
-      height: 80%;
-    }
-  }
-
   > div {
-    border: 1px solid black;
-
     &.columns {
       flex-grow: 0.5;
     }
 
     &.keys {
-      flex-grow: 0.5;
+      flex-grow: 0;
     }
 
     &.agg {
-      flex-grow: 1;
+      flex-grow: 0.5;
     }
   }
 }
-
-div.drag {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  max-height: 40vh;
-  overflow: auto;
-
-  > div {
-    margin: 2px;
-  }
-}
 </style>
\ No newline at end of file
diff --git a/ui/src/components/FunctionTabs/Query/index.vue b/ui/src/components/FunctionTabs/Query/index.vue
index c72aa033bb58f1818fd0588ab8d008365bb8afa4..5843565c47ee32b9321fefa234f9a92241efed86 100644
--- a/ui/src/components/FunctionTabs/Query/index.vue
+++ b/ui/src/components/FunctionTabs/Query/index.vue
@@ -2,9 +2,12 @@
   <div class="container">
     <a-auto-complete
       class="input"
-      allow-clear
+      :options="opts"
       v-model:value="input"
-      placeholder="dataframe.query 的 内容"
+      placeholder="dataframe.query 的内容"
+      @search="onSearch"
+      @select="onSelect"
+      :autofocus="true"
     />
 
     <a-button type="primary" @click="onApply" :disabled="!applyBtnDisplay"
@@ -16,6 +19,7 @@
 <script lang='ts'>
 import { computed, defineComponent, reactive, ref } from "vue";
 import * as apps from "@/applications";
+import DfStore from "@/store/DfStore";
 
 export default defineComponent({
   name: "Query",
@@ -24,6 +28,35 @@ export default defineComponent({
     let input = ref("");
     let applyBtnDisplay = computed(() => input.value.length > 0);
 
+    const opts = ref([] as object);
+
+    const colInfos = DfStore.getStateReadonly().columnInfo;
+
+    const onSelect = (value: any, option: any) => {
+      input.value = option.text;
+    };
+
+    const onSearch = (searchText: any) => {
+      opts.value = searchText ? searchResult(searchText) : [];
+
+      function searchResult(query: any) {
+        const arr: string[] = query.split(/\s+/);
+        const value = arr.slice(-1)[0];
+
+        return colInfos
+          .filter((v) => v.field.indexOf(value) >= 0)
+          .map((v) => {
+            const value =
+              arr.slice(0, arr.length - 1).join(" ") + " " + v.field;
+
+            return {
+              text: value.trim(),
+              value: `${v.field}(${v.type})`,
+            };
+          });
+      }
+    };
+
     let onApply = async () => {
       await apps.filterByPandasQeury(input.value);
     };
@@ -32,6 +65,9 @@ export default defineComponent({
       input,
       onApply,
       applyBtnDisplay,
+      opts,
+      onSearch,
+      onSelect,
     };
   },
 });
diff --git a/ui/src/components/FunctionTabs/index.vue b/ui/src/components/FunctionTabs/index.vue
index a51fa6dc9d0b59c48b585a45258c023c4150d0df..97b5cafbd91f2883db4b8258dbaf65913b0ecf83 100644
--- a/ui/src/components/FunctionTabs/index.vue
+++ b/ui/src/components/FunctionTabs/index.vue
@@ -1,24 +1,29 @@
 <template>
   <a-tabs class="tabs">
-    <a-tab-pane key="1" tab="加载">
+    <a-tab-pane class="pane" key="1" tab="加载">
       <FileUpload></FileUpload>
     </a-tab-pane>
 
-    <a-tab-pane v-if="isDev" key="test" tab="test"> </a-tab-pane>
+    <a-tab-pane class="pane" v-if="isDev" key="test" tab="test"> </a-tab-pane>
 
-    <a-tab-pane key="CodeBuilder" tab="代码生成" :disabled="!isDataLoaded">
+    <a-tab-pane
+      class="pane"
+      key="CodeBuilder"
+      tab="代码生成"
+      :disabled="!isDataLoaded"
+    >
       <CodeBuilder></CodeBuilder>
     </a-tab-pane>
 
-    <a-tab-pane key="2" tab="筛选" :disabled="!isDataLoaded">
+    <a-tab-pane class="pane" key="2" tab="筛选" :disabled="!isDataLoaded">
       <Query></Query>
     </a-tab-pane>
 
-    <a-tab-pane key="3" tab="分组" :disabled="!isDataLoaded">
+    <a-tab-pane class="pane" key="3" tab="分组" :disabled="!isDataLoaded">
       <Groupby></Groupby>
     </a-tab-pane>
 
-    <a-tab-pane key="4" tab="透视表" :disabled="!isDataLoaded"
+    <a-tab-pane class="pane" key="4" tab="透视表" :disabled="!isDataLoaded"
       >期待！！！！</a-tab-pane
     >
   </a-tabs>
@@ -67,6 +72,13 @@ export default defineComponent({
 </script>
 
 
+<style lang="less" scoped>
+div.pane {
+  max-height: 35vh;
+  overflow: auto;
+}
+</style>
+
 
 
 
diff --git a/ui/src/index.css b/ui/src/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..9a059b221ab952b9c2bdc8d94447669d343d1df1
--- /dev/null
+++ b/ui/src/index.css
@@ -0,0 +1,20 @@
+#app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    /* max-width: 1170px; */
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 0;
+    padding-right: 0;
+    box-sizing: border-box;
+}
+
+.wrapper {
+    width: 95%;
+    max-width: 1841px;
+    margin-left: auto;
+    margin-right: auto;
+}
diff --git a/ui/src/main.ts b/ui/src/main.ts
index 21010170271cefdd381774496cb8f84794386b53..83d7e55a771ec1dff7f7837802c9f17ac9c941f7 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import './index.css'
 
 import "./mock";
 
diff --git a/ui/src/mock/code.json b/ui/src/mock/code.json
new file mode 100644
index 0000000000000000000000000000000000000000..ad35c3f676c5808161d3d91dad0388cde18939f3
--- /dev/null
+++ b/ui/src/mock/code.json
@@ -0,0 +1,3 @@
+{
+    "code": "df = pd.read_excel('某咖啡公司销售数据.xlsx',sheet_name = 0,header = 0)\ncond = df.eval(\"(产品类别 in ['普茶', 'Espresso']) and (市场类别 == 'Major Market')\")\ndf = df[cond]"
+}
\ No newline at end of file
diff --git a/ui/src/mock/index.ts b/ui/src/mock/index.ts
index ee85920540487ae439a228f8373af7b2350949ed..3594f01213da7a59caf4c68291456096ba7c1dbe 100644
--- a/ui/src/mock/index.ts
+++ b/ui/src/mock/index.ts
@@ -14,6 +14,7 @@ import cmds from "./commandersModel.json";
 
 import file_upload from '@/mock/file_upload.json';
 
+import code from '@/mock/code.json';
 
 import test_json from "./test.json";
 
@@ -56,7 +57,7 @@ export default function autoLoadData() {
         DfStore.setData(table.table.fields, table.table.data, table.columnInfos)
         PandasCmdStore.SetCorrect()
 
-        CodeBuilderStore.update("df = pd.read_excel(<FileStorage: 'test.xlsx' ('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')>,sheetName = 0,header = 0)")
+        CodeBuilderStore.update(code.code)
 
         CommandStore.setData(cmds)
 
diff --git a/ui/src/plugins/vant.ts b/ui/src/plugins/vant.ts
index 49be5e1d8a516020ed669408ef97981af5def2f6..bd9a75121eaeca43fb00d8f9993ede0e066d00ba 100644
--- a/ui/src/plugins/vant.ts
+++ b/ui/src/plugins/vant.ts
@@ -3,7 +3,7 @@ import { App } from "vue";
 import {
     Button, Form, Tabs, Tag, Steps, AutoComplete, Table,
     Input, Popover, Select, Upload, Divider,
-    Descriptions, Popconfirm, Spin, Modal, Result, Empty, InputNumber
+    Descriptions, Popconfirm, Spin, Modal, Result, Empty, InputNumber, Card, Affix
 } from "ant-design-vue";
 
 import { InboxOutlined, StarFilled } from '@ant-design/icons-vue';
@@ -15,7 +15,7 @@ export default {
     install: (app: App) => {
         [Button, Form, Tabs, Tag, Steps, AutoComplete,
             Input, Popover, Select, Upload, Divider,
-            Descriptions, Popconfirm, Spin, Modal, Result, Empty, InputNumber, Table].forEach(v => app.use(v));
+            Descriptions, Popconfirm, Spin, Modal, Result, Empty, InputNumber, Affix, Table, Card].forEach(v => app.use(v));
 
         app.component('inboxOutlined', InboxOutlined)
     }