261 lines
6.8 KiB
HTML
261 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>图标生成器</title>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
background: #f5f5f5;
|
||
}
|
||
h1 { color: #333; }
|
||
.icon-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20px;
|
||
margin: 20px 0;
|
||
}
|
||
.icon-item {
|
||
background: white;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
.icon-item canvas {
|
||
display: block;
|
||
margin: 0 auto 10px;
|
||
background: #eee;
|
||
border-radius: 4px;
|
||
}
|
||
.icon-item .name {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
}
|
||
.icon-item button {
|
||
padding: 5px 12px;
|
||
background: #409eff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
}
|
||
.icon-item button:hover {
|
||
background: #337ecc;
|
||
}
|
||
.section {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
h2 {
|
||
margin-top: 0;
|
||
color: #333;
|
||
font-size: 18px;
|
||
}
|
||
.download-all {
|
||
padding: 10px 24px;
|
||
background: #67c23a;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
margin-right: 10px;
|
||
}
|
||
.download-all:hover {
|
||
background: #529b2e;
|
||
}
|
||
.instructions {
|
||
background: #f0f9eb;
|
||
border: 1px solid #c2e7b0;
|
||
padding: 15px;
|
||
border-radius: 4px;
|
||
margin-top: 20px;
|
||
}
|
||
.instructions h3 {
|
||
margin-top: 0;
|
||
color: #67c23a;
|
||
}
|
||
.instructions ol {
|
||
margin-bottom: 0;
|
||
padding-left: 20px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>帅库之家Cookie管理插件 - 图标生成器</h1>
|
||
|
||
<div class="section">
|
||
<h2>生成的图标</h2>
|
||
<p>点击"下载全部"按钮下载所有图标，或单独下载各个图标。</p>
|
||
<button class="download-all" onclick="downloadAll()">下载全部图标 (ZIP)</button>
|
||
<button class="download-all" style="background:#909399" onclick="downloadAllIndividually()">逐个下载图标</button>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>绿色图标 (Cookie有效)</h2>
|
||
<div class="icon-grid" id="green-icons"></div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>红色图标 (Cookie过期)</h2>
|
||
<div class="icon-grid" id="red-icons"></div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>灰色图标 (未配置)</h2>
|
||
<div class="icon-grid" id="gray-icons"></div>
|
||
</div>
|
||
|
||
<div class="instructions">
|
||
<h3>使用说明</h3>
|
||
<ol>
|
||
<li>点击"下载全部图标"或逐个下载图标</li>
|
||
<li>将下载的图标文件放入插件的 <code>icons/</code> 目录</li>
|
||
<li>确保文件名格式为: <code>icon-{颜色}-{尺寸}.png</code></li>
|
||
<li>重新加载浏览器插件</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
||
<script>
|
||
const colors = {
|
||
green: '#67C23A',
|
||
red: '#F56C6C',
|
||
gray: '#909399'
|
||
};
|
||
|
||
const sizes = [16, 32, 48, 128];
|
||
const icons = [];
|
||
|
||
// 绘制图标
|
||
function drawIcon(canvas, color, size) {
|
||
const ctx = canvas.getContext('2d');
|
||
canvas.width = size;
|
||
canvas.height = size;
|
||
|
||
// 清除背景
|
||
ctx.clearRect(0, 0, size, size);
|
||
|
||
// 绘制主圆形
|
||
const padding = Math.max(1, Math.floor(size / 10));
|
||
const radius = (size - padding * 2) / 2;
|
||
const centerX = size / 2;
|
||
const centerY = size / 2;
|
||
|
||
// 主圆形
|
||
ctx.beginPath();
|
||
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
|
||
ctx.fillStyle = color;
|
||
ctx.fill();
|
||
|
||
// 添加高光效果
|
||
const gradient = ctx.createRadialGradient(
|
||
centerX - radius * 0.3, centerY - radius * 0.3, 0,
|
||
centerX, centerY, radius
|
||
);
|
||
gradient.addColorStop(0, 'rgba(255,255,255,0.3)');
|
||
gradient.addColorStop(1, 'rgba(255,255,255,0)');
|
||
ctx.beginPath();
|
||
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
|
||
ctx.fillStyle = gradient;
|
||
ctx.fill();
|
||
|
||
// 中心白点
|
||
const dotRadius = Math.max(2, Math.floor(size / 6));
|
||
ctx.beginPath();
|
||
ctx.arc(centerX, centerY, dotRadius, 0, Math.PI * 2);
|
||
ctx.fillStyle = 'white';
|
||
ctx.fill();
|
||
}
|
||
|
||
// 创建图标元素
|
||
function createIconElement(colorName, color, size) {
|
||
const item = document.createElement('div');
|
||
item.className = 'icon-item';
|
||
|
||
const canvas = document.createElement('canvas');
|
||
drawIcon(canvas, color, size);
|
||
|
||
const name = document.createElement('div');
|
||
name.className = 'name';
|
||
name.textContent = `icon-${colorName}-${size}.png`;
|
||
|
||
const btn = document.createElement('button');
|
||
btn.textContent = '下载';
|
||
btn.onclick = () => downloadIcon(canvas, colorName, size);
|
||
|
||
item.appendChild(canvas);
|
||
item.appendChild(name);
|
||
item.appendChild(btn);
|
||
|
||
icons.push({ canvas, colorName, size });
|
||
|
||
return item;
|
||
}
|
||
|
||
// 下载单个图标
|
||
function downloadIcon(canvas, colorName, size) {
|
||
const link = document.createElement('a');
|
||
link.download = `icon-${colorName}-${size}.png`;
|
||
link.href = canvas.toDataURL('image/png');
|
||
link.click();
|
||
}
|
||
|
||
// 逐个下载所有图标
|
||
function downloadAllIndividually() {
|
||
let delay = 0;
|
||
icons.forEach(({ canvas, colorName, size }) => {
|
||
setTimeout(() => {
|
||
downloadIcon(canvas, colorName, size);
|
||
}, delay);
|
||
delay += 200;
|
||
});
|
||
}
|
||
|
||
// 下载ZIP包
|
||
async function downloadAll() {
|
||
if (typeof JSZip === 'undefined') {
|
||
alert('正在加载ZIP库，请稍后再试或使用"逐个下载"功能');
|
||
return;
|
||
}
|
||
|
||
const zip = new JSZip();
|
||
|
||
for (const { canvas, colorName, size } of icons) {
|
||
const dataUrl = canvas.toDataURL('image/png');
|
||
const base64 = dataUrl.split(',')[1];
|
||
zip.file(`icon-${colorName}-${size}.png`, base64, { base64: true });
|
||
}
|
||
|
||
const content = await zip.generateAsync({ type: 'blob' });
|
||
const link = document.createElement('a');
|
||
link.download = 'live-forum-cookie-icons.zip';
|
||
link.href = URL.createObjectURL(content);
|
||
link.click();
|
||
}
|
||
|
||
// 初始化
|
||
function init() {
|
||
for (const [colorName, color] of Object.entries(colors)) {
|
||
const container = document.getElementById(`${colorName}-icons`);
|
||
for (const size of sizes) {
|
||
container.appendChild(createIconElement(colorName, color, size));
|
||
}
|
||
}
|
||
}
|
||
|
||
init();
|
||
</script>
|
||
</body>
|
||
</html>
|