diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 184e801..803db8a 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -16,6 +16,7 @@ export default defineConfig({ nav: [ { text: '指南', link: '/guide/' }, { text: '组件', link: '/components/button' }, + { text: '页面', link: '/pages/' }, { text: '指令', link: '/directives/upload' } ], @@ -32,7 +33,10 @@ export default defineConfig({ '/components/': [ { text: '基础组件', - items: [{ text: 'Button 按钮', link: '/components/button' }] + items: [ + { text: 'Button 按钮', link: '/components/button' }, + { text: 'Toast 轻提示', link: '/components/toast' } + ] }, { text: '布局组件', @@ -41,6 +45,12 @@ export default defineConfig({ { text: 'Waterfall 瀑布流', link: '/components/waterfall' } ] }, + { + text: '反馈组件', + items: [ + { text: 'Skeleton 骨架屏', link: '/components/skeleton' } + ] + }, { text: '工具能力', items: [{ text: 'Human Captcha 人机校验弹窗', link: '/components/human-captcha-modal' }] @@ -54,6 +64,15 @@ export default defineConfig({ { text: 'v-permission 权限', link: '/directives/permission' } ] } + ], + '/pages/': [ + { + text: '页面', + items: [ + { text: '介绍', link: '/pages/' }, + { text: 'Login 登录页', link: '/pages/login' } + ] + } ] }, diff --git a/docs/components/skeleton.md b/docs/components/skeleton.md new file mode 100644 index 0000000..eb03d5c --- /dev/null +++ b/docs/components/skeleton.md @@ -0,0 +1,247 @@ +# Skeleton 骨架屏 + +在需要等待加载内容的位置提供一个占位图形。 + +## 基础用法 + +基础的骨架屏效果。 + +
+
+ +
+
+ +```vue + +``` + +## 文本骨架屏 + +使用 `variant="text"` 展示多行文本骨架屏。 + +
+
+ +
+
+ +```vue + +``` + +## 自定义行宽 + +通过 `lineWidths` 属性自定义每行的宽度。 + +
+
+ +
+
+ +```vue + +``` + +## 头像骨架屏 + +使用 `variant="avatar"` 展示头像骨架屏。 + +
+
+ + + +
+
+ +```vue + +``` + +## 卡片骨架屏 + +使用 `variant="card"` 展示卡片布局骨架屏。 + +
+
+ +
+
+ +```vue + +``` + +## 动画类型 + +骨架屏支持多种动画效果：`pulse`（脉冲）、`wave`（波浪）、`shimmer`（流光）。 + +
+
+
+

Pulse 脉冲动画（默认）

+ +
+
+

Wave 波浪动画

+ +
+
+

Shimmer 流光动画

+ +
+
+

无动画

+ +
+
+
+ +```vue + +``` + +## 自定义颜色 + +通过 `color` 和 `shimmerColor` 属性自定义骨架屏颜色。 + +
+
+ + +
+
+ +```vue + +``` + +## 组合使用 + +结合不同类型的骨架屏组合成复杂的加载占位。 + +
+
+ +
+ + +
+
+
+ +```vue + + + +``` + +## API + +### Props + +| 属性名 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| variant | 骨架屏变体 | `'basic' \| 'text' \| 'avatar' \| 'card' \| 'custom'` | `'basic'` | +| animation | 动画类型 | `'pulse' \| 'wave' \| 'shimmer' \| 'none'` | `'pulse'` | +| active | 是否激活状态 | `boolean` | `true` | +| shimmer | 是否显示流光效果 | `boolean` | `false` | +| rounded | 是否圆角 | `boolean` | `false` | +| circle | 是否圆形 | `boolean` | `false` | +| width | 宽度，支持 CSS 单位 | `string` | `'100%'` | +| height | 高度，支持 CSS 单位 | `string` | `'auto'` | +| color | 骨架屏颜色 | `string` | `'var(--tml-bg-color-page, #f2f3f5)'` | +| shimmerColor | 流光颜色 | `string` | `'rgba(255, 255, 255, 0.4)'` | +| lines | 文本行数（仅当 variant='text' 时有效） | `number` | `3` | +| lineWidths | 文本行宽度数组 | `string[]` | `['100%', '90%', '80%']` | + +### Slots + +| 插槽名 | 说明 | +| --- | --- | +| default | 自定义骨架屏内容（当 variant='custom' 时使用） | + + diff --git a/docs/components/toast.md b/docs/components/toast.md new file mode 100644 index 0000000..e24fe6a --- /dev/null +++ b/docs/components/toast.md @@ -0,0 +1,274 @@ +# Toast 轻提示 + +常用于主动操作后的反馈提示。 + +## 基础用法 + +从顶部出现，3 秒后自动消失。 + +
+
+ 显示提示 +
+ +
+ +```vue + + + +``` + +## 不同类型 + +用来显示「成功、警告、消息、错误」类的操作反馈。 + +
+
+ Success + Warning + Info + Error +
+ + + + +
+ +```vue + +``` + +## 不同位置 + +可以设置 Toast 在不同位置展示。 + +
+
+ 左上 + 顶部居中 + 右上 + 居中 + 左下 + 底部居中 + 右下 +
+ + + + + + + +
+ +```vue + +``` + +## 显示进度条 + +设置 `showProgress` 属性显示自动关闭进度条。 + +
+
+ 显示进度条 +
+ +
+ +```vue + +``` + +## 不自动关闭 + +设置 `duration` 为 `0` 则不会自动关闭。 + +
+
+ 不自动关闭 +
+ +
+ +```vue + +``` + +## 毛玻璃效果 + +默认启用毛玻璃效果，可通过 `glass` 属性控制。 + +
+
+ 毛玻璃效果 + 普通效果 +
+ + +
+ +```vue + +``` + +## 隐藏图标 + +设置 `showIcon` 为 `false` 可以隐藏图标。 + +
+
+ 无图标 +
+ +
+ +```vue + +``` + +## API + +### Props + +| 属性名 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| message | 消息内容 | `string` | `''` | +| type | 消息类型 | `'success' \| 'error' \| 'warning' \| 'info'` | `'info'` | +| duration | 显示时长（毫秒），0 表示不自动关闭 | `number` | `3000` | +| closable | 是否可手动关闭 | `boolean` | `true` | +| showIcon | 是否显示图标 | `boolean` | `true` | +| showProgress | 是否显示进度条 | `boolean` | `false` | +| html | 是否使用 HTML 渲染消息（注意 XSS 风险） | `boolean` | `false` | +| glass | 是否启用毛玻璃效果 | `boolean` | `true` | +| position | 显示位置 | `'top' \| 'bottom' \| 'center' \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'top'` | +| show | 控制显示/隐藏 | `boolean` | `false` | + +### Events + +| 事件名 | 说明 | 回调参数 | +| --- | --- | --- | +| update:show | 显示状态变化时触发 | `(show: boolean)` | +| close | 关闭时触发 | - | +| destroy | 动画结束销毁时触发 | - | + +### Slots + +| 插槽名 | 说明 | +| --- | --- | +| default | 自定义消息内容 | +| icon | 自定义图标 | + + + + diff --git a/docs/pages/index.md b/docs/pages/index.md new file mode 100644 index 0000000..0f70087 --- /dev/null +++ b/docs/pages/index.md @@ -0,0 +1,7 @@ +# 页面 + +这里展示了一些常用的页面模板和示例。 + +## 页面列表 + +即将添加更多页面示例... diff --git a/docs/pages/login-fullscreen.md b/docs/pages/login-fullscreen.md new file mode 100644 index 0000000..7657799 --- /dev/null +++ b/docs/pages/login-fullscreen.md @@ -0,0 +1,1112 @@ +--- +layout: false +--- + +
+
+ + + + + + +
+
+ +
+ + +
+ +
+
+
+ + + +
+
+ QQ登录 +
+
+
+
+ + + +
+
+ 微信登录 +
+
+
+
+ + + +
+
+ GitHub +
+
+
+
+ + + +
+
+ Google +
+
+
+
+ + +
+
+
+
+ + + + + + + +
+

服务条款

+
+
+ + + +
+
+
+
+
+
+

1. 服务说明

+

本平台提供第三方账号授权登录服务，包括QQ、微信、GitHub、Google等方式。登录即表示您同意本服务条款。

+

2. 账号安全

+

您应妥善保管账号信息，因个人原因导致的账号安全问题由您自行承担。如发现异常登录，请及时修改密码或联系客服。

+

3. 隐私保护

+

我们仅收集必要的用户信息用于提供服务，不会未经授权向第三方披露您的个人数据。详情请阅读《隐私政策》。

+

4. 用户行为

+

禁止利用本平台从事任何违法违规活动。我们保留对违规账号采取限制措施的权利。

+

5. 免责声明

+

因不可抗力或第三方服务中断导致的损失，平台不承担责任。服务内容可能随时调整，恕不另行通知。

+
+
+
+
+ +
+
+
+
+ + + + diff --git a/docs/pages/login.md b/docs/pages/login.md new file mode 100644 index 0000000..f66860d --- /dev/null +++ b/docs/pages/login.md @@ -0,0 +1,44 @@ +# Login 登录页面 + +带有星座背景动画和行星环登录按钮的第三方登录页面。 + + + 全屏预览 + + + + + + + +## 特性说明 + +| 特性 | 说明 | +| --- | --- | +| 星座背景 | Canvas 绘制的动态星空，星座缓慢旋转 | +| 行星环登录 | 登录按钮沿椭圆环分布，悬停展开显示登录方式名称 | +| 流动光点 | 行星环上有流动的发光粒子效果 | +| 云层动画 | 半透明云层缓慢漂浮 | +| 毛玻璃效果 | 按钮和卡片使用 `backdrop-filter` 实现毛玻璃效果 | +| 第三方登录 | 支持 QQ、微信、GitHub、Google 登录 | +| 服务条款抽屉 | 可展开/收起的服务条款卡片 | +| 响应式布局 | 移动端自动切换为垂直布局 | diff --git a/src/components/skeleton/index.ts b/src/components/skeleton/index.ts new file mode 100644 index 0000000..6456197 --- /dev/null +++ b/src/components/skeleton/index.ts @@ -0,0 +1,11 @@ +import { App } from 'vue' +import TmlSkeleton from './tml-skeleton.vue' + +// 为组件添加 install 方法，用于全局注册 +TmlSkeleton.install = (app: App): void => { + app.component('TmlSkeleton', TmlSkeleton) +} + +export default TmlSkeleton +export { TmlSkeleton } +export type { SkeletonProps } from './tml-skeleton.vue' diff --git a/src/components/skeleton/tml-skeleton.vue b/src/components/skeleton/tml-skeleton.vue new file mode 100644 index 0000000..645ae1b --- /dev/null +++ b/src/components/skeleton/tml-skeleton.vue @@ -0,0 +1,306 @@ + + + + + diff --git a/src/components/toast/index.ts b/src/components/toast/index.ts new file mode 100644 index 0000000..d7506c4 --- /dev/null +++ b/src/components/toast/index.ts @@ -0,0 +1,11 @@ +import { App } from 'vue' +import TmlToast from './tml-toast.vue' + +// 为组件添加 install 方法，用于全局注册 +TmlToast.install = (app: App): void => { + app.component('TmlToast', TmlToast) +} + +export default TmlToast +export { TmlToast } +export type { ToastProps } from './tml-toast.vue' diff --git a/src/components/toast/tml-toast.vue b/src/components/toast/tml-toast.vue new file mode 100644 index 0000000..d80a60a --- /dev/null +++ b/src/components/toast/tml-toast.vue @@ -0,0 +1,634 @@ + + + + + diff --git a/src/index.ts b/src/index.ts index abe6374..824347c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,13 +2,15 @@ import { App } from 'vue' import TmlButton from './components/button' import { TmlRow, TmlCol } from './components/grid' import TmlWaterfall from './components/list/waterfall' +import TmlSkeleton from './components/skeleton' +import TmlToast from './components/toast' import { vUpload } from './directives' import { createHumanCaptcha } from './human-captcha-modal' import './styles/variables.css' import './styles/base.css' // 所有组件列表 -const components = [TmlButton, TmlRow, TmlCol, TmlWaterfall] +const components = [TmlButton, TmlRow, TmlCol, TmlWaterfall, TmlSkeleton, TmlToast] // 所有指令列表 const directives = { @@ -28,7 +30,7 @@ const install = (app: App): void => { } // 导出单个组件 -export { TmlButton, TmlRow, TmlCol, TmlWaterfall } +export { TmlButton, TmlRow, TmlCol, TmlWaterfall, TmlSkeleton, TmlToast } // 导出人机校验弹窗（程序化 API） export { createHumanCaptcha } @@ -40,6 +42,8 @@ export { vUpload, createPermissionDirective, DEFAULT_PERMISSION_REPLACE_ATTR } f export type { ButtonProps, ButtonEmits } from './components/button/tml-button.vue' export type { RowProps } from './components/grid/tml-row.vue' export type { ColProps, ColConfig } from './components/grid/tml-col.vue' +export type { SkeletonProps } from './components/skeleton/tml-skeleton.vue' +export type { ToastProps } from './components/toast/tml-toast.vue' export type { UploadOptions, UploadError,