Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev
This commit is contained in:
dap
@@ -168,6 +168,10 @@ function sidebarComponents(): DefaultTheme.SidebarItem[] {
|
||||
link: 'common-ui/vben-api-component',
|
||||
text: 'ApiComponent Api组件包装器',
|
||||
},
|
||||
{
|
||||
link: 'common-ui/vben-alert',
|
||||
text: 'Alert 轻量提示框',
|
||||
},
|
||||
{
|
||||
link: 'common-ui/vben-modal',
|
||||
text: 'Modal 模态框',
|
||||
|
||||
101
docs/src/components/common-ui/vben-alert.md
Normal file
101
docs/src/components/common-ui/vben-alert.md
Normal file
@@ -0,0 +1,101 @@
|
||||
---
|
||||
outline: deep
|
||||
---
|
||||
|
||||
# Vben Alert 轻量提示框
|
||||
|
||||
框架提供的一些用于轻量提示的弹窗，仅使用js代码即可快速动态创建提示而不需要在template写任何代码。
|
||||
|
||||
::: info 应用场景
|
||||
|
||||
Alert提供的功能与Modal类似，但只适用于简单应用场景。例如临时性、动态地弹出模态确认框、输入框等。如果对弹窗有更复杂的需求，请使用VbenModal
|
||||
|
||||
:::
|
||||
|
||||
::: tip README
|
||||
|
||||
下方示例代码中的，存在一些主题色未适配、样式缺失的问题，这些问题只在文档内会出现，实际使用并不会有这些问题，可忽略，不必纠结。
|
||||
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
使用 `alert` 创建只有一个确认按钮的提示框。
|
||||
|
||||
<DemoPreview dir="demos/vben-alert/alert" />
|
||||
|
||||
使用 `confirm` 创建有确认和取消按钮的提示框。
|
||||
|
||||
<DemoPreview dir="demos/vben-alert/confirm" />
|
||||
|
||||
使用 `prompt` 创建有确认和取消按钮、接受用户输入的提示框。
|
||||
|
||||
<DemoPreview dir="demos/vben-alert/prompt" />
|
||||
|
||||
## 类型说明
|
||||
|
||||
```ts
|
||||
/** 预置的图标类型 */
|
||||
export type IconType = 'error' | 'info' | 'question' | 'success' | 'warning';
|
||||
|
||||
export type AlertProps = {
|
||||
/** 关闭前的回调，如果返回false，则终止关闭 */
|
||||
beforeClose?: () => boolean | Promise<boolean | undefined> | undefined;
|
||||
/** 边框 */
|
||||
bordered?: boolean;
|
||||
/** 取消按钮的标题 */
|
||||
cancelText?: string;
|
||||
/** 是否居中显示 */
|
||||
centered?: boolean;
|
||||
/** 确认按钮的标题 */
|
||||
confirmText?: string;
|
||||
/** 弹窗容器的额外样式 */
|
||||
containerClass?: string;
|
||||
/** 弹窗提示内容 */
|
||||
content: Component | string;
|
||||
/** 弹窗内容的额外样式 */
|
||||
contentClass?: string;
|
||||
/** 弹窗的图标（在标题的前面） */
|
||||
icon?: Component | IconType;
|
||||
/** 是否显示取消按钮 */
|
||||
showCancel?: boolean;
|
||||
/** 弹窗标题 */
|
||||
title?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* 函数签名
|
||||
* alert和confirm的函数签名相同。
|
||||
* confirm默认会显示取消按钮，而alert默认只有一个按钮
|
||||
* */
|
||||
export function alert(options: AlertProps): Promise<void>;
|
||||
export function alert(
|
||||
message: string,
|
||||
options?: Partial<AlertProps>,
|
||||
): Promise<void>;
|
||||
export function alert(
|
||||
message: string,
|
||||
title?: string,
|
||||
options?: Partial<AlertProps>,
|
||||
): Promise<void>;
|
||||
|
||||
/**
|
||||
* 弹出输入框的函数签名。
|
||||
* 参数beforeClose会传入用户当前输入的值
|
||||
* component指定接受用户输入的组件，默认为Input
|
||||
* componentProps 为输入组件设置的属性数据
|
||||
* defaultValue 默认的值
|
||||
* modelPropName 输入组件的值属性名称。默认为modelValue
|
||||
*/
|
||||
export async function prompt<T = any>(
|
||||
options: Omit<AlertProps, 'beforeClose'> & {
|
||||
beforeClose?: (
|
||||
val: T,
|
||||
) => boolean | Promise<boolean | undefined> | undefined;
|
||||
component?: Component;
|
||||
componentProps?: Recordable<any>;
|
||||
defaultValue?: T;
|
||||
modelPropName?: string;
|
||||
},
|
||||
): Promise<T | undefined>;
|
||||
```
|
||||
31
docs/src/demos/vben-alert/alert/index.vue
Normal file
31
docs/src/demos/vben-alert/alert/index.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<script lang="ts" setup>
|
||||
import { h } from 'vue';
|
||||
|
||||
import { alert, VbenButton } from '@vben/common-ui';
|
||||
|
||||
import { Empty } from 'ant-design-vue';
|
||||
|
||||
function showAlert() {
|
||||
alert('This is an alert message');
|
||||
}
|
||||
|
||||
function showIconAlert() {
|
||||
alert({
|
||||
content: 'This is an alert message with icon',
|
||||
icon: 'success',
|
||||
});
|
||||
}
|
||||
|
||||
function showCustomAlert() {
|
||||
alert({
|
||||
content: h(Empty, { description: '什么都没有' }),
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex gap-4">
|
||||
<VbenButton @click="showAlert">Alert</VbenButton>
|
||||
<VbenButton @click="showIconAlert">Alert With Icon</VbenButton>
|
||||
<VbenButton @click="showCustomAlert">Alert With Custom Content</VbenButton>
|
||||
</div>
|
||||
</template>
|
||||
39
docs/src/demos/vben-alert/confirm/index.vue
Normal file
39
docs/src/demos/vben-alert/confirm/index.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<script lang="ts" setup>
|
||||
import { alert, confirm, VbenButton } from '@vben/common-ui';
|
||||
|
||||
function showConfirm() {
|
||||
confirm('This is an alert message')
|
||||
.then(() => {
|
||||
alert('Confirmed');
|
||||
})
|
||||
.catch(() => {
|
||||
alert('Canceled');
|
||||
});
|
||||
}
|
||||
|
||||
function showIconConfirm() {
|
||||
confirm({
|
||||
content: 'This is an alert message with icon',
|
||||
icon: 'success',
|
||||
});
|
||||
}
|
||||
|
||||
function showAsyncConfirm() {
|
||||
confirm({
|
||||
beforeClose() {
|
||||
return new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
},
|
||||
content: 'This is an alert message with async confirm',
|
||||
icon: 'success',
|
||||
}).then(() => {
|
||||
alert('Confirmed');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex gap-4">
|
||||
<VbenButton @click="showConfirm">Confirm</VbenButton>
|
||||
<VbenButton @click="showIconConfirm">Confirm With Icon</VbenButton>
|
||||
<VbenButton @click="showAsyncConfirm">Async Confirm</VbenButton>
|
||||
</div>
|
||||
</template>
|
||||
41
docs/src/demos/vben-alert/prompt/index.vue
Normal file
41
docs/src/demos/vben-alert/prompt/index.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script lang="ts" setup>
|
||||
import { alert, prompt, VbenButton } from '@vben/common-ui';
|
||||
|
||||
import { VbenSelect } from '@vben-core/shadcn-ui';
|
||||
|
||||
function showPrompt() {
|
||||
prompt({
|
||||
content: '请输入一些东西',
|
||||
})
|
||||
.then((val) => {
|
||||
alert(`已收到你的输入：${val}`);
|
||||
})
|
||||
.catch(() => {
|
||||
alert('Canceled');
|
||||
});
|
||||
}
|
||||
|
||||
function showSelectPrompt() {
|
||||
prompt({
|
||||
component: VbenSelect,
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: 'Option 1', value: 'option1' },
|
||||
{ label: 'Option 2', value: 'option2' },
|
||||
{ label: 'Option 3', value: 'option3' },
|
||||
],
|
||||
placeholder: '请选择',
|
||||
},
|
||||
content: 'This is an alert message with icon',
|
||||
icon: 'question',
|
||||
}).then((val) => {
|
||||
alert(`你选择的是${val}`);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex gap-4">
|
||||
<VbenButton @click="showPrompt">Prompt</VbenButton>
|
||||
<VbenButton @click="showSelectPrompt">Confirm With Select</VbenButton>
|
||||
</div>
|
||||
</template>
|
||||
@@ -150,6 +150,73 @@ To run the `docs` application:
|
||||
pnpm dev:docs
|
||||
```
|
||||
|
||||
### Distinguishing Build Environments
|
||||
|
||||
In actual business development, multiple environments are usually distinguished during the build process, such as the test environment `test` and the production environment `build`.
|
||||
|
||||
At this point, you can modify three files and add corresponding script configurations to distinguish between production environments.
|
||||
|
||||
Take the addition of the test environment `test` to `@vben/web-antd` as an example:
|
||||
|
||||
- `apps\web-antd\package.json`
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"build:prod": "pnpm vite build --mode production",
|
||||
"build:test": "pnpm vite build --mode test",
|
||||
"build:analyze": "pnpm vite build --mode analyze",
|
||||
"dev": "pnpm vite --mode development",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "vue-tsc --noEmit --skipLibCheck"
|
||||
}
|
||||
```
|
||||
|
||||
Add the command `"build:test"` and change the original `"build"` to `"build:prod"` to avoid building packages for two environments simultaneously.
|
||||
|
||||
- `package.json`
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
|
||||
"build:analyze": "turbo build:analyze",
|
||||
"build:antd": "pnpm run build --filter=@vben/web-antd",
|
||||
"build-test:antd": "pnpm run build --filter=@vben/web-antd build:test",
|
||||
|
||||
······
|
||||
}
|
||||
```
|
||||
|
||||
Add the command to build the test environment in the root directory `package.json`.
|
||||
|
||||
- `turbo.json`
|
||||
|
||||
```json
|
||||
"tasks": {
|
||||
"build": {
|
||||
"dependsOn": ["^build"],
|
||||
"outputs": [
|
||||
"dist/**",
|
||||
"dist.zip",
|
||||
".vitepress/dist.zip",
|
||||
".vitepress/dist/**"
|
||||
]
|
||||
},
|
||||
|
||||
"build-test:antd": {
|
||||
"dependsOn": ["@vben/web-antd#build:test"],
|
||||
"outputs": ["dist/**"]
|
||||
},
|
||||
|
||||
"@vben/web-antd#build:test": {
|
||||
"dependsOn": ["^build"],
|
||||
"outputs": ["dist/**"]
|
||||
},
|
||||
|
||||
······
|
||||
```
|
||||
|
||||
Add the relevant dependent commands in `turbo.json`.
|
||||
|
||||
## Public Static Resources
|
||||
|
||||
If you need to use public static resources in the project, such as images, static HTML, etc., and you want to directly import them in the development process through `src="/xxx.png"`.
|
||||
|
||||
@@ -150,6 +150,73 @@ pnpm dev:ele
|
||||
pnpm dev:docs
|
||||
```
|
||||
|
||||
## 区分构建环境
|
||||
|
||||
在实际的业务开发中，通常会在构建时区分多种环境，如测试环境`test`、生产环境`build`等。
|
||||
|
||||
此时可以修改三个文件，在其中增加对应的脚本配置来达到区分生产环境的效果。
|
||||
|
||||
以`@vben/web-antd`添加测试环境`test`为例：
|
||||
|
||||
- `apps\web-antd\package.json`
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"build:prod": "pnpm vite build --mode production",
|
||||
"build:test": "pnpm vite build --mode test",
|
||||
"build:analyze": "pnpm vite build --mode analyze",
|
||||
"dev": "pnpm vite --mode development",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "vue-tsc --noEmit --skipLibCheck"
|
||||
},
|
||||
```
|
||||
|
||||
增加命令`"build:test"`, 并将原`"build"`改为`"build:prod"`以避免同时构建两个环境的包。
|
||||
|
||||
- `package.json`
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
|
||||
"build:analyze": "turbo build:analyze",
|
||||
"build:antd": "pnpm run build --filter=@vben/web-antd",
|
||||
"build-test:antd": "pnpm run build --filter=@vben/web-antd build:test",
|
||||
|
||||
······
|
||||
}
|
||||
```
|
||||
|
||||
在根目录`package.json`中加入构建测试环境的命令
|
||||
|
||||
- `turbo.json`
|
||||
|
||||
```json
|
||||
"tasks": {
|
||||
"build": {
|
||||
"dependsOn": ["^build"],
|
||||
"outputs": [
|
||||
"dist/**",
|
||||
"dist.zip",
|
||||
".vitepress/dist.zip",
|
||||
".vitepress/dist/**"
|
||||
]
|
||||
},
|
||||
|
||||
"build-test:antd": {
|
||||
"dependsOn": ["@vben/web-antd#build:test"],
|
||||
"outputs": ["dist/**"]
|
||||
},
|
||||
|
||||
"@vben/web-antd#build:test": {
|
||||
"dependsOn": ["^build"],
|
||||
"outputs": ["dist/**"]
|
||||
},
|
||||
|
||||
······
|
||||
```
|
||||
|
||||
在`turbo.json`中加入相关依赖的命令
|
||||
|
||||
## 公共静态资源
|
||||
|
||||
项目中需要使用到的公共静态资源，如：图片、静态HTML等，需要在开发中通过 `src="/xxx.png"` 直接引入的。
|
||||
|
||||
@@ -46,3 +46,47 @@ async function getVersionTag() {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 替换为第三方库检查更新方式
|
||||
|
||||
如果需要通过其他方式检查更新，例如使用其他版本控制方式（chunkHash、version.json）、使用`Web Worker`在后台轮询更新、自定义检查更新时机（不使用轮询），你可以通过JS库`version-polling`来实现。
|
||||
|
||||
```bash
|
||||
pnpm add version-polling
|
||||
```
|
||||
|
||||
以`apps/web-antd`项目为例，在项目入口文件`main.ts`或者`app.vue`添加以下代码
|
||||
|
||||
```ts
|
||||
import { h } from 'vue';
|
||||
|
||||
import { Button, notification } from 'ant-design-vue';
|
||||
import { createVersionPolling } from 'version-polling';
|
||||
|
||||
createVersionPolling({
|
||||
silent: import.meta.env.MODE === 'development', // 开发环境下不检测
|
||||
onUpdate: (self) => {
|
||||
const key = `open${Date.now()}`;
|
||||
notification.info({
|
||||
message: '提示',
|
||||
description: '检测到网页有更新, 是否刷新页面加载最新版本？',
|
||||
btn: () =>
|
||||
h(
|
||||
Button,
|
||||
{
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
notification.close(key);
|
||||
self.onRefresh();
|
||||
},
|
||||
},
|
||||
{ default: () => '刷新' },
|
||||
),
|
||||
key,
|
||||
duration: null,
|
||||
placement: 'bottomRight',
|
||||
});
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user