refactor(文档更改): 示例组件增加unocss

docs/.vitepress/vitepress/components/demo/dept.js

@@ -1,6 +1,7 @@
 // import { getCurrentInstance } from 'vue'
 let installed = false
 // await loadStyle()
+await loadUnoCss()
 await loadKanKanThemeChalkStyle()
 await loadSDKDep()
 await loadSDK()
@@ -59,3 +60,20 @@ export function loadKanKanThemeChalkStyle() {
         document.body.append(link)
     })
 }
+
+export function loadUnoCss() {
+    return new Promise((resolve, reject) => {
+        const link = document.createElement('link')
+        link.rel = 'stylesheet'
+        link.href = 'https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css'
+        link.addEventListener('load', resolve)
+        link.addEventListener('error', reject)
+        document.body.append(link)
+
+        const script = document.createElement('script')
+        script.src = 'https://cdn.jsdelivr.net/npm/@unocss/runtime/mini.global.js'
+        script.addEventListener('load', resolve)
+        script.addEventListener('error', reject)
+        document.body.append(script)
+    })
+}

docs/.vitepress/vitepress/components/demo/main.vue

@@ -1,6 +1,7 @@
 <script setup>
 import App from './App.vue'
 import { setupDept } from './dept.js'
+
 setupDept()
 </script>
 

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

@@ -60,7 +60,7 @@ const store = new ReplStore({
     // from peerDependency
     defaultVueRuntimeURL: 'https://cdn.jsdelivr.net/npm/@vue/runtime-dom@latest/dist/runtime-dom.esm-browser.js',
 })
-store.init()
+
 watchEffect(async () => {
     if (!unref(props.isRepl)) {
         await loadKanKanThemeChalkStyle()
@@ -83,11 +83,10 @@ watchEffect(async () => {
             store.addFile(deptFile)
             store.state.mainFile = 'PlaygroundMain.vue'
             store.state.activeFile = appFile
-            console.log('appFile', appFile)
+            store.init()
         }
     }
 })
-console.log('store', store)
 </script>
 
 <template>

docs/components.d.ts

@@ -25,12 +25,7 @@ declare module '@vue/runtime-core' {
         HomeCards: typeof import('./.vitepress/vitepress/components/home/home-cards.vue')['default']
         HomeSponsors: typeof import('./.vitepress/vitepress/components/home/home-sponsors.vue')['default']
         Icons: typeof import('./.vitepress/vitepress/components/globals/icons.vue')['default']
-        IRiCodeLine: typeof import('~icons/ri/code-line')['default']
         IRiExternalLinkLine: typeof import('~icons/ri/external-link-line')['default']
-        IRiFileCopyLine: typeof import('~icons/ri/file-copy-line')['default']
-        IRiFlaskLine: typeof import('~icons/ri/flask-line')['default']
-        IRiGithubLine: typeof import('~icons/ri/github-line')['default']
-        IRiTranslate2: typeof import('~icons/ri/translate2')['default']
         L1Categories: typeof import('./.vitepress/vitepress/components/nav/l1-categories.vue')['default']
         L2Categories: typeof import('./.vitepress/vitepress/components/nav/l2-categories.vue')['default']
         L3Categories: typeof import('./.vitepress/vitepress/components/nav/l3-categories.vue')['default']

docs/examples/audio/basic.vue

@@ -1,7 +1,7 @@
 <template>
-    <el-row class="mb-4">
+    <div m4>
         <UIAudio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" />
-    </el-row>
+    </div>
 </template>
 
 <script lang="ts" setup>

docs/examples/button/basic.vue

@@ -1,7 +1,9 @@
 <template>
-    <div class="mb-4">
-        <UIButton>button1 </UIButton>
-        <UIButton :width="100">button2</UIButton>
+    <div m4>
+        <UIButton :width="80" mr2>button1 </UIButton>
+        <UIButton type="primary" :width="80" mr2>button1 </UIButton>
+        <UIButton type="cancel" :width="100" mr2>button2</UIButton>
+        <UIButton type="submit" :width="100" mr2>button3</UIButton>
     </div>
 </template>
 

docs/examples/icon/basic.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="mb-4">
-        <UIIcon type="del" />
-        <UIIcon type="del" :size="16" />
-        <UIIcon type="del" :size="20" />
+    <div m4>
+        <UIIcon type="del" mr2 />
+        <UIIcon type="del" :size="16" mr2 />
+        <UIIcon type="del" :size="20" mr2 />
     </div>
 </template>
 

packages/theme-chalk/src/index.scss

@@ -1,3 +1,4 @@
+@use './base.scss';
 @use './icon.scss';
 @use './button.scss';
 @use './audio.scss';