st-comp 0.0.13 → 0.0.16

package/src/pages/Kline/index.vue

@@ -1,21 +1,90 @@
+<!-- 业务K线组件Demo页面 -->
+<script setup lang="ts">
+  import { ref, computed } from 'vue'
+  import SingleCycleSingleVariety from './components/SingleCycleSingleVariety.vue'
+  import MultiCycleSingleVariety from './components/MultiCycleSingleVariety.vue'
+  // 当前选择的标签页值
+  const elTab = ref(1)
+  // 当前加载的动态组件
+  const componentName = computed(() => {
+    const componentMap = new Map([
+      [1, SingleCycleSingleVariety],
+      [2, MultiCycleSingleVariety],
+    ])
+    return componentMap.get(elTab.value)
+  })
+  // 调试按钮
+  const deBugValue = ref(1)
+
+  const elTabChange = () => {
+    deBugValue.value = 1
+  }
+</script>
+
 <template>
-  <div id="Kline">
-    <st-kline
-      code="ao8888.SHFE"
-      tradeDate="2023-10-13T16:24:28"
-      indicator="DKX_EMA"
-      frequency="1m"
-    />
+  <div id="kline-page">
+    <el-tabs v-model="elTab" @tab-change="elTabChange">
+      <el-tab-pane
+        label="单品种单周期"
+        :name="1"
+      />
+      <el-tab-pane
+        label="单品种多周期"
+        :name="2"
+      />
+    </el-tabs>
+    <!-- 调试按钮 -->
+    <el-radio-group
+      class="deBugGroup"
+      v-model="deBugValue"
+    >
+      <el-radio-button :label="1">正常模式</el-radio-button>
+      <el-radio-button :label="2">网络请求错误</el-radio-button>
+      <el-radio-button :label="3">空数据</el-radio-button>
+    </el-radio-group>
+    <div class="kline-page-body">
+      <Transition
+        name="animation"
+        mode="out-in"
+      >
+        <component
+          :is="componentName"
+          :deBugValue="deBugValue"
+        />
+      </Transition>
+    </div>
   </div>
 </template>
 
-<script setup lang="ts">
-</script>
-
-<style scoped>
-#Kline{
-  margin: auto;
-  width: 1200px;
-  height: 600px;
-}
+<style lang="scss" scoped>
+  #kline-page {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .deBugGroup {
+      position: absolute;
+      right: 0;
+      top: 7px;
+    }
+    .kline-page-body {
+      flex: 1;
+      overflow: hidden;
+      // 进入和离开的两个过程
+      .animation-enter-active,
+      .animation-leave-active {
+        transition: all 0.3s ease-in-out;
+      }
+      // 进入的动画初始样式
+      .animation-enter-from {
+        transform: translateY(-500px);
+        opacity: 0;
+      }
+      // 离开的动画初始样式
+      .animation-leave-to {
+        transform: translateY(500px);
+        opacity: 0;
+      }
+    }
+  }
 </style>

package/src/router/routes.ts

@@ -9,11 +9,6 @@ export default [
     name: 'Dialog',
     component: () => import('../pages/Dialog/index.vue'),
   },
-  {
-    path: '/echarts',
-    name: 'Echarts',
-    component: () => import('../pages/Echarts/index.vue'),
-  },
   {
     path: '/kline',
     name: 'Kline',

package/src/style.css

@@ -1,4 +1,79 @@
 html, body {
   padding: 0;
   margin: 0;
+}
+
+.element-dark {
+  color-scheme: dark;
+  --el-color-primary: #409eff;
+  --el-color-primary-light-3: #3375b9;
+  --el-color-primary-light-5: #2a598a;
+  --el-color-primary-light-7: #213d5b;
+  --el-color-primary-light-8: #1d3043;
+  --el-color-primary-light-9: #18222c;
+  --el-color-primary-dark-2: #66b1ff;
+  --el-color-success: #67c23a;
+  --el-color-success-light-3: #4e8e2f;
+  --el-color-success-light-5: #3e6b27;
+  --el-color-success-light-7: #2d481f;
+  --el-color-success-light-8: #25371c;
+  --el-color-success-light-9: #1c2518;
+  --el-color-success-dark-2: #85ce61;
+  --el-color-warning: #e6a23c;
+  --el-color-warning-light-3: #a77730;
+  --el-color-warning-light-5: #7d5b28;
+  --el-color-warning-light-7: #533f20;
+  --el-color-warning-light-8: #3e301c;
+  --el-color-warning-light-9: #292218;
+  --el-color-warning-dark-2: #ebb563;
+  --el-color-danger: #f56c6c;
+  --el-color-danger-light-3: #b25252;
+  --el-color-danger-light-5: #854040;
+  --el-color-danger-light-7: #582e2e;
+  --el-color-danger-light-8: #412626;
+  --el-color-danger-light-9: #2b1d1d;
+  --el-color-danger-dark-2: #f78989;
+  --el-color-error: #f56c6c;
+  --el-color-error-light-3: #b25252;
+  --el-color-error-light-5: #854040;
+  --el-color-error-light-7: #582e2e;
+  --el-color-error-light-8: #412626;
+  --el-color-error-light-9: #2b1d1d;
+  --el-color-error-dark-2: #f78989;
+  --el-color-info: #909399;
+  --el-color-info-light-3: #6b6d71;
+  --el-color-info-light-5: #525457;
+  --el-color-info-light-7: #393a3c;
+  --el-color-info-light-8: #2d2d2f;
+  --el-color-info-light-9: #202121;
+  --el-color-info-dark-2: #a6a9ad;
+  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36),0px 8px 20px rgba(0, 0, 0, 0.72);
+  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
+  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
+  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72),0px 12px 32px #000000,0px 8px 16px -8px #000000;
+  --el-bg-color-page: #0a0a0a;
+  --el-bg-color: #141414;
+  --el-bg-color-overlay: #1d1e1f;
+  --el-text-color-primary: #E5EAF3;
+  --el-text-color-regular: #CFD3DC;
+  --el-text-color-secondary: #A3A6AD;
+  --el-text-color-placeholder: #8D9095;
+  --el-text-color-disabled: #6C6E72;
+  --el-border-color-darker: #636466;
+  --el-border-color-dark: #58585B;
+  --el-border-color: #4C4D4F;
+  --el-border-color-light: #414243;
+  --el-border-color-lighter: #363637;
+  --el-border-color-extra-light: #2B2B2C;
+  --el-fill-color-darker: #424243;
+  --el-fill-color-dark: #39393A;
+  --el-fill-color: #303030;
+  --el-fill-color-light: #262727;
+  --el-fill-color-lighter: #1D1D1D;
+  --el-fill-color-extra-light: #191919;
+  --el-fill-color-blank: transparent;
+  --el-mask-color: rgba(0, 0, 0, 0.8);
+  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
+  --el-disabled-bg-color: var(--el-fill-color-dark);
+  --el-disabled-border-color: var(--el-border-color-dark);
 }

package/vite.config.ts

@@ -4,10 +4,12 @@ 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自动引用使用
 import createExportFile from './vitePlugins/createExportFile.ts'
+import testRelease from './vitePlugins/testRelese.js'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
+export default ({ mode }) => {
+
+  const plugins = [
     vue(),
     AutoImport({
       resolvers: [ElementPlusResolver()],
@@ -16,31 +18,39 @@ export default defineConfig({
       resolvers: [ElementPlusResolver()],
     }),
     createExportFile(),
-  ],
-  build: {
-    outDir: 'lib',
-    lib: {
-      entry: './packages/index.ts',
-      name: 'Bundle',
-      fileName: 'bundle'
+  ]
+
+  if (mode === 'test') {
+    plugins.push(testRelease({ source: 'dist', target_dir: 'stComp' }))
+  }
+
+  return defineConfig({
+    base: './',
+    plugins,
+    build: mode === 'test' ? undefined : {
+      outDir: 'lib',
+      lib: {
+        entry: './packages/index.ts',
+        name: 'Bundle',
+        fileName: 'bundle'
+      },
+      rollupOptions: {
+        external: ['vue', 'echarts'],
+      }
     },
-    rollupOptions: {
-      external: ['vue', 'echarts'],
-    }
-  },
-  
-  resolve: {
-    alias: {
-      '@':'./src'
-    }
-  },
-  server: {
-    proxy: {
-      '/proxy': {
-        target: 'http://192.168.12.49:88/',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/proxy/, ''),
+    resolve: {
+      alias: {
+        '@':'./src'
+      }
+    },
+    server: {
+      proxy: {
+        '/proxy': {
+          target: 'http://192.168.12.49:88/',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/proxy/, ''),
+        }
       }
     }
-  }
-})
+  })
+}

package/vitePlugins/testRelese.ts

@@ -0,0 +1,67 @@
+/**
+ * 上传资源并重启nginx插件
+ * 需要安装依赖 ssh2-sftp-client ssh2
+ * 执行命令 npm install ssh2-sftp-client ssh2 -D
+ * 使用方法：
+ * 1.将该文件放到项目根目录中
+ * 2.vue.config.js中引入该文件到处的类
+ * 3.在configureWebpack.plugins中根据想要的环境（目前仅支持发测试环境）加入该插件
+ * 4.参数option.source为需要上传的文件夹路径，使用相对路径即可（必填）
+ *   参数option.target为需要上传到服务端的路径，当前默认为测试环境的路径（可选）
+ *   参数option.target_dir为上传到服务器后的文件夹名称（必填）
+ */
+import Client from 'ssh2-sftp-client'
+import Ssh2Client from 'ssh2'
+
+const defaultOption = {
+  source: '', // 需要上传的文件夹
+  target: '/usr/local/nginx/html/', // 服务端存放资源的路径
+  target_dir: '', // 目标文件夹名称
+  host: '192.168.12.49', // 服务器地址
+  port: '22', // 服务器断开
+  username: 'root', // 服务器登录用户名
+  password: 'hzst2020', // 服务器登录密码
+}
+
+// 重启nginx
+const reloadNginx = (serverMsg) => {
+  const conn = new Ssh2Client.Client()
+  conn.on('ready', () => {
+    conn.shell((err, stream) => {
+      if (err) throw err
+      stream.end('cd /usr/local/nginx/ \n/usr/local/nginx/sbin/nginx -s reload')
+      console.log('nginx重启完成')
+      conn.end()
+    })
+  }).connect(serverMsg)
+}
+
+// 上传文件
+const upload = async mergeOption => {
+  const { source, target, target_dir, host, port, username, password } = mergeOption
+  if (!source || !target_dir) {
+    console.log('发布插件参数有误，请检查后重试')
+    return
+  }
+  const sftp = new Client()
+  try {
+    const serverMsg = { host, port, username, password }
+    await sftp.connect(serverMsg)
+    console.log('服务器连接成功，开始上传资源')
+    await sftp.uploadDir(`./${source}`, `${target}${target_dir}`)
+    console.log('资源上传完成')
+    sftp.end()
+    reloadNginx(serverMsg)
+  } catch (err) {
+    console.log('发布失败', err)
+    sftp.end()
+  }
+}
+
+export default option => ({
+  name: 'release',
+  closeBundle() {
+    const mergeOption = { ...defaultOption, ...option }
+    upload(mergeOption)
+  }
+})

package/packages/Echarts/index.ts

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

package/packages/Echarts/index.vue

@@ -1,113 +0,0 @@
-<template>
-  <div
-    ref="chartRef"
-    class="st-echarts"
-  />
-</template>
-
-<script setup lang="ts">
-  import * as echarts from 'echarts'
-  import type { EChartsType } from 'echarts'
-  import { ref, onMounted, watch, onUnmounted } from 'vue'
-
-  const emit = defineEmits(['afterInit', 'highlight', 'contextmenu', 'resize', 'datazoom'])
-  const props = defineProps({
-    option: {
-      type: Object,
-      required: true,
-    }, // echarts配置
-    theme: {
-      type: String,
-      default: () => 'light',
-    }, // 主题
-    themeConfig: {
-      type: Object,
-      default: () => ({
-        name: 'basic',
-        light: {},
-        dark: {},
-      }),
-    }, // 样式配置
-  })
-
-  const chartRef = ref<HTMLElement>()
-  let chart: EChartsType // echarts实例
-  let chartDomObserver: any // echarts监视DOM变化
-
-  watch(
-    () => props.option,
-    () => {
-      chart.clear()
-      chart.setOption(props.option)
-      emit('afterInit', chart)
-    },
-    { deep: true }
-  )
-  watch(
-    () => props.theme,
-    () => {
-      chart.dispose()
-      const theme = registerTheme()
-      chart = echarts.init(chartRef.value, theme)
-      chart.setOption(props.option)
-      emit('afterInit', chart)
-    }
-  )
-
-  onMounted(() => {
-    const theme = registerTheme()
-    chart = echarts.init(chartRef.value, theme)
-    chart.setOption(props.option)
-    emit('afterInit', chart)
-
-    // 监听dom元素样式改变，执行resize方法
-    chartDomObserver = new ResizeObserver(() => {
-      chart.resize()
-      emit('resize', chart)
-    })
-    chartDomObserver.observe(chartRef.value)
-
-    addEventListener()
-  })
-
-  onUnmounted(() => {
-    chart.dispose()
-    // 取消dom元素样式改变监听
-    chartDomObserver.disconnect()
-  })
-
-  // 注册主题
-  const registerTheme = () => {
-    const { name, light, dark } = props.themeConfig
-    const theme = props.theme === 'dark' ? `${name}_dark` : name
-    echarts.registerTheme(theme, props.theme === 'dark' ? dark : light)
-    return theme
-  }
-
-  // 绑定事件
-  const addEventListener = () => {
-    // 高亮事件
-    chart.on('highlight', (data: any) => {
-      emit('highlight', data, chart)
-    })
-    // 移出图表事件
-    chart.on('globalout', () => {
-      emit('highlight', null, chart)
-    })
-    // 右键点击事件
-    chart.on('contextmenu', (params: any) => {
-      emit('contextmenu', params, chart)
-    })
-    // 右键点击事件
-    chart.on('datazoom', (params: any) => {
-      emit('datazoom', params, chart)
-    })
-  }
-</script>
-
-<style scoped>
-  .st-echarts {
-    width: 100%;
-    height: 100%;
-  }
-</style>

package/packages/Kline/kline_theme_dark.json

@@ -1,30 +0,0 @@
-
-{
-  "candlestick": {
-    "itemStyle": {
-      "color": "transparent",
-      "color0": "#00FFFF",
-      "borderColor": "#FF0000",
-      "borderColor0": "#00FFFF",
-      "borderWidth": 1
-    }
-  },
-  "categoryAxis": {
-    "splitLine": {
-      "lineStyle": {
-        "color": [
-          "#333"
-        ]
-      }
-    }
-  },
-  "valueAxis": {
-    "splitLine": {
-      "lineStyle": {
-        "color": [
-          "#333"
-        ]
-      }
-    }
-  }
-}

package/packages/Kline/kline_theme_light.json

@@ -1,30 +0,0 @@
-
-{
-  "candlestick": {
-    "itemStyle": {
-      "color": "transparent",
-      "color0": "#00FFFF",
-      "borderColor": "#FF0000",
-      "borderColor0": "#00FFFF",
-      "borderWidth": 1
-    }
-  },
-  "categoryAxis": {
-    "splitLine": {
-      "lineStyle": {
-        "color": [
-          "#333"
-        ]
-      }
-    }
-  },
-  "valueAxis": {
-    "splitLine": {
-      "lineStyle": {
-        "color": [
-          "#333"
-        ]
-      }
-    }
-  }
-}

package/src/components/Echarts/index.vue

@@ -1,31 +0,0 @@
-<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/pages/Echarts/index.vue

@@ -1,12 +0,0 @@
-<template>
-  <div>
-    Echarts
-  </div>
-</template>
-
-<script setup lang="ts">
-</script>
-
-<style lang="scss" scoped>
-
-</style>