chore: Add documents

.github/workflows/doc.yml → .github/workflows/docs.yml

@@ -1,5 +1,5 @@
 # Simple workflow for deploying static content to GitHub Pages
-name: Build Doc Page
+name: Build Docs Page
 
 on:
   # Only run this workflow manually from the Actions tab
@@ -30,15 +30,19 @@ jobs:
           java-version: '21'
       - name: Setup Gradle
         uses: gradle/actions/setup-gradle@v4
-      - name: Build Dokka
+      - name: Build Docs
         run: |
           ./gradlew :miuix:dokkaGenerate
+          mv ./miuix/build/dokka/html/* ./miuix/docs/public/dokka
+          cd ./docs
+          yarn install
+          yarn docs:build
       - name: Setup Pages
         uses: actions/configure-pages@v5
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: ./miuix/build/dokka/html
+          path: ./miuix/docs/.vitepress/dist
 
   deploy:
     environment:

.gitignore

@@ -10,4 +10,8 @@ local.properties
 xcuserdata
 .kotlin
 *.lock
-example/src/commonMain/kotlin/utils/VersionInfo.kt
+convention-plugins/bin
+docs/node_modules
+docs/.vitepress/dist
+docs/.vitepress/cache
+docs/public/dokka

convention-plugins/src/main/kotlin/module.publication.gradle.kts

@@ -14,7 +14,7 @@ publishing {
         // Provide artifacts information required by Maven Central
         pom {
             name.set("miuix")
-            description.set("A UI Library for Kotlin MultiPlatform")
+            description.set("A UI library for Compose MultiPlatform")
             url.set("https://github.com/miuix-kotlin-multiplatform/miuix")
 
             licenses {

docs/.vitepress/config.mts

@@ -0,0 +1,182 @@
+import { defineConfig } from 'vitepress'
+
+export default defineConfig({
+  base: '/',
+
+  title: "Miuix",
+
+  description: "A UI library for Compose MultiPlatform",
+
+  head: [
+    ['link', { rel: 'icon', href: '/Icon.webp' }],
+    ['link', { rel: 'preconnect', href: 'https://cdn-font.hyperos.mi.com/font/css?family=MiSans_VF:VF:Chinese_Simplify,Latin&display=swap' }],
+  ],
+
+  markdown: {
+    image: {
+      lazyLoading: true,
+    },
+  },
+
+  lastUpdated: true,
+
+  cleanUrls: true,
+
+  lang: 'zh-Hans',
+
+  themeConfig: {
+    logo: '/Icon.webp',
+
+    search: {
+      provider: 'local',
+      options: {
+        translations: {
+          button: {
+            buttonText: '搜索文档',
+            buttonAriaLabel: '搜索文档'
+          },
+          modal: {
+            noResultsText: '无法找到相关结果',
+            resetButtonTitle: '清除查询条件',
+            footer: {
+              selectText: '选择',
+              navigateText: '切换',
+              closeText: '关闭',
+            },
+          },
+        },
+      },
+    },
+
+    docFooter: {
+      prev: '上一页',
+      next: '下一页'
+    },
+
+    outline: {
+      label: '页面导航'
+    },
+
+    lastUpdated: {
+      text: '最后更新于',
+      formatOptions: {
+        dateStyle: 'short',
+        timeStyle: 'medium'
+      }
+    },
+
+    langMenuLabel: '多语言',
+    returnToTopLabel: '回到顶部',
+    sidebarMenuLabel: '菜单',
+    darkModeSwitchLabel: '主题',
+    lightModeSwitchTitle: '切换到浅色模式',
+    darkModeSwitchTitle: '切换到深色模式',
+    skipToContentLabel: '跳转到内容',
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/YuKongA/miuix-kotlin-multiplatform' }
+    ],
+
+    editLink: {
+      pattern: 'https://github.com/miuix-kotlin-multiplatform/miuix/edit/main/docs/:path',
+      text: '在 GitHub 上编辑此页面'
+    },
+
+    footer: {
+      message: '基于 Apache-2.0 许可发布',
+      copyright: `版权所有 © 2024-${new Date().getFullYear()} miuix-kotlin-multiplatform`
+    },
+
+    nav: [
+      { text: '首页', link: '/' },
+      { text: '快速开始', link: '/guide/getting-started' },
+      { text: '组件库', link: '/components/' },
+    ],
+
+    sidebar: {
+      '/guide/': [
+        {
+          text: '入门',
+          collapsed: false,
+          items: [
+            { text: '快速开始', link: '/guide/getting-started' },
+          ]
+        },
+        {
+          text: '进阶',
+          collapsed: false,
+          items: [
+            { text: '主题系统', link: '/guide/theme' },
+            { text: '图标系统', link: '/guide/icons' },
+            { text: '工具函数', link: '/guide/utils' },
+            { text: '平台支持', link: '/guide/multiplatform' },
+            { text: '最佳实践', link: '/guide/best-practices' },
+          ]
+        }
+      ],
+      '/components/': [
+        {
+          text: '组件库',
+          collapsed: false,
+          items: [
+            { text: '总览', link: '/components/' },
+          ]
+        },
+        {
+          text: '脚手架',
+          collapsed: false,
+          items: [
+            { text: 'Scaffold', link: '/components/scaffold' },
+          ]
+        },
+        {
+          text: '基础组件',
+          collapsed: false,
+          items: [
+            { text: 'Surface', link: '/components/surface' },
+            { text: 'TopAppBar', link: '/components/topappbar' },
+            { text: 'NavigationBar', link: '/components/navigationbar' },
+            { text: 'TabRow', link: '/components/tabrow' },
+            { text: 'Card', link: '/components/card' },
+            { text: 'BasicComponent', link: '/components/basiccomponent' },
+            { text: 'Button', link: '/components/button' },
+            { text: 'IconButton', link: '/components/iconbutton' },
+            { text: 'Text', link: '/components/text' },
+            { text: 'SmallTitle', link: '/components/smalltitle' },
+            { text: 'TextField', link: '/components/textfield' },
+            { text: 'Switch', link: '/components/switch' },
+            { text: 'Checkbox', link: '/components/checkbox' },
+            { text: 'Slider', link: '/components/slider' },
+            { text: 'ProgressIndicator', link: '/components/progressindicator' },
+            { text: 'Icon', link: '/components/icon' },
+            { text: 'FloatingActionButton', link: '/components/floatingactionbutton' },
+            { text: 'Divider', link: '/components/divider' },
+            { text: 'PullToRefresh', link: '/components/pulltorefresh' },
+            { text: 'SearchBar', link: '/components/searchbar' },
+            { text: 'ColorPicker', link: '/components/colorpicker' },
+            { text: 'ListPopup', link: '/components/listpopup' },
+          ]
+        },
+        {
+          text: '特殊组件',
+          collapsed: false,
+          items: [
+            { text: 'LazyColumn', link: '/components/lazycolumn' },
+          ]
+        },
+        {
+          text: '扩展组件',
+          collapsed: false,
+          items: [
+            { text: 'SuperArrow', link: '/components/superarrow' },
+            { text: 'SuperSwitch', link: '/components/superswitch' },
+            { text: 'SuperCheckBox', link: '/components/supercheckbox' },
+            { text: 'SuperDropdown', link: '/components/superdropdown' },
+            { text: 'SuperSpinner', link: '/components/superspinner' },
+            { text: 'SuperDialog', link: '/components/superdialog' },
+          ]
+        },
+      ]
+    },
+  }
+})

docs/.vitepress/theme/index.mts

@@ -0,0 +1,28 @@
+import DefaultTheme from 'vitepress/theme'
+
+/* mediumZoom */
+import mediumZoom from 'medium-zoom';
+import { onMounted, watch, nextTick } from 'vue';
+import { useRoute } from 'vitepress';
+
+import './style/index.css'
+
+export default {
+  extends: DefaultTheme,
+
+  /* mediumZoom */
+  setup() {
+    const route = useRoute();
+    const initZoom = () => {
+      mediumZoom('.main img', { background: 'var(--vp-c-bg)' });
+    };
+    onMounted(() => {
+      initZoom();
+    });
+    watch(
+      () => route.path,
+      () => nextTick(() => initZoom())
+    );
+  },
+
+}

docs/.vitepress/theme/style/blur.css

@@ -0,0 +1,51 @@
+:root {
+
+    /* 亮色模式搜索框颜色 */
+    --miuix-color-search-button: rgba(255, 255, 255, 0.5);
+
+    /* 首页下滑后导航透明 */
+    .VPNavBar:not(.has-sidebar):not(.home.top) {
+        background-color: rgba(255, 255, 255, 0);
+        backdrop-filter: blur(15px)
+    }
+
+    /* 搜索框透明 */
+    .DocSearch-Button {
+        background-color: var(--miuix-color-search-button);
+        backdrop-filter: blur(15px)
+    }
+
+    /* Feature 透明 */
+    .VPFeature {
+        border: none;
+        box-shadow: 0 10px 30px 0 rgb(0 0 0 / 15%);
+        background-color: transparent;
+    }
+
+    /* 文档页侧边栏顶部透明 */
+    .curtain {
+        background-color: rgba(255, 255, 255, 0);
+        backdrop-filter: blur(15px)
+    }
+
+    @media (min-width: 960px) {
+
+        /* 文档页导航中间透明 */
+        .VPNavBar:not(.home.top) .content-body {
+            background-color: rgba(255, 255, 255, 0);
+            backdrop-filter: blur(15px)
+        }
+    }
+
+    /* 移动端大纲栏透明 */
+    .VPLocalNav {
+        background-color: rgba(255, 255, 255, 0);
+        backdrop-filter: blur(15px)
+    }
+}
+
+
+.dark {
+    /* 深色模式搜索框颜色 */
+    --miuix-color-search-button: rgba(0, 0, 0, 0.2);
+}

docs/.vitepress/theme/style/hidden.css

@@ -0,0 +1,41 @@
+:root {
+
+    /* 文档页Logo出文字下横条 */
+    @media (min-width: 960px) {
+        .VPNavBarTitle.has-sidebar .title {
+            border-bottom-color: transparent;
+        }
+    }
+
+    /* 页脚横条隐藏
+    .VPFooter {
+        border-top: none;
+    } */
+
+    /* 手机端菜单栏顶部横条隐藏 */
+    .VPNavBar.screen-open {
+        border-bottom: none;
+    }
+
+    /* 手机端菜单栏菜单分割线隐藏 */
+    .VPNavScreenMenuLink {
+        border-bottom: none;
+    }
+
+    /* 手机端菜单组隐藏 */
+    .VPNavScreenMenuGroup {
+        border-bottom: none;
+    }
+
+    /* 手机端大纲栏横条隐藏 */
+    .VPLocalNav {
+        border-bottom: none;
+    }
+
+}
+
+
+/* 导航栏下划线隐藏 */
+.divider {
+    display: none;
+}

docs/.vitepress/theme/style/index.css

@@ -0,0 +1,3 @@
+@import './var.css';
+@import './blur.css';
+@import './hidden.css';