Merge pull request #80 from biaov/pre-merge/v2.9.2

自动创建 PR

.github/workflows/publish.yml

@@ -21,15 +21,14 @@ jobs:
       - run: npm ci
       - run: npm run build:theme
       - run: npm run build:package
-      - run: node scripts/pre-publish.js
-      - run: echo "VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV
-      - run: cd ./dist/packages
+      - run: npm run pre-publish
+      - run: echo "VERSION=" >> $GITHUB_ENV
       - run: |
-          if [[ "${{ env.VERSION }}" == *"beta"* ]]; then
-            echo "Beta version detected. Executing npm command for beta version."
+          VERSION=$(node -p "require('./package.json').version")
+          cd ./dist/packages
+          if [[ "$VERSION" == *"beta"* ]]; then
             npm publish --tag=beta-v2
           else
-            echo "Non-beta version detected. Executing default npm command."
             npm publish
           fi
         env:

.github/workflows/sanke.yml

@@ -5,7 +5,7 @@ on:
     - cron: '0 0 * * *'
   push:
     branches:
-      - main
+      - pre-merge/*
 jobs:
   generate:
     permissions: write-all

README.md

@@ -152,7 +152,6 @@ npm run build
 
 - `clipboard`: 剪切板
 - `html2canvas`: 截屏
-- `mine-tinycss`: 原子化 CSS, 重置样式
 - `mockjs`: 模拟数据
 - `qrcode`: 二维码
 - `vue`: 前端框架
@@ -185,6 +184,7 @@ npm run build
 - `prettier`: 代码格式化
 - `shiki`: Markdown 代码高亮
 - `tslib`: TS 库
+- `tailwindcss`: 根据 html class 生成样式
 - `typescript`: 编程语言
 - `unplugin-vue-markdown`: 解析 Markdown 文件的 Vite 插件
 - `vite`: 项目构建工具

.ncurc.json → auto-cli.jsonc

@@ -1,4 +1,3 @@
 {
-  "upgrade": true,
   "reject": ["eslint"]
 }

config/plugins.ts

@@ -35,7 +35,8 @@ export const markdownViteConfig: MarkdownViteOptions = {
     /**
      * 代码高亮
      */
-    const theme = 'dark-plus'
+    // const themes = ['github-light', 'github-dark', 'dark-plus', 'light-plus']
+    const theme = 'github-light'
     const highlighter = await getHighlighter({ themes: [theme], langs: Object.keys(bundledLanguages) })
     md.set({
       highlight: (code: string, lang: string) => highlighter.codeToHtml(code, { lang, theme })
@@ -96,3 +97,24 @@ export const eslintConfig: EslintOptions = {
   lintOnStart: true,
   exclude: ['node_modules', 'dist', 'fonts']
 }
+
+/**
+ * tailwindcss 配置
+ */
+export const tailwindcssConfig = () => {
+  const spacing = {}
+
+  for (let i = 0; i < 1000; i++) {
+    spacing[i] = `${i}px`
+  }
+
+  return {
+    content: ['./examples/**/*.vue', './mobile/**/*.vue'],
+    theme: {
+      spacing,
+      extend: {
+        fontSize: ({ theme }) => theme('spacing')
+      }
+    }
+  }
+}

examples/App.vue

@@ -1,16 +1,14 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue'
-import { useGlobalVars } from '@/config/variables'
-
-const { BaseRouter } = useGlobalVars()
+import { baseRouter } from '@/config/variables'
 
 onMounted(() => {
-  globalThis.innerWidth < 1200 && (globalThis.location.href = `${globalThis.location.origin}${BaseRouter}mobile.html`)
+  globalThis.innerWidth < 1200 && (globalThis.location.href = `${globalThis.location.origin}${baseRouter}mobile.html`)
 })
 </script>
 
 <template>
-  <router-view></router-view>
+  <router-view />
 </template>
 
 <style lang="less">

examples/components/ComboBox/index.less

@@ -1,12 +1,5 @@
 .combo-box {
-  position: relative;
-  cursor: pointer;
   .txt {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100px;
-    padding: 5px 4px 5px 10px;
     border: 1px solid @border-color;
     border-radius: @border-radius-default;
     background: @color-white;
@@ -19,21 +12,14 @@
       font-size: @font-size-min;
     }
     img {
-      width: 16px;
-      opacity: 0.4;
       transition: transform 0.4s;
       &.rotate {
         transform: rotate(90deg);
       }
     }
   }
   .dropdown {
-    position: absolute;
-    top: 36px;
-    left: 0px;
-    width: 100px;
     border-radius: @border-radius-default;
-    padding: 6px 0;
     background: @color-white;
     box-shadow: 0 2px 12px 0 @box-shadow-default;
     &::before {
@@ -46,10 +32,6 @@
       border-left: 7px solid transparent;
     }
     > li {
-      width: 100%;
-      height: 30px;
-      line-height: 30px;
-      padding: 0 10px;
       color: @font-color-reduce;
       font-size: @font-size-min;
       &:hover {

examples/components/ComboBox/index.vue

@@ -8,15 +8,15 @@ const { isShow, onClickFrame, onClickItem } = useShowAction(props)
 
 <template>
   <!-- 下拉框 -->
-  <div class="combo-box" @click.stop="onClickFrame">
-    <div class="txt">
+  <div class="combo-box relative cursor-pointer" @click.stop="onClickFrame">
+    <div class="txt w-100 py-5 pr-4 pl-10 flex justify-between items-center">
       <span>{{ list[1].version }}</span>
-      <img src="../../assets/icon-right.png" alt="icon-right.png" :class="{ rotate: isShow }" />
+      <img src="../../assets/icon-right.png" alt="icon-right.png" :class="{ rotate: isShow }" class="w-16 opacity-40" />
     </div>
     <!-- 列表 -->
     <transition name="translate">
-      <ul v-if="isShow" class="dropdown">
-        <li v-for="(item, index) in list" :key="index" @click="onClickItem(item)">{{ item.version }}</li>
+      <ul v-if="isShow" class="dropdown absolute w-100 top-36 left-0 py-6 px-0">
+        <li v-for="(item, index) in list" :key="index" class="w-full h-30 leading-30 px-10 py-0" @click="onClickItem(item)">{{ item.version }}</li>
       </ul>
     </transition>
   </div>

examples/components/CopyCode/index.less

@@ -1,17 +1,7 @@
 .copy-code {
-  position: relative;
   .copy {
-    position: absolute;
-    right: 5px;
-    top: 5px;
     opacity: 0;
-    width: 30px;
-    padding: 5px;
     transition: opacity 0.4s;
-    cursor: pointer;
-    img {
-      width: 100%;
-    }
   }
   &:hover {
     .copy {

examples/components/CopyCode/index.vue

@@ -6,8 +6,8 @@ const { copyDom, codeCont } = useRefs()
 
 <template>
   <!-- 时间线 -->
-  <div class="copy-code">
-    <div ref="copyDom" class="copy" data-clipboard-action="copy" title="复制"><img src="../../assets/icon-copy-2.png" alt="copy" /></div>
+  <div class="copy-code relative">
+    <div ref="copyDom" class="copy absolute top-5 right-5 w-30 p-5 cursor-pointer" data-clipboard-action="copy" title="复制"><img src="../../assets/icon-copy-2.png" alt="copy" class="w-full" /></div>
     <div ref="codeCont" class="cont">
       <slot></slot>
     </div>

examples/components/DemoH5/index.less

@@ -1,12 +1,5 @@
 .demo-h5 {
-  position: relative;
-  width: 360px;
-  height: 780px;
-  padding: 10px;
   .bg-demo {
-    width: 100%;
-    height: 100%;
-    padding: 100px 16px;
     background: url(../../assets/bg_mobile.png) no-repeat center;
     background-size: 100% auto;
   }

examples/components/DemoH5/index.vue

@@ -1,17 +1,16 @@
 <script lang="ts" setup>
-import { useGlobalVars } from '@/config/variables'
+import { baseRouter } from '@/config/variables'
 import { useFrames } from './hooks'
 import type { Emits } from './types'
 
 const emit = defineEmits<Emits>()
 const { mobileIframe, onFrameLoad } = useFrames(emit)
-const { BaseRouter } = useGlobalVars()
 </script>
 
 <template>
   <!-- H5演示 -->
-  <div class="demo-h5">
-    <div class="bg-demo"><iframe ref="mobileIframe" :src="`${BaseRouter}mobile.html`" width="100%" height="100%" frameborder="0" @load="onFrameLoad"></iframe></div>
+  <div class="demo-h5 relative w-360 h-780 p-10">
+    <div class="bg-demo w-full h-full px-16 py-100"><iframe ref="mobileIframe" :src="`${baseRouter}mobile.html`" width="100%" height="100%" frameborder="0" @load="onFrameLoad"></iframe></div>
   </div>
 </template>
 <style scoped lang="less">

examples/components/MineHeader/hooks.ts

@@ -1,13 +1,11 @@
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import QRcode from 'qrcode'
-import { useGlobalVars } from '@/config/variables'
+import { baseRouter, githubLink } from '@/config/variables'
 import GithubIcon from '@/assets/icon-github.svg'
 import QrcodeIcon from '@/assets/icon-qrcode.svg'
 
 export const useListData = () => {
-  const { GithubAddress, BaseRouter } = useGlobalVars()
-
   /**
    * 导航列表
    */
@@ -21,7 +19,7 @@ export const useListData = () => {
       text: '组件'
     },
     {
-      href: GithubAddress,
+      href: githubLink,
       url: GithubIcon,
       text: 'Github'
     },
@@ -31,7 +29,7 @@ export const useListData = () => {
     }
   ])
 
-  QRcode.toDataURL(globalThis.location.origin + BaseRouter).then(data => {
+  QRcode.toDataURL(globalThis.location.origin + baseRouter).then(data => {
     navList.value[3].href = data
   })
 

examples/components/MineHeader/index.less

@@ -1,32 +1,8 @@
 .header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9;
-  width: 100%;
-  height: 60px;
   background: @color-white;
   box-shadow: 0 2px 5px fade(@border-color-common, 50%);
   &.home {
     background: transparent;
     box-shadow: none;
   }
-  .cont {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 90%;
-    height: 60px;
-    margin: 0 auto;
-    .logo {
-      width: 50px;
-      img {
-        width: 100%;
-      }
-    }
-    .rt-list {
-      display: flex;
-      align-items: center;
-    }
-  }
 }

examples/components/MineHeader/index.vue

@@ -8,12 +8,12 @@ const { navList: navListData, versionList, isHome } = useListData()
 
 <template>
   <!-- 头部 -->
-  <div class="header" :class="{ home: isHome }">
-    <div class="cont">
+  <div class="header fixed top-0 left-0 z-9 w-full h-60 z-2" :class="{ home: isHome }">
+    <div class="flex justify-between items-center h-60 w-11/12 my-0 mx-auto">
       <!-- logo -->
-      <router-link to="/" class="logo"><img src="../../assets/logo.svg" title="mineh5ui" alt="mineh5ui logo" /></router-link>
+      <router-link to="/" class="w-50"><img src="../../assets/logo.svg" title="mineh5ui" alt="mineh5ui logo" class="w-full" /></router-link>
       <!-- 右侧内容 -->
-      <div class="rt-list">
+      <div class="flex items-center">
         <!-- 导航 -->
         <nav-list :list="navListData"></nav-list>
         <!-- 下拉组件 -->

examples/components/NavList/index.less

@@ -1,9 +1,6 @@
 .nav-list {
-  display: flex;
-  align-content: center;
   li {
     > a {
-      padding: 0 10px;
       color: @font-color;
       font-size: @font-size;
       &:hover {
@@ -12,13 +9,8 @@
       &.scale {
         .scale();
       }
-      img {
-        width: 20px;
-      }
     }
     .qrcode {
-      position: relative;
-      cursor: pointer;
       &::after {
         content: '';
         position: absolute;
@@ -29,38 +21,15 @@
         height: 20px;
         opacity: 0;
       }
-      .img {
-        width: 20px;
-        margin: 0 10px 0 4px;
-      }
       .dropdown {
-        position: absolute;
-        top: 40px;
-        right: 0;
-        z-index: 20;
-        display: flex;
-        align-items: center;
-        width: 165px;
-        height: 0;
-        display: flex;
-        border-radius: 6px;
-        padding-right: 5px;
         background: @color-white;
         box-shadow: 0 0 10px @box-shadow-dark;
-        opacity: 0;
         transition: all 0.4s;
-        overflow: hidden;
         > span {
-          display: block;
-          width: 20px;
           margin-left: -6px;
           color: @font-color-reduce;
           font-size: @font-size;
         }
-        > img {
-          width: 140px;
-          height: 140px;
-        }
       }
       &:hover {
         .dropdown {