!11 follow后端发布
* docs: readme * fix: missing formPath * chore: 去除锁定的esbuild版本 * perf: 去除debug组件 * perf: 参数键值 自动高度 * refactor: 代码生成配置页面重构 去除步骤条 * perf: 移除文件 * docs: 文件夹说明 * chore: 移除一些配置项 * chore: 注释优化 * refactor: 移除ele和naive目录 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * perf: request support to set how to return response (#5436) * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * refactor: 登录超时的i18n * fix: requestClient缺失i18n内容 * refactor: 优化oss下载进度提示 * feat: 下载进度loading * fix: antd button icon style (#5421) * feat: oss下载进度(已下载的KB 无法作为进度显示 total返回为null) * fix: 下载文件时(responseType === 'blob')需要判断下载失败(返回json而非二进制)的情况 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * refactor: 新增后跳转到未发布流程 * fix: same name route * chore: 调整为部署json类型 * fix: mouse events ignored on modal loading (#5409) * docs: update docs (#5408) * refactor: 移除已经弃用的方法 * refactor: follow官方handleRangeTimeValue更新 * chore: 删除文件夹(前端路由需要的) * chore: 修改本地路由写法(新版)/新增本地菜单图标 * fix: form update state error before form mounted (#5406) * fix: demos route fixed (#5405) * chore: 不使用基础布局（仅在顶级生效） * feat: modal state locked on submitting (#5401) * chore: 修改zIndex * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * refactor: fix popup component zIndex (#5397) * style: element plus loading style fixed (#5393) * perf: improve fieldMappingTime to support format function (#5392) * fix: hide root route in breadcrumb * feat: support set default props for drawer and modal (#5390) * fix: root router config fixed (#5389) * fix: 修改Vxe默认zIndex为995 解决右上角全屏后modal/drawer(zIndex: 1000)被遮挡 * feat: add `noBasicLayout` in route meta (#5386) * chore: wechat image * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * chore: 改为全局参数配置 去除局部参数 * fix: spinner may stop playing animation after dismiss (#5365) * style: popover bgColor is too close to common (#5364) * docs: version update * docs: changelog * chore: 文件上传 描述 * ci: retry deploy while faild * feat: 文件上传 进度条+提示文字 * feat: 文件上传 进度条 * feat: 上传文件格式说明 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into warmflow * fix: useEcharts return invalid instance (#5360) * feat: popup component support overlay blur effect (#5359) * feat: improve `tippy` demo (#5357) * feat: integrate new component `Tippy` with demo (#5355) * chore: 优化表格图片显示 * perf: add nested modal demo (#5353) * chore: 默认显示右边的滚动条 防止出现滚动条被挤压 * perf: modal and drawer api support chain calls (#5351) * feat: allow close tab when mouse middle button click (#5347) * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into warmflow * refactor: 重构显示total的逻辑 * chore: 调整高度自适应代码 * chore: vxe升级4.10.0版本(锁定) * fix: 添加失效的option * fix: 需要为数组 * fix: locale switching logic correction (#5344) * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into warmflow * chore: 导入类型优化 解决eslint报红 * refactor: type/注释优化 去除大量any * fix: vxeGrid init without search form (#5342) * chore: 锁屏默认false 关闭该功能 * chore: 调整接口 * chore: update deps * fix: primaryColor calculation (#5337) * fix: form valid-error style in naive (#5336) * fix: form `fieldMappingTime` improve and `modelPropName` support (#5335) * fix: code lint * fix: form `fieldMappingTime` is not working (#5333) * chore: 选人组件样式 * fix: download from url triggered twice sometimes (#5319) * chore: 优化代码 * chore: 动态类名(无效)改为style * refactor: 字典相关功能重构 采用一个Map储存字典(之前为两个Map) * feat: 字典支持number类型存储 * chore: 调整样式 * chore: 修改选中border为1px * chore: 字段 * chore: 改为新窗口打开(适用于pdf/图片)而非直接下载 * chore: 更新样式 * chore: 更新字段 * chore: 改为computed * chore: 跳转到未发布流程tab * chore: 优化样式 * docs: readme * fix: name重复导致的404 * Merge branch 'dev' of https://gitee.com/dapppp/ruoyi-plus-vben5 into warmflow * chore: 使用legacy来保证copy的兼容性 * chore: 去除log 添加说明 * chore: 优化代码 * feat: 节点关联/节点独立的切换逻辑 * chore: remove logic * chore: vxe可编辑表格demo * chore: 不允许在按钮下添加数据 * docs: changelog * fix: wrong code * chore: 移除测试菜单 * chore: 优化代码 * refactor: 租户套餐菜单替换为新版 * refactor: 使用新版菜单勾选 * chore: 点行会勾选/取消全部权限 点权限不会勾选行 * chore: 全屏引导+样式优化 * chore: 调整间距 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * feat: useEcharts exports echarts instance#5294 (#5299) * chore: update quick-start.md (#5303) * chore: updateCheckedNumber * refactor: 优化代码 * chore: 优化代码 * chore: 优化样式 * chore: keys依赖于menu 需要先加载menu * chore: 菜单加载完毕再显示 * feat: 新的菜单选择组件(beta) * chore: $t * chore: 测试菜单页面 * chore: 优化代码 * feat: 对ossId回显的支持 * chore: 只获取一次默认密码而非每次打开modal都获取 * fix: vben select placeholder color (#5286) * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * perf: format code with better style (#5283) * chore: 工作流演示站 * fix: sidebar preferences fixed (#5276) * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * fix: breadcrumb setting not valid for `header-sidebar-nav` layout (#5275) * fix: header logo may not be collapsed in `header-sidebar-nav` layout (#5274) * feat: new layout `sidebar nav with full header` (#5270) * feat: drawer close icon placement (#5269) * docs: update dialog and drawer docs * feat: drawer support destroy on close * feat: drawer support `onOpened` & `onClosed` * feat: modal support destroy on close * fix: wrong boolean * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * chore: 调整tab位置 * chore: 删除历史流程 改为tab切换 * fix: header-mixed layout side-menu active (#5265) * feat: header mixed layout (#5263) * chore: release 5.5.2 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * chore: downgrade vue-tsc version * feat: header menu align support (#5256) * chore: update deps * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * chore: add apiSelect remote search demo (#5246) * chore: 审批改为description而非disabled的表单 * chore: 改为ts * chore: 错误的conetnt * refactor: 终止/转办/委托支持填写意见 * chore: 第一次拿到的是readonly的数据 如果需要修改 需要cloneDeep * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * fix: grid form submit button locale switch (#5205) * chore: 调整驳回 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * fix: build error (#5199) * fix: esbuild自动升级导致运行/打包报错 * fix: esbuild自动升级导致运行/打包报错 * chore: 流程定义 激活改为switch * chore: 流程申请支持上传文件 * chore: title 审批通过 * fix: vxeGrid top padding (#5193) * fix: 表格排序翻页会丢失排序参数 * chore: 去除log打印 * chore: 流程监控 待办任务 * chore: 我发起的 * chore: 去除已经移除的菜单页面 * chore: 我的已办 * chore: 页面优化 * chore: 重置tooltip * feat: 我的抄送搜索/优化重复触发的接口 * feat: 流程定义 历史 * chore: 修改分类 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * fix: grid tools in toolbar config not working as expected (#5190) * feat: add `resizable` and `ColPage` component (#5188) * chore: 条件 * chore: break-all * feat: 流程分类 搜索 * chore: 弹窗关闭后仍然显示表单浮层 * chore: 选人组件的样式 * chore: 搜索的样式 * chore: 漏掉的导入 * chore: 最大显示的头像数量 超过显示为省略号头像 * fix: 选人的一些问题 * Merge branch 'warmflow' of https://gitee.com/dapppp/ruoyi-plus-vben5 i… * chore: 没有更多数据了 * fix: sidebar header height (#5183) * chore: 搜索表单布局+申请人 * fix: remove the overlap caused by border-b (#5160) * docs: fix typos (#5169) * fix: resolve eslint errors as well as TS type errors (#5172) * chore: enter提交表单 * chore: 修改文案 * chore: 默认全部展开 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * feat: page content class override (#5179) * fix: sidebar style on focus (#5178) * fix: 抄送选人 最右侧已选中删除item无效 * feat: 复制 * chore: 昵称过长的显示 * chore: 默认选中第一个 * chore: 修改relative位置 * chore: 搜索 * feat: 我的待办 - 搜索条件 * chore: 流程监控 - 待办任务页面的id不唯一 改为前端处理 * feat: 修改办理人 * chore: 流程干预 - 加签/减签 * chore: avatar大小 * chore: 抄送需要手动添加createByName * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * chore: 审批通过 抄送 * feat: 流程实例-流程预览 * chore: spell * chore: clientid * chore: 分类条件 * chore: 修改办理人 * chore: 更改postMessage参数 * chore: 内嵌iframe高度根据表单高度调整 * chore: 流程详情 * feat: 抄送选择 * chore: 调整分类树 * fix: user homePath no effect sometimes (#5166) * feat: form compact mode support (#5165) * fix: form auto submit no effect when showDefaultActions is false (#5163) * chore: 修改width * feat: 待办任务 * feat: 我的抄送 * chore: 流程定义 样式 * chore: 退回后重新申请 * chore: 请假申请布局 * chore: 请假申请-并行会签网关 * chore: 分类去除根目录 * chore: 详情modal(未完成) * chore: 请假申请根据不同状态显示按钮 * chore: 流程删除/撤销 * chore: 审批完成后刷新当前页 * feat: 选人组件(未完成) 加签减签 * docs: fix docs-link and add `EllipsisText` docs (#5158) * chore: 新窗口打开文件 * chore: 审批通过 * chore: 使用useEventListener替换原生 * chore: 字段错误 * chore: iframe通信 加载完毕后才显示表单 解决卡顿问题 * chore: 审批终止/驳回 * chore: 附件图标 * chore: process_running显示按钮 * chore: label错误 * chore: 保存的事件 * chore: 需要加上clientId * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * feat: form `colon` support (#5156) * chore: 完善请假申请 * feat: improve code login demo (#5154) * chore: 客户端管理 行高自适应 * chore: 内嵌表单的路径 * chore: 修改avatar背景色 * chore: 注释 * chore: activePath * chore: leave表单 * chore: 修改请假demo路径 * chore: categoryId * chore: 我的已办 * chore: 我发起的 * chore: loading * chore: 历史版本 * chore: 完善task api * chore: 隐藏'菜单加载中' * chore: missing import * feat: add demo for modify menu badge data * chore: 流程实例 * chore: 审批附件 * chore: 我的待办 提取公共组件 * chore: 流程部署 * chore: 新增/编辑/导出xml * chore: 流程定义(除历史版本) * feat: `autoActivateChild` support more layout mode (#5148) * feat: auto activate subMenu on select root menu (#5147) * fix: `disabledOnChangeListener` not work in form (#5146) * fix: login expired modal z-index (#5145) * feat: user-dropdown support `hover` trigger (#5143) * fix: pinInput value synchronous update (#5142) * fix: vxeGrid default sort data no effect in first query (#5141) * fix: vscode debug profile (#5140) * fix: form component events bind (#5137) * chore: 在线用户样式 开启虚拟滚动 * chore: 去掉个人中心 在线设备的分页 * chore: 去掉在线用户的分页 * chore: changelog * refactor: 获取字典的方法 提取公共函数 减少冗余代码 * fix: element plus validate failed style (#5130) * chore: 使用私有桶的提示 * feat: tabbar support mouse wheel vertical (#5129) * fix: form support `disabledOnInputListener` (#5127) * fix: form submission not appropriate (#5126) * Merge branch 'main' of https://gitee.com/dapppp/ruoyi-plus-vben5 into dev * chore: release 5.5.1 * feat: table search form visible control (#5121) * chore: 需要隐藏菜单 * chore: 我的待办 & 请假 * chore: 流程定义(未完成) * chore: 流程定义(开发中) * Merge branch 'main' of https://gitee.com/dapppp/ruoyi-plus-vben5 into dev * Merge branch 'main' of https://gitee.com/dapppp/ruoyi-plus-vben5 into dev * Merge branch 'main' of https://gitee.com/dapppp/ruoyi-plus-vben5 into dev * chore: version * chore: 锁定vxe-table版本 4.9.8版本存在样式问题 * chore: 暂时锁定cspell版本 * refactor: 由于不能输入 需要使用watch监听 * chore: https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IB7ANL * chore: 移除冗余代码 * chore: 组件卸载时移除emitter * fix: the route path did not synchronize with the page (#4947) * style: typo (#4948) * chore: 替换为commonDownloadExcel * fix: 左边部门树错误emit导致会调用两次列表api * chore: label样式 * chore: 改为Textarea * chore: 滚动条宽度 * chore: 审批样式 * chore: 部门及以下或本人数据权限 * Merge branch 'main' of https://gitee.com/dapppp/ruoyi-plus-vben5 into dev * chore: 个人中心强退设备接口路径
This commit is contained in:
玲娜贝er
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vben/playground",
|
||||
"version": "5.5.0",
|
||||
"version": "5.5.2",
|
||||
"homepage": "https://vben.pro",
|
||||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
|
||||
"repository": {
|
||||
@@ -30,6 +30,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/vue-query": "catalog:",
|
||||
"@vben-core/menu-ui": "workspace:*",
|
||||
"@vben/access": "workspace:*",
|
||||
"@vben/common-ui": "workspace:*",
|
||||
"@vben/constants": "workspace:*",
|
||||
|
||||
@@ -4,13 +4,10 @@
|
||||
*/
|
||||
|
||||
import type { BaseFormComponentType } from '@vben/common-ui';
|
||||
|
||||
import type { Component, SetupContext } from 'vue';
|
||||
import { h } from 'vue';
|
||||
|
||||
import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import {
|
||||
AutoComplete,
|
||||
Button,
|
||||
@@ -35,6 +32,7 @@ import {
|
||||
TreeSelect,
|
||||
Upload,
|
||||
} from 'ant-design-vue';
|
||||
import { h } from 'vue';
|
||||
|
||||
const withDefaultPlaceholder = <T extends Component>(
|
||||
component: T,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/**
|
||||
* 该文件可自行根据业务逻辑进行调整
|
||||
*/
|
||||
import type { HttpResponse } from '@vben/request';
|
||||
import type { RequestClientOptions } from '@vben/request';
|
||||
|
||||
import { useAppConfig } from '@vben/hooks';
|
||||
import { preferences } from '@vben/preferences';
|
||||
@@ -20,8 +20,9 @@ import { refreshTokenApi } from './core';
|
||||
|
||||
const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
|
||||
|
||||
function createRequestClient(baseURL: string) {
|
||||
function createRequestClient(baseURL: string, options?: RequestClientOptions) {
|
||||
const client = new RequestClient({
|
||||
...options,
|
||||
baseURL,
|
||||
});
|
||||
|
||||
@@ -69,20 +70,6 @@ function createRequestClient(baseURL: string) {
|
||||
},
|
||||
});
|
||||
|
||||
// response数据解构
|
||||
client.addResponseInterceptor<HttpResponse>({
|
||||
fulfilled: (response) => {
|
||||
const { data: responseData, status } = response;
|
||||
|
||||
const { code, data } = responseData;
|
||||
|
||||
if (status >= 200 && status < 400 && code === 0) {
|
||||
return data;
|
||||
}
|
||||
throw Object.assign({}, response, { response });
|
||||
},
|
||||
});
|
||||
|
||||
// token过期的处理
|
||||
client.addResponseInterceptor(
|
||||
authenticateResponseInterceptor({
|
||||
@@ -109,6 +96,8 @@ function createRequestClient(baseURL: string) {
|
||||
return client;
|
||||
}
|
||||
|
||||
export const requestClient = createRequestClient(apiURL);
|
||||
export const requestClient = createRequestClient(apiURL, {
|
||||
responseReturn: 'data',
|
||||
});
|
||||
|
||||
export const baseRequestClient = new RequestClient({ baseURL: apiURL });
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { createApp, watchEffect } from 'vue';
|
||||
|
||||
import { registerAccessDirective } from '@vben/access';
|
||||
import { initTippy } from '@vben/common-ui';
|
||||
import { preferences } from '@vben/preferences';
|
||||
import { initStores } from '@vben/stores';
|
||||
import '@vben/styles';
|
||||
@@ -19,6 +20,15 @@ async function bootstrap(namespace: string) {
|
||||
// 初始化组件适配器
|
||||
await initComponentAdapter();
|
||||
|
||||
// // 设置弹窗的默认配置
|
||||
// setDefaultModalProps({
|
||||
// fullscreenButton: false,
|
||||
// });
|
||||
// // 设置抽屉的默认配置
|
||||
// setDefaultDrawerProps({
|
||||
// // zIndex: 1020,
|
||||
// });
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
// 国际化 i18n 配置
|
||||
@@ -30,6 +40,9 @@ async function bootstrap(namespace: string) {
|
||||
// 安装权限指令
|
||||
registerAccessDirective(app);
|
||||
|
||||
// 初始化 tippy
|
||||
initTippy(app);
|
||||
|
||||
// 配置路由及路由守卫
|
||||
app.use(router);
|
||||
|
||||
|
||||
@@ -132,6 +132,7 @@ watch(
|
||||
:text="userStore.userInfo?.realName"
|
||||
description="ann.vben@gmail.com"
|
||||
tag-text="Pro"
|
||||
trigger="both"
|
||||
@logout="handleLogout"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
|
||||
import type { Locale } from 'ant-design-vue/es/locale';
|
||||
|
||||
import type { App } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import {
|
||||
$t,
|
||||
@@ -10,10 +8,10 @@ import {
|
||||
loadLocalesMapFromDir,
|
||||
} from '@vben/locales';
|
||||
import { preferences } from '@vben/preferences';
|
||||
|
||||
import antdEnLocale from 'ant-design-vue/es/locale/en_US';
|
||||
import antdDefaultLocale from 'ant-design-vue/es/locale/zh_CN';
|
||||
import dayjs from 'dayjs';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const antdLocale = ref<Locale>(antdDefaultLocale);
|
||||
|
||||
|
||||
@@ -56,5 +56,11 @@
|
||||
"timestamp": "Timestamp:",
|
||||
"x": "x:",
|
||||
"y": "y:"
|
||||
},
|
||||
"resize": {
|
||||
"title": "Resize"
|
||||
},
|
||||
"layout": {
|
||||
"col-page": "ColPage Layout"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
"register": "Register",
|
||||
"codeLogin": "Code Login",
|
||||
"qrcodeLogin": "Qr Code Login",
|
||||
"forgetPassword": "Forget Password"
|
||||
"forgetPassword": "Forget Password",
|
||||
"sendingCode": "SMS Code is sending...",
|
||||
"codeSentTo": "Code has been sent to {0}"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Dashboard",
|
||||
|
||||
@@ -59,5 +59,8 @@
|
||||
"timestamp": "时间戳：",
|
||||
"x": "x：",
|
||||
"y": "y："
|
||||
},
|
||||
"layout": {
|
||||
"col-page": "双列布局"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
"register": "注册",
|
||||
"codeLogin": "验证码登录",
|
||||
"qrcodeLogin": "二维码登录",
|
||||
"forgetPassword": "忘记密码"
|
||||
"forgetPassword": "忘记密码",
|
||||
"sendingCode": "正在发送验证码",
|
||||
"codeSentTo": "验证码已发送至{0}"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "概览",
|
||||
|
||||
@@ -52,7 +52,9 @@ function setupAccessGuard(router: Router) {
|
||||
if (coreRouteNames.includes(to.name as string)) {
|
||||
if (to.path === LOGIN_PATH && accessStore.accessToken) {
|
||||
return decodeURIComponent(
|
||||
(to.query?.redirect as string) || DEFAULT_HOME_PATH,
|
||||
(to.query?.redirect as string) ||
|
||||
userStore.userInfo?.homePath ||
|
||||
DEFAULT_HOME_PATH,
|
||||
);
|
||||
}
|
||||
return true;
|
||||
@@ -70,7 +72,10 @@ function setupAccessGuard(router: Router) {
|
||||
return {
|
||||
path: LOGIN_PATH,
|
||||
// 如不需要，直接删除 query
|
||||
query: { redirect: encodeURIComponent(to.fullPath) },
|
||||
query:
|
||||
to.fullPath === DEFAULT_HOME_PATH
|
||||
? {}
|
||||
: { redirect: encodeURIComponent(to.fullPath) },
|
||||
// 携带当前跳转的页面，登录后重新跳转该页面
|
||||
replace: true,
|
||||
};
|
||||
@@ -100,7 +105,10 @@ function setupAccessGuard(router: Router) {
|
||||
accessStore.setAccessMenus(accessibleMenus);
|
||||
accessStore.setAccessRoutes(accessibleRoutes);
|
||||
accessStore.setIsAccessChecked(true);
|
||||
const redirectPath = (from.query.redirect ?? to.fullPath) as string;
|
||||
const redirectPath = (from.query.redirect ??
|
||||
(to.path === DEFAULT_HOME_PATH
|
||||
? userInfo.homePath || DEFAULT_HOME_PATH
|
||||
: to.fullPath)) as string;
|
||||
|
||||
return {
|
||||
...router.resolve(decodeURIComponent(redirectPath)),
|
||||
|
||||
@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
|
||||
|
||||
import { AuthPageLayout } from '#/layouts';
|
||||
import { AuthPageLayout, BasicLayout } from '#/layouts';
|
||||
import { $t } from '#/locales';
|
||||
import Login from '#/views/_core/authentication/login.vue';
|
||||
|
||||
@@ -21,13 +21,21 @@ const fallbackNotFoundRoute: RouteRecordRaw = {
|
||||
|
||||
/** 基本路由，这些路由是必须存在的 */
|
||||
const coreRoutes: RouteRecordRaw[] = [
|
||||
/**
|
||||
* 根路由
|
||||
* 使用基础布局，作为所有页面的父级容器，子级就不必配置BasicLayout。
|
||||
* 此路由必须存在，且不应修改
|
||||
*/
|
||||
{
|
||||
component: BasicLayout,
|
||||
meta: {
|
||||
hideInBreadcrumb: true,
|
||||
title: 'Root',
|
||||
},
|
||||
name: 'Root',
|
||||
path: '/',
|
||||
redirect: DEFAULT_HOME_PATH,
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
component: AuthPageLayout,
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
import { BasicLayout } from '#/layouts';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
component: BasicLayout,
|
||||
meta: {
|
||||
icon: 'lucide:layout-dashboard',
|
||||
order: -1,
|
||||
title: $t('page.dashboard.title'),
|
||||
},
|
||||
name: 'Dashboard',
|
||||
path: '/',
|
||||
path: '/dashboard',
|
||||
children: [
|
||||
{
|
||||
name: 'Analytics',
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
import { BasicLayout, IFrameView } from '#/layouts';
|
||||
import { IFrameView } from '#/layouts';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
component: BasicLayout,
|
||||
meta: {
|
||||
icon: 'ic:baseline-view-in-ar',
|
||||
keepAlive: true,
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
import { BasicLayout } from '#/layouts';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
component: BasicLayout,
|
||||
meta: {
|
||||
icon: 'ion:layers-outline',
|
||||
keepAlive: true,
|
||||
@@ -237,6 +235,26 @@ const routes: RouteRecordRaw[] = [
|
||||
title: $t('examples.resize.title'),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'ColPageDemo',
|
||||
path: '/examples/layout/col-page',
|
||||
component: () => import('#/views/examples/layout/col-page.vue'),
|
||||
meta: {
|
||||
badge: 'Alpha',
|
||||
badgeVariants: 'destructive',
|
||||
icon: 'material-symbols:horizontal-distribute',
|
||||
title: $t('examples.layout.col-page'),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'TippyDemo',
|
||||
path: '/examples/tippy',
|
||||
component: () => import('#/views/examples/tippy/index.vue'),
|
||||
meta: {
|
||||
icon: 'mdi:message-settings-outline',
|
||||
title: 'Tippy',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -10,30 +10,20 @@ import {
|
||||
} from '@vben/constants';
|
||||
import { SvgAntdvLogoIcon } from '@vben/icons';
|
||||
|
||||
import { BasicLayout, IFrameView } from '#/layouts';
|
||||
import { IFrameView } from '#/layouts';
|
||||
import { $t } from '#/locales';
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
component: BasicLayout,
|
||||
meta: {
|
||||
badgeType: 'dot',
|
||||
icon: VBEN_LOGO_URL,
|
||||
order: 9999,
|
||||
order: 9998,
|
||||
title: $t('demos.vben.title'),
|
||||
},
|
||||
name: 'VbenProject',
|
||||
path: '/vben-admin',
|
||||
children: [
|
||||
{
|
||||
name: 'VbenAbout',
|
||||
path: '/vben-admin/about',
|
||||
component: () => import('#/views/_core/about/index.vue'),
|
||||
meta: {
|
||||
icon: 'lucide:copyright',
|
||||
title: $t('demos.vben.about'),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'VbenDocument',
|
||||
path: '/vben-admin/document',
|
||||
@@ -89,6 +79,16 @@ const routes: RouteRecordRaw[] = [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
component: () => import('#/views/_core/about/index.vue'),
|
||||
meta: {
|
||||
icon: 'lucide:copyright',
|
||||
order: 9999,
|
||||
title: $t('demos.vben.about'),
|
||||
},
|
||||
name: 'VbenAbout',
|
||||
path: '/vben-admin/about',
|
||||
},
|
||||
];
|
||||
|
||||
export default routes;
|
||||
|
||||
@@ -2,15 +2,36 @@
|
||||
import type { VbenFormSchema } from '@vben/common-ui';
|
||||
import type { Recordable } from '@vben/types';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
import { computed, ref, useTemplateRef } from 'vue';
|
||||
|
||||
import { AuthenticationCodeLogin, z } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
defineOptions({ name: 'CodeLogin' });
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const CODE_LENGTH = 6;
|
||||
const loginRef =
|
||||
useTemplateRef<InstanceType<typeof AuthenticationCodeLogin>>('loginRef');
|
||||
function sendCodeApi(phoneNumber: string) {
|
||||
message.loading({
|
||||
content: $t('page.auth.sendingCode'),
|
||||
duration: 0,
|
||||
key: 'sending-code',
|
||||
});
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
message.success({
|
||||
content: $t('page.auth.codeSentTo', [phoneNumber]),
|
||||
duration: 3,
|
||||
key: 'sending-code',
|
||||
});
|
||||
resolve({ code: '123456', phoneNumber });
|
||||
}, 3000);
|
||||
});
|
||||
}
|
||||
const formSchema = computed((): VbenFormSchema[] => {
|
||||
return [
|
||||
{
|
||||
@@ -30,6 +51,7 @@ const formSchema = computed((): VbenFormSchema[] => {
|
||||
{
|
||||
component: 'VbenPinInput',
|
||||
componentProps: {
|
||||
codeLength: CODE_LENGTH,
|
||||
createText: (countdown: number) => {
|
||||
const text =
|
||||
countdown > 0
|
||||
@@ -37,11 +59,32 @@ const formSchema = computed((): VbenFormSchema[] => {
|
||||
: $t('authentication.sendCode');
|
||||
return text;
|
||||
},
|
||||
handleSendCode: async () => {
|
||||
// 模拟发送验证码
|
||||
// Simulate sending verification code
|
||||
loading.value = true;
|
||||
const formApi = loginRef.value?.getFormApi();
|
||||
if (!formApi) {
|
||||
loading.value = false;
|
||||
throw new Error('formApi is not ready');
|
||||
}
|
||||
await formApi.validateField('phoneNumber');
|
||||
const isPhoneReady = await formApi.isFieldValid('phoneNumber');
|
||||
if (!isPhoneReady) {
|
||||
loading.value = false;
|
||||
throw new Error('Phone number is not Ready');
|
||||
}
|
||||
const { phoneNumber } = await formApi.getValues();
|
||||
await sendCodeApi(phoneNumber);
|
||||
loading.value = false;
|
||||
},
|
||||
placeholder: $t('authentication.code'),
|
||||
},
|
||||
fieldName: 'code',
|
||||
label: $t('authentication.code'),
|
||||
rules: z.string().min(1, { message: $t('authentication.codeTip') }),
|
||||
rules: z.string().length(CODE_LENGTH, {
|
||||
message: $t('authentication.codeTip', [CODE_LENGTH]),
|
||||
}),
|
||||
},
|
||||
];
|
||||
});
|
||||
@@ -58,6 +101,7 @@ async function handleLogin(values: Recordable<any>) {
|
||||
|
||||
<template>
|
||||
<AuthenticationCodeLogin
|
||||
ref="loginRef"
|
||||
:form-schema="formSchema"
|
||||
:loading="loading"
|
||||
@submit="handleLogin"
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
import {
|
||||
EchartsUI,
|
||||
type EchartsUIType,
|
||||
useEcharts,
|
||||
} from '@vben/plugins/echarts';
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
import {
|
||||
EchartsUI,
|
||||
type EchartsUIType,
|
||||
useEcharts,
|
||||
} from '@vben/plugins/echarts';
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
import {
|
||||
EchartsUI,
|
||||
type EchartsUIType,
|
||||
useEcharts,
|
||||
} from '@vben/plugins/echarts';
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
import {
|
||||
EchartsUI,
|
||||
type EchartsUIType,
|
||||
useEcharts,
|
||||
} from '@vben/plugins/echarts';
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
import {
|
||||
EchartsUI,
|
||||
type EchartsUIType,
|
||||
useEcharts,
|
||||
} from '@vben/plugins/echarts';
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
@@ -1,7 +1,113 @@
|
||||
<script lang="ts" setup>
|
||||
import { Fallback } from '@vben/common-ui';
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { Page } from '@vben/common-ui';
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
import { MenuBadge } from '@vben-core/menu-ui';
|
||||
import { Button, Card, Radio, RadioGroup } from 'ant-design-vue';
|
||||
import { reactive } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const colors = [
|
||||
{ label: '预设：默认', value: 'default' },
|
||||
{ label: '预设：关键', value: 'destructive' },
|
||||
{ label: '预设：主要', value: 'primary' },
|
||||
{ label: '预设：成功', value: 'success' },
|
||||
{ label: '自定义', value: 'bg-gray-200 text-black' },
|
||||
];
|
||||
|
||||
const route = useRoute();
|
||||
const accessStore = useAccessStore();
|
||||
const menu = accessStore.getMenuByPath(route.path);
|
||||
const badgeProps = reactive({
|
||||
badge: menu?.badge as string,
|
||||
badgeType: menu?.badge ? 'normal' : (menu?.badgeType as 'dot' | 'normal'),
|
||||
badgeVariants: menu?.badgeVariants as string,
|
||||
});
|
||||
|
||||
const [Form] = useVbenForm({
|
||||
handleValuesChange(values) {
|
||||
badgeProps.badge = values.badge;
|
||||
badgeProps.badgeType = values.badgeType;
|
||||
badgeProps.badgeVariants = values.badgeVariants;
|
||||
},
|
||||
schema: [
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: [
|
||||
{ label: '点徽标', value: 'dot' },
|
||||
{ label: '文字徽标', value: 'normal' },
|
||||
],
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: badgeProps.badgeType,
|
||||
fieldName: 'badgeType',
|
||||
label: '类型',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
maxLength: 4,
|
||||
placeholder: '请输入徽标内容',
|
||||
style: { width: '200px' },
|
||||
},
|
||||
defaultValue: badgeProps.badge,
|
||||
fieldName: 'badge',
|
||||
label: '徽标内容',
|
||||
},
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
defaultValue: badgeProps.badgeVariants,
|
||||
fieldName: 'badgeVariants',
|
||||
label: '颜色',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'action',
|
||||
},
|
||||
],
|
||||
showDefaultActions: false,
|
||||
});
|
||||
|
||||
function updateMenuBadge() {
|
||||
if (menu) {
|
||||
menu.badge = badgeProps.badge;
|
||||
menu.badgeType = badgeProps.badgeType;
|
||||
menu.badgeVariants = badgeProps.badgeVariants;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback description="用于徽标示例" status="coming-soon" title="徽标示例" />
|
||||
<Page
|
||||
description="菜单项上可以显示徽标，这些徽标可以主动更新"
|
||||
title="菜单徽标"
|
||||
>
|
||||
<Card title="徽标更新">
|
||||
<Form>
|
||||
<template #badgeVariants="slotProps">
|
||||
<RadioGroup v-bind="slotProps">
|
||||
<Radio
|
||||
v-for="color in colors"
|
||||
:key="color.value"
|
||||
:value="color.value"
|
||||
>
|
||||
<div
|
||||
:title="color.label"
|
||||
class="flex h-[14px] w-[50px] items-center justify-start"
|
||||
>
|
||||
<MenuBadge
|
||||
v-bind="{ ...badgeProps, badgeVariants: color.value }"
|
||||
/>
|
||||
</div>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</template>
|
||||
<template #action>
|
||||
<Button type="primary" @click="updateMenuBadge">更新徽标</Button>
|
||||
</template>
|
||||
</Form>
|
||||
</Card>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import type { IProducts } from './typing';
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import { type Ref, ref } from 'vue';
|
||||
import type { IProducts } from './typing';
|
||||
|
||||
import { keepPreviousData, useQuery } from '@tanstack/vue-query';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const LIMIT = 10;
|
||||
const fetcher = async (page: Ref<number>): Promise<IProducts> => {
|
||||
|
||||
@@ -7,7 +7,13 @@ import { Button } from 'ant-design-vue';
|
||||
const props = defineProps<{ path: string }>();
|
||||
|
||||
function handleClick() {
|
||||
openWindow(VBEN_DOC_URL + props.path);
|
||||
// 如果没有.html，打开页面时可能会出现404
|
||||
const path =
|
||||
VBEN_DOC_URL +
|
||||
(props.path.toLowerCase().endsWith('.html')
|
||||
? props.path
|
||||
: `${props.path}.html`);
|
||||
openWindow(path);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -7,6 +7,9 @@ const [Drawer, drawerApi] = useVbenDrawer({
|
||||
onCancel() {
|
||||
drawerApi.close();
|
||||
},
|
||||
onClosed() {
|
||||
drawerApi.setState({ overlayBlur: 0, placement: 'right' });
|
||||
},
|
||||
onConfirm() {
|
||||
message.info('onConfirm');
|
||||
// drawerApi.close();
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { type DrawerPlacement, Page, useVbenDrawer } from '@vben/common-ui';
|
||||
import type { DrawerPlacement, DrawerState } from '@vben/common-ui';
|
||||
|
||||
import { Page, useVbenDrawer } from '@vben/common-ui';
|
||||
|
||||
import { Button, Card } from 'ant-design-vue';
|
||||
|
||||
@@ -40,25 +42,25 @@ const [FormDrawer, formDrawerApi] = useVbenDrawer({
|
||||
});
|
||||
|
||||
function openBaseDrawer(placement: DrawerPlacement = 'right') {
|
||||
baseDrawerApi.setState({ placement });
|
||||
baseDrawerApi.open();
|
||||
baseDrawerApi.setState({ placement }).open();
|
||||
}
|
||||
|
||||
function openBlurDrawer() {
|
||||
baseDrawerApi.setState({ overlayBlur: 5 }).open();
|
||||
}
|
||||
|
||||
function openInContentDrawer(placement: DrawerPlacement = 'right') {
|
||||
inContentDrawerApi.setState({ class: '', placement });
|
||||
const state: Partial<DrawerState> = { class: '', placement };
|
||||
if (placement === 'top') {
|
||||
// 页面顶部区域的层级只有200，所以设置一个低于200的值，抽屉从顶部滑出来的时候才比较合适
|
||||
inContentDrawerApi.setState({ zIndex: 199 });
|
||||
} else {
|
||||
inContentDrawerApi.setState({ zIndex: undefined });
|
||||
state.zIndex = 199;
|
||||
}
|
||||
inContentDrawerApi.open();
|
||||
inContentDrawerApi.setState(state).open();
|
||||
}
|
||||
|
||||
function openMaxContentDrawer() {
|
||||
// 这里只是用来演示方便。实际上自己使用的时候可以直接将这些配置卸载Drawer的属性里
|
||||
inContentDrawerApi.setState({ class: 'w-full', placement: 'right' });
|
||||
inContentDrawerApi.open();
|
||||
inContentDrawerApi.setState({ class: 'w-full', placement: 'right' }).open();
|
||||
}
|
||||
|
||||
function openAutoHeightDrawer() {
|
||||
@@ -70,24 +72,25 @@ function openDynamicDrawer() {
|
||||
}
|
||||
|
||||
function handleUpdateTitle() {
|
||||
dynamicDrawerApi.setState({ title: '外部动态标题' });
|
||||
dynamicDrawerApi.open();
|
||||
dynamicDrawerApi.setState({ title: '外部动态标题' }).open();
|
||||
}
|
||||
|
||||
function openSharedDrawer() {
|
||||
sharedDrawerApi.setData({
|
||||
content: '外部传递的数据 content',
|
||||
payload: '外部传递的数据 payload',
|
||||
});
|
||||
sharedDrawerApi.open();
|
||||
sharedDrawerApi
|
||||
.setData({
|
||||
content: '外部传递的数据 content',
|
||||
payload: '外部传递的数据 payload',
|
||||
})
|
||||
.open();
|
||||
}
|
||||
|
||||
function openFormDrawer() {
|
||||
formDrawerApi.setData({
|
||||
// 表单值
|
||||
values: { field1: 'abc', field2: '123' },
|
||||
});
|
||||
formDrawerApi.open();
|
||||
formDrawerApi
|
||||
.setData({
|
||||
// 表单值
|
||||
values: { field1: 'abc', field2: '123' },
|
||||
})
|
||||
.open();
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -125,6 +128,9 @@ function openFormDrawer() {
|
||||
<Button class="mb-2 ml-2" type="primary" @click="openBaseDrawer('top')">
|
||||
顶部打开
|
||||
</Button>
|
||||
<Button class="mb-2 ml-2" type="primary" @click="openBlurDrawer">
|
||||
遮罩层模糊效果
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4" title="在内容区域打开">
|
||||
|
||||
@@ -5,6 +5,8 @@ import { EllipsisText, Page } from '@vben/common-ui';
|
||||
|
||||
import { Card } from 'ant-design-vue';
|
||||
|
||||
import DocButton from '../doc-button.vue';
|
||||
|
||||
const longText = `Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。`;
|
||||
|
||||
const text = ref(longText);
|
||||
@@ -15,6 +17,9 @@ const text = ref(longText);
|
||||
description="用于多行文本省略，支持点击展开和自定义内容。"
|
||||
title="文本省略组件示例"
|
||||
>
|
||||
<template #extra>
|
||||
<DocButton class="mb-2" path="/components/common-ui/vben-ellipsis-text" />
|
||||
</template>
|
||||
<Card class="mb-4" title="基本使用">
|
||||
<EllipsisText :max-width="500">{{ text }}</EllipsisText>
|
||||
</Card>
|
||||
|
||||
@@ -1,21 +1,37 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Button, Card, message, TabPane, Tabs } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { getAllMenusApi } from '#/api';
|
||||
import { Page } from '@vben/common-ui';
|
||||
import { useDebounceFn } from '@vueuse/core';
|
||||
import { Button, Card, message, Spin, TabPane, Tabs } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { h, ref } from 'vue';
|
||||
|
||||
import DocButton from '../doc-button.vue';
|
||||
|
||||
const activeTab = ref('basic');
|
||||
const keyword = ref('');
|
||||
const fetching = ref(false);
|
||||
// 模拟远程获取数据
|
||||
function fetchRemoteOptions({ keyword = '选项' }: Record<string, any>) {
|
||||
fetching.value = true;
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const options = Array.from({ length: 10 }).map((_, index) => ({
|
||||
label: `${keyword}-${index}`,
|
||||
value: `${keyword}-${index}`,
|
||||
}));
|
||||
resolve(options);
|
||||
fetching.value = false;
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
const [BaseForm, baseFormApi] = useVbenForm({
|
||||
// 所有表单项共用，可单独在表单内覆盖
|
||||
commonConfig: {
|
||||
// 在label后显示一个冒号
|
||||
colon: true,
|
||||
// 所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
@@ -40,6 +56,7 @@ const [BaseForm, baseFormApi] = useVbenForm({
|
||||
fieldName: 'username',
|
||||
// 界面显示的label
|
||||
label: '字符串',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
// 组件需要在 #/adapter.ts内注册，并加上类型
|
||||
@@ -61,6 +78,37 @@ const [BaseForm, baseFormApi] = useVbenForm({
|
||||
// 界面显示的label
|
||||
label: 'ApiSelect',
|
||||
},
|
||||
{
|
||||
component: 'ApiSelect',
|
||||
// 对应组件的参数
|
||||
componentProps: () => {
|
||||
return {
|
||||
api: fetchRemoteOptions,
|
||||
// 禁止本地过滤
|
||||
filterOption: false,
|
||||
// 如果正在获取数据，使用插槽显示一个loading
|
||||
notFoundContent: fetching.value ? undefined : null,
|
||||
// 搜索词变化时记录下来， 使用useDebounceFn防抖。
|
||||
onSearch: useDebounceFn((value: string) => {
|
||||
keyword.value = value;
|
||||
}, 300),
|
||||
// 远程搜索参数。当搜索词变化时，params也会更新
|
||||
params: {
|
||||
keyword: keyword.value || undefined,
|
||||
},
|
||||
showSearch: true,
|
||||
};
|
||||
},
|
||||
// 字段名
|
||||
fieldName: 'remoteSearch',
|
||||
// 界面显示的label
|
||||
label: '远程搜索',
|
||||
renderComponentContent: () => {
|
||||
return {
|
||||
notFoundContent: fetching.value ? h(Spin) : undefined,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'ApiTreeSelect',
|
||||
// 对应组件的参数
|
||||
@@ -392,7 +440,7 @@ function handleSetFormValue() {
|
||||
</Tabs>
|
||||
</template>
|
||||
<template #extra>
|
||||
<DocButton path="/components/common-ui/vben-form" />
|
||||
<DocButton class="mb-2" path="/components/common-ui/vben-form" />
|
||||
</template>
|
||||
<Card v-show="activeTab === 'basic'" title="基础示例">
|
||||
<template #extra>
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
import { h } from 'vue';
|
||||
import { h, markRaw } from 'vue';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Card, Input, message } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { useVbenForm, z } from '#/adapter/form';
|
||||
|
||||
import TwoFields from './modules/two-fields.vue';
|
||||
|
||||
const [Form] = useVbenForm({
|
||||
// 所有表单项共用，可单独在表单内覆盖
|
||||
@@ -16,6 +18,7 @@ const [Form] = useVbenForm({
|
||||
},
|
||||
labelClass: 'w-2/6',
|
||||
},
|
||||
fieldMappingTime: [['field4', ['phoneType', 'phoneNumber'], null]],
|
||||
// 提交函数
|
||||
handleSubmit: onSubmit,
|
||||
// 垂直布局，label和input在不同行，值为vertical
|
||||
@@ -39,9 +42,10 @@ const [Form] = useVbenForm({
|
||||
}),
|
||||
},
|
||||
{
|
||||
component: h(Input, { placeholder: '请输入' }),
|
||||
component: h(Input, { placeholder: '请输入Field2' }),
|
||||
fieldName: 'field2',
|
||||
label: '自定义组件',
|
||||
modelPropName: 'value',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
@@ -50,6 +54,27 @@ const [Form] = useVbenForm({
|
||||
label: '自定义组件(slot)',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: markRaw(TwoFields),
|
||||
defaultValue: [undefined, ''],
|
||||
disabledOnChangeListener: false,
|
||||
fieldName: 'field4',
|
||||
formItemClass: 'col-span-1',
|
||||
label: '组合字段',
|
||||
rules: z
|
||||
.array(z.string().optional())
|
||||
.length(2, '请选择类型并输入手机号码')
|
||||
.refine((v) => !!v[0], {
|
||||
message: '请选择类型',
|
||||
})
|
||||
.refine((v) => !!v[1] && v[1] !== '', {
|
||||
message: ' 输入手机号码',
|
||||
})
|
||||
.refine((v) => v[1]?.match(/^1[3-9]\d{9}$/), {
|
||||
// 使用全角空格占位，将错误提示文字挤到手机号码输入框的下面
|
||||
message: ' 号码格式不正确',
|
||||
}),
|
||||
},
|
||||
],
|
||||
// 中屏一行显示2个，小屏一行显示1个
|
||||
wrapperClass: 'grid-cols-1 md:grid-cols-2',
|
||||
|
||||
42
playground/src/views/examples/form/modules/two-fields.vue
Normal file
42
playground/src/views/examples/form/modules/two-fields.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<script lang="ts" setup>
|
||||
import { Input, Select } from 'ant-design-vue';
|
||||
|
||||
const emit = defineEmits(['blur', 'change']);
|
||||
|
||||
const modelValue = defineModel<[string, string]>({
|
||||
default: () => [undefined, undefined],
|
||||
});
|
||||
|
||||
function onChange() {
|
||||
emit('change', modelValue.value);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex w-full gap-1">
|
||||
<Select
|
||||
v-model:value="modelValue[0]"
|
||||
class="w-[80px]"
|
||||
placeholder="类型"
|
||||
allow-clear
|
||||
:class="{ 'valid-success': !!modelValue[0] }"
|
||||
:options="[
|
||||
{ label: '个人', value: 'personal' },
|
||||
{ label: '工作', value: 'work' },
|
||||
{ label: '私密', value: 'private' },
|
||||
]"
|
||||
@blur="emit('blur')"
|
||||
@change="onChange"
|
||||
/>
|
||||
<Input
|
||||
placeholder="请输入11位手机号码"
|
||||
class="flex-1"
|
||||
allow-clear
|
||||
:class="{ 'valid-success': modelValue[1]?.match(/^1[3-9]\d{9}$/) }"
|
||||
v-model:value="modelValue[1]"
|
||||
:maxlength="11"
|
||||
type="tel"
|
||||
@blur="emit('blur')"
|
||||
@change="onChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
106
playground/src/views/examples/layout/col-page.vue
Normal file
106
playground/src/views/examples/layout/col-page.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
import { ColPage } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Card,
|
||||
Checkbox,
|
||||
Slider,
|
||||
Tag,
|
||||
Tooltip,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
const props = reactive({
|
||||
leftCollapsedWidth: 5,
|
||||
leftCollapsible: true,
|
||||
leftMaxWidth: 50,
|
||||
leftMinWidth: 20,
|
||||
leftWidth: 30,
|
||||
resizable: true,
|
||||
rightWidth: 70,
|
||||
splitHandle: false,
|
||||
splitLine: false,
|
||||
});
|
||||
const leftMinWidth = ref(props.leftMinWidth || 1);
|
||||
const leftMaxWidth = ref(props.leftMaxWidth || 100);
|
||||
</script>
|
||||
<template>
|
||||
<ColPage
|
||||
auto-content-height
|
||||
description="ColPage 是一个双列布局组件，支持左侧折叠、拖拽调整宽度等功能。"
|
||||
v-bind="props"
|
||||
title="ColPage 双列布局组件"
|
||||
>
|
||||
<template #title>
|
||||
<span class="mr-2 text-2xl font-bold">ColPage 双列布局组件</span>
|
||||
<Tag color="hsl(var(--destructive))">Alpha</Tag>
|
||||
</template>
|
||||
<template #left="{ isCollapsed, expand }">
|
||||
<div v-if="isCollapsed" @click="expand">
|
||||
<Tooltip title="点击展开左侧">
|
||||
<Button shape="circle" type="primary">
|
||||
<template #icon>
|
||||
<IconifyIcon class="text-2xl" icon="bi:arrow-right" />
|
||||
</template>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
:style="{ minWidth: '200px' }"
|
||||
class="border-border bg-card mr-2 rounded-[var(--radius)] border p-2"
|
||||
>
|
||||
<p>这里是左侧内容</p>
|
||||
<p>这里是左侧内容</p>
|
||||
<p>这里是左侧内容</p>
|
||||
<p>这里是左侧内容</p>
|
||||
<p>这里是左侧内容</p>
|
||||
</div>
|
||||
</template>
|
||||
<Card class="ml-2" title="基本使用">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex gap-2">
|
||||
<Checkbox v-model:checked="props.resizable">可拖动调整宽度</Checkbox>
|
||||
<Checkbox v-model:checked="props.splitLine">显示拖动分隔线</Checkbox>
|
||||
<Checkbox v-model:checked="props.splitHandle">显示拖动手柄</Checkbox>
|
||||
<Checkbox v-model:checked="props.leftCollapsible">
|
||||
左侧可折叠
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>左侧最小宽度百分比：</span>
|
||||
<Slider
|
||||
v-model:value="leftMinWidth"
|
||||
:max="props.leftMaxWidth - 1"
|
||||
:min="1"
|
||||
style="width: 100px"
|
||||
@after-change="(value) => (props.leftMinWidth = value as number)"
|
||||
/>
|
||||
<span>左侧最大宽度百分比：</span>
|
||||
<Slider
|
||||
v-model:value="props.leftMaxWidth"
|
||||
:max="100"
|
||||
:min="leftMaxWidth + 1"
|
||||
style="width: 100px"
|
||||
@after-change="(value) => (props.leftMaxWidth = value as number)"
|
||||
/>
|
||||
</div>
|
||||
<Alert message="实验性的组件" show-icon type="warning">
|
||||
<template #description>
|
||||
<p>
|
||||
双列布局组件是一个在Page组件上扩展的相对基础的布局组件，支持左侧折叠（当拖拽导致左侧宽度比最小宽度还要小时，还可以进入折叠状态）、拖拽调整宽度等功能。
|
||||
</p>
|
||||
<p>以上宽度设置的数值是百分比，最小值为1，最大值为100。</p>
|
||||
<p class="font-bold text-red-600">
|
||||
这是一个实验性的组件，用法可能会发生变动，也可能最终不会被采用。在其用法正式出现在文档中之前，不建议在生产环境中使用。
|
||||
</p>
|
||||
</template>
|
||||
</Alert>
|
||||
</div>
|
||||
</Card>
|
||||
</ColPage>
|
||||
</template>
|
||||
23
playground/src/views/examples/modal/blur-demo.vue
Normal file
23
playground/src/views/examples/modal/blur-demo.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { Slider } from 'ant-design-vue';
|
||||
|
||||
const blur = ref(5);
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
overlayBlur: blur.value,
|
||||
});
|
||||
watch(blur, (val) => {
|
||||
modalApi.setState({
|
||||
overlayBlur: val,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Modal title="遮罩层模糊">
|
||||
<p>调整滑块来改变遮罩层模糊程度：{{ blur }}</p>
|
||||
<Slider v-model:value="blur" :max="30" :min="0" />
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -9,10 +9,6 @@ defineOptions({
|
||||
name: 'FormModelDemo',
|
||||
});
|
||||
|
||||
function onSubmit(values: Record<string, any>) {
|
||||
message.info(JSON.stringify(values)); // 只会执行一次
|
||||
}
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
handleSubmit: onSubmit,
|
||||
schema: [
|
||||
@@ -70,6 +66,23 @@ const [Modal, modalApi] = useVbenModal({
|
||||
},
|
||||
title: '内嵌表单示例',
|
||||
});
|
||||
|
||||
function onSubmit(values: Record<string, any>) {
|
||||
message.loading({
|
||||
content: '正在提交中...',
|
||||
duration: 0,
|
||||
key: 'is-form-submitting',
|
||||
});
|
||||
modalApi.lock();
|
||||
setTimeout(() => {
|
||||
modalApi.close();
|
||||
message.success({
|
||||
content: `提交成功：${JSON.stringify(values)}`,
|
||||
duration: 2,
|
||||
key: 'is-form-submitting',
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Modal>
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
<script lang="ts" setup>
|
||||
import { Page, useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { Button, Card } from 'ant-design-vue';
|
||||
import { Button, Card, Flex } from 'ant-design-vue';
|
||||
|
||||
import DocButton from '../doc-button.vue';
|
||||
import AutoHeightDemo from './auto-height-demo.vue';
|
||||
import BaseDemo from './base-demo.vue';
|
||||
import BlurDemo from './blur-demo.vue';
|
||||
import DragDemo from './drag-demo.vue';
|
||||
import DynamicDemo from './dynamic-demo.vue';
|
||||
import FormModalDemo from './form-modal-demo.vue';
|
||||
import InContentModalDemo from './in-content-demo.vue';
|
||||
import NestedDemo from './nested-demo.vue';
|
||||
import SharedDataDemo from './shared-data-demo.vue';
|
||||
|
||||
const [BaseModal, baseModalApi] = useVbenModal({
|
||||
@@ -42,6 +44,14 @@ const [FormModal, formModalApi] = useVbenModal({
|
||||
connectedComponent: FormModalDemo,
|
||||
});
|
||||
|
||||
const [NestedModal, nestedModalApi] = useVbenModal({
|
||||
connectedComponent: NestedDemo,
|
||||
});
|
||||
|
||||
const [BlurModal, blurModalApi] = useVbenModal({
|
||||
connectedComponent: BlurDemo,
|
||||
});
|
||||
|
||||
function openBaseModal() {
|
||||
baseModalApi.open();
|
||||
}
|
||||
@@ -63,24 +73,33 @@ function openDynamicModal() {
|
||||
}
|
||||
|
||||
function openSharedModal() {
|
||||
sharedModalApi.setData({
|
||||
content: '外部传递的数据 content',
|
||||
payload: '外部传递的数据 payload',
|
||||
});
|
||||
sharedModalApi.open();
|
||||
sharedModalApi
|
||||
.setData({
|
||||
content: '外部传递的数据 content',
|
||||
payload: '外部传递的数据 payload',
|
||||
})
|
||||
.open();
|
||||
}
|
||||
|
||||
function openNestedModal() {
|
||||
nestedModalApi.open();
|
||||
}
|
||||
|
||||
function openBlurModal() {
|
||||
blurModalApi.open();
|
||||
}
|
||||
|
||||
function handleUpdateTitle() {
|
||||
dynamicModalApi.setState({ title: '外部动态标题' });
|
||||
dynamicModalApi.open();
|
||||
dynamicModalApi.setState({ title: '外部动态标题' }).open();
|
||||
}
|
||||
|
||||
function openFormModal() {
|
||||
formModalApi.setData({
|
||||
// 表单值
|
||||
values: { field1: 'abc' },
|
||||
});
|
||||
formModalApi.open();
|
||||
formModalApi
|
||||
.setData({
|
||||
// 表单值
|
||||
values: { field1: 'abc', field2: '123' },
|
||||
})
|
||||
.open();
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -100,44 +119,80 @@ function openFormModal() {
|
||||
<DynamicModal />
|
||||
<SharedDataModal />
|
||||
<FormModal />
|
||||
<Card class="mb-4" title="基本使用">
|
||||
<p class="mb-3">一个基础的弹窗示例</p>
|
||||
<Button type="primary" @click="openBaseModal">打开弹窗</Button>
|
||||
</Card>
|
||||
<NestedModal />
|
||||
<BlurModal />
|
||||
<Flex wrap="wrap" class="w-full" gap="10">
|
||||
<Card class="w-[300px]" title="基本使用">
|
||||
<p>一个基础的弹窗示例</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openBaseModal">打开弹窗</Button>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4" title="指定容器">
|
||||
<p class="mb-3">在内容区域打开弹窗的示例</p>
|
||||
<Button type="primary" @click="openInContentModal">打开弹窗</Button>
|
||||
</Card>
|
||||
<Card class="w-[300px]" title="指定容器">
|
||||
<p>在内容区域打开弹窗的示例</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openInContentModal">打开弹窗</Button>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4" title="内容高度自适应">
|
||||
<p class="mb-3">可根据内容并自动调整高度</p>
|
||||
<Button type="primary" @click="openAutoHeightModal">打开弹窗</Button>
|
||||
</Card>
|
||||
<Card class="w-[300px]" title="内容高度自适应">
|
||||
<p>可根据内容并自动调整高度</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openAutoHeightModal">
|
||||
打开弹窗
|
||||
</Button>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4" title="可拖拽示例">
|
||||
<p class="mb-3">配置 draggable 可开启拖拽功能</p>
|
||||
<Button type="primary" @click="openDragModal">打开弹窗</Button>
|
||||
</Card>
|
||||
<Card class="w-[300px]" title="可拖拽示例">
|
||||
<p>配置 draggable 可开启拖拽功能</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openDragModal"> 打开弹窗 </Button>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4" title="动态配置示例">
|
||||
<p class="mb-3">通过 setState 动态调整弹窗数据</p>
|
||||
<Button type="primary" @click="openDynamicModal">打开弹窗</Button>
|
||||
<Button class="ml-2" type="primary" @click="handleUpdateTitle">
|
||||
从外部修改标题并打开
|
||||
</Button>
|
||||
</Card>
|
||||
<Card class="w-[300px]" title="动态配置示例">
|
||||
<p>通过 setState 动态调整弹窗数据</p>
|
||||
<template #extra>
|
||||
<Button type="link" @click="openDynamicModal">打开弹窗</Button>
|
||||
</template>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="handleUpdateTitle">
|
||||
外部修改标题并打开
|
||||
</Button>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4" title="内外数据共享示例">
|
||||
<p class="mb-3">通过共享 sharedData 来进行数据交互</p>
|
||||
<Button type="primary" @click="openSharedModal">
|
||||
打开弹窗并传递数据
|
||||
</Button>
|
||||
</Card>
|
||||
<Card class="w-[300px]" title="内外数据共享示例">
|
||||
<p>通过共享 sharedData 来进行数据交互</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openSharedModal">
|
||||
打开弹窗并传递数据
|
||||
</Button>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-4" title="表单弹窗示例">
|
||||
<p class="mb-3">弹窗与表单结合</p>
|
||||
<Button type="primary" @click="openFormModal"> 打开弹窗 </Button>
|
||||
</Card>
|
||||
<Card class="w-[300px]" title="表单弹窗示例">
|
||||
<p>弹窗与表单结合</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openFormModal"> 打开表单弹窗 </Button>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="w-[300px]" title="嵌套弹窗示例">
|
||||
<p>在已经打开的弹窗中再次打开弹窗</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openNestedModal">打开嵌套弹窗</Button>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card class="w-[300px]" title="遮罩模糊示例">
|
||||
<p>遮罩层应用类似毛玻璃的模糊效果</p>
|
||||
<template #actions>
|
||||
<Button type="primary" @click="openBlurModal">打开弹窗</Button>
|
||||
</template>
|
||||
</Card>
|
||||
</Flex>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
24
playground/src/views/examples/modal/nested-demo.vue
Normal file
24
playground/src/views/examples/modal/nested-demo.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<script lang="ts" setup>
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
import DragDemo from './drag-demo.vue';
|
||||
|
||||
const [Modal] = useVbenModal({
|
||||
destroyOnClose: true,
|
||||
});
|
||||
const [BaseModal, baseModalApi] = useVbenModal({
|
||||
connectedComponent: DragDemo,
|
||||
});
|
||||
|
||||
function openNestedModal() {
|
||||
baseModalApi.open();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Modal title="嵌套弹窗示例">
|
||||
<Button @click="openNestedModal" type="primary">打开子弹窗</Button>
|
||||
<BaseModal />
|
||||
</Modal>
|
||||
</template>
|
||||
303
playground/src/views/examples/tippy/index.vue
Normal file
303
playground/src/views/examples/tippy/index.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<script lang="ts" setup>
|
||||
import type { TippyProps } from '@vben/common-ui';
|
||||
|
||||
import { reactive } from 'vue';
|
||||
|
||||
import { Page, Tippy } from '@vben/common-ui';
|
||||
|
||||
import { Button, Card, Flex } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
|
||||
const tippyProps = reactive<TippyProps>({
|
||||
animation: 'shift-away',
|
||||
arrow: true,
|
||||
content: '这是一个提示',
|
||||
delay: [200, 200],
|
||||
duration: 200,
|
||||
followCursor: false,
|
||||
hideOnClick: false,
|
||||
inertia: true,
|
||||
maxWidth: 'none',
|
||||
placement: 'top',
|
||||
theme: 'dark',
|
||||
trigger: 'mouseenter focusin',
|
||||
});
|
||||
|
||||
function parseBoolean(value: string) {
|
||||
switch (value) {
|
||||
case 'false': {
|
||||
return false;
|
||||
}
|
||||
case 'true': {
|
||||
return true;
|
||||
}
|
||||
default: {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const [Form] = useVbenForm({
|
||||
handleValuesChange(values) {
|
||||
Object.assign(tippyProps, {
|
||||
...values,
|
||||
delay: [values.delay1, values.delay2],
|
||||
followCursor: parseBoolean(values.followCursor),
|
||||
hideOnClick: parseBoolean(values.hideOnClick),
|
||||
trigger: values.trigger.join(' '),
|
||||
});
|
||||
},
|
||||
schema: [
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
class: 'w-full',
|
||||
options: [
|
||||
{ label: '自动', value: 'auto' },
|
||||
{ label: '暗色', value: 'dark' },
|
||||
{ label: '亮色', value: 'light' },
|
||||
],
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: tippyProps.theme,
|
||||
fieldName: 'theme',
|
||||
label: '主题',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
options: [
|
||||
{ label: '向上滑入', value: 'shift-away' },
|
||||
{ label: '向下滑入', value: 'shift-toward' },
|
||||
{ label: '缩放', value: 'scale' },
|
||||
{ label: '透视', value: 'perspective' },
|
||||
{ label: '淡入', value: 'fade' },
|
||||
],
|
||||
},
|
||||
defaultValue: tippyProps.animation,
|
||||
fieldName: 'animation',
|
||||
label: '动画类型',
|
||||
},
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: [
|
||||
{ label: '是', value: true },
|
||||
{ label: '否', value: false },
|
||||
],
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: tippyProps.inertia,
|
||||
fieldName: 'inertia',
|
||||
label: '动画惯性',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
options: [
|
||||
{ label: '顶部', value: 'top' },
|
||||
{ label: '顶左', value: 'top-start' },
|
||||
{ label: '顶右', value: 'top-end' },
|
||||
{ label: '底部', value: 'bottom' },
|
||||
{ label: '底左', value: 'bottom-start' },
|
||||
{ label: '底右', value: 'bottom-end' },
|
||||
{ label: '左侧', value: 'left' },
|
||||
{ label: '左上', value: 'left-start' },
|
||||
{ label: '左下', value: 'left-end' },
|
||||
{ label: '右侧', value: 'right' },
|
||||
{ label: '右上', value: 'right-start' },
|
||||
{ label: '右下', value: 'right-end' },
|
||||
],
|
||||
},
|
||||
defaultValue: tippyProps.placement,
|
||||
fieldName: 'placement',
|
||||
label: '位置',
|
||||
},
|
||||
{
|
||||
component: 'InputNumber',
|
||||
componentProps: {
|
||||
addonAfter: '毫秒',
|
||||
},
|
||||
defaultValue: tippyProps.duration,
|
||||
fieldName: 'duration',
|
||||
label: '动画时长',
|
||||
},
|
||||
{
|
||||
component: 'InputNumber',
|
||||
componentProps: {
|
||||
addonAfter: '毫秒',
|
||||
},
|
||||
defaultValue: 100,
|
||||
fieldName: 'delay1',
|
||||
label: '显示延时',
|
||||
},
|
||||
{
|
||||
component: 'InputNumber',
|
||||
componentProps: {
|
||||
addonAfter: '毫秒',
|
||||
},
|
||||
defaultValue: 100,
|
||||
fieldName: 'delay2',
|
||||
label: '隐藏延时',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
defaultValue: tippyProps.content,
|
||||
fieldName: 'content',
|
||||
label: '内容',
|
||||
},
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: [
|
||||
{ label: '是', value: true },
|
||||
{ label: '否', value: false },
|
||||
],
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: tippyProps.arrow,
|
||||
fieldName: 'arrow',
|
||||
label: '指示箭头',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
options: [
|
||||
{ label: '不跟随', value: 'false' },
|
||||
{ label: '完全跟随', value: 'true' },
|
||||
{ label: '仅横向', value: 'horizontal' },
|
||||
{ label: '仅纵向', value: 'vertical' },
|
||||
{ label: '仅初始', value: 'initial' },
|
||||
],
|
||||
},
|
||||
defaultValue: tippyProps.followCursor?.toString(),
|
||||
fieldName: 'followCursor',
|
||||
label: '跟随指针',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
mode: 'multiple',
|
||||
options: [
|
||||
{ label: '鼠标移入', value: 'mouseenter' },
|
||||
{ label: '被点击', value: 'click' },
|
||||
{ label: '获得焦点', value: 'focusin' },
|
||||
{ label: '无触发，仅手动', value: 'manual' },
|
||||
],
|
||||
},
|
||||
defaultValue: tippyProps.trigger?.split(' '),
|
||||
fieldName: 'trigger',
|
||||
label: '触发方式',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
options: [
|
||||
{ label: '否', value: 'false' },
|
||||
{ label: '是', value: 'true' },
|
||||
{ label: '仅内部', value: 'toggle' },
|
||||
],
|
||||
},
|
||||
defaultValue: tippyProps.hideOnClick?.toString(),
|
||||
dependencies: {
|
||||
componentProps(_, formAction) {
|
||||
return {
|
||||
disabled: !formAction.values.trigger.includes('click'),
|
||||
};
|
||||
},
|
||||
triggerFields: ['trigger'],
|
||||
},
|
||||
fieldName: 'hideOnClick',
|
||||
help: '只有在触发方式为`click`时才有效',
|
||||
label: '点击后隐藏',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: 'none、200px',
|
||||
},
|
||||
defaultValue: tippyProps.maxWidth,
|
||||
fieldName: 'maxWidth',
|
||||
label: '最大宽度',
|
||||
},
|
||||
],
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
||||
});
|
||||
|
||||
function goDoc() {
|
||||
window.open('https://atomiks.github.io/tippyjs/v6/all-props/');
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Page title="Tippy">
|
||||
<template #description>
|
||||
<div class="flex items-center">
|
||||
<p>
|
||||
Tippy
|
||||
是一个轻量级的提示工具库，它可以用来创建各种交互式提示，如工具提示、引导提示等。
|
||||
</p>
|
||||
<Button type="link" size="small" @click="goDoc">查看文档</Button>
|
||||
</div>
|
||||
</template>
|
||||
<Card title="指令形式使用">
|
||||
<p class="mb-4">
|
||||
指令形式使用比较简洁，直接在需要展示tooltip的组件上用v-tippy传递配置，适用于固定内容的工具提示。
|
||||
</p>
|
||||
<Flex warp="warp" gap="20">
|
||||
<Button v-tippy="'这是一个提示，使用了默认的配置'">默认配置</Button>
|
||||
|
||||
<Button
|
||||
v-tippy="{ theme: 'light', content: '这是一个提示，总是light主题' }"
|
||||
>
|
||||
指定主题
|
||||
</Button>
|
||||
<Button
|
||||
v-tippy="{
|
||||
theme: 'light',
|
||||
content: '这个提示将在点燃组件100毫秒后激活',
|
||||
delay: 100,
|
||||
}"
|
||||
>
|
||||
指定延时
|
||||
</Button>
|
||||
<Button
|
||||
v-tippy="{
|
||||
content: '本提示的动画为`scale`',
|
||||
animation: 'scale',
|
||||
}"
|
||||
>
|
||||
指定动画
|
||||
</Button>
|
||||
</Flex>
|
||||
</Card>
|
||||
<Card title="组件形式使用" class="mt-4">
|
||||
<div class="flex w-full justify-center">
|
||||
<Tippy v-bind="tippyProps">
|
||||
<Button>鼠标移到这个组件上来体验效果</Button>
|
||||
</Tippy>
|
||||
</div>
|
||||
|
||||
<Form class="mt-4" />
|
||||
<template #actions>
|
||||
<p
|
||||
class="text-secondary-foreground hover:text-secondary-foreground cursor-default"
|
||||
>
|
||||
更多配置请
|
||||
<Button type="link" size="small" @click="goDoc">查看文档</Button>
|
||||
，这里只列出了一些常用的配置
|
||||
</p>
|
||||
</template>
|
||||
</Card>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -82,6 +82,7 @@ const gridOptions: VxeGridProps<RowType> = {
|
||||
},
|
||||
},
|
||||
},
|
||||
showOverflow: false,
|
||||
};
|
||||
|
||||
const [Grid] = useVbenVxeGrid({ gridOptions });
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
<script lang="ts" setup>
|
||||
import type { VbenFormProps } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getExampleTableApi } from '#/api';
|
||||
@@ -21,6 +22,7 @@ interface RowType {
|
||||
const formOptions: VbenFormProps = {
|
||||
// 默认展开
|
||||
collapsed: false,
|
||||
fieldMappingTime: [['date', ['start', 'end']]],
|
||||
schema: [
|
||||
{
|
||||
component: 'Input',
|
||||
@@ -58,8 +60,9 @@ const formOptions: VbenFormProps = {
|
||||
label: 'Color',
|
||||
},
|
||||
{
|
||||
component: 'DatePicker',
|
||||
fieldName: 'datePicker',
|
||||
component: 'RangePicker',
|
||||
defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
|
||||
fieldName: 'date',
|
||||
label: 'Date',
|
||||
},
|
||||
],
|
||||
@@ -71,7 +74,7 @@ const formOptions: VbenFormProps = {
|
||||
submitOnEnter: false,
|
||||
};
|
||||
|
||||
const gridOptions: VxeGridProps<RowType> = {
|
||||
const gridOptions: VxeTableGridOptions<RowType> = {
|
||||
checkboxConfig: {
|
||||
highlight: true,
|
||||
labelField: 'name',
|
||||
@@ -85,6 +88,7 @@ const gridOptions: VxeGridProps<RowType> = {
|
||||
{ field: 'price', title: 'Price' },
|
||||
{ field: 'releaseDate', formatter: 'formatDateTime', title: 'Date' },
|
||||
],
|
||||
exportConfig: {},
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {},
|
||||
@@ -100,9 +104,20 @@ const gridOptions: VxeGridProps<RowType> = {
|
||||
},
|
||||
},
|
||||
},
|
||||
toolbarConfig: {
|
||||
custom: true,
|
||||
export: true,
|
||||
refresh: true,
|
||||
resizable: true,
|
||||
search: true,
|
||||
zoom: true,
|
||||
},
|
||||
};
|
||||
|
||||
const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
|
||||
const [Grid] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -25,10 +25,10 @@ const gridOptions: VxeGridProps<RowType> = {
|
||||
columns: [
|
||||
{ title: '序号', type: 'seq', width: 50 },
|
||||
{ align: 'left', title: 'Name', type: 'checkbox', width: 100 },
|
||||
{ field: 'category', title: 'Category' },
|
||||
{ field: 'color', title: 'Color' },
|
||||
{ field: 'productName', title: 'Product Name' },
|
||||
{ field: 'price', title: 'Price' },
|
||||
{ field: 'category', sortable: true, title: 'Category' },
|
||||
{ field: 'color', sortable: true, title: 'Color' },
|
||||
{ field: 'productName', sortable: true, title: 'Product Name' },
|
||||
{ field: 'price', sortable: true, title: 'Price' },
|
||||
{ field: 'releaseDate', formatter: 'formatDateTime', title: 'DateTime' },
|
||||
],
|
||||
exportConfig: {},
|
||||
@@ -36,19 +36,26 @@ const gridOptions: VxeGridProps<RowType> = {
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }) => {
|
||||
query: async ({ page, sort }) => {
|
||||
return await getExampleTableApi({
|
||||
page: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
sortBy: sort.field,
|
||||
sortOrder: sort.order,
|
||||
});
|
||||
},
|
||||
},
|
||||
sort: true,
|
||||
},
|
||||
sortConfig: {
|
||||
defaultSort: { field: 'category', order: 'desc' },
|
||||
remote: true,
|
||||
},
|
||||
toolbarConfig: {
|
||||
custom: true,
|
||||
export: true,
|
||||
// import: true,
|
||||
refresh: true,
|
||||
refresh: { code: 'query' },
|
||||
zoom: true,
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user