chenxuan520/pastebin-worker.js

## pastebin-worker.js
// HTML模板，定义了页面的结构和样式
const HTML_TEMPLATE = `
<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      margin: 0;
      background-color: #0d1117;
      color: #c9d1d9;
    }

    .input-container {
      width: 80%;
      max-width: 500px;
      margin-bottom: 20px;
    }

    .input-container textarea {
      width: 100%;
      height: 200px;
      padding: 10px;
      box-sizing: border-box;
      font-size: 16px;
      border: 1px solid #30363d;
      border-radius: 5px;
      background-color: #161b22;
      color: #c9d1d9;
    }

    .button-container {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }

    .button-container button {
      color: #c9d1d9;
      padding: 10px 0;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      flex: 1;
    }

    /* 修改后的Submit按钮样式 */
    #submit-button {
      background-color: #1f6feb;
      border: 1px solid #388bfd;
    }

    #submit-button:hover {
      background-color: #1158c7;
      border-color: #388bfd;
    }

    .copy-button {
      background-color: #238636 !important;
      border: 1px solid #2ea043 !important;
    }

    .copy-button:hover {
      background-color: #2ea043 !important;
      border-color: #3fb950 !important;
    }

    .subtitle {
      color: #8b949e;
      font-size: 18px; /* 调整为H4的字体大小 */
      margin-top: -5px;
      margin-bottom: 20px;
      text-align: center;
    }

    h1 {
      text-align: center;
    }

    /* GitHub 链接样式 */
    .github-link {
      position: absolute;
      top: 20px;
      right: 20px;
      display: block;
      width: 32px;
      height: 32px;
      fill: #c9d1d9;
      transition: fill 0.3s ease;
    }

    .github-link:hover {
      fill: #fff;
    }

    .warning {
      color: #ffd33d; /* 黄色警告文字 */
      font-size: 16px; /* H5的字体大小 */
      margin-top: 15px;
      text-align: center;
    }
  </style>
</head>

<body>
  <!-- GitHub 链接 -->
  <a href="https://gist.github.com/chenxuan520/b4b023abd30b4a68dd4d730478bc3c27" target="_blank" class="github-link">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32">
      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.209 0 1.6-.015 2.89-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
    </svg>
  </a>

  <div class="input-container">
    <h1>Paste Bin</h1>
    <p class="subtitle">Share text between phone and computer.</p>
    <textarea id="input-text" placeholder="please input data"></textarea>
    <div class="button-container">
      <button id="submit-button">Submit</button>
      <button id="copy-button" class="copy-button">Copy to Clipboard</button>
    </div>
    <!-- 修改后的警告文字 -->
    <p class="warning">Warning! Text will be deleted after one minute</p>
  </div>

  <script>
    // 获取输入框和按钮的DOM元素
    const inputText = document.getElementById('input-text');
    const submitButton = document.getElementById('submit-button');
    const copyButton = document.getElementById('copy-button');

    // 页面加载时自动从API获取数据
    async function loadData() {
      try {
        const response = await fetch('/api/data');
        if (response.ok) {
          const data = await response.json();
          if (data.value) {
            inputText.value = data.value;
          }
        } else {
          console.error('Failed to load data:', response.status);
        }
      } catch (error) {
        console.error('Error loading data:', error);
      }
    }

    // 页面加载完成后立即加载数据
    document.addEventListener('DOMContentLoaded', loadData);

    // 为提交按钮添加点击事件监听器
    submitButton.addEventListener('click', async () => {
      const inputValue = inputText.value;
      // 发送POST请求到API端点保存数据
      const response = await fetch('/api/data', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ value: inputValue })
      });
      console.log(response)
      if (response.ok) {
        alert('data save success');
      } else {
        alert('data save wrong');
      }
    });

    // 为复制按钮添加点击事件监听器
    copyButton.addEventListener('click', async () => {
      const textToCopy = inputText.value;

      if (!textToCopy) {
        alert('Nothing to copy!');
        return;
      }

      try {
        // 使用现代的Clipboard API
        await navigator.clipboard.writeText(textToCopy);
        alert('Copied to clipboard!');
      } catch (error) {
        console.error('Failed to copy: ', error);
        // 备用方案：使用execCommand
        const textArea = document.createElement('textarea');
        textArea.value = textToCopy;
        textArea.style.position = 'fixed';
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        alert('Copied to clipboard!');
      }
    });
  </script>
</body>

</html>
`;

// Worker路由处理
addEventListener('fetch', async (event) => {
  const request = event.request;
  const url = new URL(request.url);

  // 处理API请求
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(handleAPIRequest(request, event));
  } else {
    // 处理前端页面请求
    event.respondWith(
      new Response(HTML_TEMPLATE, {
        headers: { 'Content-Type': 'text/html' }
      })
    );
  }
});

// API处理函数，从event中获取env
async function handleAPIRequest(request, event) {
  const url = new URL(request.url);
  const env = event.env; // 从event对象中获取env

  // 获取数据
  if (url.pathname === '/api/data') {
    if (request.method === 'GET') {
      const data = await MY_KV.get('shared-data'); // 使用event.env访问KV
      return Response.json({ value: data || null });
    }

    // 提交数据
    if (request.method === 'POST') {
      const body = await request.json();
      if (!body.value) {
        return new Response('invaild data', { status: 400 });
      }

      // 存储到KV
      await MY_KV.put('shared-data', body.value, { expirationTtl: 60 });
      return new Response('data save', { status: 200 });
    }
  }

  return new Response('cannot find point', { status: 404 });
}
	// HTML模板，定义了页面的结构和样式
	const HTML_TEMPLATE = `
	<!DOCTYPE html>
	<html>

	<head>
	<style>
	body {
	font-family: Arial, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin: 0;
	background-color: #0d1117;
	color: #c9d1d9;
	}

	.input-container {
	width: 80%;
	max-width: 500px;
	margin-bottom: 20px;
	}

	.input-container textarea {
	width: 100%;
	height: 200px;
	padding: 10px;
	box-sizing: border-box;
	font-size: 16px;
	border: 1px solid #30363d;
	border-radius: 5px;
	background-color: #161b22;
	color: #c9d1d9;
	}

	.button-container {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	}

	.button-container button {
	color: #c9d1d9;
	padding: 10px 0;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	flex: 1;
	}

	/* 修改后的Submit按钮样式 */
	#submit-button {
	background-color: #1f6feb;
	border: 1px solid #388bfd;
	}

	#submit-button:hover {
	background-color: #1158c7;
	border-color: #388bfd;
	}

	.copy-button {
	background-color: #238636 !important;
	border: 1px solid #2ea043 !important;
	}

	.copy-button:hover {
	background-color: #2ea043 !important;
	border-color: #3fb950 !important;
	}

	.subtitle {
	color: #8b949e;
	font-size: 18px; /* 调整为H4的字体大小 */
	margin-top: -5px;
	margin-bottom: 20px;
	text-align: center;
	}

	h1 {
	text-align: center;
	}

	/* GitHub 链接样式 */
	.github-link {
	position: absolute;
	top: 20px;
	right: 20px;
	display: block;
	width: 32px;
	height: 32px;
	fill: #c9d1d9;
	transition: fill 0.3s ease;
	}

	.github-link:hover {
	fill: #fff;
	}

	.warning {
	color: #ffd33d; /* 黄色警告文字 */
	font-size: 16px; /* H5的字体大小 */
	margin-top: 15px;
	text-align: center;
	}
	</style>
	</head>

	<body>
	<!-- GitHub 链接 -->
	<a href="https://gist.github.com/chenxuan520/b4b023abd30b4a68dd4d730478bc3c27" target="_blank" class="github-link">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32">
	<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.209 0 1.6-.015 2.89-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
	</svg>
	</a>

	<div class="input-container">
	<h1>Paste Bin</h1>
	<p class="subtitle">Share text between phone and computer.</p>
	<textarea id="input-text" placeholder="please input data"></textarea>
	<div class="button-container">
	<button id="submit-button">Submit</button>
	<button id="copy-button" class="copy-button">Copy to Clipboard</button>
	</div>
	<!-- 修改后的警告文字 -->
	<p class="warning">Warning! Text will be deleted after one minute</p>
	</div>

	<script>
	// 获取输入框和按钮的DOM元素
	const inputText = document.getElementById('input-text');
	const submitButton = document.getElementById('submit-button');
	const copyButton = document.getElementById('copy-button');

	// 页面加载时自动从API获取数据
	async function loadData() {
	try {
	const response = await fetch('/api/data');
	if (response.ok) {
	const data = await response.json();
	if (data.value) {
	inputText.value = data.value;
	}
	} else {
	console.error('Failed to load data:', response.status);
	}
	} catch (error) {
	console.error('Error loading data:', error);
	}
	}

	// 页面加载完成后立即加载数据
	document.addEventListener('DOMContentLoaded', loadData);

	// 为提交按钮添加点击事件监听器
	submitButton.addEventListener('click', async () => {
	const inputValue = inputText.value;
	// 发送POST请求到API端点保存数据
	const response = await fetch('/api/data', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	},
	body: JSON.stringify({ value: inputValue })
	});
	console.log(response)
	if (response.ok) {
	alert('data save success');
	} else {
	alert('data save wrong');
	}
	});

	// 为复制按钮添加点击事件监听器
	copyButton.addEventListener('click', async () => {
	const textToCopy = inputText.value;

	if (!textToCopy) {
	alert('Nothing to copy!');
	return;
	}

	try {
	// 使用现代的Clipboard API
	await navigator.clipboard.writeText(textToCopy);
	alert('Copied to clipboard!');
	} catch (error) {
	console.error('Failed to copy: ', error);
	// 备用方案：使用execCommand
	const textArea = document.createElement('textarea');
	textArea.value = textToCopy;
	textArea.style.position = 'fixed';
	document.body.appendChild(textArea);
	textArea.select();
	document.execCommand('copy');
	document.body.removeChild(textArea);
	alert('Copied to clipboard!');
	}
	});
	</script>
	</body>

	</html>
	`;

	// Worker路由处理
	addEventListener('fetch', async (event) => {
	const request = event.request;
	const url = new URL(request.url);

	// 处理API请求
	if (url.pathname.startsWith('/api/')) {
	event.respondWith(handleAPIRequest(request, event));
	} else {
	// 处理前端页面请求
	event.respondWith(
	new Response(HTML_TEMPLATE, {
	headers: { 'Content-Type': 'text/html' }
	})
	);
	}
	});

	// API处理函数，从event中获取env
	async function handleAPIRequest(request, event) {
	const url = new URL(request.url);
	const env = event.env; // 从event对象中获取env

	// 获取数据
	if (url.pathname === '/api/data') {
	if (request.method === 'GET') {
	const data = await MY_KV.get('shared-data'); // 使用event.env访问KV
	return Response.json({ value: data \|\| null });
	}

	// 提交数据
	if (request.method === 'POST') {
	const body = await request.json();
	if (!body.value) {
	return new Response('invaild data', { status: 400 });
	}

	// 存储到KV
	await MY_KV.put('shared-data', body.value, { expirationTtl: 60 });
	return new Response('data save', { status: 200 });
	}
	}

	return new Response('cannot find point', { status: 404 });
	}
No results found