拖动滑块完成拼图

实时预览测试

测试简历编辑器的实时预览功能

测试控制台

当前数据状态

Store数据:

{
  "dep": {
    "version": 0,
    "sc": 2,
    "__v_skip": true
  },
  "__v_isRef": true,
  "__v_isShallow": false,
  "_rawValue": {
    "modules": {},
    "settings": {
      "theme": {
        "primaryColor": "#3B82F6",
        "fontFamily": "system-ui",
        "fontSize": "14px",
        "lineHeight": 1.6
      },
      "layout": {
        "marginTop": 45,
        "marginBottom": 45,
        "marginLeft": 45,
        "marginRight": 45,
        "spacing": 24,
        "modulePadding": 16,
        "modulePaddingVertical": 16,
        "modulePaddingHorizontal": 16,
        "headerSpacing": 18,
        "itemSpacing": 16,
        "itemPadding": 12,
        "paragraphSpacing": 12
      },
      "typography": {
        "headingSize": "18px",
        "headingWeight": "600",
        "bodySize": "14px",
        "bodyWeight": "400",
        "fontSettings": {
          "title": {
            "fontFamily": "'Microsoft YaHei', sans-serif",
            "fontSize": "16px"
          },
          "primary": {
            "fontFamily": "'Microsoft YaHei', sans-serif",
            "fontSize": "14px"
          },
          "desc": {
            "fontFamily": "'Microsoft YaHei', sans-serif",
            "fontSize": "13px"
          },
          "highlight": {
            "fontFamily": "'Microsoft YaHei', sans-serif",
            "fontSize": "28px"
          }
        }
      }
    },
    "title": "我的简历",
    "templateTexts": {}
  },
  "_value": {
    "modules": {},
    "settings": {
      "theme": {
        "primaryColor": "#3B82F6",
        "fontFamily": "system-ui",
        "fontSize": "14px",
        "lineHeight": 1.6
      },
      "layout": {
        "marginTop": 45,
        "marginBottom": 45,
        "marginLeft": 45,
        "marginRight": 45,
        "spacing": 24,
        "modulePadding": 16,
        "modulePaddingVertical": 16,
        "modulePaddingHorizontal": 16,
        "headerSpacing": 18,
        "itemSpacing": 16,
        "itemPadding": 12,
        "paragraphSpacing": 12
      },
      "typography": {
        "headingSize": "18px",
        "headingWeight": "600",
        "bodySize": "14px",
        "bodyWeight": "400",
        "fontSettings": {
          "title": {
            "fontFamily": "'Microsoft YaHei', sans-serif",
            "fontSize": "16px"
          },
          "primary": {
            "fontFamily": "'Microsoft YaHei', sans-serif",
            "fontSize": "14px"
          },
          "desc": {
            "fontFamily": "'Microsoft YaHei', sans-serif",
            "fontSize": "13px"
          },
          "highlight": {
            "fontFamily": "'Microsoft YaHei', sans-serif",
            "fontSize": "28px"
          }
        }
      }
    },
    "title": "我的简历",
    "templateTexts": {}
  }
}

模块配置:

{
  "dep": {
    "version": 0,
    "sc": 0,
    "__v_skip": true
  },
  "__v_isRef": true,
  "__v_isShallow": false,
  "_rawValue": [
    {
      "id": "basic_info",
      "type": "basic_info",
      "name": "基本信息",
      "icon": "user",
      "order": 1,
      "enabled": true,
      "required": true,
      "description": "个人基本信息,包括姓名、联系方式等",
      "tips": "填写准确的个人信息,确保HR能够联系到您",
      "examples": [
        "姓名应使用真实姓名",
        "手机号保持畅通",
        "邮箱地址要准确"
      ]
    },
    {
      "id": "education",
      "type": "education",
      "name": "教育经历",
      "customTitle": "",
      "icon": "graduation-cap",
      "order": 2,
      "enabled": true,
      "required": false,
      "description": "教育背景和学历信息",
      "tips": "按时间倒序排列,突出相关专业和优秀成绩",
      "examples": [
        "2018-2022 北京大学 计算机科学与技术 本科",
        "主修课程:数据结构、算法、数据库等"
      ]
    },
    {
      "id": "work_experience",
      "type": "work_experience",
      "name": "工作经历",
      "customTitle": "",
      "icon": "briefcase",
      "order": 3,
      "enabled": true,
      "required": false,
      "description": "工作经验和职业发展",
      "tips": "用数据说话,突出工作成果和贡献",
      "examples": [
        "负责用户增长项目,使活跃用户提升30%",
        "优化系统性能,响应时间减少50%"
      ]
    },
    {
      "id": "project",
      "type": "project",
      "name": "项目经验",
      "customTitle": "",
      "icon": "folder",
      "order": 4,
      "enabled": true,
      "required": false,
      "description": "参与的重要项目经验",
      "tips": "重点介绍技术栈、个人职责和项目成果",
      "examples": [
        "使用Vue3+TypeScript开发管理系统",
        "负责前端架构设计和核心功能开发"
      ]
    },
    {
      "id": "skills",
      "type": "skills",
      "name": "专业技能",
      "customTitle": "",
      "icon": "star",
      "order": 5,
      "enabled": true,
      "required": false,
      "description": "专业技能和特长",
      "tips": "列出与目标职位相关的技能,可分类展示",
      "examples": [
        "编程语言:JavaScript、Python、Java",
        "框架技术:Vue.js、React、Node.js"
      ]
    },
    {
      "id": "language",
      "type": "language",
      "name": "语言能力",
      "customTitle": "",
      "icon": "globe",
      "order": 6,
      "enabled": true,
      "required": false,
      "description": "掌握的语言及熟练程度",
      "tips": "诚实填写语言水平,可标注相关证书",
      "examples": [
        "英语:CET-6,流利的听说读写",
        "日语:N2水平,商务交流无障碍"
      ]
    },
    {
      "id": "award",
      "type": "award",
      "name": "获奖荣誉",
      "customTitle": "",
      "icon": "trophy",
      "order": 7,
      "enabled": true,
      "required": false,
      "description": "获得的奖项和荣誉",
      "tips": "按重要性和时间排序,突出与职位相关的奖项",
      "examples": [
        "2023年度优秀员工",
        "全国大学生数学建模竞赛一等奖"
      ]
    },
    {
      "id": "hobbies",
      "type": "hobbies",
      "name": "兴趣爱好",
      "customTitle": "",
      "icon": "heart",
      "order": 8,
      "enabled": true,
      "required": false,
      "description": "个人兴趣爱好和特长",
      "tips": "展示个人特色,可体现团队协作或领导能力",
      "examples": [
        "摄影、旅行、阅读",
        "篮球队队长,组织团队活动"
      ]
    },
    {
      "id": "self_evaluation",
      "type": "self_evaluation",
      "name": "自我评价",
      "customTitle": "",
      "icon": "message-circle",
      "order": 9,
      "enabled": true,
      "required": false,
      "description": "个人特点和优势总结",
      "tips": "简洁地描述您的个人特点和职业优势",
      "examples": [
        "突出与目标职位相关的优势",
        "展示学习能力和适应性",
        "体现团队协作和沟通能力",
        "保持真实,避免过度夸大",
        "控制在100-200字左右"
      ]
    },
    {
      "id": "internship",
      "type": "internship",
      "name": "实习经历",
      "customTitle": "",
      "icon": "briefcase",
      "order": 10,
      "enabled": false,
      "required": false,
      "description": "实习经验和学习成果",
      "tips": "重点描述实习期间的工作内容和收获",
      "examples": [
        "在阿里巴巴实习3个月,参与电商平台开发",
        "负责前端页面优化,提升用户体验"
      ]
    },
    {
      "id": "training",
      "type": "training",
      "name": "培训经历",
      "customTitle": "",
      "icon": "book",
      "order": 11,
      "enabled": false,
      "required": false,
      "description": "参加的培训课程和学习经历",
      "tips": "列出与职位相关的培训经历和技能提升",
      "examples": [
        "AWS云计算架构师培训",
        "敏捷开发Scrum Master认证"
      ]
    },
    {
      "id": "research_experience",
      "type": "research_experience",
      "name": "研究经历",
      "customTitle": "",
      "icon": "search",
      "order": 12,
      "enabled": false,
      "required": false,
      "description": "参与的研究项目和学术活动",
      "tips": "突出研究成果和学术贡献",
      "examples": [
        "参与导师的机器学习项目研究",
        "发表SCI论文2篇"
      ]
    },
    {
      "id": "publication",
      "type": "publication",
      "name": "论文专利",
      "customTitle": "",
      "icon": "file-text",
      "order": 13,
      "enabled": false,
      "required": false,
      "description": "发表的论文和申请的专利",
      "tips": "按影响因子和重要性排序",
      "examples": [
        "IEEE论文:基于深度学习的图像识别算法",
        "发明专利:一种新型数据压缩方法"
      ]
    },
    {
      "id": "certificate",
      "type": "certificate",
      "name": "证书资质",
      "customTitle": "",
      "icon": "award",
      "order": 14,
      "enabled": false,
      "required": false,
      "description": "获得的专业证书和资质",
      "tips": "列出与目标职位相关的证书",
      "examples": [
        "PMP项目管理专业人士认证",
        "AWS解决方案架构师认证"
      ]
    },
    {
      "id": "volunteer_experience",
      "type": "volunteer_experience",
      "name": "志愿服务",
      "customTitle": "",
      "icon": "users",
      "order": 15,
      "enabled": false,
      "required": false,
      "description": "参与的志愿服务活动",
      "tips": "体现社会责任感和奉献精神",
      "examples": [
        "支教志愿者,为山区儿童提供编程教育",
        "社区志愿服务,组织老年人智能手机培训"
      ]
    },
    {
      "id": "portfolio",
      "type": "portfolio",
      "name": "作品集",
      "customTitle": "",
      "icon": "images",
      "order": 16,
      "enabled": false,
      "required": false,
      "description": "个人作品和项目展示",
      "tips": "展示最佳作品,提供在线链接",
      "examples": [
        "个人博客:https://myblog.com",
        "GitHub项目:https://github.com/username"
      ]
    },
    {
      "id": "cover_letter",
      "type": "cover_letter",
      "name": "自荐信",
      "customTitle": "",
      "icon": "mail",
      "order": 17,
      "enabled": false,
      "required": false,
      "description": "求职自荐信和求职意向",
      "tips": "撰写针对性的求职自荐信",
      "examples": [
        "开头表达对公司和职位的兴趣",
        "突出与职位匹配的经验和技能",
        "展示对公司的了解和认同",
        "表达加入团队的热情和期待",
        "保持简洁,控制在300-500字"
      ]
    }
  ],
  "_value": [
    {
      "id": "basic_info",
      "type": "basic_info",
      "name": "基本信息",
      "icon": "user",
      "order": 1,
      "enabled": true,
      "required": true,
      "description": "个人基本信息,包括姓名、联系方式等",
      "tips": "填写准确的个人信息,确保HR能够联系到您",
      "examples": [
        "姓名应使用真实姓名",
        "手机号保持畅通",
        "邮箱地址要准确"
      ]
    },
    {
      "id": "education",
      "type": "education",
      "name": "教育经历",
      "customTitle": "",
      "icon": "graduation-cap",
      "order": 2,
      "enabled": true,
      "required": false,
      "description": "教育背景和学历信息",
      "tips": "按时间倒序排列,突出相关专业和优秀成绩",
      "examples": [
        "2018-2022 北京大学 计算机科学与技术 本科",
        "主修课程:数据结构、算法、数据库等"
      ]
    },
    {
      "id": "work_experience",
      "type": "work_experience",
      "name": "工作经历",
      "customTitle": "",
      "icon": "briefcase",
      "order": 3,
      "enabled": true,
      "required": false,
      "description": "工作经验和职业发展",
      "tips": "用数据说话,突出工作成果和贡献",
      "examples": [
        "负责用户增长项目,使活跃用户提升30%",
        "优化系统性能,响应时间减少50%"
      ]
    },
    {
      "id": "project",
      "type": "project",
      "name": "项目经验",
      "customTitle": "",
      "icon": "folder",
      "order": 4,
      "enabled": true,
      "required": false,
      "description": "参与的重要项目经验",
      "tips": "重点介绍技术栈、个人职责和项目成果",
      "examples": [
        "使用Vue3+TypeScript开发管理系统",
        "负责前端架构设计和核心功能开发"
      ]
    },
    {
      "id": "skills",
      "type": "skills",
      "name": "专业技能",
      "customTitle": "",
      "icon": "star",
      "order": 5,
      "enabled": true,
      "required": false,
      "description": "专业技能和特长",
      "tips": "列出与目标职位相关的技能,可分类展示",
      "examples": [
        "编程语言:JavaScript、Python、Java",
        "框架技术:Vue.js、React、Node.js"
      ]
    },
    {
      "id": "language",
      "type": "language",
      "name": "语言能力",
      "customTitle": "",
      "icon": "globe",
      "order": 6,
      "enabled": true,
      "required": false,
      "description": "掌握的语言及熟练程度",
      "tips": "诚实填写语言水平,可标注相关证书",
      "examples": [
        "英语:CET-6,流利的听说读写",
        "日语:N2水平,商务交流无障碍"
      ]
    },
    {
      "id": "award",
      "type": "award",
      "name": "获奖荣誉",
      "customTitle": "",
      "icon": "trophy",
      "order": 7,
      "enabled": true,
      "required": false,
      "description": "获得的奖项和荣誉",
      "tips": "按重要性和时间排序,突出与职位相关的奖项",
      "examples": [
        "2023年度优秀员工",
        "全国大学生数学建模竞赛一等奖"
      ]
    },
    {
      "id": "hobbies",
      "type": "hobbies",
      "name": "兴趣爱好",
      "customTitle": "",
      "icon": "heart",
      "order": 8,
      "enabled": true,
      "required": false,
      "description": "个人兴趣爱好和特长",
      "tips": "展示个人特色,可体现团队协作或领导能力",
      "examples": [
        "摄影、旅行、阅读",
        "篮球队队长,组织团队活动"
      ]
    },
    {
      "id": "self_evaluation",
      "type": "self_evaluation",
      "name": "自我评价",
      "customTitle": "",
      "icon": "message-circle",
      "order": 9,
      "enabled": true,
      "required": false,
      "description": "个人特点和优势总结",
      "tips": "简洁地描述您的个人特点和职业优势",
      "examples": [
        "突出与目标职位相关的优势",
        "展示学习能力和适应性",
        "体现团队协作和沟通能力",
        "保持真实,避免过度夸大",
        "控制在100-200字左右"
      ]
    },
    {
      "id": "internship",
      "type": "internship",
      "name": "实习经历",
      "customTitle": "",
      "icon": "briefcase",
      "order": 10,
      "enabled": false,
      "required": false,
      "description": "实习经验和学习成果",
      "tips": "重点描述实习期间的工作内容和收获",
      "examples": [
        "在阿里巴巴实习3个月,参与电商平台开发",
        "负责前端页面优化,提升用户体验"
      ]
    },
    {
      "id": "training",
      "type": "training",
      "name": "培训经历",
      "customTitle": "",
      "icon": "book",
      "order": 11,
      "enabled": false,
      "required": false,
      "description": "参加的培训课程和学习经历",
      "tips": "列出与职位相关的培训经历和技能提升",
      "examples": [
        "AWS云计算架构师培训",
        "敏捷开发Scrum Master认证"
      ]
    },
    {
      "id": "research_experience",
      "type": "research_experience",
      "name": "研究经历",
      "customTitle": "",
      "icon": "search",
      "order": 12,
      "enabled": false,
      "required": false,
      "description": "参与的研究项目和学术活动",
      "tips": "突出研究成果和学术贡献",
      "examples": [
        "参与导师的机器学习项目研究",
        "发表SCI论文2篇"
      ]
    },
    {
      "id": "publication",
      "type": "publication",
      "name": "论文专利",
      "customTitle": "",
      "icon": "file-text",
      "order": 13,
      "enabled": false,
      "required": false,
      "description": "发表的论文和申请的专利",
      "tips": "按影响因子和重要性排序",
      "examples": [
        "IEEE论文:基于深度学习的图像识别算法",
        "发明专利:一种新型数据压缩方法"
      ]
    },
    {
      "id": "certificate",
      "type": "certificate",
      "name": "证书资质",
      "customTitle": "",
      "icon": "award",
      "order": 14,
      "enabled": false,
      "required": false,
      "description": "获得的专业证书和资质",
      "tips": "列出与目标职位相关的证书",
      "examples": [
        "PMP项目管理专业人士认证",
        "AWS解决方案架构师认证"
      ]
    },
    {
      "id": "volunteer_experience",
      "type": "volunteer_experience",
      "name": "志愿服务",
      "customTitle": "",
      "icon": "users",
      "order": 15,
      "enabled": false,
      "required": false,
      "description": "参与的志愿服务活动",
      "tips": "体现社会责任感和奉献精神",
      "examples": [
        "支教志愿者,为山区儿童提供编程教育",
        "社区志愿服务,组织老年人智能手机培训"
      ]
    },
    {
      "id": "portfolio",
      "type": "portfolio",
      "name": "作品集",
      "customTitle": "",
      "icon": "images",
      "order": 16,
      "enabled": false,
      "required": false,
      "description": "个人作品和项目展示",
      "tips": "展示最佳作品,提供在线链接",
      "examples": [
        "个人博客:https://myblog.com",
        "GitHub项目:https://github.com/username"
      ]
    },
    {
      "id": "cover_letter",
      "type": "cover_letter",
      "name": "自荐信",
      "customTitle": "",
      "icon": "mail",
      "order": 17,
      "enabled": false,
      "required": false,
      "description": "求职自荐信和求职意向",
      "tips": "撰写针对性的求职自荐信",
      "examples": [
        "开头表达对公司和职位的兴趣",
        "突出与职位匹配的经验和技能",
        "展示对公司的了解和认同",
        "表达加入团队的热情和期待",
        "保持简洁,控制在300-500字"
      ]
    }
  ]
}

预览组件

正在加载模板...
A4 纸张区域 (210mm × 297mm)