feat: dialog&button使用自定义组件
parent
6ac136d878
commit
18dce5efe8
@ -0,0 +1,10 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-07-08 09:43:27
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-07-08 09:47:01
|
||||
* @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Button\index.ts
|
||||
* @Description:
|
||||
*/
|
||||
import button from './src/button.tsx'
|
||||
export const DSButton = button
|
||||
@ -0,0 +1,124 @@
|
||||
@import url('@/styles/main.scss');
|
||||
/* Button/style.css */
|
||||
.ds-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
border: 1px solid var(--ds-button-border-color);
|
||||
border-radius: var(--ds-button-border-radius);
|
||||
height: 32px;
|
||||
padding: 0 24px;
|
||||
letter-spacing: 2px;
|
||||
// font-size: 14px;
|
||||
// font-weight: 500;
|
||||
background-color: transparent;
|
||||
color: var(--ds-color-info);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.ds-button:hover {
|
||||
color: var(--ds-color-primary);
|
||||
border-color: var(--el-button-hover-border-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/*按钮类型 */
|
||||
.ds-button--primary {
|
||||
color: var(--ds-color-info);
|
||||
background-color: var(--ds-color-primary);
|
||||
border-color: var(--ds-color-info);
|
||||
border: 1px solid var(--ds-color-primary);
|
||||
}
|
||||
.ds-button--primary:hover {
|
||||
color: var(--ds-color-info);
|
||||
background: #66b1ff;
|
||||
border-color: #66b1ff;
|
||||
}
|
||||
|
||||
.ds-button--info {
|
||||
color: var(--ds-clort-text-1);
|
||||
border-color: var(--ds-button-info-border-color);
|
||||
background-color: var(--ds-color-info);
|
||||
}
|
||||
|
||||
.ds-button--info:hover {
|
||||
color: var(--ds-color-info);
|
||||
background: #66b1ff;
|
||||
border-color: #66b1ff;
|
||||
}
|
||||
|
||||
.ds-button--success {
|
||||
color: #fff;
|
||||
background-color: #67c23a;
|
||||
border-color: #67c23a;
|
||||
}
|
||||
.ds-button--success:hover {
|
||||
background: #85ce61;
|
||||
border-color: #85ce61;
|
||||
}
|
||||
|
||||
/*其他类型样式类似... */
|
||||
|
||||
/* 按钮尺寸 */
|
||||
.ds-button--large {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.ds-button--small {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 特殊状态 */
|
||||
.ds-button--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.ds-button--loading {
|
||||
cursor: default;
|
||||
}
|
||||
.ds-button--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.ds-button--ghost {
|
||||
background-color: transparent;
|
||||
}
|
||||
.ds-button--plain {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ds-button--round {
|
||||
border-radius: 20px;
|
||||
}
|
||||
.ds-button--circle {
|
||||
border-radius: 50%;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* 图标样式 */
|
||||
.ds-button__icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.ds-button__loading-icon {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 5px;
|
||||
border: 2px solid #ccc;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,113 @@
|
||||
// Button/index.tsx
|
||||
import { defineComponent, computed, CSSProperties } from 'vue'
|
||||
import './button.scss' // 导入样式文件
|
||||
|
||||
//定义按钮类型
|
||||
type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
|
||||
type ButtonSize = 'large' | 'default' | 'small'
|
||||
type ButtonShape = 'circle' | 'round'
|
||||
type ButtonNativeType = 'button' | 'submit' | 'reset'
|
||||
|
||||
// 定义 Props 接口
|
||||
interface ButtonProps {
|
||||
type?: ButtonType
|
||||
size?: ButtonSize
|
||||
shape?: ButtonShape
|
||||
nativeType?: ButtonNativeType
|
||||
disabled?: boolean
|
||||
loading?: boolean
|
||||
plain?: boolean
|
||||
ghost?: boolean
|
||||
block?: boolean
|
||||
icon?: string
|
||||
onClick?: (e: Event) => void
|
||||
class?: string
|
||||
style?: CSSProperties
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DSButton',
|
||||
props: {
|
||||
type: {
|
||||
type: String as () => ButtonType,
|
||||
default: 'default'
|
||||
},
|
||||
size: {
|
||||
type: String as () => ButtonSize,
|
||||
default: 'default'
|
||||
},
|
||||
shape: String as () => ButtonShape,
|
||||
nativeType: {
|
||||
type: String as () => ButtonNativeType,
|
||||
default: 'button'
|
||||
},
|
||||
disabled: Boolean,
|
||||
loading: Boolean,
|
||||
plain: Boolean,
|
||||
ghost: Boolean,
|
||||
block: Boolean,
|
||||
icon: String
|
||||
},
|
||||
|
||||
emits: ['click'],
|
||||
|
||||
setup(props, { slots, emit }) {
|
||||
// 计算按钮类名
|
||||
const buttonClasses = computed(() => [
|
||||
'ds-button',
|
||||
`ds-button--${props.type}`,
|
||||
`ds-button--${props.size}`,
|
||||
{
|
||||
'ds-button--disabled': props.disabled,
|
||||
'ds-button--loading': props.loading,
|
||||
'ds-button--plain': props.plain,
|
||||
'ds-button--ghost': props.ghost,
|
||||
'ds-button--block': props.block,
|
||||
[`ds-button--${props.shape}`]: props.shape
|
||||
},
|
||||
props.class
|
||||
])
|
||||
|
||||
// 点击事件处理
|
||||
const handleClick = (e: Event) => {
|
||||
if (!props.disabled && !props.loading) {
|
||||
emit('click', e)
|
||||
} else {
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染图标
|
||||
const renderIcon = () => {
|
||||
if (props.loading) {
|
||||
return <span class="ds-button__loading-icon"></span>
|
||||
}
|
||||
if (props.icon) {
|
||||
return <span class={`ds-button__icon ${props.icon}`}></span>
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 渲染内容
|
||||
const renderContent = () => {
|
||||
return (
|
||||
<span class="ds-button__content">
|
||||
{renderIcon()}
|
||||
{slots.default?.()}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return () => (
|
||||
<button
|
||||
class={buttonClasses.value}
|
||||
style={props.style}
|
||||
disabled={props.disabled || props.loading}
|
||||
type={props.nativeType}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{renderContent()}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,2 @@
|
||||
import dialog from "./src/dialog";
|
||||
export const DSDialog = dialog;
|
||||
@ -0,0 +1,27 @@
|
||||
/* DsDialog/style.scss */
|
||||
.ds-dialog {
|
||||
&-footer {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
|
||||
&--horizontal {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&--vertical {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-07-08 09:43:27
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-07-08 09:44:53
|
||||
* @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\IsAction\index.ts
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import isAction from './src/isAction'
|
||||
export const IsAction = isAction
|
||||
@ -0,0 +1,16 @@
|
||||
.action_model_wrap {
|
||||
.el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding: 40px 24px 14px;
|
||||
}
|
||||
.model_content_box {
|
||||
.icon_box {
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,84 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-08-20 15:31:30
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-07-08 09:38:15
|
||||
* @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\IsAction\isAction.tsx
|
||||
* @Description: 是否操作行为
|
||||
*/
|
||||
// import { defineComponent, PropType } from "vue";
|
||||
// import { ElDialog, ElButton } from "element-plus";
|
||||
import warnIcon from '@/assets/common/warn_icon.png'
|
||||
import './isAction.scss'
|
||||
export default defineComponent({
|
||||
name: 'IsDelete',
|
||||
props: {
|
||||
title: {
|
||||
type: String as PropType<string>,
|
||||
default: '提示'
|
||||
},
|
||||
message: {
|
||||
type: String as PropType<string>,
|
||||
default: '确定要操作吗？'
|
||||
},
|
||||
visible: {
|
||||
type: Boolean as PropType<boolean>
|
||||
// required: true
|
||||
}
|
||||
},
|
||||
emits: ['update:visible', 'confirm'],
|
||||
setup(props, { emit }) {
|
||||
const { visible } = toRefs(props)
|
||||
const localVisible = ref<boolean>(visible.value)
|
||||
const handleConfirm = () => {
|
||||
emit('confirm')
|
||||
// visible.value = false;
|
||||
// emit("update:visible", false);
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
// localVisible.value = false;
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
// localVisible.value = false;
|
||||
emit('update:visible', false)
|
||||
// done();
|
||||
}
|
||||
|
||||
watch(visible, (newVal) => {
|
||||
localVisible.value = newVal
|
||||
})
|
||||
|
||||
return () => (
|
||||
<ElDialog
|
||||
className="action_model_wrap el-dialog"
|
||||
visible={localVisible.value}
|
||||
width="560px"
|
||||
before-close={handleClose}
|
||||
show-close={false}
|
||||
v-slots={{
|
||||
footer: () => (
|
||||
<>
|
||||
<ElButton onClick={handleCancel}>取消</ElButton>
|
||||
<ElButton type="primary" onClick={handleConfirm}>
|
||||
确认
|
||||
</ElButton>
|
||||
</>
|
||||
)
|
||||
}}
|
||||
>
|
||||
<div className="model_content_box">
|
||||
<div className="flex items-center pr-[12px] icon_box">
|
||||
<img src={warnIcon} />
|
||||
<span className="hf-1 pl-[12px]">{props.title}</span>
|
||||
</div>
|
||||
<div className="pl-[36px] pt-[14px]">
|
||||
<span className="pf-1" v-html={props.message}></span>
|
||||
</div>
|
||||
</div>
|
||||
</ElDialog>
|
||||
)
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,20 @@
|
||||
:root {
|
||||
--ds-color-primary: rgb(21, 77, 221); // 主色调
|
||||
--ds-color-primary-light-3: rgba(21, 77, 221, 0.3);
|
||||
--ds-color-primary-light-5: rgba(21, 77, 221, 0.5);
|
||||
--ds-color-primary-light-7: rgba(21, 77, 221, 0.7);
|
||||
--ds-color-primary-light-8: rgba(21, 77, 221, 0.8);
|
||||
--ds-color-primary-light-9: rgba(21, 77, 221, 0.9);
|
||||
--ds-color-info: #fff; // 信息色
|
||||
--ds-color-text: #fff; // 文本色0
|
||||
--ds-clort-text-1: #333; // 文本色1
|
||||
--ds-clort-text-2: #666; // 文本色2
|
||||
--ds-clort-text-3: #999; // 文本色3
|
||||
--ds-button-border-radius: 2px;
|
||||
--ds-button-border-color: #c9cdd4;
|
||||
--ds-button-info-border-color: #dcdcdc;
|
||||
--ds-background-color: #363940; // 背景色
|
||||
--ds-dialog-background-color: #363940; // 背景色
|
||||
--ds-dialog-header-padding: 24px; // 背景色
|
||||
--ds-dialog-header-height: 54px; // 背景色
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
@import url("./global.scss");
|
||||
@import url("./base.scss");
|
||||
@import url("./global.scss");
|
||||
@import url("./element-plus.scss");
|
||||
@import url("./design.scss");
|
||||
@ -0,0 +1,49 @@
|
||||
<el-dialog
|
||||
align-center
|
||||
v-model="showPermissionDialog"
|
||||
width="520"
|
||||
@close="showPermissionDialog = false"
|
||||
class="settings-dialog ds-dialog"
|
||||
>
|
||||
<template #header="{ close, titleId, titleClass }">
|
||||
<div class="flex items-center justify-between h-full dialog-header pl-[24px]">
|
||||
<p class="overflow-hidden whitespace-nowrap text-ellipsis">权限分配</p>
|
||||
</div>
|
||||
</template>
|
||||
<div class="p-[24px]">
|
||||
<el-form
|
||||
style="max-width: 472px"
|
||||
:model="permissionFromData"
|
||||
label-width="auto"
|
||||
label-position="top"
|
||||
size="default"
|
||||
>
|
||||
<el-form-item label="选择开放给技术员的工具权限" prop="pass">
|
||||
<el-checkbox label="所有权限"></el-checkbox>
|
||||
<!-- <el-checkbox
|
||||
v-model="checkAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
@change="handleCheckAllChange"
|
||||
>
|
||||
</el-checkbox> -->
|
||||
<!-- @change="handleCheckedPermissionChange" -->
|
||||
<!-- // TODO 和UI图调整一致 -->
|
||||
<el-checkbox-group v-model="permissionFromData.permission">
|
||||
<el-checkbox
|
||||
v-for="v in ['权限1', '权限2', '权限3', '权限4', '权限5']"
|
||||
:key="v"
|
||||
:label="v"
|
||||
:value="v"
|
||||
>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer mr-[24px] pb-[24px] pt-[16px]">
|
||||
<DSButton type="info" @click="resetPermission()" class="mr-[8px]">取消</DSButton>
|
||||
<DSButton type="primary" @click="submitPermission()" class="">确定</DSButton>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
Loading…
Reference in New Issue