feat(架构调整): playground

.eslintrc.json

@@ -1,4 +1,5 @@
 {
   "root": true,
-  "extends": ["@kankan-components/eslint-config"]
+  "extends": ["@kankan-components/eslint-config"],
+  "globals": { "defineOptions": "writable" }
 }

playground/demo.html

@@ -7,6 +7,10 @@
       rel="stylesheet"
       href="//at.alicdn.com/t/c/font_2596172_5i5zp5tvfj9.css"
     />
+    <link
+      href="//at.alicdn.com/t/c/font_3139015_t1h63c30o7f.css"
+      rel="stylesheet"
+    />
     <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>

playground/src/demos/extract.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import '@kankan-components/theme-chalk/src/index.scss'
+import { onMounted, inject } from 'vue'
+import { KkButton } from '@kankan-components/components'
+import UIButton from '../components/basic/button'
+
+const __sdk: any = inject('__sdk')
+const onEnter = () => {
+  __sdk.Plugins.TagEditor.enter()
+}
+const onLeave = () => {
+  __sdk.Plugins.TagEditor.exit()
+}
+onMounted(() => {
+  __sdk.use('Xui')
+  __sdk.mount('#scene').render()
+})
+</script>
+
+<template>
+  <div id="tools">
+    <KkButton>sdfsdf</KkButton>
+    <UIButton>sdfsdf</UIButton>
+    <!-- <button onclick="onEnter()">编辑</button
+    ><button onclick="onResetCamera()">水平重置</button
+    ><button onclick="onResetScale()">1:1</button>
+    <input
+      id="range"
+      name="range"
+      type="range"
+      min="70"
+      max="300"
+      value="100"
+      oninput="onChange(this.value)"
+    /> -->
+  </div>
+  <div id="scene"></div>
+</template>
+
+<style scoped>
+#tools {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  z-index: 1000;
+}
+#scene {
+  width: 100vw;
+  height: 100vh;
+}
+#scene-front {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+</style>

playground/src/demos/tag-add.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { onMounted, inject } from 'vue'
+const __sdk: any = inject('__sdk')
+const onEnter = () => {
+  __sdk.Plugins.TagEditor.enter()
+}
+const onLeave = () => {
+  __sdk.Plugins.TagEditor.exit()
+}
+onMounted(() => {
+  __sdk.use('TagView')
+  __sdk.use('TagEditor')
+  __sdk.mount('#scene').render()
+})
+</script>
+
+<template>
+  <div id="tools">
+    <button @click="onEnter">编辑</button>
+    <button @click="onLeave">退出</button>
+  </div>
+  <div id="scene"></div>
+</template>
+
+<style scoped>
+#tools {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  z-index: 1000;
+  transform: translateX(-50%);
+}
+#scene {
+  width: 100vw;
+  height: 100vh;
+}
+#scene-front {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+</style>

playground/src/pages/Index.vue

@@ -1,11 +1,30 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import TreeItem from './index.menu.vue'
 
-const num = ref(new URLSearchParams(window.location.search).get('m') || '')
-const menu = ref([{ text: '基础用法', name: 'basic' }])
+const menu = ref([
+  { text: '基础用法', name: 'basic' },
+  {
+    text: '热点管理',
+    next: [
+      { text: '添加热点', name: 'tag-add' },
+      { text: '编辑热点', name: 'tag-add' },
+      { text: '删除热点', name: 'tag-add' },
+    ],
+  },
+  { text: '动态截图', name: 'extract' },
+])
+let params = (window.location.hash || '').replace(/#\/?/, '')
+if (params.indexOf('app') === -1) {
+  params = `app=${menu.value[0].name}`
+}
+const link = ref('demo.html?' + params)
 const onLoad = () => {
-  const iframe = document.getElementById('demo') as HTMLIFrameElement
-  window.__sdk = iframe.contentWindow
+  let iframe = document.getElementById('demo') as HTMLIFrameElement
+  if (iframe.contentWindow) {
+    window.__sdk = iframe.contentWindow.__sdk
+    window.location.hash = iframe.contentWindow.location.search.substring(1)
+  }
 }
 </script>
 
@@ -13,11 +32,7 @@ const onLoad = () => {
   <div class="playground">
     <aside>
       <ul>
-        <li v-for="item in menu">
-          <a target="demo" :href="`demo.html?app=${item.name}`">{{
-            item.text
-          }}</a>
-        </li>
+        <tree-item v-for="model in menu" :data="model"></tree-item>
       </ul>
     </aside>
     <main>
@@ -25,7 +40,7 @@ const onLoad = () => {
         id="demo"
         name="demo"
         frameborder="0"
-        :src="`demo.html?app=${menu[0].name}&m=${num}`"
+        :src="link"
         @load="onLoad"
       ></iframe>
     </main>
@@ -56,4 +71,8 @@ iframe {
   height: 100%;
   border: none;
 }
+ul {
+  padding-left: 1em;
+  line-height: 1.5em;
+}
 </style>

playground/src/pages/index.menu.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+defineOptions({
+  name: 'tree-item',
+})
+const props = defineProps({
+  data: Object,
+})
+console.log(props.data)
+const isOpen = ref(false)
+const isFolder = computed(() => {
+  return props.data?.next && props.data?.next.length
+})
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+</script>
+<template>
+  <li class="item">
+    <div @click="toggle">
+      <span v-if="isFolder">{{ props.data?.text }}</span>
+      <a v-else target="demo" :href="`demo.html?app=${props.data?.name}`">{{
+        props.data?.text
+      }}</a>
+      <span v-if="isFolder" class="folder">[{{ isOpen ? '-' : '+' }}]</span>
+    </div>
+    <ul v-if="isFolder" :style="{ display: isOpen ? 'block' : 'none' }">
+      <tree-item
+        class="item"
+        v-for="model in props.data?.next"
+        :data="model"
+      ></tree-item>
+    </ul>
+  </li>
+</template>
+<style scoped>
+ul {
+  padding-left: 1em;
+  line-height: 1.5em;
+}
+li {
+  color: #444;
+  list-style: none;
+  margin-top: 5px;
+  user-select: none;
+}
+li > div {
+  display: flex;
+  align-items: center;
+}
+li > div a {
+  color: #444;
+  text-decoration: none;
+}
+li > div a:hover {
+  color: #f60;
+  text-decoration: underline;
+}
+.item {
+  cursor: pointer;
+}
+.folder {
+  display: flex;
+  padding-left: 4px;
+  width: 16px;
+  align-items: center;
+  justify-content: space-around;
+}
+.folder i {
+  font-style: normal;
+}
+</style>

playground/tsconfig.json

@@ -11,7 +11,8 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "types": ["unplugin-vue-define-options/macros-global"]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","../typings/**/*.d.ts"],
   "references": [{ "path": "./tsconfig.node.json" }],