koishi-plugin-driftbottle-with-webui 0.0.2

package/dist/index.js

@@ -0,0 +1 @@
+import{defineComponent as z,ref as h,watch as F,onMounted as O,resolveComponent as S,openBlock as o,createBlock as P,withCtx as M,createVNode as B,createElementVNode as t,normalizeClass as m,createElementBlock as i,Fragment as C,renderList as x,toDisplayString as a,createCommentVNode as r,withModifiers as q}from"vue";import{send as f}from"@koishijs/client";const G={class:"admin-tabs"},J={class:"filter-section"},K={class:"radio-group"},Q={key:0,class:"table-container"},R={class:"admin-table"},U=["innerHTML"],W={class:"text-muted"},X=["onClick"],Y={key:0},Z={key:1,class:"table-container"},tt={class:"admin-table"},et={class:"text-small text-muted"},nt=["innerHTML"],st={class:"text-muted"},lt={class:"action-cell"},ot=["onClick"],it=["onClick"],at=["onClick"],dt={key:0},rt={class:"standard-dialog"},ut={class:"dialog-header"},ct={class:"dialog-body"},vt={class:"info-grid"},bt={class:"info-item"},mt={class:"info-item"},ft={class:"info-item"},_t={class:"info-item"},pt=["innerHTML"],kt={class:"two-col-layout"},ht={class:"col-section"},gt={class:"section-title"},yt={class:"list-box"},wt={class:"item-meta"},Ct={class:"text-small text-muted"},xt=["innerHTML"],$t={key:0,class:"empty-text"},Lt={class:"col-section"},Mt={class:"list-box"},Tt={class:"text-small text-muted"},Dt=["innerHTML"],Ht={key:0,class:"empty-text"},St={class:"dialog-footer"},Bt={class:"left-actions"},It={class:"right-actions"},At=z({__name:"page",setup(_){const d=h("bottles"),u=h(0),b=h([]),p=h([]),l=h(null),g=s=>(s||"").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/&lt;(?:img|image)\s+(?:url|src)="([^"]+)"[^&]*&gt;/gi,(y,L)=>{const v=L.match(/[\\/]([^\\/]+)$/),k=v?v[1]:"";return k?`<span class="img-wrapper"><img src="/driftbottle/image/${k}" alt="image" /></span>`:y}),I=s=>s.action==="throw"?`用户 <b>${s.username}</b> 发布了漂流瓶`:s.action==="fish"?`用户 <b>${s.username}</b> 进行了打捞`:s.action==="comment"?`用户 <b>${s.username}</b> 发表了评论`:s.action==="approve"?'<span style="color:var(--success)">管理员通过了审核</span>':s.action==="reject"?'<span style="color:var(--error)">管理员驳回了内容</span>':`用户 ${s.username} 执行了操作`,A=s=>s===0?"待审核":s===1?"已通过":s===2?"已驳回":"未知",E=s=>s===0?"text-warning":s===1?"text-success":s===2?"text-danger":"",N=s=>{l.value=s},c=async()=>{d.value==="bottles"?(b.value=await f("driftbottle/bottles",u.value),l.value&&(l.value=b.value.find(s=>s.id===l.value.id)||null)):p.value=await f("driftbottle/comments",u.value)},$=s=>{u.value=s,c()},T=async(s,e)=>{await f("driftbottle/review-bottle",s,e),c()},D=async(s,e)=>{await f("driftbottle/review-comment",s,e),c()},V=async s=>{confirm("确定要永久删除该漂流瓶及所有关联评论吗？此操作不可逆。")&&(await f("driftbottle/delete-bottle",s),l.value=null,c())},j=async s=>{confirm("确定要删除此条评论吗？此操作不可逆。")&&(await f("driftbottle/delete-comment",s),c())};return F(d,()=>{c()}),O(()=>{c()}),(s,e)=>{const y=S("k-card"),L=S("k-layout");return o(),P(L,{class:"driftbottle-admin"},{default:M(()=>[B(y,{class:"admin-header"},{default:M(()=>[e[12]||(e[12]=t("h2",null,"漂流瓶管理后台",-1)),t("div",G,[t("button",{class:m(["tab-btn",{active:d.value==="bottles"}]),onClick:e[0]||(e[0]=v=>d.value="bottles")},"漂流瓶列表",2),t("button",{class:m(["tab-btn",{active:d.value==="comments"}]),onClick:e[1]||(e[1]=v=>d.value="comments")},"评论管理",2)])]),_:1}),B(y,{class:"admin-content"},{default:M(()=>{var v,k,H;return[t("div",J,[e[13]||(e[13]=t("span",{class:"filter-label"},"状态筛选：",-1)),t("div",K,[t("button",{class:m(["radio-btn",{active:u.value===0}]),onClick:e[2]||(e[2]=n=>$(0))},"待审核",2),t("button",{class:m(["radio-btn",{active:u.value===1}]),onClick:e[3]||(e[3]=n=>$(1))},"已通过",2),t("button",{class:m(["radio-btn",{active:u.value===2}]),onClick:e[4]||(e[4]=n=>$(2))},"已驳回",2)])]),d.value==="bottles"?(o(),i("div",Q,[t("table",R,[e[15]||(e[15]=t("thead",null,[t("tr",null,[t("th",{width:"80"},"ID"),t("th",{width:"120"},"发布者"),t("th",null,"内容预览"),t("th",{width:"80"},"打捞数"),t("th",{width:"160"},"发布时间"),t("th",{width:"120"},"操作")])],-1)),t("tbody",null,[(o(true),i(C,null,x(b.value,n=>(o(),i("tr",{key:n.id},[t("td",null,"#"+a(n.id),1),t("td",null,a(n.username),1),t("td",null,[t("div",{class:"text-truncate",innerHTML:g(n.content)},null,8,U)]),t("td",null,a(n.fishCount||0),1),t("td",W,a(new Date(n.createdAt).toLocaleString()),1),t("td",null,[t("button",{class:"btn btn-text",onClick:w=>N(n)},"查看 / 审核",8,X)])]))),128)),b.value.length===0?(o(),i("tr",Y,[...e[14]||(e[14]=[t("td",{colspan:"6",class:"empty-text"},"暂无数据",-1)])])):r("v-if",true)])])])):r("v-if",true),d.value==="comments"?(o(),i("div",Z,[t("table",tt,[e[17]||(e[17]=t("thead",null,[t("tr",null,[t("th",{width:"80"},"评论ID"),t("th",{width:"100"},"所属瓶ID"),t("th",{width:"120"},"评论者"),t("th",null,"内容"),t("th",{width:"160"},"评论时间"),t("th",{width:"200"},"操作")])],-1)),t("tbody",null,[(o(true),i(C,null,x(p.value,n=>(o(),i("tr",{key:n.id},[t("td",null,"#"+a(n.id),1),t("td",null,[t("span",{class:"link-text",onClick:e[5]||(e[5]=w=>d.value="bottles")},"#"+a(n.bottleId),1)]),t("td",null,[t("div",null,a(n.username),1),t("div",et,a(n.userId),1)]),t("td",null,[t("div",{class:"text-truncate",innerHTML:g(n.content)},null,8,nt)]),t("td",st,a(new Date(n.createdAt).toLocaleString()),1),t("td",lt,[n.status!==1?(o(),i("button",{key:0,class:"btn btn-success btn-small",onClick:w=>D(n.id,1)},"通过",8,ot)):r("v-if",true),n.status!==2?(o(),i("button",{key:1,class:"btn btn-warning btn-small",onClick:w=>D(n.id,2)},"驳回",8,it)):r("v-if",true),t("button",{class:"btn btn-danger btn-small",onClick:w=>j(n.id)},"删除",8,at)])]))),128)),p.value.length===0?(o(),i("tr",dt,[...e[16]||(e[16]=[t("td",{colspan:"6",class:"empty-text"},"暂无数据",-1)])])):r("v-if",true)])])])):r("v-if",true),l.value?(o(),i("div",{key:2,class:"modal-mask",onClick:e[11]||(e[11]=q(n=>l.value=null,["self"]))},[t("div",rt,[t("div",ut,[t("h3",null,"漂流瓶详情 (ID: #"+a(l.value.id)+")",1),t("button",{class:"icon-close",onClick:e[6]||(e[6]=n=>l.value=null)},"×")]),t("div",ct,[t("div",vt,[t("div",bt,[e[18]||(e[18]=t("span",{class:"label"},"发布者：",-1)),t("span",null,a(l.value.username),1)]),t("div",mt,[e[19]||(e[19]=t("span",{class:"label"},"发布时间：",-1)),t("span",null,a(new Date(l.value.createdAt).toLocaleString()),1)]),t("div",ft,[e[20]||(e[20]=t("span",{class:"label"},"当前状态：",-1)),t("span",{class:m(E(l.value.status))},a(A(l.value.status)),3)]),t("div",_t,[e[21]||(e[21]=t("span",{class:"label"},"打捞次数：",-1)),t("span",null,a(l.value.fishCount||0)+" 次",1)])]),e[23]||(e[23]=t("div",{class:"section-title"},"漂流瓶内容",-1)),t("div",{class:"content-box",innerHTML:g(l.value.content)},null,8,pt),t("div",kt,[t("div",ht,[t("div",gt,"所属评论 ("+a(((v=l.value.comments)==null?void 0:v.length)||0)+")",1),t("div",yt,[(o(true),i(C,null,x(l.value.comments,n=>(o(),i("div",{class:"list-item",key:n.id},[t("div",wt,[t("strong",null,a(n.username),1),t("span",Ct,a(new Date(n.createdAt).toLocaleString()),1)]),t("div",{class:"item-content",innerHTML:g(n.content)},null,8,xt)]))),128)),(k=l.value.comments)!=null&&k.length?r("v-if",true):(o(),i("div",$t,"暂无评论"))])]),t("div",Lt,[e[22]||(e[22]=t("div",{class:"section-title"},"操作日志",-1)),t("div",Mt,[(o(true),i(C,null,x(l.value.logs,n=>(o(),i("div",{class:"log-item",key:n.id},[t("span",Tt,"["+a(new Date(n.createdAt).toLocaleString())+"]",1),t("span",{class:"log-text",innerHTML:I(n)},null,8,Dt)]))),128)),(H=l.value.logs)!=null&&H.length?r("v-if",true):(o(),i("div",Ht,"暂无日志"))])])])]),t("div",St,[t("div",Bt,[t("button",{class:"btn btn-danger",onClick:e[7]||(e[7]=n=>V(l.value.id))},"删除此瓶")]),t("div",It,[t("button",{class:"btn",onClick:e[8]||(e[8]=n=>l.value=null)},"取消"),l.value.status!==2?(o(),i("button",{key:0,class:"btn btn-warning",onClick:e[9]||(e[9]=n=>T(l.value.id,2))},"驳回")):r("v-if",true),l.value.status!==1?(o(),i("button",{key:1,class:"btn btn-primary",onClick:e[10]||(e[10]=n=>T(l.value.id,1))},"通过审核")):r("v-if",true)])])])])):r("v-if",true)]}),_:1})]),_:1})}}}),Et=(_,d)=>{const u=_.__vccOpts||_;for(const[b,p]of d)u[b]=p;return u},Nt=Et(At,[["__scopeId","data-v-5ed8fd39"]]),zt=_=>{_.page({name:"漂流瓶管理",path:"/driftbottle",component:Nt})};export{zt as default};

package/dist/style.css

@@ -0,0 +1 @@
+.driftbottle-admin[data-v-5ed8fd39]{--primary: #409eff;--success: #67c23a;--warning: #e6a23c;--danger: #f56c6c;--text-main: var(--fg1, #303133);--text-regular: var(--fg2, #606266);--text-muted: var(--fg3, #909399);--border-color: var(--border, #dcdfe6);--bg-color: var(--bg1, #ffffff);--bg-page: var(--bg2, #f5f7fa);display:flex;flex-direction:column;gap:16px;color:var(--text-main);font-size:14px}.admin-header[data-v-5ed8fd39]{display:flex;justify-content:space-between;align-items:center;padding:16px 24px!important}.admin-header h2[data-v-5ed8fd39]{margin:0;font-size:18px;font-weight:600}.admin-tabs[data-v-5ed8fd39]{display:flex;gap:8px;background:var(--bg-page);padding:4px;border-radius:6px}.tab-btn[data-v-5ed8fd39]{border:none;background:transparent;padding:8px 16px;font-size:14px;border-radius:4px;cursor:pointer;color:var(--text-regular);transition:all .2s}.tab-btn[data-v-5ed8fd39]:hover{color:var(--primary)}.tab-btn.active[data-v-5ed8fd39]{background:var(--bg-color);color:var(--primary);font-weight:700;box-shadow:0 2px 4px #0000000d}.admin-content[data-v-5ed8fd39]{padding:24px!important;min-height:500px}.filter-section[data-v-5ed8fd39]{display:flex;align-items:center;margin-bottom:20px}.filter-label[data-v-5ed8fd39]{margin-right:12px;color:var(--text-regular)}.radio-group[data-v-5ed8fd39]{display:flex;border:1px solid var(--border-color);border-radius:4px;overflow:hidden}.radio-btn[data-v-5ed8fd39]{border:none;background:var(--bg-color);padding:6px 16px;border-right:1px solid var(--border-color);cursor:pointer;color:var(--text-regular)}.radio-btn[data-v-5ed8fd39]:last-child{border-right:none}.radio-btn.active[data-v-5ed8fd39]{background:var(--primary);color:#fff}.table-container[data-v-5ed8fd39]{overflow-x:auto;border:1px solid var(--border-color);border-radius:4px}.admin-table[data-v-5ed8fd39]{width:100%;border-collapse:collapse;text-align:left}.admin-table th[data-v-5ed8fd39],.admin-table td[data-v-5ed8fd39]{padding:12px 16px;border-bottom:1px solid var(--border-color)}.admin-table th[data-v-5ed8fd39]{background-color:var(--bg-page);color:var(--text-regular);font-weight:500;white-space:nowrap}.admin-table tbody tr[data-v-5ed8fd39]:hover{background-color:var(--bg-page)}.admin-table tbody tr:last-child td[data-v-5ed8fd39]{border-bottom:none}.text-truncate[data-v-5ed8fd39]{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}[data-v-5ed8fd39] .text-truncate img{height:20px;vertical-align:middle;border-radius:2px}.empty-text[data-v-5ed8fd39]{text-align:center;padding:40px!important;color:var(--text-muted)}.link-text[data-v-5ed8fd39]{color:var(--primary);cursor:pointer}.link-text[data-v-5ed8fd39]:hover{text-decoration:underline}.btn[data-v-5ed8fd39]{border:1px solid var(--border-color);background:var(--bg-color);color:var(--text-regular);padding:6px 16px;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s}.btn[data-v-5ed8fd39]:hover{border-color:var(--primary);color:var(--primary)}.btn-small[data-v-5ed8fd39]{padding:4px 10px;font-size:12px}.btn-primary[data-v-5ed8fd39]{background:var(--primary);color:#fff;border-color:var(--primary)}.btn-primary[data-v-5ed8fd39]:hover{background:#66b1ff;border-color:#66b1ff;color:#fff}.btn-success[data-v-5ed8fd39]{background:var(--success);color:#fff;border-color:var(--success)}.btn-success[data-v-5ed8fd39]:hover{background:#85ce61;color:#fff;border-color:#85ce61}.btn-warning[data-v-5ed8fd39]{background:var(--warning);color:#fff;border-color:var(--warning)}.btn-warning[data-v-5ed8fd39]:hover{background:#ebb563;color:#fff;border-color:#ebb563}.btn-danger[data-v-5ed8fd39]{background:var(--danger);color:#fff;border-color:var(--danger)}.btn-danger[data-v-5ed8fd39]:hover{background:#f78989;color:#fff;border-color:#f78989}.btn-text[data-v-5ed8fd39]{border:none;background:transparent;color:var(--primary);padding:0}.btn-text[data-v-5ed8fd39]:hover{background:transparent;text-decoration:underline}.action-cell[data-v-5ed8fd39]{display:flex;gap:8px;flex-wrap:wrap}.text-small[data-v-5ed8fd39]{font-size:12px}.text-muted[data-v-5ed8fd39]{color:var(--text-muted)}.text-success[data-v-5ed8fd39]{color:var(--success)}.text-warning[data-v-5ed8fd39]{color:var(--warning)}.text-danger[data-v-5ed8fd39]{color:var(--danger)}.modal-mask[data-v-5ed8fd39]{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:2000;display:flex;align-items:center;justify-content:center}.standard-dialog[data-v-5ed8fd39]{width:800px;max-width:90vw;max-height:85vh;background:var(--bg-color);border-radius:6px;display:flex;flex-direction:column;box-shadow:0 12px 32px #0000001a}.dialog-header[data-v-5ed8fd39]{padding:16px 20px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.dialog-header h3[data-v-5ed8fd39]{margin:0;font-size:16px}.icon-close[data-v-5ed8fd39]{border:none;background:transparent;font-size:20px;cursor:pointer;color:var(--text-muted)}.icon-close[data-v-5ed8fd39]:hover{color:var(--danger)}.dialog-body[data-v-5ed8fd39]{padding:20px;overflow-y:auto;flex:1}.dialog-footer[data-v-5ed8fd39]{padding:16px 20px;border-top:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.right-actions[data-v-5ed8fd39]{display:flex;gap:12px}.info-grid[data-v-5ed8fd39]{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--bg-page);padding:16px;border-radius:4px;margin-bottom:20px}.info-item .label[data-v-5ed8fd39]{color:var(--text-muted)}.section-title[data-v-5ed8fd39]{font-weight:600;margin:20px 0 10px;padding-left:8px;border-left:3px solid var(--primary);line-height:1}.content-box[data-v-5ed8fd39]{border:1px solid var(--border-color);padding:16px;border-radius:4px;line-height:1.6;min-height:80px}[data-v-5ed8fd39] .content-box img{max-width:100%;border-radius:4px;margin-top:10px}.two-col-layout[data-v-5ed8fd39]{display:flex;gap:20px;margin-top:20px}.col-section[data-v-5ed8fd39]{flex:1;min-width:0}.list-box[data-v-5ed8fd39]{border:1px solid var(--border-color);border-radius:4px;height:250px;overflow-y:auto}.list-item[data-v-5ed8fd39]{padding:12px;border-bottom:1px solid var(--border-color)}.list-item[data-v-5ed8fd39]:last-child{border-bottom:none}.item-meta[data-v-5ed8fd39]{display:flex;justify-content:space-between;margin-bottom:6px}.item-content[data-v-5ed8fd39]{line-height:1.4}[data-v-5ed8fd39] .item-content img{height:30px;vertical-align:middle}.log-item[data-v-5ed8fd39]{padding:10px 12px;border-bottom:1px solid var(--bg-page)}.log-item .log-text[data-v-5ed8fd39]{margin-left:8px}

package/lib/html.d.ts

@@ -0,0 +1,2 @@
+export declare function renderBottleHtml(bottle: any, comments: any[]): string;
+export declare function renderLogsHtml(logs: any[]): string;

package/lib/html.js

@@ -0,0 +1,216 @@
+export function renderBottleHtml(bottle, comments) {
+    const renderedComments = comments.map(c => `
+    <div class="comment-item">
+      <span><strong>${c.username}：</strong></span>
+      <span class="content-text">${c.content.replace(/\n/g, '<br/>')}</span>
+      <span class="comment-time">${new Date(c.createdAt).toLocaleString()}</span>
+    </div>
+  `).join('');
+    return `
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <style>
+    body {
+      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+      background: transparent;
+      padding: 40px;
+      margin: 0;
+      width: 600px;
+    }
+    .bottle-container {
+      position: relative;
+      border: 1px dashed #b0bec5;
+      border-radius: 10px;
+      padding: 50px 30px 30px 30px;
+      background-color: #fff8e1;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    }
+    .sticky-note {
+      position: absolute;
+      top: -20px;
+      right: -20px;
+      width: 60px;
+      height: 60px;
+      background-color: #ffeb3b;
+      transform: rotate(15deg);
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+      z-index: 1;
+      border: 1px solid #fbc02d;
+    }
+    .license-plate {
+      position: absolute;
+      top: 10px;
+      left: 15px;
+      font-size: 20px;
+      color: #d32f2f;
+      font-weight: bold;
+    }
+    .bottle-content {
+      font-size: 18px;
+      color: #333;
+      line-height: 1.6;
+      margin-top: 10px;
+      white-space: pre-wrap;
+    }
+    .bottle-content img {
+      max-width: 100%;
+      border-radius: 8px;
+      margin-top: 10px;
+    }
+    .meta {
+      margin-top: 20px;
+      padding-top: 10px;
+      border-top: 1px dashed #cfd8dc;
+      display: flex;
+      justify-content: space-between;
+      color: #7b5e57;
+      font-size: 14px;
+    }
+    .comments {
+      margin-top: 20px;
+    }
+    .comment-item {
+      background-color: #f0f4c3;
+      padding: 12px;
+      border-radius: 8px;
+      margin-bottom: 10px;
+      font-size: 15px;
+      color: #444;
+      border: 1px solid #e2e6b3;
+    }
+    .comment-time { float: right; font-size: 12px; color: #888; }
+    .content-text img { height: 30px; vertical-align: middle; margin: 0 5px; }
+  </style>
+</head>
+<body>
+  <div class="bottle-container">
+    <div class="sticky-note"></div>
+    <div class="license-plate">No.${String(bottle.id).padStart(5, '0')}</div>
+    
+    <div class="bottle-content">
+      ${bottle.content}
+    </div>
+    
+    <div class="meta">
+      <span>作者：${bottle.username}</span>
+      <span>${new Date(bottle.createdAt).toLocaleString()}</span>
+    </div>
+
+    ${comments.length ? `
+      <div class="comments">
+        <h3 style="color: #6d4c41; font-size: 16px;">评论区 (${comments.length})</h3>
+        ${renderedComments}
+      </div>
+    ` : ''}
+  </div>
+</body>
+</html>
+  `;
+}
+export function renderLogsHtml(logs) {
+    const renderedLogs = logs.map((log, idx) => {
+        let actionHtml = '';
+        if (log.action === 'throw')
+            actionHtml = `扔出了一只漂流瓶 (Bottle ID: <span>${log.bottleId}</span>)`;
+        else if (log.action === 'fish')
+            actionHtml = `捞到了一只漂流瓶 (Bottle ID: <span>${log.bottleId}</span>)`;
+        else if (log.action === 'comment')
+            actionHtml = `对瓶子 (Bottle ID: <span>${log.bottleId}</span>) 发表了评论`;
+        else if (log.action === 'approve')
+            actionHtml = `管理员 <span style="color:#2e7d32">通过了</span> 漂流瓶 (Bottle ID: <span>${log.bottleId}</span>)`;
+        else if (log.action === 'reject')
+            actionHtml = `管理员 <span style="color:#d32f2f">驳回了</span> 漂流瓶 (Bottle ID: <span>${log.bottleId}</span>)`;
+        // Check if the log belongs to the owner of the timeline, or someone else doing it.
+        // However, the username is already populated.
+        return `
+      <div class="timeline-item">
+        <div class="bubble-content ${idx === 0 ? 'new' : ''}">
+          <div class="event"><strong>${log.username}</strong> ${actionHtml}</div>
+          <div class="time">${new Date(log.createdAt).toLocaleString()}</div>
+        </div>
+      </div>
+    `;
+    }).join('');
+    return `
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <style>
+    body {
+      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+      background: transparent;
+      padding: 40px;
+      margin: 0;
+      width: 600px;
+    }
+    .timeline-container {
+      background-color: #fff8e1;
+      border: 1px dashed #b0bec5;
+      border-radius: 10px;
+      padding: 30px;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    }
+    .title {
+      text-align: center;
+      font-size: 22px;
+      font-weight: bold;
+      color: #331e04;
+      border-bottom: 2px solid #211a12;
+      padding-bottom: 15px;
+      margin-bottom: 20px;
+    }
+    .timeline {
+      position: relative;
+      margin-left: 20px;
+      border-left: 2px dashed #443c3c;
+      padding-left: 25px;
+    }
+    .timeline-item {
+      margin-bottom: 20px;
+      position: relative;
+    }
+    .timeline-item:before {
+      content: '';
+      position: absolute;
+      left: -35px;
+      top: 15px;
+      width: 0; height: 0;
+      border: 8px solid transparent;
+      border-left-color: #331e04;
+    }
+    .bubble-content {
+      border: 1px solid #ccc;
+      background-image: linear-gradient(#ffffff 80%, #fdfef4);
+      border-radius: 6px;
+      padding: 12px 16px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      position: relative;
+    }
+    .bubble-content.new::before {
+      content: '新！';
+      position: absolute;
+      top: -15px;
+      right: 10px;
+      color: #00b62a;
+      font-weight: bold;
+      font-size: 18px;
+    }
+    .event { color: #331e04; padding-bottom: 6px; border-bottom: 1px dashed #ccc; font-size: 15px; }
+    .event span { font-weight: bold; color: #ff5722; }
+    .time { margin-top: 8px; color: #888; font-size: 13px; }
+  </style>
+</head>
+<body>
+  <div class="timeline-container">
+    <div class="title">漂流瓶航海日志</div>
+    <div class="timeline">
+      ${logs.length ? renderedLogs : '<div style="text-align: center; color: #888; margin-top:20px;">暂无航海记录</div>'}
+    </div>
+  </div>
+</body>
+</html>
+  `;
+}

package/lib/index.d.ts

@@ -0,0 +1,69 @@
+import { Context, Schema } from 'koishi';
+export declare const name = "driftbottle-with-webui";
+export interface Config {
+    dailyLimit: number;
+    cooldown: number;
+    enableQQNativeMarkdown: boolean;
+    enableQQInlineCmd: boolean;
+}
+export declare const Config: Schema<Config>;
+export declare const inject: string[];
+declare module 'koishi' {
+    interface Tables {
+        driftbottle: DriftBottle;
+        driftbottle_comment: DriftBottleComment;
+        driftbottle_usage: DriftBottleUsage;
+        driftbottle_log: DriftBottleLog;
+    }
+}
+export interface DriftBottleLog {
+    id: number;
+    bottleId: number;
+    userId: string;
+    username: string;
+    action: string;
+    content: string;
+    createdAt: Date;
+}
+export interface DriftBottle {
+    id: number;
+    userId: string;
+    platform: string;
+    username: string;
+    content: string;
+    status: number;
+    createdAt: Date;
+}
+export interface DriftBottleComment {
+    id: number;
+    bottleId: number;
+    userId: string;
+    platform: string;
+    username: string;
+    content: string;
+    status: number;
+    createdAt: Date;
+}
+export interface DriftBottleUsage {
+    id: number;
+    userId: string;
+    platform: string;
+    date: string;
+    count: number;
+    lastUsedAt: Date;
+}
+declare module '@koishijs/plugin-console' {
+    interface Events {
+        'driftbottle/bottles'(status: number): Promise<(DriftBottle & {
+            comments: DriftBottleComment[];
+            logs: DriftBottleLog[];
+            fishCount: number;
+        })[]>;
+        'driftbottle/comments'(status: number): Promise<DriftBottleComment[]>;
+        'driftbottle/review-bottle'(id: number, status: number): Promise<void>;
+        'driftbottle/review-comment'(id: number, status: number): Promise<void>;
+        'driftbottle/delete-bottle'(id: number): Promise<void>;
+        'driftbottle/delete-comment'(id: number): Promise<void>;
+    }
+}
+export declare function apply(ctx: Context, config: Config): void;

package/lib/index.js

@@ -0,0 +1,647 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Config: () => Config,
+  apply: () => apply,
+  inject: () => inject,
+  name: () => name
+});
+module.exports = __toCommonJS(src_exports);
+var import_koishi = require("koishi");
+
+// src/html.ts
+function renderBottleHtml(bottle, comments) {
+  const renderedComments = comments.map((c) => `
+    <div class="comment-item">
+      <span><strong>${c.username}：</strong></span>
+      <span class="content-text">${c.content.replace(/\n/g, "<br/>")}</span>
+      <span class="comment-time">${new Date(c.createdAt).toLocaleString()}</span>
+    </div>
+  `).join("");
+  return `
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <style>
+    body {
+      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+      background: transparent;
+      padding: 40px;
+      margin: 0;
+      width: 600px;
+    }
+    .bottle-container {
+      position: relative;
+      border: 1px dashed #b0bec5;
+      border-radius: 10px;
+      padding: 50px 30px 30px 30px;
+      background-color: #fff8e1;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    }
+    .sticky-note {
+      position: absolute;
+      top: -20px;
+      right: -20px;
+      width: 60px;
+      height: 60px;
+      background-color: #ffeb3b;
+      transform: rotate(15deg);
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+      z-index: 1;
+      border: 1px solid #fbc02d;
+    }
+    .license-plate {
+      position: absolute;
+      top: 10px;
+      left: 15px;
+      font-size: 20px;
+      color: #d32f2f;
+      font-weight: bold;
+    }
+    .bottle-content {
+      font-size: 18px;
+      color: #333;
+      line-height: 1.6;
+      margin-top: 10px;
+      white-space: pre-wrap;
+    }
+    .bottle-content img {
+      max-width: 100%;
+      border-radius: 8px;
+      margin-top: 10px;
+    }
+    .meta {
+      margin-top: 20px;
+      padding-top: 10px;
+      border-top: 1px dashed #cfd8dc;
+      display: flex;
+      justify-content: space-between;
+      color: #7b5e57;
+      font-size: 14px;
+    }
+    .comments {
+      margin-top: 20px;
+    }
+    .comment-item {
+      background-color: #f0f4c3;
+      padding: 12px;
+      border-radius: 8px;
+      margin-bottom: 10px;
+      font-size: 15px;
+      color: #444;
+      border: 1px solid #e2e6b3;
+    }
+    .comment-time { float: right; font-size: 12px; color: #888; }
+    .content-text img { height: 30px; vertical-align: middle; margin: 0 5px; }
+  </style>
+</head>
+<body>
+  <div class="bottle-container">
+    <div class="sticky-note"></div>
+    <div class="license-plate">No.${String(bottle.id).padStart(5, "0")}</div>
+    
+    <div class="bottle-content">
+      ${bottle.content}
+    </div>
+    
+    <div class="meta">
+      <span>作者：${bottle.username}</span>
+      <span>${new Date(bottle.createdAt).toLocaleString()}</span>
+    </div>
+
+    ${comments.length ? `
+      <div class="comments">
+        <h3 style="color: #6d4c41; font-size: 16px;">评论区 (${comments.length})</h3>
+        ${renderedComments}
+      </div>
+    ` : ""}
+  </div>
+</body>
+</html>
+  `;
+}
+__name(renderBottleHtml, "renderBottleHtml");
+function renderLogsHtml(logs) {
+  const renderedLogs = logs.map((log, idx) => {
+    let actionHtml = "";
+    if (log.action === "throw") actionHtml = `扔出了一只漂流瓶 (Bottle ID: <span>${log.bottleId}</span>)`;
+    else if (log.action === "fish") actionHtml = `捞到了一只漂流瓶 (Bottle ID: <span>${log.bottleId}</span>)`;
+    else if (log.action === "comment") actionHtml = `对瓶子 (Bottle ID: <span>${log.bottleId}</span>) 发表了评论`;
+    else if (log.action === "approve") actionHtml = `管理员 <span style="color:#2e7d32">通过了</span> 漂流瓶 (Bottle ID: <span>${log.bottleId}</span>)`;
+    else if (log.action === "reject") actionHtml = `管理员 <span style="color:#d32f2f">驳回了</span> 漂流瓶 (Bottle ID: <span>${log.bottleId}</span>)`;
+    return `
+      <div class="timeline-item">
+        <div class="bubble-content ${idx === 0 ? "new" : ""}">
+          <div class="event"><strong>${log.username}</strong> ${actionHtml}</div>
+          <div class="time">${new Date(log.createdAt).toLocaleString()}</div>
+        </div>
+      </div>
+    `;
+  }).join("");
+  return `
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <style>
+    body {
+      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+      background: transparent;
+      padding: 40px;
+      margin: 0;
+      width: 600px;
+    }
+    .timeline-container {
+      background-color: #fff8e1;
+      border: 1px dashed #b0bec5;
+      border-radius: 10px;
+      padding: 30px;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    }
+    .title {
+      text-align: center;
+      font-size: 22px;
+      font-weight: bold;
+      color: #331e04;
+      border-bottom: 2px solid #211a12;
+      padding-bottom: 15px;
+      margin-bottom: 20px;
+    }
+    .timeline {
+      position: relative;
+      margin-left: 20px;
+      border-left: 2px dashed #443c3c;
+      padding-left: 25px;
+    }
+    .timeline-item {
+      margin-bottom: 20px;
+      position: relative;
+    }
+    .timeline-item:before {
+      content: '';
+      position: absolute;
+      left: -35px;
+      top: 15px;
+      width: 0; height: 0;
+      border: 8px solid transparent;
+      border-left-color: #331e04;
+    }
+    .bubble-content {
+      border: 1px solid #ccc;
+      background-image: linear-gradient(#ffffff 80%, #fdfef4);
+      border-radius: 6px;
+      padding: 12px 16px;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      position: relative;
+    }
+    .bubble-content.new::before {
+      content: '新！';
+      position: absolute;
+      top: -15px;
+      right: 10px;
+      color: #00b62a;
+      font-weight: bold;
+      font-size: 18px;
+    }
+    .event { color: #331e04; padding-bottom: 6px; border-bottom: 1px dashed #ccc; font-size: 15px; }
+    .event span { font-weight: bold; color: #ff5722; }
+    .time { margin-top: 8px; color: #888; font-size: 13px; }
+  </style>
+</head>
+<body>
+  <div class="timeline-container">
+    <div class="title">漂流瓶航海日志</div>
+    <div class="timeline">
+      ${logs.length ? renderedLogs : '<div style="text-align: center; color: #888; margin-top:20px;">暂无航海记录</div>'}
+    </div>
+  </div>
+</body>
+</html>
+  `;
+}
+__name(renderLogsHtml, "renderLogsHtml");
+
+// src/index.ts
+var import_path = require("path");
+var import_fs = require("fs");
+var name = "driftbottle-with-webui";
+var Config = import_koishi.Schema.object({
+  dailyLimit: import_koishi.Schema.number().default(10).description("每日捞瓶子和扔瓶子的次数上限。"),
+  cooldown: import_koishi.Schema.number().default(60).description("扔瓶子/捞瓶子的冷却时间（秒）。"),
+  enableQQNativeMarkdown: import_koishi.Schema.boolean().default(false).description("是否在 QQ 官方机器人下独立下发包含快捷指令按钮的 Markdown。"),
+  enableQQInlineCmd: import_koishi.Schema.boolean().default(true).description("是否在开启原生 Markdown 时启用 mqqapi 快捷操作按钮（仅QQ支持）。")
+});
+var inject = ["database", "console", "http", "server", "puppeteer"];
+function apply(ctx, config) {
+  const imageDir = (0, import_path.resolve)(ctx.baseDir, "data", "driftbottle");
+  import_fs.promises.mkdir(imageDir, { recursive: true }).catch(() => {
+  });
+  ctx.server.get("/driftbottle/image/:filename", async (koaCtx) => {
+    const filename = koaCtx.params.filename;
+    if (!filename.match(/^[a-zA-Z0-9_.-]+$/)) return koaCtx.status = 400;
+    const filePath = (0, import_path.join)(imageDir, filename);
+    try {
+      const data = await import_fs.promises.readFile(filePath);
+      const ext = filename.split(".").pop()?.toLowerCase();
+      let mime = "image/png";
+      if (ext === "jpg" || ext === "jpeg") mime = "image/jpeg";
+      else if (ext === "gif") mime = "image/gif";
+      else if (ext === "webp") mime = "image/webp";
+      koaCtx.set("Content-Type", mime);
+      koaCtx.body = data;
+    } catch (e) {
+      koaCtx.status = 404;
+    }
+  });
+  async function processElements(elements) {
+    for (const element of elements) {
+      if (element.type === "img" || element.type === "image") {
+        let url = element.attrs.url || element.attrs.src;
+        if (typeof url === "string" && (url.startsWith("http://") || url.startsWith("https://"))) {
+          try {
+            const buffer = await ctx.http.get(url, { responseType: "arraybuffer" });
+            let ext = "png";
+            const match = url.match(/\.([a-zA-Z0-9]+)(?:[?#]|$)/);
+            if (match) {
+              const extLower = match[1].toLowerCase();
+              if (["png", "jpg", "jpeg", "gif", "webp"].includes(extLower)) {
+                ext = extLower;
+              }
+            }
+            const filename = `${import_koishi.Random.id()}.${ext}`;
+            const fullPath = (0, import_path.join)(imageDir, filename);
+            await import_fs.promises.writeFile(fullPath, Buffer.from(buffer));
+            element.attrs.url = `/driftbottle/image/${filename}`;
+            delete element.attrs.src;
+          } catch (e) {
+            ctx.logger("driftbottle").warn("Failed to download image from %s", url, e);
+          }
+        }
+      }
+      if (element.children?.length) {
+        await processElements(element.children);
+      }
+    }
+  }
+  __name(processElements, "processElements");
+  async function downloadImagesLocally(content) {
+    const elements = import_koishi.h.parse(content);
+    await processElements(elements);
+    return elements.join("");
+  }
+  __name(downloadImagesLocally, "downloadImagesLocally");
+  async function prepareContentForSending(content) {
+    const elements = import_koishi.h.parse(content);
+    async function traverse(nodes) {
+      for (const node of nodes) {
+        if (node.type === "img" || node.type === "image") {
+          const url = node.attrs.url || node.attrs.src;
+          node.type = "img";
+          if (typeof url === "string" && url.startsWith("/driftbottle/image/")) {
+            const filename = url.replace("/driftbottle/image/", "");
+            const fullPath = (0, import_path.join)(imageDir, filename);
+            try {
+              const buffer = await import_fs.promises.readFile(fullPath);
+              const ext = filename.split(".").pop()?.toLowerCase() || "png";
+              let mime = "image/png";
+              if (ext === "jpg" || ext === "jpeg") mime = "image/jpeg";
+              else if (ext === "gif") mime = "image/gif";
+              else if (ext === "webp") mime = "image/webp";
+              node.attrs.src = `data:${mime};base64,${buffer.toString("base64")}`;
+              delete node.attrs.url;
+            } catch (e) {
+              ctx.logger("driftbottle").warn("Failed to convert image to base64: %s", fullPath, e);
+              node.attrs.src = url;
+              delete node.attrs.url;
+            }
+          } else {
+            node.attrs.src = url;
+            delete node.attrs.url;
+          }
+        }
+        if (node.children?.length) {
+          await traverse(node.children);
+        }
+      }
+    }
+    __name(traverse, "traverse");
+    await traverse(elements);
+    return elements.join("");
+  }
+  __name(prepareContentForSending, "prepareContentForSending");
+  ctx.model.extend("driftbottle", {
+    id: "unsigned",
+    userId: "string",
+    platform: "string",
+    username: "string",
+    content: "text",
+    status: "unsigned",
+    createdAt: "timestamp"
+  }, { autoInc: true });
+  ctx.model.extend("driftbottle_comment", {
+    id: "unsigned",
+    bottleId: "unsigned",
+    userId: "string",
+    platform: "string",
+    username: "string",
+    content: "text",
+    status: "unsigned",
+    createdAt: "timestamp"
+  }, { autoInc: true });
+  ctx.model.extend("driftbottle_usage", {
+    id: "unsigned",
+    userId: "string",
+    platform: "string",
+    date: "string",
+    count: "unsigned",
+    lastUsedAt: "timestamp"
+  }, { autoInc: true });
+  ctx.model.extend("driftbottle_log", {
+    id: "unsigned",
+    bottleId: "unsigned",
+    userId: "string",
+    username: "string",
+    action: "string",
+    content: "text",
+    createdAt: "timestamp"
+  }, { autoInc: true });
+  ctx.inject(["console"], (ctx2) => {
+    ctx2.console.addEntry({
+      dev: (0, import_path.resolve)(__dirname, "../client/index.ts"),
+      prod: __dirname.includes("node_modules") ? (0, import_path.resolve)(__dirname, "../dist") : (0, import_path.resolve)(ctx2.baseDir, "node_modules/koishi-plugin-driftbottle-with-webui/dist")
+    });
+    ctx2.console.addListener("driftbottle/bottles", async (status) => {
+      const bottles = await ctx2.database.get("driftbottle", { status }, { sort: { createdAt: "desc" }, limit: 100 });
+      const bottleIds = bottles.map((b) => b.id);
+      const comments = bottleIds.length ? await ctx2.database.get("driftbottle_comment", { bottleId: bottleIds }) : [];
+      const logs = bottleIds.length ? await ctx2.database.get("driftbottle_log", { bottleId: bottleIds }) : [];
+      return bottles.map((b) => ({
+        ...b,
+        comments: comments.filter((c) => c.bottleId === b.id),
+        logs: logs.filter((l) => l.bottleId === b.id).sort((a, b2) => a.createdAt.getTime() - b2.createdAt.getTime()),
+        fishCount: logs.filter((l) => l.bottleId === b.id && l.action === "fish").length
+      }));
+    });
+    ctx2.console.addListener("driftbottle/comments", async (status) => {
+      return await ctx2.database.get("driftbottle_comment", { status }, { sort: { createdAt: "desc" }, limit: 100 });
+    });
+    ctx2.console.addListener("driftbottle/review-bottle", async (id, status) => {
+      await ctx2.database.set("driftbottle", id, { status });
+      await ctx2.database.create("driftbottle_log", {
+        bottleId: id,
+        userId: "Admin",
+        username: "管理员",
+        action: status === 1 ? "approve" : "reject",
+        content: "",
+        createdAt: /* @__PURE__ */ new Date()
+      });
+    });
+    ctx2.console.addListener("driftbottle/review-comment", async (id, status) => {
+      await ctx2.database.set("driftbottle_comment", id, { status });
+    });
+    ctx2.console.addListener("driftbottle/delete-bottle", async (id) => {
+      await ctx2.database.remove("driftbottle", { id });
+      await ctx2.database.remove("driftbottle_comment", { bottleId: id });
+    });
+    ctx2.console.addListener("driftbottle/delete-comment", async (id) => {
+      await ctx2.database.remove("driftbottle_comment", { id });
+    });
+  });
+  const getUsage = /* @__PURE__ */ __name(async (session) => {
+    const date = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+    let usageList = await ctx.database.get("driftbottle_usage", {
+      userId: session.userId,
+      platform: session.platform,
+      date
+    });
+    let usage;
+    if (usageList.length === 0) {
+      usage = await ctx.database.create("driftbottle_usage", {
+        userId: session.userId,
+        platform: session.platform,
+        date,
+        count: 0,
+        lastUsedAt: /* @__PURE__ */ new Date(0)
+      });
+    } else {
+      usage = usageList[0];
+    }
+    return usage;
+  }, "getUsage");
+  const checkUsage = /* @__PURE__ */ __name(async (session) => {
+    const usage = await getUsage(session);
+    if (usage.count >= config.dailyLimit) {
+      return "你今天扔/捞瓶子的次数已经用光了，明天再来吧！";
+    }
+    const now = /* @__PURE__ */ new Date();
+    const diff = (now.getTime() - usage.lastUsedAt.getTime()) / 1e3;
+    if (diff < config.cooldown) {
+      return `你操作得太快了，请等待 ${Math.ceil(config.cooldown - diff)} 秒后再试。`;
+    }
+    return null;
+  }, "checkUsage");
+  const updateUsage = /* @__PURE__ */ __name(async (session) => {
+    const usage = await getUsage(session);
+    await ctx.database.set("driftbottle_usage", usage.id, {
+      count: usage.count + 1,
+      lastUsedAt: /* @__PURE__ */ new Date()
+    });
+  }, "updateUsage");
+  ctx.command("driftbottle", "漂流瓶").alias("漂流瓶");
+  ctx.command("driftbottle.throw <content:text>", "扔一个漂流瓶").alias("扔瓶子").alias("漂流瓶.扔").action(async ({ session }, content) => {
+    if (!content) return "瓶子里不能空着哦，请填写内容。";
+    const error = await checkUsage(session);
+    if (error) return error;
+    const processedContent = await downloadImagesLocally(content);
+    const username = session.username || session.author?.nickname || session.userId;
+    const created = await ctx.database.create("driftbottle", {
+      userId: session.userId,
+      platform: session.platform,
+      username,
+      content: processedContent,
+      // 这里支持图片因为是由 Koishi 解析成 h 标签的字符串
+      status: 0,
+      createdAt: /* @__PURE__ */ new Date()
+    });
+    await ctx.database.create("driftbottle_log", {
+      bottleId: created.id,
+      userId: session.userId,
+      username,
+      action: "throw",
+      content: "",
+      createdAt: /* @__PURE__ */ new Date()
+    });
+    await updateUsage(session);
+    return "漂流瓶已仍出！等待管理员审核后即可漂向大海~";
+  });
+  async function sendDriftBottleOutput(session, imageString, mdCommands, config2) {
+    await session.send(imageString);
+    if (session.platform === "qq" && config2.enableQQNativeMarkdown && config2.enableQQInlineCmd && mdCommands.length > 0) {
+      let finalMd = `> 💡 快捷互动操作：
+`;
+      mdCommands.forEach((cmd) => {
+        finalMd += `> [${cmd.text}](mqqapi://aio/inlinecmd?command=${encodeURIComponent(cmd.command)}&enter=false&reply=false)  `;
+      });
+      session["seq"] = session["seq"] || 0;
+      const payload = {
+        msg_type: 2,
+        msg_id: session.messageId,
+        msg_seq: ++session["seq"],
+        content: "漂流瓶 互动引导",
+        markdown: { content: finalMd }
+      };
+      try {
+        if (session.isDirect) {
+          await session.qq?.sendPrivateMessage(session.channelId, payload);
+        } else {
+          await session.qq?.sendMessage(session.channelId, payload);
+        }
+      } catch (e) {
+        ctx.logger("driftbottle").warn("Failed to send QQ Markdown interact buttons:", e.message || e);
+      }
+    }
+  }
+  __name(sendDriftBottleOutput, "sendDriftBottleOutput");
+  ctx.command("driftbottle.fish", "捞一个漂流瓶").alias("捞瓶子").alias("漂流瓶.捞").action(async ({ session }) => {
+    const error = await checkUsage(session);
+    if (error) return error;
+    const bottles = await ctx.database.get("driftbottle", { status: 1 });
+    if (!bottles.length) {
+      return "大海里空空如也，什么也没捞到。";
+    }
+    const randomBottle = bottles[Math.floor(Math.random() * bottles.length)];
+    await updateUsage(session);
+    const sendContent = await prepareContentForSending(randomBottle.content);
+    await ctx.database.create("driftbottle_log", {
+      bottleId: randomBottle.id,
+      userId: session.userId,
+      username: session.username || session.author?.nickname || session.userId,
+      action: "fish",
+      content: "",
+      createdAt: /* @__PURE__ */ new Date()
+    });
+    const comments = await ctx.database.get("driftbottle_comment", { bottleId: randomBottle.id, status: 1 });
+    const hydratedComments = await Promise.all(comments.map(async (c) => ({
+      ...c,
+      content: await prepareContentForSending(c.content)
+    })));
+    const html = renderBottleHtml({
+      ...randomBottle,
+      content: sendContent
+    }, hydratedComments);
+    const image = await ctx.puppeteer.render(html);
+    return sendDriftBottleOutput(session, image, [
+      { text: "捞个瓶子", command: "/捞瓶子" },
+      { text: "评论瓶子", command: `/评论瓶子 ${randomBottle.id} ` },
+      { text: "我的动态", command: "/我的动态" }
+    ], config);
+  });
+  ctx.command("driftbottle.comment <id:number> <content:text>", "评论一个漂流瓶").alias("评论瓶子").alias("漂流瓶.评论").action(async ({ session }, id, content) => {
+    if (!id || !content) return "请提供要评论的漂流瓶 ID 和你要评论的内容。";
+    const bottles = await ctx.database.get("driftbottle", { id });
+    if (!bottles.length) return `抱歉，找不到 ID 为 ${id} 的漂流瓶。`;
+    if (bottles[0].status !== 1) return "该漂流瓶不可被评论。";
+    const processedContent = await downloadImagesLocally(content);
+    const username = session.username || session.author?.nickname || session.userId;
+    const created = await ctx.database.create("driftbottle_comment", {
+      bottleId: id,
+      userId: session.userId,
+      platform: session.platform,
+      username,
+      content: processedContent,
+      status: 0,
+      // 评论也进入审核队列
+      createdAt: /* @__PURE__ */ new Date()
+    });
+    await ctx.database.create("driftbottle_log", {
+      bottleId: id,
+      userId: session.userId,
+      username,
+      action: "comment",
+      content: processedContent,
+      createdAt: /* @__PURE__ */ new Date()
+    });
+    return "评论已发送！等待管理员审核后大家就都能看到了。";
+  });
+  ctx.command("driftbottle.view <id:number>", "查看漂流瓶和它的评论").alias("看瓶子").alias("漂流瓶.看瓶子").alias("漂流瓶.查看").action(async ({ session }, id) => {
+    if (!id) return "请输入漂流瓶 ID。";
+    const bottles = await ctx.database.get("driftbottle", { id });
+    if (!bottles.length) return `找不到 ID 为 ${id} 的漂流瓶。`;
+    const bottle = bottles[0];
+    if (bottle.status !== 1 && bottle.userId !== session.userId) {
+      return "这是一个还没通过审核或被拒绝的漂流瓶，你无法查看。";
+    }
+    const comments = await ctx.database.get("driftbottle_comment", { bottleId: id, status: 1 });
+    const sendBottleContent = await prepareContentForSending(bottle.content);
+    const hydratedComments = await Promise.all(comments.map(async (c) => ({
+      ...c,
+      content: await prepareContentForSending(c.content)
+    })));
+    const html = renderBottleHtml({
+      ...bottle,
+      content: sendBottleContent
+    }, hydratedComments);
+    const image = await ctx.puppeteer.render(html);
+    return sendDriftBottleOutput(session, image, [
+      { text: "评论瓶子", command: `/评论瓶子 ${id} ` }
+    ], config);
+  });
+  ctx.command("driftbottle.my", "查看我扔的瓶子").alias("我的瓶子").alias("漂流瓶.我的瓶子").action(async ({ session }) => {
+    const bottles = await ctx.database.get("driftbottle", { userId: session.userId, platform: session.platform });
+    if (!bottles.length) return "你还没扔过漂流瓶。";
+    let msg = ["你有这些漂流瓶："];
+    for (const b of bottles.slice(-10)) {
+      let statusStr = b.status === 0 ? "审核中" : b.status === 1 ? "已通过" : "已拒绝";
+      let excerpt = b.content.length > 10 ? b.content.substring(0, 10).replace(/<[^>]*>/g, "[图片/元素]") + "..." : b.content;
+      msg.push(`[ID: ${b.id}] ${excerpt} - ${statusStr}`);
+    }
+    if (bottles.length > 10) msg.push(`...等共 ${bottles.length} 个瓶子`);
+    return msg.join("\n");
+  });
+  ctx.command("driftbottle.logs", "查看自己的航海动态").alias("我的动态").alias("漂流瓶.我的动态").action(async ({ session }) => {
+    const myBottles = await ctx.database.get("driftbottle", { userId: session.userId });
+    const myBottleIds = myBottles.map((b) => b.id);
+    const logs = await ctx.database.get("driftbottle_log", {
+      $or: [
+        { userId: session.userId },
+        ...myBottleIds.length ? [{ bottleId: myBottleIds }] : []
+      ]
+    });
+    if (!logs.length) return "你还没有任何航海记录。";
+    logs.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+    const recentLogs = logs.slice(0, 30);
+    const html = renderLogsHtml(recentLogs);
+    const image = await ctx.puppeteer.render(html);
+    return sendDriftBottleOutput(session, image, [
+      { text: "捞个瓶子", command: "/捞瓶子" }
+    ], config);
+  });
+}
+__name(apply, "apply");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Config,
+  apply,
+  inject,
+  name
+});

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "koishi-plugin-driftbottle-with-webui",
+  "description": "漂流瓶，但是可以在koishi webui里查看漂流瓶列表，审核和删除漂流瓶",
+  "version": "0.0.2",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "dist"
+  ],
+  "license": "MIT",
+  "koishi": {
+    "locales": [
+      "locales"
+    ]
+  },
+  "scripts": {
+    "build": "koishi-console build",
+    "dev": "koishi-console dev"
+  },
+  "keywords": [
+    "chatbot",
+    "koishi",
+    "plugin"
+  ],
+  "devDependencies": {
+    "@koishijs/client": "^5.28.2",
+    "@koishijs/plugin-console": "^5.28.2",
+    "@koishijs/scripts": "^4.6.2",
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vue": "^3.0.0"
+  },
+  "peerDependencies": {
+    "koishi": "^4.16.0",
+    "koishi-plugin-puppeteer": "^3.0.0"
+  }
+}

package/readme.md

@@ -0,0 +1,5 @@
+# koishi-plugin-driftbottle-with-webui
+
+[![npm](https://img.shields.io/npm/v/koishi-plugin-driftbottle-with-webui?style=flat-square)](https://www.npmjs.com/package/koishi-plugin-driftbottle-with-webui)
+
+漂流瓶，但是可以在koishi webui里查看漂流瓶列表，审核和删除漂流瓶