widgetsAB Cards
cloud_upload

PicUp 上传卡片

PicUp 插件专用卡片
verified最低支持版本
AB Admin ≥ 2.1.50
extension依赖插件
person作者
LHL
event收录时间
2026-09-20 23:11
update最近更新
2026-09-21 10:09
visibility浏览 / 截图
26 次 · 58.9 KB

image效果截图

点击放大
PicUp 上传卡片 截图

notes详细介绍

卡片里只显示两行最关键的策略 —— 当前方案 与 存储驱动 (不显示可选方案数量、驱动参数,也不跳转插件设置页), 中间是一整块 Material Design 3 拖放区:拖文件进卡片会高亮 + 呼吸光环, 松手直接打开与媒体库同款的上传窗口(拖进来的文件已自动排进待上传列表), 点一下拖放区、按 Enter 或点「打开上传窗口」按钮也会打开同一个窗口。

code配置代码

<style>.ab-picup-drop{position:relative;overflow:hidden;cursor:pointer;border-radius:var(--md-radius-xl,28px) !important;border:1.5px dashed var(--md-outline-variant,#cac4d0) !important;background:var(--md-surface-container-low,#f7f2fa) !important;transition:border-color var(--md-transition-duration,.2s) var(--md-transition-easing,cubic-bezier(.2,0,0,1)),background-color var(--md-transition-duration,.2s) var(--md-transition-easing,cubic-bezier(.2,0,0,1)),box-shadow var(--md-transition-duration,.2s) var(--md-transition-easing,cubic-bezier(.2,0,0,1)),transform var(--md-transition-duration,.2s) var(--md-transition-easing,cubic-bezier(.2,0,0,1))}.ab-picup-drop .ab-ui-empty-icon{position:relative;transition:transform .3s cubic-bezier(.2,0,0,1),background-color .2s,color .2s}.ab-picup-drop:hover{border-color:var(--md-primary,#6750a4) !important;box-shadow:var(--md-elevation-1)}.ab-picup-drop:hover .ab-ui-empty-icon{transform:translateY(-2px) scale(1.04)}.ab-picup-drop.is-dragover{border-style:solid !important;border-color:var(--md-primary,#6750a4) !important;background:var(--md-primary-container,#eaddff) !important;transform:scale(1.012);box-shadow:0 0 0 4px var(--md-primary-container,#eaddff),var(--md-elevation-2)}.ab-picup-drop.is-dragover .ab-ui-empty-text{color:var(--md-on-primary-container,#21005d) !important}.ab-picup-drop.is-dragover .ab-ui-empty-hint{color:var(--md-on-primary-container,#21005d) !important;opacity:.78}.ab-picup-drop.is-dragover .ab-ui-empty-icon{animation:ab-picup-bob .9s cubic-bezier(.2,0,0,1) infinite}.ab-picup-ring{position:absolute;inset:-12px;border-radius:50%;opacity:0;pointer-events:none;border:2px solid var(--md-primary,#6750a4)}.ab-picup-drop.is-dragover .ab-picup-ring{animation:ab-picup-ripple 1.5s cubic-bezier(.2,0,0,1) infinite}.ab-picup-drop.is-dragover .ab-picup-ring + .ab-picup-ring{animation-delay:.5s}.ab-picup-drop.is-dropped .ab-ui-empty-icon{animation:ab-picup-pop .45s cubic-bezier(.2,0,0,1)}@keyframes ab-picup-bob{0%,100%{transform:translateY(0) scale(1.12)}50%{transform:translateY(-5px) scale(1.12)}}@keyframes ab-picup-ripple{0%{transform:scale(.72);opacity:.38}70%{opacity:0}100%{transform:scale(1.55);opacity:0}}@keyframes ab-picup-pop{0%{transform:scale(1.12)}45%{transform:scale(.9)}100%{transform:scale(1)}}@media (prefers-reduced-motion:reduce){.ab-picup-drop,.ab-picup-drop .ab-ui-empty-icon{transition:none !important}.ab-picup-drop.is-dragover .ab-ui-empty-icon,.ab-picup-drop.is-dragover .ab-picup-ring,.ab-picup-drop.is-dropped .ab-ui-empty-icon{animation:none !important}}</style>
(function(){var CFG=window.__PICUP_CFG__||null;var AB=window.AdminBeautify||{};var ADMIN=location.pathname.replace(/[^\/]*$/,'');var SETS=ADMIN+'options-plugin.php?config=PicUp';var MEDIA=ADMIN+'manage-medias.php';var CACHE='picup-strategy';var TTL=5*60*1000;var body=card.querySelector('.ab-custom-body');var infoHost=ab.ui.el('div');var tipHost=ab.ui.el('div');var tip=null;var dropzone=ab.ui.empty({icon:'cloud_upload',size:'lg',text:'拖放文件到卡片内上传',hint:'松手即打开上传窗口 · 点击此处也可以',id:'ab-picup-drop',attrs:{role:'button',tabindex:'0','aria-label':'打开上传窗口'},onClick:function(){openUploadDialog()}});dropzone.classList.add('ab-picup-drop');var iconBox=dropzone.querySelector('.ab-ui-empty-icon');if(iconBox){iconBox.appendChild(ab.ui.el('span','ab-picup-ring'));iconBox.appendChild(ab.ui.el('span','ab-picup-ring'))}dropzone.addEventListener('keydown',function(e){if(e.key==='Enter'||e.key===' '||e.key==='Spacebar'){e.preventDefault();openUploadDialog()}});ab.ui.mount(body,[infoHost,dropzone,ab.ui.actions([ab.ui.button({text:'打开上传窗口',icon:'drive_folder_upload',onClick:function(){openUploadDialog()}}),ab.ui.button({text:'刷新策略',icon:'refresh',tone:'info',onClick:refreshDetail}),ab.ui.button({text:'媒体库',icon:'perm_media',tone:'info',href:MEDIA})]),tipHost]);ab.ui.footer(card,{text:'PicUp 设置',icon:'settings',href:SETS});function renderInfo(d){ab.ui.mount(infoHost,ab.ui.list([{icon:'layers',label:'当前方案',value:d.profile||'—'},{icon:'cloud',label:'存储驱动',value:d.driverName||'—'}]))}function parseSettings(html){var doc=new DOMParser().parseFromString(html,'text/html');function field(sel){var el=doc.querySelector(sel);return el?String(el.value||''):''}var key=field('input[name="defaultProfile"]')||(CFG&&CFG.defaultProfile)||'default';var profiles={};try{profiles=JSON.parse(field('textarea[name="configJson"]')||'{}')||{}}catch(e){profiles={}}var prof=(profiles[key]&&typeof profiles[key]==='object')?profiles[key]:{};var driverKey=prof.driver||'';var name=driverKey||'未配置';var m=html.match(/window\.__PICUP__=(\{[\s\S]*?\});<\/script>/);if(m){try{var meta=JSON.parse(m[1]);var info=meta.driversMeta&&meta.driversMeta[driverKey];if(info&&info.name)name=info.name}catch(e){}}return{profile:key,driverName:name}}function loadDetail(){if(!CFG){renderInfo({profile:'—',driverName:'未检测到 PicUp'});fail('warn','warning_amber','未检测到 PicUp(插件未启用或版本较低),上传窗口仍可使用');return}renderInfo({profile:CFG.defaultProfile||'default',driverName:'—'});ab.data.getCached(CACHE,TTL,function(){return ab.ui.getText(SETS).then(parseSettings)}).then(renderInfo).catch(function(){})}function refreshDetail(){ab.data.clearCached(CACHE).then(loadDetail,loadDetail)}function fail(tone,iconName,text){if(!tip){tip=ab.ui.notice({tone:tone,icon:iconName,text:text});tipHost.appendChild(tip);return}tip.update({tone:tone,icon:iconName,text:text})}var refreshBackup=null;function shieldMediaGridRefresh(){if(refreshBackup||typeof AB._refreshMediaGrid!=='function')return;refreshBackup=AB._refreshMediaGrid;AB._refreshMediaGrid=function(){};function restore(){if(refreshBackup){AB._refreshMediaGrid=refreshBackup;refreshBackup=null}}ab.onCleanup(restore);var polls=0;var timer=ab.interval(function(){if(document.getElementById('ab-upload-dialog')&&polls++<300)return;clearInterval(timer);restore()},800)}function openUploadDialog(files){if(typeof AB._openMediaUploadDialog!=='function'){fail('warn','warning_amber','当前版本的 AdminBeautify 没有上传窗口,请更新插件,或先去「媒体库」上传');return}shieldMediaGridRefresh();AB._openMediaUploadDialog(null);if(files&&files.length)seedDialog(files)}function seedDialog(files){var zone=document.getElementById('ab-upload-dropzone');if(zone&&typeof DataTransfer==='function'&&typeof DragEvent==='function'){try{var dt=new DataTransfer();for(var i=0;i<files.length;i++)dt.items.add(files[i]);setTimeout(function(){try{zone.dispatchEvent(new DragEvent('drop',{bubbles:true,cancelable:true,dataTransfer:dt}))}catch(e){fail('warn','warning_amber','拖入的文件没能自动排进上传窗口,请在窗口里手动选择文件')}},60);return}catch(e){}}fail('warn','warning_amber','拖入的文件没能自动排进上传窗口,请在窗口里手动选择文件')}function hasFiles(e){var t=e.dataTransfer&&e.dataTransfer.types;return!!t&&Array.prototype.indexOf.call(t,'Files')!==-1}var popTimer=0;card.addEventListener('dragover',function(e){if(!hasFiles(e))return;e.preventDefault();if(e.dataTransfer)e.dataTransfer.dropEffect='copy';dropzone.classList.add('is-dragover')});card.addEventListener('dragleave',function(e){if(card.contains(e.relatedTarget))return;dropzone.classList.remove('is-dragover')});card.addEventListener('drop',function(e){if(!hasFiles(e))return;e.preventDefault();dropzone.classList.remove('is-dragover');dropzone.classList.add('is-dropped');clearTimeout(popTimer);popTimer=setTimeout(function(){dropzone.classList.remove('is-dropped')},500);openUploadDialog(Array.prototype.slice.call(e.dataTransfer.files||[]))});loadDetail()})();

download_for_offline如何导入

Typecho 后台 → 控制台 → 插件 → AB Admin(AdminBeautify)→「概要页卡片设置」
找到 自定义卡片 区域,打开总开关(默认关闭)
点 添加卡片,按下表填写:
图标 cloud_upload
卡片标题 PicUp 上传卡片
HTML 内容 见上方「HTML 内容」标签页
JavaScript 见上方「JavaScript」标签页
点右下角 保存设置,回到概要页即可看到卡片(顺序可在排序列表里拖动调整)

shield安全信息

verified_user 扫描通过
database数据来源
未读取额外数据
widgets使用的内置组件
ab.ui.elab.ui.emptyab.ui.mountab.ui.actionsab.ui.buttonab.ui.footerab.ui.listab.ui.getTextab.ui.notice
warning
卡片 JavaScript 会在你的后台页面里执行。本站已做敏感信息、站外请求与越权操作的自动扫描 + 人工审核,但仍请在使用前自行阅读上方代码;发现可疑卡片请到 GitHub 反馈。