diff --git a/src/api/cta_strategy.ts b/src/api/cta_strategy.ts
new file mode 100644
index 0000000..694497a
--- /dev/null
+++ b/src/api/cta_strategy.ts
@@ -0,0 +1,69 @@
+import request from '../utils/request'
+
+"CTA strategy"
+
+"strategy list"
+const get_strategy_list = () => {
+  return request({
+    url: '/auth/api/v1/trader',
+    method: 'PUT',
+  })
+}
+
+"upload a strategy"
+const upload_strategy = () => {
+  return request({
+    url: '/auth/api/v1/trader',
+    method: 'PUT',
+  })
+}
+
+"load a strategy"
+const load_strategy = (strategy_id: string) => {
+  return request({
+    url: '/auth/api/v1/trader',
+    method: 'PUT',
+  })
+}
+
+"unload a strategy"
+const unload_strategy = (strategy_id: string) => {
+  return request({
+    url: '/auth/api/v1/trader',
+    method: 'PUT',
+  })
+}
+
+"start a strategy"
+const start_strategy = (strategy_id: string) => {
+  return request({
+    url: '/auth/api/v1/trader',
+    method: 'PUT',
+  })
+}
+
+"stop a strategy"
+const stop_strategy = (strategy_id: string) => {
+  return request({
+    url: '/auth/api/v1/trader',
+    method: 'PUT',
+  })
+}
+
+"remove a strategy"
+const remove_strategy = (strategy_id: string) => {
+  return request({
+    url: '/auth/api/v1/trader',
+    method: 'PUT',
+  })
+}
+
+export {
+  get_strategy_list,
+  upload_strategy,
+  load_strategy,
+  unload_strategy,
+  start_strategy,
+  stop_strategy,
+  remove_strategy
+}
\ No newline at end of file
diff --git a/src/api/trader.ts b/src/api/trader.ts
new file mode 100644
index 0000000..e5912eb
--- /dev/null
+++ b/src/api/trader.ts
@@ -0,0 +1,11 @@
+import request from '../utils/request'
+
+const get_stock_data = (data: Object) => {
+  return request({
+    url: '/auth/api/v1/trader',
+    method: 'PUT',
+    data: data
+  })
+}
+
+export { get_stock_data }
\ No newline at end of file
diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue
index 88dee1a..a8a15fe 100644
--- a/src/components/layout/NavBar.vue
+++ b/src/components/layout/NavBar.vue
@@ -49,7 +49,7 @@ const doLogin = () => {
 }
 const doLogout = () => {
   dialogVisible.value = false
-  logout(tenant.id).then(() => {
+  logout(tenant.id).catch(() => { console.log(1) }).finally(() => {
     tenant.logout()
     router.push({
       path: '/login'
diff --git a/src/router/index.ts b/src/router/index.ts
index d2819c8..c2c10fb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -61,6 +61,13 @@ const routes: Array<RouteRecordRaw> = [
           name: '一键打包'
         }
       },
+      {
+        path: '/trader',
+        component: () => import('../view/trader/index.vue'),
+        meta: {
+          name: 'trader'
+        }
+      },
     ]
   },
   {
diff --git a/src/service/trader.ts b/src/service/trader.ts
new file mode 100644
index 0000000..613763d
--- /dev/null
+++ b/src/service/trader.ts
@@ -0,0 +1,209 @@
+import * as echarts from 'echarts'
+const upColor = '#ec0000'
+const upBorderColor = '#8A0000'
+const downColor = '#00da3c'
+const downBorderColor = '#008F28'
+import { EChartsOption } from 'echarts'
+
+type DataItem = [string, number, number, number, number, number, number];
+
+const option: EChartsOption = {
+  dataset: {
+    source: []
+  },
+  title: {
+    text: ''
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line'
+    }
+  },
+  toolbox: {
+    feature: {
+      dataZoom: {
+        yAxisIndex: false
+      }
+    }
+  },
+  grid: [
+    {
+      left: '10%',
+      right: '10%',
+      bottom: 200
+    },
+    {
+      left: '10%',
+      right: '10%',
+      height: 80,
+      bottom: 80
+    }
+  ],
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      // inverse: true,
+      axisLine: { onZero: false },
+      splitLine: { show: false },
+      min: 'dataMin',
+      max: 'dataMax'
+    },
+    {
+      type: 'category',
+      gridIndex: 1,
+      boundaryGap: false,
+      axisLine: { onZero: false },
+      axisTick: { show: false },
+      splitLine: { show: false },
+      axisLabel: { show: false },
+      min: 'dataMin',
+      max: 'dataMax'
+    }
+  ],
+  yAxis: [
+    {
+      scale: true,
+      splitArea: {
+        show: true
+      }
+    },
+    {
+      scale: true,
+      gridIndex: 1,
+      splitNumber: 2,
+      axisLabel: { show: false },
+      axisLine: { show: false },
+      axisTick: { show: false },
+      splitLine: { show: false }
+    }
+  ],
+  dataZoom: [
+    {
+      type: 'inside',
+      xAxisIndex: [0, 1],
+      start: 10,
+      end: 100
+    },
+    {
+      show: true,
+      xAxisIndex: [0, 1],
+      type: 'slider',
+      bottom: 10,
+      start: 10,
+      end: 100
+    }
+  ],
+  visualMap: {
+    show: false,
+    seriesIndex: 1,
+    dimension: 6,
+    pieces: [
+      {
+        value: 1,
+        color: upColor
+      },
+      {
+        value: -1,
+        color: downColor
+      }
+    ]
+  },
+  series: [
+    {
+      type: 'candlestick',
+      itemStyle: {
+        color: upColor,
+        color0: downColor,
+        borderColor: upBorderColor,
+        borderColor0: downBorderColor
+      },
+      encode: {
+        x: 0,
+        y: [1, 4, 3, 2]
+      }
+    },
+    {
+      name: 'Volumn',
+      type: 'bar',
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      itemStyle: {
+        color: '#7fbe9e'
+      },
+      large: true,
+      encode: {
+        x: 0,
+        y: 5
+      }
+    }
+  ]
+}
+
+const generateOHLC = (count: number) => {
+  let data: DataItem[] = [];
+
+  let xValue = +new Date(2011, 0, 1);
+  let minute = 60 * 1000;
+  let baseValue = Math.random() * 12000;
+  let boxVals = new Array(4);
+  let dayRange = 12;
+
+  for (let i = 0; i < count; i++) {
+    baseValue = baseValue + Math.random() * 20 - 10;
+
+    for (let j = 0; j < 4; j++) {
+      boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue;
+    }
+    boxVals.sort();
+
+    let openIdx = Math.round(Math.random() * 3);
+    let closeIdx = Math.round(Math.random() * 2);
+    if (closeIdx === openIdx) {
+      closeIdx++;
+    }
+    let volumn = boxVals[3] * (1000 + Math.random() * 500);
+
+    // ['open', 'close', 'lowest', 'highest', 'volumn']
+    // [1, 4, 3, 2]
+    data[i] = [
+      echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', (xValue += minute)),
+      +boxVals[openIdx].toFixed(2), // open
+      +boxVals[3].toFixed(2), // highest
+      +boxVals[0].toFixed(2), // lowest
+      +boxVals[closeIdx].toFixed(2), // close
+      +volumn.toFixed(0),
+      getSign(data, i, +boxVals[openIdx], +boxVals[closeIdx], 4) // sign
+    ];
+  }
+
+  return data;
+}
+
+const getSign = (
+  data: DataItem[],
+  dataIndex: number,
+  openVal: number,
+  closeVal: number,
+  closeDimIdx: number
+) => {
+  var sign
+  if (openVal > closeVal) {
+    sign = -1
+  } else if (openVal < closeVal) {
+    sign = 1
+  } else {
+    sign =
+      dataIndex > 0
+        ? // If close === open, compare with close of last record
+        data[dataIndex - 1][closeDimIdx] <= closeVal
+          ? 1
+          : -1
+        : // No record of previous, set to be positive
+        1
+  }
+  return sign
+}
+
+export { generateOHLC, option }
\ No newline at end of file
diff --git a/src/view/dashboard/index.vue b/src/view/dashboard/index.vue
index 510108d..f097291 100644
--- a/src/view/dashboard/index.vue
+++ b/src/view/dashboard/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="about" ref="bookmarks" id="bookmarks" :style="{
     width: '600px',
-    height: '300px'
+    height: '400px'
   }"></div>
 </template>
 
diff --git a/src/view/trader/cta_strategy.vue b/src/view/trader/cta_strategy.vue
new file mode 100644
index 0000000..3b1920e
--- /dev/null
+++ b/src/view/trader/cta_strategy.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="bookmark">
+    <!-- <el-form>
+      <el-row>
+        <el-col :span="6">
+          <el-form-item>
+            <el-input v-model="search_form.comment" placeholder="请输入" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="doSearch">检索</el-button>
+        </el-col>
+      </el-row>
+      <div class="tag_list">
+        <el-tag class="ml-2 click-icon" :type="item.clicked ? 'danger' : 'info'" v-for="(item) in bookmark_types"
+          @click="handleTags(item)">{{ item.bk_type_name }}</el-tag>
+        <el-button type="primary" @click="handleAddType" v-show="Tenant.account">增加</el-button>
+        <el-button type="primary" @click="handleManageType" v-show="Tenant.account">自定义</el-button>
+      </div>
+    </el-form>
+    <div class="create_dialog">
+      <el-button type="primary" @click="handleInsert" v-show="Tenant.account">新建</el-button>
+    </div>
+
+    <el-table ref="multipleTableRef" :data="strategy_list" @selection-change="handleSelectionChange" style="width: 100%">
+      <el-table-column type="selection" width="55" />
+      <el-table-column type="index" label="index" width="80" />
+      <el-table-column prop="bk_type_name" label="分类" width="100" />
+      <el-table-column prop="comment" label="名称" width="180" />
+      <el-table-column prop="facvion" label="图标" width="60" />
+      <el-table-column class="click-icon" prop="url" label="url">
+        <template #default="scope">
+          <span style="cursor: pointer" @click="openUrl(scope.row.url)">{{ scope.row.url }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-icon :size="20" @click="copyNumber(scope.row)" class="click-icon">
+            <CopyDocument />
+          </el-icon>
+          <el-button class="click-icon" size="small" @click="handleEdit(scope.$index, scope.row)"
+            v-show="Tenant.account">编辑
+          </el-button>
+          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" v-show="Tenant.account">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top: 20px">
+      <el-button @click="toggleSelection([tableData[1], tableData[2]])">反选</el-button>
+      <el-button @click="toggleSelection()">清除</el-button>
+    </div> -->
+
+    <!-- <el-dialog v-model="dialogFormVisible" title="添加书签">
+      <bookmark_dialog :dialog_form="currentDialogData" :operate_code="operate" :types="bookmark_types"
+        @on-concel="closeDialog" @on-submit="doSubmit"></bookmark_dialog>
+    </el-dialog>
+
+    <el-dialog v-model="dialogVisible">
+      <delete_dialog :delete_id="currentDialogData.bk_id" @on-submit="doDelete"></delete_dialog>
+    </el-dialog>
+
+    <el-dialog v-model="createTypeDialogVisible">
+      <createType_dialog @on-update="doUpdate"></createType_dialog>
+    </el-dialog> -->
+
+    <!-- <el-dialog v-model="typeDialogVisible">
+      <bookmarkType_dialog :delete_id="currentDialogData.bk_id" @on-submit="doDelete"></bookmarkType_dialog>
+    </el-dialog> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+import {
+  get_strategy_list,
+  upload_strategy,
+  load_strategy,
+  unload_strategy,
+  start_strategy,
+  stop_strategy,
+  remove_strategy
+} from '../../api/cta_strategy'
+
+
+type Strategy = {
+  strategy_id: string,
+  strategy_name: string,
+}
+
+const strategy_list = reactive<Strategy[]>([])
+
+const on_list = () => {
+  get_strategy_list().then(res => {
+    res.data.forEach((item: Strategy, index: number) => {
+      strategy_list.push(item)
+    })
+  })
+}
+
+const on_upload = () => {
+  upload_strategy().then(res => {
+
+  })
+}
+
+const on_load = (strategy_id: string) => {
+  load_strategy(strategy_id).then(res => {
+
+  })
+}
+
+const on_unload = (strategy_id: string) => {
+  unload_strategy(strategy_id).then(res => {
+
+  })
+}
+
+const on_start = (strategy_id: string) => {
+  start_strategy(strategy_id).then(res => {
+
+  })
+}
+
+const on_stop = (strategy_id: string) => {
+  stop_strategy(strategy_id).then(res => {
+
+  })
+}
+
+const on_remove = (strategy_id: string) => {
+  remove_strategy(strategy_id).then(res => {
+
+  })
+}
+
+
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/view/trader/index.vue b/src/view/trader/index.vue
new file mode 100644
index 0000000..2fc0ab1
--- /dev/null
+++ b/src/view/trader/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="about" ref="trader_chart" id="trader_chart" :style="{
+    width: '1200px',
+    height: '600px'
+  }"></div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+import * as echarts from 'echarts'
+import { EChartsOption } from 'echarts';
+import { onMounted, ref } from 'vue'
+import { generateOHLC, option } from '../../service/trader'
+import { get_stock_data } from '../../api/trader'
+
+
+const trader_chart = ref<HTMLElement>()
+
+const data_count = 2e5;
+
+
+get_stock_data({}).then((response) => {
+  response.data.forEach((element: any) => {
+    console.log(element)
+  });
+})
+
+const data = generateOHLC(data_count);
+
+const options = reactive<EChartsOption>(option)
+
+""
+const set_option = () => {
+  options.dataset = {
+    source: data
+  }
+  options.title = {
+    text: 'Data Amount: ' + echarts.format.addCommas(data_count)
+  }
+}
+
+const on_tick = () => {
+
+}
+const on_start = () => {
+}
+onMounted(() => {
+
+  set_option()
+
+  const myEcharts = echarts.init(trader_chart.value!)
+
+  myEcharts.setOption(options)
+
+})
+
+</script>
+
+<style>
+.dashboard {
+  background-color: beige;
+}
+</style>
\ No newline at end of file