# 修复删除组件后属性面板仍显示该组件内容的问题

## 1。问题描述

在可视化拖拽编辑器中，删除画布上的某个组件后，右侧属性面板仍然显示该已删除组件的属性内容，而不是清空或显示「点击组件编辑属性」的提示。

## 2。原因分析

删除组件时，`componentStore.deleteComponent()` 方法只更新了 `components` 列表（画布数据），但没有同步清空 `selectedComponent` 和 `selectedId` 这两个选中状态变量。导致删除后，属性面板仍引用已被删除的组件对象。

## 3。解决方案

### 3.1 修改 `useComponentStore`，让 `deleteComponent` 返回被删除的组件 ID

**文件**：`resources/js/admin/stores/component.ts`

**修改前**：

```typescript
const deleteComponent = async (id: number) => {
    loading.value = true;
    try {
        await componentApi.delete(id);
        components.value = components.value.filter(c => c.id !== id);
        ElMessage.success('删除成功');
    } catch (error) {
        ElMessage.error('删除失败');
        throw error;
    } finally {
        loading.value = false;
    }
};
```

**修改后**：

```typescript
const deleteComponent = async (id: number): Promise<number> => {
    loading.value = true;
    try {
        await componentApi.delete(id);
        components.value = components.value.filter(c => c.id !== id);
        ElMessage.success('删除成功');
        return id;  // 返回被删除的组件 ID
    } catch (error) {
        ElMessage.error('删除失败');
        throw error;
    } finally {
        loading.value = false;
    }
};
```

### 3.2 修改 `PageEditor.vue`，在删除回调中清空选中状态

**文件**：`resources/js/admin/views/PageEditor.vue`

**删除按钮模板**：

```vue
<el-button type="danger" link size="small" @click.stop="handleDeleteComponent(comp)">
    删除
</el-button>
```

**新增删除处理方法**：

```typescript
// 删除组件（并清空选中状态）
const handleDeleteComponent = async (comp: any) => {
    const deletedId = await componentStore.deleteComponent(comp.id);
    // 如果删除的是当前选中的组件，清空选中状态
    if (selectedId.value === deletedId) {
        selectedComponent.value = null;
        selectedId.value = null;
    }
};
```

## 4。修改文件清单

| 文件 | 操作 | 说明 |
|------|------|------|
| `resources/js/admin/stores/component.ts` | 修改 | `deleteComponent` 返回被删除的组件 ID |
| `resources/js/admin/views/PageEditor.vue` | 修改 | 新增 `handleDeleteComponent` 方法，删除后清空选中状态 |

## 5。验证结果

| 验证项 | 预期结果 | 实际结果 |
|--------|---------|---------|
| 删除组件后属性面板 | 显示「点击组件编辑属性」或清空 | ✅ |
| 删除非选中组件 | 选中状态保持不变 | ✅ |
| 删除选中组件 | 选中状态被清空，属性面板不再显示旧内容 | ✅ |