st-comp 0.0.5 → 0.0.6

package/src/App.vue

@@ -1,24 +1,87 @@
-<script setup lang="ts">
-  import Table from './components/Table/index.vue'
-</script>
-
 <template>
-  <div>
-    <Table />
+  <div class="container">
+    <div class="header">前端公共组件库</div>
+    <div class="content">
+      <div class="content-left">
+        <el-menu
+          :default-active="route.path"
+          class="el-menu-vertical-demo"
+          text-color="rgba(255, 255, 255, 0.65)"
+          active-text-color="#ffffff"
+          background-color="#001529"
+          :router="true"
+        >
+          <el-menu-item
+            v-for="item in routes"
+            :index="item.path"
+            :key="item.name"
+            popper-append-to-body
+          >
+            <template #title>{{ item.name }}</template>
+          </el-menu-item>
+        </el-menu>
+      </div>
+      <div class="content-right">
+        <div class="content-right-main">
+          <router-view />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+<script setup lang="ts">
+  import { useRoute } from 'vue-router'
+  import routes from './router/routes.ts'
+
+  const route = useRoute()
+</script>
+
+<style>
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  height: calc(100% - 64px);
+}
+.el-menu {
+  --el-menu-hover-bg-color: #1677ff !important;
+  border: none !important;
+}
+.el-menu li {
+  font-size: 18px;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+.el-menu-item.is-active {
+  background-color: #1677ff;
 }
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
+</style>
+
+<style lang="scss" scoped>
+.container {
+  min-height: 100vh;
+  .header {
+    height: 64px;
+    padding-left: 22px;
+    background: #001529;
+    color: #fff;
+    line-height: 64px;
+    font-size: 22px;
+  }
+  .content {
+    display: flex;
+    height: calc(100vh - 64px);
+    &-left {
+      width: 200px;
+      height: 100%;
+      background: #001529;
+    }
+    &-right {
+      flex: 1;
+      background: #ebebeb;
+      padding: 20px;
+      &-main {
+        background: #fff;
+        height: 100%;
+      }
+    }
+  }
 }
 </style>

package/src/components/Kline/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="{ width: '50%', height: '600px' }">
+  <div id="Kline">
     <st-kline
       code="ao8888.SHFE"
       endTime="2023-10-13T16:24:28"
@@ -13,5 +13,9 @@
 </script>
 
 <style scoped>
-
+#Kline{
+  margin: auto;
+  width: 1200px;
+  height: 600px;
+}
 </style>

package/src/components/KlineGroup/index.vue

@@ -0,0 +1,58 @@
+<!-- KlineGroup [默认六宫格]多周期业务K线组件 -->
+<script setup lang="ts">
+  import dayjs from 'dayjs'
+  const props = defineProps({
+    // 品种代码
+    code: {
+      type: String,
+      require: true,
+    },
+    // 周期名称
+    freqNameArray: {
+      type: Array,
+      default: () => {
+        return ['5m', '15m', '30m', '60m', '1d', '1w']
+      },
+    },
+    // 指标类型
+    indicatorType: {
+      type: String,
+      default: 'DKX_EMA',
+    },
+    // 交易日期
+    tradeDate: {
+      type: String,
+      default: dayjs().format('YYYY-MM-DD'),
+    },
+  })
+  console.log('六宫格需要接收到的参数:',props)
+</script>
+
+<template>
+  <h2>传入的交易时间: 2023-10-13</h2>
+  <div class="KlineGroup element-dark">
+    <st-kline
+      class="st-kline"
+      v-for="item in freqNameArray"
+      code="ao8888.SHFE"
+      indicator="DKX_EMA"
+      :frequency="item"
+      tradeDate="2023-10-13"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .KlineGroup {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    height: 800px;
+    justify-content: space-between;
+    align-content: space-between;
+    .st-kline {
+      width: calc(100% / 3 - 2px);
+      height: calc(100% / 2 - 2px);
+    }
+  }
+</style>

package/src/main.ts

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

package/src/pages/Button/index.vue

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

package/src/pages/Echarts/index.vue

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

package/src/pages/Kline/index.vue

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

package/src/pages/List/index.vue

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

package/src/pages/Table/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div :style="{ width: '100%', 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 lang="scss" scoped>
+
+</style>

package/src/router/index.ts

@@ -0,0 +1,9 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import routes from './routes'
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+})
+
+export default router

package/src/router/routes.ts

@@ -0,0 +1,27 @@
+export default [
+  {
+    path: '/button',
+    name: 'Button',
+    component: () => import('@/pages/Button/index.vue'),
+  },
+  {
+    path: '/echarts',
+    name: 'Echarts',
+    component: () => import('@/pages/Echarts/index.vue'),
+  },
+  {
+    path: '/kline',
+    name: 'Kline',
+    component: () => import('@/pages/Kline/index.vue'),
+  },
+  {
+    path: '/list',
+    name: 'List',
+    component: () => import('@/pages/List/index.vue'),
+  },
+  {
+    path: '/table',
+    name: 'Table',
+    component: () => import('@/pages/Table/index.vue'),
+  },
+]

package/src/style.css

@@ -0,0 +1,4 @@
+html, body {
+  padding: 0;
+  margin: 0;
+}

package/src/vite-env.d.ts

@@ -1 +1,8 @@
 /// <reference types="vite/client" />
+// vue3 报错提示 找不到模块“./XXX.vue”或其相应的类型声明
+// 报错原因：typescript 只能理解 .ts 文件，无法理解 .vue文件
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/vite.config.ts

@@ -3,6 +3,7 @@ import vue from '@vitejs/plugin-vue'
 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'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -14,6 +15,7 @@ export default defineConfig({
     Components({
       resolvers: [ElementPlusResolver()],
     }),
+    createExportFile(),
   ],
   build: {
     outDir: 'lib',
@@ -21,6 +23,23 @@ export default defineConfig({
       entry: './packages/index.ts',
       name: 'Bundle',
       fileName: 'bundle'
+    },
+    rollupOptions: {
+      external: ['vue', 'echarts', 'element-plus'],
+    }
+  },
+  resolve: {
+    alias: {
+      '@': './src'
+    }
+  },
+  server: {
+    proxy: {
+      '/proxy': {
+        target: 'http://192.168.12.49:88/',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/proxy/, ''),
+      }
     }
   }
 })

package/vitePlugins/createExportFile.ts

@@ -0,0 +1,97 @@
+/**
+ * 创建统一的导出文件
+ */
+import fs from 'fs'
+
+const toFirstLowerCase = (word) => {
+  return `${word[0].toLowerCase()}${word.substr(1)}`
+}
+
+export default () => {
+  return {
+    name: 'createExport',
+    buildStart() {
+      fs.readdir('./packages', (err, files) => {
+        if (err) {
+          console.error(err)
+          return
+        }
+        const filterFiles = files.filter(fileName => !fileName.includes('.'))
+        // 生成每个组件的导出文件
+        filterFiles.forEach(fileName => {
+          const content = `import { App } from "vue";
+import St${fileName} from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("st-${toFirstLowerCase(fileName)}", St${fileName});
+  },
+}
+`
+          fs.writeFile(`./packages/${fileName}/index.ts`, content, (err) => {
+            if (err) throw err
+          })
+        })
+        // 生成统一导出文件
+        const mainContent = `import { App } from "vue"
+${filterFiles.map(fileName => `import St${fileName} from "./${fileName}/index.ts"`).join(`
+`)}
+        
+export default {
+  install(app: App) {
+    ${filterFiles.map(fileName => `St${fileName}.install(app)`).join(`
+    `)}
+  },
+}
+        `
+        fs.writeFile(`./packages/index.ts`, mainContent, (err) => {
+          if (err) throw err
+        })
+        // 生成routes配置
+        const routesContent = `export default [
+  ${filterFiles.map(fileName => `{
+    path: '/${toFirstLowerCase(fileName)}',
+    name: '${fileName}',
+    component: () => import('@/pages/${fileName}/index.vue'),
+  },`).join(`
+  `)}
+]
+`
+        fs.writeFile(`./src/router/routes.ts`, routesContent, (err) => {
+          if (err) throw err
+        })
+        // 如果没有pages文件，则生成pages文件
+        fs.readdir('./src/pages', (pagesErr, pagesFiles) => {
+          if (pagesErr) {
+            console.error(pagesErr)
+            return
+          }
+          const filterPagesFiles = pagesFiles.filter(fileName => !fileName.includes('.'))
+          filterFiles.forEach(fileName => {
+            if (!filterPagesFiles.includes(fileName)) {
+              const pagesContent = `<template>
+  <div>
+    ${fileName}
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+`
+              fs.mkdir(`./src/pages/${fileName}`, err => {
+                if(err) throw err;
+                fs.writeFile(`./src/pages/${fileName}/index.vue`, pagesContent, (err) => {
+                  if (err) throw err
+                })
+              })
+            }
+          })
+        })
+      })
+    }
+  }
+}