{
"summary": "已将所有

{
"summary": "已将所有TailwindCSS类提取到SCSS样式块中，使用@apply语法按组件层级嵌套，HTML中只保留简洁的类名，并更新了图片资源链接。",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<style lang=\"scss\">.table-container{@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-cell{@apply text-sm font-semibold;}}.table-body{@apply border-b border-gray-200;.table-row{@apply grid grid-cols-12 gap-x-4;.title-cell{@apply bg-gray-100 px-6 py-4 flex flex-col;.title-text{@apply text-base font-bold text-gray-900;}.remark{@apply text-xs text-gray-500 mt-1;}}.data-cell{@apply py-4 flex items-center gap-x-2;.tag{&.blue{@apply bg-sky-100 text-sky-700 border border-sky-300 px-2.5 py-0.5 rounded-full text-sm;}&.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;}}}.merged-title{@apply bg-gray-100 px-6 py-4 flex flex-col row-span-3;.title-text{@apply text-base font-bold text-gray-900;}}}.nested-grid{@apply grid grid-cols-10;.nested-cell{@apply py-4 flex items-center gap-x-2;}}}}</style><div class=\"table-container\"><div class=\"table-header\"><div class=\"header-cell\">Title</div><div class=\"header-cell\">Tag+link+text</div><div class=\"header-cell\">Circle button</div><div class=\"header-cell\">Highlight</div></div><div class=\"table-body\"><div class=\"table-row\"><div class=\"title-cell\"><div class=\"title-text\">Title</div><div class=\"remark\">※Remark</div></div><div class=\"data-cell\"><span class=\"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=\"remark\">※Remark</div></div><div class=\"data-cell\"><span class=\"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=\"remark\">※Remark</div></div><div class=\"data-cell\"><span class=\"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=\"remark\">※Remark</div></div><div class=\"data-cell\"><span class=\"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=\"remark\">※Remark</div></div><div class=\"data-cell\"><span class=\"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=\"remark\">※Remark</div></div><div class=\"data-cell\"><span class=\"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\"><div class=\"merged-title\"><div class=\"title-text\">Title</div></div><div class=\"nested-grid\"><div class=\"nested-cell\"><span class=\"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><div class=\"table-row\"><div class=\"nested-grid\"><div class=\"nested-cell\"><span class=\"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><div class=\"table-row\"><div class=\"nested-grid\"><div class=\"nested-cell\"><span class=\"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>"
},
"next": ["添加行悬停效果", "优化移动端响应", "添加排序功能", "添加筛选选项", "添加分页控件"]
}