Merge pull request #37 from mayinrain/master

upd: add playground

Author: nancyzhan

.gitignore

@@ -4,6 +4,7 @@ node_modules
 .DS_Store
 packages/traction-widget/node_modules
 packages/traction-widget/es
+types
 es
 packages/traction-widget/dist
 dist

docs/.vitepress/components/BNavBar/use.vue

@@ -44,7 +44,7 @@ const openDrawer = () => {
     showDrawer.value = true;
 };
 </script>
-<style lang='less' scoped>
+<style scoped>
 .eg-page {
     display: grid;
     padding: 16px 24px;

docs/.vitepress/components/BNavHeader/use.vue

@@ -16,7 +16,7 @@ const handleBack = () => {
     FMessage.info('自定义返回逻辑');
 };
 </script>
-<style lang='less' scoped>
+<style scoped>
 .eg-page {
     padding: 24px;
     background: #fff;

docs/.vitepress/components/BTableHeaderConfig/use.vue

@@ -6,7 +6,7 @@
             <FTableColumn prop="title" label="标题" :visible="checkTColShow('title')"></FTableColumn>
             <FTableColumn prop="content" label="内容" :visible="checkTColShow('content')"></FTableColumn>
             <FTableColumn prop="action" label="操作" v-slot="{ row }" :visible="checkTColShow('action')">
-                <a href="javascript:;" @click="viewContent(row)">查看</a>
+                <a class="action-btn" href="javascript:;" @click="viewContent(row)">查看</a>
             </FTableColumn>
         </FTable>
     </div>
@@ -40,3 +40,11 @@ const viewContent = (row: {
     });
 };
 </script>
+<style>
+.action-btn {
+    font-weight: 500;
+    color: #10b981;
+    text-decoration: none;
+    transition: color 0.25s;
+}
+</style>

docs/.vitepress/components/BTagSelector/multi.vue

@@ -61,7 +61,7 @@ const handleChange = (val: any) => {
     console.log(val);
 };
 </script>
-<style scoped lang="less">
+<style scoped>
 .title-text {
     font-family: PingFangSC-Medium;
     font-size: 14px;

docs/.vitepress/components/BTagSelector/noheader.vue

@@ -13,7 +13,7 @@ const handleChange = (val: any) => {
     console.log(val);
 };
 </script>
-<style scoped lang="less">
+<style scoped>
 .title-text {
     font-family: PingFangSC-Medium;
     font-size: 14px;

docs/.vitepress/components/BTagSelector/single.vue

@@ -20,7 +20,7 @@ const handleClear = ()=>{
     console.log('clear all')
 }
 </script>
-<style scoped lang="less">
+<style scoped>
 .title-text {
     font-family: PingFangSC-Medium;
     font-size: 14px;

docs/.vitepress/custom/components/componentDoc.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="component-doc">
+
+    <span class="play" @click="openPlayground">Play</span>
     <div class="component-doc-content">
       <slot></slot>
     </div>
     <div :class="['component-doc-code', visibleCode && 'visible-code']" v-html="code"></div>
     <div class="component-doc-header" @click="toggleCode">
-      <!-- span class="play" @click="openPlayground">play</span-->
       <!-- <LeftOutlined :class="['show-code-btn', visibleCode && 'active']" @click="toggleCode" /> -->
       {{visibleCode ? '收起代码' : '查看代码'}}
       <DownOutlined :class="['show-code-btn', visibleCode && 'active']" />
@@ -20,7 +21,7 @@ import {
 } from 'vue';
 import { DownOutlined } from '@fesjs/fes-design/icon';
 
-// import playground from './playground';
+import playground from './playground';
 import codes from './demoCode.json';
 
 const props = defineProps({
@@ -38,20 +39,32 @@ watch(
 );
 
 const visibleCode = ref(false);
-// const openPlayground = () => {
-//     playground(props.code);
-// };
+const openPlayground = () => {
+    playground(props.code);
+};
 
 const toggleCode = () => {
     visibleCode.value = !visibleCode.value;
 };
 </script>
 <style lang="less" scoped>
+.play {
+  position: absolute;
+  right: 16px;
+  top: 12px;
+  cursor: pointer;
+  &:hover {
+    color: #108981;
+  }
+}
 .component-doc {
   margin-top: 16px;
   border: 1px solid #cfd0d3;
   border-radius: 4px;
-
+  position: relative;
+  .component-doc-content {
+    padding-top: 48px;
+  }
   &-header {
     height: 48px;
     display: flex;
@@ -72,11 +85,6 @@ const toggleCode = () => {
         transform: rotateZ(-180deg);
       }
     }
-
-    .play {
-      margin-right: 20px;
-      cursor: pointer;
-    }
   }
 
   &-content {

docs/.vitepress/custom/components/exampleRepl.vue

@@ -45,6 +45,10 @@ const fesDesignSetup = `
             link.rel = 'stylesheet'
             link.href = 'https://npm.elemecdn.com/@fesjs/fes-design@latest/dist/fes-design.min.css';
             document.head.appendChild(link)
+            const twcsslink = document.createElement('link')
+            twcsslink.rel = 'stylesheet'
+            twcsslink.href = 'https://cdn.jsdelivr.net/npm/@fesjs/traction-widget/dist/traction-widget.min.css';
+            document.head.appendChild(twcsslink)
         }
         
         export function setupFesDesign() {
@@ -59,6 +63,7 @@ const fesDesignSetup = `
         `;
 
 function resolveSFCExample (demo) {
+    
     const files = {
         [mainFile]: data.app,
         'space.vue': data.space,
@@ -67,7 +72,8 @@ function resolveSFCExample (demo) {
         'import-map.json': JSON.stringify({
             imports: {
                 '@fesjs/fes-design': 'https://npm.elemecdn.com/@fesjs/fes-design@latest/dist/fes-design.esm-browser.js',
-                '@fesjs/fes-design/icon': 'https://npm.elemecdn.com/@fesjs/fes-design@latest/dist/fes-design.icon-browser.js'
+                '@fesjs/fes-design/icon': 'https://npm.elemecdn.com/@fesjs/fes-design@latest/dist/fes-design.icon-browser.js',
+                '@fesjs/traction-widget': 'https://cdn.jsdelivr.net/npm/@fesjs/traction-widget/dist/traction-widget.esm-browser.js'
             }
         })
     };
@@ -90,7 +96,7 @@ defineExpose({
     handleShow
 });
 
-watch(props.codeName, () => {
+watch(() => props.codeName, () => {
     updateExample(props.codeName);
 }, {
     immediate: true

package.json

@@ -3,7 +3,7 @@
   "version": "1.8.11",
   "description": "集合大型中台项目使用到的通用组件和工具函数",
   "scripts": {
-    "docs:dev": "npm run build && vitepress dev docs",
+    "docs:dev": "npm run build && node scripts/generate-doc.js && vitepress dev docs",
     "docs:build": "npm run build && node scripts/generate-doc.js && vitepress build docs",
     "docsBuild": "npm run build && node scripts/generate-doc.js && vitepress build docs",
     "prepare": "husky install",