Refactor component configuration and diagram management
- Removed the component configuration from `componentConfig.ts` to streamline the codebase. - Introduced a new `diagram.json` file to define the initial structure for diagrams. - Created a `diagramManager.ts` to handle diagram data, including loading, saving, and validating diagram structures. - Updated `ProjectView.vue` to integrate the new diagram management system, including handling component selection and property updates. - Enhanced the component property management to support dynamic attributes and improved error handling. - Added functions for managing connections between components within the diagram.
This commit is contained in:
alivender
@@ -1,363 +0,0 @@
|
||||
// 组件配置声明
|
||||
export type PropType = 'string' | 'number' | 'boolean' | 'select';
|
||||
|
||||
// 定义选择类型选项
|
||||
export interface PropOption {
|
||||
value: string | number | boolean;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface PropConfig {
|
||||
name: string;
|
||||
type: string;
|
||||
label: string;
|
||||
default: any;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
options?: PropOption[];
|
||||
description?: string;
|
||||
category?: string; // 用于在UI中分组属性
|
||||
}
|
||||
|
||||
export interface ComponentConfig {
|
||||
props: PropConfig[];
|
||||
}
|
||||
|
||||
// 存储所有组件的配置
|
||||
const componentConfigs: Record<string, ComponentConfig> = {
|
||||
MechanicalButton: {
|
||||
props: [
|
||||
{
|
||||
name: 'bindKey',
|
||||
type: 'string',
|
||||
label: '绑定按键',
|
||||
default: '',
|
||||
description: '触发按钮按下的键盘按键'
|
||||
},
|
||||
{
|
||||
name: 'size',
|
||||
type: 'number',
|
||||
label: '大小',
|
||||
default: 1,
|
||||
min: 0.5,
|
||||
max: 3,
|
||||
step: 0.1,
|
||||
description: '按钮的相对大小，1代表标准大小'
|
||||
},
|
||||
{
|
||||
name: 'buttonText',
|
||||
type: 'string',
|
||||
label: '按钮文本',
|
||||
default: '',
|
||||
description: '按钮上显示的自定义文本，优先级高于绑定按键'
|
||||
},
|
||||
{
|
||||
name: 'label',
|
||||
type: 'string',
|
||||
label: '引脚标签',
|
||||
default: 'BTN',
|
||||
description: '引脚的标签文本'
|
||||
},
|
||||
{
|
||||
name: 'constraint',
|
||||
type: 'string',
|
||||
label: '引脚约束',
|
||||
default: '',
|
||||
description: '相同约束字符串的引脚将被视为有电气连接'
|
||||
}
|
||||
]
|
||||
},
|
||||
Switch: {
|
||||
props: [
|
||||
{
|
||||
name: 'size',
|
||||
type: 'number',
|
||||
label: '大小',
|
||||
default: 1,
|
||||
min: 0.5,
|
||||
max: 3,
|
||||
step: 0.1,
|
||||
description: '开关的相对大小，1代表标准大小'
|
||||
},
|
||||
{
|
||||
name: 'switchCount',
|
||||
type: 'number',
|
||||
label: '开关数量',
|
||||
default: 6,
|
||||
min: 1,
|
||||
max: 12,
|
||||
step: 1,
|
||||
description: '可翻转开关的数量'
|
||||
},
|
||||
{
|
||||
name: 'showLabels',
|
||||
type: 'boolean',
|
||||
label: '显示标签',
|
||||
default: true,
|
||||
description: '是否显示开关编号标签'
|
||||
},
|
||||
{
|
||||
name: 'initialValues',
|
||||
type: 'string',
|
||||
label: '初始状态',
|
||||
default: '',
|
||||
description: '开关的初始状态，格式为逗号分隔的0/1，如"1,0,1"表示第1、3个开关打开'
|
||||
}
|
||||
]
|
||||
},
|
||||
Pin: {
|
||||
props: [
|
||||
{
|
||||
name: 'size',
|
||||
type: 'number',
|
||||
label: '大小',
|
||||
default: 1,
|
||||
min: 0.5,
|
||||
max: 3,
|
||||
step: 0.1,
|
||||
description: '引脚的相对大小，1代表标准大小'
|
||||
},
|
||||
{
|
||||
name: 'label',
|
||||
type: 'string',
|
||||
label: '引脚标签',
|
||||
default: 'PIN',
|
||||
description: '用于标识引脚的名称'
|
||||
},
|
||||
{
|
||||
name: 'constraint',
|
||||
type: 'string',
|
||||
label: '引脚约束',
|
||||
default: '',
|
||||
description: '相同约束字符串的引脚将被视为有电气连接'
|
||||
},
|
||||
{
|
||||
name: 'direction',
|
||||
type: 'select',
|
||||
label: '输入/输出特性',
|
||||
default: 'input',
|
||||
options: [
|
||||
{ value: 'input', label: '输入' },
|
||||
{ value: 'output', label: '输出' },
|
||||
{ value: 'inout', label: '双向' }
|
||||
],
|
||||
description: '引脚的输入/输出特性'
|
||||
},
|
||||
{
|
||||
name: 'type',
|
||||
type: 'select',
|
||||
label: '模数特性',
|
||||
default: 'digital',
|
||||
options: [
|
||||
{ value: 'digital', label: 'digital' },
|
||||
{ value: 'analog', label: 'analog' }
|
||||
],
|
||||
description: '引脚的模数特性，数字或模拟'
|
||||
}
|
||||
]
|
||||
},
|
||||
HDMI: {
|
||||
props: [
|
||||
{
|
||||
name: 'size',
|
||||
type: 'number',
|
||||
label: '大小',
|
||||
default: 1,
|
||||
min: 0.5,
|
||||
max: 3,
|
||||
step: 0.1,
|
||||
description: 'HDMI接口的相对大小，1代表标准大小'
|
||||
}
|
||||
]
|
||||
},
|
||||
DDR: {
|
||||
props: [
|
||||
{
|
||||
name: 'size',
|
||||
type: 'number',
|
||||
label: '大小',
|
||||
default: 1,
|
||||
min: 0.5,
|
||||
max: 3,
|
||||
step: 0.1,
|
||||
description: 'DDR内存的相对大小，1代表标准大小'
|
||||
}
|
||||
]
|
||||
},
|
||||
ETH: {
|
||||
props: [
|
||||
{
|
||||
name: 'size',
|
||||
type: 'number',
|
||||
label: '大小',
|
||||
default: 1,
|
||||
min: 0.5,
|
||||
max: 3,
|
||||
step: 0.1,
|
||||
description: '以太网接口的相对大小，1代表标准大小'
|
||||
}
|
||||
]
|
||||
},
|
||||
SD: {
|
||||
props: [
|
||||
{
|
||||
name: 'size',
|
||||
type: 'number',
|
||||
label: '大小',
|
||||
default: 1,
|
||||
min: 0.5,
|
||||
max: 3,
|
||||
step: 0.1,
|
||||
description: 'SD卡插槽的相对大小，1代表标准大小'
|
||||
}
|
||||
]
|
||||
},
|
||||
SFP: {
|
||||
props: [
|
||||
{
|
||||
name: 'size',
|
||||
type: 'number',
|
||||
label: '大小',
|
||||
default: 1,
|
||||
min: 0.5,
|
||||
max: 3,
|
||||
step: 0.1,
|
||||
description: 'SFP光纤模块的相对大小，1代表标准大小'
|
||||
}
|
||||
]
|
||||
},
|
||||
SMA: {
|
||||
props: [
|
||||
{
|
||||
name: 'size',
|
||||
type: 'number',
|
||||
label: '大小',
|
||||
default: 1,
|
||||
min: 0.5,
|
||||
max: 3,
|
||||
step: 0.1,
|
||||
description: 'SMA连接器的相对大小，1代表标准大小'
|
||||
}
|
||||
]
|
||||
}, MotherBoard: {
|
||||
props: [
|
||||
{
|
||||
name: 'size',
|
||||
type: 'number',
|
||||
label: '大小',
|
||||
default: 1,
|
||||
min: 0.5,
|
||||
max: 2,
|
||||
step: 0.1,
|
||||
description: '主板的相对大小，1代表标准大小'
|
||||
}
|
||||
]
|
||||
}, SMT_LED: {
|
||||
props: [
|
||||
{
|
||||
name: 'size',
|
||||
type: 'number',
|
||||
label: '大小',
|
||||
default: 1,
|
||||
min: 0.5,
|
||||
max: 3,
|
||||
step: 0.1,
|
||||
description: 'LED的相对大小，1代表标准大小'
|
||||
},
|
||||
{
|
||||
name: 'color',
|
||||
type: 'select',
|
||||
label: '颜色',
|
||||
default: 'red',
|
||||
options: [
|
||||
{ value: 'red', label: '红色' },
|
||||
{ value: 'green', label: '绿色' },
|
||||
{ value: 'blue', label: '蓝色' },
|
||||
{ value: 'yellow', label: '黄色' },
|
||||
{ value: 'orange', label: '橙色' },
|
||||
{ value: 'white', label: '白色' },
|
||||
{ value: 'purple', label: '紫色' }
|
||||
],
|
||||
description: 'LED的颜色'
|
||||
},
|
||||
{
|
||||
name: 'initialOn',
|
||||
type: 'boolean',
|
||||
label: '初始状态',
|
||||
default: false,
|
||||
description: 'LED的初始开关状态'
|
||||
},
|
||||
{
|
||||
name: 'brightness',
|
||||
type: 'number',
|
||||
label: '亮度(%)',
|
||||
default: 80,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 5,
|
||||
description: 'LED的亮度百分比，范围0-100'
|
||||
},
|
||||
{
|
||||
name: 'constraint',
|
||||
type: 'string',
|
||||
label: '引脚约束',
|
||||
default: '',
|
||||
description: '相同约束字符串的引脚将被视为有电气连接'
|
||||
}
|
||||
]
|
||||
},
|
||||
// 线缆配置
|
||||
Wire: {
|
||||
props: [
|
||||
{
|
||||
name: 'routingMode',
|
||||
type: 'select',
|
||||
label: '路由方式',
|
||||
default: 'orthogonal',
|
||||
options: [
|
||||
{ value: 'orthogonal', label: '直角' },
|
||||
{ value: 'direct', label: '直线' },
|
||||
{ value: 'auto', label: '自动' }
|
||||
],
|
||||
description: '线路连接方式'
|
||||
},
|
||||
{
|
||||
name: 'strokeColor',
|
||||
type: 'string',
|
||||
label: '线条颜色',
|
||||
default: '#4a5568',
|
||||
description: '线条颜色，使用CSS颜色值'
|
||||
},
|
||||
{
|
||||
name: 'strokeWidth',
|
||||
type: 'number',
|
||||
label: '线条宽度',
|
||||
default: 2,
|
||||
min: 1,
|
||||
max: 10,
|
||||
step: 0.5,
|
||||
description: '线条宽度'
|
||||
},
|
||||
{
|
||||
name: 'constraint',
|
||||
type: 'string',
|
||||
label: '约束名称',
|
||||
default: '',
|
||||
description: '线路约束名称，用于标识连接关系'
|
||||
},
|
||||
{
|
||||
name: 'showLabel',
|
||||
type: 'boolean',
|
||||
label: '显示标签',
|
||||
default: false,
|
||||
description: '是否显示连线上的约束标签'
|
||||
}
|
||||
]
|
||||
},
|
||||
};
|
||||
|
||||
// 获取组件配置的函数
|
||||
export function getComponentConfig(type: string): ComponentConfig | null {
|
||||
return componentConfigs[type] || null;
|
||||
}
|
||||
Reference in New Issue
Block a user