smsb-modules/smsb-source/src/main/java/com/inspur/source/controller/SmsbItemProgramController.java

@@ -0,0 +1,117 @@
+package com.inspur.source.controller;
+
+import cn.dev33.satoken.annotation.SaCheckPermission;
+import com.inspur.source.domain.bo.SmsbItemProgramBo;
+import com.inspur.source.domain.vo.SmsbItemProgramVo;
+import com.inspur.source.service.ISmsbItemProgramService;
+import jakarta.servlet.http.HttpServletResponse;
+import jakarta.validation.constraints.NotEmpty;
+import jakarta.validation.constraints.NotNull;
+import lombok.RequiredArgsConstructor;
+import org.dromara.common.core.domain.R;
+import org.dromara.common.core.validate.AddGroup;
+import org.dromara.common.core.validate.EditGroup;
+import org.dromara.common.excel.utils.ExcelUtil;
+import org.dromara.common.idempotent.annotation.RepeatSubmit;
+import org.dromara.common.log.annotation.Log;
+import org.dromara.common.log.enums.BusinessType;
+import org.dromara.common.mybatis.core.page.PageQuery;
+import org.dromara.common.mybatis.core.page.TableDataInfo;
+import org.dromara.common.web.core.BaseController;
+import org.springframework.validation.annotation.Validated;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+/**
+ * 节目信息
+ *
+ * @author Lion Li
+ * @date 2025-05-13
+ */
+@Validated
+@RequiredArgsConstructor
+@RestController
+@RequestMapping("/system/itemProgram")
+public class SmsbItemProgramController extends BaseController {
+
+    private final ISmsbItemProgramService smsbItemProgramService;
+
+    /**
+     * 查询节目信息列表
+     */
+    @SaCheckPermission("system:itemProgram:list")
+    @GetMapping("/list")
+    public TableDataInfo<SmsbItemProgramVo> list(SmsbItemProgramBo bo, PageQuery pageQuery) {
+        return smsbItemProgramService.queryPageList(bo, pageQuery);
+    }
+
+    /**
+     * 导出节目信息列表
+     */
+    @SaCheckPermission("system:itemProgram:export")
+    @Log(title = "节目信息", businessType = BusinessType.EXPORT)
+    @PostMapping("/export")
+    public void export(SmsbItemProgramBo bo, HttpServletResponse response) {
+        List<SmsbItemProgramVo> list = smsbItemProgramService.queryList(bo);
+        ExcelUtil.exportExcel(list, "节目信息", SmsbItemProgramVo.class, response);
+    }
+
+    /**
+     * 获取节目信息详细信息
+     *
+     * @param id 主键
+     */
+    @SaCheckPermission("system:itemProgram:query")
+    @GetMapping("/{id}")
+    public R<SmsbItemProgramVo> getInfo(@NotNull(message = "主键不能为空")
+                                     @PathVariable Long id) {
+        return R.ok(smsbItemProgramService.queryById(id));
+    }
+
+    /**
+     * 新增节目信息
+     */
+    @SaCheckPermission("system:itemProgram:add")
+    @Log(title = "节目信息", businessType = BusinessType.INSERT)
+    @RepeatSubmit()
+    @PostMapping()
+    public R<Void> add(@Validated(AddGroup.class) @RequestBody SmsbItemProgramBo bo) {
+        return toAjax(smsbItemProgramService.insertByBo(bo));
+    }
+
+    /**
+     * 修改节目信息
+     */
+    @SaCheckPermission("system:itemProgram:edit")
+    @Log(title = "节目信息", businessType = BusinessType.UPDATE)
+    @RepeatSubmit()
+    @PutMapping()
+    public R<Void> edit(@Validated(EditGroup.class) @RequestBody SmsbItemProgramBo bo) {
+        return toAjax(smsbItemProgramService.updateByBo(bo));
+    }
+
+    /**
+     * 修改节目名称
+     */
+    @SaCheckPermission("system:itemProgram:edit")
+    @Log(title = "节目信息", businessType = BusinessType.UPDATE)
+    @RepeatSubmit()
+    @PutMapping("/editName")
+    public R<Void> editName(@Validated(EditGroup.class) @RequestParam Long id, @RequestParam String name) {
+        return toAjax(smsbItemProgramService.updateNameById(id, name));
+    }
+
+    /**
+     * 删除节目信息
+     *
+     * @param ids 主键串
+     */
+    @SaCheckPermission("system:itemProgram:remove")
+    @Log(title = "节目信息", businessType = BusinessType.DELETE)
+    @DeleteMapping("/{ids}")
+    public R<Void> remove(@NotEmpty(message = "主键不能为空")
+                          @PathVariable Long[] ids) {
+        return toAjax(smsbItemProgramService.deleteWithValidByIds(List.of(ids), true));
+    }
+}

smsb-modules/smsb-source/src/main/java/com/inspur/source/domain/SmsbItemProgram.java

@@ -0,0 +1,80 @@
+package com.inspur.source.domain;
+
+import com.baomidou.mybatisplus.annotation.TableId;
+import com.baomidou.mybatisplus.annotation.TableName;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import org.dromara.common.mybatis.core.domain.BaseEntity;
+
+import java.io.Serial;
+
+/**
+ * 节目信息对象 smsb_item_program
+ *
+ * @author Lion Li
+ * @date 2025-05-13
+ */
+@Data
+@EqualsAndHashCode(callSuper = true)
+@TableName("smsb_item_program")
+public class SmsbItemProgram extends BaseEntity {
+
+    @Serial
+    private static final long serialVersionUID = 1L;
+
+    /**
+     * 主键ID
+     */
+    @TableId(value = "id")
+    private Long id;
+
+    /**
+     * 节目ID
+     */
+    private Long programId;
+
+    /**
+     * 节目名称
+     */
+    private String name;
+
+    /**
+     * 分辨率
+     */
+    private String resolutionRatio;
+
+    /**
+     * 节目json
+     */
+    private String itemJsonStr;
+
+    /**
+     * 图片地址
+     */
+    private String imgUrl;
+
+    /**
+     * 状态
+     */
+    private Long status;
+
+    /**
+     * 节目时长
+     */
+    private Long duration;
+
+    /**
+     * 租户
+     */
+    private String tenantId;
+
+    /**
+     * 所属个人
+     */
+    private String user;
+
+    /**
+     * 软删除标记
+     */
+    private Integer delFlag;
+}

smsb-modules/smsb-source/src/main/java/com/inspur/source/domain/bo/SmsbItemProgramBo.java

@@ -0,0 +1,84 @@
+package com.inspur.source.domain.bo;
+
+import com.inspur.source.domain.SmsbItemProgram;
+import io.github.linpeilie.annotations.AutoMapper;
+import jakarta.validation.constraints.*;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import org.dromara.common.core.validate.AddGroup;
+import org.dromara.common.core.validate.EditGroup;
+import org.dromara.common.mybatis.core.domain.BaseEntity;
+
+/**
+ * 节目信息业务对象 smsb_item_program
+ *
+ * @author Lion Li
+ * @date 2025-05-13
+ */
+@Data
+@EqualsAndHashCode(callSuper = true)
+@AutoMapper(target = SmsbItemProgram.class, reverseConvertGenerate = false)
+public class SmsbItemProgramBo extends BaseEntity {
+
+    /**
+     * 主键ID
+     */
+    @NotNull(message = "主键ID不能为空", groups = {EditGroup.class })
+    private Long id;
+
+    /**
+     * 节目ID
+     */
+    @NotNull(message = "节目ID不能为空", groups = { AddGroup.class, EditGroup.class })
+    private Long programId;
+
+    /**
+     * 节目名称
+     */
+    @NotBlank(message = "节目名称不能为空", groups = { AddGroup.class, EditGroup.class })
+    private String name;
+
+    /**
+     * 分辨率
+     */
+    @NotBlank(message = "分辨率不能为空", groups = { AddGroup.class, EditGroup.class })
+    private String resolutionRatio;
+
+    /**
+     * 节目json
+     */
+    // @NotBlank(message = "节目json不能为空", groups = { AddGroup.class, EditGroup.class })
+    private String itemJsonStr;
+
+    /**
+     * 图片地址
+     */
+    // @NotBlank(message = "图片地址不能为空", groups = {AddGroup.class, EditGroup.class })
+    private String imgUrl;
+
+    /**
+     * 状态
+     */
+    // @NotNull(message = "状态不能为空", groups = { AddGroup.class, EditGroup.class })
+    private Long status;
+
+    /**
+     * 节目时长
+     */
+    // @NotNull(message = "节目时长不能为空", groups = { AddGroup.class, EditGroup.class })
+    private Long duration;
+
+    /**
+     * 租户
+     */
+    @NotBlank(message = "租户不能为空", groups = { AddGroup.class, EditGroup.class })
+    private String tenantId;
+
+    /**
+     * 所属个人
+     */
+    @NotBlank(message = "所属个人不能为空", groups = { AddGroup.class, EditGroup.class })
+    private String user;
+
+    private Integer delFlag;
+}

smsb-modules/smsb-source/src/main/java/com/inspur/source/domain/vo/SmsbItemProgramVo.java

@@ -0,0 +1,91 @@
+package com.inspur.source.domain.vo;
+
+import com.alibaba.excel.annotation.ExcelIgnoreUnannotated;
+import com.alibaba.excel.annotation.ExcelProperty;
+import com.inspur.source.domain.SmsbItemProgram;
+import io.github.linpeilie.annotations.AutoMapper;
+import lombok.Data;
+
+import java.io.Serial;
+import java.io.Serializable;
+
+/**
+ * 节目信息视图对象 smsb_item_program
+ *
+ * @author Lion Li
+ * @date 2025-05-13
+ */
+@Data
+@ExcelIgnoreUnannotated
+@AutoMapper(target = SmsbItemProgram.class)
+public class SmsbItemProgramVo implements Serializable {
+
+    @Serial
+    private static final long serialVersionUID = 1L;
+
+    /**
+     * 主键ID
+     */
+    @ExcelProperty(value = "主键ID")
+    private Long id;
+
+    /**
+     * 节目ID
+     */
+    @ExcelProperty(value = "节目ID")
+    private Long programId;
+
+    /**
+     * 节目名称
+     */
+    @ExcelProperty(value = "节目名称")
+    private String name;
+
+    /**
+     * 分辨率
+     */
+    @ExcelProperty(value = "分辨率")
+    private String resolutionRatio;
+
+    /**
+     * 节目json
+     */
+    @ExcelProperty(value = "节目json")
+    private String itemJsonStr;
+
+    /**
+     * 图片地址
+     */
+    @ExcelProperty(value = "图片地址")
+    private String imgUrl;
+
+    /**
+     * 状态
+     */
+    @ExcelProperty(value = "状态")
+    private Long status;
+
+    /**
+     * 节目时长
+     */
+    @ExcelProperty(value = "节目时长")
+    private Long duration;
+
+    /**
+     * 租户
+     */
+    @ExcelProperty(value = "租户")
+    private String tenantId;
+
+    /**
+     * 所属个人
+     */
+    @ExcelProperty(value = "所属个人")
+    private String user;
+
+    /**
+     * 删除标志
+     */
+    private Integer delFlag; // 0: 正常, 1: 删除
+
+}

smsb-modules/smsb-source/src/main/java/com/inspur/source/domain/vo/SmsbMinioDataVo.java

@@ -103,6 +103,8 @@ public class SmsbMinioDataVo implements Serializable {
 
     private String fileUrl;
 
+    private String md5;
+
     /**
      * 转码状态 0：待转码，1：转码成功，2：转码失败
      */

smsb-modules/smsb-source/src/main/java/com/inspur/source/mapper/SmsbItemProgramMapper.java

@@ -0,0 +1,28 @@
+package com.inspur.source.mapper;
+
+import com.inspur.source.domain.SmsbItemProgram;
+import com.inspur.source.domain.vo.SmsbItemProgramVo;
+import org.dromara.common.mybatis.core.mapper.BaseMapperPlus;
+
+/**
+ * 节目信息Mapper接口
+ *
+ * @author Lion Li
+ * @date 2025-05-13
+ */
+public interface SmsbItemProgramMapper extends BaseMapperPlus<SmsbItemProgram, SmsbItemProgramVo> {
+    /**
+     * 逻辑删除（单个）
+     */
+    int logicDeleteById(@org.apache.ibatis.annotations.Param("id") Long id);
+
+    /**
+     * 逻辑删除（批量）
+     */
+    int logicDeleteByIds(@org.apache.ibatis.annotations.Param("ids") java.util.List<Long> ids);
+
+    /**
+     * 更新节目名称
+     */
+    int updateNameById(@org.apache.ibatis.annotations.Param("id") Long id, @org.apache.ibatis.annotations.Param("name") String name);
+}

smsb-modules/smsb-source/src/main/java/com/inspur/source/service/ISmsbItemProgramService.java

@@ -0,0 +1,76 @@
+package com.inspur.source.service;
+
+import com.inspur.source.domain.bo.SmsbItemProgramBo;
+import com.inspur.source.domain.vo.SmsbItemProgramVo;
+import org.dromara.common.mybatis.core.page.PageQuery;
+import org.dromara.common.mybatis.core.page.TableDataInfo;
+
+import java.util.Collection;
+import java.util.List;
+
+/**
+ * 节目信息Service接口
+ *
+ * @author Lion Li
+ * @date 2025-05-13
+ */
+public interface ISmsbItemProgramService {
+
+    /**
+     * 查询节目信息
+     *
+     * @param id 主键
+     * @return 节目信息
+     */
+    SmsbItemProgramVo queryById(Long id);
+
+    /**
+     * 分页查询节目信息列表
+     *
+     * @param bo        查询条件
+     * @param pageQuery 分页参数
+     * @return 节目信息分页列表
+     */
+    TableDataInfo<SmsbItemProgramVo> queryPageList(SmsbItemProgramBo bo, PageQuery pageQuery);
+
+    /**
+     * 查询符合条件的节目信息列表
+     *
+     * @param bo 查询条件
+     * @return 节目信息列表
+     */
+    List<SmsbItemProgramVo> queryList(SmsbItemProgramBo bo);
+
+    /**
+     * 新增节目信息
+     *
+     * @param bo 节目信息
+     * @return 是否新增成功
+     */
+    Boolean insertByBo(SmsbItemProgramBo bo);
+
+    /**
+     * 修改节目信息
+     *
+     * @param bo 节目信息
+     * @return 是否修改成功
+     */
+    Boolean updateByBo(SmsbItemProgramBo bo);
+
+    /**
+     * 修改节目名称
+     * @param id 节目ID
+     * @param name 节目名称
+     * @return 是否修改成功
+     */
+    Boolean updateNameById(Long id, String name);
+
+    /**
+     * 校验并批量删除节目信息信息
+     *
+     * @param ids     待删除的主键集合
+     * @param isValid 是否进行有效性校验
+     * @return 是否删除成功
+     */
+    Boolean deleteWithValidByIds(Collection<Long> ids, Boolean isValid);
+}

smsb-modules/smsb-source/src/main/java/com/inspur/source/service/impl/SmsbItemProgramServiceImpl.java

@@ -0,0 +1,149 @@
+package com.inspur.source.service.impl;
+
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.baomidou.mybatisplus.core.toolkit.Wrappers;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.inspur.source.domain.SmsbItemProgram;
+import com.inspur.source.domain.bo.SmsbItemProgramBo;
+import com.inspur.source.domain.vo.SmsbItemProgramVo;
+import com.inspur.source.mapper.SmsbItemProgramMapper;
+import com.inspur.source.service.ISmsbItemProgramService;
+import lombok.RequiredArgsConstructor;
+import org.dromara.common.core.utils.MapstructUtils;
+import org.dromara.common.core.utils.StringUtils;
+import org.dromara.common.mybatis.core.page.PageQuery;
+import org.dromara.common.mybatis.core.page.TableDataInfo;
+import org.springframework.stereotype.Service;
+
+import java.util.Collection;
+import java.util.List;
+import java.util.Map;
+
+/**
+ * 节目信息Service业务层处理
+ *
+ * @author Lion Li
+ * @date 2025-05-13
+ */
+@RequiredArgsConstructor
+@Service
+public class SmsbItemProgramServiceImpl implements ISmsbItemProgramService {
+
+    private final SmsbItemProgramMapper baseMapper;
+
+    /**
+     * 查询节目信息
+     *
+     * @param id 主键
+     * @return 节目信息
+     */
+    @Override
+    public SmsbItemProgramVo queryById(Long id){
+        return baseMapper.selectVoById(id);
+    }
+
+    /**
+     * 分页查询节目信息列表
+     *
+     * @param bo        查询条件
+     * @param pageQuery 分页参数
+     * @return 节目信息分页列表
+     */
+    @Override
+    public TableDataInfo<SmsbItemProgramVo> queryPageList(SmsbItemProgramBo bo, PageQuery pageQuery) {
+        LambdaQueryWrapper<SmsbItemProgram> lqw = buildQueryWrapper(bo);
+        Page<SmsbItemProgramVo> result = baseMapper.selectVoPage(pageQuery.build(), lqw);
+        return TableDataInfo.build(result);
+    }
+
+    /**
+     * 查询符合条件的节目信息列表
+     *
+     * @param bo 查询条件
+     * @return 节目信息列表
+     */
+    @Override
+    public List<SmsbItemProgramVo> queryList(SmsbItemProgramBo bo) {
+        LambdaQueryWrapper<SmsbItemProgram> lqw = buildQueryWrapper(bo);
+        return baseMapper.selectVoList(lqw);
+    }
+
+    private LambdaQueryWrapper<SmsbItemProgram> buildQueryWrapper(SmsbItemProgramBo bo) {
+        Map<String, Object> params = bo.getParams();
+        LambdaQueryWrapper<SmsbItemProgram> lqw = Wrappers.lambdaQuery();
+        lqw.eq(SmsbItemProgram::getDelFlag, "0");
+        lqw.eq(bo.getProgramId() != null, SmsbItemProgram::getProgramId, bo.getProgramId());
+        lqw.like(StringUtils.isNotBlank(bo.getName()), SmsbItemProgram::getName, bo.getName());
+        lqw.eq(StringUtils.isNotBlank(bo.getResolutionRatio()), SmsbItemProgram::getResolutionRatio, bo.getResolutionRatio());
+        lqw.eq(StringUtils.isNotBlank(bo.getItemJsonStr()), SmsbItemProgram::getItemJsonStr, bo.getItemJsonStr());
+        lqw.eq(StringUtils.isNotBlank(bo.getImgUrl()), SmsbItemProgram::getImgUrl, bo.getImgUrl());
+        lqw.eq(bo.getStatus() != null, SmsbItemProgram::getStatus, bo.getStatus());
+        lqw.eq(bo.getDuration() != null, SmsbItemProgram::getDuration, bo.getDuration());
+        lqw.eq(StringUtils.isNotBlank(bo.getTenantId()), SmsbItemProgram::getTenantId, bo.getTenantId());
+        lqw.eq(StringUtils.isNotBlank(bo.getUser()), SmsbItemProgram::getUser, bo.getUser());
+        return lqw;
+    }
+
+    /**
+     * 新增节目信息
+     *
+     * @param bo 节目信息
+     * @return 是否新增成功
+     */
+    @Override
+    public Boolean insertByBo(SmsbItemProgramBo bo) {
+        SmsbItemProgram add = MapstructUtils.convert(bo, SmsbItemProgram.class);
+        validEntityBeforeSave(add);
+        boolean flag = baseMapper.insert(add) > 0;
+        if (flag) {
+            bo.setId(add.getId());
+        }
+        return flag;
+    }
+
+    /**
+     * 修改节目信息
+     *
+     * @param bo 节目信息
+     * @return 是否修改成功
+     */
+    @Override
+    public Boolean updateByBo(SmsbItemProgramBo bo) {
+        SmsbItemProgram update = MapstructUtils.convert(bo, SmsbItemProgram.class);
+        validEntityBeforeSave(update);
+        return baseMapper.updateById(update) > 0;
+    }
+
+    /**
+     * 修改节目名称
+     * @param id 节目ID
+     * @param name 节目名称
+     * @return 是否修改成功
+     */
+    @Override
+    public Boolean updateNameById(Long id, String name) {
+        return baseMapper.updateNameById(id, name) > 0;
+    }
+
+    /**
+     * 保存前的数据校验
+     */
+    private void validEntityBeforeSave(SmsbItemProgram entity){
+        //TODO 做一些数据校验,如唯一约束
+    }
+
+    /**
+     * 校验并批量删除节目信息信息
+     *
+     * @param ids     待删除的主键集合
+     * @param isValid 是否进行有效性校验
+     * @return 是否删除成功
+     */
+    @Override
+    public Boolean deleteWithValidByIds(Collection<Long> ids, Boolean isValid) {
+        if(isValid){
+            //TODO 做一些业务上的校验,判断是否需要校验
+        }
+        return baseMapper.logicDeleteByIds((List<Long>) ids) > 0;
+    }
+}

smsb-modules/smsb-source/src/main/resources/mapper/SmsbItemProgramMapper.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper
+PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.inspur.source.mapper.SmsbItemProgramMapper">
+
+    <update id="logicDeleteById">
+        UPDATE smsb_item_program SET del_flag = 1 WHERE id = #{id}
+    </update>
+
+    <update id="logicDeleteByIds">
+        UPDATE smsb_item_program SET del_flag = 1 WHERE id IN
+        <foreach collection="ids" item="id" open="(" separator="," close=")">
+            #{id}
+        </foreach>
+    </update>
+
+    <update id="updateNameById">
+        UPDATE smsb_item_program SET name = #{name} WHERE id = #{id}
+    </update>
+</mapper>

smsb-plus-ui/package.json

@@ -29,6 +29,7 @@
     "crypto-js": "4.2.0",
     "diagram-js": "12.3.0",
     "didi": "9.0.2",
+    "dom-to-image": "^2.6.0",
     "echarts": "5.5.0",
     "element-plus": "2.7.8",
     "file-saver": "2.0.5",

smsb-plus-ui/src/api/smsb/source/item_program.ts

@@ -0,0 +1,91 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { ItemProgramVO, ItemProgramForm, ItemProgramQuery } from '@/api/smsb/source/item_program_type';
+
+/**
+ * 获取资源完整访问 URL
+ * @param keyName 资源 key 或路径
+ * @returns 完整的资源访问地址
+ */
+export function getAssetUrl(keyName: string): string {
+  if (!keyName) return '';
+  // 如果是 base64 或 http(s) 直链，直接返回
+  if (/^data:/.test(keyName) || /^https?:\/\//.test(keyName)) return keyName;
+  // 默认拼接后端下载接口
+  return `/source/minioData/download/${encodeURIComponent(keyName)}`;
+}
+
+
+/**
+ * 查询节目信息列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listItemProgram = (query?: ItemProgramQuery): AxiosPromise<ItemProgramVO[]> => {
+  return request({
+    url: '/system/itemProgram/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询节目信息详细
+ * @param id
+ */
+export const getItemProgram = (id: string | number): AxiosPromise<ItemProgramVO> => {
+  return request({
+    url: '/system/itemProgram/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增节目信息
+ * @param data
+ */
+export const addItemProgram = (data: ItemProgramForm) => {
+  return request({
+    url: '/system/itemProgram',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改节目信息
+ * @param data
+ */
+export const updateItemProgram = (data: ItemProgramForm) => {
+  return request({
+    url: '/system/itemProgram',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除节目信息
+ * @param id
+ */
+export const delItemProgram = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/system/itemProgram/' + id,
+    method: 'delete'
+  });
+};
+
+/**
+ * 修改节目名称
+ * @param id 节目ID
+ * @param name 节目名称
+ * @returns Promise<R<Void>>
+ */
+export const editProgramName = (id: number|string, name: string) => {
+  return request({
+    url: '/system/itemProgram/editName',
+    method: 'put',
+    params: { id, name }
+  });
+};

smsb-plus-ui/src/api/smsb/source/item_program_type.ts

@@ -0,0 +1,145 @@
+export interface ItemProgramVO {
+  /**
+   * 主键ID
+   */
+  id: string | number;
+
+  /**
+   * 节目ID
+   */
+  programId: string | number;
+
+  /**
+   * 节目名称
+   */
+  name: string;
+
+  /**
+   * 分辨率
+   */
+  resolutionRatio: string;
+
+  /**
+   * 节目json
+   */
+  itemJsonStr: string;
+
+  /**
+   * 图片地址
+   */
+  imgUrl: string;
+
+  /**
+   * 状态
+   */
+  status: number;
+
+  /**
+   * 节目时长
+   */
+  duration: number;
+
+  /**
+   * 所属个人
+   */
+  user: string;
+}
+
+export interface ItemProgramForm extends BaseEntity {
+  /**
+   * 主键ID
+   */
+  id?: string | number;
+
+  /**
+   * 节目ID
+   */
+  programId?: string | number;
+
+  /**
+   * 节目名称
+   */
+  name?: string;
+
+  /**
+   * 分辨率
+   */
+  resolutionRatio?: string;
+
+  /**
+   * 节目json
+   */
+  itemJsonStr?: string;
+
+  /**
+   * 图片地址
+   */
+  imgUrl?: string;
+
+  /**
+   * 状态
+   */
+  status?: number;
+
+  /**
+   * 节目时长
+   */
+  duration?: number;
+
+  /**
+   * 所属个人
+   */
+  user?: string;
+
+  /**
+   * 租户ID
+   */
+  tenantId?: string;
+}
+
+export interface ItemProgramQuery extends PageQuery {
+  /**
+   * 节目ID
+   */
+  programId?: string | number;
+
+  /**
+   * 节目名称
+   */
+  name?: string;
+
+  /**
+   * 分辨率
+   */
+  resolutionRatio?: string;
+
+  /**
+   * 节目json
+   */
+  itemJsonStr?: string;
+
+  /**
+   * 图片地址
+   */
+  imgUrl?: string;
+
+  /**
+   * 状态
+   */
+  status?: number;
+
+  /**
+   * 节目时长
+   */
+  duration?: number;
+
+  /**
+   * 所属个人
+   */
+  user?: string;
+
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+}

smsb-plus-ui/src/api/smsb/source/minioData.ts

@@ -1,7 +1,6 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
 import { MinioDataVO, MinioDataForm, MinioDataQuery, SourceStatisticsVO } from '@/api/smsb/source/minioData_type';
-import { DeviceErrorRecordVO } from '@/api/smsb/device/errorRecord_type';
 
 /**
  * 查询文件资源列表
@@ -108,4 +107,3 @@ export const uploadChunk = (data: FormData) => {
     data
   });
 };
-

smsb-plus-ui/src/api/smsb/source/minioData_type.ts

@@ -55,6 +55,8 @@ export interface MinioDataVO {
   fileUrl: string;
 
   useNum: number;
+
+  md5: string;
 }
 
 export interface MinioDataForm extends BaseEntity {

smsb-plus-ui/src/components/BackgroundSelector.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="background-selector">
+    <template v-if="isCanvas">
+      <el-radio-group v-model="bgType" class="bg-type-radio" size="small">
+        <el-radio-button label="image">图片</el-radio-button>
+        <el-radio-button label="color">纯色</el-radio-button>
+      </el-radio-group>
+      <div class="bg-section" v-if="bgType === 'image'">
+        <div class="bg-label">选择背景图片</div>
+        <MediaFileSelector v-model="mediaId" accept="image/*" :single="true" :onlyImage="true" />
+      </div>
+      <div class="bg-section" v-else>
+        <div class="bg-label">选择纯色背景</div>
+        <el-color-picker v-model="color" />
+      </div>
+    </template>
+    <template v-else>
+      <div class="bg-section">
+        <div class="bg-label">选择颜色</div>
+        <el-color-picker v-model="color" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import MediaFileSelector from './MediaFileSelector.vue';
+
+const props = defineProps<{
+  modelValue: string; // bg 字段，canvas 可能是图片url或颜色，其他组件为颜色
+  isCanvas?: boolean; // 是否画布
+}>();
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const bgType = ref<'image' | 'color'>('color');
+const mediaId = ref<string | null>(null);
+const color = ref<string>(props.modelValue || '#ffffff');
+
+// 初始化类型
+if (props.isCanvas) {
+  if (props.modelValue && /^https?:\/\//.test(props.modelValue)) {
+    bgType.value = 'image';
+    mediaId.value = props.modelValue;
+  } else {
+    bgType.value = 'color';
+    color.value = props.modelValue || '#ffffff';
+  }
+}
+
+// 切换类型时同步
+watch(bgType, (val) => {
+  if (val === 'image') {
+    if (mediaId.value) {
+      emit('update:modelValue', mediaId.value);
+      emit('change', mediaId.value);
+    }
+  } else {
+    emit('update:modelValue', color.value);
+    emit('change', color.value);
+  }
+});
+
+// 监听图片选择
+watch(mediaId, (val) => {
+  if (bgType.value === 'image' && val) {
+    emit('update:modelValue', val);
+    emit('change', val);
+  }
+});
+
+// 监听颜色选择
+watch(color, (val) => {
+  if (bgType.value === 'color') {
+    emit('update:modelValue', val);
+    emit('change', val);
+  }
+});
+
+// 外部变更时同步内部
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (props.isCanvas) {
+      if (val && /^https?:\/\//.test(val)) {
+        bgType.value = 'image';
+        mediaId.value = val;
+      } else {
+        bgType.value = 'color';
+        color.value = val || '#ffffff';
+      }
+    } else {
+      color.value = val || '#ffffff';
+    }
+  }
+);
+</script>
+
+<style scoped>
+.background-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.bg-section {
+  margin-bottom: 6px;
+}
+
+.bg-label {
+  font-size: 13px;
+  color: #888;
+  margin-bottom: 2px;
+}
+
+.bg-type-radio {
+  margin-bottom: 8px;
+}
+</style>

smsb-plus-ui/src/components/MediaFileSelector.vue

@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <el-button type="primary" @click="dialogVisible = true">选择文件</el-button>
+    <div v-if="selectedFiles.length > 0" class="selected-files-list">
+      <el-tag v-for="(file, idx) in selectedFiles" :key="file.id" closable @close="removeFile(idx)" style="margin: 2px">
+        {{ file.name }}
+      </el-tag>
+    </div>
+    <el-dialog title="选择媒资文件" v-model="dialogVisible" width="900px" append-to-body @close="restoreSelection">
+      <el-form :inline="true" :model="queryParams" class="mb-2">
+        <el-form-item label="名称">
+          <el-input v-model="queryParams.originalName" placeholder="文件名" clearable style="width: 180px"
+            @keyup.enter="getFileList" />
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-select v-model="queryParams.type" clearable placeholder="全部" style="width: 120px">
+            <el-option label="全部" :value="''" />
+            <el-option label="图片" :value="1" />
+            <el-option label="视频" :value="2" />
+            <el-option label="音频" :value="3" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getFileList">搜索</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dialogLoading" ref="fileTable" :data="fileList" reserve-selection row-key="id"
+        @selection-change="handleSelectionFile" @select="handleSelect" @select-all="handleSelectAll">
+        <el-table-column type="selection" width="55" header-align="center" :selectable="isSelectableRow" />
+        <el-table-column label="类型" header-align="center" prop="type" width="80">
+          <template #default="scope">
+            <dict-tag :options="smsb_source_type" :value="scope.row.type" />
+          </template>
+        </el-table-column>
+        <el-table-column label="原名" header-align="left" prop="originalName" width="150" :show-overflow-tooltip="true" />
+        <el-table-column label="大小" header-align="center" prop="size" />
+        <el-table-column label="时长" header-align="center" prop="duration" />
+        <el-table-column label="截图" header-align="center" prop="screenshot">
+          <template #default="scope">
+            <image-preview :src="scope.row.screenshot" style="width: 40px; height: 40px; cursor: pointer" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="fileTotal > 0" :total="fileTotal" v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize" @pagination="getFileList" />
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmSelect">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { smsb_source_type } = toRefs<any>(proxy?.useDict('smsb_source_type'));
+import { ref, watch, defineProps, defineEmits, nextTick } from 'vue';
+import { listMinioData } from '@/api/smsb/source/minioData';
+import type { MinioDataVO, MinioDataQuery } from '@/api/smsb/source/minioData_type';
+
+const props = defineProps<{ modelValue: string; single?: boolean; onlyImage?: boolean }>();
+const emit = defineEmits(['update:modelValue']);
+
+const dialogVisible = ref(false);
+const dialogLoading = ref(false);
+const fileList = ref<MinioDataVO[]>([]);
+const fileTotal = ref(0);
+const selectedFiles = ref<any[]>([]);
+// 控制哪些行可选
+function isSelectableRow(row: any) {
+  if (props.onlyImage) return row.type === 1;
+  return true;
+}
+const fileTable = ref();
+
+const queryParams = ref<MinioDataQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  originalName: '',
+  type: ''
+});
+
+// 初始化时，如果有值，反序列化
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) {
+      try {
+        selectedFiles.value = JSON.parse(val);
+      } catch {
+        selectedFiles.value = [];
+      }
+    } else {
+      selectedFiles.value = [];
+    }
+  },
+  { immediate: true }
+);
+
+// 查询文件资源列表
+const getFileList = async () => {
+  dialogLoading.value = true;
+  try {
+    const res = await listMinioData(queryParams.value);
+    console.log('[getFileList] raw:', res);
+    console.log('[getFileList] rows:', res.rows);
+    const mapped = (res.rows || []).map((item: any, idx: number) => {
+      const sizeNum = Number(item.size);
+      const sizeStr = !isNaN(sizeNum) && sizeNum > 0 ? (sizeNum / 1024).toFixed(3) + 'MB' : '0MB';
+      if (isNaN(sizeNum)) {
+        console.warn(`[getFileList] row[${idx}] 非法size:`, item.size, item);
+      }
+      return {
+        ...item,
+        size: sizeStr
+      };
+    });
+    fileList.value = mapped;
+    console.log('[getFileList] mapped fileList:', mapped);
+    console.log('[getFileList] fileList.value:', fileList.value, 'isArray:', Array.isArray(fileList.value), 'length:', fileList.value.length);
+
+    fileTotal.value = res.total || 0;
+    await nextTick();
+    restoreSelection();
+  } finally {
+    dialogLoading.value = false;
+  }
+};
+
+// 多选框选中文件数据
+function handleSelectionFile(selection: MinioDataVO[]) {
+  console.log('[handleSelectionFile] selection:', selection);
+  if (props.single && props.onlyImage) {
+    // 单选且仅图片
+    if (selection.length > 0) {
+      const img = selection.find((item) => item.type === 1);
+      if (img) {
+        selectedFiles.value = [
+          {
+            id: img.id,
+            name: img.originalName,
+            type: img.type,
+            duration: 10,
+            order: 1,
+            url: img.fileUrl,
+            md5: img.md5
+          }
+        ];
+      } else {
+        selectedFiles.value = [];
+      }
+    } else {
+      selectedFiles.value = [];
+    }
+  } else if (props.single) {
+    // 单选任意类型
+    if (selection.length > 0) {
+      selectedFiles.value = [
+        {
+          id: selection[0].id,
+          name: selection[0].originalName,
+          type: selection[0].type,
+          duration: selection[0].duration,
+          order: 1,
+          url: selection[0].fileUrl,
+          md5: selection[0].md5
+        }
+      ];
+    } else {
+      selectedFiles.value = [];
+    }
+  } else {
+    // 多选多类型
+    selectedFiles.value = selection.map((item, idx) => ({
+      id: item.id,
+      name: item.originalName,
+      type: item.type,
+      duration: item.duration,
+      order: idx + 1,
+      url: item.fileUrl,
+      md5: item.md5
+    }));
+  }
+}
+// 取消单个选中
+function handleSelect(selection: MinioDataVO[], row: MinioDataVO) {
+  if (!selection.some((item) => String(item.id) === String(row.id))) {
+    selectedFiles.value = selectedFiles.value.filter((f) => String(f.id) !== String(row.id));
+    selectedFiles.value = selectedFiles.value.map((f, idx) => ({ ...f, order: idx + 1 }));
+  }
+}
+// 取消全选
+function handleSelectAll(selection: MinioDataVO[]) {
+  const currentPageIds = new Set(fileList.value.map((item) => String(item.id)));
+  const selectedIds = new Set(selection.map((item) => String(item.id)));
+  selectedFiles.value = selectedFiles.value.filter((f) => !currentPageIds.has(String(f.id)) || selectedIds.has(String(f.id)));
+  selectedFiles.value = selectedFiles.value.map((f, idx) => ({ ...f, order: idx + 1 }));
+}
+
+function removeFile(idx: number) {
+  selectedFiles.value.splice(idx, 1);
+  emitChange();
+}
+function confirmSelect() {
+  if (props.single && props.onlyImage) {
+    if (selectedFiles.value.length === 0 || selectedFiles.value[0].type !== 1) {
+      ElMessage.error('只能选择图片文件作为背景');
+      return;
+    }
+  }
+  dialogVisible.value = false;
+  emitChange();
+}
+function emitChange() {
+  emit('update:modelValue', JSON.stringify(selectedFiles.value));
+}
+// 弹窗关闭时还原选中状态
+function restoreSelection() {
+  nextTick(() => {
+    if (!fileTable.value) return;
+    const selectedIds = new Set(selectedFiles.value.map((f) => String(f.id)));
+    fileList.value.forEach((row) => {
+      fileTable.value.toggleRowSelection(row, selectedIds.has(String(row.id)));
+    });
+  });
+}
+
+// 弹窗首次打开时自动加载
+watch(dialogVisible, (val) => {
+  if (val) getFileList();
+});
+</script>
+
+<style scoped>
+.selected-files-list {
+  margin: 8px 0;
+}
+</style>

smsb-plus-ui/src/layout/components/Sidebar/index.vue

@@ -30,7 +30,7 @@ const topMenus = computed(() => permissionStore.getTopbarRoutes().filter((menu)
 const currentTopMenuPath = computed(() => {
   // console.log("[Sidebar] route.path", route.path);
   // 特例
-  if (route.path === '/source/push/approval' || route.path.startsWith('/source/split/edit')) {
+  if (route.path === '/source/push/approval' || route.path.startsWith('/source/split/edit') || route.path.startsWith('/smsb/itemProgram/edit')) {
     return '/source';
   }
   // 取当前路由的一级菜单 path

smsb-plus-ui/src/router/index.ts

@@ -197,6 +197,20 @@ export const dynamicRoutes: RouteRecordRaw[] = [
       }
     ]
   },
+  {
+    path: '/smsb/itemProgram',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:itemProgram:edit'],
+    children: [
+      {
+        path: 'edit/:id',
+        component: () => import('@/views/smsb/itemProgram/EditProgram.vue'),
+        name: 'EditItemProgram',
+        meta: { title: '编辑节目', activeMenu: '/smsb/itemProgram', icon: '' }
+      }
+    ]
+  },
   {
     path: '/source/split',
     component: Layout,

smsb-plus-ui/src/views/smsb/itemProgram/EditProgram.vue

@@ -0,0 +1,1000 @@
+<template>
+  <div class="edit-program-layout">
+    <!-- 左侧组件栏及返回按钮 -->
+    <div class="sidebar">
+      <el-button class="back-btn" type="default" @click="goBack" circle>
+        <el-icon>
+          <ArrowLeft />
+        </el-icon>
+      </el-button>
+      <div class="sidebar-title">组件</div>
+      <template v-for="(item, idx) in editorContent.elements.slice().sort((a, b) => b.depth - a.depth)"
+        :key="item.depth + '-' + item.type">
+        <div class="sidebar-item component-item"
+          :class="{ 'selected': selectedComponent === item || (item.type === 'canvas' && selectedComponent && selectedComponent.type === 'canvas') }"
+          @click="item.type === 'canvas' ? selectCanvasFromSidebar() : selectComponent(item)" draggable="true"
+          @dragstart="onSidebarDragStart(item, idx, $event)" @dragover.prevent="onSidebarDragOver(item, idx, $event)"
+          @drop.prevent="onSidebarDrop(item, idx, $event)">
+          <div class="component-icon-text">
+            <template v-if="item.type === 'canvas'">画布</template>
+            <template v-else-if="item.type === 'text'">文本</template>
+            <template v-else-if="item.type === 'scrollingText'">滚动文本</template>
+            <template v-else-if="item.type === 'mediaAsset'">媒资</template>
+            <template v-else-if="item.type === 'live'">直播</template>
+            <template v-else-if="item.type === 'webPage'">网页</template>
+            <template v-else-if="item.type === 'clock'">时钟</template>
+            <!-- 未来可扩展图片等类型 -->
+          </div>
+        </div>
+      </template>
+      <div class="sidebar-recycle-bin" @dragover.prevent @drop="onRecycleDrop($event)" title="拖动组件到此处删除">
+        <el-icon style="font-size: 28px; color: #bbb">
+          <svg viewBox="0 0 1024 1024" width="1em" height="1em">
+            <path
+              d="M320 896c0 35.2 28.8 64 64 64h256c35.2 0 64-28.8 64-64V320H320v576z m352-704V160c0-35.2-28.8-64-64-64H416c-35.2 0-64 28.8-64 64v32H160v64h704v-64H672z m-64 0H416V160h192v32z"
+              fill="currentColor"></path>
+          </svg>
+        </el-icon>
+        <div style="font-size: 12px; color: #bbb">回收站</div>
+      </div>
+    </div>
+
+    <!-- 中间编辑区 -->
+    <div class="main-editor">
+      <div class="toolbar">
+        <div class="toolbar-item" draggable="true" @dragstart="onToolbarDragStart('text')">文本</div>
+        <div class="toolbar-item" draggable="true" @dragstart="onToolbarDragStart('scrollingText')">滚动文本</div>
+        <div class="toolbar-item" draggable="true" @dragstart="onToolbarDragStart('mediaAsset')">媒资</div>
+        <div class="toolbar-item" draggable="true" @dragstart="onToolbarDragStart('live')">直播</div>
+        <div class="toolbar-item" draggable="true" @dragstart="onToolbarDragStart('webPage')">网页</div>
+        <div class="toolbar-item" draggable="true" @dragstart="onToolbarDragStart('clock')">时钟</div>
+        <!-- 可扩展更多组件 -->
+      </div>
+      <div class="editor-canvas" ref="editorCanvasRef" @dragover.prevent @drop="onCanvasDrop">
+        <CanvasBoard v-if="canvasItem" :width="canvasItem.width" :height="canvasItem.height" :bg="canvasItem.bg"
+          :scale="canvasScale" @click.stop="selectComponent(canvasItem)"
+          :class="{ selected: selectedComponent === canvasItem }">
+          <template #default>
+            <template
+              v-for="item in editorContent.elements.filter((el) => el.type !== 'canvas').sort((a, b) => a.depth - b.depth)"
+              :key="item.depth + '-' + item.type">
+              <div :style="{
+                position: 'absolute',
+                left: (item.x || 0) * canvasScale + 'px',
+                top: (item.y || 0) * canvasScale + 'px',
+                width: (item.width || 200) * canvasScale + 'px',
+                height: (item.height || 40) * canvasScale + 'px',
+                cursor: draggingId === item.depth ? 'grabbing' : 'move',
+                zIndex: 10
+              }" @mousedown="onElementMouseDown($event, item)">
+                <TextBoard v-if="item.type === 'text'" :text="item.text" :color="item.color" :font-size="item.fontSize"
+                  :font-weight="item.fontWeight" :align="item.align" :width="item.width * canvasScale"
+                  :height="item.height * canvasScale" :selected="selectedComponent === item" @resize="
+                    ({ width, height }) => {
+                      item.width = width / canvasScale;
+                      item.height = height / canvasScale;
+                    }
+                  " @click.stop="selectComponent(item)" :class="{ selected: selectedComponent === item }" />
+                <ScrollingTextBoard v-if="item.type === 'scrollingText'" :text="item.text" :color="item.color"
+                  :font-size="item.fontSize" :font-weight="item.fontWeight" :align="item.align"
+                  :width="item.width * canvasScale" :height="item.height * canvasScale" :speed="item.speed"
+                  :selected="selectedComponent === item" @resize="
+                    ({ width, height }) => {
+                      item.width = width / canvasScale;
+                      item.height = height / canvasScale;
+                    }
+                  " @click.stop="selectComponent(item)" :class="{ selected: selectedComponent === item }" />
+                <MediaAssetBoard v-if="item.type === 'mediaAsset'" :width="item.width * canvasScale"
+                  :height="item.height * canvasScale" :media-id="item.mediaId" :selected="selectedComponent === item"
+                  @resize="
+                    ({ width, height }) => {
+                      item.width = width / canvasScale;
+                      item.height = height / canvasScale;
+                    }
+                  " @click.stop="selectComponent(item)" :class="{ selected: selectedComponent === item }" />
+                <LiveBoard v-if="item.type === 'live'" :width="item.width * canvasScale"
+                  :height="item.height * canvasScale" :live-url="item.liveUrl" :play-audio="item.playAudio"
+                  :selected="selectedComponent === item" @resize="
+                    ({ width, height }) => {
+                      item.width = width / canvasScale;
+                      item.height = height / canvasScale;
+                    }
+                  " @click.stop="selectComponent(item)" :class="{ selected: selectedComponent === item }" />
+                <WebPageBoard v-if="item.type === 'webPage'" :width="item.width * canvasScale"
+                  :height="item.height * canvasScale" :url="item.url" :selected="selectedComponent === item" @resize="
+                    ({ width, height }) => {
+                      item.width = width / canvasScale;
+                      item.height = height / canvasScale;
+                    }
+                  " @click.stop="selectComponent(item)" :class="{ selected: selectedComponent === item }" />
+                <ClockBoard v-if="item.type === 'clock'" :width="item.width * canvasScale"
+                  :height="item.height * canvasScale" :format="item.format" :selected="selectedComponent === item"
+                  @resize="
+                    ({ width, height }) => {
+                      item.width = width / canvasScale;
+                      item.height = height / canvasScale;
+                    }
+                  " @click.stop="selectComponent(item)" :class="{ selected: selectedComponent === item }" />
+                <!-- 未来可扩展更多类型 -->
+              </div>
+            </template>
+          </template>
+        </CanvasBoard>
+      </div>
+      <el-button type="primary" class="save-btn" :loading="saveLoading" :disabled="saveLoading"
+        @click="handleSave">保存</el-button>
+    </div>
+
+    <!-- 右侧属性栏 -->
+    <div class="property-panel">
+      <div class="property-title">属性</div>
+      <div class="property-form-area">
+        <div class="property-info">
+          <div class="property-info-row">
+            <span class="property-info-label">节目名称：</span>
+            <span>{{ programName }}</span>
+          </div>
+          <div class="property-info-row">
+            <span class="property-info-label">分辨率：</span>
+            <span>{{ programResolution }}</span>
+          </div>
+        </div>
+        <!-- 动态显示选中组件的可编辑属性 -->
+        <template v-if="selectedComponent">
+          <div style="margin-bottom: 8px; font-weight: bold">组件属性</div>
+          <template v-for="[key, value] in Object.entries(selectedComponent || {})" :key="key">
+            <el-form-item v-if="showEditableProp(key)" :label="getPropLabel(key)">
+              <template v-if="selectedComponent.type === 'live' && key === 'playAudio'">
+                <el-switch v-model="selectedComponent[key]" active-text="开" inactive-text="关" />
+              </template>
+              <template v-else-if="key === 'mediaId'">
+                <MediaFileSelector v-model="selectedComponent[key]" />
+              </template>
+              <template v-else-if="key === 'bg'">
+                <BackgroundSelector v-model="selectedComponent[key]" :isCanvas="selectedComponent.type === 'canvas'" />
+              </template>
+              <template
+                v-else-if="key === 'color' && (selectedComponent.type === 'text' || selectedComponent.type === 'scrollingText')">
+                <BackgroundSelector v-model="selectedComponent[key]" :isCanvas="false" />
+              </template>
+              <template v-else-if="selectedComponent.type === 'clock' && key === 'format'">
+                <el-select v-model="selectedComponent[key]" style="width: 100%">
+                  <el-option label="24小时制 (HH:mm:ss)" value="24h" />
+                  <el-option label="12小时制 (hh:mm:ss A)" value="12h" />
+                  <el-option label="日期+时间 (YYYY-MM-DD HH:mm:ss)" value="date" />
+                </el-select>
+              </template>
+              <template v-else>
+                <el-input v-model="selectedComponent[key]" />
+              </template>
+            </el-form-item>
+          </template>
+          <!-- 对齐尺寸操作区 -->
+          <div style="margin: 12px 0">
+            <div style="font-weight: bold; margin-bottom: 10px">对齐尺寸</div>
+            <!-- 第一组 2x2 -->
+            <div
+              style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; padding-left: 2px">
+              <el-button size="small" style="width: 100%" @click="alignComponent('left')">水平靠左</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('right')">水平靠右</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('top')">垂直靠上</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('bottom')">垂直靠下</el-button>
+            </div>
+            <hr style="border: none; border-top: 1px solid #eee; margin: 8px 0" />
+            <!-- 第二组 2x2 -->
+            <div
+              style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; padding-left: 2px">
+              <el-button size="small" style="width: 100%" @click="alignComponent('width-full')">宽铺满</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('width-half')">宽半屏</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('width-third')">宽1/3屏</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('width-quarter')">宽1/4屏</el-button>
+            </div>
+            <hr style="border: none; border-top: 1px solid #eee; margin: 8px 0" />
+            <!-- 第三组 2x2 -->
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; padding-left: 2px">
+              <el-button size="small" style="width: 100%" @click="alignComponent('height-full')">高铺满</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('height-half')">高半屏</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('height-third')">高1/3屏</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('height-quarter')">高1/4屏</el-button>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div style="color: #bbb">请点击编辑区中的组件以编辑属性</div>
+        </template>
+      </div>
+      <hr class="property-divider" />
+      <template v-if="isLocalDev">
+        <div class="json-debug-title">当前JSON</div>
+        <el-input class="json-debug" type="textarea" :rows="8" :model-value="JSON.stringify(editorContent, null, 2)"
+          readonly />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 本地开发环境开关，正式环境请设为 false 或用 import.meta.env 读取
+const isLocalDev = false;
+// 对齐尺寸操作
+function alignComponent(type: string) {
+  if (!selectedComponent.value || selectedComponent.value.type === 'canvas') return;
+  // 找到canvas尺寸
+  const canvas = editorContent.value.elements.find((el: any) => el.type === 'canvas');
+  if (!canvas) return;
+  const cW = Number(canvas.width) || 600;
+  const cH = Number(canvas.height) || 400;
+  // 只操作当前选中组件
+  const comp = selectedComponent.value;
+  switch (type) {
+    case 'left':
+      comp.x = 0;
+      break;
+    case 'right':
+      comp.x = cW - (Number(comp.width) || 0);
+      break;
+    case 'top':
+      comp.y = 0;
+      break;
+    case 'bottom':
+      comp.y = cH - (Number(comp.height) || 0);
+      break;
+    case 'width-full':
+      comp.x = 0;
+      comp.width = cW;
+      break;
+    case 'width-half':
+      comp.x = 0;
+      comp.width = Math.round(cW / 2);
+      break;
+    case 'width-third':
+      comp.x = 0;
+      comp.width = Math.round(cW / 3);
+      break;
+    case 'width-quarter':
+      comp.x = 0;
+      comp.width = Math.round(cW / 4);
+      break;
+    case 'height-full':
+      comp.y = 0;
+      comp.height = cH;
+      break;
+    case 'height-half':
+      comp.y = 0;
+      comp.height = Math.round(cH / 2);
+      break;
+    case 'height-third':
+      comp.y = 0;
+      comp.height = Math.round(cH / 3);
+      break;
+    case 'height-quarter':
+      comp.y = 0;
+      comp.height = Math.round(cH / 4);
+      break;
+  }
+}
+
+// 拖拽排序相关
+const sidebarDrag = ref<{ item: any; idx: number } | null>(null);
+
+// 回收站拖拽释放事件，移除对应组件
+function onRecycleDrop(e: DragEvent) {
+  const depth = e.dataTransfer?.getData('component-depth');
+  if (!depth) return;
+  // 不能删除画布类型
+  const idx = editorContent.value.elements.findIndex((el) => String(el.depth) === depth && el.type !== 'canvas');
+  if (idx > -1) {
+    editorContent.value.elements.splice(idx, 1);
+    ElMessage.success('组件已移除');
+  }
+}
+
+// 拖拽开始时，将组件depth放入dataTransfer
+function onSidebarDragStart(item: any, idx: number, e?: DragEvent) {
+  sidebarDrag.value = { item, idx };
+  if (e && e.dataTransfer) {
+    e.dataTransfer.setData('component-depth', String(item.depth));
+  }
+}
+function onSidebarDragOver(targetItem: any, targetIdx: number, e: DragEvent) {
+  e.preventDefault();
+}
+function onSidebarDrop(targetItem: any, targetIdx: number, e: DragEvent) {
+  if (!sidebarDrag.value) return;
+  const elements = editorContent.value.elements;
+  // 排序前先按 depth 降序
+  const sorted = elements.slice().sort((a, b) => b.depth - a.depth);
+  const fromIdx = sorted.findIndex((el) => el === sidebarDrag.value!.item);
+  const toIdx = sorted.findIndex((el) => el === targetItem);
+  if (fromIdx === -1 || toIdx === -1 || fromIdx === toIdx) {
+    sidebarDrag.value = null;
+    return;
+  }
+  // 交换depth
+  const fromDepth = sorted[fromIdx].depth;
+  const toDepth = sorted[toIdx].depth;
+  sorted[fromIdx].depth = toDepth;
+  sorted[toIdx].depth = fromDepth;
+  // 重新赋值到原数组
+  for (let i = 0; i < sorted.length; i++) {
+    const origIdx = elements.findIndex((el) => el === sorted[i]);
+    if (origIdx !== -1) elements[origIdx].depth = sorted[i].depth;
+  }
+  sidebarDrag.value = null;
+}
+
+import { ref, onMounted, computed, nextTick } from 'vue';
+import CanvasBoard from './component/CanvasBoard.vue';
+import TextBoard from './component/TextBoard.vue';
+import ScrollingTextBoard from './component/ScrollingTextBoard.vue';
+import MediaAssetBoard from './component/MediaAssetBoard.vue';
+import MediaFileSelector from '@/components/MediaFileSelector.vue';
+import BackgroundSelector from '@/components/BackgroundSelector.vue';
+import LiveBoard from './component/LiveBoard.vue';
+import WebPageBoard from './component/WebPageBoard.vue';
+import ClockBoard from './component/ClockBoard.vue';
+import {
+  canvasPropNameMap,
+  textPropNameMap,
+  scrollingTextPropNameMap,
+  mediaAssetPropNameMap,
+  livePropNameMap,
+  webPagePropNameMap,
+  clockPropNameMap
+} from './component/propNameMaps';
+// 拖拽类型
+const dragType = ref<string | null>(null);
+// 获取最大 depth
+function getMaxDepth() {
+  if (!editorContent.value.elements.length) return 0;
+  return Math.max(...editorContent.value.elements.map((el: any) => el.depth || 0));
+}
+import { useRoute, useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import { ArrowLeft } from '@element-plus/icons-vue';
+import { getItemProgram, updateItemProgram } from '@/api/smsb/source/item_program';
+
+const route = useRoute();
+
+// 当前选中组件
+const selectedComponent = ref<any>(null);
+
+// 选中组件方法
+function selectComponent(item: any) {
+  selectedComponent.value = item;
+}
+
+// 左侧栏点击选中画布
+function selectCanvasFromSidebar() {
+  const canvas = editorContent.value.elements.find((el: any) => el.type === 'canvas');
+  if (canvas) {
+    selectedComponent.value = canvas;
+  }
+}
+
+// 属性栏显示哪些属性可编辑（可根据实际需求过滤）
+function showEditableProp(key: string) {
+  // 明确排除 type 字段，防止被编辑
+  if (!selectedComponent.value) return false;
+  // 对于文本和滚动文本组件，移除 'fontWeight' 属性
+  if ((selectedComponent.value.type === 'text' || selectedComponent.value.type === 'scrollingText') && (key === 'fontWeight' || key === 'align')) {
+    return false;
+  }
+  return !['type', 'depth'].includes(key);
+}
+
+// 获取属性中文名
+function getPropLabel(key: string) {
+  if (selectedComponent.value?.type === 'canvas') {
+    return canvasPropNameMap[key] || key;
+  } else if (selectedComponent.value?.type === 'text') {
+    return textPropNameMap[key] || key;
+  } else if (selectedComponent.value?.type === 'scrollingText') {
+    return scrollingTextPropNameMap[key] || key;
+  } else if (selectedComponent.value?.type === 'mediaAsset') {
+    return mediaAssetPropNameMap[key] || key;
+  } else if (selectedComponent.value?.type === 'live') {
+    return livePropNameMap[key] || key;
+  } else if (selectedComponent.value?.type === 'webPage') {
+    return webPagePropNameMap[key] || key;
+  } else if (selectedComponent.value?.type === 'clock') {
+    return clockPropNameMap[key] || key;
+  }
+  return key;
+}
+
+const router = useRouter();
+// 自动修正 id 类型，确保为 string 或 number
+const rawId = route.params.id;
+const id = ref<string | number>(Array.isArray(rawId) ? rawId[0] : rawId);
+
+// 自动填充画布分辨率
+onMounted(async () => {
+  try {
+    const res = await getItemProgram(id.value);
+    const data = res.data;
+    let resolutionRatio = '';
+    if (data && data.resolutionRatio) {
+      resolutionRatio = data.resolutionRatio;
+    }
+    // 优先使用后端返回的 itemJsonStr 字段
+    let parsed = { elements: [] };
+    if (data && data.itemJsonStr) {
+      try {
+        parsed = JSON.parse(data.itemJsonStr);
+      } catch (err) {
+        // 解析失败则回退到空布局
+        parsed = { elements: [] };
+      }
+    }
+    editorContent.value = parsed;
+    ensureCanvasAndDepth(editorContent.value.elements, resolutionRatio);
+  } catch (e) {
+    // fallback: 初始化 elements 并插入默认画布
+    editorContent.value = { elements: [] };
+    ensureCanvasAndDepth(editorContent.value.elements);
+  }
+});
+
+function ensureCanvasAndDepth(elements, resolutionRatio?: string) {
+  let width = 600,
+    height = 400;
+  if (resolutionRatio) {
+    const [w, h] = resolutionRatio.split('x').map(Number);
+    if (w && h) {
+      width = w;
+      height = h;
+      // console.log('#136: ', width, height);
+    }
+  }
+  // 检查是否有 type: 'canvas' 的组件
+  let idx = elements.findIndex((el) => el.type === 'canvas');
+  if (idx === -1) {
+    // console.log('#141: ', width, height);
+    elements.unshift({ type: 'canvas', width, height, bg: '#fff', depth: 0 });
+  } else {
+    let canvas = elements[idx];
+    let changed = false;
+    if (!canvas.width) {
+      canvas = { ...canvas, width };
+      changed = true;
+    }
+    if (!canvas.height) {
+      canvas = { ...canvas, height };
+      changed = true;
+    }
+    if (changed) {
+      elements[idx] = canvas; // 替换整个对象，确保响应式
+      // console.log('#145: ', width, height, '响应式canvas:', canvas);
+    } else {
+      // console.log('#145: ', width, height);
+    }
+  }
+  // 按 depth 排序，如果没有 depth 则补齐
+  elements.forEach((el, idx) => {
+    if (typeof el.depth !== 'number') {
+      el.depth = el.type === 'canvas' ? 0 : idx + 1;
+    }
+  });
+  elements.sort((a, b) => a.depth - b.depth);
+  return elements;
+}
+
+interface EditorContent {
+  name?: string;
+  resolutionRatio?: string;
+  elements: any[];
+  [key: string]: any;
+}
+const editorContent = ref<EditorContent>({ elements: [] });
+
+// editor-canvas 缩放逻辑
+const editorCanvasRef = ref<HTMLElement | null>(null);
+const containerSize = ref({ width: 0, height: 0 });
+
+const draggingId = ref<number | null>(null);
+let dragStart = { x: 0, y: 0, offsetX: 0, offsetY: 0 };
+
+function onElementMouseDown(e: MouseEvent, item: any) {
+  e.stopPropagation();
+  draggingId.value = item.depth;
+  dragStart = {
+    x: e.clientX,
+    y: e.clientY,
+    offsetX: item.x || 0,
+    offsetY: item.y || 0
+  };
+  document.addEventListener('mousemove', onElementMouseMove);
+  document.addEventListener('mouseup', onElementMouseUp);
+}
+
+function onElementMouseMove(e: MouseEvent) {
+  if (draggingId.value === null) return;
+  const item = editorContent.value.elements.find((el) => el.depth === draggingId.value);
+  if (!item) return;
+  // 拖拽时坐标除以缩放比例，保证拖拽速度和鼠标一致
+  item.x = dragStart.offsetX + (e.clientX - dragStart.x) / canvasScale.value;
+  item.y = dragStart.offsetY + (e.clientY - dragStart.y) / canvasScale.value;
+}
+
+function onElementMouseUp() {
+  draggingId.value = null;
+  document.removeEventListener('mousemove', onElementMouseMove);
+  document.removeEventListener('mouseup', onElementMouseUp);
+}
+
+function onToolbarDragStart(type: string) {
+  dragType.value = type;
+}
+
+function onCanvasDrop(e: DragEvent) {
+  if (!dragType.value) return;
+  const rect = editorCanvasRef.value?.getBoundingClientRect();
+  const x = e.clientX - (rect?.left || 0);
+  const y = e.clientY - (rect?.top || 0);
+  if (dragType.value === 'text') {
+    const newText = {
+      type: 'text',
+      text: '新文本',
+      color: '#222',
+      fontSize: 24,
+      fontWeight: 'normal',
+      align: 'center',
+      x: x,
+      y: y,
+      width: 200,
+      height: 40,
+      depth: getMaxDepth() + 1
+    };
+    editorContent.value.elements.push(newText);
+    nextTick(() => selectComponent(newText));
+  } else if (dragType.value === 'scrollingText') {
+    const newScrollingText = {
+      type: 'scrollingText',
+      text: '新滚动文本',
+      color: '#222',
+      fontSize: 24,
+      fontWeight: 'normal',
+      align: 'center',
+      speed: 50,
+      x: x,
+      y: y,
+      width: 300,
+      height: 40,
+      depth: getMaxDepth() + 1
+    };
+    editorContent.value.elements.push(newScrollingText);
+    nextTick(() => selectComponent(newScrollingText));
+  } else if (dragType.value === 'mediaAsset') {
+    const newMediaAsset = {
+      type: 'mediaAsset',
+      mediaId: '',
+      x: x,
+      y: y,
+      width: 120,
+      height: 120,
+      depth: getMaxDepth() + 1
+    };
+    editorContent.value.elements.push(newMediaAsset);
+    nextTick(() => selectComponent(newMediaAsset));
+  } else if (dragType.value === 'live') {
+    const newLive = {
+      type: 'live',
+      liveUrl: '',
+      playAudio: true,
+      x: x,
+      y: y,
+      width: 200,
+      height: 120,
+      depth: getMaxDepth() + 1
+    };
+    editorContent.value.elements.push(newLive);
+    nextTick(() => selectComponent(newLive));
+  } else if (dragType.value === 'webPage') {
+    const newWebPage = {
+      type: 'webPage',
+      url: '',
+      x: x,
+      y: y,
+      width: 120,
+      height: 120,
+      depth: getMaxDepth() + 1
+    };
+    editorContent.value.elements.push(newWebPage);
+    nextTick(() => selectComponent(newWebPage));
+  } else if (dragType.value === 'clock') {
+    const newClock = {
+      type: 'clock',
+      format: '24h', // default format, can be '24h', '12h', or 'dateTime'
+      x: x,
+      y: y,
+      width: 200,
+      height: 60,
+      depth: getMaxDepth() + 1
+    };
+    editorContent.value.elements.push(newClock);
+    nextTick(() => selectComponent(newClock));
+  }
+  dragType.value = null;
+}
+
+function updateContainerSize() {
+  if (editorCanvasRef.value) {
+    containerSize.value.width = editorCanvasRef.value.clientWidth;
+    containerSize.value.height = editorCanvasRef.value.clientHeight;
+  }
+}
+
+onMounted(async () => {
+  nextTick(updateContainerSize);
+  window.addEventListener('resize', updateContainerSize);
+  // 获取节目详细信息并补充到 editorContent
+  try {
+    const res = await getItemProgram(id.value);
+    let name = res.data?.name || '';
+    let resolutionRatio = res.data?.resolutionRatio || '';
+    let parsed: any = { elements: [] };
+    if (res.data && res.data.itemJsonStr) {
+      try {
+        parsed = JSON.parse(res.data.itemJsonStr);
+      } catch (err) {
+        parsed = { elements: [] };
+      }
+    }
+    // 合并 name、resolutionRatio 字段，保证结构完整
+    editorContent.value = {
+      ...parsed,
+      name,
+      resolutionRatio,
+      elements: Array.isArray(parsed.elements) ? parsed.elements : []
+    };
+    ensureCanvasAndDepth(editorContent.value.elements, editorContent.value.resolutionRatio);
+  } catch (e) {
+    // fallback: 初始化 elements 并插入默认画布，且补齐基础字段
+    editorContent.value = {
+      name: '',
+      resolutionRatio: '',
+      elements: []
+    };
+    ensureCanvasAndDepth(editorContent.value.elements);
+  }
+});
+
+const canvas = computed(() => editorContent.value.elements.find((el: any) => el.type === 'canvas'));
+
+const canvasScale = computed(() => {
+  if (!canvas.value) return 1;
+  const cW = Number(canvas.value.width) || 600;
+  const cH = Number(canvas.value.height) || 400;
+  const boxW = containerSize.value.width;
+  const boxH = containerSize.value.height;
+  if (!boxW || !boxH) return 1;
+  return Math.min(boxW / cW, boxH / cH, 1);
+});
+
+// 修复：为模板提供 canvasItem 变量
+const canvasItem = computed(() => editorContent.value.elements.find((el: any) => el.type === 'canvas'));
+
+// 右侧属性栏：节目名称和分辨率
+console.log(editorContent.value);
+const programName = computed(() => editorContent.value.name || '-');
+const programResolution = computed(() => {
+  // 优先取 editorContent.value.resolutionRatio，其次 canvas 宽高
+  if (editorContent.value.resolutionRatio) return editorContent.value.resolutionRatio;
+  const canvas = editorContent.value.elements?.find((el: any) => el.type === 'canvas');
+  if (canvas && canvas.width && canvas.height) return `${canvas.width}x${canvas.height}`;
+  return '-';
+});
+
+const saveLoading = ref(false);
+const handleSave = async () => {
+  saveLoading.value = true;
+  try {
+    // 先获取后端原始数据，避免遗漏字段
+    const res = await getItemProgram(id.value);
+    const data = res.data || {};
+    // 用最新 JSON 覆盖
+    data.itemJsonStr = JSON.stringify(editorContent.value);
+    await updateItemProgram(data);
+    ElMessage.success('保存成功，所有数据已同步到数据库');
+  } catch (e) {
+    ElMessage.error('保存失败，请重试');
+  } finally {
+    saveLoading.value = false;
+  }
+};
+
+const goBack = () => {
+  router.push('/source/program');
+};
+</script>
+
+<style scoped>
+.edit-program-layout {
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  background: #f6f8fa;
+  min-width: 900px;
+}
+
+.sidebar-recycle-bin {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+  padding: 8px 0 0 0;
+  border-top: 1px dashed #eee;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.sidebar {
+  width: 90px;
+  background: #232a36;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 18px;
+  padding-bottom: 24px;
+  box-sizing: border-box;
+  height: 100vh;
+}
+
+.sidebar-title {
+  font-size: 16px;
+  margin-bottom: 18px;
+}
+
+.sidebar-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 18px;
+  cursor: pointer;
+  width: 90%;
+}
+
+.sidebar-icon {
+  width: 34px;
+  height: 34px;
+  margin-bottom: 4px;
+}
+
+.sidebar-icon.text {
+  width: 34px;
+  height: 34px;
+  background: #fff;
+  color: #232a36;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 22px;
+  border-radius: 6px;
+  margin-bottom: 4px;
+}
+
+.main-editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+  position: relative;
+}
+
+.editor-canvas {
+  width: 90%;
+  height: 75%;
+  background: #e9eef3;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24px;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
+  position: relative;
+  overflow: hidden;
+}
+
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  align-self: flex-start;
+  align-items: center;
+  height: 50px;
+  width: 700px;
+  margin-left: 5%;
+  margin-top: -5%;
+  margin-bottom: 1%;
+  background: #fafbfc;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  gap: 16px;
+  padding: 0 16px;
+}
+
+.toolbar-item {
+  user-select: none;
+  cursor: grab;
+  background: #fff;
+  border-radius: 4px;
+  /* margin: 8px 0 8px 8px; */
+  width: 92px;
+  min-height: 50px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  font-weight: 500;
+  letter-spacing: 1px;
+  text-align: center;
+  transition: background 0.2s;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
+  /* padding: 0 8px; */
+}
+
+.toolbar-item:active {
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.13);
+  border-color: #409eff;
+}
+
+.canvas-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.canvas-icon {
+  width: 120px;
+  height: 120px;
+  margin-bottom: 18px;
+}
+
+.canvas-text {
+  color: #222;
+  font-size: 22px;
+}
+
+.save-btn {
+  align-self: flex-end;
+  margin-right: 8vw;
+}
+
+.back-btn {
+  margin-bottom: 16px;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
+  border: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.property-info {
+  margin-bottom: 18px;
+}
+
+.property-info-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.property-info-label {
+  color: #888;
+  min-width: 72px;
+  font-weight: 500;
+}
+
+.property-panel {
+  width: 260px;
+  background: #fff;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.03);
+  padding: 32px 18px 0 18px;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  position: relative;
+  border-left: 1px solid #ececec;
+  box-sizing: border-box;
+  justify-content: flex-start;
+}
+
+.property-form-area {
+  flex: 0 0 auto;
+}
+
+.property-divider {
+  height: 1px;
+  background: #ececec;
+  margin: 18px 0 12px 0;
+  width: 100%;
+  border: none;
+}
+
+.el-button+.el-button {
+  margin-left: 0px;
+}
+
+.json-debug-title {
+  margin-top: 30px;
+  font-size: 14px;
+  color: #888;
+  font-weight: bold;
+}
+
+.json-debug {
+  margin-top: 8px;
+  font-size: 13px;
+  background: #f6f8fa;
+  color: #222;
+  font-family: 'Fira Mono', 'Consolas', monospace;
+}
+
+.property-title {
+  font-size: 16px;
+  margin-bottom: 18px;
+}
+
+.canvas-default {
+  width: 600px;
+  height: 400px;
+  background: #fff;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  color: #aaa;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.component-item {
+  border: 2px solid #e3e3e3;
+  border-radius: 10px;
+  background: #fafbfc;
+  margin-bottom: 16px;
+  padding: 18px 0;
+  text-align: center;
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.component-item.selected {
+  border-color: #409eff;
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.15);
+  background: #eaf6ff;
+}
+
+.component-icon-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-size: 18px;
+  color: #222;
+}
+
+.sidebar-item-disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+</style>

smsb-plus-ui/src/views/smsb/itemProgram/component/CanvasBoard.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="canvas-board-wrapper" :style="wrapperStyle">
+    <div class="canvas-board" :style="canvasStyle">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+interface Props {
+  width?: number | string;
+  height?: number | string;
+  bg?: string;
+  scale?: number;
+}
+const props = defineProps<Props>();
+const canvasStyle = computed(() => ({
+  width: '100%',
+  height: '100%',
+  background: typeof props.bg === 'string' && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(props.bg) ? props.bg : '#fff',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: '20px',
+  color: '#aaa',
+  borderRadius: '12px',
+  boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
+}));
+
+const wrapperStyle = computed(() => {
+  const width = typeof props.width === 'number' ? props.width : parseFloat(props.width || '600');
+  const height = typeof props.height === 'number' ? props.height : parseFloat(props.height || '400');
+  const scale = props.scale && props.scale !== 1 ? props.scale : 1;
+  return {
+    width: width * scale + 'px',
+    height: height * scale + 'px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    overflow: 'hidden'
+  };
+});
+</script>
+
+<style scoped>
+.canvas-board-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.canvas-board {
+  transition: all 0.2s;
+}
+</style>

smsb-plus-ui/src/views/smsb/itemProgram/component/ClockBoard.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="clock-board-wrapper" :class="{ selected }"
+    :style="{ width: '100%', height: '100%', position: 'relative' }">
+    <div class="clock-board" :style="clockStyle">{{ formattedTime }}</div>
+    <template v-if="selected">
+      <div v-for="dir in ['tr', 'tl', 'br', 'bl']" :key="dir" class="resize-handle" :class="dir"
+        @mousedown.stop="onResizeMouseDown($event, dir)"></div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+const emit = defineEmits(['resize']);
+interface Props {
+  color?: string;
+  fontSize?: string | number;
+  fontWeight?: string | number;
+  align?: 'left' | 'center' | 'right';
+  width?: number;
+  height?: number;
+  selected?: boolean;
+  format?: '24h' | '12h' | 'date';
+}
+const props = defineProps<Props>();
+const selected = computed(() => !!props.selected);
+const clockStyle = computed(() => ({
+  color: props.color || '#222',
+  fontSize: typeof props.fontSize === 'number' ? props.fontSize + 'px' : props.fontSize || '24px',
+  fontWeight: props.fontWeight || 'normal',
+  textAlign: props.align || 'center',
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: props.align === 'left' ? 'flex-start' : props.align === 'right' ? 'flex-end' : 'center',
+  userSelect: 'none'
+}));
+
+const formats = {
+  '24h': '24小时制 (HH:mm:ss)',
+  '12h': '12小时制 (hh:mm:ss A)',
+  'date': '日期+时间 (YYYY-MM-DD HH:mm:ss)'
+};
+import { watch } from 'vue';
+
+const format = ref<'24h' | '12h' | 'date'>(props.format || '24h');
+
+// 保持 format 与 props.format 同步
+watch(
+  () => props.format,
+  (val) => {
+    if (val && val !== format.value) {
+      format.value = val;
+    }
+  }
+);
+
+watch(format, (val) => { });
+
+const now = ref(new Date());
+
+const formattedTime = computed(() => {
+  const d = now.value;
+  let result;
+  if (format.value === '24h') {
+    result = d.toLocaleTimeString('zh-CN', { hour12: false });
+  } else if (format.value === '12h') {
+    result = d.toLocaleTimeString('zh-CN', { hour12: true });
+  } else {
+    // 日期+时间
+    const date = d.toLocaleDateString('zh-CN');
+    const time = d.toLocaleTimeString('zh-CN', { hour12: false });
+    result = `${date} ${time}`;
+  }
+
+  return result;
+});
+
+let timer: number | undefined;
+onMounted(() => {
+  timer = window.setInterval(() => {
+    now.value = new Date();
+  }, 1000);
+});
+onUnmounted(() => {
+  if (timer) clearInterval(timer);
+});
+
+function onResizeMouseDown(e: MouseEvent, dir: string) {
+  e.stopPropagation();
+  const startX = e.clientX,
+    startY = e.clientY;
+  const startWidth = Number(props.width) || 200;
+  const startHeight = Number(props.height) || 40;
+  function onMove(ev: MouseEvent) {
+    let newWidth = startWidth,
+      newHeight = startHeight;
+    if (dir.includes('r')) newWidth += ev.clientX - startX;
+    if (dir.includes('l')) newWidth -= ev.clientX - startX;
+    if (dir.includes('b')) newHeight += ev.clientY - startY;
+    if (dir.includes('t')) newHeight -= ev.clientY - startY;
+    emit('resize', { width: Math.max(20, newWidth), height: Math.max(20, newHeight) });
+  }
+  function onUp() {
+    document.removeEventListener('mousemove', onMove);
+    document.removeEventListener('mouseup', onUp);
+  }
+  document.addEventListener('mousemove', onMove);
+  document.addEventListener('mouseup', onUp);
+}
+</script>
+
+<style scoped>
+.clock-board-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.clock-board {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.resize-handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  border: 1px solid #aaa;
+  z-index: 10;
+}
+
+.resize-handle.tr {
+  top: -5px;
+  right: -5px;
+  cursor: ne-resize;
+}
+
+.resize-handle.tl {
+  top: -5px;
+  left: -5px;
+  cursor: nw-resize;
+}
+
+.resize-handle.br {
+  bottom: -5px;
+  right: -5px;
+  cursor: se-resize;
+}
+
+.resize-handle.bl {
+  bottom: -5px;
+  left: -5px;
+  cursor: sw-resize;
+}
+
+.clock-format-selector {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  z-index: 20;
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+</style>

smsb-plus-ui/src/views/smsb/itemProgram/component/LiveBoard.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="live-board-wrapper" :class="{ selected }" :style="{
+    width: width + 'px',
+    height: height + 'px',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: '#f8fafc',
+    boxSizing: 'border-box',
+    border: selected ? '2px solid #409eff' : '1px solid #ddd'
+  }">
+    <div class="live-board-content">
+      <div class="live-icon">
+        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+          <rect x="3" y="3" width="26" height="26" rx="6" fill="#f3f6fa" stroke="#e67e22" stroke-width="2" />
+          <path d="M12 11v10l8-5-8-5z" fill="#e67e22" />
+        </svg>
+      </div>
+      <div class="live-info" v-if="liveUrl || selected">
+        <div class="live-url" :title="liveUrl"><span class="label">直播地址：</span>{{ liveUrl || '未设置' }}</div>
+        <div class="live-audio"><span class="label">音频：</span>{{ playAudio ? '开' : '关' }}</div>
+      </div>
+    </div>
+    <template v-if="selected">
+      <div v-for="dir in ['nw', 'ne', 'sw', 'se']" :key="dir" class="resize-handle" :class="'resize-' + dir"
+        @mousedown.stop="onResizeMouseDown(dir, $event)" />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, withDefaults, defineEmits } from 'vue';
+const emit = defineEmits(['resize']);
+interface Props {
+  width?: number;
+  height?: number;
+  liveUrl?: string;
+  playAudio?: boolean;
+  selected?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  width: 200,
+  height: 120,
+  liveUrl: '',
+  playAudio: true,
+  selected: false
+});
+const selected = computed(() => !!props.selected);
+const width = computed(() => props.width);
+const height = computed(() => props.height);
+const liveUrl = computed(() => props.liveUrl);
+const playAudio = computed(() => props.playAudio);
+let startX = 0,
+  startY = 0,
+  startW = 0,
+  startH = 0;
+function onResizeMouseDown(dir: string, e: MouseEvent) {
+  e.stopPropagation();
+  startX = e.clientX;
+  startY = e.clientY;
+  startW = props.width;
+  startH = props.height;
+  function onMouseMove(ev: MouseEvent) {
+    let dx = ev.clientX - startX;
+    let dy = ev.clientY - startY;
+    let newW = startW;
+    let newH = startH;
+    if (dir.includes('e')) newW = Math.max(40, startW + dx);
+    if (dir.includes('s')) newH = Math.max(40, startH + dy);
+    if (dir.includes('w')) newW = Math.max(40, startW - dx);
+    if (dir.includes('n')) newH = Math.max(40, startH - dy);
+    emit('resize', { width: newW, height: newH });
+  }
+  function onMouseUp() {
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+  }
+  window.addEventListener('mousemove', onMouseMove);
+  window.addEventListener('mouseup', onMouseUp);
+}
+function select() {
+  // 交由父组件处理选中
+}
+</script>
+
+<style scoped>
+.live-board-wrapper {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  background: #f8fafc;
+  border-radius: 10px;
+  transition: border-color 0.2s;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.live-board-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.live-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.live-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 2px;
+  font-size: 15px;
+  color: #222;
+}
+
+.live-url,
+.live-audio {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 180px;
+}
+
+.label {
+  color: #e67e22;
+  font-weight: bold;
+  margin-right: 4px;
+}
+
+.live-board-wrapper.selected {
+  border-color: #409eff;
+}
+
+.live-icon {
+  margin-right: 10px;
+}
+
+.live-info {
+  font-size: 13px;
+  color: #e67e22;
+  margin-top: 4px;
+  text-align: center;
+}
+
+.live-url {
+  font-size: 13px;
+  color: #e67e22;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
+}
+
+.live-audio {
+  font-size: 12px;
+  color: #888;
+  margin-top: 4px;
+}
+
+.resize-handle {
+  width: 8px;
+  height: 8px;
+  background: #fff;
+  border: 1.5px solid #e67e22;
+  border-radius: 50%;
+  position: absolute;
+  z-index: 2;
+}
+
+.resize-nw {
+  top: -4px;
+  left: -4px;
+  cursor: nw-resize;
+}
+
+.resize-ne {
+  top: -4px;
+  right: -4px;
+  cursor: ne-resize;
+}
+
+.resize-sw {
+  bottom: -4px;
+  left: -4px;
+  cursor: sw-resize;
+}
+
+.resize-se {
+  bottom: -4px;
+  right: -4px;
+  cursor: se-resize;
+}
+
+.live-icon {
+  margin-right: 10px;
+}
+
+.live-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.live-url {
+  font-size: 13px;
+  color: #e67e22;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
+}
+
+.live-audio {
+  font-size: 12px;
+  color: #888;
+  margin-top: 4px;
+}
+
+.resize-handle {
+  width: 8px;
+  height: 8px;
+  background: #fff;
+  border: 1.5px solid #e67e22;
+  border-radius: 50%;
+  position: absolute;
+  z-index: 2;
+}
+
+.resize-nw {
+  top: -4px;
+  left: -4px;
+  cursor: nw-resize;
+}
+
+.resize-ne {
+  top: -4px;
+  right: -4px;
+  cursor: ne-resize;
+}
+
+.resize-sw {
+  bottom: -4px;
+  left: -4px;
+  cursor: sw-resize;
+}
+
+.resize-se {
+  bottom: -4px;
+  right: -4px;
+  cursor: se-resize;
+}
+</style>

smsb-plus-ui/src/views/smsb/itemProgram/component/MediaAssetBoard.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="media-asset-board-wrapper" :class="{ selected }" :style="{
+    width: props.width + 'px',
+    height: props.height + 'px',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }">
+    <div class="media-asset-icon">
+      <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+        <rect x="3" y="3" width="26" height="26" rx="6" fill="#f3f6fa" stroke="#409eff" stroke-width="2" />
+        <path d="M8 22l6-6 4 4 6-6" stroke="#409eff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        <circle cx="11" cy="12" r="2" fill="#409eff" />
+      </svg>
+    </div>
+    <template v-if="selected">
+      <div v-for="dir in ['nw', 'ne', 'sw', 'se']" :key="dir" class="resize-handle" :class="'resize-' + dir"
+        @mousedown.stop="onResizeMouseDown(dir, $event)" />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, withDefaults, defineEmits } from 'vue';
+const emit = defineEmits(['resize']);
+interface Props {
+  width?: number;
+  height?: number;
+  mediaId?: string;
+  selected?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  width: 120,
+  height: 120
+});
+const selected = computed(() => !!props.selected);
+
+let startX = 0,
+  startY = 0,
+  startW = 0,
+  startH = 0;
+function onResizeMouseDown(dir: string, e: MouseEvent) {
+  e.stopPropagation();
+  startX = e.clientX;
+  startY = e.clientY;
+  startW = props.width;
+  startH = props.height;
+  function onMouseMove(ev: MouseEvent) {
+    let dx = ev.clientX - startX;
+    let dy = ev.clientY - startY;
+    let newW = startW;
+    let newH = startH;
+    if (dir.includes('e')) newW = Math.max(40, startW + dx);
+    if (dir.includes('s')) newH = Math.max(40, startH + dy);
+    if (dir.includes('w')) newW = Math.max(40, startW - dx);
+    if (dir.includes('n')) newH = Math.max(40, startH - dy);
+    emit('resize', { width: newW, height: newH });
+  }
+  function onMouseUp() {
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+  }
+  window.addEventListener('mousemove', onMouseMove);
+  window.addEventListener('mouseup', onMouseUp);
+}
+</script>
+
+<style scoped>
+.media-asset-board-wrapper {
+  background: #f9fbfd;
+  border: 2px dashed #b3c7e6;
+  border-radius: 10px;
+  transition: border-color 0.2s;
+  position: relative;
+}
+
+.media-asset-board-wrapper.selected {
+  border-color: #409eff;
+}
+
+.media-asset-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.resize-handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  border: 2px solid #409eff;
+  border-radius: 50%;
+  z-index: 10;
+  cursor: pointer;
+}
+
+.resize-nw {
+  left: -6px;
+  top: -6px;
+  cursor: nwse-resize;
+}
+
+.resize-ne {
+  right: -6px;
+  top: -6px;
+  cursor: nesw-resize;
+}
+
+.resize-sw {
+  left: -6px;
+  bottom: -6px;
+  cursor: nesw-resize;
+}
+
+.resize-se {
+  right: -6px;
+  bottom: -6px;
+  cursor: nwse-resize;
+}
+</style>

smsb-plus-ui/src/views/smsb/itemProgram/component/ScrollingTextBoard.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="scrolling-text-board-wrapper" :class="{ selected }"
+    :style="{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }">
+    <div class="scrolling-text-board" :style="textStyle">
+      <div class="scrolling-text-content" :style="scrollStyle" ref="scrollRef">{{ text }}</div>
+    </div>
+    <template v-if="selected">
+      <div v-for="dir in ['tr', 'tl', 'br', 'bl']" :key="dir" class="resize-handle" :class="dir"
+        @mousedown.stop="onResizeMouseDown($event, dir)"></div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+const emit = defineEmits(['resize']);
+interface Props {
+  text?: string;
+  color?: string;
+  fontSize?: string | number;
+  fontWeight?: string | number;
+  align?: 'left' | 'center' | 'right';
+  width?: number;
+  height?: number;
+  selected?: boolean;
+  speed?: number; // 滚动速度，px/秒
+}
+const props = defineProps<Props>();
+const selected = computed(() => !!props.selected);
+const text = computed(() => props.text || '双击编辑文本');
+const speed = computed(() => props.speed || 50);
+const scrollRef = ref<HTMLElement | null>(null);
+const textStyle = computed(() => ({
+  color: props.color || '#222',
+  fontSize: typeof props.fontSize === 'number' ? props.fontSize + 'px' : props.fontSize || '24px',
+  fontWeight: props.fontWeight || 'normal',
+  textAlign: props.align || 'center',
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: props.align === 'left' ? 'flex-start' : props.align === 'right' ? 'flex-end' : 'center',
+  wordBreak: 'break-all',
+  overflow: 'hidden',
+  position: 'relative'
+}));
+const scrollStyle = ref<any>({ position: 'absolute', transform: 'translateX(0px)', whiteSpace: 'nowrap' });
+let reqId: number | null = null;
+let scrollLeft = 0;
+let textWidth = 0;
+let wrapperWidth = 0;
+function startScroll() {
+  if (!scrollRef.value) return;
+  // 获取最近的 .scrolling-text-board 作为容器宽度
+  let wrapper = scrollRef.value.parentElement;
+  while (wrapper && !wrapper.classList.contains('scrolling-text-board')) {
+    wrapper = wrapper.parentElement;
+  }
+  textWidth = scrollRef.value.offsetWidth;
+  wrapperWidth = wrapper ? wrapper.offsetWidth : 0;
+  scrollLeft = wrapperWidth;
+  scrollStyle.value.transform = `translateX(${scrollLeft}px)`;
+  cancelScroll();
+  loop();
+}
+function loop() {
+  scrollLeft -= speed.value / 60;
+  if (scrollLeft < -textWidth) {
+    scrollLeft = wrapperWidth;
+  }
+  scrollStyle.value.transform = `translateX(${scrollLeft}px)`;
+  reqId = requestAnimationFrame(loop);
+}
+function cancelScroll() {
+  if (reqId !== null) {
+    cancelAnimationFrame(reqId);
+    reqId = null;
+  }
+}
+onMounted(() => {
+  startScroll();
+});
+onBeforeUnmount(() => {
+  cancelScroll();
+});
+watch(
+  () => props.text,
+  () => startScroll()
+);
+watch(
+  () => props.speed,
+  () => startScroll()
+);
+function onResizeMouseDown(e: MouseEvent, dir: string) {
+  e.stopPropagation();
+  const startX = e.clientX,
+    startY = e.clientY;
+  const startWidth = Number(props.width) || 200;
+  const startHeight = Number(props.height) || 40;
+  function onMove(ev: MouseEvent) {
+    let newWidth = startWidth,
+      newHeight = startHeight;
+    if (dir.includes('r')) newWidth += ev.clientX - startX;
+    if (dir.includes('l')) newWidth -= ev.clientX - startX;
+    if (dir.includes('b')) newHeight += ev.clientY - startY;
+    if (dir.includes('t')) newHeight -= ev.clientY - startY;
+    emit('resize', { width: Math.max(20, newWidth), height: Math.max(20, newHeight) });
+  }
+  function onUp() {
+    document.removeEventListener('mousemove', onMove);
+    document.removeEventListener('mouseup', onUp);
+  }
+  document.addEventListener('mousemove', onMove);
+  document.addEventListener('mouseup', onUp);
+}
+</script>
+
+<style scoped>
+.scrolling-text-board-wrapper.selected {
+  outline: 2px dashed #409eff;
+  outline-offset: 0;
+}
+
+.scrolling-text-board {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+}
+
+.scrolling-text-content {
+  position: absolute;
+  left: 0;
+  transform: translateY(-50%);
+  white-space: nowrap;
+  will-change: left;
+  user-select: none;
+}
+
+.resize-handle {
+  width: 8px;
+  height: 8px;
+  background: #fff;
+  border: 1.5px solid #409eff;
+  border-radius: 50%;
+  position: absolute;
+  z-index: 2;
+}
+
+.resize-handle.tr {
+  top: -4px;
+  right: -4px;
+  cursor: ne-resize;
+}
+
+.resize-handle.tl {
+  top: -4px;
+  left: -4px;
+  cursor: nw-resize;
+}
+
+.resize-handle.br {
+  bottom: -4px;
+  right: -4px;
+  cursor: se-resize;
+}
+
+.resize-handle.bl {
+  bottom: -4px;
+  left: -4px;
+  cursor: sw-resize;
+}
+</style>

smsb-plus-ui/src/views/smsb/itemProgram/component/TextBoard.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="text-board-wrapper" :class="{ selected }"
+    :style="{ width: '100%', height: '100%', position: 'relative' }">
+    <div class="text-board" :style="textStyle">{{ text }}</div>
+    <template v-if="selected">
+      <div v-for="dir in ['tr', 'tl', 'br', 'bl']" :key="dir" class="resize-handle" :class="dir"
+        @mousedown.stop="onResizeMouseDown($event, dir)"></div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+const emit = defineEmits(['resize']);
+interface Props {
+  text?: string;
+  color?: string;
+  fontSize?: string | number;
+  fontWeight?: string | number;
+  align?: 'left' | 'center' | 'right';
+  width?: number;
+  height?: number;
+  selected?: boolean;
+}
+const props = defineProps<Props>();
+const selected = computed(() => !!props.selected);
+const textStyle = computed(() => ({
+  color: props.color || '#222',
+  fontSize: typeof props.fontSize === 'number' ? props.fontSize + 'px' : props.fontSize || '24px',
+  fontWeight: props.fontWeight || 'normal',
+  textAlign: props.align || 'center',
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: props.align === 'left' ? 'flex-start' : props.align === 'right' ? 'flex-end' : 'center',
+  userSelect: 'none',
+}));
+
+function onResizeMouseDown(e: MouseEvent, dir: string) {
+  e.stopPropagation();
+  const startX = e.clientX,
+    startY = e.clientY;
+  const startWidth = Number(props.width) || 200;
+  const startHeight = Number(props.height) || 40;
+  function onMove(ev: MouseEvent) {
+    let newWidth = startWidth,
+      newHeight = startHeight;
+    if (dir.includes('r')) newWidth += ev.clientX - startX;
+    if (dir.includes('l')) newWidth -= ev.clientX - startX;
+    if (dir.includes('b')) newHeight += ev.clientY - startY;
+    if (dir.includes('t')) newHeight -= ev.clientY - startY;
+    emit('resize', { width: Math.max(20, newWidth), height: Math.max(20, newHeight) });
+  }
+  function onUp() {
+    document.removeEventListener('mousemove', onMove);
+    document.removeEventListener('mouseup', onUp);
+  }
+  document.addEventListener('mousemove', onMove);
+  document.addEventListener('mouseup', onUp);
+}
+const text = computed(() => props.text || '双击编辑文本');
+</script>
+
+<style scoped>
+.text-board-wrapper.selected {
+  outline: 2px dashed #409eff;
+  outline-offset: 0;
+}
+
+.resize-handle {
+  width: 8px;
+  height: 8px;
+  background: #fff;
+  border: 1.5px solid #409eff;
+  border-radius: 50%;
+  position: absolute;
+  z-index: 2;
+}
+
+.resize-handle.tr {
+  top: -4px;
+  right: -4px;
+  cursor: ne-resize;
+}
+
+.resize-handle.tl {
+  top: -4px;
+  left: -4px;
+  cursor: nw-resize;
+}
+
+.resize-handle.br {
+  bottom: -4px;
+  right: -4px;
+  cursor: se-resize;
+}
+
+.resize-handle.bl {
+  bottom: -4px;
+  left: -4px;
+  cursor: sw-resize;
+}
+
+.text-board {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  outline: none;
+  cursor: text;
+  user-select: text;
+}
+</style>

smsb-plus-ui/src/views/smsb/itemProgram/component/WebPageBoard.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="web-page-board-wrapper" :class="{ selected }" :style="{
+    width: props.width + 'px',
+    height: props.height + 'px',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }">
+    <div class="web-page-icon">
+      <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+        <rect x="3" y="3" width="26" height="26" rx="6" fill="#f3f6fa" stroke="#409eff" stroke-width="2" />
+        <rect x="8" y="10" width="16" height="12" rx="2" fill="#fff" stroke="#409eff" stroke-width="1.5" />
+        <circle cx="16" cy="16" r="2" fill="#409eff" />
+      </svg>
+    </div>
+
+    <template v-if="selected">
+      <div v-for="dir in ['nw', 'ne', 'sw', 'se']" :key="dir" class="resize-handle" :class="'resize-' + dir"
+        @mousedown.stop="onResizeMouseDown(dir, $event)" />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, withDefaults, defineEmits } from 'vue';
+const emit = defineEmits(['resize']);
+interface Props {
+  width?: number;
+  height?: number;
+  url?: string;
+  selected?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  width: 120,
+  height: 120,
+  url: ''
+});
+const selected = computed(() => !!props.selected);
+
+let startX = 0,
+  startY = 0,
+  startW = 0,
+  startH = 0;
+function onResizeMouseDown(dir: string, e: MouseEvent) {
+  e.stopPropagation();
+  startX = e.clientX;
+  startY = e.clientY;
+  startW = props.width;
+  startH = props.height;
+  function onMouseMove(ev: MouseEvent) {
+    let dx = ev.clientX - startX;
+    let dy = ev.clientY - startY;
+    let newW = startW;
+    let newH = startH;
+    if (dir.includes('e')) newW = Math.max(40, startW + dx);
+    if (dir.includes('s')) newH = Math.max(40, startH + dy);
+    if (dir.includes('w')) newW = Math.max(40, startW - dx);
+    if (dir.includes('n')) newH = Math.max(40, startH - dy);
+    emit('resize', { width: newW, height: newH });
+  }
+  function onMouseUp() {
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+  }
+  window.addEventListener('mousemove', onMouseMove);
+  window.addEventListener('mouseup', onMouseUp);
+}
+</script>
+
+<style scoped>
+.web-page-board-wrapper {
+  background: #f9fbfd;
+  border: 2px dashed #b3c7e6;
+  border-radius: 10px;
+  transition: border-color 0.2s;
+  position: relative;
+}
+
+.web-page-board-wrapper.selected {
+  border-color: #409eff;
+}
+
+.web-page-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.web-page-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.web-page-url {
+  font-size: 13px;
+  color: #409eff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
+}
+
+.label {
+  color: #409eff;
+  font-weight: bold;
+  margin-right: 4px;
+}
+
+.resize-handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  border: 2px solid #409eff;
+  border-radius: 50%;
+  z-index: 10;
+  cursor: pointer;
+}
+
+.resize-nw {
+  left: -6px;
+  top: -6px;
+  cursor: nwse-resize;
+}
+
+.resize-ne {
+  right: -6px;
+  top: -6px;
+  cursor: nesw-resize;
+}
+
+.resize-sw {
+  left: -6px;
+  bottom: -6px;
+  cursor: nesw-resize;
+}
+
+.resize-se {
+  right: -6px;
+  bottom: -6px;
+  cursor: nwse-resize;
+}
+</style>

smsb-plus-ui/src/views/smsb/itemProgram/component/propNameMaps.ts

@@ -0,0 +1,63 @@
+export const canvasPropNameMap = {
+  width: '宽度',
+  height: '高度',
+  bg: '背景'
+};
+
+export const textPropNameMap = {
+  text: '内容',
+  color: '颜色',
+  fontSize: '字号',
+  fontWeight: '字重',
+  align: '对齐方式',
+  x: '横坐标',
+  y: '纵坐标',
+  width: '宽度',
+  height: '高度'
+};
+
+export const scrollingTextPropNameMap = {
+  text: '内容',
+  color: '颜色',
+  fontSize: '字号',
+  fontWeight: '字重',
+  align: '对齐方式',
+  speed: '滚动速度',
+  x: '横坐标',
+  y: '纵坐标',
+  width: '宽度',
+  height: '高度'
+};
+
+export const mediaAssetPropNameMap = {
+  mediaId: '媒资ID',
+  width: '宽度',
+  height: '高度',
+  x: '横坐标',
+  y: '纵坐标'
+};
+
+export const webPagePropNameMap = {
+  url: '网页链接',
+  width: '宽度',
+  height: '高度',
+  x: '横坐标',
+  y: '纵坐标'
+};
+
+export const clockPropNameMap = {
+  format: '时间格式',
+  width: '宽度',
+  height: '高度',
+  x: '横坐标',
+  y: '纵坐标'
+};
+
+export const livePropNameMap = {
+  liveUrl: '直播地址',
+  playAudio: '播放音频',
+  width: '宽度',
+  height: '高度',
+  x: '横坐标',
+  y: '纵坐标'
+};

smsb-plus-ui/src/views/smsb/itemProgram/index.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+      :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="节目ID" prop="programId">
+              <el-input v-model="queryParams.programId" placeholder="请输入节目ID" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="节目名称" prop="name">
+              <el-input v-model="queryParams.name" placeholder="请输入节目名称" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="分辨率" prop="resolutionRatio">
+              <el-input v-model="queryParams.resolutionRatio" placeholder="请输入分辨率" clearable
+                @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="图片地址" prop="imgUrl">
+              <el-input v-model="queryParams.imgUrl" placeholder="请输入图片地址" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="节目时长" prop="duration">
+              <el-input v-model="queryParams.duration" placeholder="请输入节目时长" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="所属个人" prop="user">
+              <el-input v-model="queryParams.user" placeholder="请输入所属个人" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd"
+              v-hasPermi="['system:itemProgram:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
+              v-hasPermi="['system:itemProgram:edit']">修改</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
+              v-hasPermi="['system:itemProgram:remove']">删除</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="Download" @click="handleExport"
+              v-hasPermi="['system:itemProgram:export']">导出</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" :data="itemProgramList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="节目ID" align="center" prop="programId" />
+        <el-table-column label="节目名称" align="center" prop="name" />
+        <el-table-column label="分辨率" align="center" prop="resolutionRatio" />
+        <el-table-column label="图片地址" align="center" prop="imgUrl" />
+        <el-table-column label="状态" align="center" prop="status" />
+        <el-table-column label="节目时长" align="center" prop="duration" />
+        <el-table-column label="所属个人" align="center" prop="user" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:itemProgram:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+                v-hasPermi="['system:itemProgram:remove']"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 添加或修改节目信息对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="itemProgramFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="节目名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入节目名称" />
+        </el-form-item>
+        <el-form-item label="分辨率" prop="resolutionRatio">
+          <el-select v-model="form.resolutionRatio" placeholder="请选择分辨率或自定义" filterable allow-create
+            :reserve-keyword="true">
+            <el-option label="1920x1080" value="1920x1080" />
+            <el-option label="1280x720" value="1280x720" />
+            <el-option label="3840x2160" value="3840x2160" />
+            <el-option label="1024x768" value="1024x768" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="图片地址" prop="imgUrl">
+          <el-input v-model="form.imgUrl" placeholder="请输入图片地址（可选）" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="ItemProgram" lang="ts">
+import { listItemProgram, getItemProgram, delItemProgram, addItemProgram, updateItemProgram } from '@/api/smsb/source/item_program';
+import { useUserStore } from '@/store/modules/user';
+import { ItemProgramVO, ItemProgramQuery, ItemProgramForm } from '@/api/smsb/source/item_program_type';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const itemProgramList = ref<ItemProgramVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const itemProgramFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const initFormData: ItemProgramForm = {
+  id: undefined,
+  programId: undefined,
+  name: undefined,
+  resolutionRatio: undefined,
+  imgUrl: undefined
+  // 已移除 create_dept 字段
+};
+const data = reactive<PageData<ItemProgramForm, ItemProgramQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    programId: undefined,
+    name: undefined,
+    resolutionRatio: undefined,
+    imgUrl: undefined,
+    params: {}
+  },
+  rules: {
+    name: [{ required: true, message: '节目名称不能为空', trigger: 'blur' }],
+    resolutionRatio: [
+      { required: true, message: '分辨率不能为空', trigger: 'blur' },
+      { pattern: /^\d+x\d+$/, message: '请输入如1920x1080的分辨率', trigger: 'blur' }
+    ]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询节目信息列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listItemProgram(queryParams.value);
+  itemProgramList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+/** 表单重置 */
+const userStore = useUserStore();
+const reset = () => {
+  form.value = { ...initFormData };
+  // 自动赋值当前用户和租户ID（字段名按实际接口）
+  form.value.user = String(userStore.userId);
+  form.value.tenantId = userStore.tenantId;
+  // 新增时自动生成节目ID
+  if (!form.value.programId) {
+    form.value.programId = Date.now().toString();
+  }
+  itemProgramFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: ItemProgramVO[]) => {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  dialog.visible = true;
+  dialog.title = '添加节目信息';
+};
+
+/** 修改按钮操作 */
+const handleUpdate = (row?: ItemProgramVO) => {
+  const _id = row?.id || ids.value[0];
+  if (_id) {
+    // 跳转到可视化编辑页面
+    window.$router ? window.$router.push(`/smsb/itemProgram/edit/${_id}`) : proxy?.$router.push(`/smsb/itemProgram/edit/${_id}`);
+  }
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  // 新增时自动生成节目ID
+  if (!form.value.programId) {
+    form.value.programId = Date.now().toString();
+  }
+  itemProgramFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateItemProgram(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addItemProgram(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: ItemProgramVO) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除节目信息编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
+  await delItemProgram(_ids);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    'system/itemProgram/export',
+    {
+      ...queryParams.value
+    },
+    `itemProgram_${new Date().getTime()}.xlsx`
+  );
+};
+
+onMounted(() => {
+  getList();
+});
+</script>