{
"summary": "已将Ta

{
"summary": "已将TailwindCSS类提取到SCSS样式表中，使用@apply语法按组件层级组织，并替换了图片资源链接。",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"responsive-table\"><div class=\"table-header\"><div class=\"header-col\">Title</div><div class=\"header-col\">Tag+link+text</div><div class=\"header-col\">Circle button</div><div class=\"header-col\">Highlight</div></div><div class=\"table-body\"><div class=\"table-row\"><div class=\"title-cell\"><div class=\"title-text\">Title</div><div class=\"title-remark\">※Remark</div></div><div class=\"data-cell\"><span class=\"tag tag-blue\">Tag</span><a href=\"#\" class=\"link\">Link</a><span class=\"text\">Text</span></div><div class=\"data-cell\"><div class=\"circle-button\">1</div></div><div class=\"data-cell\"><span class=\"highlight-text\"><span class=\"highlight\">highlight</span> text text text text text text</span></div></div><div class=\"table-row\"><div class=\"title-cell\"><div class=\"title-text\">Title</div><div class=\"title-remark\">※Remark</div></div><div class=\"data-cell\"><span class=\"tag tag-blue\">Tag</span><a href=\"#\" class=\"link\">Link</a><span class=\"text\">Text</span></div><div class=\"data-cell\"><div class=\"circle-button\">2</div></div><div class=\"data-cell\"><span class=\"highlight-text\"><span class=\"highlight\">highlight</span> text text text</span></div></div><div class=\"table-row\"><div class=\"title-cell\"><div class=\"title-text\">Title</div><div class=\"title-remark\">※Remark</div></div><div class=\"data-cell\"><span class=\"tag tag-blue\">Tag</span><a href=\"#\" class=\"link\">Link</a><span class=\"text\">Text</span></div><div class=\"data-cell\"><div class=\"circle-button\">3</div></div><div class=\"data-cell\"><span class=\"highlight-text\">text text text <span class=\"highlight\">highlight</span></span></div></div><div class=\"table-row\"><div class=\"title-cell\"><div class=\"title-text\">Title</div><div class=\"title-remark\">※Remark</div></div><div class=\"data-cell\"><span class=\"tag tag-blue\">Tag</span><a href=\"#\" class=\"link\">Link</a><span class=\"text\">Text</span></div><div class=\"data-cell\"><div class=\"circle-button\">4</div></div><div class=\"data-cell\"><span class=\"highlight-text\">text <span class=\"highlight\">highlight</span> text</span></div></div><div class=\"table-row\"><div class=\"title-cell\"><div class=\"title-text\">Title</div><div class=\"title-remark\">※Remark</div></div><div class=\"data-cell\"><span class=\"tag tag-blue\">Tag</span><a href=\"#\" class=\"link\">Link</a><span class=\"text\">Text</span></div><div class=\"data-cell\"><div class=\"circle-button\">5</div></div><div class=\"data-cell\"><span class=\"highlight-text\"><span class=\"highlight\">highlight</span> text <span class=\"highlight\">text</span></span></div></div><div class=\"table-row\"><div class=\"title-cell\"><div class=\"title-text\">Title</div><div class=\"title-remark\">※Remark</div></div><div class=\"data-cell\"><span class=\"tag tag-blue\">Tag</span><a href=\"#\" class=\"link\">Link</a><span class=\"text\">Text</span></div><div class=\"data-cell\"><div class=\"circle-button\">6</div></div><div class=\"data-cell\"><span class=\"text\">text text text</span></div></div><div class=\"table-row-group\"><div class=\"title-cell merged\"><div class=\"title-text\">Title</div></div><div class=\"data-row\"><div class=\"data-cell\"><span class=\"tag tag-orange\">Tag</span><a href=\"#\" class=\"link\">Link</a><span class=\"text\">Text</span></div><div class=\"data-cell\"><div class=\"circle-button\">7</div></div><div class=\"data-cell\"><span class=\"text\">text text text</span></div></div><div class=\"data-row\"><div class=\"data-cell\"><span class=\"tag tag-orange\">Tag</span><a href=\"#\" class=\"link\">Link</a><span class=\"text\">Text</span></div><div class=\"data-cell\"><div class=\"circle-button\">8</div></div><div class=\"data-cell\"><span class=\"text\">text text text</span></div></div><div class=\"data-row\"><div class=\"data-cell\"><span class=\"tag tag-orange\">Tag</span><a href=\"#\" class=\"link\">Link</a><span class=\"text\">Text</span></div><div class=\"data-cell\"><div class=\"circle-button\">9</div></div><div class=\"data-cell\"><span class=\"text\">text text text</span></div></div></div></div></div><style lang=\"scss\">.responsive-table{@apply w-full bg-white rounded-lg shadow-md overflow-hidden;.table-header{@apply bg-indigo-900 text-white grid grid-cols-12 gap-x-4 px-6 py-4;.header-col{@apply text-sm font-semibold;}}.table-body{@apply border-b border-gray-200;.table-row{@apply grid grid-cols-12 gap-x-4 border-b border-gray-200;.title-cell{@apply bg-gray-100 px-6 py-4 flex flex-col;.title-text{@apply text-base font-bold text-gray-900;}.title-remark{@apply text-xs text-gray-500 mt-1;}}.data-cell{@apply py-4 flex items-center gap-x-2;.tag{&.tag-blue{@apply bg-sky-100 text-sky-700 border border-sky-300 px-2.5 py-0.5 rounded-full text-sm;}&.tag-orange{@apply bg-amber-100 text-amber-800 border border-amber-300 px-2.5 py-0.5 rounded-full text-sm;}}.link{@apply text-indigo-600 underline text-base font-medium;}.text{@apply text-gray-800;}.circle-button{@apply w-8 h-8 bg-indigo-900 rounded-full text-white text-base font-bold flex items-center justify-center;}.highlight-text{@apply text-gray-800;.highlight{@apply bg-sky-100 text-sky-800 rounded-md px-1;}}}}.table-row-group{@apply grid grid-cols-12 gap-x-4;.title-cell.merged{@apply bg-gray-100 px-6 py-4 flex flex-col row-span-3;.title-text{@apply text-base font-bold text-gray-900;}}.data-row{@apply grid grid-cols-10 border-b border-gray-200;.data-cell{@apply py-4 flex items-center gap-x-2;.tag{&.tag-blue{@apply bg-sky-100 text-sky-700 border border-sky-300 px-2.5 py-0.5 rounded-full text-sm;}&.tag-orange{@apply bg-amber-100 text-amber-800 border border-amber-300 px-2.5 py-0.5 rounded-full text-sm;}}.link{@apply text-indigo-600 underline text-base font-medium;}.text{@apply text-gray-800;}.circle-button{@apply w-8 h-8 bg-indigo-900 rounded-full text-white text-base font-bold flex items-center justify-center;}.highlight-text{@apply text-gray-800;.highlight{@apply bg-sky-100 text-sky-800 rounded-md px-1;}}}}}}</style>"
},
"next": ["添加行悬停效果", "优化移动端响应", "添加排序功能", "添加筛选选项", "添加分页控件"]
}