st-comp 0.0.3 → 0.0.5

package/packages/Kline/utils.ts

@@ -0,0 +1,158 @@
+import axios from 'axios'
+import type { KlineDataItem, IndicatorDataItem, InOption } from './type.d.ts'
+
+// 获取k线数据
+export const getKline = (code: string, bar_count: number, dt: string, frequency: string) => {
+  return axios(`http://116.62.161.92:8005/history_kline?code=${code}&bar_count=${bar_count}&dt=${dt}&frequency=${frequency}`)
+}
+
+// 获取指标线列表
+export const getIndicatorList = () => {
+  return axios('http://116.62.161.92:8005/get_indicator')
+}
+
+// 获取指标线数据
+export const getIndicator = (code: string, start_date: string, end_date: string, frequency: string, indicator: string) => {
+  return axios(`http://116.62.161.92:8005/realtime_indicator?code=${code}&start_date=${start_date}&end_date=${end_date}&indicator=${indicator}&frequency=${frequency}`)
+}
+
+
+export const formatValue = (value: number) => {
+  return value || value === 0 ? Math.round(value * 1000) / 1000 : null
+}
+
+export const formatPrice = (value: number) => {
+  if (value >= 1000000000000) {
+    return `${(value / 1000000000000).toFixed(2)}万亿`
+  } else if (value >= 100000000) {
+    return `${(value / 100000000).toFixed(2)}亿`
+  } else if (value >= 10000) {
+    return `${(value / 10000).toFixed(2)}万`
+  } else {
+    return value.toFixed(2)
+  }
+}
+
+export const getOption = async(data: InOption) => {
+  const {
+    kLineData,
+    indicatorData,
+    indicator,
+    indicatorList,
+    defaultShowBarCount
+  } = data
+  // 处理k线数据，x轴数据
+  const candlestickData: any[] = [] // k线数据
+  const xAxisData: number[] = [] // x轴数据
+  const kLineLength = kLineData.length // k线条数
+
+  kLineData.forEach((item: KlineDataItem) => {
+    candlestickData.push([
+      formatValue(item[1]),
+      formatValue(item[4]),
+      formatValue(item[3]),
+      formatValue(item[2]),
+    ])
+    xAxisData.push(item[0])
+  })
+
+  // 处理指标线数据
+  const indicatorInfo = indicatorList[indicator]
+  const lineSeries = Object.keys(indicatorData[0]).filter(i => i !== 'datetime').map((key: string) => {
+    let color = 'rgba(238, 238, 238, 0.5)'
+    if (indicatorInfo && indicatorInfo[key]) {
+      color = `#${indicatorInfo[key].split('#')[1]}`
+    }
+    return {
+      name: key,
+      type: 'line',
+      symbol: 'none',
+      data: indicatorData.map(i => i[key]),
+      lineStyle: {
+        width: 1,
+      },
+      itemStyle: {
+        color,
+      },
+    }
+  })
+
+  return {
+    dataset: {
+      id: 'data',
+      source: {
+        kLineData,
+      },
+    },
+    grid: {
+      left: '60px',
+      top: '40px',
+      right: '60px',
+      bottom: '30px',
+    },
+    tooltip: {
+      trigger: 'axis',
+      showContent: false,
+      axisPointer: {
+        type: 'cross',
+        label: {
+          formatter: (data: any) => {
+            const { axisDimension, value } = data
+            if(axisDimension === 'x') {
+              return value
+            } else {
+              return String(formatValue(value))
+            }
+          }
+        },
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: xAxisData,
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dotted',
+        },
+      },
+      axisLabel: {
+        show: true,
+      },
+    },
+    yAxis: [
+      {
+        index: 0,
+        min: 'dataMin',
+        axisLine: {
+          show: true,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dotted',
+          },
+        },
+        axisLabel: {
+          formatter: (value: number) => formatValue(value)
+        },
+      },
+    ],
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: [0, 0],
+        startValue: kLineLength >= defaultShowBarCount ? kLineLength - defaultShowBarCount : 0,
+        endValue: kLineLength - 1,
+      },
+    ],
+    series: [
+      {
+        name: 'k线',
+        type: 'candlestick',
+        data: candlestickData,
+      },
+      ...lineSeries,
+    ],
+  }
+}

package/packages/List/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import StList from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("StList", StList);
+  },
+};

package/packages/List/index.vue

@@ -5,7 +5,7 @@
     <li>3</li>
   </ul>
 </template>
-<script setup lang="ts">
+<script setup lang="ts" name="st-list">
 </script>
 
 <style scoped>

package/packages/Table/components/Button/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <template v-if="show">
+    <el-popconfirm
+      v-if="option.needCheck"
+      :title="option.needCheck.title"
+      @confirm="option.onClick(scope.row, scope.$index)"
+    >
+      <template #reference>
+        <el-button
+          :type="option.type"
+          :disabled="typeof option.disabled === 'function' ? option.disabled(scope.row, scope.$index) : option.disabled"
+        >
+          {{ typeof option.text === 'function' ? option.text(scope.row, scope.$index) : option.text }}
+        </el-button>
+      </template>
+    </el-popconfirm>
+    <el-button
+      v-else
+      :type="option.type"
+      :disabled="typeof option.disabled === 'function' ? option.disabled(scope.row, scope.$index) : option.disabled"
+      @click="option.onClick(scope.row, scope.$index)"
+    >
+      {{ typeof option.text === 'function' ? option.text(scope.row, scope.$index) : option.text }}
+    </el-button>
+  </template>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+
+  const props = defineProps({
+    option: {
+      type: Object,
+      required: true
+    },
+    scope: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const show = computed(() => {
+    const { option, scope } = props
+    if(typeof option.show === 'function') {
+      return option.show(scope.row, scope.$index)
+    } else if (option.show === false) {
+      return false
+    }
+    return true
+  })
+</script>
+
+<style lang="scss" scoped>
+</style>

package/packages/Table/components/Formatter/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    :style="typeof option.style === 'function' ? option.style(scope.row[option.prop], scope.row) : option.style"
+  >
+    {{
+      typeof option.formatter === 'function' ? option.formatter(scope.row[option.prop], scope.row) : scope.row[option.prop]
+    }}
+  </div>
+</template>
+
+<script setup lang="ts">
+
+  defineProps({
+    option: {
+      type: Object,
+      required: true,
+    },
+    scope: {
+      type: Object,
+      required: true,
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+</style>

package/packages/Table/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import StTable from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("st-table", StTable);
+  },
+};

package/packages/Table/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-table
+    v-loading="loading"
+    :data="data"
+    stripe
+    style="width: 100%"
+    @sort-change="sortChange"
+  >
+    <el-table-column
+      v-for="item in columnConfig"
+      :key="item.prop"
+      :prop="item.prop"
+      :label="item.label"
+      :sortable="item.sortable"
+      :width="item.width"
+      :min-width="item.minWidth"
+    >
+      <template
+        v-if="item.type === 'formatter'"
+        #default="scope"
+      >
+        <Formatter
+          :option="item"
+          :scope="scope"
+        />
+      </template>
+      <template
+        v-else-if="item.type === 'slot'"
+        #default="scope"
+      >
+        <slot
+          :name="item.slot"
+          :row="scope.row"
+        />
+      </template>
+      <template
+        v-else-if="item.type === 'btns'"
+        #default="scope"
+      >
+        <template
+          v-for="(btn, btnIndex) in item.btns"
+          :key="`${btn.text}-${btnIndex}`"
+        >
+          <el-popover
+            v-if="btn.children"
+            placement="bottom"
+            trigger="hover"
+            :popper-style="{ minWidth: '0px', width: null }"
+          >
+            <template #reference>
+              <el-icon
+                :style="{ marginLeft: '10px', verticalAlign: '-5px', cursor: 'pointer' }"
+                size="20"
+              >
+                <MoreFilled />
+              </el-icon>
+            </template>
+            <div
+              v-for="(subBtn, subBtnIndex) in btn.children"
+              :key="`${subBtn.text}-${subBtnIndex}`"
+              :style="{ marginTop: subBtnIndex === 0 ? 0 : '10px'}"
+            >
+              <Button
+                :option="subBtn"
+                :scope="scope"
+              />
+            </div>
+          </el-popover>
+          <Button
+            v-else
+            :option="btn"
+            :scope="scope"
+          />
+        </template>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { MoreFilled } from '@element-plus/icons-vue'
+  import Button from './components/Button/index.vue'
+  import Formatter from './components/Formatter/index.vue'
+
+  const emit = defineEmits(['sortChange'])
+  const props = defineProps({
+    data: {
+      type: Array,
+      default: () => []
+    },
+    column: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: () => false
+    }
+  })
+
+  const columnConfig: any = computed(() => {
+    return props.column.filter((i: any) => i.show !== false)
+  })
+
+  const sortChange = (params: any) => {
+    emit('sortChange', params)
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

package/packages/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import StTable from "./Table/index.ts";
+
+export default {
+  install(app: App) {
+    StTable.install(app)
+  },
+};

package/src/App.vue

@@ -1,21 +1,11 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-import Button from '../packages/Button/index.vue'
-import List from '../packages/List/index.vue'
+  import Table from './components/Table/index.vue'
 </script>
 
 <template>
   <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-      <Button></Button>
-      <List></List>
-    </a>
+    <Table />
   </div>
-  <HelloWorld msg="Vite + Vue" />
 </template>
 
 <style scoped>

package/src/components/Echarts/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div :style="{ width: '400px', height: '400px' }">
+    <st-echarts
+      :option="option"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  const option = ref({
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        data: [150, 230, 224, 218, 135, 147, 260],
+        type: 'line'
+      }
+    ]
+  })
+</script>
+
+<style scoped>
+
+</style>

package/src/components/Kline/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div :style="{ width: '50%', height: '600px' }">
+    <st-kline
+      code="ao8888.SHFE"
+      endTime="2023-10-13T16:24:28"
+      indicator="DKX_EMA"
+      frequency="1m"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+
+</style>

package/src/components/Table/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div :style="{ width: '50%', height: '600px' }">
+    <st-table
+      :data="data"
+      :column="column"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  const data = [
+    { name: 'name1' },
+    { name: 'name2' },
+    { name: 'name3' },
+  ]
+
+  const column = [
+    {
+      label: '名称',
+      prop: 'name',
+    },
+  ]
+</script>
+
+<style scoped>
+
+</style>

package/src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import stComp from '../packages/index.ts'
 
-createApp(App).mount('#app')
+createApp(App).use(stComp).mount('#app')

package/src/style.css

@@ -1,80 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

package/vite.config.ts

@@ -1,16 +1,26 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { resolve } from 'path'
+import AutoImport from 'unplugin-auto-import/vite' // element-plus自动引用使用
+import Components from 'unplugin-vue-components/vite' // element-plus自动引用使用
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // element-plus自动引用使用
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+  ],
   build: {
     outDir: 'lib',
     lib: {
-      entry: resolve(__dirname, './packages/Button/index.ts'),
+      entry: './packages/index.ts',
       name: 'Bundle',
       fileName: 'bundle'
-    },
+    }
   }
 })

package/src/components/HelloWorld.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>