docs(文档更改): 更改基础示例

docs/.vitepress/i18n/pages/component.json

@@ -4,6 +4,10 @@
             "text": "基础组件",
             "children": [
                 {
+                    "link": "/icon",
+                    "text": "图标"
+                },
+                {
                     "link": "/button",
                     "text": "按钮"
                 },

docs/.vitepress/vitepress/components/demo/vp-example.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { computed, unref } from 'vue'
+import { computed, unref, watchEffect } from 'vue'
 import { File, Repl, ReplStore } from '@vue/repl'
 import mainCode from './main.vue?raw'
-import deptCode from './dept.js?raw'
+import deptCode from './dept?raw'
+import { loadKanKanThemeChalkStyle } from './dept'
 import type { SFCOptions } from '@vue/repl'
 
 const sfcOptions: SFCOptions = {
@@ -30,13 +31,16 @@ const props = defineProps({
         default: () => false,
     },
 })
+const isDev = computed(() => {
+    return import.meta.env.MODE === 'development'
+})
+const serverLink = computed(() => {
+    return unref(isDev) ? '/demoServer' : "https://test.4dkankan.com'"
+})
 
 const loadSingleData = computed(() => {
     const store = {
-        'App.vue': decodeURIComponent(props.raw),
-        // files: {
-        //     'con'
-        // },
+        'App.vue': decodeURIComponent(props.raw).replace('#DEMOSEVER#', unref(serverLink)),
     }
     return window.btoa(JSON.stringify(store))
 })
@@ -68,6 +72,12 @@ const deptFile = new File('dept.js', deptCode)
 store.addFile(PlaygroundMain)
 store.addFile(deptFile)
 store.state.mainFile = 'PlaygroundMain.vue'
+
+watchEffect(async () => {
+    if (!unref(props.isRepl)) {
+        await loadKanKanThemeChalkStyle()
+    }
+})
 </script>
 
 <template>

docs/.vitepress/vitepress/components/vp-demo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, getCurrentInstance, ref, toRef } from 'vue'
+import { computed, getCurrentInstance, toRef } from 'vue'
 import { isClient, useClipboard, useToggle } from '@vueuse/core'
 import { CaretTop } from '@element-plus/icons-vue'
 import { useLang } from '../composables/lang'
@@ -46,7 +46,9 @@ const locale = computed(() => demoBlockLocale[lang.value])
 const decodedDescription = computed(() => decodeURIComponent(props.description!))
 
 const onPlaygroundClick = () => {
-    const { link } = usePlayground(props.rawSource)
+    const productionServer = 'https://test.4dkankan.com'
+    const data = decodeURIComponent(props.rawSource).replace('#DEMOSEVER#', productionServer)
+    const { link } = usePlayground(encodeURIComponent(data))
     if (!isClient) return
     window.open(link)
 }

docs/examples/button/basic.vue

@@ -1,12 +1,10 @@
 <template>
-    <el-row class="mb-4">
+    <div class="mb-4">
         <UIButton>button1 </UIButton>
         <UIButton :width="100">button2</UIButton>
-    </el-row>
+    </div>
 </template>
 
 <script lang="ts" setup>
-// import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue'
-import { UIButton } from '@kankan-components/components'
-import '@kankan-components/theme-chalk/dist/index.css'
+import { UIButton } from 'kankan-components'
 </script>

docs/examples/icon/basic.vue

@@ -1,10 +1,11 @@
 <template>
-    <el-row class="mb-4">
-        <UIAudio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" />
-    </el-row>
+    <div class="mb-4">
+        <UIIcon type="del" />
+        <UIIcon type="del" :size="16" />
+        <UIIcon type="del" :size="20" />
+    </div>
 </template>
 
 <script lang="ts" setup>
-import { UIAudio } from '@kankan-components/components'
-import '@kankan-components/theme-chalk/dist/index.css'
+import { UIIcon } from 'kankan-components'
 </script>

docs/examples/tag/basic.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, provide, ref, unref } from 'vue'
+import { onMounted, onUnmounted, provide, ref } from 'vue'
 import { UITag } from 'kankan-components'
 
 const tags = ref<any>([])
 
 onMounted(() => {
-    console.warn('onMounted')
     const __win = window as any
     if (!__win.__sdk) {
         const __sdk = (__win.__sdk = new __win.KanKan({
             num: 'KJ-t-wOXfx2SDFy',
-            // server: 'https://test.4dkankan.com',
-            server: '/demoServer',
+            server: '#DEMOSEVER#',
         }))
         provide('__sdk', __sdk)
 

docs/examples/tag/custom.vue

@@ -11,7 +11,7 @@ onMounted(() => {
         const __sdk = (__win.__sdk = new __win.KanKan({
             num: 'KJ-t-wOXfx2SDFy',
             // server: 'https://test.4dkankan.com',
-            server: '/demoServer',
+            server: '#DEMOSEVER#',
         }))
         provide('__sdk', __sdk)
         __sdk.TagManager.on('loaded', (data: any) => __sdk.TagManager.load((tags.value = data) && tags.value))

docs/zh-CN/component/icon.md

@@ -0,0 +1,29 @@
+---
+title: Icon
+lang: zh-CN
+---
+
+# 图标
+
+一般图标使用如下。
+
+## Icon 属性
+
+| 名称   | 描述     | 类型               | 默认             |
+| ------ | -------- | ------------------ | ---------------- |
+| `type` | 图标名称 | `string`           | 公司 icon 库名称 |
+| `size` | 图标大小 | `number \| string` | 16/'16px'        |
+
+## Icon Slots
+
+| 名称      | 描述   |
+| --------- | ------ |
+| `default` | 自定义 |
+
+## 基本用法
+
+:::demo
+
+icon/basic
+
+:::

docs/zh-CN/component/tag.md

@@ -3,7 +3,20 @@ title: Tag热点
 lang: zh-CN
 ---
 
-# Tags 热点
+# Tag 热点
+
+## Tag 属性
+
+| 名称    | 描述         | 类型     | 默认     |
+| ------- | ------------ | -------- | -------- |
+| `tag`   | 热点 Object  | `Object` | tag 类型 |
+| `image` | 热点图标背景 | `string` | 图像地址 |
+
+## Tag Slots
+
+| 名称      | 描述    |
+| --------- | ------- |
+| `content` | slot Id |
 
 Tags 热点使用如下。
 
@@ -15,7 +28,7 @@ tag/basic
 
 :::
 
-## 定制 Slot
+## 自定义 UI 模版
 
 :::repl