oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

!324 merge dev

Browse Source 
Merge pull request !324 from xingyu/dev
This commit is contained in:
xingyu
2026-01-26 07:06:52 +00:00
committed by Gitee
parent 42f2fecb1e c4a262d1e2
commit 35acb9558b
105 changed files with 6515 additions and 3964 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@@ -181,7 +181,8 @@
"markdown",
"json",
"jsonc",
"json5"
"json5",
"yaml"
],
"tailwindCSS.experimental.classRegex": [

32
README.md
View File

@@ -9,7 +9,7 @@
## 🐶 新手必读
- nodejs > 20.12.0 && pnpm > 10.22.0 (强制使用pnpm)
- nodejs > 20.19.0 && pnpm > 10.28.1 (强制使用pnpm)
- 演示地址【Vue3 + element-plus】：<http://dashboard-vue3.yudao.iocoder.cn>
- 演示地址【Vue3 + vben5(ant-design-vue)】：<http://dashboard-vben.yudao.iocoder.cn>
- 演示地址【Vue2 + element-ui】：<http://dashboard.yudao.iocoder.cn>
@@ -41,26 +41,26 @@
| 框架 | 说明 | 版本 |
| --- | --- | --- |
| [Vue](https://staging-cn.vuejs.org/) | vue框架 | 3.5.24 |
| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 7.2.2 |
| [Vue](https://staging-cn.vuejs.org/) | vue框架 | 3.5.27 |
| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 7.3.1 |
| [Ant Design Vue](https://www.antdv.com/) | Ant Design Vue | 4.2.6 |
| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.10.2 |
| [Naive UI](https://www.naiveui.com/) | Naive UI | 2.42.0 |
| [TDesign](https://tdesign.tencent.com/) | TDesign | 1.17.1 |
| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.13.1 |
| [Naive UI](https://www.naiveui.com/) | Naive UI | 2.43.2 |
| [TDesign](https://tdesign.tencent.com/) | TDesign | 1.18.0 |
| [TypeScript](https://www.typescriptlang.org/docs/) | JavaScript 超集 | 5.9.3 |
| [pinia](https://pinia.vuejs.org/) | Vue 存储库替代 vuex5 | 3.0.3 |
| [vueuse](https://vueuse.org/) | 常用工具集 | 13.4.0 |
| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 11.1.7 |
| [vue-router](https://router.vuejs.org/) | Vue 路由 | 4.5.1 |
| [Tailwind CSS](https://tailwindcss.com/) | 原子 CSS | 3.4.18 |
| [pinia](https://pinia.vuejs.org/) | Vue 存储库替代 vuex5 | 3.0.4 |
| [vueuse](https://vueuse.org/) | 常用工具集 | 14.1.0 |
| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 11.2.8 |
| [vue-router](https://router.vuejs.org/) | Vue 路由 | 4.6.4 |
| [Tailwind CSS](https://tailwindcss.com/) | 原子 CSS | 3.4.19 |
| [Iconify](https://iconify.design/) | 图标组件 | 5.0.0 |
| [Iconify](https://icon-sets.iconify.design/) | 在线图标库 | 2.2.406 |
| [TinyMCE](https://www.tiny.cloud/) | 富文本编辑器 | 6.1.0 |
| [Iconify](https://icon-sets.iconify.design/) | 在线图标库 | 2.2.431 |
| [TinyMCE](https://www.tiny.cloud/) | 富文本编辑器 | 7.3.0 |
| [Echarts](https://echarts.apache.org/) | 图表库 | 6.0.0 |
| [axios](https://axios-http.com/) | http客户端 | 1.10.0 |
| [dayjs](https://day.js.org/) | 日期处理库 | 1.11.13 |
| [axios](https://axios-http.com/) | http客户端 | 1.13.2 |
| [dayjs](https://day.js.org/) | 日期处理库 | 1.11.19 |
| [vee-validate](https://vee-validate.logaretm.com/) | 表单验证 | 4.15.1 |
| [zod](https://zod.dev/) | 数据验证 | 3.25.67 |
| [zod](https://zod.dev/) | 数据验证 | 3.25.76 |
## 🔥 后端架构

3
apps/web-antd/.env
View File

@@ -33,3 +33,6 @@ VITE_APP_API_ENCRYPT_REQUEST_KEY = 52549111389893486934626385991395
VITE_APP_API_ENCRYPT_RESPONSE_KEY = 96103715984234343991809655248883
# VITE_APP_API_ENCRYPT_REQUEST_KEY = MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCls2rIpnGdYnLFgz1XU13GbNQ5DloyPpvW00FPGjqn5Z6JpK+kDtVlnkhwR87iRrE5Vf2WNqRX6vzbLSgveIQY8e8oqGCb829myjf1MuI+ZzN4ghf/7tEYhZJGPI9AbfxFqBUzm+kR3/HByAI22GLT96WM26QiMK8n3tIP/yiLswIDAQAB
# VITE_APP_API_ENCRYPT_RESPONSE_KEY = MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAOH8IfIFxL/MR9XIg1UDv5z1fGXQI93E8wrU4iPFovL/sEt9uSgSkjyidC2O7N+m7EKtoN6b1u7cEwXSkwf3kfK0jdWLSQaNpX5YshqXCBzbDfugDaxuyYrNA4/tIMs7mzZAk0APuRXB35Dmupou7Yw7TFW/7QhQmGfzeEKULQvnAgMBAAECgYAw8LqlQGyQoPv5p3gRxEMOCfgL0JzD3XBJKztiRd35RDh40Nx1ejgjW4dPioFwGiVWd2W8cAGHLzALdcQT2KDJh+T/tsd4SPmI6uSBBK6Ff2DkO+kFFcuYvfclQQKqxma5CaZOSqhgenacmgTMFeg2eKlY3symV6JlFNu/IKU42QJBAOhxAK/Eq3e61aYQV2JSguhMR3b8NXJJRroRs/QHEanksJtl+M+2qhkC9nQVXBmBkndnkU/l2tYcHfSBlAyFySMCQQD445tgm/J2b6qMQmuUGQAYDN8FIkHjeKmha+l/fv0igWm8NDlBAem91lNDIPBUzHL1X1+pcts5bjmq99YdOnhtAkAg2J8dN3B3idpZDiQbC8fd5bGPmdI/pSUudAP27uzLEjr2qrE/QPPGdwm2m7IZFJtK7kK1hKio6u48t/bg0iL7AkEAuUUs94h+v702Fnym+jJ2CHEkXvz2US8UDs52nWrZYiM1o1y4tfSHm8H8bv8JCAa9GHyriEawfBraILOmllFdLQJAQSRZy4wmlaG48MhVXodB85X+VZ9krGXZ2TLhz7kz9iuToy53l9jTkESt6L5BfBDCVdIwcXLYgK+8KFdHN5W7HQ==
# 百度地图
VITE_BAIDU_MAP_KEY=Y2aJXiswwPxy6mwFs1z9c7U5gwX9WfUN

489
apps/web-antd/src/adapter/component/index.ts
View File

@@ -3,6 +3,8 @@
* 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
*/
/* eslint-disable vue/one-component-per-file */
import type {
UploadChangeParam,
UploadFile,
@@ -15,6 +17,7 @@ import type { BaseFormComponentType } from '@vben/common-ui';
import type { Recordable } from '@vben/types';
import {
computed,
defineAsyncComponent,
defineComponent,
h,
@@ -24,12 +27,17 @@ import {
watch,
} from 'vue';
import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
import {
ApiComponent,
globalShareState,
IconPicker,
VCropper,
} from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { $t } from '@vben/locales';
import { isEmpty } from '@vben/utils';
import { notification } from 'ant-design-vue';
import { message, Modal, notification } from 'ant-design-vue';
import { Tinymce as RichTextarea } from '#/components/tinymce';
import { FileUpload, ImageUpload } from '#/components/upload';
@@ -125,9 +133,249 @@ const withDefaultPlaceholder = <T extends Component>(
};
const withPreviewUpload = () => {
// 检查是否为图片文件的辅助函数
const isImageFile = (file: UploadFile): boolean => {
const imageExtensions = new Set([
'bmp',
'gif',
'jpeg',
'jpg',
'png',
'svg',
'webp',
]);
if (file.url) {
try {
const pathname = new URL(file.url, 'http://localhost').pathname;
const ext = pathname.split('.').pop()?.toLowerCase();
return ext ? imageExtensions.has(ext) : false;
} catch {
const ext = file.url?.split('.').pop()?.toLowerCase();
return ext ? imageExtensions.has(ext) : false;
}
}
if (!file.type) {
const ext = file.name?.split('.').pop()?.toLowerCase();
return ext ? imageExtensions.has(ext) : false;
}
return file.type.startsWith('image/');
};
// 创建默认的上传按钮插槽
const createDefaultSlotsWithUpload = (
listType: string,
placeholder: string,
) => {
switch (listType) {
case 'picture-card': {
return {
default: () => placeholder,
};
}
default: {
return {
default: () =>
h(
Button,
{
icon: h(IconifyIcon, {
icon: 'ant-design:upload-outlined',
class: 'mb-1 size-4',
}),
},
() => placeholder,
),
};
}
}
};
// 构建预览图片组
const previewImage = async (
file: UploadFile,
visible: Ref<boolean>,
fileList: Ref<UploadProps['fileList']>,
) => {
// 如果当前文件不是图片，直接打开
if (!isImageFile(file)) {
if (file.url) {
window.open(file.url, '_blank');
} else if (file.preview) {
window.open(file.preview, '_blank');
} else {
message.error($t('ui.formRules.previewWarning'));
}
return;
}
// 对于图片文件，继续使用预览组
const [ImageComponent, PreviewGroupComponent] = await Promise.all([
Image,
PreviewGroup,
]);
const getBase64 = (file: File) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.addEventListener('load', () => resolve(reader.result));
reader.addEventListener('error', (error) => reject(error));
});
};
// 从fileList中过滤出所有图片文件
const imageFiles = (unref(fileList) || []).filter((element) =>
isImageFile(element),
);
// 为所有没有预览地址的图片生成预览
for (const imgFile of imageFiles) {
if (!imgFile.url && !imgFile.preview && imgFile.originFileObj) {
imgFile.preview = (await getBase64(imgFile.originFileObj)) as string;
}
}
const container: HTMLElement | null = document.createElement('div');
document.body.append(container);
// 用于追踪组件是否已卸载
let isUnmounted = false;
const PreviewWrapper = {
setup() {
return () => {
if (isUnmounted) return null;
return h(
PreviewGroupComponent,
{
class: 'hidden',
preview: {
visible: visible.value,
// 设置初始显示的图片索引
current: imageFiles.findIndex((f) => f.uid === file.uid),
onVisibleChange: (value: boolean) => {
visible.value = value;
if (!value) {
// 延迟清理，确保动画完成
setTimeout(() => {
if (!isUnmounted && container) {
isUnmounted = true;
render(null, container);
container.remove();
}
}, 300);
}
},
},
},
() =>
// 渲染所有图片文件
imageFiles.map((imgFile) =>
h(ImageComponent, {
key: imgFile.uid,
src: imgFile.url || imgFile.preview,
}),
),
);
};
},
};
render(h(PreviewWrapper), container);
};
// 图片裁剪操作
const cropImage = (file: File, aspectRatio: string | undefined) => {
return new Promise((resolve, reject) => {
const container: HTMLElement | null = document.createElement('div');
document.body.append(container);
// 用于追踪组件是否已卸载
let isUnmounted = false;
let objectUrl: null | string = null;
const open = ref<boolean>(true);
const cropperRef = ref<InstanceType<typeof VCropper> | null>(null);
const closeModal = () => {
open.value = false;
// 延迟清理，确保动画完成
setTimeout(() => {
if (!isUnmounted && container) {
if (objectUrl) {
URL.revokeObjectURL(objectUrl);
}
isUnmounted = true;
render(null, container);
container.remove();
}
}, 300);
};
const CropperWrapper = {
setup() {
return () => {
if (isUnmounted) return null;
if (!objectUrl) {
objectUrl = URL.createObjectURL(file);
}
return h(
Modal,
{
open: open.value,
title: h('div', {}, [
$t('ui.crop.title'),
h(
'span',
{
class: `${aspectRatio ? '' : 'hidden'} ml-2 text-sm text-gray-400 font-normal`,
},
$t('ui.crop.titleTip', [aspectRatio]),
),
]),
centered: true,
width: 548,
keyboard: false,
maskClosable: false,
closable: false,
cancelText: $t('common.cancel'),
okText: $t('ui.crop.confirm'),
destroyOnClose: true,
onOk: async () => {
const cropper = cropperRef.value;
if (!cropper) {
reject(new Error('Cropper not found'));
closeModal();
return;
}
try {
const dataUrl = await cropper.getCropImage();
resolve(dataUrl);
} catch {
reject(new Error($t('ui.crop.errorTip')));
} finally {
closeModal();
}
},
onCancel() {
resolve('');
closeModal();
},
},
() =>
h(VCropper, {
ref: (ref: any) => (cropperRef.value = ref),
img: objectUrl as string,
aspectRatio,
}),
);
};
},
};
render(h(CropperWrapper), container);
});
};
return defineComponent({
name: Upload.name,
emits: ['change', 'update:modelValue'],
emits: ['update:modelValue'],
setup: (
props: any,
{ attrs, slots, emit }: { attrs: any; emit: any; slots: any },
@@ -142,9 +390,54 @@ const withPreviewUpload = () => {
attrs?.fileList || attrs?.['file-list'] || [],
);
const handleChange = async (event: UploadChangeParam) => {
fileList.value = event.fileList;
emit('change', event);
const maxSize = computed(() => attrs?.maxSize ?? attrs?.['max-size']);
const aspectRatio = computed(
() => attrs?.aspectRatio ?? attrs?.['aspect-ratio'],
);
const handleBeforeUpload = async (
file: UploadFile,
originFileList: Array<File>,
) => {
if (maxSize.value && (file.size || 0) / 1024 / 1024 > maxSize.value) {
message.error($t('ui.formRules.sizeLimit', [maxSize.value]));
file.status = 'removed';
return false;
}
// 多选或者非图片不唤起裁剪框
if (
attrs.crop &&
!attrs.multiple &&
originFileList[0] &&
isImageFile(file)
) {
file.status = 'removed';
// antd Upload组件问题 file参数获取的是UploadFile类型对象无法取到File类型 所以通过originFileList[0]获取
const blob = await cropImage(originFileList[0], aspectRatio.value);
return new Promise((resolve, reject) => {
if (!blob) {
return reject(new Error($t('ui.crop.errorTip')));
}
resolve(blob);
});
}
return attrs.beforeUpload?.(file) ?? true;
};
const handleChange = (event: UploadChangeParam) => {
try {
// 行内写法 handleChange: (event) => {}
attrs.handleChange?.(event);
// template写法 @handle-change="(event) => {}"
attrs.onHandleChange?.(event);
} catch (error) {
// Avoid breaking internal v-model sync on user handler errors
console.error(error);
}
fileList.value = event.fileList.filter(
(file) => file.status !== 'removed',
);
emit(
'update:modelValue',
event.fileList?.length ? fileList.value : undefined,
@@ -185,6 +478,7 @@ const withPreviewUpload = () => {
...props,
...attrs,
fileList: fileList.value,
beforeUpload: handleBeforeUpload,
onChange: handleChange,
onPreview: handlePreview,
},
@@ -194,146 +488,6 @@ const withPreviewUpload = () => {
});
};
const createDefaultSlotsWithUpload = (
listType: string,
placeholder: string,
) => {
switch (listType) {
case 'picture-card': {
return {
default: () => placeholder,
};
}
default: {
return {
default: () =>
h(
Button,
{
icon: h(IconifyIcon, {
icon: 'ant-design:upload-outlined',
class: 'mb-1 size-4',
}),
},
() => placeholder,
),
};
}
}
};
const previewImage = async (
file: UploadFile,
visible: Ref<boolean>,
fileList: Ref<UploadProps['fileList']>,
) => {
// 检查是否为图片文件的辅助函数
const isImageFile = (file: UploadFile): boolean => {
const imageExtensions = new Set([
'bmp',
'gif',
'jpeg',
'jpg',
'png',
'webp',
]);
if (file.url) {
const ext = file.url?.split('.').pop()?.toLowerCase();
return ext ? imageExtensions.has(ext) : false;
}
if (!file.type) {
const ext = file.name?.split('.').pop()?.toLowerCase();
return ext ? imageExtensions.has(ext) : false;
}
return file.type.startsWith('image/');
};
// 如果当前文件不是图片，直接打开
if (!isImageFile(file)) {
if (file.url) {
window.open(file.url, '_blank');
} else if (file.preview) {
window.open(file.preview, '_blank');
} else {
console.warn('无法打开文件，没有可用的URL或预览地址');
}
return;
}
// 对于图片文件，继续使用预览组
const [ImageComponent, PreviewGroupComponent] = await Promise.all([
Image,
PreviewGroup,
]);
const getBase64 = (file: File) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.addEventListener('load', () => resolve(reader.result));
reader.addEventListener('error', (error) => reject(error));
});
};
// 从fileList中过滤出所有图片文件
const imageFiles = (unref(fileList) || []).filter((element) =>
isImageFile(element),
);
// 为所有没有预览地址的图片生成预览
for (const imgFile of imageFiles) {
if (!imgFile.url && !imgFile.preview && imgFile.originFileObj) {
imgFile.preview = (await getBase64(imgFile.originFileObj)) as string;
}
}
const container: HTMLElement | null = document.createElement('div');
document.body.append(container);
// 用于追踪组件是否已卸载
let isUnmounted = false;
const PreviewWrapper = {
setup() {
return () => {
if (isUnmounted) return null;
return h(
PreviewGroupComponent,
{
class: 'hidden',
preview: {
visible: visible.value,
// 设置初始显示的图片索引
current: imageFiles.findIndex((f) => f.uid === file.uid),
onVisibleChange: (value: boolean) => {
visible.value = value;
if (!value) {
// 延迟清理，确保动画完成
setTimeout(() => {
if (!isUnmounted && container) {
isUnmounted = true;
render(null, container);
container.remove();
}
}, 300);
}
},
},
},
() =>
// 渲染所有图片文件
imageFiles.map((imgFile) =>
h(ImageComponent, {
key: imgFile.uid,
src: imgFile.url || imgFile.preview,
}),
),
);
};
},
};
render(h(PreviewWrapper), container);
};
// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
export type ComponentType =
| 'ApiCascader'
@@ -374,6 +528,7 @@ async function initComponentAdapter() {
// 如果你的组件体积比较大，可以使用异步加载
// Button: () =>
// import('xxx').then((res) => res.Button),
ApiCascader: withDefaultPlaceholder(ApiComponent, 'select', {
component: Cascader,
fieldNames: { label: 'label', value: 'value', children: 'children' },
@@ -381,34 +536,20 @@ async function initComponentAdapter() {
modelPropName: 'value',
visibleEvent: 'onVisibleChange',
}),
ApiSelect: withDefaultPlaceholder(
{
...ApiComponent,
name: 'ApiSelect',
},
'select',
{
component: Select,
loadingSlot: 'suffixIcon',
visibleEvent: 'onDropdownVisibleChange',
modelPropName: 'value',
},
),
ApiTreeSelect: withDefaultPlaceholder(
{
...ApiComponent,
name: 'ApiTreeSelect',
},
'select',
{
component: TreeSelect,
fieldNames: { label: 'label', value: 'value', children: 'children' },
loadingSlot: 'suffixIcon',
modelPropName: 'value',
optionsPropName: 'treeData',
visibleEvent: 'onVisibleChange',
},
),
ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', {
component: Select,
loadingSlot: 'suffixIcon',
modelPropName: 'value',
visibleEvent: 'onVisibleChange',
}),
ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', {
component: TreeSelect,
fieldNames: { label: 'label', value: 'value', children: 'children' },
loadingSlot: 'suffixIcon',
modelPropName: 'value',
optionsPropName: 'treeData',
visibleEvent: 'onVisibleChange',
}),
AutoComplete,
Cascader,
Checkbox,

117
apps/web-antd/src/api/iot/device/device/index.ts
View File

@@ -3,51 +3,17 @@ import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace IotDeviceApi {
/** 设备新增/修改 Request VO */
// TODO @haohao：可以降低一些 VO 哈：DeviceSaveReqVO、DeviceRespVO 合并成 Device 就好，类似别的模块
export interface DeviceSaveReqVO {
/** 设备 */
export interface Device {
id?: number; // 设备编号
deviceName: string; // 设备名称
nickname?: string; // 备注名称
serialNumber?: string; // 设备序列号
picUrl?: string; // 设备图片
groupIds?: number[]; // 设备分组编号数组
productId: number; // 产品编号（必填）
gatewayId?: number; // 网关设备 ID
config?: string; // 设备配置
locationType: number; // 定位类型（必填）
latitude?: number; // 设备位置的纬度
longitude?: number; // 设备位置的经度
}
/** 设备更新分组 Request VO */
export interface DeviceUpdateGroupReqVO {
ids: number[]; // 设备编号列表（必填）
groupIds: number[]; // 分组编号列表（必填）
}
/** 设备分页 Request VO */
// TODO @haohao：可以不用 DevicePageReqVO，直接 PageParam 即可，简洁一点。这里的强类型，收益不大；
export interface DevicePageReqVO extends PageParam {
deviceName?: string; // 设备名称
nickname?: string; // 备注名称
productId?: number; // 产品编号
deviceType?: number; // 设备类型
status?: number; // 设备状态
groupId?: number; // 设备分组编号
gatewayId?: number; // 网关设备 ID
}
/** 设备 Response VO */
export interface DeviceRespVO {
id: number; // 设备编号
deviceName: string; // 设备名称
nickname?: string; // 设备备注名称
serialNumber?: string; // 设备序列号
picUrl?: string; // 设备图片
groupIds?: number[]; // 设备分组编号数组
productId: number; // 产品编号
productKey?: string; // 产品标识
productName?: string; // 产品名称（只有部分接口返回，例如 getDeviceLocationList）
deviceType?: number; // 设备类型
gatewayId?: number; // 网关设备 ID
state?: number; // 设备状态
@@ -55,14 +21,18 @@ export namespace IotDeviceApi {
offlineTime?: Date; // 最后离线时间
activeTime?: Date; // 设备激活时间
deviceSecret?: string; // 设备密钥，用于设备认证
authType?: string; // 认证类型（如一机一密、动态注册）
config?: string; // 设备配置
locationType?: number; // 定位方式
latitude?: number; // 设备位置的纬度
longitude?: number; // 设备位置的经度
createTime?: Date; // 创建时间
}
/** 设备更新分组 Request VO */
export interface DeviceUpdateGroupReqVO {
ids: number[]; // 设备编号列表（必填）
groupIds: number[]; // 分组编号列表（必填）
}
/** 设备认证信息 Response VO */
export interface DeviceAuthInfoRespVO {
clientId: string; // 客户端 ID
@@ -104,8 +74,8 @@ export namespace IotDeviceApi {
}
/** 查询设备分页 */
export function getDevicePage(params: IotDeviceApi.DevicePageReqVO) {
return requestClient.get<PageResult<IotDeviceApi.DeviceRespVO>>(
export function getDevicePage(params: PageParam) {
return requestClient.get<PageResult<IotDeviceApi.Device>>(
'/iot/device/page',
{ params },
);
@@ -113,18 +83,16 @@ export function getDevicePage(params: IotDeviceApi.DevicePageReqVO) {
/** 查询设备详情 */
export function getDevice(id: number) {
return requestClient.get<IotDeviceApi.DeviceRespVO>(
`/iot/device/get?id=${id}`,
);
return requestClient.get<IotDeviceApi.Device>(`/iot/device/get?id=${id}`);
}
/** 新增设备 */
export function createDevice(data: IotDeviceApi.DeviceSaveReqVO) {
export function createDevice(data: IotDeviceApi.Device) {
return requestClient.post<number>('/iot/device/create', data);
}
/** 修改设备 */
export function updateDevice(data: IotDeviceApi.DeviceSaveReqVO) {
export function updateDevice(data: IotDeviceApi.Device) {
return requestClient.put<boolean>('/iot/device/update', data);
}
@@ -146,7 +114,7 @@ export function deleteDeviceList(ids: number[]) {
}
/** 导出设备 */
export function exportDeviceExcel(params: IotDeviceApi.DevicePageReqVO) {
export function exportDeviceExcel(params: PageParam) {
return requestClient.download('/iot/device/export-excel', { params });
}
@@ -157,22 +125,21 @@ export function getDeviceCount(productId: number) {
/** 获取设备的精简信息列表 */
export function getSimpleDeviceList(deviceType?: number, productId?: number) {
return requestClient.get<IotDeviceApi.DeviceRespVO[]>(
'/iot/device/simple-list',
{
params: { deviceType, productId },
},
);
return requestClient.get<IotDeviceApi.Device[]>('/iot/device/simple-list', {
params: { deviceType, productId },
});
}
/** 根据产品编号，获取设备的精简信息列表 */
export function getDeviceListByProductId(productId: number) {
return requestClient.get<IotDeviceApi.DeviceRespVO[]>(
'/iot/device/simple-list',
{
params: { productId },
},
);
return requestClient.get<IotDeviceApi.Device[]>('/iot/device/simple-list', {
params: { productId },
});
}
/** 获取设备位置列表（用于地图展示） */
export function getDeviceLocationList() {
return requestClient.get<IotDeviceApi.Device[]>('/iot/device/location-list');
}
/** 获取导入模板 */
@@ -233,3 +200,35 @@ export function getDeviceMessagePairPage(params: PageParam) {
export function sendDeviceMessage(params: IotDeviceApi.DeviceMessageSendReq) {
return requestClient.post('/iot/device/message/send', params);
}
/** 绑定子设备到网关设备 */
export function bindDeviceGateway(gatewayId: number, subIds: number[]) {
return requestClient.put<boolean>('/iot/device/bind-gateway', {
gatewayId,
subIds,
});
}
/** 解绑子设备与网关设备 */
export function unbindDeviceGateway(gatewayId: number, subIds: number[]) {
return requestClient.put<boolean>('/iot/device/unbind-gateway', {
gatewayId,
subIds,
});
}
/** 获取网关设备的子设备列表 */
export function getSubDeviceList(gatewayId: number) {
return requestClient.get<IotDeviceApi.Device[]>(
'/iot/device/sub-device-list',
{ params: { gatewayId } },
);
}
/** 获取未绑定的子设备分页 */
export function getUnboundSubDevicePage(params: PageParam) {
return requestClient.get<PageResult<IotDeviceApi.Device>>(
'/iot/device/unbound-sub-device-page',
{ params },
);
}

12
apps/web-antd/src/api/iot/product/product/index.ts
View File

@@ -8,6 +8,7 @@ export namespace IotProductApi {
id?: number; // 产品编号
name: string; // 产品名称
productKey?: string; // 产品标识
productSecret?: string; // 产品密钥
protocolId?: number; // 协议编号
protocolType?: number; // 接入协议类型
categoryId?: number; // 产品所属品类标识符
@@ -17,11 +18,11 @@ export namespace IotProductApi {
description?: string; // 产品描述
status?: number; // 产品状态
deviceType?: number; // 设备类型
locationType?: number; // 定位类型
netType?: number; // 联网方式
codecType?: string; // 数据格式（编解码器类型）
dataFormat?: number; // 数据格式
validateType?: number; // 认证方式
registerEnabled?: boolean; // 是否开启动态注册
deviceCount?: number; // 设备数量
createTime?: Date; // 创建时间
}
@@ -68,8 +69,13 @@ export function updateProductStatus(id: number, status: number) {
}
/** 查询产品（精简）列表 */
export function getSimpleProductList() {
return requestClient.get<IotProductApi.Product[]>('/iot/product/simple-list');
export function getSimpleProductList(deviceType?: number) {
return requestClient.get<IotProductApi.Product[]>(
'/iot/product/simple-list',
{
params: { deviceType },
},
);
}
/** 根据 ProductKey 获取产品信息 */

3
apps/web-antd/src/components/map/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export { default as MapDialog } from './src/map-dialog.vue';
export { loadBaiduMapSdk } from './src/utils';

287
apps/web-antd/src/components/map/src/map-dialog.vue Normal file
View File

@@ -0,0 +1,287 @@
<!-- 地图选择弹窗组件：基于百度地图 GL 实现 -->
<script setup lang="ts">
import { nextTick, reactive, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Button, Form, Input, Select, Space } from 'ant-design-vue';
import { loadBaiduMapSdk } from './utils';
const emit = defineEmits<{
confirm: [
data: {
address: string;
latitude: string;
longitude: string;
},
];
}>();
const mapContainerRef = ref<HTMLElement>();
const state = reactive({
lonLat: '', // 经纬度字符串，格式为 "经度,纬度"
address: '', // 地址信息
loading: false, // 地址搜索加载状态
latitude: '', // 纬度
longitude: '', // 经度
map: null as any, // 百度地图实例
mapAddressOptions: [] as any[], // 地址搜索选项
mapMarker: null as any, // 地图标记点
geocoder: null as any, // 地理编码器实例
mapContainerReady: false, // 地图容器是否准备好
});
// 初始经纬度（打开弹窗时传入）
const initLongitude = ref<number | undefined>();
const initLatitude = ref<number | undefined>();
/** 弹窗打开动画完成后初始化地图 */
async function handleDialogOpened() {
// 先显示地图容器
state.mapContainerReady = true;
// 等待下一个 DOM 更新周期，确保地图容器已渲染
await nextTick();
// 加载百度地图 SDK
await loadBaiduMapSdk();
initMapInstance();
}
/** 弹窗关闭后清理地图 */
function handleDialogClosed() {
// 销毁地图实例
if (state.map) {
state.map.destroy?.();
state.map = null;
}
state.mapMarker = null;
state.geocoder = null;
state.mapContainerReady = false;
}
/** 初始化地图实例 */
function initMapInstance() {
if (!mapContainerRef.value) {
return;
}
// 初始化地图和地理编码器
initMap();
initGeocoder();
// 监听地图点击事件
state.map.addEventListener('click', (e: any) => {
const point = e.latlng;
state.lonLat = `${point.lng},${point.lat}`;
regeoCode(state.lonLat);
});
// 如果有初始经纬度，加载标记点
if (initLongitude.value && initLatitude.value) {
const lonLat = `${initLongitude.value},${initLatitude.value}`;
regeoCode(lonLat);
}
}
/** 初始化地图 */
function initMap() {
state.map = new window.BMapGL.Map(mapContainerRef.value);
state.map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 11);
state.map.enableScrollWheelZoom();
state.map.disableDoubleClickZoom();
state.map.addControl(new window.BMapGL.NavigationControl());
state.map.addControl(new window.BMapGL.ScaleControl());
state.map.addControl(new window.BMapGL.ZoomControl());
}
/** 初始化地理编码器 */
function initGeocoder() {
state.geocoder = new window.BMapGL.Geocoder();
}
/** 搜索地址 */
function autoSearch(queryValue: string) {
if (!queryValue) {
state.mapAddressOptions = [];
return;
}
state.loading = true;
// noinspection JSUnusedGlobalSymbols
const localSearch = new window.BMapGL.LocalSearch(state.map, {
onSearchComplete: (results: any) => {
state.loading = false;
const temp: any[] = [];
if (results && results._pois) {
results._pois.forEach((p: any) => {
const point = p.point;
if (point && point.lng && point.lat) {
temp.push({
name: p.title,
value: `${point.lng},${point.lat}`,
});
}
});
}
state.mapAddressOptions = temp;
},
});
localSearch.search(queryValue);
}
/** 处理地址选择 */
function handleAddressSelect(value: string) {
if (value) {
regeoCode(value);
}
}
/** 添加标记点 */
function setMarker(lnglat: string[]) {
if (!lnglat) {
return;
}
if (state.mapMarker !== null) {
state.map.removeOverlay(state.mapMarker);
}
const point = new window.BMapGL.Point(lnglat[0], lnglat[1]);
state.mapMarker = new window.BMapGL.Marker(point);
state.map.addOverlay(state.mapMarker);
state.map.centerAndZoom(point, 16);
}
/** 经纬度转地址、添加标记点 */
function regeoCode(lonLat: string) {
if (!lonLat) {
return;
}
const lnglat = lonLat.split(',');
if (lnglat.length !== 2) {
return;
}
state.longitude = lnglat[0]!;
state.latitude = lnglat[1]!;
const point = new window.BMapGL.Point(lnglat[0], lnglat[1]);
state.map.centerAndZoom(point, 16);
setMarker(lnglat);
getAddress(lnglat);
}
/** 根据经纬度获取地址信息 */
function getAddress(lnglat: string[]) {
const point = new window.BMapGL.Point(lnglat[0], lnglat[1]);
state.geocoder.getLocation(point, (result: any) => {
if (result && result.address) {
state.address = result.address;
}
});
}
/** 确认选择 */
function handleConfirm() {
if (state.longitude && state.latitude) {
emit('confirm', {
longitude: state.longitude,
latitude: state.latitude,
address: state.address,
});
}
modalApi.close();
}
const [Modal, modalApi] = useVbenModal({
onOpenChange(isOpen: boolean) {
if (isOpen) {
handleDialogOpened();
} else {
handleDialogClosed();
}
},
});
/** 打开弹窗 */
function open(longitude?: number, latitude?: number) {
initLongitude.value = longitude;
initLatitude.value = latitude;
state.longitude = longitude ? String(longitude) : '';
state.latitude = latitude ? String(latitude) : '';
state.address = '';
state.mapAddressOptions = [];
modalApi.open();
}
defineExpose({ open });
</script>
<template>
<Modal :footer="false" class="w-[700px]" title="百度地图">
<div class="w-full">
<!-- 第一行：位置搜索 -->
<Form :label-col="{ span: 4 }">
<Form.Item label="定位位置">
<Select
v-model:value="state.address"
:filter-option="false"
:loading="state.loading"
:options="
state.mapAddressOptions.map((item) => ({
label: item.name,
value: item.value,
}))
"
allow-clear
class="w-full"
placeholder="可输入地址查询经纬度"
show-search
@search="autoSearch"
@select="handleAddressSelect"
/>
</Form.Item>
<!-- 第二行：坐标显示 -->
<Form.Item label="当前坐标">
<Space>
<Input
:value="state.longitude"
addon-before="经度"
disabled
style="width: 180px"
/>
<Input
:value="state.latitude"
addon-before="纬度"
disabled
style="width: 180px"
/>
</Space>
</Form.Item>
</Form>
<!-- 第三行：地图 -->
<div
v-if="state.mapContainerReady"
ref="mapContainerRef"
class="mt-[10px] h-[400px] w-full"
></div>
<div
v-else
class="mt-[10px] flex h-[400px] w-full items-center justify-center"
>
<span class="text-gray-400">地图加载中...</span>
</div>
</div>
<div class="mt-4 flex justify-end gap-2">
<Button type="primary" @click="handleConfirm">确 定</Button>
<Button @click="modalApi.close()">取 消</Button>
</div>
</Modal>
</template>

62
apps/web-antd/src/components/map/src/utils.ts Normal file
View File

@@ -0,0 +1,62 @@
/**
* 百度地图 SDK 加载工具
*/
// 扩展 Window 接口以包含百度地图 GL API
declare global {
interface Window {
BMapGL: any;
}
}
// 全局回调名称
const CALLBACK_NAME = '__BAIDU_MAP_LOAD_CALLBACK__';
// SDK 加载状态
let loadPromise: null | Promise<void> = null;
/**
* 加载百度地图 GL SDK
* @param timeout 超时时间（毫秒），默认 10000
* @returns Promise<void>
*/
export const loadBaiduMapSdk = (timeout = 10_000): Promise<void> => {
// 已加载完成
if (window.BMapGL) {
return Promise.resolve();
}
// 正在加载中，返回同一个 Promise
if (loadPromise) {
return loadPromise;
}
loadPromise = new Promise((resolve, reject) => {
const timeoutId = setTimeout(() => {
loadPromise = null;
reject(new Error('百度地图 SDK 加载超时'));
}, timeout);
// 全局回调
(window as any)[CALLBACK_NAME] = () => {
clearTimeout(timeoutId);
delete (window as any)[CALLBACK_NAME];
resolve();
};
// 创建 script 标签
const script = document.createElement('script');
script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${
import.meta.env.VITE_BAIDU_MAP_KEY
}&callback=${CALLBACK_NAME}`;
script.onerror = () => {
clearTimeout(timeoutId);
loadPromise = null;
delete (window as any)[CALLBACK_NAME];
reject(new Error('百度地图 SDK 加载失败'));
};
document.body.append(script);
});
return loadPromise;
};

5
apps/web-antd/src/views/_core/profile/password-setting.vue
View File

@@ -1,14 +1,12 @@
<script setup lang="ts">
import type { VbenFormSchema } from '#/adapter/form';
import { computed, ref } from 'vue';
import { computed } from 'vue';
import { ProfilePasswordSetting, z } from '@vben/common-ui';
import { message } from 'ant-design-vue';
const profilePasswordSettingRef = ref();
const formSchema = computed((): VbenFormSchema[] => {
return [
{
@@ -58,7 +56,6 @@ function handleSubmit() {
</script>
<template>
<ProfilePasswordSetting
ref="profilePasswordSettingRef"
class="w-1/3"
:form-schema="formSchema"
@submit="handleSubmit"

2
apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/theme/process-panel.scss
View File

@@ -72,7 +72,7 @@
.element-listener-item {
display: inline-grid;
grid-template-columns: 16px auto 32px 32px;
grid-column-gap: 8px;
column-gap: 8px;
width: 100%;
}

13
apps/web-antd/src/views/bpm/processInstance/detail/index.vue
View File

@@ -9,7 +9,7 @@ import {
BpmFieldPermissionType,
BpmModelFormType,
BpmModelType,
BpmTaskStatusEnum,
BpmProcessInstanceStatus,
DICT_TYPE,
} from '@vben/constants';
import {
@@ -61,13 +61,10 @@ const auditIconsMap: {
| typeof SvgBpmRejectIcon
| typeof SvgBpmRunningIcon;
} = {
[BpmTaskStatusEnum.RUNNING]: SvgBpmRunningIcon,
[BpmTaskStatusEnum.APPROVE]: SvgBpmApproveIcon,
[BpmTaskStatusEnum.REJECT]: SvgBpmRejectIcon,
[BpmTaskStatusEnum.CANCEL]: SvgBpmCancelIcon,
[BpmTaskStatusEnum.APPROVING]: SvgBpmApproveIcon,
[BpmTaskStatusEnum.RETURN]: SvgBpmRejectIcon,
[BpmTaskStatusEnum.WAIT]: SvgBpmRunningIcon,
[BpmProcessInstanceStatus.RUNNING]: SvgBpmRunningIcon,
[BpmProcessInstanceStatus.APPROVE]: SvgBpmApproveIcon,
[BpmProcessInstanceStatus.REJECT]: SvgBpmRejectIcon,
[BpmProcessInstanceStatus.CANCEL]: SvgBpmCancelIcon,
};
const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]); // 审批节点信息
const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表

6
apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
View File

@@ -419,11 +419,13 @@ defineExpose({ setCustomApproveUsers, batchSetCustomApproveUsers });
task.signPicUrl &&
activity.nodeType === BpmNodeTypeEnum.USER_TASK_NODE
"
class="mt-1 w-full rounded-md bg-gray-100 p-2 text-sm text-gray-500"
class="mt-1 flex w-full items-center rounded-md bg-gray-100 p-2 text-sm text-gray-500"
>
签名：
<Image
class="ml-1 h-10 w-24"
class="ml-2"
:width="180"
:height="60"
:src="task.signPicUrl"
:preview="{ src: task.signPicUrl }"
/>

54
apps/web-antd/src/views/iot/device/device/data.ts
View File

@@ -1,11 +1,10 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { DeviceTypeEnum, DICT_TYPE, LocationTypeEnum } from '@vben/constants';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { z } from '#/adapter/form';
import { getSimpleDeviceList } from '#/api/iot/device/device';
import { getSimpleDeviceGroupList } from '#/api/iot/device/group';
import { getSimpleProductList } from '#/api/iot/product/product';
@@ -64,21 +63,6 @@ export function useBasicFormSchema(): VbenFormSchema[] {
'支持英文字母、数字、下划线（_）、中划线（-）、点号（.）、半角冒号（:）和特殊字符@',
),
},
{
fieldName: 'gatewayId',
label: '网关设备',
component: 'ApiSelect',
componentProps: {
api: () => getSimpleDeviceList(DeviceTypeEnum.GATEWAY),
labelField: 'deviceName',
valueField: 'id',
placeholder: '子设备可选择父设备',
},
dependencies: {
triggerFields: ['deviceType'],
show: (values) => values.deviceType === DeviceTypeEnum.GATEWAY_SUB,
},
},
];
}
@@ -133,16 +117,6 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
.optional()
.or(z.literal('')),
},
{
fieldName: 'locationType',
label: '定位类型',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(DICT_TYPE.IOT_LOCATION_TYPE, 'number'),
buttonStyle: 'solid',
optionType: 'button',
},
},
{
fieldName: 'longitude',
label: '设备经度',
@@ -150,11 +124,16 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '请输入设备经度',
class: 'w-full',
min: -180,
max: 180,
precision: 6,
},
dependencies: {
triggerFields: ['locationType'],
show: (values) => values.locationType === LocationTypeEnum.MANUAL,
},
rules: z
.number()
.min(-180, '经度范围为 -180 到 180')
.max(180, '经度范围为 -180 到 180')
.optional()
.nullable(),
},
{
fieldName: 'latitude',
@@ -163,11 +142,16 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '请输入设备纬度',
class: 'w-full',
min: -90,
max: 90,
precision: 6,
},
dependencies: {
triggerFields: ['locationType'],
show: (values) => values.locationType === LocationTypeEnum.MANUAL,
},
rules: z
.number()
.min(-90, '纬度范围为 -90 到 90')
.max(90, '纬度范围为 -90 到 90')
.optional()
.nullable(),
},
];
}

2
apps/web-antd/src/views/iot/device/device/detail/index.vue
View File

@@ -31,7 +31,7 @@ const router = useRouter();
const id = Number(route.params.id);
const loading = ref(true);
const product = ref<IotProductApi.Product>({} as IotProductApi.Product);
const device = ref<IotDeviceApi.DeviceRespVO>({} as IotDeviceApi.DeviceRespVO);
const device = ref<IotDeviceApi.Device>({} as IotDeviceApi.Device);
const activeTab = ref('info');
const thingModelList = ref<ThingModelData[]>([]);

9
apps/web-antd/src/views/iot/device/device/detail/modules/config.vue
View File

@@ -4,15 +4,16 @@ import type { IotDeviceApi } from '#/api/iot/device/device';
import { computed, ref, watchEffect } from 'vue';
import { IotDeviceMessageMethodEnum } from '@vben/constants';
import { Alert, Button, message, Textarea } from 'ant-design-vue';
import { sendDeviceMessage, updateDevice } from '#/api/iot/device/device';
import { IotDeviceMessageMethodEnum } from '#/views/iot/utils/constants';
defineOptions({ name: 'DeviceDetailConfig' });
const props = defineProps<{
device: IotDeviceApi.DeviceRespVO;
device: IotDeviceApi.Device;
}>();
const emit = defineEmits<{
@@ -114,7 +115,7 @@ async function updateDeviceConfig() {
await updateDevice({
id: props.device.id,
config: JSON.stringify(config.value),
} as IotDeviceApi.DeviceSaveReqVO);
} as IotDeviceApi.Device);
message.success({ content: '更新成功！' });
// 触发 success 事件
emit('success');
@@ -189,7 +190,7 @@ async function updateDeviceConfig() {
font-size: 13px;
line-height: 1.5;
color: #333;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: pre-wrap;
}

4
apps/web-antd/src/views/iot/device/device/detail/modules/header.vue
View File

@@ -12,7 +12,7 @@ import DeviceForm from '../../modules/form.vue';
interface Props {
product: IotProductApi.Product;
device: IotDeviceApi.DeviceRespVO;
device: IotDeviceApi.Device;
loading?: boolean;
}
@@ -50,7 +50,7 @@ function goToProductDetail(productId: number | undefined) {
}
/** 打开编辑表单 */
function openEditForm(row: IotDeviceApi.DeviceRespVO) {
function openEditForm(row: IotDeviceApi.Device) {
formModalApi.setData(row).open();
}
</script>

169
apps/web-antd/src/views/iot/device/device/detail/modules/info.vue
View File

@@ -11,20 +11,19 @@ import { formatDateTime } from '@vben/utils';
import {
Button,
Card,
Col,
Descriptions,
Form,
Input,
message,
Modal,
Row,
} from 'ant-design-vue';
import { getDeviceAuthInfo } from '#/api/iot/device/device';
import { DictTag } from '#/components/dict-tag';
import { MapDialog } from '#/components/map';
interface Props {
device: IotDeviceApi.DeviceRespVO;
device: IotDeviceApi.Device;
product: IotProductApi.Product;
}
@@ -35,12 +34,18 @@ const authPasswordVisible = ref(false);
const authInfo = ref<IotDeviceApi.DeviceAuthInfoRespVO>(
{} as IotDeviceApi.DeviceAuthInfoRespVO,
);
const mapDialogRef = ref<InstanceType<typeof MapDialog>>();
/** 控制地图显示的标志 */
const showMap = computed(() => {
/** 是否有位置信息 */
const hasLocation = computed(() => {
return !!(props.device.longitude && props.device.latitude);
});
/** 打开地图弹窗 */
function openMapDialog() {
mapDialogRef.value?.open(props.device.longitude, props.device.latitude);
}
/** 复制到剪贴板 */
async function copyToClipboard(text: string) {
try {
@@ -67,106 +72,63 @@ function handleAuthInfoDialogClose() {
authDialogVisible.value = false;
}
</script>
<template>
<div>
<Row :gutter="16">
<!-- 左侧设备信息 -->
<Col :span="12">
<Card class="h-full">
<template #title>
<div class="flex items-center">
<IconifyIcon class="mr-2 text-primary" icon="lucide:info" />
<span>设备信息</span>
</div>
<Card title="设备信息">
<Descriptions :column="3" bordered size="small">
<Descriptions.Item label="产品名称">
{{ product.name }}
</Descriptions.Item>
<Descriptions.Item label="ProductKey">
{{ product.productKey }}
</Descriptions.Item>
<Descriptions.Item label="设备类型">
<DictTag
:type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE"
:value="product.deviceType"
/>
</Descriptions.Item>
<Descriptions.Item label="DeviceName">
{{ device.deviceName }}
</Descriptions.Item>
<Descriptions.Item label="备注名称">
{{ device.nickname || '--' }}
</Descriptions.Item>
<Descriptions.Item label="当前状态">
<DictTag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
</Descriptions.Item>
<Descriptions.Item label="创建时间">
{{ formatDateTime(device.createTime) }}
</Descriptions.Item>
<Descriptions.Item label="激活时间">
{{ formatDateTime(device.activeTime) }}
</Descriptions.Item>
<Descriptions.Item label="最后上线时间">
{{ formatDateTime(device.onlineTime) }}
</Descriptions.Item>
<Descriptions.Item label="最后离线时间">
{{ formatDateTime(device.offlineTime) }}
</Descriptions.Item>
<Descriptions.Item label="设备位置">
<template v-if="hasLocation">
<span class="mr-2">
{{ device.longitude }}, {{ device.latitude }}
</span>
<Button type="link" size="small" @click="openMapDialog">
<IconifyIcon icon="lucide:map-pin" class="mr-1" />
查看地图
</Button>
</template>
<Descriptions :column="1" bordered size="small">
<Descriptions.Item label="产品名称">
{{ props.product.name }}
</Descriptions.Item>
<Descriptions.Item label="ProductKey">
{{ props.product.productKey }}
</Descriptions.Item>
<Descriptions.Item label="设备类型">
<DictTag
:type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE"
:value="props.product.deviceType"
/>
</Descriptions.Item>
<Descriptions.Item label="定位类型">
<DictTag
:type="DICT_TYPE.IOT_LOCATION_TYPE"
:value="props.product.locationType"
/>
</Descriptions.Item>
<Descriptions.Item label="DeviceName">
{{ props.device.deviceName }}
</Descriptions.Item>
<Descriptions.Item label="备注名称">
{{ props.device.nickname || '--' }}
</Descriptions.Item>
<Descriptions.Item label="当前状态">
<DictTag
:type="DICT_TYPE.IOT_DEVICE_STATE"
:value="props.device.state"
/>
</Descriptions.Item>
<Descriptions.Item label="创建时间">
{{ formatDateTime(props.device.createTime) }}
</Descriptions.Item>
<Descriptions.Item label="激活时间">
{{ formatDateTime(props.device.activeTime) }}
</Descriptions.Item>
<Descriptions.Item label="最后上线时间">
{{ formatDateTime(props.device.onlineTime) }}
</Descriptions.Item>
<Descriptions.Item label="最后离线时间">
{{ formatDateTime(props.device.offlineTime) }}
</Descriptions.Item>
<Descriptions.Item label="MQTT 连接参数">
<Button
size="small"
type="link"
@click="handleAuthInfoDialogOpen"
>
查看
</Button>
</Descriptions.Item>
</Descriptions>
</Card>
</Col>
<!-- 右侧地图 -->
<Col :span="12">
<Card class="h-full">
<template #title>
<div class="flex items-center justify-between">
<div class="flex items-center">
<IconifyIcon class="mr-2 text-primary" icon="lucide:map-pin" />
<span>设备位置</span>
</div>
<div class="text-sm text-gray-500">
最后上线：{{ formatDateTime(props.device.onlineTime) || '--' }}
</div>
</div>
</template>
<div class="h-[500px] w-full">
<div
v-if="showMap"
class="flex h-full w-full items-center justify-center rounded bg-gray-100"
>
<span class="text-gray-400">地图组件</span>
</div>
<div
v-else
class="flex h-full w-full items-center justify-center rounded bg-gray-50 text-gray-400"
>
<IconifyIcon class="mr-2" icon="lucide:alert-triangle" />
<span>暂无位置信息</span>
</div>
</div>
</Card>
</Col>
</Row>
<span v-else class="text-gray-400">暂无位置信息</span>
</Descriptions.Item>
<Descriptions.Item label="MQTT 连接参数">
<Button size="small" type="link" @click="handleAuthInfoDialogOpen">
查看
</Button>
</Descriptions.Item>
</Descriptions>
</Card>
<!-- 认证信息弹框 -->
<Modal
@@ -226,5 +188,8 @@ function handleAuthInfoDialogClose() {
<Button @click="handleAuthInfoDialogClose">关闭</Button>
</div>
</Modal>
<!-- 地图弹窗 -->
<MapDialog ref="mapDialogRef" />
</div>
</template>

3
apps/web-antd/src/views/iot/device/device/detail/modules/message.vue
View File

@@ -11,7 +11,7 @@ import {
} from 'vue';
import { Page } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { DICT_TYPE, IotDeviceMessageMethodEnum } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { formatDateTime } from '@vben/utils';
@@ -19,7 +19,6 @@ import { Button, Select, Space, Switch, Tag } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getDeviceMessagePage } from '#/api/iot/device/device';
import { IotDeviceMessageMethodEnum } from '#/views/iot/utils/constants';
const props = defineProps<{
deviceId: number;

6
apps/web-antd/src/views/iot/device/device/detail/modules/simulator.vue
View File

@@ -9,7 +9,7 @@ import type { ThingModelData } from '#/api/iot/thingmodel';
import { computed, ref } from 'vue';
import { ContentWrap } from '@vben/common-ui';
import { DeviceStateEnum } from '@vben/constants';
import { IotDeviceMessageMethodEnum } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import {
@@ -26,7 +26,7 @@ import {
import { sendDeviceMessage } from '#/api/iot/device/device';
import {
IotDeviceMessageMethodEnum,
DeviceStateEnum,
IoTThingModelTypeEnum,
} from '#/views/iot/utils/constants';
@@ -34,7 +34,7 @@ import DataDefinition from '../../../../thingmodel/modules/components/data-defin
import DeviceDetailsMessage from './message.vue';
const props = defineProps<{
device: IotDeviceApi.DeviceRespVO;
device: IotDeviceApi.Device;
product: IotProductApi.Product;
thingModelList: ThingModelData[];
}>();

380
apps/web-antd/src/views/iot/device/device/detail/modules/sub-device.vue
View File

@@ -1,20 +1,23 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { VbenFormSchema, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { IotDeviceApi } from '#/api/iot/device/device';
import type { IotProductApi } from '#/api/iot/product/product';
import { onMounted, reactive, ref, watch } from 'vue';
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { Page } from '@vben/common-ui';
import { confirm, Page, useVbenModal } from '@vben/common-ui';
import { DeviceTypeEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { IconifyIcon } from '@vben/icons';
import { formatDateTime, isEmpty } from '@vben/utils';
import { Button, Input, Select, Space } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getDevicePage } from '#/api/iot/device/device';
import {
bindDeviceGateway,
getSubDeviceList,
getUnboundSubDevicePage,
unbindDeviceGateway,
} from '#/api/iot/device/device';
import { getSimpleProductList } from '#/api/iot/product/product';
interface Props {
@@ -24,14 +27,10 @@ interface Props {
const props = defineProps<Props>();
const router = useRouter();
const products = ref<IotProductApi.Product[]>([]); // 产品列表
const queryParams = reactive({
deviceName: '',
status: undefined as number | undefined,
}); // 查询参数
/** 子设备列表表格列配置 */
function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{ type: 'checkbox', width: 40 },
{
field: 'deviceName',
title: 'DeviceName',
@@ -43,10 +42,9 @@ function useGridColumns(): VxeTableGridOptions['columns'] {
minWidth: 120,
},
{
field: 'productId',
title: '所属产品',
field: 'productName',
title: '产品名称',
minWidth: 120,
slots: { default: 'product' },
},
{
field: 'state',
@@ -60,157 +58,299 @@ function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'onlineTime',
title: '最后上线时间',
minWidth: 180,
formatter: 'formatDateTime',
minWidth: 160,
formatter: ({ cellValue }) => formatDateTime(cellValue),
},
{
field: 'actions',
title: '操作',
width: 150,
width: 120,
fixed: 'right',
slots: { default: 'actions' },
},
];
}
const [Grid, gridApi] = useVbenVxeGrid<IotDeviceApi.DeviceRespVO>({
const [Grid, gridApi] = useVbenVxeGrid<IotDeviceApi.Device>({
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async () => {
if (!props.deviceId) {
return [];
}
return await getSubDeviceList(props.deviceId);
},
},
},
rowConfig: {
keyField: 'id',
isHover: true,
},
proxyConfig: {
ajax: {
query: async ({
page,
}: {
page: { currentPage: number; pageSize: number };
}) => {
if (!props.deviceId) {
return { list: [], total: 0 };
}
return await getDevicePage({
pageNo: page.currentPage,
pageSize: page.pageSize,
gatewayId: props.deviceId,
deviceType: DeviceTypeEnum.GATEWAY_SUB,
deviceName: queryParams.deviceName || undefined,
status: queryParams.status,
} as IotDeviceApi.DevicePageReqVO);
},
},
},
toolbarConfig: {
refresh: true,
search: false,
},
pagerConfig: {
enabled: true,
enabled: false,
},
},
gridEvents: {
checkboxAll: handleRowCheckboxChange,
checkboxChange: handleRowCheckboxChange,
},
});
/** 搜索操作 */
function handleQuery() {
/** 获取子设备列表 */
function getList() {
gridApi.query();
}
/** 重置搜索 */
function resetQuery() {
queryParams.deviceName = '';
queryParams.status = undefined;
handleQuery();
}
/** 获取产品名称 */
function getProductName(productId: number) {
const product = products.value.find((p) => p.id === productId);
return product?.name || '-';
}
/** 查看详情 */
function openDetail(id: number) {
/** 打开设备详情 */
function openDeviceDetail(id: number) {
router.push({ name: 'IoTDeviceDetail', params: { id } });
}
/** 监听设备ID变化 */
watch(
() => props.deviceId,
(newValue) => {
if (newValue) {
handleQuery();
/** 多选框选中数据 */
const checkedIds = ref<number[]>([]);
function handleRowCheckboxChange({
records,
}: {
records: IotDeviceApi.Device[];
}) {
checkedIds.value = records.map((item) => item.id!);
}
/** 解绑单个设备 */
async function handleUnbind(row: IotDeviceApi.Device) {
await confirm({ content: `确定要解绑子设备【${row.deviceName}】吗？` });
const hideLoading = message.loading({
content: `正在解绑【${row.deviceName}】...`,
duration: 0,
});
try {
await unbindDeviceGateway(props.deviceId, [row.id!]);
message.success('解绑成功');
getList();
} finally {
hideLoading();
}
}
/** 批量解绑 */
async function handleUnbindBatch() {
await confirm({
content: `确定要解绑选中的 ${checkedIds.value.length} 个子设备吗？`,
});
const hideLoading = message.loading({
content: '正在批量解绑...',
duration: 0,
});
try {
await unbindDeviceGateway(props.deviceId, checkedIds.value);
checkedIds.value = [];
message.success('批量解绑成功');
getList();
} finally {
hideLoading();
}
}
// ===================== 添加子设备弹窗 =====================
const addSelectedRowKeys = ref<number[]>([]);
/** 添加弹窗搜索表单 schema */
function useAddGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'productId',
label: '产品',
component: 'ApiSelect',
componentProps: {
api: () => getSimpleProductList(DeviceTypeEnum.GATEWAY_SUB),
labelField: 'name',
valueField: 'id',
placeholder: '请选择产品',
allowClear: true,
},
},
{
fieldName: 'deviceName',
label: 'DeviceName',
component: 'Input',
componentProps: {
placeholder: '请输入 DeviceName',
allowClear: true,
},
},
];
}
function useAddGridColumns(): VxeTableGridOptions['columns'] {
return [
{ type: 'checkbox', width: 40 },
{
field: 'deviceName',
title: 'DeviceName',
minWidth: 150,
},
{
field: 'nickname',
title: '备注名称',
minWidth: 120,
},
{
field: 'productName',
title: '产品名称',
minWidth: 120,
},
{
field: 'state',
title: '设备状态',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.IOT_DEVICE_STATE },
},
},
];
}
const [AddGrid, addGridApi] = useVbenVxeGrid<IotDeviceApi.Device>({
formOptions: {
schema: useAddGridFormSchema(),
submitOnChange: true,
},
gridOptions: {
columns: useAddGridColumns(),
height: 400,
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getUnboundSubDevicePage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
search: true,
},
},
gridEvents: {
checkboxAll: handleAddSelectionChange,
checkboxChange: handleAddSelectionChange,
},
});
/** 处理添加弹窗表格选择变化 */
function handleAddSelectionChange() {
const records = addGridApi.grid?.getCheckboxRecords() || [];
addSelectedRowKeys.value = records.map(
(record: IotDeviceApi.Device) => record.id!,
);
}
const [AddModal, addModalApi] = useVbenModal({
async onConfirm() {
if (addSelectedRowKeys.value.length === 0) {
message.warning('请先选择要添加的子设备');
return;
}
addModalApi.lock();
try {
await bindDeviceGateway(props.deviceId, addSelectedRowKeys.value);
message.success('绑定成功');
await addModalApi.close();
addSelectedRowKeys.value = [];
getList();
} finally {
addModalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (isOpen) {
addSelectedRowKeys.value = [];
await addGridApi.formApi?.resetForm();
await addGridApi.query();
}
},
);
/** 初始化 */
onMounted(async () => {
// 获取产品列表
products.value = await getSimpleProductList();
// 如果设备ID存在，则查询列表
if (props.deviceId) {
handleQuery();
}
});
/** 打开添加子设备弹窗 */
function openAddModal() {
addModalApi.open();
}
/** 监听 deviceId 变化 */
watch(
() => props.deviceId,
(newVal) => {
if (newVal) {
getList();
}
},
{ immediate: true },
);
</script>
<template>
<Page auto-content-height>
<!-- 搜索区域 -->
<!-- TODO @haohao：这个 search 能不能融合到 Grid 里； -->
<div class="mb-4 flex flex-wrap items-center gap-3">
<Input
v-model:value="queryParams.deviceName"
placeholder="请输入设备名称"
style="width: 200px"
allow-clear
@press-enter="handleQuery"
/>
<Select
v-model:value="queryParams.status"
allow-clear
placeholder="请选择设备状态"
style="width: 160px"
>
<Select.Option
v-for="dict in getDictOptions(DICT_TYPE.IOT_DEVICE_STATE, 'number')"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</Select.Option>
</Select>
<Space>
<Button type="primary" @click="handleQuery">
<IconifyIcon icon="ep:search" class="mr-5px" />
搜索
</Button>
<Button @click="resetQuery">
<IconifyIcon icon="ep:refresh-right" class="mr-5px" />
重置
</Button>
</Space>
</div>
<!-- 子设备列表 -->
<Grid>
<template #product="{ row }">
{{ getProductName(row.productId) }}
<Grid table-title="子设备列表">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: '添加子设备',
type: 'primary',
icon: ACTION_ICON.ADD,
onClick: openAddModal,
},
{
label: '批量解绑',
type: 'primary',
danger: true,
icon: ACTION_ICON.DELETE,
disabled: isEmpty(checkedIds),
onClick: handleUnbindBatch,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: '查看详情',
label: '查看',
type: 'link',
icon: ACTION_ICON.VIEW,
onClick: openDetail.bind(null, row.id!),
onClick: () => openDeviceDetail(row.id!),
},
{
label: '解绑',
type: 'link',
danger: true,
onClick: () => handleUnbind(row),
},
]"
/>
</template>
</Grid>
<!-- 添加子设备弹窗 -->
<AddModal title="添加子设备" class="w-3/5">
<AddGrid />
</AddModal>
</Page>
</template>

2
apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-event.vue
View File

@@ -6,6 +6,7 @@ import type { ThingModelData } from '#/api/iot/thingmodel';
import { computed, onMounted, reactive, watch } from 'vue';
import { Page } from '@vben/common-ui';
import { IotDeviceMessageMethodEnum } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { formatDateTime } from '@vben/utils';
@@ -15,7 +16,6 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getDeviceMessagePairPage } from '#/api/iot/device/device';
import {
getEventTypeLabel,
IotDeviceMessageMethodEnum,
IoTThingModelTypeEnum,
} from '#/views/iot/utils/constants';

2
apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-service.vue
View File

@@ -6,6 +6,7 @@ import type { ThingModelData } from '#/api/iot/thingmodel';
import { computed, onMounted, reactive, watch } from 'vue';
import { Page } from '@vben/common-ui';
import { IotDeviceMessageMethodEnum } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { formatDateTime } from '@vben/utils';
@@ -15,7 +16,6 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getDeviceMessagePairPage } from '#/api/iot/device/device';
import {
getThingModelServiceCallTypeLabel,
IotDeviceMessageMethodEnum,
IoTThingModelTypeEnum,
} from '#/views/iot/utils/constants';

16
apps/web-antd/src/views/iot/device/device/index.vue
View File

@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { PageParam } from '@vben/request';
import type { IotDeviceApi } from '#/api/iot/device/device';
import type { IotDeviceGroupApi } from '#/api/iot/device/group';
import type { IotProductApi } from '#/api/iot/product/product';
@@ -68,7 +70,7 @@ const [DeviceImportFormModal, deviceImportFormModalApi] = useVbenModal({
destroyOnClose: true,
});
const queryParams = ref<Partial<IotDeviceApi.DevicePageReqVO>>({
const queryParams = ref<Partial<PageParam>>({
deviceName: '',
nickname: '',
productId: undefined,
@@ -118,7 +120,7 @@ async function handleExport() {
...queryParams.value,
pageNo: 1,
pageSize: 999_999,
} as IotDeviceApi.DevicePageReqVO);
} as PageParam);
downloadFileFromBlobPart({ fileName: '物联网设备.xls', source: data });
}
@@ -147,12 +149,12 @@ function handleCreate() {
}
/** 编辑设备 */
function handleEdit(row: IotDeviceApi.DeviceRespVO) {
function handleEdit(row: IotDeviceApi.Device) {
deviceFormModalApi.setData(row).open();
}
/** 删除设备 */
async function handleDelete(row: IotDeviceApi.DeviceRespVO) {
async function handleDelete(row: IotDeviceApi.Device) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.deviceName]),
duration: 0,
@@ -203,12 +205,12 @@ function handleImport() {
function handleRowCheckboxChange({
records,
}: {
records: IotDeviceApi.DeviceRespVO[];
records: IotDeviceApi.Device[];
}) {
checkedIds.value = records.map((item) => item.id!);
}
const [Grid, gridApi] = useVbenVxeGrid<IotDeviceApi.DeviceRespVO>({
const [Grid, gridApi] = useVbenVxeGrid<IotDeviceApi.Device>({
gridOptions: {
checkboxConfig: {
highlight: true,
@@ -228,7 +230,7 @@ const [Grid, gridApi] = useVbenVxeGrid<IotDeviceApi.DeviceRespVO>({
pageNo: page.currentPage,
pageSize: page.pageSize,
...queryParams.value,
} as IotDeviceApi.DevicePageReqVO);
} as PageParam);
},
},
},

12
apps/web-antd/src/views/iot/device/device/modules/card-view.vue
View File

@@ -1,4 +1,6 @@
<script lang="ts" setup>
import type { PageParam } from '@vben/request';
import type { IotDeviceApi } from '#/api/iot/device/device';
import { onMounted, ref } from 'vue';
@@ -46,9 +48,9 @@ const emit = defineEmits<{
}>();
const loading = ref(false);
const list = ref<IotDeviceApi.DeviceRespVO[]>([]);
const list = ref<IotDeviceApi.Device[]>([]);
const total = ref(0);
const queryParams = ref<Partial<IotDeviceApi.DevicePageReqVO>>({
const queryParams = ref<Partial<PageParam>>({
pageNo: 1,
pageSize: 12,
});
@@ -66,7 +68,7 @@ async function getList() {
const data = await getDevicePage({
...queryParams.value,
...props.searchParams,
} as IotDeviceApi.DevicePageReqVO);
} as PageParam);
list.value = data.list || [];
total.value = data.total || 0;
} finally {
@@ -192,7 +194,7 @@ onMounted(() => {
<Button
size="small"
class="action-btn action-btn-detail"
@click="emit('detail', item.id)"
@click="emit('detail', item.id!)"
>
<IconifyIcon icon="lucide:eye" class="mr-1" />
详情
@@ -200,7 +202,7 @@ onMounted(() => {
<Button
size="small"
class="action-btn action-btn-data"
@click="emit('model', item.id)"
@click="emit('model', item.id!)"
>
<IconifyIcon icon="lucide:database" class="mr-1" />
数据

82
apps/web-antd/src/views/iot/device/device/modules/form.vue
View File

@@ -2,15 +2,16 @@
import type { IotDeviceApi } from '#/api/iot/device/device';
import type { IotProductApi } from '#/api/iot/product/product';
import { computed, nextTick, onMounted, ref } from 'vue';
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Collapse, message } from 'ant-design-vue';
import { Button, Collapse, message, Space } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { createDevice, getDevice, updateDevice } from '#/api/iot/device/device';
import { getSimpleProductList } from '#/api/iot/product/product';
import { MapDialog } from '#/components/map';
import { $t } from '#/locales';
import { useAdvancedFormSchema, useBasicFormSchema } from '../data';
@@ -18,9 +19,10 @@ import { useAdvancedFormSchema, useBasicFormSchema } from '../data';
defineOptions({ name: 'IoTDeviceForm' });
const emit = defineEmits(['success']);
const formData = ref<IotDeviceApi.DeviceRespVO>();
const formData = ref<IotDeviceApi.Device>();
const products = ref<IotProductApi.Product[]>([]);
const activeKey = ref<string[]>([]);
const mapDialogRef = ref<InstanceType<typeof MapDialog>>();
const getTitle = computed(() => {
return formData.value?.id
@@ -78,12 +80,38 @@ async function getAdvancedFormValues() {
picUrl: formData.value?.picUrl,
groupIds: formData.value?.groupIds,
serialNumber: formData.value?.serialNumber,
locationType: formData.value?.locationType,
longitude: formData.value?.longitude,
latitude: formData.value?.latitude,
};
}
/** 打开地图选择弹窗 */
async function openMapDialog() {
// 如果高级表单未挂载，先展开 Collapse
if (!advancedFormApi.isMounted) {
activeKey.value = ['advanced'];
await nextTick();
await nextTick();
}
const values = await advancedFormApi.getValues();
mapDialogRef.value?.open(
values.longitude ? Number(values.longitude) : undefined,
values.latitude ? Number(values.latitude) : undefined,
);
}
/** 处理地图选择确认 */
async function handleMapConfirm(data: {
address: string;
latitude: string;
longitude: string;
}) {
if (advancedFormApi.isMounted) {
await advancedFormApi.setFieldValue('longitude', Number(data.longitude));
await advancedFormApi.setFieldValue('latitude', Number(data.latitude));
}
}
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
@@ -97,7 +125,7 @@ const [Modal, modalApi] = useVbenModal({
const data = {
...basicValues,
...advancedValues,
} as IotDeviceApi.DeviceSaveReqVO;
} as IotDeviceApi.Device;
try {
await (formData.value?.id ? updateDevice(data) : createDevice(data));
// 关闭并提示
@@ -115,11 +143,8 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// 加载数据
const data = modalApi.getData<IotDeviceApi.DeviceRespVO>();
const data = modalApi.getData<IotDeviceApi.Device>();
if (!data || !data.id) {
// 新增：确保 Collapse 折叠
// TODO @haohao：是不是 activeKey 在上面的 112 到 115 就已经处理了哈；
activeKey.value = [];
return;
}
// 编辑模式：加载数据
@@ -127,29 +152,29 @@ const [Modal, modalApi] = useVbenModal({
try {
formData.value = await getDevice(data.id);
await formApi.setValues(formData.value);
// 如果存在高级字段数据，自动展开 Collapse
// TODO @haohao：默认不用展开哈；
if (
formData.value?.nickname ||
formData.value?.picUrl ||
formData.value?.groupIds?.length ||
formData.value?.serialNumber ||
formData.value?.locationType !== undefined
) {
activeKey.value = ['advanced'];
// 等待 Collapse 展开后表单挂载
await nextTick();
await nextTick();
if (advancedFormApi.isMounted) {
await advancedFormApi.setValues(formData.value);
}
}
} finally {
modalApi.unlock();
}
},
});
/** 监听 Collapse 展开，自动设置高级表单的值 */
watch(
activeKey,
async (newKeys) => {
// 当用户手动展开 Collapse 且存在表单数据时，设置高级表单的值
if (newKeys.includes('advanced') && formData.value) {
// 等待表单挂载
await nextTick();
await nextTick();
if (advancedFormApi.isMounted) {
await advancedFormApi.setValues(formData.value);
}
}
},
{ immediate: false },
);
/** 初始化产品列表 */
onMounted(async () => {
products.value = await getSimpleProductList();
@@ -163,8 +188,13 @@ onMounted(async () => {
<Collapse v-model:active-key="activeKey" class="mt-4">
<Collapse.Panel key="advanced" header="更多设置">
<AdvancedForm />
<Space class="mt-2">
<Button type="primary" @click="openMapDialog">坐标拾取</Button>
</Space>
</Collapse.Panel>
</Collapse>
</div>
</Modal>
<!-- 地图选择弹窗 -->
<MapDialog ref="mapDialogRef" @confirm="handleMapConfirm" />
</template>

1
apps/web-antd/src/views/iot/device/device/modules/import-form.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import type { FileType } from 'ant-design-vue/es/upload/interface';
import type { IotDeviceApi } from '#/api/iot/device/device';
import { useVbenModal } from '@vben/common-ui';

10
apps/web-antd/src/views/iot/home/index.vue
View File

@@ -11,6 +11,7 @@ import { getStatisticsSummary } from '#/api/iot/statistics';
import { defaultStatsData } from './data';
import DeviceCountCard from './modules/device-count-card.vue';
import DeviceMapCard from './modules/device-map-card.vue';
import DeviceStateCountCard from './modules/device-state-count-card.vue';
import MessageTrendCard from './modules/message-trend-card.vue';
@@ -97,10 +98,17 @@ onMounted(() => {
</Row>
<!-- 第三行：消息统计 -->
<Row :gutter="16">
<Row :gutter="16" class="mb-4">
<Col :span="24">
<MessageTrendCard />
</Col>
</Row>
<!-- 第四行：设备分布地图 -->
<Row :gutter="16">
<Col :span="24">
<DeviceMapCard />
</Col>
</Row>
</Page>
</template>

215
apps/web-antd/src/views/iot/home/modules/device-map-card.vue Normal file
View File

@@ -0,0 +1,215 @@
<script lang="ts" setup>
import type { IotDeviceApi } from '#/api/iot/device/device';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Card, Empty, Spin } from 'ant-design-vue';
import { getDeviceLocationList } from '#/api/iot/device/device';
import { loadBaiduMapSdk } from '#/components/map';
import { DeviceStateEnum } from '#/views/iot/utils/constants';
defineOptions({ name: 'DeviceMapCard' });
const router = useRouter();
const mapContainerRef = ref<HTMLElement>();
let mapInstance: any = null;
const loading = ref(true);
const deviceList = ref<IotDeviceApi.Device[]>([]);
/** 是否有数据 */
const hasData = computed(() => deviceList.value.length > 0);
/** 设备状态颜色映射 */
const stateColorMap: Record<number, string> = {
[DeviceStateEnum.INACTIVE]: '#EAB308', // 待激活 - 黄色
[DeviceStateEnum.ONLINE]: '#22C55E', // 在线 - 绿色
[DeviceStateEnum.OFFLINE]: '#9CA3AF', // 离线 - 灰色
};
/** 获取设备状态配置 */
function getStateConfig(state: number): { color: string; name: string } {
const stateNames: Record<number, string> = {
[DeviceStateEnum.INACTIVE]: '待激活',
[DeviceStateEnum.ONLINE]: '在线',
[DeviceStateEnum.OFFLINE]: '离线',
};
return {
name: stateNames[state] || '未知',
color: stateColorMap[state] || '#909399',
};
}
/** 创建自定义标记点图标 */
function createMarkerIcon(color: string, isOnline: boolean) {
const size = isOnline ? 24 : 20;
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="8" fill="${color}" stroke="white" stroke-width="2"/>
${isOnline ? `<circle cx="12" cy="12" r="10" fill="none" stroke="${color}" stroke-width="2" opacity="0.5"/>` : ''}
</svg>
`;
const blob = new Blob([svg], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
return new window.BMapGL.Icon(url, new window.BMapGL.Size(size, size), {
anchor: new window.BMapGL.Size(size / 2, size / 2),
});
}
/** 初始化地图 */
function initMap() {
if (!mapContainerRef.value || !window.BMapGL) {
return;
}
// 销毁旧实例
if (mapInstance) {
mapInstance.destroy?.();
mapInstance = null;
}
// 创建地图实例，默认以中国为中心
mapInstance = new window.BMapGL.Map(mapContainerRef.value);
mapInstance.centerAndZoom(new window.BMapGL.Point(106, 37.5), 5);
mapInstance.enableScrollWheelZoom();
// 添加控件
mapInstance.addControl(new window.BMapGL.ScaleControl());
mapInstance.addControl(new window.BMapGL.ZoomControl());
// 添加设备标记点
deviceList.value.forEach((device) => {
const config = getStateConfig(device.state!);
const isOnline = device.state === DeviceStateEnum.ONLINE;
const point = new window.BMapGL.Point(device.longitude, device.latitude);
// 创建标记
const marker = new window.BMapGL.Marker(point, {
icon: createMarkerIcon(config.color, isOnline),
});
// 创建信息窗口内容
const infoContent = `
<div style="padding: 8px; min-width: 180px;">
<div style="font-weight: bold; margin-bottom: 8px; font-size: 14px;">${device.nickname || device.deviceName}</div>
<div style="color: #666; font-size: 12px; line-height: 1.8;">
<div>产品: ${device.productName || '-'}</div>
<div>状态: <span style="color: ${config.color}; font-weight: 500;">${config.name}</span></div>
</div>
<div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee;">
<a href="javascript:void(0)" class="device-link" data-id="${device.id}" style="color: #1890ff; font-size: 12px; text-decoration: none;">点击查看详情 →</a>
</div>
</div>
`;
// 点击标记显示信息窗口
marker.addEventListener('click', () => {
const infoWindow = new window.BMapGL.InfoWindow(infoContent, {
width: 220,
height: 140,
title: '',
});
// 信息窗口打开后绑定链接点击事件
infoWindow.addEventListener('open', () => {
setTimeout(() => {
const link = document.querySelector('.device-link');
if (link) {
link.addEventListener('click', (e) => {
e.preventDefault();
const deviceId = e.target as HTMLElement.dataset.id;
if (deviceId) {
router.push({
name: 'IoTDeviceDetail',
params: { id: deviceId },
});
}
});
}
}, 100);
});
mapInstance.openInfoWindow(infoWindow, point);
});
mapInstance.addOverlay(marker);
});
}
/** 加载设备数据 */
async function loadDeviceData() {
loading.value = true;
try {
deviceList.value = await getDeviceLocationList();
} finally {
loading.value = false;
}
}
/** 初始化 */
async function init() {
await loadDeviceData();
if (!hasData.value) {
return;
}
await loadBaiduMapSdk();
initMap();
}
/** 组件挂载时初始化 */
onMounted(() => {
init();
});
/** 组件卸载时销毁地图实例 */
onUnmounted(() => {
if (mapInstance) {
mapInstance.destroy?.();
mapInstance = null;
}
});
</script>
<template>
<Card class="h-full" title="设备分布地图">
<template #extra>
<div class="flex items-center gap-4 text-sm">
<span class="flex items-center gap-1">
<span
class="inline-block h-3 w-3 rounded-full"
:style="{ backgroundColor: stateColorMap[DeviceStateEnum.ONLINE] }"
></span>
<span class="text-gray-500">在线</span>
</span>
<span class="flex items-center gap-1">
<span
class="inline-block h-3 w-3 rounded-full"
:style="{ backgroundColor: stateColorMap[DeviceStateEnum.OFFLINE] }"
></span>
<span class="text-gray-500">离线</span>
</span>
<span class="flex items-center gap-1">
<span
class="inline-block h-3 w-3 rounded-full"
:style="{
backgroundColor: stateColorMap[DeviceStateEnum.INACTIVE],
}"
></span>
<span class="text-gray-500">待激活</span>
</span>
</div>
</template>
<Spin v-if="loading" class="flex h-[500px] items-center justify-center" />
<Empty
v-else-if="!hasData"
class="h-[500px]"
description="暂无设备位置数据"
/>
<div
v-show="hasData && !loading"
ref="mapContainerRef"
class="h-[500px] w-full"
></div>
</Card>
</template>

4
apps/web-antd/src/views/iot/ota/modules/task/ota-task-form.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import type { DeviceRespVO, IotDeviceApi } from '#/api/iot/device/device';
import type { IotDeviceApi } from '#/api/iot/device/device';
import type { OtaTask } from '#/api/iot/ota/task';
import { computed, ref } from 'vue';
@@ -57,7 +57,7 @@ const formRules = {
},
],
};
const devices = ref<IotDeviceApi.DeviceRespVO[]>([]);
const devices = ref<IotDeviceApi.Device[]>([]);
/** 设备选项 */
const deviceOptions = computed(() => {

1
apps/web-antd/src/views/iot/product/product/components/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as ProductSelect } from './select.vue';

57
apps/web-antd/src/views/iot/product/product/components/select.vue Normal file
View File

@@ -0,0 +1,57 @@
<script lang="ts" setup>
import type { IotProductApi } from '#/api/iot/product/product';
import { onMounted, ref } from 'vue';
import { Select } from 'ant-design-vue';
import { getSimpleProductList } from '#/api/iot/product/product';
/** 产品下拉选择器组件 */
defineOptions({ name: 'ProductSelect' });
const props = defineProps<{
deviceType?: number; // 设备类型过滤
modelValue?: number;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value?: number): void;
(e: 'change', value?: number): void;
}>();
const loading = ref(false);
const productList = ref<IotProductApi.Product[]>([]);
/** 处理选择变化 */
function handleChange(value?: number) {
emit('update:modelValue', value);
emit('change', value);
}
/** 获取产品列表 */
async function getProductList() {
try {
loading.value = true;
productList.value = (await getSimpleProductList(props.deviceType)) || [];
} finally {
loading.value = false;
}
}
onMounted(() => {
getProductList();
});
</script>
<template>
<Select
:value="modelValue"
:options="productList.map((p) => ({ label: p.name, value: p.id }))"
:loading="loading"
placeholder="请选择产品"
allow-clear
class="w-full"
@change="handleChange"
/>
</template>

24
apps/web-antd/src/views/iot/product/product/data.ts
View File

@@ -137,6 +137,7 @@ export function useBasicFormSchema(
},
rules: 'required',
},
// TODO @haohao：这个貌似不需要？！
{
fieldName: 'status',
label: '产品状态',
@@ -149,22 +150,23 @@ export function useBasicFormSchema(
defaultValue: 0,
rules: 'required',
},
{
fieldName: 'locationType',
label: '定位类型',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.IOT_LOCATION_TYPE, 'number'),
placeholder: '请选择定位类型',
},
rules: 'required',
},
];
}
/** 高级设置表单字段（图标、图片、产品描述） */
/** 高级设置表单字段（图标、图片、产品描述、动态注册） */
export function useAdvancedFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'registerEnabled',
label: '动态注册',
component: 'Switch',
componentProps: {
checkedChildren: '开',
unCheckedChildren: '关',
},
defaultValue: false,
help: '设备动态注册无需一一烧录设备证书（DeviceSecret），每台设备烧录相同的产品证书，即 ProductKey 和 ProductSecret ，云端鉴权通过后下发设备证书，您可以根据需要开启或关闭动态注册，保障安全性。',
},
{
fieldName: 'icon',
label: '产品图标',

41
apps/web-antd/src/views/iot/product/product/detail/modules/info.vue
View File

@@ -1,9 +1,11 @@
<script lang="ts" setup>
import type { IotProductApi } from '#/api/iot/product/product';
import { ref } from 'vue';
import { DeviceTypeEnum, DICT_TYPE } from '@vben/constants';
import { Card, Descriptions } from 'ant-design-vue';
import { Button, Card, Descriptions, message } from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
@@ -13,11 +15,28 @@ interface Props {
defineProps<Props>();
const showProductSecret = ref(false); // 是否显示产品密钥
/** 格式化日期 */
function formatDate(date?: Date | string) {
if (!date) return '-';
return new Date(date).toLocaleString('zh-CN');
}
/** 切换产品密钥显示状态 */
function toggleProductSecretVisible() {
showProductSecret.value = !showProductSecret.value;
}
/** 复制到剪贴板 */
async function copyToClipboard(text: string) {
try {
await navigator.clipboard.writeText(text);
message.success('复制成功');
} catch {
message.error('复制失败');
}
}
</script>
<template>
@@ -35,9 +54,6 @@ function formatDate(date?: Date | string) {
:value="product.deviceType"
/>
</Descriptions.Item>
<Descriptions.Item label="定位类型">
{{ product.locationType ?? '-' }}
</Descriptions.Item>
<Descriptions.Item label="创建时间">
{{ formatDate(product.createTime) }}
</Descriptions.Item>
@@ -57,6 +73,23 @@ function formatDate(date?: Date | string) {
>
<DictTag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
</Descriptions.Item>
<Descriptions.Item v-if="product.productSecret" label="ProductSecret">
<span v-if="showProductSecret">{{ product.productSecret }}</span>
<span v-else>********</span>
<Button class="ml-2" size="small" @click="toggleProductSecretVisible">
{{ showProductSecret ? '隐藏' : '显示' }}
</Button>
<Button
class="ml-2"
size="small"
@click="copyToClipboard(product.productSecret || '')"
>
复制
</Button>
</Descriptions.Item>
<Descriptions.Item label="动态注册">
{{ product.registerEnabled ? '已开启' : '未开启' }}
</Descriptions.Item>
<Descriptions.Item :span="3" label="产品描述">
{{ product.description || '-' }}
</Descriptions.Item>

2
apps/web-antd/src/views/iot/product/product/modules/form.vue
View File

@@ -68,6 +68,7 @@ async function getAdvancedFormValues() {
}
// 表单未挂载（折叠状态），从 formData 中获取
return {
registerEnabled: formData.value?.registerEnabled,
icon: formData.value?.icon,
picUrl: formData.value?.picUrl,
description: formData.value?.description,
@@ -120,6 +121,7 @@ const [Modal, modalApi] = useVbenModal({
await formApi.setValues(formData.value);
// 如果存在高级字段数据，自动展开 Collapse
if (
formData.value?.registerEnabled ||
formData.value?.icon ||
formData.value?.picUrl ||
formData.value?.description

6
apps/web-antd/src/views/iot/rule/data/rule/components/source-config-form.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { IotDeviceMessageMethodEnum } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { Button, Form, Select, Table } from 'ant-design-vue';
@@ -8,10 +9,7 @@ import { Button, Form, Select, Table } from 'ant-design-vue';
import { getSimpleDeviceList } from '#/api/iot/device/device';
import { getSimpleProductList } from '#/api/iot/product/product';
import { getThingModelListByProductId } from '#/api/iot/thingmodel';
import {
IotDeviceMessageMethodEnum,
IoTThingModelTypeEnum,
} from '#/views/iot/utils/constants';
import { IoTThingModelTypeEnum } from '#/views/iot/utils/constants';
const formData = ref<any[]>([]);
const productList = ref<any[]>([]); // 产品列表

2
apps/web-antd/src/views/iot/thingmodel/modules/thing-model-tsl.vue
View File

@@ -106,7 +106,7 @@ watch(tslString, (newValue) => {
font-size: 13px;
line-height: 1.5;
color: #333;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: pre-wrap;
}

52
apps/web-antd/src/views/iot/utils/constants.ts
View File

@@ -1,3 +1,5 @@
// TODO @AI：感觉这块，放到 biz-iot-enum 里好点。
/** 检查值是否为空 */
const isEmpty = (value: any): boolean => {
return value === null || value === undefined || value === '';
@@ -8,6 +10,13 @@ export const IOT_PROVIDE_KEY = {
PRODUCT: 'IOT_PRODUCT',
};
/** IoT 设备状态枚举 */
export enum DeviceStateEnum {
INACTIVE = 0, // 未激活
OFFLINE = 2, // 离线
ONLINE = 1, // 在线
}
/** IoT 产品物模型类型枚举类 */
export const IoTThingModelTypeEnum = {
PROPERTY: 1, // 属性
@@ -15,49 +24,6 @@ export const IoTThingModelTypeEnum = {
EVENT: 3, // 事件
};
/** IoT 设备消息的方法枚举 */
export const IotDeviceMessageMethodEnum = {
// ========== 设备状态 ==========
STATE_UPDATE: {
method: 'thing.state.update',
name: '设备状态变更',
upstream: true,
},
// ========== 设备属性 ==========
PROPERTY_POST: {
method: 'thing.property.post',
name: '属性上报',
upstream: true,
},
PROPERTY_SET: {
method: 'thing.property.set',
name: '属性设置',
upstream: false,
},
// ========== 设备事件 ==========
EVENT_POST: {
method: 'thing.event.post',
name: '事件上报',
upstream: true,
},
// ========== 服务调用 ==========
SERVICE_INVOKE: {
method: 'thing.service.invoke',
name: '服务调用',
upstream: false,
},
// ========== 设备配置 ==========
CONFIG_PUSH: {
method: 'thing.config.push',
name: '配置推送',
upstream: false,
},
};
// IoT 产品物模型服务调用方式枚举
export const IoTThingModelServiceCallTypeEnum = {
ASYNC: {

8
apps/web-ele/src/adapter/component/index.ts
View File

@@ -18,6 +18,12 @@ import { ElNotification } from 'element-plus';
import { Tinymce as RichTextarea } from '#/components/tinymce';
import { FileUpload, ImageUpload } from '#/components/upload';
const ElAutoComplete = defineAsyncComponent(() =>
Promise.all([
import('element-plus/es/components/autocomplete/index'),
import('element-plus/es/components/autocomplete/style/css'),
]).then(([res]) => res.ElAutocomplete),
);
const ElButton = defineAsyncComponent(() =>
Promise.all([
import('element-plus/es/components/button/index'),
@@ -178,6 +184,7 @@ export type ComponentType =
| 'ApiCascader'
| 'ApiSelect'
| 'ApiTreeSelect'
| 'AutoComplete'
| 'Checkbox'
| 'CheckboxGroup'
| 'DatePicker'
@@ -243,6 +250,7 @@ async function initComponentAdapter() {
visibleEvent: 'onVisibleChange',
},
),
AutoComplete: ElAutoComplete,
Checkbox: ElCheckbox,
CheckboxGroup: (props, { attrs, slots }) => {
let defaultSlot;

5
apps/web-ele/src/views/_core/profile/password-setting.vue
View File

@@ -1,14 +1,12 @@
<script setup lang="ts">
import type { VbenFormSchema } from '#/adapter/form';
import { computed, ref } from 'vue';
import { computed } from 'vue';
import { ProfilePasswordSetting, z } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
const profilePasswordSettingRef = ref();
const formSchema = computed((): VbenFormSchema[] => {
return [
{
@@ -58,7 +56,6 @@ function handleSubmit() {
</script>
<template>
<ProfilePasswordSetting
ref="profilePasswordSettingRef"
class="w-1/3"
:form-schema="formSchema"
@submit="handleSubmit"

2
apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/process-panel.scss
View File

@@ -72,7 +72,7 @@
.element-listener-item {
display: inline-grid;
grid-template-columns: 16px auto 32px 32px;
grid-column-gap: 8px;
column-gap: 8px;
width: 100%;
}

14
apps/web-ele/src/views/system/menu/data.ts
View File

@@ -166,11 +166,19 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'AutoComplete',
componentProps: {
clearable: true,
filterOption(input: string, option: { value: string }) {
return option.value.toLowerCase().includes(input.toLowerCase());
fetchSuggestions(queryString: string, cb: any) {
const options = componentKeys.map((v) => ({ value: v }));
const createFilter = (qs: string) => {
return (restaurant: any) => {
return restaurant.value.toLowerCase().includes(qs.toLowerCase());
};
};
const results = queryString
? options.filter(createFilter(queryString))
: options;
cb(results);
},
placeholder: '请选择组件名称',
options: componentKeys.map((v) => ({ value: v })),
},
dependencies: {
triggerFields: ['type'],

1
apps/web-naive/package.json
View File

@@ -26,6 +26,7 @@
"#/*": "./src/*"
},
"dependencies": {
"@form-create/naive-ui": "catalog:",
"@vben/access": "workspace:*",
"@vben/common-ui": "workspace:*",
"@vben/constants": "workspace:*",

5
apps/web-naive/src/adapter/component/index.ts
View File

@@ -16,6 +16,9 @@ import { $t } from '@vben/locales';
import { message } from '#/adapter/naive';
import { FileUpload, ImageUpload } from '#/components/upload';
const NAutoComplete = defineAsyncComponent(() =>
import('naive-ui/es/auto-complete').then((res) => res.NAutoComplete),
);
const NButton = defineAsyncComponent(() =>
import('naive-ui/es/button').then((res) => res.NButton),
);
@@ -103,6 +106,7 @@ const withDefaultPlaceholder = <T extends Component>(
export type ComponentType =
| 'ApiSelect'
| 'ApiTreeSelect'
| 'AutoComplete'
| 'Checkbox'
| 'CheckboxGroup'
| 'DatePicker'
@@ -154,6 +158,7 @@ async function initComponentAdapter() {
visibleEvent: 'onVisibleChange',
},
),
AutoComplete: NAutoComplete,
Checkbox: NCheckbox,
CheckboxGroup: (props, { attrs, slots }) => {
let defaultSlot;

5
apps/web-naive/src/views/_core/profile/password-setting.vue
View File

@@ -1,14 +1,12 @@
<script setup lang="ts">
import type { VbenFormSchema } from '#/adapter/form';
import { computed, ref } from 'vue';
import { computed } from 'vue';
import { ProfilePasswordSetting, z } from '@vben/common-ui';
import { message } from '#/adapter/naive';
const profilePasswordSettingRef = ref();
const formSchema = computed((): VbenFormSchema[] => {
return [
{
@@ -58,7 +56,6 @@ function handleSubmit() {
</script>
<template>
<ProfilePasswordSetting
ref="profilePasswordSettingRef"
class="w-1/3"
:form-schema="formSchema"
@submit="handleSubmit"

15
apps/web-tdesign/src/app.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { GlobalConfigProvider } from 'tdesign-vue-next';
import { onMounted } from 'vue';
import { watch } from 'vue';
import { usePreferences } from '@vben/preferences';
@@ -12,12 +12,13 @@ import zhConfig from 'tdesign-vue-next/es/locale/zh_CN';
defineOptions({ name: 'App' });
const { isDark } = usePreferences();
onMounted(() => {
document.documentElement.setAttribute(
'theme-mode',
isDark.value ? 'dark' : '',
);
});
watch(
() => isDark.value,
(dark) => {
document.documentElement.setAttribute('theme-mode', dark ? 'dark' : '');
},
{ immediate: true },
);
const customConfig: GlobalConfigProvider = {
// 可以在此处定义更多自定义配置，具体可配置内容参看 API 文档

5
apps/web-tdesign/src/views/_core/profile/password-setting.vue
View File

@@ -1,14 +1,12 @@
<script setup lang="ts">
import type { VbenFormSchema } from '#/adapter/form';
import { computed, ref } from 'vue';
import { computed } from 'vue';
import { ProfilePasswordSetting, z } from '@vben/common-ui';
import { message } from '#/adapter/tdesign';
const profilePasswordSettingRef = ref();
const formSchema = computed((): VbenFormSchema[] => {
return [
{
@@ -58,7 +56,6 @@ function handleSubmit() {
</script>
<template>
<ProfilePasswordSetting
ref="profilePasswordSettingRef"
class="w-1/3"
:form-schema="formSchema"
@submit="handleSubmit"

16
cspell.json
View File

@@ -4,6 +4,7 @@
"language": "en,en-US",
"allowCompoundWords": true,
"words": [
"Tinymce",
"acmr",
"antd",
"antdv",
@@ -11,6 +12,7 @@
"astro",
"axios",
"brotli",
"cascader",
"clsx",
"cropperjs",
"defu",
@@ -18,6 +20,7 @@
"dotenv",
"echarts",
"ependencies",
"esbuild",
"esno",
"etag",
"execa",
@@ -53,7 +56,6 @@
"sortablejs",
"styl",
"taze",
"Tinymce",
"tdesign",
"ui-kit",
"uicons",
@@ -72,14 +74,14 @@
"yxxx"
],
"ignorePaths": [
"**/node_modules/**",
"**/dist/**",
"**/*-dist/**",
"**/icons/**",
"pnpm-lock.yaml",
"**/*.log",
"**/*.test.ts",
"**/*.spec.ts",
"**/__tests__/**"
"**/*.test.ts",
"**/__tests__/**",
"**/dist/**",
"**/icons/**",
"**/node_modules/**",
"pnpm-lock.yaml"
]
}

7
internal/lint-configs/eslint-config/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@vben/eslint-config",
"version": "5.0.0",
"version": "5.5.9",
"private": true,
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
@@ -43,14 +43,17 @@
"eslint-plugin-n": "catalog:",
"eslint-plugin-no-only-tests": "catalog:",
"eslint-plugin-perfectionist": "catalog:",
"eslint-plugin-pnpm": "catalog:",
"eslint-plugin-prettier": "catalog:",
"eslint-plugin-regexp": "catalog:",
"eslint-plugin-unicorn": "catalog:",
"eslint-plugin-unused-imports": "catalog:",
"eslint-plugin-vitest": "catalog:",
"eslint-plugin-vue": "catalog:",
"eslint-plugin-yml": "catalog:",
"globals": "catalog:",
"jsonc-eslint-parser": "catalog:",
"vue-eslint-parser": "catalog:"
"vue-eslint-parser": "catalog:",
"yaml-eslint-parser": "catalog:"
}
}

2
internal/lint-configs/eslint-config/src/configs/ignores.ts
View File

@@ -48,6 +48,8 @@ export async function ignores(): Promise<Linter.Config[]> {
'**/*.woff',
'**/public/**',
'**/china.json',
'**/.github',
'**/lefthook.yml',
],
},
];

2
internal/lint-configs/eslint-config/src/configs/index.ts
View File

@@ -8,6 +8,7 @@ export * from './jsdoc';
export * from './jsonc';
export * from './node';
export * from './perfectionist';
export * from './pnpm';
export * from './prettier';
export * from './regexp';
export * from './test';
@@ -15,3 +16,4 @@ export * from './turbo';
export * from './typescript';
export * from './unicorn';
export * from './vue';
export * from './yaml';

16
internal/lint-configs/eslint-config/src/configs/jsonc.ts
View File

@@ -48,6 +48,7 @@ export async function jsonc(): Promise<Linter.Config[]> {
},
sortTsconfig(),
sortPackageJson(),
sortCspellJson(),
];
}
@@ -130,6 +131,21 @@ function sortPackageJson(): Linter.Config {
};
}
function sortCspellJson(): Linter.Config {
return {
files: ['**/cspell.json', '**/.cspell.json'],
rules: {
'jsonc/sort-array-values': [
'error',
{
order: { type: 'asc' },
pathPattern: '^words$|^ignorePaths$',
},
],
},
};
}
function sortTsconfig(): Linter.Config {
return {
files: [

41
internal/lint-configs/eslint-config/src/configs/pnpm.ts Normal file
View File

@@ -0,0 +1,41 @@
import type { Linter } from 'eslint';
import { interopDefault } from '../util';
export async function pnpm(): Promise<Linter.Config[]> {
const [pluginPnpm, parserPnpm, parserJsonc] = await Promise.all([
interopDefault(import('eslint-plugin-pnpm')),
interopDefault(import('yaml-eslint-parser')),
interopDefault(import('jsonc-eslint-parser')),
] as const);
return [
{
files: ['package.json', '**/package.json'],
languageOptions: {
parser: parserJsonc,
},
plugins: {
pnpm: pluginPnpm,
},
rules: {
'pnpm/json-enforce-catalog': 'error',
'pnpm/json-prefer-workspace-settings': 'error',
'pnpm/json-valid-catalog': 'error',
},
},
{
files: ['pnpm-workspace.yaml'],
languageOptions: {
parser: parserPnpm,
},
plugins: {
pnpm: pluginPnpm,
},
rules: {
'pnpm/yaml-no-duplicate-catalog-item': 'error',
'pnpm/yaml-no-unused-catalog-item': 'error',
},
},
];
}

87
internal/lint-configs/eslint-config/src/configs/yaml.ts Normal file
View File

@@ -0,0 +1,87 @@
import type { Linter } from 'eslint';
import { interopDefault } from '../util';
export async function yaml(): Promise<Linter.Config[]> {
const [pluginYaml, parserYaml] = await Promise.all([
interopDefault(import('eslint-plugin-yml')),
interopDefault(import('yaml-eslint-parser')),
] as const);
return [
{
files: ['**/*.y?(a)ml'],
plugins: {
yaml: pluginYaml as any,
},
languageOptions: {
parser: parserYaml,
},
rules: {
'style/spaced-comment': 'off',
'yaml/block-mapping': 'error',
'yaml/block-sequence': 'error',
'yaml/no-empty-key': 'error',
'yaml/no-empty-sequence-entry': 'error',
'yaml/no-irregular-whitespace': 'error',
'yaml/plain-scalar': 'error',
'yaml/vue-custom-block/no-parsing-error': 'error',
'yaml/block-mapping-question-indicator-newline': 'error',
'yaml/block-sequence-hyphen-indicator-newline': 'error',
'yaml/flow-mapping-curly-newline': 'error',
'yaml/flow-mapping-curly-spacing': 'error',
'yaml/flow-sequence-bracket-newline': 'error',
'yaml/flow-sequence-bracket-spacing': 'error',
'yaml/indent': ['error', 2],
'yaml/key-spacing': 'error',
'yaml/no-tab-indent': 'error',
'yaml/quotes': [
'error',
{
avoidEscape: true,
prefer: 'single',
},
],
'yaml/spaced-comment': 'error',
},
},
{
files: ['pnpm-workspace.yaml'],
rules: {
'yaml/sort-keys': [
'error',
{
order: [
'packages',
'overrides',
'patchedDependencies',
'hoistPattern',
'catalog',
'catalogs',
'allowedDeprecatedVersions',
'allowNonAppliedPatches',
'configDependencies',
'ignoredBuiltDependencies',
'ignoredOptionalDependencies',
'neverBuiltDependencies',
'onlyBuiltDependencies',
'onlyBuiltDependenciesFile',
'packageExtensions',
'peerDependencyRules',
'supportedArchitectures',
],
pathPattern: '^$',
},
{
order: { type: 'asc' },
pathPattern: '.*',
},
],
},
},
];
}

4
internal/lint-configs/eslint-config/src/index.ts
View File

@@ -11,6 +11,7 @@ import {
jsonc,
node,
perfectionist,
pnpm,
prettier,
regexp,
test,
@@ -18,6 +19,7 @@ import {
typescript,
unicorn,
vue,
yaml,
} from './configs';
import { customConfig } from './custom-config';
@@ -48,6 +50,8 @@ async function defineConfig(config: FlatConfig[] = []) {
regexp(),
command(),
turbo(),
yaml(),
pnpm(),
...customConfig,
...config,
];

3
internal/lint-configs/eslint-config/tsconfig.json
View File

@@ -1,9 +1,6 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "@vben/tsconfig/node.json",
"compilerOptions": {
"moduleResolution": "bundler"
},
"include": ["src"],
"exclude": ["node_modules"]
}

2
internal/lint-configs/prettier-config/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@vben/prettier-config",
"version": "5.0.0",
"version": "5.5.9",
"private": true,
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",

1
internal/lint-configs/stylelint-config/index.mjs
View File

@@ -75,6 +75,7 @@ export default {
'import-notation': null,
'media-feature-range-notation': null,
'named-grid-areas-no-invalid': null,
'nesting-selector-no-missing-scoping-root': null,
'no-descending-specificity': null,
'no-empty-source': null,
'order/order': [

3
internal/tailwind-config/tsconfig.json
View File

@@ -1,9 +1,6 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "@vben/tsconfig/node.json",
"compilerOptions": {
"moduleResolution": "bundler"
},
"include": ["src"],
"exclude": ["node_modules"]
}

1
internal/tsconfig/node.json
View File

@@ -6,6 +6,7 @@
"composite": false,
"lib": ["ESNext"],
"baseUrl": "./",
"moduleResolution": "bundler",
"types": ["node"],
"noImplicitAny": true
}

4
internal/vite-config/src/config/index.ts
View File

@@ -1,4 +1,4 @@
import type { DefineConfig } from '../typing';
import type { DefineConfig, VbenViteConfig } from '../typing';
import { existsSync } from 'node:fs';
import { join } from 'node:path';
@@ -12,7 +12,7 @@ export * from './library';
function defineConfig(
userConfigPromise?: DefineConfig,
type: 'application' | 'auto' | 'library' = 'auto',
) {
): VbenViteConfig {
let projectType = type;
// 根据包是否存在 index.html,自动判断类型

10
internal/vite-config/src/typing.ts
View File

@@ -1,5 +1,10 @@
import type { PluginVisualizerOptions } from 'rollup-plugin-visualizer';
import type { ConfigEnv, PluginOption, UserConfig } from 'vite';
import type {
ConfigEnv,
PluginOption,
UserConfig,
UserConfigFnPromise,
} from 'vite';
import type { PluginOptions } from 'vite-plugin-dts';
import type { Options as PwaPluginOptions } from 'vite-plugin-pwa';
@@ -327,6 +332,8 @@ type DefineLibraryOptions = (config?: ConfigEnv) => Promise<{
*/
type DefineConfig = DefineApplicationOptions | DefineLibraryOptions;
type VbenViteConfig = Promise<UserConfig> | UserConfig | UserConfigFnPromise;
export type {
ApplicationPluginOptions,
ArchiverPluginOptions,
@@ -340,4 +347,5 @@ export type {
LibraryPluginOptions,
NitroMockPluginOptions,
PrintPluginOptions,
VbenViteConfig,
};

26
package.json
View File

@@ -95,28 +95,8 @@
"vue-tsc": "catalog:"
},
"engines": {
"node": ">=20.12.0",
"pnpm": ">=10.14.0"
"node": ">=20.19.0",
"pnpm": ">=10.0.0"
},
"packageManager": "pnpm@10.22.0",
"pnpm": {
"peerDependencyRules": {
"allowedVersions": {
"eslint": "*"
}
},
"overrides": {
"@ast-grep/napi": "catalog:",
"@ctrl/tinycolor": "catalog:",
"clsx": "catalog:",
"esbuild": "0.25.3",
"jiti": "catalog:",
"pinia": "catalog:",
"vue": "catalog:"
},
"neverBuiltDependencies": [
"canvas",
"node-gyp"
]
}
"packageManager": "pnpm@10.28.1"
}

2
packages/@core/base/design/src/css/global.css
View File

@@ -18,9 +18,9 @@
font-size: var(--font-size-base, 16px);
font-variation-settings: normal;
font-synthesis-weight: none;
line-height: 1.15;
text-size-adjust: 100%;
font-synthesis-weight: none;
scroll-behavior: smooth;
text-rendering: optimizelegibility;
-webkit-tap-highlight-color: transparent;

3
packages/@core/base/shared/package.json
View File

@@ -96,9 +96,6 @@
"devDependencies": {
"@types/crypto-js": "catalog:",
"@types/lodash.clonedeep": "catalog:",
"@types/lodash.get": "catalog:",
"@types/lodash.isequal": "catalog:",
"@types/lodash.set": "catalog:",
"@types/nprogress": "catalog:"
}
}

8
packages/@core/base/shared/src/utils/__tests__/dom.test.ts
View File

@@ -116,11 +116,11 @@ describe('getElementVisibleRect', () => {
} as HTMLElement;
expect(getElementVisibleRect(element)).toEqual({
bottom: 800,
bottom: 0,
height: 0,
left: 1100,
right: 1000,
top: 900,
left: 0,
right: 0,
top: 0,
width: 0,
});
});

12
packages/@core/base/shared/src/utils/dom.ts
View File

@@ -41,6 +41,18 @@ export function getElementVisibleRect(
const left = Math.max(rect.left, 0);
const right = Math.min(rect.right, viewWidth);
// 如果元素完全不可见，则返回一个空的矩形
if (top >= viewHeight || bottom <= 0 || left >= viewWidth || right <= 0) {
return {
bottom: 0,
height: 0,
left: 0,
right: 0,
top: 0,
width: 0,
};
}
return {
bottom,
height: Math.max(0, bottom - top),

6
packages/@core/composables/src/__tests__/use-sortable.test.ts
View File

@@ -29,9 +29,9 @@ describe('useSortable', () => {
await initializeSortable();
// Import sortablejs to access the mocked create function
const Sortable = await import(
'sortablejs/modular/sortable.complete.esm.js'
);
const Sortable =
// @ts-expect-error - This is a dynamic import
await import('sortablejs/modular/sortable.complete.esm.js');
// Verify that Sortable.create was called with the correct parameters
expect(Sortable.default.create).toHaveBeenCalledTimes(1);

36
packages/@core/preferences/src/index.ts
View File

@@ -2,33 +2,17 @@ import type { Preferences } from './types';
import { preferencesManager } from './preferences';
// 偏好设置（带有层级关系）
const preferences: Preferences =
preferencesManager.getPreferences.apply(preferencesManager);
// 更新偏好设置
const updatePreferences =
preferencesManager.updatePreferences.bind(preferencesManager);
// 重置偏好设置
const resetPreferences =
preferencesManager.resetPreferences.bind(preferencesManager);
const clearPreferencesCache =
preferencesManager.clearCache.bind(preferencesManager);
// 初始化偏好设置
const initPreferences =
preferencesManager.initPreferences.bind(preferencesManager);
export {
clearPreferencesCache,
initPreferences,
preferences,
preferencesManager,
resetPreferences,
export const {
getPreferences,
updatePreferences,
};
resetPreferences,
clearCache,
initPreferences,
} = preferencesManager;
export const preferences: Preferences = getPreferences();
export { preferencesManager };
export * from './constants';
export type * from './types';

202
packages/@core/preferences/src/preferences.ts
View File

@@ -16,168 +16,168 @@ import {
import { defaultPreferences } from './config';
import { updateCSSVariables } from './update-css-variables';
const STORAGE_KEY = 'preferences';
const STORAGE_KEY_LOCALE = `${STORAGE_KEY}-locale`;
const STORAGE_KEY_THEME = `${STORAGE_KEY}-theme`;
const STORAGE_KEYS = {
MAIN: 'preferences',
LOCALE: 'preferences-locale',
THEME: 'preferences-theme',
} as const;
class PreferenceManager {
private cache: null | StorageManager = null;
// private flattenedState: Flatten<Preferences>;
private cache: StorageManager;
private debouncedSave: (preference: Preferences) => void;
private initialPreferences: Preferences = defaultPreferences;
private isInitialized: boolean = false;
private savePreferences: (preference: Preferences) => void;
private state: Preferences = reactive<Preferences>({
...this.loadPreferences(),
});
private isInitialized = false;
private state: Preferences;
constructor() {
this.cache = new StorageManager();
// 避免频繁的操作缓存
this.savePreferences = useDebounceFn(
(preference: Preferences) => this._savePreferences(preference),
this.state = reactive<Preferences>(
this.loadFromCache() || { ...defaultPreferences },
);
this.debouncedSave = useDebounceFn(
(preference) => this.saveToCache(preference),
150,
);
}
clearCache() {
[STORAGE_KEY, STORAGE_KEY_LOCALE, STORAGE_KEY_THEME].forEach((key) => {
this.cache?.removeItem(key);
});
}
public getInitialPreferences() {
return this.initialPreferences;
}
public getPreferences() {
return readonly(this.state);
}
/**
* 清除所有缓存的偏好设置
*/
clearCache = () => {
Object.values(STORAGE_KEYS).forEach((key) => this.cache.removeItem(key));
};
/**
* 覆盖偏好设置
* overrides 要覆盖的偏好设置
* namespace 命名空间
* 获取初始化偏好设置
*/
public async initPreferences({ namespace, overrides }: InitialOptions) {
// 是否初始化过
getInitialPreferences = () => {
return this.initialPreferences;
};
/**
* 获取当前偏好设置（只读）
*/
getPreferences = () => {
return readonly(this.state);
};
/**
* 初始化偏好设置
* @param options - 初始化配置项
* @param options.namespace - 命名空间，用于隔离不同应用的配置
* @param options.overrides - 要覆盖的偏好设置
*/
initPreferences = async ({ namespace, overrides }: InitialOptions) => {
// 防止重复初始化
if (this.isInitialized) {
return;
}
// 初始化存储管理器
// 使用命名空间初始化存储管理器
this.cache = new StorageManager({ prefix: namespace });
// 合并初始偏好设置
this.initialPreferences = merge({}, overrides, defaultPreferences);
// 加载并合并当前存储的偏好设置
// 加载缓存的偏好设置并与初始配置合并
const cachedPreferences = this.loadFromCache() || {};
const mergedPreference = merge(
{},
// overrides,
this.loadCachedPreferences() || {},
cachedPreferences,
this.initialPreferences,
);
// 更新偏好设置
this.updatePreferences(mergedPreference);
// 设置监听器
this.setupWatcher();
// 初始化平台标识
this.initPlatform();
// 标记为已初始化
this.isInitialized = true;
}
};
/**
* 重置偏好设置
* 偏好设置将被重置为初始值，并从 localStorage 中移除。
*
* @example
* 假设 initialPreferences 为 { theme: 'light', language: 'en' }
* 当前 state 为 { theme: 'dark', language: 'fr' }
* this.resetPreferences();
* 调用后，state 将被重置为 { theme: 'light', language: 'en' }
* 并且 localStorage 中的对应项将被移除
* 重置偏好设置到初始状态
*/
resetPreferences() {
resetPreferences = () => {
// 将状态重置为初始偏好设置
Object.assign(this.state, this.initialPreferences);
// 保存重置后的偏好设置
this.savePreferences(this.state);
// 从存储中移除偏好设置项
[STORAGE_KEY, STORAGE_KEY_THEME, STORAGE_KEY_LOCALE].forEach((key) => {
this.cache?.removeItem(key);
});
this.updatePreferences(this.state);
}
// 保存偏好设置至缓存
this.saveToCache(this.state);
// 直接触发 UI 更新
this.handleUpdates(this.state);
};
/**
* 更新偏好设置
* @param updates - 要更新的偏好设置
*/
public updatePreferences(updates: DeepPartial<Preferences>) {
updatePreferences = (updates: DeepPartial<Preferences>) => {
// 深度合并更新内容和当前状态
const mergedState = merge({}, updates, markRaw(this.state));
Object.assign(this.state, mergedState);
// 根据更新的键值执行相应的操作
// 根据更新的值执行更新
this.handleUpdates(updates);
this.savePreferences(this.state);
}
// 保存到缓存
this.debouncedSave(this.state);
};
/**
* 保存偏好设置
* @param {Preferences} preference - 需要保存的偏好设置
*/
private _savePreferences(preference: Preferences) {
this.cache?.setItem(STORAGE_KEY, preference);
this.cache?.setItem(STORAGE_KEY_LOCALE, preference.app.locale);
this.cache?.setItem(STORAGE_KEY_THEME, preference.theme.mode);
}
/**
* 处理更新的键值
* 根据更新的键值执行相应的操作。
* @param {DeepPartial<Preferences>} updates - 部分更新的偏好设置
* 处理更新
* @param updates - 更新的偏好设置
*/
private handleUpdates(updates: DeepPartial<Preferences>) {
const themeUpdates = updates.theme || {};
const appUpdates = updates.app || {};
const { theme, app } = updates;
if (
(themeUpdates && Object.keys(themeUpdates).length > 0) ||
Reflect.has(themeUpdates, 'fontSize')
theme &&
(Object.keys(theme).length > 0 || Reflect.has(theme, 'fontSize'))
) {
updateCSSVariables(this.state);
}
if (
Reflect.has(appUpdates, 'colorGrayMode') ||
Reflect.has(appUpdates, 'colorWeakMode')
app &&
(Reflect.has(app, 'colorGrayMode') || Reflect.has(app, 'colorWeakMode'))
) {
this.updateColorMode(this.state);
}
}
/**
* 初始化平台标识
*/
private initPlatform() {
const dom = document.documentElement;
dom.dataset.platform = isMacOs() ? 'macOs' : 'window';
document.documentElement.dataset.platform = isMacOs() ? 'macOs' : 'window';
}
/**
* 从缓存中加载偏好设置。如果缓存中没有找到对应的偏好设置，则返回默认偏好设置。
* 从缓存加载偏好设置
* @returns 缓存的偏好设置，如果不存在则返回 null
*/
private loadCachedPreferences() {
return this.cache?.getItem<Preferences>(STORAGE_KEY);
private loadFromCache(): null | Preferences {
return this.cache.getItem<Preferences>(STORAGE_KEYS.MAIN);
}
/**
* 加载偏好设置
* @returns {Preferences} 加载的偏好设置
* 保存偏好设置到缓存
* @param preference - 要保存的偏好设置
*/
private loadPreferences(): Preferences {
return this.loadCachedPreferences() || { ...defaultPreferences };
private saveToCache(preference: Preferences) {
this.cache.setItem(STORAGE_KEYS.MAIN, preference);
this.cache.setItem(STORAGE_KEYS.LOCALE, preference.app.locale);
this.cache.setItem(STORAGE_KEYS.THEME, preference.theme.mode);
}
/**
* 监听状态和系统偏好设置的变化。
* 监听状态和系统偏好设置的变化
*/
private setupWatcher() {
if (this.isInitialized) {
@@ -187,6 +187,7 @@ class PreferenceManager {
// 监听断点，判断是否移动端
const breakpoints = useBreakpoints(breakpointsTailwind);
const isMobile = breakpoints.smaller('md');
watch(
() => isMobile.value,
(val) => {
@@ -201,12 +202,13 @@ class PreferenceManager {
window
.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', ({ matches: isDark }) => {
// 如果偏好设置中主题模式为auto，则跟随系统更新
// 仅在自动模式下跟随系统主题
if (this.state.theme.mode === 'auto') {
// 先应用实际的主题
this.updatePreferences({
theme: { mode: isDark ? 'dark' : 'light' },
});
// 恢复为auto模式
// 再恢复为 auto 模式，保持跟随系统的状态
this.updatePreferences({
theme: { mode: 'auto' },
});
@@ -216,19 +218,17 @@ class PreferenceManager {
/**
* 更新页面颜色模式（灰色、色弱）
* @param preference
* @param preference - 偏好设置
*/
private updateColorMode(preference: Preferences) {
if (preference.app) {
const { colorGrayMode, colorWeakMode } = preference.app;
const dom = document.documentElement;
const COLOR_WEAK = 'invert-mode';
const COLOR_GRAY = 'grayscale-mode';
dom.classList.toggle(COLOR_WEAK, colorWeakMode);
dom.classList.toggle(COLOR_GRAY, colorGrayMode);
}
const { colorGrayMode, colorWeakMode } = preference.app;
const dom = document.documentElement;
dom.classList.toggle('invert-mode', colorWeakMode);
dom.classList.toggle('grayscale-mode', colorGrayMode);
}
}
const preferencesManager = new PreferenceManager();
export { PreferenceManager, preferencesManager };

2
packages/@core/preferences/src/use-preferences.ts
View File

@@ -136,7 +136,7 @@ function usePreferences() {
});
/**
* @zh_CN 登录注册页面布局是否为左侧
* @zh_CN 登录注册页面布局是否为右侧
*/
const authPanelRight = computed(() => {
return appPreferences.value.authPageLayout === 'panel-right';

8
packages/@core/ui-kit/form-ui/src/form-render/form.vue
View File

@@ -53,7 +53,11 @@ const wrapperClass = computed(() => {
provideFormRenderProps(props);
const { isCalculated, keepFormItemIndex, wrapperRef } = useExpandable(props);
const {
isCalculated,
keepFormItemIndex,
wrapperRef: _wrapperRef,
} = useExpandable(props);
const shapes = computed(() => {
const resultShapes: FormShape[] = [];
@@ -170,7 +174,7 @@ const computedSchema = computed(
<template>
<component :is="formComponent" v-bind="formComponentProps">
<div ref="wrapperRef" :class="wrapperClass">
<div ref="_wrapperRef" :class="wrapperClass">
<template v-for="cSchema in computedSchema" :key="cSchema.fieldName">
<!-- <div v-if="$slots[cSchema.fieldName]" :class="cSchema.formItemClass">
<slot :definition="cSchema" :name="cSchema.fieldName"> </slot>

6
packages/@core/ui-kit/form-ui/src/types.ts
View File

@@ -352,9 +352,9 @@ export interface ActionButtonOptions extends VbenButtonProps {
export interface VbenFormProps<
T extends BaseFormComponentType = BaseFormComponentType,
> extends Omit<
FormRenderProps<T>,
'componentBindEventMap' | 'componentMap' | 'form'
> {
FormRenderProps<T>,
'componentBindEventMap' | 'componentMap' | 'form'
> {
/**
* 操作按钮是否反转（提交按钮前置）
*/

9
packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
View File

@@ -26,7 +26,8 @@ interface Props {
const props = withDefaults(defineProps<Props>(), {});
const { contentElement, overlayStyle } = useLayoutContentStyle();
const { contentElement: _contentElement, overlayStyle } =
useLayoutContentStyle();
const style = computed((): CSSProperties => {
const {
@@ -55,7 +56,11 @@ const style = computed((): CSSProperties => {
</script>
<template>
<main ref="contentElement" :style="style" class="relative bg-background-deep">
<main
ref="_contentElement"
:style="style"
class="relative bg-background-deep"
>
<Slot :style="overlayStyle">
<slot name="overlay"></slot>
</Slot>

5
packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { CSSProperties } from 'vue';
import { computed, shallowRef, useSlots, watchEffect } from 'vue';
import { computed, useSlots, watchEffect } from 'vue';
import { VbenScrollbar } from '@vben-core/shadcn-ui';
@@ -114,7 +114,7 @@ const extraVisible = defineModel<boolean>('extraVisible');
const isLocked = useScrollLock(document.body);
const slots = useSlots();
const asideRef = shallowRef<HTMLDivElement | null>();
// const asideRef = shallowRef<HTMLDivElement | null>();
const hiddenSideStyle = computed((): CSSProperties => calcMenuWidthStyle(true));
@@ -290,7 +290,6 @@ function handleMouseleave() {
/>
<div
v-if="isSidebarMixed"
ref="asideRef"
:class="{
'border-l': extraVisible,
}"

17
packages/@core/ui-kit/layout-ui/src/vben-layout.vue
View File

@@ -403,13 +403,10 @@ watch(
);
{
const mouseMove = () => {
mouseY.value > headerWrapperHeight.value
? (headerIsHidden.value = true)
: (headerIsHidden.value = false);
};
const HEADER_TRIGGER_DISTANCE = 12;
watch(
[() => props.headerMode, () => mouseY.value],
[() => props.headerMode, () => mouseY.value, () => headerIsHidden.value],
() => {
if (!isHeaderAutoMode.value || isMixedNav.value || isFullContent.value) {
if (props.headerMode !== 'auto-scroll') {
@@ -417,8 +414,12 @@ watch(
}
return;
}
headerIsHidden.value = true;
mouseMove();
const isInTriggerZone = mouseY.value <= HEADER_TRIGGER_DISTANCE;
const isInHeaderZone =
!headerIsHidden.value && mouseY.value <= headerWrapperHeight.value;
headerIsHidden.value = !(isInTriggerZone || isInHeaderZone);
},
{
immediate: true,

4
packages/@core/ui-kit/menu-ui/src/components/menu.vue
View File

@@ -351,14 +351,14 @@ function getActivePaths() {
role="menu"
>
<template v-if="mode === 'horizontal' && getSlot.showSlotMore">
<template v-for="item in getSlot.slotDefault" :key="item.key">
<template v-for="(item, index) in getSlot.slotDefault" :key="index">
<component :is="item" />
</template>
<SubMenu is-sub-menu-more path="sub-menu-more">
<template #title>
<Ellipsis class="size-4" />
</template>
<template v-for="item in getSlot.slotMore" :key="item.key">
<template v-for="(item, index) in getSlot.slotMore" :key="index">
<component :is="item" />
</template>
</SubMenu>

3
packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
View File

@@ -54,7 +54,7 @@ const components = globalShareState.getComponents();
const id = useId();
provide('DISMISSABLE_DRAWER_ID', id);
const wrapperRef = ref<HTMLElement>();
// const wrapperRef = ref<HTMLElement>();
const { $t } = useSimpleLocale();
const { isMobile } = useIsMobile();
@@ -281,7 +281,6 @@ const getForceMount = computed(() => {
</VisuallyHidden>
</template>
<div
ref="wrapperRef"
:class="
cn('relative flex-1 overflow-y-auto p-3', contentClass, {
'pointer-events-none': showLoading || submitting,

6
packages/@core/ui-kit/popup-ui/src/modal/modal.vue
View File

@@ -50,10 +50,10 @@ const props = withDefaults(defineProps<Props>(), {
const components = globalShareState.getComponents();
const contentRef = ref();
const wrapperRef = ref<HTMLElement>();
// const wrapperRef = ref<HTMLElement>();
const dialogRef = ref();
const headerRef = ref();
const footerRef = ref();
// const footerRef = ref();
const id = useId();
@@ -306,7 +306,6 @@ function handleClosed() {
</VisuallyHidden>
</DialogHeader>
<div
ref="wrapperRef"
:class="
cn('relative min-h-40 flex-1 overflow-y-auto p-3', contentClass, {
'pointer-events-none': showLoading || submitting,
@@ -327,7 +326,6 @@ function handleClosed() {
<DialogFooter
v-if="showFooter"
ref="footerRef"
:class="
cn(
'flex-row items-center justify-end p-2',

9
packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
View File

@@ -41,6 +41,7 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
// 不能用 Object.assign,会丢失 api 的原型函数
Object.setPrototypeOf(extendedApi, api);
},
consumed: false,
options,
async reCreateModal() {
isModalReady.value = false;
@@ -73,7 +74,13 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
return [Modal, extendedApi as ExtendedModalApi] as const;
}
const injectData = inject<any>(USER_MODAL_INJECT_KEY, {});
let injectData = inject<any>(USER_MODAL_INJECT_KEY, {});
// 这个数据已经被使用了，说明这个弹窗是嵌套的弹窗，不应该merge上层的配置
if (injectData.consumed) {
injectData = {};
} else {
injectData.consumed = true;
}
const mergedOptions = {
...DEFAULT_MODAL_PROPS,

6
packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
View File

@@ -27,8 +27,10 @@ export type CustomRenderType = (() => Component | string) | string;
export type ValueType = boolean | number | string;
export interface VbenButtonGroupProps
extends Pick<VbenButtonProps, 'disabled'> {
export interface VbenButtonGroupProps extends Pick<
VbenButtonProps,
'disabled'
> {
/** 单选模式下允许清除选中 */
allowClear?: boolean;
/** 值改变前的回调 */

1
packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
View File

@@ -73,6 +73,7 @@ function handleClick(menu: IContextMenuItem) {
>
<template v-for="menu in menusView" :key="menu.key">
<ContextMenuItem
v-if="!menu.hidden"
:class="itemClass"
:disabled="menu.disabled"
:inset="menu.inset || !menu.icon"

4
packages/@core/ui-kit/shadcn-ui/src/components/context-menu/interface.ts
View File

@@ -10,6 +10,10 @@ interface IContextMenuItem {
* @param data
*/
handler?: (data: any) => void;
/**
* @zh_CN 是否隐藏
*/
hidden?: boolean;
/**
* @zh_CN 图标
*/

2
packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
View File

@@ -27,7 +27,7 @@ function handleItemClick(value: string) {
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuGroup>
<template v-for="menu in menus" :key="menu.key">
<template v-for="menu in menus" :key="menu.value">
<DropdownMenuItem
:class="
menu.value === modelValue

6
packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
View File

@@ -32,19 +32,19 @@ const props = withDefaults(defineProps<Props>(), {
// const startTime = ref(0);
const showSpinner = ref(false);
const renderSpinner = ref(false);
const timer = ref<ReturnType<typeof setTimeout>>();
let timer: ReturnType<typeof setTimeout> | undefined;
watch(
() => props.spinning,
(show) => {
if (!show) {
showSpinner.value = false;
clearTimeout(timer.value);
timer && clearTimeout(timer);
return;
}
// startTime.value = performance.now();
timer.value = setTimeout(() => {
timer = setTimeout(() => {
// const loadingTime = performance.now() - startTime.value;
showSpinner.value = true;

8
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
View File

@@ -3,7 +3,7 @@ import type { TabDefinition } from '@vben-core/typings';
import type { TabConfig, TabsProps } from '../../types';
import { computed, ref } from 'vue';
import { computed } from 'vue';
import { Pin, X } from '@vben-core/icons';
import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
@@ -28,8 +28,8 @@ const emit = defineEmits<{
}>();
const active = defineModel<string>('active');
const contentRef = ref();
const tabRef = ref();
// const contentRef = ref();
// const tabRef = ref();
const style = computed(() => {
const { gap } = props;
@@ -73,7 +73,6 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
<template>
<div
ref="contentRef"
:class="contentClass"
:style="style"
class="tabs-chrome !flex h-full w-max overflow-y-hidden pr-6"
@@ -82,7 +81,6 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
<div
v-for="(tab, i) in tabsView"
:key="tab.key"
ref="tabRef"
:class="[
{
'is-active': tab.key === active,

4
packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
View File

@@ -29,7 +29,7 @@ const forward = useForwardPropsEmits(props, emit);
const {
handleScrollAt,
handleWheel,
scrollbarRef,
scrollbarRef: _scrollbarRef,
scrollDirection,
scrollIsAtLeft,
scrollIsAtRight,
@@ -69,7 +69,7 @@ useTabsDrag(props, emit);
class="size-full flex-1 overflow-hidden"
>
<VbenScrollbar
ref="scrollbarRef"
ref="_scrollbarRef"
:shadow-bottom="false"
:shadow-top="false"
class="h-full"

105
packages/constants/src/biz-iot-enum.ts
View File

@@ -26,18 +26,105 @@ export const ProductStatusEnum = {
PUBLISHED: 1, // 已发布
} as const;
/**
* 产品定位类型枚举
*/
export const LocationTypeEnum = {
IP: 1, // IP 定位
MANUAL: 3, // 手动定位
MODULE: 2, // 设备定位
} as const;
/**
* 数据格式（编解码器类型）枚举
*/
export const CodecTypeEnum = {
ALINK: 'Alink', // 阿里云 Alink 协议
} as const;
/**
* IoT 设备消息的方法枚举
*/
export const IotDeviceMessageMethodEnum = {
// ========== 设备状态 ==========
STATE_UPDATE: {
method: 'thing.state.update',
name: '设备状态更新',
upstream: true,
},
// ========== 拓扑管理 ==========
TOPO_ADD: {
method: 'thing.topo.add',
name: '添加拓扑关系',
upstream: true,
},
TOPO_DELETE: {
method: 'thing.topo.delete',
name: '删除拓扑关系',
upstream: true,
},
TOPO_GET: {
method: 'thing.topo.get',
name: '获取拓扑关系',
upstream: true,
},
TOPO_CHANGE: {
method: 'thing.topo.change',
name: '拓扑关系变更通知',
upstream: false,
},
// ========== 设备注册 ==========
DEVICE_REGISTER: {
method: 'thing.auth.register',
name: '设备动态注册',
upstream: true,
},
SUB_DEVICE_REGISTER: {
method: 'thing.auth.register.sub',
name: '子设备动态注册',
upstream: true,
},
// ========== 设备属性 ==========
PROPERTY_POST: {
method: 'thing.property.post',
name: '属性上报',
upstream: true,
},
PROPERTY_SET: {
method: 'thing.property.set',
name: '属性设置',
upstream: false,
},
PROPERTY_PACK_POST: {
method: 'thing.event.property.pack.post',
name: '批量上报（属性 + 事件 + 子设备）',
upstream: true,
},
// ========== 设备事件 ==========
EVENT_POST: {
method: 'thing.event.post',
name: '事件上报',
upstream: true,
},
// ========== 服务调用 ==========
SERVICE_INVOKE: {
method: 'thing.service.invoke',
name: '服务调用',
upstream: false,
},
// ========== 设备配置 ==========
CONFIG_PUSH: {
method: 'thing.config.push',
name: '配置推送',
upstream: false,
},
// ========== OTA 固件 ==========
OTA_UPGRADE: {
method: 'thing.ota.upgrade',
name: 'OTA 固件信息推送',
upstream: false,
},
OTA_PROGRESS: {
method: 'thing.ota.progress',
name: 'OTA 升级进度上报',
upstream: true,
},
} as const;

3
packages/effects/common-ui/src/components/captcha/types.ts
View File

@@ -54,8 +54,7 @@ export interface PointSelectionCaptchaCardProps {
width?: number | string;
}
export interface PointSelectionCaptchaProps
extends PointSelectionCaptchaCardProps {
export interface PointSelectionCaptchaProps extends PointSelectionCaptchaCardProps {
/**
* 是否展示确定按钮
* @default false

979
packages/effects/common-ui/src/components/cropper/cropper.vue Normal file
View File

@@ -0,0 +1,979 @@
<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue';
// 定义组件参数
const props = defineProps<{
/** 裁剪比例 格式如 '1:1', '16:9', '3:4' 等（非必填） */
aspectRatio?: string;
/** 容器高度（默认400） */
height?: number;
/** 图片地址 */
img: string;
/** 容器宽度（默认500） */
width?: number;
}>();
const CROPPER_CONSTANTS = {
MIN_WIDTH: 60 as const,
MIN_HEIGHT: 60 as const,
DEFAULT_WIDTH: 500 as const,
DEFAULT_HEIGHT: 400 as const,
PADDING_RATIO: 0.1 as const,
MAX_PADDING: 50 as const,
} as const;
type Point = [number, number]; // [clientX, clientY]
type Dimension = [number, number, number, number]; // [top, right, bottom, left]
// 拖拽点类型
type DragAction =
| 'bottom'
| 'bottom-left'
| 'bottom-right'
| 'left'
| 'move'
| 'right'
| 'top'
| 'top-left'
| 'top-right';
// DOM 引用
const containerRef = ref<HTMLDivElement | null>(null);
const bgImageRef = ref<HTMLImageElement | null>(null);
// const maskRef = ref<HTMLDivElement | null>(null);
const maskViewRef = ref<HTMLDivElement | null>(null);
const cropperRef = ref<HTMLDivElement | null>(null);
// const cropperViewRef = ref<HTMLDivElement | null>(null);
// 响应式数据
const isCropperVisible = ref<boolean>(false);
const validAspectRatio = ref<null | number>(null); // 有效比例值（null表示无固定比例）
const containerWidth = ref<number>(
props.width ?? CROPPER_CONSTANTS.DEFAULT_WIDTH,
);
const containerHeight = ref<number>(
props.height ?? CROPPER_CONSTANTS.DEFAULT_HEIGHT,
);
// 裁剪区域尺寸（top, right, bottom, left）
const currentDimension = ref<Dimension>([50, 50, 50, 50]);
const initDimension = ref<Dimension>([50, 50, 50, 50]);
// 拖拽状态
const dragging = ref<boolean>(false);
const startPoint = ref<Point>([0, 0]);
const startDimension = ref<Dimension>([0, 0, 0, 0]);
const direction = ref<Dimension>([0, 0, 0, 0]);
const moving = ref<boolean>(false);
/**
* 计算图片的适配尺寸，保证完整显示且不超过最大宽高限制
*/
const calculateImageFitSize = () => {
if (!bgImageRef.value) return;
// 获取图片原始尺寸
const imgWidth = bgImageRef.value.naturalWidth;
const imgHeight = bgImageRef.value.naturalHeight;
if (imgWidth === 0 || imgHeight === 0) return;
// 计算缩放比例（使用传入的width/height，默认500/400）
const widthRatio =
(props.width ?? CROPPER_CONSTANTS.DEFAULT_WIDTH) / imgWidth;
const heightRatio =
(props.height ?? CROPPER_CONSTANTS.DEFAULT_HEIGHT) / imgHeight;
const scaleRatio = Math.min(widthRatio, heightRatio, 1); // 不放大图片，只缩小
// 计算适配后的容器尺寸
const fitWidth = Math.floor(imgWidth * scaleRatio);
const fitHeight = Math.floor(imgHeight * scaleRatio);
containerWidth.value = fitWidth;
containerHeight.value = fitHeight;
// 重置裁剪框初始尺寸（基于新的容器尺寸）
const padding = Math.min(
CROPPER_CONSTANTS.MAX_PADDING,
Math.floor(fitWidth * CROPPER_CONSTANTS.PADDING_RATIO),
Math.floor(fitHeight * CROPPER_CONSTANTS.PADDING_RATIO),
);
initDimension.value = [padding, padding, padding, padding];
currentDimension.value = [padding, padding, padding, padding];
};
/**
* 验证并解析比例字符串
* @returns {number|null} 比例值 (width/height)，解析失败返回null
*/
const parseAndValidateAspectRatio = (): null | number => {
// 如果未传入比例参数，直接返回null
if (!props.aspectRatio) {
return null;
}
// 验证比例格式
const ratioRegex = /^[1-9]\d*:[1-9]\d*$/;
if (!ratioRegex.test(props.aspectRatio)) {
console.warn('裁剪比例格式错误，应为 "数字:数字" 格式，如 "16:9"');
return null;
}
// 解析比例
const [width, height] = props.aspectRatio.split(':').map(Number);
// 验证解析结果有效性
if (Number.isNaN(width) || Number.isNaN(height) || !width || !height) {
console.warn('裁剪比例解析失败，宽高必须为正整数');
return null;
}
return width / height;
};
/**
* 设置裁剪区域尺寸
* @param {Dimension} dimension - [top, right, bottom, left]
*/
const setDimension = (dimension: Dimension) => {
currentDimension.value = [...dimension];
if (maskViewRef.value) {
maskViewRef.value.style.clipPath = `inset(${dimension[0]}px ${dimension[1]}px ${dimension[2]}px ${dimension[3]}px)`;
}
};
/**
* 调整裁剪区域至指定比例
*/
const adjustCropperToAspectRatio = () => {
if (!cropperRef.value) return;
// 验证并解析比例
validAspectRatio.value = parseAndValidateAspectRatio();
// 如果无有效比例，使用初始尺寸，不强制固定比例
if (validAspectRatio.value === null) {
setDimension(initDimension.value);
return;
}
// 有有效比例，按比例调整裁剪框
const ratio = validAspectRatio.value;
const containerWidthVal = containerWidth.value;
const containerHeightVal = containerHeight.value;
// 根据比例计算裁剪框尺寸
let newHeight: number, newWidth: number;
// 先按宽度优先计算
newWidth = containerWidthVal;
newHeight = newWidth / ratio;
// 如果高度超出容器，按高度优先计算
if (newHeight > containerHeightVal) {
newHeight = containerHeightVal;
newWidth = newHeight * ratio;
}
// 居中显示
const leftRight = (containerWidthVal - newWidth) / 2;
const topBottom = (containerHeightVal - newHeight) / 2;
const newDimension: Dimension = [topBottom, leftRight, topBottom, leftRight];
setDimension(newDimension);
};
/**
* 创建裁剪器
*/
const createCropper = () => {
// 计算图片适配尺寸
calculateImageFitSize();
isCropperVisible.value = true;
adjustCropperToAspectRatio();
};
/**
* 处理鼠标按下事件
* @param {MouseEvent} e - 鼠标事件
* @param {DragAction} action - 操作类型
*/
const handleMouseDown = (e: MouseEvent, action: DragAction) => {
dragging.value = true;
startPoint.value = [e.clientX, e.clientY];
startDimension.value = [...currentDimension.value];
direction.value = [0, 0, 0, 0];
moving.value = false;
// 处理移动
if (action === 'move') {
direction.value[0] = 1;
direction.value[2] = -1;
direction.value[3] = 1;
direction.value[1] = -1;
moving.value = true;
return;
}
// 处理拖拽方向
switch (action) {
case 'bottom': {
direction.value[2] = -1;
break;
}
case 'bottom-left': {
direction.value[2] = -1;
direction.value[3] = 1;
break;
}
case 'bottom-right': {
direction.value[2] = -1;
direction.value[1] = -1;
break;
}
case 'left': {
direction.value[3] = 1;
break;
}
case 'right': {
direction.value[1] = -1;
break;
}
case 'top': {
direction.value[0] = 1;
break;
}
case 'top-left': {
direction.value[0] = 1;
direction.value[3] = 1;
break;
}
case 'top-right': {
direction.value[0] = 1;
direction.value[1] = -1;
break;
}
}
};
/**
* 处理鼠标移动事件
* @param {MouseEvent} e - 鼠标事件
*/
const handleMouseMove = (e: MouseEvent) => {
if (!dragging.value || !cropperRef.value) return;
const { clientX, clientY } = e;
const diffX = clientX - startPoint.value[0];
const diffY = clientY - startPoint.value[1];
// 处理移动裁剪框
if (moving.value) {
handleMoveCropBox(diffX, diffY);
return;
}
// 无有效比例
if (validAspectRatio.value === null) {
handleFreeAspectResize(diffX, diffY);
} else {
handleFixedAspectResize(diffX, diffY);
}
};
const handleMoveCropBox = (diffX: number, diffY: number) => {
const newDimension = [...startDimension.value] as Dimension;
// 计算临时偏移后的位置
const tempTop = startDimension.value[0] + diffY;
const tempLeft = startDimension.value[3] + diffX;
// 计算裁剪框的固定尺寸
const cropWidth =
containerWidth.value - startDimension.value[3] - startDimension.value[1];
const cropHeight =
containerHeight.value - startDimension.value[0] - startDimension.value[2];
// 边界限制：确保裁剪框完全在容器内，且尺寸不变
// 顶部边界：top >= 0，且 bottom = 容器高度 - top - 裁剪高度 >= 0
newDimension[0] = Math.max(
0,
Math.min(tempTop, containerHeight.value - cropHeight),
);
// 底部边界：bottom = 容器高度 - top - 裁剪高度（由top推导，无需额外计算）
newDimension[2] = containerHeight.value - newDimension[0] - cropHeight;
// 左侧边界：left >= 0，且 right = 容器宽度 - left - 裁剪宽度 >= 0
newDimension[3] = Math.max(
0,
Math.min(tempLeft, containerWidth.value - cropWidth),
);
// 右侧边界：right = 容器宽度 - left - 裁剪宽度（由left推导，无需额外计算）
newDimension[1] = containerWidth.value - newDimension[3] - cropWidth;
// 强制保证尺寸不变（兜底）
const finalWidth = containerWidth.value - newDimension[3] - newDimension[1];
const finalHeight = containerHeight.value - newDimension[0] - newDimension[2];
if (finalWidth !== cropWidth) {
newDimension[1] = containerWidth.value - newDimension[3] - cropWidth;
}
if (finalHeight !== cropHeight) {
newDimension[2] = containerHeight.value - newDimension[0] - cropHeight;
}
// 更新裁剪区域（仅位置变化，尺寸/比例完全不变）
setDimension(newDimension);
};
const handleFreeAspectResize = (diffX: number, diffY: number) => {
const cropperWidth = containerWidth.value;
const cropperHeight = containerHeight.value;
const currentDimensionNew: Dimension = [0, 0, 0, 0];
// 计算新的尺寸，确保不小于最小值
currentDimensionNew[0] = Math.min(
Math.max(startDimension.value[0] + direction.value[0] * diffY, 0),
cropperHeight - CROPPER_CONSTANTS.MIN_HEIGHT,
);
currentDimensionNew[1] = Math.min(
Math.max(startDimension.value[1] + direction.value[1] * diffX, 0),
cropperWidth - CROPPER_CONSTANTS.MIN_WIDTH,
);
currentDimensionNew[2] = Math.min(
Math.max(startDimension.value[2] + direction.value[2] * diffY, 0),
cropperHeight - CROPPER_CONSTANTS.MIN_HEIGHT,
);
currentDimensionNew[3] = Math.min(
Math.max(startDimension.value[3] + direction.value[3] * diffX, 0),
cropperWidth - CROPPER_CONSTANTS.MIN_WIDTH,
);
// 确保裁剪区域宽度和高度不小于最小值
const newWidth =
cropperWidth - currentDimensionNew[3] - currentDimensionNew[1];
const newHeight =
cropperHeight - currentDimensionNew[0] - currentDimensionNew[2];
if (newWidth < CROPPER_CONSTANTS.MIN_WIDTH) {
if (direction.value[3] === 1) {
currentDimensionNew[3] =
cropperWidth - currentDimensionNew[1] - CROPPER_CONSTANTS.MIN_WIDTH;
} else {
currentDimensionNew[1] =
cropperWidth - currentDimensionNew[3] - CROPPER_CONSTANTS.MIN_WIDTH;
}
}
if (newHeight < CROPPER_CONSTANTS.MIN_HEIGHT) {
if (direction.value[0] === 1) {
currentDimensionNew[0] =
cropperHeight - currentDimensionNew[2] - CROPPER_CONSTANTS.MIN_HEIGHT;
} else {
currentDimensionNew[2] =
cropperHeight - currentDimensionNew[0] - CROPPER_CONSTANTS.MIN_HEIGHT;
}
}
setDimension(currentDimensionNew);
};
const handleFixedAspectResize = (diffX: number, diffY: number) => {
if (validAspectRatio.value === null) return;
const cropperWidth = containerWidth.value;
const cropperHeight = containerHeight.value;
// 有有效比例 - 固定比例裁剪
const ratio = validAspectRatio.value;
const currentWidth =
cropperWidth - startDimension.value[3] - startDimension.value[1];
const currentHeight =
cropperHeight - startDimension.value[0] - startDimension.value[2];
let newHeight: number, newWidth: number;
let widthChange = 0;
let heightChange = 0;
// 计算宽度/高度变化量
if (direction.value[3] === 1) widthChange = -diffX;
else if (direction.value[1] === -1) widthChange = diffX;
if (direction.value[0] === 1) heightChange = -diffY;
else if (direction.value[2] === -1) heightChange = diffY;
const isCornerDrag =
(direction.value[3] === 1 || direction.value[1] === -1) &&
(direction.value[0] === 1 || direction.value[2] === -1);
// 计算新尺寸
if (isCornerDrag) {
if (Math.abs(widthChange) > Math.abs(heightChange)) {
newWidth = Math.max(
CROPPER_CONSTANTS.MIN_WIDTH,
currentWidth + widthChange,
);
newHeight = newWidth / ratio;
} else {
newHeight = Math.max(
CROPPER_CONSTANTS.MIN_HEIGHT,
currentHeight + heightChange,
);
newWidth = newHeight * ratio;
}
} else {
if (direction.value[3] === 1 || direction.value[1] === -1) {
newWidth = Math.max(
CROPPER_CONSTANTS.MIN_WIDTH,
currentWidth + widthChange,
);
newHeight = newWidth / ratio;
} else {
newHeight = Math.max(
CROPPER_CONSTANTS.MIN_HEIGHT,
currentHeight + heightChange,
);
newWidth = newHeight * ratio;
}
}
// 限制最大尺寸
const maxWidth = cropperWidth;
const maxHeight = cropperHeight;
if (newWidth > maxWidth) {
newWidth = maxWidth;
newHeight = newWidth / ratio;
}
if (newHeight > maxHeight) {
newHeight = maxHeight;
newWidth = newHeight * ratio;
}
// 计算新的位置
let newLeft = startDimension.value[3];
let newTop = startDimension.value[0];
let newRight = startDimension.value[1];
let newBottom = startDimension.value[2];
// 根据拖拽方向调整位置
if (direction.value[3] === 1) {
newLeft = cropperWidth - newWidth - startDimension.value[1];
} else if (direction.value[1] === -1) {
newRight = cropperWidth - newWidth - startDimension.value[3];
} else if (!isCornerDrag) {
// 居中调整
const currentHorizontalCenter = startDimension.value[3] + currentWidth / 2;
newLeft = Math.max(
0,
Math.min(cropperWidth - newWidth, currentHorizontalCenter - newWidth / 2),
);
newRight = cropperWidth - newWidth - newLeft;
}
if (direction.value[0] === 1) {
newTop = cropperHeight - newHeight - startDimension.value[2];
} else if (direction.value[2] === -1) {
newBottom = cropperHeight - newHeight - startDimension.value[0];
} else if (!isCornerDrag) {
// 居中调整
const currentVerticalCenter = startDimension.value[0] + currentHeight / 2;
newTop = Math.max(
0,
Math.min(
cropperHeight - newHeight,
currentVerticalCenter - newHeight / 2,
),
);
newBottom = cropperHeight - newHeight - newTop;
}
// 边界检查
newLeft = Math.max(0, newLeft);
newTop = Math.max(0, newTop);
newRight = Math.max(0, newRight);
newBottom = Math.max(0, newBottom);
const newDimension: Dimension = [newTop, newRight, newBottom, newLeft];
setDimension(newDimension);
};
/**
* 处理鼠标抬起事件
*/
const handleMouseUp = () => {
dragging.value = false;
moving.value = false;
direction.value = [0, 0, 0, 0];
};
/**
* 处理图片加载完成
*/
const handleImageLoad = () => {
createCropper();
};
/**
* 裁剪图片
* @param {'image/jpeg' | 'image/png'} format - 输出图片格式
* @param {number} quality - 压缩质量（0-1）
* @param {'blob' | 'base64'} outputType - 输出类型
* @param {number} targetWidth - 目标宽度（可选，不传则为原始裁剪宽度）
* @param {number} targetHeight - 目标高度（可选，不传则为原始裁剪高度）
*/
const getCropImage = async (
format: 'image/jpeg' | 'image/png' = 'image/jpeg',
quality: number = 0.92,
outputType: 'base64' | 'blob' = 'blob',
targetWidth?: number,
targetHeight?: number,
): Promise<Blob | string | undefined> => {
if (!props.img || !bgImageRef.value || !containerRef.value) return;
// 质量参数边界修正：强制限制在 0-1 区间，防止传入非法值报错
const validQuality = Math.max(0, Math.min(1, quality));
// 创建临时图片对象获取原始尺寸
const tempImg = new Image();
// 跨域图片处理：仅对非同源的网络图片设置跨域匿名
if (props.img.startsWith('http://') || props.img.startsWith('https://')) {
try {
const url = new URL(props.img);
if (url.origin !== location.origin) {
tempImg.crossOrigin = 'anonymous';
}
} catch {
// Invalid URL，跳过跨域配置，不中断执行
}
}
// 等待临时图片加载完成
await new Promise<void>((resolve, reject) => {
const timeout = setTimeout(() => {
tempImg.removeEventListener('load', handleLoad);
tempImg.removeEventListener('error', handleError);
reject(new Error('图片加载超时，超时时间10秒'));
}, 10_000);
const handleLoad = () => {
clearTimeout(timeout);
tempImg.removeEventListener('load', handleLoad);
tempImg.removeEventListener('error', handleError);
resolve();
};
const handleError = (err: ErrorEvent) => {
clearTimeout(timeout);
tempImg.removeEventListener('load', handleLoad);
tempImg.removeEventListener('error', handleError);
reject(new Error(`图片加载失败: ${err.message}`));
};
tempImg.addEventListener('load', handleLoad);
tempImg.addEventListener('error', handleError);
tempImg.src = props.img;
});
const containerRect = containerRef.value.getBoundingClientRect();
const imgRect = bgImageRef.value.getBoundingClientRect();
// 1. 计算图片在容器内的渲染参数
const containerWidth = containerRect.width;
const containerHeight = containerRect.height;
const renderedImgWidth = imgRect.width;
const renderedImgHeight = imgRect.height;
const imgOffsetX = (containerWidth - renderedImgWidth) / 2;
const imgOffsetY = (containerHeight - renderedImgHeight) / 2;
// 2. 计算裁剪框在容器内的实际坐标
const [cropTop, cropRight, cropBottom, cropLeft] = currentDimension.value;
const cropBoxWidth = containerWidth - cropLeft - cropRight;
const cropBoxHeight = containerHeight - cropTop - cropBottom;
// 3. 将裁剪框坐标转换为图片上的坐标（考虑图片偏移）
const cropOnImgX = cropLeft - imgOffsetX;
const cropOnImgY = cropTop - imgOffsetY;
// 4. 计算渲染图片到原始图片的缩放比例（保留原始像素）
const scaleX = tempImg.width / renderedImgWidth;
const scaleY = tempImg.height / renderedImgHeight;
// 5. 映射到原始图片的裁剪区域（精确到原始像素，防止越界）
const originalCropX = Math.max(0, Math.floor(cropOnImgX * scaleX));
const originalCropY = Math.max(0, Math.floor(cropOnImgY * scaleY));
const originalCropWidth = Math.min(
Math.floor(cropBoxWidth * scaleX),
tempImg.width - originalCropX,
);
const originalCropHeight = Math.min(
Math.floor(cropBoxHeight * scaleY),
tempImg.height - originalCropY,
);
// 边界校验：裁剪尺寸非法则返回
if (originalCropWidth <= 0 || originalCropHeight <= 0) return;
// 6. 处理高清屏适配（解决Retina屏模糊）
const dpr = window.devicePixelRatio || 1;
// 最终画布尺寸（优先使用传入的目标尺寸，无则用原始裁剪尺寸）
const finalWidth = targetWidth ? Math.max(1, targetWidth) : originalCropWidth;
const finalHeight = targetHeight
? Math.max(1, targetHeight)
: originalCropHeight;
// 创建画布并获取绘制上下文
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
if (!ctx) return;
// 画布物理尺寸（乘以设备像素比，保证高清无模糊）
canvas.width = finalWidth * dpr;
canvas.height = finalHeight * dpr;
// 画布显示尺寸（视觉尺寸，和最终展示一致）
canvas.style.width = `${finalWidth}px`;
canvas.style.height = `${finalHeight}px`;
// 缩放画布上下文，适配高清屏DPR
ctx.scale(dpr, dpr);
// 7. 绘制裁剪后的图片（使用原始像素绘制，保证清晰度）
ctx.drawImage(
tempImg,
originalCropX, // 原始图片裁剪起始X（精确像素）
originalCropY, // 原始图片裁剪起始Y（精确像素）
originalCropWidth, // 原始图片裁剪宽度（精确像素）
originalCropHeight, // 原始图片裁剪高度（精确像素）
0, // 画布绘制起始X
0, // 画布绘制起始Y
finalWidth, // 画布绘制宽度（目标尺寸）
finalHeight, // 画布绘制高度（目标尺寸）
);
try {
return outputType === 'base64'
? canvas.toDataURL(format, validQuality)
: new Promise<Blob>((resolve) => {
canvas.toBlob(
(blob) => {
// 兜底：如果blob生成失败，返回空Blob（防止null）
resolve(blob || new Blob([], { type: format }));
},
format,
validQuality,
);
});
} catch (error) {
console.error('图片导出失败:', error);
}
};
// 监听比例变化，重新调整裁剪框
watch(() => props.aspectRatio, adjustCropperToAspectRatio);
// 监听width/height变化，重新计算尺寸
watch([() => props.width, () => props.height], () => {
calculateImageFitSize();
adjustCropperToAspectRatio();
});
// 组件挂载时注册全局事件
onMounted(() => {
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
// 如果图片已经加载完成，手动触发创建裁剪器
if (
bgImageRef.value &&
bgImageRef.value.complete &&
bgImageRef.value.naturalWidth > 0
) {
createCropper();
}
});
// 组件卸载时清理
onUnmounted(() => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
});
defineExpose({ getCropImage });
</script>
<template>
<div
:style="{
width: `${width || CROPPER_CONSTANTS.DEFAULT_WIDTH}px`,
height: `${height || CROPPER_CONSTANTS.DEFAULT_HEIGHT}px`,
}"
class="cropper-action-wrapper"
>
<div
ref="containerRef"
class="cropper-container"
:style="{
width: `${containerWidth}px`,
height: `${containerHeight}px`,
}"
>
<!-- 原图展示 - 自适应尺寸 -->
<img
ref="bgImageRef"
class="cropper-image"
:src="img"
@load="handleImageLoad"
:style="{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain',
}"
alt="裁剪原图"
/>
<!-- 遮罩层 -->
<div
class="cropper-mask"
:style="{
display: isCropperVisible ? 'block' : 'none',
width: '100%',
height: '100%',
}"
>
<div
ref="maskViewRef"
class="cropper-mask-view"
:style="{
backgroundImage: `url(${img})`,
backgroundSize: 'contain',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
clipPath: `inset(${currentDimension[0]}px ${currentDimension[1]}px ${currentDimension[2]}px ${currentDimension[3]}px)`,
width: '100%',
height: '100%',
}"
></div>
</div>
<!-- 裁剪框 -->
<div
ref="cropperRef"
class="cropper-box"
:style="{
display: isCropperVisible ? 'block' : 'none',
width: '100%',
height: '100%',
}"
>
<div
class="cropper-view"
:style="{
inset: `${currentDimension[0]}px ${currentDimension[1]}px ${currentDimension[2]}px ${currentDimension[3]}px`,
}"
>
<!-- 裁剪框辅助线-->
<span class="cropper-dashed-h"></span>
<span class="cropper-dashed-v"></span>
<!-- 裁剪框拖拽区域 -->
<span
class="cropper-move-area"
@mousedown="handleMouseDown($event, 'move')"
></span>
<!-- 边框线 -->
<span class="cropper-line-e"></span>
<span class="cropper-line-n"></span>
<span class="cropper-line-w"></span>
<span class="cropper-line-s"></span>
<!-- 边角拖拽点 -->
<span
class="cropper-point cropper-point-ne"
@mousedown="handleMouseDown($event, 'top-right')"
>
<span class="cropper-point-inner"></span>
</span>
<span
class="cropper-point cropper-point-nw"
@mousedown="handleMouseDown($event, 'top-left')"
>
<span class="cropper-point-inner"></span>
</span>
<span
class="cropper-point cropper-point-sw"
@mousedown="handleMouseDown($event, 'bottom-left')"
>
<span class="cropper-point-inner"></span>
</span>
<span
class="cropper-point cropper-point-se"
@mousedown="handleMouseDown($event, 'bottom-right')"
>
<span class="cropper-point-inner"></span>
</span>
<!-- 边中点拖拽点 -->
<span
class="cropper-point cropper-point-e"
@mousedown="handleMouseDown($event, 'right')"
>
<span class="cropper-point-inner"></span>
</span>
<span
class="cropper-point cropper-point-n"
@mousedown="handleMouseDown($event, 'top')"
>
<span class="cropper-point-inner"></span>
</span>
<span
class="cropper-point cropper-point-w"
@mousedown="handleMouseDown($event, 'left')"
>
<span class="cropper-point-inner"></span>
</span>
<span
class="cropper-point cropper-point-s"
@mousedown="handleMouseDown($event, 'bottom')"
>
<span class="cropper-point-inner"></span>
</span>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.cropper-action-wrapper {
@apply box-border flex items-center justify-center;
background-color: transparent;
/* 马赛克背景 */
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-position:
0 0,
0 10px,
10px -10px,
-10px 0;
background-size: 20px 20px;
}
.cropper-container {
@apply relative;
}
.cropper-image {
@apply block;
}
/* 遮罩层 */
.cropper-mask {
@apply absolute left-0 top-0 bg-black/50;
}
.cropper-mask-view {
@apply absolute left-0 top-0;
}
/* 裁剪框 */
.cropper-box {
@apply absolute left-0 top-0 z-10;
}
.cropper-view {
@apply absolute bottom-0 left-0 right-0 top-0 select-none outline outline-1 outline-blue-500;
}
/* 裁剪框辅助线 */
.cropper-dashed-h {
@apply absolute left-0 top-1/3 block h-1/3 w-full border-b border-t border-dashed border-gray-200/50;
}
.cropper-dashed-v {
@apply absolute left-1/3 top-0 block h-full w-1/3 border-l border-r border-dashed border-gray-200/50;
}
/* 裁剪框拖拽区域 */
.cropper-move-area {
@apply absolute left-0 top-0 block h-full w-full cursor-move bg-white/10;
}
/* 边框拖拽线 */
.cropper-line-e,
.cropper-line-n,
.cropper-line-w,
.cropper-line-s {
@apply absolute block bg-blue-500/10;
}
.cropper-line-e {
@apply right-[-3px] top-0 h-full w-1;
}
.cropper-line-n {
@apply left-0 top-[-3px] h-1 w-full;
}
.cropper-line-w {
@apply left-[-3px] top-0 h-full w-1;
}
.cropper-line-s {
@apply bottom-[-3px] left-0 h-1 w-full;
}
/* 拖拽点 */
.cropper-point {
@apply absolute flex h-2 w-2 items-center justify-center bg-blue-500;
}
.cropper-point-inner {
@apply block h-1.5 w-1.5 bg-white;
}
/* 边角拖拽点位置和光标 */
.cropper-point-ne {
@apply right-[-5px] top-[-5px] cursor-ne-resize;
}
.cropper-point-nw {
@apply left-[-5px] top-[-5px] cursor-nw-resize;
}
.cropper-point-sw {
@apply bottom-[-5px] left-[-5px] cursor-sw-resize;
}
.cropper-point-se {
@apply bottom-[-5px] right-[-5px] cursor-se-resize;
}
/* 边中点拖拽点位置和光标 */
.cropper-point-e {
@apply right-[-5px] top-1/2 -mt-1 cursor-e-resize;
}
.cropper-point-n {
@apply left-1/2 top-[-5px] -ml-1 cursor-n-resize;
}
.cropper-point-w {
@apply left-[-5px] top-1/2 -mt-1 cursor-w-resize;
}
.cropper-point-s {
@apply bottom-[-5px] left-1/2 -ml-1 cursor-s-resize;
}
</style>

1
packages/effects/common-ui/src/components/cropper/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as VCropper } from './cropper.vue';

2
packages/effects/common-ui/src/components/index.ts
View File

@@ -6,6 +6,7 @@ export * from './card/summary-card';
export * from './col-page';
export * from './content-wrap';
export * from './count-to';
export * from './cropper';
export * from './doc-alert';
export * from './ellipsis-text';
export * from './icon-picker';
@@ -26,6 +27,7 @@ export {
VbenButtonGroup,
VbenCheckbox,
VbenCheckButtonGroup,
VbenContextMenu,
VbenCountToAnimator,
VbenFullScreen,
VbenInputPassword,

17
packages/effects/layouts/src/basic/layout.vue
View File

@@ -14,7 +14,7 @@ import {
updatePreferences,
usePreferences,
} from '@vben/preferences';
import { useAccessStore } from '@vben/stores';
import { useAccessStore, useTabbarStore, useTimezoneStore } from '@vben/stores';
import { cloneDeep, mapTree } from '@vben/utils';
import { VbenAdminLayout } from '@vben-core/layout-ui';
@@ -52,6 +52,7 @@ const {
theme,
} = usePreferences();
const accessStore = useAccessStore();
const timezoneStore = useTimezoneStore();
const { refresh } = useRefresh();
const sidebarTheme = computed(() => {
@@ -187,9 +188,19 @@ watch(
},
);
const tabbarStore = useTabbarStore();
function refreshAll() {
tabbarStore.cachedTabs.clear();
refresh();
}
// 语言更新后，刷新页面
// i18n.global.locale会在preference.app.locale变更之后才会更新，因此watchpreference.app.locale是不合适的，刷新页面时可能语言配置尚未完全加载完成
watch(i18n.global.locale, refresh, { flush: 'post' });
watch(i18n.global.locale, refreshAll, { flush: 'post' });
// 时区更新后，刷新页面
watch(() => timezoneStore.timezone, refreshAll, { flush: 'post' });
const slots: SetupContext['slots'] = useSlots();
const headerSlots = computed(() => {
@@ -351,8 +362,6 @@ const headerSlots = computed(() => {
<VbenLogo
v-if="preferences.logo.enable"
:fit="preferences.logo.fit"
:src="preferences.logo.source"
:src-dark="preferences.logo.sourceDark"
:text="preferences.app.name"
:theme="theme"
>

6
packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
View File

@@ -19,7 +19,7 @@ import { computed, ref } from 'vue';
import { Copy, Pin, PinOff, RotateCw } from '@vben/icons';
import { $t, loadLocaleMessages } from '@vben/locales';
import {
clearPreferencesCache,
clearCache,
preferences,
resetPreferences,
usePreferences,
@@ -228,7 +228,7 @@ async function handleCopy() {
async function handleClearCache() {
resetPreferences();
clearPreferencesCache();
clearCache();
emit('clearPreferencesAndLogout');
}
@@ -488,6 +488,6 @@ async function handleReset() {
:deep(.sticky-tabs-header [role='tablist']) {
position: sticky;
top: -12px;
z-index: 10;
z-index: 9999;
}
</style>

4
packages/effects/plugins/src/code-editor/codemirror.css
View File

@@ -407,7 +407,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
font-variant-ligatures: contextual;
line-height: inherit;
color: inherit;
word-wrap: normal;
overflow-wrap: normal;
white-space: pre;
background: transparent;
border-width: 0;
@@ -419,7 +419,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
.CodeMirror-wrap pre {
word-break: normal;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: pre-wrap;
}

34
packages/effects/plugins/src/echarts/use-echarts.ts
View File

@@ -106,7 +106,8 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
return;
}
useTimeoutFn(() => {
if (!chartInstance) {
if (!chartInstance || chartInstance?.getDom() !== el) {
chartInstance?.dispose();
const instance = initCharts();
if (!instance) return;
}
@@ -118,6 +119,36 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
});
};
const updateDate = (
option: EChartsOption,
notMerge = false, // false = 合并（保留动画），true = 完全替换
lazyUpdate = false, // true 时不立即重绘，适合短时间内多次调用
): Promise<echarts.ECharts | null> => {
return new Promise((resolve) => {
nextTick(() => {
if (!chartInstance) {
// 还没初始化 → 当作首次渲染
renderEcharts(option).then(resolve);
return;
}
// 合并你原有的全局配置（比如 backgroundColor）
const finalOption = {
...option,
...getOptions.value,
};
chartInstance.setOption(finalOption, {
notMerge,
lazyUpdate,
// silent: true, // 如果追求极致性能可开启（关闭所有事件）
});
resolve(chartInstance);
});
});
};
function resize() {
const el = getChartEl();
if (isElHidden(el)) {
@@ -153,6 +184,7 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
return {
renderEcharts,
resize,
updateDate,
getChartInstance: () => chartInstance,
};
}

1
packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
View File

@@ -315,6 +315,7 @@ async function init() {
'[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props',
);
}
// @ts-ignore
props.api?.setState?.({ gridOptions: defaultGridOptions });
// form 由 vben-form 代替，所以需要保证query相关事件可以拿到参数
extendProxyOptions(props.api, defaultGridOptions, () =>

14
packages/locales/src/langs/en-US/ui.json
View File

@@ -8,7 +8,9 @@
"alreadyExists": "{0} `{1}` already exists",
"startWith": "{0} must start with `{1}`",
"invalidURL": "Please input a valid URL",
"mobile": "Please input a valid {0}"
"mobile": "Please input a valid {0}",
"sizeLimit": "The file size cannot exceed {0}MB",
"previewWarning": "Unable to open the file, there is no available URL or preview address"
},
"actionTitle": {
"copy": "Copy {0}",
@@ -42,7 +44,8 @@
},
"placeholder": {
"input": "Please enter",
"select": "Please select"
"select": "Please select",
"upload": "Click to upload"
},
"captcha": {
"title": "Please complete the security verification",
@@ -69,6 +72,13 @@
"copy": "Copy",
"copied": "Copied"
},
"crop": {
"title": "Image Cropping",
"titleTip": "Cropping Ratio {0}",
"confirm": "Crop",
"cancel": "Cancel cropping",
"errorTip": "Cropping error"
},
"fallback": {
"pageNotFound": "Oops! Page Not Found",
"pageNotFoundDesc": "Sorry, we couldn't find the page you were looking for.",

14
packages/locales/src/langs/zh-CN/ui.json
View File

@@ -8,7 +8,9 @@
"alreadyExists": "{0} `{1}` 已存在",
"startWith": "{0}必须以 {1} 开头",
"invalidURL": "请输入有效的链接",
"mobile": "请输入正确的{0}"
"mobile": "请输入正确的{0}",
"sizeLimit": "文件大小不能超过 {0}MB",
"previewWarning": "无法打开文件，没有可用的URL或预览地址"
},
"actionTitle": {
"copy": "复制{0}",
@@ -42,7 +44,8 @@
},
"placeholder": {
"input": "请输入",
"select": "请选择"
"select": "请选择",
"upload": "点击上传"
},
"captcha": {
"title": "请完成安全验证",
@@ -69,6 +72,13 @@
"copy": "复制",
"copied": "已复制"
},
"crop": {
"title": "图片裁剪",
"titleTip": "裁剪比例 {0}",
"confirm": "裁剪",
"cancel": "取消裁剪",
"errorTip": "裁剪错误"
},
"fallback": {
"pageNotFound": "哎呀！未找到页面",
"pageNotFoundDesc": "抱歉，我们无法找到您要找的页面。",

59
playground/src/views/examples/context-menu/index.vue Normal file
View File

@@ -0,0 +1,59 @@
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import { VbenContextMenu } from '@vben-core/shadcn-ui';
import { Button, Card, message } from 'ant-design-vue';
const needHidden = (role: string) => {
return role === 'user';
};
const contextMenus = () => {
return [
{
text: '刷新',
key: 'refresh',
handler: (data: any) => {
message.success('刷新成功', data);
},
hidden: needHidden('admin'),
},
{
text: '关闭当前',
key: 'close-current',
handler: (data: any) => {
message.success('关闭当前', data);
},
hidden: needHidden('user'),
},
{
text: '关闭其他',
key: 'close-other',
handler: (data: any) => {
message.success('关闭其他', data);
},
},
{
text: '关闭所有',
key: 'close-all',
handler: (data: any) => {
message.success('关闭所有', data);
},
},
];
};
</script>
<template>
<Page title="Context Menu 上下文菜单">
<Card title="基本使用">
<div>一共四个菜单（刷新、关闭当前、关闭其他、关闭所有）</div>
<br />
<br />
<VbenContextMenu :menus="contextMenus" :modal="true" item-class="pr-6">
<Button> 右键点击我打开上下文菜单(有隐藏项) </Button>
</VbenContextMenu>
</Card>
</Page>
</template>

Some files were not shown because too many files have changed in this diff Show More