feat(mp, web, calendar): 新增微信收藏夹与日历批量生成功能
- 新增微信小程序版个人收藏夹全套功能，包含聚合首页、收藏列表、编辑、详情页面与配套后端API - 新增web版时光助手门户与个人收藏夹工具，支持与小程序共享后端数据 - 优化日历提醒工具：替换本地bootstrap资源为公共CDN版本，新增批量生成循环提醒的前端界面与后端逻辑，新增数据库batch_id字段，更新鉴权配置文件 - 补充项目配置、站点地图、调试诊断脚本等配套文件 - 完善各模块的页面配置与样式文件
This commit is contained in:
yangxiangyuan
@@ -0,0 +1,154 @@
|
||||
(function () {
|
||||
const isHttps = location.protocol === 'https:'
|
||||
const API_BASE = isHttps ? location.origin : 'http://localhost:8976'
|
||||
|
||||
function buildUrl(path) {
|
||||
if (/^https?:/.test(path)) return path
|
||||
const p = path.startsWith('/') ? path : '/' + path
|
||||
return API_BASE + p
|
||||
}
|
||||
|
||||
async function request(method, path, body, opts) {
|
||||
opts = opts || {}
|
||||
const url = buildUrl(path)
|
||||
const init = {
|
||||
method: method || 'GET',
|
||||
headers: opts.headers || {},
|
||||
credentials: 'same-origin'
|
||||
}
|
||||
if (body !== null && body !== undefined) {
|
||||
if (body instanceof FormData) {
|
||||
init.body = body
|
||||
} else {
|
||||
init.headers['Content-Type'] = 'application/json'
|
||||
init.body = JSON.stringify(body)
|
||||
}
|
||||
}
|
||||
try {
|
||||
const res = await fetch(url, init)
|
||||
const text = await res.text()
|
||||
let data = null
|
||||
try { data = text ? JSON.parse(text) : null } catch { data = { ok: res.ok, raw: text } }
|
||||
if (!res.ok) {
|
||||
const msg = (data && data.error) || ('HTTP ' + res.status)
|
||||
const err = new Error(msg)
|
||||
err.status = res.status
|
||||
err.data = data
|
||||
throw err
|
||||
}
|
||||
return { ok: true, status: res.status, data }
|
||||
} catch (e) {
|
||||
const err = new Error(e.message || '请求失败')
|
||||
err.data = e.data || null
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
const hub = {
|
||||
async meta() {
|
||||
const res = await request('GET', '/api/mp_time_assistant/meta')
|
||||
const payload = (res && res.data) || {}
|
||||
return (payload && payload.ok) ? payload.data || {} : (payload || {})
|
||||
},
|
||||
async getState() {
|
||||
const res = await request('GET', '/api/mp_time_assistant/state')
|
||||
const payload = (res && res.data) || {}
|
||||
return (payload && payload.ok) ? payload.data || {} : (payload || {})
|
||||
},
|
||||
async setActiveKit(kitId) {
|
||||
const res = await request('PUT', '/api/mp_time_assistant/state/active-kit', { kitId })
|
||||
const payload = (res && res.data) || {}
|
||||
return (payload && payload.ok) ? payload.data || {} : (payload || {})
|
||||
}
|
||||
}
|
||||
|
||||
const personalCollect = {
|
||||
async list(keyword) {
|
||||
const q = new URLSearchParams()
|
||||
if (keyword) q.set('keyword', keyword)
|
||||
const suffix = q.toString() ? '?' + q.toString() : ''
|
||||
const res = await request('GET', '/api/mp_time_assistant/kits/personal_collect/items' + suffix)
|
||||
const payload = (res && res.data) || {}
|
||||
if (payload && payload.ok) return payload.data || []
|
||||
return Array.isArray(payload) ? payload : []
|
||||
},
|
||||
async get(id) {
|
||||
const res = await request('GET', '/api/mp_time_assistant/kits/personal_collect/items/' + encodeURIComponent(id))
|
||||
const payload = (res && res.data) || {}
|
||||
return (payload && payload.ok) ? (payload.data || null) : (payload || null)
|
||||
},
|
||||
async create(payload) {
|
||||
const res = await request('POST', '/api/mp_time_assistant/kits/personal_collect/items', payload)
|
||||
const body = (res && res.data) || {}
|
||||
if (body && body.ok) return body.data || body
|
||||
throw new Error((body && body.error) || '创建失败')
|
||||
},
|
||||
async update(payload) {
|
||||
const res = await request('PUT', '/api/mp_time_assistant/kits/personal_collect/items', payload)
|
||||
const body = (res && res.data) || {}
|
||||
if (body && body.ok) return body.data || body
|
||||
throw new Error((body && body.error) || '更新失败')
|
||||
},
|
||||
async remove(id) {
|
||||
const q = new URLSearchParams({ id })
|
||||
const res = await request('DELETE', '/api/mp_time_assistant/kits/personal_collect/items?' + q.toString())
|
||||
const body = (res && res.data) || {}
|
||||
if (body && body.ok) return body
|
||||
throw new Error((body && body.error) || '删除失败')
|
||||
},
|
||||
async uploadFile(file, groupId, onProgress) {
|
||||
const form = new FormData()
|
||||
form.append('file', file)
|
||||
if (groupId) form.append('groupId', groupId)
|
||||
const url = buildUrl('/api/mp_time_assistant/kits/personal_collect/upload')
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
const xhr = new XMLHttpRequest()
|
||||
xhr.open('POST', url)
|
||||
xhr.withCredentials = true
|
||||
if (onProgress && typeof onProgress === 'function' && xhr.upload) {
|
||||
xhr.upload.addEventListener('progress', (e) => {
|
||||
if (e.lengthComputable) {
|
||||
onProgress({ loaded: e.loaded, total: e.total, percent: Math.round(e.loaded * 100 / Math.max(1, e.total)) })
|
||||
}
|
||||
})
|
||||
}
|
||||
xhr.onload = () => {
|
||||
try {
|
||||
const data = JSON.parse(xhr.responseText || '{}')
|
||||
if (xhr.status >= 200 && xhr.status < 300 && data && data.ok) {
|
||||
resolve({ ok: true, status: xhr.status, data })
|
||||
} else {
|
||||
const err = new Error((data && data.error) || ('HTTP ' + xhr.status))
|
||||
err.data = data
|
||||
reject(err)
|
||||
}
|
||||
} catch (e) {
|
||||
reject(new Error('响应解析失败: ' + e.message))
|
||||
}
|
||||
}
|
||||
xhr.onerror = () => reject(new Error('网络错误：上传失败'))
|
||||
xhr.ontimeout = () => reject(new Error('上传超时'))
|
||||
xhr.send(form)
|
||||
} catch (e) {
|
||||
reject(e)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const fileUrl = (relPath) => {
|
||||
if (!relPath) return ''
|
||||
if (/^https?:/.test(relPath)) return relPath
|
||||
const p = relPath.startsWith('/') ? relPath : '/' + relPath
|
||||
return buildUrl(p)
|
||||
}
|
||||
|
||||
window.__MPTA_API__ = {
|
||||
API_BASE,
|
||||
request,
|
||||
hub,
|
||||
personalCollect,
|
||||
fileUrl
|
||||
}
|
||||
})()
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"_comment": "MilesYang时光助手 Web 端（与小程序共享后端和数据库）的前端鉴权配置",
|
||||
"enable_auth_comment": "true：启用 tool 外层鉴权（默认从九宫格导航进入）；false：完全放开访问",
|
||||
"enable_auth": true,
|
||||
"max_age_days_comment": "鉴权 cookie 最大有效天数（1~365）",
|
||||
"max_age_days": 30,
|
||||
"cookieName_comment": "鉴权 Cookie 名称，默认格式 <tool>_gate",
|
||||
"cookieName": "web_mp_time_assistant_gate",
|
||||
"requireGuid_comment": "true：强制 GUID 参数才能访问；false：允许仅凭 token 或已有会话访问",
|
||||
"requireGuid": false,
|
||||
"guidParam_comment": "URL 中的 GUID 参数名，建议使用小写 guid",
|
||||
"guidParam": "guid",
|
||||
"guidValue_comment": "GUID 参数值，建议使用高强度随机长串并定期更换（留空表示不启用 GUID）",
|
||||
"guidValue": ""
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
background: radial-gradient(1200px 800px at 10% 0%, #1a1a33 0%, #0f0f1a 60%, #0b0b15 100%);
|
||||
min-height: 100vh;
|
||||
color: #e8e8f0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.app-root {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 24px 80px;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 48px;
|
||||
padding: 24px 32px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(108, 122, 224, 0.15);
|
||||
border-radius: 24px;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.app-header-left .app-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
background: linear-gradient(135deg, #6c7ae0 0%, #b06be0 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.app-header-left .app-subtitle {
|
||||
font-size: 14px;
|
||||
color: #8a8aa8;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.app-header-right .status-tag {
|
||||
padding: 8px 16px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
background: rgba(108, 122, 224, 0.12);
|
||||
color: #a8b4ff;
|
||||
border: 1px solid rgba(108, 122, 224, 0.25);
|
||||
}
|
||||
|
||||
.app-header-right .status-tag.ok {
|
||||
background: rgba(0, 216, 167, 0.1);
|
||||
color: #00d8a7;
|
||||
border-color: rgba(0, 216, 167, 0.3);
|
||||
}
|
||||
|
||||
.app-header-right .status-tag.err {
|
||||
background: rgba(255, 80, 100, 0.1);
|
||||
color: #ff8595;
|
||||
border-color: rgba(255, 80, 100, 0.3);
|
||||
}
|
||||
|
||||
.kit-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.kit-empty {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 80px 0;
|
||||
color: #8a8aa8;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.kit-card {
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 22px;
|
||||
padding: 28px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
border-color 0.3s ease,
|
||||
background 0.3s ease,
|
||||
box-shadow 0.35s ease;
|
||||
backdrop-filter: blur(8px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kit-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(108, 122, 224, 0) 0%, rgba(176, 107, 224, 0) 100%);
|
||||
transition: opacity 0.4s ease;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.kit-card:hover {
|
||||
transform: translateY(-6px);
|
||||
border-color: rgba(108, 122, 224, 0.35);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
box-shadow: 0 20px 40px rgba(108, 122, 224, 0.15);
|
||||
}
|
||||
|
||||
.kit-card:hover::before {
|
||||
opacity: 1;
|
||||
background: linear-gradient(135deg, rgba(108, 122, 224, 0.08) 0%, rgba(176, 107, 224, 0.04) 100%);
|
||||
}
|
||||
|
||||
.kit-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
background: linear-gradient(135deg, rgba(108, 122, 224, 0.22) 0%, rgba(176, 107, 224, 0.18) 100%);
|
||||
border: 1px solid rgba(108, 122, 224, 0.3);
|
||||
margin-bottom: 18px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.kit-name {
|
||||
font-size: 19px;
|
||||
font-weight: 600;
|
||||
color: #f0f0f8;
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.kit-desc {
|
||||
font-size: 13.5px;
|
||||
color: #9b9bb5;
|
||||
line-height: 1.7;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.kit-arrow {
|
||||
margin-top: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: #a8b4ff;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
opacity: 0.75;
|
||||
transition: gap 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.kit-card:hover .kit-arrow {
|
||||
gap: 12px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.app-root { padding: 20px 16px 60px; }
|
||||
.app-header {
|
||||
padding: 18px 20px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
.app-header-left .app-title { font-size: 24px; }
|
||||
.kit-grid { grid-template-columns: 1fr; gap: 16px; }
|
||||
.kit-card { padding: 22px; }
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MilesYang时光助手</title>
|
||||
<link rel="stylesheet" href="/common/common.css">
|
||||
<link rel="stylesheet" href="hub.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-root">
|
||||
<header class="app-header">
|
||||
<div class="app-header-left">
|
||||
<h1 class="app-title">MilesYang时光助手</h1>
|
||||
<p class="app-subtitle">手机 · 电脑，实时联动的小工具集合</p>
|
||||
</div>
|
||||
<div class="app-header-right">
|
||||
<span id="status-tag" class="status-tag">加载中...</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="app-main">
|
||||
<div id="kit-grid" class="kit-grid">
|
||||
<div class="kit-empty">⏳ 工具列表加载中...</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="api.js"></script>
|
||||
<script src="hub.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
(function () {
|
||||
const api = window.__MPTA_API__
|
||||
const $grid = document.getElementById('kit-grid')
|
||||
const $status = document.getElementById('status-tag')
|
||||
|
||||
const KIT_PAGES = {
|
||||
personal_collect: 'kits/personal_collect/list.html'
|
||||
}
|
||||
|
||||
const KIT_ICONS = {
|
||||
personal_collect: '📁'
|
||||
}
|
||||
|
||||
function setStatus(text, cls) {
|
||||
$status.textContent = text
|
||||
$status.className = 'status-tag' + (cls ? ' ' + cls : '')
|
||||
}
|
||||
|
||||
function renderKits(kits) {
|
||||
if (!kits || !kits.length) {
|
||||
$grid.innerHTML = '<div class="kit-empty">暂无可用工具</div>'
|
||||
return
|
||||
}
|
||||
$grid.innerHTML = kits.map((kit) => {
|
||||
const page = KIT_PAGES[kit.id] || '#'
|
||||
const icon = KIT_ICONS[kit.id] || '🧰'
|
||||
return (
|
||||
`<div class="kit-card" data-kit="${kit.id}" data-page="${page}">` +
|
||||
`<div class="kit-icon">${icon}</div>` +
|
||||
`<div class="kit-name">${escapeHtml(kit.name || kit.id)}</div>` +
|
||||
`<div class="kit-desc">${escapeHtml(kit.description || '')}</div>` +
|
||||
`<div class="kit-arrow"><span>进入</span><span>→</span></div>` +
|
||||
`</div>`
|
||||
)
|
||||
}).join('')
|
||||
Array.from($grid.querySelectorAll('.kit-card')).forEach((card) => {
|
||||
card.addEventListener('click', () => {
|
||||
const page = card.getAttribute('data-page')
|
||||
const kitId = card.getAttribute('data-kit')
|
||||
const go = () => { window.location.href = page }
|
||||
if (api && api.hub && api.hub.setActiveKit) {
|
||||
api.hub.setActiveKit(kitId).then(go).catch(go)
|
||||
} else {
|
||||
go()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
if (s === null || s === undefined) return ''
|
||||
return String(s)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''')
|
||||
}
|
||||
|
||||
async function main() {
|
||||
try {
|
||||
if (!api || !api.hub) throw new Error('API 未加载')
|
||||
const meta = await api.hub.meta()
|
||||
const kits = (meta && meta.kits) || []
|
||||
setStatus('后端已连通', 'ok')
|
||||
renderKits(kits)
|
||||
} catch (e) {
|
||||
setStatus('后端连通失败：' + (e.message || '未知错误'), 'err')
|
||||
$grid.innerHTML = `<div class="kit-empty">❌ 加载失败：${escapeHtml(e.message || '后端无响应')}</div>`
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', main)
|
||||
})()
|
||||
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MilesYang时光助手</title>
|
||||
<link rel="stylesheet" href="/common/common.css">
|
||||
<link rel="stylesheet" href="hub.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-root">
|
||||
<header class="app-header">
|
||||
<div class="app-header-left">
|
||||
<h1 class="app-title">MilesYang时光助手</h1>
|
||||
<p class="app-subtitle">手机 · 电脑，实时联动的小工具集合</p>
|
||||
</div>
|
||||
<div class="app-header-right">
|
||||
<span id="status-tag" class="status-tag">加载中...</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="app-main">
|
||||
<div id="kit-grid" class="kit-grid">
|
||||
<div class="kit-empty">⏳ 工具列表加载中...</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="api.js"></script>
|
||||
<script src="hub.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,212 @@
|
||||
(function () {
|
||||
const DEFAULT_UI_MODE = 'debug'
|
||||
const AUTO_CLOSE_SEC_DEBUG = 3
|
||||
const AUTO_CLOSE_SEC_NORMAL = 2
|
||||
|
||||
function readUiMode() {
|
||||
try {
|
||||
const v = localStorage.getItem('mp_ta_ui_mode')
|
||||
if (v === 'debug' || v === 'normal') return v
|
||||
} catch {}
|
||||
return DEFAULT_UI_MODE
|
||||
}
|
||||
|
||||
function setUiMode(mode) {
|
||||
try { localStorage.setItem('mp_ta_ui_mode', mode) } catch {}
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
if (s === null || s === undefined) return ''
|
||||
return String(s)
|
||||
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||
.replace(/"/g, '"').replace(/'/g, ''')
|
||||
}
|
||||
|
||||
function showToast(text, type, duration) {
|
||||
type = type || 'info'
|
||||
duration = duration || (type === 'error' ? 3000 : 2000)
|
||||
const colors = {
|
||||
info: { bg: 'rgba(56, 103, 214, 0.92)', border: 'rgba(108, 122, 224, 0.6)', color: '#fff' },
|
||||
success: { bg: 'rgba(0, 180, 140, 0.92)', border: 'rgba(0, 216, 167, 0.6)', color: '#fff' },
|
||||
error: { bg: 'rgba(220, 53, 69, 0.92)', border: 'rgba(255, 80, 100, 0.6)', color: '#fff' },
|
||||
warn: { bg: 'rgba(230, 152, 20, 0.92)', border: 'rgba(255, 193, 7, 0.6)', color: '#fff' }
|
||||
}
|
||||
const c = colors[type] || colors.info
|
||||
const t = document.createElement('div')
|
||||
t.textContent = text
|
||||
Object.assign(t.style, {
|
||||
position: 'fixed', zIndex: 99998, top: '28px', left: '50%', transform: 'translateX(-50%)',
|
||||
padding: '10px 18px', borderRadius: '12px', fontSize: '14px', fontWeight: 500,
|
||||
maxWidth: '90vw', textAlign: 'center', backdropFilter: 'blur(8px)',
|
||||
background: c.bg, border: '1px solid ' + c.border, color: c.color,
|
||||
boxShadow: '0 10px 30px rgba(0,0,0,0.35)'
|
||||
})
|
||||
document.body.appendChild(t)
|
||||
setTimeout(() => {
|
||||
t.style.transition = 'opacity 0.3s ease, transform 0.3s ease'
|
||||
t.style.opacity = '0'
|
||||
t.style.transform = 'translateX(-50%) translateY(-10px)'
|
||||
setTimeout(() => t.remove(), 320)
|
||||
}, duration)
|
||||
}
|
||||
|
||||
function confirmDialog(options, onOk, onCancel) {
|
||||
options = options || {}
|
||||
const title = options.title || '请确认操作'
|
||||
const desc = options.desc || ''
|
||||
const okText = options.okText || '确认'
|
||||
const cancelText = options.cancelText || '取消'
|
||||
const danger = options.danger === true
|
||||
const slot = document.getElementById('modal-slot') || document.body
|
||||
const mask = document.createElement('div')
|
||||
mask.className = 'modal-mask'
|
||||
mask.innerHTML =
|
||||
'<div class="modal-card">' +
|
||||
'<div class="modal-title' + (danger ? ' danger' : '') + '">' + escapeHtml(title) + '</div>' +
|
||||
'<div class="modal-desc">' + escapeHtml(desc) + '</div>' +
|
||||
'<div class="modal-actions">' +
|
||||
'<button type="button" class="btn secondary btn-sm" data-act="cancel">' + escapeHtml(cancelText) + '</button>' +
|
||||
'<button type="button" class="btn ' + (danger ? 'danger' : 'primary') + ' btn-sm" data-act="ok">' + escapeHtml(okText) + '</button>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
slot.appendChild(mask)
|
||||
const close = (result) => {
|
||||
mask.remove()
|
||||
if (result && typeof onOk === 'function') onOk()
|
||||
if (!result && typeof onCancel === 'function') onCancel()
|
||||
}
|
||||
mask.addEventListener('click', (e) => {
|
||||
if (e.target === mask) close(false)
|
||||
const act = e.target.getAttribute && e.target.getAttribute('data-act')
|
||||
if (act === 'ok') close(true)
|
||||
if (act === 'cancel') close(false)
|
||||
})
|
||||
const okBtn = mask.querySelector('[data-act="ok"]')
|
||||
if (okBtn) okBtn.focus()
|
||||
return { close }
|
||||
}
|
||||
|
||||
function runTrackedInteraction(options, runner) {
|
||||
const uiMode = readUiMode()
|
||||
options = options || {}
|
||||
const name = options.name || '操作'
|
||||
const toastOnSuccess = options.toastOnSuccess !== false
|
||||
const normalViewAsToast = options.normalViewAsToast !== false
|
||||
const debugMode = uiMode === 'debug'
|
||||
const dlg = document.getElementById('interaction-dialog') || (() => {
|
||||
const d = document.createElement('div')
|
||||
d.id = 'interaction-dialog'
|
||||
d.className = 'interaction-dialog hidden'
|
||||
document.body.appendChild(d)
|
||||
return d
|
||||
})()
|
||||
|
||||
const startedAt = Date.now()
|
||||
const logs = []
|
||||
let timer = null
|
||||
let forceStay = false
|
||||
|
||||
const fmtTime = (ts) => {
|
||||
const d = new Date(ts)
|
||||
const p = (n) => (n < 10 ? '0' + n : '' + n)
|
||||
return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`
|
||||
}
|
||||
|
||||
const push = (line) => logs.push(`[${fmtTime(Date.now())}] ${line}`)
|
||||
|
||||
const render = () => {
|
||||
const elapsedSec = ((Date.now() - startedAt) / 1000).toFixed(1)
|
||||
dlg.innerHTML =
|
||||
'<div class="id-title">' +
|
||||
'<span>' + escapeHtml(name) + ' · 交互详情</span>' +
|
||||
'<span style="cursor:pointer;color:#8a8aa8;" data-act="copy">复制</span>' +
|
||||
'</div>' +
|
||||
'<div class="id-body">' + escapeHtml(logs.join('\n') + (timer ? `\n\n倒计时关闭：${remainSec}s` : '') + `\n\n耗时：${elapsedSec}s`) + '</div>' +
|
||||
'<div class="id-actions">' +
|
||||
'<span class="id-countdown">' + (timer ? `自动关闭中：${remainSec}s` : (forceStay ? '已停留，有错误/异常' : '已完成')) + '</span>' +
|
||||
'<div style="display:flex;gap:8px;">' +
|
||||
(timer ? '<button type="button" class="btn ghost btn-sm" data-act="stay">停留</button>' : '') +
|
||||
'<button type="button" class="btn secondary btn-sm" data-act="close">关闭</button>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
const btnCopy = dlg.querySelector('[data-act="copy"]')
|
||||
if (btnCopy) btnCopy.onclick = () => {
|
||||
try {
|
||||
const txt = logs.join('\n') + `\n\n耗时：${elapsedSec}s`
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
navigator.clipboard.writeText(txt).then(() => showToast('日志已复制', 'success', 1200))
|
||||
} else {
|
||||
const ta = document.createElement('textarea')
|
||||
ta.value = txt; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove()
|
||||
showToast('日志已复制', 'success', 1200)
|
||||
}
|
||||
} catch (e) { showToast('复制失败：' + e.message, 'error', 2000) }
|
||||
}
|
||||
const btnStay = dlg.querySelector('[data-act="stay"]')
|
||||
if (btnStay) btnStay.onclick = () => { if (timer) { clearInterval(timer); timer = null; forceStay = true; render() } }
|
||||
const btnClose = dlg.querySelector('[data-act="close"]')
|
||||
if (btnClose) btnClose.onclick = () => { dlg.classList.add('hidden'); if (timer) clearInterval(timer); timer = null }
|
||||
}
|
||||
|
||||
const showDlg = () => { dlg.classList.remove('hidden'); render() }
|
||||
const closeDlg = () => { dlg.classList.add('hidden'); if (timer) { clearInterval(timer); timer = null } }
|
||||
|
||||
let remainSec = debugMode ? AUTO_CLOSE_SEC_DEBUG : AUTO_CLOSE_SEC_NORMAL
|
||||
|
||||
const startCountdown = () => {
|
||||
if (forceStay) return
|
||||
timer = setInterval(() => {
|
||||
remainSec -= 1
|
||||
if (remainSec <= 0) { closeDlg() }
|
||||
else { render() }
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
push(`开始：${name}`)
|
||||
push(`HTTP: ${options.method || 'GET'} ${options.path || options.url || '(本地)'}${options.params ? `\n参数：${JSON.stringify(options.params)}` : ''}`)
|
||||
showDlg()
|
||||
|
||||
const runnerPromise = typeof runner === 'function' ? runner() : Promise.resolve(runner || { ok: true })
|
||||
return Promise.resolve(runnerPromise).then((res) => {
|
||||
push(`返回：${JSON.stringify(res, null, 2).slice(0, 2000)}`)
|
||||
push(`状态：成功 ✔ 耗时 ${((Date.now()-startedAt)/1000).toFixed(2)}s`)
|
||||
render()
|
||||
if (debugMode) { startCountdown() }
|
||||
else if (normalViewAsToast && toastOnSuccess) { setTimeout(() => closeDlg(), 120); showToast(`${name}成功`, 'success') }
|
||||
else { startCountdown() }
|
||||
return res
|
||||
}).catch((e) => {
|
||||
forceStay = true
|
||||
push(`错误：${e && e.message ? e.message : String(e)}`)
|
||||
push(`状态：失败 ✘ 耗时 ${((Date.now()-startedAt)/1000).toFixed(2)}s`)
|
||||
render()
|
||||
showToast(`${name}失败：${(e && e.message) ? e.message : '未知错误'}`, 'error', 3500)
|
||||
throw e
|
||||
})
|
||||
}
|
||||
|
||||
function formatTime(iso) {
|
||||
if (!iso) return ''
|
||||
const d = new Date(iso)
|
||||
if (isNaN(d.getTime())) return String(iso)
|
||||
const p = (n) => (n < 10 ? '0' + n : '' + n)
|
||||
const now = new Date()
|
||||
const sameYear = d.getFullYear() === now.getFullYear()
|
||||
const y = sameYear ? '' : d.getFullYear() + '-'
|
||||
return `${y}${p(d.getMonth()+1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
|
||||
}
|
||||
|
||||
function humanSize(bytes) {
|
||||
const n = Number(bytes || 0)
|
||||
if (n < 1024) return n + ' B'
|
||||
if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KB'
|
||||
return (n / 1024 / 1024).toFixed(2) + ' MB'
|
||||
}
|
||||
|
||||
window.__MPTA_DIALOG__ = {
|
||||
readUiMode, setUiMode,
|
||||
escapeHtml, showToast, confirmDialog, runTrackedInteraction,
|
||||
formatTime, humanSize,
|
||||
AUTO_CLOSE_SEC_DEBUG, AUTO_CLOSE_SEC_NORMAL
|
||||
}
|
||||
})()
|
||||
@@ -0,0 +1,209 @@
|
||||
.detail-section {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.detail-section-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #8a8aa8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
color: #f4f4fa;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.detail-title.empty {
|
||||
color: #6a6a88;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 13px;
|
||||
color: #8a8aa8;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.detail-meta span b {
|
||||
color: #c8c8e0;
|
||||
font-weight: 500;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.detail-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.detail-remark {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
color: #dcdceb;
|
||||
font-size: 15px;
|
||||
line-height: 1.9;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
.detail-remark.empty {
|
||||
color: #6a6a88;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
padding: 40px 24px;
|
||||
}
|
||||
|
||||
.image-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
.image-item {
|
||||
position: relative;
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
cursor: zoom-in;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
transition: transform 0.25s ease, border-color 0.25s ease;
|
||||
}
|
||||
.image-item:hover { transform: translateY(-2px); border-color: rgba(108, 122, 224, 0.4); }
|
||||
.image-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.image-item .name-badge {
|
||||
position: absolute;
|
||||
left: 8px; bottom: 8px;
|
||||
max-width: calc(100% - 16px);
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: #fff;
|
||||
backdrop-filter: blur(4px);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 14px 18px;
|
||||
background: rgba(108, 122, 224, 0.06);
|
||||
border: 1px solid rgba(108, 122, 224, 0.16);
|
||||
border-radius: 14px;
|
||||
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.file-item:hover {
|
||||
background: rgba(108, 122, 224, 0.12);
|
||||
border-color: rgba(108, 122, 224, 0.32);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.file-icon {
|
||||
width: 44px; height: 44px;
|
||||
border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: rgba(108, 122, 224, 0.18);
|
||||
flex-shrink: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
.file-info { flex: 1; min-width: 0; }
|
||||
.file-name {
|
||||
font-size: 14.5px;
|
||||
font-weight: 500;
|
||||
color: #e8e8f4;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.file-meta { font-size: 12px; color: #8a8aa8; margin-top: 4px; }
|
||||
.file-download {
|
||||
padding: 8px 12px;
|
||||
border-radius: 10px;
|
||||
background: rgba(108, 122, 224, 0.2);
|
||||
color: #a8b4ff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(108, 122, 224, 0.3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.file-download:hover { background: rgba(108, 122, 224, 0.3); }
|
||||
|
||||
.lightbox-mask {
|
||||
position: fixed; inset: 0; z-index: 99999;
|
||||
background: rgba(0, 0, 0, 0.88);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 24px;
|
||||
}
|
||||
.lightbox-mask.hidden { display: none; }
|
||||
.lightbox-inner {
|
||||
position: relative;
|
||||
width: 100%; height: 100%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.lightbox-img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 30px 100px rgba(0,0,0,0.6);
|
||||
}
|
||||
.lightbox-close, .lightbox-nav {
|
||||
position: absolute;
|
||||
width: 44px; height: 44px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.08);
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border: 1px solid rgba(255,255,255,0.16);
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(6px);
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.18); transform: scale(1.06); }
|
||||
.lightbox-close { top: 16px; right: 16px; }
|
||||
.lightbox-nav { top: 50%; transform: translateY(-50%); }
|
||||
.lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
|
||||
.lightbox-nav.prev { left: 16px; }
|
||||
.lightbox-nav.next { right: 16px; }
|
||||
.lightbox-caption {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
max-width: 80vw;
|
||||
padding: 8px 18px;
|
||||
border-radius: 999px;
|
||||
background: rgba(0,0,0,0.65);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
backdrop-filter: blur(6px);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.detail-title { font-size: 20px; }
|
||||
.detail-remark { padding: 18px; font-size: 14.5px; }
|
||||
.image-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
|
||||
.lightbox-close, .lightbox-nav { width: 40px; height: 40px; font-size: 18px; }
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>收藏详情 | MilesYang时光助手</title>
|
||||
<link rel="stylesheet" href="/common/common.css">
|
||||
<link rel="stylesheet" href="../../shared.css">
|
||||
<link rel="stylesheet" href="detail.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-shell">
|
||||
<header class="app-topbar">
|
||||
<div class="app-topbar-left">
|
||||
<button class="back-btn" id="btn-back" title="返回列表">←</button>
|
||||
<div>
|
||||
<div class="page-title" id="page-title">收藏详情</div>
|
||||
<div class="page-subtitle" id="page-subtitle">加载中...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-topbar-right">
|
||||
<button class="btn secondary btn-sm" id="btn-refresh">🔄 刷新</button>
|
||||
<button class="btn primary btn-sm" id="btn-edit">编辑</button>
|
||||
<button class="btn danger btn-sm" id="btn-delete">删除</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="detail-wrap">
|
||||
<div class="empty-state"><div class="empty-state-icon">⏳</div><div class="empty-state-text">加载中...</div></div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="lightbox-mask" class="lightbox-mask hidden">
|
||||
<div class="lightbox-inner">
|
||||
<button class="lightbox-close" id="lightbox-close">✕</button>
|
||||
<button class="lightbox-nav prev" id="lightbox-prev">‹</button>
|
||||
<img id="lightbox-img" class="lightbox-img" alt="">
|
||||
<button class="lightbox-nav next" id="lightbox-next">›</button>
|
||||
<div class="lightbox-caption" id="lightbox-caption"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modal-slot"></div>
|
||||
<div id="interaction-dialog" class="interaction-dialog hidden"></div>
|
||||
|
||||
<script src="../../api.js"></script>
|
||||
<script src="../../kits/common/dialog.js"></script>
|
||||
<script src="detail.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,253 @@
|
||||
(function () {
|
||||
const api = window.__MPTA_API__
|
||||
const dlg = window.__MPTA_DIALOG__
|
||||
|
||||
const $wrap = document.getElementById('detail-wrap')
|
||||
const $title = document.getElementById('page-title')
|
||||
const $subtitle = document.getElementById('page-subtitle')
|
||||
const $back = document.getElementById('btn-back')
|
||||
const $refresh = document.getElementById('btn-refresh')
|
||||
const $edit = document.getElementById('btn-edit')
|
||||
const $delete = document.getElementById('btn-delete')
|
||||
|
||||
const $lbMask = document.getElementById('lightbox-mask')
|
||||
const $lbImg = document.getElementById('lightbox-img')
|
||||
const $lbCap = document.getElementById('lightbox-caption')
|
||||
const $lbClose = document.getElementById('lightbox-close')
|
||||
const $lbPrev = document.getElementById('lightbox-prev')
|
||||
const $lbNext = document.getElementById('lightbox-next')
|
||||
|
||||
const escapeHtml = dlg.escapeHtml
|
||||
const formatTime = dlg.formatTime
|
||||
const humanSize = dlg.humanSize
|
||||
|
||||
const q = new URLSearchParams(location.search)
|
||||
const id = q.get('id')
|
||||
let current = null
|
||||
let imageList = []
|
||||
let lbIdx = -1
|
||||
|
||||
function fileIcon(fileName) {
|
||||
const ext = (fileName || '').split('.').pop().toLowerCase()
|
||||
if (/png|jpe?g|gif|webp|bmp|svg|ico/.test(ext)) return '🖼️'
|
||||
if (/pdf/.test(ext)) return '📕'
|
||||
if (/docx?|docm|dotx?/.test(ext)) return '📘'
|
||||
if (/xlsx?|xlsm|xls/.test(ext)) return '📗'
|
||||
if (/pptx?|ppsm/.test(ext)) return '📙'
|
||||
if (/txt|md|log|csv/.test(ext)) return '📝'
|
||||
if (/zip|rar|7z|tar|gz/.test(ext)) return '🗜️'
|
||||
if (/mp3|wav|flac|m4a|aac/.test(ext)) return '🎵'
|
||||
if (/mp4|mov|avi|mkv|webm/.test(ext)) return '🎥'
|
||||
return '📄'
|
||||
}
|
||||
|
||||
function goBack() { window.location.href = 'list.html' }
|
||||
function goEdit() { if (id) window.location.href = 'edit.html?id=' + encodeURIComponent(id) }
|
||||
|
||||
function openLightbox(idx) {
|
||||
if (!imageList.length) return
|
||||
lbIdx = Math.max(0, Math.min(imageList.length - 1, idx | 0))
|
||||
const item = imageList[lbIdx]
|
||||
$lbImg.src = item.src
|
||||
$lbCap.textContent = item.name || ''
|
||||
$lbMask.classList.remove('hidden')
|
||||
}
|
||||
function closeLightbox() { $lbMask.classList.add('hidden'); try { $lbImg.src = '' } catch {} lbIdx = -1 }
|
||||
function navLightbox(delta) {
|
||||
if (!imageList.length) return
|
||||
lbIdx = (lbIdx + delta + imageList.length) % imageList.length
|
||||
const item = imageList[lbIdx]
|
||||
$lbImg.src = item.src
|
||||
$lbCap.textContent = item.name || ''
|
||||
}
|
||||
|
||||
$lbClose.addEventListener('click', closeLightbox)
|
||||
$lbPrev.addEventListener('click', () => navLightbox(-1))
|
||||
$lbNext.addEventListener('click', () => navLightbox(1))
|
||||
$lbMask.addEventListener('click', (e) => { if (e.target === $lbMask) closeLightbox() })
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if ($lbMask.classList.contains('hidden')) return
|
||||
if (e.key === 'Escape') closeLightbox()
|
||||
else if (e.key === 'ArrowLeft') navLightbox(-1)
|
||||
else if (e.key === 'ArrowRight') navLightbox(1)
|
||||
})
|
||||
|
||||
function doDelete() {
|
||||
if (!id || !current) return
|
||||
const title = (current.title || '').trim() || '这条无标题收藏'
|
||||
dlg.confirmDialog({
|
||||
title: '确认删除？',
|
||||
desc: `「${title}」\n\n删除后此条收藏将不再显示（软删除，后端保留记录可追溯），同时手机端也会消失。`,
|
||||
okText: '确认删除', cancelText: '取消', danger: true
|
||||
}, () => {
|
||||
dlg.runTrackedInteraction({
|
||||
name: '删除收藏',
|
||||
method: 'DELETE',
|
||||
path: '/api/mp_time_assistant/kits/personal_collect/items',
|
||||
params: { id }
|
||||
}, () => api.personalCollect.remove(id)).then(() => {
|
||||
dlg.showToast('删除成功', 'success', 1400)
|
||||
setTimeout(goBack, 600)
|
||||
}).catch(() => {})
|
||||
})
|
||||
}
|
||||
|
||||
function renderImageSection(images) {
|
||||
if (!images || !images.length) return ''
|
||||
imageList = images.map(a => {
|
||||
const filePath = a.filePath || a.file_path
|
||||
return {
|
||||
src: a.url || api.fileUrl(filePath),
|
||||
name: a.fileName || a.file_name || ''
|
||||
}
|
||||
})
|
||||
return (
|
||||
`<section class="detail-section">` +
|
||||
`<div class="detail-section-title">图片</div>` +
|
||||
`<div class="image-grid">` +
|
||||
images.map((a, i) => {
|
||||
const filePath = a.filePath || a.file_path
|
||||
const src = a.url || api.fileUrl(filePath)
|
||||
const name = a.fileName || a.file_name || ('image_' + (i+1))
|
||||
const badge = (name && name.length > 4)
|
||||
? `<div class="name-badge">${escapeHtml(name)}</div>` : ''
|
||||
return `<div class="image-item" data-img-idx="${i}" title="${escapeHtml(name)}"><img src="${src}" alt="${escapeHtml(name)}" loading="lazy">${badge}</div>`
|
||||
}).join('') +
|
||||
`</div>` +
|
||||
`</section>`
|
||||
)
|
||||
}
|
||||
|
||||
function renderFileSection(files) {
|
||||
if (!files || !files.length) return ''
|
||||
return (
|
||||
`<section class="detail-section">` +
|
||||
`<div class="detail-section-title">文件 (${files.length})</div>` +
|
||||
`<div class="file-list">` +
|
||||
files.map(a => {
|
||||
const filePath = a.filePath || a.file_path
|
||||
const src = a.url || api.fileUrl(filePath)
|
||||
const name = a.fileName || a.file_name || '未命名文件'
|
||||
const size = Number(a.fileSize || a.file_size || 0)
|
||||
const mimeType = a.mimeType || a.mime_type || ''
|
||||
return (
|
||||
`<div class="file-item" data-file="${escapeHtml(src)}" data-name="${escapeHtml(name)}">` +
|
||||
`<div class="file-icon">${fileIcon(name)}</div>` +
|
||||
`<div class="file-info">` +
|
||||
`<div class="file-name">${escapeHtml(name)}</div>` +
|
||||
`<div class="file-meta">${humanSize(size)}${mimeType ? ' · ' + escapeHtml(mimeType) : ''}</div>` +
|
||||
`</div>` +
|
||||
`<button type="button" class="file-download">下载</button>` +
|
||||
`</div>`
|
||||
)
|
||||
}).join('') +
|
||||
`</div>` +
|
||||
`</section>`
|
||||
)
|
||||
}
|
||||
|
||||
function render(item) {
|
||||
current = item
|
||||
const dispTitle = (item.title || '').trim()
|
||||
$title.textContent = dispTitle ? dispTitle : '（无标题收藏）'
|
||||
const updatedAt = item.updatedAt || item.updated_at || item.createdAt || item.created_at
|
||||
const createdAt = item.createdAt || item.created_at
|
||||
$subtitle.textContent = `ID ${(item.id || '').slice(0, 8)}... · 更新于 ${formatTime(updatedAt)}`
|
||||
|
||||
const images = (item.attachments || []).filter(a => (typeof a.isImage !== 'undefined') ? !!a.isImage : !!a.is_image)
|
||||
const files = (item.attachments || []).filter(a => (typeof a.isImage !== 'undefined') ? !a.isImage : !a.is_image)
|
||||
const tags = (item.tags && item.tags.length)
|
||||
? `<div class="detail-tags">${item.tags.map(t => `<span class="tag">${escapeHtml(t)}</span>`).join('')}</div>`
|
||||
: ''
|
||||
|
||||
const remarkBlock = (item.remark || '').trim()
|
||||
? `<section class="detail-section"><div class="detail-section-title">备注</div><div class="detail-remark">${escapeHtml(item.remark)}</div></section>`
|
||||
: `<section class="detail-section"><div class="detail-section-title">备注</div><div class="detail-remark empty">（无备注）</div></section>`
|
||||
|
||||
const titleBlock = dispTitle
|
||||
? `<section class="detail-section"><div class="detail-title">${escapeHtml(dispTitle)}</div></section>`
|
||||
: `<section class="detail-section"><div class="detail-title empty">（该条收藏未设置标题）</div></section>`
|
||||
|
||||
const metaBlock =
|
||||
`<section class="detail-section">` +
|
||||
`<div class="detail-meta">` +
|
||||
`<span><b>创建时间</b>${formatTime(createdAt)}</span>` +
|
||||
`<span><b>更新时间</b>${formatTime(updatedAt)}</span>` +
|
||||
(item.attachments ? `<span><b>附件总数</b>${item.attachments.length}</span>` : '') +
|
||||
`</div>` +
|
||||
(tags ? `<div style="margin-top:14px;">${tags}</div>` : '') +
|
||||
`</section>`
|
||||
|
||||
$wrap.innerHTML = titleBlock + metaBlock + remarkBlock + renderImageSection(images) + renderFileSection(files)
|
||||
|
||||
Array.from($wrap.querySelectorAll('[data-img-idx]')).forEach((el) => {
|
||||
el.addEventListener('click', () => openLightbox(Number(el.getAttribute('data-img-idx')) | 0))
|
||||
})
|
||||
Array.from($wrap.querySelectorAll('.file-item')).forEach((el) => {
|
||||
el.addEventListener('click', (e) => {
|
||||
if (e.target && e.target.classList.contains('file-download')) return
|
||||
const src = el.getAttribute('data-file')
|
||||
const name = el.getAttribute('data-name') || ''
|
||||
if (!src) return
|
||||
const a = document.createElement('a')
|
||||
a.href = src
|
||||
if (name) a.setAttribute('download', name)
|
||||
a.target = '_blank'
|
||||
a.rel = 'noopener'
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
setTimeout(() => a.remove(), 0)
|
||||
})
|
||||
})
|
||||
Array.from($wrap.querySelectorAll('.file-download')).forEach((btn) => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation()
|
||||
const item = btn.closest && btn.closest('.file-item')
|
||||
if (!item) return
|
||||
const src = item.getAttribute('data-file')
|
||||
const name = item.getAttribute('data-name') || ''
|
||||
if (!src) return
|
||||
const a = document.createElement('a')
|
||||
a.href = src
|
||||
if (name) a.setAttribute('download', name)
|
||||
a.target = '_blank'
|
||||
a.rel = 'noopener'
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
setTimeout(() => a.remove(), 0)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
async function load() {
|
||||
if (!id) {
|
||||
$wrap.innerHTML = `<div class="empty-state"><div class="empty-state-icon">⚠️</div><div class="empty-state-text">参数错误：缺少 id</div></div>`
|
||||
return
|
||||
}
|
||||
try {
|
||||
const data = await dlg.runTrackedInteraction({
|
||||
name: '加载收藏详情',
|
||||
method: 'GET',
|
||||
path: '/api/mp_time_assistant/kits/personal_collect/items/' + encodeURIComponent(id),
|
||||
params: { id },
|
||||
normalViewAsToast: false
|
||||
}, () => api.personalCollect.get(id))
|
||||
const item = data ? (((data && data.data) || (data && data.item)) ? (data.data || data.item) : data) : null
|
||||
const itemInner = item ? ((item && item.item) || item) : null
|
||||
if (!itemInner) {
|
||||
$wrap.innerHTML = `<div class="empty-state"><div class="empty-state-icon">😶</div><div class="empty-state-text">未找到该条收藏</div><div class="empty-state-hint">可能已被删除，或 ID 不正确</div></div>`
|
||||
return
|
||||
}
|
||||
render(itemInner)
|
||||
} catch (e) {
|
||||
$wrap.innerHTML = `<div class="empty-state"><div class="empty-state-icon">❌</div><div class="empty-state-text">加载失败</div><div class="empty-state-hint">${escapeHtml(e.message || '请检查鉴权与后端状态')}</div></div>`
|
||||
}
|
||||
}
|
||||
|
||||
$back.addEventListener('click', goBack)
|
||||
$edit.addEventListener('click', goEdit)
|
||||
$refresh.addEventListener('click', load)
|
||||
$delete.addEventListener('click', doDelete)
|
||||
|
||||
load()
|
||||
})()
|
||||
@@ -0,0 +1,232 @@
|
||||
.edit-card {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.attach-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.attach-actions { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
|
||||
.drop-zone {
|
||||
width: 100%;
|
||||
min-height: 160px;
|
||||
border: 2px dashed rgba(108, 122, 224, 0.35);
|
||||
border-radius: 18px;
|
||||
background: rgba(108, 122, 224, 0.04);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
|
||||
outline: none;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.drop-zone:hover,
|
||||
.drop-zone:focus {
|
||||
border-color: rgba(108, 122, 224, 0.6);
|
||||
background: rgba(108, 122, 224, 0.08);
|
||||
}
|
||||
.drop-zone.drag {
|
||||
border-color: rgba(108, 122, 224, 0.9);
|
||||
background: rgba(108, 122, 224, 0.14);
|
||||
transform: scale(1.005);
|
||||
}
|
||||
.drop-text {
|
||||
text-align: center;
|
||||
}
|
||||
.drop-icon { font-size: 36px; opacity: 0.85; margin-bottom: 10px; }
|
||||
.drop-title { font-size: 16px; font-weight: 600; color: #d8d8ee; margin-bottom: 6px; }
|
||||
.drop-hint { font-size: 13px; color: #8a8aa8; line-height: 1.7; }
|
||||
.drop-hint b { color: #a8b4ff; }
|
||||
|
||||
.text-paste-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9020;
|
||||
background: rgba(8, 8, 18, 0.58);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
animation: fade-in 0.18s ease;
|
||||
}
|
||||
.text-paste-card {
|
||||
width: min(620px, 100%);
|
||||
background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 20px;
|
||||
padding: 22px 24px 18px;
|
||||
box-shadow: 0 18px 50px rgba(0,0,0,0.45);
|
||||
}
|
||||
.text-paste-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.text-paste-title { font-size: 16px; font-weight: 700; color: #e8e8ff; }
|
||||
.text-paste-count { font-size: 13px; color: #9aa2c8; background: rgba(108,122,224,0.14); padding: 4px 10px; border-radius: 999px; }
|
||||
.text-paste-preview {
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
padding: 14px 16px;
|
||||
background: rgba(0,0,0,0.28);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
border-radius: 14px;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.75;
|
||||
color: #c8c8e4;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
margin-bottom: 16px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
.text-paste-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
|
||||
.text-paste-actions .btn { min-width: 128px; }
|
||||
|
||||
.attach-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
.attach-list:empty { display: none; }
|
||||
|
||||
.attach-item {
|
||||
position: relative;
|
||||
background: rgba(18, 18, 31, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
.attach-item:hover { border-color: rgba(108, 122, 224, 0.3); background: rgba(18, 18, 31, 0.7); }
|
||||
|
||||
.attach-item.image .preview {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 10;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.attach-item.image .preview img {
|
||||
width: 100%; height: 100%; object-fit: cover; display: block;
|
||||
}
|
||||
|
||||
.attach-item.file .preview {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 10;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
background: linear-gradient(135deg, rgba(108, 122, 224, 0.18) 0%, rgba(176, 107, 224, 0.12) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.attach-item.file .preview .big { font-size: 44px; opacity: 0.9; }
|
||||
.attach-item.file .preview .ext {
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #d0d0f0;
|
||||
font-size: 11.5px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.attach-info {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.attach-name {
|
||||
font-size: 13px;
|
||||
color: #e0e0f4;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
min-height: 39px;
|
||||
}
|
||||
.attach-meta {
|
||||
font-size: 11.5px;
|
||||
color: #8a8aa8;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.attach-status {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.attach-status.pending { background: rgba(255, 193, 7, 0.12); color: #ffcc66; border: 1px solid rgba(255, 193, 7, 0.3); }
|
||||
.attach-status.uploading { background: rgba(108, 122, 224, 0.14); color: #a8b4ff; border: 1px solid rgba(108, 122, 224, 0.3); }
|
||||
.attach-status.ok { background: rgba(0, 216, 167, 0.12); color: #00d8a7; border: 1px solid rgba(0, 216, 167, 0.3); }
|
||||
.attach-status.err { background: rgba(255, 80, 100, 0.12); color: #ff8595; border: 1px solid rgba(255, 80, 100, 0.3); }
|
||||
|
||||
.attach-progress {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
overflow: hidden;
|
||||
margin: 8px 0 10px;
|
||||
display: none;
|
||||
}
|
||||
.attach-progress.show { display: block; }
|
||||
.attach-progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #6c7ae0, #b06be0);
|
||||
border-radius: 999px;
|
||||
width: 0;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.attach-actions-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.attach-actions-row button {
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: #c0c0d8;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.attach-actions-row button:hover {
|
||||
background: rgba(255,255,255,0.09);
|
||||
color: #fff;
|
||||
}
|
||||
.attach-actions-row button.danger {
|
||||
background: rgba(255, 80, 100, 0.08);
|
||||
color: #ff8595;
|
||||
border-color: rgba(255, 80, 100, 0.22);
|
||||
}
|
||||
.attach-actions-row button.danger:hover { background: rgba(255, 80, 100, 0.16); }
|
||||
.attach-actions-row button:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.edit-card { padding: 18px; }
|
||||
.attach-list { grid-template-columns: 1fr; }
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>新增 / 编辑收藏 | MilesYang时光助手</title>
|
||||
<link rel="stylesheet" href="/common/common.css">
|
||||
<link rel="stylesheet" href="../../shared.css">
|
||||
<link rel="stylesheet" href="edit.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-shell">
|
||||
<header class="app-topbar">
|
||||
<div class="app-topbar-left">
|
||||
<button class="back-btn" id="btn-back" title="返回列表">←</button>
|
||||
<div>
|
||||
<div class="page-title" id="page-title">新增收藏</div>
|
||||
<div class="page-subtitle">支持拖拽 / Ctrl+V 粘贴 / 选择本地文件</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-topbar-right">
|
||||
<button class="btn secondary btn-sm" id="btn-save" disabled>保存中...</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<form class="card edit-card" id="edit-form" autocomplete="off">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="f-title">标题 <span style="color:#6c7ae0;font-weight:400;">（未填时会根据附件自动生成）</span></label>
|
||||
<input id="f-title" class="form-control" maxlength="200" placeholder="建议输入简洁标题，方便以后搜索">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="f-tags">标签（逗号或空格分隔）</label>
|
||||
<input id="f-tags" class="form-control" maxlength="500" placeholder="如：工作, 重要, 合同">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="f-remark">备注文本</label>
|
||||
<textarea id="f-remark" class="form-control" maxlength="4000" placeholder="可输入详细备注、说明、关键词... （未填且有附件时，会根据附件自动生成清单）"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="attach-head">
|
||||
<label class="form-label" style="margin:0;">附件（图片 / PDF / Word 等）</label>
|
||||
<div class="attach-actions">
|
||||
<button type="button" class="btn secondary btn-sm" id="btn-pick-file">📎 选择本地文件</button>
|
||||
<button type="button" class="btn ghost btn-sm" id="btn-auto-fill">🤖 按附件自动填充</button>
|
||||
</div>
|
||||
</div>
|
||||
<input type="file" id="file-input" multiple style="display:none" accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.md,.csv,.zip,.rar,.7z,.mp3,.mp4,.mov">
|
||||
|
||||
<div class="drop-zone" id="drop-zone" tabindex="0">
|
||||
<div class="drop-text">
|
||||
<div class="drop-icon">📂</div>
|
||||
<div class="drop-title">拖拽文件到此处上传</div>
|
||||
<div class="drop-hint">或直接 <b>Ctrl+V</b> 粘贴图片 / 截图，也可以点「选择本地文件」</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="attach-list" id="attach-list"></div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:32px; display:flex; justify-content:flex-end; gap:10px;">
|
||||
<button type="button" class="btn secondary btn-sm" id="btn-cancel">取消</button>
|
||||
<button type="submit" class="btn primary btn-sm" id="btn-save2">保存收藏</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="modal-slot"></div>
|
||||
<div id="interaction-dialog" class="interaction-dialog hidden"></div>
|
||||
|
||||
<script src="../../api.js"></script>
|
||||
<script src="../../kits/common/dialog.js"></script>
|
||||
<script src="edit.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,475 @@
|
||||
(function () {
|
||||
const api = window.__MPTA_API__
|
||||
const dlg = window.__MPTA_DIALOG__
|
||||
|
||||
const $form = document.getElementById('edit-form')
|
||||
const $title = document.getElementById('f-title')
|
||||
const $tags = document.getElementById('f-tags')
|
||||
const $remark = document.getElementById('f-remark')
|
||||
const $fileInput = document.getElementById('file-input')
|
||||
const $btnPick = document.getElementById('btn-pick-file')
|
||||
const $btnAutoFill = document.getElementById('btn-auto-fill')
|
||||
const $btnCancel = document.getElementById('btn-cancel')
|
||||
const $btnSave = document.getElementById('btn-save')
|
||||
const $btnSave2 = document.getElementById('btn-save2')
|
||||
const $btnBack = document.getElementById('btn-back')
|
||||
const $drop = document.getElementById('drop-zone')
|
||||
const $attachList = document.getElementById('attach-list')
|
||||
const $pageTitle = document.getElementById('page-title')
|
||||
|
||||
const escapeHtml = dlg.escapeHtml
|
||||
const humanSize = dlg.humanSize
|
||||
|
||||
const q = new URLSearchParams(location.search)
|
||||
const editId = q.get('id')
|
||||
const isEdit = !!editId
|
||||
|
||||
let attachments = []
|
||||
let groupId = ''
|
||||
let saving = false
|
||||
|
||||
function fileIcon(fileName) {
|
||||
const ext = (fileName || '').split('.').pop().toLowerCase()
|
||||
if (/png|jpe?g|gif|webp|bmp|svg|ico/.test(ext)) return '🖼️'
|
||||
if (/pdf/.test(ext)) return '📕'
|
||||
if (/docx?|docm|dotx?/.test(ext)) return '📘'
|
||||
if (/xlsx?|xlsm|xls/.test(ext)) return '📗'
|
||||
if (/pptx?|ppsm/.test(ext)) return '📙'
|
||||
if (/txt|md|log|csv/.test(ext)) return '📝'
|
||||
if (/zip|rar|7z|tar|gz/.test(ext)) return '🗜️'
|
||||
if (/mp3|wav|flac|m4a|aac/.test(ext)) return '🎵'
|
||||
if (/mp4|mov|avi|mkv|webm/.test(ext)) return '🎥'
|
||||
return '📄'
|
||||
}
|
||||
|
||||
function isImageByFile(file) {
|
||||
try {
|
||||
if (file && file.type && /^image\//.test(file.type)) return true
|
||||
const name = (file && (file.name || '')) || ''
|
||||
return /\.(png|jpe?g|gif|webp|bmp|svg|ico)$/i.test(name)
|
||||
} catch { return false }
|
||||
}
|
||||
|
||||
function getObjectUrl(file) {
|
||||
try { return URL.createObjectURL(file) } catch { return '' }
|
||||
}
|
||||
|
||||
function parseTags(s) {
|
||||
if (!s) return []
|
||||
return String(s)
|
||||
.split(/[,，\s]+/)
|
||||
.map(x => x.trim())
|
||||
.filter(Boolean)
|
||||
.filter((v, i, arr) => arr.indexOf(v) === i)
|
||||
}
|
||||
|
||||
function genGroupId() {
|
||||
return 'web_' + Date.now().toString(36) + '_' + Math.random().toString(36).slice(2, 8)
|
||||
}
|
||||
|
||||
function setSaving(v) {
|
||||
saving = v
|
||||
const flag = !!v
|
||||
$btnSave.disabled = flag
|
||||
$btnSave2.disabled = flag
|
||||
$btnSave.textContent = flag ? '保存中...' : '保存'
|
||||
}
|
||||
|
||||
function renderAttachments() {
|
||||
if (!attachments.length) { $attachList.innerHTML = ''; return }
|
||||
$attachList.innerHTML = attachments.map((a, idx) => {
|
||||
const tempId = a.tempId
|
||||
const isImg = !!a.isImage
|
||||
const displayUrl = a.url || a.previewUrl || ''
|
||||
const ext = (a.fileName || '').split('.').pop().toUpperCase()
|
||||
const statusTextMap = { pending: '等待上传', uploading: '上传中', ok: '上传成功', err: '上传失败' }
|
||||
const statusText = statusTextMap[a.status] || a.status
|
||||
const showProgress = a.status === 'uploading'
|
||||
return (
|
||||
`<div class="attach-item ${isImg ? 'image' : 'file'}" data-temp="${escapeHtml(tempId)}">` +
|
||||
(isImg
|
||||
? `<div class="preview"><img src="${displayUrl}" alt="${escapeHtml(a.fileName || '')}" loading="lazy"></div>`
|
||||
: `<div class="preview"><span class="big">${fileIcon(a.fileName)}</span><span class="ext">${ext || 'FILE'}</span></div>`) +
|
||||
`<div class="attach-info">` +
|
||||
`<div class="attach-name" title="${escapeHtml(a.fileName || '')}">${escapeHtml(a.fileName || '未命名')}</div>` +
|
||||
`<div class="attach-meta">` +
|
||||
`<span>${humanSize(a.fileSize)}</span>` +
|
||||
`<span class="attach-status ${a.status}">${statusText}</span>` +
|
||||
a.errorMsg ? `<span style="color:#ff8595;">${escapeHtml(a.errorMsg)}</span>` : '' +
|
||||
`</div>` +
|
||||
`</div>` +
|
||||
`<div class="attach-progress ${showProgress ? 'show' : ''}"><div class="attach-progress-bar" style="width:${a.percent || 0}%;"></div></div>` +
|
||||
`<div class="attach-actions-row">` +
|
||||
(a.status === 'err'
|
||||
? `<button type="button" data-act="retry" data-temp="${escapeHtml(tempId)}">🔄 重试</button>`
|
||||
: '') +
|
||||
`<button type="button" data-act="remove" data-temp="${escapeHtml(tempId)}" class="danger">✕ 移除</button>` +
|
||||
`</div>` +
|
||||
`</div>`
|
||||
)
|
||||
}).join('')
|
||||
|
||||
Array.from($attachList.querySelectorAll('button[data-act]')).forEach((btn) => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const act = btn.getAttribute('data-act')
|
||||
const tempId = btn.getAttribute('data-temp')
|
||||
if (act === 'remove') removeAttachment(tempId)
|
||||
else if (act === 'retry') retryUpload(tempId)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function addAttachments(files) {
|
||||
if (!files || !files.length) return
|
||||
const pendingGroupId = groupId || genGroupId()
|
||||
if (!groupId) groupId = pendingGroupId
|
||||
Array.from(files).forEach((file) => {
|
||||
if (!file) return
|
||||
const tempId = 't_' + Date.now().toString(36) + '_' + Math.random().toString(36).slice(2, 8)
|
||||
const isImage = isImageByFile(file)
|
||||
const previewUrl = isImage ? getObjectUrl(file) : ''
|
||||
attachments.push({
|
||||
tempId, file, isImage,
|
||||
fileName: file.name || ('未命名_' + tempId),
|
||||
fileSize: Number(file.size || 0),
|
||||
previewUrl,
|
||||
url: '', id: '', storedName: '', filePath: '', mimeType: '',
|
||||
status: 'pending', percent: 0, errorMsg: ''
|
||||
})
|
||||
})
|
||||
renderAttachments()
|
||||
autoFillFromAttachments(false)
|
||||
Promise.resolve().then(() => uploadPending())
|
||||
}
|
||||
|
||||
function removeAttachment(tempId) {
|
||||
const idx = attachments.findIndex(a => a.tempId === tempId)
|
||||
if (idx < 0) return
|
||||
const a = attachments[idx]
|
||||
if (a && a.previewUrl) { try { URL.revokeObjectURL(a.previewUrl) } catch {} }
|
||||
attachments.splice(idx, 1)
|
||||
renderAttachments()
|
||||
}
|
||||
|
||||
function retryUpload(tempId) {
|
||||
const a = attachments.find(x => x.tempId === tempId)
|
||||
if (!a) return
|
||||
a.status = 'pending'
|
||||
a.percent = 0
|
||||
a.errorMsg = ''
|
||||
renderAttachments()
|
||||
uploadPending()
|
||||
}
|
||||
|
||||
async function uploadPending() {
|
||||
const pendings = attachments.filter(a => a.status === 'pending')
|
||||
for (const a of pendings) {
|
||||
if (a.status !== 'pending') continue
|
||||
a.status = 'uploading'
|
||||
a.percent = 0
|
||||
renderAttachments()
|
||||
try {
|
||||
const res = await api.personalCollect.uploadFile(a.file, groupId, (prog) => {
|
||||
a.percent = prog.percent || 0
|
||||
const target = $attachList.querySelector(`[data-temp="${a.tempId}"]`)
|
||||
if (target) {
|
||||
const bar = target.querySelector('.attach-progress-bar')
|
||||
if (bar) bar.style.width = a.percent + '%'
|
||||
const statusEl = target.querySelector('.attach-status')
|
||||
if (statusEl) statusEl.textContent = `上传中 ${a.percent}%`
|
||||
}
|
||||
})
|
||||
const data = res && res.data ? res.data : (res || {})
|
||||
const inner = data.data ? data.data : data
|
||||
a.id = inner.id || data.id || a.tempId
|
||||
a.storedName = inner.storedName || data.storedName || inner.stored_name || a.fileName
|
||||
a.filePath = inner.filePath || data.filePath || inner.file_path || ''
|
||||
a.mimeType = inner.mimeType || data.mimeType || inner.mime_type || (a.file && a.file.type) || ''
|
||||
a.url = inner.url || data.url || (a.filePath ? api.fileUrl(a.filePath) : a.previewUrl) || ''
|
||||
if (typeof inner.isImage !== 'undefined') a.isImage = !!inner.isImage
|
||||
else if (typeof data.isImage !== 'undefined') a.isImage = !!data.isImage
|
||||
else if (typeof inner.is_image !== 'undefined') a.isImage = !!inner.is_image
|
||||
a.status = 'ok'
|
||||
a.percent = 100
|
||||
} catch (e) {
|
||||
a.status = 'err'
|
||||
a.errorMsg = (e && e.message) ? e.message : '上传失败'
|
||||
}
|
||||
renderAttachments()
|
||||
}
|
||||
}
|
||||
|
||||
function buildAutoText(list) {
|
||||
const atts = list || attachments.filter(a => a && (a.status === 'ok' || a.fileName))
|
||||
if (!atts.length) return { title: '', remark: '' }
|
||||
const images = atts.filter(a => a.isImage)
|
||||
const files = atts.filter(a => !a.isImage)
|
||||
const ic = images.length, fc = files.length, total = atts.length
|
||||
const pad = (n) => (n < 10 ? '0' + n : '' + n)
|
||||
const now = new Date()
|
||||
const ts = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}`
|
||||
|
||||
let title = ''
|
||||
if (total === 1) {
|
||||
const only = atts[0]
|
||||
const raw = only.fileName || '附件'
|
||||
const dot = raw.lastIndexOf('.')
|
||||
const stem = dot > 0 ? raw.slice(0, dot) : raw
|
||||
if (only.isImage) title = `图片 - ${ts}`
|
||||
else title = stem || raw
|
||||
} else if (ic > 0 && fc === 0) title = `${ic} 张图片 - ${ts}`
|
||||
else if (fc > 0 && ic === 0) {
|
||||
if (fc === 1) {
|
||||
const only = files[0]; const raw = only.fileName || '附件'
|
||||
const dot = raw.lastIndexOf('.'); const stem = dot > 0 ? raw.slice(0, dot) : raw
|
||||
title = stem || raw
|
||||
} else title = `${fc} 个文件 - ${ts}`
|
||||
} else title = `${ic} 图 + ${fc} 文件 - ${ts}`
|
||||
|
||||
const lines = [`附件数量：${total}`]
|
||||
if (ic) lines.push(`图片：${ic} 张`)
|
||||
if (fc) lines.push(`文件：${fc} 个`)
|
||||
lines.push('', '附件清单：')
|
||||
atts.slice(0, 9).forEach((a, i) => lines.push(` ${i+1}. ${a.fileName || '未命名'}（${humanSize(a.fileSize)}）`))
|
||||
if (atts.length > 9) lines.push(` ... 另有 ${atts.length - 9} 个附件未列出`)
|
||||
lines.push('', `整理时间：${ts}`)
|
||||
return { title, remark: lines.join('\n') }
|
||||
}
|
||||
|
||||
function autoFillFromAttachments(force) {
|
||||
if (isEdit && !force) return
|
||||
const uploadeds = attachments.filter(a => a && (a.status === 'ok' || a.status === 'pending' || a.status === 'uploading' || a.fileName))
|
||||
if (!uploadeds.length) return
|
||||
const hasTitle = !!($title.value || '').trim()
|
||||
const hasRemark = !!($remark.value || '').trim()
|
||||
const { title, remark } = buildAutoText(uploadeds)
|
||||
if (force || !hasTitle) $title.value = title || ''
|
||||
if (force || !hasRemark) $remark.value = remark || ''
|
||||
}
|
||||
|
||||
$btnAutoFill.addEventListener('click', () => {
|
||||
autoFillFromAttachments(true)
|
||||
dlg.showToast('已按附件自动填充', 'success', 1400)
|
||||
})
|
||||
|
||||
function bindDropPaste() {
|
||||
$drop.addEventListener('dragenter', (e) => { e.preventDefault(); $drop.classList.add('drag') })
|
||||
$drop.addEventListener('dragover', (e) => { e.preventDefault(); $drop.classList.add('drag') })
|
||||
$drop.addEventListener('dragleave', (e) => { e.preventDefault(); if (e.target === $drop) $drop.classList.remove('drag') })
|
||||
$drop.addEventListener('drop', (e) => {
|
||||
e.preventDefault(); $drop.classList.remove('drag')
|
||||
const list = (e.dataTransfer && e.dataTransfer.files) ? Array.from(e.dataTransfer.files) : []
|
||||
if (list.length) addAttachments(list)
|
||||
})
|
||||
|
||||
document.addEventListener('paste', (e) => {
|
||||
if (e.target && (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA')) return
|
||||
if (!e.clipboardData) return
|
||||
const items = Array.from(e.clipboardData.items || [])
|
||||
const files = items
|
||||
.filter(it => it.kind === 'file')
|
||||
.map(it => it.getAsFile())
|
||||
.filter(Boolean)
|
||||
if (files.length) { addAttachments(files); return }
|
||||
const textItem = items.find(it => it.kind === 'string' && it.type === 'text/plain')
|
||||
if (textItem) {
|
||||
textItem.getAsString((raw) => {
|
||||
const text = (raw || '').trim()
|
||||
if (text.length < 3 || text.length > 50000) return
|
||||
openTextPasteDialog(text)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function openTextPasteDialog(text) {
|
||||
const count = text.length
|
||||
const preview = text.length > 900 ? (text.slice(0, 900) + '\n\n……（已截断预览，共 ' + count + ' 字）') : text
|
||||
const mask = document.createElement('div')
|
||||
mask.className = 'text-paste-mask'
|
||||
mask.innerHTML =
|
||||
`<div class="text-paste-card">
|
||||
<div class="text-paste-head">
|
||||
<div class="text-paste-title">📝 检测到剪贴板文字</div>
|
||||
<div class="text-paste-count">${count} 字 · ${text.split('\n').length} 行</div>
|
||||
</div>
|
||||
<div class="text-paste-preview">${escapeHtml(preview)}</div>
|
||||
<div class="text-paste-actions">
|
||||
<button type="button" class="btn btn-ghost" data-act="cancel">取消</button>
|
||||
<button type="button" class="btn btn-secondary" data-act="replace">另起一条（清空附件）</button>
|
||||
<button type="button" class="btn btn-primary" data-act="append">追加到当前备注</button>
|
||||
</div>
|
||||
</div>`
|
||||
document.body.appendChild(mask)
|
||||
const close = () => { try { document.body.removeChild(mask) } catch {} }
|
||||
mask.addEventListener('click', (ev) => {
|
||||
if (ev.target === mask) { close(); return }
|
||||
const btn = ev.target.closest('button[data-act]')
|
||||
if (!btn) return
|
||||
const act = btn.getAttribute('data-act')
|
||||
if (act === 'cancel') { close(); return }
|
||||
if (act === 'append') {
|
||||
const cur = ($remark.value || '').trim()
|
||||
$remark.value = cur ? (cur + '\n\n' + text) : text
|
||||
close()
|
||||
dlg.showToast('已追加 ' + count + ' 字到备注', 'success', 1400)
|
||||
autoFillFromAttachments(false)
|
||||
return
|
||||
}
|
||||
if (act === 'replace') {
|
||||
attachments.forEach(a => { if (a.previewUrl) { try { URL.revokeObjectURL(a.previewUrl) } catch {} } })
|
||||
attachments = []
|
||||
renderAttachments()
|
||||
$remark.value = text
|
||||
const firstLine = text.split('\n').map(s => s.trim()).find(s => s.length) || ''
|
||||
const autoTitle = (firstLine || '').slice(0, 28)
|
||||
if (isEdit) {
|
||||
if (!($title.value || '').trim() && autoTitle) $title.value = autoTitle
|
||||
dlg.showToast('已应用到当前编辑', 'success', 1400)
|
||||
} else {
|
||||
$title.value = autoTitle || '文字收藏'
|
||||
dlg.showToast('已清空附件并填入文字', 'success', 1400)
|
||||
}
|
||||
close()
|
||||
return
|
||||
}
|
||||
})
|
||||
setTimeout(() => { const first = mask.querySelector('button[data-act="append"]'); if (first) first.focus() }, 30)
|
||||
}
|
||||
|
||||
function bindInputEvents() {
|
||||
$btnPick.addEventListener('click', () => { if ($fileInput) $fileInput.click() })
|
||||
$fileInput.addEventListener('change', (e) => {
|
||||
const files = Array.from((e.target && e.target.files) || [])
|
||||
if (files.length) addAttachments(files)
|
||||
$fileInput.value = ''
|
||||
})
|
||||
$drop.addEventListener('click', () => { if ($fileInput) $fileInput.click() })
|
||||
$drop.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if ($fileInput) $fileInput.click() } })
|
||||
}
|
||||
|
||||
function buildPayload() {
|
||||
const titleVal = ($title.value || '').trim()
|
||||
const remarkVal = ($remark.value || '').trim()
|
||||
const tagsArr = parseTags($tags.value)
|
||||
const uploadeds = attachments.filter(a => a && a.status === 'ok' && a.id)
|
||||
if (!titleVal && !remarkVal && !uploadeds.length) {
|
||||
throw new Error('请至少输入标题/备注/上传附件三者其中之一')
|
||||
}
|
||||
return {
|
||||
title: titleVal,
|
||||
remark: remarkVal,
|
||||
tags: tagsArr,
|
||||
attachmentIds: uploadeds.map(a => a.id)
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() { window.location.href = 'list.html' }
|
||||
|
||||
async function onSave(e) {
|
||||
if (e) e.preventDefault()
|
||||
if (saving) return
|
||||
let payload
|
||||
try { payload = buildPayload() }
|
||||
catch (err) { dlg.showToast(err.message, 'warn', 2600); return }
|
||||
|
||||
const uploadingCount = attachments.filter(a => a.status === 'pending' || a.status === 'uploading').length
|
||||
const failedList = attachments.filter(a => a.status === 'err')
|
||||
if (uploadingCount > 0) {
|
||||
dlg.confirmDialog({
|
||||
title: '仍有文件上传中',
|
||||
desc: `还有 ${uploadingCount} 个文件正在上传。\n现在保存的话，这些未完成的文件不会被绑定到此条收藏。\n\n建议等待上传结束后再保存。`,
|
||||
okText: '仍然保存', cancelText: '等待上传', danger: false
|
||||
}, () => doSave(payload))
|
||||
return
|
||||
}
|
||||
if (failedList.length > 0) {
|
||||
dlg.confirmDialog({
|
||||
title: `${failedList.length} 个文件上传失败`,
|
||||
desc: `以下文件上传失败，保存后这些文件不会被绑定：\n\n${failedList.map(a => '· ' + (a.fileName || '未命名')).join('\n')}\n\n你可以单独重试这些附件，或直接保存已成功的内容。`,
|
||||
okText: '忽略失败，只保存成功的', cancelText: '回去修', danger: true
|
||||
}, () => doSave(payload))
|
||||
return
|
||||
}
|
||||
doSave(payload)
|
||||
}
|
||||
|
||||
async function doSave(payload) {
|
||||
const opName = isEdit ? '更新收藏' : '新增收藏'
|
||||
try {
|
||||
setSaving(true)
|
||||
const saved = await dlg.runTrackedInteraction({
|
||||
name: opName,
|
||||
method: isEdit ? 'PUT' : 'POST',
|
||||
path: '/api/mp_time_assistant/kits/personal_collect/items',
|
||||
params: isEdit ? Object.assign({ id: editId }, payload) : payload
|
||||
}, () => {
|
||||
if (isEdit) return api.personalCollect.update(Object.assign({ id: editId }, payload))
|
||||
return api.personalCollect.create(payload)
|
||||
})
|
||||
dlg.showToast(`${opName}成功`, 'success', 1600)
|
||||
setTimeout(() => {
|
||||
const dataId = (saved && saved.id) || editId
|
||||
if (!isEdit && dataId) window.location.href = 'detail.html?id=' + encodeURIComponent(dataId)
|
||||
else goBack()
|
||||
}, 500)
|
||||
} catch (e) {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadEditRecord() {
|
||||
try {
|
||||
const data = await dlg.runTrackedInteraction({
|
||||
name: '加载收藏详情',
|
||||
method: 'GET',
|
||||
path: '/api/mp_time_assistant/kits/personal_collect/items/' + encodeURIComponent(editId),
|
||||
params: { id: editId }
|
||||
}, () => api.personalCollect.get(editId))
|
||||
const item = data ? ((data && data.data) || data) : {}
|
||||
const itemInner = (item && item.item) || item
|
||||
$title.value = itemInner.title || ''
|
||||
$remark.value = itemInner.remark || ''
|
||||
$tags.value = (itemInner.tags && itemInner.tags.length) ? itemInner.tags.join(', ') : ''
|
||||
if (itemInner.groupId) groupId = itemInner.groupId || ''
|
||||
const rawAtts = itemInner.attachments || item.attachments || []
|
||||
const atts = rawAtts.map((a, i) => ({
|
||||
tempId: 'e_' + Date.now().toString(36) + '_' + i,
|
||||
id: a.id || '',
|
||||
storedName: a.storedName || a.stored_name || a.fileName || '',
|
||||
filePath: a.filePath || a.file_path || '',
|
||||
mimeType: a.mimeType || a.mime_type || '',
|
||||
isImage: typeof a.isImage !== 'undefined' ? !!a.isImage : !!a.is_image,
|
||||
fileName: a.fileName || a.file_name || '未命名',
|
||||
fileSize: Number(a.fileSize || a.file_size || 0),
|
||||
previewUrl: '',
|
||||
url: a.url || api.fileUrl(a.filePath || a.file_path || ''),
|
||||
status: 'ok', percent: 100, errorMsg: '', file: null
|
||||
}))
|
||||
attachments = atts
|
||||
renderAttachments()
|
||||
} catch (e) {
|
||||
dlg.showToast('加载失败：' + (e.message || '未知错误'), 'error', 3000)
|
||||
setTimeout(goBack, 1400)
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
bindDropPaste()
|
||||
bindInputEvents()
|
||||
$btnBack.addEventListener('click', goBack)
|
||||
$btnCancel.addEventListener('click', goBack)
|
||||
$form.addEventListener('submit', onSave)
|
||||
$btnSave.addEventListener('click', onSave)
|
||||
if (isEdit) {
|
||||
$pageTitle.textContent = '编辑收藏'
|
||||
loadEditRecord()
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', init)
|
||||
|
||||
window.addEventListener('beforeunload', () => {
|
||||
attachments.forEach(a => { if (a.previewUrl) { try { URL.revokeObjectURL(a.previewUrl) } catch {} } })
|
||||
})
|
||||
})()
|
||||
@@ -0,0 +1,124 @@
|
||||
.list-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.fav-card {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fav-card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.fav-card-title {
|
||||
font-size: 16.5px;
|
||||
font-weight: 600;
|
||||
color: #f0f0f8;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fav-card-time {
|
||||
font-size: 12px;
|
||||
color: #8a8aa8;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.fav-card-remark {
|
||||
color: #b8b8d0;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 14px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.fav-card-tags {
|
||||
margin-bottom: 14px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.fav-card-preview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 6px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.fav-card-preview:empty { display: none; margin: 0; }
|
||||
|
||||
.fav-card-preview .thumb {
|
||||
position: relative;
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: rgba(0,0,0,0.25);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.fav-card-preview .thumb img {
|
||||
width: 100%; height: 100%; object-fit: cover; display: block;
|
||||
}
|
||||
.fav-card-preview .thumb.file {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-direction: column; font-size: 12px; color: #a8b4ff;
|
||||
padding: 6px; text-align: center; gap: 4px;
|
||||
}
|
||||
.fav-card-preview .thumb.file .icon { font-size: 20px; opacity: 0.8; }
|
||||
.fav-card-preview .thumb.file .name {
|
||||
font-size: 11px; color: #b8b8d0; line-height: 1.3;
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.fav-card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.fav-card-count {
|
||||
font-size: 12px;
|
||||
color: #8a8aa8;
|
||||
}
|
||||
|
||||
.fav-card-actions {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
padding: 7px 12px;
|
||||
font-size: 12.5px;
|
||||
border-radius: 10px;
|
||||
background: rgba(108, 122, 224, 0.1);
|
||||
color: #a8b4ff;
|
||||
border: 1px solid rgba(108, 122, 224, 0.2);
|
||||
}
|
||||
.btn-action:hover { background: rgba(108, 122, 224, 0.2); }
|
||||
.btn-action.danger {
|
||||
background: rgba(255, 80, 100, 0.08);
|
||||
color: #ff8595;
|
||||
border-color: rgba(255, 80, 100, 0.2);
|
||||
}
|
||||
.btn-action.danger:hover { background: rgba(255, 80, 100, 0.16); }
|
||||
|
||||
.fav-empty {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>微信收藏夹 | MilesYang时光助手</title>
|
||||
<link rel="stylesheet" href="/common/common.css">
|
||||
<link rel="stylesheet" href="../../shared.css">
|
||||
<link rel="stylesheet" href="list.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-shell">
|
||||
<header class="app-topbar">
|
||||
<div class="app-topbar-left">
|
||||
<button class="back-btn" id="btn-back" title="返回首页">←</button>
|
||||
<div>
|
||||
<div class="page-title">📁 微信收藏夹</div>
|
||||
<div class="page-subtitle">聊天附件 / 图片 / 文件，手机电脑实时同步</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-topbar-right">
|
||||
<button class="btn secondary btn-sm" id="btn-refresh">🔄 刷新</button>
|
||||
<button class="btn primary btn-sm" id="btn-add">＋ 新增收藏</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="search-bar">
|
||||
<span class="search-icon">🔍</span>
|
||||
<input id="search-input" type="text" placeholder="搜索标题 / 备注 / 标签...（回车搜索）">
|
||||
<button class="btn ghost btn-sm" id="btn-clear-search">清空</button>
|
||||
</div>
|
||||
|
||||
<main id="list-wrap"></main>
|
||||
|
||||
<button class="fab" id="fab-add" title="新增收藏">＋</button>
|
||||
</div>
|
||||
|
||||
<div id="modal-slot"></div>
|
||||
<div id="interaction-dialog" class="interaction-dialog hidden"></div>
|
||||
|
||||
<script src="../../api.js"></script>
|
||||
<script src="../../kits/common/dialog.js"></script>
|
||||
<script src="list.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,194 @@
|
||||
(function () {
|
||||
const api = window.__MPTA_API__
|
||||
const dlg = window.__MPTA_DIALOG__
|
||||
const $wrap = document.getElementById('list-wrap')
|
||||
const $search = document.getElementById('search-input')
|
||||
const $clear = document.getElementById('btn-clear-search')
|
||||
const $back = document.getElementById('btn-back')
|
||||
const $refresh = document.getElementById('btn-refresh')
|
||||
const $add = document.getElementById('btn-add')
|
||||
const $fab = document.getElementById('fab-add')
|
||||
|
||||
let currentItems = []
|
||||
let pendingKeyword = ''
|
||||
|
||||
const escapeHtml = dlg.escapeHtml
|
||||
const formatTime = dlg.formatTime
|
||||
const humanSize = dlg.humanSize
|
||||
|
||||
function goBack() { window.location.href = '../../index.html' }
|
||||
function goAdd() { window.location.href = 'edit.html' }
|
||||
function goEdit(id) { window.location.href = 'edit.html?id=' + encodeURIComponent(id) }
|
||||
function goDetail(id) { window.location.href = 'detail.html?id=' + encodeURIComponent(id) }
|
||||
|
||||
function fileIcon(fileName) {
|
||||
const ext = (fileName || '').split('.').pop().toLowerCase()
|
||||
if (/png|jpe?g|gif|webp|bmp|svg|ico/.test(ext)) return '🖼️'
|
||||
if (/pdf/.test(ext)) return '📕'
|
||||
if (/docx?|docm|dotx?/.test(ext)) return '📘'
|
||||
if (/xlsx?|xlsm|xls/.test(ext)) return '📗'
|
||||
if (/pptx?|ppsm/.test(ext)) return '📙'
|
||||
if (/txt|md|log/.test(ext)) return '📝'
|
||||
if (/zip|rar|7z|tar|gz/.test(ext)) return '🗜️'
|
||||
if (/mp3|wav|flac|m4a|aac/.test(ext)) return '🎵'
|
||||
if (/mp4|mov|avi|mkv|webm/.test(ext)) return '🎥'
|
||||
return '📄'
|
||||
}
|
||||
|
||||
function renderPreview(attachments) {
|
||||
const list = attachments || []
|
||||
if (!list.length) return ''
|
||||
const images = list.filter(a => a.isImage)
|
||||
const files = list.filter(a => !a.isImage)
|
||||
const tiles = []
|
||||
images.slice(0, 4).forEach((a) => {
|
||||
const url = api.fileUrl(a.url || a.filePath)
|
||||
tiles.push(`<div class="thumb"><img src="${url}" alt="${escapeHtml(a.fileName || 'image')}" loading="lazy"></div>`)
|
||||
})
|
||||
const fileSlots = Math.max(0, 4 - tiles.length)
|
||||
files.slice(0, fileSlots).forEach((a) => {
|
||||
tiles.push(
|
||||
`<div class="thumb file" title="${escapeHtml(a.fileName || '')}">` +
|
||||
`<span class="icon">${fileIcon(a.fileName)}</span>` +
|
||||
`<span class="name">${escapeHtml(a.fileName || '未命名')}</span>` +
|
||||
`</div>`
|
||||
)
|
||||
})
|
||||
if (images.length + files.length > 4) {
|
||||
const extra = (images.length + files.length) - 4
|
||||
tiles.push(`<div class="thumb file"><span class="icon">+${extra}</span><span class="name">更多</span></div>`)
|
||||
}
|
||||
return `<div class="fav-card-preview">${tiles.join('')}</div>`
|
||||
}
|
||||
|
||||
function renderItems(items) {
|
||||
if (!items || !items.length) {
|
||||
$wrap.innerHTML =
|
||||
`<div class="fav-empty empty-state">` +
|
||||
`<div class="empty-state-icon">📂</div>` +
|
||||
`<div class="empty-state-text">还没有收藏内容</div>` +
|
||||
`<div class="empty-state-hint">点击右上角「新增收藏」或右下角「＋」开始保存</div>` +
|
||||
`</div>`
|
||||
return
|
||||
}
|
||||
$wrap.innerHTML = `<div class="list-container">` + items.map((it) => {
|
||||
const atts = it.attachments || []
|
||||
const imgCount = atts.filter(a => a.isImage).length
|
||||
const fileCount = atts.filter(a => !a.isImage).length
|
||||
const parts = []
|
||||
if (imgCount) parts.push(`${imgCount} 图`)
|
||||
if (fileCount) parts.push(`${fileCount} 文件`)
|
||||
const totalSize = atts.reduce((s, a) => s + Number(a.fileSize || 0), 0)
|
||||
if (totalSize) parts.push(humanSize(totalSize))
|
||||
const countText = parts.join(' · ')
|
||||
|
||||
const title = it.title ? escapeHtml(it.title) : '<span style="color:#8a8aa8;font-weight:500;">（无标题）</span>'
|
||||
const tags = (it.tags && it.tags.length) ? it.tags.map(t => `<span class="tag">${escapeHtml(t)}</span>`).join('') : ''
|
||||
|
||||
return (
|
||||
`<div class="card fav-card" data-id="${escapeHtml(it.id)}">` +
|
||||
`<div class="fav-card-header">` +
|
||||
`<div class="fav-card-title" data-act="detail">${title}</div>` +
|
||||
`<div class="fav-card-time">${formatTime(it.updatedAt || it.updated_at || it.createdAt || it.created_at)}</div>` +
|
||||
`</div>` +
|
||||
(it.remark ? `<div class="fav-card-remark" data-act="detail">${escapeHtml(it.remark)}</div>` : '') +
|
||||
(tags ? `<div class="fav-card-tags">${tags}</div>` : '') +
|
||||
renderPreview(atts) +
|
||||
`<div class="fav-card-footer">` +
|
||||
`<div class="fav-card-count">${countText || '纯文字笔记'}</div>` +
|
||||
`<div class="fav-card-actions">` +
|
||||
`<button class="btn-action" data-act="detail">查看</button>` +
|
||||
`<button class="btn-action" data-act="edit">编辑</button>` +
|
||||
`<button class="btn-action danger" data-act="delete">删除</button>` +
|
||||
`</div>` +
|
||||
`</div>` +
|
||||
`</div>`
|
||||
)
|
||||
}).join('') + `</div>`
|
||||
|
||||
Array.from($wrap.querySelectorAll('.fav-card')).forEach((card) => {
|
||||
const id = card.getAttribute('data-id')
|
||||
card.addEventListener('click', (e) => {
|
||||
const act = (e.target.getAttribute && e.target.getAttribute('data-act')) || 'detail'
|
||||
if (act === 'detail') goDetail(id)
|
||||
else if (act === 'edit') goEdit(id)
|
||||
else if (act === 'delete') confirmDelete(id, card)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function findTitle(id) {
|
||||
const it = currentItems.find(x => x.id === id)
|
||||
if (!it) return '该条收藏'
|
||||
return (it.title || '').trim() || '这条无标题收藏'
|
||||
}
|
||||
|
||||
function confirmDelete(id, card) {
|
||||
const title = findTitle(id)
|
||||
dlg.confirmDialog({
|
||||
title: '确认删除收藏？',
|
||||
desc: `「${title}」\n\n删除后此条收藏将不再显示（软删除，后端保留记录可追溯）。\n删除后手机端同样会消失。`,
|
||||
okText: '确认删除',
|
||||
cancelText: '取消',
|
||||
danger: true
|
||||
}, () => {
|
||||
dlg.runTrackedInteraction({
|
||||
name: `删除收藏`,
|
||||
method: 'DELETE',
|
||||
path: '/api/mp_time_assistant/kits/personal_collect/items',
|
||||
params: { id }
|
||||
}, () => api.personalCollect.remove(id)).then((res) => {
|
||||
if (card) {
|
||||
card.style.transition = 'opacity 0.25s ease, transform 0.25s ease'
|
||||
card.style.opacity = '0'
|
||||
card.style.transform = 'translateY(-6px)'
|
||||
setTimeout(() => loadList(pendingKeyword), 260)
|
||||
} else {
|
||||
loadList(pendingKeyword)
|
||||
}
|
||||
}).catch(() => {})
|
||||
})
|
||||
}
|
||||
|
||||
let searchTimer = null
|
||||
function onSearchInput() {
|
||||
const kw = ($search.value || '').trim()
|
||||
pendingKeyword = kw
|
||||
if (searchTimer) clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(() => loadList(kw), 250)
|
||||
}
|
||||
|
||||
function clearSearch() {
|
||||
if ($search.value) { $search.value = ''; pendingKeyword = ''; loadList('') }
|
||||
}
|
||||
|
||||
function loadList(keyword) {
|
||||
pendingKeyword = keyword || ''
|
||||
dlg.runTrackedInteraction({
|
||||
name: keyword ? `搜索收藏（${keyword}）` : '加载收藏列表',
|
||||
method: 'GET',
|
||||
path: '/api/mp_time_assistant/kits/personal_collect/items',
|
||||
params: { keyword: keyword || '' },
|
||||
normalViewAsToast: false
|
||||
}, () => api.personalCollect.list(keyword)).then((items) => {
|
||||
const safeItems = Array.isArray(items) ? items : []
|
||||
currentItems = safeItems
|
||||
renderItems(safeItems)
|
||||
if (keyword) {
|
||||
dlg.showToast(`搜索到 ${safeItems.length} 条`, safeItems.length ? 'success' : 'info', 1500)
|
||||
}
|
||||
}).catch(() => {
|
||||
$wrap.innerHTML = `<div class="fav-empty empty-state"><div class="empty-state-icon">❌</div><div class="empty-state-text">加载失败</div><div class="empty-state-hint">请检查后端是否已启动，并通过首页进入以完成鉴权</div></div>`
|
||||
})
|
||||
}
|
||||
|
||||
$back.addEventListener('click', goBack)
|
||||
$add.addEventListener('click', goAdd)
|
||||
$fab.addEventListener('click', goAdd)
|
||||
$refresh.addEventListener('click', () => loadList(pendingKeyword))
|
||||
$search.addEventListener('input', onSearchInput)
|
||||
$search.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); pendingKeyword = ($search.value || '').trim(); loadList(pendingKeyword) } })
|
||||
$clear.addEventListener('click', clearSearch)
|
||||
|
||||
loadList('')
|
||||
})()
|
||||
@@ -0,0 +1,296 @@
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
background: radial-gradient(1200px 800px at 10% 0%, #1a1a33 0%, #0f0f1a 60%, #0b0b15 100%);
|
||||
min-height: 100vh;
|
||||
color: #e8e8f0;
|
||||
line-height: 1.6;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input::placeholder, textarea::placeholder {
|
||||
color: #555570;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 24px 80px;
|
||||
}
|
||||
|
||||
.app-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 20px 28px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(108, 122, 224, 0.15);
|
||||
border-radius: 22px;
|
||||
backdrop-filter: blur(12px);
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.app-topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
|
||||
.app-topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
|
||||
|
||||
.back-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
background: rgba(108, 122, 224, 0.14);
|
||||
color: #a8b4ff;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(108, 122, 224, 0.25);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.back-btn:hover { background: rgba(108, 122, 224, 0.22); transform: translateX(-2px); }
|
||||
|
||||
.page-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #f0f0f8;
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 13px;
|
||||
color: #8a8aa8;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 10px 18px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: linear-gradient(135deg, #6c7ae0 0%, #8a6be0 100%);
|
||||
color: #fff;
|
||||
border: 1px solid rgba(108, 122, 224, 0.5);
|
||||
box-shadow: 0 8px 20px rgba(108, 122, 224, 0.25);
|
||||
}
|
||||
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(108, 122, 224, 0.32); }
|
||||
.btn.primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
|
||||
|
||||
.btn.secondary {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #cfcfe0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.btn.secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(108, 122, 224, 0.25); }
|
||||
|
||||
.btn.danger {
|
||||
background: rgba(255, 80, 100, 0.12);
|
||||
color: #ff8595;
|
||||
border: 1px solid rgba(255, 80, 100, 0.25);
|
||||
}
|
||||
.btn.danger:hover { background: rgba(255, 80, 100, 0.2); }
|
||||
|
||||
.btn.ghost {
|
||||
background: transparent;
|
||||
color: #9b9bb5;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.btn.ghost:hover { color: #e8e8f0; background: rgba(255,255,255,0.04); }
|
||||
|
||||
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
|
||||
.btn-lg { padding: 14px 24px; font-size: 15px; border-radius: 14px; }
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 22px;
|
||||
padding: 24px;
|
||||
backdrop-filter: blur(8px);
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover { border-color: rgba(108, 122, 224, 0.22); }
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(108, 122, 224, 0.12);
|
||||
color: #a8b4ff;
|
||||
font-size: 12px;
|
||||
border: 1px solid rgba(108, 122, 224, 0.22);
|
||||
margin-right: 6px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 100px 20px;
|
||||
color: #8a8aa8;
|
||||
}
|
||||
.empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.6; }
|
||||
.empty-state-text { font-size: 15px; margin-bottom: 8px; }
|
||||
.empty-state-hint { font-size: 13px; opacity: 0.7; }
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 18px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 20px;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
.search-bar:focus-within { border-color: rgba(108, 122, 224, 0.4); }
|
||||
.search-bar .search-icon { font-size: 17px; color: #8a8aa8; flex-shrink: 0; }
|
||||
.search-bar input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #c8c8e0;
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.form-control {
|
||||
width: 100%;
|
||||
background: rgba(18, 18, 31, 0.7);
|
||||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||
border-radius: 14px;
|
||||
padding: 14px 18px;
|
||||
color: #ffffff !important;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
transition: border-color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
.form-control:focus {
|
||||
background: rgba(18, 18, 31, 0.9);
|
||||
border-color: rgba(108, 122, 224, 0.45);
|
||||
}
|
||||
textarea.form-control { resize: vertical; min-height: 140px; }
|
||||
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
padding: 20px;
|
||||
}
|
||||
.modal-card {
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
background: linear-gradient(180deg, #1a1a2e 0%, #141425 100%);
|
||||
border: 1px solid rgba(108, 122, 224, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 28px;
|
||||
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #f0f0f8;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.modal-title.danger { color: #ff8595; }
|
||||
.modal-desc { color: #a8a8c0; font-size: 14px; line-height: 1.7; margin-bottom: 22px; white-space: pre-wrap; }
|
||||
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
|
||||
|
||||
.fab {
|
||||
position: fixed;
|
||||
right: 28px;
|
||||
bottom: 36px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #6c7ae0 0%, #b06be0 100%);
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
box-shadow: 0 14px 30px rgba(108, 122, 224, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
.fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 18px 38px rgba(108, 122, 224, 0.5); }
|
||||
|
||||
.interaction-dialog {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
width: min(460px, calc(100vw - 48px));
|
||||
max-height: 55vh;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(180deg, rgba(18, 18, 34, 0.98) 0%, rgba(14, 14, 28, 0.98) 100%);
|
||||
border: 1px solid rgba(108, 122, 224, 0.25);
|
||||
border-radius: 16px;
|
||||
padding: 16px 18px;
|
||||
z-index: 10000;
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
font-size: 12.5px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.interaction-dialog.hidden { display: none; }
|
||||
.interaction-dialog .id-title {
|
||||
font-size: 13px; font-weight: 600; color: #a8b4ff;
|
||||
margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center;
|
||||
}
|
||||
.interaction-dialog .id-body {
|
||||
color: #b8b8d0; white-space: pre-wrap; word-break: break-all;
|
||||
font-family: 'Consolas', 'SFMono-Regular', monospace;
|
||||
background: rgba(0,0,0,0.2); border-radius: 8px; padding: 10px; max-height: 38vh; overflow-y: auto;
|
||||
}
|
||||
.interaction-dialog .id-actions {
|
||||
margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px;
|
||||
}
|
||||
.interaction-dialog .id-countdown { color: #8a8aa8; font-size: 12px; }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.app-shell { padding: 20px 14px 96px; }
|
||||
.app-topbar { padding: 16px 18px; flex-direction: column; align-items: flex-start; }
|
||||
.app-topbar-right { width: 100%; justify-content: flex-end; }
|
||||
.page-title { font-size: 18px; }
|
||||
.card { padding: 18px; }
|
||||
.fab { right: 20px; bottom: 26px; width: 54px; height: 54px; font-size: 24px; }
|
||||
}
|
||||
Reference in New Issue
Block a user