figma-restoration-mcp-vue-tools
Version:
Professional Figma Component Restoration Kit - MCP tools with snapDOM-powered high-quality screenshots, intelligent shadow detection, and advanced diff analysis for Vue component restoration. Features enhanced figma_compare with color-coded region analysi
217 lines (196 loc) • 6.19 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Component Test</title>
<style>
body {
margin: 0;
padding: 20px;
background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.screenshot-target {
width: 360px;
background: #FFFFFF;
border-radius: 8px;
box-shadow:
0px 5px 30px 0px rgba(48, 61, 60, 0.15),
0px 2px 8px 0px rgba(48, 61, 60, 0.1);
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.title-section {
display: flex;
flex-direction: row;
align-self: stretch;
gap: 16px;
}
.title {
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1.4444444444444444em;
color: #212121;
margin: 0;
text-align: left;
flex: 1;
letter-spacing: 0;
text-rendering: optimizeLegibility;
}
.bottom-section {
display: flex;
flex-direction: column;
align-self: stretch;
gap: 12px;
}
.checkbox-section {
display: flex;
flex-direction: row;
align-self: stretch;
}
.checkbox-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
flex: 1;
}
.checkbox {
width: 16px;
height: 16px;
border: 1px solid #CCCCCC;
border-radius: 2px;
background: #FFFFFF;
cursor: pointer;
appearance: none;
margin: 0;
position: relative;
flex-shrink: 0;
outline: none;
}
.checkbox:checked {
background: #00B796;
border-color: #00B796;
}
.checkbox:checked::after {
content: '';
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid #FFFFFF;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox-label {
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 1em;
color: #9C9C9C;
cursor: pointer;
user-select: none;
}
.button-section {
display: flex;
flex-direction: row;
justify-content: stretch;
align-items: stretch;
align-self: stretch;
gap: 36px;
}
.button-group {
display: flex;
flex-direction: row;
justify-content: stretch;
align-items: stretch;
gap: 12px;
flex: 1;
}
.btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 4px;
padding: 0 8px;
height: 36px;
border-radius: 4px;
border: none;
cursor: pointer;
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.4285714285714286em;
text-align: center;
flex: 1;
transition: all 0.2s ease;
outline: none;
}
.btn:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 183, 150, 0.2);
}
.btn-cancel {
background: #FFFFFF;
border: 1px solid #DCDCDC;
color: #212121;
font-weight: 400;
}
.btn-cancel:hover {
background: #F5F5F5;
border-color: #CCCCCC;
}
.btn-continue {
background: #00B796;
color: #FFFFFF;
font-weight: 500;
border: none;
}
.btn-continue:hover {
background: #009B7D;
}
</style>
</head>
<body>
<div class="screenshot-target">
<!-- Title Section -->
<div class="title-section">
<h3 class="title">此操作会清除批注，是否继续？</h3>
</div>
<!-- Bottom Section -->
<div class="bottom-section">
<!-- Checkbox Section -->
<div class="checkbox-section">
<div class="checkbox-container">
<input
type="checkbox"
id="dont-remind"
class="checkbox"
/>
<label for="dont-remind" class="checkbox-label">不再提醒</label>
</div>
</div>
<!-- Button Section -->
<div class="button-section">
<div class="button-group">
<button class="btn btn-cancel">取消</button>
<button class="btn btn-continue">继续</button>
</div>
</div>
</div>
</div>
</body>
</html>