Home Explore Help
Register Sign In
4dkankan
/
4dkankan-components
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat(架构调整): playground

rindy 2 years ago
parent
8f350b4f43
commit
dc064dc3a4
20 changed files with 3332 additions and 3579 deletions
Unified View Show Diff Stats
  1. 22 0
      playground/demo.html
  2. 14 16
      playground/index.html
  3. 0 5
      playground/src/App.vue
  4. 24 0
      playground/src/demos/basic.vue
  5. 0 0
      playground/src/demos/daikan.vue
  6. 0 0
      playground/src/demos/daikan2.vue
  7. 0 0
      playground/src/demos/minmap.vue
  8. 28 2
      playground/src/pages/tag.vue
  9. 0 9
      playground/src/main.ts
  10. 59 0
      playground/src/pages/Index.vue
  11. 0 30
      playground/src/pages/basic.vue
  12. 12 0
      playground/src/pages/demo.ts
  13. 5 0
      playground/src/pages/index.ts
  14. 29 25
      playground/src/router.ts
  15. 11 8
      playground/src/sdk.ts
  16. 2 2
      playground/tsconfig.json
  17. 47 34
      playground/vite.config.ts
  18. 3074 3447
      pnpm-lock.yaml
  19. 1 1
      prettier.config.js
  20. 4 0
      typings/env.d.ts

+ 22 - 0
playground/demo.html
View File 

@@ -0,0 +1,22 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
+    <link
 
+      rel="stylesheet"
 
+      href="//at.alicdn.com/t/c/font_2596172_5i5zp5tvfj9.css"
 
+    />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>kankan component</title>
 
+    <!-- <script src="//4dkk.4dage.com/v4-test/www/sdk/kankan-sdk-deps.js?v=4.6.0-alpha.10"></script>
 
+        <script src="//4dkk.4dage.com/v4-test/www/sdk/kankan-sdk.js?v=4.6.0-alpha.10"></script> -->
 
+
 
+    <script src="http://localhost:3099/dist/sdk/kankan-sdk-deps.js"></script>
 
+    <script src="http://localhost:3099/dist/sdk/kankan-sdk.js"></script>
 
+  </head>
 
+  <body>
 
+    <div id="app"></div>
 
+    <script type="module" src="/src/pages/demo.ts"></script>
 
+  </body>
 
+</html>

+ 14 - 16
playground/index.html
View File 

@@ -1,19 +1,17 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
-    <head>
 
-        <meta charset="UTF-8" />
 
-        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
-        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2596172_5i5zp5tvfj9.css" />
 
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <title>kankan component</title>
 
-        <script src="//4dkk.4dage.com/v4-test/www/sdk/kankan-sdk-deps.js?v=4.6.0-alpha.10"></script>
 
-        <script src="//4dkk.4dage.com/v4-test/www/sdk/kankan-sdk.js?v=4.6.0-alpha.10"></script>
 
-
 
-        <!-- <script src="http://localhost:3099/dist/sdk/kankan-sdk-deps.js"></script>
 
-        <script src="http://localhost:3099/dist/sdk/kankan-sdk.js"></script> -->
 
-    </head>
 
-    <body>
 
-        <div id="app"></div>
 
-        <script type="module" src="/src/main.ts"></script>
 
-    </body>
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
+    <link
 
+      rel="stylesheet"
 
+      href="//at.alicdn.com/t/c/font_2596172_5i5zp5tvfj9.css"
 
+    />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>kankan component</title>
 
+  </head>
 
+  <body>
 
+    <div id="app"></div>
 
+    <script type="module" src="/src/pages/index.ts"></script>
 
+  </body>
 
 </html>
 
 </html>

+ 0 - 5
playground/src/App.vue
View File 

@@ -1,5 +0,0 @@
 
-<script setup lang="ts"></script>
 
-
 
-<template>
 
-    <router-view />
 
-</template>

+ 24 - 0
playground/src/demos/basic.vue
View File 

@@ -0,0 +1,24 @@
 
+<script setup lang="ts">
 
+import { onMounted, inject } from 'vue'
 
+const __sdk: any = inject('__sdk')
 
+onMounted(() => {
 
+  __sdk.mount('#scene').render()
 
+})
 
+</script>
 
+
 
+<template>
 
+  <div id="scene"></div>
 
+</template>
 
+
 
+<style scoped>
 
+#scene {
 
+  width: 100vw;
 
+  height: 100vh;
 
+}
 
+#scene-front {
 
+  position: absolute;
 
+  left: 0;
 
+  top: 0;
 
+  z-index: 2;
 
+}
 
+</style>

playground/src/pages/daikan.vue → playground/src/demos/daikan.vue
View File


playground/src/pages/daikan2.vue → playground/src/demos/daikan2.vue
View File


playground/src/pages/minmap.vue → playground/src/demos/minmap.vue
View File


+ 28 - 2
playground/src/pages/tag.vue
View File 

@@ -1,4 +1,30 @@
 
 <script setup lang="ts">
 
 <script setup lang="ts">
 
+import { onMounted, inject } from 'vue'
 
+const __sdk: any = inject('__sdk')
 
+onMounted(() => {
 
+  __sdk.build()
 
+  __sdk.mount('#scene').render()
 
+})
 
+</script>
 
+
 
+<template>
 
+  <div id="scene"></div>
 
+</template>
 
+
 
+<style scoped>
 
+#scene {
 
+  width: 100vw;
 
+  height: 100vh;
 
+}
 
+#scene-front {
 
+  position: absolute;
 
+  left: 0;
 
+  top: 0;
 
+  z-index: 2;
 
+}
 
+</style>
 
+
 
+<!-- <script setup lang="ts">
 
 import { onMounted, inject, ref } from 'vue'
 
 import { onMounted, inject, ref } from 'vue'
 
 import { KkTag } from '@kankan-components/components'
 
 import { KkTag } from '@kankan-components/components'
 
 import '@kankan-components/theme-chalk/src/tag.scss'
 
 import '@kankan-components/theme-chalk/src/tag.scss'
 
@@ -10,7 +36,7 @@ onMounted(async () => {
 
   __sdk.TagManager.on('loaded', (data: any) =>
 
   __sdk.TagManager.on('loaded', (data: any) =>
 
     __sdk.TagManager.load((tags.value = data) && tags.value)
 
     __sdk.TagManager.load((tags.value = data) && tags.value)
 
   )
 
   )
 
-  __sdk.mount('#scene').render()
 
+  // __sdk.mount('#scene').render()
 
 })
 
 })
 
 
 
 const handleTagview = (data: any) => {
 
 const handleTagview = (data: any) => {
 
@@ -46,4 +72,4 @@ const handleTagview = (data: any) => {
 
   width: 100vw;
 
   width: 100vw;
 
   height: 100vh;
 
   height: 100vh;
 
 }
 
 }
 
-</style>
 
+</style> -->

+ 0 - 9
playground/src/main.ts
View File 

@@ -1,9 +0,0 @@
 
-import './style.css'
 
-import { createApp } from 'vue'
 
-import router from './router'
 
-import { installSDK } from './sdk'
 
-import App from './App.vue'
 
-const __app = createApp(App)
 
-__app.use(installSDK)
 
-__app.use(router)
 
-__app.mount('#app')

+ 59 - 0
playground/src/pages/Index.vue
View File 

@@ -0,0 +1,59 @@
 
+<script setup lang="ts">
 
+import { ref } from 'vue'
 
+
 
+const num = ref(new URLSearchParams(window.location.search).get('m') || '')
 
+const menu = ref([{ text: '基础用法', name: 'basic' }])
 
+const onLoad = () => {
 
+  const iframe = document.getElementById('demo') as HTMLIFrameElement
 
+  window.__sdk = iframe.contentWindow
 
+}
 
+</script>
 
+
 
+<template>
 
+  <div class="playground">
 
+    <aside>
 
+      <ul>
 
+        <li v-for="item in menu">
 
+          <a target="demo" :href="`demo.html?app=${item.name}`">{{
 
+            item.text
 
+          }}</a>
 
+        </li>
 
+      </ul>
 
+    </aside>
 
+    <main>
 
+      <iframe
 
+        id="demo"
 
+        name="demo"
 
+        frameborder="0"
 
+        :src="`demo.html?app=${menu[0].name}&m=${num}`"
 
+        @load="onLoad"
 
+      ></iframe>
 
+    </main>
 
+  </div>
 
+</template>
 
+
 
+<style>
 
+#app {
 
+  width: 100%;
 
+  height: 100%;
 
+  background-color: #fff;
 
+}
 
+.playground {
 
+  display: flex;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+aside {
 
+  width: 180px;
 
+}
 
+main {
 
+  flex: 1;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+iframe {
 
+  width: 100%;
 
+  height: 100%;
 
+  border: none;
 
+}
 
+</style>

+ 0 - 30
playground/src/pages/basic.vue
View File 

@@ -1,30 +0,0 @@
 
-<script setup lang="ts">
 
-import { onMounted } from 'vue'
 
-
 
-onMounted(() => {
 
-    const __win = window as any
 
-    const __sdk = (__win.__sdk = new __win.KanKan({
 
-        num: 'KK-ljOlkLRg',
 
-        // server: 'https://test.4dkankan.com',
 
-        server: '/demoServer',
 
-    }))
 
-    __sdk.mount('#scene').render()
 
-})
 
-</script>
 
-
 
-<template>
 
-    <div id="scene"></div>
 
-</template>
 
-
 
-<style scoped>
 
-#scene {
 
-    width: 100vw;
 
-    height: 100vh;
 
-}
 
-#scene-front {
 
-    position: absolute;
 
-    left: 0;
 
-    top: 0;
 
-    z-index: 2;
 
-}
 
-</style>

+ 12 - 0
playground/src/pages/demo.ts
View File 

@@ -0,0 +1,12 @@
 
+import '../style.css'
 
+import { createApp } from 'vue'
 
+import { installSDK } from '../sdk'
 
+
 
+let demo = new URLSearchParams(window.location.search).get('app')
 
+if (demo) {
 
+  //   let modules = import.meta.glob(`../demos/*.vue`)
 
+  //   const App = modules[`../demos/${demo}.vue`]
 
+  //   createApp(App).mount('#app')
 
+  const app = createApp((await import(`../demos/${demo}.vue`)).default)
 
+  app.use(installSDK).mount('#app')
 
+}

+ 5 - 0
playground/src/pages/index.ts
View File 

@@ -0,0 +1,5 @@
 
+import '../style.css'
 
+import { createApp } from 'vue'
 
+import App from './Index.vue'
 
+const __app = createApp(App)
 
+__app.mount('#app')

+ 29 - 25
playground/src/router.ts
View File 

@@ -1,30 +1,34 @@
 
 import { createRouter, createWebHistory } from 'vue-router'
 
 import { createRouter, createWebHistory } from 'vue-router'
 
 import Basic from './pages/basic.vue'
 
 import Basic from './pages/basic.vue'
 
 
 
-export default createRouter({
 
-    history: createWebHistory(),
 
-    routes: [
 
-        {
 
-            path: '/',
 
-            component: Basic,
 
-        },
 
-        {
 
-            path: '/tag',
 
-            component: () => import('./pages/tag.vue'),
 
-        },
 
-        {
 
-            path: '/daikan',
 
-            component: () => import('./pages/daikan.vue'),
 
-        },
 
-        {
 
-            path: '/daikan2',
 
-            component: () => import('./pages/daikan2.vue'),
 
-        },
 
-        {
 
-            path: '/minmap',
 
-            component: () => import('./pages/minmap.vue'),
 
-        },
 
+const routes = [
 
+  {
 
+    path: '/',
 
+    component: Basic,
 
+  },
 
+  {
 
+    path: '/tag',
 
+    component: () => import('./pages/tag.vue'),
 
+  },
 
+  {
 
+    path: '/daikan',
 
+    component: () => import('./pages/daikan.vue'),
 
+  },
 
+  {
 
+    path: '/daikan2',
 
+    component: () => import('./pages/daikan2.vue'),
 
+  },
 
+  {
 
+    path: '/minmap',
 
+    component: () => import('./pages/minmap.vue'),
 
+  },
 
+]
 
 
 
-
 
-    ],
 
+const router = createRouter({
 
+  routes,
 
+  history: createWebHistory(),
 
 })
 
 })
 
+
 
+export { routes }
 
+
 
+export default router

+ 11 - 8
playground/src/sdk.ts
View File 

@@ -1,15 +1,18 @@
 
 import { App } from 'vue'
 
 import { App } from 'vue'
 
 
 
-const __win = window as any
 
-const __sdk = (__win.__sdk = new __win.KanKan({
 
-    num: 'KJ-SliKVkJY',
 
-    server: 'https://www.4dkankan.com/',
 
-}))
 
+const num = new URLSearchParams(window.location.search).get('m')
 
+const options = {
 
+  num: num || 'KJ-tjdiVSFOv8l',
 
+  server: '/server-prod',
 
+}
 
+
 
+let __win = window as any
 
+let __sdk = (__win.__sdk = new __win.KanKan(options))
 
 
 
 export { __sdk }
 
 export { __sdk }
 
 
 
 export const installSDK = {
 
 export const installSDK = {
 
-    install(app: App) {
 
-        app.provide('__sdk', __sdk)
 
-    },
 
+  install(app: App) {
 
+    app.provide('__sdk', __sdk)
 
+  },
 
 }
 
 }

+ 2 - 2
playground/tsconfig.json
View File 

@@ -13,6 +13,6 @@
 
     "lib": ["ESNext", "DOM"],
 
     "lib": ["ESNext", "DOM"],
 
     "skipLibCheck": true
 
     "skipLibCheck": true
 
   },
 
   },
 
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
 
-  "references": [{ "path": "./tsconfig.node.json" }]
 
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","../typings/**/*.d.ts"],
 
+  "references": [{ "path": "./tsconfig.node.json" }],
 
 }
 
 }

+ 47 - 34
playground/vite.config.ts
View File 

@@ -13,40 +13,53 @@ import glob from 'fast-glob'
 
 // } from '@kankan-components/build-utils'
 
 // } from '@kankan-components/build-utils'
 
 
 
 export default defineConfig(async ({ mode }) => {
 
 export default defineConfig(async ({ mode }) => {
 
-    const env = loadEnv(mode, process.cwd(), '')
 
-    // let { dependencies } = getPackageDependencies(epPackage)
 
-    // dependencies = dependencies.filter((dep) => !dep.startsWith('@types/')) // exclude dts deps
 
-    // const optimizeDeps = (
 
-    //     await glob(['dayjs/(locale|plugin)/*.js'], {
 
-    //         cwd: path.resolve(projRoot, 'node_modules'),
 
-    //     })
 
-    // ).map((dep) => dep.replace(/\.js$/, ''))
 
-    return {
 
-        server: {
 
-            host: true,
 
-            https: !!env.HTTPS,
 
-            port: 6868,
 
-            proxy: {
 
-                '/demoServer': {
 
-                    target: 'https://test.4dkankan.com',
 
-                    changeOrigin: true,
 
-                    rewrite: (path) => path.replace(/^\/demoServer/, ''),
 
-                },
 
-            },
 
+  const env = loadEnv(mode, process.cwd(), '')
 
+  // let { dependencies } = getPackageDependencies(epPackage)
 
+  // dependencies = dependencies.filter((dep) => !dep.startsWith('@types/')) // exclude dts deps
 
+  // const optimizeDeps = (
 
+  //     await glob(['dayjs/(locale|plugin)/*.js'], {
 
+  //         cwd: path.resolve(projRoot, 'node_modules'),
 
+  //     })
 
+  // ).map((dep) => dep.replace(/\.js$/, ''))
 
+  return {
 
+    build: {
 
+      rollupOptions: {
 
+        input: {
 
+          index: path.resolve(__dirname, 'index.html'),
 
+          demo: path.resolve(__dirname, 'demo.html'),
 
         },
 
         },
 
-        plugins: [
 
-            //@ts-ignore
 
-            VueMacros({
 
-                setupComponent: false,
 
-                setupSFC: false,
 
-                plugins: {
 
-                    vue: vue(),
 
-                    vueJsx: vueJsx(),
 
-                },
 
-            }),
 
-        ],
 
-        optimizeDeps: {
 
-            include: ['vue', '@vue/shared'],
 
+      },
 
+    },
 
+    server: {
 
+      host: true,
 
+      https: !!env.HTTPS,
 
+      port: 6868,
 
+      proxy: {
 
+        '/server-test': {
 
+          target: 'https://test.4dkankan.com',
 
+          changeOrigin: true,
 
+          rewrite: (path) => path.replace(/^\/server-test/, ''),
 
         },
 
         },
 
-    }
 
+        '/server-prod': {
 
+          target: 'https://www.4dkankan.com',
 
+          changeOrigin: true,
 
+          rewrite: (path) => path.replace(/^\/server-prod/, ''),
 
+        },
 
+      },
 
+    },
 
+    plugins: [
 
+      //@ts-ignore
 
+      VueMacros({
 
+        setupComponent: false,
 
+        setupSFC: false,
 
+        plugins: {
 
+          vue: vue(),
 
+          vueJsx: vueJsx(),
 
+        },
 
+      }),
 
+    ],
 
+    optimizeDeps: {
 
+      include: ['vue', '@vue/shared'],
 
+    },
 
+  }
 
 })
 
 })

File diff suppressed because it is too large
+ 3074 - 3447
pnpm-lock.yaml


+ 1 - 1
prettier.config.js
View File 

@@ -1,5 +1,5 @@
 
 module.exports = {
 
 module.exports = {
 
-  printWidth: 200,
 
+  printWidth: 250,
 
   tabWidth: 4,
 
   tabWidth: 4,
 
   useTabs: false,
 
   useTabs: false,
 
   semi: false,
 
   semi: false,

+ 4 - 0
typings/env.d.ts
View File 

@@ -1,6 +1,10 @@
 
 import type { vShow } from 'vue'
 
 import type { vShow } from 'vue'
 
 import type { INSTALLED_KEY } from '@element-plus/constants'
 
 import type { INSTALLED_KEY } from '@element-plus/constants'
 
 declare global {
 
 declare global {
 
+  interface Window {
 
+    __sdk: any
 
+  }
 
+
 
   const process: {
 
   const process: {
 
     env: {
 
     env: {
 
       NODE_ENV: string
 
       NODE_ENV: string