Merge branch 'dev'

.github/workflows/deploy.yml

@@ -0,0 +1,64 @@
+# 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程
+#
+name: Deploy VitePress site to Pages
+
+on:
+  # 在针对 `main` 分支的推送上运行。如果你
+  # 使用 `master` 分支作为默认分支，请将其更改为 `master`
+  push:
+    branches: [main]
+
+  # 允许你从 Actions 选项卡手动运行此工作流程
+  workflow_dispatch:
+
+# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
+# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # 构建工作
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
+      # - uses: pnpm/action-setup@v3 # 如果使用 pnpm，请取消注释
+      # - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm # 或 pnpm / yarn
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: npm ci # 或 pnpm install / yarn install / bun install
+      - name: Build with VitePress
+        run: npm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  # 部署工作
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

docs/.vitepress/config.ts

@@ -4,9 +4,12 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import { fileURLToPath, URL } from 'node:url'
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: 'My Awesome Project',
-  description: 'A VitePress Site',
+  title: 'SharpUI',
+  description: 'A Vue 3 UI Library',
   // srcDir: 'components',
+  head: [
+    ['link', { rel: 'icon', href: '/assets/logo.svg' }]
+  ],
   markdown: {
     // 配置Markdown处理的插件。
     // 该函数无返回值。
@@ -27,6 +30,10 @@ export default defineConfig({
   },
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
+    logo: {
+      src: '/assets/logo.svg',
+      alt: 'SharpUI'
+    },
     search: {
       provider: 'local'
     },
@@ -45,12 +52,12 @@ export default defineConfig({
       {
         text: 'Basic',
         items: [
+          { text: 'Alert', link: '/components/alert' },
           { text: 'Button', link: '/components/button' },
           { text: 'Input', link: '/components/input' },
           { text: 'Switch', link: '/components/switch' },
           { text: 'Select', link: '/components/select' },
-          { text: 'Form', link: '/components/form' },
-          { text: 'Alert', link: '/components/alert' }
+          { text: 'Form', link: '/components/form' }
         ]
       }
     ],

docs/components/alert.md

@@ -1,18 +1,36 @@
 ---
-title: Alert | Sharp-UI
+title: Alert
 description: Alert 组件的文档
 ---
 
 # Alert 警告
+
 用于页面中展示重要的提示信息。
 
 ## 基础用法
+
 页面中的非浮层元素，不会自动消失。
 Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。
 
 <preview path="../demo/Alert/Basic.vue" title="基础用法" description="Alert组件的基础用法" />
 
 ## 主题
+
 Alert 组件提供了两个不同的主题：`light`和`dark`。通过设置`effect`属性来改变主题，默认为`light`。
 
-<preview path="../demo/Alert/Theme.vue" title="主题" description="Alert 组件提供了两个不同的主题：`light`和`dark`。" />
+<preview path="../demo/Alert/Theme.vue" title="主题" description="Alert 组件提供了两个不同的主题：`light`和`dark`。" />
+
+## Alert Attributes
+
+| 参数        | 说明                               | 类型    | 可选值                     | 默认值 |
+| ----------- | ---------------------------------- | ------- | -------------------------- | ------ |
+| title       | 标题                               | `string`  | —                          | —      |
+| type        | 主题                               | `string`  | success/warning/info/error | info   |
+| effect      | 选择提供的主题                               | `string`  | light/dark                 | light  |
+| description | 辅助性文字。也可通过默认 slot 传入 | `string`  | —                          | —      |
+| closable    | 是否可关闭                         | `boolean` | —                          | true   |
+| close-text  | 关闭按钮自定义文本                 | `string`  | —                          | —      |
+| center      | 文字是否居中                       | `boolean` | —                          | false  |
+| show-icon   | 是否显示图标                       | `boolean` | —                          | false  |
+| close-text | 关闭按钮自定义文本                  | `string`  | —                          | —      |
+| center      | 文字是否居中                       | `boolean` | —                          | false  |

docs/components/button.md

@@ -1,5 +1,5 @@
 ---
-title: Button | Sharp-UI
+title: Button
 description: Button 组件的文档
 ---
 

docs/components/form.md

@@ -1,5 +1,5 @@
 ---
-title: Form | V-Element
+title: Form
 description: Form 组件的文档
 ---
 

docs/components/input.md

@@ -1,5 +1,5 @@
 ---
-title: Input | Sharp-UI
+title: Input
 description: Input 组件的文档
 ---
 

docs/components/select.md

@@ -1,5 +1,5 @@
 ---
-title: Select | Sharp-UI
+title: Select
 description: Select 组件的文档
 ---
 ## 选择器

docs/components/switch.md

@@ -1,5 +1,5 @@
 ---
-title: Switch | Sharp-UI
+title: Switch
 description: Switch 组件的文档
 ---
 

docs/index.md

@@ -3,9 +3,12 @@
 layout: home
 
 hero:
-  name: "My Awesome Project"
-  text: "A VitePress Site"
-  tagline: My great project tagline
+  name: "SharpUI"
+  text: "网站快速成型工具"
+  tagline: 一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库
+  image:
+    src: /assets/image.svg
+    alt: VitePress
   actions:
     - theme: brand
       text: Markdown Examples