import{_ as y,b as T,l as C,d as M,c as h,h as t,a as o,k as S,t as s,e as i,g as p,r as u,u as z,A as D,B as L,E as f,C as q,y as B,o as g}from"./index-BZ-MVW6h.js";const H={class:"theme-preview-container"},I={class:"page-header"},E={class:"theme-info"},N={class:"theme-name"},V={key:0,class:"theme-desc"},A={class:"preview-content"},P=["innerHTML"],R={class:"theme-details"},$={class:"code-block"},Y={class:"code-block"},j={__name:"ThemePreview",setup(F){const x=B(),_=L(),a=T({id:"",name:"",description:"",css_styles:"",template:""}),r={title:"示例文章标题",content:"<h2>这是一个二级标题</h2><p>这是一段示例文章内容，用于展示主题的渲染效果。</p><p>主题预览功能可以帮助您直观地查看主题的实际效果，包括字体、颜色、布局等样式。</p><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul><blockquote>这是一段引用内容，用于测试主题的引用样式。</blockquote>",author:"测试作者",date:new Date().toLocaleDateString()},v={default:{id:"default",name:"默认主题",description:"简洁大方的默认样式",css_styles:".article { max-width: 800px; margin: 0 auto; padding: 20px; font-family: Arial, sans-serif; } .article h1 { color: #333; font-size: 24px; border-bottom: 1px solid #eee; padding-bottom: 10px; } .article h2 { color: #555; font-size: 20px; margin-top: 20px; } .article p { line-height: 1.6; color: #666; margin: 10px 0; } .article ul { padding-left: 20px; } .article li { margin: 5px 0; } .article blockquote { background-color: #f5f5f5; padding: 10px 15px; border-left: 4px solid #ddd; margin: 15px 0; color: #666; }",template:'<div class="article"><h1>{{ title }}</h1><div class="content">{{ content }}</div><div class="meta">作者：{{ author }} | 日期：{{ date }}</div></div>'},orangeheart:{id:"orangeheart",name:"橙心主题",description:"温暖的橙色主题",css_styles:'.article { background-color: #fff3e0; border: 1px solid #ffcc80; border-radius: 8px; padding: 20px; font-family: "Microsoft YaHei", sans-serif; } .article h1 { color: #e65100; font-size: 28px; text-align: center; margin-bottom: 20px; } .article h2 { color: #f57c00; font-size: 22px; margin-top: 25px; } .article p { line-height: 1.8; color: #333; margin: 15px 0; } .article ul { padding-left: 25px; } .article li { margin: 8px 0; color: #555; } .article blockquote { background-color: #fff8e1; padding: 15px; border-left: 4px solid #ffb74d; margin: 20px 0; color: #ff6f00; }',template:'<div class="article orangeheart"><h1>{{ title }}</h1><div class="content">{{ content }}</div><div class="meta">作者：{{ author }} | 日期：{{ date }}</div></div>'},rainbow:{id:"rainbow",name:"彩虹主题",description:"多彩的彩虹主题",css_styles:'.article { max-width: 900px; margin: 0 auto; padding: 30px; font-family: "Comic Sans MS", cursive; background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); border-radius: 15px; } .article h1 { color: #ff6b6b; font-size: 32px; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); text-align: center; margin-bottom: 25px; } .article h2 { color: #4ecdc4; font-size: 26px; margin-top: 30px; } .article p { line-height: 1.9; color: #2d3436; margin: 18px 0; font-size: 16px; } .article ul { padding-left: 30px; } .article li { margin: 10px 0; color: #6c5ce7; font-weight: bold; } .article blockquote { background-color: rgba(255,255,255,0.8); padding: 20px; border-left: 4px solid #a29bfe; margin: 25px 0; color: #636e72; border-radius: 10px; }',template:'<div class="article rainbow"><h1>{{ title }}</h1><div class="content">{{ content }}</div><div class="meta">作者：{{ author }} | 日期：{{ date }}</div></div>'}},b=C(()=>{if(!a.value.template)return`<div class="article"><h1>${r.title}</h1><div class="content">${r.content}</div></div>`;let e=a.value.template;return e=e.replace(/{{\s*title\s*}}/g,r.title),e=e.replace(/{{\s*content\s*}}/g,r.content),e=e.replace(/{{\s*author\s*}}/g,r.author),e=e.replace(/{{\s*date\s*}}/g,r.date),e}),k=async()=>{const e=_.params.themeId;if(!e){f.error("主题ID无效"),d();return}const l=q.service({lock:!0,text:"加载主题数据中...",background:"rgba(255, 255, 255, 0.7)"});try{await new Promise(m=>setTimeout(m,500));const n=v[e];n?a.value={...n}:(f.error("主题不存在"),d())}catch(n){f.error("加载主题数据失败："+n.message),d()}finally{l.close()}},d=()=>{x.push("/theme/list")};return M(()=>{k()}),(e,l)=>{const n=u("el-icon"),m=u("el-button"),c=u("el-descriptions-item"),w=u("el-descriptions");return g(),h("div",H,[t("div",I,[t("div",null,[l[0]||(l[0]=t("h2",null,"主题预览",-1)),t("div",E,[t("span",N,s(a.value.name||"未找到主题"),1),a.value.description?(g(),h("span",V,"("+s(a.value.description)+")",1)):S("",!0)])]),o(m,{onClick:d},{default:i(()=>[o(n,null,{default:i(()=>[o(z(D))]),_:1}),l[1]||(l[1]=p(" 返回列表 ",-1))]),_:1})]),t("div",A,[t("div",{class:"theme-preview-area",innerHTML:b.value},null,8,P),t("div",R,[l[2]||(l[2]=t("h3",null,"主题详情",-1)),o(w,{column:1,border:""},{default:i(()=>[o(c,{label:"主题ID"},{default:i(()=>[p(s(a.value.id),1)]),_:1}),o(c,{label:"主题名称"},{default:i(()=>[p(s(a.value.name),1)]),_:1}),o(c,{label:"主题描述"},{default:i(()=>[p(s(a.value.description||"-"),1)]),_:1}),o(c,{label:"CSS样式"},{default:i(()=>[t("div",$,[t("pre",null,s(a.value.css_styles||"无CSS样式"),1)])]),_:1}),o(c,{label:"HTML模板"},{default:i(()=>[t("div",Y,[t("pre",null,s(a.value.template||"无HTML模板"),1)])]),_:1})]),_:1})])])])}}},J=y(j,[["__scopeId","data-v-6fa33df7"]]);export{J as default};
