entry-actions.blade.php 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. {{-- resources/views/components/wiki/entry-actions.blade.php --}}
  2. @props(['editUrl', 'title' => ''])
  3. <div class="wiki-entry-actions">
  4. {{-- 分享到微信 --}}
  5. <button class="wiki-action-btn"
  6. id="wikiShareWechat"
  7. title="分享到微信"
  8. data-title="{{ $title }}">
  9. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
  10. fill="none" stroke="currentColor" stroke-width="1.5"
  11. stroke-linecap="round" stroke-linejoin="round">
  12. <path d="M9.5 9a3.5 3.5 0 0 1 5 0" />
  13. <path d="M5.5 11.5C4 10 3 8.1 3 6c0-3.3 3.1-6 7-6s7 2.7 7 6c0 .6-.1 1.2-.3 1.7" />
  14. <path d="M12 20c-4.4 0-8-2.9-8-6.5S7.6 7 12 7s8 2.9 8 6.5c0 1.4-.5 2.7-1.4 3.8l.4 2.7-2.6-1.1A9 9 0 0 1 12 20z" />
  15. </svg>
  16. </button>
  17. {{-- 编辑 --}}
  18. <a class="wiki-action-btn"
  19. href="{{ $editUrl }}"
  20. target="_blank"
  21. rel="noopener"
  22. title="编辑条目">
  23. <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
  24. fill="none" stroke="currentColor" stroke-width="1.5"
  25. stroke-linecap="round" stroke-linejoin="round">
  26. <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
  27. <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
  28. </svg>
  29. </a>
  30. </div>
  31. {{-- 微信二维码弹窗 --}}
  32. <div class="wiki-wechat-modal" id="wikiWechatModal" style="display:none;">
  33. <div class="wiki-wechat-modal-backdrop" id="wikiWechatBackdrop"></div>
  34. <div class="wiki-wechat-modal-box">
  35. <div class="wiki-wechat-modal-title">分享到微信</div>
  36. <div class="wiki-wechat-modal-desc">使用微信扫描二维码</div>
  37. <div id="wikiWechatQr" class="wiki-wechat-qr"></div>
  38. <button class="wiki-wechat-modal-close" id="wikiWechatClose">关闭</button>
  39. </div>
  40. </div>
  41. @push('scripts')
  42. <script>
  43. (function() {
  44. const btn = document.getElementById('wikiShareWechat');
  45. const modal = document.getElementById('wikiWechatModal');
  46. const backdrop = document.getElementById('wikiWechatBackdrop');
  47. const closeBtn = document.getElementById('wikiWechatClose');
  48. const qrEl = document.getElementById('wikiWechatQr');
  49. if (!btn || !modal || !qrEl) return;
  50. function openWechatShare() {
  51. const url = encodeURIComponent(window.location.href);
  52. // 使用更稳定的二维码服务
  53. qrEl.innerHTML = `
  54. <img
  55. src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${url}"
  56. width="180"
  57. height="180"
  58. alt="QR Code"
  59. >
  60. `;
  61. modal.style.display = 'flex';
  62. }
  63. function closeWechatShare() {
  64. modal.style.display = 'none';
  65. }
  66. btn.addEventListener('click', openWechatShare);
  67. if (closeBtn) {
  68. closeBtn.addEventListener('click', closeWechatShare);
  69. }
  70. if (backdrop) {
  71. backdrop.addEventListener('click', closeWechatShare);
  72. }
  73. document.addEventListener('keydown', function(e) {
  74. if (e.key === 'Escape') {
  75. closeWechatShare();
  76. }
  77. });
  78. })();
  79. </script>
  80. @endpush