style: 简化文档卡片样式，优化布局间距
This commit is contained in:
+113
-131
@@ -1,38 +1,13 @@
|
||||
<template>
|
||||
<div class="doc-block-crepe" :class="{ collapsed: collapsedState }">
|
||||
<div class="doc-header">
|
||||
<div class="doc-accent"></div>
|
||||
<div class="doc-icon">
|
||||
<svg v-if="docType === 'pdf'" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<path d="M8 13h5"/>
|
||||
<path d="M8 17h8"/>
|
||||
</svg>
|
||||
<svg v-else-if="docType === 'docx'" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<path d="m8 13 2 4 2-4 2 4 2-4"/>
|
||||
</svg>
|
||||
<svg v-else-if="docType === 'pptx'" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="12" rx="2"/>
|
||||
<path d="M8 20h8"/>
|
||||
<path d="M12 16v4"/>
|
||||
<path d="M9 8h3a2 2 0 0 1 0 4H9z"/>
|
||||
</svg>
|
||||
<svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<path d="M8 13h8"/>
|
||||
<path d="M8 17h5"/>
|
||||
</svg>
|
||||
<section class="doc-card" :class="{ 'is-collapsed': collapsedState }">
|
||||
<header class="doc-card__header">
|
||||
<div class="doc-card__badge">{{ typeLabel }}</div>
|
||||
<div class="doc-card__meta">
|
||||
<div class="doc-card__name">{{ docName }}</div>
|
||||
<div class="doc-card__time">{{ displayTime }}</div>
|
||||
</div>
|
||||
<div class="doc-meta">
|
||||
<div class="doc-name">{{ docName }}</div>
|
||||
<div class="doc-subline">{{ typeLabel }} · {{ displayTime }}</div>
|
||||
</div>
|
||||
<div class="doc-actions">
|
||||
<button type="button" class="action-btn" :title="collapsedState ? '展开文件' : '折叠文件'" @click="toggleCollapse">
|
||||
<div class="doc-card__actions">
|
||||
<button type="button" class="doc-card__btn" :title="collapsedState ? '展开文件' : '折叠文件'" @click="toggleCollapse">
|
||||
<svg v-if="collapsedState" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
@@ -40,7 +15,7 @@
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" class="action-btn action-btn-danger" title="删除文件" @click="props.onDelete?.()">
|
||||
<button type="button" class="doc-card__btn doc-card__btn--danger" title="删除文件" @click="props.onDelete?.()">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 6h18"/>
|
||||
<path d="M8 6V4h8v2"/>
|
||||
@@ -50,11 +25,11 @@
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div v-show="!collapsedState" class="doc-card__body">
|
||||
<div ref="editorRoot" class="doc-card__editor"></div>
|
||||
</div>
|
||||
<div v-show="!collapsedState" class="doc-editor">
|
||||
<div ref="editorRoot" class="inner-crepe"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -82,14 +57,7 @@ const collapsedState = ref(Boolean(props.collapsed))
|
||||
const currentContent = ref(props.content || '')
|
||||
let crepe = null
|
||||
let syncTimer = null
|
||||
let applyingExternalContent = false
|
||||
|
||||
const displayTime = computed(() => {
|
||||
if (!props.uploadTime) return '刚上传'
|
||||
const date = new Date(props.uploadTime)
|
||||
if (Number.isNaN(date.getTime())) return '刚上传'
|
||||
return date.toLocaleString('zh-CN', { hour12: false })
|
||||
})
|
||||
let syncingExternal = false
|
||||
|
||||
const typeLabel = computed(() => {
|
||||
if (props.docType === 'docx') return 'DOCX'
|
||||
@@ -98,6 +66,13 @@ const typeLabel = computed(() => {
|
||||
return 'TXT'
|
||||
})
|
||||
|
||||
const displayTime = computed(() => {
|
||||
if (!props.uploadTime) return '刚上传'
|
||||
const date = new Date(props.uploadTime)
|
||||
if (Number.isNaN(date.getTime())) return '刚上传'
|
||||
return date.toLocaleString('zh-CN', { hour12: false })
|
||||
})
|
||||
|
||||
const toggleCollapse = () => {
|
||||
collapsedState.value = !collapsedState.value
|
||||
props.onUpdateCollapsed?.(collapsedState.value)
|
||||
@@ -107,7 +82,7 @@ const syncContent = () => {
|
||||
if (!crepe) return
|
||||
if (syncTimer) clearTimeout(syncTimer)
|
||||
syncTimer = setTimeout(async () => {
|
||||
if (!crepe || applyingExternalContent) return
|
||||
if (!crepe || syncingExternal) return
|
||||
const markdown = await crepe.getMarkdown()
|
||||
currentContent.value = markdown
|
||||
props.onUpdateContent?.(markdown)
|
||||
@@ -115,22 +90,23 @@ const syncContent = () => {
|
||||
}
|
||||
|
||||
const syncExternalContent = async (nextValue) => {
|
||||
const value = nextValue || ''
|
||||
if (!crepe) {
|
||||
currentContent.value = nextValue || ''
|
||||
currentContent.value = value
|
||||
return
|
||||
}
|
||||
if ((nextValue || '') === currentContent.value) return
|
||||
applyingExternalContent = true
|
||||
if (value === currentContent.value) return
|
||||
syncingExternal = true
|
||||
try {
|
||||
crepe.editor.action(replaceAll(nextValue || ''))
|
||||
currentContent.value = nextValue || ''
|
||||
crepe.editor.action(replaceAll(value))
|
||||
currentContent.value = value
|
||||
} finally {
|
||||
applyingExternalContent = false
|
||||
syncingExternal = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.content, (nextValue) => {
|
||||
void syncExternalContent(nextValue || '')
|
||||
void syncExternalContent(nextValue)
|
||||
})
|
||||
|
||||
watch(() => props.collapsed, (nextValue) => {
|
||||
@@ -169,7 +145,6 @@ onMounted(async () => {
|
||||
crepe.editor.use(copilotConfigCtx)
|
||||
crepe.editor.use(copilotGhostMark)
|
||||
crepe.editor.use(copilotPlugin)
|
||||
|
||||
await crepe.create()
|
||||
|
||||
crepe.on((listener) => {
|
||||
@@ -201,129 +176,136 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.doc-block-crepe {
|
||||
position: relative;
|
||||
margin: 14px 0;
|
||||
border: 1px solid color-mix(in srgb, var(--panel-border) 72%, transparent);
|
||||
border-radius: 18px;
|
||||
.doc-card {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 8px 0;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.12);
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
overflow: hidden;
|
||||
background: linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 82%, transparent) 0%, color-mix(in srgb, var(--crepe-color-surface-low) 88%, transparent) 100%);
|
||||
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(10px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.doc-header {
|
||||
.doc-card__header {
|
||||
display: grid;
|
||||
grid-template-columns: 4px 24px minmax(0, 1fr) auto;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--btn-bg) 76%, transparent) 0%, color-mix(in srgb, var(--crepe-color-surface) 78%, transparent) 100%);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 76%, transparent);
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid rgba(59, 130, 246, 0.1);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.doc-accent {
|
||||
width: 4px;
|
||||
height: 36px;
|
||||
.doc-card__badge {
|
||||
min-width: 48px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, #4f8cff 0%, #7dc1ff 100%);
|
||||
box-shadow: 0 0 18px rgba(79, 140, 255, 0.32);
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.doc-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--btn-fg);
|
||||
}
|
||||
|
||||
.doc-meta {
|
||||
.doc-card__meta {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.doc-name {
|
||||
font-size: 14px;
|
||||
.doc-card__name {
|
||||
color: #1e293b;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--app-text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.doc-subline {
|
||||
.doc-card__time {
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
color: var(--muted-text);
|
||||
color: #64748b;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.doc-actions {
|
||||
.doc-card__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid color-mix(in srgb, var(--panel-border) 72%, transparent);
|
||||
border-radius: 10px;
|
||||
background: color-mix(in srgb, var(--btn-bg) 84%, transparent);
|
||||
color: var(--btn-fg);
|
||||
cursor: pointer;
|
||||
.doc-card__btn {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.12);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
color: #64748b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
background: var(--btn-hover-bg);
|
||||
border-color: var(--btn-hover-bg);
|
||||
color: var(--btn-hover-fg);
|
||||
.doc-card__btn:hover {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-color: rgba(59, 130, 246, 0.25);
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.action-btn-danger:hover {
|
||||
background: rgba(220, 38, 38, 0.12);
|
||||
border-color: rgba(220, 38, 38, 0.22);
|
||||
color: #dc2626;
|
||||
.doc-card__btn--danger:hover {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-color: rgba(239, 68, 68, 0.2);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.doc-editor {
|
||||
padding: 10px 12px 12px;
|
||||
.doc-card__body {
|
||||
padding: 8px 10px;
|
||||
background: rgba(248, 250, 252, 0.5);
|
||||
}
|
||||
|
||||
.inner-crepe {
|
||||
border-radius: 14px;
|
||||
.doc-card__editor {
|
||||
min-height: 48px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.08);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
overflow: hidden;
|
||||
background: color-mix(in srgb, var(--crepe-color-background) 78%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--panel-border) 68%, transparent);
|
||||
}
|
||||
|
||||
.inner-crepe :deep(.milkdown) {
|
||||
.doc-card__editor :deep(.milkdown) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.inner-crepe :deep(.milkdown__main),
|
||||
.inner-crepe :deep(.milkdown__editor) {
|
||||
.doc-card__editor :deep(.milkdown__main),
|
||||
.doc-card__editor :deep(.milkdown__editor) {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.inner-crepe :deep(.ProseMirror) {
|
||||
min-height: 92px;
|
||||
padding: 10px 12px 14px !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.7;
|
||||
.doc-card__editor :deep(.ProseMirror) {
|
||||
min-height: 80px;
|
||||
padding: 10px 12px 12px !important;
|
||||
font-size: 13px !important;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.inner-crepe :deep(.ProseMirror h1),
|
||||
.inner-crepe :deep(.ProseMirror h2),
|
||||
.inner-crepe :deep(.ProseMirror h3),
|
||||
.inner-crepe :deep(.ProseMirror p),
|
||||
.inner-crepe :deep(.ProseMirror li),
|
||||
.inner-crepe :deep(.ProseMirror blockquote),
|
||||
.inner-crepe :deep(.ProseMirror code) {
|
||||
font-size: inherit;
|
||||
.doc-card__editor :deep(.ProseMirror > *:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.doc-card__editor :deep(.ProseMirror p:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.doc-card__editor :deep(.milkdown__toolbar),
|
||||
.doc-card__editor :deep(.milkdown__menu),
|
||||
.doc-card__editor :deep(.milkdown__statusbar),
|
||||
.doc-card__editor :deep(.milkdown-slate-toolbar),
|
||||
.doc-card__editor :deep(.milkdown-bubble-menu) {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user